/* Lyst og venligt: creme bund, skovgrøn tekst, logoets grønne farver som detaljer. Aldrig sort eller guld tekst. */
:root{
  --skovgroen:#33432b; --mosgroen:#4c5c40; --salvie:#4e6a3a; --salvie-moerk:#405a2f;
  --creme:#faf8f3; --salvieflade:#eef2e6; --hvid:#ffffff; --streg:#e4e6da;
  --g1:#cbc5af; --g2:#c0c4a6; --g3:#abc293; --g4:#bdc892; --g5:#c0da9e;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--skovgroen);font-family:var(--sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--salvie)}
a:focus-visible,button:focus-visible{outline:3px solid var(--g3);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.spring{position:absolute;left:-999px;top:8px;background:var(--hvid);padding:8px 14px;border-radius:8px;z-index:30}
.spring:focus{left:12px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;text-wrap:balance;color:var(--skovgroen)}
h2{font-size:clamp(30px,3.6vw,42px);margin:0 0 14px}
h3{font-size:26px;margin:0 0 8px}
p{margin:0 0 14px}
.bar{display:flex;gap:6px}
.bar i{display:block;height:5px;width:40px;border-radius:3px}
.bar i:nth-child(1){background:var(--g1)}.bar i:nth-child(2){background:var(--g2)}.bar i:nth-child(3){background:var(--g3)}.bar i:nth-child(4){background:var(--g4)}.bar i:nth-child(5){background:var(--g5)}

/* Top */
header.top{background:var(--hvid);border-bottom:1px solid var(--streg);position:sticky;top:0;z-index:20}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.logo img{width:190px;height:auto}
nav.menu{display:flex;align-items:center;gap:24px}
nav.menu a{color:var(--skovgroen);text-decoration:none;font-size:14px;font-weight:500}
nav.menu a:hover{color:var(--salvie);text-decoration:underline;text-underline-offset:4px}
.btn{display:inline-block;font-family:var(--sans);font-size:15px;font-weight:600;padding:12px 24px;border-radius:12px;text-decoration:none;border:0;white-space:nowrap;cursor:pointer}
.btn.p{background:var(--salvie);color:#fff}
.btn.p:hover{background:var(--salvie-moerk)}
.btn.s{background:transparent;color:var(--salvie);box-shadow:inset 0 0 0 1.5px var(--salvie)}
nav.menu .btn.p{color:#fff;text-decoration:none}
.menuknap{display:none;background:none;border:1.5px solid var(--streg);border-radius:10px;padding:8px 12px;font:600 14px var(--sans);color:var(--skovgroen)}

/* Intro */
.intro{padding:64px 0 40px;text-align:center;background:linear-gradient(var(--hvid),var(--creme))}
.intro h1{font-size:clamp(36px,5vw,58px);margin:0 auto 16px;max-width:860px}
.intro .bar{justify-content:center;margin-bottom:18px}
.intro p{font-size:18px;color:var(--mosgroen);margin:0 auto;max-width:620px}

/* Fire kasser */
.kasser{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:16px 0 72px}
.kasse{display:flex;flex-direction:column;background:var(--hvid);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(51,67,43,.08),0 10px 28px rgba(51,67,43,.09);transition:transform .2s ease,box-shadow .2s ease}
.kasse:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(51,67,43,.1),0 16px 36px rgba(51,67,43,.15)}
.kasse .foto{position:relative;display:block;text-decoration:none}
.kasse .foto img{width:100%;aspect-ratio:500/860;object-fit:cover}
.kasse .foto .tekst{position:absolute;left:8%;right:8%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 0;
  background:radial-gradient(ellipse 72% 60% at 50% 50%,rgba(25,30,20,.34),rgba(25,30,20,0) 72%)}
.kasse h2{margin:0;color:#fff;font-size:clamp(21px,1.9vw,27px);line-height:1.12;text-shadow:0 1px 14px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.35)}
.kasse .foto svg{width:90%;height:12px;margin-top:10px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.kasse .foto em{font-style:normal;font-size:13px;font-weight:600;color:#fff;margin-top:8px;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.kasse .bund{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 16px 14px 18px;margin-top:auto}
.kasse .bund a:not(.btn){font-size:14px;font-weight:600;text-decoration:none;color:var(--salvie);white-space:nowrap}
.kasse .bund a:not(.btn):hover{text-decoration:underline;text-underline-offset:4px}
.kasse .bund .btn{padding:9px 16px;font-size:14px}

/* Tekstafsnit */
section.tekst{padding:72px 0;border-top:1px solid var(--streg)}
section.tekst.hvid{background:var(--hvid)}
.to{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
.to > div{min-width:0;max-width:62ch}
.liste{margin:14px 0 18px;padding:0;list-style:none}
.liste li{position:relative;padding-left:26px;margin-bottom:8px}
.liste li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:12px;border-radius:3px;background:var(--g5);transform:rotate(12deg)}
.boks{background:var(--salvieflade);border-radius:16px;padding:30px 32px}

/* Ydelser */
.ydelser{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
.ydelse{background:var(--hvid);border:1px solid var(--streg);border-radius:16px;padding:28px 30px;min-width:0}
section.tekst.hvid .ydelse{background:var(--creme)}
.ydelse .mere{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;font-weight:600}
.ydelse .mere a{text-decoration:none}
.ydelse .mere a:hover{text-decoration:underline;text-underline-offset:4px}

/* Butikker */
.butikker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
.butik{display:block;background:var(--hvid);border:1px solid var(--streg);border-radius:14px;padding:18px 20px;text-decoration:none;color:var(--skovgroen);min-width:0}
.butik:hover{border-color:var(--g3);box-shadow:0 6px 18px rgba(51,67,43,.08)}
.butik b{display:block;font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.15;margin-bottom:4px}
.butik span{display:block;font-size:14px;color:var(--mosgroen);line-height:1.5}
.butik .antal{display:inline-block;margin-top:8px;font-size:12px;font-weight:600;color:var(--salvie);background:var(--salvieflade);padding:2px 9px;border-radius:99px}

/* Bund */
footer{background:var(--hvid);border-top:1px solid var(--streg);padding:48px 0 40px;font-size:14px;color:var(--mosgroen)}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
footer img{width:170px;margin-bottom:14px}
footer h3{font-size:20px;margin:0 0 10px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:6px}
footer a{color:var(--salvie);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .lille{margin-top:28px;padding-top:18px;border-top:1px solid var(--streg);font-size:13px}

@media (max-width:1060px){.kasser{grid-template-columns:repeat(2,minmax(0,1fr))}.butikker{grid-template-columns:repeat(3,minmax(0,1fr))}.kasse h2{font-size:clamp(24px,3.2vw,30px)}}
@media (max-width:900px){
  nav.menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--hvid);border-bottom:1px solid var(--streg);flex-direction:column;align-items:stretch;gap:0;padding:8px max(28px,env(safe-area-inset-left,0px)) 18px}
  nav.menu.aaben{display:flex}
  nav.menu a{padding:12px 0;border-bottom:1px solid var(--streg);font-size:16px}
  nav.menu .btn{margin-top:14px;text-align:center;border-bottom:0}
  .menuknap{display:block}
  .to,.ydelser{grid-template-columns:1fr;gap:28px}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .kasser{grid-template-columns:1fr;gap:18px}
  .kasse .foto img{aspect-ratio:4/3;object-position:center 30%}
  .kasse h2{font-size:28px}
  .butikker{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logo img{width:150px}
  .intro{padding:44px 0 28px}
  section.tekst{padding:52px 0}
  .boks,.ydelse{padding:24px 22px}
  footer .cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Renseservice-billedet har ingen ramme i selve billedet */
.kasse .foto.ramme::after{content:"";position:absolute;inset:4.5%;border:1.5px solid rgba(255,255,255,.95);pointer-events:none}
/* Login-side */
.login-intro{padding:64px 0 24px;text-align:center}
.login-intro h1{font-size:clamp(34px,4.6vw,52px);margin:0 auto 14px;max-width:820px}
.login-intro .bar{justify-content:center;margin-bottom:16px}
.login-intro p{color:var(--mosgroen);max-width:560px;margin:0 auto}
.systemer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:24px 0 80px}
.system{background:var(--hvid);border:1px solid var(--streg);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:6px;min-width:0}
.system h2{font-size:28px;margin:0}
.system p{color:var(--mosgroen);margin:0 0 14px}
.system .btn{align-self:flex-start;margin-top:auto}
@media (max-width:900px){.systemer{grid-template-columns:1fr}}