/* OMNI Design – responsiv.css v1 (2026-10-15) — drop-in, loades SIDST.
   Deploy som /assets/css/omni-responsiv-v2.css (overskriv IKKE live /assets/css/responsiv.css).
   P1-farver uændrede. Breakpoints: 1100 / 900 (login) / 768. */
:root{--o-max:1240px;--o-pad:clamp(20px,4vw,48px);--o-gap:clamp(32px,4vw,72px);
 --p1-dark:#0c1f2b;--p1-mid:#0d3640;--p1-green:#0b5e5a;--p1-green2:#137a72;--p1-accent:#8fdccf;
 --p1-surface:#f6f9f9;--p1-surface2:#e8f1f0;--p1-line:#d6e4e2;--p1-text:#0c1f2b;--p1-muted:#4f6168}

/* 1. Én site-container */
.wrap,.o-container{box-sizing:border-box;width:100%;max-width:var(--o-max)!important;margin-inline:auto!important;padding-inline:var(--o-pad)!important}
html,body{overflow-x:clip}
img,video{max-width:100%;height:auto}

/* 2. Fluid type */
h1{font-size:clamp(34px,1.6rem + 2.4vw,64px);line-height:1.04;max-width:18ch;text-wrap:balance}
h2{font-size:clamp(26px,1.2rem + 1.4vw,44px);line-height:1.12;text-wrap:balance}
p,li{text-wrap:pretty}

/* 3. FORSIDE-HERO — årsag: .hr-ph og figure.pj er position:absolute i forhold til
   fuldbredde-section.hero, mens teksten ligger i .wrap (max 1400). Billedet starter ~38vw,
   teksten slutter ved wrap-venstre+620px ⇒ overlap på alle bredder ≥1100. */
.hero{display:block!important}
.hero>.wrap.hw{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--o-gap);align-items:center;padding-block:clamp(40px,6vw,96px)}
.hero .ht{max-width:none!important;position:relative;z-index:2}
.hero .hr-ph{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;
 aspect-ratio:16/10;border-radius:22px;overflow:hidden;grid-column:2;grid-row:1}
.hero .hr-ph img,.hero .hr-img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.hero .ht{grid-column:1;grid-row:1}
/* Produktjournal-kort: må kun stikke ind over billedets nederste venstre kant (safe-zone) */
.hero figure.pj{position:absolute!important;grid-column:2;grid-row:1;align-self:end;justify-self:start;
 right:auto!important;top:auto!important;left:auto!important;bottom:auto!important;
 width:min(340px,70%);margin:0 0 -28px -32px;z-index:3}
@media(min-width:1100px){.hero>.wrap.hw{position:relative}}
@media(max-width:1099px){
 .hero>.wrap.hw{grid-template-columns:minmax(0,1fr)}
 .hero .ht,.hero .hr-ph,.hero figure.pj{grid-column:1;grid-row:auto}
 .hero figure.pj{position:relative!important;margin:-40px auto 0;width:min(420px,92%)}
}

/* 4. UNDERSIDE-HERO (.mg-hero/.ph-hero) — årsag: section er display:flex med .wrap og
   figure.hph som søskende; .phg har fast grid 600px, .wrap venstrestilles (left 0) og
   figuren skubbes ud til viewport-kanten ⇒ stort hul på ≥1440. */
.ph-hero.hasph{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--o-gap);align-items:center;
 max-width:none;padding-inline:max(var(--o-pad),calc((100% - var(--o-max))/2 + var(--o-pad)))!important}
.ph-hero.hasph>.wrap{max-width:none!important;padding-inline:0!important;margin:0!important}
.ph-hero .phg{grid-template-columns:minmax(0,1fr)!important;max-width:none!important}
.ph-hero figure.hph{margin:0;width:100%;aspect-ratio:16/10;border-radius:22px;overflow:hidden;position:relative}
.ph-hero figure.hph img{width:100%;height:100%;object-fit:cover}
@media(max-width:1099px){.ph-hero.hasph{grid-template-columns:minmax(0,1fr)}}

/* 5. LOG-IND — årsag: body{display:flex;flex-direction:column;align-items:flex-start;padding-left:…}
   (inline <style>) ⇒ footer og indhold krymper til indholdsbredde og står i venstre halvdel.
   .gate er grid med faste px-kolonner. */
body:has(.gate){display:block!important;padding:0!important}
body:has(.gate)>footer,body:has(.gate) footer.ft{width:100%;max-width:none;align-self:stretch}
.gate{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;min-height:calc(100svh - 64px);width:100%;max-width:none!important;margin:0!important}
.gate .lp{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;
 padding:clamp(28px,4vw,64px);background:var(--p1-dark)}
.gate .lp>img.lp-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.gate .lp::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,31,43,.15) 0%,rgba(12,31,43,.55) 45%,rgba(12,31,43,.92) 100%)}
.gate .lp>*:not(img){position:relative;z-index:2}
.gate .lp h1,.gate .lp h2{color:#fff;max-width:18ch;overflow-wrap:break-word;font-size:clamp(30px,1.2rem + 2vw,52px)}
.gate .lp .lp-kredit{position:absolute;right:12px;bottom:12px;z-index:3;font:500 12px/1.4 Inter,system-ui,sans-serif;background:rgba(12,31,43,.82);color:#e8f1f0;padding:4px 8px;border-radius:8px}
.gate .lp .lp-kredit a{color:var(--p1-accent)}
.gate main.k,.gate .k{align-self:center;justify-self:center;width:100%;max-width:440px!important;margin:clamp(24px,4vw,64px) var(--o-pad)}
.gate .roller{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1100px){.gate .roller{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gate .roller label{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--p1-line);border-radius:12px;background:#fff;cursor:pointer}
.gate .roller label:has(input:checked){border-color:var(--p1-green);box-shadow:0 0 0 2px rgba(11,94,90,.18)}
.gate details.data-info summary{color:var(--p1-green);font-weight:600;cursor:pointer}
@media(max-width:899px){.gate{grid-template-columns:minmax(0,1fr)!important;min-height:0}
 .gate .lp{min-height:180px;max-height:240px;padding:20px}.gate .lp ul{display:none}}

/* 6. MODUL-RING (7 noder) — årsag (fra Runes skærmbillede): noder placeret med absolutte %
   i en fast-størrelse rund flade med overflow:hidden + border-radius:50% ⇒ labels klippes
   ved kanten og ujævn fordeling. Ny model: kvadrat, aspect-ratio 1, noder via rotate. */
.o-ring{--n:7;--r:38%;position:relative;width:100%;max-width:560px;aspect-ratio:1;margin-inline:auto;overflow:visible!important;list-style:none;padding:0;container-type:inline-size}
.o-ring::before{content:"";position:absolute;inset:12%;border-radius:50%;background:#fff;border:1px dashed var(--p1-line);overflow:visible}
.o-ring>.o-node{position:absolute;left:50%;top:50%;width:0;height:0;
 transform:rotate(calc(360deg / var(--n) * var(--i) - 90deg)) translate(38cqi) rotate(calc(-1 * (360deg / var(--n) * var(--i) - 90deg)))}
.o-ring>.o-node>a{position:absolute;transform:translate(-50%,-28px);display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none}
.o-ring>.o-node img{width:clamp(44px,12cqi,72px);height:auto;aspect-ratio:1;border-radius:50%}
.o-ring>.o-node span{background:#fff;color:var(--p1-text);font:600 clamp(12px,2.6cqi,15px)/1.2 Inter,system-ui,sans-serif;padding:3px 9px;border-radius:999px;box-shadow:0 0 0 1px var(--p1-line);white-space:nowrap}
.o-ring>.o-hub{position:absolute;inset:32%;display:grid;grid-template-columns:1fr 1fr;gap:8px;place-content:center}
.o-ring>.o-node:nth-of-type(1){--i:0}.o-ring>.o-node:nth-of-type(2){--i:1}.o-ring>.o-node:nth-of-type(3){--i:2}
.o-ring>.o-node:nth-of-type(4){--i:3}.o-ring>.o-node:nth-of-type(5){--i:4}.o-ring>.o-node:nth-of-type(6){--i:5}.o-ring>.o-node:nth-of-type(7){--i:6}

/* 7. Footer altid fuld bredde, centreret indhold */
footer.ft,footer.omni-footer{width:100%!important;max-width:none!important;align-self:stretch!important;box-sizing:border-box}
footer.ft>.wrap,footer.ft .ft-in{max-width:var(--o-max);margin-inline:auto;padding-inline:var(--o-pad)}

@media(max-width:767px){.hero>.wrap.hw,.ph-hero.hasph{gap:24px}}

/* 8. IKON-INFO (button.ikf + .ikf-txt) → popover. Årsag: span/div.ikf-txt indsættes inline
   som flex-barn ved siden af ikonet i kortets flex-række ⇒ klemmes til ~40px, ét ord pr. linje,
   og skubber layoutet. Ny model: absolut popover, ingen layout-skub. Kræver ikon-popover.js
   (tap-toggle, Esc, klik udenfor, flip). */
:has(>button.ikf),li.card,.g3>li{position:relative}
.ikf-txt{position:absolute!important;z-index:50;top:calc(100% + 8px);left:0;margin:0!important;
 width:min(320px,90vw)!important;max-width:min(320px,90vw)!important;box-sizing:border-box;flex:none!important;
 background:#fff!important;color:var(--p1-text)!important;border:1px solid var(--p1-line)!important;border-left:1px solid var(--p1-line)!important;
 border-radius:12px;padding:12px 14px!important;box-shadow:0 12px 28px -14px rgba(12,31,43,.28),0 2px 6px rgba(12,31,43,.06);
 font:400 14px/1.5 Inter,system-ui,sans-serif;text-align:left;writing-mode:horizontal-tb;word-break:normal;overflow-wrap:normal;hyphens:manual}
.ikf-txt[data-flip-x]{left:auto;right:0}
.ikf-txt[data-flip-y]{top:auto;bottom:calc(100% + 8px)}
@media(hover:hover){button.ikf:hover+.ikf-txt,button.ikf:focus-visible+.ikf-txt,.ikf-txt:hover{display:block!important}}
.ikf-txt[hidden]{display:none}
.sh>.ikf-txt{grid-column:auto}