/* Selvhostede skrifttyper: ingen forbindelse til tredjepart ved sidevisning */
@font-face{font-family:'Schibsted Grotesk';src:url('/assets/fonts/SchibstedGrotesk.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('/assets/fonts/InstrumentSans.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/IBMPlexMono.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ==========================================================================
   SNETJENESTEN.DK · Designsystem v0.2
   Rettelser fra prototypereview v0.1:
   1. Monospace kun i ægte datakontekster (rapportdata, NAP)
   2. Ingen emoji, kun SVG-ikoner
   3. Segmentvælger som redaktionelle rækker, ikke generiske kort
   4. Ingen fotopladsholdere i layoutet
   5. Ét rapportkort pr. side (signaturelement)
   ========================================================================== */

:root{
  --snow:#F7F9FB;
  --ice:#E9EFF4;
  --ink:#16232E;
  --slate:#51616E;
  --line:#CDD8E0;
  --signal:#DE6A00;        /* advarselsblink på materiellet */
  --signal-dark:#BC5800;
  --spor:#2E7CD6;          /* GPS-spor */
  --ok:#1E7A46;
  --radius:10px;
  --maxw:1140px;
  --font-display:'Schibsted Grotesk',sans-serif;
  --font-body:'Instrument Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{font-family:var(--font-body);color:var(--ink);background:var(--snow);line-height:1.6;font-size:16px}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;letter-spacing:-0.015em}
h2{font-size:clamp(24px,3.2vw,32px);font-weight:700}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
section{padding:56px 0}
@media(min-width:800px){section{padding:84px 0}}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Byggebanner. Fjernes ved go-live: slet div.build */
.build{background:var(--ink);color:var(--ice);font-size:12px;text-align:center;padding:6px 12px}
.build strong{color:#fff}

/* ---------- G1 Header ---------- */
header.site{position:sticky;top:0;background:rgba(247,249,251,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:50}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo{font-family:var(--font-display);font-weight:900;font-size:19px;letter-spacing:.02em;text-decoration:none}
.logo span{color:var(--signal)}
nav.main{display:none}
@media(min-width:960px){nav.main{display:flex;gap:26px}}
nav.main a{text-decoration:none;font-weight:500;font-size:15px;color:var(--slate)}
nav.main a:hover,nav.main a[aria-current=page]{color:var(--ink)}
nav.main a[aria-current=page]{font-weight:600}
.hdr-actions{display:flex;align-items:center;gap:12px}
.tel{display:flex;align-items:center;gap:7px;text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap}
.tel .nr{display:none}
@media(min-width:640px){.tel .nr{display:inline}}
.btn{display:inline-block;font-family:var(--font-body);font-weight:600;font-size:15px;text-decoration:none;border-radius:8px;padding:11px 20px;border:2px solid transparent;cursor:pointer;text-align:center;white-space:nowrap}
@media(max-width:420px){.hdr .btn{padding:9px 14px;font-size:14px}}
.btn-primary{background:var(--signal);color:#fff}
.btn-primary:hover{background:var(--signal-dark)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff}
.burger{display:inline-flex;background:none;border:1px solid var(--line);border-radius:8px;padding:9px 11px;cursor:pointer}
@media(min-width:960px){.burger{display:none}}
.mobilenav{display:none;border-top:1px solid var(--line);background:var(--snow);padding:12px 20px 20px}
.mobilenav.open{display:block}
.mobilenav a{display:block;padding:11px 4px;text-decoration:none;font-weight:500;border-bottom:1px solid var(--ice)}

/* ---------- M1 Hero ---------- */
.hero{background:linear-gradient(180deg,var(--ice) 0%,var(--snow) 100%);border-bottom:1px solid var(--line);padding:0}
.hero .wrap{display:grid;gap:44px;padding-top:60px;padding-bottom:60px}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.1fr .9fr;align-items:center;padding-top:88px;padding-bottom:88px}}
.hero h1{font-size:clamp(32px,5vw,52px);font-weight:900;max-width:14ch}
.hero p{margin:18px 0 28px;font-size:clamp(16px,1.6vw,19px);color:var(--slate);max-width:52ch}
.hero .sub-cta{display:block;margin-top:14px;font-size:14px;color:var(--slate)}
.hero .sub-cta a{font-weight:600;color:var(--ink)}

/* ---------- Signaturelement: servicerapport-kortet ---------- */
.rapport{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 32px rgba(22,35,46,.08);overflow:hidden;max-width:440px;margin:0 auto;width:100%}
.rapport-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--ice);font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--slate)}
.rapport-head .ok{color:var(--ok);font-weight:500;display:inline-flex;align-items:center;gap:5px}
.rapport svg.kort{display:block;width:100%;height:auto;background:var(--ice)}
.rapport .spor-path{stroke-dasharray:620;stroke-dashoffset:620;animation:spor 2.4s ease-out .4s forwards}
@keyframes spor{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.rapport .spor-path{stroke-dashoffset:0}}
.rapport-data{padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;font-family:var(--font-mono);font-size:12px}
.rapport-data dt{color:var(--slate);font-size:10px;letter-spacing:.07em;text-transform:uppercase}
.rapport-data dd{font-weight:500}
.rapport-foot{padding:10px 16px;border-top:1px solid var(--ice);font-size:12px;color:var(--slate)}

/* ---------- Sektionshoveder ---------- */
.sec-head{max-width:56ch;margin-bottom:34px}
.sec-head p{color:var(--slate);margin-top:10px}

/* ---------- M3 Segmentvælger: redaktionelle rækker ---------- */
.seg-list{border-top:1px solid var(--line)}
.seg{display:grid;grid-template-columns:1fr;gap:6px 32px;padding:24px 4px;border-bottom:1px solid var(--line);text-decoration:none;position:relative;transition:padding-left .18s ease}
@media(min-width:800px){.seg{grid-template-columns:150px 1fr auto;align-items:baseline;padding:28px 4px}}
.seg:hover{padding-left:16px}
.seg::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--signal);transition:width .18s ease}
.seg:hover::before{width:4px}
.seg .kicker{font-size:13px;font-weight:600;color:var(--slate)}
.seg .body h3{font-size:clamp(18px,2vw,21px);font-weight:700}
.seg .body p{font-size:14.5px;color:var(--slate);margin-top:6px;max-width:58ch}
.seg .arrow{font-weight:600;font-size:14.5px;color:var(--signal);white-space:nowrap}

/* ---------- M4 Ydelseskort ---------- */
.yd-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.yd-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.yd-grid{grid-template-columns:repeat(3,1fr)}}
.yd{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-decoration:none;display:flex;flex-direction:column;gap:8px;transition:border-color .15s}
.yd:hover{border-color:var(--ink)}
.yd.featured{border:2px solid var(--ink);position:relative}
.yd.featured .badge{position:absolute;top:-11px;left:18px;background:var(--ink);color:#fff;font-size:11px;font-weight:600;letter-spacing:.03em;padding:3px 10px;border-radius:99px}
.yd h3{font-size:17px;font-weight:700}
.yd p{font-size:14px;color:var(--slate);flex:1}
.yd .arrow{font-weight:600;font-size:14px;color:var(--signal)}
.yd.akut{background:var(--ice)}

/* ---------- M5 Dokumentationsbevis ---------- */
.dok{background:var(--ice);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dok .wrap{display:grid;gap:36px}
@media(min-width:900px){.dok .wrap{grid-template-columns:1fr 1fr;align-items:start}}
.dok p{color:var(--slate);margin:14px 0 22px;max-width:48ch}
.dok-felter{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.dok-felter h3{font-size:15px;margin-bottom:14px}
.dok-felter ul{list-style:none}
.dok-felter li{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--ice);font-size:14.5px}
.dok-felter li:last-child{border-bottom:0}
.dok-felter li svg{flex:none;transform:translateY(2px)}

/* ---------- M11 Områdedækning ---------- */
.omr{padding-top:0}
.omr .inner{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;display:grid;gap:24px}
@media(min-width:800px){.omr .inner{grid-template-columns:1fr auto;align-items:center;padding:40px 44px}}
.omr p{color:var(--slate);margin-top:10px;max-width:52ch}

/* ---------- M13 CTA ---------- */
.cta{background:var(--ink);color:#fff}
.cta .wrap{text-align:center;max-width:680px}
.cta h2{color:#fff}
.cta p{color:#9FB2C0;margin:14px 0 26px}

/* ---------- Indholdssider (ydelser, segmenter, om m.fl.) ---------- */
.page-hero{background:var(--ice);border-bottom:1px solid var(--line);padding:52px 0}
.page-hero h1{font-size:clamp(28px,4vw,42px);font-weight:900;max-width:20ch}
.page-hero .lede{margin-top:16px;font-size:clamp(16px,1.5vw,18px);color:var(--slate);max-width:58ch}
.prose{max-width:68ch}
.prose h2{margin:44px 0 14px}
.prose h3{font-size:19px;margin:30px 0 10px}
.prose p{margin-bottom:16px;color:#2A3B48}
.prose ul,.prose ol{margin:0 0 16px 22px;color:#2A3B48}
.prose li{margin-bottom:6px}
.faq details{border-bottom:1px solid var(--line);padding:16px 4px}
.faq summary{font-family:var(--font-display);font-weight:700;font-size:16.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font-weight:500;color:var(--slate)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:12px;color:var(--slate);max-width:62ch}

/* ---------- G2 Footer ---------- */
footer.site{background:var(--snow);border-top:1px solid var(--line);padding:52px 0 28px;font-size:14px}
.foot-grid{display:grid;gap:32px;grid-template-columns:1fr 1fr}
@media(min-width:900px){.foot-grid{grid-template-columns:repeat(4,1fr)}}
.foot-grid h3{font-size:14px;font-weight:700;margin-bottom:14px}
.foot-grid a{display:block;text-decoration:none;padding:4px 0}
.foot-grid a:hover{color:var(--signal)}
.nap{margin-top:40px;padding-top:22px;border-top:1px solid var(--ice);display:flex;flex-wrap:wrap;gap:10px 28px;font-family:var(--font-mono);font-size:12px;color:var(--slate)}
.legal{margin-top:16px;display:flex;flex-wrap:wrap;gap:18px;font-size:12.5px;color:var(--slate)}
.legal a{color:var(--slate)}

/* ---------- Cookiesamtykke ---------- */
#st-samtykke-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--ink);color:var(--ice);padding:20px;box-shadow:0 -8px 24px rgba(22,35,46,.25)}
#st-samtykke-banner .st-boks{max-width:720px;margin:0 auto;font-size:14.5px;line-height:1.55}
#st-samtykke-banner p{margin:0 0 10px}
#st-samtykke-banner a{color:#fff}
#st-samtykke-banner .st-valg{display:flex;gap:12px;margin-top:14px}
#st-samtykke-banner button{font:inherit;font-weight:600;padding:11px 24px;border-radius:8px;cursor:pointer;border:2px solid var(--ice);background:transparent;color:#fff;flex:1;max-width:180px}
#st-samtykke-banner #st-tillad{background:var(--signal);border-color:var(--signal)}