/* =========================================================================
   FUSTAGER.DK
   Palette og typografi er hentet direkte ud af bannerne: natmørk malt,
   Royal-guld, ølskum-creme. Blodappelsin er Centrum Gruppens signaturfarve
   og bruges KUN til den knap, vi gerne vil have folk til at trykke på.
   ========================================================================= */

:root{
  --nat:        #16110D;
  --fad:        #211A13;
  --fad-2:      #2C221A;
  --kant:       #3A2E22;
  --guld:       #E0A63C;
  --guld-dyb:   #B07D22;
  --skum:       #F6F1E4;
  --skum-dim:   #C0B6A2;
  --blod:       #C8412B;
  --blod-lys:   #E05038;
  --humle:      #8CA85B;

  --display: "Fraunces", Georgia, serif;
  --brdtekst:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --data:    "Space Mono", ui-monospace, monospace;

  --bredde: 1120px;
  --smal:   760px;
  --r:      14px;
  --r-lil:  8px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--nat);
  color:var(--skum);
  font-family:var(--brdtekst);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--guld); text-decoration:none; }
a:hover{ color:var(--skum); text-decoration:underline; text-underline-offset:3px; }

:focus-visible{ outline:3px solid var(--guld); outline-offset:3px; border-radius:4px; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-variation-settings:"SOFT" 60, "WONK" 1, "opsz" 40;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  color:var(--skum);
}
h1{ font-weight:900; font-size:clamp(2.1rem,5.2vw,3.7rem); }
h2{ font-weight:800; font-size:clamp(1.6rem,3.4vw,2.4rem); margin-top:2.2em; }
h3{ font-weight:700; font-size:1.22rem; }
p{ margin:0 0 1.15em; }

.indhold{ width:100%; max-width:var(--bredde); margin:0 auto; padding:0 22px; }
.indhold-smal{ width:100%; max-width:var(--smal); margin:0 auto; padding:0 22px; }

.eyebrow{
  font-family:var(--data);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--guld);
  margin:0 0 .9em;
  display:block;
}

/* ---------- Driftsbesked ---------- */
.drift{
  background:var(--blod); color:#fff;
  text-align:center; padding:10px 22px;
  font-size:.92rem; font-weight:600;
}

/* ---------- Toplinje ---------- */
.top{
  background:var(--fad);
  border-bottom:1px solid var(--kant);
  font-size:.84rem;
  color:var(--skum-dim);
}
.top .indhold{ display:flex; gap:18px; align-items:center; justify-content:space-between; min-height:42px; flex-wrap:nowrap; }
.top-fakta{ display:flex; gap:18px; align-items:center; margin:0; padding:0; list-style:none; flex-wrap:nowrap; white-space:nowrap; }
/* Toplinjen skal blive på ÉN linje. Falder indholdet fra højre mod venstre,
   efterhånden som skærmen bliver smallere. */
.skjul-smal{ display:none; }
@media (min-width:1040px){ .skjul-smal{ display:flex; } }
.kun-smal{ display:none; }
.kun-bred{ display:inline; }
@media (max-width:700px){
  .kun-smal{ display:inline; }
  .kun-bred{ display:none; }
}
.top-fakta li{ display:flex; align-items:center; gap:7px; }
.top a{ color:var(--skum-dim); }
.top a:hover{ color:var(--guld); text-decoration:none; }

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(22,17,13,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--kant);
}
.header .indhold{ display:flex; align-items:center; gap:20px; min-height:80px; }

/* Logoet er hvidt med gennemsigtig baggrund og passer derfor direkte
   på den mørke header. Højden styrer størrelsen; bredden følger med. */
.logo{ display:block; flex:none; line-height:0; }
.logo img{
  display:block; width:auto; height:54px;
  transition:opacity .18s ease;
}
.logo:hover{ text-decoration:none; }
.logo:hover img{ opacity:.82; }

.footer-logo{ display:inline-block; line-height:0; margin-bottom:18px; }
.footer-logo img{ display:block; width:auto; height:50px; opacity:.9; }
.footer-logo:hover img{ opacity:1; }

.nav{ margin-left:auto; }
.header .indhold > .header-cta{ margin-left:24px; }
.nav ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0; align-items:center; }
.nav a{
  color:var(--skum); font-size:.95rem; font-weight:500;
  padding:6px 0; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--guld); transition:right .22s ease;
}
.nav a:hover{ text-decoration:none; color:var(--guld); }
.nav a:hover::after,
.nav a[aria-current="page"]::after{ right:0; }

.nav-knap{ display:none; background:none; border:1px solid var(--kant); color:var(--skum);
  border-radius:var(--r-lil); padding:9px 13px; font-size:1.1rem; cursor:pointer; }

/* =========================================================================
   BOOKINGKNAPPEN I HEADEREN
   Den skal skille sig ud fra menupunkterne. Derfor blodappelsin – sidens
   eneste rene handlingsfarve – og en let puls første gang, siden loader,
   så øjet finder den uden at det bliver anmassende.
   ========================================================================= */
.header-cta{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  margin-left:24px;
  padding:12px 22px; border-radius:999px;
  background:var(--blod); color:#fff;
  font-weight:700; font-size:.95rem; letter-spacing:.01em;
  border:2px solid var(--blod);
  box-shadow:0 6px 18px rgba(200,65,43,.32);
  transition:background .16s ease, transform .16s ease, box-shadow .16s ease;
  white-space:nowrap;
}
.header-cta:hover{
  background:var(--blod-lys); border-color:var(--blod-lys); color:#fff;
  text-decoration:none; transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(200,65,43,.42);
}
.header-cta:active{ transform:translateY(0); }
.header-cta-aktiv{
  background:transparent; color:var(--blod-lys); box-shadow:none;
}
.header-cta-aktiv:hover{ background:var(--blod); color:#fff; }
.header-cta-ikon{ font-size:1rem; line-height:1; }
.header-cta-kort{ display:none; }

/* Diskret puls ved sideindlæsning – kører to gange og stopper så */
@keyframes cta-puls{
  0%,100%{ box-shadow:0 6px 18px rgba(200,65,43,.32); }
  50%    { box-shadow:0 6px 26px rgba(200,65,43,.72); }
}
.header-cta{ animation:cta-puls 2.2s ease-in-out 2; }
@media (prefers-reduced-motion: reduce){ .header-cta{ animation:none; } }

/* Book-punktet inde i mobilmenuen er overflødigt, når knappen altid er der */
.nav-cta-mobil{ display:none; }

/* ---------- Knapper ---------- */
.knap{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px; border-radius:999px;
  font-family:var(--brdtekst); font-weight:700; font-size:1rem;
  border:2px solid transparent; cursor:pointer; text-align:center;
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
}
.knap:hover{ text-decoration:none; transform:translateY(-2px); }
.knap-primaer{ background:var(--blod); color:#fff; }
.knap-primaer:hover{ background:var(--blod-lys); color:#fff; }
.knap-guld{ background:var(--guld); color:var(--nat); }
.knap-guld:hover{ background:#F0BC58; color:var(--nat); }
.knap-linje{ background:transparent; color:var(--skum); border-color:var(--kant); }
.knap-linje:hover{ border-color:var(--guld); color:var(--guld); }
.knap-raekke{ display:flex; gap:14px; flex-wrap:wrap; margin:1.6em 0; }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; background:var(--nat); }
.hero-billede{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:right center;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--nat) 4%, rgba(22,17,13,.88) 38%, rgba(22,17,13,.15) 68%, transparent 88%);
}
.hero-tekst{ position:relative; z-index:2; padding:88px 0 96px; max-width:600px; }
.hero-tekst h1{ margin-bottom:.35em; }
.hero-tekst p{ font-size:1.14rem; color:var(--skum-dim); max-width:46ch; }

.hero-lille .hero-tekst{ padding:62px 0 66px; }
.hero-lille h1{ font-size:clamp(1.9rem,4vw,2.9rem); }

/* ---------- Sektioner ---------- */
.sektion{ padding:70px 0; }
.sektion-fad{ background:var(--fad); }
.sektion h2:first-child{ margin-top:0; }

.rubrik{ max-width:62ch; margin-bottom:2.2em; }
.rubrik h2{ margin-top:0; }
.rubrik p{ color:var(--skum-dim); margin-bottom:0; }

/* ---------- Kategorifliser ---------- */
.fliser{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; }
.flise{
  display:block; background:var(--fad-2); border:1px solid var(--kant);
  border-radius:var(--r); padding:26px 22px;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.flise:hover{ border-color:var(--guld); transform:translateY(-3px); background:#332619; text-decoration:none; }
.flise h3{ margin:0 0 .3em; color:var(--skum); }
.flise p{ margin:0; font-size:.9rem; color:var(--skum-dim); }
.flise-antal{ font-family:var(--data); font-size:.74rem; color:var(--guld); display:block; margin-top:12px; }

/* ---------- Produktkort ---------- */
.gitter{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:20px; }
.kort{ height:100%; }
.kort-link{
  display:flex; flex-direction:column; height:100%;
  background:var(--fad-2); border:1px solid var(--kant);
  border-radius:var(--r); overflow:hidden; color:inherit;
  transition:border-color .2s ease, transform .2s ease;
}
.kort-link:hover{ border-color:var(--guld); transform:translateY(-3px); text-decoration:none; }
/* Den mørke bånd øverst er fustagens krave – samme detalje som på bannerne */
.kort-krave{
  height:16px; flex:none;
  background:
    linear-gradient(180deg, #4A3D2E 0%, #241C14 55%, #150F0A 100%);
  border-bottom:1px solid #0D0906;
}
.kort-krop{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.kort-krop h3{ margin:6px 0 .35em; font-size:1.08rem; color:var(--skum); }
.kort-kort{ font-size:.9rem; color:var(--skum-dim); margin:0 0 .9em; flex:1; }
.kort-fakta{ font-family:var(--data); font-size:.74rem; color:var(--guld); margin:0 0 .7em; }
.kort-pris{ margin:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.kort-pris strong{ font-family:var(--data); font-size:1.16rem; color:var(--skum); font-weight:700; }
.kort-pris s{ color:var(--skum-dim); font-size:.86rem; }
.kort-enhed{ font-size:.76rem; color:var(--skum-dim); }

.mrk{
  display:inline-block; font-family:var(--data); font-size:.65rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; margin-right:6px;
}
.mrk-leje{ background:rgba(140,168,91,.16); color:var(--humle); }
.mrk-tilbud{ background:rgba(200,65,43,.18); color:var(--blod-lys); }

/* =========================================================================
   TØRST-O-METER – fadølsberegneren
   Sidens signaturelement. Resten af siden holder sig i ro, så den her
   får lov at være det, folk husker.
   ========================================================================= */
.beregner{
  background:var(--fad); border:1px solid var(--kant);
  border-radius:20px; padding:34px 30px; margin:34px 0;
}
.beregner-gitter{ display:grid; grid-template-columns:1fr 1fr; gap:38px; align-items:start; }
@media (max-width:820px){ .beregner-gitter{ grid-template-columns:1fr; gap:28px; } }

.felt{ margin-bottom:26px; }
.felt label{ display:block; font-weight:600; font-size:.98rem; margin-bottom:4px; color:var(--skum); }
.felt .hjaelp{ display:block; font-size:.83rem; color:var(--skum-dim); margin-bottom:12px; }

.skyder-raekke{ display:flex; align-items:center; gap:16px; }
input[type=range]{
  -webkit-appearance:none; appearance:none;
  flex:1; height:6px; border-radius:99px; background:var(--kant); outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; border-radius:50%;
  background:var(--guld); border:3px solid var(--nat); cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%;
  background:var(--guld); border:3px solid var(--nat); cursor:grab;
}
.vaerdi{
  font-family:var(--data); font-size:1.24rem; font-weight:700; color:var(--guld);
  min-width:3.6em; text-align:right;
}

.valg{ display:flex; gap:9px; flex-wrap:wrap; }
.valg button{
  background:var(--fad-2); border:1px solid var(--kant); color:var(--skum-dim);
  border-radius:999px; padding:9px 17px; font-family:var(--brdtekst);
  font-size:.9rem; cursor:pointer; transition:all .16s ease;
}
.valg button:hover{ border-color:var(--guld); color:var(--skum); }
.valg button[aria-pressed="true"]{ background:var(--guld); border-color:var(--guld); color:var(--nat); font-weight:700; }

/* Resultat */
.resultat{ background:var(--nat); border:1px solid var(--kant); border-radius:var(--r); padding:26px 24px; }
.fustage-raekke{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:22px; min-height:104px; align-items:flex-end; }
.fustage-svg{ width:52px; height:96px; flex:none; }
.fustage-svg .oel{ transition:transform .55s cubic-bezier(.34,1.4,.5,1); transform-origin:bottom; }

.res-tal{
  font-family:var(--display); font-variation-settings:"SOFT" 100,"WONK" 1;
  font-weight:900; font-size:clamp(2.6rem,7vw,4.2rem); line-height:1;
  color:var(--guld); margin:0;
}
.res-label{ font-family:var(--data); font-size:.76rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--skum-dim); margin:6px 0 20px; }

.res-linjer{ list-style:none; margin:0 0 22px; padding:0; border-top:1px solid var(--kant); }
.res-linjer li{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--kant); font-size:.95rem;
}
.res-linjer span:last-child{ font-family:var(--data); color:var(--guld); white-space:nowrap; }

/* Maskotternes kommentar */
.snak{
  display:flex; gap:13px; align-items:flex-start;
  background:var(--fad-2); border-left:3px solid var(--guld);
  border-radius:var(--r-lil); padding:14px 16px; margin-bottom:20px;
}
.snak-ikon{ font-size:1.35rem; line-height:1.2; flex:none; }
.snak p{ margin:0; font-size:.94rem; color:var(--skum); }
.snak strong{ color:var(--guld); }

/* ---------- Vareside ---------- */
.vare-layout{ display:grid; grid-template-columns:1.35fr 1fr; gap:46px; align-items:start; }
@media (max-width:880px){ .vare-layout{ grid-template-columns:1fr; gap:30px; } }

.boks{
  background:var(--fad); border:1px solid var(--kant);
  border-radius:var(--r); padding:26px 24px;
  position:sticky; top:98px;
}
.boks .pris{ font-family:var(--data); font-size:2.1rem; font-weight:700; color:var(--guld); margin:0; }
.boks .foer{ color:var(--skum-dim); font-size:.92rem; margin:2px 0 0; }
.boks .enhed{ color:var(--skum-dim); font-size:.86rem; margin:0 0 20px; }
.boks .knap{ width:100%; justify-content:center; }
.boks .lager{ display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--humle); margin:16px 0 0; }
.prik{ width:8px; height:8px; border-radius:50%; background:var(--humle); flex:none; }

.spec{ width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.95rem; }
.spec th,.spec td{ text-align:left; padding:11px 0; border-bottom:1px solid var(--kant); vertical-align:top; }
.spec th{ color:var(--skum-dim); font-weight:500; width:44%; }
.spec td{ font-family:var(--data); font-size:.88rem; }

/* ---------- Brødkrummer ---------- */
.krumme{ padding:18px 0 0; font-size:.83rem; }
.krumme ol{ display:flex; flex-wrap:wrap; gap:9px; list-style:none; margin:0; padding:0; }
.krumme li+li::before{ content:"›"; margin-right:9px; color:var(--kant); }
.krumme a{ color:var(--skum-dim); }
.krumme a:hover{ color:var(--guld); }
.krumme span{ color:var(--skum-dim); }

/* ---------- FAQ ---------- */
.faq{ margin:3em 0; }
.faq-liste details{
  border-bottom:1px solid var(--kant);
}
.faq-liste summary{
  cursor:pointer; padding:19px 0; font-weight:600; font-size:1.03rem;
  list-style:none; display:flex; justify-content:space-between; gap:18px; align-items:center;
}
.faq-liste summary::-webkit-details-marker{ display:none; }
.faq-liste summary::after{ content:"+"; color:var(--guld); font-size:1.4rem; flex:none; line-height:1; }
.faq-liste details[open] summary::after{ content:"–"; }
.faq-svar{ padding:0 0 20px; color:var(--skum-dim); max-width:70ch; }
.faq-svar p{ margin:0; }

/* ---------- Anmeldelser ---------- */
.anmeldelser{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:18px; }
.anmeldelse{ background:var(--fad-2); border:1px solid var(--kant); border-radius:var(--r); padding:22px; }
.anmeldelse p{ font-size:.95rem; margin:0 0 14px; }
.stjerner{ color:var(--guld); font-size:.95rem; letter-spacing:2px; margin-bottom:10px; }
.anmelder{ font-family:var(--data); font-size:.78rem; color:var(--skum-dim); margin:0; }

/* ---------- Fakta-stribe ---------- */
.stribe{ display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:2px;
  background:var(--kant); border:1px solid var(--kant); border-radius:var(--r); overflow:hidden; }
.stribe div{ background:var(--fad); padding:24px 20px; }
.stribe .tal{ font-family:var(--display); font-variation-settings:"SOFT" 100,"WONK" 1;
  font-weight:900; font-size:2.05rem; color:var(--guld); line-height:1; margin:0 0 6px; }
.stribe .txt{ font-size:.88rem; color:var(--skum-dim); margin:0; }

/* ---------- Kontaktkort ---------- */
.kontakt-gitter{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin:2em 0; }
.kontakt-kort{ background:var(--fad); border:1px solid var(--kant); border-radius:var(--r); padding:24px; }
.kontakt-kort h3{ margin-top:0; font-size:1.05rem; }
.kontakt-kort p{ margin:0; color:var(--skum-dim); font-size:.94rem; }
.kontakt-kort a{ font-family:var(--data); font-size:1.02rem; }

/* ---------- CTA-bånd ---------- */
.baand{ background:var(--guld); color:var(--nat); padding:52px 0; text-align:center; }
.baand h2{ color:var(--nat); margin:0 0 .4em; }
.baand p{ color:#3D2C10; max-width:52ch; margin:0 auto 1.6em; }
.baand .knap-raekke{ justify-content:center; margin:0; }
.baand .knap-linje{ color:var(--nat); border-color:rgba(22,17,13,.35); }
.baand .knap-linje:hover{ border-color:var(--nat); color:var(--nat); }

/* ---------- Footer ---------- */
.footer{ background:var(--fad); border-top:1px solid var(--kant); padding:58px 0 26px; font-size:.92rem; }
.footer-gitter{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px; }
@media (max-width:820px){ .footer-gitter{ grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:520px){ .footer-gitter{ grid-template-columns:1fr; } }
.footer h4{ font-family:var(--brdtekst); font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--guld); margin:0 0 15px; font-weight:700; }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom:9px; }
.footer a{ color:var(--skum-dim); }
.footer a:hover{ color:var(--guld); text-decoration:none; }
.footer p{ color:var(--skum-dim); }
.bund{ border-top:1px solid var(--kant); margin-top:38px; padding-top:22px;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:.82rem; color:var(--skum-dim); }
.aldersgraense{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--blod); color:var(--blod-lys);
  border-radius:var(--r-lil); padding:7px 13px; font-size:.8rem; font-weight:600;
}

/* ---------- Tekstindhold ---------- */
.tekst{ max-width:70ch; }
.tekst ul,.tekst ol{ margin:0 0 1.3em; padding-left:1.3em; }
.tekst li{ margin-bottom:.5em; }
.tekst h2{ margin-top:1.8em; }
.tekst h3{ margin-top:1.6em; }

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .nav-knap{ display:block; margin-left:0; }
  .nav{ margin-left:0; }
  .header-cta{ margin-left:auto; padding:10px 16px; font-size:.9rem; }
  .nav{ display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--fad); border-bottom:1px solid var(--kant); padding:16px 22px 22px; }
  .nav.aaben{ display:block; }
  .nav ul{ flex-direction:column; gap:0; align-items:stretch; }
  .nav li{ border-bottom:1px solid var(--kant); }
  .nav li:last-child{ border-bottom:none; }
  .nav a{ display:block; padding:14px 0; font-size:1.02rem; }
  .nav a::after{ display:none; }
  .header .indhold{ position:relative; }
  .top-fakta li.skjul-mobil,
  .top-fakta li.skjul-smal{ display:none; }
  .top .indhold{ gap:12px; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .logo img{ height:42px; }
  .footer-logo img{ height:42px; }
  .header .indhold{ min-height:66px; gap:8px; padding:0 14px; }
  .header-cta{ padding:9px 13px; font-size:.86rem; gap:6px; margin-left:auto; }
  .header-cta-lang{ display:none; }
  .header-cta-kort{ display:inline; }
}

/* Under 380 px er der ikke plads til logo + knap + burger på én linje.
   Ølkrus-ikonet ryger først, og logoet skrumper en anelse. */
@media (max-width:380px){
  .logo img{ height:36px; }
  .header .indhold{ gap:6px; padding:0 12px; }
  .header-cta{ padding:8px 12px; font-size:.82rem; }
  .header-cta-ikon{ display:none; }
  .nav-knap{ padding:8px 11px; }
  .tp-tekst .skjul-mobil{ display:none; }
  .top{ font-size:.76rem; }
  .top .indhold{ gap:10px; padding:0 14px; }
  .top-fakta{ gap:10px; }
  .tp{ gap:4px; }
  .sektion{ padding:48px 0; }
  .beregner{ padding:24px 18px; }
  .boks{ position:static; }

  /* Hero stables på mobil: billedet får sin egen plads, teksten sin.
     Ellers lægger gradienten sig hen over maskotternes ansigter, og man
     ser kun deres ben – hvilket er en dårlig førstehåndsoplevelse. */
  .hero{ display:flex; flex-direction:column; }
  .hero::after{ display:none; }
  .hero-billede{
    position:relative; inset:auto;
    width:100%; height:auto; aspect-ratio:16/9;
    object-fit:cover; object-position:68% 42%;
    order:2;                 /* billedet under teksten */
  }
  .hero .indhold{ order:1; } /* teksten først, så CTA'en ligger over folden */
  .hero-tekst{
    position:relative; max-width:none;
    padding:30px 0 40px;
    background:var(--nat);
  }
  .hero-lille .hero-tekst{ padding:28px 0 34px; }
  .hero-tekst h1{ font-size:clamp(1.85rem,7.4vw,2.5rem); }
  .hero-tekst p{ font-size:1.02rem; max-width:none; }
  .hero .knap{ width:100%; justify-content:center; }
  .hero .knap-raekke{ flex-direction:column; gap:10px; }
}


/* =========================================================================
   SAMTYKKEBOKS
   Afvis og accepter har samme visuelle vægt-niveau i knapgruppen, så valget
   er reelt frit. Det er et lovkrav, ikke en designbeslutning.
   ========================================================================= */
.samtykke{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(11,8,6,.66);
  padding:16px;
  animation:samtykke-ind .25s ease-out;
}
@keyframes samtykke-ind{ from{ opacity:0; } to{ opacity:1; } }

.samtykke-kort{
  background:var(--fad); border:1px solid var(--kant);
  border-radius:18px; padding:28px 26px;
  width:100%; max-width:620px;
  max-height:calc(100vh - 32px); overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.samtykke-kort h2{ margin:0 0 .45em; font-size:1.5rem; }
.samtykke-kort > p{ color:var(--skum-dim); font-size:.96rem; margin-bottom:1.3em; }

.samtykke-valg{
  border-top:1px solid var(--kant);
  margin-bottom:22px;
}
.samtykke-linje{
  display:flex; gap:13px; align-items:flex-start;
  padding:14px 0; border-bottom:1px solid var(--kant);
  cursor:pointer;
}
.samtykke-laast{ cursor:default; opacity:.72; }
.samtykke-linje input{
  width:19px; height:19px; margin:2px 0 0; flex:none;
  accent-color:var(--guld); cursor:pointer;
}
.samtykke-laast input{ cursor:default; }
.samtykke-linje span{ display:block; font-size:.94rem; }
.samtykke-linje strong{ display:block; color:var(--skum); font-weight:600; }
.samtykke-linje em{ display:block; font-style:normal; color:var(--skum-dim); font-size:.87rem; margin-top:2px; }

.samtykke-knapper{ display:flex; gap:10px; flex-wrap:wrap; }
.samtykke-knapper .knap{ flex:1 1 auto; justify-content:center; padding:13px 20px; font-size:.95rem; }

.samtykke-link{ margin:16px 0 0; font-size:.85rem; }
.samtykke-link a{ color:var(--skum-dim); }
.samtykke-link a:hover{ color:var(--guld); }

@media (max-width:560px){
  .samtykke-kort{ padding:22px 18px; border-radius:16px; }
  .samtykke-knapper{ flex-direction:column; }
  .samtykke-knapper .knap{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .samtykke{ animation:none; }
}

/* =========================================================================
   TRUSTPILOT I TOPLINJEN
   ========================================================================= */
.tp{ display:inline-flex; align-items:center; gap:7px; }
.tp:hover{ text-decoration:none; }
.tp-stjerner{ color:var(--guld); letter-spacing:1px; font-size:.8rem; }
.tp-tekst{ color:var(--skum-dim); }
.tp:hover .tp-tekst{ color:var(--guld); }
.tp-tekst strong{ color:var(--skum); }

/* =========================================================================
   ALDERSGRÆNSE
   Sundhedsstyrelsens officielle skilt står side om side med vores egen,
   strengere regel. Banneret bryder bevidst med sidens varme palet – det
   SKAL springe i øjnene og må ikke ligne resten af siden.
   ========================================================================= */
.aldersbanner{ background:#0B5375; padding:46px 0; }
.alder-split{
  display:grid; grid-template-columns:340px 1fr; gap:44px;
  align-items:center; max-width:940px; margin:0 auto;
}
@media (max-width:820px){
  .alder-split{ grid-template-columns:1fr; gap:26px; text-align:center; }
}

.alder-skilt{ margin:0; }
.alder-skilt img{
  display:block; width:100%; height:auto;
  border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.alder-skilt figcaption{
  font-size:.76rem; color:rgba(255,255,255,.62);
  margin-top:10px; text-align:center;
}
@media (max-width:820px){
  .alder-skilt{ max-width:300px; margin:0 auto; }
}

.alder-afsender{
  font-family:var(--data); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.75); margin:0 0 .7em;
}
.aldersbanner h2{
  color:#fff; margin:0 0 .7em;
  font-size:clamp(1.5rem,3.4vw,2.15rem);
}
.alder-tekst{
  color:rgba(255,255,255,.88); font-size:.95rem;
  line-height:1.62; margin:0 0 1em; max-width:56ch;
}
.alder-tekstblok .alder-tekst:last-child{ margin-bottom:0; }
.alder-tekst strong{ color:#fff; }
@media (max-width:820px){
  .alder-tekst{ margin-left:auto; margin-right:auto; }
}

.aldersbanner-kompakt{ padding:30px 0; }

/* Cirklerne bruges stadig på AltID-porten */
.alder-cirkel{
  width:112px; height:112px; border-radius:50%;
  background:#000; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin:0 auto; line-height:1;
}
.alder-tal{ font-family:var(--brdtekst); font-weight:700; font-size:3rem; letter-spacing:-.02em; }
.alder-aar{ font-family:var(--brdtekst); font-weight:600; font-size:.86rem; margin-top:4px; letter-spacing:.06em; }
.alder-cirkel-stor{ width:140px; height:140px; margin-bottom:26px; }
.alder-cirkel-stor .alder-tal{ font-size:3.8rem; }

/* Skiltet på bookingsiden */
.book-alder{
  display:grid; grid-template-columns:260px 1fr; gap:28px;
  align-items:center; margin:34px 0 0;
  background:rgba(11,83,117,.18); border:1px solid rgba(11,83,117,.55);
  border-radius:var(--r); padding:24px;
}
.book-alder-skilt{ margin:0; }
.book-alder-skilt img{ display:block; width:100%; height:auto; border-radius:8px; }
.book-alder h3{ margin:0 0 .5em; font-size:1.1rem; }
.book-alder p{ margin:0; font-size:.93rem; color:var(--skum-dim); }
@media (max-width:700px){
  .book-alder{ grid-template-columns:1fr; gap:18px; text-align:center; }
  .book-alder-skilt{ max-width:240px; margin:0 auto; }
}

/* --- Mærkat på produktkort og varesider --- */
.alder-maerkat{
  display:inline-block; font-family:var(--data); font-size:.65rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; margin-right:6px;
  background:#0B5375; color:#fff; font-weight:700;
}
.alder-maerkat.alder-stor{ font-size:.78rem; padding:5px 13px; }

/* --- Note i købsboksen --- */
.alder-note{
  display:flex; gap:11px; align-items:flex-start;
  background:rgba(11,83,117,.22); border:1px solid rgba(11,83,117,.6);
  border-radius:var(--r-lil); padding:13px 14px; margin:16px 0 0;
}
.alder-note-ikon{ font-size:1.15rem; line-height:1.2; flex:none; }
.alder-note p{ margin:0; font-size:.85rem; color:var(--skum-dim); }
.alder-note strong{ color:var(--skum); }

/* --- Stribe øverst på kategorisider --- */
.alder-stribe{
  display:flex; gap:13px; align-items:flex-start;
  background:rgba(11,83,117,.2); border-left:3px solid #1D7BA8;
  border-radius:var(--r-lil); padding:15px 17px; margin:0 0 24px;
}
.alder-stribe span{ font-size:1.25rem; line-height:1.2; flex:none; }
.alder-stribe p{ margin:0; font-size:.92rem; color:var(--skum-dim); }
.alder-stribe strong{ color:var(--skum); }

/* --- AltID-porten --- */
.alder-port{
  background:var(--fad); border:1px solid var(--kant);
  border-radius:20px; padding:44px 34px; text-align:center;
}
.alder-port h1{ margin-bottom:.5em; }
.alder-port p{ color:var(--skum-dim); max-width:52ch; margin-left:auto; margin-right:auto; }
.alder-port-vare{ color:var(--skum) !important; font-size:1.05rem; }
.alder-port-knap{ margin:12px 0 22px; }
.alder-port-privat{
  border-top:1px solid var(--kant); padding-top:20px; margin-top:20px;
  font-size:.88rem;
}
.alder-port-privat strong{ color:var(--skum); }
.alder-port-hjaelp{ font-size:.88rem; }
.alder-fejl{
  background:rgba(200,65,43,.16); border:1px solid var(--blod);
  border-radius:var(--r-lil); padding:14px 16px; margin:0 0 22px; text-align:left;
}
.alder-fejl p{ margin:0; color:var(--skum) !important; font-size:.92rem; }

/* =========================================================================
   BESØGSSTATISTIK
   ========================================================================= */
.skjult{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.heat-hylster{ overflow-x:auto; margin:1.4em 0 2.4em; -webkit-overflow-scrolling:touch; }
.heat{ border-collapse:collapse; width:100%; min-width:640px; }
.heat th{
  font-family:var(--data); font-size:.68rem; font-weight:400;
  color:var(--skum-dim); padding:5px 3px; text-align:center;
}
.heat tbody th{ text-align:right; padding-right:11px; white-space:nowrap; font-size:.76rem; }
.heat td{ padding:2px; }
.heat-felt{
  display:block; width:100%; height:24px; min-width:15px; border-radius:3px;
  background:color-mix(in srgb, var(--guld) calc(var(--i) * 100%), #1B140E);
  border:1px solid rgba(255,255,255,.05);
}

.soejler{ display:flex; gap:5px; align-items:flex-end; height:170px; margin:1.4em 0 2.4em; }
.soejler-dage{ gap:12px; }
.soejle{ flex:1; display:flex; flex-direction:column; height:100%; }
.soejle-spor{ flex:1; display:flex; align-items:flex-end; }
.soejle-fyld{
  width:100%; background:linear-gradient(180deg, var(--guld), var(--guld-dyb));
  border-radius:4px 4px 0 0; min-height:2px;
}
.soejle-navn{
  font-family:var(--data); font-size:.66rem; color:var(--skum-dim);
  text-align:center; padding-top:7px;
}
.soejler-dage .soejle-navn{ font-size:.78rem; }

/* =========================================================================
   FRILAGTE FIGURER
   Billederne er frilagt, så de står direkte på den mørke baggrund uden
   hvid kasse omkring sig. Skyggen giver dem lidt fæste på fladen.
   ========================================================================= */
.figur{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.55));
}
.figur-hoej{ max-width:400px; margin:0 auto; }
.figur-bred{ max-width:620px; margin:0 auto; }

.split{ display:grid; grid-template-columns:400px 1fr; gap:52px; align-items:center; }
.split-tekst h2{ margin-top:0; }
.split-tekst p:last-of-type{ margin-bottom:0; }
.split-tekst .knap-raekke{ margin-bottom:0; }
@media (max-width:820px){
  .split{ grid-template-columns:1fr; gap:26px; }
  .split-figur{ max-width:62vw; margin:0 auto; }
}

.figur-blok{ margin:2.4em 0; text-align:center; }
.figur-blok-lille .figur{ max-width:340px; margin:0 auto; }
.figur-blok figcaption{
  font-size:.86rem; color:var(--skum-dim);
  margin-top:14px; font-style:italic;
}
@media (max-width:820px){
  .figur-blok .figur{ max-width:70vw; }
}

/* --- Anmeldelseskort: overskrift, verificeret-mærke og dato --- */
.anmeldelser{ align-items:start; }
.anmeldelse{ display:flex; flex-direction:column; }
.anmeldelse-titel{
  font-family:var(--brdtekst); font-weight:700; font-size:.98rem;
  color:var(--skum); margin:0 0 .5em; letter-spacing:0;
}
.anmeldelse > p{ flex:1; }
.anmelder{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  margin:14px 0 0; padding-top:12px; border-top:1px solid var(--kant);
}
.anmelder strong{ color:var(--skum); font-family:var(--brdtekst); font-weight:600; font-size:.86rem; }
.verificeret{
  font-family:var(--brdtekst); font-size:.72rem; font-weight:600;
  color:var(--humle); background:rgba(140,168,91,.14);
  padding:2px 8px; border-radius:999px; white-space:nowrap;
}
.anmelder time{ font-family:var(--data); font-size:.72rem; color:var(--skum-dim); }
.anmeldelse-link{ font-size:.8rem; margin-top:10px; align-self:flex-start; }

/* =========================================================================
   GORENTAL 3 6 0 BOOKINGWIDGET
   Widgetten styles af sit eget script. Vi giver den kun en ramme, en
   minimumshøjde (så siden ikke hopper, når den loader) og sørger for,
   at den ikke kan flyde ud over kanten på mobil.
   ========================================================================= */
/* Widgetten kommer med sit eget LYSE tema – mørkeblå overskrifter, hvide
   produktkort. Derfor er containeren hvid. Gør man den mørk som resten af
   siden, står widgettens egen tekst mørkeblå på mørkebrun og er ulæselig. */
.gr360{
  min-height:420px;
  background:#FFFFFF;
  color:#1A1A1A;
  border:1px solid var(--kant);
  border-radius:var(--r);
  padding:22px;
  overflow-x:auto;
}
.gr360 a{ color:#0B5375; }
.gr360:empty::before{
  content:"Indlæser booking …";
  display:block; text-align:center; padding:120px 0;
  color:#6B6257; font-size:.95rem;
}
.gr360 iframe{ width:100%; border:0; display:block; }
.gr360 img{ max-width:100%; height:auto; }

.book-hjaelp{
  margin:18px 0 0; font-size:.9rem; color:var(--skum-dim);
}
@media (max-width:640px){
  .gr360{ padding:14px; min-height:360px; border-radius:var(--r-lil); }
}

/* Nødudgang hvis bookingwidgetten ikke loader */
.gr360-fejl:empty::before{ content:none; }
.gr360-nod{ text-align:center; padding:44px 20px; color:#1A1A1A; }
.gr360-nod-ikon{ font-size:2.4rem; margin:0 0 .4em; }
.gr360-nod h3{ margin:0 0 .5em; }
.gr360-nod h3{ color:#1A1A1A; }
.gr360-nod p{ color:#5A5147; max-width:46ch; margin:0 auto 1.2em; }
.gr360-nod .knap{ margin-bottom:.6em; }
.gr360-nod-lille{ font-size:.85rem; }

/* =========================================================================
   OVERLØBSSIKRING
   Grid- og flex-elementer får som standard min-width:auto og kan derfor
   blive bredere end deres container – det er den klassiske årsag til
   vandret scroll på mobil. min-width:0 lader dem krympe som forventet.
   ========================================================================= */
.beregner-gitter > *,
.split > *,
.vare-layout > *,
.alder-split > *,
.book-alder > *,
.footer-gitter > *,
.kontakt-gitter > *,
.stribe > *{ min-width:0; }

.skyder-raekke{ min-width:0; }
.skyder-raekke input[type=range]{ min-width:0; }

/* Lange ord og URL'er må ikke skubbe layoutet ud */
.tekst, .kort-krop, .anmeldelse, .faq-svar{ overflow-wrap:break-word; }

/* Toplinjen på de smalleste telefoner */
@media (max-width:420px){
  .top{ font-size:.74rem; }
  .top .indhold{ gap:8px; padding:0 12px; }
  .top-fakta{ gap:8px; }
}

/* Aldersskiltet ØVERST på bookingsiden – skal ses før man begynder at booke */
.book-alder-top{
  margin:0 0 28px;
  background:#0B5375;
  border-color:#0B5375;
  align-items:center;
}
.book-alder-top h2{
  color:#fff; margin:0 0 .5em;
  font-size:clamp(1.15rem,2.4vw,1.5rem);
}
.book-alder-top p{ color:rgba(255,255,255,.9); font-size:.95rem; margin:0 0 .7em; }
.book-alder-top p:last-child{ margin-bottom:0; }
.book-alder-top strong{ color:#fff; }
.book-alder-lille{ font-size:.85rem !important; color:rgba(255,255,255,.68) !important; }