@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Sans (SIL OFL, self-hostet) — bruges kun på bookingsiden,
   hvor typografien matcher lukassvendsen.dk */
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/instrumentsans-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/instrumentsans-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-latin.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('/assets/fonts/spacemono-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ============================================================
   Bygget 1:1 efter forlægget (etkreativt.dk):

   - to grundfarver, #111 og #fafafa, alt andet er alpha-trin
     af de to (8/16/32/48/64/88 %) — plus CTA-petrol #0f6f68
     (bevidst væk fra forlæggets blå, så sitet står selv)
   - Inter til overskrifter (900/800/700), Lora til brødtekst,
     Space Mono til labels — samme trio som altid
   - radius-skala: BEVIDST KANTET som brud med forlæggets bløde
     16px-runding: 3 knapper/felter · 6 kort · 8 store kort ·
     10 cirkelknapper · 2 etiketter
   - «liquid glass»: bjælken ved scroll, hero-kortet og glas-
     knapperne er frostet glas (backdrop-filter, se --glas-bg)
   - sektionsafstande 80/120/160 px (48/64/96 på mobil)
   - to temaer der følger systemet: --side/--blaek-tokens skifter
     under prefers-color-scheme, mens forlæggets altid-mørke zoner
     (hero, nøgletal, case, filmkort, footer) bruger de FASTE ankre
     --moerk/--lys og ser ens ud i begge tilstande
   - NB: forlæggets overskrifter er STØRRE på mobil end på
     desktop (fx h2 28→36 px). Det er ikke en fejl herunder.
   ============================================================ */
:root{
  --f-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-serif:'Lora',Georgia,'Times New Roman',serif;
  --f-mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --moerk:#111111;
  --lys:#fafafa;
  --cta:#0f6f68;
  --cta-hover:#0b5550;
  --fejl-roed:#c94040;

  /* Temafølsomme flader og blæk — skifter under prefers-color-scheme */
  --side:#fafafa;
  --side-dyb:#e0e0e0;
  --side-loeft:#fafafa;
  --side-klar:rgba(250,250,250,0);
  --side-halv:rgba(250,250,250,.35);
  --fade-baand:min(11%,100px);
  --blaek:#111111;
  --blaek-fyld:rgba(17,17,17,.88);
  --pille-bg:rgba(250,250,250,.64);
  --felt-bg:rgba(17,17,17,.08);
  --felt-bg-fokus:rgba(17,17,17,.16);
  --tekst:rgba(17,17,17,.88);
  --tekst-svag:rgba(17,17,17,.64);
  --tekst-svagere:rgba(17,17,17,.48);
  --linje:rgba(17,17,17,.16);
  --linje-staerk:rgba(17,17,17,.48);
  --lys-tekst:rgba(250,250,250,.88);
  --lys-svag:rgba(250,250,250,.64);
  --lys-linje:rgba(250,250,250,.16);

  --r-felt:3px;
  --r-kort:6px;
  --r-stor:8px;
  --r-cirkel:10px;
  --r-knap:16px;

  /* Knappernes accentfarver — forlæggets dybe blå, ens i lys og mørk.
     Admins egne farvevalg lægges ovenpå via reglerne fra dele.php. */
  --knap-bg:#0055ff;
  --knap-hover:#0044cc;
  --knap-tekst:#fafafa;

  /* Glas-kortet under hero-videoen: mørkt glas med lys tekst i begge
     temaer — det ligger altid oven på den mørke video */
  --glaskort-flade:rgba(17,17,17,.42);
  --glaskort-massiv:#111111;
  --glaskort-tekst:rgba(250,250,250,.88);
  --glaskort-tekst-svag:rgba(250,250,250,.64);

  /* Liquid glass — flade + blur til bjælke, kort og glasknapper.
     Opskriften (som liquidglassdesign.com): backdrop-filter med blur +
     saturate, en lys «rim» foroven der efterligner lysets brydning i
     glaskanten, en skrå lysstribe hen over fladen og en blød ydre skygge. */
  --glas-bg:rgba(250,250,250,.72);
  --glas-kort-bg:rgba(250,250,250,.7);
  /* Knapperne: gennemsigtigt hvidt glas — kraftigere ved hover */
  --glas-knap-bg:rgba(250,250,250,.5);
  --glas-knap-hover:rgba(250,250,250,.85);
  /* Sløret over ufokuserede kort i filmslideren: hvidt i lys tilstand
     (som forlægget), mørkt i mørk tilstand */
  --slider-daemp:rgba(250,250,250,.64);

  --wrap:1800px;
  --pad:32px;
  --sek-lille:80px;
  --sek-mellem:120px;
  --sek-stor:160px;
  --hoejde:74px;
}
@media (prefers-color-scheme:dark){
  :root{
    --side:#111111;
    --side-dyb:#1c1c1c;
    --side-loeft:#111111;
    --side-klar:rgba(17,17,17,0);
    --side-halv:rgba(17,17,17,.5);
    --fade-baand:min(18%,160px);
    --blaek:#fafafa;
    --blaek-fyld:rgba(250,250,250,.88);
    --pille-bg:rgba(250,250,250,.08);
    --felt-bg:rgba(250,250,250,.08);
    --felt-bg-fokus:rgba(250,250,250,.16);
    --tekst:rgba(250,250,250,.88);
    --tekst-svag:rgba(250,250,250,.64);
    --tekst-svagere:rgba(250,250,250,.48);
    --linje:rgba(250,250,250,.16);
    --linje-staerk:rgba(250,250,250,.48);
    --glas-bg:rgba(17,17,17,.6);
    --glas-kort-bg:rgba(17,17,17,.55);
    --glas-knap-bg:rgba(250,250,250,.1);
    --glas-knap-hover:rgba(250,250,250,.22);
    --slider-daemp:rgba(17,17,17,.55);
  }
}
@media (max-width:767px){
  :root{
    --pad:16px;
    --sek-lille:48px;
    --sek-mellem:64px;
    --sek-stor:96px;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hoejde) + 16px);-webkit-text-size-adjust:100%;color-scheme:light dark}
body{
  margin:0;background:var(--side);color:var(--tekst);
  font-family:var(--f-serif);font-size:16px;line-height:24px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1rem}

/* Overskriftsskalaen — forlæggets rå px-værdier, mobil er størst */
h1,h2,h3,h4{margin:0;font-family:var(--f-sans)}
h1{font-size:40px;line-height:44px;font-weight:900;letter-spacing:-2px}
h2{font-size:28px;line-height:34px;font-weight:800;letter-spacing:-1px}
h3{font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.5px}
.titel-lille{font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.5px}
@media (max-width:767px){
  body{font-size:15px;line-height:24px}
  h1{font-size:40px;line-height:44px;letter-spacing:-1.5px}
  h2{font-size:30px;line-height:36px;letter-spacing:-1px}
  h3{font-size:24px;line-height:30px;letter-spacing:-.5px}
  .titel-lille{font-size:26px;line-height:32px}
}
@media (max-width:479px){
  h1{font-size:36px;line-height:40px}
  h2{font-size:28px;line-height:34px}
}

:focus-visible{outline:2px solid var(--blaek);outline-offset:3px}
/* Fokusrammen skal kunne ses på de mørke flader */
.top-over :focus-visible,.hero :focus-visible,.stats :focus-visible,
.case-kort :focus-visible,.bund :focus-visible,.film-flade:focus-visible,
.afspiller :focus-visible{outline-color:var(--lys)}
.top-over.skygge :focus-visible,.top-over.menu-aaben :focus-visible{outline-color:var(--blaek)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:1200;background:var(--blaek);color:var(--side);padding:.6rem 1rem;border-radius:var(--r-felt)}

/* ---------- Etiketter — labels i Space Mono, kantede med fin ramme ---------- */
.etiket,.eyebrow{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 8px;border-radius:2px;
  background:var(--pille-bg);backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(250,250,250,.25);
  border:1px solid var(--linje);
  color:var(--tekst);
  font-family:var(--f-mono);font-weight:400;font-size:10px;line-height:14px;
  letter-spacing:2px;text-transform:uppercase;
  margin:0;
}
.etiket-dyb{background:rgba(17,17,17,.32);color:var(--lys-tekst);border-color:rgba(250,250,250,.16)}
/* Bevidst afvigelse fra forlægget: dets labels falder til 8px på mobil —
   det er reelt ulæseligt, så vores gulv er 10px alle steder. */

/* ---------- Knapper — massiv accentflade, som hos forlægget ----------
   Primær: dyb blå flade med hvid tekst, bløde 16px-hjørner og et mørkere
   blåt hover. Teksten «ruller» en linje op ved hover (app.js pakker den i
   .btn-rul). Knappen er ens i alle zoner og temaer — derfor er der ingen
   scroll- eller hero-undtagelser længere. Farverne bor i variabler, så
   admins egne valg og gennemsigtighed kan lægges ovenpå (dele.php). */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:var(--r-knap);
  background-color:var(--knap-bg);color:var(--knap-tekst);
  border:1px solid rgba(250,250,250,.08);
  font-family:var(--f-sans);font-weight:700;font-size:16px;line-height:24px;letter-spacing:0;
  cursor:pointer;transition:background-color .3s,color .3s,border-color .3s;
}
.btn:hover{background-color:var(--knap-hover)}
.btn-pil{width:16px;height:16px;flex:none;margin-right:-4px}
.btn-lille{padding:8px 12px;font-size:14px;line-height:16px}
.btn-lille .btn-pil{width:12px;height:12px;margin-right:-2px}
/* Rulle-effekten: tekstfeltet er masken, kopien males med tekstskyggen én
   linje nede, og det hele løftes én linje ved hover. Browsere uden
   lh-enheden springer bare effekten over og beholder farveskiftet. */
.btn-tekst{display:block;overflow:hidden}
.btn-rul{display:block;text-shadow:0 1lh 0 currentColor;transition:transform .3s}
.btn:hover .btn-rul{transform:translateY(-1lh)}
.red-aktiv .btn .btn-rul{transform:none;text-shadow:none}  /* stå stille under redigering */
/* Sekundær: gennemsigtig med tynd streg — fyldt mørk flade ved hover */
.btn-ghost{
  background-color:transparent;color:var(--blaek);border-color:var(--linje-staerk);
}
.btn-ghost:hover{background-color:var(--blaek-fyld);color:var(--side);border-color:rgba(250,250,250,.08)}
/* Sekundæren over hero-videoen (altid mørk): hvid flade med sort tekst —
   og ved hover samme farver som de andre knapper (blå flade, hvid tekst) */
.hero .btn-ghost{background-color:var(--lys);color:var(--moerk);border-color:rgba(17,17,17,.08)}
.hero .btn-ghost:hover{background-color:var(--knap-hover);color:var(--knap-tekst);border-color:rgba(250,250,250,.08)}
@media (max-width:767px){
  .btn{padding:10px 16px;font-size:14px;line-height:20px}
  .btn-lille{padding:8px 12px;font-size:12px;line-height:16px}
  .btn-pil{width:12px;height:12px;margin-right:-2px}
}

.pil-link{
  font-family:var(--f-sans);font-weight:700;font-size:14px;line-height:16px;
  border-bottom:1px solid var(--linje-staerk);padding-bottom:2px;
  transition:border-color .2s;
}
.pil-link:hover{border-bottom-color:var(--cta);color:var(--cta)}
/* Markeret tekst i sitets egen farve — en lille signatur, forlægget ikke har */
::selection{background:var(--cta);color:var(--lys)}

/* ---------- Sidehoved — mørk bjælke over hero, lys og fast ved scroll ---------- */
.top{position:absolute;top:0;left:0;right:0;z-index:999;transition:background-color .3s ease,color .3s ease}
/* Gitter med 1fr i hver side: logo til venstre, menupunkterne PRÆCIS i
   midten af bjælken, CTA til højre — uanset de to siders bredde */
.top-inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding-top:20px;padding-bottom:20px;
}
.top-inner .logo{justify-self:start}
.top-hoejre{display:flex;align-items:center;gap:16px;justify-self:end}
@media (max-width:767px){
  .top-inner{padding-top:16px;padding-bottom:16px}
}
/* Logoet: rent ord-mærke «BARE FILM» — fed BARE (900) mod tynd FILM (200).
   Følger bjælkens tekstfarve i alle tilstande. */
.logo{display:inline-flex;align-items:center}
.logo-ord{
  display:inline-flex;gap:.45em;line-height:1;
  font-family:var(--f-sans);font-size:20px;
  text-transform:uppercase;letter-spacing:.14em;
}
/* font-variation-settings tvinger den variable wght-akse direkte — nogle
   browsere mapper font-weight upålideligt mod en 100-900-akse.
   Kun BARNET af .logo-ord må blive tyndt («Film»): en tekst rettet i
   redigeringen pakkes ind i et ekstra span, og et alment span-mål ville
   så også gøre det fede «Bare» tyndt. */
.logo-ord b,.logo-ord b span{font-weight:900;font-variation-settings:'wght' 900}
.logo-ord>span{font-weight:200;font-variation-settings:'wght' 200}
.nav{display:flex;align-items:center;gap:4px}
.nav-link{
  font-family:var(--f-sans);font-weight:700;font-size:14px;line-height:16px;
  padding:8px 12px;border:1px solid transparent;border-radius:var(--r-stor);
  transition:color .3s,background-color .3s,border-color .3s;
}
.burger{display:none;background:none;border:1px solid var(--linje);border-radius:var(--r-cirkel);padding:6px 10px;cursor:pointer;color:inherit}
.burger span{display:block;width:20px;height:1.5px;background:currentColor;margin:5px 0;transition:transform .25s,opacity .25s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* Over hero: massiv mørk bjælke, hvid tekst */
/* Gennemsigtig i toppen — hero-slørets top-gradient holder den hvide tekst
   læsbar oven på videoen. Ved scroll tager .skygge over med massiv flade. */
.top-over{background:transparent;color:var(--lys)}
.top-over .nav-link:hover{background:rgba(250,250,250,.88);color:var(--moerk);border-color:rgba(17,17,17,.08)}
.top-over .burger{border-color:rgba(250,250,250,.16)}
.top-over.skygge .burger,.top-over.menu-aaben .burger{border-color:var(--linje)}
/* Ved scroll (eller åben menu): fast, massiv bjælke i temaets bundfarve
   med en tynd streg under — som forlæggets sticky-navbar */
.top-over.skygge,.top-over.menu-aaben{
  position:fixed;background:var(--side);color:var(--blaek);
  box-shadow:0 1px 0 0 var(--linje);
}
.top-over.skygge .nav-link:hover,.top-over.menu-aaben .nav-link:hover,
.top-mork .nav-link:hover{background:var(--blaek-fyld);color:var(--side);border-color:rgba(250,250,250,.08)}

/* Undersiderne: lys bjælke der følger med */
.top-mork{position:sticky;background:var(--side);color:var(--blaek);box-shadow:0 1px 0 0 var(--linje)}

/* ---------- Hero — fuldskærmsvideo, venstrestillet, glas-kort i bunden ---------- */
.hero{
  position:relative;overflow:hidden;background:var(--moerk);color:var(--lys-tekst);
  min-height:100vh;min-height:100svh;
  display:flex;
  padding:32px 0;
}
.hero-medie{position:absolute;inset:0;z-index:0}
.hero-medie video,.hero-medie img{width:100%;height:100%;object-fit:cover;display:block}
/* Forlæggets slør er kun en top-gradient under nav'en; bundlaget herunder
   er vores egen livline og BEVIDST kraftigere end forlæggets: overskrift
   og undertekst står lodret centreret direkte på videoen, og admin kan
   vælge en lys film — laget skal holde teksten på 4,5:1 også dér. */
.hero-slor{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(17,17,17,.64),rgba(17,17,17,0) 30%),
    linear-gradient(0deg,rgba(17,17,17,.72),rgba(17,17,17,.45) 50%,rgba(17,17,17,0) 82%);
}
.hero-krop{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
}
.hero-midte{
  margin:auto 0;
  display:flex;flex-direction:column;align-items:flex-start;gap:32px;
  max-width:564px;
}
.hero h1{color:var(--lys-tekst)}
.hero-under{
  font-family:var(--f-serif);font-size:18px;line-height:28px;
  color:var(--lys-tekst);max-width:480px;margin:-24px 0 0;
}
.cta-rk{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

.hero-bund{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
/* Ægte liquid glass: gennemskinnelig mørk flade, så videoen skimtes bag
   kortet — massiv mørk som fallback uden backdrop-filter */
.glas-kort{
  position:relative;
  display:flex;gap:16px;max-width:361px;padding:12px;
  border-radius:var(--r-kort);background:var(--glaskort-massiv);
  box-shadow:0 -1px 0 0 rgba(250,250,250,.16),0 1px 0 0 rgba(250,250,250,.08);
  overflow:hidden;color:var(--glaskort-tekst);
}
@supports (backdrop-filter:blur(1px)){
  .glas-kort{
    background:var(--glaskort-flade);
    backdrop-filter:blur(28px) saturate(1.7) brightness(1.06);
    -webkit-backdrop-filter:blur(28px) saturate(1.7) brightness(1.06);
    /* rim-lys hele vejen rundt (stærkest foroven) + dyb, blød skygge */
    box-shadow:
      inset 0 1px 0 rgba(250,250,250,.3),
      inset 0 -1px 0 rgba(250,250,250,.07),
      inset 1px 0 0 rgba(250,250,250,.12),
      inset -1px 0 0 rgba(250,250,250,.12),
      0 16px 40px rgba(0,0,0,.35);
  }
  /* Skrå lysstribe hen over glasset — «linsen» der fanger lyset */
  .glas-kort::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg,rgba(250,250,250,.14),rgba(250,250,250,.05) 30%,transparent 55%);
  }
}
.glas-kort .etiket-dyb{background:var(--moerk)}
.glas-kort-billede{width:96px;flex:none;border-radius:var(--r-felt);overflow:hidden}
.glas-kort-billede img{width:100%;height:100%;object-fit:cover}
.glas-kort-indhold{display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-width:0}
.glas-kort-tekst{font-family:var(--f-sans);font-weight:700;font-size:12px;line-height:20px}
.glas-kort-bund{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.glas-kort .btn-pil{width:12px;height:12px;color:var(--glaskort-tekst-svag);margin:0}
.glas-kort:hover .btn-pil{color:var(--glaskort-tekst)}

.afspil-knap{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  padding:8px 12px;border-radius:var(--r-cirkel);
  border:1px solid rgba(17,17,17,.16);background:rgba(17,17,17,.08);
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);color:var(--lys);cursor:pointer;
  font-size:10px;line-height:14px;
  box-shadow:inset 0 1px 0 rgba(250,250,250,.3),0 1px 0 0 rgba(250,250,250,.08);
  transition:background-color .3s,color .3s;
}
.afspil-knap.pauset{background:var(--lys);color:var(--moerk)}

@media (max-width:767px){
  .hero{padding-top:96px}
  .hero-slor{
    background:
      linear-gradient(180deg,rgba(17,17,17,.64),rgba(17,17,17,0) 75%),
      linear-gradient(0deg,rgba(17,17,17,.72),rgba(17,17,17,.45) 50%,rgba(17,17,17,0) 82%);
  }
  .hero-midte{gap:24px;max-width:none}
  .hero-under{font-size:16px;line-height:24px;margin-top:-8px}
  /* Som forlæggets mobil-hero: kun overskrift, undertekst og knapper —
     glas-kortet fylder for meget på en lille skærm og gemmes væk her.
     Porteføljen kan stadig nås via filmsektionen og menuen. */
  .hero-bund{display:none}
}
@media (max-width:479px){
  .hero{padding-top:88px;padding-bottom:24px}
  .cta-rk{width:100%}
  .cta-rk .btn{flex:1 1 auto}
  .glas-kort{max-width:calc(100% - 64px)}
}

/* ---------- Sektioner ---------- */
.sek{position:relative;z-index:2;padding:var(--sek-lille) 0;background:var(--side)}
.sek-hoved{display:flex;flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:64px}
.sek-hoved-midt{align-items:center;text-align:center;max-width:680px;margin-left:auto;margin-right:auto;margin-bottom:80px}
.sek-hoved p.etiket{margin:0}
@media (max-width:767px){
  .sek-hoved{gap:16px;margin-bottom:40px}
  .sek-hoved-midt{margin-bottom:40px}
}

/* ---------- Film-slideren — smal centreret maske, nabokort kigger frem ---------- */
.sek-film{padding-top:var(--sek-mellem);padding-bottom:var(--sek-stor);overflow:clip}
.sek-film .sek-hoved{margin-bottom:64px}

.film-slider{position:relative;--kortbredde:332px;--korthoejde:504px}
.slider-styr-wrap{position:relative}
.slider-styr{
  position:absolute;right:var(--pad);bottom:64px;z-index:4;
  display:flex;gap:10px;
}
.slider-pil{
  display:flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:var(--r-cirkel);
  border:1px solid var(--linje);background:var(--pille-bg);
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);color:var(--blaek);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(250,250,250,.35),inset 0 -1px 0 rgba(17,17,17,.06),0 8px 24px rgba(17,17,17,.12);
  transition:border-color .3s,background-color .3s,color .3s;
}
.slider-pil:hover{background:var(--blaek-fyld);border-color:rgba(250,250,250,.08);color:var(--side)}
.slider-pil svg{width:24px;height:24px}
.slider-pil[hidden]{display:none}

/* Banen er en almindelig scroller: swipe, hjul og piletaster virker af sig
   selv, og uden JavaScript kan der stadig bladres med fingeren. Luft i
   enderne gør, at første og sidste kort også kan stå i midten. */
.slider-spor{
  display:flex;gap:16px;
  overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
  /* 8px lodret luft, så kortenes fokusring (2px + 3px offset) ikke klippes */
  padding:8px max(var(--pad),calc((100% - var(--kortbredde)) / 2));
}
/* Som forlægget: på tablet og mobil venstrestilles det aktive kort i stedet
   for at stå i midten — app.js læser justeringen ud af padding-left */
@media (max-width:991px){
  .slider-spor{padding-left:var(--pad);padding-right:calc(100% - var(--kortbredde) - var(--pad))}
}
.slider-spor::-webkit-scrollbar{display:none}
.slider-spor:focus-visible{outline:2px solid var(--blaek);outline-offset:8px;border-radius:var(--r-kort)}
.slider-spor > .film-kort{flex:0 0 var(--kortbredde)}
/* I slideren har alle kort forlæggets faste mål — 332×504 (264×360 på mobil) */
.slider-spor .film-flade{height:var(--korthoejde);aspect-ratio:auto!important}

/* Kortene uden for fokus tones ned af et halvgennemsigtigt lag — hvidt i
   lys tilstand (som forlægget), mørkt i mørk tilstand; kun den fokuserede
   film står klart. Laget ligger over tag og titel med vilje: hele kortet
   træder tilbage. .slider-klar sættes af app.js, så alle kort står klart,
   når der ikke er JavaScript til at udpege det fokuserede. */
.slider-spor .film-flade::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--slider-daemp);opacity:0;transition:opacity .45s ease;
}
.slider-klar .film-kort:not(.aktiv) .film-flade::after{opacity:1}

/* ---------- Lightbox — filmen i fuld størrelse oven på siden ---------- */
.film-lightbox{
  border:0;padding:0;margin:auto;background:transparent;overflow:visible;
  max-width:none;max-height:none;
}
.film-lightbox::backdrop{background:rgba(17,17,17,.88);backdrop-filter:blur(8px)}
.film-lightbox video{
  display:block;max-width:min(1376px,92vw);max-height:86vh;
  width:auto;height:auto;border-radius:var(--r-kort);background:#000;
}
.lightbox-luk{
  position:absolute;right:0;bottom:100%;margin-bottom:12px;
  display:flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:var(--r-cirkel);
  border:1px solid rgba(250,250,250,.16);background:rgba(17,17,17,.5);
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(250,250,250,.25);
  color:var(--lys);cursor:pointer;font-size:14px;line-height:1;
  transition:background-color .3s;
}
.lightbox-luk:hover{background:rgba(250,250,250,.88);color:var(--moerk)}
.film-lightbox :focus-visible{outline-color:var(--lys)}
.film-alle{margin:24px auto 0;text-align:right}
@media (max-width:767px){
  .film-slider{--kortbredde:264px;--korthoejde:360px}
  /* Overskriftens 64px bundluft er desktop-rytme — på mobil står pilene i
     eget flow under teksten, og luften skal være kort, så pile og film
     følger teksten. Gælder KUN filmsektionen. */
  .sek-film .sek-hoved{margin-bottom:20px}
  /* Pilene står inde i .wrap, som selv giver sidepadding — ingen egen */
  .slider-styr{position:static;justify-content:flex-start;padding:0;margin-bottom:16px}
  .slider-spor{gap:12px}
  .slider-pil{padding:10px 12px}
}

/* ---------- Filmkortet — video-flade med tag-pille og titel, delt med porteføljen ---------- */
.film-kort{display:block;border-radius:var(--r-kort)}
.film-kort[hidden]{display:none}
.film-flade{
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;border-radius:var(--r-kort);
  background:var(--moerk);padding:20px;
}
.film-flade img,.film-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.film-preview{opacity:0;transition:opacity .45s ease;z-index:1}
.film-kort.spiller .film-preview{opacity:1}
/* Kraftigere end forlæggets .64/35 % — titlen skal holde kontrasten på en
   lys poster, og px-gulvet sikrer de lave 16:9-kort i porteføljens gitter */
.film-slor{
  position:absolute;left:0;right:0;bottom:0;height:max(50%,160px);z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(17,17,17,.8),rgba(17,17,17,0));
}
.film-tag{
  position:relative;z-index:2;align-self:flex-start;
  display:inline-flex;padding:4px 8px;border-radius:var(--r-stor);
  background:rgba(17,17,17,.55);backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(250,250,250,.25);
  color:var(--lys-tekst);
  font-family:var(--f-mono);font-size:10px;line-height:14px;letter-spacing:2px;text-transform:uppercase;
}
.film-bund{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.film-tekst{display:flex;flex-direction:column;min-width:0}
.film-navn{
  font-family:var(--f-sans);font-weight:700;font-size:16px;line-height:24px;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Arver bodys størrelse (16/24, mobil 14/20) som forlæggets .body-medium;
   .88 frem for forlæggets .64 — den skal kunne læses på en lys poster */
.film-meta{font-family:var(--f-serif);color:var(--lys-tekst)}
@media (max-width:767px){
  .film-flade{padding:16px}
  .film-navn{font-size:14px;line-height:20px}
}

/* Porteføljens gitter — deler kortet med forsiden, men beholder filmens format */
.film-gitter{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:16px;align-items:start;
}
@media (max-width:767px){
  .film-gitter{grid-template-columns:1fr;gap:12px}
}

/* En tekst, admin har slået fra, efterlader kun et tomt mærke — og så
   fjernes hele linjen den sad i */
:has(> .t-vaek){display:none}
/* Sidder den fjernede tekst på en knap eller et pil-link, skal HELE knappen
   væk — ikke kun tekstfeltet, så en tom pille stod tilbage */
.btn:has(.t-vaek),.pil-link:has(.t-vaek),.ekstra-knap:has(.t-vaek){display:none}

/* Admins egne ekstra knapper (⊕ Tilføj knap i redigeringen): knappen med en
   lille redigerbar adresse-linje under sig — linjen ses kun under redigering */
.ekstra-knap{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px}

.tip{color:var(--tekst-svag);font-size:14px}
.tip a{border-bottom:1px solid var(--linje-staerk)}

/* ---------- Nøgletal — mørk fuldskærmssektion med film-loop ---------- */
.stats{
  position:relative;overflow:hidden;background:var(--moerk);color:var(--lys-tekst);
  min-height:70vh;min-height:70svh;
  display:flex;padding:24px 0 140px;
}
.stats-medie{position:absolute;inset:0;z-index:0}
.stats-medie video,.stats-medie img{width:100%;height:100%;object-fit:cover;display:block}
/* Fladt .4-lag under gradienterne: overskriften står lodret centreret, hvor
   gradienterne alene kun dækker delvist — laget holder den på 4,5:1.
   Fade i BEGGE ender: i bunden toner videoen ud i mørkt (og videre ind i
   case-kortets mørke gradient), og i TOPPEN toner den ud i SIDENS egen
   baggrund — så filmsektionen ovenover glider sømløst over i videoen,
   uden hård kant. --side gør faden temafølsom. */
.stats-slor{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-color:rgba(17,17,17,.4);
  background-image:
    linear-gradient(180deg,var(--side),var(--side-halv) calc(var(--fade-baand) * .33),var(--side-klar) var(--fade-baand)),
    linear-gradient(0deg,var(--side-dyb),var(--moerk) 130px,rgba(17,17,17,0) 60%);
}
.stats .etiket-dyb{background:rgba(17,17,17,.64)}
/* Toppadding ≥ fadens højde: den hvide overskrift må aldrig stå oppe i den
   lyse fade-zone — heller ikke på lave mobilskærme, hvor midten rykker op */
.stats-krop{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(80px,12vh,120px);padding-bottom:16px}
.stats-hoved{
  margin:auto;display:flex;flex-direction:column;align-items:center;gap:24px;
  width:100%;max-width:680px;text-align:center;padding:24px 0;
}
.stats-hoved h2{color:#fff}
.stats-gitter{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:32px;width:100%}
.stats-punkt{
  display:flex;flex-direction:column;gap:24px;padding:0 24px;
  border-left:1px solid var(--lys-linje);
}
.stats-tal{font-family:var(--f-sans);font-weight:800;font-size:28px;line-height:34px;letter-spacing:-1px;color:#fff}
.stats-tekst{font-family:var(--f-serif);font-size:12px;line-height:20px;color:var(--lys)}
/* Som forlægget trapper gitteret ned: 4 spalter → 2 → én enkelt på mobil,
   hvor punkterne står under hinanden med hver sin streg i venstre side */
@media (max-width:991px){
  .stats-gitter{grid-template-columns:1fr 1fr;gap:32px 24px}
}
@media (max-width:767px){
  .stats{padding:16px 0 96px;min-height:0}
  .stats-krop{padding-top:clamp(72px,10vh,100px)}
  .stats-hoved{gap:16px;padding:16px 0 32px}
  .stats-gitter{grid-template-columns:1fr;gap:28px}
  .stats-punkt{gap:8px;padding:0 16px}
  .stats-tal{font-size:32px;line-height:36px;letter-spacing:-1px}
  .stats-tekst{font-size:14px;line-height:20px}
}

/* ---------- Case-kortet — film-still bag, citat, om-tekst i bunden ---------- */
.sek-case{
  padding-top:120px;padding-bottom:var(--sek-lille);
  background:linear-gradient(var(--moerk) 0%,var(--side-dyb) 20%);
}
.case-kort{
  position:relative;width:100%;border-radius:var(--r-stor);overflow:hidden;
  background-color:var(--moerk);background-position:50%;background-size:cover;
  color:var(--lys-tekst);
}
.case-slor{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,var(--moerk),rgba(17,17,17,0));
}
.case-indhold{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  padding:32px;min-height:612px;
}
.case-citat{
  grid-column:2;display:flex;flex-direction:column;gap:32px;
  max-width:448px;font-style:italic;
}
.case-citat-tekst{font-family:var(--f-sans);font-weight:700;font-size:18px;line-height:24px;letter-spacing:-.5px;color:var(--lys);margin:0}
.case-citat-af{display:flex;flex-direction:column;font-style:normal;margin:0}
.case-citat-navn{font-family:var(--f-sans);font-weight:700;font-size:16px;line-height:24px;color:var(--lys)}
.case-citat-titel{color:var(--lys-svag)}
.case-bund{
  position:absolute;bottom:0;left:0;width:100%;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:32px;
  padding:32px;color:#fff;
}
.case-bund h3{color:#fff}
.case-bund-tekst{display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:448px}
.case-bund-tekst p{margin:0}
@media (max-width:991px){
  .case-indhold{grid-template-columns:1fr;min-height:0;gap:64px;padding-bottom:0}
  .case-citat{grid-column:1;padding-top:96px}
  /* Bundfeltet rummer selve om-teksten — forlægget skjuler sit på tablet,
     men vores indhold skal med, så det stables i stedet under citatet */
  .case-bund{position:relative;grid-template-columns:1fr;gap:16px;padding-top:48px}
}
@media (max-width:767px){
  .case-indhold{padding:24px;padding-bottom:0}
  .case-citat-tekst{font-size:24px;line-height:28px}
  .case-bund{padding:24px;padding-top:40px}
}

/* ---------- Ydelses-fliserne — lyse kort på den dybe grå flade ---------- */
.sek-ydelser{background:var(--side-dyb)}
.flise-gitter{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;
  max-width:1028px;margin:0 auto;
}
.flise{
  display:flex;flex-direction:column;align-items:flex-start;gap:24px;
  background:var(--side-loeft);border-radius:var(--r-stor);padding:32px;
}
.flise-ikon{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:48px;height:48px;border-radius:var(--r-kort);background:var(--side-dyb);
  box-shadow:0 -1px 0 0 rgba(250,250,250,.16),0 1px 0 0 rgba(250,250,250,.08);
  color:var(--blaek);
}
.flise-ikon svg{width:24px;height:24px}
.flise-tekst{display:flex;flex-direction:column;gap:8px}
.flise-tekst h3{font-size:16px;line-height:24px;letter-spacing:0}
/* 14px frem for forlæggets 12 — beskrivelserne er primært indhold her */
.flise-tekst p{font-size:14px;line-height:22px;color:var(--blaek);margin:0}
.flise-cta{display:flex;justify-content:center;margin:64px 0 0}
@media (max-width:767px){
  .flise-gitter{grid-template-columns:1fr 1fr;gap:12px}
  .flise{padding:24px;gap:16px}
  .flise-ikon{width:40px;height:40px}
  .flise-ikon svg{width:20px;height:20px}
  .flise-tekst h3{font-size:16px;line-height:22px}
  .flise-cta{margin-top:48px}
}
@media (max-width:479px){
  .flise-gitter{grid-template-columns:1fr}
  .flise{flex-direction:row;align-items:flex-start;gap:16px;padding:20px}
  .flise-tekst{min-width:0}
}

/* ---------- Team-kortet ---------- */
.sek-team{
  padding-top:var(--sek-mellem);padding-bottom:var(--sek-stor);
  background:linear-gradient(var(--side-dyb) 0%,var(--side) 25%);
}
.sek-team .sek-hoved{margin-bottom:40px}
.team-gitter{
  display:grid;grid-template-columns:440px minmax(0,560px);
  justify-content:center;align-items:start;
  column-gap:64px;row-gap:32px;
}
.team-kort{position:relative;width:100%}
.team-foto{
  aspect-ratio:4/5;width:100%;object-fit:cover;object-position:50% 50%;
  border-radius:var(--r-kort);
}
.team-foto-tom{
  display:grid;place-items:center;background:var(--side-dyb);
  color:var(--tekst-svag);font-family:var(--f-mono);font-size:10px;
  letter-spacing:2px;text-transform:uppercase;
}
/* Holdet — bureau-visning når der er ansatte (sat i admin under Ansatte):
   personkort med foto 4/5, navn og stilling, som forlæggets team-sektion */
.hold-gitter{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,260px));
  justify-content:center;gap:40px 24px;margin-bottom:56px;
}
.hold-kort{margin:0}
.hold-foto{
  display:block;aspect-ratio:4/5;width:100%;object-fit:cover;object-position:50% 50%;
  border-radius:var(--r-kort);background:var(--side-dyb);
}
.hold-navn{font-family:var(--f-sans);font-weight:700;font-size:18px;line-height:24px;letter-spacing:-.25px;margin:14px 0 4px;color:var(--blaek)}
.hold-rolle{font-family:var(--f-mono);font-size:11px;line-height:16px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tekst-svag);margin:0}
.team-hold-om{max-width:560px;margin:0 auto;align-items:center;text-align:center}
@media (max-width:767px){
  .hold-gitter{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px;margin-bottom:40px}
  .hold-navn{font-size:16px;line-height:22px}
}

.team-om{display:flex;flex-direction:column;align-items:flex-start;color:var(--blaek)}
.team-om-navn{font-family:var(--f-sans);font-weight:700;font-size:32px;line-height:36px;letter-spacing:-1px;margin:0 0 6px}
.team-om-rolle{font-size:14px;line-height:20px;color:var(--tekst-svag);margin:0 0 24px}
.team-om p{font-size:15px;line-height:24px;margin:0 0 14px}
.team-om-knapper{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:16px}
@media (max-width:991px){
  .team-gitter{grid-template-columns:320px minmax(0,1fr);column-gap:32px}
}
@media (max-width:767px){
  .team-gitter{grid-template-columns:minmax(0,300px);justify-items:center;row-gap:24px}
  .team-kort{max-width:260px}
  .team-om{align-items:center;text-align:center}
  .team-om-navn{font-size:26px;line-height:32px}
  .team-om-rolle{margin-bottom:16px}
  .team-om-knapper{justify-content:center}
}

/* ---------- Kontakt — lyst kort på sløret film-still ---------- */
.kontakt{
  position:relative;padding:var(--sek-mellem) 0;overflow:hidden;
  background-color:var(--moerk);
}
/* Baggrundsbilledet ligger i sit eget lag, så admins valgte dækning
   (opacity, sat i admin under Billeder) kan tone det mod sektionens
   mørke bund uden at røre sløret eller kortet ovenpå */
.kontakt-bag{
  position:absolute;inset:0;z-index:0;
  background-position:50%;background-size:cover;
}
.kontakt-slor{
  position:absolute;inset:0;z-index:1;
  background:rgba(17,17,17,.32);backdrop-filter:blur(16px);
}
.kontakt .wrap{position:relative;z-index:2}
.kontakt-kort{
  display:grid;grid-template-columns:1fr 1fr;column-gap:132px;row-gap:64px;
  background:var(--side);border-radius:var(--r-stor);padding:64px;color:var(--blaek);
  /* hairline'en gør kortet synligt i mørk tilstand (mørkt kort på mørkt,
     sløret still) — i lys tilstand er den praktisk talt usynlig */
  border:1px solid var(--linje);
}
/* Liquid glass: film-stillet bag sektionen skimtes gennem kortet —
   massiv flade som fallback uden backdrop-filter */
@supports (backdrop-filter:blur(1px)){
  .kontakt-kort{
    background:var(--glas-kort-bg);
    backdrop-filter:blur(30px) saturate(1.5);
    -webkit-backdrop-filter:blur(30px) saturate(1.5);
    box-shadow:inset 0 1px 0 rgba(250,250,250,.35),0 24px 60px rgba(0,0,0,.25);
  }
}
/* min-width:0 er værnet mod grid-blowout: marquee-sporet er width:max-content,
   og uden det ville 1fr-kolonnens auto-minimum vokse med sporet */
.kontakt-venstre{display:flex;flex-direction:column;justify-content:space-between;gap:64px;min-width:0}
.kontakt-hoved{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.kontakt-hoved h2{margin:0}
.kontakt-tekst{color:var(--tekst);margin:0;max-width:448px}
.direkte{margin:0;font-size:16px;line-height:2}
.direkte a{border-bottom:1px solid var(--linje-staerk);padding-bottom:2px}
.direkte a:hover{border-bottom-color:var(--blaek)}

.samarbejde{display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:100%}
/* Kanterne toner ud med en MASKE på selve båndet i stedet for hvide
   gradient-lag ovenpå: logoerne bliver gennemsigtige mod kanten, og der
   ligger ingen farvet flade, der kan stikke af fra kortets glas-baggrund
   (det var den «hvide kant» i lys tilstand). */
.marquee{
  position:relative;overflow:clip;width:100%;
  --fade-kant:80px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade-kant),#000 calc(100% - var(--fade-kant)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--fade-kant),#000 calc(100% - var(--fade-kant)),transparent);
}
.marquee-fade{display:none}
/* Mellemrummet mellem grupperne ligger som padding INDE i hver gruppe —
   ikke som gap på sporet. Ellers er -33,33 % ikke længden af én gruppe
   plus ét mellemrum, og loopet hopper ved hvert gennemløb. */
.marquee-spor{display:flex;align-items:center;width:max-content;animation:marquee-rul 25s linear infinite}
@keyframes marquee-rul{to{transform:translateX(-33.3333%)}}
.marquee-gruppe{display:flex;align-items:center;gap:80px;list-style:none;margin:0;padding:0 80px 0 0}
.marquee-gruppe li{flex:none;display:flex;align-items:center}
.marquee-gruppe img{height:24px;width:auto;object-fit:contain;filter:grayscale(1) brightness(0);opacity:.64}
.marquee-navn{
  font-family:var(--f-mono);font-size:12px;color:var(--tekst-svag);
  text-transform:uppercase;letter-spacing:2px;
}
@media (prefers-color-scheme:dark){
  .marquee-gruppe img{filter:grayscale(1) brightness(0) invert(1)}
}
@media (max-width:767px){
  .marquee{--fade-kant:56px}
  .marquee-gruppe{gap:56px;padding-right:56px}
}

/* Formularen — felter på den ottendedels mørke flade, som forlægget */
.form{display:flex;flex-direction:column;align-items:stretch;gap:20px}
.form label{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  font-family:var(--f-sans);font-weight:400;font-size:12px;line-height:16px;
  letter-spacing:2px;text-transform:uppercase;color:var(--blaek);
}
.form input,.form select,.form textarea{
  width:100%;padding:12px 16px;
  background:var(--felt-bg);border:1px solid rgba(250,250,250,.08);
  border-radius:var(--r-felt);
  font-family:var(--f-serif);font-size:16px;line-height:24px;color:var(--blaek);
  letter-spacing:normal;text-transform:none;
  transition:border-color .2s,background-color .2s;
}
.form ::placeholder{color:var(--tekst-svag);opacity:1}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--linje-staerk);outline:none}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{background:var(--felt-bg-fokus)}
.form textarea{min-height:125px;resize:vertical}
.form .btn{align-self:flex-start;margin-top:4px}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.svar{border-radius:var(--r-kort);padding:12px 16px;margin:0;color:var(--lys);font-size:14px}
.svar-ok{background:var(--cta);border:1px solid rgba(250,250,250,.64)}
/* Bevidst afvigelse: forlæggets fejlbesked er også blå (Webflow-standard) —
   rød er forlæggets eget ui-error-token, og fejl skal kunne skelnes fra succes */
.svar-fejl{background:var(--fejl-roed)}
@media (max-width:991px){
  .kontakt-kort{grid-template-columns:1fr}
}
@media (max-width:767px){
  .kontakt{padding:var(--sek-lille) 0}
  .kontakt-kort{padding:28px 20px;row-gap:40px;column-gap:0;border-radius:var(--r-kort)}
  .kontakt-venstre{gap:40px}
  .kontakt-hoved{gap:16px}
  .direkte{font-size:15px}
  .form{gap:14px}
  .form label{font-size:10px;line-height:12px}
  /* 16px er gulvet — under det zoomer iOS ind, når et felt får fokus */
  .form input,.form select,.form textarea{padding:12px 14px;font-size:16px;line-height:24px}
  .form .btn{align-self:stretch;margin-top:8px}
}

/* ---------- Sidefod — stor, mørk, fire kolonner ---------- */
.bund{background:var(--moerk);color:var(--lys-tekst);padding:var(--sek-lille) 0 32px}
.bund-halvdele{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.bund-venstre{display:flex;flex-direction:column;align-items:flex-start;gap:48px;max-width:352px}
.logo-bund .logo-ord{font-size:26px}
.bund-tekst{font-size:18px;line-height:28px;margin:0}
.bund-hoejre{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:16px}
.bund-kolonne{display:flex;flex-direction:column;gap:20px}
.bund-etiket{
  font-family:var(--f-mono);font-size:10px;line-height:14px;letter-spacing:2px;
  text-transform:uppercase;color:var(--lys-svag);margin:0;
}
.bund-links-kolonne{display:flex;flex-direction:column;gap:4px}
.bund-links-kolonne a{color:var(--lys-tekst)}
.bund-links-kolonne a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.bund-nederst{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:32px;
  margin-top:132px;padding-top:48px;border-top:1px solid var(--lys-linje);
  font-family:var(--f-mono);font-size:10px;line-height:14px;letter-spacing:2px;
  text-transform:uppercase;color:var(--lys-svag);
}
.bund-links{display:flex;gap:24px}
.bund-nederst a:hover{color:#fff}
@media (max-width:991px){
  .bund-halvdele{grid-template-columns:1fr}
}
@media (max-width:767px){
  .bund{padding-bottom:16px}
  .bund-halvdele{gap:48px}
  .bund-venstre{gap:32px}
  .bund-tekst{font-size:16px;line-height:24px}
  .bund-hoejre{grid-template-columns:1fr 1fr;column-gap:12px;row-gap:48px}
  .bund-kolonne{gap:16px}
  .bund-nederst{margin-top:40px;padding-top:24px;gap:16px;flex-direction:column;align-items:flex-start}
  .bund-links{gap:20px}
}

/* ---------- Filmsiden — deler bjælke, knapper og tokens ---------- */
.filmside{background:var(--side);color:var(--tekst)}
.afspiller{background:#000;display:grid;place-items:center;border-bottom:1px solid var(--linje)}
.afspiller video{
  display:block;width:100%;height:auto;
  max-height:calc(100vh - var(--hoejde));
  object-fit:contain;background:#000;
}
.afspiller-staaende video{width:auto;max-width:100%;max-height:calc(100vh - var(--hoejde) - 2rem)}

.film-hoved{padding-top:48px;padding-bottom:var(--sek-lille)}
.tilbage{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:32px;
  font-family:var(--f-mono);font-size:10px;line-height:14px;letter-spacing:2px;
  text-transform:uppercase;color:var(--tekst-svag);
  transition:color .2s,gap .2s;
}
.tilbage:hover{color:var(--blaek);gap:12px}
.film-hoved h1{margin-bottom:32px}
.film-fakta{display:flex;flex-wrap:wrap;gap:36px;margin:0 0 36px;padding-bottom:32px;border-bottom:1px solid var(--linje)}
.film-fakta dt{
  font-family:var(--f-mono);font-size:10px;line-height:14px;letter-spacing:2px;
  text-transform:uppercase;color:var(--tekst-svag);margin-bottom:6px;
}
.film-fakta dd{margin:0;font-size:16px;color:var(--blaek)}
.film-hoved .film-tekst{display:block;max-width:62ch}
.film-hoved .film-tekst p{color:var(--tekst);font-size:16px;line-height:26px}
.film-cta{margin:40px 0 0}
.film-tom{padding:120px 0}
.film-tom h1{margin:20px 0}
.lead{font-size:18px;line-height:28px;color:var(--tekst-svag);max-width:56ch;margin-bottom:36px}
.sek-lead{color:var(--tekst-svag);max-width:60ch;font-size:16px;line-height:26px;margin-bottom:48px}

.film-naeste{border-top:1px solid var(--linje)}
.film-naeste-inner{display:flex;justify-content:space-between;gap:32px;padding:40px var(--pad)}
.fn-kort{display:grid;gap:8px;max-width:44%}
.fn-naeste{text-align:right;margin-left:auto}
.fn-label{
  font-family:var(--f-mono);font-size:10px;line-height:14px;letter-spacing:2px;
  text-transform:uppercase;color:var(--tekst-svag);transition:color .2s;
}
.fn-titel{font-family:var(--f-sans);font-size:18px;font-weight:700;letter-spacing:-.5px}
.fn-kort:hover .fn-label{color:var(--blaek)}
.fn-kort:hover .fn-titel{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (max-width:767px){
  .film-fakta{gap:20px 28px;margin-bottom:28px;padding-bottom:24px}
  .film-hoved h1{margin-bottom:24px}
  .film-naeste-inner{flex-direction:column;gap:28px}
  .fn-kort{max-width:100%}
  .fn-naeste{text-align:left;margin-left:0}
}

/* ---------- Porteføljen — tidslinje til venstre, film til højre ---------- */
.pf{padding-top:48px}
/* Sidehovedet på /portefolje og 404-siden står som løse elementer i .wrap —
   uden .sek-hoved-gitteret skal rytmen sættes her: tilbage-linket på egen
   linje, luft under pille og overskrift */
.pf .tilbage{display:flex;width:fit-content}
.pf .eyebrow,.film-tom .eyebrow{margin-bottom:24px}
.pf h2{margin-bottom:24px}
/* Porteføljens overskrift er en h1 (hver side skal have én — SEO),
   men den skal ligne sidens h2 i alle brudpunkter */
.pf h1.pf-titel{font-size:28px;line-height:34px;font-weight:800;letter-spacing:-1px;margin-bottom:24px}
@media (max-width:767px){.pf h1.pf-titel{font-size:30px;line-height:36px}}
@media (max-width:479px){.pf h1.pf-titel{font-size:28px;line-height:34px}}
.pf-krop{display:grid;grid-template-columns:150px minmax(0,1fr);gap:48px;align-items:start}
.pf-gitter{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.tidslinje{position:sticky;top:calc(var(--hoejde) + 24px)}
.tidslinje ul{list-style:none;margin:0;padding:0;position:relative}
.tidslinje ul::before{
  content:'';position:absolute;left:5px;top:.9rem;bottom:.9rem;width:1.5px;
  background:var(--linje-staerk);
}
.tidslinje li{position:relative;padding-left:26px}
.tidslinje a{
  display:block;padding:9px 0;
  font-family:var(--f-sans);font-size:14px;font-weight:500;letter-spacing:.08em;
  color:var(--tekst-svag);font-variant-numeric:tabular-nums;transition:color .2s;
}
.tidslinje a::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:11px;height:11px;border-radius:50%;
  background:var(--side);border:1.5px solid var(--linje-staerk);
  transition:background .2s,border-color .2s;
}
.tidslinje a:hover{color:var(--blaek)}
.tidslinje a:hover::before{border-color:var(--blaek)}
.tidslinje a.aktiv{color:var(--blaek);font-weight:600}
.tidslinje a.aktiv::before{background:var(--blaek);border-color:var(--blaek)}
.tom-aar{color:var(--tekst-svag);margin:16px 0 0}
@media (max-width:991px){
  .pf-krop{grid-template-columns:1fr}
  .tidslinje{position:static}
  .tidslinje ul{display:flex;flex-wrap:wrap;gap:4px 24px}
  .tidslinje ul::before{display:none}
  .tidslinje li{padding-left:18px}
}

/* ---------- Blid indtoning — forlæggets blur-reveal, uden bibliotek ---------- */
.ind{opacity:0;filter:blur(12px);transition:opacity .8s ease,filter .8s ease}
.ind.vis{opacity:1;filter:none}

/* ---------- Mobilmenu ---------- */
@media (max-width:991px){
  .burger{display:block}
  .nav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--side);color:var(--blaek);
    border-bottom:1px solid var(--linje);
    padding:8px var(--pad) 24px;display:none;
  }
  /* Menupanelet i samme frostede glas som bjælken over det */
  @supports (backdrop-filter:blur(1px)){
    .nav{
      background:var(--glas-bg);
      backdrop-filter:blur(20px) saturate(1.6);
      -webkit-backdrop-filter:blur(20px) saturate(1.6);
    }
  }
  .nav.aaben{display:flex}
  .nav-link{padding:16px 0;font-size:16px;line-height:20px;border-radius:0;border:0;border-bottom:1px solid var(--linje)}
  /* Menupanelet er absolut og ude af gitteret — bjælken falder tilbage til
     flex, så logo og højregruppe deler pladsen */
  .top-inner{display:flex;justify-content:space-between}
}
@media (max-width:479px){
  .logo-ord{font-size:15px}
  .bund-hoejre{grid-template-columns:1fr 1fr;row-gap:32px}
}

/* Pauseknappen i hero standser AL bevægelse — også marquee'en (WCAG 2.2.2) */
body.medier-pauset .marquee-spor{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .ind{opacity:1;filter:none}
  .marquee-spor{width:auto;flex-wrap:wrap}
  .marquee-gruppe:not(:first-child){display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---------- Bookingsiden — /booking ---------- */
/* Layoutet følger forlægget: tekst i venstre spalte (5/12), formular i en
   kantet boks til højre (7/12). Knapperne er sitets egne (den blå pille). */
/* Formularen har fået den bredeste andel (5/8) og en højere maks-bredde,
   så typeboksene i to spalter kan rumme beskrivelserne på én linje */
.booking-gitter{
  display:grid;grid-template-columns:5fr 8fr;gap:56px;align-items:start;
  max-width:1520px;margin-bottom:var(--sek-lille);
}
.booking-venstre{display:flex;flex-direction:column;align-items:flex-start}
.booking-venstre .eyebrow{margin-bottom:24px}
.booking-titel{font-size:40px;line-height:44px;font-weight:900;letter-spacing:-2px;margin-bottom:20px}
.booking-venstre .sek-lead{margin-bottom:32px}
.booking-punkter{list-style:none;margin:0 0 40px;padding:0;display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:24px;color:var(--tekst)}
.booking-punkter li{position:relative}

/* Datovælgeren under «Dato / periode» — grønne dage er ledige, røde optagede */
.kal-anker{position:relative}
.kal-pop{
  position:absolute;z-index:20;top:calc(100% + 6px);left:0;width:min(320px,100%);
  background:var(--side);border:1px solid var(--linje-staerk);border-radius:var(--r-stor);
  padding:12px;box-shadow:0 16px 40px rgba(17,17,17,.22);
}
.kal-hoved{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:14px}
.kal-pil{background:none;border:1px solid var(--linje);border-radius:var(--r-felt);width:28px;height:28px;cursor:pointer;color:inherit;font-size:16px;line-height:1}
.kal-pil:hover{background:var(--felt-bg)}
.kal-net{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.kal-u{font-size:10px;text-transform:uppercase;letter-spacing:.05em;text-align:center;color:var(--tekst-svag);padding:2px 0}
.kal-d{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:6px;font-size:13px;border:1px solid transparent;background:none;font-family:inherit;color:inherit}
.kal-ledig{background:rgba(42,157,74,.16);border-color:rgba(42,157,74,.35);cursor:pointer;transition:background-color .15s}
.kal-ledig:hover{background:rgba(42,157,74,.34)}
.kal-optaget{background:rgba(200,48,48,.14);border-color:rgba(200,48,48,.32);text-decoration:line-through;color:var(--tekst-svag);cursor:not-allowed}
.kal-passeret{color:var(--tekst-svagere)}
.kal-note{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:12px;color:var(--tekst-svag)}
.kal-prik{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.kal-prik-groen{background:#2a9d4a}
.kal-prik-roed{background:#c83030;margin-left:8px}
.booking-direkte{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--linje);padding-top:28px;width:100%}
.booking-direkte-etiket{
  margin:0;font-family:var(--f-mono);font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:var(--tekst-svag);
}
.booking-spm{margin:8px 0 0;color:var(--tekst-svag);font-size:15px}

/* Formularboksen — kantet kort som forlægget, på sitets flader */
.form-boks{
  border:1px solid var(--linje);border-radius:var(--r-stor);
  background:var(--side-loeft);padding:40px;
  box-shadow:0 1px 2px rgba(17,17,17,.04);
}
@media (prefers-color-scheme:dark){.form-boks{background:var(--side-dyb)}}

/* hidden-attributten skal vinde over display-reglerne herunder — det er
   den, booking.js styrer trinnene og knapperne med */
.booking-form [hidden]{display:none!important}

/* «Trin X af 5» og streg-indikatoren */
.trin-status{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--linje);padding-bottom:20px;
}
.trin-taeller{
  margin:0;font-family:var(--f-mono);font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:var(--tekst-svag);
}
.trin-streger{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.trin-streger li{width:20px;height:4px;border-radius:2px;background:var(--felt-bg);transition:background-color .3s,width .3s}
.trin-streger li.fyldt{background:var(--cta)}
.trin-streger li.aktiv{width:28px}

/* Trinnene: uden JavaScript står de under hinanden, adskilt af en linje;
   med JavaScript (.trinvis) vises ét ad gangen, og skillelinjerne fjernes */
.trin{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:20px}
.booking-form .trin + .trin{border-top:1px solid var(--linje);padding-top:28px}
.booking-form.trinvis .trin + .trin{border-top:0;padding-top:0}
.booking-form.trinvis .trin{min-height:224px}
.booking-form.trinvis .trin:not([hidden]){animation:trin-ind .3s ease}
@keyframes trin-ind{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.booking-form.trinvis .trin:not([hidden]){animation:none}}
.trin-titel{
  float:left;width:100%;padding:0;margin-bottom:8px;
  font-family:var(--f-sans);font-size:24px;line-height:30px;font-weight:800;letter-spacing:-.5px;color:var(--blaek);
}
.felt-hint{
  font-family:var(--f-sans);font-weight:400;font-size:11px;line-height:16px;
  letter-spacing:.5px;text-transform:none;color:var(--tekst-svagere);
}

/* Typekortene i trin 1 — valgt kort fyldes med blæk, som forlægget */
/* To spalter når pladsen tillader det — minmax-gulvet på 300 px er sat
   efter den længste beskrivelse, så teksten under titlen altid kan stå på
   én linje; er der ikke plads til to spalter, falder gitteret til én */
.type-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:10px}
.type-kort{
  position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;
  min-width:0;min-height:56px;padding:12px 16px;border-radius:var(--r-felt);
  border:1px solid var(--linje);background:transparent;cursor:pointer;
  font-family:var(--f-sans);letter-spacing:normal;text-transform:none;
  transition:border-color .3s,background-color .3s,color .3s;
}
.type-kort:hover{border-color:var(--linje-staerk)}
.type-kort input{position:absolute;width:1px;height:1px;padding:0;margin:0;opacity:0;pointer-events:none}
.type-navn{font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.1px;color:var(--blaek)}
/* nowrap som værn: skulle en (redigeret) beskrivelse alligevel blive for
   lang, klippes den med … i stedet for at ombryde til to linjer */
.type-tekst{
  font-family:var(--f-serif);font-size:12.5px;line-height:18px;color:var(--tekst-svag);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.type-kort:has(input:checked){border-color:var(--blaek);background:var(--blaek)}
.type-kort:has(input:checked) .type-navn{color:var(--side)}
.type-kort:has(input:checked) .type-tekst{color:var(--side);opacity:.72}
.type-kort:has(input:focus-visible){outline:2px solid var(--blaek);outline-offset:2px}

/* Felter to og to, noten under budget og knapperne i bunden */
.form-rk{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.trin-note{margin:0;font-size:14px;line-height:22px;color:var(--tekst-svag)}
.trin-note a{text-decoration:underline;text-underline-offset:4px;color:var(--blaek)}
.trin-knapper{
  display:flex;align-items:center;gap:12px;margin-top:8px;
  border-top:1px solid var(--linje);padding-top:24px;
}
.booking-form .trin-knapper .btn{margin-top:0}
.booking-form.trinvis .trin-frem,.booking-form.trinvis [data-send]{margin-left:auto}

/* Sekundær knap på lyse flader: samme pille, blot med ramme */
.btn-ramme{background:transparent;color:var(--blaek);border-color:var(--linje-staerk);box-shadow:none}
.btn-ramme:hover{background:var(--felt-bg);color:var(--blaek)}

/* Kvitteringen efter afsendelse */
.booking-tak{display:flex;flex-direction:column;align-items:flex-start;gap:16px;justify-content:center;min-height:380px}
.booking-tak-titel{font-size:32px;line-height:36px;font-weight:900;letter-spacing:-1px}
.booking-tak p{margin:0;color:var(--tekst-svag);max-width:44ch}
.booking-tak-knapper{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}

@media (max-width:991px){
  .booking-gitter{grid-template-columns:1fr;gap:48px}
}
@media (max-width:991px){
  .booking-gitter{gap:40px}
}
@media (max-width:767px){
  .form-rk{grid-template-columns:1fr}
  .form-boks{padding:20px 16px}
  /* Overskriften skal kunne stå på ÉN linje på mobil — clamp'en følger
     skærmbredden ned, så «Hvad skal du bruge?» aldrig ombryder.
     !important og span-målet er nødvendige: en størrelse valgt i
     redigeringsværktøjet ligger som inline-stil på spanet inde i
     overskriften og ville ellers vinde. Den gælder stadig på desktop. */
  .booking-titel,.booking-titel span{font-size:clamp(20px,7vw,26px)!important;line-height:1.2!important;letter-spacing:-.5px}
  .trin-titel{font-size:20px;line-height:26px}
  .booking-punkter{margin-bottom:28px}
  /* Fortsæt/Send øverst i fuld bredde, Tilbage nedenunder — nemt med tommelfingeren */
  .booking-form .trin-knapper{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .booking-form.trinvis .trin-frem,.booking-form.trinvis [data-send]{margin-left:0}
  .booking-form .trin-knapper .btn{width:100%;padding:14px 20px}
  .type-kort{min-height:52px}
  .kal-pop{width:100%}

  /* --- Mobil-rækkefølgen: formularen op under overskriften ---
     På desktop står al teksten til venstre for formularen; stablet på
     mobil skubbede den formularen langt ned. display:contents løsner
     venstrespaltens børn ud i gitteret, så formularen kan lægge sig lige
     efter eyebrow + overskrift + lead, mens punkterne og «skriv direkte»
     flyttes ned UNDER formularen. Al tekst er der stadig — kun ordenen
     og luften er ændret. */
  .booking-gitter{gap:0}
  .booking-venstre{display:contents}
  .booking-hoejre{order:1;margin-bottom:32px}
  .booking-punkter,.booking-venstre .ekstra,.booking-venstre .ekstra-knap,.booking-direkte{order:2}
  /* Som gitter-element ville pillen blive strakt til fuld bredde */
  .booking-venstre .eyebrow{margin-bottom:16px;justify-self:start}
  .booking-titel{margin-bottom:12px}
  .booking-venstre .sek-lead{margin-bottom:24px;font-size:15px;line-height:24px}
  .booking-punkter{margin-bottom:24px;gap:8px;font-size:15px}
  /* Trinnene skal ikke holde en fast desktop-højde på mobil — så står
     Fortsæt-knappen tæt under felterne i stedet for efter et tomt hul */
  .booking-form.trinvis .trin{min-height:0}
  /* Typekortene lidt tættere, så alle fem kan ses på ét skærmbillede */
  .type-gitter{gap:8px}
  .type-kort{padding:10px 14px}
}

/* Bookingsidens typografi følger lukassvendsen.dk: alt sættes i Instrument
   Sans — overskrifter, brødtekst, felter og labels. Sidehoved og footer
   deles med resten af sitet og beholder sitets egne fonte. */
.booking{
  --f-sans:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;
  --f-serif:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;
}
/* Instrument Sans går kun til 700 — 800/900 ville blive syntetisk fed og
   grumset, så overskrifterne strammes til 700 med tættere spatiering */
.booking .booking-titel{font-weight:700;letter-spacing:-1.5px}
.booking .trin-titel,.booking .booking-tak-titel{font-weight:700}
.booking .btn{font-weight:600}

/* Blødere runding i bookingformularen — et bevidst skridt VÆK fra
   forlæggets (lukassvendsen.dk) kantede look: typekortene rundes som
   sitets pilleknapper, felter og bokse følger med i mindre grad */
.booking .form-boks{border-radius:20px}
.booking .type-kort{border-radius:16px;padding-left:18px;padding-right:18px}
.booking .form input,.booking .form select,.booking .form textarea{border-radius:12px}
.booking .kal-pop{border-radius:16px}
.booking .trin-streger li{border-radius:3px}

/* Ydelser-sektionen strammet: mindre luft over/under og før CTA'en —
   fliserne og gitteret selv er uændrede */
.sek-ydelser{padding:56px 0}
.sek-ydelser .sek-hoved{margin-bottom:40px}
.sek-ydelser .flise-cta{margin-top:40px}
@media (max-width:767px){
  .sek-ydelser{padding:40px 0}
  .sek-ydelser .flise-cta{margin-top:32px}
}

/* ---------- macOS-agtigt panelmateriale til boksene ----------
   Som vinduer og faner i macOS: hvidligt glas i lys tilstand, mørkt glas
   i mørk tilstand — hairline-kant, et svagt rim-lys foroven og en rolig
   skygge. Enkelt og dæmpet; fladen bag panelet skimtes let igennem.
   Står SIDST i filen med vilje: baggrunden skal vinde over boksenes egne
   (også dark-mode-reglen for .form-boks længere oppe). */
.flise,.form-boks{
  background:var(--glas-kort-bg);
  border:1px solid var(--linje);
  box-shadow:0 1px 2px rgba(17,17,17,.04);
}
@supports (backdrop-filter:blur(1px)){
  .flise,.form-boks{
    backdrop-filter:blur(20px) saturate(1.4);
    -webkit-backdrop-filter:blur(20px) saturate(1.4);
    box-shadow:inset 0 1px 0 rgba(250,250,250,.3),0 8px 24px rgba(17,17,17,.08);
  }
}