/* Hauge & Danling, enkel udgave (14.11.2026)
   Bygget på den tidligere udgave fra 05.11.2026 (firmaside/source): samme skrifter, farver, 12 kolonner og tegningshoved.
   Ingen JavaScript, ingen formular, ingen lyd. Filmen kan stoppes med en afkrydsningsboks (kun CSS). */
@font-face{font-family:"Hedvig Serif";src:url(skrift/hedvig-serif-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted";src:url(skrift/schibsted-400_700-normal.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --paper:#EEF1F4;--paper2:#E2E7ED;--ink:#0E1A2B;--mute:#4A5768;--line:rgba(14,26,43,.16);--line2:rgba(14,26,43,.32);
  --night:#0E1A2B;--on-night:#E9EDF2;--mute-night:#A9B4C2;--line-night:rgba(233,237,242,.18);
  --white:#FFFFFF;--amber:#E39A3B;--scrim:rgba(9,16,28,.55);--shade:rgba(9,16,28,.78);
  --serif:"Hedvig Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Schibsted",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --g:clamp(16px,2.2vw,36px);
  --t-mega:clamp(3rem,.3rem + 8.4vw,10rem);
  --t-xl:clamp(2.5rem,1rem + 4.4vw,6rem);
  --t-l:clamp(1.6rem,1.05rem + 1.8vw,2.75rem);
  --t-m:clamp(1.125rem,1.04rem + .45vw,1.375rem);
  --t-b:clamp(1rem,.96rem + .2vw,1.125rem);
  --t-s:.9375rem;--t-xs:.8125rem;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:4px;--hd:64px;
  --sec:clamp(88px,12vh,160px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-b)/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
main{overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
::selection{background:var(--ink);color:var(--paper)}
.w{padding-left:max(var(--g),env(safe-area-inset-left,0px));padding-right:max(var(--g),env(safe-area-inset-right,0px))}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.grid>*{min-width:0}
.d{font-family:var(--serif);font-weight:400;letter-spacing:-.025em;line-height:.95;text-wrap:balance}
.mega{font-size:var(--t-mega);line-height:.9;letter-spacing:-.035em;margin-left:-.045em}
.xl{font-size:var(--t-xl);margin-left:-.04em}
.l{font-size:var(--t-l);line-height:1.05;letter-spacing:-.015em}
.lead{font-size:var(--t-m);line-height:1.4;color:var(--mute);max-width:38ch;text-wrap:pretty}
.lbl{font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.skip{position:absolute;left:var(--g);top:-80px;z-index:90;background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:var(--r);text-decoration:none;font-weight:600}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Knapper: fyldet kommer fra begge sider og mødes på midten */
.btn{--bg:var(--ink);--fg:var(--paper);--fill:var(--amber);--fill-fg:var(--ink);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:1px solid var(--bg);border-radius:var(--r);background:var(--bg);color:var(--fg);font:600 var(--t-s)/1 var(--sans);text-decoration:none;cursor:pointer;transition:color .35s var(--ease)}
.btn::before,.btn::after{content:"";position:absolute;top:0;bottom:0;width:50.5%;background:var(--fill);z-index:-1;transform:scaleX(0);transition:transform .5s var(--ease)}
.btn::before{left:0;transform-origin:left}
.btn::after{right:0;transform-origin:right}
@media (hover:hover){.btn:hover{color:var(--fill-fg);border-color:var(--fill)}.btn:hover::before,.btn:hover::after{transform:scaleX(1)}}
.btn:active{transform:scale(.97)}
.tl{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:600 var(--t-s)/1.2 var(--sans);text-decoration:underline;text-underline-offset:.35em;cursor:pointer}
@media (hover:hover){.tl:hover{text-decoration-thickness:2px}}

/* ---------- Kopfleiste ---------- */
.gn{position:relative;z-index:50;height:calc(var(--hd) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,2.4vw,40px);background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.gn.ov{position:absolute;top:0;left:0;right:0;background:transparent;color:var(--white);box-shadow:none}
.lg{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;flex-shrink:0}
.lg img{width:auto}
.lgm img{height:28px}.lgw img{height:12px}
.lg .lw{display:none}
.gn.ov .lg .ld{display:none}
.gn.ov .lg .lw{display:block}
.gn nav{display:flex;gap:clamp(18px,2.4vw,40px);margin-left:auto}
.ln{position:relative;display:inline-flex;align-items:center;min-height:44px;font:500 var(--t-s)/1 var(--sans);text-decoration:none;white-space:nowrap}
.ln::before,.ln::after{content:"";position:absolute;bottom:10px;height:1px;width:50%;background:currentColor;transform:scaleX(0);transition:transform .45s var(--ease)}
.ln::before{left:0;transform-origin:left}
.ln::after{right:0;transform-origin:right}
@media (hover:hover){.ln:hover::before,.ln:hover::after{transform:scaleX(1)}}
.lang{display:flex}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:44px;padding:0 6px;font:500 var(--t-xs)/1 var(--sans);letter-spacing:.06em;text-decoration:none;opacity:.7}
.lang a[aria-current="true"]{opacity:1;text-decoration:underline;text-underline-offset:.45em}
@media (hover:hover){.lang a:hover{opacity:1}}

/* ---------- Film ---------- */
.hv{position:relative;height:92svh;min-height:520px;max-height:1000px;background:var(--night);color:var(--white);overflow:hidden}
.hv-v,.hv-p,.hv-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hv-v{transition:opacity .45s var(--ease)}
.hv-sh{position:absolute;inset:0;background:linear-gradient(to top,var(--shade) 0%,rgba(9,16,28,0) 48%),linear-gradient(to bottom,var(--scrim) 0%,rgba(9,16,28,0) 22%)}
.hvt{position:absolute;left:0;right:0;bottom:clamp(96px,14vh,150px);font-family:var(--serif);font-weight:400;font-size:var(--t-xl);line-height:.98;letter-spacing:-.03em;text-wrap:balance}
.hv-c{position:absolute;left:0;right:0;bottom:clamp(28px,5vh,52px);display:flex;justify-content:space-between;align-items:center;gap:20px}
.hv-c .lbl{color:var(--white);opacity:.85}
.hvp{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.hv-c label{display:inline-flex;align-items:center;min-height:44px;font:500 var(--t-xs)/1.2 var(--sans);text-decoration:underline;text-underline-offset:.35em;cursor:pointer}
.hvp:focus-visible~.hv-c label{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.hv-c .on{display:none}
.hvp:checked~.hv-v{opacity:0}
.hvp:checked~.hv-c .off{display:none}
.hvp:checked~.hv-c .on{display:inline}
/* Stillbilledet ligger under filmen. Filmen spiller kun på store skærme uden "reducer bevægelse"; ellers ses kun stillbilledet og ingen knap */
@media (max-width:900px),(prefers-reduced-motion:reduce){.hvp,.hv-v,.hv-c label{display:none}}

/* ---------- Einleitung ---------- */
.intro{padding-block:var(--sec) calc(var(--sec) * .75)}
.intro h1{grid-column:1/-1}
.intro .lead{grid-column:1/span 6;margin-top:clamp(24px,4vh,40px)}
.intro .acts{grid-column:8/-1;align-self:end;justify-self:end;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}

/* Ydelser som liste */
.svl{padding-block:0 var(--sec)}
.svl-h{margin-bottom:clamp(20px,3vh,32px)}
.svl-h h2{grid-column:1/span 8}
.sr{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:baseline;padding-block:clamp(20px,2.6vw,36px);border-top:1px solid var(--line)}
.sr:last-child{border-bottom:1px solid var(--line)}
.sr-w{grid-column:1/span 6;font-size:var(--t-xl)}
.sr-t{grid-column:7/span 6;display:grid;gap:8px;min-width:0}
.sr-t b{font-size:var(--t-m);font-weight:600;line-height:1.25}
.sr-t span{color:var(--mute);max-width:44ch}

/* Apps som indeks på mørk bund */
.wk{background:var(--night);color:var(--on-night);padding-block:var(--sec)}
.wk-h{align-items:end}
.wk-h h2{grid-column:1/span 7}
.wk-h p{grid-column:8/span 5;color:var(--mute-night);max-width:36ch}
.wk-l{margin-top:clamp(36px,6vh,72px);border-top:1px solid var(--line-night)}
.wk-l li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:baseline;padding-block:clamp(18px,2vw,26px);border-bottom:1px solid var(--line-night)}
.wk-n{grid-column:1/span 4;font-family:var(--serif);font-weight:400;font-size:var(--t-l);line-height:1.05;letter-spacing:-.01em}
.wk-k{grid-column:5/span 2;font-size:var(--t-xs);color:var(--mute-night);line-height:1.5}
.wk-d{grid-column:7/span 4;font-size:var(--t-s)}
.wk-s{grid-column:11/-1;justify-self:end;display:flex;align-items:center;gap:8px;font-size:var(--t-xs);color:var(--mute-night);white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}
.wk-f{margin-top:clamp(28px,4vh,44px);color:var(--mute-night);font-size:var(--t-s);max-width:60ch}
.wk-f a{color:var(--on-night)}

/* Stifterne */
.fo{padding-block:var(--sec)}
.fo-h{align-items:end}
.fo-h h2{grid-column:1/span 6}
.fo-h p{grid-column:7/span 5;color:var(--mute);max-width:42ch}
.pair{margin-top:clamp(48px,8vh,104px);align-items:start}
.pc.pl{grid-column:1/span 5}
.pc.ps{grid-column:8/span 5;margin-top:clamp(64px,13vh,168px)}
.ph-i{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--paper2)}
.ph-i img{width:100%;height:100%;object-fit:cover}
.ph-x{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,2vw,28px);border:1px dashed var(--line2)}
.ph-x b{font-family:var(--serif);font-weight:400;font-size:clamp(4rem,2rem + 8vw,9rem);line-height:.8;letter-spacing:-.04em;color:rgba(14,26,43,.52)}
.ph-x span{margin-top:14px;font-size:var(--t-s);font-weight:600}
.pc h3{margin-top:18px;font-family:var(--serif);font-weight:400;font-size:var(--t-l);line-height:1.05;letter-spacing:-.015em}
.pc .ro{margin-top:4px;color:var(--mute);font-size:var(--t-s)}
.pc .bio{margin-top:16px;max-width:46ch}
.pc dl{margin-top:18px;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;padding-top:14px;border-top:1px solid var(--line);font-size:var(--t-s)}
.pc dt{color:var(--mute)}

/* Kontakt */
.fin{padding-block:var(--sec) clamp(64px,10vh,120px);border-top:1px solid var(--line)}
.fin h2{grid-column:1/span 10}
.fin-s{grid-column:7/span 6;margin-top:clamp(28px,4vh,48px);display:grid;gap:22px;justify-items:start}
.fin-s p{font-size:var(--t-m);line-height:1.4;max-width:34ch}
.fin-s .ml{font-size:var(--t-s);color:var(--mute);max-width:44ch}
.fin-s .ml a{white-space:nowrap}

/* Juridiske sider */
.legal{padding-top:clamp(48px,8vh,96px);padding-bottom:var(--sec);max-width:calc(72ch + 2 * var(--g))}
.legal h1{font-family:var(--serif);font-weight:400;font-size:var(--t-xl);line-height:.95;letter-spacing:-.03em;margin-bottom:12px;text-wrap:balance}
.legal h2{font-family:var(--serif);font-weight:400;font-size:var(--t-m);line-height:1.2;margin:36px 0 10px}
.legal h3{font-size:var(--t-b);margin:22px 0 6px}
.legal p,.legal li{max-width:68ch}
.legal p+p{margin-top:10px}
.legal ul{list-style:disc;padding-left:1.2em;margin:10px 0}
.legal ol{list-style:decimal;padding-left:1.4em;margin:10px 0}
.legal .stand{color:var(--mute);font-size:var(--t-s)}
.legal .tbl{overflow-x:auto;margin:14px 0}
.legal table{border-collapse:collapse;min-width:560px;font-size:var(--t-s)}
.legal th,.legal td{text-align:left;vertical-align:top;padding:8px 12px 8px 0;border-bottom:1px solid var(--line)}
.legal th{font-weight:600}
.legal a{overflow-wrap:anywhere}
.legal .tilbage{margin-top:40px}

/* Fod: firmadata som et tegningshoved */
.ft{padding-block:clamp(40px,6vh,64px) calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.f-tb{display:grid;grid-template-columns:1.2fr .8fr 1.6fr 1.2fr;border:1px solid var(--line2);border-radius:var(--r)}
.f-tb div{padding:14px 16px;border-left:1px solid var(--line2);min-width:0}
.f-tb div:first-child{border-left:0}
.f-tb dt{font-size:var(--t-xs);color:var(--mute)}
.f-tb dd{margin-top:4px;font-size:var(--t-s);font-weight:600;overflow-wrap:anywhere}
.f-row{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;margin-top:16px;font-size:var(--t-xs);color:var(--mute)}
.f-row nav{display:flex;flex-wrap:wrap;gap:0 22px}
.f-row a{min-height:44px;display:inline-flex;align-items:center}
@media (hover:hover){.f-row a:hover{color:var(--ink)}}
.f-row p{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;min-height:44px}

/* ---------- Mellemstor ---------- */
@media (max-width:1100px){
  .gn nav{gap:18px}
  .wk-n{grid-column:1/span 5}.wk-k{grid-column:6/span 2}.wk-d{grid-column:8/span 5}.wk-s{display:none}
}
/* ---------- Tablet og telefon ---------- */
@media (max-width:900px){
  :root{--hd:58px}
  .gn nav{display:none}
  .grid,.sr,.wk-l li{grid-template-columns:repeat(4,minmax(0,1fr))}
  .intro .lead,.intro .acts,.svl-h h2,.sr-w,.sr-t,.wk-h h2,.wk-h p,.fo-h h2,.fo-h p,.fin h2,.fin-s,.pc.pl,.pc.ps{grid-column:1/-1}
  .intro .acts{justify-self:start;margin-top:32px}
  .sr-t{margin-top:12px}
  .wk-h p,.fo-h p{margin-top:16px}
  .wk-n,.wk-k,.wk-d{grid-column:1/-1}
  .wk-k,.wk-d{margin-top:6px}
  .wk-s{display:flex;grid-column:1/-1;justify-self:start;margin-top:8px}
  .pc.ps{margin-top:56px}
  .ph-i{max-width:420px}
  .f-tb{grid-template-columns:1fr 1fr}
  .f-tb div:nth-child(3){border-left:0}
  .f-tb div:nth-child(n+3){border-top:1px solid var(--line2)}
  .hv-c{flex-direction:column;align-items:flex-start;gap:6px}
  .hvt{bottom:132px}
  .hv-c .lbl{max-width:30ch}
}
@media (max-width:560px){
  .lgw img{height:10px}.lgm img{height:24px}.lg{gap:9px}
  .f-tb{grid-template-columns:1fr}
  .f-tb div{border-left:0}
  .f-tb div+div{border-top:1px solid var(--line2)}
  .lang a{min-width:36px}
}

/* Mindre bevægelse */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .btn:active{transform:none}
}
