/* Forside. Mobil foerst (Web_M_Forside), desktop fra 900 px (Web_Forside, 1920-px-laerred omsat til grid/flex). */

/* ---------- Hero ---------- */
.side-forside .fs-hero{display:flex;flex-direction:column}
.side-forside .fs-intro{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:26px}
.side-forside .fs-dec{display:none}

.side-forside .fs-h1{font-family:var(--fd);font-weight:400;text-transform:uppercase;text-align:center;letter-spacing:2px;line-height:.88;
  font-size:clamp(48px,20vw,78px);transform:rotate(-3deg);
  text-shadow:.04em 0 0 #fff,-.04em 0 0 #fff,0 .04em 0 #fff,0 -.04em 0 #fff,.04em .04em 0 #fff,-.04em -.04em 0 #fff,.04em -.04em 0 #fff,-.04em .04em 0 #fff,.077em .1em 0 #111}
.side-forside .fs-h1 span{display:block}
.side-forside .fs-h1 .fs-org{font-size:1.1em;color:var(--org);-webkit-text-stroke:.047em var(--ink);paint-order:stroke fill;text-shadow:.07em .093em 0 #111}

.side-forside .fs-tag{font-family:var(--fd);text-transform:uppercase;text-align:center;letter-spacing:1px;line-height:1.1;
  font-size:clamp(20px,5.9vw,23px);margin:22px 8px 18px;transform:rotate(-3deg)}
.side-forside .fs-tag span{display:block}
.side-forside .fs-cta svg{width:.63em;height:auto;flex:none}

/* Punkt 23: anden "staar paa" boksen. hero-and.webp er lige afskaaret i bunden (raekke 579 af 588)
   og i venstre side (x=0, raekke 528-579 = de nederste ~10 % af hoejden). Billedet trækkes ned under
   boksen med negativ margin-bottom paa 8,5 % af billedbredden (= 13 % af hoejden), og boksen (.fs-band)
   ligger over billedet (z-index). Vandstraalens lige hoejre kant (x=919) og haartottens top toner ud med en maske. */
.side-forside .fs-billede{margin:14px -16px 0;display:flex;justify-content:flex-end}
.side-forside .fs-billede img{display:block;width:100%;max-width:520px;margin-bottom:calc(min(100%,520px) * -.085);
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 7%),linear-gradient(to bottom,transparent 0,#000 3%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to left,transparent 0,#000 7%),linear-gradient(to bottom,transparent 0,#000 3%);
  mask-composite:intersect}

/* ---------- Baand: tekst (+ kort) og tal ---------- */
.side-forside .fs-band{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:0}
.side-forside .fs-om,.side-forside .fs-stat{position:relative;border:5px solid var(--ink);border-radius:20px;box-shadow:6px 8px 0 var(--ink);min-width:0}
.side-forside .fs-om{background:var(--yel);padding:20px 18px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.side-forside .fs-h2{font-family:var(--fd);text-transform:uppercase;letter-spacing:1px;line-height:.95;font-size:clamp(34px,10.3vw,40px);transform:skewX(-6deg);transform-origin:left}
.side-forside .fs-h2 span{display:block}
.side-forside .fs-p{font-weight:800;font-size:16px;line-height:1.45;margin-top:10px}

/* Punkt 25/34/35: Danmarkskortet (viewBox 600x500, inline fra lav-danmarkskort.ts). Boksen er gul paa alle bredder. */
.side-forside .fs-kort{width:min(100%,340px);aspect-ratio:6/5;justify-self:center;min-width:0}
.side-forside .fs-kort svg{display:block;width:100%;height:auto;overflow:visible}

/* Punkt 24: tal-badges. Alle maal regnes ud fra --d (badgets diameter) i cqi af .fs-stat. */
.side-forside .fs-stat{container-type:inline-size;background:var(--yel);overflow:hidden;display:flex;align-items:center;justify-content:space-around;gap:8px;padding:30px 8px 34px}
.side-forside .fs-orange{position:absolute;right:-1px;top:-1px;bottom:-1px;width:56%;background:var(--org);clip-path:polygon(18% 0,100% 0,100% 100%,0 100%,8% 56%,0 50%)}
.side-forside .fs-lyn{display:none}
.side-forside .fs-draaber{position:absolute;left:1%;top:2%;width:17%;height:auto;z-index:2}
.side-forside .fs-pletter{position:absolute;left:38%;bottom:3%;width:13%;height:auto;z-index:2}
.side-forside .fs-kranie{position:absolute;right:13%;top:1%;width:22%;max-width:110px;z-index:3;transform:rotate(8deg)}

.side-forside .fs-bwrap{position:relative;flex:none;--d:41cqi}
.side-forside .fs-b1{transform:rotate(-6deg)}
.side-forside .fs-fart{position:absolute;left:-24%;top:24%;width:42%;height:auto;transform:rotate(-8deg)}

.side-forside .fs-badge{position:relative;z-index:1;width:var(--d);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#fff 0 46%,#FFF4D6 72%);
  border:calc(var(--d) * .05) solid var(--ink);box-shadow:calc(var(--d) * .045) calc(var(--d) * .06) 0 var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--d) * .01);
  font-family:var(--fd);font-weight:400;text-transform:uppercase;text-align:center;color:var(--ink);line-height:.82}
/* indre ring + hvid glans oeverst til venstre (tegneserie-badge) */
.side-forside .fs-badge::before{content:"";position:absolute;inset:5.5%;border-radius:50%;border:calc(var(--d) * .016) solid var(--ink);opacity:.9;pointer-events:none}
.side-forside .fs-badge::after{content:"";position:absolute;inset:11%;border-radius:50%;border:calc(var(--d) * .03) solid transparent;
  border-top-color:#fff;border-left-color:#fff;transform:rotate(-12deg);pointer-events:none;
  -webkit-mask-image:linear-gradient(135deg,#000 30%,transparent 52%);mask-image:linear-gradient(135deg,#000 30%,transparent 52%)}
.side-forside .fs-tal{display:block;font-size:calc(var(--d) * .3);letter-spacing:.02em;padding-top:.08em}
.side-forside .fs-badge.stor .fs-tal{font-size:calc(var(--d) * .5)}
.side-forside .fs-ord{display:block;max-width:74%;font-size:calc(var(--d) * .15);letter-spacing:.03em;text-wrap:balance}

/* ---------- Desktop ---------- */
@media (min-width:900px){
  .side-forside .aj-main{padding:clamp(4px,.3vw,6px) clamp(0px,.7vw,13px) clamp(30px,2.6vw,50px)}
  .side-forside .fs-hero{display:grid;grid-template-columns:minmax(0,50fr) minmax(0,50fr);align-items:center;gap:clamp(8px,1vw,20px)}
  .side-forside .fs-intro{margin-top:0;padding:clamp(20px,1.5vw,30px) 0 clamp(24px,1.6vw,30px)}
  .side-forside .fs-dec{display:block;position:absolute;height:auto}
  .side-forside .fs-dec1{left:-2%;top:36%;width:12%}
  .side-forside .fs-dec2{right:-4%;top:18%;width:17%}
  .side-forside .fs-dec3{left:-3%;top:4%;width:8%}
  .side-forside .fs-dec4{right:-6%;top:2%;width:10%}
  .side-forside .fs-h1{font-size:clamp(56px,7.2vw,138px);transform:rotate(-4deg)}
  .side-forside .fs-h1 .fs-org{font-size:1.087em}
  .side-forside .fs-tag{font-size:clamp(20px,1.98vw,38px);line-height:1;margin:clamp(18px,1.6vw,30px) 0 clamp(22px,1.9vw,36px);transform:rotate(-4deg)}
  .side-forside .fs-cta{font-size:clamp(32px,2.8vw,54px);gap:.48em}
  /* Punkt 23: billedet i bunden af raekken og 8,5 % af sin bredde ind under boksen */
  .side-forside .fs-billede{margin:0;align-self:end}
  .side-forside .fs-billede img{max-width:none;margin-bottom:-8.5%}

  .side-forside .fs-band{grid-template-columns:minmax(0,52fr) minmax(0,48fr);gap:0;margin-top:0;background:var(--yel);
    border:6px solid var(--ink);border-radius:20px;box-shadow:8px 10px 0 var(--ink);overflow:hidden}
  .side-forside .fs-om,.side-forside .fs-stat{border:0;border-radius:0;box-shadow:none}
  .side-forside .fs-om{background:transparent;padding:clamp(24px,2.1vw,40px) clamp(24px,2.9vw,56px);align-content:center;gap:clamp(12px,1.4vw,28px)}
  .side-forside .fs-kort{width:min(100%,300px)}
  .side-forside .fs-h2{font-size:clamp(40px,3.96vw,76px)}
  .side-forside .fs-p{font-size:clamp(17px,1.3vw,25px);line-height:1.4;margin-top:clamp(12px,.94vw,18px)}
  .side-forside .fs-stat{border-left:6px solid var(--ink);padding:clamp(28px,2.2vw,44px) clamp(10px,1vw,20px)}
  .side-forside .fs-orange{width:60%;clip-path:polygon(15% 0,100% 0,100% 100%,0 100%,6% 56%,0 50%)}
  .side-forside .fs-lyn{display:block;position:absolute;right:1.2%;top:3%;width:6%;height:auto;z-index:2}
  .side-forside .fs-draaber{left:-1%;top:1%;width:14%}
  .side-forside .fs-pletter{left:40%;bottom:2%;width:10%}
  .side-forside .fs-kranie{display:none}
  .side-forside .fs-bwrap{--d:36cqi}
}
/* Smagsspoergsmaal 4: mellem 900 og 1099 px laa pynten op ad venstre kant og headerens skygge */
@media (min-width:900px) and (max-width:1099.98px){
  .side-forside .fs-dec1{left:3%;top:40%}
  .side-forside .fs-dec3{left:2%;top:7%}
  .side-forside .fs-dec4{right:-3%;top:8%}
  .side-forside .fs-dec2{top:22%}
  .side-forside .fs-kort{width:min(100%,270px)}
  .side-forside .fs-bwrap{--d:41cqi}
}
/* Fra 1100 px: kortet ved siden af teksten i venstre del */
@media (min-width:1100px){
  /* tekstkolonnen er saa bred som overskriftens laengste linje (min-content + nowrap); kortet faar resten */
  .side-forside .fs-om{grid-template-columns:min-content minmax(0,1fr);align-items:center;column-gap:clamp(28px,2.4vw,48px)}
  .side-forside .fs-h2 span{white-space:nowrap}
  .side-forside .fs-kort{width:100%;max-width:440px}
}