/* Pelsstuen - faelles stil. Honning og kakao, alt pilleformet, kort paa raekke. */
:root{
  --honning:#F2E1AE;
  --dyb:#E8CF8C;
  --streg:#CFAC5F;
  --kakao:#31251A;
  --daempet:#5B4730;
  --brod:Asap,system-ui,sans-serif;
  --stor:Lexend,Asap,system-ui,sans-serif;
  --maal:1200px;
  --kant:24px;
  --rund:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light}
body{background:var(--honning);color:var(--kakao);font-family:var(--brod);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;accent-color:var(--kakao)}
::selection{background:var(--kakao);color:var(--honning)}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:5px}
:focus-visible{outline:3px solid var(--kakao);outline-offset:4px;border-radius:8px}
img{display:block;max-width:100%;height:auto;background:var(--dyb);border-radius:var(--rund)}
h1,h2,h3{text-wrap:balance;font-family:var(--stor);font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(38px,8vw,60px);line-height:1.05}
h2{font-size:clamp(30px,5vw,44px);line-height:1.1}
h3{font-family:var(--stor);font-weight:700;font-size:20px;line-height:1.4;letter-spacing:-.01em}
p{max-width:36em}

.gaard{max-width:var(--maal);margin-inline:auto;padding-inline:var(--kant)}
.zone{padding-block:48px}
.pude{background:var(--dyb)}

/* Springlink */
.spring-over{position:fixed;top:-140px;left:0;z-index:30;background:var(--kakao);color:var(--honning);
  padding:16px 24px;min-height:48px;display:inline-flex;align-items:center;font-weight:600;
  text-decoration:none;border-bottom-right-radius:var(--rund);transition:top .16s ease-out}
.spring-over:focus,.spring-over:focus-visible{top:0}

/* Oplysningsbaandet */
.besked{background:var(--kakao);color:var(--honning);font-size:14px;line-height:1.5;padding:8px var(--kant);text-align:center}
.besked p{max-width:none}

/* Hoved */
.tag .gaard{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px;padding-block:16px}
.navneskilt{font-family:var(--stor);font-weight:700;font-size:28px;line-height:1.2;letter-spacing:-.03em;text-decoration:none;margin-right:auto;display:inline-flex;align-items:center;min-height:44px}
.navneskilt:hover{text-decoration:underline}
.telefon{font-weight:600;font-size:18px;text-decoration:none;display:inline-flex;align-items:center;min-height:48px;white-space:nowrap}
.telefon:hover{text-decoration:underline}
.veje2{flex:1 1 100%}
.veje2 ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.veje2 a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;
  text-decoration:none;font-size:16px;font-weight:600;color:var(--daempet);background:var(--dyb)}
.veje2 a:hover{color:var(--kakao)}
.veje2 a[aria-current="page"]{background:var(--kakao);color:var(--honning)}

/* Handlingen, en farve paa hele siden */
.knappen{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 32px;  background:var(--kakao);color:var(--honning);font-family:var(--brod);font-weight:600;font-size:17px;
  text-decoration:none;border:2px solid var(--kakao);border-radius:999px;white-space:nowrap}
.knappen:hover{background:transparent;color:var(--kakao)}

/* Forsidens foerste skaerm: billede til venstre, ord til hoejre */
.port{display:grid;gap:32px;padding-block:32px 48px}
.port-ord{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.port p{font-size:19px}
.port picture{display:block}
.port img{width:100%;aspect-ratio:3/2;object-fit:cover;transform-origin:50% 60%}
@media (prefers-reduced-motion:no-preference){
  .port img{animation:laeg-dig .9s cubic-bezier(.16,1,.3,1) both}
}
@keyframes laeg-dig{from{transform:scale(1.04)}to{transform:scale(1)}}

/* Sidehoved paa undersider */
.sidetag{padding-block:32px 24px;display:grid;gap:16px}
.sidetag p{font-size:19px;color:var(--daempet);max-width:34em}

/* Prisen som kort */
.priskort{list-style:none;display:grid;gap:24px}
.priskort li{background:var(--honning);border:2px solid var(--streg);border-radius:var(--rund);padding:24px;display:grid;gap:8px;align-content:start}
.pude .priskort li{background:var(--dyb)}
.priskort .med{color:var(--daempet);font-size:16px}
.priskort .maerkat{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.priskort .maerkat span{display:inline-flex;align-items:center;min-height:32px;padding:0 16px;border-radius:999px;background:var(--dyb);font-size:15px;font-weight:600}
.pude .priskort .maerkat span{background:var(--honning)}
.priskort .beloeb{font-family:var(--stor);font-weight:700;font-size:32px;line-height:1.1}
.tillaeg{margin-top:24px;font-size:16px;color:var(--daempet)}

/* Forskudt billedpar */
.forskudt{list-style:none;display:grid;gap:32px}
.forskudt figure{display:grid;gap:16px}
.forskudt img{width:100%;aspect-ratio:1/1;object-fit:cover}
.forskudt .vid img{aspect-ratio:3/2}
.forskudt figcaption{font-size:16px;color:var(--daempet)}

/* Tekst og billede */
.side-om-side{display:grid;gap:24px}
.side-om-side img{width:100%;aspect-ratio:3/2;object-fit:cover}
.side-om-side .broedtekst{display:flex;flex-direction:column;gap:16px;align-items:flex-start}

/* Trin som piller */
.gang{list-style:none;display:grid;gap:24px;counter-reset:g}
.gang li{counter-increment:g;display:grid;gap:8px;padding-left:56px;position:relative}
.gang li::before{content:counter(g);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:999px;
  background:var(--kakao);color:var(--honning);font-family:var(--stor);font-weight:700;font-size:19px;
  display:grid;place-items:center}
.gang p{font-size:16px;color:var(--daempet)}

/* Spoergsmaal */
.sporgs dt{font-weight:600;font-size:19px;margin-top:24px}
.sporgs dt:first-of-type{margin-top:0}
.sporgs dd{margin-top:8px;color:var(--daempet);max-width:36em}

/* Pladsen til kundernes ord */
.stemmer .tomrum{border:2px dashed var(--streg);border-radius:var(--rund);padding:24px;display:grid;gap:16px}
.stemmer p{font-size:20px;line-height:1.4;max-width:28em;color:var(--daempet)}

/* Tider og adresse */
.aabent{display:grid;gap:32px}
.aabent dl{display:grid;grid-template-columns:auto 1fr;column-gap:24px;row-gap:8px;max-width:26em}
.aabent dt{font-weight:600}
.aabent dd{color:var(--daempet)}
.aabent address{font-style:normal;display:flex;flex-direction:column;gap:8px;align-items:flex-start}

/* Videre */
.videre-kort{list-style:none;display:grid;gap:16px}
.videre-kort a{display:grid;gap:8px;padding:24px;background:var(--dyb);border-radius:var(--rund);text-decoration:none}
.pude .videre-kort a{background:var(--honning)}
.videre-kort a:hover b{text-decoration:underline}
.videre-kort b{font-family:var(--stor);font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-.02em}
.videre-kort span{font-size:16px;color:var(--daempet)}

/* Foden */
.fodstykke{border-top:2px solid var(--streg);margin-top:48px}
.fodstykke .gaard{padding-block:32px 48px;display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--daempet)}
.fodstykke p{max-width:none}
.fodstykke a{color:var(--kakao)}

h2{margin-bottom:24px}

@media (min-width:900px){
  :root{--kant:40px}
  .zone{padding-block:80px}
  .tag .gaard{padding-block:24px;gap:16px 40px}
  .navneskilt{font-size:32px}
  .veje2{flex:0 1 auto;margin-right:auto}
  h2{margin-bottom:32px}
  .port{grid-template-columns:6fr 6fr;gap:64px;align-items:center;padding-block:56px 80px}
  .port p{font-size:21px}
  .sidetag{padding-block:56px 40px;grid-template-columns:7fr 5fr;gap:24px 64px;align-items:end}
  .sidetag p{font-size:21px}
  .priskort{grid-template-columns:repeat(3,1fr);gap:32px}
  .priskort li{padding:32px}
  .forskudt{grid-template-columns:repeat(12,1fr);gap:48px 32px}
  .forskudt li:nth-child(1){grid-column:1/6}
  .forskudt li:nth-child(2){grid-column:7/13;align-self:end}
  .forskudt li:nth-child(3){grid-column:3/10}
  .side-om-side{grid-template-columns:7fr 5fr;gap:64px;align-items:center}
  .side-om-side.spejlet{grid-template-columns:5fr 7fr}
  .side-om-side.spejlet img{order:-1}
  .gang{grid-template-columns:repeat(3,1fr);gap:40px 32px}
  .aabent{grid-template-columns:1fr 1fr;gap:64px}
  .stemmer .tomrum{padding:40px}
  .stemmer p{font-size:26px}
  .videre-kort{grid-template-columns:1fr 1fr;gap:32px}
  .videre-kort a{padding:32px}
  .sporgs .gaard{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  .fodstykke .gaard{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:16px 40px;padding-block:40px 64px}
}

@media (prefers-reduced-motion:reduce){
  .spring-over{transition:none}
}