/* Aftenhaug — delt stilark. Én kilde for palett, typografi og komponenter. */

/* ---------- Fonter (selvhostet: ingen IP til Google, raskere mobil) ---------- */
@font-face{font-family:"Libre Caslon Text";src:url("fonter/libre-caslon-text-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Rubik";src:url("fonter/rubik-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Rubik";src:url("fonter/rubik-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Rubik";src:url("fonter/rubik-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --kull:#1d2024;
  --kull-dyp:#141619;
  --kull-lys:#252a31;
  --gull:#cfb182;
  --gull-lys:#e3cda6;
  --gull-mork:#a9884f;
  --gull-paa-lys:#7d6222;      /* gulltone som holder kontrast mot lys flate */
  --sand:#f5f3ef;
  --sand-dyp:#e8e4dc;
  --hvit:#fff;
  --tekst-lys:#eceae7;
  --tekst-lys-damp:#a9afb7;
  --tekst-mork:#1d2024;
  --tekst-mork-damp:#4d525a;
  --serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --sans:"Rubik","Helvetica Neue",Arial,sans-serif;
  --topp:96px;
  --sk:64px;                    /* skrå kant på fullbredde bildebånd */
  --luft:120px;                 /* seksjonsluft */
}

/* ---------- Grunn ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kull);color:var(--tekst-lys);
  font-family:var(--sans);font-weight:300;font-size:1rem;line-height:1.75;letter-spacing:.01em;
  overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
/* <figure> har 40px marg til venstre og høyre fra nettleseren. Uten denne blir hver flis
   80px smalere enn cella si, og etiketten klippes av overflow:hidden. */
figure{margin:0}
a{color:inherit}
/* Toppen ligger gjennomsiktig over heroen, så hvert ankermål må skyves under den. */
section[id],div[id],main[id]{scroll-margin-top:104px}

/* Norsk limer ord sammen, og «Personvernerklæring» er ett ord på 19 tegn. Uten brytepunkt
   stikker glyffene ut av blokka og gir horisontal scroll som ingen element-rect avslører. */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.005em;line-height:1.12;
  overflow-wrap:break-word;hyphens:auto}
body{overflow-wrap:break-word}
h1{font-size:clamp(2.6rem,6.4vw,5rem)}
h2{font-size:clamp(2.1rem,4.6vw,3.9rem)}
h3{font-size:clamp(1.45rem,2.3vw,2.1rem);line-height:1.2}
h4{font-size:1.15rem}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.cont{width:100%;max-width:1240px;margin:0 auto;padding:0 28px}
.mt-s{margin-top:18px}
.mt-m{margin-top:26px}
.mt-l{margin-top:34px}
.baand{padding:var(--luft) 0}
.baand-mork{background:var(--kull);color:var(--tekst-lys)}
.baand-dyp{background:var(--kull-dyp);color:var(--tekst-lys)}
.baand-lys{background:var(--sand);color:var(--tekst-mork)}
.baand-tett{padding:calc(var(--luft) * .62) 0}

/* Damask-preg på de mørke flatene, som i referansens uttrykk. Ren CSS, ingen bildevekt. */
.monster{position:relative;isolation:isolate}
.monster::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(circle at 20% 12%,rgba(207,177,130,.07),transparent 42%),
    radial-gradient(circle at 82% 78%,rgba(207,177,130,.05),transparent 46%)}
/* Alle direkte barn heves over overlegget, ikke bare .cont. */
.monster > *{position:relative;z-index:1}

/* ---------- Gull-skråstreken, signaturmarkøren ---------- */
.strek{position:relative;padding-left:36px}
.strek::before{content:"";position:absolute;left:8px;top:.15em;width:1px;height:2.9em;max-height:52px;
  background:var(--gull);transform:rotate(22deg);transform-origin:top center}
.baand-lys .strek::before{background:var(--gull-mork)}

/* ---------- Knapper ---------- */
.knapp,.knapp-linje{display:inline-block;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.knapp{background:var(--gull);color:var(--kull);transform:skewX(-9deg);
  transition:background .25s ease,transform .25s ease}
.knapp > span{display:block;padding:17px 44px;transform:skewX(9deg)}
.knapp:hover,.knapp:focus-visible{background:var(--gull-lys)}
.knapp-linje{background:transparent;color:var(--gull);border:1px solid var(--gull);
  padding:16px 42px;transition:background .25s ease,color .25s ease}
.knapp-linje:hover,.knapp-linje:focus-visible{background:var(--gull);color:var(--kull)}
.baand-lys .knapp-linje,footer .knapp-linje{color:var(--gull-paa-lys);border-color:var(--gull-mork)}
.baand-lys .knapp-linje:hover,.baand-lys .knapp-linje:focus-visible{background:var(--gull-mork);color:var(--hvit)}
footer .knapp-linje{color:var(--gull);border-color:var(--gull)}
footer .knapp-linje:hover,footer .knapp-linje:focus-visible{background:var(--gull);color:var(--kull)}

/* Tekstlenke med skråstrek foran, som referansens «Mehr erfahren». */
.tekstlenke{display:inline-block;position:relative;padding-left:34px;text-decoration:none;
  font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gull);transition:color .25s ease}
.tekstlenke::before{content:"";position:absolute;left:6px;top:-.15em;width:1px;height:1.9em;
  background:var(--gull);transform:rotate(22deg);transform-origin:top center}
.tekstlenke:hover,.tekstlenke:focus-visible{color:var(--gull-lys)}
.baand-lys .tekstlenke{color:var(--gull-paa-lys)}
.baand-lys .tekstlenke::before{background:var(--gull-mork)}
.baand-lys .tekstlenke:hover{color:var(--kull)}

:where(a,button,input,textarea,select,summary):focus-visible{outline:2px solid var(--gull);outline-offset:3px}

/* ---------- Toppen ---------- */
.topp{position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .3s ease,box-shadow .3s ease}
.topp.fast{background:var(--kull-dyp);box-shadow:0 1px 0 rgba(207,177,130,.16)}
.topp .ramme{display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--topp);max-width:1240px;margin:0 auto;padding:0 28px}
.merke{display:flex;flex-direction:column;line-height:1;text-decoration:none;flex:none}
.merke b{font-family:var(--serif);font-weight:400;font-size:1.6rem;color:var(--hvit);letter-spacing:.01em}
.merke i{font-style:normal;font-family:var(--sans);font-weight:400;font-size:.58rem;
  letter-spacing:.42em;color:var(--gull);margin-top:5px;padding-left:2px}

.topp nav ul{display:flex;align-items:center;gap:30px;margin:0;padding:0;list-style:none}
.topp nav a{text-decoration:none;font-size:.76rem;font-weight:400;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tekst-lys);transition:color .25s ease;white-space:nowrap}
.topp nav a:hover,.topp nav a[aria-current=page]{color:var(--gull)}
.topp nav .meny-cta{display:none}

/* Menyknapp: tre gull-skråstreker, samme motiv som resten av designet. */
#menyknapp{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.menyhandtak{display:none;align-items:center;gap:7px;cursor:pointer;padding:14px 4px;flex:none}
.menyhandtak span{display:block;width:2px;height:19px;background:var(--gull);transform:rotate(22deg);
  transition:transform .3s ease,opacity .3s ease}
#menyknapp:checked ~ .ramme .menyhandtak span:nth-child(1){transform:rotate(45deg) translate(4px,2px)}
#menyknapp:checked ~ .ramme .menyhandtak span:nth-child(2){opacity:0}
#menyknapp:checked ~ .ramme .menyhandtak span:nth-child(3){transform:rotate(-45deg) translate(4px,-2px)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:clamp(560px,88vh,900px);display:flex;align-items:center;
  justify-content:center;text-align:center;background:var(--kull-dyp);
  margin-top:calc(var(--topp) * -1);padding:calc(var(--topp) + 48px) 0 96px;isolation:isolate}
.hero-bilde{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,22,25,.82) 0%,rgba(20,22,25,.6) 45%,rgba(20,22,25,.9) 100%)}
.hero > .cont{position:relative;z-index:2;width:100%}
.hero h1{color:var(--hvit);max-width:16ch;margin:0 auto}
.hero .ingress{margin:26px auto 0;max-width:52ch;color:var(--tekst-lys);font-size:1.06rem}
.hero .knapperad{margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* Liten hero for undersidene */
.hero-liten{position:relative;display:flex;align-items:flex-end;min-height:clamp(340px,52vh,520px);
  background:var(--kull-dyp);margin-top:calc(var(--topp) * -1);
  padding:calc(var(--topp) + 72px) 0 64px;isolation:isolate}
.hero-liten .hero-bilde{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.hero-liten::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,22,25,.78) 0%,rgba(20,22,25,.55) 40%,rgba(20,22,25,.92) 100%)}
.hero-liten > .cont{position:relative;z-index:2;width:100%}
.hero-liten h1{color:var(--hvit);max-width:18ch}
.hero-liten .ingress{margin-top:20px;max-width:56ch;color:var(--tekst-lys)}

/* ---------- Flisrad (forskjøvne portrettbilder over/under heroen) ---------- */
.flisrad{background:var(--kull);padding:0 0 var(--luft)}
.flisrad .cont{max-width:1400px}
.fliser{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:-110px}
.flis{position:relative;display:block;text-decoration:none;overflow:hidden}
.flis:nth-child(1){transform:translateY(56px)}
.flis:nth-child(2){transform:translateY(0)}
.flis:nth-child(3){transform:translateY(78px)}
.flis:nth-child(4){transform:translateY(22px)}
.flis img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .7s ease}
.flis:hover img,.flis:focus-visible img{transform:scale(1.05)}
.flis::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,22,25,0) 38%,rgba(20,22,25,.72) 100%)}
.flis figcaption{position:absolute;left:24px;right:20px;bottom:22px;z-index:2;
  font-family:var(--serif);font-size:1.5rem;color:var(--hvit);line-height:1.15}
.flis figcaption::after{content:"";display:block;width:1px;height:24px;margin-top:12px;
  background:var(--gull);transform:rotate(22deg);transform-origin:top left}

/* ---------- To-kolonne: stor overskrift venstre, brødtekst høyre ---------- */
.delt{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.delt .h-side{padding-top:6px}
.delt .t-side{max-width:56ch}
.delt .t-side .knapp,.delt .t-side .knapp-linje,.delt .t-side .tekstlenke{margin-top:26px}

/* ---------- Sikksakk: tekstpanel med skrå kant + bilde ---------- */
/* Stretch, ikke center: panel og foto skal være like høye, ellers står det en mørk
   stripe under det laveste av dem. */
.sikksakk{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  gap:0;min-height:520px}
.sikksakk .panel{background:var(--sand);color:var(--tekst-mork);
  padding:78px 62px 78px max(28px,calc((100vw - 1240px) / 2 + 28px));
  display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:2}
.sikksakk .panel::before{content:"";position:absolute;top:0;bottom:0;right:-118px;width:160px;
  background:var(--sand);clip-path:polygon(0 0,100% 0,26% 100%,0 100%)}
.sikksakk .panel > *{position:relative;z-index:1}
.sikksakk .foto{position:relative;z-index:1;display:flex;min-height:520px}
.sikksakk .foto img{width:100%;height:100%;object-fit:cover}
.sikksakk .panel p{color:var(--tekst-mork-damp);max-width:46ch}

/* ---------- Fullbredde bildebånd med skrå kanter ---------- */
.skraafelt{position:relative;padding:0;
  background:linear-gradient(to bottom,var(--fra,var(--sand)) 50%,var(--til,var(--kull)) 50%)}
.skraafelt .rute{position:relative;overflow:hidden}
.skraabilde{position:relative;display:block;width:100%;
  clip-path:polygon(var(--sk) 0,100% 0,calc(100% - var(--sk)) 100%,0 100%)}
/* Overlegget males oppå vanlige barn i flyten, så bilde, overlegg og tekst får
   hver sin eksplisitte z-index. */
.skraabilde img{position:relative;z-index:0;width:100%;aspect-ratio:16/9;max-height:640px;object-fit:cover}
.skraabilde::after{content:"";position:absolute;inset:0;z-index:1;
  /* Tittelen staar paa 44 prosent, nettopp der sloret laa paa .1, og messingstakene i bildet
     tok den hvite serifen til 1,35:1 paa 11 prosent av pikslene. */
  background:linear-gradient(180deg,rgba(20,22,25,.5) 0%,rgba(20,22,25,.42) 42%,rgba(20,22,25,.68) 100%);
  pointer-events:none;
  clip-path:polygon(var(--sk) 0,100% 0,calc(100% - var(--sk)) 100%,0 100%)}
.skraabilde .tittel{position:absolute;z-index:2;left:0;right:0;top:44%;transform:translateY(-50%);
  text-align:center;font-family:var(--serif);font-size:clamp(1.9rem,4vw,3.3rem);color:var(--hvit);
  text-shadow:0 2px 30px rgba(0,0,0,.6);padding:0 78px;line-height:1.1;margin:0}
.skraabilde .merkelapp{position:absolute;z-index:2;left:0;right:0;bottom:34px;text-align:center;margin:0}

/* Karusell-stell. Platene som ikke er aktive stables med opacity, ikke display:none:
   et lazy-bilde inne i display:none blir aldri lastet, og da ser neste plate brutt ut. */
.karusell .skraafelt{position:relative}
.karusell .plate{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .5s ease}
.karusell .plate.aktiv{position:relative;opacity:1;pointer-events:auto}
.karusell-styring{display:flex;align-items:center;justify-content:center;gap:18px;padding:28px 0 0}
.karusell-fot{background:var(--kull);padding-bottom:4px}
.karusell-knapp{width:46px;height:46px;border-radius:50%;border:1px solid var(--gull);
  background:transparent;color:var(--gull);cursor:pointer;font-size:1rem;line-height:1;
  display:grid;place-items:center;transition:background .25s ease,color .25s ease}
.karusell-knapp:hover,.karusell-knapp:focus-visible{background:var(--gull);color:var(--kull)}
.karusell-teller{font-size:.74rem;letter-spacing:.2em;color:var(--tekst-lys-damp);min-width:62px;text-align:center}
.baand-lys .karusell-teller{color:var(--tekst-mork-damp)}
.baand-lys .karusell-knapp{border-color:var(--gull-mork);color:var(--gull-paa-lys)}
.baand-lys .karusell-knapp:hover{background:var(--gull-mork);color:var(--hvit)}

/* ---------- Forskjøvne bildekort (mat og drikke) ---------- */
.forskjovet{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:64px}
.forskjovet .kort:nth-child(2){margin-top:150px}
.kort{position:relative}
.kort .ramme-bilde{position:relative;overflow:hidden}
.kort .ramme-bilde img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .7s ease}
.kort:hover .ramme-bilde img{transform:scale(1.04)}
.kort .ramme-bilde::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,22,25,0) 42%,rgba(20,22,25,.78) 100%)}
.kort .paatittel{position:absolute;left:34px;right:28px;bottom:26px;z-index:2;
  font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.4rem);color:var(--hvit);line-height:1.14}
.kort .under{padding-top:26px;max-width:44ch;color:var(--tekst-lys-damp)}
.baand-lys .kort .under{color:var(--tekst-mork-damp)}
.kort .under .tekstlenke{margin-top:18px}

/* ---------- Rutenett med fliser (opplevelser) ---------- */
.rutenett-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px}
.rute-kort{position:relative;display:block;text-decoration:none;overflow:hidden}
.rute-kort img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .7s ease}
.rute-kort:hover img{transform:scale(1.05)}
.rute-kort::after{content:"";position:absolute;inset:0;
  /* Prisen i gull staar nederst i kortet, og .8 var for tynt mot blaatimebildet. */
  background:linear-gradient(180deg,rgba(20,22,25,.15) 30%,rgba(20,22,25,.9) 100%)}
.rute-kort .navn{position:absolute;left:22px;right:18px;bottom:20px;z-index:2;
  font-family:var(--serif);font-size:1.35rem;color:var(--hvit);line-height:1.16}
.rute-kort .pris{display:block;margin-top:8px;font-family:var(--sans);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gull)}

/* ---------- Faktarad ---------- */
.fakta{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:64px;
  border-top:1px solid rgba(207,177,130,.24);padding-top:44px}
.baand-lys .fakta{border-top-color:rgba(29,32,36,.14)}
.fakta .tall{font-family:var(--serif);font-size:clamp(2rem,3.4vw,2.9rem);color:var(--gull);line-height:1}
.baand-lys .fakta .tall{color:var(--gull-paa-lys)}
.fakta p{margin-top:12px;color:var(--tekst-lys-damp);font-size:.95rem}
.baand-lys .fakta p{color:var(--tekst-mork-damp)}

/* ---------- Skjema ---------- */
.skjemakort{background:var(--kull-lys);padding:48px 46px;border:1px solid rgba(207,177,130,.2)}
.baand-lys .skjemakort{background:var(--hvit);border-color:rgba(29,32,36,.1)}
.felt{margin-bottom:22px}
.felt label{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gull);margin-bottom:9px}
.baand-lys .felt label{color:var(--gull-paa-lys)}
.felt input,.felt select,.felt textarea{width:100%;background:transparent;color:var(--tekst-lys);
  border:0;border-bottom:1px solid rgba(207,177,130,.42);padding:12px 2px;font-family:var(--sans);
  font-weight:300;font-size:1rem;transition:border-color .25s ease}
.baand-lys .felt input,.baand-lys .felt select,.baand-lys .felt textarea{color:var(--tekst-mork);
  border-bottom-color:rgba(29,32,36,.26)}
.felt textarea{min-height:132px;resize:vertical;line-height:1.65}
.felt input:focus,.felt select:focus,.felt textarea:focus{outline:none;border-bottom-color:var(--gull)}
.felt select{appearance:none;cursor:pointer}
.felt select option{background:var(--kull-lys);color:var(--tekst-lys)}
.baand-lys .felt select option{background:var(--hvit);color:var(--tekst-mork)}
.feltpar{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.skjema-hjelp{font-size:.86rem;color:var(--tekst-lys-damp);margin-top:6px}
.baand-lys .skjema-hjelp{color:var(--tekst-mork-damp)}
.takk{display:none;padding:12px 0}
.takk.vis{display:block}
.takk h3{color:var(--gull)}
.baand-lys .takk h3{color:var(--gull-paa-lys)}
.skjult{display:none !important}
.feilmelding{color:#e8a0a0;font-size:.86rem;margin-top:10px;min-height:1.2em}
.baand-lys .feilmelding{color:#a13a3a}

/* Nyhetsbrev-linje */
.nyhetsbrev-form{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;margin-top:30px}
.nyhetsbrev-form .felt{flex:1 1 300px;margin-bottom:0}

/* ---------- Kontaktflater ---------- */
.info-rad{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px}
.info-rad h3{font-size:1.28rem;margin-bottom:14px}
.info-rad p{color:var(--tekst-lys-damp);font-size:.97rem}
.baand-lys .info-rad p{color:var(--tekst-mork-damp)}
.info-rad a{color:var(--gull);text-decoration:none;border-bottom:1px solid rgba(207,177,130,.35)}
.baand-lys .info-rad a{color:var(--gull-paa-lys);border-bottom-color:rgba(125,98,34,.4)}
.info-rad a:hover{color:var(--gull-lys)}
.baand-lys .info-rad a:hover{color:var(--kull)}

.kartflate{margin-top:64px;position:relative;background:var(--kull-lys);
  border:1px solid rgba(207,177,130,.2);padding:56px 46px;overflow:hidden}
.kartflate::before{content:"";position:absolute;inset:0;opacity:.34;
  background:
    repeating-linear-gradient(74deg,rgba(207,177,130,.16) 0 1px,transparent 1px 78px),
    repeating-linear-gradient(-16deg,rgba(207,177,130,.11) 0 1px,transparent 1px 116px)}
.kartflate > *{position:relative;z-index:1}

/* ---------- Lang tekst ---------- */
.tekstkolonner{columns:2;column-gap:56px;margin-top:44px;color:var(--tekst-mork-damp)}
.tekstkolonner h3{color:var(--tekst-mork);margin:0 0 12px;break-after:avoid}
.tekstkolonner p{break-inside:avoid}
.brodside{max-width:74ch}
.brodside h2{margin-top:56px;font-size:clamp(1.7rem,3vw,2.5rem)}
.brodside h2:first-of-type{margin-top:0}
.brodside h3{margin-top:36px;font-size:1.24rem}
.brodside p,.brodside li{color:var(--tekst-mork-damp)}
.brodside ul{padding-left:20px}
.brodside li{margin-bottom:8px}
.brodside a{color:var(--gull-paa-lys)}
.oppdatert{font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tekst-mork-damp);
  margin-bottom:40px}

/* ---------- Footer ---------- */
footer{background:var(--kull-dyp);color:var(--tekst-lys);padding:92px 0 40px}
footer .rader{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px}
/* UU (WCAG 1.3.1): fotspaltene var h4 rett etter h2 i innholdet, altså et hopp over h3.
   Nivået er semantikk, ikke størrelse. `line-height` settes eksplisitt til den h4 hadde fra
   h1..h4-regelen, så uttrykket er nøyaktig som før. */
footer h3{font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.2em;
  line-height:1.12;
  text-transform:uppercase;color:var(--gull);margin-bottom:18px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:11px}
footer a{color:var(--tekst-lys-damp);text-decoration:none;font-size:.95rem;transition:color .25s ease}
footer a:hover,footer a:focus-visible{color:var(--gull)}
footer p{color:var(--tekst-lys-damp);font-size:.95rem}
footer .merke b{font-size:1.5rem}
.footer-bunn{margin-top:64px;padding-top:26px;border-top:1px solid rgba(207,177,130,.16);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.84rem;color:var(--tekst-lys-damp)}
.footer-bunn a{font-size:.84rem}

/* ---------- Mobil ---------- */
/* Lang tilleggstekst er en desktop-luksus. På mobil ligger den bak et trykk, ellers spiser
   den alene halvannen skjermhøyde av scroll-budsjettet. */
.lesmer{margin-top:44px}
.lesmer > summary{list-style:none;cursor:pointer;display:inline-block;
  font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gull-paa-lys);position:relative;padding-left:34px}
.lesmer > summary::-webkit-details-marker{display:none}
.lesmer > summary::before{content:"";position:absolute;left:6px;top:-.15em;width:1px;height:1.9em;
  background:var(--gull-mork);transform:rotate(22deg);transform-origin:top center}
.lesmer[open] > summary{margin-bottom:6px}
@media (min-width:1001px){
  .lesmer > summary{display:none}
  .lesmer:not([open]) > .tekstkolonner{display:block}
}

@media (max-width:1000px){
  :root{--luft:46px;--sk:26px;--topp:70px}
  .topp .ramme{padding:0 20px}
  .merke b{font-size:1.32rem}
  .merke i{font-size:.52rem;letter-spacing:.34em}
  .menyhandtak{display:flex}
  /* Ingen ramme i lukket tilstand: en gjennomsiktig 1px-kant gir nav-høyde 1 i stedet for 0,
     og da er «er menyen lukket»-sjekken alltid grønn. */
  .topp nav{position:absolute;left:0;right:0;top:var(--topp);background:var(--kull-dyp);
    max-height:0;overflow:hidden;transition:max-height .38s ease;border-top:0}
  #menyknapp:checked ~ .ramme nav{max-height:74vh;overflow-y:auto;
    border-top:1px solid rgba(207,177,130,.2)}
  .topp nav ul{flex-direction:column;align-items:stretch;gap:0;padding:10px 20px 26px}
  .topp nav li{border-bottom:1px solid rgba(207,177,130,.12)}
  .topp nav a{display:block;padding:17px 4px;font-size:.86rem}
  .topp nav .meny-cta{display:block;margin-top:22px;border-bottom:0}
  .topp nav .meny-cta a{padding:0}
  .topp:not(.fast) nav{background:var(--kull-dyp)}

  .hero{min-height:68vh;padding:calc(var(--topp) + 62px) 0 68px}
  .hero .ingress{font-size:1rem;margin-top:20px}
  .hero .knapperad{margin-top:30px}
  .hero-liten{min-height:44vh;padding:calc(var(--topp) + 52px) 0 44px}

  /* Flisraden blir en sveiperad på mobil: fire fliser i rutenett koster to skjermhøyder,
     én rad koster en halv, og et sveipespor er et mønster folk kjenner fra mobilen sin. */
  .fliser{display:flex;grid-template-columns:none;gap:12px;margin-top:-46px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;scrollbar-width:none}
  .fliser::-webkit-scrollbar{display:none}
  /* Nullstill forskyvningen på ALLE fire, ellers står annenhver flis forskjøvet. */
  .flis:nth-child(1),.flis:nth-child(2),.flis:nth-child(3),.flis:nth-child(4){transform:none}
  .flis{flex:0 0 61%;scroll-snap-align:start}
  .flis figcaption{left:16px;right:12px;bottom:16px;font-size:1.12rem}
  .flis figcaption::after{height:18px;margin-top:8px}
  .flisrad{padding-bottom:var(--luft)}

  .delt{grid-template-columns:1fr;gap:22px}
  .sikksakk{grid-template-columns:1fr;min-height:0}
  .sikksakk .panel{padding:44px 20px 40px;order:2}
  /* Den skrå panelkanten er en desktop-effekt, den skal ikke stikke ut på mobil. */
  .sikksakk .panel::before{display:none}
  .sikksakk .foto{order:1;min-height:0;display:block}
  .sikksakk .foto img{height:auto;aspect-ratio:3/2}
  .sikksakk .panel p{max-width:none}

  .forskjovet{grid-template-columns:1fr;gap:30px;margin-top:34px}
  /* Samme spesifisitet som desktop-regelen, ellers overlever margin-top. */
  .forskjovet .kort:nth-child(2){margin-top:0}
  .kort .paatittel{left:20px;right:16px;bottom:18px}
  .kort .under{padding-top:20px}

  .rutenett-4{grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
  .rute-kort img{aspect-ratio:4/5}
  .rute-kort .navn{left:15px;right:12px;bottom:15px;font-size:1.06rem}
  .fakta{grid-template-columns:1fr;gap:16px;margin-top:34px;padding-top:28px}
  .fakta > div{display:flex;align-items:baseline;gap:18px}
  .fakta .tall{flex:0 0 auto;min-width:82px}
  .fakta p{margin-top:0;font-size:.9rem}
  .info-rad{grid-template-columns:1fr;gap:30px;margin-top:38px}
  .feltpar{grid-template-columns:1fr;gap:0}
  .skjemakort{padding:32px 22px}
  .kartflate{padding:36px 22px;margin-top:44px}
  .tekstkolonner{columns:1;margin-top:30px}
  .skraabilde .tittel{padding:0 46px;top:42%}
  .skraabilde img{aspect-ratio:16/10;max-height:none}
  .nyhetsbrev-form{gap:22px}
  .nyhetsbrev-form .knapp{width:auto}

  footer{padding:46px 0 28px}
  footer .rader{grid-template-columns:1fr 1fr;gap:34px}
  .footer-bunn{margin-top:30px;padding-top:20px}
  .cont{padding:0 20px}
}

@media (max-width:560px){
  .rutenett-4{grid-template-columns:1fr 1fr;gap:10px}
  /* To kolonner, ikke én: fire stablede footer-blokker koster over en skjermhøyde alene. */
  footer .rader{grid-template-columns:1fr 1fr;gap:28px 22px}
  footer .rader > div:first-child{grid-column:1 / -1}
  .knapp > span{padding:16px 30px}
  .knapp-linje{padding:15px 28px}
  .hero .knapperad{gap:12px}
}

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