@font-face{font-family:'Anton';src:url('/fonts/Anton.ttf') format('truetype');
  font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/Archivo.ttf') format('truetype');
  font-weight:100 900;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter.ttf') format('truetype');
  font-weight:100 900;font-display:swap}
:root{
  --navy:#16283C; --navy-d:#101E2E; --navy-l:#1E3450; --navy-s:#22384F;
  --or:#E0761F; --or-d:#B85C13;
  --cream:#FBF7F2; --sand:#F3ECE2; --muted:#6E7C8C; --line:#DFDAD1;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--navy);background:var(--cream);
  line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.band{height:6px;background:var(--or)}

h1,h2,h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  line-height:1.02;letter-spacing:.005em}
h1{font-size:clamp(38px,6vw,68px)}
h2{font-size:clamp(28px,4vw,42px)}
h3{font-family:'Inter';font-weight:700;text-transform:none;font-size:17px;line-height:1.35}
/* Etiketten er et badge, ikke bare en linje. Den gennemsigtige orange baggrund
   virker baade paa creme og paa navy, saa der skal ikke to varianter til. */
.eyebrow{font-family:'Archivo';font-weight:700;font-size:12.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--or);display:inline-block;line-height:1;
  padding:7px 13px;border-radius:999px;background:rgba(224,118,31,.13);
  box-shadow:inset 0 0 0 1px rgba(224,118,31,.30)}
.eyebrow .dim{color:#8FA0B8}
.rule{width:72px;height:5px;background:var(--or);border-radius:2px;margin:20px 0}
.lead{font-size:clamp(16px,1.6vw,19px);color:#C8D2E0;max-width:620px}
.sub{font-size:17px;color:var(--muted);max-width:680px}

/* topbar */
header{position:sticky;top:0;z-index:50;background:rgba(22,40,60,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .mark{width:38px;height:38px;flex:0 0 auto}
.brand .name{font-family:'Anton';font-size:24px;color:#fff;text-transform:uppercase;
  line-height:.9}
.brand .name span{color:var(--or)}
.brand .by{font-family:'Archivo';font-weight:700;font-size:8.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#8FA0B8;margin-top:3px}
.nav ul{display:flex;gap:26px;list-style:none;align-items:center}
.nav a{color:#C8D2E0;text-decoration:none;font-size:15px;font-weight:500}
.nav a:hover{color:#fff}
.btn{display:inline-block;background:var(--or);color:#fff;text-decoration:none;
  font-family:'Archivo';font-weight:800;letter-spacing:.10em;text-transform:uppercase;
  font-size:13px;padding:13px 24px;border-radius:6px;border:0;cursor:pointer;
  box-shadow:0 4px 14px rgba(224,118,31,.30)}
.btn:hover{background:var(--or-d)}
.btn.ghost{background:transparent;border:2px solid rgba(255,255,255,.30);
  box-shadow:none;color:#fff}
.navtoggle{display:none;background:0;border:0;color:#fff;cursor:pointer;padding:0}
/* Burgeren er tre streger, ikke et tegn, saa den kan foldes til et kryds.
   Den oeverste og nederste roterer ind mod midten, den midterste glider ud. */
.navtoggle .bars{display:block;position:relative;width:26px;height:18px}
.navtoggle .bars i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:currentColor;transition:transform .3s cubic-bezier(.4,0,.2,1),
  opacity .18s linear .06s}
.navtoggle .bars i:nth-child(1){top:0}
.navtoggle .bars i:nth-child(2){top:8px}
.navtoggle .bars i:nth-child(3){top:16px}
.nav.open .navtoggle .bars i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.open .navtoggle .bars i:nth-child(2){opacity:0;transform:translateX(-10px)}
.nav.open .navtoggle .bars i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.navtoggle .bars i{transition:none}}

/* hero */
.hero{background:linear-gradient(135deg,var(--navy-l) 0%,var(--navy) 58%,#0F1D2B 100%);
  color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;width:760px;height:760px;border-radius:50%;
  right:-260px;top:-300px;background:radial-gradient(circle,rgba(96,140,168,.22),transparent 70%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;
  align-items:center;padding-top:62px;padding-bottom:58px}
.hero h1{color:#fff}
.hero h1 span{color:var(--or)}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;font-size:13.5px;color:#A9B7C8}
.trust b{color:#fff;font-weight:600}

/* telefon */
/* Haandvaerkerseglet. Ligger hen over telefonen nede til venstre, saa det
   laeses som et stempel paa produktet og ikke som et element ved siden af. */
.visual{position:relative}
.segl{position:absolute;left:-46px;bottom:-10px;z-index:6;pointer-events:none;
  animation:seglInd .7s cubic-bezier(.2,.8,.3,1) .35s both}
.segl svg{width:200px;height:200px;display:block;transform:rotate(-9deg);
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.45))}
@keyframes seglInd{from{opacity:0;transform:scale(.82) rotate(6deg)}
  to{opacity:1;transform:none}}
@media(max-width:980px){.segl{left:auto;right:-8px;bottom:-14px}
  .segl svg{width:146px;height:146px}}
@media(prefers-reduced-motion:reduce){.segl{animation:none}}
.phone{width:265px;margin:0 auto;background:linear-gradient(160deg,#2A3442,#0C121B);
  border-radius:41px;padding:9px;box-shadow:0 22px 54px rgba(0,0,0,.42)}
.phone .scr{background:#16283C;border-radius:33px;overflow:hidden;position:relative}
.phone .bar{height:22px;display:flex;align-items:center;justify-content:space-between;
  padding:0 15px;color:#fff;font-size:10px;font-weight:600}
.phone .notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:80px;height:15px;background:#0C121B;border-radius:9px}

/* generelle sektioner */
section{padding:76px 0}
.sec-head{max-width:760px;margin-bottom:44px}
.sec-head h2{color:var(--navy)}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;padding:26px 24px;border-top:4px solid var(--or)}
.card p{font-size:14.5px;color:var(--muted);margin-top:8px}
.ico{width:40px;height:40px;border-radius:9px;background:var(--or);display:flex;
  align-items:center;justify-content:center;margin-bottom:14px}
.ico svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* skaerm i browserramme */
.shot{border-radius:10px;overflow:hidden;background:var(--navy-d);
  box-shadow:0 16px 40px rgba(20,35,60,.20)}
.shot .top{height:26px;background:var(--navy-d);display:flex;align-items:center;gap:6px;
  padding:0 12px}
.shot .top i{width:7px;height:7px;border-radius:50%;background:#4A5C74;display:block}
.shot .top i:first-child{background:var(--or)}
.shot .top span{margin-left:9px;font-size:9.5px;color:#8FA0B8;letter-spacing:.04em}
.cap{font-size:13.5px;color:#54626F;margin-top:11px;line-height:1.5}
.cap b{color:var(--navy)}

.split{display:grid;grid-template-columns:0.86fr 1.14fr;gap:46px;align-items:center}
.shot img{display:block;width:100%;height:auto}
/* brede skaerme, fx dagsvisningen, faar hele spaltebredden i stedet for en halv */
.bred-skaerm{margin-top:34px}
.bred-skaerm .cap{margin-top:14px}
/* alle tre skaerme i raekken er 1240x772, saa billedteksterne staar paa linje af
   sig selv. Skulle en kilde falde ud af format, beskaeres den i bunden, aldrig i toppen. */
.g3 .shot img{aspect-ratio:1240/772;object-fit:cover;object-position:top center}
.split.flip{grid-template-columns:1.14fr 0.86fr}
.split.flip>div:first-child{order:2}

/* kaeden */
.chain{background:var(--navy);color:#fff}
.chain h2{color:#fff}
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:38px}
.step{background:rgba(255,255,255,.05);border-top:3px solid var(--or);padding:18px 15px}
.step b{display:block;font-family:'Anton';font-size:22px;color:var(--or);line-height:1}
.step h3{color:#fff;font-size:14.5px;margin-top:9px}
.step p{font-size:12.5px;color:#A9B7C8;margin-top:5px;line-height:1.5}

/* priser */
.pris{background:var(--sand)}
.vilkaar{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.vilkaar div{background:#fff;padding:16px 18px}
.vilkaar b{font-size:14.5px}
.vilkaar p{font-size:13px;color:var(--muted);margin-top:3px}

/* faq */
details{background:#fff;padding:18px 22px;margin-bottom:10px;cursor:pointer}
details summary{font-weight:700;font-size:16px;list-style:none;display:flex;
  justify-content:space-between;gap:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--or);font-weight:800;font-size:20px}
details[open] summary::after{content:"–"}
details p{font-size:14.5px;color:var(--muted);margin-top:12px}

/* kontakt */
.kontakt{background:linear-gradient(135deg,var(--navy-l),var(--navy) 60%,#0F1D2B);color:#fff}
.kontakt h2{color:#fff}
.form{background:rgba(255,255,255,.06);padding:28px;border:1px solid rgba(255,255,255,.10)}
.form label{display:block;font-size:12.5px;color:#A9B7C8;margin:14px 0 5px;
  font-family:'Archivo';font-weight:700;letter-spacing:.10em;text-transform:uppercase}
.form input,.form textarea,.form select{width:100%;padding:12px 14px;border-radius:5px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;
  font-family:inherit;font-size:15px}
.form textarea{min-height:110px;resize:vertical}
.form .btn{margin-top:20px;width:100%}
.kinfo li{list-style:none;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.10)}
.kinfo b{display:block;font-family:'Archivo';font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:#8FA0B8;margin-bottom:4px}
.kinfo a{font-size:19px;text-decoration:none;font-weight:600}

footer{background:var(--navy-d);color:#8FA0B8;font-size:13.5px;padding:34px 0 28px}
footer .wrap{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;
  align-items:flex-start}
footer a{color:#C8D2E0;text-decoration:none}
.aer{background:#fff;border-left:5px solid var(--or);padding:18px 22px;margin-top:30px;
  font-size:14px;color:var(--muted)}
.aer b{color:var(--navy)}




.regne{display:block;background:var(--navy);color:#fff;padding:38px 36px 34px;
  margin-top:34px}
.regne-hd{max-width:660px}
.regne-hd h3{font-family:'Anton';text-transform:uppercase;font-weight:400;
  font-size:clamp(24px,3vw,32px);color:#fff;margin-top:10px;line-height:1.05}
.regne-hd p{color:#A9B7C8;font-size:15px;margin-top:10px}
.regne-krop{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;margin-top:30px;
  padding-top:28px;border-top:1px solid rgba(255,255,255,.14);align-items:start}
.regnetab{border-collapse:collapse;width:100%}
.regnetab td{padding:11px 0;font-size:15px;color:#C8D2E0;
  border-bottom:1px solid rgba(255,255,255,.12)}
.regnetab td:last-child{text-align:right;font-weight:600;color:#fff;white-space:nowrap;
  padding-left:14px}
.regnetab tr.sum td{border-bottom:0;border-top:2px solid var(--or);padding-top:14px;
  font-weight:700;color:#fff;font-size:18px}
.regne .tal{display:grid;grid-template-columns:1fr;gap:0}
.regne .tal div{display:flex;align-items:baseline;gap:16px;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.12)}
.regne .tal div:last-child{border-bottom:0}
.regne .tal b{font-family:'Anton';font-weight:400;font-size:30px;color:var(--or);
  line-height:1;flex:0 0 132px}
.regne .tal span{font-size:13.5px;color:#A9B7C8;line-height:1.45}
.regne-bund{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  color:#A9B7C8;font-size:15px;max-width:860px}
.regne-bund b{color:#fff}
@media(max-width:900px){.regne-krop{grid-template-columns:1fr;gap:26px}
  .regne .tal b{flex:0 0 120px;font-size:26px}}


.opk{background:#fff;padding:24px 22px 26px;display:flex;flex-direction:column;
  position:relative}
.opk.fremhaev{box-shadow:var(--skygge-hi);border-color:rgba(224,118,31,.28)}
.opk.fremhaev::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--or);border-radius:var(--r) var(--r) 0 0}
.opk-maerke{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  white-space:nowrap;background:var(--or);color:#fff;
  font-family:'Archivo';font-weight:800;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 12px;border-radius:3px}
.opk-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:13px;border-bottom:1px solid var(--line)}
.opk-top span{font-weight:700;font-size:16px}
.opk-top b{font-family:'Anton';font-weight:400;font-size:28px;color:var(--or);
  white-space:nowrap}
.opk-und{font-size:12.5px;color:var(--muted);margin-top:9px;padding-bottom:12px;
  border-bottom:1px solid var(--line)}
.opk ul{list-style:none;margin-top:12px}
.opk li{font-size:14px;color:var(--muted);padding:5px 0 5px 20px;position:relative}
.opk li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:2px;
  background:var(--or)}


/* kundecase */
.case{background:var(--navy);color:#fff}
.case .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:52px;align-items:center}
.case h2{color:#fff}
.case blockquote{font-family:'Inter';font-weight:500;font-size:clamp(18px,2.1vw,25px);
  line-height:1.45;color:#fff;margin:24px 0 0;padding-left:26px;
  border-left:5px solid var(--or)}
.case .kilde{margin-top:22px;font-size:15px;color:#A9B7C8;line-height:1.6}
.case .kilde b{display:block;color:#fff;font-size:17px}
.case .fakta{display:grid;gap:16px}
.case .fakta div{background:rgba(255,255,255,.06);padding:18px 20px;
  border-left:4px solid var(--or)}
.case .fakta b{display:block;font-family:'Anton';font-size:clamp(20px,2vw,26px);
  color:var(--or);line-height:1.05}
.case .fakta span{font-size:13.5px;color:#A9B7C8;display:block;margin-top:5px;
  line-height:1.5}
@media(max-width:900px){.case .wrap{grid-template-columns:1fr}}


.illu-hd{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 260px;
  gap:56px;align-items:center}
.illu-tekst{max-width:720px}
.illu-fig{width:100%;height:auto;justify-self:end;pointer-events:none}
.illu-fig.stor{width:100%}
.kaede-hd{grid-template-columns:minmax(0,1fr) 330px;align-items:end}
.illu-fig.trappe{width:100%;max-width:330px}
.ico.ghost{background:transparent;border:2px solid var(--or);width:38px;height:38px}
.ico.ghost svg{stroke:var(--or);width:19px;height:19px}
@media(max-width:1000px){.illu-hd{grid-template-columns:1fr}.illu-fig{display:none}}


.fakta-liste{display:grid;grid-template-columns:1fr 1fr;gap:34px 56px;margin-top:52px;
  padding-top:38px;border-top:1px solid var(--line)}
.fakta-liste h3{padding-left:18px;border-left:4px solid var(--or);line-height:1.3;
  border-radius:2px}
.fakta-liste p{font-size:14.5px;color:var(--muted);margin-top:9px;padding-left:22px}
@media(max-width:820px){.fakta-liste{grid-template-columns:1fr;gap:26px}}


.pris-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pris-grid.tre{grid-template-columns:repeat(3,1fr);gap:22px;max-width:900px}
.pricard{background:#fff;padding:24px 20px 26px;border-top:5px solid var(--or);
  display:flex;flex-direction:column}
.pricard.start{border-top-color:#9FB0C4;background:#FBFAF7}
.pricard .amt{font-family:'Anton';font-size:46px;color:var(--navy);line-height:1;
  margin-top:10px}
.pricard .amt em{font-style:normal;font-size:20px;color:var(--or)}
.pricard .hvem{font-size:13px;color:var(--muted);margin-top:5px;min-height:34px}
.pricard ul{list-style:none;margin-top:14px;border-top:1px solid var(--line);
  padding-top:13px}
.pricard li{font-size:13.5px;color:var(--muted);padding:5px 0 5px 20px;position:relative;
  line-height:1.4}
.pricard li::before{content:"✓";position:absolute;left:0;color:var(--or);font-weight:700}
.pricard li b{color:var(--navy)}
.pricard .note{font-size:12px;color:#93A0AE;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line);line-height:1.45}
@media(max-width:1000px){.pris-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.pris-grid{grid-template-columns:1fr}}


/* ---- blødere geometri, inspireret af zynch.dk ---- */
:root{--r:16px;--r-sm:10px;
  --kant:1px solid rgba(22,40,60,.09);
  --skygge:0 4px 22px rgba(20,35,60,.07);
  --skygge-hi:0 10px 34px rgba(20,35,60,.11);
  --tint:rgba(224,118,31,.11)}

.card,.pricard,.opk,.vilkaar div,.form,.aer,.case .fakta div,details,
.pw .pnl,.regne{border-radius:var(--r)}
.card,.vilkaar div,.aer,details{border:var(--kant);box-shadow:var(--skygge)}
.card{border-top:var(--kant);padding:24px 22px 24px;transition:box-shadow .25s,transform .25s}
/* mindre luft, og ombrydning der ikke efterlader et enkelt ord paa sidste linje */
.g4 .card h3{text-wrap:balance;line-height:1.28;margin:0}
.g4 .card p{text-wrap:pretty;margin-top:7px;line-height:1.52}
.g4 .ico{margin-bottom:16px}
.card:hover{box-shadow:var(--skygge-hi);transform:translateY(-2px)}

.pricard{border:var(--kant);border-top:var(--kant);box-shadow:var(--skygge);
  padding:26px 22px 28px;position:relative;overflow:hidden}
.pricard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--or)}
.pricard.start::before{background:#9FB0C4}

.opk{border:var(--kant);border-top:var(--kant);box-shadow:var(--skygge);
  position:relative;overflow:visible}

.vilkaar div{padding:20px 22px}
.aer{border-left:5px solid var(--or)}

/* ikoner som blød tonet flade */
.ico{background:var(--tint);border-radius:16px;width:58px;height:58px;
  margin-bottom:20px;box-shadow:inset 0 0 0 1px rgba(224,118,31,.16);
  transition:background .2s,box-shadow .2s}
.ico svg{stroke:var(--or);color:var(--or);width:29px;height:29px;stroke-width:1.6}
.ico.ghost{background:var(--tint);border:0;width:58px;height:58px}
.ico.ghost svg{stroke:var(--or);width:29px;height:29px;stroke-width:1.6}
.card:hover .ico{background:rgba(224,118,31,.16);
  box-shadow:inset 0 0 0 1px rgba(224,118,31,.28)}

/* knapper */
.btn{border-radius:9px;box-shadow:0 4px 16px rgba(224,118,31,.26);
  transition:transform .18s,box-shadow .18s,background .18s}
.btn:hover{transform:translateY(-1px);box-shadow:0 7px 22px rgba(224,118,31,.34)}
.btn.ghost{box-shadow:none}

/* skærmbilleder og telefoner */
.shot{border-radius:14px;box-shadow:0 14px 40px rgba(20,35,60,.16)}
.shot .top{border-radius:14px 14px 0 0}
.phone{border-radius:40px}

/* mørke flader */
.step{border-radius:var(--r);border-top:0;background:rgba(255,255,255,.055);
  padding:22px 20px;position:relative;overflow:hidden}
.step::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--or)}
.case .fakta div{border-left:0;border-radius:var(--r);padding:20px 22px;
  position:relative;overflow:hidden}
.case .fakta div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--or)}
.regne{border-radius:var(--r)}

/* formular */
.form input,.form textarea,.form select{border-radius:9px}
details{padding:20px 24px}
details summary{cursor:pointer}

/* lidt mere luft */
section{padding:84px 0}
.sec-head{margin-bottom:48px}

.opstart-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1080px){.opstart-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.opstart-grid{grid-template-columns:1fr}}
.opk-top b{font-size:24px}

/* politik-paneler */
.polbar{border-top:1px solid rgba(255,255,255,.10);margin-top:26px;padding-top:18px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;
  font-size:13px}
.polbar nav{display:flex;gap:20px;flex-wrap:wrap}
/* rettighedsblok. Teksten er lang og juridisk, saa den ligger foldet sammen bag to
   klikbare linjer. Foldes ud med klik og ikke med mouseover: en hover-menu kan ikke
   betjenes paa en telefon, og den lukker sig selv naar musen glider forbi. */
.rettigheder{border-top:1px solid rgba(255,255,255,.10);margin-top:26px;padding-top:22px}
.rettigheder h4{font-family:'Archivo',sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--or);margin:0 0 14px}
.ret-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 44px;align-items:start}
details.ret{background:transparent;border:0;box-shadow:none;padding:0;margin:0;
  border-left:2px solid rgba(224,118,31,.35);padding-left:14px}
details.ret summary{font-size:13px;font-weight:400;color:#8FA0B8;list-style:none;
  display:flex;align-items:baseline;gap:6px;cursor:pointer;transition:color .15s}
details.ret summary:hover{color:#C8D2E0}
details.ret summary::-webkit-details-marker{display:none}
details.ret summary::after{content:"Læs";font-family:'Archivo',sans-serif;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--or);flex:none;
  margin-left:auto;padding-left:16px}
details.ret[open] summary::after{content:"Skjul"}
details.ret[open]{border-left-color:var(--or)}
details.ret p{font-size:12px;line-height:1.65;color:#7E8FA4;margin:10px 0 0}
.rettigheder b{color:#C8D2E0;font-weight:600}
.rettigheder a{color:#C8D2E0;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.ret-grid{grid-template-columns:1fr}}
.polbar a.pol{text-decoration:underline;text-underline-offset:3px;color:#C8D2E0;cursor:pointer}
.polbar a.pol:hover{color:#fff}
.pw{position:fixed;inset:0;z-index:300;display:none}
.pw.open{display:block}
.pw .bd{position:absolute;inset:0;background:rgba(10,18,28,.62)}
.pw .pnl{position:absolute;top:0;right:0;bottom:0;width:min(620px,100%);background:#fff;
  display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.34)}
.pw .hd{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 28px;border-bottom:1px solid var(--line);flex:0 0 auto}
.pw .hd h3{font-family:'Anton';text-transform:uppercase;font-size:24px;font-weight:400}
.pw .x{background:0;border:0;font-size:30px;line-height:1;color:var(--muted);cursor:pointer}
.pw .bdy{overflow-y:auto;padding:24px 28px 30px;font-size:14.5px;color:#3D4C5C;
  line-height:1.65}
.pw .bdy h4{font-family:'Inter';font-weight:700;font-size:15px;color:var(--navy);
  margin:22px 0 6px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.pw .bdy h4:first-child{margin-top:0}
.pw .bdy ul{margin:8px 0 8px 20px}
.pw .bdy li{margin-bottom:4px}
.pw .bdy .dato{color:var(--muted);font-size:13px;font-style:italic}
.pw .ft{padding:16px 28px;border-top:1px solid var(--line);flex:0 0 auto;text-align:right}

/* forstoerrelse af skaermbilleder */
.shot{transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s;
  transform-origin:center center;cursor:zoom-in;position:relative;z-index:1}
.shot:hover{transform:scale(1.17);z-index:20;
  box-shadow:0 30px 70px rgba(20,35,60,.42)}
.shot::after{content:"Klik for at se stort";position:absolute;right:10px;bottom:10px;
  background:rgba(16,30,46,.88);color:#fff;font-size:11px;font-weight:600;
  padding:5px 10px;border-radius:4px;opacity:0;transition:opacity .2s;pointer-events:none}
.shot:hover::after{opacity:1}
.phone.zoomable{cursor:zoom-in;transition:transform .28s cubic-bezier(.2,.7,.3,1),
  box-shadow .28s;position:relative;z-index:1}
.phone.zoomable:hover{transform:scale(1.12);z-index:20;
  box-shadow:0 32px 70px rgba(0,0,0,.52)}
section,.split,.grid{overflow:visible}

.lb{position:fixed;inset:0;z-index:200;background:rgba(10,18,28,.94);
  display:none;align-items:center;justify-content:center;flex-direction:column;
  padding:34px 24px;cursor:zoom-out}
.lb.open{display:flex}
.lb img{max-width:96vw;max-height:84vh;border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);background:#fff}
.lb .lbcap{color:#C8D2E0;font-size:14px;margin-top:16px;text-align:center;max-width:760px}
.lb .lbclose{position:absolute;top:20px;right:26px;background:0;border:0;color:#fff;
  font-size:34px;line-height:1;cursor:pointer;opacity:.8}
.lb .lbclose:hover{opacity:1}
@media(max-width:900px){
  .shot:hover,.phone.zoomable:hover{transform:none;box-shadow:0 16px 40px rgba(20,35,60,.20)}
  .shot::after{opacity:1;font-size:10px;padding:4px 8px}
}

@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;padding-top:44px;padding-bottom:44px}
  .hero .visual{order:-1}
  .g4,.g3,.g2{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .split,.regne,.vilkaar{grid-template-columns:1fr;gap:26px}
  .split.flip>div:first-child{order:0}
  .nav ul{display:none}
  .navtoggle{display:block}
  .nav.open ul{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--navy);
    flex-direction:column;padding:18px 24px;gap:14px;border-bottom:1px solid rgba(255,255,255,.10)}
}
@media(max-width:620px){
  .g4,.g3,.g2,.steps{grid-template-columns:1fr}
  section{padding:56px 0}
}

/* ============================================================
   MOBIL. Samlet til sidst, saa den vinder over de tidligere regler
   uden at der skal jagtes !important rundt i arket.
   ============================================================ */
@media(max-width:900px){

  /* Prisgitteret kollapsede ikke. .pris-grid.tre er to klasser og slog
     mediereglen, der kun ramte én. Derfor stod tre kort paa 390 px med
     afskaarne ord. */
  .pris-grid, .pris-grid.tre{grid-template-columns:1fr;gap:16px;max-width:none}

  /* Budskabet foerst, billedet bagefter. Telefonen laa oeverst og skubbede
     overskriften under folden. */
  .hero .visual{order:1;margin-top:30px}
  .hero .wrap>div:first-child{order:0}
  .hero h1{font-size:clamp(38px,11vw,54px);line-height:1.02}
  .hero .lead{font-size:16px}
  .cta{display:grid;grid-template-columns:1fr;gap:10px}
  .cta .btn{width:100%;text-align:center;padding:15px 18px}
  .trust{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-size:12.5px}
  /* "· Et Zynch-produkt" braekkede eyebrow'en over to linjer i heroen.
     Afsenderen staar i baade logo og footer, saa den kan undvaeres her. */
  .hero .eyebrow .dim{display:none}

  /* Brede kontorskaerme er ulaeselige som en stribe paa en telefon. I stedet
     for at vise hele skaermen i frimaerkestoerrelse viser vi et laesbart
     udsnit fra oeverste venstre hjoerne, og tryk aabner den i fuld stoerrelse. */
  .shot img{aspect-ratio:4/3;object-fit:cover;object-position:left top}
  .g3 .shot img{aspect-ratio:4/3}
  .shot::after{content:"Tryk for at se hele skærmen";opacity:1;font-size:10.5px}
  .cap{font-size:13px}

  /* Luft og typografi */
  section{padding:52px 0}
  h2{font-size:clamp(28px,8vw,40px);line-height:1.06}
  .sub,.lead{font-size:16px}
  h3{font-size:16px}
  p{text-wrap:pretty}
  .sec-head{margin-bottom:4px}

  /* Seks trin under hinanden bliver en meget lang stribe */
  .steps{grid-template-columns:1fr 1fr;gap:10px}
  .step h3{font-size:14px}
  .step p{font-size:12.5px}

  .fakta-liste{gap:22px}
  .vilkaar{gap:12px}
  .bred-skaerm{margin-top:24px}
  .rettigheder{padding-top:18px}
  footer .wrap{gap:18px}
  .polbar{gap:12px;font-size:12px}
}

@media(max-width:620px){
  /* Under 620 px er to kolonner for trangt til alt andet end tal */
  .g4,.g3,.g2{grid-template-columns:1fr;gap:18px}
  .steps{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr}
  .wrap{padding-left:20px;padding-right:20px}
  /* Ingen broedtekst under 13 px paa en telefon */
  .cap,.pricard .note,.step p,.vilkaar p,details.ret p,.rettigheder p,
  .form p{font-size:13px}
  .eyebrow{font-size:11px;letter-spacing:.13em}
}

/* ---- samtykke -----------------------------------------------------------
   Banneret blokerer paa forhaand: der maales ingenting, foer der er sagt ja.
   Fravalg er standard, og de to knapper vejer lige meget visuelt, saa valget
   er reelt og ikke et ja forklædt som et design. */
.samtykke{position:fixed;left:0;right:0;bottom:0;z-index:400;background:var(--navy-d);
  color:#C8D2E0;border-top:3px solid var(--or);padding:22px 0 24px;
  box-shadow:0 -18px 44px rgba(0,0,0,.34);transform:translateY(110%);
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.samtykke.vis{transform:none}
.samtykke .wrap{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.samtykke h4{font-family:'Archivo',sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--or);margin:0 0 8px}
.samtykke p{font-size:13.5px;line-height:1.6;margin:0;max-width:760px;color:#9DAEC2}
.samtykke a{color:#C8D2E0;text-decoration:underline;text-underline-offset:3px}
.samtykke .valg{display:flex;gap:10px;flex-wrap:wrap}
.samtykke button{font-family:'Archivo',sans-serif;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;padding:13px 20px;border-radius:9px;
  cursor:pointer;border:1px solid rgba(255,255,255,.22);background:transparent;
  color:#C8D2E0;transition:background .18s,color .18s}
.samtykke button:hover{background:rgba(255,255,255,.09);color:#fff}
.samtykke button.ja{background:var(--or);border-color:var(--or);color:#fff}
.samtykke button.ja:hover{background:var(--or-d)}
@media(max-width:820px){
  .samtykke .wrap{grid-template-columns:1fr;gap:16px}
  .samtykke .valg{display:grid;grid-template-columns:1fr 1fr}
  .samtykke button{width:100%}
}


/* ---- moderselskab, krydsreference til zynch.dk -------------------------
   Spejler bevidst Dagsdrift-blokken paa zynch.dk: moerkt kort, orange chip,
   to knapper og et faktapanel til hoejre. De to sider skal ligne familie.
   BEMAERK: klassen fade-up skrives ikke i html'en. Den tildeles af scriptet
   nederst ud fra selektorlisten, og et haandskrevet fade-up bliver aldrig
   observeret, altsaa staar sektionen usynlig. .moder .kort er tilfoejet listen. */
.moder{background:var(--cream)}
.moder .kort{background:var(--navy);border-radius:22px;padding:52px 56px;color:#fff;
  display:grid;grid-template-columns:1.22fr .78fr;gap:48px;align-items:start}
.moder .chip{display:inline-block;border:1.5px solid rgba(224,118,31,.55);color:var(--or);
  font-family:'Archivo';font-weight:700;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:8px 15px;border-radius:999px}
.moder h2{font-family:'Archivo';font-weight:800;color:#fff;letter-spacing:-.4px;
  font-size:clamp(25px,2.9vw,36px);line-height:1.2;margin:22px 0 0;text-transform:none}
.moder h2 em{font-family:Georgia,'Times New Roman',serif;font-style:italic;
  font-weight:400;color:var(--or)}
.moder .lead{font-size:16.5px;line-height:1.62;color:#C8D2E0;margin-top:16px;max-width:52ch}
.moder .liste{display:grid;grid-template-columns:1fr 1fr;gap:11px 30px;margin-top:26px}
.moder .liste div{position:relative;padding-left:27px;font-size:15px;line-height:1.45;
  color:#EAF0F6}
.moder .liste div::before{content:"";position:absolute;left:0;top:4px;width:15px;height:15px;
  background:no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0761F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.moder .knapper{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.moder .kn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-weight:600;font-size:15.5px;padding:15px 26px;border-radius:11px;
  transition:background .2s,transform .2s,border-color .2s}
.moder .kn.p{background:var(--or);color:#fff}
.moder .kn.p:hover{background:#C9661A;transform:translateY(-1px)}
.moder .kn.s{border:1.5px solid rgba(255,255,255,.32);color:#fff}
.moder .kn.s:hover{border-color:#fff;transform:translateY(-1px)}
.moder .panel{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);
  border-radius:16px;padding:26px 28px}
.moder .panel .mrk{font-family:'Archivo';font-weight:700;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#8FA0B8}
.moder .panel dl{margin:18px 0 0;display:grid;gap:0}
.moder .panel .r{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.moder .panel .r:last-of-type{border-bottom:0}
.moder .panel dt{font-size:14.5px;color:#C8D2E0}
.moder .panel dd{margin:0;font-size:15px;font-weight:600;color:#fff;text-align:right}
.moder .panel dd a{color:var(--or);text-decoration:none;font-weight:700}
.moder .panel dd a:hover{text-decoration:underline}
.moder .panel .note{margin-top:16px;font-size:12.5px;color:#8FA0B8;line-height:1.55;
  font-style:italic}
@media(max-width:900px){
  .moder .kort{grid-template-columns:1fr;gap:30px;padding:34px 24px;border-radius:18px}
  .moder .liste{grid-template-columns:1fr;gap:10px}
  .moder .knapper .kn{flex:1 1 100%;justify-content:center}
  .moder .lead{font-size:15.5px}
}


/* ---- banner med link til prisberegneren ------------------------------- */
.beregn{display:flex;align-items:center;justify-content:space-between;gap:26px;
  background:var(--sand);border:1px solid #E6D9C2;border-radius:var(--r);
  padding:20px 24px;margin-top:22px}
.beregn b{display:block;font-size:15.5px;color:var(--navy)}
.beregn span{display:block;font-size:13.5px;color:var(--muted);margin-top:5px;line-height:1.55;
  max-width:64ch}
.beregn .btn{flex:0 0 auto;background:var(--or);color:#fff;text-decoration:none;
  font-weight:600;font-size:15px;padding:14px 24px;border-radius:11px;white-space:nowrap;
  transition:background .2s,transform .2s}
.beregn .btn:hover{background:#C9661A;transform:translateY(-1px)}
/* ---- brancher --------------------------------------------------------- */
.fag{background:var(--sand)}
/* .lead er lyseblå, lavet til mørk bund. På lyse sektioner skal den være læsbar. */
.fag .lead,.mod .lead{color:var(--muted);max-width:66ch}

/* varebilen ud af porten */
.fag-scene{background:#fff;border:var(--kant);border-radius:var(--r);
  box-shadow:var(--skygge);padding:22px 26px 18px;margin:34px 0 0}
.fag-scene svg{width:100%;height:auto;display:block}
.fag-scene figcaption{margin:14px auto 0;padding-top:15px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--muted);line-height:1.6;text-align:center;max-width:74ch}
.fag-scene figcaption b{color:var(--navy)}

.fag-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px}
.fag-kort{background:#fff;border:var(--kant);border-radius:var(--r);box-shadow:var(--skygge);
  padding:26px 28px 24px;display:flex;flex-direction:column}
.fag-hd{display:flex;align-items:center;gap:13px;margin-bottom:11px}
.fag-ik{flex:0 0 44px;height:44px;border-radius:13px;background:var(--sand);
  display:flex;align-items:center;justify-content:center}
.fag-kort h3{font-family:'Archivo';font-weight:800;font-size:20px;margin:0;line-height:1.2}
.fag-kort .u{font-size:14.5px;color:var(--muted);margin:0;line-height:1.6}
.fag-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:18px}
.fag-kort .skil{border-top:1px solid var(--line);margin-top:18px}
.fag-tag{display:inline-flex;align-items:center;gap:8px;background:var(--cream);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:14.5px;
  color:var(--navy)}
.fag-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--or);
  flex:0 0 6px}
.fag-fod{margin-top:26px;font-size:14.5px;color:var(--muted);line-height:1.65;
  padding-top:20px;border-top:1px solid var(--line)}
.fag-fod b{color:var(--navy)}
@media(max-width:900px){
  .beregn{flex-direction:column;align-items:flex-start;gap:16px}
  .beregn .btn{width:100%;text-align:center}
  .fag-grid{grid-template-columns:1fr}
  .fag-scene{padding:16px 14px 14px}
}
/* paa mobil bliver tegningens egne etiketter for smaa til at laese.
   De skjules, og teksten staar i stedet som rigtig HTML under billedet. */
.fag-scene .etik{display:none}
@media(max-width:640px){
  .fag-scene svg .lbl{display:none}
  .fag-scene .etik{display:flex;justify-content:space-between;gap:12px;margin-top:8px;
    font-family:'Archivo';font-weight:800;font-size:11px;letter-spacing:.10em;
    text-transform:uppercase;color:#8A94A2}
}
@media(max-width:560px){
  .fag-tag{font-size:13.5px;padding:7px 12px}
  .fag-scene figcaption{font-size:13.5px;text-align:left;max-width:none}
}

/* ---- indtoning ved scroll, samme udtryk som paa zynch.dk ----------------
   Klassen saettes af JavaScript og ikke i HTML. Er JavaScript slaaet fra,
   staar alt synligt fra start i stedet for at vaere usynligt for altid. */
.fade-up{opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .7s ease}
.fade-up.visible{opacity:1;transform:none}
/* Den der har bedt om mindre bevaegelse, skal ikke have noget at se paa. */
@media(prefers-reduced-motion:reduce){
  .fade-up{opacity:1;transform:none;transition:none}
}

/* ---- de otte huller. Liste frem for kort, saa alle otte fylder mindre end
   fire kort gjorde. Ikonet staar til venstre og teksten ved siden af, i stedet
   for over hinanden. */
/* rolledoere: laeseren skal finde sig selv paa to sekunder */
.roller{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.rolle{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.rolle:hover{transform:translateY(-3px);border-color:rgba(224,118,31,.5);
  box-shadow:0 10px 30px rgba(22,40,60,.09)}
.rolle .rmrk{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--or)}
.rolle h3{font-size:19px;line-height:1.25;margin:8px 0 0}
.rolle .rp{font-size:14.5px;color:var(--muted);line-height:1.55;margin-top:9px}
.rolle ul{list-style:none;margin:16px 0 0;padding:0}
.rolle li{position:relative;padding-left:20px;font-size:14px;line-height:1.5;
  margin-bottom:9px;color:var(--navy)}
.rolle li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--or)}
.rolle .rpris{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted)}
.rolle .rpris b{color:var(--navy);font-size:15px}
.steps.tre{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.roller{grid-template-columns:1fr}
  .steps.tre{grid-template-columns:1fr}}
.huller{display:grid;grid-template-columns:1fr 1fr;gap:2px 44px;margin-top:34px;
  border-top:1px solid var(--line)}
.hul{display:flex;gap:16px;align-items:flex-start;padding:19px 0;
  border-bottom:1px solid var(--line)}
.hul-i{flex:0 0 38px;height:38px;border-radius:11px;background:var(--tint);
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(224,118,31,.16)}
.hul-i svg{width:20px;height:20px;stroke:var(--or);color:var(--or);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hul h3{margin:0 0 3px;font-size:15.5px;line-height:1.3}
.hul p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
@media(max-width:820px){
  .huller{grid-template-columns:1fr;gap:0}
  .hul{padding:16px 0;gap:14px}
  .hul h3{font-size:15px}
  .hul p{font-size:13.5px}
}

/* kontaktformular */
.formnote{font-size:12px;color:#8FA0B8;margin-top:14px}
/* Paa en telefon maa broedtekst ikke under 13 px, heller ikke det med smaat. */
@media(max-width:620px){.formnote{font-size:13px}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formsvar{margin-top:14px;font-size:14px;line-height:1.5;display:none}
.formsvar.vis{display:block}
.formsvar.ok{color:#7FD1A6}
.formsvar.fejl{color:#F0A05A}
.form button[disabled]{opacity:.6;cursor:default}

/* Trykflader. En finger rammer ikke en linje paa 15 px, saa alt der kan trykkes
   paa faar hoejde nok til at kunne rammes uden at zoome. */
@media(hover:none),(max-width:900px){
  /* 12 px er for lille paa noget, man holder i haanden. Gaelder ogsaa tablets,
     hvor 620-graensen ikke slaar til. */
  .formnote,.rettigheder p,details.ret p,.polbar,.cap{font-size:13px}
  .navtoggle{min-width:44px;min-height:44px;display:flex;align-items:center;
    justify-content:center}
  .polbar a.pol,footer a{display:inline-block;padding:9px 0;line-height:1.2}
  .polbar nav{gap:6px 20px}
  details.ret summary{padding:10px 0}
  .lb .lbclose{min-width:48px;min-height:48px;top:8px;right:8px}
}

/* Brancheskaermbilleder. Ugeplanen i fuld bredde, telefonen ved siden af tekst. */
.skud-sek{padding:10px 0 4px}
.skud-uge{background:#fff;border:var(--kant);border-radius:var(--r);overflow:hidden}
.skud-uge img{display:block;width:100%;border-bottom:1px solid var(--linje,#DFDAD1)}
.skud-uge p{font-size:14px;color:var(--muted);padding:12px 18px;line-height:1.55}
.skud-par{display:grid;grid-template-columns:220px 1fr;gap:38px;align-items:center;
  margin-top:30px}
.skud-tlf{background:linear-gradient(160deg,#2A3442,#0C121B);border-radius:26px;
  padding:7px;box-shadow:0 18px 42px rgba(16,30,46,.28)}
.skud-tlf img{display:block;width:100%;border-radius:20px}
.skud-txt h3{font-size:20px}
.skud-txt p{font-size:15px;color:var(--muted);line-height:1.62;margin-top:10px}
.skud-note{font-size:13px;opacity:.85}
@media(max-width:760px){.skud-par{grid-template-columns:1fr;gap:20px}
  .skud-tlf{max-width:220px;margin:0 auto}}

/* Tre veje ind: tre lige kolonner, ikke en tokolonne-liste med et enligt kort. */
.spor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.spor-kort{display:flex;flex-direction:column;background:#fff;border:var(--kant);
  border-radius:var(--r);padding:26px 24px 22px;text-decoration:none;color:inherit;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.spor-kort:hover{transform:translateY(-3px);border-color:#C9BFB0;
  box-shadow:0 14px 30px rgba(16,30,46,.10)}
.spor-ikon{width:52px;height:52px;border-radius:14px;background:rgba(224,118,31,.12);
  color:var(--orange);display:flex;align-items:center;justify-content:center;
  margin-bottom:18px}
.spor-ikon svg{width:27px;height:27px}
.spor-kort b{font-size:18px;line-height:1.3}
.spor-txt{display:block;font-size:14.5px;color:var(--muted);line-height:1.6;
  margin-top:10px;flex:1}
.spor-mere{display:block;margin-top:18px;font-size:14px;font-weight:700;
  color:var(--orange)}
@media(max-width:900px){.spor-grid{grid-template-columns:1fr}}

/* Stregtegningerne. Centreret, med en billedtekst der kan laeses. */
.illu-sek{padding:6px 0 2px}
.illu-sek figure{margin:0 auto;text-align:center}
.illu-sek img{display:block;width:100%;height:auto}
.illu-sek figcaption{font-size:14px;color:var(--muted);line-height:1.6;
  margin-top:14px;max-width:60ch;margin-left:auto;margin-right:auto}

/* Koeretids-sektionens otte punkter laa som bar tekst i tre kolonner og saa
   trange ud. De faar samme kortform som resten af sitet. */
#funktioner .grid.g3 > div{background:#fff;border:var(--kant);border-radius:var(--r);
  padding:20px 22px 18px;border-left:3px solid var(--orange)}
#funktioner .grid.g3{gap:16px !important;margin-top:30px !important}
#funktioner .grid.g3 h3{font-size:16.5px;line-height:1.34}
#funktioner .grid.g3 p{font-size:14.5px !important;line-height:1.62;margin-top:9px !important}
@media(max-width:900px){#funktioner .grid.g3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){#funktioner .grid.g3{grid-template-columns:1fr}}

/* Overskrift og illustration er ét grid. To kolonner, lodret centreret i
   forhold til hinanden, og aldrig oven i det, der staar nedenunder. */
.hoved{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:52px;align-items:center;
  margin-bottom:44px}
.hoved .sec-head{margin-bottom:0;padding-right:0;max-width:none}
.hoved-illu img{display:block;width:100%;height:auto}
@media(max-width:1240px){.hoved{grid-template-columns:minmax(0,1fr) 380px;gap:40px}}
@media(max-width:1040px){
  .hoved{grid-template-columns:1fr;gap:22px}
  .hoved-illu{max-width:460px;margin:0 auto}
}

/* KONTRAST. .lead var sat til #C8D2E0, fordi den kun blev brugt i heroen paa
   navy. Paa de nye undersider staar den paa creme, hvor den giver kontrast 1,43
   og reelt er ulaeselig. WCAG AA kraever 4,5. #54626E giver 5,9 paa creme og
   5,4 paa sand. Heroen er undtaget, den staar stadig paa moerk baggrund. */
:root{--lead-lys:#54626E}
/* LUFT I OVERSKRIFTERNE. Anton er en smal, hoej skrift, og line-height 1,02
   klemmer to- og trelinjede overskrifter sammen, saa de ligner ét bogstavtaeppe.
   1,14 giver luft uden at goere dem hoeje og luftige. Heroen beholder den tætte
   saetning, den er stor nok til at baere den. Og pillen ovenover skal ikke sidde
   klods op ad overskriften. */
h2, .sec-head h1.sidetitel{line-height:1.14}
.sec-head .eyebrow{margin-bottom:14px;display:inline-block}
.sec-head .rule{margin-top:20px}
/* BROEDTEKSTEN GENERELT. --muted var #6E7C8C, som giver 4,0 paa creme, 3,6 paa
   sand og 4,3 paa hvid. WCAG AA kraever 4,5, og Lars laeste det som "slet ikke
   synligt nok". #54626E giver 5,9 / 5,4 / 6,3. Farven bruges kun paa lyse
   baggrunde, de moerke sektioner har deres egne lyse farver. */
:root{--muted:#54626E}
.lead{color:var(--lead-lys)}
/* .fag og .mod satte selv --muted, som kun giver 3,6 paa sandfarvet baggrund */
.fag .lead, .mod .lead{color:var(--lead-lys)}
/* moerke sektioner beholder den lyse tekst */
.hero .lead, .chain .lead, .kontakt .lead, .moder .lead{color:#C8D2E0}
/* undersidernes h1 skal se ud som en h2, den er en sidetitel og ikke en hero */
.sec-head h1.sidetitel{font-size:clamp(28px,4vw,42px);color:var(--navy)}

/* prisblokken paa forsiden, kort udgave. Den fulde beregner ligger paa /pris */
.pris-tre{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.pris-tre .pk{background:#fff;border:var(--kant);border-radius:var(--r);padding:18px 20px}
.pris-tre b{font-family:'Anton',sans-serif;font-weight:400;font-size:34px;color:var(--orange);
  display:block;line-height:1}
.pris-tre u{text-decoration:none;font-weight:700;display:block;margin-top:8px;font-size:16px}
.pris-tre span{display:block;margin-top:6px;font-size:14px;color:var(--muted);line-height:1.5}
.pris-eks{margin-top:18px;background:var(--sand);border:var(--kant);border-radius:var(--r);
  padding:20px 22px}
.pris-eks h3{font-size:18px}
.pris-eks p{margin-top:8px;font-size:15px;color:var(--muted);line-height:1.6}
@media(max-width:760px){.pris-tre{grid-template-columns:1fr}}

/* Vilkaarssiden. Almindelig, laesbar broedtekst paa lys baggrund, ikke
   fodfarver. Teksten staar aaben: den, der klikker ind paa vilkaar, vil laese
   dem, ikke folde dem ud. */
.vk-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.vk-kort{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 28px}
.vk-kort h3{font-family:'Archivo',sans-serif;font-size:17px;font-weight:800;color:var(--navy);
  margin:0 0 6px;letter-spacing:-.01em}
.vk-kort .par{font-family:'Archivo',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin:0 0 12px}
.vk-kort p{font-size:15px;line-height:1.72;color:var(--lead-lys);margin:0 0 12px}
.vk-kort p:last-child{margin-bottom:0}
.vk-kort a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.vk-note{background:var(--sand);border-radius:14px;padding:20px 24px;margin-top:26px;
  font-size:15px;line-height:1.7;color:var(--lead-lys)}
.vk-note a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.vk-grid{grid-template-columns:1fr;gap:18px}}

/* ══ Laesbar orange ══════════════════════════════════════════════════════
   Maalt paa hver enkelt flade: brandets #E0761F som LILLE tekst paa hvid,
   creme, sand og paa den lyse etiket-pille ligger paa 2,5 til 3,1 mod WCAG
   AA's krav paa 4,5. Farven er den samme orange, bare moerkere, og bruges
   kun hvor orange staar som tekst paa en lys flade. Knapper og streger er
   uroerte. Maalt: 5,42 paa hvid, 5,08 paa creme, 4,62 paa sand, 4,46 paa
   etiket-pillen. */
:root{--or-tekst:#A85200}
.eyebrow{color:var(--or-tekst)}
.eyebrow .dim{color:#5B6C7E}
.rolle .rmrk{color:var(--or-tekst)}
.vk-kort .par{color:var(--or-tekst)}
.rettigheder h4{color:var(--or)}          /* staar paa moerk fod, uaendret */
.formnote{color:#5B6C7E}
/* store overskrifter kraever 3,0. Den orange del af heroen laa paa 2,90. */
.hero h1 span{color:#D2691A}
/* prissidens egne graa toner laa lige under kravet */
#prisside .hint{color:#5A6876}
#prisside .mpris em,#prisside .pr-bruger{color:#7A5A1E}
#prisside .kolhd span{color:#5A6876}
/* Knappen beholder sin orange. Teksten bliver navy, saa den bestaar AA:
   hvid paa #E0761F gav 3,10, navy paa #E0761F giver 4,83. */
.btn,.btn:hover,a.btn,button.btn,.ddnav .cta,#prisside .btn,#prisside a[href*="kontakt"]{color:#16283C}
/* Den tomme knap staar paa moerk baggrund, saa den skal have hvid tekst.
   Ved hover og klik fylder den op i orange og opfoerer sig som "Tag en snak":
   samme orange, samme navy tekst. Foer blev teksten navy paa den moerke
   baggrund og forsvandt. */
.btn.ghost{color:#fff}
.btn.ghost:hover,.btn.ghost:focus,.btn.ghost:active,.btn.ghost:focus-visible{
  background:var(--or);border-color:var(--or);color:#16283C}

/* Prissiden gav vandret scroll paa en 360 px telefon: .gitter holdt sine
   kolonner, saa kortene blev 364 px brede i en 312 px spalte. Grid-børn har
   min-width:auto som standard og krymper derfor ikke af sig selv. */
@media(max-width:900px){
  #prisside .gitter,#prisside .pakker{grid-template-columns:1fr}
  #prisside .gitter > *,#prisside .pakker > *,#prisside .kort > *{min-width:0}
}
#prisside .gitter,#prisside .pakker,#prisside .kort{min-width:0}
#prisside .kort{max-width:100%}

/* Klikflader paa en telefon. Plus og minus paa regnemaskinen var 34 px, og
   fodens links stod med 21 px hoejde. WCAG 2.2 AA kraever 24 px, men en
   tommelfinger paa en byggeplads har brug for mere end minimum. */
@media(max-width:760px){
  #prisside .tael button{min-width:44px;min-height:44px;font-size:19px}
  #prisside .tael input{min-height:44px}
  footer a,.polbar a,.fod a{display:inline-block;padding:7px 0}
}