/* ⚠️ --red-tekst VAR ALDRIG DEFINERET HER  (5/9). Tre regler
   BRUGTE den — tapasfadets pris (linje ~1166), tidssvarets
   fejlfarve (~1188) og "kun 3 tilbage" — og en `var()` uden
   værdi og uden reserve falder tilbage til det arvede. MÅLT:
   farven kom ud som blækket #241a17, altså var fejlbeskeden ikke
   rød, og ingen kunne se det, fordi teksten stod der pænt.

   Det er nøjagtig samme ar som --overskrift 24/8, hvor en
   font-shorthand med en uløst variabel gjorde HELE reglen
   ugyldig. Navnet er husets, og værdien er designets egen mørke
   røde — den samme, css/style.css bruger til lille rød tekst. */
/* ============================================================
   SKALAEN  (5. september 2026)
   ------------------------------------------------------------
   Kundens ord: siden er "okay men generisk, ikke high end". MÅLT
   med de rigtige skrifter: 38 forskellige font-size i det her
   ark, 18 alene på forsiden, 45 forskellige box-shadow. Når intet
   gentager sig, læser øjet det som "ingen har bestemt noget" — det
   er den fysiske følelse af generisk.

   Det, der er gjort her, er det, der IKKE kan ses: brøkdelene
   (10,5 · 11,5 · 12,5 · 12,8 · 13,3 · 13,5 · 14,5 · 15,5 · 16,5)
   er snappet til nærmeste hele — højst en halv px hver, målt: h1
   står på samme px før og efter. Priserne har én stor (20) og én
   lille (15) i stedet for fem. De flade kort-skygger og
   hårstregerne er tre tokens (--skygge-kort, --skygge-let,
   --kant-inde) i stedet for elleve næsten-ens værdier.

   ⚠️ LOGOET ER IKKE RØRT. .crest .ct (18,5) og .crest .est (14,5)
   er ringteksten i mærket — et logo følger ikke en typografisk
   skala, det er tegnet.

   ⚠️ OVERSKRIFTSHIERARKIET ER HELLER IKKE RØRT. 22/26/29 på h3,
   32/35/38 på h2, 44/47/48 på h1 er designets egne trin, og at
   flytte dem er en designbeslutning — ikke oprydning. Det står
   som et åbent punkt sammen med eyebrows, emoji og serif-valget.

   ⚠️ OG GLAS-KNAPPERNES INSET-STAKKE ER LADT VÆRE. .g, .g.dark,
   .g.solid, .g.ink har hver sin stak med vilje — lys glas, mørkt
   glas, rødt glas. At samle dem er at lave knapperne om.
   ============================================================ */

/* ============================================================
   SKRIFTERNE ER VORES EGNE  (5. september 2026)
   ------------------------------------------------------------
   Designsiderne hentede Instrument Sans, Instrument Serif og
   Bebas Neue fra fonts.googleapis.com — de gamle sider (bestil/,
   bord/, ved-bordet/) har haft dem lokalt i fonts/ siden 29/8.

   ⚠️ OG OVERSKRIFTSSKRIFTEN ER FRAUNCES NU (6/9), ikke Instrument
   Serif. Rapporten 5/9 sagde, at en serif med mere karakter var en
   DESIGNBESLUTNING og ikke en rettelse — den blev derfor vist som
   fire skud af heroen (nuværende, Fraunces, Young Serif, Playfair
   Display), og Mikkel valgte Fraunces. Det er ikonsættets lære
   samme aften, gjort rigtigt: et udseende skal have et ja, FØR det
   udgives.

   ⚠️ DEN ER VARIABEL (wght 100-900), og vægten SKAL stå som et
   spænd. Med et fast `font-weight:400` i @font-face ville
   browseren syntetisere en fed til `h4`-vægte i stedet for at
   bruge aksen.

   ⚠️ DET FØRSTE INDTRYK VAR DET GENERISKE. Google-arket er
   render-blokerende fra et fremmed domæne, og med "swap" tegner
   browseren Georgia og systemets sans, til det lander. På havnen
   med dårlig dækning er det et sekund eller to — og præcis dét
   sekund er det første, gæsten ser. Kunden kaldte siden generisk;
   en del af svaret var, at den bogstaveligt talt VAR det i det
   øjeblik.

   ⚠️ Bebas har font-display:block, ikke swap. Intro-animationen
   MÅLER bogstaverne for at fylde vand i dem; med swap ville den
   måle en anden skrift, og vandet ville stå skævt i ordmærket
   (samme note i css/style.css).

   ⚠️ Den kursive serif er en RIGTIG kursiv (OFL, se
   fonts/LICENS.md). .about .sign og historien.css bruger kursiv;
   uden filen syntetiserer browseren en — skrå, ikke kursiv.

   Én kilde til skrifterne, og den er vores egen. */
/* ============================================================
   HOST GROTESK — HUSETS SKRIFT FRA 27/9
   ------------------------------------------------------------
   Mikkels valg: LESREG's skrift (Liquid Atelier 3.2) i HELE huset —
   de her sider, bestil/, bord/, ved-bordet/, min-bestilling/ og
   admin (css/style.css) — så "ÉT HUS, ÉN SKRIFT" (29/8) holder.
   Fraunces og Instrument Sans er afløst; Bebas bliver, fordi den er
   kransens logo og de trykte menukorts priser.

   ⚠️ FIRE FASTE VÆGTE, IKKE ET SPÆND. Fraunces var variabel og
   skulle stå som 100 900; Host Grotesk kommer som statiske filer,
   så hver vægt har sin egen @font-face. 400 brødtekst, 500
   overskrifter (LESREG: Medium, aldrig fed), 600 knapper og fede
   ord — kundens valg fra 30/8 — og 700 til admin.

   ⚠️ SPORINGEN FØLGER STØRRELSEN. En grotesk skal strammes, jo
   større den står; tallene er LESREG-tokens (h1 -.035em, h2
   -.025em, h3 -.015em). h4 er husets små korttitler og beholder
   -.008em. Se fonts/LICENS.md for filerne og målingerne. */
@font-face{font-family:"Host Grotesk";src:url("fonts/host-grotesk-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url("fonts/host-grotesk-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url("fonts/host-grotesk-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url("fonts/host-grotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url("fonts/host-grotesk-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url("fonts/host-grotesk-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
/* ⚠️ "&" LÅNES FRA INSTRUMENT SANS (27/9). Host Grotesks & er tegnet
   som en løkke, der stak ud på knapperne ("Selskab & catering") —
   Mikkels ord: "det der & skal fixes". Kun tegnet U+0026 lånes, fra
   husets tidligere skrift, som ligger i fonts/ i forvejen.
   ⚠️ ÉN FLADE PR. VÆGT, IKKE ET SPÆND. Chrome vælger fladen på vægten,
   FØR den ser på unicode-range; en flade med 400 700 vandt over den
   faste 600 og tog HELE teksten med sig (målt: alt stod i serif). */
@font-face{font-family:"Host Grotesk";src:url("fonts/instrument-sans.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0026}
@font-face{font-family:"Host Grotesk";src:url("fonts/instrument-sans.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0026}
@font-face{font-family:"Host Grotesk";src:url("fonts/instrument-sans.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0026}
@font-face{font-family:"Host Grotesk";src:url("fonts/instrument-sans.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0026}
@font-face{font-family:"Bebas Neue";src:url("fonts/bebas-neue.woff2") format("woff2");font-weight:400;font-display:block}

:root{--skygge-kort:0 18px 46px rgba(36,26,23,.1);--skygge-let:0 12px 30px rgba(36,26,23,.09);--kant-inde:inset 0 0 0 1px rgba(36,26,23,.07);--red:#d62a3a;--red-d:#b41f2e;--red-tekst:#b41f2e;--ink:#241a17;--ink2:#5c4a45;--muted:#6f5b55;--cream:#fdf7ef;--cream2:#f7ede1;--paper:#fff;--pad:20px;--spring:cubic-bezier(.2,.9,.24,1);--top-luft:58px;--pille-h:56px;--pille-bund:24px;--pille-plads:calc(var(--pille-bund) + var(--pille-h) + 16px)}

/* ============================================================
   DEN HVIDE BJÆLKE ØVERST PÅ TELEFONEN (5/9)
   ============================================================
   Kundens ord med et skud fra hans iPhone: "det ternede skal gå
   hele vejen op og ikke er sådan en white bar".

   To ting lagde creme dér, hvor ternet skulle stå:

   1) SIKKERHEDSOMRÅDET. Uden viewport-fit=cover lægger Safari
      hele sidens indhold NEDEN UNDER statuslinjen og fylder
      stribens plads med sidens baggrundsfarve — og body er
      var(--cream). Det er den brede hvide bjælke, han så. Rettet
      i <meta name="viewport"> paa de ti designsider.

   2) OG SÅ FIRE PIXELS TIL, MÅLT PÅ EN iPHONE 13:
      .topbar er 120 px høj (58 luft + 50 mærke + 12), mens
      .hero trak sig 116 px op. Fire px creme stod tilbage som en
      hårfin streg over ternet — også paa en computer.

   ⚠️ TALLENE HÆNGER SAMMEN, OG DERFOR ER DE VARIABLER.
   --top-luft er bjælkens luft foroven, og den er det ENE tal.
   Bjælkens højde er den plus 62 (mærket og luften forneden), og
   de tre sidehoveder trækker sig --top-luft + 70 op — bjælkens
   højde plus 8 px slæk, så en afrunding aldrig kan lade creme
   titte frem igen. Skrev vi tallene hvert sit sted, ville en
   højere bjælke give stregen tilbage uden at nogen kunne se
   hvorfor. Nu følger heroen bjælken af sig selv.

   ⚠️ DE 70 REGNES PÅ HVERT SIDEHOVED, IKKE I EN FÆLLES VARIABEL.
   En custom property arver sin FÆRDIGT udregnede værdi. Stod der
   en --hoved-op paa :root, ville topstriben nedenfor ikke kunne
   sætte optrækket ned igen ved at rette --top-luft — den fælles
   variabel ville stadig bære :root's tal.

   ⚠️ OG INDHOLDET FLYTTER SIG IKKE. Hvert sidehoved lægger det
   samme tal til sin padding, som det trækker fra sin margin, så
   overskriften står nøjagtig hvor den stod: -116+132 = 16 før,
   -128+144 = 16 nu. Det er hele grunden til, at rettelsen kan
   laves uden at røre designet.

   ⚠️ max() OG IKKE env() ALENE. En iPhone 13 har 47 px inset,
   en med dynamisk ø har 59. Designets 58 px passer den første og
   er en px for lidt til den anden. max(58, inset+10) lader de
   telefoner, hvor det VIRKER i dag, staa uroert — og giver kun
   den, hvor mærket ville ligge under øen, de px den mangler.
   ============================================================ */
@supports (padding: env(safe-area-inset-top)) {
  :root { --top-luft: max(58px, calc(env(safe-area-inset-top, 0px) + 10px)); }
}
/* ⚠️ --muted ER MØRKERE END DESIGNETS EGEN (5/9), og det er ikke smag.
   MÅLT på ti gæstesider: designets #8b7871 giver 3,93:1 på creme,
   3,61:1 på cream2 og 4,18:1 på hvid — ALLE tre under kravet på
   4,5:1. Det rammer .fine, .hint, .tcap, menukortets datolinje og
   kalenderens manchet, altså den lille skrift, der er sværest at
   læse i forvejen.
   Tallet er IKKE fundet på: #6f5b55 er den samme dæmpede, som
   css/style.css har brugt siden 29/8 (5,97:1). De to ark bærer hver
   sin halvdel af gæstesiderne, og gæsten går imellem dem i ét klik —
   to forskellige dæmpede farver ville være to udgaver af den samme
   regel. Prøven står i tests/gennemgang.spec.js. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:#1a1210;font-family:"Host Grotesk",system-ui,sans-serif;color:var(--ink);display:grid;place-items:center;min-height:100vh;padding:28px 0}
/* ⚠️ text-wrap:balance PÅ ALLE OVERSKRIFTER  (27/9, Lesreg-forfiningen).
   Heroens h1 havde den allerede (se .hero h1). MÅLT på de tolv
   gæstesider i fem bredder (320-1920): 48 af 620 overskrifter får
   andre linjeskift, og hver eneste af dem mister et enligt ord eller
   holder et navn samlet — "Live musik med Jens / Rasmussen" blev
   "Live musik med / Jens Rasmussen", "Smørrebrød ud af / huset" blev
   "Smørrebrød / ud af huset". INGEN fik flere linjer, så ingen højde
   flytter sig. En browser uden balance brækker, som den gjorde før. */
h1,h2,h3,h4{font-family:"Host Grotesk",system-ui,sans-serif;font-weight:500;margin:0;letter-spacing:-.008em;line-height:1.04;text-wrap:balance}
h1{letter-spacing:-.035em}h2{letter-spacing:-.025em}h3{letter-spacing:-.015em}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
img{display:block;max-width:100%}
a{color:var(--red);text-decoration:none}a:hover{color:var(--ink)}
.gingham{background-color:#fff;background-image:repeating-linear-gradient(90deg,rgba(214,42,58,.55) 0 21px,transparent 21px 42px),repeating-linear-gradient(0deg,rgba(214,42,58,.55) 0 21px,transparent 21px 42px)}
.device{position:relative;width:428px;height:892px;border-radius:54px;background:#120b0a;padding:11px;box-shadow:0 0 0 2px #33231f,0 40px 90px rgba(0,0,0,.6);flex:none}
.screen{position:relative;width:100%;height:100%;border-radius:44px;overflow-y:auto;overflow-x:hidden;background:var(--cream);scroll-behavior:smooth;overscroll-behavior:contain}
.screen::-webkit-scrollbar{width:0}
.island{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:118px;height:33px;border-radius:20px;background:#120b0a;z-index:70;pointer-events:none}
.statusbar{position:absolute;top:0;left:0;right:0;height:56px;z-index:66;display:flex;align-items:center;justify-content:space-between;padding:20px 32px 0;font-size:14px;font-weight:600;color:#fff;pointer-events:none;mix-blend-mode:difference}
.sbi{display:flex;align-items:center;gap:6px}.sbi svg{height:11px;width:auto}
/* liquid glass ios26 */
/* ⚠️ GLASSET FORSVANDT PAA HVIDT  (30/8). Kundens ord: "lav
   knapperne liquid glass, men saa de ikke forsvinder i det hvide
   — man kan ik se dem."

   MAALT: fladen var hvid paa 50 % med en ring paa 7 %. Paa creme
   og paa et lyst foto var baade flade og ring inden for et par
   procent af baggrunden, og knappen var kun til at se paa sin
   skygge. Glasset bliver — det er designets — men ringen er
   fjorten procent nu, og skriften er fed. En knap skal kunne ses
   FOER man roerer den. */
.g{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(26px) saturate(200%);backdrop-filter:blur(26px) saturate(200%);box-shadow:inset 0 1px .5px rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.35),inset 0 0 0 1px rgba(36,26,23,.14),0 8px 22px rgba(36,26,23,.2);height:50px;padding:0 22px;cursor:pointer;overflow:hidden;transition:transform .32s var(--spring),background .3s ease,box-shadow .3s ease;will-change:transform}
.g::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(150deg,rgba(255,255,255,.55),transparent 42%);pointer-events:none}
.g:active{transform:scale(.955)}
.g.dark{color:#fff;background:rgba(255,255,255,.18);box-shadow:inset 0 1px .5px rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.34),0 10px 26px rgba(0,0,0,.35)}
.g.solid{color:#fff;background:linear-gradient(180deg,#e2394a,#c11f2f);box-shadow:inset 0 1px .5px rgba(255,255,255,.5),inset 0 0 0 .5px rgba(120,10,18,.4),0 10px 26px rgba(214,42,58,.4)}
.g.ink{color:#fff;background:linear-gradient(180deg,#3a2924,#241a17);box-shadow:inset 0 1px .5px rgba(255,255,255,.28),0 10px 26px rgba(36,26,23,.34)}
/* ⚠️ DE RØDE OG DE MØRKE KNAPPER ER DÆKKENDE — INTET GLAS BAG DEM (28/9).
   .g giver alle knapper backdrop-filter; på .solid og .ink ligger der en
   helt dækkende flade ovenpå, så sløringen kan ikke ses, men den regnes
   ud, hver gang noget bag knappen flytter sig. MÅLT på alle gæstesider,
   telefon og computer: ingen .solid eller .ink har en gennemsigtig
   baggrund. Får en af dem det en dag, skal glasset med igen dér. */
.g.solid,.g.ink{-webkit-backdrop-filter:none;backdrop-filter:none}
.g.sm{height:38px;padding:0 16px;font-size:13px}
.g.blk{width:100%}
.icn{width:40px;height:40px;padding:0;border-radius:999px;flex:none}.icn svg{width:18px;height:18px}
/* ⚠️ GLANSEN FLYTTES MED transform, IKKE left (28/9). Den gik med `left`,
   og så skulle siden lægges om og tegnes om ved HVERT billede, så længe den
   var åben — også mens striben "hvilede" de sidste 80 % af runden. MÅLT på
   tapassiden: 240 omberegninger på to sekunder (to striber × 60) og hele
   siden tegnet om 10-15 gange i sekundet, uden at nogen rørte den. Med
   transform klarer skærmkortet det alene. Samme vej: -60 % → 130 % af
   knappen er -150 % → 325 % af striben, der er 40 % bred. */
.sheen{position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-150%) skewX(-18deg);animation:sheen 5.2s cubic-bezier(.5,0,.3,1) 1.6s infinite}
@keyframes sheen{0%{transform:translateX(-150%) skewX(-18deg)}20%,100%{transform:translateX(325%) skewX(-18deg)}}
/* crest / logo — den RUNDE krans fra intro-animationen (300-net).
   Teksten er introens egne tal; bredderne er sat, saa maerket
   fylder samme HOEJDE som den gamle oval (bredde x 0,7), ellers
   vokser topbjaelken — og menukortets hop-baand klaeber paa dens
   maalte hoejde. */
.crest{width:100%;height:auto;display:block}
.crest .ct{font-family:"Bebas Neue",sans-serif;font-size:18.5px;letter-spacing:.19em;fill:var(--red)}
/* EST. 2025 er logoets egen blaa (#2a5f8f) - se css/style.css */
.crest .est{font-family:"Bebas Neue",sans-serif;font-size:14.5px;letter-spacing:.19em;fill:#2a5f8f}
.crest-wrap{width:104px;flex:none}
/* topbar */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;padding:var(--top-luft) 14px 12px;transition:background .45s ease,box-shadow .45s ease,opacity .9s ease}
/* ⚠️ PADDING BLEV ANIMERET, OG DET KOSTEDE EN OMBRYDNING PR.
   BILLEDE  (31/8, kundens ønske om at siden skal føles 120 fps).

   .topbar skifter til .stuck under rulning, og overgangen
   animerede `padding` fra 58 px til 52 px over 450 ms. Seks
   pixels — men browseren skal lave layout om for hvert eneste
   billede i de 450 ms, netop mens fingeren ruller. Baggrund,
   slør og skygge toner stadig ind; de kører på kompositoren og
   koster ingen ombrydning.

   ⚠️ SLUTTILSTANDEN ER DEN SAMME. De 6 px skifter nu med det
   samme i stedet for over et halvt sekund — og et spring på 6 px
   midt i en 450 ms indtoning kan ikke ses. Det, der KAN ses, er
   en side, der hakker, mens man ruller. */
.topbar .brandmark{width:50px;flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}

/* ============================================================
   ORDMÆRKET I TOPBJÆLKEN  (8/9)
   ------------------------------------------------------------
   Kundens ord: *"logoet heroppe er også forkert — måske skriv
   Mosede Havnecafe i stedet, med header, skift det pænere."*

   ⚠️ 21 PX ER EN STØRRELSE, DER ALLEREDE STÅR I ARKET. Skralden
   fra 5/9 er et loft på 30 font-size-værdier, og et ordmærke med
   sin egen 23,5 px ville være den 31.

   ⚠️ OG SPERRINGEN ER .02em, IKKE BEBAS' .15em. En serif med den
   luft falder fra hinanden i enkeltbogstaver — samme fælde som
   `.top-navn` i admin (24/8) og `.logo` på de gamle sider (29/8).

   ⚠️ HVID PÅ FOTOET, BLÆK NÅR BJÆLKEN KLÆBER. Toppen ligger over
   heroens tern, til gæsten ruller; så bliver fladen creme, og
   hvid tekst ville forsvinde i den. Skyggen er kun til ternet, af
   samme grund som kransens var det.

   ⚠️ OG DEN MÅ IKKE OMBRYDE. "Mosede Havnecafe" på to linjer
   gør bjælken højere, og bjælkens højde er et TAL, andre regler
   regner med (--top-luft + 70 på tre sidehoveder, 5/9). Målt på
   en iPhone 13: 190 px tekst i 276 px plads. */
.topbar .ordmaerke{
  flex:none;
  /* ⚠️ FAMILIEN SKREVET UD, IKKE var(--display) — FANGET FØR
     UDGIVELSEN, TREDJE GANG I DAG. `--display` findes i
     css/style.css og IKKE i det her ark, og en var() uden værdi
     gør hele `font-family` ugyldig: ordmærket ville arve
     BRØDTEKSTEN og se "næsten rigtigt" ud. De seks andre regler i
     arket skriver familien ud; den her gør nu det samme.

     ⚠️ MØNSTRET ER VÆRD AT KENDE: havnegrillen.css har INGEN
     tokens til skrift eller runding — de bor i css/style.css. Et
     `var(--noget)` her er en fælde (se også --r-lille i .jura-blok
     og den kendte, dokumenterede --display i font-shorthanden
     længere nede i arket). */
  font-family:"Host Grotesk",system-ui,sans-serif;
  font-size:21px;
  /* ⚠️ 500 OG -.015em, IKKE SERIFFENS 600 OG .02em (27/9). Luften
     var valgt til Fraunces; en grotesk med den luft bliver løs, og
     LESREG sætter overskrifter i Medium og aldrig fed. -.015em er
     specifikationens sporing for 24 px (h3). */
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.1;
  white-space:nowrap;
  /* ⚠️ HVID STOD I 1,06:1 — OG ADVARSLEN STOD FIRE LINJER
     LAENGERE NEDE (9/9). Den fulde runde målte det på forsiden:
     ternet har BÅDE røde og næsten hvide felter, så hvid skrift
     forsvinder i de lyse — nøjagtig den fejl, tilbage-pilen fik
     rettet 5/9, skrevet ind igen lige over kommentaren om den.

     Svaret er husets eget og står ti linjer nede: `.topbar .g.icn`
     løste det med INK på en lys flade. Ordmærket gør nu det
     samme, så navnet og de to knapper ved siden af det er én
     ting. Målt på ternets mørkeste felt: over 8:1. */
  color:var(--ink);
  /* ⚠️ BJAELKEN SKAL BLIVE 50 PX HOEJ (9/9). `.topbar` er `sticky`
     og i FLOW — derfor traekker heroen sig op under den — saa
     bjaelkens indhold bestemmer, hvor resten af siden begynder.
     Kransen var 50 px; ordmaerket er 23,1. **Maalt: h1 flyttede
     sig fra 260 til 250 px paa en iPhone 13**, altsaa hele siden
     ti pixels op, uden at nogen havde bedt om det.
     Rettelsen er hoejden og ikke prøvens tal: designet er
     godkendt paa de afstande, og et ordmaerke er ikke en aftale
     om at flytte forsiden. */
  min-height:50px;
  display:flex;
  align-items:center;
  /* ⚠️ NAVNET VISER SIG FØRST, NÅR DEN HVIDE BJÆLKE GØR (9/9).
     Kundens ord med to skud af hjørnet: *"det her skal først vise
     sig når man har scrollet lidt længere ned hvor den hvide bar
     begynder at vise sig — den må ik stå i vejen og være dårlig."*

     Han har ret, og det er den TREDJE runde på det samme hjørne:
     hvid stod i 1,06:1 på ternet (9/9), blæk blev læsbart — og
     blæk PÅ TERNET er stadig et navn oven i et mønster med røde
     og næsten hvide felter, altså larm hen over heroens egen
     krans, som siger nøjagtig det samme tre centimeter længere
     nede. Toppen har nu kun burgeren, som de ni undersider har
     kun pil og burger.

     ⚠️ `visibility`, IKKE `display`. Bjælken er `sticky` og i
     FLOW, så dens INDHOLD bestemmer, hvor resten af siden
     begynder (--top-luft + 70 på tre sidehoveder). Et
     `display:none` ville tage de 50 px med og flytte hele forsiden
     ti pixels op — nøjagtig det, `min-height` ovenfor blev
     skrevet for. En skjult kasse har stadig sin højde.

     ⚠️ OG IDENTITETEN GÅR IKKE TABT: heroens fulde krans bærer
     ringteksten, og navnet står i footeren og i sidens titel. */
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease,visibility .45s ease;
}
.topbar.stuck .ordmaerke,.topbar.solid .ordmaerke{opacity:1;visibility:visible}
/* ⚠️ NAVNET STÅR ENS PÅ ALLE SIDER (11/10). Mikkels ord: *"det
   mosedehavnecafe i toppen skifter ift skrifttype og placering imellem
   tabsne … det skal se ud som når man scroller ned på forsiden"*. MÅLT:
   forsiden havde navnet til venstre i 21/500, de ni undersider havde
   intet navn, og bord/ og bestil/ havde det midt for i 17/400.
   Undersiderne har nu SAMME ordmærke (.hjem), og bjælken gør, som
   forsidens gør (kunden 9/9): øverst, over dugen, står pilen; når den
   hvide bjælke sætter sig fast, er det navnet — på pilens plads, så det
   står præcis, hvor forsidens står. Navnet er et link med data-tilbage,
   så det går samme vej som pilen (js/tilbage.js).
   ⚠️ display, IKKE visibility, her: navnet og pilen deler pladsen. Begge
   er 40 høje, når bjælken klæber, så bjælken skifter ikke højde. Navnet
   toner ind (@starting-style), som forsidens. */
.topbar .ordmaerke.hjem{display:none;text-decoration:none}
.topbar.stuck .ordmaerke.hjem{display:flex}
.topbar.stuck:has(.ordmaerke.hjem) .g.icn[data-tilbage]{display:none}
@starting-style{.topbar.stuck .ordmaerke.hjem{opacity:0}}
.topbar .sp{margin-left:auto}
/* Fast creme, ikke 80 % (13/9): over de mørke afsnit blev bjælken grumset grå, og på telefonen skinnede sociale-striben igennem bag navnet.
   ⚠️ OG DERFOR INTET GLAS BAG DEN (28/9). Sløringen blev stående, da fladen
   blev helt dækkende — den kunne ikke ses, men telefonen regnede den stadig
   ud ved HVERT billede: på tapassiden sætter bjælken sig fast lige der, hvor
   filmen glider ind under den, og så blev 60 filmbilleder i sekundet sløret
   for ingenting. Mikkels ord: *"tapas-siden … er ret laggy og hakkende"*.
   .topbar.solid (90 %) beholder sit — dér skinner det igennem. */
/* ⚠️ GLASSET ER TILBAGE — MEN KUN HVOR DET ER GRATIS  (3/10).
   Mikkel: "selve menu tabben er heller ikke liquid glass". Han har
   ret: bjælken var en massiv cremefarvet stribe, og indholdet blev
   skåret af under den uden at skinne igennem.

   ⚠️ MEN GRUNDEN TIL AT DEN BLEV MASSIV STÅR OVENFOR OG GÆLDER
      STADIG: på en side med en FILM i heroen sætter bjælken sig
      fast lige dér, hvor filmen glider under den, og så sløres 60
      billeder i sekundet for ingenting — det var Mikkels eget
      "tapas-siden er ret laggy og hakkende" den 28/9.

   Derfor: glas på de almindelige sider, hvor der ikke er andet end
   tekst og stillbilleder at sløre — og den massive creme beholdes
   på film-siderne. Reglen hænger på :has(.hero.film), så den
   følger siden selv og ikke en liste, nogen skal huske at rette. */
/* ⚠️ 94 %, IKKE 82 (11/10). Undersiderne har navnet i den faste bjælke nu, og
   ved 82 % stod sidens egen overskrift og skinnede igennem bag det — samme
   fejl som 13/9 ("skinnede sociale-striben igennem bag navnet"). Mikkels
   ord: den skal "se ud som når man scroller ned på forsiden", og forsidens
   er massiv creme. Sløret bliver (3/10) — det er nu en antydning, ikke tekst. */
.topbar.stuck{background:rgba(253,247,239,.94);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 .5px 0 rgba(36,26,23,.12);padding-top:calc(var(--top-luft) - 6px)}
/* ⚠️ OG [data-film] SKAL MED  (3/10). Første udgave spurgte kun
   efter .hero.film og lod derfor TAPASSIDEN få glas — og det er
   præcis den side, hele reglen blev lavet for: dér sætter bjælken
   sig fast over den spillende film. Filmen ligger som
   data-film="film/tapas" på et <image-slot>, ikke som et <video>
   i opmærkningen, så mit første greb ramte den ikke.
   tests/siden-staar-stille.spec.js fangede det — den prøve blev
   skrevet netop for, at "en ændring af reglen ovenfor ikke kan
   lade netop den glide".
   ⚠️ SIDEN MÆRKER SIG SELV — jeg prøvede tre greb før dette, og
      de to første var gæt:
        .hero.film      → tapassiden har ikke den klasse
        [data-film]     → <image-slot data-film="film/tapas"> bliver
                          ERSTATTET ved kørsel, og attributten går med
        :has(video)     → virkede i browseren, men IKKE i prøverne:
                          uden data indsættes filmen aldrig, og så fik
                          film-siden glas alligevel
      Klassen på <body> er der fra første billede, uanset data, net og
      JavaScript. Det er det eneste, der ikke kan skride.
   ⚠️ Og den kan ikke glemmes i stilhed: tests/siden-staar-stille.spec.js
      måler, at hver side med en film BÅDE har klassen og en
      bjælke uden glas. */
body.har-film .topbar.stuck{background:var(--cream);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.topbar.stuck .brandmark{filter:none}
/* ⚠️ BJÆLKEN ER LAVERE, NÅR DEN STÅR FAST — PÅ TELEFONEN (11/9).
   Kundens ord: bjælken med "Mosede Havnecafe" skal være "lidt mindre,
   når man scroller, så man kan se mere". Luften foroven skrumper til
   telefonens eget hak + 6 px, indholdet fra 50 til 40 (burgeren er
   40 i forvejen) og luften forneden fra 12 til 8.
   ⚠️ OG MARGENEN HOLDER BJÆLKENS PLADS. Den er `sticky` og i FLOW,
   så en lavere bjælke ville flytte hele siden op, i det sekund den
   sætter sig fast — de 6 px, den gamle regel skar af, gjorde netop
   det. margin-bottom er præcis det, der blev skåret af, så bjælkens
   plads i siden er den samme i begge tilstande: (--top-luft − den
   nye top) + 4, og + 10 mere, hvor ordmærket skrumper fra 50 til 40.
   Ankerhoppet i havnegrillen.js måler bjælken i den tilstand, den
   lander i.
   ⚠️ DE 10 PX GÆLDER KUN FORSIDEN. Undersidernes bjælke har pil og
   burger (40 px) og intet ordmærke, så dér skrumper indholdet ikke —
   MÅLT: med de 10 lagt til overalt hoppede h-selskaber 10 px NED.
   `:has(.ordmaerke)` er kendingen: det er ordmærket, der skrumper, og
   det er dét, der skal betales for.
   ⚠️ KUN UNDER 821 px. Computerens bjælke har sin egen luft
   (havnegrillen-desktop.css), og --top-luft er telefonens tal. */
@media (max-width:820px){
  .topbar.stuck{--kompakt-top:max(calc(env(safe-area-inset-top) + 6px),12px);padding-top:var(--kompakt-top);padding-bottom:8px;margin-bottom:calc(var(--top-luft) - var(--kompakt-top) + 4px)}
  /* Forsidens ordmærke skrumper fra 50 til 40; undersidernes (.hjem) deler
     pilens 40 og skal ikke betales for (de 10 px, h-selskaber hoppede). */
  .topbar.stuck:has(.ordmaerke:not(.hjem)){margin-bottom:calc(var(--top-luft) - var(--kompakt-top) + 14px)}
  .topbar.stuck .ordmaerke{min-height:40px}
}
/* ⚠️ TOPBJÆLKENS KNAPPER STÅR PÅ TERNET, og ternet har BÅDE røde
   og næsten hvide felter. Den mørke glasvariant (.g.dark) har med
   vilje en næsten gennemsigtig flade, så mønstret skinner igennem
   — og så forsvinder en HVID pil i de lyse felter.

   MÅLT 5/9 på en iPhone 13: tilbage-pilen stod i 1,06:1 på otte
   sider, både øverst og efter at bjælken havde fæstnet sig. Det er
   den eneste vej tilbage på de sider. Kundens ord: "tilbage
   knappen skal være liquid glass stadig men forsvinder altså i de
   hvide environments".

   Reglen gjaldt kun `.menu` og kun i `.stuck` — altså blev
   burgeren rettet, og pilen blev glemt. Nu gælder den BEGGE
   knapper og HELE tiden, og det er stadig glas: sløringen og
   linsekanten kommer fra `.g`.

   ⚠️ HISTORIEN HAR SIN EGEN, OG DEN VINDER AF SIG SELV.
   `historien.css` sætter `.hist .topbar .g.icn.dark` (0,4,0), som
   vejer tungere end reglen her (0,3,0) — den mørke knap på det
   sorte måler 16,22:1. Første udgave havde et `body:not(.hist)`
   foran, og FALSIFIKATIONEN afslørede det: reglen bestod, da
   garden blev fjernet, altså gjorde den ingenting. To garder for
   det samme er dét, huset kalder to udgaver af én regel. */
.topbar .g.icn{color:var(--ink);background:rgba(255,255,255,.6);box-shadow:inset 0 1px .5px rgba(255,255,255,.95),inset 0 0 0 .5px rgba(36,26,23,.08),0 6px 16px rgba(36,26,23,.12)}
.topbar.solid{background:rgba(253,247,239,.9);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:0 .5px 0 rgba(36,26,23,.12)}
/* hero */
.hero{position:relative;margin-top:calc(-1 * (var(--top-luft) + 70px));padding:calc(var(--top-luft) + 86px) var(--pad) 26px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background-color:#fff;background-image:repeating-linear-gradient(90deg,rgba(214,42,58,.62) 0 21px,transparent 21px 42px),repeating-linear-gradient(0deg,rgba(214,42,58,.62) 0 21px,transparent 21px 42px);animation:ging 1.4s var(--spring) both}
@keyframes ging{from{transform:scale(1.08);opacity:.4}to{transform:none;opacity:1}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(100% 52% at 50% 76%,rgba(26,18,16,.5),transparent 74%),linear-gradient(180deg,rgba(26,18,16,.5),rgba(26,18,16,.3) 22%,rgba(26,18,16,.56) 46%,rgba(26,18,16,.68) 74%,rgba(26,18,16,.72))}
/* ⚠️ HEROENS FILM ER ÅBNINGEN (11/9) — se index.html og js/skal/hero-film.js.
   Heroen starter mørk, filmen blændes ind, når den spiller, og
   kransen, overskriften og knapperne kommer det sidste sekund:
   kransen falder på plads, teksten stiger op, og den mørke tone
   (::after) kommer med teksten, så filmen står i fuld styrke, mens
   den spiller. Kun opacity og transform — husets regel fra 31/8.
   Ternet bag heroen slukkes KUN, når der er en film. */
/* ⚠️ FULD SKÆRM PÅ TELEFONEN (11/9). Kundens ord: filmen skal være
   "fuld skærm på telefonen med animationen, ikke inde på hjemmesiden
   agtig — fuldskærm indtil end frame". MÅLT FØR: på en iPhone 13
   sluttede heroen 4 px før skærmens bund, fordi dens højde kom af
   indholdet — og på en højere telefon stod næste afsnit under
   filmen. Gulvet er skærmen PLUS de 8 px, heroen trækkes op under
   bjælken (70 op mod bjælkens 62: målt top −8). Indholdet sidder
   øverst, så h1 står stadig på 260 (typografiprøven).
   ⚠️ lvh OG IKKE svh — MÅLT PÅ KUNDENS EGEN iPHONE (11/9). svh er
   skærmen MED Safaris bjælker fremme, og i den nye Safari svæver
   bundlinjen OVEN PÅ siden: på hans skud stod der ~95 punkter creme
   bag den, under filmen. lvh er den store skærm og går helt ned bag
   linjen. Playwright kan ikke se forskel (de to er ens i Chromium),
   så prøven læser reglen i arket. `vh` er reserven — på iOS er vh
   den store skærm i forvejen.
   ⚠️ OG SIDEN TEGNES 58 PUNKTER UNDER lvh — MÅLT I iOS 26.5-
   SIMULATOREN (11/9, iPhone 17 Pro). Med lvh alene stod en stribe af
   næste afsnit (Facebook · Instagram · TikTok) nederst under
   bundlinjen. En måleside i simulatoren: skærmen 874, feltet ved
   kameraet 62, 100lvh 754 — altså tegnes 58 punkter under lvh, bag
   den svævende linje. INGEN værdi siger det: safe-area-inset-bottom
   er 0, fixed bottom:0 slutter ved 714, -webkit-fill-available er
   714, og outerHeight er hele skærmen (874). Første forsøg lagde
   `env(safe-area-inset-bottom)` til, og det flyttede ingenting.
   Derfor et FAST tillæg: 8 (heroen trækkes op) + 58 (målt) + luft.
   Det koster ingenting at se: indholdet sidder øverst, og resten af
   heroen ligger under folden. `env()` er med for en app på
   hjemmeskærmen, hvor hjemstregens felt ER et tal.
   Computerens `.hav .hero` (84svh) står senere og vinder dér. */
.hero.film{--under-linjen:max(96px,calc(env(safe-area-inset-bottom,0px) + 8px));background:#1a1210;min-height:calc(100vh + var(--under-linjen));min-height:calc(100lvh + var(--under-linjen))}
.hero.film::before{display:none}
.hero-film{position:absolute;inset:0;z-index:-2;background:#1a1210;overflow:hidden;transition:opacity 1.2s cubic-bezier(.24,.72,.24,1)}
/* ⚠️ FILMENS FØRSTE BILLEDE STÅR MED DET SAMME (11/9) — kundens ord:
   "den er sort i lidt for lang tid". Før var hele rammen usynlig, til
   filmen SPILLEDE, og på et mobilnet er det sekunder. Nu blændes
   filmens første billede ind i striben, så snart det er hentet
   (`.klar`), og det står oven på filmen, til den FAKTISK spiller
   (`.afspiller`) — ikke til `.spiller`, som også sættes ved et spring:
   sprang gæsten over, før filmen var hentet, stod der sort, til
   slutbilledet kom. Kun opacity. */
.hero-film .hero-start{opacity:0;transition:opacity .6s cubic-bezier(.24,.72,.24,1)}
.hero-film .hero-start.klar{opacity:1}
.hero-film.afspiller .hero-start{opacity:0;transition-duration:.4s}
.hero-film video,.hero-film .hero-start,.hero-film .hero-slut{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-film .hero-slut{opacity:0;transition:opacity 1.2s ease}
.hero-film .hero-slut.vis{opacity:1}
/* ⚠️ LÆRREDET GÅR OP (11/9). Kundens ord: "kan den starte ud mere
   cinematisk … helt fuldskærm". Heroen starter sort, og filmen åbner
   sig fra en stribe midt i skærmen til fuld skærm, mens den blændes
   ind — to sorte kanter, der glider ud, som når tæppet går i en
   biograf. Den slutter i FULD skærm; kanterne er åbningen, ikke et
   format.
   ⚠️ KUN TRANSFORM, og kanterne står KUN lukkede under åbningen, før
   filmen spiller. Uden `film-aabner` (et direkte link, reduceret
   bevægelse) er de væk fra første billede. Springer gæsten over
   (`.slut`), går de op på .7 s i stedet for 1,1.
   ⚠️ 1,1 s OG IKKE 2,2 — kundens ord efter at have set den på sin
   egen telefon: "den åbner op for langsomt" (11/9). Filmen blændes
   ind på 1,2 s samme sted.
   ⚠️ OG DEN GÅR OP, SÅ SNART FILMENS FØRSTE BILLEDE STÅR — IKKE FØRST,
   NÅR FILMEN SPILLER (13/9). Kundens ord: "den tøver før den begynder
   og er ik særlig cinematisk". Striben stod helt stille, til filmen
   var hentet nok til at spille — på et mobilnet sekunder. Startbilledet
   ER filmens første billede, så filmen tager over uden et skifte.
   `:has` og ikke et script: fejler scriptet, går lærredet stadig op.
   Og kurven tager fat med det samme og bremser blødt; den gamle
   (.65,0,.2,1) stod næsten stille det første stykke og læstes som mere
   tøven. */
.hero-bjaelke{position:absolute;left:0;right:0;height:50%;z-index:1;background:#0b0706;pointer-events:none;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
/* ⚠️ FELTET VED KAMERAET (11/9) — kundens skud fra hans iPhone viste
   CREME over filmen og en creme bjælke i bunden. Feltet ved uret er
   Safaris, ikke sidens, og den nye Safari (iOS 26) farver det med
   SIDENS BAGGRUND — ikke theme-color: der stod rød i meta-tagget, og
   feltet var creme, altså kroppens farve under 820 px.
   Kroppen er derfor mørk på forsiden, til bjælken sætter sig fast —
   så følger den bjælkens creme. Sidens indhold maler sin egen creme
   (`.screen`), så intet afsnit skifter farve; det er kun feltet ved
   kameraet og det, man ser, når man trækker siden ned.
   ⚠️ :has OG IKKE ET SCRIPT: tilstanden er bjælkens egen klasse, og
   en kopi af den i JavaScript ville være to udgaver af det samme.
   theme-color skiftes af havnegrillen.js til ældre iPhones. */
@media (max-width:820px){
  body:has(.hero.film):not(:has(.topbar.stuck)){background:#0b0706}
}
.hero-bjaelke.top{top:0;transform:translate3d(0,-101%,0)}
.hero-bjaelke.bund{bottom:0;transform:translate3d(0,101%,0)}
html.film-aabner .hero-film:not(.spiller):not(:has(.hero-start.klar)) .hero-bjaelke.top{transform:translate3d(0,-30%,0)}
html.film-aabner .hero-film:not(.spiller):not(:has(.hero-start.klar)) .hero-bjaelke.bund{transform:translate3d(0,30%,0)}
.hero-film.slut .hero-bjaelke{transition-duration:.7s}
/* ⚠️ VÆRNET GÆLDER OGSÅ KANTERNE. Fejler scriptet, kommer `.spiller`
   aldrig, og kanterne ville stå som to sorte felter over teksten, når
   `film-noedvis` viser den efter 8 s. De tones væk på samme sekund. */
@keyframes film-vaek{to{opacity:0}}
html.film-aabner .hero-bjaelke{animation:film-vaek 0s 8s forwards}
/* Og knappen "tryk for at springe over": den skal også VÆK — ikke
   bare usynlig, ellers ligger den og fanger tryk oven på siden. */
@keyframes film-vaek-helt{to{opacity:0;visibility:hidden}}
html.film-aabner .hero-spring{animation:film-vaek-helt 0s 8s forwards}
/* Filmkornet og vignetten: en stille uro over billedet og mørke
   kanter, så filmen læses som film og ikke som en skærm. Kornet er
   historiesidens egen SVG (historien.css), og det bevæger sig kun med
   transform i trin — på kompositoren, uden en ombrydning. `inset:-12%`
   giver plads til rystelsen; `.hero-film` klipper resten.
   ⚠️ INGEN mix-blend-mode: en blanding skal regnes om mod filmen i
   hvert eneste billede. Et svagt lag uden blanding koster ingenting. */
.hero-korn{position:absolute;inset:-12%;z-index:1;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");animation:korn 1s steps(5) infinite}
@keyframes korn{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-4%,3%,0)}40%{transform:translate3d(3%,-5%,0)}60%{transform:translate3d(-2%,5%,0)}80%{transform:translate3d(5%,-2%,0)}to{transform:translate3d(0,0,0)}}
.hero-film::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(125% 90% at 50% 45%,transparent 55%,rgba(8,5,4,.55))}
@media (prefers-reduced-motion:reduce){.hero-bjaelke{transition:none}.hero-korn{animation:none}}
.hero.film::after{transition:opacity 1.2s ease}
.hero.film .hero-badge,.hero.film .hero-in>*{transition:opacity .9s ease,transform .9s cubic-bezier(.24,.72,.24,1)}
.hero.film .hero-in>:nth-child(2){transition-delay:.12s}
.hero.film .hero-in>:nth-child(3){transition-delay:.24s}
html.film-aabner .hero.film::after{opacity:0}
html.film-aabner .hero.film .hero-badge{opacity:0;transform:translate3d(0,-18px,0)}
html.film-aabner .hero.film .hero-in>*{opacity:0;transform:translate3d(0,16px,0)}
/* ⚠️ INTET STÅR OVEN I FILMEN. Menuknappen stod i fuld styrke hele
   åbningen (målt: opacity 1) — kundens ord: "sidebaren, knappen er
   visible". Den kommer med teksten. ⚠️ KUN OPACITY, IKKE
   pointer-events: et tryk hvor som helst springer filmen over, så
   et tryk på menuens plads åbner den OG viser siden — og en knap,
   der ikke kan rammes, ville lade femten prøver vente på den. */
html.film-aabner .topbar{opacity:0}
/* "TRYK FOR AT SPRINGE OVER" (11/9). Kundens ord: "noget nærmest
   invisible med tryk for skip". Et tryk hvor som helst har altid
   sprunget over — nu SIGER siden det, stille: små versaler i dæmpet
   hvid, og først efter 1,2 s, så åbningens første billede er rent.
   Linjen under løber med filmens egen resttid (`--film-rest`, sat af
   scriptet, i det øjeblik filmen spiller), så gæsten kan se, hvor
   lang den er. ⚠️ Linjen er en streg uden indhold, så `scaleX` koster
   ingenting — husets forbud mod scale gælder ting med indhold i.
   ⚠️ `visibility` og ikke kun opacity: en usynlig knap, der ligger og
   fanger tryk oven på siden, er værre end ingen. På en telefon står
   den fast lige over Safaris svævende bundlinje (`fixed; bottom` er
   den synlige skærms bund — målt i iOS 26-simulatoren 11/9); på en
   computer i bunden af heroen. */
.hero-spring{position:absolute;left:50%;bottom:28px;z-index:2;transform:translateX(-50%);display:grid;justify-items:center;gap:7px;min-height:36px;padding:8px 14px;border:0;background:none;color:rgba(255,255,255,.62);font-size:11px;font-weight:600;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.45);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s .25s}
/* ⚠️ `pointer-events` SLIPPER I SAMME ØJEBLIK SOM SPRINGET — visibility
   venter på udtoningen, og i de 0,25 s lå knappen ellers oven på
   heroens "Selskab & catering" på en lav telefon (fundet af pillens
   prøve i skal-forside.spec.js: elementFromPoint svarede SPAN.tryk). */
html.film-aabner .hero-spring{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .8s ease 1.2s,visibility 0s}
.hero-spring i{position:relative;display:block;width:72px;height:1px;overflow:hidden;background:rgba(255,255,255,.22)}
.hero-spring i::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.72);transform:scaleX(0);transform-origin:left}
.hero-film.afspiller~.hero-spring i::after{animation:film-fremdrift var(--film-rest,4s) linear forwards}
@keyframes film-fremdrift{to{transform:scaleX(1)}}
.hero-spring .klik{display:none}
@media (hover:hover) and (pointer:fine){.hero-spring .klik{display:inline}.hero-spring .tryk{display:none}}
@media (max-width:820px){.hero-spring{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}}
@media (prefers-reduced-motion:reduce){.hero-spring i::after{animation:none}}
/* ⚠️ VÆRN: TEKSTEN MÅ ALDRIG BLIVE HÆNGENDE SKJULT. Klassen sættes i
   head; fejler scriptet nederst, fjernes den aldrig. Efter 8 s viser
   stilarket det hele af sig selv — også uden JavaScript. Topbjælken
   står under det samme værn: uden script ingen menu ellers. */
@keyframes film-noedvis{to{opacity:1;transform:none}}
html.film-aabner .hero.film .hero-badge,html.film-aabner .hero.film .hero-in>*,html.film-aabner .hero.film::after,html.film-aabner .hero-film,html.film-aabner .topbar{animation:film-noedvis 0s 8s forwards}
/* ⚠️ MEN KUN, NÅR SCRIPTET IKKE KØRER (11/9). De 8 s tælles fra
   sidens indlæsning, og på kundens telefon begyndte filmen først at
   spille efter nogle sekunder — så stilarket viste siden, før filmen
   var færdig ("it doesn't let the video complete"). Har scriptet
   taget over (`film-styret`), gælder dets eget værn, som tælles fra
   det øjeblik, filmen SPILLER. Det gælder også kanternes 8 s. */
html.film-styret.film-aabner .hero.film .hero-badge,html.film-styret.film-aabner .hero.film .hero-in>*,html.film-styret.film-aabner .hero.film::after,html.film-styret.film-aabner .hero-film,html.film-styret.film-aabner .topbar,html.film-styret.film-aabner .hero-bjaelke,html.film-styret.film-aabner .hero-spring{animation:none}
@media (prefers-reduced-motion:reduce){.hero-film,.hero-film .hero-slut,.hero.film::after,.hero.film .hero-badge,.hero.film .hero-in>*{transition:none}}
.hero-badge{width:108px;margin:0 auto;filter:drop-shadow(0 12px 26px rgba(0,0,0,.3))}
.hero-in{display:grid;justify-items:center;text-align:center;gap:12px;margin-top:16px}
.hero h1{font-size:47px;color:#fff;text-wrap:balance;text-shadow:0 2px 20px rgba(26,18,16,.4)}
.hero h1 em{font-style:normal;color:#ffe3cf}
.hero .status{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;letter-spacing:0;color:rgba(255,255,255,.9);background:rgba(26,18,16,.28);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:6px 13px;border-radius:999px;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2)}
.dot{width:6px;height:6px;border-radius:50%;background:#f0a03c;flex:none}
.hero-cta{display:grid;gap:10px;width:100%;margin-top:10px}
.hero-cta .g{width:100%;height:54px;font-size:16px;font-weight:600}
.hero-cta .g.ghost{color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 1px .5px rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.4),0 10px 26px rgba(0,0,0,.32)}
/* ============================================================
   LEVERINGEN SOM NYHED  (7/10)
   ------------------------------------------------------------
   Mikkel: levering skal stå "som en ny og fed ting". Tre steder på
   forsiden, samme form: et rødt "Nyhed"-mærke og ordene "Vi kører
   maden ud" — i heroen som en glaspille under knapperne og over Bestil
   mad som et felt med område og pris (menukortet har pillen i den lyse
   udgave). Teksten fyldes af js/skal/kontakt.js.
   Skjult med [hidden], til levering er slået til — og husets fælles
   `[hidden] { display: none !important; }` længere nede vinder over
   .row-card's flex. (Prøvet 7/10: en egen regel her var en kopi af den.)
   ============================================================ */
.hero-nyhed,.hero-lukket{display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:7px 14px 7px 7px;
  border-radius:999px;color:#fff;font-size:15px;font-weight:600;text-decoration:none;
  background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px .5px rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.4),0 10px 26px rgba(0,0,0,.32)}
.hero-nyhed b,.hero-lukket b,.lev-nyhed-titel b{display:inline-block;padding:4px 9px;border-radius:999px;
  font-size:11px;font-weight:700;font-style:normal;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--red);line-height:1.2}
.hero-nyhed i,.hero-lukket i{font-style:normal;opacity:.85;transition:transform .3s var(--spring)}
.hero-nyhed:hover i{transform:translateX(3px)}
.hero-nyhed:focus-visible,.hero-lukket:focus-visible,.lev-nyhed-knap:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* «VI HOLDER LUKKET» I HEROEN  (18/10) — samme glaspille som nyheden,
   men den peger NED til kortet (js/lukket.js fylder den). Heroen fylder
   hele skærmen, og kortet står under den: uden pillen så gæsten kun
   «Lukket i dag» — og ugen før en ferie «Åbent nu». Mens den står,
   viger leveringsnyheden: én pille i heroen, og lukningen er vigtigst. */
.hero-lukket:hover i{transform:translateY(2px)}
.hero-lukket:not([hidden])~.hero-nyhed{display:none}
.lev-nyhed{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:18px;
  padding:16px 18px;border-radius:24px;color:#fff;
  background:linear-gradient(135deg,rgba(214,42,58,.42),rgba(214,42,58,.14));
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 1px .5px rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.4),0 10px 26px rgba(0,0,0,.32)}
.lev-nyhed-ikon{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--red)}
.lev-nyhed-ikon svg{width:26px;height:26px;color:#fff;fill:currentColor}
.lev-nyhed-tekst{flex:1 1 220px;min-width:0}
.lev-nyhed-tekst p{margin:0;font-size:14px;line-height:1.45;color:rgba(255,255,255,.88)}
.lev-nyhed-tekst .lev-nyhed-titel{display:flex;align-items:center;gap:9px;margin-bottom:4px;font-size:18px;font-weight:700;color:#fff}
.lev-nyhed-tekst .lev-gratis{margin-top:6px;font-size:15px;color:#fff}
.lev-nyhed-knap{flex:none;margin-left:auto;padding:11px 18px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:15px;font-weight:600;color:var(--red-d);background:#fff;box-shadow:var(--skygge-let)}
.lev-nyhed-knap:hover{background:#ffeef0}
@media (max-width:480px){.lev-nyhed-knap{width:100%;margin-left:0}}
/* Den lyse udgave står på papir (menukortets overskrift), ikke på film. */
/* Husets lyse glaspille (.glaspille) — samme flade og skygge. */
.hero-nyhed.lys{justify-self:center;width:max-content;max-width:100%;margin:14px auto 0;text-align:left;
  color:var(--ink);background:var(--glas-flade);font-size:14px;box-shadow:var(--glas-skygge)}
/* social + musik */
.social{display:flex;gap:8px;padding:16px var(--pad) 4px;overflow-x:auto;scrollbar-width:none}
.social::-webkit-scrollbar{height:0}
/* Striben er husets klare glas (28/9, aften — se "APPLES KLARE GLAS").
   Uden sløring: striben ruller over flad creme, der er intet bag den. */
.social a{flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 15px;border-radius:999px;font-size:13px;font-weight:500;color:var(--ink);background:var(--glas-flade);box-shadow:var(--glas-skygge);transition:transform .32s var(--spring)}
.social a:active{transform:scale(.955)}
.social a svg{width:16px;height:16px;flex:none;color:var(--red)}
.music{margin:14px var(--pad) 0;position:relative;display:flex;align-items:flex-start;gap:12px;padding:15px;border-radius:24px;color:#fff;overflow:hidden;background:linear-gradient(135deg,#3a1d1c,#1f1210)}
/* ⚠️ GLØDEN SKAL LIGGE BAG TEKSTEN (9/9). Den er absolut
   placeret uden z-index, og en positioneret pseudo males derfor
   OVEN PÅ forælderens tekst. Målt på en iPhone 13 med ejerens
   eget arrangement: skiven løber x=244-404, titlen "havne ·
   torsdag d. 17. september" slutter på 301 — altså lå 57 px af
   ordet under en rød skive på 60 %, og der stod "septem" i hvidt
   og "ber" i rødt midt i ordet. Det ligner en gengivelsesfejl.
   Kun på telefonen: på 1280 px er kortet bredt nok til, at
   skiven aldrig når teksten — summen findes kun ved at måle på
   flere skærmbredder. Gløden er UÆNDRET; den ligger bare bag. */
.music::after{content:"";position:absolute;right:-34px;top:-44px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(214,42,58,.6),transparent 68%);pointer-events:none;z-index:0}
.music>*{position:relative;z-index:1}
.music .bic{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.16);box-shadow:inset 0 1px .5px rgba(255,255,255,.4)}
.music h4{font-family:"Host Grotesk",system-ui,sans-serif;font-size:15px;font-weight:600;line-height:1.25;color:#fff}
.music p{margin:5px 0 0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.76)}
.music .cta{display:inline-flex;align-items:center;gap:7px;margin-top:11px;height:36px;padding:0 15px;border-radius:999px;font-size:13px;font-weight:600;color:#fff;background:linear-gradient(180deg,#e2394a,#c11f2f);box-shadow:inset 0 1px .5px rgba(255,255,255,.45),0 8px 20px rgba(214,42,58,.4)}
.eq{display:flex;align-items:flex-end;gap:2px;height:13px}
.eq i{width:2.5px;border-radius:2px;background:#fff;animation:eq 1.1s ease-in-out infinite}
.eq i:nth-child(1){height:5px}.eq i:nth-child(2){height:11px;animation-delay:.16s}.eq i:nth-child(3){height:7px;animation-delay:.32s}.eq i:nth-child(4){height:13px;animation-delay:.48s}
@keyframes eq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
/* sections */
section{padding:32px var(--pad)}
/* ⚠️ MÆRKATEN ER EN STILLE LINJE, IKKE RØDE VERSALER (27/9).
   Mikkels ord: "de her ting er ikke lesreg agtige og generiske og
   claude genkendelige". Røde, spærrede versaler over hver overskrift
   er skabelonens tegn. LESREG bruger kun versaler til felter og data;
   det, der står over en overskrift, er en almindelig linje i blæk.
   Sloganerne ("Altid noget godt", "Havnens stolthed") er taget ud af
   siderne; tilbage står kun mærkater, der siger noget, overskriften
   ikke gør (datoen, "Ugen der kommer", emnet på jurasiderne). */
.eyebrow{font-size:14px;font-weight:500;letter-spacing:0;color:var(--ink2)}
.eyebrow.red{color:var(--ink2)}
h2{font-size:35px;margin-top:9px}
/* ⚠️ text-wrap: pretty — MOD DET ENLIGE ORD  (21/9)
   MÅLT paa forsiden: "… nemt at bladre i." braekkede, saa "i."
   stod alene paa tredje linje under overskriften Menukort. Et
   enligt ord paa sidste linje ser ud som en fejl i teksten.
   Reglen, ikke teksten: en omskrevet saetning braekker igen ved
   naeste skriftstoerrelse eller skaermbredde. */
.sub{margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--ink2);text-wrap:pretty}
.mid{text-align:center;display:grid;justify-items:center}
/* Prikrækken og den lille streg under overskrifterne er væk (27/9):
   pynt, der kun sagde "her starter et afsnit". Luften gør det. */
/* dagens ret i dag */
.today{margin-top:18px;position:relative;border-radius:26px;background:var(--paper);box-shadow:var(--skygge-kort);overflow:hidden}
.today .in{padding:16px 18px 18px}
/* Serveringstiden stod i rødt lige under et rødt bånd og kæmpede
   med det om øjet (4/10). Båndet bærer det røde; linjen her er en
   oplysning, og den må gerne være en oplysning. */
.today .lbl{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--muted);letter-spacing:-.005em}
.today h3{font-size:31px;margin-top:7px;letter-spacing:-.025em}
.today p{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--ink2)}
/* ⚠️ PRISEN OG PORTIONERNE ER PILLER (7/9, kundens skærmbillede).
   De stod som nøgen tekst ved siden af en knap i fuld bredde;
   nu er de tre ting i rækken lige tydelige at skimme. Prisen
   bruger --red-tekst og ikke --red: den lille skrift på en
   telefon falder under 4,5:1 med mærkefarven selv (reglen fra
   menukortet). */
/* Prisen stod som en bleg pille ved siden af en knap i fuld rød
   (4/10) — tallet, gæsten leder efter, var det svageste på linjen.
   Samme form, mere vægt. */
.today .price{display:inline-flex;align-items:center;font-family:"Host Grotesk",system-ui,sans-serif;font-size:20px;font-weight:700;letter-spacing:-.015em;font-variant-numeric:tabular-nums;color:var(--red-tekst);background:rgba(214,42,58,.13);border-radius:999px;padding:8px 17px;white-space:nowrap}
/* Portionerne er DATABASENS tal. Uden et antal findes pillen
   ikke — [hidden] er browserens egen, og .rest sætter ikke
   display, så den slår igennem (arret fra .music og .lk-tegn). */
.today .rest{font:500 13px/1 "Host Grotesk",system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink2);background:var(--cream2);border-radius:999px;padding:9px 14px;white-space:nowrap}
.today .rest.faa{color:var(--red-tekst);background:var(--red-svag,rgba(214,42,58,.10))}
.today .row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px}
.today .row .g{flex:1 1 160px}

/* ---- "I DAG"-BLOKKEN --------------------------------------
   ⚠️ FORLÆGGETS BLOK ER ORANGE; VORES ER HAVNENS RØDE MED
   TERNET. Ternet er husets eget mærke — blokken er den samme
   tekstur, bare stor nok til at bære ordet.

   ⚠️ PÅ TELEFONEN ER DEN ET BÅND OVER RETTEN (12/9), IKKE EN
   BLOK VED SIDEN AF. Kundens ord: "gør … dagensret tingen pænere
   når der er en". Kortet er 337 px bredt på en iPhone 13, og en
   blok på 96 px i siden ville tage næsten en tredjedel fra
   rettens navn — det var grunden til, at telefonen kun havde en
   ternet stribe på 10 px. Et bånd foroven tager INGEN bredde, så
   grunden holder, og blokken kan stå på alle skærme. Fra 560 px
   står den i siden, som forlægget har den. */
/* ⚠️ TERNET VAR ET SKAKBRÆT (4/10). Felterne var 9 px, og på en
   telefon med tre pixels pr. px blev de til 27 px på skærmen — fire
   rækker store røde kvadrater tværs over kortet. Mikkels ord om hele
   afsnittet: *"ser forældet og sjusket ud"*. Husets tern skal LÆSES
   SOM STOF og ikke som et brætspil: felterne er 5 px nu, og den
   lysere tråd står svagere, så det er en vævning på afstand. Heroen
   og footeren beholder deres egne mål — de ligger langt væk fra
   øjet; det her bånd ligger 38 px fra rettens navn. */
.today .idag-blok{display:flex;align-items:center;gap:8px;padding:9px 18px;
  background-color:var(--red);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.085) 0 5px,transparent 5px 10px),repeating-linear-gradient(0deg,rgba(255,255,255,.085) 0 5px,transparent 5px 10px);
  color:#fff}
/* ⚠️ DAMPEN SKAL DAMPE (7/9). Kundens ord: "det der på når man
   har lagt en dagens ret om skal være levende og steaming."
   Tegnet stod stille som et tegnsætningstegn; nu stiger det og
   tynder ud, som damp gør. Tre sekunder, ingen forskydning af
   noget andet — kun transform og opacity, altså kompositorens
   arbejde og ikke en ombrydning. */
/* ⚠️ TRE STRIBER, IKKE ET TEGNSÆTNINGSTEGN (13/9). Kundens ord: "den
   der bølge ting ved idag … skal altså være bedre". 〰 er en vandret
   bølge og læses som vand, ikke som damp. Tre lodrette striber, der
   stiger op fra retten, er damp — og de er tegnet (currentColor), så
   de er hvide på båndet som ordet ved siden af. */
.today .idag-blok .damp{font-size:17px;opacity:.95;line-height:1;
  will-change:transform,opacity;
  animation:damp 3s ease-in-out infinite}
/* Målt på et skud 13/9: ved .35-.85 og en tynd streg forsvandt
   striberne i ternet og lignede tre krøllede hår. De står i fuld hvid
   nu, og bevægelsen er i højden — ikke i at blinke ud. */
.today .idag-blok .damp svg{display:block;width:22px;height:22px;stroke-width:2.4}
@keyframes damp{
  0%   {transform:translateY(3px) scaleX(.92); opacity:.7}
  35%  {transform:translateY(-1px) scaleX(1.04); opacity:1}
  70%  {transform:translateY(-5px) scaleX(.96); opacity:.8}
  100% {transform:translateY(3px) scaleX(.92); opacity:.7}
}
/* ⚠️ OG DEN STÅR STILLE FOR DEN, DER HAR BEDT OM DET. En
   uendelig animation er præcis det, reduced motion findes for. */
@media (prefers-reduced-motion: reduce){
  .today .idag-blok .damp{animation:none;opacity:.75;transform:none}
}
/* ⚠️ ORDET VAR KURSIVT OG ALENE (4/10). Et kursivt "I dag" på et
   rødt ternet felt er den café-hjemmeside, siden IKKE skal ligne.
   Huset har allerede en form til den slags markør — .eyebrow og
   ugekortenes .dw: versaler, spærret, lille. Ordet låner den, og så
   rimer dagens ret endelig på ugestriben lige under. Teksten i
   opmærkningen er stadig "I dag"; det er text-transform, der gør
   resten, så prøven fra 3/10 læser det samme ord. */
.today .idag-blok .idag-ord{font-family:"Host Grotesk",system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1}
@media (min-width:560px){
  /* 84 px i stedet for 96 (4/10): ordet er en etiket nu og fylder
     under det halve af, hvad det kursive gjorde. Prøven måler, at
     blokken bliver under en tredjedel af kortet — den holder. */
  .today{display:grid;grid-template-columns:84px minmax(0,1fr)}
  .today .idag-blok{flex-direction:column;justify-content:center;gap:6px;padding:0}
  .today .in{padding:18px 20px}
}
/* bestil-panel */
.panel{background:var(--paper);border-radius:28px;padding:20px 18px;box-shadow:var(--skygge-kort);margin-top:20px}
/* Kalendersidens reservation står foldet sammen bag pillen (13/9); js/skal/kalender.js folder den ud. */
#reserver.foldet{display:none}
.panel h3{font-size:26px}
.field{margin-top:16px}
/* ⚠️ .two-col>div>label  (27/9). `.field>label` rammer kun et label,
   der er DIREKTE barn af .field — og i de to-spaltede felter (Navn ·
   Telefonnummer, Dato · Antal gæster) står der en <div> imellem. De
   tolv labels på syv sider arvede derfor brødteksten: 16 px, tynd,
   inline og uden luften ned til feltet — midt i en formular, hvor
   alle andre labels er 13 px fede. Arvet 1:1 fra handoffets
   mosede-m.css, hvor selektoren har samme hul. Reglen er den samme;
   den når nu bare alle labels. */
.field>label,.two-col>div>label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.field .hint{margin:7px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.inp,select.inp,textarea.inp{width:100%;min-width:0;height:48px;border:0;border-radius:16px;background:var(--cream2);box-shadow:var(--kant-inde);padding:0 15px;font-family:inherit;font-size:15px;color:var(--ink);appearance:none;transition:box-shadow .25s ease}
select.inp{background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),linear-gradient(135deg,var(--ink2) 50%,transparent 50%);background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
textarea.inp{height:76px;padding:13px 15px;line-height:1.45;resize:none}
.inp:focus{outline:0;box-shadow:inset 0 0 0 2px rgba(214,42,58,.55)}
.inp::placeholder{color:#b2a099}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.note{margin-top:12px;padding:12px 14px;border-radius:16px;background:rgba(214,42,58,.07);font-size:13px;line-height:1.45}
/* Nummererede trin i en .note ("Sådan går det videre" på
   baglokalesiden). Browserens egen indrykning på 40 px er
   halvdelen af en telefons tekstbredde inde i et felt, der i
   forvejen har 14 px luft — tallene ville stå længere ude end
   overskriften over dem. */
/* DEN ANDEN VEJ IND (30/8). Kundens ord: "fjern ring og email fra
   toppen det skal være second options".

   Øverst på siden konkurrerede de to knapper med formularen — den,
   der lige er landet, blev bedt om at vælge mellem tre veje, før
   hun vidste, hvad hun ville spørge om. Her, under send-knappen,
   er de dét, de er: vejen for den, der hellere vil tale med et
   menneske. Stregen og den dæmpede linje siger "og ellers" uden
   at råbe; knapperne er de hvide, ikke den røde. */
.anden-vej{margin-top:20px;padding-top:16px;border-top:1px solid rgba(36,26,23,.10);text-align:center}
.anden-vej-tekst{display:block;margin-bottom:10px;font-size:13px;color:var(--muted)}
.anden-vej .callrow{margin-top:0}
/* ⚠️ ÉN KNAP SKAL IKKE STÅ I VENSTRE SPALTE  (4/9). .callrow er et
   grid med to lige spalter, fordi rækken normalt bærer Ring OG
   Send en mail. Cateringsiden har kun telefonen — mailen er sidens
   store handling ovenfor — og MÅLT på et skud stod "Ring til os"
   som en smal knap i venstre side af et centreret afsnit, altså
   som noget, der var faldet af. :only-child lader den fylde
   rækken. */
.anden-vej .callrow:has(> .g:only-child){grid-template-columns:minmax(0,240px);justify-content:center}
.note ol{margin:6px 0 0;padding-left:20px}
.note ol li{margin-top:5px}
.note ol li::marker{color:var(--red);font-weight:600}
.item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:18px;background:var(--cream2);box-shadow:var(--kant-inde);margin-top:8px}
.item.hi{background:rgba(214,42,58,.06);box-shadow:inset 0 0 0 1.5px rgba(214,42,58,.5)}
.item h4{font-size:15px;font-family:"Host Grotesk",system-ui,sans-serif;font-weight:600;line-height:1.25;letter-spacing:-.005em}
.item .tag{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--red);background:rgba(214,42,58,.12)}
/* VALG PÅ EN VARE (15/9): én linje pr. valg med sin egen tæller, under navnet. Ingen ny skriftstørrelse — navnet arver rækkens. */
.item-valg{display:grid;gap:6px;margin-top:8px}
.item-valg-linje{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* ⚠️ Navnet er det, der må brække (20/9). Uden flex+min-width:0 skrumper det ikke, og så er det tillægget, der bliver klemt. */
.item-valg-navn{font-weight:600;flex:1 1 auto;min-width:0}
/* TILLÆGGET PÅ ET VALG (20/9): is-kortet lover "glutenfri vaffel +3,-", og de tre kroner skal stå VED valget, ikke først på kvitteringen. margin-right:auto holder det op ad navnet — uden den lander det midt i linjen, fordi rækken er space-between.
   ⚠️ nowrap: MÅLT på iPhone 13, at mærket blev 21 px bredt og 30 px højt — "+3 kr." brækkede over to linjer midt i en prisoplysning. */
.item-valg-tillaeg{margin-right:auto;flex:0 0 auto;white-space:nowrap;font-size:12px;font-weight:600;color:var(--red)}
/* ⚠️ ISENS PORTIONER — HVAD SKAL DER I DEN ENKELTE VAFFEL  (25/9).
   Én række pr. portion under valgets linje, og ét felt pr. kugle.
   Nummeret foran siger, hvilken vaffel man er i gang med; med ÉN
   portion står der et 🍨 i stedet, for et "1" på en enlig is er støj.

   ⚠️ INGEN NY SKYGGE OG INGEN NY SKRIFTSTØRRELSE. Skralden stod på
   37 af 37 skygger og 29 af 30 størrelser, da det her blev skrevet
   (målt). Felterne er husets .inp, og 13px er rækkens egen. */
/* ⚠️ PORTIONERNE HÆNGER PÅ VALGETS LINJE — stregen til venstre er
   det eneste, der siger det. Målt på et skud (iPhone 13, 25/9):
   uden den lå de to rullelister midt imellem "Vaffel" og "Bæger",
   og en travl gæst kunne ikke se, hvilken af dem de hørte til. */
.is-portioner{display:grid;gap:6px;margin:6px 0 2px;padding-left:10px;border-left:2px solid rgba(214,42,58,.3)}
.is-portion{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* ⚠️ Nummeret må ikke skrumpe: uden flex:none klemmes det til en
   streg, når tre smagsnavne skal dele en telefonbredde. */
.is-portion-nr{flex:none;min-width:22px;font-size:13px;font-weight:600;color:var(--red);font-variant-numeric:tabular-nums}
/* ⚠️ min-width:0 OG flex:1: uden dem vokser et <select> efter sit
   LÆNGSTE option, og "Chokolade med lakrids" ville skubbe rækken ud
   over kanten på en iPhone. Målt-fælden fra .item-valg-navn, samme
   sted. */
/* ⚠️ OG PILENS PLADS MÅ IKKE ÆDE NAVNET. select.inp holder 38 px fri
   til sin egen pil — tal for et felt i fuld bredde. Her deler to
   felter en telefonrække og bliver 98 px hver, så de 38 var over
   en tredjedel: på et skud (iPhone 13) stod der "Lakrid" og
   "Mango". Pilen flyttes ind, og skriften er kortets egen 12 px
   (samme som .item-valg-tillaeg — ingen ny størrelse i skralden). */
/* ⚠️ select.is-smag OG IKKE .is-smag. Vælgeren ovenfor hedder
   "select.inp" (0,1,1) og slog en ren klasse (0,1,0): MÅLT 25/9
   stod feltet med 48 px, 15 px skrift og 38 px pileplads, mens
   der her i filen stod 38, 13 og 8. En klasse, der ikke slår
   igennem, er ingen regel — husets ældste målefælde, og den kan
   kun ses på den BEREGNEDE stil. Prøven er tests/skal-bestil.spec.js
   "smagsfeltet er det, filen siger". */
select.is-smag{flex:1 1 92px;min-width:0;height:38px;padding:0 20px 0 9px;font-size:12px;background-position:calc(100% - 12px) 16px,calc(100% - 8px) 16px}
/* ⚠️ DEN KUGLE, DER MANGLER EN SMAG, SKAL KUNNE SES — ikke først når
   gæsten trykker Send. "Smag" står i samme skrift som "Vanilje", og
   på et skud kunne de to ikke skelnes. Tonen og ikke en kant: husets
   felter tegner deres kant med box-shadow, og skralden stod på 37 af
   37 skygger (tests/typografi.spec.js). background-color alene lader
   rullelistens egen pil blive stående. */
select.is-smag.mangler{background-color:rgba(214,42,58,.1)}
/* --red-tekst og ikke --red (27/9): "+ tilføj" målte 4,27:1 på varekortets bund. Prøven så det
   først, da panelet stod fremme under målingen — gæsten har altid set det. */
.item .add{margin-left:auto;flex:none;font-size:13px;font-weight:600;color:var(--red-tekst)}
/* ⚠️ ET ANSIGT PR. KATEGORI I BESTILLINGEN (29/8). Fem rækker ren
   tekst — Grill fra pladen, Smørrebrød, Is og desserter … — hvor
   menukortet og bordsiden for længst havde tegn på de SAMME
   kategorier. Farven kommer fra afdelingen, som ejeren sætter i
   admin: tre sande farver slår enogtyve gættede. Målene er
   ved-bordet's, en anelse mindre — her står tegnet i en række,
   ikke på et kort. */
.item .kat-tegn{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:12px;font-size:17px;line-height:1;background:rgba(214,42,58,.1)}
.item .kat-tegn-is{background:rgba(255,139,118,.24)}
.item .kat-tegn-drikke{background:rgba(240,160,60,.24)}
/* ⚠️ ISEN HAR SIN EGEN FLADE, IKKE BARE SIT EGET TEGN  (25/9).
   Kundens ord: isen skal have "en anden farve ... for at inkludere
   det i det premium". Indtil i dag var det KUN de 34 px, der skilte
   en softice fra en burger — kortet under var det samme.

   ⚠️ FARVEN ER AFDELINGENS EGEN, IKKE EN NY. Koralen står allerede
   i .kat-tegn-is ovenfor og kommer fra det felt, EJEREN sætter i
   admin. Tre sande afdelinger slår enogtyve gættede — og en fjerde
   afdeling arver ingenting, så den ser ud som i dag.

   ⚠️ OG DER KOMMER INGEN NY SKYGGE MED. Skralden stod på 37 af 37,
   da det her blev skrevet (målt), så hårstregen er rækkens egen.
   Farven alene bærer forskellen; en ny ring ville have kostet en
   linje i loftet uden at sige mere. */
.item[data-afd="is"]{background:rgba(255,139,118,.16)}
.item[data-afd="is"] .kat-tegn{background:rgba(255,139,118,.3)}
/* ⚠️ ET HURTIGT TRYK ER ET TRYK, IKKE EN ZOOM  (13/9). Kundens ord:
   knapperne "er svær at ramme ordentlig uden at den tror man vil
   dobbelt trykke for at zoome ind". To tryk på + inden for et
   halvt sekund læste Safari som et dobbelttryk og zoomede siden.
   manipulation på roden slår KUN dobbelttryk-zoom fra — to fingre
   kan stadig zoome, så den, der har brug for større skrift, har
   det stadig. Og plusset er 38 px, ikke 30. */
html{touch-action:manipulation}
.step{margin-left:auto;flex:none;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:var(--kant-inde)}
.step button{width:38px;height:38px;border:0;border-radius:50%;background:var(--cream2);color:var(--ink);font-size:16px;font-family:inherit;cursor:pointer;transition:transform .3s var(--spring)}
.step button:active{transform:scale(.88)}
.step b{min-width:20px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
/* to-go / spis her — som forlægget */
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seg2 button{height:52px;border:0;border-radius:18px;background:var(--cream2);box-shadow:var(--kant-inde);font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:background .3s ease,color .3s ease,transform .3s var(--spring),box-shadow .3s ease}
.seg2 button svg{width:18px;height:18px;opacity:.75}
.seg2 button:active{transform:scale(.965)}
.seg2 button.on{background:#1c1512;color:#fff;box-shadow:inset 0 1px .5px rgba(255,255,255,.2),0 10px 24px rgba(28,21,18,.28)}
.seg2 button.on svg{opacity:1}
.fine,.jura-ved-send{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}
/* ugens dagens retter */
/* ⚠️ BLOKKENE FIK EN RUNDE (12/9). Kundens ord: "gør blokkene
   pænere". Tre ting, alle målt på et skud med rigtige retter:

   1) SKYGGERNE BLEV KLIPPET AF. .week er en rullebeholder, og en
      rullebeholder klipper alt uden for sin kasse — også kortenes
      skygge, som stod som en hård, grå kant under hele striben.
      Luften er lagt INDE i striben nu og trukket ud igen med en
      negativ margen, så kortene står nøjagtig, hvor de stod.
      På telefonen går striben ud til skærmens kant, så kortene
      ruller ud af billedet i stedet for at blive skåret ved spalten.
   2) PRISEN STÅR I BUNDEN, som en pille — den samme form som
      dagens ret-kortet. Før stod den lige under teksten, så to
      naboer med hver sin længde beskrivelse havde prisen i hver
      sin højde. --red-tekst og ikke --red: den lille skrift falder
      under 4,5:1 med mærkefarven selv.
   3) I DAG ER MÆRKET (.nu, sat af forside.js). Kortet sagde
      "Fredag · i dag" i samme skrift som resten af ugen; et kort
      med en rød ring er det, øjet finder først.
   ⚠️ INGEN NY SKYGGE: skralden står på 37 af 37 — ringen er
   dagens ret-rækkens egen (.item.hi). */
.week{display:flex;gap:10px;margin-top:2px;overflow-x:auto;padding:18px 0 36px;margin-bottom:-30px;scroll-snap-type:x mandatory;scrollbar-width:none}
.week::-webkit-scrollbar{height:0}
@media (max-width:820px){.week{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));padding-left:var(--pad);padding-right:var(--pad);scroll-padding-inline:var(--pad)}}
.day{flex:none;width:186px;scroll-snap-align:start;border-radius:22px;padding:16px;background:var(--paper);box-shadow:var(--skygge-let);display:flex;flex-direction:column}
.day .dw{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:600}
.day .dd{font-size:13px;color:var(--muted);margin-top:4px;padding-bottom:12px;border-bottom:1px solid rgba(36,26,23,.08)}
.day h4{font-family:"Host Grotesk",system-ui,sans-serif;font-size:15px;font-weight:600;line-height:1.35;margin-top:12px}
.day p{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--ink2)}
.day h4:has(+ .pr),.day p:has(+ .pr){margin-bottom:14px}
.day .pr{align-self:flex-start;margin-top:auto;font-size:15px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--red-tekst);background:var(--red-svag,rgba(214,42,58,.10));border-radius:999px;padding:6px 12px}
.day.nu{box-shadow:inset 0 0 0 1.5px rgba(214,42,58,.55),0 10px 26px rgba(214,42,58,.14)}
/* ---- STRIBEN: DEN SAMME RET FLERE DAGE I TRÆK (4/10) -------
   Kortet dækker fire-syv dage, hvor nabokortene dækker én, og så
   må det ikke have samme størrelse som dem: et bredt kort med et
   datospænd LÆSES som en periode, hvor et smalt læses som endnu
   en dag, man har glemt at give sin egen ret.

   ⚠️ BREDDEN ER min(), IKKE EN FAST VÆRDI. Striben er tit det
   eneste kort i rullebeholderen, og 300 px fast ville stikke ud
   over kanten på en lille telefon (320 px minus to gange --pad).
   Dagskortenes 186 px bliver stående — de skal kunne stå fire i
   træk og rulles. */
.day.spaend{width:min(300px,calc(100vw - 2 * var(--pad)))}
.day.spaend .dw{font-size:12px;letter-spacing:.14em}
.day.spaend .dd{font-size:14px;color:var(--ink2)}
.day.spaend h4{font-size:18px;letter-spacing:-.015em}
.day.spaend p{font-size:14px}
.day.closed{background:rgba(255,255,255,.6);box-shadow:none;border:1.5px solid rgba(36,26,23,.12)}
.day.closed.nu{border-color:rgba(214,42,58,.45)}
.day.closed:not(.nu) .dw{color:var(--muted)}
.day.closed .dd{border-bottom-style:solid}
/* Mørkere end før (13/9): lysegrå småt på creme var svært at læse. */
.day.closed h4,.day.closed p{color:var(--ink2)}
/* menukort */
.menucard{margin-top:20px;border-radius:28px;padding:22px 20px;background:var(--paper);box-shadow:var(--skygge-kort);display:grid;justify-items:center}
.tiles{display:flex;gap:10px}
.tiles span{width:56px;height:56px;border-radius:18px;background:var(--cream2);display:grid;place-items:center;color:var(--red)}
.tiles svg{width:24px;height:24px}
.menucard .g{margin-top:18px}
/* Kortene på dugen (27/9): billedet går til kortets kanter foroven, som tapaskortets foto. */
.menucard-foto{display:block;width:calc(100% + 40px);max-width:none;height:auto;aspect-ratio:4/3;object-fit:cover;margin:-22px -20px 20px;border-radius:28px 28px 0 0}
/* find os */
.hours{margin-top:20px;border-top:.5px solid rgba(36,26,23,.14)}

/* ============================================================
   BUNDEN ER TO KORT  (9/9)
   ------------------------------------------------------------
   Forlægget er et SKÆRMBILLEDE af spiis' egen bund, som kunden
   sendte: *"få bundne til at se sådan her ud istedet."* Der er
   hverken læst i eller kopieret fra deres kode. Formen er
   billedets, farverne er havnens.

   ⚠️ INGEN NY STØRRELSE OG INGEN NY SKYGGE. Skralden fra 5/9 er
   et LOFT, og den var MÅLT FULD: 30 af 30 font-size-værdier og
   37 af 37 skygger, da det her blev skrevet. Hver linje herunder
   bruger en størrelse, der ALLEREDE står i arket (11/13/17/22
   px), og de tre skygge-tokens. Kommer der en ny værdi, skal
   loftet hæves MED en grund i prøven.

   ⚠️ OG DEN LÅNER HUSETS EGNE FORMER. Kortet er `.panel`s papir
   og skygge, hovedet er `.row-card`s tegn-flise, rækkerne er
   `.hours`, knappen er `.g` og manchetten `.fine`. Et afsnit,
   der har sine egne former, læses som et, nogen har klistret
   ind.
   ============================================================ */
.findhoved{text-align:center}
/* ⚠️ FIND OS STÅR PÅ HAVNEN (11/9) — kundens billede, gjort mørkere.
   Tre lag i sektionen: den mørke grund (står, til fotoet er hentet,
   og er den, gennemgangens kontrastmåler læser), fotoet og sløret.
   ⚠️ SLØRET ER ÉN ENSARTET FARVE plus en tone i top og bund. Prøven
   regner overskriftens kontrast ud mod fotoets VÆRST tænkelige pixel
   (hvid sky) under den ensartede farve alene — gradienterne er kun
   ekstra. Gøres sløret lysere, falder prøven, før gæsten gør.
   Kortene er urørte: hvidt papir på et mørkt foto. */
#find{position:relative;isolation:isolate;background:#1a1210;padding-top:52px;padding-bottom:52px}
/* ⚠️ HISTORIEN BRUGER DE SAMME LAG (12/9) — kundens ord: "den måde find
   os tingene ligger ovenpå billedet i baggrunden er perfekt, samme case
   her". Samme regel, ikke en kopi: et slør, der rettes ét sted, skal
   gælde begge afsnit, og find-foto.spec.js regner kontrasten ud for
   dem begge. */
.find-bg,.find-bg img,.find-slor,.hist-bg,.hist-bg img,.hist-slor,.best-bg,.best-slor{position:absolute;inset:0;width:100%;height:100%}
.find-bg,.find-slor,.hist-bg,.hist-slor,.best-bg,.best-slor{z-index:-1}
.find-bg img,.hist-bg img{display:block;object-fit:cover;object-position:50% 45%}
.hist-bg img{object-position:50% 62%}

/* ============================================================
   GLASAFSNIT: BESTILLINGEN STÅR PÅ LUGEN — SOM FIND OS  (12/9)
   ------------------------------------------------------------
   Kundens ord: "kan vi få det til at være sådan som ved find os
   udseendemæssigt — start med bestil". Samme lag som Find os: ejerens
   foto, et slør med én ensartet farve (den fælles regel ovenfor), og
   et glaskort med lys tekst. Kun udseendet — formularen og motoren er
   urørte.

   ⚠️ FOTOET STÅR STILLE, MENS FORMULAREN RULLER (sticky). Formularen
   er over to tusind pixels høj på en telefon; med cover over hele
   afsnittet ville fotoet blive forstørret til en udvisket stribe.
   ⚠️ overflow:CLIP OG IKKE hidden PÅ .best-bg. hidden gør den til sin
   egen rullebeholder, og så klæber billedet ikke; clip klipper bare,
   så et afsnit, der er lavere end skærmen, ikke lægger fotoet ind
   over naboen.

   ⚠️ ALT ER SCOPET TIL .glasafsnit. h-smorrebrod.html bruger de samme
   klasser (.panel, .item, .inp) og har endda et panel med id="bestil"
   — et #bestil-scope ville ramme den side også.

   ⚠️ INGEN NY SKYGGE: skralden står på 37 af 37 (typografi.spec.js).
   Glaskortets skygge er Find os' tegn for tegn, linjerne er arkets egne.

   ⚠️ TRE TING ER HVIDT PAPIR OG BEHOLDER BLÆKKET: dagens ret-blokken,
   en valgt vare og tælleren. Et hvidt kort på glas er det, øjet
   finder først — og uden resettet arvede de panelets hvide tekst og
   stod hvidt på hvidt. De almindelige rækker er :not(.hi,.valgt).

   ⚠️ KVITTERINGEN ER OGSÅ PAPIR. Den afløser panelets indhold, og
   dens tal, linjer og priser er skrevet til en lys flade.
   ============================================================ */
.glasafsnit{position:relative;isolation:isolate;background:#1a1210}
.best-bg{overflow:clip}
.best-bg img{position:sticky;top:0;display:block;width:100%;height:100vh;height:100lvh;object-fit:cover;object-position:50% 38%}
.glasafsnit .eyebrow{color:rgba(255,255,255,.88)}
.glasafsnit h2{color:#fff}
.glasafsnit .sub{color:rgba(255,255,255,.86)}
.glasafsnit .panel{color:#fff;background:rgba(20,14,12,.3);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:inset 0 1px .5px rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.4),0 10px 26px rgba(0,0,0,.32)}
.glasafsnit .hint,.glasafsnit .fine,.glasafsnit .jura-ved-send,.glasafsnit .allergi-ja{color:rgba(255,255,255,.76)}
.glasafsnit .jura-ved-send a,.glasafsnit .fine a{color:#ffb3ba}
.glasafsnit .inp{color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2)}
.glasafsnit .inp:focus{box-shadow:inset 0 0 0 2px rgba(214,42,58,.55)}
.glasafsnit .inp::placeholder{color:rgba(255,255,255,.62)}
.glasafsnit select.inp option{color:#241a17;background:#fff}
.glasafsnit .item:not(.hi,.valgt){color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12)}
/* Isen i glasafsnittet — samme koral, men den skal bære en MØRK
   flade bagved og ikke cremen, så den er lysere end lyssidens.
   ⚠️ Kun fladen og tegnet skifter: teksten bliver hvid, og "+ tilføj"
   beholder sin #ffccd1, så kontrasten er den, der allerede er målt. */
.glasafsnit .item:not(.hi,.valgt)[data-afd="is"]{background:rgba(255,150,130,.19)}
.glasafsnit .item:not(.hi,.valgt)[data-afd="is"] .kat-tegn{background:rgba(255,190,175,.28)}
/* Smagsfelterne i glasafsnittet — samme behandling som sidens øvrige
   .inp dernede, så de ikke står som en hvid blok i en mørk række. */
.glasafsnit .is-portion-nr{color:#ffccd1}
.glasafsnit .is-portioner{border-left-color:rgba(255,190,175,.5)}
/* ⚠️ .glasafsnit .inp sætter background som GENVEJ, og en genvej
   nulstiller billedet: dernede har intet <select> en pil. For
   dato og tid er det en hel række, man ikke kan tage fejl af;
   et 98 px felt, der bare siger "Smag", ligner en knap. Pilen
   tegnes derfor igen her — lys, så den kan ses på det mørke. */
.glasafsnit select.is-smag,.glasafsnit select.isbyg-smag{background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.72) 50%),linear-gradient(135deg,rgba(255,255,255,.72) 50%,transparent 50%);background-position:calc(100% - 12px) 16px,calc(100% - 8px) 16px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.glasafsnit select.is-smag.mangler,.glasafsnit select.isbyg-smag.mangler{background-color:rgba(255,150,130,.22)}
/* ⚠️ OG FOR ISBYGGERENS VÆLGER OGSÅ (26/9). Reglen ovenfor blev
   skrevet til den gamle .is-smag, og isbyggeren kom med sin egen
   klasse 25/9 — så dens smagsvælgere stod uden pil på det mørke glas
   i et døgn, live, præcis den fejl noten beskriver. Målt på et skud,
   ikke fundet af en prøve; prøven står nu i tests/isbyggeren.spec.js. */
.glasafsnit .isbyg-kugle-nr{color:#ffccd1}
.glasafsnit .item:not(.hi,.valgt) .add,.glasafsnit .item:not(.hi,.valgt) .kat-valgt,.glasafsnit .item:not(.hi,.valgt) .tag{color:#ffccd1}
.glasafsnit .item:not(.hi,.valgt) .kat-valgt,.glasafsnit .item:not(.hi,.valgt) .tag{background:rgba(214,42,58,.28)}
.glasafsnit .item:not(.hi,.valgt) .vare-desc{color:rgba(255,255,255,.76)}
.glasafsnit .item.spoerg-pris h4{color:rgba(255,255,255,.76)}
.glasafsnit .item .spoerg-chip,.glasafsnit .item .spoerg-chip:hover{color:#ffccd1;background:rgba(214,42,58,.28)}
/* Den ventende kategori på det mørke glas (7/10) — se .item.venter-note
   længere nede. Samme vægt som linjen ovenfor, så den vinder. */
.glasafsnit .item.venter h4{color:rgba(255,255,255,.76)}
.glasafsnit .item.venter-note{background:rgba(214,42,58,.16);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12)}
.glasafsnit .item.venter-note p{color:rgba(255,255,255,.88)}
.glasafsnit .item.hi,.glasafsnit .item.valgt,.glasafsnit .dagens-blok,.glasafsnit .step{color:var(--ink)}
.glasafsnit .dagens-blok .item{color:var(--ink);background:none;box-shadow:none}
.glasafsnit .dagens-blok .item .add{color:var(--red-tekst)}
.glasafsnit .dagens-blok .item .tag{color:var(--red);background:rgba(214,42,58,.12)}
.glasafsnit .dagens-blok .item .vare-desc{color:var(--muted)}
.glasafsnit .panel:has(.kvit-tak){color:var(--ink);background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--skygge-kort)}
.glasafsnit .panel:has(.kvit-tak) :is(.hint,.fine,.jura-ved-send){color:var(--muted)}
.glasafsnit .seg2 button,.glasafsnit .chipset button{color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2)}
.glasafsnit .seg2 button.on,.glasafsnit .chipset button.on{color:var(--ink);background:#fff;box-shadow:inset 0 1px .5px rgba(255,255,255,.4)}
.glasafsnit .note:not(.sumbar){color:#fff;background:rgba(255,255,255,.1)}
.glasafsnit .hint.sidste-kald.gul{color:#ffd89a}
.glasafsnit .hint.sidste-kald.roed{color:#ffb3ba}
.find-slor,.hist-slor,.best-slor{background-color:rgba(26,18,16,.66);background-image:linear-gradient(180deg,rgba(26,18,16,.4),transparent 32%,transparent 72%,rgba(31,19,16,.55))}
#find .findhoved .eyebrow{color:rgba(255,255,255,.88)}
#find .findhoved h2{color:#fff}
/* ⚠️ KORTENE ER GLAS (11/9). Kundens ord: "find os og åbningstider
   liquid glass og sådan see-through agtig, iOS 18". Fotoet skinner
   igennem, sløret af glasset.
   ⚠️ MØRKT GLAS, LYS TEKST. Bag kortene ligger det mørklagte foto;
   lyst glas med mørk tekst kunne falde i en hvid sky, og husets røde
   (#b41f2e) forsvinder på mørk grund. Links og "i dag" er derfor en
   lys rosa. find-foto.spec.js regner hver tekst ud mod det lyseste,
   fotoet kan være — gennem sløret OG glasset: hvid 8,8:1, dæmpet
   5,9:1, rosa 5,2:1, statuspillen 6,0:1.
   ⚠️ SKYGGEN ER HEROENS GLASKNAP TEGN FOR TEGN (.hero-cta .g.ghost).
   Skralden fra 5/9 står på 37 af 37 skygger, og en ny værdi ville
   være den 38. Det er samtidig samme sprog: glas på et foto.
   ⚠️ blur OG INGEN mix-blend-mode, og kun på de to kort. Uden
   backdrop-filter står tonen alene og er stadig til at læse. */
#find .findkort{color:#fff;background:rgba(20,14,12,.3);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:inset 0 1px .5px rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.4),0 10px 26px rgba(0,0,0,.32)}
#find .fk-hoved h3,#find .fk-adresse{color:#fff}
#find .fk-under,#find .rute-note{color:rgba(255,255,255,.76)}
#find .fk-ic{background:rgba(255,255,255,.12);color:#ffb3ba}
#find .fk-status{color:#ffd3d7;background:rgba(214,42,58,.28)}
#find .findkort .hours{border-top-color:rgba(255,255,255,.18)}
#find .hours div{border-bottom-color:rgba(255,255,255,.14)}
#find .hours div span:last-child{color:rgba(255,255,255,.76)}
#find .hours div.now,#find .hours div.now span:last-child{color:#ffb3ba}
#find #find-kontakt a{color:#ffb3ba}
.findgrid{display:grid;gap:12px;margin-top:22px}
.findkort{padding:20px 18px;border-radius:28px;background:var(--paper);box-shadow:var(--skygge-kort)}
.fk-hoved{display:flex;align-items:center;gap:13px}
.fk-ic{flex:none;width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:rgba(214,42,58,.1);color:var(--red)}
.fk-ic svg{width:21px;height:21px}
.fk-hoved h3{font-size:22px;line-height:1.05;color:var(--ink)}
.fk-under{margin:5px 0 0;font-size:13px;line-height:1.4;color:var(--ink2)}
/* ⚠️ `--red-tekst` OG IKKE `--red`. Den lille skrift falder under
   4,5:1 med mærkefarven selv — samme regel som prisen på
   menukortet og "kun 3 tilbage" (5/9). */
.fk-status{display:inline-flex;align-items:center;gap:8px;margin:15px 0 0;padding:7px 14px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:0;color:var(--red-tekst);background:rgba(214,42,58,.09)}
.fk-adresse{margin:16px 0 0;font-size:17px;line-height:1.45;color:var(--ink)}
/* Rækkerne er `.hours`, men inde i et kort: luften er kortets, og
   den SIDSTE hårstreg ryger — en linje langs kortets egen kant
   ligner en række, der mangler sit indhold. */
.findkort .hours{margin-top:15px}
.findkort .hours div:last-child{border-bottom:0;padding-bottom:2px}

.hours div{display:flex;justify-content:space-between;gap:14px;padding:13px 2px;border-bottom:.5px solid rgba(36,26,23,.14);font-size:15px}
.hours div span:last-child{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.hours div span:last-child{font-variant-numeric:tabular-nums;color:var(--muted)}
.hours div.now{color:var(--red);font-weight:600}.hours div.now span:last-child{color:var(--red)}

/* ⚠️ RUTEN ER AFSNITTETS HANDLING (8/9) — og den laaner .g og
   .fine, saa der ikke kommer en ny stoerrelse i skalaen. Skralden
   fra 5/9 er et LOFT: 30 font-size-vaerdier, og en knap med sin
   egen 16 px ville vaere den 31. Her staar kun luft. */
.rute-knap{margin-top:22px}
.rute-note{margin-top:10px}

/* ============================================================
   JURA-SIDEN  (8/9)
   ------------------------------------------------------------
   Kundens ord: *"vi skal sikre os at hjemmesiden overholder
   lovgivningen og cookies, policies, alt det der."*

   ⚠️ INGEN NY STØRRELSE I SKALAEN. Skralden fra 5/9 er et LOFT
   på 30 font-size-værdier, og siden her er den længste tekst på
   hele hjemmesiden — den er præcis den slags, der plejer at få
   sin egen 16,5 px. Hver linje herunder bruger en størrelse, der
   ALLEREDE står i arket (15/17/21 px), eller kun luft og farve.

   ⚠️ OG DEN LÅNER HUSETS EGNE FORMER: `.panel`, `.hours`,
   `.note.trin-liste`, `.anden-vej` og `.fine` er de samme, som
   forespørgselssiderne bruger. En jura-side, der ser ud som en
   anden hjemmeside, læses som en, nogen har klistret ind.
   ============================================================ */
.jura{padding-bottom:clamp(40px,6vw,72px)}
.jura h2{margin-top:34px}
.jura-kort{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.jura-kort li{position:relative;padding-left:26px;font-size:15px;line-height:1.55}
.jura-kort li::before{content:"✓";position:absolute;left:0;top:0;color:var(--red-tekst);font-weight:700}
.jura-liste{display:grid;gap:14px;margin-top:16px}
/* ⚠️ 18 PX OG IKKE var(--r-lille) — fanget FØR udgivelsen.
   `--r-lille` findes i css/style.css og IKKE i det her ark, og en
   `var()` uden værdi og uden reserve gør hele erklæringen ugyldig:
   kanterne var blevet firkantede, uden en fejl nogen steder. Samme
   ar som `--overskrift` (24/8) og `--red-tekst` (5/9). Tallet står
   mellem panelets 28 og feltets — det er en kasse inde i en side,
   ikke et kort. */
.jura-blok{padding:18px;border-radius:18px;background:var(--cream2);
  box-shadow:inset 0 0 0 1.5px rgba(36,26,23,.1)}
.jura-blok h3{margin:0 0 8px;font-size:17px;line-height:1.25}
.jura-blok p{margin:0;font-size:15px;line-height:1.6}
.jura-blok .fine{text-align:left}

/* ⚠️ ALLERGIEN HAR SIN EGEN KANT, og det er ikke pynt: det er en
   HELBREDSOPLYSNING (artikel 9), og afsnittet siger, at et felt
   på en hjemmeside ikke er et menneske, der har hørt dig. Den
   linje skal kunne findes igen af den, der leder efter den. */
.jura-blok.jura-vigtig{background:rgba(214,42,58,.06);
  box-shadow:inset 0 0 0 1.5px rgba(214,42,58,.32)}
.jura-dato{margin-top:26px}

/* Footerens jura-link står som personale-linket: en linje, man
   skal kunne finde, ikke en, der skal sælge noget. */
/* ⚠️ 9 PX OG IKKE 6 — GENNEMGANGEN FANGEDE DET (8/9).
   Med 6 px blev linjen 29,x px høj, og gennemgangens gulv er 30.
   Mit eget måleskript skrev `Math.round(...)` og viste 30, så det
   LIGNEDE en bestået måling: rund af til visning, sammenlign på
   det rå tal. Nu er den 36 px med luft til overs.

   ⚠️ OG DET ER IKKE `display:inline-block` PÅ ALT. Netop den
   ændring limede footerens links sammen til "Bestil madMenukort"
   på syv sider 31/8. Her står linket alene på sin egen linje i
   .legal, så inline-block er sikkert — men se reglen for
   .jura a nedenfor, hvor linkene står MIDT i en sætning. */
.legal .jura-link,.legal .lavet-af{color:inherit;text-decoration:underline;
  text-underline-offset:2px;display:inline-block;padding:9px 0;margin:-9px 0}
/* ⚠️ SKILLETEGNET MELLEM DE TO JURA-LINKS  (10/9). Uden en regel
   er klassen ingen regel — arret fra .hvad-sker (4/9). Det er
   aria-hidden i opmærkningen: en skærmlæser skal ikke sige
   "prik" mellem to links, den læser dem som to punkter i
   forvejen. */
.legal .jura-skel, .fine .jura-skel { opacity: .55; }

/* ⚠️ LINKENE MIDT I JURA-SIDENS TEKST (8/9). Telefonnummeret i
   "ring til os" og datatilsynet.dk stod som 19 og 15 px — under
   gennemgangens gulv på 30. De er INLINE i en sætning, så de må
   IKKE blive inline-block: så brækker linjen omkring dem.

   `padding-block` på et inline-element vokser trykfladen UDEN at
   skubbe linjerne fra hinanden — det er hele forskellen på den
   her rettelse og fejlen fra 31/8. */
.jura a{padding-block:10px;margin-block:-10px}
/* Og linket i en underrubrik (27/9): "Skriv til os med jeres ønsker"
   under isen brød over to linjer, indtil bid 2 tog "Alt er muligt;"
   ud — på én linje målte det 20 px. Samme greb som juraen. */
.mid .sub a{padding-block:10px;margin-block:-10px}
/* Kontaktblokken i find-afsnittet (31/8): linkene skal kunne
   RAMMES — footerens 15 px-links kostede en runde samme dag,
   reglen kom til. Lodret padding i stedet for display-skift
   (inline-block på footerens links limede to links sammen til
   "Bestil madMenukort" — det ar gentages ikke). Rækkens egen
   padding klippes tilsvarende, så højden ikke vokser dobbelt. */
#find-kontakt a{padding:11px 0;margin:-11px 0;color:var(--red);font-weight:600;text-decoration:none}
/* footer */
/* ⚠️ BUNDLUFTEN SKAL KUNNE RUMME DEN FLYDENDE PILLE  (10/9).
   Målt på 1280 px, rullet HELT i bund: pillens top lå på 814 og
   footerens sidste linje ("Personale") sluttede på 828 — altså
   dækkede pillen linket med 14 px, og der var ikke mere at rulle.
   Det indhold kunne ALDRIG blive frit.

   Tallene har navne nu (--pille-h, --pille-bund), så luften og
   pillen ikke kan skride fra hinanden: rettes højden ét sted,
   følger footeren med. De 118 var rigelige på en telefon; det er
   computerarket, der satte dem ned til 72. */
footer{position:relative;background:#1f1310;color:rgba(255,255,255,.72);padding:30px var(--pad) max(118px, var(--pille-plads))}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:12px;background-color:#fff;background-image:repeating-linear-gradient(90deg,rgba(214,42,58,.6) 0 6px,transparent 6px 12px),repeating-linear-gradient(0deg,rgba(214,42,58,.6) 0 6px,transparent 6px 12px)}
footer h3{color:#fff;font-size:32px;margin:12px 0 18px}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:20px;font-size:13px}
.fcols b{display:block;color:#fff;font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.fcols a{display:block;color:rgba(255,255,255,.72);padding:3px 0}
.fcols a:hover{color:#fff}
.legal{margin-top:24px;padding-top:16px;border-top:.5px solid rgba(255,255,255,.14);font-size:11px;color:rgba(255,255,255,.55);line-height:1.6}
/* Vejen ind for personalet. Den stod i bunden af de gamle sider og fulgte ikke
   med, da forsiden blev skiftet ud 23/8 — startede man paa den nye forside, var
   der ingen vej ind i admin. Den er IKKE roed som andre links: #d62a3a paa den
   moerke sidefod rammer 3,67:1 og falder under 4,5:1 paa 11,5 px skrift. */
.legal .personale-link{display:inline-block;margin-top:8px;color:rgba(255,255,255,.62)}
.legal .personale-link:hover{color:#fff}
/* bestil-pille */
.bestil{position:absolute;bottom:var(--pille-bund);left:var(--pad);right:var(--pad);z-index:58;height:var(--pille-h);padding:0 4px 0 22px;border-radius:28px;font-size:15px;font-weight:600;color:#fff;background:linear-gradient(180deg,rgba(230,66,80,.94),rgba(184,26,40,.95));-webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%);box-shadow:inset 0 1.5px 1px rgba(255,255,255,.6),inset 0 -2px 2px rgba(120,10,18,.35),inset 0 0 0 .5px rgba(255,255,255,.28),0 10px 24px rgba(36,26,23,.28),0 20px 50px rgba(214,42,58,.3);display:inline-flex;align-items:center;justify-content:space-between;gap:14px;overflow:hidden;white-space:nowrap;transition:transform .45s var(--spring),opacity .3s ease,visibility 0s,scale .2s ease}
/* ============================================================
   PILLEN OG KURVBJÆLKEN ER FIGMAS MOBILE BAR  (11/10)
   ------------------------------------------------------------
   Mikkels ord: *"bestil knappen på telefon skal opdateres efter Figma
   sheetsne … gøres endnu bedre og mere bestil knap egnet og bar
   bedre"*. Formen er LÆST UD AF FIGMA-FILEN (LA31 Nav / Mobile bar,
   98:278: "350 × 56 (390 − 2 × 20)"): 56 høj, 20 px fra kanten,
   radius 28, teksten til venstre med 22 px luft og en knap på 48 med
   en linse på 40 til højre, 4 px inde (LA32 Button, 116:871). Farven er
   husets røde — det er siden ene knap til at bestille.
   · LINSEN er Figmas "Primary on dark" vendt til rødt: lys linse på den
     mørke flade, kant fra hvid til skygge i −45° (Edge/Specular on
     light), tegnet i husets mørkerøde. Ikonet stod før løst foran
     teksten; nu er det knappen, man trykker på — som i Figma
   · TRYKKET: iOS viser ikke :active (se havnegrillen.js) — `.trykket`
     sætter scale, og linsen bliver hvid
   ⚠️ 56 OG IKKE 58: --pille-h bærer også footerens luft
   (--pille-plads), så den følger med af sig selv.
   ============================================================ */
.pille-linse{position:relative;flex:none;width:48px;height:48px;display:grid;place-items:center;color:var(--red-tekst)}
.pille-linse::before,.pille-linse::after{content:"";position:absolute;inset:4px;border-radius:50%;pointer-events:none}
.pille-linse::before{background:rgba(253,247,239,.94);transition:background-color .18s ease}
.pille-linse::after{padding:1px;background:linear-gradient(135deg,#fff,rgba(0,0,0,.04) 55%,rgba(0,0,0,.22));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.bestil .pille-linse svg,.kurvbar .pille-linse svg{position:relative;z-index:1;width:18px;height:18px;flex:none}
.pille-linse .pil path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bestil.trykket,.kurvbar.trykket{scale:.97}
.bestil.trykket .pille-linse::before,.kurvbar.trykket .pille-linse::before{background-color:#fff}
.bestil:hover{color:#fff}
.bestil:active{transform:scale(.975)}
/* ⚠️ SKJULT ER visibility:hidden, IKKE KUN USYNLIG (12/9). Kundens ord med
   et skærmbillede af apple.com: "når man scroller ned kan man se alt, også
   under browser-tingen — det skal fixes alle steder". MÅLT I iOS 26 SAFARI
   (simulatoren, en side, der ruller af sig selv): så længe en SYNLIG pille
   står fastgjort nederst, lægger Safari en tæt bund ind under sin egen
   bjælke, farvet efter pillen eller siden — og indholdet bliver skåret af
   dér. Det gjorde den med fixed, med sticky, 110 px oppe, forankret fra
   toppen og uden sløring. En foldet pille på opacity 0 talte OGSÅ med;
   først visibility:hidden slap Safari. Derfor gemmer pillen sig helt, både
   når den er foldet væk (.tuck), og mens man ruller ned (.ned, sat af
   havnegrillen.js) — og visibility skifter først, når glidningen er færdig. */
.bestil.tuck,.bestil.ned{transform:translateY(150%);opacity:0;pointer-events:none;visibility:hidden;transition:transform .45s var(--spring),opacity .3s ease,visibility 0s linear .45s}
/* ⚠️ KURVBJÆLKEN (26/9) — se noten ved visKurvbar() i js/skal/bestil.js.
   Mikkels ord: "læg i kurven virker ikke". Den virkede; gæsten kunne bare
   ikke SE kurven. Bjælken er pillens form med pillens egne tal (farve,
   glas, skygge, højde), så den ikke bliver en ny slags knap — og så
   stilvagtens loft over skygger og størrelser står, hvor det står. Den
   tager pillens plads, mens der ligger noget i kurven. */
.kurvbar{position:fixed;bottom:var(--pille-bund);left:var(--pad);right:var(--pad);z-index:58;height:var(--pille-h);padding:0 4px 0 22px;border-radius:28px;font-size:15px;font-weight:600;color:#fff;text-decoration:none;background:linear-gradient(180deg,#e64250,#b81a28);-webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%);box-shadow:inset 0 1.5px 1px rgba(255,255,255,.6),inset 0 -2px 2px rgba(120,10,18,.35),inset 0 0 0 .5px rgba(255,255,255,.28),0 10px 24px rgba(36,26,23,.28),0 20px 50px rgba(214,42,58,.3);display:flex;align-items:center;gap:8px;white-space:nowrap;font-variant-numeric:tabular-nums;transform:translateY(150%);opacity:0;pointer-events:none;visibility:hidden;transition:transform .45s var(--spring),opacity .3s ease,visibility 0s linear .45s}
.kurvbar.vis{transform:none;opacity:1;pointer-events:auto;visibility:visible;transition:transform .45s var(--spring),opacity .3s ease,visibility 0s,scale .2s ease}
.kurvbar-sum{opacity:.86}
/* "Se og send" står ved linsen, og pilen er Figmas tegnede (44:189, drejet
   ned) i linsen — ikke et "↓" i skriften (33:25: "drawn — never a font glyph"). */
.kurvbar-pil{margin-left:auto;font-weight:500;opacity:.92}
/* ⚠️ BJÆLKEN ER HELT DÆKKENDE, ikke 94 % som pillen: den bærer beløbet,
   og på et skud (26/9) skinnede varelisten bag den igennem omkring
   "35,-". Glas er pynt; et beløb, der skal læses, er det ikke. */
/* Det, der røg ud af kurven ved et skift (26/9) — se sigFjernet() i
   js/skal/bestil.js. Blæk på sumlinjens bund, ikke rødt: det er en
   oplysning, ikke en fejl. */
.sum-fjernet{margin:6px 0 0;font-weight:600}
/* Pillen er en genvej TIL bestillingen. Er gæsten i gang, er det kurven,
   hun skal se — to røde bjælker i bunden ville være én for meget. */
body.har-kurv #bestil-pill{visibility:hidden;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.kurvbar,.kurvbar.vis{transition:none}}
/* ⚠️ OG UNDER FILMENS ÅBNING ER DEN VÆK FRA FØRSTE BILLEDE (11/9). Set
   i iOS 26-simulatoren: pillen "Bestil mad" blinkede frem i bunden et
   splitsekund, før scriptet nåede at folde den væk. Stilarket er
   hurtigere end scriptet; bagefter bestemmer pillens egen regel. */
html.film-aabner .bestil{transform:translateY(150%);opacity:0;pointer-events:none}
.homebar{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:132px;height:5px;border-radius:3px;background:rgba(36,26,23,.28);z-index:59;pointer-events:none}
/* sheet */
.sheet{position:absolute;inset:0;z-index:64;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;border-radius:44px;background:rgba(26,18,16,.34);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .4s ease}
.sheet.open{opacity:1;pointer-events:auto}
/* ⚠️ EN LUKKET SKUFFE SKAL VÆRE VÆK, IKKE BARE USYNLIG (14/9). Målt på
   menukortet på en computer, CPU ÷4: varekortets lag (#vare-lag) stod lukket
   på opacity 0 — og sløringen bag det (backdrop-filter over hele skærmen)
   blev STADIG tegnet ved hvert billede under rul. Ni billeder over 33 ms,
   nul med sløringen slået fra. visibility:hidden tager laget ud af tegningen;
   skiftet venter, til udtoningen er færdig, så den stadig glider. Og en lukket
   menu kan heller ikke fanges af tab-tasten. Alle tre skuffer (menuen,
   varekortet, kalenderens reservation) åbner med .open. */
.sheet{visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.sheet.open{visibility:visible;transition:opacity .4s ease,visibility 0s}
.sheet-in{border-radius:36px;padding:16px 16px 18px;background:rgba(253,247,239,.76);-webkit-backdrop-filter:blur(34px) saturate(200%);backdrop-filter:blur(34px) saturate(200%);box-shadow:inset 0 1px .5px rgba(255,255,255,.95),inset 0 0 0 .5px rgba(36,26,23,.08),0 30px 70px rgba(0,0,0,.4);transform:translateY(24px) scale(.97);opacity:.4;transition:transform .5s var(--spring),opacity .35s ease}
.sheet.open .sheet-in{transform:none;opacity:1}
.grab{width:38px;height:4px;border-radius:2px;background:rgba(36,26,23,.2);margin:0 auto 14px}
.sheet nav{display:grid;gap:3px}
.sheet nav a{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:18px;font-size:15px;font-weight:500;color:var(--ink);transition:background .25s ease,transform .3s var(--spring)}
.sheet nav a.on{background:rgba(255,255,255,.72)}
.sheet nav a:active{transform:scale(.975);background:rgba(255,255,255,.6)}
.sheet nav a span{font-size:12px;color:var(--muted);font-weight:400}
.sheet nav .sep{height:.5px;background:rgba(36,26,23,.12);margin:8px 6px}
.sheet-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.sheet-cta .g.blk{grid-column:1/-1}
/* ---- MENUEN ER EN MENU, IKKE ET GLAS  (14/9) ----------------
   Kundens ord: "de der tre-linjer knap … den er grim, gennemsigtig,
   uoverskuelig, og når man slider ned på telefonen, slider man end på
   hjemmesiden". Målt på en iPhone 13 FØR:
   · skuffen var højere end skærmen, og justify-content:flex-end skubbede
     de øverste punkter (Forside, Menukort, Tapas) op OVER skærmen — de
     kunne hverken ses eller nås
   · den var glas (.76 + blur), så Facebook-kortets blå skinnede igennem
     bag teksten
   · et rul i den åbne menu rullede siden bagved 1200 px
   Nu er den et fast, cremefarvet ark: listen ruller INDE i arket, og
   knapperne i bunden står fast. Siden bagved låses (menu-aaben på
   <html>, sat af havnegrillen.js) — kun under 821 px, hvor dokumentet er
   rulleren; på en computer ligger skuffen uden for #sc og ruller ikke med.
   ⚠️ INGEN blur PÅ FLADEN BAG: en sløring af hele siden koster billeder i
   sekundet netop, mens skuffen glider op. En mørk tone siger det samme. */
/* ⚠️ #sheet OG IKKE .sheet: menukortets varekort (#vare-lag) og
   kalenderens reservation bruger de SAMME klasser, og en regel på
   klassen lavede dem om uden at nogen havde bedt om det (fundet af
   prøven: to .sheet-in på én side). */
#sheet{background:rgba(20,14,12,.5);-webkit-backdrop-filter:none;backdrop-filter:none;overscroll-behavior:contain}
@media(max-width:820px){#sheet{padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}}
#sheet .sheet-in{display:flex;flex-direction:column;max-height:100%;min-height:0;background:#fdf7ef;-webkit-backdrop-filter:none;backdrop-filter:none}
.sheet nav{gap:0;overflow-y:auto;overscroll-behavior:contain;min-height:0;margin:0 -4px;padding:0 4px}
.sheet nav a{padding:13px 12px;border-radius:14px;font-size:16px}
/* Hårstregen mellem punkterne er en baggrund og ikke en skygge: arket
   har et loft på 37 skygger (typografi.spec), og en streg er ikke en ny
   beslutning om dybde. */
.sheet nav a+a{background-image:linear-gradient(rgba(36,26,23,.1),rgba(36,26,23,.1));background-size:calc(100% - 24px) .5px;background-position:12px 0;background-repeat:no-repeat}
.sheet nav a.on{background:rgba(214,42,58,.08);color:var(--red-tekst)}
.sheet nav a.on+a{background-image:none}
.sheet nav a:active{background:rgba(36,26,23,.06)}
.sheet-cta{flex:none;padding-top:12px;margin-top:4px;border-top:.5px solid rgba(36,26,23,.1)}
/* ⚠️ KUN <html>, IKKE <body>. Med overflow:hidden på body blev body sin
   egen rullebeholder, og den klæbende bjælke klæbede til DEN i stedet for
   til skærmen — målt: bjælkens top røg til −600, altså væk bag menuen.
   Låsen på <html> alene holder siden stille (målt med hjulet) og bjælken
   på plads. */
@media(max-width:820px){html.menu-aaben{overflow:hidden}}
/* Knappen: et hvidt, fast felt med ordet "Menu" — ikke tre streger på
   glas, man skal gætte sig til. Ordet er et ::after, så de fjorten sider
   ikke skal have ny opmærkning; aria-label="Menu" står der i forvejen.
   Under 361 px er der ikke plads til ordet ved siden af navnet. */
/* ⚠️ KNAPPEN ER GLAS IGEN (3/10) — den stod som et fladt hvidt
   felt ved siden af tilbage-pilen, der ER glas, og de to lignede
   ikke hinanden. Ordet "Menu" bliver: det var pointen i noten
   ovenfor, og det er ordet, ikke fladen, der gør knappen tydelig.
   Baggrunden er lidt tættere end .g's egen (.72 mod .62), så
   ordet stadig kan læses over et billede. */
.topbar .g.icn.menu{width:auto;padding:0 15px 0 13px;gap:7px;color:var(--ink);
  background:rgba(255,255,255,.72)}
.topbar .g.icn.menu::after{content:"Menu";position:static;inset:auto;background:none;border-radius:0;font-size:14px;font-weight:600;letter-spacing:.01em;pointer-events:none}
@media(max-width:360px){.topbar .g.icn.menu{padding:0;width:40px}.topbar .g.icn.menu::after{content:none}}
/* reveal */
/* ⚠️ INGEN scale I INDRULNINGEN (30/8). Kundens ord om
   smoerrebroedssiden: "animationen der ind med billederne er
   hakkende og ik clean."

   En skalering paa 1 % tvinger browseren til at rastere ALT
   indeni paa ny for hvert billede i overgangen — og paa den side
   er "alt" tre fotos paa flere hundrede kilobyte. Man ser ikke
   den ene procent; man ser hakket. Loeftet bliver. */
.rev{opacity:0;transform:translate3d(0,26px,0);will-change:opacity,transform}
/* ⚠️ UDEN JAVASCRIPT ER .rev SYNLIG (26/9). Det er havnegrillen.js, der
   sætter .in; uden den stod 38 blokke usynlige på forsiden for en læser
   uden JavaScript (en link-forhåndsvisning, en søgemaskine, en browser
   med scripts slået fra). Ren CSS: `scripting: none` er browserens egen
   besked om, at scripts ikke kører. */
@media (scripting:none){.rev{opacity:1;transform:none}}
.rev.in{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .78s var(--spring);will-change:auto}
.rev.in.d1{transition-delay:.07s}.rev.in.d2{transition-delay:.14s}.rev.in.d3{transition-delay:.21s}

/* ============================================================
   VARIATION I AFSLØRINGEN  (9/9)
   ------------------------------------------------------------
   Kundens ord: *"gerne gøre brug af sådan nogle her nye slags
   design de steder det giver mening, da det hele er lidt
   kedeligt og ikke så godt som det bør være eller eksklusivt —
   så du ved nye og bedre animationer, rigtig variation af
   animationerne … og husk det skal se godt ud på telefon."*

   MÅLT FØRST, ikke gættet: der er **68 `.rev`-elementer på de ti
   designsider, og de bruger ALLE den samme bevægelse** — stiger
   26 px og toner ind. Den eneste variation var 70/140/210 ms
   forsinkelse (d1/d2/d3). Han har ret: en side, hvor hvert
   afsnit, hvert kort og hver række kommer ind ad den samme vej,
   læses som ÉN bevægelse gentaget otteogtres gange.

   ⚠️ OG DER ER INGEN `scale` I NOGEN AF DEM — det er husets egen
   regel fra 30/8, og den er HANS EGNE ORD: *"animationen der ind
   med billederne er hakkende og ik clean."* En skalering på 1 %
   tvinger browseren til at rastere ALT indeni på ny for hvert
   billede i overgangen, og på smørrebrødssiden er "alt" tre
   fotos på flere hundrede kilobyte. Variationen kommer derfor
   fra RETNING, AFSTAND og TID — aldrig fra en skalering af noget
   med indhold i.

   ⚠️ OG SLUTTILSTANDEN ER `.rev.in`s EGEN. Varianterne skifter
   kun startpositionen; `transform:none` står allerede på
   `.rev.in`. Men `.rev.r-ind` vejer 0,2,0 — det SAMME som
   `.rev.in` — så rækkefølgen i arket ville afgøre det, og en
   variant skrevet efter `.rev.in` ville betyde, at intet
   afsløres. Derfor står sluttilstanden eksplicit med 0,3,0.

   ⚠️ OG DE SKAL STÅ STILLE FOR DEN, DER HAR BEDT OM DET.
   Blokken nederst i afsnittet er ikke pynt: `.rev{transform:none}`
   i reduced-motion vejer 0,1,0 og TABER til en variant på 0,2,0
   — så uden den linje ville en gæst med animationer slået fra se
   en side, hvor halvdelen af indholdet stod forskudt og
   usynligt. Det er 4/9-arret (*"punkterne begynder på opacity
   0"*) i en ny forklædning.
   ============================================================ */

/* --- 1) GLIDER IND FRA DEN LEDENDE KANT ---
   En række, man læser fra venstre, samler sig som en liste, når
   den kommer den vej. ⚠️ 14 PX OG IKKE 20: sektionens egen luft
   er 20 px (--pad), og en transform tæller med i dokumentets
   rulleflade (5/9-arret med spøgelses-rulningen på 63 px). Med
   14 px står kortet inde i luften, også mens det er på vej. */
.rev.r-ind{transform:translate3d(-14px,0,0)}
.rev.in.r-ind{transform:none;transition:opacity .42s ease,transform .52s var(--spring)}

/* --- 2) REN INDTONING ---
   Lange tekstblokke og alt med fotos i: her er bevægelse ikke
   elegant, den gør teksten svær at læse, mens den flytter sig.
   Og den er samtidig den BILLIGSTE af de tre. */
.rev.r-blaend{transform:none}
.rev.in.r-blaend{transform:none;transition:opacity .7s ease}

/* --- 3) HVEM FAAR HVAD ---
   ⚠️ SELEKTOREN ER KONTEKSTEN, IKKE EN NY KLASSE I HTML'EN
   (samme greb som admins rækkeknapper 26/8). Et nyt rækkekort
   arver bevægelsen af sig selv, og de ti designsider skal ikke
   redigeres for at få den. */
.row-card.rev,.nw.rev,.evcard.rev,.jura-liste .rev{transform:translate3d(-14px,0,0)}
.row-card.rev.in,.nw.rev.in,.evcard.rev.in,.jura-liste .rev.in{
  transform:none;transition:opacity .42s ease,transform .52s var(--spring)}
/* Fotos og lange tekster toner ind uden at flytte sig. */
.gal.rev,.tshot.rev,.hist-teaser.rev,.jura-blok.rev,.about .sub.rev{transform:none}
.gal.rev.in,.tshot.rev.in,.hist-teaser.rev.in,.jura-blok.rev.in,.about .sub.rev.in{
  transform:none;transition:opacity .7s ease}

/* --- 3b) «HVAD SKAL VI HJÆLPE MED?» — STILLE OG BILLIG BEVÆGELSE (11/10) ---
   Historien: 13/9 gled kortene 48 px ind fra hver sin side (kundens ord).
   10/10 blev de Figmas afdækning nedefra (clip-path). 11/10, Mikkels ord:
   *"animationen er ikke god nok og laggy og sjusket"*.
   ⚠️ ÅRSAGEN: clip-path kan ikke lægges på skærmkortet. Hvert billede af
   afdækningen blev tegnet om, og hvert kort havde backdrop-filter, så sløret
   blev regnet om seks gange pr. billede, mens man rullede. Og Safari klipper
   ikke backdrop-filter med clip-path under en overgang: en firkantet
   slørflade kan blinke uden for kortet. Det er "sjusket".
   Nu flytter bevægelsen KUN det, skærmkortet klarer alene — transform og
   opacitet — og pladerne har intet slør (se blokken PÅ FIGMAS PLADE):
   · kortene stiger 12 px med opacitet, 600 ms, Figmas kurve
     cubic-bezier(.2,.8,.2,1) (79:327), 60 ms pr. kolonne på computeren
     (71:182); på telefonen kommer hvert kort, når det når frem
   · havnens foto glider 24 px på plads, mens det toner ind — forsidens
     vandrette bevægelse (kundens "rigtig variation", 9/9; gennemgang.spec.js).
     ⚠️ INGEN SKALA (kunden 30/8: "hakkende og ik clean")
   · overskriften står stille (27/9, TEKST GLIDER IKKE IND)
   ⚠️ FORSINKELSEN GÆLDER KUN INDGANGEN (`--d`), og trykket er `scale`:
   et transform-tryk tabte til `transform:none` og blev slugt (målt 10/10).
   ⚠️ KUN VED no-preference: selektorerne vejer mere end reduced-motion-
   blokkens `.row-card.rev` (0,2,0). */
@media (prefers-reduced-motion:no-preference){
  #alt .rows>.row-card.rev{transform:translate3d(0,12px,0)}
  #alt .rows>.row-card.rev.in{transform:none;transition:opacity .6s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .6s cubic-bezier(.2,.8,.2,1) var(--d,0s),translate .18s ease,box-shadow .18s ease,scale .2s ease}
  #alt .alt-bund.rev{transform:translate3d(-24px,0,0)}
  #alt .alt-bund.rev.in{transform:none;transition:opacity .9s ease,transform 1.2s cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:no-preference) and (min-width:821px){
  #alt .rows>.row-card:nth-of-type(3n+2){--d:.06s}
  #alt .rows>.row-card:nth-of-type(3n){--d:.12s}
}

/* --- 4) TRIN I DE GENTAGNE LISTER ---
   Beholderen er ÉT `.rev`, så børnene kommer som en plade.
   Samme mønster som `.getlist` fik 4/9 — og med det samme loft:
   en forsinkelse, der vokser i det uendelige, efterlader det
   sidste kort blankt, mens det er synligt.

   ⚠️ BEHOLDEREN ER SELV `.rev`, IKKE FORÆLDER TIL ET.
   Første udgave skrev `.rev .week>*` — en EFTERKOMMER — og
   `.week` bærer selv klassen (`class="week rev d1"`). MÅLT i
   browseren: `.rev .week>*` traf **0** elementer på alle fem
   sider, og det samme gjorde `.facts` og `.findgrid`. Tre af
   fire regler var død CSS, der så helt rigtig ud i arket. Det er
   husets egen lov — *mål den BEREGNEDE stil, en klasse, der ikke
   slår igennem, er ingen regel* (`.dobbelt-titel` 31/8,
   `.kurv-videre` 31/8, `.mk-afsnit`s `--blæk` 7/9).

   Begge former står nu, så en beholder, der en dag bliver
   pakket ind i et `.rev`, også er dækket.

   ⚠️ OG `.findgrid` ER MED VILJE IKKE HER. Bundens to kort ER
   `.rev` hver for sig (`d1`/`d2`), så de er forskudt af husets
   egen forsinkelse i forvejen. En regel oveni ville være to
   steder, der siger noget om den samme rytme. */
.week.rev>*,.rev .week>*,.facts.rev>*,.rev .facts>*,
.tiles.rev>*,.rev .tiles>*{
  opacity:0;transform:translate3d(0,12px,0)}
.week.rev.in>*,.rev.in .week>*,.facts.rev.in>*,.rev.in .facts>*,
.tiles.rev.in>*,.rev.in .tiles>*{
  opacity:1;transform:none;transition:opacity .42s ease,transform .54s var(--spring)}
.week.rev.in>*:nth-child(2),.rev.in .week>*:nth-child(2),
.facts.rev.in>*:nth-child(2),.rev.in .facts>*:nth-child(2),
.tiles.rev.in>*:nth-child(2),.rev.in .tiles>*:nth-child(2){transition-delay:.07s}
.week.rev.in>*:nth-child(3),.rev.in .week>*:nth-child(3),
.facts.rev.in>*:nth-child(3),.rev.in .facts>*:nth-child(3),
.tiles.rev.in>*:nth-child(3),.rev.in .tiles>*:nth-child(3){transition-delay:.14s}
.week.rev.in>*:nth-child(4),.rev.in .week>*:nth-child(4),
.facts.rev.in>*:nth-child(4),.rev.in .facts>*:nth-child(4),
.tiles.rev.in>*:nth-child(4),.rev.in .tiles>*:nth-child(4){transition-delay:.21s}
.week.rev.in>*:nth-child(n+5),.rev.in .week>*:nth-child(n+5),
.facts.rev.in>*:nth-child(n+5),.rev.in .facts>*:nth-child(n+5),
.tiles.rev.in>*:nth-child(n+5),.rev.in .tiles>*:nth-child(n+5){transition-delay:.26s}



@media(prefers-reduced-motion:reduce){
  /* ⚠️ 0,2,0 SLÅR `.rev` PÅ 0,1,0 — uden de her linjer står
     halvdelen af siden forskudt og usynlig for den, der har
     slået animationer fra. */
  .rev.r-ind,.rev.r-blaend,
  .row-card.rev,.nw.rev,.evcard.rev,.jura-liste .rev,
  .gal.rev,.tshot.rev,.hist-teaser.rev,.jura-blok.rev,.about .sub.rev{
    opacity:1;transform:none;transition:none}
  .week.rev>*,.rev .week>*,.facts.rev>*,.rev .facts>*,
  .tiles.rev>*,.rev .tiles>*{opacity:1;transform:none;transition:none}
}
.side{position:fixed;left:32px;top:28px;color:rgba(255,255,255,.45);font:11px/1.7 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:1100px){.side{display:none}}
/* ⚠️ PAA EN TELEFON ER DER INGEN TELEFON-RAMME  (30/8 udvidet).
   Kundens ord: "hjemmesiden ift telefon skal vaere saa taet paa at
   fylde fuldskaermen som overhovedet muligt — fjern de der hul
   bars saa meget som muligt."

   Tre ting lavede de barer:

   · body har en naesten sort baggrund (#1a1210), som er
     artboardets bord. Bliver der bare ét hul, er det en SORT
     bjaelke — og paa en telefon ses den som en fejl. Fladen er
     sidens egen creme dernede.
   · height:100svh er den MINDSTE hoejde (med browserens bjaelke
     fremme). Skjuler Safari sin bjaelke, staar der et hul
     forneden. 100dvh foelger bjaelken; svh er reserven for de
     browsere, der ikke kender dvh.
   · display:grid + place-items:center centrerer rammen og lader
     resten staa tomt. Dernede skal den STRAEKKE. */
/* ============================================================
   RULLEROD'EN ER DOKUMENTET PAA EN TELEFON (5/9)
   ============================================================
   Kundens ord: "naar man scroller ned eller op saa du ved der i
   bunden er meningen skal blive mindre saa man ligesom faar hele
   hjemmesiden som saa meget fullscreen som overhovedet muligt".

   ⚠️ SAFARI FOLDER KUN SIN BUNDBJAELKE, NAAR DOKUMENTET RULLER.
   En indlejret rullebeholder — og .screen#sc ER en, med
   overflow-y:auto — roerer den aldrig. Der er ingen anden vej:
   det er ikke en indstilling, det er browserens egen regel.

   ⚠️ OG MAALT (5/9): DOKUMENTET RULLEDE 63 PX I FORVEJEN.
   Den flydende pille ligger UDEN FOR .screen og bliver foldet
   vaek med transform:translateY(150%) — og en transform taeller
   med i dokumentets rulleflade. Altsaa havde forsiden en
   spoegelses-rulning paa 63 px: nok til at Safari begyndte at
   folde bjaelken sammen og saa ramte enden med det samme. Det er
   det vaerste af de to verdener, og ingen kunne se hvorfor.
   Pillen er fixed hernede nu.

   ⚠️ ARTBOARDET BLIVER PAA EN COMPUTER. Rammen med de runde
   hjoerner er designets egen, og al rullelogik hang paa den;
   over 820 px ruller .screen som foer. Det er derfor
   havnegrillen.js SPOERGER, hvem der ruller, i stedet for at
   vaelge — se noten der.

   ⚠️ height:auto OG min-height, ikke height. Med en fast hoejde
   ville .screen stadig vaere praecis en skaerm hoej, og
   overflow:visible ville lade indholdet flyde ud over en ramme,
   der klipper. min-height holder en kort side fuld skaerm.

   ⚠️ 100% OG IKKE 100vw. Med dokumentet som ruller faar en smal
   computerskaerm en rullebjaelke, og 100vw er saa BREDERE end
   body — siden kunne rulles sidelaens, hvilket gennemgangens
   egen proeve slaar ned paa.
   ============================================================ */
@media(max-width:820px){
  body{padding:0;background:var(--cream);display:block;min-height:100dvh}
  .device{width:100%;height:auto;min-height:100svh;min-height:100dvh;border-radius:0;padding:0;box-shadow:none}
  .screen,.sheet{border-radius:0}
  .screen{height:auto;overflow:visible;overscroll-behavior:auto}
  /* Hakket og hjemmestregen: indholdet maa ikke ligge under dem. */
  .screen{padding-bottom:env(safe-area-inset-bottom,0px)}
  /* Pillen og skuffen laa absolut inde i .device. Naar .device
     bliver hele dokumentets hoejde, ville "bottom:24px" vaere 24
     px over SIDENS bund — altsaa 7 skaerme nede. De foelger
     skaermen nu. */
  .bestil{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .sheet{position:fixed}
}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none}.sheen{display:none}.eq i{animation:none}.hero::before{animation:none}}

/* tapas */
.thead{padding:calc(var(--top-luft) + 104px) var(--pad) 8px;margin-top:calc(-1 * (var(--top-luft) + 70px));position:relative;isolation:isolate;text-align:center;display:grid;justify-items:center;background:var(--cream)}
.thead::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--top-luft) + 100px);z-index:-2;background-color:#fff;background-image:repeating-linear-gradient(90deg,rgba(214,42,58,.62) 0 21px,transparent 21px 42px),repeating-linear-gradient(0deg,rgba(214,42,58,.62) 0 21px,transparent 21px 42px)}
.thead::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--top-luft) + 100px);z-index:-1;background:linear-gradient(180deg,rgba(26,18,16,.42),rgba(26,18,16,.1) 46%,var(--cream) 99%)}
.thead .eyebrow{color:var(--red)}
.thead h1{font-size:48px;color:var(--ink);margin-top:12px}
.thead .sub{color:var(--ink2);max-width:30ch}
.tshot{margin:18px var(--pad) 0;border-radius:24px;overflow:hidden;box-shadow:0 18px 44px rgba(36,26,23,.22);background:var(--cream2);aspect-ratio:4 / 3}
.tshot image-slot,.tshot img{width:100%;height:100%;object-fit:cover;display:block}
.tcap{margin:10px var(--pad) 0;font-size:13px;line-height:1.5;color:var(--muted);text-align:center}
.getlist{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin-top:14px}
/* ⚠️ ">" OG IKKE EN EFTERKOMMER  (4/9). Reglen ramte ENHVER
   <span> i listen, og en flex-beholder gør hvert inline-barn til
   sit eget flex-element. MÅLT på et skud af baglokalet:
   "Op til 40 siddende" stod som "Op ⎵40⎵ siddende / til", fordi
   tallets <span data-vilk> blev et element for sig.

   Designets egen brug (m-tapas.html) har kun direkte børn med ren
   tekst, så fejlen kunne ikke ses dér. Stramningen ændrer
   ingenting for den — den gør bare, at listen kan bære et tal,
   der skal fyldes af admin. */
.getlist>span{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.35;color:var(--ink)}
.getlist>span.wide{grid-column:1/-1}
.getlist svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--red)}

/* ⚠️ ET TEGN PR. PUNKT, IKKE DET SAMME 26 GANGE  (8/9).

   Kundens ord: *"hele catering siden er for lang og kedelig og
   statisk og generisk ift telefon udseendet."*

   MÅLT på de tre sider med .getlist: 26 punkter og ÉT unikt
   ikon — det samme lille hjerte hele vejen ned. Et mærke, der
   står ud for hver eneste linje uden at skelne dem, siger
   ingenting; øjet holder op med at se det efter to linjer, og
   listen bliver en søjle med en prik foran. Det er selve
   definitionen på generisk.

   ⚠️ OG DET ER EMOJI, IKKE TEGNEDE IKONER. Kundens beslutning
   5/9, efter at et helt tegnet sæt var bygget og udgivet:
   *"ærligt gå tilbage, men kun med de der pixels til emojier —
   vi nøjes med emojisne tak."*

   ⚠️ MEN KUN DÉR, HVOR LINJERNE ER FORSKELLIGE SLAGS. Catering
   og baglokalet svarer på *"hvad kan I gøre for os"* — hver
   linje er sin egen ting, og et fælles mærke siger ingenting.
   m-tapas' liste svarer på *"hvad ligger der PÅ fadet"*: dér
   hører punkterne til den SAMME ret, og det fælles hjerte
   betyder faktisk noget. Den beholder sit svg.

   ⚠️ OG TEGNET SIGER IKKE MERE END LINJEN. Samme lov som
   menu-emoji.js: 🌱 står ved "glutenfrit, vegetarisk eller uden
   løg", ikke ved noget, vi har fundet på. aria-hidden, så en
   skærmlæser ikke siger "brød smørrebrød og håndmadder". */
.getlist .gl-i{
  flex:none;width:15px;font-size:14px;line-height:1.35;font-style:normal;
  text-align:center;
}
/* Teksten som ÉT flex-barn. Uden den bliver hvert tekststykke og
   hvert <b>/<span> sit eget anonyme flex-element — se noten
   ovenfor. */
.getlist .gl-t{flex:1;font-style:normal}
.pricebox{display:flex;align-items:center;gap:12px;margin-top:10px;padding:13px 15px;border-radius:18px;background:rgba(214,42,58,.09)}
.pricebox b{font-family:"Host Grotesk",system-ui,sans-serif;font-weight:600;font-size:20px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--red);line-height:1.1;flex:none;min-width:74px}
.pricebox p{margin:0;font-size:13px;line-height:1.4;color:var(--ink2)}
.tnote{display:flex;align-items:flex-start;gap:9px;margin-top:12px;font-size:13px;line-height:1.45;color:var(--ink2)}
.tnote svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--red)}
/* ============================================================
   TAPASFADET SOM EN LILLE MENU  (28/9)
   ------------------------------------------------------------
   Mikkels valg af seks forslag (nr. 10): en rød blæktegning ved
   hver ting, prisen stort under listen og tilkøbene med prisen ude
   til højre. Kun .tapas-fad og .getlist.tegnet — catering og
   baglokalet har deres egen .getlist med et tegn pr. punkt og skal
   ikke ændres af det her.
   ============================================================ */
.getlist.tegnet{gap:12px 10px;margin-top:16px}
.getlist.tegnet>span{align-items:center;gap:10px;font-size:14px;line-height:1.3}
.getlist.tegnet img{width:44px;height:44px;flex:none;object-fit:contain}
.getlist.tegnet>span.wide img{width:56px;height:56px}
.tapas-pris{margin-top:18px;padding-top:16px;border-top:1px solid rgba(214,42,58,.18)}
.tapas-pris:not(:has(.pricebox:not([style*="none"]))){display:none}
.tapas-fad .pricebox{flex-direction:column;align-items:flex-start;gap:2px;margin:0;padding:0;background:none}
.tapas-fad .pricebox b{font-size:44px;font-weight:700;letter-spacing:-.025em;line-height:1;min-width:0}
.tapas-fad .pricebox p{font-size:15px;font-weight:600;color:var(--red-tekst)}
.laeg-til{margin:22px 0 6px;font-family:"Host Grotesk",system-ui,sans-serif;font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--red-tekst)}
.tilkoeb{list-style:none;margin:0;padding:0}
.tilkoeb li{display:flex;align-items:baseline;gap:8px;padding:5px 0;font-size:14px;line-height:1.35;color:var(--ink)}
/* Prikkerne mellem navn og pris, som på et trykt menukort. */
.tilkoeb li span{flex:1;display:flex;align-items:baseline;gap:8px;min-width:0}
.tilkoeb li span::after{content:"";flex:1;min-width:16px;border-bottom:1.5px dotted rgba(36,26,23,.3);transform:translateY(-4px)}
.tilkoeb li b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.tilkoeb-mere{margin:4px 0 0;font-size:13px;line-height:1.45;color:var(--ink2)}
.addon{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px;border-radius:18px;background:var(--cream2);box-shadow:var(--kant-inde)}
.addon h4{font-family:"Host Grotesk",system-ui,sans-serif;font-size:15px;font-weight:600}
.addon p{margin:4px 0 0;font-size:13px;color:var(--ink2)}
.addon .step{margin-left:auto}
.callbox{margin-top:14px;padding:15px;border-radius:20px;background:#1f1310;color:rgba(255,255,255,.78)}
.callbox h4{font-family:"Host Grotesk",system-ui,sans-serif;font-size:15px;font-weight:600;color:#fff}
.callbox p{margin:6px 0 0;font-size:13px;line-height:1.5}
.callbox .tel{display:inline-flex;align-items:center;gap:9px;margin-top:12px;height:44px;padding:0 18px;border-radius:999px;font-family:"Host Grotesk",system-ui,sans-serif;font-size:16px;font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:#fff;background:linear-gradient(180deg,#e2394a,#c11f2f);box-shadow:inset 0 1px .5px rgba(255,255,255,.45),0 8px 20px rgba(214,42,58,.35)}
.callbox .tel svg{width:16px;height:16px}
.sumbox{margin-top:14px;padding:14px 15px;border-radius:18px;background:var(--cream2);font-size:13px;line-height:1.45;color:var(--ink2)}
.sumbox b{color:var(--red);font-family:"Host Grotesk",system-ui,sans-serif;font-weight:600;font-size:20px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;display:block;margin-bottom:3px}
/* tapas-teaser på forsiden */
.teaser{position:relative;display:flex;align-items:center;gap:13px;margin-top:12px;padding:15px 44px 15px 15px;border-radius:22px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 1px .5px rgba(255,255,255,.95),inset 0 0 0 .5px rgba(36,26,23,.06),0 10px 26px rgba(36,26,23,.08);text-align:left;transition:transform .4s var(--spring)}
.teaser:active{transform:scale(.982)}
.teaser .ic{flex:none;width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:rgba(214,42,58,.1);color:var(--red)}
.teaser .ic svg{width:22px;height:22px}
.teaser h4{font-family:"Host Grotesk",system-ui,sans-serif;font-size:15px;font-weight:600;color:var(--ink)}
.teaser p{margin:4px 0 0;font-size:13px;line-height:1.4;color:var(--ink2)}
.teaser .go{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--red)}
.teaser .nyt{margin-bottom:6px}

/* hvem er vi */
.about{background:#1f1310;color:rgba(255,255,255,.74);padding:36px var(--pad) 40px;position:relative;overflow:hidden}
.about::after{content:"";position:absolute;right:-60px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(214,42,58,.3),transparent 70%);pointer-events:none}
/* ⚠️ HISTORIEN STÅR PÅ ET LUFTFOTO AF HAVNEN (12/9). Fotoet og sløret
   er Find os' egne lag (.hist-bg/.hist-slor), og kortene nedenfor er
   det samme mørke glas. Den røde glød i hjørnet er væk: den ville
   farve et sort-hvidt foto lyserødt i ét hjørne. Teksten er løftet,
   til den kan læses over en HVID sky — `.74` gav 3,9:1 dér, målt af
   find-foto.spec.js mod det lyseste, fotoet kan være. */
#omos{isolation:isolate}
#omos::after{display:none}
.about .eyebrow{color:rgba(255,255,255,.88)}
.about h2{color:#fdf7ef;font-size:38px;margin-top:10px}
.about p{margin:16px 0 0;font-size:15px;line-height:1.62;color:rgba(255,255,255,.86)}
.about p.lead{color:rgba(255,255,255,.86)}
.about .sign{margin-top:18px;font-family:"Host Grotesk",system-ui,sans-serif;font-style:italic;font-size:19px;color:#ff8b76}
/* HISTORIE-TEASEREN i det mørke afsnit (31/8). Den skal se ud som
   en dør ind til noget andet — derfor messing og ikke husets røde:
   rød betyder "bestil" på hver eneste flade i huset, og en rød
   knap her ville love mad i stedet for en fortælling. Farven er
   historiesidens egen, så de to hænger sammen, når man trykker. */
.about .hist-teaser{margin-top:30px;padding:20px;display:flex;gap:16px;align-items:flex-start;
  border:1px solid rgba(210,172,107,.28);border-radius:16px;
  background:rgba(20,14,12,.3);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}
.about .hist-teaser-tegn{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
  border-radius:12px;font-size:22px;background:rgba(210,172,107,.14)}
.about .hist-teaser h4{margin:2px 0 0;font-size:17px;font-weight:600;color:#fdf7ef;line-height:1.28}
.about .hist-teaser p{margin:8px 0 0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.76)}
/* ⚠️ TRYKFLADEN ER LODRET PADDING, ikke et display-skift.
   Footerens links blev limet sammen af inline-block 31/8 —
   "Bestil madMenukort" på syv sider. Den fælde gentages ikke. */
.about .hist-teaser-knap{margin-top:14px;display:inline-flex;align-items:center;gap:8px;
  padding:11px 0;color:#e6c68d;font-weight:600;font-size:15px;text-decoration:none;
  border-bottom:1px solid rgba(230,198,141,.5)}
/* ⚠️ MESSINGEN ER LYSERE OVER FOTOET (12/9): #d2ac6b gav 4,1:1 på
   glasset over en hvid sky — målt af find-foto.spec.js. Den lyse
   messing var før knappens hover-farve; hover er lysere endnu. */
.about .hist-teaser-knap:hover,.about .hist-teaser-knap:focus-visible{color:#f3dcae;border-bottom-color:#f3dcae}
.vals{display:grid;gap:10px;margin-top:22px}
.val{display:flex;align-items:flex-start;gap:13px;padding:15px;border-radius:20px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12)}
/* Kapitelkortene er Find os' glas: samme tone, samme sløring og
   heroens glasknaps skygge tegn for tegn (skralden, 37 af 37). */
#omos .val{background:rgba(20,14,12,.3);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:inset 0 1px .5px rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.4),0 10px 26px rgba(0,0,0,.32)}
.val .ic{flex:none;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:rgba(214,42,58,.18);color:#ff8b76}
.val .ic svg{width:20px;height:20px}
.val h4{font-family:"Host Grotesk",system-ui,sans-serif;font-size:19px;color:#fdf7ef;line-height:1.1}
.val p{margin:5px 0 0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.76)}

/* tapas-sektion på forsiden */
.tapasec{margin-top:20px;border-radius:28px;overflow:hidden;background:var(--paper);box-shadow:var(--skygge-kort)}
.tapasec image-slot,.tapasec>img{display:block;width:100%;height:190px;object-fit:cover;background:var(--cream2)}
.tapasec .body{padding:18px}
/* ⚠️ 11 PX, IKKE 10 OG IKKE 12  (27/9). De tre små mærker (.tapasec
   .nyt, .teaser .nyt, .evcard .kind) var de eneste på 10 px — alle
   andre mærker og eyebrows i huset er 11. MÅLT i 320 og 390: ved 12
   px brækker et arrangementsmærke med pris ("Spisning · 295,- inkl.
   buffet") i to linjer på en 390-skærm, og kortet bliver 14 px
   højere. 11 står på én linje dér. Ingen ny størrelse i skalaen.
   Samme aften blev "Nyhed" (.nyt) en .glaspille i almindelig skrift;
   reglen gælder nu .evcard .kind. */
.tapasec h3{font-size:29px;margin-top:10px}
.tapasec p{margin:9px 0 0;font-size:13px;line-height:1.5;color:var(--ink2)}
.tapasec .bits{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.tapasec .bits span{padding:5px 11px;border-radius:999px;font-size:12px;color:var(--ink2);background:var(--cream2)}
.tapasec .foot{display:flex;align-items:center;gap:12px;margin-top:16px}
.tapasec .foot .pris{font-size:15px;font-weight:600;color:var(--red);font-variant-numeric:tabular-nums;flex:none}
.tapasec .foot .pris small{display:block;font-weight:400;font-size:11px;color:var(--muted);margin-top:2px}
.tapasec .foot .g{flex:1}
/* ISEN (15/9): ejerens "kæmpe stolthed". Samme papirkort som tapas og
   menukortet, med to fotos side om side og menukortets egne priser.
   ⚠️ INGEN NY STØRRELSE OG INGEN NY SKYGGE — skralden står på 30/37.
   ⚠️ .is-priser har display, så [hidden] skal have sin egen regel
   (samme fælde som .music og .lk-tegn). */
.is-vitrine{margin-top:20px;border-radius:28px;overflow:hidden;background:var(--paper);box-shadow:var(--skygge-kort);display:grid}
/* ---- ISENS BAAND ER FJERNET  (25/9) -----------------------
   Det ternede baand med den tegnede is og "Ishuset" i kursiv er
   taget af paa Mikkels ord: *"det lige praecis saadan noget her
   claude lignende der skal vaek ogsaa"*. Kortet begynder paa
   fotoerne. Se noten i index.html. */
.is-fotos{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--cream2)}
.is-fotos img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 58%}
.is-kort{display:grid;gap:14px;padding:18px}
.is-priser{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.is-priser[hidden]{display:none}
/* ⚠️ GLASSETS UDSEENDE, IKKE DETS SLOERING. Linjerne staar paa
   kortets hvide flade, og et `backdrop-filter` over noget ensfarvet
   goer INGENTING at se paa — det koster bare billeder i sekundet.
   Det er husets egen graense fra 31/8: sloering kun paa flader, der
   ligger oven paa noget, der ruller forbi; lag, linsekant og
   indvendigt lys koster ingenting at tegne.
   28/9, aften: linjerne bærer husets klare glas (se "APPLES KLARE
   GLAS") — samme opskrift som allergien og de tre rækker øverst, og
   ikke længere en kopi af `.g` med diagonal glans. */
.is-priser li{display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:999px;
  position:relative;background:var(--glas-flade);box-shadow:var(--glas-skygge)}
.is-tegn{font-size:22px;line-height:1}
.is-navn{flex:1;font-size:15px;color:var(--ink)}
.is-pris{flex:none;font-size:15px;font-weight:600;color:var(--red-tekst);font-variant-numeric:tabular-nums}
.is-kort .fine{margin:0;text-align:center}
@media (min-width:821px){
  .is-vitrine{grid-template-columns:3fr 2fr}
  .is-fotos img{aspect-ratio:auto;height:100%;min-height:420px}
  .is-kort{align-content:center;padding:28px}
}

/* selskab & catering */
.selskab{padding:36px var(--pad) 38px;background:var(--cream2)}
.selskab .mid h2{font-size:38px}
.selskab h3{font-size:26px;margin-top:26px}
.selskab .body{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--ink2)}
.feats{display:grid;gap:9px;margin-top:16px}
.feat{display:flex;align-items:flex-start;gap:11px;padding:14px 15px;border-radius:18px;background:var(--paper);box-shadow:var(--skygge-let);font-size:13px;line-height:1.45;color:var(--ink2)}
.feat b{color:var(--ink);font-weight:600}
.feat svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--red)}
/* ⚠️ RÆKKERNE ER NU LÅST TIL HINANDEN (29/8), og det var et hul,
   der kun kunne ses på en bred skærm.

   Designet gav det store billede `height:100%;min-height:250px`
   og de to små en fast `height:120px`. På en telefon gik det
   tilfældigvis op: 120 + 9 + 120 = 249, og det store landede på
   sin min-height, 250. MÅLT på 1440 px, hvor spalten er 346 px
   bred, blev det store 461 px højt af sin egen billedhøjde, mens
   de to små blev stående på 120 — et hul på 212 px under dem, som
   lignede en side, der var gået i stykker.

   Nu bestemmer det STORE billedes format højden (aspect-ratio),
   rækkerne deler den ligeligt (1fr 1fr), og de to små fylder
   deres række ud. Så passer de tre altid, uanset skærmbredde —
   og der er ikke et tal, der skal gå op af sig selv. */
.gal{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:9px;margin-top:16px}
.gal image-slot,.gal .foto-felt,.gal .foto-fyldt,.gal .foto-skift{display:block;width:100%;border-radius:18px;overflow:hidden;background:var(--cream)}
.gal .tall{grid-row:1 / span 2;aspect-ratio:640 / 854;height:auto;min-height:0}
.gal .short{height:100%;min-height:0}
.gal .foto-fyldt{object-fit:cover}

/* Stemningsgalleriet i selskabsafsnittet (29/8, kundens egen
   bestilling med spiis som forlæg — og "smoothly ... forskellige"
   samme aften): tre fliser over ÉN fælles pulje. Skelettet er
   .gal's — det store billedes format sætter højden, rækkerne
   deler den (læren fra hullet på 212 px).

   Skiftet er en OVERGANG, ikke en keyframe-løkke: js/skal/
   forside.js sætter .vis på det nye foto og tager den af det
   gamle, én flise ad gangen. Begge fotos ligger stakket, så der
   aldrig er et hul at se ned i — det gamle står, til det nye er
   hentet OG blændet op. Reduced motion slår overgangen fra i
   CSS'en her og rotationen fra i koblingen. */
/* Ledighedskalenderen på selskabs- og baglokalesiden (29/8):
   gæstens overblik over optagne dage, fyldt af
   js/skal/forespoergsel.js fra visningen optagne_dage. En optaget
   dag er en STREGET dag, ikke en skjult — en dag, der mangler,
   ligner en fejl i kalenderen, ikke et lokale, der er lejet ud. */
.ledigkal{margin:4px 0 16px;padding:14px;border-radius:16px;background:rgba(214,42,58,.05)}
.lk-hoved{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.lk-hoved strong{font-size:15px}
.lk-pil{width:34px;height:34px;border:0;border-radius:12px;background:#fff;color:var(--ink);font-size:19px;line-height:1;cursor:pointer;box-shadow:inset 0 0 0 .5px rgba(36,26,23,.1)}
.lk-pil:disabled{opacity:.35;cursor:default}
.lk-uger{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px;font-size:11px;letter-spacing:.08em;color:var(--muted);text-align:center}
.lk-net{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.lk-dag{aspect-ratio:1;border:0;border-radius:10px;background:#fff;font:600 13px/1 inherit;font-family:inherit;color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 .5px rgba(36,26,23,.08)}
.lk-dag.fortid{background:transparent;box-shadow:none;color:var(--muted);opacity:.45;cursor:default}
.lk-dag.taget{background:rgba(214,42,58,.12);color:var(--red);text-decoration:line-through;cursor:default}
.lk-dag.valgt{background:var(--ink);color:#fdf7ef}
.lk-tom{aspect-ratio:1}
.lk-tegn{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:11px;color:var(--muted)}
/* ⚠️ EN KLASSE MED display SLÅR BROWSERENS EGEN [hidden]-REGEL (30/8).
   Forklaringen "Ledig / Optaget" skjules med el.hidden på de sider,
   hvor ingen dag kan være optaget — catering, frokost og et selskab
   ud af huset. Uden linjen her blev den stående og lovede en
   oplysning, nettet ikke giver: gaesten laeste "alle dage er ledige"
   ud af et net, der slet ikke ved noget om ledighed. Samme fælde som
   .music paa forsiden, og den blev fundet af en prøve, der maalte
   SYNLIGHEDEN og ikke attributten. */
.lk-tegn[hidden]{display:none}
.lk-prik{width:10px;height:10px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 .5px rgba(36,26,23,.2)}
.lk-prik.taget{background:rgba(214,42,58,.25);margin-left:10px}
.stemning{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:9px;margin-top:18px}
.stem-flis{position:relative;border-radius:18px;overflow:hidden;background:var(--cream2);min-height:0}
.stem-flis.stor{grid-row:1 / span 2;aspect-ratio:640 / 854;height:auto}
.stem-flis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 1.6s ease}
.stem-flis img.vis{opacity:1}
@media (prefers-reduced-motion:reduce){.stem-flis img{transition:none}}

/* ⚠️ DE FIRE TOMME FIRKANTER ER VÆK (29/8) — samme rettelse som
   nyhedskortene fik 26/8, den stod bare stadig fire steder til.
   MÅLT: tapasfadet og galleriets tre stod som stiplede grå
   kasser med "Foto: anretning" i midten; galleriet alene var
   740 px stiplet ingenting. Farverne er havnens, tegnet står i
   HTML'en, og er der et rigtigt foto, vinder det. Se visFotos()
   i js/skal/forside.js. */
.foto-felt{display:grid;place-items:center;font-size:52px;line-height:1;background:var(--cream2)}
.gal .foto-felt{display:grid}
.foto-felt.f-ost{background:linear-gradient(135deg,#f6e6d4,#eed3b6)}
.foto-felt.f-mad{background:linear-gradient(135deg,#f3dfe2,#e7c9cf)}
.foto-felt.f-broed{background:linear-gradient(135deg,#ece5dc,#ddd2c4)}
/* Nyhedskortenes egne pladser. De skiftes normalt ud af
   visNyheder — fladen her er kun til den dag, hentningen fejler,
   og designets to kort bliver stående. Samme mål som .nw-felt. */
.foto-felt.f-nyhed{background:linear-gradient(135deg,#ece5dc,#ddd2c4)}
.nw .foto-felt{width:100%;height:170px;font-size:46px}
/* ⚠️ HVER PLADS HAR SIN EGEN HØJDE, og fladen skal have DEN.
   Uden linjerne her falder feltet sammen til skriftens 52 px, og
   så ser afsnittet ud, som om billedet er halvt indlæst — værre
   end den grå kasse, det afløste. */
.tapasec .foto-felt,.tapasec .foto-fyldt{width:100%;height:190px}
.tapasec .foto-fyldt{display:block;object-fit:cover}
.tshot .foto-felt,.tshot .foto-fyldt{width:100%;height:100%}
/* ⚠️ TAPASFOTOET HAR ET FORHOLD, IKKE EN HØJDE  (11/9). Rammen var
   250 px høj på alle skærme — MÅLT 1400×250 på en computer, en tynd
   stribe over hele bredden, hvor kundens forlæg har ét stort foto.
   4:3 på telefonen og 16:9 (samme forhold som admins komprimering)
   op til 1100 px på en computer. Bredden regnes, så sidens luft
   står uændret, også når skærmen er smallere end loftet. */
@media (min-width:821px){.tshot{aspect-ratio:16 / 9;width:min(1100px,calc(100% - 2 * var(--pad)));margin-left:auto;margin-right:auto}}
/* Galleriet — se js/skal/billedplads.js. Kun opacity skifter. */
/* ⚠️ FOTOET TONER IND, NÅR DET ER HENTET (26/9). js/skal/billedplads.js
   sætter .foto-venter, til billedet er her. Kun opacity — en zoom eller
   et sløret billede tvinger browseren til at rastere hele fotoet om ved
   hvert billede (kundens ord 30/8: "hakkende og ik clean"). Bunden er
   pladsens egen creme, så der aldrig er et hul at se ned i. */
.foto-fyldt,.foto-skift{transition:opacity .7s cubic-bezier(.4,0,.2,1)}
.foto-venter{opacity:0}
@media (prefers-reduced-motion:reduce){.foto-fyldt,.foto-skift{transition:none}}
.foto-skift{position:relative;width:100%;height:100%;isolation:isolate}
/* Det nye billede toner ind OVEN PÅ det gamle, som står fuldt fremme
   under det (.forrige), til skiftet er færdigt — ingen halvgennemsigtig
   midte, hvor baggrunden skinner igennem. 0,9 s = TONE_MS i
   js/skal/billedplads.js. */
.foto-skift img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s cubic-bezier(.4,0,.2,1)}
.foto-skift img.vis{opacity:1;z-index:1}
.foto-skift img.forrige{opacity:1;transition:none}
@media (prefers-reduced-motion:reduce){.foto-skift img{transition:none}}
/* Tapasfilmen (26/9) ligger OVEN PÅ galleriets første billede, som er
   filmens eget sidste billede — når den tages væk, står det samme
   billede tilbage, og intet blinker. Se galleri() i js/skal/billedplads.js. */
.foto-skift .foto-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;pointer-events:none}
.tshot .foto-fyldt{display:block;object-fit:cover}
/* Galleriet flyttede til smørrebrødssiden (29/8), og dér er der
   ingen sektion med sidepolstring omkring det. Målet er .tshot's
   eget — den stribe, galleriet afløste, stod præcis sådan. */
/* ⚠️ TO NAVNE, ÉN REGEL. .smoer-galleri hedder, hvad den gør på
   smørrebrødssiden; cateringsiden har det samme galleri, og en
   klasse, der lyver om, hvilken side den står på, er en fælde for
   den, der læser koden om et halvt år. Den gamle selektor bliver
   stående — h-smorrebrod.html skal ikke røres for et navn. */
.smoer-galleri,.foto-galleri{margin:18px var(--pad) 0}
/* ⚠️ ET RUM SKAL KUNNE SES (14/9). Rammen var en stribe på 180 px —
   målt 350×180 på en telefon, altså et lokale set gennem en
   brevsprække. Nu et fotoformat (4:3; 16:10 på en computer), og
   rammen har forholdet, ikke højden, så den ikke skifter højde, når
   billederne skifter. Billederne i en pulje fylder rammen. */
.evhero .foto-felt,.evhero .foto-fyldt,.evhero .foto-skift{width:100%;height:auto;aspect-ratio:4 / 3}
.evhero .foto-skift img{height:100%;aspect-ratio:auto}
.evhero .foto-fyldt{display:block;object-fit:cover}
.stars{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13px;color:var(--ink2);flex-wrap:wrap}
.stars i{color:#e8a33c;font-style:normal;letter-spacing:.1em;font-size:14px}
.stars a{font-weight:600}
.talk{margin-top:22px;padding:24px 20px;border-radius:28px;background:var(--paper);box-shadow:var(--skygge-kort);text-align:center;display:grid;justify-items:center}
.talk h3{font-size:29px;margin-top:0}
.talk p{margin:11px 0 0;font-size:14px;line-height:1.55;color:var(--ink2);max-width:32ch}
.talk .g{margin-top:18px}
.talk .ring{margin-top:14px;font-size:13px;color:var(--muted)}
/* Understregningen er tekstens egen (13/9): som kant sad den under trykfladens luft, et stykke under tallet. */
.talk .ring a{color:var(--red-tekst);font-weight:600;font-variant-numeric:tabular-nums;border-bottom:0;text-decoration:underline;text-decoration-color:rgba(214,42,58,.35);text-decoration-thickness:1.5px;text-underline-offset:3px}

/* nyheder */
.nyheder{padding:34px var(--pad) 36px}
.promos{display:grid;gap:10px;margin-top:20px}
.promo{position:relative;padding:16px;border-radius:24px;overflow:hidden;color:#fff}
.promo h4{font-family:"Host Grotesk",system-ui,sans-serif;font-size:15px;font-weight:600;line-height:1.3;color:#fff}
.promo p{margin:6px 0 0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.8)}
.promo .cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:13px;height:42px;padding:0 18px;border-radius:999px;font-size:13px;font-weight:600;transition:transform .3s var(--spring)}
.promo .cta:active{transform:scale(.96)}
.promo .bic{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.18);margin-bottom:11px}
.promo .bic svg{width:19px;height:19px}
.promo.fb{background:linear-gradient(140deg,#2b7bf5,#1557c4)}
/* ⚠️ BLÅ IGEN (13/9) — kundens valg. Samme dag blev kortet lagt på husets
   papir; han så det og sagde: "gør lige facebook tingen i toppen blå som
   før". Farverne er de oprindelige. */
.promo.fb .cta{background:#fff;color:#1557c4}
.promo.ev{background:linear-gradient(140deg,#3a1d1c,#1f1210);box-shadow:inset 0 0 0 1px rgba(214,42,58,.4)}
.promo.ev .cta{background:linear-gradient(180deg,#e2394a,#c11f2f);color:#fff}
.newslist{display:grid;gap:12px;margin-top:16px}
.nw{border-radius:24px;overflow:hidden;background:var(--paper);box-shadow:var(--skygge-let);display:block}
.nw image-slot{display:block;width:100%;height:170px;background:var(--cream2)}
/* ⚠️ DEN TOMME BEIGE FIRKANT ER VÆK (26/8). image-slot ovenfor er
   designets pladsholder, og uden et foto var den bogstavelig talt
   en tom kasse paa forsiden. Nu enten et foto eller slagsens eget
   felt — se js/skal/forside.js. Farverne er havnens egne. */
.nw .nw-foto{display:block;width:100%;height:170px;object-fit:cover}
.tidl-felt.s-musik{background:linear-gradient(135deg,#f3dfe2,#e7c9cf)}
.tidl-felt.s-ret{background:linear-gradient(135deg,#f6e6d4,#eed3b6)}
.tidl-felt.s-tider{background:linear-gradient(135deg,#dde7ee,#c6d7e4)}
.tidl-felt.s-begivenhed{background:linear-gradient(135deg,#f0e2ef,#dfc9dd)}
.tidl-felt.s-andet{background:linear-gradient(135deg,#ece5dc,#ddd2c4)}
.nw .body{padding:16px}
.nw .when{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:600}
.nw h3{font-size:25px;margin-top:8px}
.nw p{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--ink2)}
/* ⚠️ TIDLIGERE PÅ HAVNEN (12/9). Kundens ord: "se tidligere sådan ting,
   der har været nede på havnen". En fold under nyhederne med de udløbne
   nyheder — js/skal/forside.js bygger den af Butik.nyhedStatus. Samme
   flade og skygge som nyhedskortet, og felterne deler nyhedskortets
   farver (reglerne ovenfor). ⚠️ SKRALDEN STÅR PÅ 30 OG 37: alle
   størrelser og skyggen her er arkets egne. */
.tidligere{margin-top:12px;border-radius:24px;overflow:hidden;background:var(--paper);box-shadow:var(--skygge-let)}
.tidligere summary{display:flex;align-items:center;gap:6px;min-height:52px;padding:0 16px;font-size:15px;font-weight:600;cursor:pointer;list-style:none}
.tidligere summary::-webkit-details-marker{display:none}
.tidligere summary .antal{color:var(--muted);font-weight:500}
.tidligere summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:translateY(-2px) rotate(45deg);transition:transform .25s ease}
.tidligere[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.tidl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:14px 16px;border-top:1px solid rgba(36,26,23,.08)}
.tidl-foto,.tidl-felt{width:88px;aspect-ratio:16/9;border-radius:10px}
.tidl-foto{display:block;object-fit:cover}
.tidl-felt{display:grid;place-items:center;font-size:22px;line-height:1;background:var(--cream2)}
.tidl .when{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-tekst);font-weight:600}
.tidl h4{margin:4px 0 0;font-size:17px;line-height:1.25}
.tidl p{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--ink2)}
/* Plakaten står på højkant (9:16) og er en knap: et tryk viser den i
   fuld størrelse i #plakat-vindue. */
.tidl-plakat{display:block;width:64px;aspect-ratio:9/16;padding:0;border:0;border-radius:10px;overflow:hidden;background:var(--cream2);cursor:zoom-in}
.tidl-plakat img{display:block;width:100%;height:100%;object-fit:cover}
.plakat-vindue{padding:0;border:0;background:transparent;max-width:94vw;max-height:94vh;overflow:visible}
.plakat-vindue::backdrop{background:rgba(20,14,12,.86)}
.plakat-stor{display:block;max-width:94vw;max-height:90vh;width:auto;height:auto;border-radius:14px}
.plakat-luk{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:999px;background:rgba(20,14,12,.66);color:#fff;font-size:22px;line-height:1;cursor:pointer}
/* ⚠️ ARKIVET KAN ÅBNES (13/9) — kundens ord: "man kan ikke klikke ind
   på dem for eventuelt at læse mere". Kun husets egne størrelser og
   skygger: skralden står på 30 og 37. */
.tidl-klik{cursor:pointer}
.tidl-klik:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.tidl-klik p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tidl-mere{display:inline-block;margin-top:6px;font-size:13px;font-weight:600;color:var(--red-tekst)}
.tidl-vindue{padding:0;border:0;border-radius:24px;width:min(560px,92vw);max-height:90vh;overflow:auto;background:var(--paper);color:var(--ink);box-shadow:var(--skygge-let)}
.tidl-vindue::backdrop{background:rgba(20,14,12,.86)}
.tidl-vindue-foto{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.tidl-vindue .ind{padding:18px 20px 22px}
/* Krydset står øverst til højre; uden foto lå det oven i overskriften. */
.tidl-vindue .when,.tidl-vindue h3{padding-right:52px}
.tidl-vindue .when{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-tekst);font-weight:600}
.tidl-vindue h3{margin:6px 0 0;font-size:22px;line-height:1.2}
.tidl-vindue .tekst{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--ink2);white-space:pre-line}
.tidl-vindue .stat{margin:12px 0 0;font-size:15px;font-weight:600}

/* service-rækker */
.rows{display:grid;gap:9px;margin-top:20px}
.row-card{position:relative;display:flex;align-items:center;gap:14px;padding:15px 44px 15px 15px;border-radius:22px;background:var(--paper);box-shadow:var(--skygge-let);transition:transform .4s var(--spring)}
.row-card:active{transform:scale(.982)}
.row-card .ic{flex:none;width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:rgba(214,42,58,.1);color:var(--red)}
.row-card .ic svg{width:21px;height:21px}
.row-card h3{font-size:22px;line-height:1.05;color:var(--ink)}
.row-card p{margin:5px 0 0;font-size:13px;line-height:1.4;color:var(--ink2)}
.row-card .go{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--red);font-size:16px;transition:transform .4s var(--spring)}
.row-card:active .go{transform:translateY(-50%) translateX(3px)}

/* undersider */
.phead{padding:calc(var(--top-luft) + 104px) var(--pad) 8px;margin-top:calc(-1 * (var(--top-luft) + 70px));position:relative;isolation:isolate;text-align:center;display:grid;justify-items:center;background:var(--cream)}
.phead::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--top-luft) + 100px);z-index:-2;background-color:#fff;background-image:repeating-linear-gradient(90deg,rgba(214,42,58,.62) 0 21px,transparent 21px 42px),repeating-linear-gradient(0deg,rgba(214,42,58,.62) 0 21px,transparent 21px 42px)}
.phead::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--top-luft) + 100px);z-index:-1;background:linear-gradient(180deg,rgba(26,18,16,.42),rgba(26,18,16,.1) 46%,var(--cream) 99%)}
.phead .eyebrow{color:var(--red)}
.phead h1{font-size:44px;color:var(--ink);margin-top:12px}
.phead .sub{max-width:32ch}
.facts{display:grid;gap:8px;margin-top:18px}
.fact{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border-radius:18px;background:var(--paper);box-shadow:var(--skygge-let);font-size:13px;line-height:1.45;color:var(--ink2)}
.fact b{color:var(--ink);font-weight:600}
.fact svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--red)}
.chipset{display:flex;flex-wrap:wrap;gap:8px}
.chipset button{height:40px;padding:0 15px;border:0;border-radius:999px;background:var(--cream2);box-shadow:var(--kant-inde);font-family:inherit;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;transition:background .25s,color .25s,transform .3s var(--spring)}
.chipset button:active{transform:scale(.95)}
.chipset button.on{background:#1c1512;color:#fff;box-shadow:inset 0 1px .5px rgba(255,255,255,.2),0 8px 20px rgba(28,21,18,.24)}
.callrow{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.callrow .g{width:100%}
.evlist{display:grid;gap:11px;margin-top:18px}
.evcard{position:relative;display:flex;gap:14px;padding:15px;border-radius:22px;background:var(--paper);box-shadow:var(--skygge-let)}
.evcard .date{flex:none;width:56px;text-align:center;padding-top:2px}
.evcard .date b{display:block;font-family:"Host Grotesk",system-ui,sans-serif;font-size:28px;font-weight:500;line-height:1;color:var(--red)}
.evcard .date span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.evcard .line{width:1px;background:rgba(36,26,23,.1)}
.evcard h3{font-size:22px;line-height:1.1;color:var(--ink)}
.evcard .kind{display:inline-block;margin-bottom:7px;padding:3px 9px;border-radius:999px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);background:rgba(214,42,58,.12)}
.evcard p{margin:7px 0 0;font-size:13px;line-height:1.5;color:var(--ink2)}
.evcard .g{margin-top:12px}
/* ⚠️ RESERVATIONEN VÆLGER MED KORT (13/9) — kundens ord: "man kan vælge
   imellem dem". Kun husets egne størrelser; den valgte har en KANT og
   ikke en skygge, for skralden står på 37 af 37. */
.ev-valg-titel{margin:0 0 10px;font-size:15px;font-weight:600}
.ev-valg{display:grid;gap:10px}
.ev-valg button{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;border:2px solid transparent;border-radius:18px;background:var(--cream2);font-family:inherit;text-align:left;color:var(--ink);cursor:pointer}
.ev-valg button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ev-valg button.on{background:var(--paper);border-color:var(--red)}
.ev-valg .d{flex:none;width:44px;text-align:center}
.ev-valg .d b{display:block;font-family:"Host Grotesk",system-ui,sans-serif;font-size:22px;font-weight:500;line-height:1;color:var(--red)}
.ev-valg .d span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ev-valg .t{flex:1 1 auto;min-width:0}
.ev-valg .t b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.ev-valg .t span{display:block;margin-top:2px;font-size:13px;color:var(--ink2)}
.ev-valg .fl{flex:none;width:22px;height:22px;border-radius:999px;border:2px solid rgba(36,26,23,.25);background:#fff}
.ev-valg button.on .fl{border:6px solid var(--red)}
.evcard.past{opacity:.55}
.evhero{margin:0 var(--pad);border-radius:24px;overflow:hidden;box-shadow:0 16px 40px rgba(36,26,23,.14)}
.evhero image-slot{display:block;width:100%;height:180px;background:var(--cream2)}

/* DAGENS BESKED er flyttet til css/dagsbesked.css (16/9) — banneret
   stod kun paa forsiden, fordi stilen kun fandtes i det her ark.
   Nu indlaeser ogsaa bestil/, bord/ og ved-bordet/ den fil. */


/* ============================================================
   STRIBEN ØVERST
   ------------------------------------------------------------
   Kundens ord (28/8): "en lille stripe øverst". Den bærer den
   besked, personalet skriver på Beskeder-fanen — den, der ikke
   hører til én dag: "vi holder ferie i uge 34".

   ⚠️ DEN LIGGER FØR TOPBJÆLKEN, ikke efter. Heroen har
   margin-top: -116px og glider op UNDER topbjælken; en stribe
   imellem dem ville blive dækket af heroen. Før bjælken er den
   det allerførste, gæsten møder — og den ruller væk, mens den
   klæbende topbjælke bliver.

   ⚠️ OG BJÆLKENS LUFT FOROVEN SKAL VIGE. .topbar har 58px
   padding-top for at holde fri af telefonens statuslinje. Med en
   stribe ovenover blev de 58px til et tomt hul mellem beskeden og
   logoet. Søskendevælgeren er hele rettelsen — striben behøver
   ikke vide noget om bjælken, og bjælken ikke om striben.

   ⚠️ RØD FLADE, HVID TEKST. Blæk på rødt er 3,1:1 og for lidt;
   hvid på #b41f2e er 6,2:1. Beskeden er typisk "vi har lukket" —
   den skal kunne læses i sollys på en telefon.
   ============================================================ */
.topstribe {
  position: relative;
  z-index: 60;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--pad) 10px;
  background: linear-gradient(135deg, var(--red-d), #8f1522);
  color: #fff;
}
.topstribe p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .005em;
  text-wrap: pretty;
}
/* Er striben der, har bjælken ikke brug for sin egen luft foroven. */
.topstribe:not([hidden]) + .topbar { padding-top: 14px; }
/* ⚠️ OG SÅ SKAL SIDEHOVEDETS OPTRÆK VIGE LIGE SÅ MEGET (5/9).
   Optrækket er --top-luft + 70. Spiser striben bjælkens luft
   uden at sige det videre, trækker heroen sig 128 px op mod en
   bjælke, der kun er 76 — og æder 52 px af den besked, striben
   findes for. Den sætter derfor det samme tal, bjælken får. */
.topstribe:not([hidden]) ~ .hero,
.topstribe:not([hidden]) ~ .thead,
.topstribe:not([hidden]) ~ .phead { --top-luft: 14px; }
.topstribe:not([hidden]) + .topbar.stuck { padding-top: 12px; }
/* Kalendersidens tomme liste og de to tilstande, et arrangement
   kan have uden en reservationsknap. Formen er designets .evcard;
   det her er kun de tilfælde, designet ikke tegnede — for det
   havde fem opfundne arrangementer, der alle kunne bookes. */
.evtom{padding:22px 18px;border-radius:20px;background:var(--cream2);text-align:center}
.evtom b{display:block;margin-bottom:6px;font-size:16px}
.evtom p{font-size:13px;line-height:1.5;color:var(--muted)}
.evfri,.evudsolgt{display:inline-block;margin-top:10px;font-size:13px;color:var(--muted)}
.evudsolgt{color:var(--red-d);font-weight:600}

/* ============================================================
   BESTILLINGEN: OVERBLIK, MARKERING OG FARVER  (30/8)
   ------------------------------------------------------------
   Kundens ord med sit eget forlæg i haanden: bestillingen skal
   foeles "lige saa let og nem", man skal "kunne se hvad man har
   bestilt", "det samler sig og giver overblik og regner ud" — og
   "farverne er for ens ift naar man bestiller med +'et".

   Det sidste var maalt rigtigt: .step button stod i --cream2 i en
   hvid pille oven paa en --cream2 raekke. Tre nuancer af den
   samme creme, og paa en telefon i sollys kunne man ikke se, hvad
   der var en knap.
   ============================================================ */

/* ---- TAELLEREN ----
   Roed paa hvid med en roed ring: knappen ligner en knap. Minus
   er slukket ved nul — baade rigtigt (man kan ikke taelle under
   nul) og en oplysning: raekken siger selv, at der ikke er valgt
   noget endnu. */
.step{background:#fff;box-shadow:inset 0 0 0 1px rgba(214,42,58,.18)}
.step button{background:#fff;color:var(--red);font-weight:700;
  box-shadow:inset 0 0 0 1.5px rgba(214,42,58,.32)}
.step button[data-d="+"]{background:var(--red);color:#fff;box-shadow:none}
.step button:disabled{color:rgba(36,26,23,.22);box-shadow:inset 0 0 0 1.5px rgba(36,26,23,.1);
  cursor:default}
.step button:disabled:active{transform:none}
.step.valgt b{color:var(--red);font-weight:700}

/* En valgt raekke skal kunne ses i en liste paa tredive. Hvid
   flade og en roed ring — samme greb som en valgt pille. */
.item.valgt{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(214,42,58,.4)}

/* ---- "N VALGT" PAA KATEGORIEN ----
   Med syv foldede kategorier kan gaesten ellers ikke se, HVOR hun
   har lagt noget. Tallet staar, uanset om folden er aaben. */
.item .kat-valgt{margin-left:auto;flex:none;padding:4px 11px;border-radius:999px;
  font-size:12px;font-weight:700;color:var(--red);background:rgba(214,42,58,.14)}
.item .kat-valgt.skjul,.item .add.skjul{display:none}

/* ---- DAGENS RET ER HOVEDTINGEN ----
   Kundens ord: "dagens ret skal have en markoer for sig selv, da
   det er deres hovedting". .item.hi var en svag roed toning — paa
   et skud kunne den ikke skelnes fra en valgt raekke. Nu er den
   hvid med en roed kant HELE vejen rundt og en baandstump i
   venstre side, saa oejet lander paa den foerst. */
.item.hi{position:relative;background:#fff;padding-left:22px;
  box-shadow:inset 0 0 0 1.5px rgba(214,42,58,.55),0 10px 26px rgba(214,42,58,.14)}
.item.hi::before{content:"";position:absolute;left:8px;top:12px;bottom:12px;width:4px;
  border-radius:999px;background:var(--red)}
.item.hi .tag{background:var(--red);color:#fff}

/* ---- JERES BESTILLING ----
   Kvitteringen, foer man sender: hvad, hvor mange, i alt. Moerk
   flade, saa den skiller sig ud fra listen over den — den er ikke
   én raekke mere, den er summen af dem. */
.note.sumbar{background:#1c1512;color:#fff;padding:14px 16px;border-radius:18px}
.note.sumbar .sum-hoved{color:#f0a58c;font-weight:700}
.note.sumbar .sum-linjer{font-size:13px;line-height:1.5}
.note.sumbar .sum-uden{color:rgba(255,255,255,.62)}
.note.sumbar .sum-total{margin-top:7px;font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums}

/* ============================================================
   ⚠️ EN KLASSE MED display SLÅR BROWSERENS EGEN [hidden]-REGEL
   ------------------------------------------------------------
   Det her er husets fjerde gang med den samme fejl, og de tre
   foerste blev lappet én klasse ad gangen: .ark, .fold-krop og
   .lk-tegn har hver sin [hidden]-regel laengere nede.

   Den fjerde kostede en rigtig booking. Kundens ord (30/8): "lagde
   et arrangement paa i kalenderen hvor prisen var 500 og pladser
   var 40, men ingen af de ting vises, og man kan ikke reservere
   en plads." MAALT: #kal-plads-felt er en .felt-par, og
   .felt-par har display:grid — saa Pladser og Pris stod fremme
   HELE tiden, mens fluebenet "Gaesterne skal kunne reservere
   plads" (en .felt uden display) korrekt var skjult. Ejeren
   udfyldte to felter, der aldrig blev sendt, og arrangementet kom
   i luften uden tilmelding.

   Reglen her lukker klassen af fejl i stedet for det naeste
   enkelttilfaelde. !important, fordi den skal slaa enhver
   display, ogsaa dem der bliver skrevet i morgen.
   ============================================================ */
[hidden] { display: none !important; }

/* ---- SIDSTE BESTILLING: GUL OG ROED  (30/8) ----
   Kundens ord: "hvis de er taet paa, blinker en gul eller roed."
   Gul fra halvfems minutter, roed fra tredive. Ingen blinken —
   en flade, der blinker, er svaerere at laese, ikke lettere, og
   den er ubrugelig for den, der har svaert ved bevaegelse. */
.hint.sidste-kald{margin-top:12px;padding:11px 14px;border-radius:14px;font-weight:600}
.hint.sidste-kald.gul{background:rgba(240,160,60,.18);color:#7a4a10}
.hint.sidste-kald.roed{background:rgba(214,42,58,.13);color:var(--red-d)}
.note.sumbar .sum-emb{color:rgba(255,255,255,.68)}
/* "fjern" på en is-linje (26/9, js/skal/bestil.js tagUd). Isen har
   ingen tæller i listen, så knappen er den eneste vej ud af kurven.
   24 px høj — mindstemålet for et tryk — på summens mørke bund. */
.note.sumbar .sum-fjern{margin-left:6px;padding:3px 10px;min-height:24px;
  border:1px solid rgba(255,255,255,.45);border-radius:999px;background:none;
  color:#fff;font:inherit;font-size:13px;cursor:pointer}
.note.sumbar .sum-fjern:hover{background:rgba(255,255,255,.1)}
.note.sumbar .sum-fjern:focus-visible{outline:2px solid #f0a58c;outline-offset:2px}

/* ---- MINDSTEANTALLET OG LEVERINGSOMRAADET  (4/9) ----
   To linjer, der svarer paa noget, gaesten er ved at goere:
   "I mangler to" og "vi koerer derud".

   ⚠️ INGEN AF DEM ER ROEDE. Roed betyder afvist i hele huset
   (.fejl over Send-knappen), og ingen af de her to er et afslag:
   mindsteantallet er en oplysning, hun stadig kan opfylde, og et
   postnummer uden for omraadet er et SPOERGSMAAL — ejeren koerer
   "laengere ude efter aftale". Farvede vi dem roede, ville de
   ligne en formular, der har sagt nej. */
#min-stk.min-mangler{
  margin-top:8px;padding:9px 13px;border-radius:13px;font-weight:600;
  background:rgba(240,160,60,.18);color:#7a4a10}
/* #lev-svar bor nu i css/style.css — begge sider indlaeser det. */

/* ============================================================
   LUFT I FORESPOERGSELSFORMULAREN  (30/8)
   ------------------------------------------------------------
   Kundens ord: "hele bestillings layoutet er lidt rodet, det
   meget klaebende og sammensat det hele — lad der vaere noget
   mellemrum og overskud derinde i den side."

   MAALT paa hans skud af h-selskaber: kalendernettet, datofeltet,
   antal, stedvalget og chipsene stod med 16 px imellem sig hele
   vejen ned, saa oejet ikke kunne se, hvor ét spoergsmaal slap og
   det naeste begyndte. Felterne har mere luft nu, og en gruppe
   (kalender, chips, segment) faar en streg over sig — den samme
   linje, .anden-vej bruger.
   ============================================================ */
.panel .field{margin-top:24px}
.panel .field:first-child{margin-top:0}
.panel .field>label,.panel .two-col>div>label{margin-bottom:10px}
/* Kalendernettet og pillerne er GRUPPER, ikke felter. De faar
   luft over sig, saa de laeses som et nyt spoergsmaal. */
.panel .lk{margin-top:8px;margin-bottom:8px}
.panel .chipset{margin-top:4px}
.panel .seg2{margin-top:4px}
/* To felter ved siden af hinanden skal ikke klistre. */
.panel .two-col{gap:14px}

/* ⚠️ OVERSKRIFTEN STOD TO GANGE. MAALT paa kundens skud: panelets
   h3 sagde "Hvad handler det om?" og feltets label sagde det
   samme lige under. Etiketten er feltets; overskriften er
   panelets — og naar de er ens, er den ene stoej. */
.panel>h3+.field>label.samme-som-hoved{display:none}

/* ---- ET ARRANGEMENT FOR SIG  (30/8) ----
   Kundens ord: "man skal kunne trykke ind paa de individuelle og
   se og laese mere omkring det og reservere derinde ogsaa." */
.evcard.evklik{cursor:pointer;transition:transform .3s var(--spring),box-shadow .3s ease}
.evcard.evklik:hover{transform:translateY(-2px)}
.evcard.evklik:active{transform:scale(.99)}
.evcard.evklik:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.ev-lag-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
#ev-lag h3{font-size:26px;line-height:1.1;margin-bottom:6px}
#ev-lag p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink2)}
#ev-lag .sheet-cta{margin-top:16px}

/* ---- ARRANGEMENTETS BILLEDE  (30/8) ----------------------
   Kundens ord: arrangementerne mangler "alle de oplysninger
   havnegrillen skal bruge — eventuelt info, billeder, alt
   muligt". Kolonnen kom med supabase/arrangement-info.sql.

   ⚠️ INGEN FAST HØJDE. Et billede af en scene og et af et
   langbord har ikke samme format, og en fast højde ville
   klippe det ene på midten. aspect-ratio holder rækken i ro,
   og object-fit sørger for, at motivet fylder den ud. */
.evcard .evfoto {
  display: block;
  width: 100%;
  margin-top: 10px;
  border-radius: 12px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: rgba(36, 26, 23, .06);
}

#ev-foto {
  width: 100%;
  margin: 10px 0 4px;
  border-radius: 14px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: rgba(36, 26, 23, .06);
}

/* ============================================================
   ANKRE MÅ IKKE LANDE UNDER TOPBJÆLKEN  (31/8)

   Kundens ord om tapassiden: *"tapas bestillings delen på telefon
   er elendigt ift layoutet — det skævt."*

   ⚠️ MÅLT PÅ EN IPHONE 13: .topbar er FAST og 115 px høj. Hopper
   man til et afsnit — "Bestil tapas", "Reservér plads", den
   flydende pille, et link i skuffemenuen — ruller browseren
   afsnittets top til skærmens top, og så ligger de øverste 115 px
   BAG bjælken. På tapassiden betød det, at panelets overskrift og
   hele den første række (Dag og Tidspunkt) var skjult, i det
   sekund man trykkede på knappen, der førte derhen.

   Det så ud som et skævt layout. Det var en manglende linje.

   css/style.css har haft reglen for de gamle sider siden i
   foråret (main [id] { scroll-margin-top: 96px }); designets eget
   stilark fik den aldrig. 128 px = bjælkens 115 plus lidt luft,
   så afsnittet ikke klæber til underkanten af den.
   ============================================================ */
/* ⚠️ DET ER RULLEROD'EN, DER SKAL BÆRE REGLEN.

   Første udgave satte scroll-margin-top på afsnittene. Målt:
   værdien VAR sat (computed = 128px), og panelet landede stadig
   på 0. Designet ruller ikke i vinduet — det ruller i .screen#sc
   (artboardets ramme, som blev stående, fordi al rullelogik
   hænger på den). I en indlejret rullerod er det containerens
   scroll-padding, der flytter landingspunktet.

   Endnu et tilfælde af husets egen regel: mål resultatet, ikke
   at værdien blev sat. */
/* ⚠️ html ER MED, FORDI RULLEROD'EN SKIFTER (5/9). Under 820 px
   ruller dokumentet, og saa er det dets scroll-padding, der
   flytter landingspunktet. Og tallet foelger topbjaelken af
   samme grund som heroen goer det. */
html,
#sc,
.screen {
  scroll-padding-top: calc(var(--top-luft) + 70px);
  scroll-padding-bottom: 110px;
}

main [id],
main[id],
section[id],
.panel[id] {
  scroll-margin-top: calc(var(--top-luft) + 70px);
}

/* ⚠️ OG DEN FLYDENDE PILLE I BUNDEN GØR DET SAMME NEDEFRA.
   Ruller man til noget, der ligger i bunden af siden, står
   pillen hen over det. Samme tal som .bestil er høj plus luft. */
main [id],
main[id],
section[id],
.panel[id] {
  scroll-margin-bottom: 110px;
}

/* ---- FODLINKENE SKAL KUNNE RAMMES  (31/8) -----------------
   ⚠️ MÅLT PÅ EN IPHONE 13 med en gennemgang af alle ti
   gæstesider: footerens links var 15-22 px høje. Telefonnummeret
   på forsiden var 17 px — og det er dét, en gæst nede ved vandet
   trykker på, når hun vil ringe og spørge, om der er åbent.

   Teksten bliver den samme størrelse; det er trykfladen, der
   vokser. En større skrift ville lave footeren om. */
/* ⚠️ SCOPET TIL .fcols OG .legal, IKKE TIL .foot.

   .foot er noget HELT andet i designet: prisrækken med "199 kr.
   pr. person" og knappen "Se og bestil tapas". En regel på .foot a
   ville have lagt luft i en designknap — præcis den slags, der
   sker, når en selektor vælges efter navnet i stedet for efter
   hvad den rammer. */
/* ⚠️ OG DEN MÅ IKKE SÆTTE display. FUNDET PÅ ET SKUD (31/8):
   første udgave skrev display:inline-block på .fcols a — men de
   ER block i forvejen (linje 192), én pr. linje. Med inline-block
   flød de sammen, og fodnotens "Havnen"-søjle kom til at stå
   "Bestil madMenukort" og "SelskaberCatering" — to links læst som
   ét ord. Kontakt-søjlen slap, fordi dens links er lange nok til
   at brække alligevel; det er præcis den slags, der kun ses med
   øjnene. Her er det KUN luften, der ændrer sig. */
footer .fcols a {
  padding: 11px 0;
}
/* .legal a er .personale-link, som ER inline-block i forvejen —
   den står midt i en linje og må ikke brække den. */
footer .legal a {
  padding: 7px 0;
}

/* ⚠️ OG DEN, DER STÅR MIDT I EN SÆTNING. "…eller ring til os på
   28 87 13 43" under selskabsknappen var 17 px — det mindste
   trykmål på hele forsiden, og det er et TELEFONNUMMER. Gæsten
   står nede ved vandet med den ene hånd optaget.

   Den er inline i en tekst, så den må ikke bryde linjen: derfor
   inline-block med lodret luft og ingen ændring i skriften. */
.ring a[href^="tel:"] {
  display: inline-block;
  padding: 10px 4px;
  /* Uden det her skubber luften linjeafstanden i afsnittet. */
  margin: -10px 0;
  font-weight: 700;
}

/* ---- EMOJI-FLISERNE PÅ MENUKORT-KORTET  (31/8) -------------
   Kundens skærmbillede: fire emoji i stedet for streg-ikonerne. */
.tiles .tile-emoji{font-size:27px;line-height:1}

/* ---- GENNEMGANGEN 13/9 -------------------------------------
   Kundens ord: "noget er forældet, kontrasterne nogle steder er
   dårlige og kedelige og matcher ikke med det nye". Kun husets egne
   størrelser, farver og skygger — skralden står på 30 og 37. */
/* Menukort-kortet viser kortets egne kategorier (visMenuKategorier). */
.tiles.tiles-kat{flex-wrap:wrap;justify-content:center;gap:8px}
.tiles .tile-kat{width:auto;height:auto;min-height:40px;padding:8px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink)}
.tiles .tile-kat-tegn{width:auto;height:auto;display:inline;background:none;font-size:17px;line-height:1}
/* De dage, der ikke er lagt op endnu, er ÉN linje i striben — ikke seks stiplede kort. */
.day-mere{flex:none;display:grid;place-items:center;width:150px;padding:16px;border-radius:22px;background:rgba(255,255,255,.6);scroll-snap-align:start}
.day-mere p{margin:0;font-size:13px;line-height:1.45;color:var(--ink2);text-align:center}
/* En knap, der ikke kan trykkes, må ikke ligne en, der kan: "Vælg noget først" stod i fuld rød. */
button.g.solid:disabled,.glasafsnit button.g.solid:disabled{background:#6f5b55;color:#fff;box-shadow:none;cursor:not-allowed}
button.g.solid:disabled .sheen{display:none}


/* Smiley-rapporten — se noten i css/style.css. Designsidernes
   footer er mørk, så chippen står på sin egen lyse grønne. */
footer .smiley-linje{
  display:inline-flex;align-items:center;gap:8px;
  margin:16px 0 4px;padding:10px 16px;border-radius:999px;
  /* Husets mørke, ikke olivengrøn (13/9) — en farve, huset ellers ikke bruger. */
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.88);
  font-size:13px;
}

/* ---- KONTAKT OG FÅ ET TILBUD  (31/8) ------------------------
   Kortet står FØR bestillingsformularen på smørrebrødssiden: den,
   der skal bruge fyrre stykker til en reception, skal ikke først
   tælle sig igennem en formular for at opdage, at hun hellere vil
   skrive. Knappen er husets sorte hovedhandling — ikke rød: rød
   er "bestil nu", og det her er "skriv til os". */
.tilbud-kort{margin-top:18px}
.tilbud-kort .fine{margin-top:12px}
.tilbud-knap{width:100%;justify-content:center;margin-top:16px}

/* ============================================================
   BESKRIVELSEN PÅ EN BESTILLINGSRÆKKE  (31/8)
   ------------------------------------------------------------
   Kundens ord: en beskrivelse til dagens ret, "som de kan styre
   og administrere". Den bor i menukortet og i dagens_retter og
   har altid været der — den stod bare ikke, hvor gæsten
   bestiller. bestil/ og ved-bordet/ har haft den siden foråret
   (.stk-tekst .desc), så det her er den samme regel i designets
   eget sprog, ikke en ny.

   ⚠️ MAKS-BREDDEN ER MED VILJE. En beskrivelse på tre linjer
   skubber tælleren ned og gør rækken dobbelt så høj; 46 tegn er
   det samme loft, css/style.css har på .linje-navn .desc, så de
   to lister ikke skrider fra hinanden.
   ============================================================ */
.item .vare-desc{margin:5px 0 0;font-size:13px;line-height:1.45;
  color:var(--muted);max-width:46ch}
.item.hi .vare-desc{color:var(--ink);opacity:.72}

/* Billedet på en bestillingsrække (31/8). .item er allerede
   flex; flisen sætter sig først og krymper ikke. Ingen
   pladsholder — en række uden foto ser ud som før. */
.item .item-foto{flex:none;width:52px;height:52px;border-radius:14px;
  object-fit:cover;display:block;background:rgba(36,26,23,.05)}

/* ============================================================
   EN VARE UDEN PRIS  (31/8)
   ------------------------------------------------------------
   Reglen er husets fra 26/8: kan vi prissætte det, kan det
   bestilles — kan vi ikke, kan der ringes. Rækken VISES, for en
   vare, der forsvinder, ligner en vare, der ikke findes.

   bestil/ og ved-bordet/ har gjort det siden da; designsiderne
   gjorde det ikke. Det blev synligt med "1 mad er 1 mad", hvor
   ejerens 29 fyld blev varer på lige fod — uden priser endnu.

   ⚠️ RÆKKEN ER DÆMPET, IKKE GENNEMSTREGET. Gennemstreget
   betyder udsolgt: den findes ikke i dag. Den her findes — vi
   kender bare ikke prisen.
   ============================================================ */
.item.spoerg-pris{background:transparent;
  box-shadow:inset 0 0 0 1px rgba(36,26,23,.1)}
.item.spoerg-pris h4{color:var(--ink2)}
.item .spoerg-chip{margin-left:auto;flex:none;padding:8px 14px;
  border-radius:999px;font-size:13px;font-weight:600;
  color:var(--red-d);background:rgba(214,42,58,.1);white-space:nowrap}
.item .spoerg-chip:hover{background:rgba(214,42,58,.18);color:var(--red-d)}

/* ============================================================
   EN UDSOLGT VARE  (2/9)
   ------------------------------------------------------------
   MÅLT af tests/tre-veje.spec.js: en vare, personalet meldte
   udsolgt, forsvandt HELT fra forsiden, mens den stod
   gennemstreget på bestil/ og ved bordet. Tre lister over det
   samme sortiment, hvor den ene sagde, at retten ikke fandtes.

   Formen er de to andre siders (.stk-linje.udsolgt): streg
   igennem navnet og et mærkat med ejerens eget ord. Ingen
   tæller — det, man ikke kan få, skal ikke have en plusknap,
   der bare siger nej.
   ============================================================ */
.item.udsolgt{background:transparent;
  box-shadow:inset 0 0 0 1px rgba(36,26,23,.1)}
.item.udsolgt h4{color:var(--ink2);text-decoration:line-through;
  text-decoration-thickness:1px}
.item.udsolgt .item-tegn{opacity:.45}
.item .udsolgt-chip{margin-left:auto;flex:none;padding:8px 14px;
  border-radius:999px;font-size:13px;font-weight:600;
  color:var(--ink2);background:rgba(36,26,23,.07);white-space:nowrap}

/* ============================================================
   EN KATEGORI, DER VENTER PÅ VARSLET  (7/10)
   ------------------------------------------------------------
   Chefens ord: smørrebrød, håndmadder og frokost skal stå "som en
   bjælke under Morgenmad i den lange sorte menu vælger boks" — ikke
   "nede i bunden". Bjælken står nu på sin plads med "fra kl. 11.30"
   (js/skal/bestil.js, ventendeKategorier). Åbnet står grunden og én
   knap til det første tidspunkt, og varerne står dæmpede UDEN tæller,
   som de prisløse: de findes, de kan bare ikke nås til det valgte.
   ============================================================ */
.item.venter{background:transparent;box-shadow:inset 0 0 0 1px rgba(36,26,23,.1)}
.item.venter h4{color:var(--ink2)}
.item.venter-note{flex-wrap:wrap;gap:10px 14px;
  background:rgba(214,42,58,.06);box-shadow:inset 0 0 0 1px rgba(36,26,23,.1)}
.item.venter-note p{margin:0;flex:1 1 200px;font-size:14px;line-height:1.45;color:var(--ink2)}
.item .venter-knap{flex:none;margin-left:auto;padding:10px 16px;border:0;border-radius:999px;
  font:inherit;font-size:14px;font-weight:600;color:#fff;background:var(--red);
  cursor:pointer;white-space:nowrap}
.item .venter-knap:hover{background:var(--red-d)}
.item .venter-knap:focus-visible{outline:2px solid var(--red-d);outline-offset:3px}

/* ---- ET ANSIGT PR. RET  (1/9) -------------------------------
   Kundens ord: "prop emojis derinde, så det ser lidt attraktivt
   ud at vælge nogle retter i stedet for det der."

   ⚠️ SAMME BREDDE SOM .item-foto, så navnene står på den samme
   lodrette linje, uanset om ejeren har lagt et billede op. Og
   aldrig begge dele — se vareRække i js/skal/bestil.js. */
.item .item-tegn{flex:none;width:38px;font-size:24px;line-height:1;
  text-align:center;opacity:.9;user-select:none}
@media (max-width:420px){.item .item-tegn{width:32px;font-size:21px}}


/* ⚠️ KVITTERINGENS STIL ER FLYTTET TIL css/kvittering.css (4/9).
   Den stod her i et par timer — men bestil/, bord/ og
   ved-bordet/ kører på css/style.css og skulle så have haft en
   KOPI. To kopier af den samme kvittering er præcis det mønster,
   filen her advarer imod ni steder. Arket indlæses nu af hver
   side, der viser en kvittering. */

/* ============================================================
   BAGLOKALETS PRISKORT  (4. sep 2026)
   ------------------------------------------------------------
   Kundens ord: "gør det tydeligt med pricesen". De tre tal stod
   klemt inde i én faktalinje sammen med "(4 timer)" og "gratis
   fra 20 kuverter" — fire oplysninger i én sætning.

   ⚠️ FORMEN ER DESIGNETS EGEN: samme papir, samme runding og
   samme skygge som .panel, og tallene i mærkefarven som
   .tapasec .foot .pris. Der er ikke opfundet et nyt sprog til
   ét kort.

   ⚠️ PRISEN BRUGER --red-tekst OG IKKE --red. Husets regel siden
   23/8: den lille skrift falder under 4,5:1 med mærkefarven
   selv. Tallet her er 24 px og ville klare den — men "kr." og
   linjen under er 12-13 px, og de deler farve.
   ============================================================ */
.lokale-pris{
  margin-top:18px;padding:20px 18px 18px;border-radius:26px;
  background:var(--paper);box-shadow:var(--skygge-let)}
.lp-hoved{margin-bottom:14px}
.lp-eyebrow{display:block;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);font-weight:600}
.lp-fine{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.lp-linje{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-top:1px solid rgba(36,26,23,.08)}
.lp-navn{font-size:15px;font-weight:600;color:var(--ink)}
.lp-navn small{display:block;font-weight:400;font-size:12px;
  color:var(--muted);margin-top:2px}
.lp-tal{flex:none;font-family:"Host Grotesk",system-ui,sans-serif;font-size:24px;
  line-height:1;color:var(--red-tekst);font-variant-numeric:tabular-nums}
/* Den gratis linje er husets grønne "det her er på plads", ikke
   mærkefarven: rød betyder "tryk her" eller "pris" på siden. */
.lp-gratis{
  display:flex;align-items:flex-start;gap:9px;margin:14px 0 0;
  padding:11px 13px;border-radius:16px;background:rgba(31,122,74,.09);
  font-size:13px;line-height:1.45;color:#1f7a4a}
.lp-gratis svg{width:16px;height:16px;flex:none;margin-top:1px}
/* ⚠️ TEKSTEN ER ÉT FLEX-BARN, IKKE FEM. Første udgave lagde
   sætningen direkte i den flexede <p>, og så blev HVERT inline-
   element — de to <b> og tallets <span> — sit eget flex-element.
   MÅLT på et skud: "Bestiller I  20  eller  lokalelejen  ." på
   én linje og "mad til   flere, er  gratis" under. En flex-
   beholder spiser sine inline-børn; teksten skal pakkes. */
.lp-gratis>span{flex:1}
.lp-gratis b{color:#17603a}
.lp-ekstra{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}

/* Svaret under tidsrummet: hvor mange timer, og hvad det koster.
   ⚠️ Den grønne udgave findes KUN, når lejen faktisk er gratis —
   en linje, der altid lyser grønt, holder man op med at se. */
#tid-svar.tid-gratis{color:#1f7a4a;font-weight:600}
#tid-svar.tid-fejl{color:var(--red-tekst);font-weight:600}
/* ============================================================
   BAGLOKALETS FORESPØRGSEL I FIRE TRIN  (14/9)
   ------------------------------------------------------------
   Kundens ord: "den er forældet og ikke klar og god nok". MÅLT på
   hans skud: datoen stod to gange, kalenderens celler var over
   80 px høje på en computer, og tretten felter stod i én række.
   Alt her er scopet til .bl-panel — selskabs-, catering- og
   frokostsiden deler kalenderen og er urørte.
   ⚠️ INGEN NY SKRIFTSTØRRELSE OG INGEN NY SKYGGE: skralden står på
   30 og 37 (typografi.spec). Tallene nedenfor er arkets egne.
   ============================================================ */
.bl-trin-navn{display:flex;align-items:center;gap:10px;margin:26px 0 2px;font-size:15px;font-weight:600}
.bl-panel > h3 + .bl-trin-navn{margin-top:14px}
.bl-trin-navn span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:999px;background:var(--red);color:#fff;font-size:13px;font-weight:600}
/* Kalenderen er et værktøj, ikke en plakat: cellerne har en fast
   højde i stedet for at være kvadrater, der vokser med panelet. */
.bl-panel .ledigkal{margin:10px 0 0}
.bl-panel .lk-dag,.bl-panel .lk-tom{aspect-ratio:auto;height:42px}
.bl-panel .lk-dag.fortid{opacity:.3}
/* Dagen i ord under nettet. "Valgt:" står med blæk, det tomme svar
   dæmpet — så man kan se forskel på "intet valgt" og "valgt". */
.bl-valgt{margin:10px 2px 0;font-size:14px;color:var(--muted)}
.bl-valgt.har{color:var(--ink);font-weight:600}
/* Frokostens dage uden et svar (28/9): summen siger, hvad der mangler. */
.bl-valgt.mangler{color:var(--red-tekst);font-weight:600}
/* ⚠️ BROWSERENS DATOFELT SKJULES KUN, NÅR NETTET STÅR DER. Motoren
   læser feltet, nettet skriver i det — og tegnes nettet ikke (fejl i
   hentningen, gammelt script), er feltet den eneste vej til en dato.
   Skjult som "kun for skærmlæsere" og ikke med display:none: feltet
   skal kunne fokuseres og udfyldes, og det kommer frem, når det får
   fokus (fx når afsendelsen peger på det). */
/* ⚠️ OG DET FOLDER SIG IKKE UD VED FOKUS MERE (28/9). Det gjorde det
   ("det kommer frem, når afsendelsen peger på det") — og så var siden
   70 px højere, mens feltet havde fokus, og faldt sammen igen i det
   øjeblik, man trykkede på noget andet. MÅLT: trykket på "Send" og på
   "Ud af huset" ramte ikke, fordi knappen flyttede sig mellem ned og
   op. Afsendelsen peger på NETTET nu (js/skal/forespoergsel.js). */
.bl-panel:has(#ledigkal:not([hidden])) .bl-dato{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* ⚠️ OG FELTET SELV ER 1 PX. Kun rammen var det, og feltet indeni stak
   30 px ud over den — gennemgangen fandt det på en telefon (14/9). Står
   nettet ikke der, gælder reglen ikke, og feltet har sin fulde bredde. */
.bl-panel:has(#ledigkal:not([hidden])) .bl-dato .inp{width:1px;min-width:0;padding:0;border:0}
/* Tidsrummet og antallet på én række: tre felter, der hører sammen. */
.bl-tid{display:grid;grid-template-columns:1fr 1fr .8fr;gap:10px}
.bl-tid .inp{text-align:center;padding:0 8px;font-variant-numeric:tabular-nums}
.bl-tid input[type=time]::-webkit-calendar-picker-indicator{opacity:.35;margin-left:2px}
.bl-panel #tid-svar{margin:10px 2px 0;font-size:14px}
/* Opsummeringen over knappen: det, der bliver sendt, i én linje. */
.bl-opsum{margin-top:16px;padding:12px 14px;border-radius:16px;background:var(--cream2);box-shadow:var(--kant-inde);font-size:14px;line-height:1.45}
.bl-opsum b{display:block;margin-bottom:2px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bl-opsum[hidden]{display:none}

/* ============================================================
   SÆLGENDE BRØDTEKST  (4/9)
   ------------------------------------------------------------
   Kundens ord: *"det sælgende må godt komme på alle faner og gøre
   dem flotte og pæne med animationer."*

   Designet har to slags tekst: .sub (heroens manchet) og .hint
   (13 px dæmpet hjælpelinje ved et felt). Ingen af dem er
   løbende brødtekst, man skal LÆSE — og et <p> uden klasse i et
   .panel arver 14 px systemskrift med browserens egen
   linjehøjde, altså en tekst, der ser ud som en hjælpelinje, der
   er løbet løbsk.

   ⚠️ FARVEN ER --ink2, IKKE --muted. .fact bruger --ink2 til
   netop det her: tekst, der skal læses, men ikke råbe. --muted er
   husets dæmpede, og den er målt til 4,5:1 med nød og næppe —
   fire afsnit i den er en side, man ikke gider læse.
   ============================================================ */
.saelg{margin-top:12px;font-size:15px;line-height:1.62;color:var(--ink2)}
.saelg+.saelg{margin-top:11px}
.saelg b,.saelg strong{color:var(--ink);font-weight:600}
.saelg-stor{font-size:17px;line-height:1.55;color:var(--ink)}
/* ⚠️ ET INLINE-LINK I BRØDTEKST ER 17 PX HØJT, og gennemgangen
   fælder alt under 30. Rettelsen er husets egen fra 31/8: LODRET
   PADDING MED NEGATIV MARGIN, så trykfladen vokser, mens linjens
   højde står stille. IKKE display:inline-block — dét limede
   footerens links sammen til "Bestil madMenukort" på syv sider
   samme aften. */
.saelg a,.panel .fine a,.jura-ved-send a{color:var(--red-d,var(--red));text-decoration:underline;text-underline-offset:2px;padding-block:8px;margin-block:-8px}

/* ============================================================
   LISTEN TONER IND TRIN FOR TRIN  (4/9)
   ------------------------------------------------------------
   Kundens ord: *"gøre dem flotte og pæne med animationer."*

   Husets animation er designets egen .rev — et helt panel, der
   glider op, når man ruller til det. Her får punkterne inde i
   panelet deres egen lille forskydning, så listen læses som en
   liste og ikke som en blok, der kommer på én gang.

   ⚠️ FORSINKELSEN ER PÅ PUNKTET, IKKE PÅ EN NY IAGTTAGER. Et
   ekstra IntersectionObserver ville være endnu et sted, der kan
   komme til at sige noget andet end .rev — og to iagttagere, der
   skriver på det samme element, har allerede kostet en runde
   (den flydende pille, 31/8). Det her hænger på den klasse, .rev
   allerede sætter.

   ⚠️ OG UDEN BEVÆGELSE STÅR DE STILLE OG SYNLIGE. En liste, der
   bliver liggende på opacity 0, fordi nogen har slået animationer
   fra i sit styresystem, er en tom side.
   ============================================================ */
.rev .getlist>span{opacity:0;transform:translate3d(0,9px,0)}
.rev.in .getlist>span{opacity:1;transform:none;
  transition:opacity .42s ease,transform .5s var(--spring)}
.rev.in .getlist>span:nth-child(1){transition-delay:.05s}
.rev.in .getlist>span:nth-child(2){transition-delay:.10s}
.rev.in .getlist>span:nth-child(3){transition-delay:.15s}
.rev.in .getlist>span:nth-child(4){transition-delay:.20s}
.rev.in .getlist>span:nth-child(5){transition-delay:.25s}
.rev.in .getlist>span:nth-child(6){transition-delay:.30s}
.rev.in .getlist>span:nth-child(7){transition-delay:.35s}
.rev.in .getlist>span:nth-child(n+8){transition-delay:.40s}
@media(prefers-reduced-motion:reduce){
  .rev .getlist>span{opacity:1;transform:none;transition:none}
}

/* ==========================================================
   "KUN 3 TILBAGE" I FORSIDENS BESTILLING  (5/9)
   ----------------------------------------------------------
   Samme ord, samme vægt og samme farve som menukortets .mk-faa
   og bestillingssidernes .stk-faa. Tre forskellige udgaver af
   "den er ved at slippe op" ville betyde, at gæsten skulle lære
   oplysningen forfra på hver skærm.

   --red-tekst og ikke --red: den lille skrift falder under
   4,5:1 med mærkefarven selv. */
/* ⚠️ .item .vare-faa OG IKKE BARE .vare-faa. MÅLT: farven kom
   ud som blækket og ikke som den røde — en mindre specifik
   regel taber til designets egne .item-regler. Husets egen
   lære: mål den BEREGNEDE stil, ikke klassen. */
.item .vare-faa,
.vare-faa {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--red-tekst);
}

/* ==========================================================
   DAGENS RET STÅR FOR SIG SELV  (5/9)
   ----------------------------------------------------------
   Samme klasse og samme idé som på bestil/ og ved-bordet/
   (css/style.css): mærkefarvet kant, varm flade, overskriften i
   seriffen. Stilarket er et andet, fordi designet har sit eget
   sæt variabler — men formen skal være den samme, så gæsten
   møder den samme ret på den samme måde, uanset hvilken af de
   tre bestillingsveje hun kom ind ad. */
/* ⚠️ HVIDT PAPIR, IKKE EN TONING  (13/9). Kundens skud: "det slet
   ik godt nok". Fladen tonede fra 7 % rød til hvid — på en lys side
   en varm kant, men på bestillingens mørke glas blev de 7 % til en
   brun tåge øverst, og "Dagens ret" og "i dag" druknede i den. Nu er
   blokken papir hele vejen, hovedet er skilt fra retten med en
   hårstreg, og dagen er et mærke, man kan læse. */
.dagens-blok {
  border: 2px solid var(--red);
  border-radius: 16px;
  background: #fff;
  margin: 0 0 12px;
  overflow: hidden;
}
.dagens-blok-hoved {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px 9px;
  border-bottom: 1px solid rgba(36, 26, 23, .08);
}
.dagens-blok-tegn { font-size: 18px; line-height: 1; flex: none; }
.dagens-blok-titel {
  font: 600 18px/1.15 "Host Grotesk",system-ui,sans-serif;
  margin: 0;
}
/* Dæmpet: dagen er ikke handlingen — men den SKAL stå, for med
   ugeplanen kan gæsten kigge på i morgen. */
.dagens-blok-dag {
  color: var(--red-tekst);
  background: rgba(214, 42, 58, .1);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  margin-left: auto;
  flex: none;
}
/* Rækken inde i blokken skal ikke også have sin egen ramme —
   ét kort, ikke et kort i et kort. */
.dagens-blok .item { border: 0; background: none; margin: 0; }

/* ============================================================
   LANDSKAB: HAKKET LIGGER I SIDEN (5/9)
   ============================================================
   viewport-fit=cover lader siden male HELE skaermen — ogsaa dér,
   hvor kameraet sidder. I portraet er det toppen, og den er
   haandteret af --top-luft. Drejes telefonen, flytter hakket ud
   i VENSTRE kant, og saa ville mærket i topbjælken ligge bag
   det.

   ⚠️ RAMMEN BÆRER LUFTEN, IKKE HVERT AFSNIT. Lagde vi den paa
   sektionerne, skulle hver eneste ny sektion huske den; paa
   .device gaelder den alt indeni af sig selv. Og den staar til
   sidst i arket med vilje: baade telefon- og desktoplaget
   saetter .device{padding:0}, og den her skal vinde over dem
   begge.
   ============================================================ */
@media (orientation: landscape) {
  .device {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* ============================================================
   SAMTYKKET TIL EN ALLERGI                       (10. sep 2026)
   ------------------------------------------------------------
   Fire formularer på designsiderne har et allergifelt nu, og
   fluebenet under det findes KUN, når gæsten har skrevet noget.
   Reglen står i js/skal/bestil.js og js/skal/forespoergsel.js;
   her står formen.

   ⚠️ `.skjult` FANDTES IKKE I DET HER ARK. Klassen bor i
   css/style.css, som designsiderne slet ikke indlæser — så
   fluebenet stod fremme fra første sekund, MÅLT 10/9. Det er
   husets eget ar: en klasse, der ikke findes i stilarket, er
   ingen regel (`.hvad-sker`, 4/9).

   ⚠️ OG DEN SKAL SLÅ `display: flex` NEDENFOR. Rækkefølgen
   alene ville ikke gøre det, hvis nogen en dag flyttede
   blokken — derfor `!important` her og kun her. Samme fælde som
   `.lk-tegn`, der stod synlig med `hidden=""` (30/8).
   ============================================================ */
.skjult { display: none !important; }

/* ⚠️ SELEKTOREN SKAL VEJE TUNGERE END `.field>label`.
   Den vejer 0,1,1 (klasse + element) og sætter `display: block`
   og `font-weight: 600` — altså etikettens vægt. MÅLT 10/9 stod
   samtykket som en FED overskrift på højde med "Allergi", og
   fluebenet faldt ud af linjen. En bar `.allergi-ja` (0,1,0)
   taber. Husets egen lov, for sjette gang: mål den BEREGNEDE
   stil, ikke den regel, du lige har skrevet. */
.field > label.allergi-ja,
.allergi-ja {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* 44 px er fingerens mål — samme tal som ved bordet. */
  min-height: 44px;
  margin: 10px 0 0;
  padding: 6px 0;
  font-size: 13px;
  /* ⚠️ NORMAL VÆGT: et samtykke er ikke en etiket. Står det i
     600 som feltets navn, læses de to som to overskrifter, og
     gæsten springer teksten over — netop dén tekst, der er hele
     pointen. */
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: 0;
}
.allergi-ja input {
  margin-top: 3px;
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--red);
}
/* HANDELSBETINGELSERNES FLUEBEN (14/9) låner allergisamtykkets form.
   ⚠️ PÅ GLASSET SKAL DET VÆRE LYST. `.field > label.allergi-ja`
   (0,2,1) slår glassets `.glasafsnit .allergi-ja` (0,2,0), og målt på
   forsiden stod jaet i husets brune på mørkt glas med røde links —
   netop den tekst, man skal kunne læse, før man sender. Samme lyse
   hvide og rosa som betingelseslinjen og rækkerne på glasset. */
.vilkaar-ja a { text-decoration: underline; text-underline-offset: 2px; }
.glasafsnit .field > label.vilkaar-ja,
.glasafsnit label.vilkaar-ja { color: rgba(255, 255, 255, .76); }
.glasafsnit label.vilkaar-ja a { color: #ffccd1; }
/* CATERINGENS PRISER (14/9) skrives af menukortet (js/skal/catering.js).
   ⚠️ `display:block` KUN NÅR DEN ER FREMME — en klasse med display slår
   browserens egen [hidden]-regel (arret fra .lk-tegn og .music). */
.gl-pris{margin-top:2px;font-size:13px;font-style:normal;font-weight:600;color:var(--red-tekst);font-variant-numeric:tabular-nums}
.gl-pris:not([hidden]){display:block}
/* FEJLKORTET (14/9). Kundens ord: "hvis en bestilling ikke kunne blive
   taget imod eller en error, lad det være bedre og ikke forældet eller
   ringe". Fejlen stod som "⚠ " + en sætning i bestillingens egen linje
   — grå tekst i en lyserød boks, samme farve som summen. Nu et KORT: et
   rødt mærke, sætningen i blæk, og når nettet er væk, to veje videre.
   Samme form som bestil/ og ved bordet (css/style.css).
   ⚠️ :not(.sumbar): kortet og summen er det SAMME element (#sumline), og
   summen skal have sin mørke flade tilbage, så snart fejlen er rettet. */
.note.fejlkort:not(.sumbar),.sumbox.fejlkort,.fine.fejlkort{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:16px;background:#fff5f3;border:1px solid rgba(214,42,58,.24);color:var(--ink);font-size:13px;line-height:1.45;font-weight:500}
.glasafsnit .note.fejlkort:not(.sumbar){background:#fff5f3;color:var(--ink)}
.fejl-ikon{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--red);color:#fff;font-size:13px;font-weight:700;line-height:1}
.fejl-tekst{min-width:0}
/* ⚠️ LINJEN UNDER KNAPPEN ER .fine: centreret, lille og grå (28/9).
   Som fejlkort står den til venstre som de andre kort. */
.fine.fejlkort{text-align:left;margin-top:12px}
/* FEJLEN VED FELTET (28/9, js/skal/feltfejl.js). Mikkels ord: et
   ugyldigt telefonnummer skal være TYDELIGT. Intet felt på
   designsiderne blev rødt; fejlen stod i en linje et andet sted.
   ⚠️ OUTLINE OG IKKE BOX-SHADOW: feltets egen kant og fokusringen
   er box-shadow, og en rød kant der ville forsvinde, så snart
   feltet får fokus — præcis når gæsten retter i det. */
.inp[aria-invalid="true"],.ledigkal[aria-invalid="true"]{outline:2px solid var(--red);outline-offset:-2px}
.felt-fejl{display:flex;align-items:flex-start;gap:8px;margin:8px 2px 0;font-size:13px;line-height:1.45;font-weight:500;color:var(--red-tekst)}
.felt-fejl::before{content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:700;line-height:1}
.glasafsnit .felt-fejl{color:#ffccd1}
/* De to veje står side om side og lige brede — set på et skud stod de
   som to store knapper under hinanden, og kortet blev en halv skærm. */
.fejlkort .noedudgang{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.fejlkort .noedudgang .g{justify-content:center;padding-inline:12px;white-space:nowrap}

/* Smiley-rapporten øverst på forsiden (13/9) — husets papir og skygge, arkets egne størrelser. */
.smiley-kort{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:24px;background:var(--paper);box-shadow:var(--skygge-let);color:var(--ink);min-height:44px}
.smiley-kort-tegn{font-size:22px;line-height:1}
.smiley-kort-tekst{flex:1;min-width:0;font-size:13px;line-height:1.4;color:var(--ink2)}
.smiley-kort-tekst b{color:var(--ink);font-weight:600}
.smiley-kort-pil{color:var(--red-tekst);font-size:15px}

/* ⚠️ LIQUID GLASS PÅ DE HVIDE KORT (13/9). Kundens ord: "kan de hvide bokse,
   f.eks. menukort-tingen ude på forsiden, blive mere liquid glass som de
   andre — det ser lidt forældet ud, og ret gerne andre også". Samme glas som
   knapperne (.g): halvgennemsigtig hvid med linsekant.
   ⚠️ SKYGGEN ER .g'S TEGN FOR TEGN — skralden står på 37 af 37.
   ⚠️ INGEN backdrop-filter: bag kortene ligger en ensfarvet flade, så sløret
   kunne ikke ses og ville koste billeder under rul på en telefon.
   ⚠️ Det mørke glas (.glasafsnit, Find os, menukortets fotokort) og de lukkede
   dage har egne, tungere regler og vinder stadig. */
.today,.panel,.day,.menucard,.tapasec,.feat,.talk,.nw,.tidligere,.row-card,.fact,.evcard,.smiley-kort{background:rgba(255,255,255,.62);box-shadow:inset 0 1px .5px rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.35),inset 0 0 0 1px rgba(36,26,23,.14),0 8px 22px rgba(36,26,23,.2)}

/* ⚠️ «HVAD SKAL VI HJÆLPE MED?» STÅR PÅ HUSETS TERN (13/9). Kundens ord:
   "ret kedelig, og der er meget hvidt i streg med sectionen ovenover".
   Afsnittet stod på creme lige under selskabets creme, og de hvide kort
   flød sammen med begge. Ternet er heroens og footerens eget — ingen ny
   farve — og kortene er glas ovenpå. Valgt på et skud af fire udgaver.
   ⚠️ HER ER DER NOGET BAG GLASSET, så sløret bærer (modsat noten
   ovenfor). Prøven regner kontrasten ud mod det mørkeste sted i ternet,
   hvor to striber krydser — uden sløret og uden glansen, som begge gør
   det lysere, så tallet er det værste tilfælde.
   ⚠️ SKYGGEN ER .g'S TEGN FOR TEGN — skralden står på 37 af 37.

   ⚠️ OG GLASSET ER APPLES, IKKE MÆLK (14/9). Kundens ord: "felterne er
   slet ikke på niveau med iOS liquid glass". Første udgave var en tæt,
   hvid flade (.86) med lidt slør — pæn, men et mælkeglas. Liquid glass
   er tre ting: meget slør med mættet farve bagved (22px, saturate
   180%), en glans, der falder ned over fladen, og en LYS KANT, der er
   stærkest i to modsatte hjørner, som når glas fanger lyset. Kanten er
   en maske på ::before og ikke en skygge — skralden er fuld. Glansen og
   kanten ligger under indholdet (isolation + z-index), så de aldrig
   lægger sig over teksten. */
/* Ternet er DÆMPET og SKYGGET (14/9, kundens ord: "lidt sådan skygget
   agtig så den ikke er så outstanding … ikke meget mørk men lidt skygge").
   .34 og ikke .55: det skal kunne anes bag glasset, ikke råbe. Skyggen er
   husets blæk, tættest i top og bund som en dug i skygge — og den er et
   lag, ikke en box-shadow (skralden står på 37 af 37). */
/* ⚠️ VENDT 14/9 OM EFTERMIDDAGEN — TERNET ER VÆK IGEN. Kundens ord: "hvad
   skal vi hjælpe med baggrunden skal være den originale hvide/creme som
   ovenover". Samme creme som selskabsafsnittet lige over (--cream2), og
   prøven måler mod naboen, ikke mod et tal. Glaskortene bliver — på creme
   er de lyse kort med en blød kant. */
#alt{background:var(--cream2)}
/* ⚠️ OG GLASSET FRA 13/9 ER VÆK (10/10) — se blokken
   «HVAD SKAL VI HJÆLPE MED?» PÅ FIGMAS PLADE længere nede. */
/* ============================================================
   APPLES KLARE GLAS — ÉN OPSKRIFT TIL ALLE PILLER  (28/9, aften)
   ------------------------------------------------------------
   Mikkels valg af Higgsfield-forslag 7 til Facebook, smileyen og prisen
   (.glasraekke), og så: *"fix lige alle pillerne de andre steder, f.eks.
   allergi-tingen"*. Opskriften står HER én gang, og alle piller bærer
   den: allergilinjen (forsiden og menukortet), "Nyhed" og de tre rækker.

   Før var glaspillen en ring af frostet glas med en MASSIV kerne 5 px
   inde (porcelæn, guld, Facebooks blå) og blur bag sig. Det var kernen,
   der lignede gele og vand. Nu er glasset tyndt: en let hvidlig flade,
   en skarp lys kant øverst, en svag kant forneden, en hårfin omkreds og
   en blød skygge, der falder lige ned. Farven sidder i tegnet.

   ⚠️ INGEN backdrop-filter. Pillerne ligger i siden på creme eller på et
   kort og ruller MED siden — der er intet bag dem at sløre (husets grænse
   fra 31/8; tests/siden-staar-stille.spec.js 28/9). */
:root{
  --glas-flade:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.62) 55%,rgba(255,255,255,.72));
  --glas-skygge:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(255,255,255,.5),inset 0 0 0 .5px rgba(36,26,23,.1),0 1px 2px rgba(36,26,23,.06),0 8px 22px rgba(36,26,23,.09);
}
.glaspille{position:relative;display:inline-block;max-width:min(100%,38ch);padding:15px 24px;border-radius:999px;background:var(--glas-flade);box-shadow:var(--glas-skygge);font-size:14px;font-weight:500;line-height:1.4;text-align:center;color:var(--ink);text-wrap:balance}
.glaspille>[aria-hidden]{margin-right:6px}
.menucard .glaspille{margin-top:18px}
/* "Nyhed" er et mærke på et kort, ikke en plade over det: den bløde
   skygge under glasset blev en plet ved siden af et mærke på 34 px, så
   mærket har kun kanterne og omkredsen. */
.glaspille.nyt{padding:9px 16px;font-size:13px;font-weight:600;color:var(--red-tekst);box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 .5px rgba(36,26,23,.14)}
.menucard .glaspille,.phead .glaspille{justify-self:center}
/* ============================================================
   FACEBOOK, SMILEYEN OG PRISEN: APPLES KLARE GLAS  (28/9, aften)
   ------------------------------------------------------------
   Mikkels valg af seks forslag fra Higgsfield (nr. 7), efter ordene
   *"de får vand-agtige … det skal virkelig bare være iOS 18 Apple
   liquid glass"*. Fire runder før: plade, Figma-knap, farvet kerne og
   en kopi af allergipillen. Alle havde en FARVET, tyk kerne, og det
   var den, der lignede gele og vand.

   Apples glas er tyndt: en let, hvidlig flade, en skarp lys kant
   øverst (1 px), en svag kant forneden, en hårfin omkreds og en blød
   skygge. Farven sidder i TEGNET (Facebooks blå, smileyen, medaljen),
   ikke i glasset. Teksten står til venstre: titel og en dæmpet linje
   under, og en pil til højre — en række man trykker på, som i iOS.

   ⚠️ INGEN backdrop-filter. Rækkerne ligger i siden på den flade
   creme og ruller MED siden; der er intet bag dem at sløre (husets
   grænse fra 31/8, og tests/siden-staar-stille.spec.js 28/9). Glasset
   er lyset i kanten og skyggen — det er dét, øjet læser som glas.

   Klasserne .promo/.smiley-kort/.pris-kort bliver: kontakt.js leder
   efter .promo, og prøverne finder rækkerne ved dem. Derfor står
   reglerne her med to klasser, så de slår .promo.fb og .smiley-kort.
   ============================================================ */
.glasraekke.promo,.glasraekke.promo.fb,.glasraekke.smiley-kort{display:flex;align-items:center;gap:14px;min-height:66px;padding:11px 16px 11px 14px;border-radius:33px;overflow:visible;color:var(--ink);text-decoration:none;
  background:var(--glas-flade);box-shadow:var(--glas-skygge);
  transition:transform .35s var(--spring)}
.glasraekke:active{transform:scale(.98)}
.gr-tegn{flex:none;width:36px;height:36px;display:grid;place-items:center;font-size:27px;line-height:1}
.gr-tegn svg{width:32px;height:32px;display:block}
/* ⚠️ KNUDEN ER BRED, IKKE KVADRATISK (1/10). Kræftens Bekæmpelses mærke er
   136×72 — presset ned i 32×32 som de andre tegn ville den stå som en
   streg. Den fylder pladsens bredde og finder selv sin højde, så den
   vejer visuelt det samme som Facebook-logoet ved siden af. */
.gr-tegn .knaek-logo{width:36px;height:auto;display:block}
.gr-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left}
/* ⚠️ PRISENS TITEL ER TO LINJER PÅ EN TELEFON. "Indstillet til Greve
   Iværksætterpris 2026" skal stå hel (prøven og 25/9: "indstillet til",
   ikke "vinder"), og den er for lang til én linje ved 390 px — ubalanceret
   stod "2026" alene. Balanceret deler den midt over, og radius 33 (halvdelen
   af 66) er en kapsel ved to linjer og et blødt kort ved tre. */
.gr-tekst b{font-size:15px;font-weight:600;line-height:1.25;color:var(--ink);text-wrap:balance}
.gr-tekst span{font-size:13px;line-height:1.3;color:var(--muted)}
.gr-pil{flex:none;width:18px;height:18px;color:rgba(36,26,23,.38)}
/* Telefonen i en knap er husets tegn, ikke 📞 (27/9, persondatasiden). */
.g>svg{width:18px;height:18px;flex:none}
/* ============================================================
   «HVAD SKAL VI HJÆLPE MED?» PÅ FIGMAS PLADE  (10/10)
   ------------------------------------------------------------
   Mikkels ord, to runder samme aften: *"udseende og Ui mæssigt er de slet
   ikke med ift figmas UI sheets"* og så, efter husets klare glas uden
   slør: *"de stadig ikke liquid glass nok … matcher overhovedet ikke
   figma/UI sheetsnes standarder"*. Figma er facit, og værdierne her er
   LÆST UD AF FILEN (Plugin API'et, read-only) — ikke skønnet på et skud:
   · ET KORT ER EN PLADE: "LA3/Glass/Rim — liquid rim, wraps a solid
     core, 6 px. Cards, palettes, plates." (LA31 Card / Layered plate,
     105:982). Pladen er hvid 6 % (Tint/Rim) med en kant på 1 px, der går
     fra lys til skygge i −45° (Edge/Specular, 85 → 12 → 40 %), radius 24
     og skyggen 9 · 18 · 44 i 24 %. Kernen er FAST, 6 px inde, radius 18
     (= 24 − 6). Teksten står kun på kernen: "Text never sits on clear
     glass" (§1.2).
   · GLAS SKAL HAVE NOGET AT BRYDE: "DON'T — Pane over flat porcelain:
     grey tint" (53:299). Det var dét, begge runder før manglede. Bunden er
     havnens foto (.alt-bund) under et slør af cremen.
   · KNAPPEN ER FIGMAS LINSE (LA2.1 Icon-only, 44:214): en mørk krop på 48
     og en linse på 40, 4 px inde, hvid 10 % med kanten 90 → 5 → 30 %.
     Pilen er Figmas egen sti (Arrow right, 44:189), 16 px, streg 1,5.
     Hover: "lens fills" (72:315) — med husets ene accent, den røde.
   Glassets brydning (refr .45, dybde 14) findes ikke i CSS, og Rim har
   ingen frost — så pladen er klar: havnen står skarpt gennem de 6 %, og
   kanten og skyggen er det, øjet læser som glas (sløret er taget af 11/10,
   se noten ved pladen).
   ⚠️ Prøven "står på naboens creme" i skal-forside er VENDT igen.
   ============================================================ */
/* ⚠️ overflow-x:clip, IKKE hidden: fotoet er 24 px bredere mod højre, så
   det kan glide på plads uden at blotte en kant, og en transform tæller i
   rullefladen (5/9-arret). hidden ville gøre afsnittet til sin egen
   rullebeholder. */
#alt{position:relative;isolation:isolate;overflow-x:clip}
#alt .alt-bund{position:absolute;inset:0 -24px 0 0;z-index:-2;overflow:hidden;pointer-events:none}
#alt .alt-bund img{display:block;width:100%;height:100%;object-fit:cover}
/* Cremen er FAST bag overskriften — blæk på et foto kan ikke læses
   sikkert — og bliver til et slør, hvor kortene står, så havnen anes
   bag glasset. Toppen er naboens creme, så overgangen ikke ses.
   ⚠️ OG BUNDEN ER CREME IGEN (20/10). Mikkels ord, med et skud: "den her
   overgang … er ikke god". Fotoet stod i fuld styrke helt ned til «Find
   os», og dér begynder et ANDET foto, mørkt — to travle fotos kant i kant
   med en hård streg imellem. Alle forsidens andre overgange går fra flad
   creme til mørkt foto (Bestil mad, Historien) og ser rene ud; nu gør
   den her også. Fotoet er en rude bag kortene, med creme over og under. */
#alt .alt-slor{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--cream2) 0,var(--cream2) 190px,rgba(247,237,225,.5) 400px,rgba(247,237,225,.5) calc(100% - 120px),var(--cream2) 100%)}
#alt .rows{gap:12px}
/* ⚠️ INTET SLØR PÅ PLADEN (11/10). Figmas Rim har frost 0 (LA3/Glass/Rim:
   radius 0) — glasset er klart og bryder, det mattes ikke. Sløret på 3 px
   kunne knap ses, men blev regnet om seks gange pr. billede under rul og
   blinkede i Safari sammen med afdækningen. Glasset er kanten, de 6 %, og
   havnen, der står skarpt igennem. */
#alt .row-card{display:block;padding:6px;border-radius:24px;background:rgba(255,255,255,.06);box-shadow:9px 18px 44px rgba(36,26,23,.24)}
#alt .row-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.12) 45%,rgba(255,255,255,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
/* ⚠️ TELEFONEN: flisen er 36 og luften 10 (MÅLT ved 390: med 40/12 havde
   teksten 204 px, og "Smørrebrød ud af huset" brækkede). Linsen er
   Figmas 48 og skaleres ikke ("never scale a component to fit"). */
#alt .kerne{display:flex;align-items:center;gap:10px;min-height:72px;padding:12px 8px 12px 12px;border-radius:18px;background:var(--cream)}
#alt .row-card .ic{width:36px;height:36px;border-radius:14px;background:rgba(214,42,58,.08)}
#alt .row-card .ic svg{width:18px;height:18px}
#alt .row-card .ic+div{flex:1;min-width:0}
#alt .row-card h3{font-size:20px;line-height:1.2;text-wrap:balance}
#alt .row-card p{margin-top:4px;text-wrap:pretty}
#alt .linse{position:relative;flex:none;width:48px;height:48px;border-radius:24px;display:grid;place-items:center;background:var(--ink);color:var(--cream)}
#alt .linse::before,#alt .linse::after{content:"";position:absolute;inset:4px;border-radius:50%;pointer-events:none}
#alt .linse::before{background-color:rgba(255,255,255,.1);transition:background-color .18s ease}
#alt .linse::after{padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.05) 50%,rgba(255,255,255,.3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
#alt .linse svg{position:relative;z-index:1;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:translate .18s ease}
/* ⚠️ TRYKKET PÅ TELEFONEN ER EN KLASSE, IKKE :active (11/10). Mikkels ord:
   *"tryk interaktionen også fixes ift på telefonen"*. iOS Safari viser kun
   :active på et link, når siden lytter på touchstart — og det gør forsiden
   ikke, så et tryk gav INGEN reaktion før sidehoppet. Og hvor :active slår
   til (Android), trykker kortet sig ned, i det sekund en tommelfinger
   begynder at RULLE på det. Nu sætter havnegrillen.js `.trykket` som iOS
   selv: efter 60 ms, og ikke hvis fingeren flytter sig. Musen beholder
   :active. Linsen fyldes som ved hover. */
#alt .row-card.trykket{scale:.98}
#alt .row-card.trykket .linse::before{background-color:var(--red)}
@media (hover:hover) and (pointer:fine){#alt .row-card:active{scale:.98}}
/* Hover er Figmas: løft 4 px, en tungere skygge (Contact L, næste trin i
   Figmas skygger) og linsen fyldes — 180 ms (95:359). */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  #alt .row-card:hover{translate:0 -4px;box-shadow:12px 24px 56px rgba(36,26,23,.24)}
  #alt .row-card:hover .linse::before{background-color:var(--red)}
  #alt .row-card:hover .linse svg{translate:2px 0}
}

/* Siden er nede (16/9): forsidens og smørrebrødssidens liste dæmpes
   og kan ikke trykkes, og linjen over den siger hvorfor og giver
   telefonen. Se nedeNote i js/skal/bestil.js. */
/* ⚠️ NEDE = INGEN LISTE (25/9, aften). Listen var dæmpet og stod med reservedataenes priser; Mikkels ord: "må hjemmesiden aldrig vise forældede reservepriser". Nede-noten over den siger hvorfor og nummeret. */
.panel.er-nede [data-liste]{display:none}
.nede-note{margin:0 0 14px;padding:12px 14px;border-radius:14px;background:#fbe9e9;color:#7a1f27;font-weight:600;line-height:1.4}

/* ============================================================
   LOKALETS UDSTYR  (21/9) — se noten i h-baglokale.html
   ------------------------------------------------------------
   Sin egen klasse og ikke .facts eller .getlist: de to betyder
   hver sin ting på den side, og begge er vogtet af en prøve.
   Faktalinjen sælger; det her er detaljen, man læser bagefter.
   ============================================================ */
.lokale-udstyr{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;margin:16px 0 0;padding:0;list-style:none}
.lokale-udstyr li{padding:7px 13px;border-radius:999px;background:var(--cream2);box-shadow:var(--kant-inde);font-size:13px;line-height:1.35;color:var(--ink2)}
.lokale-udstyr li b{color:var(--ink)}
/* ⚠️ Den lange første linje må ikke klemme de korte sammen: på en
   telefon får den hele bredden i stedet for at brække i to tegn. */
@media (max-width:520px){.lokale-udstyr li:first-child{flex:1 1 100%;text-align:center}}

/* Genvejen til isen i menukortet (21/9) — se noten i index.html.
   En stille linje under den røde knap: den er en vej videre, ikke
   et andet tilbud, og to knapper med samme vægt ville tvinge
   gæsten til at vælge mellem dem. */
/* ⚠️ width:fit-content + margin auto, IKKE text-align:center. En
   blok ville trække understregningen ud i hele kortets bredde, og
   inline-block alene stiller sig til venstre, fordi forælderen ikke
   centrerer sin tekst — målt på et skud: linjen stod ude i venstre
   kant under en centreret knap. */
.is-kortlink{display:block;width:fit-content;margin:10px auto 0;font-size:13px;font-weight:600;color:var(--red-tekst);text-decoration:none;border-bottom:1px solid rgba(214,42,58,.3);padding-bottom:1px}
.is-kortlink:hover,.is-kortlink:focus-visible{border-bottom-color:var(--red-tekst)}
.is-kortlink.skjult{display:none}

/* ============================================================
   BYG DIN IS — ISENS EGEN BLOK  (25. sep 2026)
   ------------------------------------------------------------
   Kundens ord: *"lad hele is-blokken ryge ned og stå som en
   eksklusiv ting og skille sig ud fra de andre ligesom dagens
   ret ... et ordentligt bestillingssystem, der er dygtigt."*

   ⚠️ FORMEN ER DAGENS RETS, IKKE EN NY. Den blok har allerede
   husets svar på "det her er vigtigere end resten": egen ramme,
   eget hoved. En tredje slags fremhævelse ville være en tredje
   ting at holde i sync.

   ⚠️ INGEN NY SKRIFTSTØRRELSE OG INGEN NY SKYGGE. Skralden i
   tests/typografi.spec.js stod på 30 af 30 størrelser og 37 af
   37 skygger, da det her blev skrevet.
   ============================================================ */
.isbyg-blok {
  margin-top: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 139, 118, .22), rgba(255, 139, 118, .10));
  box-shadow: var(--kant-inde);
  overflow: hidden;
}
.isbyg-blok-hoved {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 15px 11px;
  border-bottom: 1px solid rgba(214, 42, 58, .16);
}
.isbyg-blok-tegn { font-size: 19px; line-height: 1; flex: none; }
.isbyg-blok-titel { font-size: 17px; font-weight: 600; margin: 0; }
/* Vejen videre står i hovedet og ikke nederst: gæsten skal kunne
   se hele sortimentet, FØR hun er halvvejs gennem et forløb. */
.isbyg-blok-link {
  margin-left: auto;
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
  white-space: nowrap;
}
.isbyg-blok-link::after { content: " ›"; }
.isbyg-blok-krop { padding: 4px 15px 15px; }
.glasafsnit .isbyg-blok-titel, .glasafsnit .isbyg-blok { color: #fff; }
.glasafsnit .isbyg-blok { background: linear-gradient(180deg, rgba(255, 150, 130, .26), rgba(255, 150, 130, .12)); }
.glasafsnit .isbyg-blok-link { color: #ffccd1; }

/* ---- Forløbet: ét trin ad gangen ---- */
.isbyg-trin { padding: 13px 0; border-bottom: 1px solid rgba(214, 42, 58, .13); }
.isbyg-trin:last-of-type { border-bottom: 0; }
/* ⚠️ ET LÅST TRIN ER DÆMPET, IKKE SKJULT. Gæsten skal kunne se,
   hvor mange skridt der er tilbage; et trin, der dukker op af
   ingenting, føles som en side, der skifter under fingeren. */
.isbyg-trin.laast { opacity: .42; }
.isbyg-hoved { display: flex; align-items: center; gap: 8px; }
/* Nummeret er forløbets rygrad — det er dét, der gør det til en
   rækkefølge og ikke fire spørgsmål i en bunke. */
.isbyg-nr {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--red);
  font-variant-numeric: tabular-nums;
}
.isbyg-titel { font-size: 15px; font-weight: 600; margin: 0; }
.isbyg-krop { margin-top: 10px; }

.isbyg-valg, .isbyg-ekstra { display: flex; flex-wrap: wrap; gap: 8px; }
.isbyg-knap {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--cream2);
  box-shadow: var(--kant-inde);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.isbyg-knap-navn { font-weight: 600; }
.isbyg-knap-bi { font-size: 12px; color: var(--red); font-variant-numeric: tabular-nums; }
.isbyg-knap:hover:not(:disabled) { transform: translateY(-1px); }
.isbyg-knap.valgt { color: #fff; background: var(--red); }
.isbyg-knap.valgt .isbyg-knap-bi { color: rgba(255, 255, 255, .86); }
.isbyg-knap:disabled { cursor: default; transform: none; }

/* Kuglerne: ét spørgsmål pr. linje, så det ER en rækkefølge og
   ikke et gitter, man skal regne ud. */
.isbyg-kugle { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.isbyg-kugle:first-child { margin-top: 0; }
.isbyg-kugle-nr {
  flex: none;
  min-width: 62px;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
}
/* ⚠️ select.isbyg-smag OG IKKE .isbyg-smag: sidens `select.inp`
   (0,1,1) slår en ren klasse (0,1,0) — den fælde blev målt 25/9
   på isens gamle felter, hvor 38 px blev til 48. */
select.isbyg-smag { flex: 1 1 auto; min-width: 0; height: 42px; font-size: 14px; }
select.isbyg-smag.mangler { background-color: rgba(214, 42, 58, .1); }

.isbyg-hint { font-size: 13px; color: var(--muted); }
/* ØNSKEFELTET — når ejeren ikke har skrevet sin liste. Mikkels
   valg 25/9: "et skrivefelt, som ikke er obligatorisk". Det er
   ikke en advarsel, så det skal ikke ligne én: almindeligt felt,
   almindelig etiket. */
.isbyg-oenske { display: grid; gap: 7px; }
.isbyg-oenske-tekst { font-size: 13px; color: var(--muted); }
input.isbyg-oenske-felt { height: 44px; font-size: 14px; }
.glasafsnit .isbyg-oenske-tekst { color: rgba(255, 255, 255, .78); }
/* ⚠️ HØJT, IKKE TAVST. Uden ejerens smagsliste forsvandt husets
   vigtigste spørgsmål før — nu står det som en advarsel. */
.isbyg-mangler {
  padding: 10px 13px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  background: rgba(214, 42, 58, .1);
  /* ⚠️ DEN SKYGGE FINDES I FORVEJEN. Skralden i
     tests/typografi.spec.js stod på 37 af 37, og en ny værdi
     ville hæve loftet for en advarselsboks — ikke en grund god
     nok. `inset 0 0 0 1.5px rgba(214,42,58,.32)` er husets
     røde ramme og bruges to steder i forvejen. */
  box-shadow: inset 0 0 0 1.5px rgba(214,42,58,.32);
}

.isbyg-bund {
  /* ⚠️ BUNDEN SKAL KUNNE BRYDE. Målt på 390 px: knappen stod
     flex:none ved siden af summen, og "Vælg smag til alle
     kuglerne" blev brækket til tre linjer inde i knappen — en
     knap på 69 px, der ligner en fejl. Med et brud på 220 px
     falder knappen ned på sin egen linje i fuld bredde på en
     telefon (og bliver et større trykfelt), mens den bliver
     stående ved siden af summen, når der er plads. */
  flex-wrap: wrap; display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.isbyg-sum {
  /* ⚠️ BELØBET MÅ IKKE BRÆKKE: "I alt 45,-" blev til to linjer
     med tallet under ordet, fordi knappen tog pladsen først. Et
     beløb på to linjer læser gæsten to gange. */
  flex: none;
  white-space: nowrap; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* ⚠️ EGEN STIL, IKKE `g solid blk`. Den klasse er sendeknappens,
   og forsiden finder sendeknappen som den FØRSTE af dem i panelet
   — se noten i js/isbygger.js. Formen er den samme, så gæsten ser
   den samme slags knap; kun navnet er byggerens eget. */
.isbyg-laeg {
  flex: 1 1 220px;
  margin-left: auto;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--red);
  /* ⚠️ DEN SKYGGE FINDES I FORVEJEN — husets røde knap bruger den.
     Skralden står på 37 af 37, og en ny værdi ville hæve loftet for
     en knap, der skal ligne de andre alligevel. */
  box-shadow: inset 0 1px .5px rgba(255,255,255,.45),0 8px 20px rgba(214,42,58,.35);
  cursor: pointer;
}
.isbyg-laeg:disabled { opacity: .5; cursor: default; }
/* ⚠️ "✓ LAGT I KURVEN" (26/9) — se bekræft() i js/isbygger.js. Knappen
   er slået fra i det øjeblik (forløbet er nulstillet), men svaret skal
   stå i fuld farve. Husets grønne betyder "det her er på plads"; rød
   betyder "tryk her". */
.isbyg-laeg.lagt, .isbyg-tag.lagt { opacity: 1; color: #fff; background: #1f7a4a; }
.isbyg-kvit {
  margin-top: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  opacity: 0;
  transition: opacity .25s ease;
}
.isbyg-kvit.vis { opacity: 1; }
.glasafsnit .isbyg-hint { color: rgba(255, 255, 255, .76); }
.glasafsnit .isbyg-kvit { color: #ffccd1; }

/* ============================================================
   ISBAREN — ET FORLØB PR. SLAGS IS  (26. sep 2026)
   ------------------------------------------------------------
   Trin 0 (hvad skal det være?), isboksens tællere og
   desserternes kort. Samme byggesten som forløbet ovenfor —
   cremen, den røde, husets kant — så de fire forløb ligner ét
   system og ikke fire påhæng.

   ⚠️ INGEN NY SKRIFTSTØRRELSE OG INGEN NY SKYGGE (skralden i
   tests/typografi.spec.js står på loftet). 12, 13, 14, 15, 17 og
   19 px findes alle i forvejen; kanten er var(--kant-inde).
   ============================================================ */
.isbyg-slags {
  display: grid;
  /* ⚠️ auto-fit OG IKKE fire faste kolonner: har forretningen tre
     slags, skal der ikke stå et hul, og på en telefon (330 px inde
     i blokken) bliver det to og to. */
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 8px;
  margin: 12px 0 2px;
}
.isbyg-slag {
  display: grid;
  /* ⚠️ TEGNET VED SIDEN AF NAVNET, IKKE OVER. MÅLT på 390 px: med
     tegn, navn og pris stablet blev hver flise 150 px høj og stod
     alene på sin linje — fire fliser skubbede selve forløbet 600 px
     ned. Side om side er de to og to og ~60 px høje. */
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 9px;
  row-gap: 1px;
  align-items: center;
  justify-items: start;
  text-align: left;
  padding: 11px 12px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  color: var(--ink);
  background: var(--cream2);
  box-shadow: var(--kant-inde);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.isbyg-slag:hover { transform: translateY(-1px); }
.isbyg-slag-tegn { grid-row: span 2; font-size: 19px; line-height: 1; }
.isbyg-slag-navn { font-size: 14px; font-weight: 600; line-height: 1.25; }
.isbyg-slag-bi { font-size: 12px; color: var(--red); font-variant-numeric: tabular-nums; }
.isbyg-slag.valgt { color: #fff; background: var(--red); }
.isbyg-slag.valgt .isbyg-slag-bi { color: rgba(255, 255, 255, .86); }

/* ---- Isboksen: kugler fordelt på smagene ---- */
.isbyg-beskriv { margin: 12px 0 0; font-size: 14px; }
.isbyg-status {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.isbyg-status.fuld { color: var(--red); }
.isbyg-tael {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid rgba(214, 42, 58, .13);
}
.isbyg-tael-navn { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; }
/* 42 px — samme højde som smagsvælgeren. En tæller på en telefon
   er noget, man trykker på seks gange i træk. */
.isbyg-tael-knap {
  flex: none;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  background: var(--cream2);
  box-shadow: var(--kant-inde);
  cursor: pointer;
}
.isbyg-tael-knap:disabled { opacity: .4; cursor: default; }
.isbyg-tael-tal {
  min-width: 22px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- Desserterne og det løse: et kort pr. ret ---- */
.isbyg-desserter { display: grid; gap: 10px; margin-top: 12px; }
.isbyg-dessert {
  padding: 12px 13px;
  border-radius: 14px;
  color: var(--ink);
  background: var(--cream2);
  box-shadow: var(--kant-inde);
}
.isbyg-dessert-top { display: flex; align-items: flex-start; gap: 10px; }
.isbyg-dessert-tekst { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.isbyg-dessert-navn { font-size: 15px; font-weight: 600; }
.isbyg-dessert-beskriv { font-size: 13px; color: var(--muted); }
.isbyg-dessert-pris {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.isbyg-tag {
  margin-top: 10px;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--red);
  cursor: pointer;
}
.isbyg-dessert-valg { margin-top: 10px; }
.isbyg-dessert-valg > .isbyg-valg { margin-bottom: 8px; }
/* Kortet er cremet på det mørke glas — dets tekst er derfor ALTID
   blæk, også inde i glasset. Uden den linje arvede navnet glassets
   hvide skrift (samme fælde som bordets hvide-på-hvidt 25/9). */
.glasafsnit .isbyg-dessert, .glasafsnit .isbyg-dessert-navn { color: var(--ink); }
/* ⚠️ OG FELTERNE I KORTET MED. `.glasafsnit .inp` giver hvid tekst på
   en gennemsigtig flade — skrevet til det mørke glas. Inde i det
   cremede kort blev en valgt smag hvid på creme: MÅLT 26/9 kunne man
   ikke se, at "Vanilje" var valgt. Samme fælde som bordets
   hvide-på-hvidt 25/9 — en baggrund uden sin farve er en halv regel. */
.glasafsnit .isbyg-dessert .inp { color: var(--ink); background-color: #fff; box-shadow: var(--kant-inde); }
.glasafsnit .isbyg-dessert select.isbyg-smag {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink2) 50%), linear-gradient(135deg, var(--ink2) 50%, transparent 50%);
}
.glasafsnit .isbyg-dessert select.isbyg-smag.mangler { background-color: rgba(214, 42, 58, .1); }
.glasafsnit .isbyg-dessert .isbyg-kugle-nr { color: var(--red); }
.glasafsnit .isbyg-dessert .isbyg-hint,
.glasafsnit .isbyg-dessert .isbyg-oenske-tekst { color: var(--muted); }

.glasafsnit .isbyg-beskriv,
.glasafsnit .isbyg-tael-navn,
.glasafsnit .isbyg-tael-tal { color: #fff; }
.glasafsnit .isbyg-status { color: rgba(255, 255, 255, .78); }
.glasafsnit .isbyg-status.fuld { color: #ffccd1; }
.glasafsnit .isbyg-tael { border-top-color: rgba(255, 255, 255, .18); }

@media (prefers-reduced-motion: reduce) {
  .isbyg-knap, .isbyg-kvit, .isbyg-slag { transition: none; }
}

/* ============================================================
   LESREG-FORFININGEN  (27/9) — tastatur, hover, spærrede knapper
   og reduceret bevægelse
   ------------------------------------------------------------
   Lesregs principper (Liquid Atelier 3.2-specifikationen, §1 og §5),
   lagt på husets EGNE værdier: husets rød, husets -2 px fra
   .evcard.evklik, husets --spring. Ingen ny farve, skrift, skygge
   eller kurve. Skyggeloftet (37) er fuldt — derfor outline overalt.
   ============================================================ */

/* ---- 1) FOKUS, SOM TASTATURET KAN SE ---------------------------
   Knapperne (.g, .bestil, chips, segmenter, skuffens links) havde
   ingen :focus-visible — kun browserens egen ring, som i Safari er
   en tynd blå glød, der forsvinder på glas og foto. Formen er husets
   (.evcard.evklik, .ev-valg button): 2 px rød outline med luft.
   Outline og ikke box-shadow: en box-shadow ville ERSTATTE glassets
   egne inset-stakke, mens knappen har fokus, og tælle mod loftet.

   ⚠️ :where() VEJER NUL. De steder, der allerede har deres egen
   fokusregel (.tidl-klik med offset -2, .evcard, .ev-valg), vinder
   stadig — og felternes indre røde ring (.inp:focus) er ikke rørt.

   ⚠️ FARVEN FØLGER GRUNDEN — MÅLT, IKKE GÆTTET. Hver ring på de tolv
   sider (390 og 1440) er målt som WCAG 2.4.13 gør: de samme pixels
   med og uden fokus. Rød holder på creme og hvidt. På mørke fotos og
   mørk grund drukner den, så dér er ringen hvid. Og topbjælken på
   undersiderne står på den ternede dug, hvor HVERKEN hvid (de hvide
   felter) eller rød (de røde) kan ses: dér er ringen blæk — 16:1 mod
   hvidt og 3,1:1 mod ternets rød. Forsiden og historien er
   undtagelserne: deres bjælke ligger på et mørkt foto og en grå film,
   og dér er den hvid (blæk forsvandt i filmens mørke partier). */
:where(a,button,summary,[role="button"],[tabindex]):focus-visible{outline:2px solid var(--red);outline-offset:3px}
:where(.hero,.glasafsnit,.about,.find-foto,footer,.h-hero,.h-slut) :where(a,button,summary,[role="button"],[tabindex]):focus-visible{outline-color:#fff}
:where(.topbar:not(.stuck):not(.solid)) :where(a,button):focus-visible{outline-color:var(--ink)}
:where(body:has(.hero,.h-hero) .topbar:not(.stuck):not(.solid)) :where(a,button):focus-visible{outline-color:#fff}
/* ⚠️ INDENFOR, HVOR FORÆLDEREN KLIPPER. .tidligere har overflow:hidden
   for sine runde hjørner, og en ring UDEN for summary blev skåret helt
   væk (målt: 1,0:1 — usynlig). Samme greb som .tidl-klik. Kalenderens
   dage står 3 px fra hinanden; en ring 3 px ude lå oven på nabodagene,
   så dér sidder den tæt på dagen, inde i mellemrummet. */
.tidligere summary:focus-visible{outline-offset:-3px;border-radius:24px}
.lk-dag:focus-visible{outline-offset:0}

/* ---- 2) HOVER PÅ EN COMPUTER -----------------------------------
   Kun med mus (hover + fin markør), og kun når bevægelse er i orden.
   -2 px er .evcard.evklik's løft; .g har allerede transform på sin
   --spring-overgang, så intet nyt skal tones.
   ⚠️ :not(:active) — ellers vinder løftet over trykket (.g:active
   scale(.955)), og knappen holder op med at give efter under musen.
   ⚠️ IKKE .bestil: pillen gemmer sig med transform (.tuck/.ned), og
   et løft ville overskrive det. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .g:hover:not(:active):not(:disabled){transform:translateY(-2px)}
}

/* ---- 3) EN SPÆRRET KNAP GIVER IKKE EFTER ------------------------
   button.g.solid:disabled er grå og siger "not-allowed" — men
   .g:active skalerede den stadig, som om trykket gik igennem. Samme
   regel som .step button:disabled:active har haft længe. */
button.g:disabled:active{transform:none}

/* ---- 4) REDUCERET BEVÆGELSE: DET, DER MANGLEDE -----------------
   Afsløringerne, filmen, isen og dampen stod allerede stille. Det,
   der stadig GLED, var dét, gæsten selv sætter i gang: menuskuffen
   (24 px op og skalering over et halvt sekund), bestil-pillen (glider
   ned under kanten), arrangementskortets løft og kalenderens filter.
   Lesregs regel (§5): vejen bliver et øjebliksskift, og en toning
   højst 150 ms. Trykket (.g:active m.fl.) er beholdt — det er svar
   på fingeren, ikke en rejse.

   ⚠️ SYNLIGHEDENS FORSINKELSE FØLGER TONINGEN. .sheet og .bestil
   skifter visibility EFTER udtoningen (se noten ved .sheet 14/9);
   står toningen på .15s, skal forsinkelsen også, ellers står en
   usynlig skuffe og fanger klik i en kvart sekund.

   ⚠️ !important KUN PÅ .evcard[style]: kalenderens filter (scriptet
   nederst i h-kalender.html) skriver transition og transform direkte
   i style-attributten, og den slår et stylesheet uden !important. */
@media (prefers-reduced-motion:reduce){
  .screen{scroll-behavior:auto}
  .sheet{transition:opacity .15s ease,visibility 0s linear .15s}
  .sheet.open{transition:opacity .15s ease,visibility 0s}
  .sheet-in{transform:none;transition:opacity .15s ease}
  .bestil{transition:opacity .15s ease,visibility 0s}
  .bestil.tuck,.bestil.ned{transform:none;transition:opacity .15s ease,visibility 0s linear .15s}
  .evcard.evklik:hover{transform:none}
  .evcard[style]{transform:none !important;transition:opacity .15s ease !important}
}

/* ⚠️ STATUSLINJEN HAR EN LANTERNE, IKKE EN PRIK (27/9). Den farvede
   prik med versaler er skabelonens "live"-mærke. Lanternen er
   tegnet i Higgsfield som husets andre ikoner (ikoner.svg) og er
   tændt, når lugen er åben; forside.js skifter tegnet. LESREG's
   status er form + tekst — her er formen en tændt eller slukket
   lanterne. "Ring og hør" (databasen svarer ikke) får telefonen:
   den siger hverken åbent eller lukket. */
.status .lanterne,.fk-status .lanterne{width:16px;height:16px;flex:none;display:block}
.hero .status .lanterne{color:rgba(255,255,255,.7)}
.hero .status.aaben .lanterne{color:#f0a03c}

/* ⚠️ FED START + TANKESTREG ER VÆK (27/9). "<b>Vi dækker op</b> — og
   rydder op" er skriftens mest genkendelige AI-træk. Nu står det fede
   som punktets overskrift på sin egen linje, og forklaringen er en
   almindelig sætning under den. Kundens egne ord er de samme. */
.fact>span>b:first-child{display:block;margin-bottom:2px}

/* ⚠️ TEKST GLIDER IKKE IND (27/9). Mikkels ord om det generiske:
   "alt glider op, når man ruller". Overskrifter, underrubrikker og
   linjer står der bare — det er skabelonens tegn, at HVER blok
   stiger 26 px op og toner ind. Kort, billeder, gallerier og
   paneler beholder deres bevægelse, og dermed kundens egen
   "rigtig variation af animationerne" (9/9, prøven i gennemgang
   vogter den). !important, fordi varianterne .rev.r-ind/.r-blaend
   og de forsinkede .rev.in.d1-3 vejer 0,2,0-0,3,0 og ellers ville
   vinde over en tekstblok, der har fået en af dem. Paneler er kort
   og beholder bevægelsen, selv om de begynder med en overskrift. */
.rev:is(.mid,.sub,.tcap,.findhoved),
.rev:not(.panel):has(> h2:first-child),.rev:not(.panel):has(> h3:first-child),.rev:not(.panel):has(> .eyebrow:first-child){
  opacity:1!important;transform:none!important;transition:none!important}

/* ---- TILBEHØR TIL DAGENS RET — forsiden  (1/10) ----
   Den SAMME ting som .stk-tilvalg-* ved bordet (css/style.css).
   To udseender for det samme valg ville betyde, at gæsten lærer
   det ét sted og ikke genkender det det andet — og de to sider er
   ét klik fra hinanden. */
/* ⚠️ flex-basis:100% OG rækken får flex-wrap — ellers klemmes chipsene
   ind ved siden af tælleren i stedet for at stå på deres egen linje.
   ⚠️ OG SÅ SKAL VENSTRE KOLONNE HOLDES PÅ FØRSTE LINJE. Uden den
   næste regel brækkede HELE rækken: kartoffel-tegnet stod alene på
   én linje, titlen på den næste og tælleren på den tredje — målt på
   et skud af iPhone 13, ikke læst. `flex:1 1 0` giver den resten af
   første linje; tegnet og tælleren beholder deres egen bredde.

   ⚠️ .har-tilvalg OG IKKE :has(.item-tilvalg)  (1/10). Den første
   udgave brugte :has(), og så skal browseren spørge "har DEN her
   række et barn med den klasse?" ved hver eneste ændring i DOM'en
   — og kurvsiden ændrer sig hele tiden. MÅLT: kurvbar.spec.js gik
   fra 14,9 til 43 sekunder, og "et tryk på bjælken" faldt på
   "element is not stable", fordi siden aldrig faldt til ro.
   Det lignede en maskinfejl. Det var en CSS-vælger.

   Klassen sættes i forvejen af js/skal/bestil.js, så det koster
   ingenting at spørge efter den. */
.item.har-tilvalg{flex-wrap:wrap}
.item.har-tilvalg > div:not(.item-tilvalg):not(.step){flex:1 1 0;min-width:0}
.item-tilvalg{flex:0 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.item-tilvalg-titel{flex:0 0 100%;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
/* Mindst 40 px at ramme — se noten i css/style.css. */
.item-tilvalg-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border-radius:999px;border:1.5px solid rgba(36,26,23,.18);background:var(--paper,#fff);color:var(--ink,#241a17);font:inherit;font-size:14px;cursor:pointer}
.item-tilvalg-pris{font-size:12px;font-weight:600;color:var(--red);white-space:nowrap}
/* Ikke kun farven: ramme, bund OG fed — se noten i css/style.css. */
.item-tilvalg-chip.valgt{border-color:var(--red);background:var(--red-svag,rgba(214,42,58,.10));font-weight:600}
.item-tilvalg-chip.valgt .item-tilvalg-pris{color:var(--red-tekst,var(--red))}

/* ---- Sprogknappen på menukortet  (2/10) ----
   To knapper, ikke et flag: et flag siger "land", og gæsten leder
   efter et sprog. Og ingen rullemenu — to muligheder i en menu er
   et klik for meget. */
.mk-sprog{display:flex;gap:6px;margin:0 0 10px;flex-wrap:wrap}
/* Mindst 40 px at ramme — samme mål som chipsene i bestillingen. */
.mk-sprog-knap{min-height:40px;padding:6px 16px;border-radius:999px;border:1.5px solid rgba(36,26,23,.18);background:var(--paper,#fff);color:var(--ink,#241a17);font:inherit;font-size:14px;cursor:pointer}
/* Valgt ses på ramme, bund OG vægt — ikke kun på farven. */
.mk-sprog-knap.valgt{border-color:var(--red);background:var(--red-svag,rgba(214,42,58,.10));font-weight:600;color:var(--red-tekst,var(--red))}
/* Et afsnit uden overskrift er en FORTSÆTTELSE af det ovenfor —
   de to prisvarer sidst i variantlisten (2/10). Ingen egen luft
   over, ellers ligner det et nyt afsnit, nogen glemte at navngive. */
.mk-sek-fortsat{margin-top:-10px;padding-top:0}
/* ⚠️ ET AFLYST ARRANGEMENT STÅR STADIG — MED ORDET  (12/10). Det
   forsvinder ikke: en gæst, der har set det i går, skal kunne se, at det
   er aflyst, i stedet for at lede efter det. Titlen streges over, og
   resten blegner; ordet "Aflyst" står i knappens plads (kalender.js). */
.evcard.aflyst h3{text-decoration:line-through;text-decoration-thickness:1.5px}
.evcard.aflyst .kind,.evcard.aflyst p{opacity:.6}

/* footerens mærker er husets tegninger, ikke emoji (23/10) — ny/ark-ny.css klæder dem videre på */
.smiley-linje .fod-ill{flex:none;width:24px;height:24px}