/* ============================================================
   DESKTOP-LAGET — samme design, bred skærm
   ------------------------------------------------------------
   Handoffet fra Claude Design er tegnet til en telefon, og på
   brede skærme viste det telefonen som attrap i et mørkt rum —
   det er et artboard, ikke en hjemmeside. Filen her er
   TILPASNINGEN til desktop: samme farver, samme skrifter, samme
   sektioner i samme rækkefølge, samme tekster — kun lagt ud på
   den plads, en stor skærm har.

   ALT ligger bag @media (min-width: 821px). Det er designets
   egen grænse (havnegrillen.css bruger 820px til at folde
   attrappen sammen), så telefon-udgaven er urørt byte for byte —
   1:1-løftet gælder stadig dér.

   To greb bærer det hele:

   1) SPALTEN. --g er en gutter, der vokser, til indholdet står
      i en centreret spalte på 700 px — uden én ny wrapper i
      HTML'en. Det, der skal være bredere (ugens retter, kortene,
      nyhederne), bryder ud med width + translate-tricket:
      margin-left:50% + translate:-50% centrerer barnet på
      SIDENS midte, uanset forælderens gutter.

   2) translate FREMFOR transform. Pillen og kurven gemmer sig
      med transform i grundlaget (.tuck/.on). Centrerede vi dem
      med transform, ville gemmeriet overskrive centreringen —
      translate er sin egen egenskab og overlever.

   Kroppen bærer .hav på de otte røde sider og .kort på
   menukortet (der kører sit eget v3-tema): .phead er to
   FORSKELLIGE ting i de to temaer, og et fælles træk på den
   ville hive menukortets havblok op under en uigennemsigtig
   topbjælke.
   ============================================================ */
@media (min-width: 821px){

/* ---- attrappen væk: siden ER skærmen ---------------------- */
/* place-items:normal er ikke pynt: nye Chromium lader grundlagets
   place-items:center virke OGSÅ på en block-body, og så blev
   .device midtstillet i fit-content-bredde — 1100 px med luft til
   begge sider. Målt, ikke gættet. width:100% er selen til livremmen. */
body{display:block;min-height:auto;padding:0;place-items:normal;background:var(--cream,var(--sand))}
.device{width:100%;height:auto;min-height:100svh;border-radius:0;padding:0;background:transparent;box-shadow:none}
.screen,.sheet,.cart{border-radius:0}
.screen{--g:max(var(--pad),calc((100% - 700px)/2))}

/* ---- DOKUMENTET RULLER OGSAA PAA EN COMPUTER (26/9) -------
   Her rullede siden inde i .screen#sc — telefon-artboardets egen
   boks, der blev staaende, da attrappen forsvandt (se noten i
   havnegrillen.css ved "RULLEROD'EN ER DOKUMENTET"). Mikkels ord:
   *"scrollingen ude i venstre paa menukort skal fixes"* og *"hvad
   med naar man trykker tilbage … skal man saa bare ryge til
   toppen"*. Begge dele er boksens skyld:

   · browserens tilbage-knap gendanner DOKUMENTETS rulning, aldrig
     en boks' — man landede altid i toppen
   · rullebjaelken, Mellemrum/Page Down og Cmd+pil hoerer til
     dokumentet; i en boks virker de kun, naar den har fokus
   · menukortets venstre liste klaebede inde i boksen

   Telefonen har rullet i dokumentet siden 5/9, og havnegrillen.js
   SPOERGER, hvem der ruller (den beregnede overflow), saa al
   rullelogik foelger med uden en linje JavaScript. Pillen og
   skuffen laa absolut i .device og skal foelge skaermen nu —
   samme to linjer som telefonens. */
.screen{height:auto;overflow:visible;overscroll-behavior:auto}
.bestil{position:fixed}
.sheet{position:fixed}

/* ---- topbjælken ------------------------------------------- */
.topbar{padding:16px max(28px,calc((100% - 1140px)/2)) 12px}
.topbar.stuck,.topbar.solid{padding-top:14px}
/* ⚠️ OG NAVNET ER 40 HØJT, NÅR BJÆLKEN KLÆBER — PÅ COMPUTEREN OGSÅ (11/10).
   Forsidens bjælke var 76 høj og undersidernes 66: ordmærket stod i 50,
   pilen i 40. Mikkels ord: navnet "skifter ift … placering". Nu er begge
   40, og forsiden betaler de 10 px med en margen, så siden ikke hopper,
   når bjælken sætter sig fast (samme greb som telefonen). */
.topbar.stuck .ordmaerke{min-height:40px}
.topbar.stuck:has(.ordmaerke:not(.hjem)){margin-bottom:10px}
.topbar .brandmark{width:60px}

/* ---- grundspalten ----------------------------------------- */
section{padding:76px var(--g) 60px}
/* ⚠️ 72 PX VAR TI FOR LIDT (10/9) — se noten ved footer i
   havnegrillen.css. Pillen fylder --pille-bund + --pille-h, og
   luften skal rumme den, ellers dækker den footerens sidste
   linje på en skærm, der ikke kan rulle længere. */
footer{padding:64px var(--g) var(--pille-plads)}
footer h3{font-size:40px}
h2{font-size:clamp(38px,3.4vw,48px)}
.sub{font-size:16px}

/* ---- heroen: et rigtigt desktop-tæppe --------------------- */
.hav .hero{margin-top:-90px;padding:150px var(--g) 90px;min-height:84svh;display:grid;align-content:center}
/* ⚠️ FILMENS HERO FYLDER HELE SKÆRMEN PÅ COMPUTEREN OGSÅ (12/9).
   Kundens ord: "på computer skal det også være fullscreen — det er den
   ikke lige nu". Målt på 1440×900: heroen var 756 px høj (84svh), og
   næste afsnit stod i bunden under filmen. Heroen trækkes 90 px op
   under en bjælke på 78, så dens top står på −12 — derfor de 12.
   Kun heroen MED film: undersidernes hoveder er urørte. */
.hav .hero.film{min-height:calc(100svh + 12px)}
.hav .hero-badge{width:140px}
.hav .hero-in{max-width:860px;margin-left:auto;margin-right:auto}
.hav .hero h1{font-size:clamp(54px,5vw,78px);max-width:15ch}
.hav .hero-cta{grid-template-columns:repeat(2,minmax(230px,280px));justify-content:center}

/* ---- undersidernes hoved ---------------------------------- */
.hav .phead,.hav .thead{margin-top:-90px;padding:160px var(--g) 8px}
.hav .phead h1,.hav .thead h1{font-size:clamp(46px,4.4vw,64px)}
.hav .phead .sub,.hav .thead .sub{max-width:44ch}

/* ---- det, der bryder ud af spalten ------------------------ */
/* Menukortets kategorikort bryder også ud af spalten, men de gør
   det sammen med deres hop-bånd — se .mk-sortiment i
   menukort.css. Står de to hver for sig, klæber båndet midt hen
   over kortene. */
.week,.rows,.newslist,.vals,.hav .facts{width:min(100vw - 64px,1060px);margin-left:50%;translate:-50% 0}
/* ⚠️ UGESTRIBEN ER EN RULLEBEHOLDER og klipper kortenes skygge — også
   i siderne. 16 px luft inde i den, og striben er 32 px bredere, så
   kortene står, hvor de stod (12/9). */
.week{width:min(100vw - 32px,1092px);padding-left:16px;padding-right:16px;scroll-padding-inline:16px}
.rows{grid-template-columns:repeat(3,1fr)}
.rows .row-card{align-items:flex-start}
/* «HVAD SKAL VI HJÆLPE MED?» SOM FIGMAS TJENESTER (10/10): overskriften
   til venstre og linjen til højre over nettet, i nettets bredde (A04,
   86:64/86:65; linjen 12 px under overskriftens top). Kortene er fliser
   (Services B, 72:303): flisen og linsen øverst, titel og linje i HELE
   kernens bredde under dem, Figmas H3 (24/30, 105:955). MÅLT: som række
   ved siden af flisen havde teksten 215 px, og "Smørrebrød ud af huset"
   brækkede. ⚠️ align-content:start: kortene i en række er lige høje, og
   ellers stod flisen 8 px højere i kortet med to linjer end i naboen. */
#alt>.alt-hoved{width:min(100vw - 64px,1060px);margin-left:50%;translate:-50% 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,38ch);column-gap:48px;align-items:start}
#alt>.alt-hoved .sub{margin-top:21px}
#alt .rows{gap:16px;margin-top:32px}
#alt .kerne{display:grid;grid-template-columns:auto 1fr auto;align-items:center;align-content:start;gap:18px 16px;height:100%;padding:16px 10px 20px 18px}
#alt .row-card .ic+div{grid-column:1/-1;grid-row:2;padding-right:8px}
#alt .row-card h3{font-size:24px;line-height:30px}
#alt .row-card .ic{width:40px;height:40px}
#alt .row-card .ic svg{width:20px;height:20px}
#alt .linse{grid-column:3;grid-row:1}
/* Slørets faste creme følger overskriften, der er lavere her, og fotoet
   viser båndet med himlen og skiltet (molen er et højt billede). */
#alt .alt-bund img{object-position:50% 22%}
/* Bunden toner til creme igen (20/10) — se noten ved #alt .alt-slor i
   havnegrillen.css: ellers stod to fotos kant i kant mod «Find os». */
#alt .alt-slor{background:linear-gradient(180deg,var(--cream2) 0,var(--cream2) 150px,rgba(247,237,225,.45) 330px,rgba(247,237,225,.45) calc(100% - 140px),var(--cream2) 100%)}
.newslist{grid-template-columns:1fr 1fr}
.vals{grid-template-columns:repeat(3,1fr)}
.hav .facts{width:min(100vw - 64px,980px);grid-template-columns:repeat(3,1fr)}
.hav .facts .fact{flex-direction:column;gap:12px;padding:18px}
/* ⚠️ SELSKABETS TRE KORT STOD UDE VED SKÆRMENS KANT (14/9). Kundens ord:
   "noget står ude i siden". De bærer .rev, og `.selskab>.rev` nedenfor
   sætter margin-left:auto — men translate:-50% fra linjen ovenover blev
   hængende. Målt på 1440: kortene stod fra x = 20, galleriet over dem fra
   370. Uden translate står de i spalten, i galleriets bredde. */
.hav .selskab>.facts{translate:none}
/* ⚠️ OG EN UGE MED FÅ DAGE STOD TIL VENSTRE FOR SIN OVERSKRIFT (14/9).
   Striben er 1092 px bred, så en hel uge kan rulle — men står der kun
   "i dag" og "resten lægges op", begyndte de to kort 180 px til venstre
   for overskriften og efterlod resten tomt. Op til tre kort passer i
   spalten; så står striben i den som alt andet. */
.week:not(:has(>:nth-child(4))){width:auto;margin-left:-16px;margin-right:-16px;translate:none}

/* ---- det, der skal blive smalt og midtstillet ------------- */
.panel{max-width:640px;margin-left:auto;margin-right:auto}
/* Leveringens nyhedsfelt (7/10) står over Bestil mads formular og har dens bredde — ellers stak det 30 px ud på hver side. */
.lev-nyhed{max-width:640px;margin-left:auto;margin-right:auto}
.today,.menucard,.tapasec,.talk,.hours{max-width:640px;margin-left:auto;margin-right:auto}
/* ⚠️ BUNDENS TO KORT STÅR SIDE OM SIDE (9/9) — og `.hours` inde i
   dem må IKKE arve linjen ovenover: en `max-width` på 640 px inde
   i et kort på 344 midtstiller rækkerne i deres eget kort og
   efterlader luft i begge sider. Målt, ikke gættet. */
.findgrid{width:min(100vw - 64px,1060px);margin-left:50%;translate:-50% 0;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.findkort{padding:26px 24px}
.findkort .hours{max-width:none;margin-left:0;margin-right:0}
/* Fotoet skal have luft om sig; de 6 px fra før klæbede afsnittet
   til naboen, og det gør et foto ikke. Samme luft som .selskab. */
#find{padding-top:88px;padding-bottom:92px}
.evlist{max-width:680px;margin-left:auto;margin-right:auto}
.gal{max-width:700px;margin-left:auto;margin-right:auto}
.callrow{max-width:520px;margin-left:auto;margin-right:auto}
.music,.teaser,.evhero{width:min(100% - 56px,700px);margin-left:auto;margin-right:auto}
.evhero .foto-felt,.evhero .foto-fyldt,.evhero .foto-skift,.evhero image-slot{aspect-ratio:16 / 10}
.screen>.promo{width:min(100% - 56px,700px);margin-left:auto!important;margin-right:auto!important}
/* ⚠️ SMILEY-KORTET GIK FRA KANT TIL KANT (14/9). Kundens ord: "fødevare-
   styrelses tingen er voldsom langt". Målt: 1400 px på en skærm på 1440,
   mens Facebook-kortet lige over står i spaltens 700. Samme bredde som
   det nu — og !important af samme grund: margenen står inline, så
   telefonens udgave ikke skal have en regel mere. */
.smiley-kort{width:min(100% - 56px,700px);margin-left:auto!important;margin-right:auto!important}
.social{justify-content:center;padding:20px var(--g) 4px}
.fcols,.legal{max-width:700px}

/* ---- de mørke blokke får samme gutter --------------------- */
.about,.selskab{padding:88px var(--g) 92px}
.nyheder{padding:72px var(--g) 76px}
.about .rev,.selskab>.rev{max-width:700px;margin-left:auto;margin-right:auto}

/* ---- pillen: midt for, ikke fra kant til kant ------------- */
.bestil{left:50%;right:auto;translate:-50% 0;min-width:360px;justify-content:space-between;bottom:28px}
/* Kurvbjælken står samme sted som pillen (26/9). */
.kurvbar{left:50%;right:auto;translate:-50% 0;min-width:360px;bottom:28px}

/* ---- skuffen bliver et vindue midt på skærmen ------------- */
.sheet{justify-content:center;padding:24px}
.sheet-in{width:min(460px,92vw);margin-left:auto;margin-right:auto;border-radius:30px}

/* ---- menukortet (v3-temaet) ------------------------------- */
.kort .mtop{padding:12px var(--g) 10px}
.kort .msec{padding:34px var(--g) 0;scroll-margin-top:124px}
.kort .phead{padding:40px var(--g) 44px}
.kort .phead h1{font-size:52px}
.kort .cartbar{left:50%;right:auto;translate:-50% 0;min-width:440px;max-width:600px}
.cart{justify-content:center;padding:24px}
.cart-in{width:min(540px,92vw);margin-left:auto;margin-right:auto;border-radius:30px;max-height:82svh}
.kort footer{padding-top:0}

}