/* Ristet — fælles stil for alle sider. Kobolt, varm hvid, blæk. Magasin. */
:root{--blaa:#1E3FA8;--hvid:#F6F5F0;--blaek:#15171C;--linje:rgba(21,23,28,.18);--linje-lys:rgba(246,245,240,.35)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;accent-color:var(--blaa)}
body{background:var(--hvid);color:var(--blaek);font:400 17px/1.55 "Hanken Grotesk",system-ui,sans-serif}
::selection{background:var(--blaa);color:var(--hvid)}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1.5px}
:focus-visible{outline:3px solid var(--blaa);outline-offset:3px}
.blaa :focus-visible,.tider :focus-visible{outline-color:var(--hvid)}
img{display:block;width:100%;height:auto;background:#dfe3f1}
p,li,dd,dt{max-width:62ch}
.kort li,.tider li,.find li{max-width:none}
strong{font-weight:500}
.ramme{max-width:1200px;margin:0 auto;padding:0 24px}
.display{font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-weight:800;letter-spacing:-.03em;line-height:.95;text-wrap:balance}

/* eksempelbånd */
.baand{max-width:none;font-size:14px;line-height:1.4;padding:8px 24px;text-align:center;border-bottom:1px solid var(--linje)}

/* koboltbjælke */
.top{background:var(--blaa);color:var(--hvid)}
.top .ramme{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
.top .navn{font-size:32px;text-decoration:none;line-height:1}
.top .tlf{font-weight:500;font-size:17px;padding:8px 0;min-height:44px;display:inline-flex;align-items:center}

/* forside */
.forside{padding:56px 0 56px;overflow-x:clip}
.forside h1{font-size:18px;font-weight:500;margin-bottom:16px}
.stor{font-size:clamp(2.5rem,10.5vw,8.5rem);margin-bottom:48px}
.stor span{display:block;animation:skriv .7s cubic-bezier(.2,.7,.2,1) both}
.stor span:nth-child(2){animation-delay:120ms}
.stor span:nth-child(3){animation-delay:240ms}
@keyframes skriv{from{clip-path:inset(0 100% 0 0);opacity:.6}to{clip-path:inset(0 0 0 0);opacity:1}}
.opslag{display:grid;gap:32px;grid-template-columns:1fr}
.foto3-2 img{aspect-ratio:3/2}
.tider{background:var(--blaa);color:var(--hvid);padding:32px}
.tider h2{font-size:40px;margin-bottom:24px}
.tider ul{list-style:none;font-size:17px}
.tider li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid var(--linje-lys)}
.tider li:last-child{border-bottom:1px solid var(--linje-lys)}
.handling{margin-top:32px}
.knap{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 32px;background:var(--blaa);color:var(--hvid);text-decoration:none;font-weight:500;font-size:18px}
.knap:hover{background:#17328a}
.handling p{margin-top:16px}

/* kortet */
.blaa{background:var(--blaa);color:var(--hvid);padding:96px 0}
.blaa h2{font-size:clamp(3rem,8vw,6.5rem);margin-bottom:48px}
.kort h3{font-weight:500;font-size:17px;margin:40px 0 8px}
.kort h3:first-of-type{margin-top:0}
.kort ul{list-style:none}
.kort li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:16px 0;border-top:1px solid var(--linje-lys)}
.kort li:last-child{border-bottom:1px solid var(--linje-lys)}
.kort .hvad{font-weight:500;font-size:18px}
.kort .om{display:block;font-weight:400;font-size:15px;opacity:.85;margin-top:2px}
.kort .pris{font-size:40px;flex:none;line-height:1}
.kort .pris small{font-family:"Hanken Grotesk",sans-serif;font-weight:400;font-size:15px;letter-spacing:0;margin-left:4px}
.blaa .ramme > p{margin-top:40px;font-size:15px;opacity:.85}

/* tre fotos */
.tre{padding:96px 0}
.tre .intro{margin-bottom:56px}
.tre .intro h2{font-size:clamp(2.25rem,5vw,4rem);margin-bottom:24px}
.tre .brikker{display:grid;gap:40px;grid-template-columns:1fr}
.tre figure{margin:0}
.tre figcaption{margin-top:16px;font-size:17px}
.foto1-1 img{aspect-ratio:1/1}
.tre .maerk{margin-top:48px;font-size:15px;color:#3d4048}
.bagbaren{padding:0 0 96px}
.bagbaren h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:40px}
.tre-lige{display:grid;gap:32px}
.tre-lige figure{margin:0}
.tre-lige img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#e7e5df}
.tre-lige figcaption{margin-top:16px;font-size:17px}
.poser{padding:0 0 96px}
.poser .ramme{display:grid;gap:32px;align-items:center}
.poser figure{margin:0}
.poser img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#e7e5df}
.poser h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:24px}
.poser p+p{margin-top:16px}

/* anmeldelser */
.ord{padding:0 0 96px}
.ord .felt{border:2px solid var(--blaa);padding:40px 32px}
.ord h2{font-size:clamp(2.25rem,5vw,4rem);margin-bottom:16px}
.ord p{font-size:18px}

/* find os */
.find{padding:96px 0;border-top:1px solid var(--linje)}
.find h2{font-size:clamp(2.25rem,5vw,4rem);margin-bottom:40px}
.find .spalter{display:grid;gap:40px;grid-template-columns:1fr}
.find h3{font-weight:500;font-size:17px;margin-bottom:8px}
.find ul{list-style:none}
.find li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid var(--linje)}
.find li:last-child{border-bottom:1px solid var(--linje)}
.find a{display:inline-block;padding:8px 0}
.find .note{font-size:15px;color:#3d4048;margin-top:8px}

/* fod */
.fod{background:var(--blaa);color:var(--hvid);padding:40px 0;font-size:15px}
.fod .ramme{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.fod a{display:inline-block;padding:4px 0}

@media (min-width:768px){
  .ramme{padding:0 40px}
  .baand{padding:8px 40px}
  .forside{padding:80px 0 96px}
  .opslag{grid-template-columns:5fr 7fr;gap:48px;align-items:end}
  .opslag .venstre{padding-top:64px}
  .opslag figure{margin-right:min(-40px,calc((1200px - 100vw) / 2 - 40px))}
  .kort li{padding:24px 0}
  .kort .pris{font-size:64px}
  .tre .brikker{grid-template-columns:repeat(12,1fr);gap:48px 40px}
  .tre .b1{grid-column:1/8}
  .tre .b2{grid-column:9/13;align-self:end;margin-top:96px}
  .tre .b3{grid-column:4/13}
  .tre .b4{grid-column:1/7}
  .tre .b5{grid-column:8/12;align-self:end;margin-top:64px}
  .tre .b6{grid-column:2/11}
  .tre-lige{grid-template-columns:repeat(3,1fr);gap:40px}
  .poser .ramme{grid-template-columns:4fr 8fr;gap:64px}
  .ord .felt{padding:56px 64px}
  .find .spalter{grid-template-columns:1fr 1fr 1fr}
}
@media (min-width:1100px){
  .forside h1{font-size:20px}
  .tider h2{font-size:48px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stor span{animation:none}
}

/* ---- faelles chrome paa alle sider ---- */
.spring{position:fixed;top:-120px;left:0;z-index:20;background:var(--blaa);color:var(--hvid);padding:16px 24px;min-height:48px;display:inline-flex;align-items:center;font-weight:500;text-decoration:none;transition:top .16s ease-out}
.spring:focus,.spring:focus-visible{top:0}
@media (prefers-reduced-motion:reduce){.spring{transition:none}}

.top .hoejre{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap}
.top .knap{background:var(--hvid);color:var(--blaa);min-height:44px;padding:0 20px;font-size:16px}
.top .knap:hover{background:#fff}

/* indholdsfortegnelse: tynde lodrette streger mellem punkterne */
.indhold-linje{border-bottom:1px solid var(--linje)}
.indhold-linje ul{list-style:none;display:flex;flex-wrap:wrap}
.indhold-linje li{max-width:none;border-left:1px solid var(--linje)}
.indhold-linje li:first-child{border-left:0}
.indhold-linje a{display:inline-flex;align-items:center;min-height:52px;padding:8px 20px;text-decoration:none;font-weight:500;font-size:16px}
.indhold-linje li:first-child a{padding-left:0}
.indhold-linje a:hover{text-decoration:underline}
.indhold-linje a[aria-current="page"]{color:var(--blaa);box-shadow:inset 0 -3px 0 var(--blaa)}

/* sidehoved paa undersider */
.sidetop{padding:48px 0 40px;border-bottom:1px solid var(--linje)}
.sidetop h1{font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-weight:800;letter-spacing:-.03em;line-height:.95;font-size:clamp(2.5rem,8vw,6rem);text-wrap:balance;margin-bottom:24px}
.sidetop p{font-size:19px;line-height:1.5;max-width:56ch}
@media (min-width:768px){.sidetop{padding:80px 0 56px}.sidetop p{font-size:21px}}

/* to fotos ved siden af hinanden */
.duo{display:grid;gap:40px}
.duo figure{margin:0}
.duo img{object-fit:cover}
.duo figcaption{margin-top:16px;font-size:17px}
@media (min-width:768px){.duo{grid-template-columns:1fr 1fr;gap:48px}}

/* skridt i en lodret raekke */
.skridt{list-style:none;counter-reset:s;border-top:1px solid var(--linje)}
.skridt li{counter-increment:s;max-width:none;padding:24px 0;border-bottom:1px solid var(--linje);display:grid;gap:8px}
.skridt li::before{content:counter(s);font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-weight:800;font-size:32px;line-height:1;color:var(--blaa)}
.skridt h3{font-weight:500;font-size:20px}
.skridt p{max-width:58ch}
@media (min-width:768px){
  .skridt li{grid-template-columns:80px 1fr;gap:0 32px;padding:32px 0;align-items:baseline}
  .skridt li::before{grid-row:span 2;font-size:48px}
}

/* spoergsmaal og svar */
.qa{padding:64px 0}
.qa h2{font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-weight:800;letter-spacing:-.03em;line-height:.95;font-size:clamp(2rem,4vw,3rem);margin-bottom:32px}
.qa dl{border-top:1px solid var(--linje);max-width:68ch}
.qa dt{font-weight:500;font-size:19px;padding-top:24px;max-width:none}
.qa dd{margin-top:8px;padding-bottom:24px;border-bottom:1px solid var(--linje);max-width:none}
@media (min-width:768px){.qa{padding:96px 0}}

/* videre nederst */
.videre{padding:0 0 96px}
.videre h2{font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-weight:800;letter-spacing:-.03em;line-height:.95;font-size:clamp(1.75rem,3.2vw,2.5rem);margin-bottom:24px}
.videre ul{list-style:none;border-top:2px solid var(--blaek)}
.videre li{max-width:none;border-bottom:1px solid var(--linje)}
.videre a{display:grid;gap:4px;padding:24px 0;text-decoration:none}
.videre b{font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-weight:800;letter-spacing:-.02em;font-size:28px;line-height:1.05}
.videre a:hover b{color:var(--blaa)}
.videre span{font-size:16px;color:#3d4048}
@media (min-width:768px){.videre a{grid-template-columns:1fr 1fr;gap:32px;align-items:baseline}}

/* et bredt foto alene */
.bredfoto img{width:100%;aspect-ratio:3/2;object-fit:cover}