/* ==================================================================
   Hawaii Norge — tema (port av godkjent utkast H, 16.10.2026)

   Kilde: wt-shared/leads/hawaiinorge.no/designarkiv/utkast/H-hawaii-norge.html
   og design/DESIGN.md. Del 1 er H sin CSS ordrett (klassenavnene er H sine),
   bortsett fra at bildestiene peker på assets/img. Del 2 er det WordPress-sidene
   trenger utover H: undersider, priser, allergener, stedssiden, Aktuelt,
   animasjon A, prosa og skjema-nære småting. Bare låste tokens.

   Låst palett: papaya #F26E17 · papaya lys #FD9600 · sand #FDC066 ·
   sand blek #FDF0DC · papir #FFFBF5 · brun #241407 · brun dyp #3A2109.
   Unntak: --foto #F39C55 er bakgrunnen i animasjon A (målt fra kundens
   produktbilder, kundens valgte forslag). Brun på --foto 8,2:1.
   HVIT TEKST FINNES IKKE PÅ PAPAYA.
   ================================================================== */

/* ---------- Del 1: H ------------------------------------------------ */
/* Figtree (OFL), variabel 500–900, selv-hostet: ingen kall til Google før samtykke. */
@font-face{
  font-family:'Figtree'; font-style:normal; font-weight:500 900; font-display:swap;
  src:url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Figtree'; font-style:normal; font-weight:500 900; font-display:swap;
  src:url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* Fargesystemet — låst */
  --papaya:      #F26E17;
  --papaya-lys:  #FD9600;
  --sand:        #FDC066;
  --sand-blek:   #FDF0DC;
  --papir:       #FFFBF5;
  --brun:        #241407;
  --brun-dyp:    #3A2109;

  --font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, Helvetica, Arial, sans-serif;

  /* Rom */
  --maks:  1520px;
  --kant:  clamp(16px, 4vw, 64px);
  --pad:   clamp(64px, 8vw, 140px);
  --r:     20px;
  --r-lite: 12px;
  --r-pill: 200px;
  --topp:  72px;
  /* Hvor mye av neste seksjon som kikker frem over folden. */
  --kikk:  clamp(56px, 9vh, 104px);

  /* Logoen: bredde delt på høyde i logo-hawaii-norge.svg. */
  --logo-forhold: 1.2522;

  /* Plakatskala (F2) */
  --t-plakat:  clamp(52px, 9.4vw, 176px);
  --t-by:      clamp(44px, 6vw, 104px);
  --t-kat:     clamp(28px, 3.2vw, 52px);
  --t-rett:    clamp(22px, 1.9vw, 30px);
  --t-ingress: clamp(20px, 1.9vw, 30px);
  --t-brod:    clamp(17px, 1.3vw, 21px);
  --t-liten:   16px;

  /* Fiskemønsteret krymper samlet på smale skjermer. */
  --skala: 1;
}

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

html{ -webkit-text-size-adjust:100%; scroll-padding-top:104px; }
html[data-meny-apen]{ overflow:hidden; }

body{
  margin:0;
  background:var(--papir);
  color:var(--brun);
  font-family:var(--font);
  font-size:var(--t-brod);
  font-weight:500;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
figure{ margin:0; }
a{ color:inherit; }
p{ margin:0; }
h1,h2,h3,h4{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--papir); color:var(--brun);
  font-size:var(--t-liten); font-weight:700;
  padding:12px 20px; border-radius:var(--r-lite);
}
.skip:focus{ left:16px; top:16px; }

.skjult{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

.ramme{
  width:100%;
  max-width:calc(var(--maks) + 2 * var(--kant));
  margin-inline:auto;
  padding-inline:var(--kant);
}

/* ---------- Flater ------------------------------------------------- */
.flate{ position:relative; overflow-x:clip; }
.flate--papaya{ background:var(--papaya);    color:var(--brun); }
.flate--sand{   background:var(--sand);      color:var(--brun); }
.flate--blek{   background:var(--sand-blek); color:var(--brun); }
.flate--papir{  background:var(--papir);     color:var(--brun); }

/* ---------- Header ------------------------------------------------- */
/* Fast, 12 px fra toppen. To tilstander:
     over heroen (data-paa-hero): gjennomsiktig, ingen merke — heroen
       ER logoen. Brun tekst på sand blek 15,85 / på papaya 5,96.
     ellers: papirpill med papaya-ring (F2) og ettfargemerket.
   Uten JS settes data-paa-hero aldri, så headeren står med flate. */
.topp{
  position:fixed; z-index:50;
  top:12px; left:var(--kant); right:var(--kant);
  height:var(--topp);
  display:flex; align-items:center; gap:24px;
  padding:0 10px 0 22px;
  background:var(--papir); color:var(--brun);
  border:2px solid var(--papaya);
  border-radius:var(--r-pill);
}
.topp[data-paa-hero]{ background:transparent; border-color:transparent; }
.topp :focus-visible{ outline-offset:2px; }

/* Ettfargemerket. 58 px høyt — over grensen på ~56 px der den
   håndskrevne skriften kollapser (målt i E5). */
.topp-merke{
  flex:none; display:block;
  height:58px; width:calc(58px * var(--logo-forhold));
}
.topp-merke img{ width:100%; height:100%; object-fit:contain; }
.topp[data-paa-hero] .topp-merke{ visibility:hidden; opacity:0; }

.panel{
  display:flex; align-items:center; gap:clamp(18px, 2vw, 32px);
  margin-left:auto;
}
.hovedmeny ul{
  display:flex; gap:clamp(16px, 1.8vw, 28px);
  font-size:var(--t-liten); font-weight:700;
}
.hovedmeny a{ text-decoration:none; padding:6px 2px; }
.hovedmeny a:hover{ text-decoration:underline; text-underline-offset:6px;
                    text-decoration-thickness:2px; }

/* Sosiale ikoner: stroke-SVG i currentColor, 44 px treffflate. */
.sosialt{ display:flex; gap:4px; }
.sosialt a{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
}
.sosialt a:hover{ background:var(--sand); }
.ikon{
  width:22px; height:22px;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Språkveksleren: lenker mellom de to filene. Gjeldende språk er
   understreket og har aria-current. */
.sprak{
  display:flex; align-items:center; gap:6px;
  font-size:var(--t-liten); font-weight:800; letter-spacing:.04em;
}
.sprak a{ text-decoration:none; padding:6px 4px; }
.sprak a[aria-current]{ text-decoration:underline; text-decoration-thickness:3px;
                        text-underline-offset:6px; }
.sprak a:hover{ text-decoration:underline; text-underline-offset:6px; }

/* «EN»/«NO» ved Meny-knappen på smal skjerm (ellers står språkvalget i panelet).
   Rund, 48 px som Meny-knappen, brun kant og brun tekst. */
.sprak-kort{
  display:none; place-items:center; flex:none;
  width:48px; height:48px; border-radius:50%;
  border:2px solid var(--brun); background:var(--papir); color:var(--brun);
  font-size:var(--t-liten); font-weight:800; letter-spacing:.04em; text-decoration:none;
}
.sprak-kort:hover{ background:var(--sand); }

/* Hamburger og lukk: synlige knapper, brun kant (5,96 mot papaya,
   15,85 mot sand blek, 17,29 mot papir). Bare på smal skjerm. */
.meny-knapp, .lukk{
  display:none; align-items:center; gap:10px;
  min-height:48px; padding:10px 18px;
  font-size:var(--t-liten); font-weight:800;
  background:var(--papir); color:var(--brun);
  border:2px solid var(--brun); border-radius:var(--r-pill);
  cursor:pointer;
}
.meny-knapp:hover, .lukk:hover{ background:var(--sand); }

/* ---------- Knapper ------------------------------------------------ */
.knapp{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--t-ingress); line-height:1.2; font-weight:800;
  padding:18px 36px;
  border:2px solid var(--brun);
  border-radius:var(--r-pill);
  text-decoration:none;
}
/* Brun tekst 5,96:1 og brun kant fordi papaya mot papir er 2,90:1. */
.knapp--papaya{ background:var(--papaya); color:var(--brun); }
.knapp--papaya:hover{ background:var(--papaya-lys); }

/* ---------- Hero --------------------------------------------------- */
/* Teaology: flat flate, bare merket, og fisk rundt i stedet for prikker.
   Høyden er folden minus --kikk, så en stripe av seksjonen under synes. */
.hero{
  display:grid; place-items:center;
  min-height:calc(100vh - var(--kikk));
  min-height:calc(100svh - var(--kikk));
  padding:calc(12px + var(--topp) + 20px) var(--kant) 96px;
  overflow:clip;
}
.hero-merke{
  position:relative; z-index:2;
  /* 46 % av bredden, men aldri høyere enn det folden har plass til. */
  width:min(46vw, (100vh - 290px) * var(--logo-forhold));
  width:min(46vw, (100svh - 290px) * var(--logo-forhold));
}
.hero-merke img{ width:100%; height:auto; }

/* Scroll-indikatoren: diskret ring med pil, nederst på midten. */
.ned{
  position:absolute; z-index:2; left:50%; bottom:22px;
  translate:-50% 0;
  display:grid; place-items:center;
  width:52px; height:52px;
  border:2px solid var(--brun); border-radius:50%;
  color:var(--brun);
}
.ned:hover{ background:var(--sand); }

/* ---------- Fiskemønsteret (E8) ----------------------------------- */
/* Samme fisk som E8s .monster (866 x 397), i papaya og papaya lys.
   Plassert i sonene rundt logoen: på liggende skjerm til venstre og
   høyre for den, på stående over og under. */
.stim{
  position:absolute; inset:0; z-index:1;
  overflow:hidden; pointer-events:none;
}
.fisk{
  position:absolute; display:block;
  width:calc(var(--w) * var(--skala));
  aspect-ratio:866 / 397;
  background:url("../img/fisk-listepunkt-3.png") center/contain no-repeat;
  transform:rotate(var(--v)) scaleX(var(--sx, 1));
}
.fisk--lys{ background-image:url("../img/fisk-monster-3.png"); }

.f1 { --w:152px; --v:-17deg; --sx:-1; left:-3%;  top:20%; }
.f2 { --w:62px;  --v:8deg;   --sx:-1; left:15%;  top:17%; }
.f3 { --w:44px;  --v:19deg;           left:20%;  top:44%; }
.f4 { --w:98px;  --v:-9deg;           left:5%;   top:50%; }
.f5 { --w:120px; --v:13deg;           left:11%;  top:73%; }
.f6 { --w:212px; --v:-5deg;  --sx:-1; left:-7%;  top:88%; }
.f7 { --w:70px;  --v:23deg;  --sx:-1; left:80%;  top:19%; }
.f8 { --w:140px; --v:-13deg; --sx:-1; left:87%;  top:34%; }
.f9 { --w:188px; --v:7deg;            left:79%;  top:56%; }
.f10{ --w:54px;  --v:-3deg;           left:94%;  top:22%; }
.f11{ --w:88px;  --v:-24deg;          left:92%;  top:78%; }
.f12{ --w:118px; --v:16deg;  --sx:-1; left:77%;  top:86%; }
.f13{ --w:46px;  --v:-28deg;          left:22%;  top:64%; }

/* ---------- Plakattitler (F2) ------------------------------------- */
.plakat-tittel{
  font-size:var(--t-plakat);
  font-weight:900;
  line-height:.86;
  letter-spacing:-.045em;
}
.ingress{
  margin-top:clamp(18px, 2vw, 32px);
  font-size:var(--t-ingress); font-weight:600; line-height:1.35;
  max-width:34ch;
}

/* ---------- Menyen ------------------------------------------------- */
.meny{ padding:var(--pad) 0; }
.meny-topp{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  gap:18px clamp(24px, 3vw, 48px);
}
/* «Nye priser kommer»: sandpille med brun kant og brun tekst, 10,96:1. */
.pris-merke{
  display:inline-block;
  padding:10px 22px;
  font-size:var(--t-liten); font-weight:800; line-height:24px;
  letter-spacing:.02em;
  background:var(--sand);
  border:2px solid var(--brun); border-radius:var(--r-pill);
  margin-bottom:.6em;
}
.kategori{ margin-top:clamp(56px, 6vw, 104px); }
.kategori-topp{
  display:flex; align-items:baseline; gap:16px;
  padding-bottom:clamp(14px, 1.4vw, 22px);
  margin-bottom:clamp(20px, 2.2vw, 36px);
  border-bottom:2px solid var(--papaya);   /* dekor */
}
.kategori-tittel{
  font-size:var(--t-kat); font-weight:900; line-height:1;
  letter-spacing:-.03em;
}
.kategori-pris{ margin-left:auto; font-size:var(--t-liten); font-weight:700; }

.retter{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(32px, 3.4vw, 56px) clamp(20px, 2.4vw, 40px);
}
.retter--fire{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.rett-bilde{
  width:100%; height:auto; aspect-ratio:3 / 2;
  object-fit:cover;
  border-radius:var(--r);
}
.rett-navn{
  margin-top:16px;
  font-size:var(--t-rett); font-weight:900; line-height:1.1;
  letter-spacing:-.02em;
}
.rett-linje{
  margin-top:8px; max-width:46ch;
  font-size:var(--t-liten); line-height:1.5;
}

/* Ekstra: små runde utklipp av kundens tilbehørsbilder. Produktet
   står midt i et 700 x 467-bilde, så utklippet forstørres litt. */
.ekstra{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(108px, 1fr));
  gap:28px 18px;
}
.ekstra li{ display:grid; justify-items:center; gap:10px; text-align:center;
            font-size:var(--t-liten); font-weight:700; line-height:1.3; }
.ekstra-bilde{
  width:clamp(88px, 8vw, 128px); height:clamp(88px, 8vw, 128px);
  border-radius:50%; overflow:hidden;
}
.ekstra-bilde img{
  width:100%; height:100%; object-fit:cover;
  scale:1.45;
}
/* Rett eller ekstra uten bilde ennå: stiplet ramme med «Bilde kommer» (som Mjøsfronten-kortet). */
.rett-bilde--kommer, .ekstra-bilde--kommer{
  display:grid; place-items:center; text-align:center;
  background:var(--sand-blek); color:var(--brun);
  border:2px dashed var(--brun);
  font-weight:800; line-height:1.2;
}
.rett-bilde--kommer{ font-size:var(--t-liten); padding:12px; }
.ekstra-bilde--kommer{ font-size:13px; padding:10px; }

/* ---------- Stemningsbilder --------------------------------------- */
/* Kundens forsidebilder i full bredde. Høyden er satt, ikke avledet. */
.stemning{
  position:relative; overflow:hidden;
  height:clamp(300px, 44vw, 760px);
}
.stemning img{
  position:absolute; left:0; top:-8%;
  width:100%; height:116%;
  object-fit:cover;
}

/* ---------- Slagordet over stemningsbildet (variant A, 19.10) ------ */
/* Like mye luft over og under, mellom den tette starten og menyens --pad (Eirik 20.10). */
.slagord-baand{ padding:clamp(44px, 5.5vw, 96px) 0; }
.slagord-tittel{
  font-size:var(--t-by); font-weight:900; max-width:16ch;
  line-height:1; letter-spacing:-.035em;
}
.slagord-under{ margin-top:.6em; font-size:var(--t-ingress); font-weight:600; line-height:1.3; }

/* ---------- Stedene ------------------------------------------------ */
.steder{ padding:var(--pad) 0; }
.sted-grid{
  margin-top:clamp(36px, 4vw, 72px);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(16px, 1.8vw, 28px);
}
.sted{
  padding:clamp(28px, 3.4vw, 56px);
  border-radius:var(--r);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"by by" "info tider";
  gap:clamp(18px, 2vw, 32px) clamp(20px, 2.4vw, 40px);
  align-content:start;
}
.sted{ border:2px solid var(--brun); }
.sted--papaya{ background:var(--papaya); }
.sted--sand{   background:var(--sand); }
.sted--blek{   background:var(--sand-blek); }
/* Alle stedskortene har brun kant: papaya mot papir er 2,90:1, sand blek
   mot papir 1,09:1. Mjøsfronten: papir med stiplet kant — «kommer». */
.sted--kommer{ background:var(--papir); border-style:dashed; }
.by{
  grid-area:by;
  font-size:var(--t-by); font-weight:900; line-height:.9;
  letter-spacing:-.045em;
}
.by-pre{
  display:block;
  font-size:var(--t-liten); font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; line-height:1.2; margin-bottom:.6em;
}
.sted-info{ grid-area:info; }
.sted-adr{ font-size:var(--t-brod); font-weight:700; line-height:1.35; }
.sted-tlf{ margin-top:4px; font-weight:700; }
/* 44 px trykkflate uten at linja ser annerledes ut: høyden ligger i lenken. */
.sted-tlf a{ display:inline-flex; align-items:center; min-height:44px;
             text-underline-offset:5px; text-decoration-thickness:2px; }
.kommer{ font-size:var(--t-ingress); font-weight:800; line-height:1.3; }
/* Status settes av skriptet (hidden uten JS). Åpent = fylt brun pille
   med papirtekst 17,29:1; stengt = kantpille. */
.status{
  display:inline-block; margin-top:16px;
  padding:6px 16px;
  font-size:var(--t-liten); font-weight:800; line-height:24px;
  border:2px solid var(--brun); border-radius:var(--r-pill);
  background:var(--brun); color:var(--papir);
}
.status[data-apent="nei"]{ background:transparent; color:var(--brun); }
.status[hidden]{ display:none; }
/* Ingen subgrid: hver rad er sitt eget grid med fast førstekolonne. */
.tider{
  grid-area:tider;
  display:grid; row-gap:4px; align-content:start;
  font-size:var(--t-liten); line-height:1.5;
  font-variant-numeric:tabular-nums;
}
.tider li{ display:grid; grid-template-columns:6.2em auto; column-gap:12px; }
.tider li[aria-current="date"] span{ font-weight:900; text-decoration:underline;
  text-decoration-thickness:2px; text-underline-offset:5px; }

/* ---------- Vår historie ------------------------------------------ */
.historie{ padding:var(--pad) 0; }
.historie-fakta{ margin-top:.5em; font-size:var(--t-ingress); font-weight:800; line-height:1.3; }
.historie-grid{
  margin-top:clamp(36px, 4.4vw, 72px);
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(32px, 5vw, 96px); align-items:center;
}
.historie-grid h3{
  font-size:clamp(28px, 3.2vw, 52px); font-weight:900; line-height:1.04;
  letter-spacing:-.03em; margin-bottom:24px; max-width:18ch;
}
.historie-tekst p + p{ margin-top:16px; }
.historie-tekst p{ max-width:56ch; }
.fiskeliste{ margin-top:clamp(28px, 3vw, 44px); display:grid; gap:12px; }
.fiskeliste li{ display:flex; align-items:center; gap:16px; font-weight:800; }
.fiskeliste img{ width:44px; height:auto; flex:none; }
.aar{
  margin-top:clamp(56px, 7vw, 120px);
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(16px, 2.4vw, 40px);
  border-top:4px solid var(--brun);
  padding-top:clamp(18px, 2vw, 30px);
}
.aar-tall{
  display:block;
  font-size:clamp(48px, 8vw, 150px); font-weight:900; line-height:.9;
  letter-spacing:-.05em; font-variant-numeric:tabular-nums;
}
.aar-sted{ display:block; margin-top:10px; font-weight:700; }

/* Fotokort: papir med brun hårlinje som grense, som F2. */
.fotokort{
  background:var(--papir);
  border:1px solid var(--brun);
  border-radius:var(--r);
  padding:14px 14px 18px;
}
.fotokort img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
               border-radius:var(--r-lite); }
.fotokort figcaption{ margin-top:12px; font-size:var(--t-liten); font-weight:700; line-height:24px; }
.fotokort--skraa{ rotate:-2.5deg; }
/* Bollene står på en smal stripe midt i bildet; bredere utsnitt. */
.fotokort--bred img{ aspect-ratio:16/9; }
.fotokort--staaende img{ aspect-ratio:3/4; }

/* ---------- Catering ----------------------------------------------- */
.catering{ padding:var(--pad) 0; }
.catering .ramme{ position:relative; z-index:2; }
.catering-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px, 5vw, 96px); align-items:center;
}
.catering-tekst{
  margin-top:clamp(24px, 3vw, 44px);
  font-size:var(--t-ingress); line-height:1.4; font-weight:600;
  max-width:36ch;
}
.catering .knapp{ margin-top:clamp(26px, 3vw, 40px); }
/* Resten av møtemat-teksten står som brødtekst, ikke ingress. */
.catering-mer{ padding:var(--pad) 0; }
.catering-mer .fakta{ margin-bottom:clamp(32px, 4vw, 56px); }
.catering-brod{ max-width:68ch; }
.catering-brod > h2:first-child{ margin-top:0; }
.catering-mer .knapp{ margin-top:clamp(32px, 4vw, 48px); }
/* Adressen som tekst ved knappen: mange kontor-PC-er har ikke e-postprogram. */
.epost-alt{ margin-top:14px; font-size:var(--t-liten); font-weight:700; overflow-wrap:anywhere; }
/* Et lite stim i papaya lys på papir (2,14), bare i seksjonens topp-
   og bunnpolstring, så ingen fisk ligger under tekst eller knapp. */
.c1{ --w:130px; --v:-12deg; --sx:-1; left:-2%; top:-10px; }
.c2{ --w:64px;  --v:14deg;           left:3%;  bottom:12px; }
.c3{ --w:96px;  --v:-20deg;          left:91%; top:10px; }

/* ---------- Jobb --------------------------------------------------- */
.jobb{ padding:var(--pad) 0; }
.jobb-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px, 4vw, 72px); align-items:end;
}
.jobb-tekst{ font-size:var(--t-ingress); font-weight:700; line-height:1.35; max-width:30ch; }
.jobb-epost{ margin-top:18px; display:grid; gap:4px; font-size:var(--t-brod); font-weight:700; }
.jobb-epost li{ display:flex; flex-wrap:wrap; align-items:center; column-gap:.4em; }
.jobb-sted{ font-weight:800; }
.jobb-epost a{ display:inline-flex; align-items:center; min-height:44px; overflow-wrap:anywhere;
               text-underline-offset:5px; text-decoration-thickness:2px; }

/* ---------- Bunnen / kontakt -------------------------------------- */
.bunn{ padding:var(--pad) 0 clamp(32px, 3vw, 48px); }
.bunn-grid{
  margin-top:clamp(36px, 4vw, 64px);
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:40px 32px;
  font-size:var(--t-brod); line-height:1.6;
}
.bunn-grid h3{
  font-size:var(--t-liten); font-weight:800; letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.bunn-grid a{ text-underline-offset:5px; }
.bunn-sosialt{
  margin-top:clamp(40px, 4vw, 64px);
  display:flex; flex-wrap:wrap; gap:12px 28px;
  font-weight:800;
}
.bunn-sosialt a{
  display:inline-flex; align-items:center; gap:10px;
  text-underline-offset:5px; min-height:44px;
}
/* Stedets egne kontoer under kontaktlinjene: tett under listen, ikke bunnens luft. */
.bunn-sosialt--sted{ margin-top:4px; gap:0 20px; font-weight:700; }
.sted-info .bunn-sosialt--sted{ margin-top:12px; }
/* Stedskort med bare logoene: på linje med telefonen. */
.sted-kontakt{ display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; margin-top:4px; }
.sted-kontakt .sted-tlf{ margin-top:0; }
.sted-kontakt .sosialt--sted{ margin:0; }
.sosialt--sted a:hover{ background:color-mix(in srgb, currentColor 12%, transparent); }
.bunn-merke{
  margin:clamp(56px, 7vw, 120px) auto 0;
  width:min(360px, 64vw);
}
.bunn-merke img{ width:100%; height:auto; }
.bunn-liten{
  margin-top:clamp(28px, 3vw, 44px);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  font-size:var(--t-liten); font-weight:600;
  border-top:2px solid var(--brun); padding-top:18px;
}
.bunn-liten a{ text-underline-offset:5px; }

/* ---------- Brytpunkter -------------------------------------------- */
@media (min-width: 1600px){
  :root{ --skala:1.25; }
}

@media (max-width: 1180px){
  .retter--fire{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .sted{ grid-template-columns:minmax(0,1fr); grid-template-areas:"by" "info" "tider"; }
}

/* Hamburger under 1100 px, der menyen, ikonene og språkvalget ikke får plass.
   Med JS blir panelet et fullskjermslag med synlig «Lukk»-knapp;
   uten JS står lenkene i en rad som kan skrolles sidelengs. */
@media (max-width: 1099px){
  html[data-js] .meny-knapp{ display:inline-flex; margin-left:auto; }
  html[data-js] .sprak-kort{ display:grid; margin-left:auto; }
  html[data-js] .sprak-kort + .meny-knapp{ margin-left:0; }
  html[data-js] .panel{
    position:fixed; inset:0; z-index:60;
    display:none;
    flex-direction:column; align-items:flex-start; gap:28px;
    padding:112px var(--kant) 40px;
    background:var(--papir);
    overflow-y:auto;
  }
  html[data-js] .topp[data-apen] .panel{ display:flex; }
  html[data-js] .lukk{ display:inline-flex; position:absolute; top:24px; right:var(--kant); }
  html[data-js] .hovedmeny ul{
    flex-direction:column; gap:6px;
    font-size:clamp(30px, 7vw, 48px); font-weight:900; letter-spacing:-.03em;
  }
  html[data-js] .panel .sosialt a{ width:52px; height:52px; border:2px solid var(--brun); }
  html[data-js] .panel .sprak{ font-size:20px; }
  html:not([data-js]) .panel{ overflow-x:auto; }
  html:not([data-js]) .sosialt, html:not([data-js]) .sprak{ display:none; }
}

@media (max-width: 900px){
  .retter{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .sted-grid{ grid-template-columns:minmax(0,1fr); }
  .sted{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"by by" "info tider"; }
  .historie-grid, .catering-grid, .jobb-grid{ grid-template-columns:minmax(0,1fr); }
  .bunn-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .aar{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* Stående skjerm: logoen 80 % av bredden, fisken over og under.
   Fiskene plasseres fra logoens kant, ikke i prosent av heroen, så de
   aldri glir inn under logoen når forholdet endres: --s er -1 over
   logoen og 1 under, --d er avstanden i px (ganget med --e). Midten av
   heroen ligger 4 px under 50 % (polstringen er 104 over og 96 under). */
@media (max-aspect-ratio: 1/1){
  :root{ --skala:.62; }
  .hero{
    --logo-b:min(80vw, (100svh - 300px) * var(--logo-forhold));
    --halv:calc(var(--logo-b) / var(--logo-forhold) / 2);
    --e:1px;
  }
  .hero-merke{ width:var(--logo-b); }
  .stim--hero .fisk{
    top:calc(50% + 4px + var(--s) * (var(--halv) + var(--d) * var(--e)));
  }
  .f1 { --s:-1; --d:100; left:-6%; }
  .f5 { --s:-1; --d:50;  left:16%; }
  .f2 { --s:-1; --d:96;  left:36%; }
  .f3 { --s:-1; --d:42;  left:54%; }
  .f4 { --s:-1; --d:100; left:62%; }
  .f7 { --s:-1; --d:58;  left:86%; }
  .f11{ --s:1;  --d:16;  left:5%;  }
  .f6 { --s:1;  --d:58;  left:-10%; }
  .f10{ --s:1;  --d:78;  left:32%; }
  .f12{ --s:1;  --d:14;  left:80%; }
  .f9 { --s:1;  --d:52;  left:62%; }
  .f8 { --s:1;  --d:128; left:66%; }
  .f13{ --s:1;  --d:106; left:90%; }
}
/* Nettbrett på høykant: større logo, så fisken og avstandene vokser. */
@media (max-aspect-ratio: 1/1) and (min-width: 600px){
  :root{ --skala:.78; }
  .hero{ --e:1.25px; }
}

@media (max-width: 600px){
  .topp{ height:70px; top:10px; padding-left:20px; }
  .topp-merke{ height:56px; width:calc(56px * var(--logo-forhold)); }
  .knapp{ font-size:18px; padding:14px 24px; }
  .retter, .retter--fire{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .rett{
    display:grid; grid-template-columns:112px minmax(0,1fr);
    column-gap:16px; align-items:start;
  }
  .rett-bilde{ grid-row:1 / span 2; aspect-ratio:1; border-radius:var(--r-lite); }
  .rett-navn{ margin-top:2px; }
  .ekstra{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .sted{ grid-template-columns:minmax(0,1fr); grid-template-areas:"by" "info" "tider"; }
  .aar{ grid-template-columns:minmax(0,1fr); }
  .bunn-grid{ grid-template-columns:minmax(0,1fr); }
  .fotokort--skraa{ rotate:-1.5deg; }
}

/* ---------- Bevegelse ---------------------------------------------- */
/* Bare uten redusert bevegelse, og det scroll-drevne bare der
   nettleseren har animation-timeline. Alt animeres FRA en synlig
   tilstand: ingen opacity:0, ingenting som venter på å «komme inn». */
@media (prefers-reduced-motion: no-preference){
  .topp{ transition:background-color .25s ease, border-color .25s ease; }
  .topp-merke{ transition:opacity .25s ease, visibility .25s; }
  .knapp, .sosialt a, .meny-knapp, .sprak-kort, .lukk, .ned{ transition:background-color .18s ease; }

  @supports (animation-timeline: view()){
    /* Fiskene driver sakte opp og ut mens heroen scrolles bort. */
    .stim--hero{
      animation:svom linear both;
      animation-timeline:scroll(root);
      animation-range:0 100vh;
    }
    /* Logoen trekker seg litt tilbake. */
    .hero-merke{
      animation:trekk linear both;
      animation-timeline:scroll(root);
      animation-range:0 100vh;
    }
    /* Plakattitlene skyves inn fra høyre — synlige hele veien. */
    .plakat-tittel{
      animation:skyv linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 100%;
    }
    /* Stemningsbildene: bildet er 16 % høyere enn rammen og forskyves. */
    .stemning img{
      animation:dybde linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
  }
}
@keyframes svom{
  from{ translate:0 0; }
  to  { translate:-2vw -14vh; }
}
@keyframes trekk{
  from{ scale:1; }
  to  { scale:.9; }
}
@keyframes skyv{
  from{ translate:4vw 0; }
  to  { translate:0 0; }
}
@keyframes dybde{
  from{ translate:0 -6%; }
  to  { translate:0 6%; }
}

/* ---------- Del 2: WordPress-sidene ------------------------------- */

:root{
  --foto: #F39C55;   /* bare animasjon A, se toppen */
  --hvit: #FFFFFF;   /* bare skjemafelt */
}

.screen-reader-text{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
main:focus{ outline:none; }

/* Adminlinjen skyver den faste headeren ned. */
.admin-bar .topp{ top:44px; }
@media (max-width: 782px){ .admin-bar .topp{ top:58px; } }
@media (max-width: 600px){ .admin-bar .topp{ top:10px; } }

/* Gjeldende side i hovedmenyen: understreket, ikke farge alene. */
.hovedmeny [aria-current="page"],
.hovedmeny .current-menu-item > a{
  text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:6px;
}

/* Undersider: ingen hero, så første seksjon må klare den faste headeren. */
.side-topp{ padding-top:calc(12px + var(--topp) + clamp(40px, 6vw, 96px)); }
.meny.side-topp{ padding-top:calc(12px + var(--topp) + clamp(40px, 6vw, 96px)); }
.ramme--smal{ max-width:calc(900px + 2 * var(--kant)); }
.side{ padding-bottom:var(--pad); }

/* Mindre plakattitler der ordet er langt eller siden er tekst. */
.plakat-tittel--mellom{ font-size:var(--t-by); line-height:.9; }
.plakat-tittel--side{ font-size:clamp(40px, 6vw, 96px); line-height:.95; overflow-wrap:anywhere; }

.seksjon-topp{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:18px clamp(24px, 3vw, 48px);
}
.seksjon-cta{ margin-top:clamp(32px, 4vw, 56px); }
.tom{ margin-top:clamp(24px, 3vw, 40px); font-size:var(--t-ingress); font-weight:600; max-width:40ch; }

/* Sekundærknapp og tertiær lenke (design-reference). */
.knapp-sek{
  display:inline-flex; align-items:center; gap:10px;
  min-height:48px; padding:10px 18px;
  font-size:var(--t-liten); font-weight:800; line-height:1.5;
  background:var(--papir); color:var(--brun);
  border:2px solid var(--brun); border-radius:var(--r-pill);
  text-decoration:none; cursor:pointer;
}
.knapp-sek:hover{ background:var(--sand); }
.lenke{
  display:inline-block; padding:10px 2px;
  font-size:var(--t-liten); font-weight:800;
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px;
}
.lenke:hover{ text-decoration-thickness:3px; }
.knapperad{ display:flex; flex-wrap:wrap; gap:16px; margin-top:clamp(28px, 3vw, 44px); align-items:center; }

/* ---------- Priser og allergener ------------------------------------ */
.rett-topp{ margin-top:16px; display:flex; align-items:baseline; gap:16px; }
.rett-topp .rett-navn{ margin-top:0; }
.rett-pris{ margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rett-priser{
  margin-top:8px; display:flex; flex-wrap:wrap; gap:4px 18px;
  font-size:var(--t-liten); font-variant-numeric:tabular-nums;
}
.rett-priser b, .kategori-pris b{ font-weight:800; }
.kategori-pris{ display:flex; flex-wrap:wrap; gap:4px 16px; justify-content:flex-end; }
.rett-allergener{ margin-top:6px; font-size:var(--t-liten); line-height:1.5; max-width:46ch; }
.rett-allergener span{ font-weight:700; }
.retter--utdrag{ margin-top:clamp(36px, 4vw, 64px); }
.ekstra-navn{ display:block; }
.ekstra-pris{ display:block; font-weight:600; font-variant-numeric:tabular-nums; }
.ekstra-pris span{ display:block; }
.ekstra-allergener{ display:block; font-weight:500; font-size:14px; }
.allergen-tekst{
  margin-top:clamp(48px, 5vw, 80px);
  display:flex; align-items:flex-start; gap:12px;
  font-weight:700; max-width:60ch;
}
.allergen-tekst .ikon{ flex:none; margin-top:2px; }

/* ---------- Steder ------------------------------------------------- */
.by a{ text-decoration:none; display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:0 .2em; }
.by a .by-pre{ flex-basis:100%; }
.by a .ikon{ width:.42em; height:.42em; stroke-width:2.5; align-self:center; translate:0 .05em; }
.by a:hover{ text-decoration:underline; text-decoration-thickness:4px; text-underline-offset:8px; }
/* Fjerde kort med tider: papir med hel kant. Uten tider: stiplet (H). */
.sted--papir{ background:var(--papir); }
.sted--full{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"info tider";
  background:var(--papir);
}
.sted--full .sted-adr{ font-size:var(--t-ingress); line-height:1.3; }
.sted-lenker{ margin-top:24px; display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; }
.sted--full .tider{ font-size:var(--t-brod); }
.sted--full .tider li{ grid-template-columns:7.5em auto; }
.sesong{
  display:flex; align-items:flex-start; gap:16px;
  margin-bottom:clamp(20px, 2vw, 32px);
  padding:24px 32px;
  background:var(--sand); border:2px solid var(--brun); border-radius:var(--r);
  font-weight:700; max-width:60ch;
}
.sesong .ikon{ flex:none; margin-top:2px; }
/* Sesongstedet utenfor sesong: meldingen står alene, i ingresstørrelse, med knapp
   til helårsstedet. Luft under, siden menyen ikke følger. */
.sesong--stengt{ font-size:var(--t-ingress); line-height:1.35; margin-bottom:clamp(48px, 6vw, 96px); }
.sesong--stengt > .ikon{ width:28px; height:28px; margin-top:.15em; }
.sesong-cta{ margin-top:20px; }
.sesong-cta .ikon{ margin-top:0; }
.sted-topp{ padding-bottom:clamp(48px, 6vw, 96px); }
/* Fisk aldri bak den faste headeren: undersidene beholder bare bunnfisken. */
.side-topp .c1, .side-topp .c3{ display:none; }
.praktisk{ padding:clamp(40px, 5vw, 80px) 0 0; }
.meny--sted{ padding-top:var(--pad); }
.kontakt-felles{ margin-top:24px; font-weight:700; }
.kontakt-felles a{ text-underline-offset:5px; text-decoration-thickness:2px; }

/* ---------- Aktuelt ------------------------------------------------ */
.aktuelt{ padding:var(--pad) 0; }
.aktuelt-grid{
  margin-top:clamp(36px, 4vw, 64px);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(20px, 2.4vw, 40px);
}
.aktuelt-kort{
  position:relative;
  background:var(--papir); border:2px solid var(--brun); border-radius:var(--r);
  padding:14px 14px 24px;
  display:flex; flex-direction:column;
}
.aktuelt-bilde{ width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border-radius:var(--r-lite); }
.aktuelt-tekst{ padding:18px 8px 0; display:grid; gap:10px; }
.aktuelt-dato{ font-size:var(--t-liten); font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.aktuelt-tittel{ font-size:var(--t-rett); font-weight:900; line-height:1.1; letter-spacing:-.02em; }
.aktuelt-tittel a{ text-decoration:none; }
.aktuelt-tittel a::after{ content:""; position:absolute; inset:0; border-radius:var(--r); }
.aktuelt-tittel a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }
.aktuelt-kort:focus-within{ outline:3px solid var(--brun); outline-offset:4px; }
.aktuelt-tittel a:focus-visible{ outline:none; }
.aktuelt-ingress{ font-size:var(--t-liten); line-height:1.5; }
.aktuelt-hovedbilde{
  margin-top:clamp(28px, 3vw, 44px);
  width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; border-radius:var(--r);
}
.single-hawaii_aktuelt .aktuelt-dato{ margin-bottom:16px; }
.video{ margin-top:32px; aspect-ratio:16 / 9; }
.video iframe{ width:100%; height:100%; border:0; border-radius:var(--r-lite); }
.nav-links{ margin-top:48px; display:flex; gap:12px; font-weight:800; }
.nav-links a, .nav-links span{ display:grid; place-items:center; min-width:44px; min-height:44px; border:2px solid var(--brun); border-radius:var(--r-pill); text-decoration:none; padding:0 12px; }
.nav-links .current{ background:var(--brun); color:var(--papir); }

/* ---------- Møtemat-fakta ------------------------------------------ */
.fakta{
  margin:clamp(32px, 4vw, 56px) 0 0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(16px, 2.4vw, 40px);
  border-top:4px solid var(--brun); padding-top:clamp(18px, 2vw, 30px);
}
.fakta dt{ font-size:var(--t-liten); font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.fakta dd{ margin:10px 0 0; font-size:var(--t-ingress); font-weight:800; line-height:1.25; }
.catering-grid--en, .historie-grid--en{ grid-template-columns:minmax(0,1fr); }

/* ---------- Sideinnhold (the_content) ------------------------------ */
.prosa > * + *{ margin-top:1em; }
.prosa h2{ font-size:var(--t-kat); font-weight:900; line-height:1.05; letter-spacing:-.03em; margin-top:1.4em; }
.prosa h3{ font-size:var(--t-rett); font-weight:900; line-height:1.1; letter-spacing:-.02em; margin-top:1.4em; }
.prosa p, .prosa li{ max-width:62ch; }
.prosa ul{ list-style:disc; padding-left:1.2em; }
.prosa ol{ list-style:decimal; padding-left:1.4em; }
.prosa li + li{ margin-top:.35em; }
.prosa a{ text-decoration-thickness:2px; text-underline-offset:5px; }
.prosa img{ height:auto; border-radius:var(--r); }
.prosa strong{ font-weight:800; }
.side .prosa{ margin-top:clamp(28px, 3vw, 44px); }
.ingress.prosa{ max-width:44ch; }
.ingress.prosa > * + *{ margin-top:.6em; }
.historie-tekst .prosa h2, .historie-tekst .prosa h3{ margin-top:0; }
.jobb-prosa{ font-size:var(--t-ingress); font-weight:700; line-height:1.35; }
.jobb-prosa p{ max-width:30ch; }
.jobb .seksjon-cta{ margin-top:16px; }
.historie .seksjon-cta{ margin-top:clamp(28px, 3vw, 44px); }
.stedet .historie-grid{ margin-top:0; }
.stedet .prosa{ margin-top:clamp(20px, 2vw, 32px); }

/* ---------- Bunnen ------------------------------------------------- */
.bunn-liten .bunnmeny ul{ display:flex; flex-wrap:wrap; gap:8px 24px; }
.bunn-personvern{ display:flex; flex-wrap:wrap; gap:8px 24px; }
/* Complianz krever <button>; den ser ut som lenkene ved siden av. */
.bunn-cookie{
  background:none; border:0; padding:0; margin:0;
  font:inherit; color:inherit; cursor:pointer;
  text-decoration:underline; text-underline-offset:5px;
}
.bunn-cookie:hover{ text-decoration-thickness:2px; }
.bunn-cookie:focus-visible{ outline:3px solid var(--brun); outline-offset:4px; border-radius:4px; }
/* Signaturen: brun på sand blek, litt lettere enn resten av linja. */
.bunn-laget{ font-weight:500; }
.bunn-ep{ margin-top:24px; font-weight:700; }
.bunn-ep a{ text-underline-offset:5px; }

/* ---------- 404 ---------------------------------------------------- */
.side-404{ min-height:70vh; overflow:clip; }
.side-404 .ramme{ position:relative; z-index:2; }

/* ---------- Animasjon A — stop-motion ------------------------------ */
/* Fra animasjon-forslag.html, seksjon A. Bakgrunnen er målt i kundens
   produktbilder; hvert bilde løses opp i seksjonsfargen med en maske,
   og «platen» (fotobakgrunnen forlenget) ligger bak. Uten JS eller med
   redusert bevegelse står sluttbildet: bollen + ingrediensene på rad. */
.anim-a{
  --maske:radial-gradient(ellipse 49% 48% at 51% 52%,#000 64%,transparent 100%);
  --maske-rund:radial-gradient(circle closest-side,#000 70%,transparent 100%);
  --plate:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgCAIAAADbtmxLAAACAUlEQVR42u2WS64jNxAEo9ga+8K+3FztNStjFuyWnmbFgWHACxGJgiCxwVDWh11fP/9hY42yCHTRZJJJTvq0T/rLPp1f9mmfzklPM+02QRGhGFsH8T9bH6AP0Afov14POPZ2ekdhQL2LO/5roDp+bG0sYRQD6yJTSirWAQcEDgxEBg6wUOF+ZhPo7y2eShGcZFC1fLGERRAJHtA4sLRYwsVT20B/7e3MdRi1LgIQIo0HDBgydOjgUrRI3enerKGxBXTZw/JGiHXIAYcceiwUb3sulCyf3K+xB+PHrkPrekV4SLTxG0oukWHK3CkLUMVFtZGy8dhqseuPelfMgJcrZsUylzemyCqwK2W161Adez1flBI4pHmiWBfHU81F00XuQVH7KdsEEl+VWzhM5Y1jfcAUjc3t0E2yC7S3cY2WV17yOt6QYHBxPOOiWQOrtlPm9oQVdGmhkBvCJq3tG1BbYtYUcpPosTkjlAVhMCYanxxpndg4dcrUdo3MkjUfa7gJ5BZORE1MXhCdtE4ztePMArJlerXjmtnFyJ5DJjtAJrloYiedzNjJTGa8os44w4wdEnJfIrV7nz1M7wG1fSndmS85k9meydnOeIaOLS3PEfkHRb0J9ET5rjesKzqbjt10fwOqGrtt72aHveRTz977/fe3b76/UH1eYT9AH6AP0G/rF3WLmy8QGoJtAAAAAElFTkSuQmCC);
  position:relative; isolation:isolate; overflow:clip;
  background:var(--foto); color:var(--brun);
  padding:var(--pad) 0;
}
.anim-hode{ position:relative; z-index:1; }
.a-innhold{
  max-width:calc(52rem + 2 * var(--kant)); margin:clamp(24px, 3vw, 40px) auto 0; padding-inline:var(--kant);
  display:flex; flex-direction:column; align-items:center; gap:1.25rem;
}
.a-scene{ position:relative; width:min(100%, 720px); aspect-ratio:3 / 2; }
.a-scene::before{
  content:""; position:absolute; inset:-30%; z-index:-1;
  background:var(--plate) center/125% 125% no-repeat;
  -webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);
}
.a-scene .foto{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover;
  -webkit-mask-image:var(--maske); mask-image:var(--maske);
}
.a-lag{ opacity:0; }
.a-bolle{ opacity:1; }
.bolle-foto{ filter:brightness(1.065); }
.a-navn, .anim-a .rad, .a-knapp{ position:relative; z-index:1; }
.a-navn{
  min-height:1.3em; text-align:center;
  font-size:clamp(1.5rem, 3.4vw, 2.125rem); font-weight:800; line-height:1.2;
}
.rad{
  list-style:none; padding:0; display:flex; flex-wrap:wrap; justify-content:center;
  gap:.75rem 1rem; --d:88px;
}
.rad li{ display:flex; flex-direction:column; align-items:center; gap:.3rem; width:calc(var(--d) + 1.25rem); }
.rund{
  position:relative; width:var(--d); height:var(--d); border-radius:50%; overflow:hidden;
  -webkit-mask-image:var(--maske-rund); mask-image:var(--maske-rund);
}
.rund img{
  position:absolute; max-width:none; width:180%; height:auto;
  left:50%; top:50%; transform:translate(-51%, -54%);
}
.navn{ font-weight:700; font-size:.9375rem; line-height:1.2; text-align:center; }
.a-rad .rund{ transition:opacity .2s; }
.a-rad .er-na .navn{ text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:.25em; }
/* Bare bildet dempes — teksten holder full kontrast. */
html[data-anim] .a-rad .rund{ opacity:.5; }
html[data-anim] .a-rad .er-na .rund, html[data-anim] .a-rad.ferdig .rund{ opacity:1; }
.a-knapp{ display:none; }
html[data-anim] .a-knapp{ display:inline-flex; }
.anim-a .ingress{ max-width:40ch; }

/* ---------- Brytpunkter for del 2 ---------------------------------- */
@media (max-width: 1180px){
  .sted--full{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"info tider"; }
}
@media (max-width: 900px){
  .aktuelt-grid{ grid-template-columns:minmax(0,1fr); }
  .fakta{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .rett-topp{ margin-top:2px; flex-wrap:wrap; gap:2px 12px; }
  .rett-bilde{ grid-row:1 / span 5; }
  .rett > :not(.rett-bilde){ grid-column:2; }
  .rett-pris{ margin-left:0; }
  .sted--full{ grid-template-columns:minmax(0,1fr); grid-template-areas:"info" "tider"; }
  .fakta{ grid-template-columns:minmax(0,1fr); }
  .sesong{ padding:16px; }
  .rad{ --d:60px; gap:.6rem .5rem; }
  .rad li{ width:calc(var(--d) + 1rem); }
  .navn{ font-size:.875rem; }
  .ekstra-allergener{ font-size:13px; }
}
@media (prefers-reduced-motion: no-preference){
  .knapp-sek{ transition:background-color .18s ease; }
}
@media (prefers-reduced-motion: reduce){
  .a-rad .rund{ transition:none; }
}