/* ============================================================
   MOSEDE HAVNECAFE & ISHUS
   ------------------------------------------------------------
   Bygget efter designbundtet. Farver, typografi, afstande og
   easings er fastlagt der – rør dem ikke uden at se prototypen.

   Signaturen er glasknapperne og den rolige havnepalet: sand,
   marineblå, en rød accent og is-lyserød.

   Skrifterne ligger i mappen fonts/, ikke hos Google. En telefon
   med dårligt signal nede ved vandet skal ikke vente på et
   fremmed domæne, og siden må ikke gå i stykker hvis Google er
   nede.
   ============================================================ */

/* font-display:block på Bebas: 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. */
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas-neue.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
/* Overskriftsskriften — for BÅDE personalesiden (body.personale)
   og de gamle gæstesider: --display peger på den siden 29/8, hvor
   Bebas gik af som gæstesidernes overskrift.

   Den ligger LOKALT og ikke som et link til Google: admin åbnes på
   en iPad i et køkken, og en render-blokerende stylesheet fra et
   fremmed domæne er et ekstra sted, tingen kan hænge. Filen hentes
   kun, hvis den bliver brugt.

   ⚠️ DET ER FRAUNCES NU (6/9), ikke Instrument Serif — Mikkels valg
   efter fire skud af heroen. Den er VARIABEL (wght 100-900), så
   vægten skal stå som et SPÆND i @font-face; med et fast 400 ville
   browseren syntetisere en fed i stedet for at bruge aksen, og
   `.tal-tal` og klokken ville stå tykkere end de gør på
   designsiderne. Og der er BÅDE en oprejst og en kursiv fil: uden
   den sidste hælder browseren selv bogstaverne, og forskellen ses
   på 19 px.

   ⚠️ OG BEGGE ARK SKAL FØLGES AD. havnegrillen.css bærer de ti
   designsider, det her ark bærer admin, bestil/, bord/,
   ved-bordet/ og min-bestilling/ — og gæsten går imellem dem i ét
   klik. To forskellige overskriftsskrifter i ét hus er dét,
   "ÉT HUS, ÉN SKRIFT" (29/8) blev lavet for at fjerne. */
/* ⚠️ HOST GROTESK AFLØSTE FRAUNCES OG INSTRUMENT SANS (27/9) —
   Mikkels valg, i HELE huset, så "ÉT HUS, ÉN SKRIFT" holder: det
   her ark og havnegrillen.css peger på de SAMME filer i fonts/.
   Skriften kommer som faste vægte (400/500/600/700 + kursiv 400/500),
   ikke som en variabel akse, så hver vægt har sin egen @font-face —
   se noten i havnegrillen.css og fonts/LICENS.md. */
@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 — se noten i havnegrillen.css (27/9). */
@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;
}

:root {
  --sand:  #fdf7ef;
  --sand2: #f7ede1;
  /* Panelhvid. Ikke ren hvid: designbundtet bruger #fffdf8, som
     har et strejf af sandet i sig, så et kort på sandbaggrund
     ikke skærer i øjnene som et stykke printerpapir. */
  --paper: #fffdf8;
  --sea:   #241a17;
  --sea2:  #3a2924;
  --sea3:  #5c4a45;
  --red:   #d62a3a;      /* LOGOETS røde — samme som designsiderne, se note */
  --scoop: #f0c3bb;
  --cone:  #dcbf94;
  --muted: #6f5b55;      /* mørkere end prototypens #6d8298 – se note */
  --red-tekst: #b6202f;  /* rød til LILLE tekst på lys bund – se note */
  --red-dyb:   #9e1b28;  /* rød til lille tekst på en LYSERØD flade – se note */

  /* Sidens gutter. Bruges af hver sektion, så alt flugter. */
  --pad: clamp(20px, 4vw, 72px);

  /* ---------------------------------------------------------
     RUNDINGER, SKYGGER OG TIDER
     ---------------------------------------------------------
     Alle flader var 8px runde og hvide. Det var firkantede kasser
     på en varm sandbaggrund, og de gjorde siden hård at se på.
     Nu er der tre trin, og de bruges konsekvent:

       --r-lille   pastiller, mærker, små felter
       --r-flade   kort, paneler, billedrammer
       --r-stor    de store blokke der bærer et afsnit

     Tiderne står her, så en overgang aldrig bliver sat i et
     tilfældigt tal midt i arket. --t-blid er den der bruges til
     alt der skal føles som vand.
     --------------------------------------------------------- */
  --r-lille: 14px;
  --r-flade: 22px;
  --r-stor: 30px;

  --skygge-blid:
    0 1px 1px rgba(36, 26, 23, .05),
    0 10px 24px -14px rgba(36, 26, 23, .30);
  --skygge-loeft:
    0 1px 1px rgba(36, 26, 23, .06),
    0 22px 48px -22px rgba(36, 26, 23, .42);

  --t-hurtig: .18s;
  --t-blid: .42s;
  --t-lang: .9s;
  --lempning: cubic-bezier(.2, .8, .2, 1);

  /* ⚠️ OVERSKRIFTERNE ER DESIGNSIDERNES SERIF NU (29/8). Bebas
     var de gamle siders eget ansigt, men gæsten går mellem gamle
     og nye sider i ét klik, og to overskriftsskrifter på det
     samme hus læses som to huse. Serif-filen ligger allerede
     lokalt i fonts/. HTML'en står i blandede bogstaver — Bebas
     TEGNEDE dem bare som versaler, så intet indhold er rørt. */
  --display: "Host Grotesk", system-ui, sans-serif;
  --brod: "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Hårstreger */
  --streg: rgba(36, 26, 23, .14);
  --streg-lys: rgba(255, 255, 255, .14);

  /* Havnefoto til hero. Læg filen i billeder/ og fjern
     kommentaren. Findes den ikke, står stribemønsteret. */
  /* --hero-foto: url('../billeder/havnen.jpg'); */
}

/* ⚠️ DET BLÅ ER UDE — HELE PALETTEN ER DESIGNSIDERNES (29/8)
   ------------------------------------------------------------
   Kundens ord om de gamle siders marineblå: "ved ikke lige hvor
   du har de blå ting fra — hele hjemmesiden har det ternede og
   rød/hvide tema." Havnens blå familie (#0f2c44/#1a4763/#2c6180,
   blågrå --muted, blå skygger og hårstreger) er byttet til
   designsidernes varme: --sea er varm blæk #241a17 (samme som
   admin og havnegrillen.css), sand/sand2 er designets creme
   #fdf7ef/#f7ede1, og alle rgba(15,44,68,…) blev rgba(36,26,23,…).
   SÆT ALDRIG en blå tilbage her — de mørke flader (heroer,
   footere) følger --sea og skal være varm blæk, ikke marine.

   KONTRASTEN ER MÅLT EFTER (29/8, på de NYE grunde):
   --muted #6f5b55 (admins egen varme dæmpede): 5,97 mod sand og
   5,50 mod sand2 — de gamle blågrå (#526e8b/#4e6985) var valgt
   til de GAMLE sandgrunde og hører historien til.

   --red-tekst findes fordi mærkefarven #d62a3a giver 4,64 mod
   den nye creme — over kravet, men uden margin at bygge på (den
   gamle lære fra 22/8: 4,68 var aldrig nok). Til en overskrift
   er mærkefarven fin (stor tekst kræver kun 3:1); links på 14px
   og "i dag"-linjen bruger den mørkere.

   #b6202f rammer 6,09 mod sand og 5,61 mod sand2.

   OG SÅ KOM DER EN TREDJE: --red-dyb.

   Mærkepillen "DAGENS RET · 95,-" i bestillingspanelet står ikke
   på sand. Den står på en lys rød flade oven på en anden lys rød
   flade — rgba(214,42,58,.12) oven på .06 oven på panelhvid — og
   summen er cirka #f8d8d8. Mod den falder små tekster under 4,5
   med de lysere røde.

   #9e1b28 rammer 5,98 mod fladen. Den bruges KUN dér: en dybere
   rød mod sand ville se sort ud ved siden af de andre.

   ⚠️ HELE FAMILIEN SKIFTEDE TIL LOGOETS RØDE (29/8, kundens bøn
   om ét udtryk på tværs af siderne): --red er designsidernes
   #d62a3a, og de to tekst-røde fulgte med ind i samme familie —
   begge MØRKERE end før, så hvert eneste kontrasttal steg.
   Knappernes glas-gradienter står i samme familie:
   rgba(214,42,58,.94) øverst og rgba(193,31,47,.96) i bunden —
   bunden er designets eget mørke stop #c11f2f (.g.solid i
   havnegrillen.css). Sæt ALDRIG de gamle orange-røde
   (#d1462f-familien) tilbage — så står gæstesiden igen i to
   røde, og favicon-prøven vogter kun ikonet. Tallene her er
   regnet efter 29/8; kontrast.spec.js i tests-gamle/ målte de
   gamle. */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--sea);
  font: 400 16px/1.5 var(--brod);
  -webkit-font-smoothing: antialiased;
}

/* ⚠️ Linjehøjde og sperring er SERIFFENS tal (som havnegrillen.css'
   h-regel). Bebas' .88 klipper en serifs over- og underlængder —
   det er præcis fælden, CLAUDE.md advarer om ved body.personale. */
h1, h2, h3, .bebas {
  font-family: var(--display);
  font-weight: 500;
  margin: 0;
  letter-spacing: -.008em;
  line-height: 1.04;
}

a { color: var(--red-tekst); text-decoration: none; }
a:hover { color: var(--sea); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Fingeren skal have svar i samme billede som den rammer. WebKits
   grå blink kommer FØR vores egen trykreaktion og ligner en fejl,
   og "manipulation" fjerner de 300 ms hvor browseren venter på et
   dobbelttryk, før den melder klikket videre. */
/* FELTERNE SKAL MED, OG DET ER DEM, DET GÆLDER MEST.
   Reglen ovenfor stod med a, button og .fyld-valg og glemte
   select, input og textarea — og <select> er præcis dét, gæsten
   VÆLGER i: Dato og Tidspunkt er begge select.

   Kunden så det på sin telefon (23/8) og kaldte det en gul kant,
   der dækker. FARVEN ER BROWSERENS, ikke vores: målt i Chromium
   er den lyseblå, rgba(51, 181, 229, .4), og andre telefoner
   tegner den gul eller orange. Derfor kan fejlen ikke findes ved
   at lede efter "gul" i det her stilark — den står ingen steder
   i det. Prøven i tests/telefon.spec.js læser i stedet den
   BEREGNEDE værdi og fandt syv felter: Dato, Tidspunkt, Navn,
   Telefon og tre knapper. */
a, button, .fyld-valg,
select, input, textarea, label { -webkit-tap-highlight-color: transparent; }
/* ⚠️ OGSÅ PÅ RODEN (13/9): to hurtige tryk på + var et dobbelttryk,
   og Safari zoomede. manipulation slår kun dobbelttryk-zoom fra —
   to fingre zoomer stadig. Se samme note i havnegrillen.css. */
html, button, .fyld-valg, select, label { touch-action: manipulation; }


img, svg { display: block; max-width: 100%; }

.wrap { padding-inline: var(--pad); }

/* ------------------------------------------------------------
   PLADS TIL DEN FASTE TOPMENU VED ANKERLINKS
   ------------------------------------------------------------
   Topmenuen ligger fast øverst. Uden dette ruller "Menukort" og
   "Find os" sektionen helt op til kanten, og så står overskriften
   BAG menuen. Man tror man har ramt forkert.
   96px er menuens højde plus lidt luft.
   ------------------------------------------------------------ */
main [id], main[id] { scroll-margin-top: 96px; }

.eyebrow {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow.lys { color: rgba(255, 255, 255, .78); }

/* ------------------------------------------------------------
   PLADS TIL RINGEN OVER Å
   ------------------------------------------------------------
   Kunden sendte et skærmbillede fra bestil/, hvor "SÅ TAGER VI
   DEN I TELEFONEN" lå oven i sin egen eyebrow, "SKAL DET VÆRE
   STØRRE?".

   Det er ikke en margen, der mangler. Overskrifterne står med
   line-height .88, altså en LINJEBOKS, der er mindre end selve
   bogstavet — det er dét, der giver den tætte stak, når en
   overskrift er på to-tre linjer. Prisen er, at alt over
   versalhøjde stikker ud over boksen foroven: ringen på Å,
   stregen på Ø, prikkerne på Ä. Og dansk sætter dem i første
   bogstav hele tiden.

   .18em er halvdelen af det, linjehøjden mangler (.06em), plus
   ringen (~.12em). Det skalerer med skriftstørrelsen, hvor et
   fast pixeltal ville være rigtigt på én skærmbredde og forkert
   på alle andre.

   Reglen rammer alle overskrifter med en eyebrow lige over —
   ikke kun de tre, vi kender i dag. Skrives der en ny sektion i
   morgen, er hullet der allerede.
   ------------------------------------------------------------ */
.eyebrow + h1,
.eyebrow + h2,
.eyebrow + h3 { margin-top: .18em; }

/* En eyebrow på en mørk flade skal være lys – uden at nogen skal
   huske at skrive .lys på den. Glemte man klassen, stod der
   blågrå tekst på marineblå bund, altså intet at læse. Reglen
   fjerner selve muligheden for at glemme det. */
.split-tekst .eyebrow,
.flav .eyebrow,
.hero .eyebrow,

.skjult { display: none !important; }

.kun-oplaest {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   GLASKNAPPER – OG HVOR SLØRET BLEV AF
   ------------------------------------------------------------
   Der var backdrop-filter på hver enkelt pille. Atten af dem på
   forsiden alene. Målt i browseren: rulningen kørte 26 billeder i
   sekundet på en computer, og slog man kun backdrop-filter fra,
   sprang den til 47. Næsten en fordobling af det man mærker, fra
   én egenskab.

   Og på femten af de atten lå sløret oven på FLADT SAND. Der er
   ikke noget at sløre i en ensfarvet flade – man betaler en fuld
   blur-beregning per billede for en effekt der ikke kan ses.

   Sløret er derfor flyttet til de tre steder hvor der ER et
   billede bagved:

     .hero .glass    heroens piller ligger på havnefotoet
     .film-knap      "Afspil filmen" ligger på isfilmens plakat
     .chip           kuglepillerne ligger på det mørke isafsnit

   Resten er flade. De ser stort set ens ud – en halvgennemsigtig
   hvid flade med to inderskygger – for det var aldrig sløret der
   gjorde arbejdet, når bunden var ensfarvet.
   ============================================================ */
.glass {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  /* 600 og ikke arvet vægt. Kundens ord (22/8): "knapperne er
     ikke gode nok, de er generiske." En knap med brødtekstens
     egen vægt ER brødtekst med en flade om — det er dét, der
     får den til at ligne en standardknap fra et hvilket som
     helst framework. En handling skal veje mere end det, der
     står omkring den. */
  font-weight: 600;
  letter-spacing: .012em;
  color: var(--sea);
  cursor: pointer;
  border: 0;
  /* Uden slør skal fladen selv være tæt nok at læse på. .5 blev
     .82: sandet nedenunder trænger stadig igennem, men teksten
     står på noget. */
  background: rgba(255, 255, 255, .82);
  /* LINSEKANTEN HELE VEJEN RUNDT — også på lys bund.
     Den sad kun på .on-dark, og det var en halv beslutning: en
     hvid pille på sand har præcis det samme problem som en mørk
     pille på et foto — kanten forsvinder, og så er der ingen
     genstand, kun en lysere plet. Ringen er dét, der siger
     "her er en flade". Den er inderskygge og koster ingenting. */
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .95),
    inset 0 -2px 2px rgba(255, 255, 255, .55),
    inset 0 0 0 1px rgba(36, 26, 23, .09),
    0 1px 1px rgba(36, 26, 23, .06),
    0 12px 30px rgba(36, 26, 23, .16);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--t-blid) var(--lempning),
    box-shadow var(--t-blid) ease,
    background var(--t-blid) ease;
}

/* LINSEKANTEN — det, der gør glas til glas i iOS 26.

   Apples Liquid Glass har en fast, skæv lysflade i toppen, som om
   lyset bryder i kanten af en linse. Kunden sendte Apples egne
   SwiftUI-API'er (.glassEffect, .buttonStyle(.glass)) som
   forbillede — de findes kun i native apps, så her efterlignes
   materialet: et statisk 150-graders strejf i et pseudoelement.

   Det er GRATIS i modsætning til slør: en gradient males én gang
   og koster ingenting under rulning, så den må sidde på alle
   piller — også de flade. Sløret er stadig kun de tre steder med
   et billede bagved (se noten øverst i afsnittet). */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(255, 255, 255, .5), transparent 42%);
  pointer-events: none;
}
.glass.solid::before,
.glass.on-dark::before { background: linear-gradient(150deg, rgba(255, 255, 255, .28), transparent 42%); }

/* DE TRE STEDER DER HAR ET BILLEDE BAGVED. Mætningen er skruet op
   til Apples 200% — det er den, der får farverne bag glasset til
   at bløde igennem i stedet for at blive grå. */
.hero .glass,
.film-knap {
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(22px) saturate(200%);
  backdrop-filter: blur(22px) saturate(200%);
}

/* LIQUID: et lysstrejf der glider hen over glasset.

   Det er ikke et blink. Det er en smal, skæv, meget svag hvid
   stribe der bevæger sig fra venstre mod højre – som lys der
   løber hen over en våd flade. Den ligger i et pseudoelement og
   flyttes med transform, så den ikke koster layout.

   Den kører KUN ved berøring og hover. En stribe der løber i ring
   hele tiden på tolv knapper er uro, ikke liv. */
.glass::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  z-index: -1;
  background: linear-gradient(105deg,
    transparent 34%,
    rgba(255, 255, 255, .55) 48%,
    rgba(255, 255, 255, .18) 56%,
    transparent 66%);
  transform: translateX(-130%);
  transition: transform 1.05s var(--lempning);
  pointer-events: none;
}
.glass:hover::after,
.glass:focus-visible::after { transform: translateX(130%); }

.glass:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .94);
  box-shadow:
    inset 0 1.5px 1px #fff,
    inset 0 0 0 1px rgba(36, 26, 23, .12),
    0 18px 40px rgba(36, 26, 23, .22);
  color: var(--sea);
}
/* Trykket skal kunne mærkes. På en telefon er der ingen hover, og
   uden en trykreaktion kan man ikke se om man ramte. */
.glass:active { transform: translateY(0) scale(.975); transition-duration: var(--t-hurtig); }

.glass.on-dark {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  /* Ringen hele vejen rundt (.5px hvid) er linsens kant. Uden den
     flyder en mørk glaspille sammen med et mørkt foto — det er
     ringen, der siger "her er en flade". Samme greb som Apples. */
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .6),
    inset 0 -1px 1px rgba(255, 255, 255, .15),
    inset 0 0 0 .5px rgba(255, 255, 255, .22),
    0 12px 34px rgba(0, 0, 0, .3);
}
.glass.on-dark:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* SAMME OPSKRIFT SOM .bestil-fast, MED VILJE. Den røde knap i
   heroen og den flydende pille er den samme handling, og på
   kundens telefon stod de lige over hinanden: den ene blank og
   flydende, den anden flad og mat — det lignede to forskellige
   systemer. Lyskanten og skyggerne er pillens tal. Retter man
   det ene sted, så ret det andet.

   TO TING ER IKKE TIL FORHANDLING I GRADIENTEN:

   1) background-color SKAL stå under background-image.
      Kontrastprøven kan ikke læse en gradient — den læser
      background-color, og et shorthand `background: linear-…`
      nulstiller den til gennemsigtig. Så vandrer prøven forbi
      knappen, finder en lys flade bagved og måler 1,13:1 på
      telefonnummeret i skuffen. Det er sket; det var sådan, den
      her kommentar blev til.

   2) Toppen af gradienten må IKKE være lysere end --red.
      Hvid tekst på --red er 4,54:1 — en hårsbredde over kravet.
      Første udgave lånte pillens gamle lyse top (#e95e46), og
      den er 3,4:1: for lav til brødtekststørrelser, og prøven
      ville aldrig se det, for den måler background-color. Lyset
      i knappen kommer fra lyskanten foroven, ikke fra en lysere
      bund. */
.glass.solid {
  background-color: var(--red);
  background-image: linear-gradient(180deg, rgba(214, 42, 58, .94), rgba(193, 31, 47, .96));
  color: #fff;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .55),
    inset 0 -2px 2px rgba(120, 25, 10, .35),
    inset 0 0 0 .5px rgba(255, 255, 255, .25),
    0 12px 30px rgba(214, 42, 58, .34);
}
.glass.solid:hover { background: #bd3b26; color: #fff; }

.glass.sm { height: 40px; padding: 0 18px; font-size: 13px; }

/* .glass.stor ER SLETTET. Den fandtes til heroens to knapper, og
   dem bad kunden om at få væk (22/8): "knapperne behøver ikke
   være der på heroen." Forsidens hovedhandling er den flydende
   pille, .bestil-fast, som har sin egen størrelse.

   Reglerne er væk og ikke kommenteret ud. En halv stil, der
   ligger og venter på at nogen genbruger klassenavnet, giver en
   knap der ser forkert ud på en måde, ingen kan finde.
   tests/bestil-doeren.spec.js slår ned, hvis .glass.stor dukker
   op på forsiden igen. */

/* LANTERNEN I "ÅBENT NU"-PILLEN (27/9). Her stod en prik, der
   åndede grønt eller stod rød: det generiske statustegn, Mikkel
   pegede på ("ikke lesreg agtige … claude genkendelige"). Nu er
   det husets lanterne fra ikoner.svg, samme som forsiden: tændt
   ved åbent, slukket ved lukket. Tegnet vælges i Butik.lanterne,
   og der står ALTID også "Åbent" eller "Lukket" i teksten, så
   formen aldrig står alene. Tændt er husets lanterne-rav; på den
   lyse pille ved bordet en tone mørkere, ellers forsvinder den i
   det hvide. */
.glass .lanterne { width: 16px; height: 16px; flex: 0 0 auto; display: block; color: var(--muted); }
.glass.aaben .lanterne { color: #c97a14; }
.glass.on-dark .lanterne { color: rgba(255, 255, 255, .7); }
.glass.on-dark.aaben .lanterne { color: #f0a03c; }

/* Kan browseren ikke sløre baggrunden, bliver de tre slørede flader
   almindelige flader. Uden dette ville teksten stå på noget nær
   gennemsigtigt oven på et foto. De øvrige piller har ikke brug for
   reglen længere – de er flade i forvejen. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero .glass, .film-knap { background: rgba(255, 255, 255, .92); }
  .hero .glass.on-dark { background: rgba(36, 26, 23, .82); }
  .chip { background: rgba(255, 255, 255, .22); }
  /* Uden slør ville den dæmpede side skinne igennem arket og gøre
     sandet gråt — samme fejl som dæmperen på ::before, bare i en
     gammel browser. Så bliver arket tæt. */
  .ark { background: var(--sand); }
}

@media (prefers-reduced-motion: reduce) {
  .glass { transition: none; }
  .glass:hover { transform: none; }
  /* Kun ::after (strejfet der FLYTTER sig) slås fra. ::before er
     linsekanten, og den står stille — den er form, ikke bevægelse. */
  .glass::after { display: none; }
  .glass:active { transform: none; }
}

/* ------------------------------------------------------------
   TOPMENU – fast, bliver til glas når man ruller
   ------------------------------------------------------------
   REGLERNE ER BUNDET TIL #hd OG IKKE TIL <header>.

   De hed "header" og "header.stuck", altså hvert header-element på
   hver side. Det gik godt så længe der kun var ét — indtil
   smørrebrødssiden fik et mørkt sidehoved i et <header>, og det blev
   position: fixed og lagde sig oven på siden.

   Personalesidens topbjælke slap kun fordi .top sætter position:
   sticky og vejer mere (0,1,0 mod 0,0,1). Det er ikke en løsning, det
   er et held med rækkefølgen.

   Det er præcis samme fælde som den globale nav-regel, der
   højrestillede skuffemenuens liste 75 px inde. En bar elementvælger
   til noget der findes ét sted, rammer også det der bliver bygget
   næste gang.
   ------------------------------------------------------------ */
#hd {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  gap: 26px;
  /* ⚠️ Ikke padding — se noten ved .topbar i havnegrillen.css.
     Bjælken er fixed og skifter tilstand under rulning; en
     animeret padding er en ombrydning pr. billede. */
  transition: background .4s ease, box-shadow .4s ease;
}
/* SLØR BAG TOPMENUEN
   ------------------------------------------------------------
   Designet havde hvide menupunkter direkte oven på hero-fotoet.
   Målt mod et LYST foto giver det 3,4:1 – under kravet på 4,5
   for 14px tekst. Med dette slør er der altid en mørk bund at
   læse imod, uanset hvilket billede der lægges ind. Over et
   mørkt foto kan man knap se det. */
#hd::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 150px;
  background: linear-gradient(180deg, rgba(36, 26, 23, .78), rgba(36, 26, 23, 0));
  pointer-events: none;
  transition: opacity .4s ease;
}
#hd > * { position: relative; }
/* Når menuen er blevet til glas, er sløret i vejen */
#hd.stuck::before { opacity: 0; }

/* DEN DYRESTE AF DEM ALLE.

   En fast bjælke i fuld bredde med backdrop-filter skal sløres om
   ved HVERT billede mens man ruller – det er hele pointen med
   effekten, at den følger med indholdet bagved. Det er også derfor
   den koster mest: 1280 × 60 pixel blur, 60 gange i sekundet, oven i
   alt det andet.

   Bjælken er nu næsten tæt (.96) uden slør. Man kan stadig se en
   antydning af sandet bagved, og det er den samme farve som sandet,
   så forskellen kan ikke ses – men rulningen kan mærkes. */
#hd.stuck {
  /* HELT UGENNEMSIGTIG. Den stod på .96, og de fire procent var
     nok til, at mørk tekst under bjælken kunne anes som en skygge
     — kunden så "Vi skal have bestillingen mindst 2 timer i"
     ligge halvt bag logoet på sin telefon (23/8). En bjælke, man
     kan se igennem, ser ud som om siden er tegnet forkert.
     Der er intet slør at bevare her: baggrunden er ensfarvet
     sand, og .96 gav ingen effekt, man kunne se. */
  background: var(--sand);
  box-shadow: 0 1px 0 var(--streg);
  padding-block: 10px;
}

.logo {
  font-family: var(--display);
  font-size: 17px;
  /* Sperringen var .15em — det tal er Bebas'. En serif med den
     luft falder fra hinanden i enkeltbogstaver (samme fælde som
     .top-navn i admin). */
  /* ⚠️ -.015em FRA 27/9: .04em var valgt til Fraunces. Host Grotesk
     er en grotesk og strammes; tallet er LESREG's for 24 px (h3),
     det samme som ordmærket i havnegrillen.css. */
  letter-spacing: -.015em;
  color: #fff;
  line-height: 1.1;
  transition: color .4s;
  /* ⚠️ MÅ IKKE OMBRYDE (8/9). Da kransen blev afløst af navnet
     som tekst, MÅLTES "Mosede Havnecafe" til TO linjer på en
     skærm på 320 px — i en bjælke på 64. Reglen har været
     tekstreglen for de gamle sider siden 29/8, men dengang stod
     der ikke et navn i den; kransen lå oven i den. */
  white-space: nowrap;
  /* ⚠️ 19 PX ER IKKE EN TRYKFLADE (9/9). Den fulde runde målte
     det på bestil/ og bord/: da kransen blev afløst af navnet
     som tekst, gik vejen hjem fra en SVG på 55 px til en
     tekstlinje på 19 — under gennemgangens gulv på 30.

     Luften er LODRET PADDING med negativ margin, og det er
     husets egen rettelse fra 31/8: `display:inline-block` var
     dét, der limede footerens links sammen til "Bestil
     madMenukort" på syv sider. Rækkens højde vokser ikke. */
  padding-block: 9px;
  margin-block: -9px;
}
#hd.stuck .logo { color: var(--sea); }
.logo:hover { color: #fff; }
#hd.stuck .logo:hover { color: var(--sea); }

/* MÅLRETTET TIL TOPMENUEN, ikke til hvert <nav> på siden.

   Reglen hed før bare "nav", og margin-left: auto skubbede alt hvad
   der stod i et nav-element mod højre. Det gik godt så længe der kun
   var ét – men skuffemenuens liste er også et nav, og den stod
   højrestillet 75 px inde med sine hårstreger og det hele. Man kunne
   se det på et skærmbillede og ikke i koden: der var ingen regel der
   nævnte skuffemenuen. */
#hd nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }

/* :not(.glass) ER NØDVENDIGT, og det var det ikke før.

   Reglen hed "nav a" og havde derfor lavere vægt end .glass, så
   glaspillen "Find os" beholdt sin egen mørkeblå tekst. Da reglen
   blev bundet til #hd for ikke at ramme skuffemenuen, fik den et
   id og vandt – og pillen fik hvid tekst på sin lyse glasflade.
   2,03:1, målt af tests/kontrast.spec.js.

   Reglen gælder de nøgne menupunkter. En pille har sine egne
   farver, og det er hele grunden til at den er en pille. */
/* OG NÅR MENUEN ER BLEVET GLAS, SKAL DEN VINDE
   ------------------------------------------------------------
   Skiftet til mørk tekst hed "header.stuck nav a" og vejede
   (0,2,3). Da reglen ovenover fik et id, vejede den (1,1,3) og
   vandt — og så beholdt menupunkterne deres hvide farve oven på
   den sandfarvede glasflade. 1,05:1. Usynligt, på alle sider, så
   snart man havde rullet 60 px.

   Ingen så det, fordi menupunkterne er skjulte på en telefon og
   det er telefonen man kigger på. Derfor står de begge nu bundet
   til #hd, så de kan sammenlignes på samme grundlag, og derfor
   måler tests/kontrast.spec.js nu topmenuen i BEGGE tilstande. */
#hd nav a:not(.glass) { font-size: 14px; color: rgba(255, 255, 255, .88); }
#hd.stuck nav a:not(.glass) { color: var(--sea); }
#hd nav a:not(.glass):hover { color: var(--scoop); }
#hd.stuck nav a:not(.glass):hover { color: var(--red); }

/* ---- Mobilmenu ---- */
.burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  border: 0; background: none; cursor: pointer;
  align-items: center; justify-content: center;
}
.burger i {
  display: block; position: relative;
  width: 22px; height: 2px; background: #fff;
  transition: background .4s;
}
.burger i::before, .burger i::after {
  content: ""; position: absolute; left: 0;
  width: 22px; height: 2px; background: inherit;
}
.burger i::before { top: -7px; }
.burger i::after { top: 7px; }
#hd.stuck .burger i { background: var(--sea); }
/* ⚠️ BURGEREN ER ET FAST, HVIDT FELT MED ORDET "MENU" (14/9) — den
   samme knap som på designsiderne (havnegrillen.css). Kundens ord om
   de tre streger: "grim, gennemsigtig, uoverskuelig". Tre hvide
   streger på ingenting oven på et foto var netop det, og en knap, man
   skal gætte sig til, er en knap, halvdelen ikke trykker på.
   Under 361 px er der ikke plads til ordet ved siden af navnet. */
#hd .burger {
  width: auto; height: 40px; padding: 0 15px 0 13px; gap: 8px;
  border-radius: 999px; background: #fff; color: var(--sea);
  font-family: inherit; font-size: 14px; font-weight: 600;
  box-shadow: inset 0 0 0 .5px rgba(36, 26, 23, .08), 0 6px 16px rgba(36, 26, 23, .12);
}
#hd .burger i, #hd.stuck .burger i { width: 18px; background: var(--sea); }
#hd .burger i::before, #hd .burger i::after { width: 18px; }
#hd .burger::after { content: "Menu"; }
@media (max-width: 360px) {
  #hd .burger { width: 44px; padding: 0; }
  #hd .burger::after { content: none; }
}

/* ------------------------------------------------------------
   SKUFFEMENUEN
   ------------------------------------------------------------
   Den bærer nu det den faste bjælke i bunden lavede. Bjælken er
   væk – den tog 56 px af skærmen permanent, kunden kaldte den
   grim, og de to ting den var til for (ring og find vej) hører til
   sammen med resten af navigationen og ikke i en stribe nederst.

   Rækkefølgen er derfor: handlingerne øverst som knapper, siderne
   som en liste, personalelinket i småt til sidst. Det man skal
   GØRE, står før det man skal LÆSE.
   ------------------------------------------------------------ */
/* ============================================================
   SKUFFEN ER ET BUNDARK NU
   ------------------------------------------------------------
   Den kom ned oppefra og dækkede hele skærmen. Designbundtet
   lægger den i BUNDEN som et ark, der glider op, og det er ikke
   smag:

   1) TOMMELFINGEREN NÅR DEN. En telefon holdes i den nederste
      tredjedel. En menu, der starter i toppen af skærmen, kræver
      at man flytter grebet om telefonen for at ramme det øverste
      punkt — og det er det punkt, der bliver trykket mindst på.

   2) MAN KAN SE, HVOR MAN VAR. Arket dækker ikke hele skærmen,
      så siden bagved er der stadig. Det er forskellen på "jeg
      åbnede en menu" og "jeg er landet et andet sted".

   3) DEN LUKKER, HVOR MAN TRYKKER. Det dæmpede område over arket
      lukker det. Det er den gestus, alle kender fra telefonens
      egne ark, og krydset behøver man ikke ramme.

   HTML'EN ER IKKE RØRT. Der er ingen indre indpakning omkring
   indholdet — dæmperen ligger i .ark::before og males uden for
   .ark's egen kasse. Et pseudoelement peger stadig på sit eget
   element ved klik, så lukningen virker, og de ti sider skulle
   ikke rettes hver især.

   max-height: klik ikke 100%. Menuen har tolv punkter, og på en
   lav telefon i liggende format ville arket dække alt. 88svh
   giver 12% side bagved, uanset hvad, og arket ruller selv
   indeni.
   ============================================================ */
.ark {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 25;
  max-height: 88svh;

  /* FROSTET, som bundtets sheet (rgba(247,240,228,.72) + blur 34).
     Vi ligger på .85: bundtets .72 lod den mørke dæmper bagved
     trække menupunkternes kontrast ned, og .85 holder teksten på
     den rigtige side af 4,5:1, målt af kontrastprøven.

     Sløret her er INDEN FOR ydelsesbudgettet, selv om resten af
     siden er flad med vilje: arket blurrer kun, mens det er åbent,
     og så ruller siden bagved ikke. Det dyre ved backdrop-filter
     er at sløre om ved hvert billede UNDER rulning — det sker
     ikke her. */
  background: rgba(247, 240, 228, .85);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border-radius: var(--r-stor) var(--r-stor) 0 0;
  box-shadow: 0 -20px 60px rgba(11, 26, 38, .3);
  padding: 14px var(--pad) var(--pad);
  padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  display: grid;
  align-content: start;
  gap: clamp(14px, 2.4vh, 26px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.ark.aaben { transform: none; }

/* DÆMPEREN LIGGER PÅ BODY, IKKE PÅ ARKET.
   ------------------------------------------------------------
   Første forsøg var .ark::before med inset: 0 og z-index: -1. Det
   så rigtigt ud i koden og var forkert på skærmen: .ark har
   position: fixed og z-index, altså sin egen stakkontekst, og
   inden i den males elementets EGEN baggrund allerbagerst — før
   børn med negativ z-index. Dæmperen lagde sig derfor oven på
   arkets sandfarve og gjorde den grå. Man så det med det samme på
   et skærmbillede og aldrig i koden.

   Den kunne heller ikke flyttes bagom: .ark har overflow-y: auto
   og en transform, og begge dele klipper et fixed pseudoelement,
   der stikker uden for kassen.

   Nu er den et lag på body, under arkets z-index 25. Ingen
   stakkontekst at kæmpe med, ingen klipning, og den dækker
   præcis dét, den skal: siden bagved. */
body.ark-aaben::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 24;
  background: rgba(11, 26, 38, .38);
  animation: daemp .45s ease both;
}
@keyframes daemp { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body.ark-aaben::after { animation: none; }
}

/* Grebet. Det gør ikke noget — man kan ikke trække i arket — men
   det siger HVAD tingen er, før man har læst et ord: et ark, der
   kan skubbes væk. Formen alene fortæller det. */
.ark-top::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(36, 26, 23, .2);
}

/* display:grid ovenfor slår browserens egen [hidden]-regel, så
   arket ville blive liggende og fange klik selv når det var
   "lukket". Denne linje er ikke pynt. */
.ark[hidden] { display: none; }

.ark-top {
  position: relative;   /* holder grebet ovenfor */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 6px;
}
.ark-top .eyebrow { margin: 0; }

.ark-handling { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.ark-handling .glass { justify-content: center; min-height: 52px; font-size: 15px; }

.ark-liste { display: grid; }
.ark-liste a {
  font-family: var(--display);
  font-size: clamp(30px, 8vw, 40px);
  letter-spacing: -.025em; /* 30-40 px: LESREG h2-sporing (27/9) */
  line-height: 1.1;
  color: var(--sea);
  /* 56 px høj: rigeligt over de 44, og en menu man kan ramme med
     tommelfingeren uden at se på skærmen. */
  min-height: 56px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--streg);
  transition: color var(--t-hurtig) var(--lempning),
              padding-left var(--t-hurtig) var(--lempning);
}
.ark-liste a:hover, .ark-liste a:focus-visible {
  color: var(--red-tekst);
  padding-left: 6px;
}
.ark-liste a[aria-current="page"] { color: var(--muted); }

.ark-fine {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.ark-luk {
  width: 44px; height: 44px;
  margin-right: -8px;
  border: 0; background: none;
  font-size: 30px; line-height: 1;
  color: var(--sea); cursor: pointer;
  border-radius: 999px;
  transition: background var(--t-hurtig) var(--lempning);
}
.ark-luk:hover { background: rgba(36, 26, 23, .08); }

/* Kun FORSIDENS menu skjules på en telefon – den erstattes af
   burgeren. Uden #hd her ramte reglen også personalesiden, som
   ikke har nogen burger, og så kunne man ikke logge ud fra en
   telefon. Det er præcis den skærm personalet står med. */
@media (max-width: 900px) {
  #hd nav { display: none; }
  #hd .burger { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .ark { transition: none; }
  .ark-liste a { transition: none; }
  .ark-liste a:hover { padding-left: 0; }
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  background: var(--sea);
  overflow: hidden;
  isolation: isolate;
}
.hero .bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

/* Stillbilledet ligger altid nederst. Videoen tones ind ovenpå
   når den kan spille – går den galt, bliver billedet liggende,
   og gæsten ser aldrig et sort hul. */
.hero-still, .hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-film { opacity: 0; transition: opacity 1.2s ease; }
.hero-film.vis { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-film { display: none; }
}

/* Slør, så den store hvide skrift kan læses oven på et hvilket
   som helst foto – også et lyst sommerbillede */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  /* Tallene er MÅLT, ikke valgt. Prototypen havde .25 på midten.
     Mod den gamle hero-video – facaden alene – rakte .40.

     Nu er hero-videoen hele turen forbi lugerne, og den har lyse
     steder: den overskyede himmel over facaden, kagerne på det
     rødternede voksdug, den hvide softice. Med .40 lå
     overskriften på 3,08:1 mod kravet på 3,0 for stor tekst –
     det klarede den, men med 3% margin, og så er det held.

     Overskriften står i 22-74% af heroens højde, så gradienten er
     styrket netop dér. Værste billede i hele videoen ligger nu på
     3,97:1 – en tredjedel over kravet, og det er margin nok til at
     en ny video ikke vælter det med det samme.

     Længere kunne den godt gå, men så begynder sløret at koste
     videoen. Ved .62 på midten rammer man 4,7:1, og så er turen
     forbi lugerne blevet en mørk tekstur i stedet for et billede
     af en havnegrill. Overskriften er 56-210px, altså stor tekst,
     og kravet er 3,0. 3,97 er det rigtige sted at holde op.

     tests/kontrast.spec.js læser disse stop ud af CSS'en og måler
     hvert billede i videoen imod dem. Ændrer man tallene her,
     følger målingen med. */
  background: linear-gradient(180deg,
    rgba(36, 26, 23, .68) 0%,
    rgba(36, 26, 23, .56) 26%,
    rgba(36, 26, 23, .66) 72%,
    rgba(36, 26, 23, .94) 100%);
}

.hero-in {
  /* Ekstra luft i bunden, så både "Rul ned" og bådstriben har
     plads under knapperne. Med designets oprindelige 56-96px lå
     "Rul ned" oven i knapperne, når den blev hævet fri af vandet. */
  padding: clamp(104px, 15vh, 168px) var(--pad) clamp(104px, 13vh, 152px);
  color: #fff;
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  max-width: 1600px;
}
/* vh-leddet er nødvendigt: uden det vokser overskriften ud over
   skærmen på en telefon i liggende format */
.hero h1 { font-size: clamp(56px, min(11.5vw, 20vh), 210px); color: #fff; }
.hero h1 em { font-style: normal; color: var(--scoop); }

/* Manchetten under overskriften. Den lå i .hero-row sammen med
   knapperne, som er væk — nu står den alene, og reglen er
   flyttet til elementet selv, så en tom wrapper ikke skal blive
   stående for en klasses skyld. */
#hero-tekst { max-width: 34ch; margin: 0; color: rgba(255, 255, 255, .88); text-wrap: pretty; }

/* ------------------------------------------------------------
   HEROEN LANDER NÅR INTROEN SLIPPER
   ------------------------------------------------------------
   Alt andet på siden toner ind når man ruller til det. Heroen kunne
   ikke: den ER der når introen letter, og stod derfor helt færdig i
   det øjeblik hvor gæsten kigger mest. Nu kommer den ind bagefter,
   forskudt – kant, overskrift, tekst, knapper.

   Klassen sættes af js/side.js på body når intro.js melder færdig,
   eller straks hvis der ikke er nogen intro (sprunget over,
   reduceret bevægelse, ingen canvas). Uden den bliver alt stående
   synligt, så indholdet ikke kan blive usynligt for evigt.
   ------------------------------------------------------------ */
.hero-in > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .85s ease,
    transform .85s var(--lempning);
}
body.klar .hero-in > * { opacity: 1; transform: none; }
body.klar .hero-in > *:nth-child(1) { transition-delay: .06s; }
body.klar .hero-in > *:nth-child(2) { transition-delay: .16s; }
body.klar .hero-in > *:nth-child(3) { transition-delay: .30s; }
/* HEROENS BOGSTAVER TRÆKKER SIG IKKE LÆNGERE SAMMEN.

   Effekten står stadig på afsnitsoverskrifterne længere nede, og den
   er den samme som underlinjen i isfilmen — men den hører ikke til
   her, og grunden er målt.

   letter-spacing er en LAYOUT-egenskab. Animerer man den, skal
   browseren ombryde teksten på ny ved hvert eneste billede, i hele
   overgangens længde. På en afsnitsoverskrift i 40-104 px er det til
   at bære. Heroens h1 er clamp(56px, min(11.5vw, 20vh), 210px) over
   TRE linjer — sidens desidert største tekst — og den blev ombrudt 60
   gange i sekundet i 1,4 sekunder, i præcis det øjeblik introen tonede
   væk og videoen blev hentet.

   Målt i de 2,6 sekunder overgangen varer, på en computer: 23 tabte
   billeder med alt, 17 uden den her animation. Seks billeder for en
   detalje man ikke kan se, oven i det heroen ellers skal nå.

   Indflyvningen er der stadig: linjerne stiger og toner ind
   (.hero-in > *), og det er ren transform og opacity. */
.hero h1 { letter-spacing: 0; }

/* "Rul ned" kommer sidst, og først når resten står stille. Den er en
   opfordring, og en opfordring skal komme efter indholdet. */
.scrollhint { opacity: 0; transition: opacity .8s ease .8s; }
body.klar .scrollhint { opacity: 1; }

.scrollhint {
  position: absolute;
  right: var(--pad);
  /* Over bådstriben på 76px – ellers ligger teksten i vandet */
  bottom: 88px;
  color: rgba(255, 255, 255, .6);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}
@media (max-height: 700px) { .scrollhint { display: none; } }

/* Er bådstriben skjult – smal eller lav skærm – er der ikke noget
   at komme fri af, og hero-indholdet må bruge pladsen igen.

   MEN PILLEN LIGGER DER. På en telefon er .bestil-fast i fuld
   bredde 12 px over kanten, og med 18 px til "Rul ned" og
   56-96 px under manchetten lå de BEGGE bag den. Fundet på et
   skærmbillage af forsiden 23/8 — ikke i koden, for der ser de to
   regler rigtige ud hver for sig; det er summen, der er forkert.

   Begge tal regnes ud af den samme --pille-plads, så de ikke kan
   skride fra hinanden, den dag pillen bliver en anden højde. */
@media (max-width: 640px), (max-height: 620px) {
  /* pillens egen højde (58) + dens afstand til kanten (12).
     Den står på :root og ikke løst i @media — en variabel uden
     en vælger er ikke CSS, og browseren smider hele blokken. */
  :root { --pille-plads: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .scrollhint { bottom: calc(var(--pille-plads) + 12px); }
  .hero-in { padding-bottom: calc(clamp(56px, 8vh, 96px) + var(--pille-plads)); }
}

/* HAVNESTRIBEN ER FJERNET, og reglerne med den.
   Se noten i index.html: tre af dens fire celler skulle udfyldes i
   hånden og stod derfor tomme. */

/* ------------------------------------------------------------
   SEKTIONSRYTME
   ------------------------------------------------------------ */
/* 132 px var rigtigt, dengang alt stod på den samme sandfarve:
   luften var det ENESTE, der skilte to afsnit ad, så den skulle
   være stor nok til at kunne ses. Nu skifter grunden (se
   .grund-varm og .grund-dyb herunder), og så laver den samme luft
   et tomt bånd i toppen og bunden af hver flade — man kan SE, at
   der ikke er noget. 104 er nok, når kanten selv siger, hvor
   afsnittet begynder. */
section { padding-block: clamp(56px, 7vw, 104px); }

/* ------------------------------------------------------------
   SEKTIONSGRUNDE — hver sektion sit eget sted
   ------------------------------------------------------------
   Kundens ord (22/8): "lav sektionerne tydeligere, så det ikke
   føles som 1 lang forside."

   Han har ret, og det var ikke afstanden, der manglede — der var
   allerede op til 132 px luft mellem afsnittene. Fejlen var, at
   ALT stod på den samme sandfarve. Luft mellem to ting på samme
   bund læses ikke som "nyt afsnit"; den læses som "her mangler
   der noget". Det var det, der gjorde siden lang.

   Tre grunde, og de skifter hele vejen ned, så øjet altid ved,
   hvornår ét emne er sluppet og et nyt begyndt:

     (ingen)      sandet — sidens egen bund
     .grund-varm  det dybere sand, med hårstreg foroven og forneden
     .grund-dyb   marineblå, sidens ene kraftige skæring

   DEN VARME GRUND ER SAND2 OG IKKE PAPIRHVID, og det er ikke
   smag: kortene på siden er selv papirhvide (.form-kort,
   .nw, .afd-kort) eller næsten hvide (.row-card på .82). En
   papirhvid BUND ville få dem til at forsvinde i deres egen
   flade. Sand2 går den anden vej — dybere end sandet — og så
   træder hvert eneste kort tydeligere frem, ikke svagere.

   HÅRSTREGERNE ER IKKE PYNT. Sand2 er kun fire procent mørkere
   end sandet; uden en streg i kanten kan man ikke se, hvor
   fladen begynder, på en telefon i sollys.

   FARV ALDRIG HELE AFSNITTETS TEKST. Det er den fejl, der ligger
   nederst i filen under "MØRKE AFSNIT — VÆK IGEN": en regel som
   "section.mork p" gjorde teksten i de LYSE kort hvid på hvidt,
   og kortene så tomme ud. Derfor farves KUN sektionens eget
   hoved herunder — overskrift, eyebrow og ingress — og aldrig
   det, der ligger i kortene.
   ------------------------------------------------------------ */
.grund-varm {
  background: var(--sand2);
  border-block: 1px solid var(--streg);
}

.grund-dyb { background: var(--sea); }
.grund-dyb > .head h2,
.grund-dyb > .mid h2 { color: #fff; }
.grund-dyb > .head > p,
.grund-dyb > .mid > .sub { color: rgba(255, 255, 255, .82); }
/* Is-lyserød og ikke hvid: eyebrow'en er en etiket, ikke en
   overskrift, og to hvide tekster over hinanden har ingen
   rangorden. --scoop giver 8,4:1 mod marineblå. */
.grund-dyb > .head .eyebrow,
.grund-dyb > .mid .eyebrow { color: var(--scoop); }
/* ET GITTER, IKKE EN FLEX-RÆKKE MED SPACE-BETWEEN.

   Den var flex med space-between, og så afhænger hver tings plads
   af hvor lang naboen tilfældigvis er. Det gik galt to gange.

   Først for "BESTIL" og "SEND DIN BESTILLING": to korte naboer delte
   linje, det lille ord i venstre kant og overskriften skubbet helt ud
   til højre. Det blev lappet med flex: 0 0 100% på mærkatet.

   Og så igen for "Find os", da linjen under overskriften blev kort:
   "Nede på havnen, ud mod vandet." stod klemt op i sidens højre
   kant, 750 px fra overskriften den hører til.

   Med to kolonner ligger brødteksten det samme sted hver gang,
   uanset hvor lang den er. Det er et layout og ikke et held. */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 36ch);
  align-items: end;
  gap: 10px clamp(30px, 4vw, 56px);
  margin-bottom: clamp(30px, 4vw, 54px);
}
.head .eyebrow { grid-column: 1 / -1; }
.head h2 { font-size: clamp(40px, 6.4vw, 104px); }
.head p { max-width: 36ch; margin: 0; color: var(--muted); text-wrap: pretty; }

@media (max-width: 900px) {
  .head { grid-template-columns: 1fr; }
}

/* ============================================================
   SMØRREBRØD UD AF HUSET – forsidens ene handling
   ------------------------------------------------------------
   Her lå .fav og .fav-stor: fem hvide kort med et navn og en stor
   pris, hvor det første fyldte to spor og havde havnens farve. De
   viste et udvalg der roterede hver time. Se noten i index.html om
   hvorfor det er væk.

   Det her er en LISTE og ikke et gitter af kort, og det er med
   vilje. Fem slags smørrebrød med hver sin pris er noget man
   sammenligner, og man kan ikke sammenligne fem priser der ligger
   spredt ud over en flade. Sat i en spalte står tallene under
   hinanden, og så kan øjet løbe ned ad dem.

   Samme form som listen på bestillingssiden, så man møder det man
   lige har set når man trykker "Bestil smørrebrød". Det er hele
   pointen med at en side ligner sig selv.
   ============================================================ */
.smoer-blok {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}
@media (min-width: 56rem) {
  /* Listen først og bredest, handlingen ved siden af. Under 56rem
     falder de under hinanden af sig selv. */
  .smoer-blok { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* STYKKERNE STÅR I ET HVIDT KORT — samme form som menukortets
   kategorier. Kundens ord (23/8): "menukortet og de steder, hvor
   man skal kunne se deres sortiment — lad det være præcis den
   her flotte og dejlige stil med overskuelighed, bare deres
   farvepaletter." To lister over det samme sortiment, der ser
   forskellige ud, er to sider at holde ved lige. */
.smoer-liste {
  list-style: none;
  margin: 0;
  padding: 4px clamp(14px, 2.4vw, 20px);
  background: var(--paper);
  border: 1px solid var(--streg);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(36, 26, 23, .05);
}
.smoer-raekke {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--streg);
}
/* Kortets egen kant står lige under den sidste række; to streger
   med 4 px imellem ligner en fejl. */
.smoer-liste .smoer-raekke:last-child { border-bottom: 0; }
.smoer-navn { font-weight: 600; color: var(--sea); }
/* Beskrivelsen på sin egen linje under navnet, ikke i en kolonne
   for sig: en tredje kolonne ville presse prisen ud til kanten. */
.smoer-desc {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  font-size: 14px;
  color: var(--muted);
  max-width: 44ch;
}
/* Prisen i mærkefarven, som i menukortet: ét tal pr. linje ude i
   højre kant, som øjet kan løbe ned igennem. --red-tekst og ikke
   --red — se noten ved .linje-pris. */
.smoer-pris {
  flex: 0 0 auto;
  font-family: var(--display);
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1;
  color: var(--red-tekst);
  font-variant-numeric: tabular-nums;
}

.smoer-handling { display: grid; gap: 16px; }
.smoer-fyld {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.05;
  color: var(--sea);
}

/* ------------------------------------------------------------
   HELE MENUKORTET
   ------------------------------------------------------------ */
.afdelinger { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.glass.valgt {
  background: var(--sea);
  color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25), 0 12px 30px rgba(36, 26, 23, .3);
}
.glass.valgt:hover { background: var(--sea); color: #fff; }

/* HVER KATEGORI ER ET <section>, OG DET KOSTEDE 3200 PX.

   js/menuside.js tegner hver kategori som <section class="kat">, og
   længere oppe i arket står

     section { padding-block: clamp(64px, 9vw, 132px); }

   Den regel er skrevet til sidens afsnit — hero, favoritter, isen,
   find os — hvor 132 px imellem er rigtigt. Men den ramte også hver
   kategori på menukortet: 115 px over og 115 px under "Smørrebrød",
   over og under "Burgere", og så videre gennem alle fjorten. Godt
   3200 px tomt sand på ét menukort, og margin-bottom herunder blev
   skrevet ovenpå det uden at nogen så hvorfor der var så langt
   imellem.

   Man kunne kun se det ved at måle: der stod 150 px mellem genvejene
   og den første kategoris navn, og der var ikke noget dér.

   padding-block: 0 sætter afstanden tilbage til den ene regel der
   ejer den, margin-bottom lige herunder. */
.kat { padding-block: 0; margin-bottom: clamp(30px, 3.6vw, 52px); }
.kat:last-child { margin-bottom: 0; }
.kat > h3 {
  font-size: clamp(26px, 3.2vw, 44px);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--sea);
  margin-bottom: 4px;
}

/* ------------------------------------------------------------
   MENUKORTETS KATEGORIER ER FOLDER
   ------------------------------------------------------------
   Kundens ord (22/8): menukortet skal være "mere overskueligt og
   opdelt og telefon-egnet", og han pegede på bestillingssidens
   folder som svaret. Se noten ved tegnKategori() i
   js/menuside.js for hvorfor formen er den rigtige her.

   Overskriften ER knappen. Der står et rigtigt <h2> om den, så
   en skærmlæser kan springe fra kategori til kategori — og et
   rigtigt <button aria-expanded> inde i, så tastaturet kan folde
   ud. Ingen af delene kan undværes: en overskrift kan ikke
   trykkes på, og en knap er ikke en overskrift.

   Afstanden mellem kategorierne er skruet ned fra 30-52 px til
   10, og det er hele pointen: lukkede folder skal ligge TÆT, så
   man kan se hele afdelingen på ét skærmbillede. Den åbne får
   sin luft tilbage forneden.
   ------------------------------------------------------------ */
/* HVER KATEGORI ER ET HVIDT KORT.

   Kunden sendte to skærmbilleder fra spiis (23/8): "lad det være
   præcis den her flotte og dejlige stil med overskuelighed, bare
   deres farvepaletter."

   Formen dér er ét kort pr. kategori: et lille tegn i en rund
   firkant, navnet, antallet ude i højre kant, en stiplet streg
   ned til varerne, og priserne i mærkefarven yderst til højre.
   Farverne er havnens — sand udenom, papir i kortet, det
   marineblå til teksten og det røde til prisen.

   Overskriften stod før som en 38 px display-linje med en tyk
   blå streg under. Den var flot og fyldte en tredjedel af
   telefonens skærm pr. kategori — og med fjorten kategorier er
   det fjorten skærme, før man har set udvalget. Kortet er
   lavere, og rækkerne ligger tæt. */
.kat-fold {
  margin-bottom: 12px;
  background: var(--paper);
  border: 1px solid var(--streg);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(36, 26, 23, .05);
  overflow: hidden;
}
.kat-fold > h2 { margin: 0; }
.kat-fold .fold-hoved {
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
  min-height: 62px;
  padding: 12px clamp(14px, 2.4vw, 20px);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--display);
  font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .012em;
}
.kat-fold .fold-hoved:hover { background: rgba(36, 26, 23, .035); }
.kat-fold .fold-navn { flex: 0 1 auto; text-align: left; }

/* Den runde firkant om tegnet. Fast størrelse, så navnene
   flugter ned gennem afdelingen, uanset hvor bredt et emoji en
   browser vælger at tegne. */
.kat-tegn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--sand2);
  font-size: 19px;
  line-height: 1;
}

/* Tallet skubbes helt ud til pilen, så antallene står i én
   kolonne ned gennem afdelingen og kan sammenlignes med øjet. */
.kat-fold .fold-note {
  margin-left: auto;
  font-family: var(--tekst);
  font-size: 13px;
}
/* Den stiplede streg mellem hovedet og varerne. Den er stiplet
   og ikke fuld med vilje: en fuld streg deler kortet i to kort,
   en stiplet siger "det her hører sammen, og nu kommer
   indholdet". */
.kat-fold .fold-krop {
  padding: 0 clamp(14px, 2.4vw, 20px) clamp(10px, 1.6vw, 16px);
  border-top: 1px dashed var(--streg);
}
/* Den åbne kategori skal kunne kendes fra de lukkede, også når
   pilen er ude af syne længere nede på skærmen. */
.kat-fold:has(.fold-hoved[aria-expanded="true"]) {
  box-shadow: 0 6px 20px rgba(36, 26, 23, .07);
}

/* ET MENUKORT ER EN SMAL SPALTE.

   Linjerne fyldte sidens fulde bredde. På 1280 px stod
   "Flæskestegssandwich" i venstre kant og "89,-" 1140 px derude, og
   man skulle føre blikket en halv meter hen over tomt sand for at se
   hvad tingen kostede. Det er den samme fejl bestillingslisten havde,
   og det er den samme grænse: 760 px er så bredt et varenavn med en
   beskrivelse må være.

   Overskriften og genvejene følger med, ellers flugter de ikke. */
#menu-liste, .kat-stier { max-width: 760px; }

.linje {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--streg);
}
/* Sidste vare i et kort har ingen streg under sig — der er
   kortets egen kant lige nedenunder, og to streger på 4 px'
   afstand ser ud som en fejl. */
.kat-fold .linje:last-child { border-bottom: 0; padding-bottom: 6px; }
.linje-navn .navn { font-weight: 500; }
.linje-navn .desc { margin: 3px 0 0; font-size: 14px; color: var(--muted); max-width: 46ch; }
/* PRISEN I MÆRKEFARVEN. Det er spiis' greb, og det virker,
   fordi prisen er det ENE tal på linjen: øjet kan løbe ned
   gennem højre kant uden at læse et eneste varenavn.
   --red-tekst og ikke --red: den lille skriftstørrelse på
   telefonen falder under 4,5:1 med mærkefarven selv. */
.linje-pris {
  font-family: var(--display);
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1;
  white-space: nowrap;
  color: var(--red-tekst);
}
.linje.udsolgt { opacity: .6; }
.linje.udsolgt .navn { text-decoration: line-through; }

/* Har ingen vare i kategorien en pris, er det en liste man vælger
   fra – fx fyldet til smørrebrødet. 29 tankestreger i en priskolonne
   er støj, så de vises som pastiller. */
.valg { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; }
.valg-en {
  border: 1px solid var(--streg);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  background: #fff;
}
.valg-en.udsolgt { opacity: .5; text-decoration: line-through; }

.note { margin-top: clamp(20px, 2.4vw, 32px); font-size: 14px; color: var(--muted); max-width: 62ch; }

/* BILLEDET I FULD BREDDE (.wide, .wide-tekst) ER SLETTET 23/8.
   Det hørte til fotoet med "Trædækket på Mosede Havn" hen over,
   som blev fjernet for længe siden. Regler til et element, ingen
   side tegner, læser den næste som noget, der er i drift. */

/* ------------------------------------------------------------
   DELT SEKTION – foto på den ene side, tekst på den anden
   ------------------------------------------------------------ */
/* overflow: hidden fordi billedet skaleres langsomt op mens det er
   i syne (se "FOTOET ÅNDER"). Uden den ville det vokse ud over sin
   celle og skubbe teksten. */
.split { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
/* Rammen om fotoet. Den laver indflyvningen, billedet ånder — se
   noten i index.html om hvorfor de to ikke kan ligge på samme
   element. overflow: hidden, så åndingen klippes af rammen og ikke
   af sektionen. */
.split-foto { overflow: hidden; display: grid; }
.split img { width: 100%; height: 100%; object-fit: cover; min-height: min(70vh, 620px); }
.split-tekst {
  background: var(--sea);
  color: #fff;
  padding: clamp(26px, 4vw, 64px);
  display: grid;
  align-content: center;
  gap: 14px;
}
.split-tekst h2 { color: #fff; font-size: clamp(34px, 4.4vw, 68px); }
.split-tekst p { color: rgba(255, 255, 255, .88); max-width: 34ch; margin: 0; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split img { min-height: 56vh; }
  /* Rammen skal ikke sætte en egen højde – billedet bestemmer */
  .split-foto { min-height: 0; }
}


/* ------------------------------------------------------------
   DAGENS KUGLER
   ------------------------------------------------------------ */
.flav {
  background: var(--sea);
  color: #fff;
  border-radius: var(--r-stor);
  padding: clamp(26px, 3.4vw, 52px);
  display: grid;
  gap: 26px;
}
.flav h2 { font-size: clamp(34px, 4.6vw, 76px); color: #fff; }
/* Dagens kugler kommer ind én ad gangen. Tavlen skiftes hver
   morgen, og rækken skal se ud som noget der lige er skrevet op –
   ikke som en liste der altid har stået der. */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  opacity: 0;
  transform: translateY(10px) scale(.96);
  transition:
    opacity .5s ease,
    transform .5s var(--lempning);
}
.rev.in .chip { opacity: 1; transform: none; }
.rev.in .chip:nth-child(1) { transition-delay: .30s; }
.rev.in .chip:nth-child(2) { transition-delay: .38s; }
.rev.in .chip:nth-child(3) { transition-delay: .46s; }
.rev.in .chip:nth-child(4) { transition-delay: .54s; }
.rev.in .chip:nth-child(n+5) { transition-delay: .62s; }

/* Åbningstiderne ruller ned linje for linje. Det er den ene tabel
   på siden man LÆSER fra top til bund, og trappen følger øjet. */
.hours div {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .5s ease, transform .5s var(--lempning);
}
.rev.in .hours div { opacity: 1; transform: none; }
.rev.in .hours div:nth-child(1) { transition-delay: .26s; }
.rev.in .hours div:nth-child(2) { transition-delay: .34s; }
.rev.in .hours div:nth-child(3) { transition-delay: .42s; }
.rev.in .hours div:nth-child(n+4) { transition-delay: .50s; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  font-size: 14px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45);
}
.chip i { width: 16px; height: 16px; border-radius: 50%; display: block; flex: 0 0 auto; }

/* ------------------------------------------------------------
   SMØRREBRØDETS EGET AFSNIT PÅ FORSIDEN
   ------------------------------------------------------------
   Kundens ord (23/8): smørrebrødet er "en af deres hovedting" og
   skal ikke være en fold mellem drikkevarerne.

   .smoer-tal og .chip er skrevet til det MØRKE hoved på
   smoerrebroed-ud-af-huset/ — is-lyserøde tal og hvid tekst på
   glas. På sandet er begge dele usynlige. De to farvesæt er
   scopet hertil og ikke skrevet om: den mørke side skal se ud
   som før.

   Det er den samme fælde som .bestil-kort, der farvede hvert
   bestillingskort i admin mørkeblåt: en regel uden scope rammer
   alt, hvad der bruger klassen.
   ------------------------------------------------------------ */
#smoerrebroed .smoer-tal dt { color: var(--red); }
#smoerrebroed .smoer-tal dd { color: var(--muted); }
#smoerrebroed .chip {
  color: var(--sea);
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 1px #fff,
    inset 0 0 0 1px rgba(36, 26, 23, .10),
    0 1px 2px rgba(36, 26, 23, .06);
}
/* "+ 21 slags mere" er en oplysning og ikke en slags. Den skal
   kunne kendes fra pillerne med rigtige navne på. */
#smoerrebroed .chip-flere {
  background: rgba(214, 42, 58, .1);
  color: var(--red-dyb);
  font-weight: 600;
  box-shadow: none;
}

/* ------------------------------------------------------------
   FIND OS
   ------------------------------------------------------------ */
.info { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 3vw, 56px); align-items: start; }
.hours { display: grid; gap: 0; border-top: 1px solid var(--streg); }
.hours div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--streg);
  font-size: 15px;
}
.hours div span:last-child { font-variant-numeric: tabular-nums; color: var(--muted); }
/* I dag: rød tekst OG ordet "i dag" i etiketten. Aldrig farve alene. */
.hours div.now, .hours div.now span:last-child { color: var(--red-tekst); }
.hours div.now span:first-child { font-weight: 600; }

.kontakt-kort {
  border-radius: 8px;
  padding: clamp(20px, 2.6vw, 34px);
  box-shadow: 0 1px 2px rgba(36, 26, 23, .06), 0 20px 40px -30px rgba(36, 26, 23, .4);
}
.kontakt-kort p { margin: 0; }
/* Adressen er nu det eneste der STÅR i kortet – resten er de to
   handlinger. Så må den også være det man ser: første linje er
   forretningens navn, de to næste er vejen og byen. Det er den
   samme blok man ville skrive på en kuvert. */
.adresse {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--sea);
}
/* Handlingerne sidder under adressen: man læser hvor stedet er, og
   trykker så på "Vis rute". Den er fyldt, for det er den man bruger
   første gang man skal finde ned til havnen; "Ring" er glas. */
.kontakt-kort .tags { margin-top: clamp(18px, 2vw, 26px); }

.luft { margin-top: clamp(16px, 2vw, 26px); }

/* En række glaspiller. Havde ingen regel før, og så klæbede
   pillerne sammen når der var flere af dem – kagepriserne og de
   to knapper under arrangementer. */
.tags { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 900px) {
  .two, .info { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   BUND
   ------------------------------------------------------------ */
footer {
  background: var(--sea);
  color: rgba(255, 255, 255, .78);
  /* 96px nederst, så bådstriben aldrig dækker teksten */
  padding: clamp(44px, 6vw, 80px) var(--pad) 96px;
  display: grid;
  gap: 38px;
}
.fgrid { display: flex; flex-wrap: wrap; gap: 44px; justify-content: space-between; }
footer h3 { color: #fff; font-size: clamp(38px, 7vw, 110px); max-width: 14ch; }
footer a { color: rgba(255, 255, 255, .78); }
footer a:hover { color: #fff; }
.fcol { display: grid; gap: 8px; font-size: 14px; align-content: start; }
.fcol b { color: #fff; font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
/* ⚠️ PRIKKEN MELLEM DE TO JURA-LINKS (14/9). .fcol er et grid, så hvert
   barn får sin egen række — og prikken stod alene på en linje mellem
   "Persondata og cookies" og "Handelsbetingelser". Set på et skud af
   bord/. Rækkerne skiller dem i forvejen. */
.fcol .jura-skel { display: none; }
.fine {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between;
  font-size: 12px; color: rgba(255, 255, 255, .62);
  border-top: 1px solid var(--streg-lys);
  padding-top: 20px;
}

/* ------------------------------------------------------------
   BÅDEN I BUNDEN – rullemåler
   ------------------------------------------------------------ */
#sail {
  position: fixed;
  left: 0; bottom: 0;
  /* Bredden SKAL sættes eksplicit. Et fixed canvas med
     left:0;right:0 og ingen bredde falder sammen til sin egen
     iboende bredde på 300px. */
  width: 100vw;
  height: 76px;
  z-index: 15;
  pointer-events: none;

  /* SIDEN TONER NED I VANDET.

     Canvas'et maler kun vand NEDEN under bølgelinjen – ovenover er
     det gennemsigtigt, og det er rigtigt: dér er der himmel, altså
     siden. Men resultatet var at en overskrift lige over striben
     blev skåret midt over af bølgelinjen, som om den lå halvt under
     vand. "KAGER OG DESSERTER" stod og druknede.

     Baggrunden her ligger BAG canvas' egne streger og toner siden
     ud på vej ned mod vandlinjen i 62%. Så forsvinder indholdet i
     en dis i stedet for at blive klippet over, og striben ser ud
     som en horisont. */
  background: linear-gradient(180deg,
    rgba(36, 26, 23, 0) 0%,
    rgba(36, 26, 23, .62) 22%,
    rgba(36, 26, 23, .95) 38%,
    #241a17 46%);
}
/* Båden er 76px høj og fast i bunden. På en meget lav skærm –
   en telefon på tværs – ville den dække det halve af indholdet. */
@media (max-height: 620px) { #sail { display: none; } }

/* ============================================================
   DEN FASTE BESTIL-KNAP
   ------------------------------------------------------------
   Smørrebrød ud af huset er det forretningen sælger på
   hjemmesiden, og det eneste på siden man kan handle på. Den skal
   kunne nås fra hvert sted på hver side, uden at man først skal
   rulle op efter en menu.

   Lagene i bunden af skærmen, nedefra: båden 15, knappen 16,
   topmenuen 20, skuffemenuen 25, introen 100. Knappen skal ligge
   OVER båden — den er til at trykke på, båden er til at se på — og
   UNDER skuffemenuen, som dækker skærmen og skal dække alt.

   Den findes ikke på bestillingssiden. Dér er man fremme, og
   formularen har sin egen klæbende kurvelinje i bunden.
   ============================================================ */
.bestil-fast {
  position: fixed;
  z-index: 16;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;

  /* LIQUID GLASS, som bundtets .bestil: en rød flade med en smule
     gennemsigtighed, slør bagved og en lyskant i toppen. Det er
     ét af de få steder, sløret er prisen værd — pillen ligger
     oven på ALT indhold, mens man ruller, så der er faktisk noget
     at sløre.

     Toppen var #e95e46 engang, og det var en fejl: hvid tekst på
     den er 3,4:1, og kravet er 4,5. Ingen prøve så det — pillen
     måles på background-color, og gradienten lå i background.
     Nu er toppen --red (4,54:1) og bunden mørkere, samme tal som
     .glass.solid: lyset kommer fra lyskanten, ikke fra en lysere
     bund. background-color under gradienten er det, prøven kan
     læse — fjern den ikke. */
  background-color: var(--red);
  background-image: linear-gradient(180deg, rgba(214, 42, 58, .94), rgba(193, 31, 47, .95));
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .55),
    inset 0 -2px 2px rgba(120, 25, 10, .35),
    inset 0 0 0 .5px rgba(255, 255, 255, .25),
    0 10px 24px rgba(36, 26, 23, .28),
    0 20px 50px rgba(214, 42, 58, .3);
  /* Over bådstribens 76 px */
  min-height: 54px;
  padding: 0 26px;
  font-size: 15.5px;
  right: clamp(20px, 4vw, 48px);
  bottom: 92px;
  transition:
    transform var(--t-blid) var(--lempning),
    opacity var(--t-hurtig) ease,
    background var(--t-hurtig) ease;
}
.bestil-fast:hover {
  background: #bd3b26;
  color: #fff;
  transform: translateY(-3px);
}
.bestil-fast:active { transform: translateY(0); }

/* .dukket sættes IKKE af nogen — pillen er der hele tiden.

   Kontrakten har skiftet tre gange, og kundens sidste ord (22/8)
   var utvetydige: knappen skal være der HELE TIDEN på forsiden, og
   at den først kom ved rulning, var en fejl. Reglen bliver
   stående som den ene kendte måde at gemme pillen på, hvis
   beslutningen en dag vender igen — se historikken i js/side.js. */
.bestil-fast.dukket {
  opacity: 0;
  transform: translateY(140%);
  pointer-events: none;
}

@media (max-width: 900px) {
  /* PÅ EN TELEFON FYLDER DEN LINJEN UD.

     Båden er slået fra her, så den nederste kant er fri. En knap i
     fuld bredde kan rammes med en tomme uden at sigte — og det er
     den ene ting forretningen vil have folk til at gøre. */
  .bestil-fast {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    justify-content: center;
    min-height: 58px;
    font-size: 16.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bestil-fast { transition: none; }
  .bestil-fast:hover { transform: none; }
  /* Har gæsten frabedt sig bevægelse, forsvinder den uden at glide. */
  .bestil-fast.dukket { transform: none; }
}

/* Ikke med på et print – man kan ikke trykke på papir */
@media print { .bestil-fast { display: none !important; } }

/* ============================================================
   TELEFON
   ------------------------------------------------------------
   Resten af arket er skrevet med clamp() og flyder derfor med
   skærmen af sig selv. Det her er de steder hvor en telefon
   kræver noget ANDET, ikke bare noget mindre.
   ============================================================ */
@media (max-width: 640px) {

  /* FINGRE ER STØRRE END EN MUS.
     De små glaspiller er 40 px høje. Det er under de 44 px som
     både Apple og Google sætter som mindstemål, og de står tæt:
     menuens tre faner, "Se hele isafdelingen", "Vis rute", "Ring".
     Rammer man ved siden af, skifter man afdeling i stedet for at
     ringe. Højden gælder KUN her – på en computer er 40 px fint,
     og pillerne ser lettere ud. */
  .glass.sm { height: 44px; padding: 0 20px; font-size: 14px; }

  /* Menuens faner må gerne fylde linjen ud. Tre piller med luft
     imellem er nemmere at ramme end tre der klumper til venstre. */
  .afdelinger { gap: 8px; }
  .afdelinger .glass.sm { flex: 1 1 auto; justify-content: center; }

  /* SEKTIONSRYTMEN.
     64 px foroven og 64 px forneden er luftigt på en skærm der er
     1440 px høj. På 844 px bliver det en ørkenvandring mellem
     afsnittene: man ruller gennem tomt sand og tror siden er
     færdig. 56 og ikke 48: kunden syntes afsnittene klumpede —
     "oven i hinanden" var ordene — og otte pixels mere pr. kant
     er luft nok til at hvert afsnit får sin egen begyndelse,
     uden at rulningen bliver en vandring. */
  section { padding-block: 56px; }
  .head { margin-bottom: 26px; gap: 18px; }

  /* Links i skuffemenuen skal have en hel finger at stå på */
  .ark a { padding: 14px 0; }
}

/* ------------------------------------------------------------
   RULLE-INDTONING
   ------------------------------------------------------------ */
.rev {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity var(--t-lang) ease,
    transform var(--t-lang) var(--lempning);
}
.rev.in { opacity: 1; transform: none; }

/* FORSKUDT INDTONING.

   Hele afsnittet tonede ind som én blok, og det var så diskret at
   kunden ikke oplevede at der var animation på siden. Nu kommer
   afsnittets dele efter hinanden med 70 ms imellem: overskriften,
   så teksten, så kortene. Det er den samme bevægelse, men øjet
   kan følge den, og det er forskellen på "der skete noget" og
   "der skete ikke noget".

   Kun de fem første børn. Er der flere, kommer resten sammen med
   det femte – en trappe på tolv trin bliver en ventetid. */
.rev > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .7s ease,
    transform .7s var(--lempning);
}
.rev.in > * { opacity: 1; transform: none; }
.rev.in > *:nth-child(1) { transition-delay: .05s; }
.rev.in > *:nth-child(2) { transition-delay: .12s; }
.rev.in > *:nth-child(3) { transition-delay: .19s; }
.rev.in > *:nth-child(4) { transition-delay: .26s; }
.rev.in > *:nth-child(n+5) { transition-delay: .33s; }

/* ============================================================
   HVER SEKTION HAR SIN EGEN INDFLYVNING
   ------------------------------------------------------------
   Reglen ovenfor gav ALLE afsnit den samme bevægelse: op og ind med
   70 ms mellem delene. Seks afsnit i træk med præcis samme bevægelse
   holder op med at være en animation og bliver en maner — man ser den
   én gang, og derefter er den bare den forsinkelse der ligger mellem
   én selv og indholdet.

   Hvert afsnit har nu en bevægelse der passer til hvad det ER. Alle
   fire bruger kun transform og opacity, som ikke koster et nyt layout
   af siden. To andre blev prøvet og kastet ud igen: clip-path på
   kagefotoet og filter: blur() på isfilmens ramme. Se noterne dér —
   begge kostede mere end de gav.

   Bevægelsen skal betyde noget, ellers er den pynt:

     smørrebrød    linjerne skrives ind fra venstre, én ad gangen,
                   som når nogen fører en liste
     menuoversigt  de tre kort løftes op og på plads, som kort man
                   lægger på et bord
     kager         billedet tørres frem fra venstre mens teksten
                   kommer ind fra højre — to bevægelser mod hinanden
     isen          rammen vokser op på plads nedefra
   ============================================================ */

/* ---- Smørrebrødslisten skrives ind ---- */
#smoerrebroed .smoer-raekke {
  opacity: 0;
  transform: translateX(-18px);
  transition:
    opacity .55s ease,
    transform .55s var(--lempning);
}
#smoerrebroed.in .smoer-raekke { opacity: 1; transform: none; }
#smoerrebroed.in .smoer-raekke:nth-child(1) { transition-delay: .20s; }
#smoerrebroed.in .smoer-raekke:nth-child(2) { transition-delay: .28s; }
#smoerrebroed.in .smoer-raekke:nth-child(3) { transition-delay: .36s; }
#smoerrebroed.in .smoer-raekke:nth-child(4) { transition-delay: .44s; }
#smoerrebroed.in .smoer-raekke:nth-child(n+5) { transition-delay: .52s; }


/* MENUOVERSIGTENS KORT (.menu-oversigt, .oversigt-*) ER SLETTET
   23/8. De tegnede et net af kategorikort midt på forsiden;
   menukortet fik sin egen side, og afdelingskortene (.afd-kort)
   tog pladsen. */

/* ---- Kagerne: fotoet falder på plads ----

   FØRSTE FORSØG VAR EN WIPE, og den var forkert på to måder.

   clip-path: inset(0 100% 0 0) → inset(0 0 0 0) tørrer billedet frem
   fra venstre med en hård kant. En hård kant der glider hen over et
   foto ser billig ud, og clip-path er ikke GPU-accelereret alle
   steder — den hakker på en telefon.

   Værre: reglen hed "#kager .split > img" og vejede (1,1,2), altså
   mere end ".split img" (0,1,1), som ejer åndingen på 8 sekunder. En
   transition-erklæring erstatter den forrige helt, så åndingens
   overgang forsvandt — billedet SNAPPEDE til scale(1.06) samtidig med
   at wipen kørte. Det var det kunden så: "ikke rigtig smooth eller
   clean".

   Nu falder rammen på plads: en smule for stor og gennemsigtig, og så
   sætter den sig. Ren transform og opacity på et element der ikke
   ejer nogen anden bevægelse. Billedet ånder videre indeni,
   uforstyrret. */
#kager .split-foto {
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity .9s ease,
    transform 1.2s var(--lempning);
}
#kager.in .split-foto { opacity: 1; transform: none; }

/* Teksten kommer nedefra, ikke fra siden. Fra siden ville den køre
   mod fotoets bevægelse, og to modsatrettede bevægelser i samme
   afsnit er uro og ikke en pointe. */
#kager .split-tekst {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .8s ease .2s,
    transform .8s var(--lempning) .2s;
}
#kager.in .split-tekst { opacity: 1; transform: none; }

/* ---- Isfilmen vokser op på plads ----

   INGEN filter: blur() HER, og det er ikke en detalje.

   Første udgave lod rammen komme ind uskarp og finde fokus — som et
   objektiv. Det var en køn idé og et dårligt valg: rammen indeholder
   en VIDEO, og et filter på en forælder til en video tvinger browseren
   til at køre en slørings-beregning hen over hvert enkelt videobillede
   så længe overgangen varer. På iOS er det en kendt kilde til hakken,
   og i værste fald står videoen helt stille mens sløret kører.

   Kunden skrev at filmen ikke "floatede". Det her var en af grundene.

   Nu vokser rammen op på plads: nedefra og fra 96 %. Ren transform og
   opacity, som ikke rører videobillederne. Kagerne sætter sig NEDAD
   fra 106 % — de to bevægelser går hver sin vej, så afsnittene stadig
   ikke ligner hinanden. */
#isen .film-ramme {
  opacity: 0;
  transform: translateY(20px) scale(.96);
  transition:
    opacity .7s ease,
    transform 1s var(--lempning),
    box-shadow 1s ease;
}
#isen.in .film-ramme {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   OVERSKRIFTEN FALDER PÅ PLADS
   ------------------------------------------------------------
   Bebas Neue er en smal, høj skrift, og den tåler at komme ind med
   for meget luft mellem bogstaverne og så trække sig sammen. Det er
   den samme bevægelse som "UDSIGTEN ER INKLUDERET" i isfilmen, hvor
   underlinjen går fra .34em til .18em – så de to steder ligner
   hinanden med vilje.

   Kun letter-spacing og transform. Ingen af dem koster et nyt
   layout af siden.
   ------------------------------------------------------------ */
.head h2, .flav h2, .split-tekst h2 {
  letter-spacing: .045em;
  transition: letter-spacing 1.1s var(--lempning);
}
.rev.in .head h2, .rev.in .flav h2, .rev.in .split-tekst h2,
.rev.in > .head h2 { letter-spacing: 0; }

/* En streg der tegner sig under overskriften når afsnittet kommer
   i syne. Samme detalje som over navnet i isfilmen. */
.head h2::after,
.flav h2::after,
.split-tekst h2::after {
  content: "";
  display: block;
  /* Bredden er den samme hele vejen; det er MÅLESTOKKEN, der går
     fra 0 til 1. Se noten ved .rev.in nedenfor. */
  width: 84px;
  height: 3px;
  margin-top: 14px;
  border-radius: 2px;
  background: currentColor;
  opacity: .32;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--lempning) .25s;
}
/* ⚠️ STREGEN VOKSER MED transform, IKKE MED width  (31/8).
   width animeret er layout for hvert billede; scaleX kører på
   kompositoren og ser præcis ens ud. Bredden er den samme 84 px
   hele vejen — det er kun MÅLESTOKKEN, der går fra 0 til 1. */
.rev.in .head h2::after,
.rev.in .flav h2::after,
.rev.in .split-tekst h2::after { transform: scaleX(1); }

/* ------------------------------------------------------------
   FOTOET ÅNDER
   ------------------------------------------------------------
   Kagebilledet skaleres meget langsomt fra 1,0 til 1,06 mens det
   er i syne. Ingen retning, ingen panorering – bare et billede der
   ikke står helt stille. Otte sekunder er så langsomt at man ikke
   ser bevægelsen; man ser at billedet er levende.
   ------------------------------------------------------------ */
.split img, .kort-foto img {
  transform: scale(1);
  transition: transform 8s linear;
}
.rev.in .split img, .rev.in .kort-foto img { transform: scale(1.06); }

/* ------------------------------------------------------------
   HERO-PARALLAKSE
   ------------------------------------------------------------
   Baggrunden flytter sig langsommere end teksten når man ruller.
   Værdien sættes af js/side.js som en variabel, og kun transform
   ændres – ingen layout, ingen maling af nye pixels.

   will-change bliver sat af koden når rulningen begynder og fjernet
   igen. Står den fast, holder browseren et lag i hukommelsen for
   hele siden, også når heroen er langt væk.
   ------------------------------------------------------------ */
.hero .bg { transform: translate3d(0, var(--parallakse, 0px), 0); }

/* ------------------------------------------------------------
   ÅBENT-PILLEN SKIFTER
   ------------------------------------------------------------
   Når "Åbent nu" bliver "Lukket for i dag", skal man kunne se at
   det ER skiftet – ellers ser man en pille man tror man allerede
   har læst. Den vipper én gang, kort.
   ------------------------------------------------------------ */
@keyframes status-skift {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-3px) scale(1.035); }
  100% { transform: translateY(0) scale(1); }
}
.status-skift { animation: status-skift .6s var(--lempning); }


/* ------------------------------------------------------------
   MENUKORTET SKIFTER AFDELING
   ------------------------------------------------------------ */
@keyframes kat-ind {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.kat-skift .kat { animation: kat-ind .45s var(--lempning) both; }
.kat-skift .kat:nth-child(2) { animation-delay: .06s; }
.kat-skift .kat:nth-child(3) { animation-delay: .12s; }
.kat-skift .kat:nth-child(n+4) { animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .rev > *, .rev.in > * { opacity: 1; transform: none; transition: none; }
  .hero .bg { transform: none; }
  .status-skift { animation: none; }
  .kat-skift .kat { animation: none; }
}

/* Vil gæsten ikke have bevægelse, står alt stille og synligt.
   Uden dette ville indholdet kunne blive usynligt for evigt – og
   det gælder HVER af de nye ting: heroens indflyvning, bogstavernes
   sammentrækning, stregen under overskriften og fotoets langsomme
   skalering. Glemmer man én, står der et tomt afsnit hos den gæst
   der har slået bevægelse fra. */
@media (prefers-reduced-motion: reduce) {
  .rev { opacity: 1; transform: none; transition: none; }

  .hero-in > *, body.klar .hero-in > * {
    opacity: 1; transform: none; transition: none; transition-delay: 0s;
  }
  .scrollhint, body.klar .scrollhint { opacity: 1; transition: none; }

  /* .hero h1 står ikke her længere: den har ingen letter-spacing-
     animation overhovedet nu, i nogen tilstand. */
  .head h2, .flav h2, .split-tekst h2,
  .rev.in .head h2, .rev.in .flav h2, .rev.in .split-tekst h2 {
    letter-spacing: 0; transition: none;
  }

  .head h2::after, .flav h2::after, .split-tekst h2::after,
  .rev.in .head h2::after, .rev.in .flav h2::after,
  .rev.in .split-tekst h2::after { width: 84px; transition: none; }

  .split img, .kort-foto img,
  .rev.in .split img, .rev.in .kort-foto img {
    transform: none; transition: none;
  }

  .chip, .rev.in .chip,
  .hours div, .rev.in .hours div {
    opacity: 1; transform: none; transition: none; transition-delay: 0s;
  }

  /* DE FIRE SEKTIONSINDFLYVNINGER: HER SLÅS OVERGANGEN FRA.

     Bemærk hvad denne blok gør og ikke gør. Alle fire indflyvninger er
     .in-styrede, og js/side.js sætter .in på HVER .rev med det samme
     når reduceret bevægelse er slået til — den venter ikke på at man
     ruller. Slutværdien er derfor synlig af sig selv, og afsnittene
     står ikke tomme uden denne blok.

     Det den gør, er at fjerne selve overgangen, så der ikke er en
     bevægelse på 1,1 sekund hos den der har bedt om ingen bevægelse.
     Det er hele formålet med indstillingen.

     Kun opacity og transform nu. Der var også en filter: blur() på
     isfilmens ramme, men den er væk — et filter over en spillende
     video hakker. Se noten dér. */
  .film-ramme::after { transition: none; }
  #smoerrebroed .smoer-raekke, #smoerrebroed.in .smoer-raekke,
  #kager .split-tekst, #kager.in .split-tekst,
  #isen .film-ramme, #isen.in .film-ramme {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    transition-delay: 0s;
  }
  #kager .split-foto, #kager.in .split-foto {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------
   BESKEDER
   ------------------------------------------------------------ */
.besked {
  background: var(--scoop);
  color: #4a1f18;
  border-radius: 8px;
  padding: 14px 20px;
  margin: 0 var(--pad);
  font-size: 15px;
}
.advarsel {
  background: var(--red);
  color: #fff;
  border-radius: 8px;
  padding: 14px 20px;
  margin: 0 var(--pad);
  font-size: 15px;
}

/* ============================================================
   INTRO-ANIMATIONEN
   ------------------------------------------------------------
   Ligger oven på siden og forsvinder efter ca. 4,8 sekunder.
   ============================================================ */
#intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #fdf7ec;
  /* .3s og ikke .6s. Laget bliver fjernet af js/intro.js efter 320 ms,
     så et fade på 600 ms betød at laget blev revet væk midt i sit eget
     fade, ved omkring 50 % — et synligt spring. De to tal skal følges
     ad, og det korte er det rigtige: heroen rejser sig bag laget
     imens, så jo før det er væk, jo før ser man den. */
  transition: opacity .3s ease;

  /* NØDUDGANG. Skulle intro.js fejle – gammel browser, blokeret
     fil – ville gæsten stirre på en stillestående tegning for
     evigt. Efter 3,5 sekunder forsvinder laget af sig selv,
     uanset hvad JavaScript gør.

     Tallet følger introens længde. Den varer 1,74 s plus 0,42 s
     til at forsvinde; nødudgangen skal ligge et stykke efter det,
     ikke en evighed efter. Den har været 9 s og 6 s da introen var
     længere. */
  animation: intro-nodudgang 0s linear 3.5s forwards;
}
@keyframes intro-nodudgang {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
#intro.gone { opacity: 0; pointer-events: none; }
#intro.intro-kort { opacity: 0; transition: opacity .4s ease; }
#intro canvas { display: block; width: 100%; height: 100%; }

.intro-hud {
  position: absolute;
  left: 50%;
  /* Bevidst OVER den endelige vandlinje, så teksten aldrig
     ender oven på det mørke vand */
  top: 7.5%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: var(--brod);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5f7183;
  white-space: nowrap;
}
.intro-hud .pct { font-variant-numeric: tabular-nums; color: var(--sea); letter-spacing: .06em; }
.intro-hud .msg { transition: opacity .28s ease; }

#intro-spring {
  position: absolute;
  right: 16px; bottom: 16px;
  height: 34px;
  padding: 0 16px;
  border: 1px solid rgba(36, 26, 23, .25);
  border-radius: 999px;
  background: transparent;
  color: #5f7183;
  font: 11px/1 var(--brod);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
#intro-spring:hover { color: var(--sea); border-color: var(--sea); }

/* Reglen om reduceret bevægelse slog nødudgangen fra længere op.
   Den skal stadig virke – bare hurtigere. */
@media (prefers-reduced-motion: reduce) {
  #intro { animation: intro-nodudgang 0s linear 1.5s forwards !important; }
}

@media print {
  /* #hd og ikke header: smørrebrødssidens mørke sidehoved er også et
     <header>, og det skal MED på et print – det er sidens titel. */
  #hd, #sail, #intro, .scrollhint { display: none !important; }
  body { background: #fff; }
  .rev { opacity: 1; transform: none; }

  /* En mørkeblå flade i fuld bredde koster en halv blækpatron */
  .smoer-hoved { background: #fff; color: var(--sea); }
  .mork-top h1, .mork-top .side-under, .mork-top .lys-note { color: var(--sea); }
  .smoer-tal dt { color: var(--sea); }
  .smoer-tal dd, .mork-top .eyebrow.lys { color: var(--muted); }
}

/* ============================================================
   PERSONALESIDEN (admin.html)
   ------------------------------------------------------------
   Et arbejdsredskab, ikke en forside. Samme palet og skrifter,
   men roligere: ingen kæmpe typografi, ingen animationer, og
   knapperne er tydelige frem for elegante. Personalet står med
   en telefon i en travl luge.
   ============================================================ */

.midt {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

.top {
  background: var(--sea);
  position: sticky;
  top: 0;
  z-index: 20;
}
.top .midt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* ⚠️ TALLET ER EN VARIABEL, FORDI TO REGLER SKAL KENDE DET
     (7/9). Menukort-fanens afsnitsoverskrifter klæber under
     bjælken her, og et 60 skrevet af i deres regel ville skride
     fra hinanden den dag bjælken bliver højere — overskriften
     ville lægge sig BAG den, og det kunne kun ses ved at rulle.
     Se .menu-afsnit. */
  min-height: var(--adm-top, 60px);
}
.top-navn {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: -.015em; /* Bebas-luften (.15em) passer ikke en grotesk — se .logo */
  color: #fff;
}
.top-navn:hover { color: var(--scoop); }
/* Personalesidens topmenu. Den arvede display:flex fra den globale
   nav-regel, som nu kun gælder #hd – så den skal have det selv. */
.top nav {
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}
.top nav a { font-size: 14px; color: rgba(255, 255, 255, .88); }
.top nav a:hover { color: var(--scoop); }

.h-arbejde { font-size: clamp(34px, 6vw, 56px); }
.h-panel { font-size: clamp(24px, 4vw, 34px); }
.luft-top { margin-top: 24px; }

/* ---- Kort ---- */
.kort {
  color: var(--sea);
  /* 8px var tilbage fra før rundingstrappen kom til – de skarpe
     hjørner stak ud ved siden af gæstesidens flader. */
  border-radius: var(--r-flade);
  padding: clamp(18px, 2.4vw, 30px);
  background: #fff;
  /* Kanten bærer formen, skyggen er kun luft. En tung skygge på
     hvert kort gør en side med ti kort mudret. */
  border: 1px solid rgba(36, 26, 23, .08);
  box-shadow: 0 1px 2px rgba(36, 26, 23, .05), 0 16px 36px -30px rgba(36, 26, 23, .35);
}
.login-boks { max-width: 26rem; margin: 80px auto; }
/* ⚠️ "GLEMT KODEN?" ER EN KNAP, DER SER UD SOM ET LINK (4/10).
   Den SKAL være en <button>: iPad'en i køkkenet har ingen mus, og
   en <span> med en klikhåndtering kan hverken nås med tabulator
   eller læses op. Men den må ikke se ud som en handling på linje
   med "Log ind" — den er vejen for den, der er kørt fast. */
.knap-tekst {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: .94rem;
  color: var(--sea, #2b4c5c);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  border-radius: 10px;
}
.knap-tekst:hover { text-decoration-thickness: 2px; }
.knap-tekst[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Faner ---- */
/* ============================================================
   PERSONALESIDENS SKAL

   Admin er vendt om i forhold til gæstesiden. DEN er telefon-først,
   fordi gæsten står nede ved vandet med mobilen i hånden. Her
   sidder personalet ved en skærm eller en iPad i køkkenet.

   Derfor: sidemenu fra 900 px og op, pillerække derunder. Under
   900 px er det den samme række, som har været der hele tiden —
   den skal virke på en telefon, den skal bare ikke være bygget
   til den. Ni punkter i en vandret række på en computer bliver to
   linjer, man skal lede i.
   ============================================================ */
/* ============================================================
   ADMINS TEMA: SAMME HUS, ANDET RUM  (24/8)
   ------------------------------------------------------------
   Kundens ord: temaerne skal være "cirka de samme, men alligevel
   lidt anderledes og bedre, fordi det er admin".

   Gæstesiden blev skiftet ud 23/8 og kører på havnegrillen.css:
   varm blæk, cremehvid, den røde #d62a3a og Fraunces til
   overskrifter. Admin lå tilbage i det gamle marineblå. To huse.

   VARIABLERNE SÆTTES PÅ body.personale OG IKKE I :root.
   css/style.css bærer stadig ni gæstesider — bestil/, menu.html,
   selskaber/, bord/ og resten — og de skal se ud, som de gør.
   Ændres :root, ændres de med.

   HVAD DER ER ENS MED GÆSTESIDEN
   · farverne: varm blæk, creme, den samme røde
   · overskrifterne: Fraunces
   · ternet som signatur — den ene stribe ned ad søjlens kant

   HVAD DER ER ANDERLEDES, OG HVORFOR
   · FLADERE. Mindre runding (18 px mod gæstens 26) og en lettere
     skygge: en fane med fjorten kort skal kunne skimmes, ikke
     beundres
   · INGEN GLASKNAPPER. Gæstens .g er sløret og har glans; en
     arbejdsknap skal se ud til at kunne trykkes på i en oplyst
     lugen, og sløring uden et foto bagved koster billeder i
     sekundet på en iPad (se noten ved .knap)
   · MØRKERE DÆMPET TEKST. Gæstens --muted (#8b7871) rammer 3,9:1
     mod cremehvid og falder under 4,5:1. Admin læses i et køkken
     med sollys i skærmen — #6f5b55 rammer 5,97:1
   · INGEN TERN SOM FLADE. Gæstens hero er ternet fra kant til
     kant. Bag en liste bestillinger ville det være støj
   ============================================================ */
body.personale {
  /* Havnens dybe farve er varm blæk nu, som på gæstesiden. Den
     bruges både som tekst og som søjlens flade. */
  --sea:  #241a17;
  --sea2: #3a2924;
  --sea3: #5c4a45;

  --red:       #d62a3a;   /* hvid på den: 4,94:1 */
  --red-tekst: #b41f2e;   /* lille rød tekst på creme: 6,21:1 */
  --red-dyb:   #a81a28;   /* lille rød tekst på en lyserød flade */
  --scoop:     #f6d3cf;

  --sand:  #fdf7ef;
  --sand2: #f7ede1;
  --paper: #fff;
  --muted: #6f5b55;

  --streg:     rgba(36, 26, 23, .14);
  --streg-lys: rgba(255, 255, 255, .16);

  --display: "Host Grotesk", system-ui, sans-serif;

  /* Fladere end gæstesiden. Se noten ovenfor. */
  --r-lille: 12px;
  --r-flade: 18px;
  --r-stor:  22px;

  --skygge-blid:
    0 1px 0 rgba(36, 26, 23, .04),
    0 10px 26px -18px rgba(36, 26, 23, .40);

  background: var(--sand);
}

/* Overskrifterne er en SERIF nu, ikke Bebas. Den globale regel
   fulgte efter 29/8 (gæstesiderne fik samme serif og 1.04), så
   reglen her er mest bælte og seler — men den bliver stående:
   falder den globale tilbage til Bebas' .88, klippes en serif
   med både over- og underlængder, og to linjer lægger sig oven
   i hinanden. */
body.personale h1,
body.personale h2,
body.personale h3 {
  line-height: 1.06;
  letter-spacing: -.008em;
}
/* Sperringen på .15em er også Bebas': en serif med den luft
   mellem bogstaverne ligner en overskrift, der er faldet fra
   hinanden. */
body.personale .top-navn { letter-spacing: .01em; font-size: 20px; }

/* ============================================================
   LIQUID GLASS I ADMIN — UDEN SLØR
   ------------------------------------------------------------
   Kundens ord (27/8): "der skal være liquid glass knapper i alle
   tabsne".

   ⚠️ HER STOD, AT ADMIN IKKE MÅTTE HAVE GLASKNAPPER, og
   begrundelsen var rigtig: gæstesidens .glass bruger
   backdrop-filter: blur(22px), og et slør uden et foto bagved
   koster billeder i sekundet på en iPad i et køkken — for
   ingenting. Sløret sløre den flade creme, kortet allerede har.

   Men SLØRET er ikke glasset. Glas er fire ting, og de tre koster
   ingenting:

     1. en LYS KANT foroven, hvor lyset rammer
     2. en MØRK KANT forneden, hvor det slipper
     3. en BLØD KROP med en svag gradient ned gennem fladen
     4. et LYSSTREJF, der løber hen over ved berøring

   Alle fire er maling. Ingen backdrop-filter, ingen ny
   lagsammensætning, ingen omtegning af det, der ligger bagved.
   Målt: knapperne herunder tegner på samme lag som før.

   ⚠️ OG DE SKAL KUNNE RAMMES MED EN FEDTET FINGER. Formen er
   uændret — 44 px høj, samme runding, samme tekstvægt. Det er
   overfladen, der er ny, ikke målene.
   ============================================================ */

/* Fælles for alle glasknapper i admin: kanten, kroppen, skyggen.
   Skrevet som variabler, så en knap kun skal sige sin FARVE. */
body.personale .knap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  background-color: var(--red);
  /* Kroppen: lysere foroven, dybere forneden. Det er den, der
     giver fladen krumning i stedet for at ligne et stykke pap. */
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .22) 0%,
    rgba(255, 255, 255, .06) 46%,
    rgba(0, 0, 0, .06) 100%);
  box-shadow:
    /* linsekanten hele vejen rundt */
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    /* lyset foroven */
    inset 0 1px 0 rgba(255, 255, 255, .42),
    /* skyggen forneden, indvendigt */
    inset 0 -1px 0 rgba(0, 0, 0, .14),
    /* og genstanden løftes fra fladen */
    0 1px 2px rgba(36, 26, 23, .16),
    0 6px 16px -6px rgba(180, 31, 46, .38);
  transition: box-shadow .18s ease, transform .12s ease,
              background-color .18s ease;
}

/* LYSSTREJFET. En smal, skæv, meget svag hvid stribe, der løber
   fra venstre mod højre — som lys hen over en våd flade.

   ⚠️ KUN VED BERØRING OG HOVER. Tolv knapper med en stribe, der
   løber i ring hele tiden, er uro og ikke liv — og på en iPad,
   der står tændt hele dagen, er det tolv animationer, ingen har
   bedt om. Samme beslutning som på gæstesiden. */
body.personale .knap::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 36%,
    rgba(255, 255, 255, .38) 48%,
    rgba(255, 255, 255, .58) 51%,
    rgba(255, 255, 255, .38) 54%,
    transparent 66%);
  transform: translateX(-120%);
  opacity: 0;
}
body.personale .knap:hover::after,
body.personale .knap:focus-visible::after {
  animation: adm-strejf .62s ease-out;
}
@keyframes adm-strejf {
  from { transform: translateX(-120%); opacity: 0; }
  30%  { opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}

body.personale .knap:hover {
  background-color: var(--red-tekst);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(0, 0, 0, .16),
    0 2px 4px rgba(36, 26, 23, .18),
    0 10px 22px -8px rgba(180, 31, 46, .46);
}

/* ⚠️ TRYKKET SKAL KUNNE MÆRKES. Uden det er glasset et billede.
   Knappen synker 1 px, løftet forsvinder, og lyset foroven
   dæmpes — som at trykke på en rigtig flade. */
body.personale .knap:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    inset 0 2px 5px rgba(0, 0, 0, .22),
    0 1px 1px rgba(36, 26, 23, .14);
}

/* DEN STILLE: hvidt glas med blækkant. Rækkernes knapper og alt
   det, der ikke er panelets hovedhandling. Se noten længere nede
   om hvorfor rækkens knapper ikke må være røde. */
body.personale .knap.fare,
body.personale .knap.sekundaer {
  background-color: rgba(255, 255, 255, .72);
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .9) 0%,
    rgba(255, 255, 255, .5) 52%,
    rgba(36, 26, 23, .045) 100%);
  color: var(--red-tekst);
}
body.personale .knap.fare {
  box-shadow:
    inset 0 0 0 1.5px rgba(180, 31, 46, .55),
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 1px 2px rgba(36, 26, 23, .1);
}
body.personale .knap.sekundaer {
  color: var(--sea);
  box-shadow:
    inset 0 0 0 1px rgba(36, 26, 23, .22),
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 1px 2px rgba(36, 26, 23, .08);
}
body.personale .knap.fare:hover {
  background-color: var(--red);
  color: #fff;
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .22) 0%,
    rgba(255, 255, 255, .06) 46%,
    rgba(0, 0, 0, .06) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 2px 4px rgba(36, 26, 23, .18),
    0 10px 22px -8px rgba(180, 31, 46, .4);
}
body.personale .knap.sekundaer:hover {
  background-color: rgba(255, 255, 255, .92);
  box-shadow:
    inset 0 0 0 1px rgba(36, 26, 23, .3),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 6px rgba(36, 26, 23, .12);
}

/* ⚠️ REDUCERET BEVÆGELSE: INGEN STRIBE OG INGEN SYNK.
   Glasset består af kanterne og gradienten; det er kun lyset og
   trykket, der bevæger sig. Så der er intet at savne. */
@media (prefers-reduced-motion: reduce) {
  body.personale .knap::after { display: none; }
  body.personale .knap:active { transform: none; }
  body.personale .knap { transition: none; }
}

/* ⚠️ DE SMÅ KNAPPER SKAL BLIVE VED MED AT VÆRE DÆMPEDE.

   Reglen for body.personale .knap ovenfor vejer tungere end
   .knap.lille, og så blev pilene op/ned på Menukort og
   månedsskiftet i kalenderen RØDE. Det er præcis dét, noten ved
   .knap.lille advarer imod: de er et værktøj, man bruger sjældent,
   og i rødt råber de lige så højt som Gem, der bruges hver dag.
   Set på et skærmbillede af kalenderen, usynligt i koden. */
body.personale .knap.lille {
  background-color: rgba(255, 255, 255, .6);
  /* Samme glas, bare tyndere. Værktøjet skal kunne ses som en
     knap uden at veje som en handling. */
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .85) 0%,
    rgba(247, 237, 225, .6) 100%);
  color: var(--sea);
  border: 0;
  box-shadow:
    inset 0 0 0 1px rgba(36, 26, 23, .16),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 1px rgba(36, 26, 23, .07);
}
body.personale .knap.lille:hover {
  background-color: rgba(255, 255, 255, .9);
  color: var(--sea);
  box-shadow:
    inset 0 0 0 1px rgba(36, 26, 23, .24),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 5px rgba(36, 26, 23, .1);
}
body.personale .knap.fare.lille {
  background-color: rgba(255, 255, 255, .7);
  color: var(--red-tekst);
  border: 0;
  box-shadow:
    inset 0 0 0 1.5px rgba(180, 31, 46, .5),
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 1px 1px rgba(36, 26, 23, .07);
}
body.personale .knap.fare.lille:hover { background-color: var(--red); color: #fff; }

.personale .midt { max-width: 1280px; }

/* Hovedet skal ikke fylde en tredjedel af skærmen, før arbejdet
   begynder. PERSONALE i 56px var en forside-gestus på en
   arbejdsside – det vigtige står i kortene nedenunder. */
.personale .h-arbejde { font-size: clamp(26px, 3.5vw, 36px); }
.personale .h-arbejde.luft-top { margin-top: 14px; }

/* ============================================================
   PERSONALESIDENS SKABELON PÅ COMPUTER  (24/8)
   ------------------------------------------------------------
   Kunden pegede på en færdig personaleside og bad om den form:
   en mørk søjle i venstre kant med ét punkt pr. ærinde og tallet
   ude til højre, sidens navn som overskrift i indholdet, og kort
   på en lys flade.

   FARVERNE ER HAVNENS, IKKE FORLÆGGETS. Søjlen er marineblå
   (--sea), det valgte punkt er rødt (--red), fladen er sand.
   Formen er lånt; farverne er dem, gæstesiden allerede bruger —
   ellers ville personalet arbejde i et andet hus end det, de
   sælger fra.

   ALT HERUNDER GÆLDER FRA 900 PX OG OP. Under 900 px står
   telefonens skal, som den har gjort: topbjælke foroven,
   pillerække i bunden. Se noten ved .faner.
   ============================================================ */
/* UNDER 900 PX FINDES SØJLEN IKKE SOM SØJLE.

   .faner skal opføre sig som den faste stribe i bunden, den altid
   har været — og en forælder med display:none tager den med sig.
   Det gjorde den: alle fjorten faner var usynlige på telefonen, og
   otte prøver løb tør for tid på et klik, der aldrig kunne ske.
   display:contents lader striben ligge præcis, hvor den lå i
   layoutet, mens mærket og vejen ud skjules hver for sig. */
.adm-side { display: contents; }
.adm-maerke, .adm-bund { display: none; }

/* Hovedet står på ALLE skærme — men det er dæmpet på en telefon.
   Uden det mistede telefonen sin sidetitel helt: man landede på
   seks tal uden en overskrift over sig. 36 px overskrift og to
   små linjer er cirka 90 px af en 844 px skærm; en overskrift i
   computerens 42 px ville tage det dobbelte. */
.adm-hoved {
  padding: 4px 0 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--streg);
}
.adm-hoved h1 { font-size: clamp(28px, 8vw, 36px); margin: 0; line-height: 1; }
.adm-dato { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.adm-hvem { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

@media (min-width: 900px) {
  .adm-side { display: flex; }
  .adm-maerke { display: flex; }
  .adm-bund { display: flex; }

  /* Topbjælken er væk — men KUN når nogen er logget ind. Klassen
     sættes af login.js.

     Uden den betingelse ville login-skærmen stå uden hoved og
     uden gutter, som en formular, der er faldet af en side. Der
     er ingen sidemenu at bære navnet endnu på det tidspunkt. */
  body.personale.arbejder .top { display: none; }

  /* Gutteren og bredden hører til indholdet nu, ikke til <main>:
     søjlen skal kunne gå helt ud i venstre kant. */
  .personale.arbejder main.midt {
    max-width: none;
    padding-inline: 0;
    padding-block: 0;
  }

  /* Sidefoden må ikke skride ind under den faste søjle. */
  .personale.arbejder footer { margin-left: 17.5rem; }

  /* Søjlen er FAST og fuld højde. Personalet ruller gennem en lang
     liste bestillinger og skal kunne skifte fane uden at rulle op
     — og en søjle, der slutter midt på en 1440 px skærm, ser ud
     som om siden er gået i stykker. */
  .adm-side {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 17.5rem;
    z-index: 40;
    flex-direction: column;
    background: var(--sea);
    color: #fff;
  }

  /* ---- DEN TERNEDE SIGNATUR ----
     Gæstesidens hero er rød/hvid-ternet fra kant til kant. Bag en
     liste bestillinger ville det være støj — men helt uden ternet
     er de to sider ikke det samme hus.

     Derfor ÉN stribe ned ad søjlens yderkant. Den er det eneste
     sted, ternet optræder i admin, og den er der, hvor øjet
     aldrig skal læse noget.

     8 PX MED 4 PX TERN, IKKE 5 MED 2,5. Første udgave var så
     fin, at den ikke lignede tern — den lignede en stiplet
     ramme, altså en fejl. Et tern skal kunne ses som et tern,
     ellers er det bare en streg. */
  .adm-side::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 8px;
    background-color: #fff;
    background-image:
      repeating-linear-gradient(90deg, rgba(214, 42, 58, .8) 0 4px, transparent 4px 8px),
      repeating-linear-gradient(0deg,  rgba(214, 42, 58, .8) 0 4px, transparent 4px 8px);
  }

  .adm-maerke {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 22px 20px 18px;
    flex: 0 0 auto;
  }
  .adm-maerke-tegn { font-size: 26px; line-height: 1; }
  /* ⚠️ 20 PX OG IKKE 22 (6/9) — TO PIXELS AFGJORDE DET. Fraunces
     er bredere end Instrument Serif ved samme størrelse, og MÅLT i
     søjlen: pladsen er 197 px, og "Mosede Havnecafe" fylder 199 px
     ved 22 px. To pixels for meget, så navnet brækkede over to
     linjer og skubbede hele menulisten ned — og fjorten punkter à
     46 px har i forvejen ikke plads til overs på en baerbar på
     720 px. Ved 20 px fylder det 180 px.

     Målt, ikke gættet: 21 px giver 193 og ville også passe, men 20
     er en størrelse, arket har i forvejen — og fire px slack er
     ikke nok den dag, en anden forretning hedder noget længere. */
  .adm-maerke-navn {
    font: 500 20px/1.05 var(--display);
    letter-spacing: -.015em; /* se .logo (27/9) */
    color: #fff;
  }
  /* "Personale" står PÅ SIN EGEN LINJE under navnet. Forlægget har
     de to ved siden af hinanden, og det virker på et kort navn —
     "Mosede Havnecafe" og en etiket ved siden af er 240 px i en
     søjle på 280 minus polstring, og så brækker navnet i stedet. */
  .adm-maerke-navn b {
    display: block;
    margin-top: 5px;
    font: 600 11px/1 var(--brod);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--scoop);
  }

  /* Vejen ud i bunden, hvor man leder efter den. */
  .adm-bund {
    margin-top: auto;
    flex: 0 0 auto;
    padding: 14px 20px 20px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .adm-bund a {
    font-size: 14px;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
  }
  .adm-bund a:hover { color: #fff; text-decoration: underline; }

  /* Indholdet står ved siden af den faste søjle. Marginen og ikke
     en grid-kolonne: panelerne er lange, og en grid-række, der
     skal være mindst lige så høj som en fixed søjle, findes ikke. */
  .admin-lag {
    display: block;
    margin-left: 17.5rem;
  }
  .admin-indhold {
    max-width: 1180px;
    padding: 0 clamp(22px, 3vw, 44px) 70px;
  }

  /* ⚠️ MENUKORTET FÅR MERE PLADS END DE ANDRE FANER.

     Det er en tabel med ti kolonner og 242 rækker; en
     indstillingsside er fire felter. 1180 px er rigtigt for den
     ene og for lidt for den anden.

     MÅLT: varerækken blev 1012 px bred, indholdet krævede 1136
     med "Få tilbage" på, og hver eneste række brød om til to
     linjer. Et kort, man skal rulle dobbelt så langt igennem, er
     ikke det overblik, kunden bad om (26/8).

     Kun den her fane. En bredere indstillingsside er ikke bedre —
     et tekstfelt på 1400 px er sværere at læse, ikke lettere. */
  body.fane-p-menu .admin-indhold { max-width: 1460px; }

  /* ---- Sidens navn ----
     Samme sted på hver fane, så man altid kan se hvor man er.
     Admin.visFane skriver overskriften; datoen skrives én gang. */
  .adm-hoved {
    padding: 26px 0 18px;
    margin-bottom: 24px;
  }
  .adm-hoved h1 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.05; }
  .adm-dato { font-size: 15px; }

}

/* ⚠️ DEN GENTAGNE OVERSKRIFT SKJULES PÅ ALLE SKÆRME  (31/8)

   Reglen stod inde i @media (min-width: 900px), og grunden var:
   "på en telefon er der ikke noget hoved". Det passede, da den
   blev skrevet — og holdt op med at passe samme aften, da
   hovedet blev sat til at stå på ALLE skærme (se noten i
   admin.html om de seks tal uden en overskrift).

   Siden da har telefonen sagt "Åbningstider" to gange med 200 px
   imellem. **Målt på en iPhone 13:** det første felt, man kan
   røre, lå 391 px nede på en 664 px skærm — 59 % af skærmen var
   hoved og gentagelse. Kundens ord: admin "ligner noget for
   1850'erne".

   Overskriften SKJULES og fjernes ikke: Admin.visFane slår
   klassen fra igen, når panelets titel siger noget andet end
   fanens.

   ⚠️ MEN KUN OVERSKRIFTEN — NOTEN BLIVER.

   Første udgave skjulte hele .kort-hoved, fordi noten står med
   lille begyndelsesbogstav og fortsætter titlen; alene læses den
   som en løsreven sætning. Det var rigtigt set og forkert gjort:
   PRØVERNE FÆLDEDE DET. Salg-kortets note siger "bestilt gennem
   hjemmesiden eller fra et bord", og det er ikke pynt — det er
   forbeholdet om, at tallet IKKE er butikkens omsætning, fordi
   der ikke er nogen kasse i systemet. En regel, der rydder op i
   udseendet ved at skjule en advarsel om penge, er en dyrere
   fejl end den, den retter.

   Noten står derfor tilbage som kortets første linje —
   venstrestillet under 600 px (se .kort-note nedenfor). */
.dobbelt-titel { display: none; }

/* Ikonerne i sidemenuen har fast bredde, så teksterne flugter.
   Uden den står "Salg" og "Åbningstider" i hver sin kolonne. */
.fane-ikon { flex: 0 0 auto; width: 1.55em; font-size: 15px; }

/* ============================================================
   FANERNE PÅ EN TELEFON LIGGER I BUNDEN
   ------------------------------------------------------------
   De stod som en ombrudt række piller ØVERST. Målt på en iPhone
   13: fjorten faner i syv rækker fyldte 344 px og sluttede først
   599 px nede på en 844 px skærm. Personalet så altså navigation
   på 71 % af skærmen, før de så en eneste bestilling — og skulle
   rulle forbi den hver gang de skiftede fane.

   Nu ligger de i bunden, som i en app: tommelfingeren er dér i
   forvejen, og hele skærmen ovenover er indhold. Striben ruller
   sidelæns, fordi fjorten punkter ikke kan stå på 390 px — og
   den valgte scrolles frem af sig selv (Admin.visFane), så man
   kan se hvor man er.

   position: fixed og ikke sticky: en sticky bundbjælke i en lang
   liste hopper op og ned, når siden gummibåndsruller på iOS.
   ============================================================ */
.faner {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  margin: 0;
  padding: 8px var(--pad) calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(253, 250, 244, .97);
  border-top: 1px solid var(--streg);
  /* Skyggen opad, så striben ligger OVEN PÅ listen og ikke ser
     ud som om den hører til den sidste række i den. */
  box-shadow: 0 -6px 20px rgba(36, 26, 23, .10);
}
.faner::-webkit-scrollbar { height: 0; }

/* Plads i bunden, så det sidste kort ikke ligger under striben.
   Målt: 44 px knap + 16 px luft + sikker zone. Uden den kan man
   ikke trykke "Afhentet" på dagens sidste bestilling. */
@media (max-width: 899px) {
  .admin-lag { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .faner button { flex: 0 0 auto; }
}

.faner button {
  background: rgba(36, 26, 23, .07);
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  min-height: 44px;
  font: inherit;
  font-size: 14px;
  /* Mørkere end --muted: pillebunden er lysere end sandet, og
     der ville --muted kun nå 4,2:1 */
  color: #3f5670;
  cursor: pointer;
}
.faner button[aria-selected="true"] { background: var(--sea); color: #fff; }
.faner button { display: inline-flex; align-items: center; gap: 8px; }

@media (min-width: 900px) {
  .faner {
    /* TILBAGE I SIDEMENUEN. Reglerne ovenfor lægger striben fast
       i bunden på en telefon; her er den søjlens midterste del —
       den ene del, der må rulle. Fjorten punkter à 46 px fylder
       644 px, og på en bærbar på 720 px er der ikke plads til
       både mærket, punkterne og vejen ud. */
    position: static;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    background: none;
    border-top: 0;
    box-shadow: none;
    padding: 4px 12px 10px;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
    margin: 0;
  }
  /* Rullepanelet skal ikke tegne en lys stribe ned ad den mørke
     søjle, når der ikke rulles. */
  .faner { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
  .faner::-webkit-scrollbar { width: 6px; height: 0; }
  .faner::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
  }

  .faner button {
    justify-content: flex-start;
    width: 100%;
    border-radius: 12px;
    /* Venstrestillet tekst i en sidemenu: øjet løber ned ad én
       kant og ikke i en zigzag efter midten. */
    text-align: left;
    padding: 0 12px;
    min-height: 46px;
    font-size: 15px;
    font-weight: 600;
    /* Søjlen er fladen; rækkerne skal ikke selv være kasser. */
    background: transparent;
    /* 82 % hvid på marineblå rammer 12,7:1. Se noten ved
       .smoer-hoved: --muted er valgt til SAND og kan ikke bruges
       her. */
    color: rgba(255, 255, 255, .82);
  }
  .faner button:hover { background: rgba(255, 255, 255, .09); color: #fff; }

  /* Det valgte punkt er en fyldt rød pille i fuld bredde. Rødt og
     ikke marineblåt: søjlen ER marineblå, og et marineblåt mærke
     på marineblå bund kan kun ses på kanten. */
  .faner button[aria-selected="true"],
  .faner button[aria-selected="true"]:hover {
    background: var(--red);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6);
  }

  /* Tallet ud til højre, hvor øjet leder efter det i en liste.
     På det valgte punkt er mærket rødt på rødt, så det skifter
     til en lys flade — ellers forsvinder tallet præcis dér, hvor
     man står. */
  .faner button .badge { margin-left: auto; }
  .faner button[aria-selected="true"] .badge {
    background: rgba(255, 255, 255, .26);
    color: #fff;
  }
}

/* ---- Overblik ---- */
/* ---------- Logbogen ----------
   Bevidst mere afdæmpet end bestillingskortene. Der er ingen
   knapper og intet, der skal handles på: linjerne skal kunne
   skimmes, ikke bemærkes. Derfor ingen farvet kant i venstre
   side — den betyder "her venter noget" alle andre steder i
   admin. */
.log-linje {
  border: 1px solid var(--streg);
  border-radius: var(--r-lille);
  padding: 12px 14px;
  margin-top: 10px;
  background: #fff;
}
.log-hvem { font-size: 14px; color: var(--muted); margin-top: 6px; }
.log-hvad { margin-top: 8px; }
.log-felt { font-size: 14px; line-height: 1.6; }
.log-navn { color: var(--muted); }
/* Før-værdien er gennemstreget, så øjet finder den nye med det
   samme. Pilen alene er for svag på en iPad i sollys. */
.log-foer { text-decoration: line-through; color: var(--muted); }
.log-pil { color: var(--muted); }
.log-efter { font-weight: 600; }

.nyt-kort {
  border: 1px solid var(--streg);
  border-left: 5px solid var(--red);
  border-radius: var(--r-lille);
  padding: 14px 16px;
  margin-top: 12px;
  background: #fff;
}
.nyt-hvornaar {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red-tekst);
  margin-bottom: 4px;
}
.nyt-naar { font-size: 14px; color: var(--muted); margin-top: 4px; }
.nyt-aabn {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--red-tekst);
  cursor: pointer;
  /* 44 px trykflade, også når teksten er én linje */
  min-height: 44px;
}

/* ============================================================
   VAGTSKÆRMEN: DAGEN I TIDSRÆKKEFØLGE
   ------------------------------------------------------------
   Klokkeslættet står FØRST og i sin egen kolonne, ikke inde i
   en sætning. Personalet skal kunne løbe kolonnen ned med øjet
   og finde "18.00" uden at læse fem navne først — det er hele
   forskellen på en liste og en arbejdsseddel.

   Rækken er lavere end .nyt-kort. Der kan stå ti ting på en dag,
   og de skal kunne ses på én skærm i en luge.
   ============================================================ */
/* ============================================================
   DAGENS FORLØB — RÆKKEN ER ET KORT  (1/9)
   ------------------------------------------------------------
   Kundens skærmbillede af forlægget på en telefon, og hans ord:
   *"præcis sådan her på telefonen — nærmest identisk, men med
   anderledes farver."*

   Formen er forlæggets: tiden på TO linjer uden for kortet
   ("kl." over "16:00"), kortet med en tydelig farvet kant og en
   tonet flade, varerne som punkter, og to store knapper nederst.
   Farverne er havnens røde og sand — ikke forlæggets orange.

   Rækken var før to kolonner adskilt af en hårstreg: teksten løb
   sammen med naboen, og på en telefon kunne man ikke se, hvor én
   bestilling sluttede og den næste begyndte.
   ============================================================ */
.vagt-raekke {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  gap: 0 10px;
  align-items: start;
  margin-bottom: 14px;
}
.vagt-raekke:last-child { margin-bottom: 0; }

/* Tiden er tidslinjens akse: den skal kunne skimmes ned ad
   venstre kant uden at kortene læses. */
.vagt-tid {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: 14px;
  line-height: 1.05;
  color: var(--red-tekst);
  font-variant-numeric: tabular-nums;
}
.vagt-tid-kl { font-size: 13px; font-weight: 600; opacity: .85; }
/* ⚠️ ÉN TALSTEMME TIL KLOKKEN (6/9). Kundens ord: *"it looks very
   generic with the numbers and the text."* Målt: det SAMME
   klokkeslæt stod i serif 400/30 på Bestillinger og i sans 700/19
   her — to stemmer for den samme oplysning på to faner, personalet
   skifter mellem hele dagen. Det er nøjagtig den fejl, gæstesiden
   fik rettet 5/9, hvor "89,-" stod i tre skrifter.
   Serif'en er husets tal-stemme i admin: dagens seks tal og
   produktionens antal står allerede i den. */
.vagt-tid-tal {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0;
}

/* ⚠️ KORTET ER .vagt-midt OG IKKE ET NYT ELEMENT. Rækken er et
   grid, og en beholder mere ville betyde, at hver måling af
   rækkens indhold skulle igennem et lag til. */
body.personale .vagt-midt {
  min-width: 0;
  border: 2px solid var(--red);
  border-radius: 16px;
  background: var(--sand);
  padding: 12px 14px 14px;
}
/* En bordbooking er ikke mad, der skal laves — den er en aftale.
   Kanten siger det uden ord. */
body.personale .vagt-raekke.kilde-booking .vagt-midt {
  border-color: #2f6f9e;
  background: rgba(47, 111, 158, .06);
}
/* Den færdige: grøn kant og grøn flade — "det gik godt". Reglen
   fra 31/8: et afslag må aldrig få den farve. */
body.personale .vagt-raekke.b-faerdig .vagt-midt {
  border-color: #2f8a5b;
  background: rgba(47, 138, 91, .07);
}
body.personale .vagt-raekke.b-faerdig .vagt-tid { color: #24704a; }
body.personale .m-faerdig {
  background: rgba(47, 138, 91, .14);
  color: #24704a;
}

/* Varerne som punkter — én linje pr. ting, antallet fremhævet. */
body.personale .vagt-varer {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
body.personale .vagt-varer li {
  position: relative;
  padding-left: 16px;
  margin: 4px 0;
  line-height: 1.35;
}
body.personale .vagt-varer li::before {
  content: "•";
  position: absolute;
  left: 2px;
  color: var(--red-tekst);
  font-weight: 700;
}
/* Antallet er det samme tal som .bestil-antal-tal på
   Bestillinger-fanen — samme vægt, samme tabular. */
.vagt-antal {
  color: var(--red-tekst);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Hovedet: navnet fylder, chippen står ved siden, og "Ny" bliver
   skubbet ud i højre kant — som i forlægget. Uden det faldt "Ny"
   ned på sin egen linje og gjorde kortet 40 px højere. */
body.personale .vagt-midt .bestil-hvem {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* ⚠️ NAVNET MÅ IKKE KLIPPES. Første udgave gav det
   text-overflow: ellipsis, og så stod der "Lone H…" på
   personalets skærm — et navn, man ikke kan sige højt ved lugen,
   er værre end et navn, der fylder to linjer. Chippen viger i
   stedet: den er tre bogstaver og kan altid være der. */
body.personale .vagt-midt .bestil-hvem {
  flex-wrap: wrap;
  row-gap: 6px;
}
body.personale .vagt-midt .bestil-hvem .vare-navn {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 18px;
  line-height: 1.2;
}
/* ⚠️ CHIPPEN STÅR I ALMINDELIGE BOGSTAVER HER. Husets .maerke er
   versaler med sperring — og "TO-GO" fyldte så meget, at "Ny"
   blev skubbet ned på sin egen linje. Forlægget skriver "To-go".
   Det er den samme oplysning på 20 % mindre plads. */
body.personale .vagt-midt .bestil-hvem .maerke {
  flex: 0 0 auto;
  text-transform: none;
  letter-spacing: .01em;
}
/* ⚠️ INGEN margin-left:auto PÅ "NY". Den skubbede mærket ud i
   højre kant, og når linjen så brækkede, stod "Ny" HELT ALENE på
   sin egen række — 40 px kort for tre bogstaver. De tre står
   naturligt efter hinanden og brækker som en gruppe. */

/* ⚠️ "DAGENS RET" ER EN ETIKET, IKKE EN KNAP. .maerke favorit er
   husets mørke mærke; inde i en varelinje blev den en sort pille,
   der brækkede over to linjer midt i rettens navn. Her er den
   ordet i mærkefarven, som i forlægget — og den brækker ikke. */
body.personale .vagt-varer .maerke {
  background: none;
  color: var(--red-tekst);
  padding: 0 0 0 6px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
  font-size: 14px;
}

/* Leveringens tre tider står nu i .lev-plan (17/10) — se nederst. */

/* "kl. 17.30 · 📞 26204992" — dæmpet, men klikbar. */
body.personale .vagt-kontakt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

/* ---- DAGENS RET OG BOOKINGER SOM RUDER  (1/9) ----
   Forlæggets form: en tonet kasse med navnet fed og to chips
   under — prisen i mærkefarven, det solgte i grønt. */
body.personale .ob-rude {
  border: 1px solid var(--streg);
  border-radius: 14px;
  background: var(--sand);
  padding: 12px 14px;
}
body.personale .ob-rude .vare-navn { font-size: 17px; }
body.personale .ob-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
body.personale .ob-chip {
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.personale .ob-chip.pris {
  background: rgba(214, 42, 58, .12);
  color: var(--red-tekst);
}
body.personale .ob-chip.solgt {
  background: rgba(47, 138, 91, .13);
  color: #24704a;
}

/* BOOKINGKORTET I OVERBLIK (28/9): dagen i én linje og de næste
   dage som små datomærker. Den røde stribe ("ring og få dem på
   plads") er væk — en booking er booket, og der skal ikke ringes. */
body.personale .ob-booking-idag {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}
body.personale .ob-booking-frem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
/* ⚠️ NUMMERET MÅ IKKE SKUBBE SIG SELV UD I KANTEN. .bestil-ref
   har margin-left:auto på bestillingskortet, hvor den ER yderst;
   her står den i en linje med tid og telefon og skal blive på
   sin plads. */
body.personale .vagt-kontakt .bestil-ref { margin-left: 0; }
/* ⚠️ 44 px TRYKFLADE MÅ IKKE BLIVE TIL 44 px LINJEHØJDE HER.
   .bestil-tlf har min-height: 44px, fordi den skal rammes i
   første forsøg på bestillingskortet — men i den her ene linje
   ("kl. 16.00 · 📞 61799448 · #0047") skubbede den nummeret ned
   på en linje for sig selv og gjorde kortet 44 px højere.
   Trykfladen bevares med lodret padding i stedet: rækken vokser
   ikke, og fingeren rammer stadig. */
body.personale .vagt-kontakt .bestil-tlf {
  font-size: 14px;
  min-height: 0;
  padding: 8px 0;
  margin: -8px 0;
}

.vagt-midt { min-width: 0; }

/* ---- HANDLINGERNE PÅ RÆKKEN ----

   To ar bor i den her boks, og begge kom af, at knapperne lå løst
   i grid'et:

   · 27/8: "✓ Sæt som klar" faldt i grid'ets FØRSTE kolonne — de
     4,2 rem, der er afsat til klokkeslættet. MÅLT på et skud:
     tre ord over tre linjer inde i en 67 px rund knap. Den
     virkede, men den så ud som en fejl, og i en frokost læser
     man ikke tre linjer inde i en cirkel.
   · 30/8: begge knapper lå UNDER teksten, hver på sin linje.
     MÅLT på 1280 px: hver række blev 166 px høj, mens højre
     halvdel af kortet stod tom.

   Nu er de ét element (.vagt-handling), og så kan de flyttes
   samlet. Under 900 px står de under teksten som før — på en
   telefon ville en tredje kolonne give en knapsøjle med ordene
   brækket over fire linjer. */
.vagt-handling {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.vagt-handling > .knap {
  min-height: 34px;
  white-space: nowrap;
}
/* margin-top væk: den er sat for .nyt-kort, hvor linket står
   under en hel blok tekst. Her styrer .vagt-handling afstanden,
   og de 10 px oveni gav et hul mellem to knapper, der hører
   sammen. 40 px og ikke 32: personalesiden bruges på en iPad. */
.vagt-handling > .nyt-aabn { margin-top: 0; min-height: 40px; }

/* Den grønne fremad fylder kortets bredde på en telefon, som i
   forlægget — det er dagens ene handling. "···" står ved siden.

   ⚠️ DEN HER BLOK SKAL STÅ FØR @media (min-width: 900px)
   NEDENFOR. De to har samme vægt (0,2,1), og så afgør
   rækkefølgen. Stod telefonens udgave efter bruddet, vandt dens
   margin-top: 10px og gap: 10px også på en iPad — og
   knapkolonnen, der skal stå centreret ud for teksten, stod
   10 px for lavt. Målt på den beregnede stil, ikke på klassen. */
body.personale .vagt-handling {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  position: relative;
}
body.personale .vagt-handling .vagt-frem { flex: 1 1 auto; }
body.personale .vagt-handling .knap.gron {
  background: #2f8a5b;
  border-color: #2f8a5b;
  color: #fff;
}

/* ⚠️ HANDLINGEN LIGGER, HVOR ØJET ENDER (30/8).
   Samme rettelse som forespørgselskortet fik 29/8: sagen læses
   fra venstre, handlingen står til højre, og rækken bliver to
   linjer lavere. Kolonnen har en fast mindstebredde, ellers
   springer knapperne vandret fra række til række, alt efter hvor
   langt "Sæt som klar" er mod "Bekræft". */
@media (min-width: 900px) {
  /* ⚠️ FRA 900 px BLIVER HANDLINGEN EN TREDJE KOLONNE IGEN.
     På en iPad står sagen til venstre og knappen, hvor øjet
     ender — arret fra 30/8. På en telefon falder den under
     maden, som i forlægget. */
  .vagt-raekke { grid-template-columns: 3.6rem minmax(0, 1fr); }
  body.personale .vagt-midt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: start;
  }
  body.personale .vagt-midt > *:not(.vagt-handling) { grid-column: 1; }
  body.personale .vagt-handling {
    grid-column: 2;
    /* ⚠️ IKKE `1 / -1`. Der er ingen EKSPLICITTE rækker i det her
       grid (rækkerne skabes af indholdet), og så peger -1 på den
       samme linje som 1 — knappen kom til at ligge i RÆKKE ÉT
       alene og gjorde den 82 px høj. MÅLT på 1280 px: navnelinjen
       var 23 px, men rækken blev 82, og hele bestillingen 179 px
       — højere end de 166, arret fra 30/8 handlede om. Et span
       dækker de rækker, der FINDES; de tomme fylder nul. */
    grid-row: 1 / span 50;
    align-self: center;
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
    gap: 8px;
    min-width: 10.5rem;
  }
}


/* OVERSKREDET ER IKKE EN FEJL, DET ER EN PÅMINDELSE.
   En gæst, der skulle have hentet kl. 13.15 og ikke har, er ikke
   mindre vigtig kl. 13.20 — hun er mere. Derfor bliver rækken
   stående øverst, og tiden bliver rød i stedet for at blive
   nedtonet. */
.vagt-raekke.overskredet .vagt-tid { color: var(--red-tekst); }

/* ============================================================
   HVOR KOMMER RÆKKEN FRA?  (31/8)
   ------------------------------------------------------------
   Kundens ord: *"der skal i Overblik tydeligt være forskel på
   online bestillinger og bestillinger fra bordet."*

   Der er tre slags arbejde på en dag, og de så ens ud: mad, der
   skal ud ad LUGEN på et klokkeslæt; et BORD, der er booket; og
   det, gæsten scanner ved bordet (som har sin egen skærm,
   Køkken-kø — se noten øverst i js/admin/koekken.js).

   ⚠️ MÆRKATET BÆRER SIT ORD, farven er kun hjælpen. En farvet
   kant alene ville være ubrugelig for den, der ikke ser forskel
   på dem — og på en iPad i et køkken med solen ind ad vinduet
   er den også svær for os andre.

   ⚠️ OG STRIBEN STÅR PÅ RÆKKEN, IKKE PÅ MÆRKATET. Det er
   RÆKKEN, øjet løber ned ad; en farve, der kun sad på et lille
   mærke inde i teksten, ville skulle findes én række ad gangen.
   ============================================================ */
/* ⚠️ STRIBEN ER BLEVET KORTETS EGEN KANT  (1/9). Den stod som en
   3 px streg til venstre for rækken — men da rækken blev et kort
   med en 2 px farvet kant hele vejen rundt (forlæggets form),
   var der to streger i samme farve med 12 px imellem. Farven
   siger stadig det samme; den er bare blevet kantens. */
body.personale .vagt-raekke { position: relative; }

body.personale .kilde-maerke {
  background: rgba(214, 42, 58, .12);
  color: var(--red-tekst);
  letter-spacing: .01em;
}
body.personale .kilde-booking .kilde-maerke {
  background: rgba(47, 111, 158, .14);
  color: #23577c;
}

/* ---- Dagens tal ----
   Rækken står ØVERST på Overblik nu (24/8): det er det, man kigger
   efter, når man møder ind, og listerne er det, man arbejder i
   bagefter. Hvert felt bærer sin egen etiket, så rækken kan stå
   uden en overskrift over sig. */
/* SEKS FELTER, IKKE FEM OG ET. Med minmax(11rem) var der plads
   til fem på en 1180 px flade, og det sjette lå alene på næste
   linje som en fejl. 9,5 rem giver 6 × 152 + 5 × 12 = 972 px, og
   så står dagen som ÉN række. Under 1000 px falder de af sig selv
   til to og tre. */
.tal-raekke {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 12px;
  margin-top: 0;
}

/* ⚠️ SEKS FELTER BRØD 5 + 1 (27/8).

   auto-fit fylder rækken op og lader resten falde ned. På en
   almindelig skærm blev det fem felter på første linje og ét
   alene på anden — og det ene, der stod for sig selv, læses som
   noget særligt. MÅLT på Overblik: "Venter på svar" stod alene
   under de fem andre, som om det var en konklusion.

   Fra 62 rem og op er der plads til tre pr. linje uden at
   presse dem: seks felter bliver 3 + 3, fem bliver 3 + 2. Begge
   dele er en form; 5 + 1 er en rest.

   Under den bredde får auto-fit lov igen — dér er der ikke plads
   til at vælge. */
@media (min-width: 62rem) {
  body.personale .tal-raekke:has(> .tal-felt:nth-child(5)) {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Advarslen om linjer uden pris spænder over hele rækken — som en
   tekst i et net af tal ville den ellers blive klemt ind i én
   kolonne og ombrydes til en lodret stribe ord. */
.tal-raekke > .fejl { grid-column: 1 / -1; }
.tal-felt {
  border: 1px solid rgba(36, 26, 23, .08);
  border-radius: var(--r-flade);
  padding: 17px 18px 15px;
  background: var(--paper);
  box-shadow: var(--skygge-blid);
}

/* DET FØRSTE FELT ER FYLDT. Der er seks tal i rækken, og de er
   ikke lige vigtige: det første er det, der venter og ikke er set
   på. Er alle seks hvide, læses rækken fra venstre som en tabel —
   med ét fyldt felt er der et sted, øjet lander. */
/* ⚠️ DET FYLDTE FELT ER DET FØRSTE I EN RÆKKE — IKKE ET
   HVILKET SOM HELST FØRSTE FELT (27/8).

   Reglen var .tal-felt:first-child uden noget foran, og den ramte
   derfor også de felter, der står ALENE. MÅLT på Salg-fanen:
   "Udeblivelser 0" stod som en mørk blok i fuld bredde neden
   under "Mest solgte" — et nul med den tyngde, den vigtigste
   oplysning på skærmen skulle have haft.

   Og der var to mørke felter på den samme fane. Det fyldte felt
   betyder "start her"; siger det det to gange, betyder det
   ingenting. */
.tal-raekke > .tal-felt:first-child {
  background: var(--sea);
  border-color: var(--sea);
  color: #fff;
}
.tal-raekke > .tal-felt:first-child .tal-navn,
.tal-raekke > .tal-felt:first-child .tal-note { color: rgba(255, 255, 255, .78); }
.tal-raekke > .tal-felt:first-child .tal-tal { color: #fff; }

/* Et felt uden en række om sig skal ikke strække sig over hele
   kortet. Et tal på 1200 px er ikke mere sandt end et på 260 —
   det ser bare ud, som om det er vigtigere.

   To regler og ikke en :not(): inde i en .tal-raekke styrer
   grid'et bredden, og dér skal loftet væk igen. */
body.personale .tal-felt { max-width: 22rem; }
body.personale .tal-raekke .tal-felt { max-width: none; }

.tal-navn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
  /* PLADS TIL TO LINJER, OGSÅ NÅR DER KUN ER BRUG FOR ÉN.
     "Til afhentning i dag" brækker, "Stykker i dag" gør ikke — og
     så stod de store tal i to højder ved siden af hinanden. Med
     en fast højde på etiketten står tallene på linje, og rækken
     kan læses vandret i ét blik. */
  min-height: 2.6em;
}
/* Var var(--overskrift), som ikke findes i :root. En font-shorthand
   med en uløst variabel er ugyldig HELE vejen, så tallet arvede
   brødteksten og stod i 17 px — det så ud som en indstilling, ikke
   som dagens tal. */
/* ⚠️ OG SHORTHANDEN NULSTILLER TABULAR-NUMS (6/9). `font:` sætter
   font-variant tilbage til normal, så de seks tal i rækken stod med
   hver sin bredde: et 1-tal er smallere end et 4-tal, og rækken
   sitrede, hver gang takten tegnede om. Målt: 7 af 17 talelementer
   i admin manglede den. Egenskaben skrives derfor EFTER
   shorthanden — samme fælde som --overskrift ovenfor. */
.tal-tal {
  font: 400 42px/1 var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--sea);
  margin: 8px 0 2px;
}
.tal-note { font-size: 13px; color: var(--muted); }

/* ============================================================
   KALENDEREN SKAL VÆRE EN KALENDER  (24/8)
   ------------------------------------------------------------
   Kundens ord. Fanen var en liste over arrangementer og
   lukkedage; nettet her lægger ALT, der rører en dag, oven på
   hinanden — bestillinger, borde, forespørgsler, baglokalet og
   kalenderens egne rækker.
   ============================================================ */
.maaned-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.maaned-top h2 { flex: 1 1 auto; font-size: clamp(22px, 2.6vw, 30px); }
/* ⚠️ 48 OG IKKE 36, MEN KUN HER  (17/9). Pilene er `knap lille`,
   som med vilje er 36 px ("et værktøj, man bruger sjældent").
   Men i DEN HER række står de ved siden af "I dag", der er en
   almindelig .knap på 48 — tre knapper i to højder, målt i
   browseren. Løftet frem for at sænke: man gør ikke en trykflade
   mindre. Scopet til månedsrækken, så alle andre små knapper i
   admin beholder deres 36. */
.maaned-top .knap.lille { min-width: 44px; min-height: 48px; justify-content: center; }

.maaned {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 14px;
}
.maaned-ugedag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding-bottom: 2px;
}
/* Baglokalets eget net (js/admin/udlejning.js) bruger stadig
   tomme felter. Kalenderens gør ikke — se .nabo-mdr nedenfor. */
.maaned-tom { min-height: 1px; }

/* Dagen er en KNAP og ikke en div. Personalet skal kunne gå
   gennem måneden med tabulator, og en iPad skal give det samme
   tryk her som alle andre steder. */
.maaned-dag {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  min-height: 96px;
  padding: 7px 8px;
  border: 1px solid var(--streg);
  border-radius: var(--r-lille);
  background: var(--paper);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.maaned-dag:hover { border-color: rgba(36, 26, 23, .32); }
/* Toppen INDE I en dagcelle: dagens nummer og dens mærker.
   ⚠️ HED .maaned-top INDTIL 17/9 — samme navn som månedsrækken
   øverst på fanen. Samme specificitet, så den her vandt tavst, og
   navigationen fik `align-items: baseline` og 2 px gap i stedet
   for sine egne `center` og 10. Baseline er RIGTIGT her: dagens
   tal og mærkerne skal stå på samme skriftlinje. */
.maaned-dag-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
}
.maaned-nr { font-weight: 600; font-size: 14px; }

/* I DAG ER MARKERET, IKKE VALGT. To forskellige ting: den ene er
   en oplysning, den anden er hvad man kigger på lige nu. Var de
   ens, kunne man ikke se, om man havde trykket. */
.maaned-dag.er-idag { border-color: var(--red); }
.maaned-dag.er-idag .maaned-nr { color: var(--red-tekst); }
.maaned-dag.valgt {
  background: var(--sea);
  border-color: var(--sea);
  color: #fff;
}
.maaned-dag.valgt .maaned-nr { color: #fff; }
.maaned-dag.er-lukket { background: var(--sand2); }

/* ---- NABOMÅNEDENS DAGE (3/9) ----
   De er med, fordi en uge ikke slutter, fordi måneden gør — men
   de er naboens. Dæmpet nok til at øjet ser, hvor måneden holder
   op, og ikke så dæmpet at et selskab den 1. bliver usynligt. */
.maaned-dag.nabo-mdr { background: var(--sand); }
.maaned-dag.nabo-mdr .maaned-nr { color: var(--muted); }
.maaned-dag.nabo-mdr.valgt .maaned-nr { color: #fff; }

/* ---- HVAD SKER DER: NAVNE, IKKE TAL (3/9) ----
   Kundens forlæg. Et tal svarer på "hvor travlt"; en kalender
   bliver spurgt om "hvad er der den dag", og det svar kan kun
   gives med et navn. */
.maaned-piller { display: flex; flex-direction: column; gap: 3px; }
.maaned-pille,
.maaned-ret {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 2px 5px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}
.mp-tegn { flex: 0 0 auto; font-size: 11px; line-height: 1; }
/* Ét navn pr. linje, også når arrangementet hedder noget langt:
   feltet er 90 px, og en titel, der brækker over fire linjer,
   skubber tallene ud af nettet. */
.mp-navn {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maaned-pille.mp-fest   { background: rgba(47, 138, 91, .16);  color: #236643; }
.maaned-pille.mp-lokale { background: rgba(63, 127, 168, .16); color: #2b5d7d; }
.maaned-pille.mp-note   { background: rgba(36, 26, 23, .08);   color: var(--muted); }
/* Dagens ret er ikke noget, der SKER — det er dét, der bliver
   lavet. Derfor sin egen linje og ikke en pille i rækken. */
.maaned-ret { background: var(--sand2); color: var(--sea); }
.maaned-flere { font-size: 10px; font-weight: 600; color: var(--muted); }

/* ---- TALLENE NEDERST ----
   De er ikke væk; de er flyttet under navnene, hvor de svarer på
   "hvor meget" i stedet for "hvad". */
.maaned-tal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 7px;
  margin-top: auto;
  padding-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.mt-retter { font-weight: 700; color: var(--sea); }
.maaned-maerke {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.maaned-tegn { font-size: 11px; line-height: 1; }
/* ⚠️ FULDT ER GÆSTENS ORD. Er dagens loft nået, står der FULDT på
   bord/ — og indtil 3/9 sagde personalets kalender ingenting om
   det. Rød, fordi det er en dør, der er lukket. */
.maaned-maerke.er-fuldt { color: var(--red-tekst); font-weight: 700; }

/* Under 560 px bliver syv søjler til felter på 40 px, og så kan
   navnene ikke læses. Tegnet bliver — det siger stadig, at der ER
   noget den dag — og navnene står i dagens panel. Der er ikke en
   anden form: personalesiden er computer- og iPad-først, og på en
   telefon er kalenderen noget, man kigger i, ikke arbejder i. */
@media (max-width: 559px) {
  .maaned { gap: 3px; }
  .maaned-dag { min-height: 62px; padding: 5px 4px; gap: 2px; }
  .maaned-pille, .maaned-ret { padding: 1px 3px; }
  .mp-navn, .maaned-flere, .mt-retter { display: none; }
  .maaned-tal { font-size: 10px; gap: 1px 4px; }
}

/* ============================================================
   DAGEN SOM ET LAG
   ------------------------------------------------------------
   Kundens ord (28/8): når man klikker på en dag i kalenderen,
   skal der poppe et panel op.

   Dagen stod som et kort UNDER månedsnettet. To ting, som kun
   kan ses på en skærm:

   · På en bærbar lå indholdet under nettets fem rækker — man
     trykkede på den 29., og der skete tilsyneladende ingenting,
     fordi svaret stod 600 px længere nede.
   · Og nettet blev stående og fyldte, mens man arbejdede med
     dagen. To billeder af det samme, hvor kun det ene bruges.

   ⚠️ LAGET LUKKER IKKE VED ET KLIK VED SIDEN AF. Panelet har
   felter, personalet skriver i — noten og beskeden til gæsterne.
   Et fejlklik på en tom flade er ikke et ønske om at kassere en
   halv sætning. Escape og ✕ lukker.
   ============================================================ */
body.personale .dag-lag {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: start center;
  padding: clamp(12px, 3vh, 40px) clamp(10px, 3vw, 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(36, 26, 23, .42);
}
body.personale .dag-lag.skjult { display: none; }
body.personale .dag-lag-ind { width: min(920px, 100%); }
/* Siden bagved må ikke rulle med, når laget er åbent. */
body.lag-aabent { overflow: hidden; }

/* ⚠️ BUNDBAREN SKINNEDE IGENNEM LAGET — OG VAR DØD AT TRYKKE PÅ
   (7/9). Kundens ord: "når jeg trykker på kalenderen kan jeg ikke
   åbne dagen i den der menu hvor jeg kan oprette bookinger og
   tingene ... hele admin er elendig og fungerer ikke."

   MÅLT på en iPhone 13 med ejerens egne data: `.dag-lag` er
   z-index 200 og `.bundbar` 40, så laget dækker baren — men baren
   har `backdrop-filter`, og den blev derfor tegnet som en lys
   stribe UNDER lagets slør. Den så levende ud og var død: et
   `elementFromPoint` midt på "Mere" svarede `P.hjaelp` inde i
   dagspanelet, altså rammer fingeren lagets egen tekst. Alle fem
   faner. Personalet står med en fane-bjælke, der ikke reagerer,
   og det ligner et system, der er gået i stå — ikke en dialog,
   man skal lukke først.

   Baren SKJULES, mens laget er åbent, som en app gør det. Det
   giver samtidig de 70 px til panelet, og vejene ud er urørte:
   ✕, Escape og et klik uden for kortet.

   ⚠️ OG SELEKTOREN SKAL VEJE 0,3,0. Første udgave var
   `body.lag-aabent .bundbar` — samme vægt (0,2,0) som barens egne
   to regler, og glasreglen længere nede i arket vandt derfor på
   rækkefølgen alene. MÅLT: `display` kom stadig ud som `grid`
   efter rettelsen. Husets egen lov: mål den BEREGNEDE stil, ikke
   den regel, du lige har skrevet. */
body.personale.lag-aabent .bundbar { display: none; }

/* ⚠️ OG ✕ RULLEDE VÆK MED SIG SELV. Panelet er 1797 px højt med
   ejerens data, og skærmen er 844. MÅLT efter 900 px rulning: ✕
   stod på y = −848, altså uden for skærmen — og med bundbaren
   skjult er der da INGEN synlig vej ud af laget. Escape findes
   ikke på en telefon.

   Hovedet klæber derfor øverst i laget. Det trækkes ud i kortets
   egen polstring, så titlen ikke sejler ind over indholdet, når
   den klæber. */
body.personale .dag-lag .dag-hoved {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: -16px calc(-1 * clamp(12px, 2vw, 20px)) 12px;
  padding: 12px clamp(12px, 2vw, 20px);
  background: var(--paper);
  border-bottom: 1px solid var(--streg);
  border-radius: var(--r-flade) var(--r-flade) 0 0;
}

/* ---- Dagens panel ---- */
.dag-kort {
  margin-top: 16px;
  padding: 16px clamp(12px, 2vw, 20px);
  border: 1px solid var(--streg);
  border-radius: var(--r-flade);
  background: var(--sand2);
}
body.personale .dag-lag .dag-kort {
  margin-top: 0;
  background: var(--paper);
  box-shadow: 0 24px 60px -20px rgba(36, 26, 23, .45);
}

/* ---- Hovedet: pile, titel, luk ---- */
body.personale .dag-hoved {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
body.personale .dag-hoved .dag-titel {
  flex: 1 1 auto;
  text-align: center;
  margin: 0;
}
body.personale .dag-luk { margin-left: 4px; }

/* ---- Ugestriben ----
   "Hvad med på lørdag?" er det næste spørgsmål, hver gang man har
   kigget på en dag. Uden striben skal man lukke panelet, finde
   dagen i nettet og åbne igen. */
body.personale .dag-uge {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--streg);
}
body.personale .dag-uge-dag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px 10px;
  border: 0;
  border-radius: var(--r-lille);
  background: transparent;
  color: var(--sea);
  cursor: pointer;
  font: inherit;
}
body.personale .dag-uge-dag:hover { background: var(--sand2); }
body.personale .dag-uge-navn {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
body.personale .dag-uge-nr {
  font-family: var(--display);
  font-size: 21px;
  line-height: 1;
}
body.personale .dag-uge-prik {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
}
body.personale .dag-uge-dag.valgt { background: var(--red); color: #fff; }
body.personale .dag-uge-dag.valgt .dag-uge-navn { color: rgba(255, 255, 255, .8); }
body.personale .dag-uge-dag.valgt .dag-uge-prik { background: #fff; }
body.personale .dag-uge-dag.er-lukket .dag-uge-nr { color: var(--red-tekst); }
body.personale .dag-uge-dag.valgt.er-lukket .dag-uge-nr { color: #fff; }

/* ---- Dagens tilstand: én linje, før alt andet ---- */
body.personale .dag-stand {
  margin: 0 0 14px;
  padding: 11px 14px;
  border-radius: var(--r-lille);
  font-weight: 600;
  font-size: 14px;
}
body.personale .dag-stand.er-aaben { background: #eaf4ee; color: #1c5c37; }
body.personale .dag-stand.er-halv  { background: var(--scoop); color: var(--red-dyb); }
body.personale .dag-stand.er-lukket { background: var(--scoop); color: var(--red-dyb); }

/* ---- Genvejene i dagens hoved ----
   Se noten i js/admin/kalender.js: de skriver ingenting selv, de
   tager dig derhen med datoen udfyldt. */
body.personale .dag-genveje {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* ---- DAGENS ENE HANDLING  (8/9) -----------------------------
   Kundens forlæg: én udfyldt knap, "+ Opret booking denne dag".
   MÅLT på et skud af hans skærm: fire ENS hvide chips, og den
   eneste røde knap i panelet handlede om NOTEN. Mekanikken
   virkede; døren lignede ikke en dør.

   Knappen er husets røde og ikke forlæggets orange — formen er
   forlæggets, farverne er havnens.

   ⚠️ OG DER ER INGEN FARVEREGEL HER, MED VILJE. Knappen er
   `.knap` uden `.lille`, altså husets egen røde, som hver anden
   primær handling i admin. Første udgave gav den sin egen røde
   på klassen (0,2,1) — og `body.personale .knap.lille` (0,3,1)
   vandt, så MÅLT stod knappen hvid. Klassen er en kending,
   prøven kan pege på, ikke en farve. */
body.personale .dag-hoved-handling { font-weight: 600; }

/* ⚠️ OG SÅ MÅ NOTEN IKKE VÆRE RØD OGSÅ. Rød betyder "det her er
   handlingen" i hele admin, og to røde er to handlinger — husets
   egen regel fra selskabssiden 4/9. Dagens ene handling er
   bookingen; noten er noget, man skriver undervejs, og den
   gemmer sig i forvejen selv (Admin.autogem).

   ⚠️ OG SELEKTOREN ER KNAPPENS EGET id. Første udgave gættede tre
   (.note-fold .knap, #dag-note-felt ~ .knap, .dag-note .knap) —
   den første klasse findes ikke i dagskortet, og den sidste ville
   have taget "Slet noten" med, som ER rød med vilje. Ét id, én
   knap, intet gæt. */
body.personale #gem-dag-note {
  background-color: var(--paper);
  /* ⚠️ OG GRADIENTEN SKAL SLUKKES MED. body.personale .knap
     lægger et background-image oven på farven; kun at rette
     background-color ville efterlade husets røde krumning på en
     lys flade. */
  background-image: none;
  color: var(--sea);
  font-weight: 600;
  box-shadow:
    inset 0 0 0 1px rgba(36, 26, 23, .16),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 1px rgba(36, 26, 23, .07);
}

/* ---- Dagens program: vagten i tidsrækkefølge ---- */
body.personale .dag-program { margin-bottom: 16px; }
body.personale .prog-linje {
  display: grid;
  grid-template-columns: 3.6rem 1fr auto;
  gap: 4px 12px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px dashed var(--streg);
}
body.personale .prog-linje:first-of-type { border-top: 0; }
body.personale .prog-tid {
  font-family: var(--display);
  font-size: 17px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
body.personale .prog-navn { font-weight: 600; font-size: 15px; }

/* ---- HELE LINJEN ER KNAPPEN  (7/9) --------------------------
   Kundens ord: "gør så man kan klikke ind på tingene som
   fortæller hvad det er eller skal den dag."

   MÅLT på hans skud: pilen stod på x = 1835 i en linje, hvis
   tekst begynder på 92. Man trykker på navnet, ikke på en pil
   halvanden meter væk. Linjen skal derfor SE ud, som om den kan
   trykkes — en usynlig knap er ingen knap. */
body.personale .prog-aaben {
  cursor: pointer;
  border-radius: var(--r-lille);
  /* Luften trækkes ud i kortets egen polstring, så markeringen
     dækker hele rækken og ikke bare teksten. */
  margin-inline: -10px;
  padding-inline: 10px;
  transition: background-color .12s ease;
}
body.personale .prog-aaben:hover,
body.personale .prog-aaben:focus-visible { background: var(--sand2); }
body.personale .prog-aaben:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}
/* Pilen er en markering nu, ikke en knap — se noten i
   js/admin/kalender.js. Den skal stadig ligne den vej videre. */
body.personale .prog-aaben .nyt-aabn { pointer-events: none; }
body.personale .prog-under { font-size: 13px; color: var(--muted); }
/* En sag — en bestilling, et bord — er noget, nogen venter på.
   Rammerne (åbner, lukker) er bare rammer. */
body.personale .prog-sag {
  padding: 9px 12px;
  border: 1px solid rgba(180, 31, 46, .25);
  border-radius: var(--r-lille);
  background: var(--sand);
}
body.personale .prog-sag + .prog-sag { margin-top: 6px; }

/* ---- Hvis du lukker dagen ---- */
body.personale .dag-foelger {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--r-lille);
  background: var(--scoop);
}
body.personale .dag-foelger .hjaelp { margin: 4px 0 0; color: var(--red-dyb); }

.dag-titel { font-size: 22px; margin-bottom: 6px; }
.dag-lukket {
  margin: 6px 0 0;
  font-weight: 600;
  color: var(--red-tekst);
}
.dag-linje {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 0;
  border-bottom: 1px solid var(--streg);
  font-size: 15px;
}
.dag-status {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.dag-kort .knap.lille { margin-top: 10px; }

.dag-note {
  padding: 14px;
  margin-bottom: 6px;
  border-radius: var(--r-lille);
  background: var(--paper);
  border: 1px solid var(--streg);
}
.dag-note textarea { margin: 8px 0 10px; }
.dag-note .knap { margin-right: 8px; }

/* ---- Ugens retter ----
   Én dag pr. blok, så øjet kan finde torsdag uden at læse
   datoerne. Dagen er overskriften; retterne er rækker som alle
   andre steder i admin. */
.uge-dag {
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--streg);
  border-radius: var(--r-lille);
  background: var(--paper);
}
.uge-hoved {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.uge-dag .admin-raekke { margin-top: 8px; }

/* Retten er udsolgt: rækken skal kunne ses som anderledes uden at
   blive læst. Ikke rød — udsolgt er ikke en fejl, det er en dag,
   der gik godt. */
.uge-ret input[type="number"] { max-width: 6rem; }


/* ---- Nyhedens vindue ----
   Datoerne står på rækken, så en nyhed, der er sat til at slutte i
   går, kan få en uge mere uden at blive skrevet igen. */
/* ============================================================
   NYHEDERNES SLAGS, MÅLER OG FORHÅNDSVISNING  (26/8)
   ------------------------------------------------------------
   Kundens ord: en nyhed skal være "så tæt på ... som hvis du
   gjorde det". Se den lange note i js/admin/nyheder.js.

   ⚠️ ALT SCOPET TIL body.personale. Klassenavnene er almindelige
   ord, og css/style.css bærer stadig ni gæstesider — en regel
   uden scope laver om på en side, ingen har bedt om.
   ============================================================ */
body.personale .slags-valg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.personale .slags-knap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--streg);
  background: var(--sand);
  color: var(--blaek);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
body.personale .slags-knap:hover { background: var(--sand2); }
body.personale .slags-knap.valgt {
  border-color: var(--red);
  background: #fdecec;
  color: var(--red-tekst);
  font-weight: 600;
}
body.personale .slags-tegn { font-size: 17px; line-height: 1; }

/* Måleren under overskriften. Den forbyder ingenting — den siger,
   hvornår teksten bliver klippet over på en telefon. */
body.personale .maal-advar { color: var(--red-tekst); font-weight: 600; }

/* ---- FORHÅNDSVISNINGEN ----
   Gæstens kort, tegnet med admins egne klasser. To stilark, der
   skal ligne hinanden, er to stilark, der langsomt holder op med
   det — men formen er den samme: billede eller slagsfelt øverst,
   dato, overskrift, tekst. */
body.personale .nyhed-forhaand {
  display: flex;
  justify-content: flex-start;
}
body.personale .fh-kort {
  width: min(340px, 100%);
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 32px rgba(36, 26, 23, .09);
}
/* ⚠️ FAST HØJDE, IKKE aspect-ratio. Højden er den samme som
   gæstens kort (.nw image-slot i havnegrillen.css), så
   forhåndsvisningen viser det rigtige forhold — men et fast tal
   kan ikke deltage i den løkke, et forhold kan: kortet bliver
   bredere → siden bliver bredere → telefonen zoomer ud → kortet
   bliver smallere. MÅLT: knappen under den holdt aldrig op med
   at flytte sig, og Playwright gav op med "element is not
   stable". */
body.personale .fh-foto {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
}

/* ⚠️ DET DESIGNEDE FELT ER FJERNET (16/9). Her stod slagsens tegn
   på en farvet flade — svaret på, at gæstekortet uden et foto var
   en tom beige firkant. Målt på et skud af fire nyheder var TRE af
   kortene 170 px pastel med ét emoji, og ejerens dom var
   "forældet og ikke pænt nok". Uden et foto har gæstekortet nu
   INTET billedfelt, og forhåndsvisningen viser det samme — en
   forhåndsvisning, der viser noget, gæsten aldrig får, lyver i
   ejerens eget værktøj. Arkivets små felter (.tidl-felt i
   havnegrillen.css) er urørte: dér er de 88 px og bærer en liste. */

body.personale .fh-krop { padding: 15px 16px 17px; }
body.personale .fh-naar {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-tekst);
  font-weight: 600;
}
/* ⚠️ FORHÅNDSVISNINGEN MÅ IKKE VOKSE, MENS DER SKRIVES.

   Uden klemmen bliver kortet højere for hver linje tekst — og
   knappen "Læg på siden" under den flytter sig ned under
   fingeren. MÅLT: et tryk på knappen lige efter en indtastning
   ramte forhåndsvisningen i stedet. Samme fejl som kvitteringen,
   der skubbede ⋯ på menukortet.

   Og klemmen er ikke bare en løsning på det: den er SANDHEDEN.
   Gæstens kort klipper også — to linjer overskrift, tre linjer
   tekst — så en forhåndsvisning uden klemme ville vise noget,
   gæsten aldrig ser. Det er dét, måleren under felterne siger
   med tal. */
body.personale .fh-titel {
  margin: 7px 0 0;
  font-size: 21px;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.15em);
}
body.personale .fh-tekst {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.5em);
}

/* Tegnet foran datoen i listen, så den kan skimmes: hvad slags
   nyheder står der egentlig på siden lige nu? */
body.personale .nyhed-tegn { margin-right: 6px; font-size: 13px; }

/* Fotoet i det små. Et filnavn siger ingenting, når der er tre
   nyheder om det samme. */
body.personale .nyhed-mini {
  width: 84px;
  height: 47px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 auto;
}

.nyhed-status { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.nyhed-vindue {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.smal-dato { width: auto; min-width: 9.5rem; }

/* ---- ETIKETTEN OVER DATOFELTET ----
   Se noten i js/admin/nyheder.js: de to felter stod som to ens,
   tomme kasser midt i rækken, og kun en tooltip sagde hvad de
   hed. En finger fremkalder ikke en tooltip. */
body.personale .dato-par { display: flex; flex-direction: column; gap: 3px; }
body.personale .dato-mrk {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Skjul og Slet hører sammen og skal blive ved med at stå
   sammen — se noten i js/admin/nyheder.js om Slet, der endte
   alene på sin egen linje. */
body.personale .nyhed-knapper {
  flex: 0 0 auto;
  align-items: flex-end;
  margin-top: 0;
}

/* ⚠️ DE TO DATOFELTER SPRÆNGTE SIDEN PÅ EN TELEFON.

   MÅLT: på en skærm på 390 px var hvert felt 489 px bredt, og
   hele admin-siden blev derfor lagt ud i 530 px. Alt under det
   stod så et andet sted, end det så ud til: et tryk på "Læg på
   siden" ramte forhåndsvisningen, og Playwright gav op med
   "element is outside of the viewport".

   min-width på 9.5rem er rigtigt på en computer og for meget på
   en telefon — et flex-element krymper ikke under sin min-width.
   Admin er computer- og iPad-først (se CLAUDE.md), men "ikke
   bygget til en telefon" er ikke det samme som "må gå i stykker
   på en". */
@media (max-width: 40rem) {
  .nyhed-vindue { flex: 1 1 100%; min-width: 0; }
  .smal-dato { flex: 1 1 7rem; min-width: 0; }
}

/* ---- Autogem-mærket ----
   Den lille kvittering ved siden af Gem-knappen. Den skal kunne
   ses UDEN at flytte noget: står den i sidens flow og dukker op,
   når den første pris er gemt, hopper alt under den. Derfor
   inline-block med en fast højde. */
.gemt-maerke {
  display: inline-block;
  min-height: 1.4em;
  margin-left: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #1c6b45;
  vertical-align: middle;
}
.gemt-maerke.gemt-fejl { color: var(--red-tekst); }

/* ---- Tag en booking i telefonen ----
   FOLDET SAMMEN SOM UDGANGSPUNKT. Fanen handler om de bookinger,
   der ER kommet ind; formularen bruges, når telefonen ringer, og
   et åbent felt med syv inputs oven over dagens liste ville skubbe
   arbejdet ned hver eneste gang, nogen åbnede fanen. */
.tag-booking {
  margin: 14px 0 4px;
  padding: 0 clamp(12px, 2vw, 18px);
  border: 1px solid var(--streg);
  border-radius: var(--r-lille);
  background: var(--sand2);
}
.tag-booking > summary {
  padding: 13px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.tag-booking > summary::-webkit-details-marker { display: none; }
.tag-booking > summary::before { content: "▸ "; color: var(--muted); }
.tag-booking[open] > summary::before { content: "▾ "; }
.tag-booking[open] { padding-bottom: 16px; }
.tag-booking .hjaelp { margin: 0 0 12px; }

/* ---- Køreplanen på Overblik ---- */
.plan-stribe {
  padding: 12px 16px;
  border-radius: var(--r-lille);
  background: #e6f2ea;
  color: #1c4d33;
  font-weight: 600;
  margin-bottom: 10px;
}
/* Lukket er ikke en advarsel, det er dagens vigtigste oplysning.
   Rød flade, ikke rød tekst på grøn. */
.plan-stribe.plan-lukket { background: var(--scoop); color: var(--red-dyb); }

/* ---- ALARMSTRIBEN ----
   Rød flade og ikke rød tekst: den står under den grønne "Åbent
   for bestillinger", og en rød sætning på creme ville læses som
   en fodnote til den. Den er ikke en fejl i systemet — det er
   arbejde, der er ved at blive for gammelt — så den bruger husets
   scoop-rosa som lukkedagen, ikke en advarselsgul, der ikke
   findes andre steder i huset. */
.plan-alarm {
  padding: 12px 16px;
  border-radius: var(--r-lille);
  background: var(--scoop);
  color: var(--red-dyb);
  font-weight: 600;
  margin-bottom: 10px;
}
/* Flere linjer skal kunne skelnes uden en punktopstilling: to
   sætninger i én blok læses som én lang sætning på en iPad. */
.plan-alarm .alarm-linje + .alarm-linje { margin-top: 6px; }

.plan-linje {
  padding: 10px 16px;
  border-radius: var(--r-lille);
  background: var(--sand2);
  margin-bottom: 10px;
  font-weight: 600;
}
/* ============================================================
   DAGENS AFTALER  (4. sep 2026)
   ------------------------------------------------------------
   Kundens ord: køreplanen skal samle alt den dag, "også hvis der
   er ude af huset".

   ⚠️ TEGNET ER ET ELEMENT, IKKE EN DEL AF TEKSTEN. Skrev vi
   "🥡 Catering" som én streng, ville navnet hedde det på en
   skærmlæser — og den 30/8-lære om, at en tekstknude brækker på
   en telefon, gælder her: tegnet skal kunne holde sin egen plads.

   ⚠️ OG DEN LODRETTE STRIBE ER HJÆLPEN, IKKE BESKEDEN. Ordene
   "ud af huset" står i linjen; farven er kun til at skimme efter.
   En farvet kant alene er ubrugelig for den, der ikke ser forskel
   på dem — samme regel som Overbliks 🥡/📅-mærkater fik 31/8. */
.plan-linje .plan-tegn {
  display: inline-block;
  width: 1.4em;
  flex: none;
}
.plan-linje b { font-weight: 700; }
/* Ud af huset: maden skal LAVES og KØRES. Den grønne er husets
   "det her er en anden slags", ikke en advarsel. */
.plan-ud {
  border-left: 4px solid var(--red);
  padding-left: 12px;
}
.plan-note {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: var(--r-lille);
  border: 1px solid var(--streg);
  background: var(--paper);
  margin-bottom: 18px;
}
.plan-note-navn { font-weight: 600; flex: 0 0 auto; }
.plan-note-tekst { flex: 1 1 12rem; color: var(--muted); }
/* Eksemplet står ved etiketten og ikke i feltet: en pladsholder
   forsvinder i det sekund, man begynder at skrive — og så er
   forslaget væk netop dér, hvor man skulle bruge det. */
.plan-note-hint { flex: 1 1 12rem; color: var(--muted); font-size: 14px; }
/* Feltet fylder hele bredden på sin egen linje. Stod det som et
   flex-barn ved siden af etiketten, blev det en stribe på et par
   centimeter på en iPad. */
#plan-note-felt { flex: 1 0 100%; }

/* ---- Køreplanens underoverskrifter ----
   h3 og ikke h2: kortet HAR en overskrift, og de her er dets
   afsnit. To h2 i det samme kort læses som to kort. */
.plan-under {
  margin: 22px 0 10px;
  font-size: 19px;
}
.plan-under:first-of-type { margin-top: 6px; }

/* Tomt er et SVAR, ikke en tom skærm. */
.plan-tom {
  margin: 0;
  padding: 22px 16px;
  border: 1px dashed var(--streg);
  border-radius: var(--r-lille);
  text-align: center;
  color: var(--muted);
}

/* ---- Dagens forløb: to grupper i én liste ----
   "Nu og de næste to timer" og "Senere i dag" stod som to kort
   før. Det var to overskrifter, to kanter og to gange luft for
   én liste — og på en iPad betød det, at man skulle rulle for at
   se, om der var noget senere. */
.forloeb-hoved {
  margin: 16px 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.forloeb-hoved:first-child { margin-top: 0; }

/* ---- PRODUKTION I ALT ----
   Piller og ikke en tabel: der er sjældent mere end en håndfuld
   retter, og en tabel med to rækker ser ud som en fejl. Tallet
   først og stort — det er dét, køkkenet læser. */
.prod-raekke {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.prod-pille {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--streg);
  background: var(--sand2);
}
.prod-antal {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  color: var(--red-tekst);
  font-variant-numeric: tabular-nums;
}
.prod-navn { font-weight: 600; }
/* Delingen ud af huset / spist her er selve adskillelsen, sagt i
   et tal. Dæmpet: den er et opslag, ikke en overskrift. */
.prod-delt {
  padding-left: 10px;
  border-left: 1px solid var(--streg);
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* ---- FRA BORDENE ----
   Ét tal og én knap. Køen selv står på Køkken-kø; her skal man
   kunne SE, at der er noget, uden at læse en liste. */
.bordkoe-linje {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.bordkoe-tal {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  color: var(--red-tekst);
  font-variant-numeric: tabular-nums;
}
.bordkoe-tekst { flex: 1 1 12rem; }

/* ⚠️ OG SÅ STÅR DE DER — HVILKET BORD OG HVAD  (15/9).
   Kundens ord: *"det skal være helt tydeligt i admin, at det er
   bordbestilling, hvad de skal have, og hvilket bord"*. Kortet sagde
   kun et tal og lå under hele køreplanen (MÅLT: 1.330 px nede på en
   skærm på 900). Nu står det lige under dagens tal, én række pr.
   bestilling. Rækkerne er at LÆSE — handlingen (✓ Færdig) er
   køkken-køens, så de to skærme ikke kan komme til at trykke hver sit. */
.bordkoe-liste { display: grid; gap: 8px; margin: 2px 0 14px; }
.bordkoe-raekke {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 4px 14px;
  padding: 10px 14px;
  border: 1px solid var(--streg);
  border-left: 5px solid var(--sea);
  border-radius: var(--r-lille);
  background: #fff;
}
.bordkoe-bord {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1;
  color: var(--sea);
  white-space: nowrap;
}
.bordkoe-mad { min-width: 0; }
.bordkoe-vare + .bordkoe-vare { margin-top: 2px; }
/* På en telefon fik maden en smal midterkolonne mellem bordet og
   minutterne og brækkede midt i varenavnene (målt 390 px). Bordet
   og minutterne deler første linje; maden får hele bredden under. */
@media (max-width: 559px) {
  .bordkoe-raekke {
    grid-template-columns: 1fr auto;
    grid-template-areas: "bord min" "mad mad" "allergi allergi";
  }
  .bordkoe-bord { grid-area: bord; }
  .bordkoe-min { grid-area: min; }
  .bordkoe-mad { grid-area: mad; }
  .bordkoe-allergi { grid-area: allergi; }
}
.bordkoe-min {
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bordkoe-min.sent { color: var(--red-tekst); }
.bordkoe-allergi { grid-column: 1 / -1; color: var(--red-tekst); font-weight: 600; }
.bordkoe-raekke.har-allergi { border-color: rgba(214, 42, 58, .45); border-left-color: var(--red); }

/* Bestillingskortets bjælke for et bord — se noten i
   js/admin/bestillinger.js. Den fylder kortets top ud til kanten
   (kortet har 14/16 px luft), og mærket står hvidt på blækket. */
.bestil-bord {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: -14px -16px 12px;
  padding: 10px 16px;
  background: var(--sea);
  color: #fff;
  border-radius: 0 calc(var(--r-lille) - 1px) 0 0;
}
.bestil-bord .maerke.m-bord {
  background: #fff;
  color: var(--sea);
  font-size: 15px;
  padding: 5px 12px;
}
.bestil-bord-hvad { font-size: 14px; color: rgba(255, 255, 255, .88); }

/* Bestillingskortets bjælke for en LEVERING (21/9) — se noten i
   js/admin/bestillinger.js. Samme form som bordets, men i husets
   røde: leveringen SKAL råbe (6/9), og de to slags må ikke ligne
   hinanden. Adressen er det største, fordi det er den, der skal
   læses; kortknappen står for sig, så et øje, der bare læser,
   ikke kommer til at åbne en app.
   ⚠️ flex-wrap og margin-left:auto — på en telefon falder
   kortknappen ned under adressen i stedet for at klemme den. */
.bestil-levering {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: -14px -16px 12px;
  padding: 10px 16px;
  background: var(--red);
  color: #fff;
  border-radius: 0 calc(var(--r-lille) - 1px) 0 0;
}
.bestil-levering .maerke.m-lev {
  background: #fff;
  color: var(--red);
  font-size: 15px;
  padding: 5px 12px;
}
.bestil-levering-hvor { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bestil-levering-adr {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  /* Adressen må gerne bryde — en lang vej på en telefon skal
     kunne læses helt, ikke klippes af med tre prikker. */
  overflow-wrap: anywhere;
}
/* ⚠️ 95 % OG IKKE 85 %. Målt på husets røde (#d62a3a): hvid på
   85 % giver 3,92:1, og 12 px skrift skal have 4,5:1. 95 % måler
   4,57:1. Den slags ses ikke med øjet — den skal regnes. */
.bestil-levering-ok { font-size: 12px; color: rgba(255, 255, 255, .95); }
.bestil-levering-kort {
  margin-left: auto;
  flex: none;
  /* ⚠️ ET MØRKT SLØR, IKKE ET LYST. Første udgave lagde hvid 16 %
     oven på den røde, så knappen blev LYSERE — og hvid tekst på
     den måler 4,00:1. 14 px fed er ikke "stor skrift" i reglerne,
     så den skal have 4,5:1. Et sort slør på 18 % gør knappen
     mørkere i stedet og måler 6,79:1. Kanten er stadig lys, så
     knappen kan ses som en knap. */
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.bestil-levering-kort:hover,
.bestil-levering-kort:focus-visible { background: rgba(0, 0, 0, .3); }
/* ⚠️ PÅ EN TELEFON FYLDER KNAPPEN LINJEN. Målt på iPhone 13:
   bjælken brækker om, og `margin-left: auto` klemte knappen ud i
   højre hjørne med et tomt felt ved siden af. Den trykkes af en,
   der står med en pose mad i den anden hånd — så skal den være
   hele linjen bred, ikke 130 px i et hjørne. */
@media (max-width: 700px) {
  .bestil-levering-kort {
    margin-left: 0;
    flex: 1 1 100%;
    text-align: center;
    padding: 10px 14px;
  }
}

/* ---- FÆRDIGE ----
   <details> og ikke en knap med JavaScript: browseren kan det
   selv, og den kan det med tastatur. */
.faerdige {
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px dashed var(--streg);
  border-radius: var(--r-lille);
  background: var(--paper);
}
.faerdige > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--muted);
}
.faerdig-raekke {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--streg);
  margin-top: 12px;
}
.faerdig-raekke .vagt-midt { flex: 1 1 14rem; min-width: 0; }

/* ---- Knapper ---- */
/* SAMME GLAS SOM .glass.solid OG .bestil-fast. Kunden bad om
   "alle knapper bedre liquid glass" — og en rød knap, der er flad
   ét sted og flydende et andet, ligner to systemer. Reglerne for
   gradienten står ved .glass.solid: background-color under
   background-image (kontrastprøven læser kun den), og toppen må
   aldrig være lysere end --red. */
.knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background-color: var(--red);
  background-image: linear-gradient(180deg, rgba(214, 42, 58, .94), rgba(193, 31, 47, .96));
  color: #fff;
  font: inherit;
  font-size: 15px;
  /* Samme vægt og samme lyskant som .glass — se noten dér. De to
     familier stod side om side på forsiden ("Se hele menukortet"
     er .knap, "Find os" er .glass), og den ene var tung og den
     anden let. To knapfamilier på samme side ligner to systemer. */
  font-weight: 600;
  letter-spacing: .012em;
  cursor: pointer;
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .5),
    inset 0 -2px 2px rgba(120, 25, 10, .3),
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    0 10px 24px -12px rgba(214, 42, 58, .7);
  transition:
    transform var(--t-blid) var(--lempning),
    box-shadow var(--t-blid) ease,
    background-color var(--t-blid) ease;
}
.knap:hover {
  background-color: #bd3b26;
  background-image: none;
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .5),
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    0 16px 34px -14px rgba(214, 42, 58, .8);
}
.knap:active { transform: translateY(0) scale(.975); transition-duration: var(--t-hurtig); }
.knap[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.knap-raekke { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ------------------------------------------------------------
   LIVE-MÆRKET — det, der står, hvor "Hent på ny" stod
   ------------------------------------------------------------
   Seks knapper, der hentede en liste, som allerede hentede sig
   selv. Kunden bad om at få dem væk: "alt skal være instant og
   live opdatere". Det er de tre kanaler i js/admin/frisk.js og
   den direkte forbindelse i js/admin/live.js, der gør arbejdet.

   Men en liste, der opdaterer sig selv, ser præcis ud som en
   liste, der er gået i stå. Prikken ånder, så man kan SE, at der
   er hul igennem, og klokkeslættet bagefter er beviset. Uden dem
   ville personalet lede efter knappen, vi lige har fjernet.
   ------------------------------------------------------------ */
.live-maerke {
  display: flex;
  align-items: center;
  /* Wrap, så den gule forklaringslinje (.live-alene::after) kan
     lægge sig på sin egen linje under prikken i stedet for at
     mase klokkeslættet ud over kanten. */
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.live-prik {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1f9d55;
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(31, 157, 85, .5);
  animation: live-aande 2.4s ease-out infinite;
}
.live-tid { margin-left: auto; font-variant-numeric: tabular-nums; }

@keyframes live-aande {
  0%   { box-shadow: 0 0 0 0 rgba(31, 157, 85, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(31, 157, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-prik { animation: none; }
}

/* ------------------------------------------------------------
   NÅR DEN DIREKTE FORBINDELSE IKKE BÆRER  (31/8)
   ------------------------------------------------------------
   Den grønne prik er en PÅSTAND om, at skærmen opdaterer sig
   selv i samme sekund. Er websocketen nede — eller blev
   tilmeldingen afvist, fordi supabase/realtime.sql ikke er kørt
   — er påstanden forkert, og personalet står og venter på noget,
   der først kommer med takten.

   Så siger mærket det: prikken bliver gul og holder op med at
   ånde, og linjen får sin egen sætning. Listen opdaterer sig
   stadig selv (hvert 8. sekund i stedet for i samme sekund), og
   dét er præcis den forskel, der skal kunne ses.
   ------------------------------------------------------------ */
body.personale .live-maerke.live-alene .live-prik {
  background: #b8860b;
  animation: none;
  box-shadow: none;
}
body.personale .live-maerke.live-alene::after {
  content: "Henter hvert 8. sekund — den direkte forbindelse er nede.";
  order: 3;
  flex: 1 1 100%;
  font-size: 12px;
  color: #8a6d1e;
}

/* Slet står ved siden af Gem. Var den lige så fremhævet, ville
   den invitere til fejlklik – især med en tommelfinger. Den skal
   kunne findes, ikke tiltrække. Der er også en bekræftelse. */
.knap.fare {
  background: transparent;
  color: var(--red-tekst);
  box-shadow: inset 0 0 0 1.5px var(--red-tekst);
}
.knap.fare:hover { background: var(--red); color: #fff; }

/* ---- Glowup: knapperne svarer med det samme ----
   KUN gæstesiden. Admin er et arbejdsredskab — dér skal en knap
   være til at trykke på hele dagen, ikke optræde. Derfor er alt
   herunder bundet til body:not(.personale).

   Glasset i knappen er en gradient, IKKE backdrop-filter: sløring
   uden et foto bagved har før kostet 25 billeder i sekundet (se
   README om isfilmen). Og background-color røres ikke — kontrasten
   på knapteksten måles mod den i tests/kontrast.spec.js. De stille
   knapper (fare, sekundær) er gennemsigtige og holdes udenfor: et
   hvidt skær oven på ingenting ligner en fedtet skærm. */
body:not(.personale) .knap {
  transition: transform var(--t-hurtig) var(--lempning),
              box-shadow var(--t-hurtig) var(--lempning),
              background-color var(--t-hurtig) var(--lempning);
}
body:not(.personale) .knap:not(.fare):not(.sekundaer) {
  background-image: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 55%);
}
body:not(.personale) .knap:not(.fare):not(.sekundaer):hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px rgba(214, 42, 58, .75);
}
/* Trykket trækker sig sammen HURTIGERE end det slipper: fingeren
   skal have svar i samme øjeblik, ikke efter overgangen. */
body:not(.personale) .knap:active {
  transform: scale(.97);
  transition-duration: .06s;
}
body:not(.personale) .knap[disabled] { transform: none; box-shadow: none; }

/* Et lille nik når et valg falder på plads. Farveskiftet alene kan
   overses i solskin på havnen — bevægelsen kan ikke. */
@keyframes valgt-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}
body:not(.personale) .fyld-valg.valgt,
body:not(.personale) .dag.valgt,
body:not(.personale) .type-knap.valgt {
  animation: valgt-pop .32s var(--lempning);
}

/* Kvitteringen lander blidt i stedet for at smælde på. Den viser
   sig i det ene øjeblik hvor gæsten er mest i tvivl om, hvad der
   lige er sket — et roligt indtog siger "det gik godt". */
@keyframes tak-ind {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
body:not(.personale) #bestil-tak:not(.skjult),
body:not(.personale) #foresp-tak:not(.skjult),
body:not(.personale) #bord-tak:not(.skjult) {
  animation: tak-ind .55s var(--lempning);
}

@media (prefers-reduced-motion: reduce) {
  body:not(.personale) .knap { transition: none; }
  body:not(.personale) .knap:not(.fare):not(.sekundaer):hover { transform: none; }
  body:not(.personale) .knap:active { transform: none; }
  body:not(.personale) .fyld-valg.valgt,
  body:not(.personale) .dag.valgt,
  body:not(.personale) .type-knap.valgt { animation: none; }
  body:not(.personale) #bestil-tak:not(.skjult),
  body:not(.personale) #foresp-tak:not(.skjult),
  body:not(.personale) #bord-tak:not(.skjult) { animation: none; }
}

/* ---- Felter ---- */
label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 6px;
}
.felt { margin-bottom: 18px; }
.felt .hjaelp { font-weight: 400; color: var(--muted); }
.felt-par {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

/* input[type="tel"] SKAL stå her. Uden den fik telefonfeltet på
   bestillingsformularen browserens eget udseende: smallere end alle
   de andre felter, med en anden ramme og 13px skrift – som iPhone
   så zoomede ind på. Det var tydeligt på et skærmbillede og
   usynligt i koden. */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"],
input[type="tel"], input[type="search"],
textarea {
  width: 100%;
  /* 16px præcis: er skriften mindre, zoomer iPhone ind af sig
     selv når feltet får fokus, og hele layoutet hopper. */
  font: 400 16px/1.45 var(--brod);
  padding: 11px 13px;
  border: 1px solid rgba(36, 26, 23, .22);
  border-radius: 8px;
  background: #fff;
  color: var(--sea);
}
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: var(--red);
}
input:disabled { background: rgba(36, 26, 23, .05); color: var(--muted); }
textarea { min-height: 7rem; resize: vertical; }

code {
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(36, 26, 23, .07);
  padding: 2px 6px;
  border-radius: 4px;
}

.afkryds {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0;
  cursor: pointer;
}
.afkryds input { width: 20px; height: 20px; accent-color: var(--sea); flex: 0 0 auto; }

/* ---- Rækker i listerne ---- */
.admin-raekke {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 0;
}
.admin-raekke + .admin-raekke { border-top: 1px solid var(--streg); }
.admin-raekke .navn { flex: 1 1 12rem; }
.admin-raekke .smal { width: 6.5rem; flex: 0 0 auto; }
/* Zonen på et bord. Bredere end .smal, fordi "Terrassen" og
   "Ved gavlen" skal kunne stå i feltet — et navn, der er klippet
   over, ligner et navn, der er skrevet forkert. Men ikke så bred
   som .navn: bordnummeret er stadig rækkens overskrift. */
.admin-raekke .zone { width: 10rem; flex: 0 0 auto; }

/* ============================================================
   PERSONALE-RÆKKEN  (2/9)
   ------------------------------------------------------------
   ⚠️ MÅLT PÅ ET SKUD, ikke læst: navnet og e-mailen er to
   søskende i en flex-række, og uden det her løb de sammen til
   "Lonelone@mosedehavnecafe.dk" — ét ord, der ligner en
   tastefejl i databasen. Mærkatet "Lukket ude" klistrede på den
   samme måde.

   Navnet er rækkens overskrift, e-mailen står under den som den
   dæmpede oplysning, den er: man leder efter Lone, ikke efter en
   adresse.
   ============================================================ */
body.personale .pers-navn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 14rem;
  min-width: 0;
}
body.personale .pers-navn strong { font-weight: 600; }
body.personale .pers-navn .hjaelp {
  margin: 0;
  font-size: 13px;
  /* En lang adresse må hellere brydes end skubbe knapperne ud. */
  overflow-wrap: anywhere;
}
/* Mærkatet står for sig selv under adressen — det er en
   tilstand, ikke en del af navnet. */
body.personale .pers-navn .maerke { align-self: flex-start; margin-top: 4px; }
@media (max-width: 40rem) {
  .admin-raekke .zone { flex: 1 1 8rem; width: auto; }
}

/* ---- Billeder på forsiden (29/8) ----
   ⚠️ ALT ER SCOPET TIL body.personale. css/style.css bærer stadig
   ni gæstesider, og en regel uden scope laver dem om — det er
   sket før med .bestil-kort. */
body.personale .foto-raekke .foto-mini {
  /* Højden kommer af feltets form (aspect-ratio sættes af
     js/admin/forside.js), så udsnittet er det, siden viser. */
  width: 72px;
  height: auto;
  max-height: 96px;
  flex: 0 0 auto;
  border-radius: 10px;
  object-fit: cover;
  background: var(--sand);
  display: grid;
  place-items: center;
  color: var(--daempet);
}
body.personale .foto-midt { flex: 1 1 12rem; display: grid; gap: 2px; }
/* Filfeltet SKJULES, og etiketten er knappen. En <input type=file>
   ser forskellig ud i hver browser, og på en iPad står den som en
   grå "Choose File", der ikke ligner resten af fanen. */
body.personale .foto-raekke .skjult-fil {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
body.personale .foto-raekke .knap { position: relative; }

/* ------------------------------------------------------------
   ET KLOKKESLÆT SKAL KUNNE STÅ I SIT FELT
   ------------------------------------------------------------
   Kunden sendte et skærmbillede med ting, der stod oven i
   hinanden, og sagde at der er mere af det i admin. Det her er
   ét af dem, og det var usynligt i koden:

   6,5 rem rakte til "21:00" plus browserens lille urikon. Men et
   <input type="time"> følger BROWSERENS sprog, ikke sidens: står
   maskinen på engelsk, skriver den "09:00 PM", og så blev
   klokkeslættet klippet midt over af urikonet — "09:0" med et ur
   ovenpå. Personalet kunne altså ikke læse den lukketid, de selv
   havde skrevet.

   9 rem rummer den lange form. Feltet må stadig ikke vokse
   videre (flex: 0 0 auto), for så skubber syv rækker Lukket-
   hakket ud af skærmen på en iPad.
   ------------------------------------------------------------ */
.admin-raekke input[type="time"].smal,
.felt input[type="time"] { width: 9rem; min-width: 9rem; }

/* På en telefon fylder hver vare tre linjer. Uden tydeligere
   afstand flyder varerne sammen, og man retter prisen på den
   forkerte. */
@media (max-width: 40rem) {
  .admin-raekke { padding: 18px 0; }
  .admin-raekke + .admin-raekke { border-top: 2px solid rgba(36, 26, 23, .3); }
  .admin-raekke .navn { flex-basis: 100%; }
}

.vare-tekst { color: var(--muted); font-size: 14px; }
.vare-navn { font-weight: 600; }

/* ------------------------------------------------------------
   MENUKORTET SKAL KUNNE ADMINISTRERES ORDENTLIGT
   ------------------------------------------------------------
   Kundens spørgsmål (23/8). Tre ting kunne ikke lade sig gøre:
   rette beskrivelsen, flytte en vare op eller ned, og oprette en
   kategori. Felterne herunder er dem.
   ------------------------------------------------------------ */

/* Kategoriens hoved: navnet som felt, afdelingen som vælger,
   pilene, Gem — og Slet kun på en tom kategori. Samme streg
   under som overskriften havde, så fanen ser ud som før. */
.kat-hoved {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--streg);
  margin-bottom: 6px;
}
.kat-hoved .navn {
  flex: 1 1 12rem;
  font-size: 19px;
  font-weight: 600;
}
.smal-vaelger { width: auto; flex: 0 0 auto; }

/* Kategoriens note på sin egen linje under navnet. Den er
   frivillig og fylder hele bredden — en note er en sætning, ikke
   et ord, og klemt ind mellem afdeling og Gem ville der være
   plads til fem tegn. Mindre og gråere end navnet: det er en
   oplysning om kategorien, ikke kategorien selv. */
.kat-hoved .kat-note {
  flex: 1 0 100%;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
}

/* Beskrivelsen som KOLONNE (26/8, kundens billeder).

   Den lå før på sin egen linje under varen, og noten dér sagde,
   at en fjerde kolonne ville presse navn og pris sammen til
   ingenting på en iPad. Det var sandt — dengang rækken også havde
   tre flueben, ↑↓, Gem og Slet. Udsolgt er en knap nu, Slet er et
   kryds, og favorit/vis er flyttet bagest.

   ⚠️ Den bliver en HEL linje igen under 60rem. En iPad på højkant
   er 768 px, og fire felter side om side dér er fire felter, man
   ikke kan skrive i. */
.vare-tekst-felt {
  flex: 2 1 9rem;
  font-size: 14px;
}
@media (max-width: 60rem) {
  .vare-tekst-felt { flex: 1 1 100%; }
}

/* ============================================================
   MENUKORTETS VARERÆKKE
   ------------------------------------------------------------
   navn · beskrivelse · pris · få tilbage · Udsolgt? · ✕
   ...og bagest det, der ikke er dagligt arbejde.
   ============================================================ */
body.personale .vare-raekke .navn { flex: 2 1 9rem; }

/* Det, der ændres et par gange om året — favorit, vis, rækkefølge
   og den gamle Gem-knap. Bagest, men PÅ SAMME LINJE.

   ⚠️ MÅLT: med flex 1 0 100% blev hver eneste række to linjer
   høj, og der er 242 rækker på kortet. Et menukort, man skal
   rulle dobbelt så langt igennem, er ikke det overblik, kunden
   bad om — og det står ikke sådan i hans billeder.

   Under 60rem bryder den om alligevel: en iPad på højkant er
   768 px, og ti kontroller på én linje dér er ti, man ikke kan
   ramme. */
body.personale .vare-bag {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 0 2px;
  margin-top: 8px;
  border-top: 1px dashed var(--streg);
}
/* ⚠️ .skjult findes i forvejen og sætter display:none. Den står
   her, fordi rækken er flex: uden !important ville .vare-bag's
   egen display vinde over den. */
body.personale .vare-bag.skjult { display: none; }

/* Rækken, der er åbnet, markerer sig — ellers ligner de fire
   ekstra kontroller noget, der hører til den NÆSTE vare. */
body.personale .vare-raekke.raekke-aaben {
  background: var(--sand);
  border-radius: var(--r-lille);
  padding-left: 10px;
  padding-right: 10px;
}
body.personale .mere-knap { font-size: 20px; }

/* ⚠️ KVITTERINGEN MÅ IKKE FLYTTE KNAPPERNE.

   Admin.autogem hænger et mærke i roden, og på et kort er det
   fint: det står nederst og skubber ingenting. På en VARERÆKKE er
   roden en flex-linje, og i det sekund der stod "✓ Gemt", voksede
   mærket fra 0 til ~50 px og skubbede ⋯ og ✕ til side.

   MÅLT: et tryk på ⋯ lige efter en indtastning ramte ingenting —
   knappen var flyttet, mens fingeren var på vej. I et køkken er
   det et fejltryk på ✕ i stedet for ⋯.

   Ude af flowet, øverst til højre i rækkens egen luft, og
   pointer-events: none, så den aldrig kan tage et tryk.

   ⚠️ OG DAGENS RETS RÆKKE HAR SAMME FORM (15/9). Med +5/+10 og
   "solgt" brækker den om på en computer, og "✓ Gemt", der dukkede
   op forrest, flyttede Gem ned, mens musen var på vej: klikket
   ramte ingenting. MÅLT af prøven "et gem uden at røre antallet",
   som faldt på computeren og ikke på telefonen. Én regel, to rækker. */
body.personale :is(.vare-raekke, .uge-ret) { position: relative; }
body.personale :is(.vare-raekke, .uge-ret) > .gemt-maerke {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  font-size: 12px;
  line-height: 14px;
  pointer-events: none;
}
/* ⚠️ SKJULT FOR ØJET, IKKE FOR SKÆRMLÆSEREN. display:none ville
   tage etiketten væk for begge — og så ville fluebenet hedde
   ingenting for den, der ikke kan se stjernen. */
body.personale .kun-skaerm {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Favorit og Vis som tegn. De ændres et par gange om året, hvor
   udsolgt ændres flere gange om dagen — se noten i
   js/admin/menukort.js om de 242 rækker, der blev to linjer høje. */
body.personale .hak-tegn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
body.personale .hak-tegn .hak-ikon {
  font-size: 15px;
  line-height: 1;
  opacity: .3;
  filter: grayscale(1);
}
body.personale .hak-tegn input:checked + .hak-ikon {
  opacity: 1;
  filter: none;
}


/* ⚠️ UDSOLGT ER RÆKKENS STØRSTE MÅL, og det er ikke pynt: det er
   den hyppigste handling på hele fanen. Et flueben på 12 px ved
   siden af to andre flueben er et lille mål med fedtede fingre i
   et køkken.

   Åben knap = "kan meldes udsolgt". Fyldt rød = "ER udsolgt".
   Teksten siger det samme, så farven ikke står alene. */
/* ⚠️ EN RØD KNAP PR. RÆKKE ER EN VÆG, IKKE EN ADVARSEL (30/8).

   Kundens ord om det åbnede kategorikort: "det er lort grimt."
   Han har ret, og huset havde allerede skrevet reglen ned 26/8:
   "Rækkens knapper er STILLE, panelets hovedhandling er rød.
   Menukortets 21+242 røde Gem-knapper var en væg — rød betyder
   noget igen." Udsolgt-knappen slap forbi den oprydning: 242
   røde ringe under hinanden, på varer der IKKE er udsolgt.

   Nu er den stille, til der er noget at sige. Er varen FAKTISK
   udsolgt, bliver den fyldt rød — og så betyder farven igen
   præcis dét, den skal: her er noget galt. */
body.personale .udsolgt-knap {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(36, 26, 23, .16);
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
body.personale .udsolgt-knap:hover {
  border-color: var(--red);
  color: var(--red-tekst);
}
body.personale .udsolgt-knap.er-udsolgt {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* Hele rækken dæmpes, når varen er væk fra kortet — så en udsolgt
   vare kan ses i en liste på tredive uden at man læser hver linje.
   Navnet streges over: det står stadig på kortet, det kan bare
   ikke købes. */
body.personale .vare-raekke.udsolgt-vare .navn {
  text-decoration: line-through;
  background: #fdecec;
  border-color: var(--red);
}

/* ✕ i stedet for "Slet". Dæmpet, indtil man rører den: den er
   ikke dagens arbejde, og en slettet vare kan ikke hentes
   tilbage. Stadig 44 px, for den skal kunne RAMMES — bare ikke
   ved et uheld. */
body.personale .kryds-knap {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
body.personale .kryds-knap:hover {
  background: #fdecec;
  border-color: var(--red);
  color: var(--red-tekst);
}

/* "+ Tilføj ret" og "+ Tilføj kategori". Stille, som resten af
   rækkens knapper — se noten om at rød skal betyde noget. */
body.personale .knap.tilfoej {
  background: var(--sand);
  background-image: none;
  color: var(--sea);
  border: 1px solid var(--streg);
  box-shadow: none;
}
body.personale .knap.tilfoej:hover { background: var(--sand2); color: var(--sea); }

/* Pilene op og ned. Små, tætte og DÆMPEDE: de er et værktøj, man
   bruger sjældent, og i rødt råbte de lige så højt som Gem, der
   bruges hver dag. Set på et skærmbillede af fanen — i koden var
   de bare "en knap mere". */
.flyt { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.knap.lille {
  min-height: 36px;
  padding: 6px 11px;
  font-size: 15px;
  line-height: 1;
  background: var(--sand);
  background-image: none;
  color: var(--sea);
  border: 1px solid var(--streg);
  box-shadow: none;
}
.knap.lille:hover { background: var(--sand2); color: var(--sea); }
.knap.lille:disabled {
  opacity: .4;
  cursor: default;
  background: transparent;
}

.ny-kategori { border-top: 2px solid var(--streg); padding-top: 18px; }

/* ---- AFSNITTENE PÅ MENUKORT-FANEN  (7/9) ----------------------
   Kundens ord: "kan vi opdele menukort i admin så man kan se
   hvorhenne ... det er alt for kompliceret." 22 kategorier i én
   lang liste. Overskriften siger, HVOR gæsten møder dem, og
   noten siger det med ord — en etiket alene er et ord, man skal
   lære, og personalet skifter hver anden uge.

   Den klæber under topbjælken, så man kan se, hvilket afsnit man
   ruller i, med 308 varer under sig. */
body.personale .menu-afsnit {
  position: sticky;
  /* Under bjælken, ikke bag den. Bjælken er sticky med z-index 20
     og 60 px høj på en telefon; fra 900 px er den skjult, og så er
     tallet nul (se blokken nedenfor). */
  top: var(--adm-top, 60px);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 34px 0 14px;
  padding: 10px 14px;
  background: var(--sand2);
  border: 1px solid var(--streg);
  border-radius: var(--r-lille);
}
body.personale .menu-afsnit:first-child { margin-top: 8px; }
body.personale .menu-afsnit-navn {
  font: 600 15px/1.2 "Host Grotesk", system-ui, sans-serif;
  letter-spacing: -.01em;
  /* ⚠️ --sea ER ADMINS BLÆK. Der findes ingen --blaek — se noten
     ved .note-fold. En variabel, der ikke findes, arver bare og
     ser "næsten rigtig" ud. */
  color: var(--sea);
}
body.personale .menu-afsnit-note {
  font: 400 13px/1.3 "Host Grotesk", system-ui, sans-serif;
  color: var(--muted);
}
/* Fra 900 px er .top skjult, mens man arbejder (se
   body.personale.arbejder .top), så der er ingenting at klæbe
   under. */
@media (min-width: 900px) {
  body.personale.arbejder { --adm-top: 0px; }
}

.menu-gruppe { margin-bottom: 30px; }
.menu-gruppe:last-child { margin-bottom: 0; }
.menu-gruppe > h3 {
  font-size: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--streg);
  margin-bottom: 6px;
}
.maerke {
  font-family: var(--brod);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
}
.maerke.favorit { background: var(--sea); color: #fff; }

/* ============================================================
   HVILKEN DAG? — MAERKET, DER ALTID STAAR  (8/9)
   ------------------------------------------------------------
   Kundens ord, efter at han selv havde bestilt lidt af hvert:
   *"det ligner hinanden alt for meget, det er alt for uklart
   hvad er hvad og hvilken dag og bestilling ... det skal vaere
   klokkeklart for medarbejderne."*

   Teksten kommer fra Admin.dagMaerke (js/admin/kerne.js), og de
   fire personalefaner saetter det samme maerke — saa de ikke kan
   komme til at sige hver sit om den samme dag.

   ⚠️ FARVEN ER OPLYSNINGEN, IKKE TEKSTENS TILSTEDEVAERELSE.
   Teksten staar ALTID; et maerke, der kun stod paa en anden dag,
   ville gore FRAVAERET til oplysningen — og netop det var
   fejlen: medarbejderen skulle slutte "ingen dato = i dag".

     .dag-idag    i dag — den stille, for det er det normale
     .dag-frem    en kommende dag — ROED, fordi "det er IKKE i
                  dag" er den overraskende og vigtige oplysning
     .dag-bagud   en dag, der er gaaet, og som ingen fik lukket

   ⚠️ TABULAR-NUMS, som resten af admins tal (5/9): datoerne
   staar i en kolonne ned ad listen, og proportionale cifre
   sitrer, hver gang takten tegner om. */
body.personale .maerke.m-dag {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
body.personale .maerke.m-dag.dag-idag {
  background: rgba(36, 26, 23, .07);
  color: var(--sea);
}
/* #b23522 paa 12 % roed over det hvide kort giver 5,2:1 — den
   samme maalte farve som "NY" bruger, og kravet for 10 px tekst
   er 4,5. */
body.personale .maerke.m-dag.dag-frem {
  background: rgba(214, 42, 58, .13);
  color: #b23522;
}
/* En dag, der er gaaet: gul som kalenderens advarsler, ikke roed.
   Roed betyder "goer noget NU"; en booking fra i forgaars er en,
   ingen fik lukket. #6b4a12 paa den lyse gule giver 6,4:1. */
body.personale .maerke.m-dag.dag-bagud {
  background: rgba(214, 158, 42, .20);
  color: #6b4a12;
}
.maerke.udsolgt { background: var(--scoop); color: #4a1f18; }
.nyhed-dato { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ---- Kvittering ---- */
.medgang {
  background: #1f6b45;
  color: #fff;
  border-radius: 8px;
  padding: 13px 18px;
  margin: 16px 0;
  font-size: 15px;
}
/* Admin-versionerne står i sidens flow, ikke med sidegutter */
#admin .besked, #admin .advarsel, #login .besked, #login .advarsel {
  margin: 16px 0;
}

footer .footer-bund, .footer-enkel {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, .62);
}

/* ------------------------------------------------------------
   FILMEN
   ------------------------------------------------------------
   Montagen fra havnen, i sit eget afsnit uden tekst hen over.
   Hero-videoen er facade-panoreringen alene, fordi hvid skrift
   ikke kan læses på en lys vaniljekugle – det er målt.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   ISFILMENS RAMME
   ------------------------------------------------------------
   Formen SKAL passe med den film js/side.js vælger, og grænsen er
   den samme dér: 700 px. Passer de to ikke, ender en høj film i en
   bred ramme, og object-fit: cover klipper så titlen af nede i
   bunden – uden at nogen kan se hvad der mangler.
   ------------------------------------------------------------ */
.film-ramme {
  position: relative;
  border-radius: var(--r-flade);
  overflow: hidden;
  /* Var marineblå indtil posteren kom — en mørk kasse i et lyst
     afsnit. Gennemsigtig: er der ingen billeder endnu, skal der
     stå sand, ikke en ramme der venter på indhold. */
  background: transparent;
  aspect-ratio: 16 / 9;
  box-shadow: 0 30px 60px -34px rgba(36, 26, 23, .45);
}
@media (max-width: 700px) {
  .film-ramme { aspect-ratio: 4 / 5; }
}
.film-ramme video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ------------------------------------------------------------
   MULIGHEDERNE – skallen til hele produktet
   ------------------------------------------------------------
   Seks kort, ét pr. ærinde. To spalter allerede på en telefon:
   seks kort i én søjle er en væg at rulle forbi, og overskriften
   i Bebas kan bære en smal spalte. Kortene er links til sider —
   løftet ved hover er gæstesidens sprog og holdes derfor uden om
   admin (body:not(.personale)), selv om kortene i dag kun findes
   på forsiden. ------------------------------------------------- */
/* ============================================================
   I DAG VED LUGEN — SLETTET 23/8
   ============================================================
   Her lå .dagens: et mørkeblåt kort under heroen med dagens ret
   og et link videre til bestillingssiden. Kunden bad om at kunne
   bestille DÉR, hvor retten står, og formularen ligger på
   forsiden nu. Retten er blevet den øverste række i den, med rød
   ramme — se visStykker() i js/bestilling.js.

   Reglerne er væk og ikke bare uden brug: 80 linjer CSS til et
   kort, ingen side tegner længere, er 80 linjer, den næste
   læser og tror er i drift.
   ============================================================ */

.kugler-blok { margin-top: 22px; }

/* KUGLERNE STÅR PÅ SAND NU, ikke på det mørke isafsnit. Pillen er
   bygget til en mørk bund — hvid tekst på et lyst slør — og på
   sandet gav den 1,12:1. Fanget af kontrasttesten, ikke af øjet.

   Her er den vendt om: hvid flade, havnens mørkeblå tekst. Sløret
   er væk med, for der er ikke noget at sløre på en flad
   baggrund. */
#kugler-blok .chip {
  color: var(--sea);
  background: #fff;
  border: 1px solid rgba(36, 26, 23, .12);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(36, 26, 23, .05);
}

/* SLAGS-KORTENE OG SMØRREBRØDSTALLET ER SLETTET 23/8.

   Her lå .slags-kort: et net af mørkeblå kort på forsiden, ét
   pr. slags mad, der alle LINKEDE videre til bestillingssiden.
   Kortene er væk, fordi vejen er væk — man bestiller på forsiden
   nu, og slagsene er folde i selve listen.

   .smoer-tal-linje gik samme vej: tallet står i smørrebrødets
   eget afsnit, hvor det tælles af js/side.js. */

.mulighed-net {
  display: grid;
  gap: clamp(10px, 1.6vw, 16px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
}
.mulighed {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(16px, 2.4vw, 26px);
  border-radius: var(--r-flade);
  background: #fff;
  border: 1px solid rgba(36, 26, 23, .08);
  box-shadow: 0 1px 2px rgba(36, 26, 23, .05), 0 16px 36px -30px rgba(36, 26, 23, .35);
  color: var(--sea);
}
/* Tegnfliserne er forsidens rækkekort-flise (.row-card .ic i
   havnegrillen.css): 44 px, runding 15, rød streg på 10 % rød.
   Samme mål med vilje — det er det SAMME ærinde, gæsten skal
   genkende fra forsiden. */
.mulighed-ikon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(214, 42, 58, .10);
  color: var(--red);
}
.mulighed-ikon svg { width: 22px; height: 22px; }
.mulighed:hover { color: var(--sea); }

/* DET FØRSTE KORT ER DET ENESTE, DER FØRER TIL EN HANDLING.
   Resten fører til sider, hvor man spørger om noget. Forskellen
   får en kant i havnens rødt og et fyldigt pilehoved — ikke en
   hel rød flade: syv kort, hvor det ene råber, ser ud som en
   reklame, og det er ikke det, nettet er. */
.mulighed.foerst {
  border-color: rgba(214, 42, 58, .38);
  box-shadow:
    inset 3px 0 0 var(--red),
    0 1px 2px rgba(36, 26, 23, .05),
    0 16px 36px -28px rgba(214, 42, 58, .5);
}
.mulighed.foerst .mulighed-pil { font-weight: 700; }
.mulighed h3 { font-size: clamp(24px, 2.6vw, 32px); }
.mulighed p { margin: 0; font-size: 13px; color: var(--muted); }
.mulighed-pil {
  color: var(--red-tekst);
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
}
body:not(.personale) .mulighed {
  transition: transform var(--t-hurtig) var(--lempning),
              box-shadow var(--t-hurtig) var(--lempning);
}
body:not(.personale) .mulighed:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 3px rgba(36, 26, 23, .05), 0 22px 44px -28px rgba(36, 26, 23, .4);
}
body:not(.personale) .mulighed:active { transform: scale(.98); }
body:not(.personale) .mulighed-pil { transition: transform var(--t-hurtig) var(--lempning); }
body:not(.personale) .mulighed:hover .mulighed-pil { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  body:not(.personale) .mulighed { transition: none; }
  body:not(.personale) .mulighed:hover { transform: none; }
  body:not(.personale) .mulighed:active { transform: none; }
  body:not(.personale) .mulighed-pil { transition: none; }
  body:not(.personale) .mulighed:hover .mulighed-pil { transform: none; }
}

/* Dagens billede på Borde-fanen: linjen bliver rød, når ja'erne
   når pladstallet. Det er en advarsel, ikke et forbud — men den
   skal ses, FØR der ringes og siges ja. */
.fejl-tekst { color: var(--red-tekst); font-weight: 600; }

/* Fluebenet ved hver kategori på Menukort-fanen: kan varerne
   bestilles ud af huset? Dæmpet og lige under overskriften, så
   det hører til kategorien og ikke til den første vare. */
.kan-bestilles {
  margin: -4px 0 12px;
  color: var(--muted);
}
.kan-bestilles input:disabled + span { opacity: .7; }

/* Værktøjet til de 29 fyldpriser på Menukort-fanen. Dæmpet flade:
   det er en genvej, man bruger én gang, ikke et felt man skal se
   på hver dag. */
.samle-pris {
  margin-top: 14px;
  padding: 14px clamp(12px, 2vw, 18px);
  border-radius: var(--r-lille);
  background: rgba(36, 26, 23, .05);
}
.samle-pris .hjaelp { margin: 4px 0 10px; }
/* Foldet, når der ikke er noget hul at fylde — se noten i
   js/admin/menukort.js. Summary'en ER eyebrow'en, så den ikke
   skifter udseende, når kassen skifter form. */
details.samle-pris > summary {
  cursor: pointer;
  list-style: none;
  margin-bottom: 0;
}
details.samle-pris > summary::-webkit-details-marker { display: none; }
details.samle-pris > summary::before { content: "▸ "; }
details.samle-pris[open] > summary::before { content: "▾ "; }
details.samle-pris:not([open]) { padding-bottom: 10px; }
.samle-pris .felt { margin-bottom: 0; }
.samle-pris .afkryds { margin: 0 0 10px; }

/* ------------------------------------------------------------
   PRISPANELET ØVERST PÅ MENUKORT-FANEN
   ------------------------------------------------------------
   Ejerens sortiment er 242 varer, og over halvdelen kom ind uden
   en pris — hans liste havde ikke ét tal i sig, og intet er
   gættet. Panelet er svaret på "hvor langt er vi?", og det står
   ØVERST, fordi alternativet er at rulle 21 kategorier igennem
   for at lede efter tomme felter.
   ------------------------------------------------------------ */
.pris-panel {
  padding: 16px clamp(12px, 2vw, 18px);
  border-radius: var(--r-lille);
  background: rgba(36, 26, 23, .05);
  border: 1px solid var(--streg);
  margin-bottom: 22px;
}
.pris-panel .hjaelp { margin: 4px 0 12px; }
.pris-panel .felt { margin-bottom: 0; }
.pris-panel .felt label { display: block; margin-bottom: 4px; }

.pris-knapper { display: flex; gap: 10px; flex-wrap: wrap; }

/* Det skrevne overlever en optegning, men ikke en lukket fane.
   Linjen skal derfor kunne ses fra den anden side af køkkenet. */
.pris-venter {
  margin: 0 0 12px;
  font-weight: 600;
  color: var(--red-tekst);
  font-size: 14px;
}

/* Et tomt prisfelt er ikke en fejl — det er arbejde, der ikke er
   gjort endnu. Derfor stiplet og dæmpet, ikke rød og fuldtonet:
   det skal kunne ses på en halv skærm med tredive rækker, uden at
   fanen ligner en formular med tredive fejl i. */
.vare-raekke .smal.mangler {
  border-style: dashed;
  border-color: rgba(36, 26, 23, .35);
  background: rgba(36, 26, 23, .04);
}

/* ---- Udvalget foldet gruppe for gruppe (model A) ----
   29 fyld plus stykkerne i én liste er en mur på en telefon. Hver
   gruppe er en fold med sit eget hoved; den første står åben, så
   gæsten ser noget med det samme. Genbruger .fold-hoved og
   .fold-krop fra folden i forvejen — samme håndbevægelse, ét sæt
   regler at holde ved lige. */
.vare-gruppe {
  border: 1px solid rgba(36, 26, 23, .1);
  border-radius: var(--r-lille);
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
}
.vare-gruppe .fold-hoved { width: 100%; }
.vare-gruppe .fold-krop { padding: 2px 0 8px; }
/* Tallet i hovedet er gæstens egen kurv, set udefra: står der
   "3 valgt" på en lukket gruppe, ved hun, at der ligger noget
   derinde uden at åbne den. */
.vare-gruppe .fold-note.valgt {
  background: var(--sea);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
}
/* MARGIN-INLINE SKAL NULSTILLES HER, OG DET ER IKKE PEDANTERI.

   .stk-linje har margin: 0 -14px, så en valgt linje kan få en
   flade, der rækker ud i afsnittets luft. Det er rigtigt, når
   linjen står frit — men inde i en .vare-gruppe har kortet sin
   egen ramme OG overflow: hidden.

   Målt på en iPhone 15: linjen stak 13 px ud til HVER side, og
   den røde ramme om den valgte vare blev derfor klippet væk på
   venstre og højre kant. Tilbage stod to vandrette røde streger
   fra kant til kant, som lignede en fejl i stedet for en
   markering — og prisen havde 2 px til kortkanten, så "95,-" så
   klippet ud. Kunden så det på sin egen telefon (23/8).

   Med margin 0 holder linjen sig inden for kortet: rammen bliver
   hel, og prisen får sine 12-16 px luft fra paddingen. */
.vare-gruppe .stk-linje {
  padding-inline: clamp(12px, 2vw, 16px);
  margin-inline: 0;
}

/* ==========================================================
   DAGENS RET STÅR FOR SIG SELV  (5/9)
   ----------------------------------------------------------
   Kundens ord: den *"skal være mere eksklusiv … og ikke ligge
   under retter men over alle de der mad ting"*.

   Den var den FØRSTE fold i listen — altså en kategori som alle
   andre, bare øverst. Nu er den sin egen blok over hele listen,
   og formen siger det: mærkefarvet kant, varm flade og
   overskriften i seriffen. Det er husets egne farver og
   variabler; der er ikke opfundet et nyt sprog for ét kort.

   ⚠️ SCOPET TIL GÆSTEN. css/style.css bærer også personalesiden,
   og en regel uden scope laver hele admin om — arret fra
   .bestil-kort, der farvede hvert bestillingskort mørkeblåt med
   usynlig tekst. */
body:not(.personale) .dagens-blok {
  /* ⚠️ PADDING SKAL SÆTTES, OG DET ER IKKE PEDANTERI. Blokken er
     et <section>, og arket har en generisk
     `section { padding-block: clamp(56px, 7vw, 104px) }`.
     MÅLT på en iPhone 13: blokken blev 293 px høj, hvor
     indholdet fylder 178 — 112 px tomt sand, som ingen havde
     bedt om. Det er nøjagtig den fejl, .kort-gruppe faldt i
     31/8, hvor ejerens 21 kategorier gav over 2.000 px tom
     flade ned gennem menuen ved bordet. */
  padding: 0;
  border: 2px solid var(--red);
  border-radius: var(--r-lille);
  /* Papir hele vejen (13/9) — se noten i havnegrillen.css. Tonen
     blev en brun tåge på bordsidens mørke glas. */
  background: #fff;
  margin: 0 0 16px;
  overflow: hidden;
}
body:not(.personale) .dagens-blok-hoved {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px clamp(12px, 2vw, 16px) 10px;
  border-bottom: 1px solid rgba(36, 26, 23, .08);
}
body:not(.personale) .dagens-blok-tegn {
  font-size: 20px;
  line-height: 1;
  flex: none;
}
body:not(.personale) .dagens-blok-titel {
  font: 600 20px/1.15 var(--display), system-ui, sans-serif;
  margin: 0;
  color: var(--sea);
}
/* Hvilken DAG retten gælder. Dæmpet, fordi den ikke er
   handlingen — men den SKAL stå: med ugeplanen kan gæsten kigge
   på torsdag, og uden datoen tror hun, det er i dag. */
body:not(.personale) .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;
}
/* Samme nulstilling som i .vare-gruppe, og af nøjagtig samme
   grund: .stk-linje har margin: 0 -14px, og her klipper kortet.
   Uden den bliver den valgte vares røde ramme skåret af i begge
   sider — den fejl, kunden så på sin egen telefon 23/8. */
body:not(.personale) .dagens-blok .stk-linje {
  padding-inline: clamp(12px, 2vw, 16px);
  margin-inline: 0;
}
body:not(.personale) .dagens-blok-krop { padding-bottom: 6px; }

/* "Kun 3 tilbage" — samme ord og samme vægt som på menukortet
   (.mk-faa i menukort.css), så gæsten møder den SAMME oplysning
   i den samme form, uanset hvilken af de fire skærme hun står
   på. Farven er --red-tekst og ikke --red: den lille skrift
   falder under 4,5:1 med mærkefarven selv. */
body:not(.personale) .stk-faa,
body:not(.personale) .vare-faa {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--red-tekst);
}

/* ---- Udsolgt vises, ikke skjules ----
   En vare, der forsvinder, ligner en vare, der ikke findes — og så
   tror gæsten, at kortet er blevet mindre. Gennemstreget med en
   chip siger sandheden: den findes, bare ikke i dag. Som hos spiis. */
.stk-linje.udsolgt { opacity: .62; }
.stk-linje.udsolgt .navn { text-decoration: line-through; }
.fyld-valg.udsolgt {
  opacity: .62;
  cursor: default;
  text-decoration: line-through;
}
.fyld-valg.udsolgt:hover { border-color: rgba(36, 26, 23, .18); }
.fyld-valg.udsolgt:active { transform: none; }
.udsolgt-chip {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(214, 42, 58, .12);
  color: var(--red-tekst);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* En vare uden pris: kan ses, kan ringes om — kan ikke lægges i
   kurven. Chippen er sidens ENESTE handling på rækken, og den er
   et telefonlink, så den skal ligne noget, man kan trykke på:
   kant og lidt mere kød end udsolgt-chippen, som bare er en
   konstatering. Havblå og ikke rød — der er ikke noget galt, der
   mangler bare et tal. */
.spoerg-chip {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(36, 26, 23, .25);
  background: #fff;
  color: var(--sea);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
/* Kun linket lyser op. Ved bordet er chippen et <span> — den kan
   ikke trykkes, og en hover-farve ville love et tryk, der ikke
   findes. */
a.spoerg-chip:hover { background: var(--sand); }
/* Navnet står IKKE gennemstreget som på udsolgt: varen findes og
   kan fås — det er prisen, der mangler. Kun lidt dæmpet, så de
   bestilbare står tydeligst. */
.stk-linje.spoerg-pris .navn { color: var(--sea2); }

/* ---- Fristerne under åbningstiderne ----
   Samme spalte-layout som .hours, men dæmpet: det er en hjælp,
   ikke en tabel til. */
.frister {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(36, 26, 23, .18);
  display: grid;
  gap: 5px;
  font-size: 14px;
  color: var(--muted);
}
.frister div { display: flex; justify-content: space-between; gap: 12px; }
.frister a { font-weight: 600; }

/* ---- Arrangement-listen på arrangementer/ ---- */
.arr-kort { margin-top: 12px; }
.arr-kort .arr-titel { font-size: clamp(30px, 4vw, 44px); margin-top: 4px; }
.arr-tom { margin-top: 12px; }
.arr-tom h2 { font-size: clamp(26px, 3.4vw, 36px); }
.arr-tom p { color: var(--muted); max-width: 46ch; }

/* ------------------------------------------------------------
   ISEN STÅR PÅ SANDET, IKKE I EN KASSE
   ------------------------------------------------------------
   Filmens første seks sekunder er hånden med isen på en lys
   sandbund — næsten sidens egen farve, men kun næsten: bunden af
   billedet er #e5d8c4 mod sidens #f7f0e4, og den forskel tegnede
   en tydelig firkant om isen. Kundens ord: indtil baggrunden
   fader ind, skal der ikke VÆRE en baggrund dér hvor isen er.

   Laget herunder lægger sidens sand ind over filmens kanter, mest
   i bunden hvor forskellen er målt størst, mindst i toppen hvor
   filmens egen tekst står. Klassen .smelter sættes af js/side.js
   mens filmen er i sandet; ved 5,6 sekunder — dér hvor havnen
   toner frem i filmen — tages den af, og rammen står frem sammen
   med sin solnedgang. Uden JavaScript, med knap eller i pause
   står rammen frem: en feathret plakat ser forkert ud. */
.film-ramme::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  background:
    linear-gradient(to top, var(--sand), rgba(247, 240, 228, 0) 30%),
    linear-gradient(to right, var(--sand), rgba(247, 240, 228, 0) 9%),
    linear-gradient(to left, var(--sand), rgba(247, 240, 228, 0) 9%),
    linear-gradient(var(--sand), rgba(247, 240, 228, 0) 7%);
}
.film-ramme.smelter::after { opacity: 1; }
.film-ramme.smelter { box-shadow: none; }
/* Knappen dukker kun op hvis videoen ikke selv fik lov at starte */
.film-knap {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.film-knap:hover { transform: translate(-50%, calc(-50% - 2px)); }


/* ============================================================
   UNDERSIDER – menukortet og smørrebrød ud af huset
   ------------------------------------------------------------
   De har ingen hero med foto, så topmenuen er glas fra første
   pixel (klassen .stuck står i HTML'en, og js/faelles.js lader
   den være i fred når body har .underside).
   ============================================================ */
/* Pladsen den faste topbjælke skal have på en underside. Tallet står
   ÉT sted, fordi to ting læser det: body'ens polstring, og
   smørrebrødssidens mørke hoved, som skal trækkes op UNDER bjælken.
   Stod det to steder, ville en rettelse af det ene efterlade en
   sandfarvet strimmel mellem bjælken og det mørke felt. */
:root { --topbjaelke: 92px; }
body.underside { padding-top: var(--topbjaelke); }

.side-top { padding-block: clamp(26px, 4vw, 54px) clamp(20px, 3vw, 34px); }
/* 104 px var hero-størrelse på en side der ikke er en hero. To
   linjer i den grad fyldte 180 px, og de 180 px var med til at
   skubbe både menukortet og bestillingslisten ned under skærmkanten.
   82 px er stadig en tydelig sidetitel. */
/* .18em foroven og ikke 8px: se noten ved .eyebrow om ringen over
   Å. 8 px rakte ved 40 px skrift og ikke ved 82, og det var
   præcis dét, kunden fangede på bestil/ — "SÅ TAGER VI" lå oven i
   "SKAL DET VÆRE STØRRE?". Reglen her vinder over den globale
   (samme vægt, men den står senere i arket), så den skal have
   samme em-mål. */
.side-top h1 { font-size: clamp(40px, 6.4vw, 82px); margin-block: .18em 14px; }
.side-under { max-width: 54ch; color: var(--muted); margin: 0; text-wrap: pretty; }

/* ============================================================
   SMØRREBRØDSSIDENS HOVED
   ------------------------------------------------------------
   Den eneste side på hjemmesiden med et mørkt hoved i fuld bredde,
   og det er med vilje: det er den ene side man kan handle på, og
   kommer man hertil fra forsiden, skal man kunne se at man er landet
   et andet sted.

   FARVERNE ER MÅLT. På den mørke blæk kan --muted ikke bruges til
   brødtekst — den er valgt til at kunne læses mod CREME. Hvid på
   82 % rammer 11,8:1 mod #241a17, og noten på 72 % rammer 9,2:1
   (regnet efter 29/8, da blækket afløste marineblå; kontrast-
   prøven, der målte de gamle tal, står parkeret i tests-gamle/).
   ============================================================ */
.smoer-hoved {
  background: var(--sea);
  color: #fff;

  /* OP UNDER TOPBJÆLKEN.

     Uden dette stod der en sandfarvet strimmel mellem bjælken og det
     mørke felt — 12 px på en telefon, 32 på en computer. Målt, ikke
     gættet: body.underside polstrer for bjælken, og polstringen er
     sand som resten af siden.

     Det negative margin trækker feltet op i den polstring, og den
     samme værdi lægges på som indvendig polstring, så indholdet står
     hvor det stod. Bjælken svæver nu på det mørke felt: dens flade er
     sand i 96 %, altså stort set uændret, og teksten i den er
     mørkeblå og kan stadig læses. */
  margin-top: calc(var(--topbjaelke) * -1);
  padding-top: var(--topbjaelke);
}

/* HOVEDET SKAL VÆRE STÆRKT OG KORT PÅ SAMME TID.

   Første udgave af det mørke hoved fyldte hele det første
   skærmbillede: målt stod det første stykke smørrebrød 772 px nede i
   et vindue på 720. Det er præcis den fejl siden lige er kommet UD af
   — man landede på en bestillingsside uden at se noget der kunne
   bestilles — og et flot hoved er ikke værd at bytte den for.

   Begge krav kan holdes. Hovedet blev ikke svagere, det blev tættere:
   .side-top polstrer ikke oveni bjælkens plads, tallene er 64 px i
   stedet for 82, og luften mellem hovedet og listen er skåret. Målt
   efter: 684 px. tests/bestilling.spec.js holder tallet under
   vindueshøjden. */
.mork-top { padding-top: clamp(14px, 1.6vw, 20px); }
.smoer-hoved + section { padding-top: clamp(24px, 2.6vw, 34px); }
.mork-top h1 { color: #fff; }
/* .side-under er --muted, og den farve er valgt til sand. */
.mork-top .side-under { color: rgba(255, 255, 255, .82); }
.mork-top .lys-note { color: rgba(255, 255, 255, .72); }

/* ---- De to tal ----
   5 slags stykker · 29 slags fyld. Begge TÆLLES af
   js/smoerrebroed.js ud fra menukortet, så de ikke kan blive
   forældede — og det er dem der fanger. "Stort udvalg" er en
   påstand; 29 er et tal. */
.smoer-tal {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  margin: clamp(18px, 2.2vw, 26px) 0 0;
}
.smoer-tal dt {
  font-family: var(--display);
  /* 64 og ikke 82. Se noten om hovedets højde nedenfor: hvert tal
     over 64 px koster plads i det første skærmbillede, og et tal i
     64 px Bebas er stadig det første man ser. */
  font-size: clamp(44px, 5vw, 64px);
  line-height: .9;
  color: var(--scoop);
  font-variant-numeric: tabular-nums;
}
.smoer-tal dd {
  margin: 6px 0 0;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
}

/* Tallene kommer ind ét ad gangen når siden er hentet. De sættes af
   JavaScript, så animationen skal starte når de FÅR en værdi og ikke
   ved sideindlæsning – derfor en animation og ikke en overgang. */
@keyframes tal-ind {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.smoer-tal:not([hidden]) > * {
  animation: tal-ind .6s var(--lempning) both;
}
.smoer-tal:not([hidden]) > *:nth-child(2) { animation-delay: .10s; }

@media (prefers-reduced-motion: reduce) {
  .smoer-tal:not([hidden]) > * { animation: none; }
}

/* SIDENS HOVED OG DENS INDHOLD ER ÉN TING, IKKE TO AFSNIT.

   section-rytmen er op til 132 px, og den er rigtig mellem afsnit
   der skal skilles fra hinanden — på forsiden. På en underside står
   sidens hoved lige over det ene stykke indhold siden handler om, og
   dér lavede den 132 px tomt sand: man landede på menukortet og
   kunne ikke se et menukort, man landede på bestillingssiden og
   kunne ikke se noget smørrebrød.

   Målt: den første vare på menukortet stod 882 px nede i et vindue
   på 720, og det første stykke smørrebrød 1017 px nede. */
.side-top + section { padding-top: 0; }

/* Smørrebrødssidens hoved ligger i et <header> omkring .side-top, så
   reglen ovenfor ikke rammer: .side-top er ikke søskende med #bestil.
   Afstanden under det mørke hoved står sammen med hovedets øvrige mål
   længere nede i arket. */

/* Afdelingsfanerne klæber til toppen når man ruller ned gennem et
   langt menukort, så man altid kan skifte afdeling. Uden det skal
   man rulle 3000 pixel op for at komme fra maden til isen. */
/* Massiv sand, ikke sløret sand. Den her klæbebjælke alene tog
   menusidens rulning ned til 25 billeder i sekundet – en fuld
   skærmbredde der skulle sløres om ved hvert billede. Sandet er
   ensfarvet, så sløret gjorde ingen forskel man kunne se. */
.afdelinger.klaeb {
  position: sticky;
  top: 74px;
  z-index: 10;
  margin-inline: calc(var(--pad) * -1);
  padding: 12px var(--pad);
  background: var(--sand);
  box-shadow: 0 1px 0 var(--streg);
}

/* Genvejene til kategorierne. RULLER SIDELÆNS på en telefon: syv
   kategorier kan ikke stå på 390 pixel, og en ombrudt klump på
   fire linjer skubber selve menukortet ned under skærmkanten.

   scrollbar-width: none skjuler stangen, men rulningen virker –
   og der er stadig et ankerlink til hver kategori, så tastatur og
   skærmlæser ikke er afhængige af at kunne swipe. */
.kat-stier {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 18px 0 6px;
  margin-bottom: clamp(18px, 2.4vw, 30px);
  scroll-snap-type: x proximity;
}
.kat-stier::-webkit-scrollbar { display: none; }
.kat-stier > a { flex: 0 0 auto; scroll-snap-align: start; }

/* ------------------------------------------------------------
   GLASFLADE – den flade alle kort er bygget af
   ------------------------------------------------------------
   Kortene var hvide kasser med 8px rundinger. På en varm
   sandbaggrund blev de hårde firkanter, og siden mistede den
   havnestemning resten af designet har.

   Fladen er nu let gennemsigtig med en indvendig lyskant foroven
   og en svag mørk kant forneden – som en vandflade set fra siden.
   Sandet skinner igennem, så kortet hører til baggrunden i stedet
   for at ligge oven på den.

   Der er IKKE backdrop-filter på hvert kort. Ti slørede flader på
   samme skærm koster mærkbart på en telefon, og der er ikke noget
   bevægeligt bagved at sløre. Gennemsigtigheden alene gør
   arbejdet. */
.flade,
.kort,
.kontakt-kort {
  border-radius: var(--r-flade);
  padding: clamp(20px, 2.2vw, 30px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(36, 26, 23, .06),
    var(--skygge-blid);
}
/* Gæstesiderne får glasset. Fladen er ikke helt uigennemsigtig, så
   havnens farve nedenunder trænger svagt igennem – det er det der
   binder kortene til baggrunden i stedet for at lægge dem oven på
   den som klistermærker. */
.flade,
.kontakt-kort {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .92) 0%,
    rgba(255, 255, 255, .74) 100%);
}
/* PERSONALESIDEN FÅR DEN IKKE.
   .kort bruges kun i admin.html, og admin er et værktøj: personalet
   står ved lugen med en telefon i sollys og skal kunne læse en
   forklaring med <code> i. Den gennemsigtige flade tog
   forklaringsteksten fra 4,6:1 ned til 4,11:1 og under kravet.
   Læsbarhed slår finish på den side. */
.kort { background: #fff; }
/* ---- Kortene i menuoversigten ----
   Afdelingens navn stort, to tal under det, og intet andet. Hele
   kortet er ét link — se noten i visMenuOversigt i js/side.js om
   hvorfor kategoripillerne inde i kortene er væk. */

/* Populær-mærket på menusiden. Samme form som "Udsolgt", anden
   farve – og der står et ord, så mærket ikke kun er en farve. */
.maerke.populaer {
  background: rgba(214, 42, 58, .12);
  color: var(--red-tekst);
}
/* Reglen .fav-stor .maerke.populaer stod her, fordi mærket lå på
   havnens mørkeblå på det store favoritkort — rød tekst på 12 % rød
   måler omkring 1,5:1. Favoritkortene er væk, og mærket bruges nu
   kun på menusidens lyse kort, hvor reglen ovenfor holder. */

/* ============================================================
   BESTIL SMØRREBRØD
   ------------------------------------------------------------
   Den eneste formular en gæst møder. Den skal kunne udfyldes med
   én tomme, stående op, i sol, og det er hvad tallene her handler
   om: 44 px på alt der trykkes, 16 px i alle felter (er skriften
   mindre, zoomer iPhone ind af sig selv når feltet får fokus og
   hele layoutet hopper), og en kvitteringslinje der klæber i
   bunden så man altid kan se hvad man har valgt.
   ============================================================ */

/* EN BESTILLING ER EN SMAL SPALTE, IKKE EN FULD SKÆRM.

   Formularen fyldte hele sidens bredde. På 1280 px betød det at
   "Flæskestegssandwich" stod i venstre kant, prisen 1030 px derude og
   tælleren yderst til højre — man skulle føre blikket en halv meter
   hen over tomt sand for at se hvad tingen kostede, og forbi fire
   tommer luft for at ramme plusset.

   En takeaway-kurv er en liste man løber ned igennem. 720 px er så
   bredt et navn med en beskrivelse må være, før det bliver besværligt
   at læse. Overskriften over listen følger med, så de flugter. */
#bestil-form,
.liste-titel,
.bestil-bund { max-width: 720px; }
/* ⚠️ OG PÅ EN COMPUTER STOD DEN I VENSTRE SIDE (14/9). Kundens ord:
   "noget står ude i siden". Målt på 1440: formularen fra x = 60 til 776
   og 600 px tomt sand til højre for den. Bredden er rigtig — det er
   pladsen, der var forkert. Kun fra 821 px; telefonen er urørt. */
@media (min-width: 821px) {
  #bestil-form, .liste-titel, .bestil-bund { margin-inline: auto; }
}

.bestil-trin {
  border-top: 1px solid var(--streg);
  padding-top: clamp(20px, 2.4vw, 30px);
  margin-top: clamp(20px, 2.4vw, 30px);
}
.bestil-trin:first-child { border-top: 0; margin-top: 0; }
.bestil-trin > h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(24px, 2.6vw, 34px);
  margin-bottom: 6px;
}

/* ------------------------------------------------------------
   FOLDEDE BLOKKE
   ------------------------------------------------------------
   To ting på formularen er frivillige: at vælge fyld selv, og at
   skrive allergier eller e-mail. Begge var fremme, og begge er
   lange – 29 piller i seks grupper, og to felter mere. En formular
   hvor alt det frivillige står fremme, ser dobbelt så krævende ud
   som den er.

   Der ligger et rigtigt <button aria-expanded> og et rigtigt
   hidden bag. Ikke max-height: et felt der er skjult med højde 0
   kan stadig få fokus med tabulator, og så sidder markøren et sted
   man ikke kan se.
   ------------------------------------------------------------ */
.fold {
  border: 1px solid var(--streg);
  border-radius: var(--r-flade);
  overflow: hidden;
  margin-top: clamp(16px, 2vw, 24px);
  background: rgba(255, 255, 255, .5);
}
.fold-hoved {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  /* 60 px: en fold man skal kunne ramme uden at kigge */
  min-height: 60px;
  padding: 12px clamp(14px, 1.8vw, 20px);
  border: 0;
  background: none;
  font: 600 15px/1.3 var(--brod);
  color: var(--sea);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-hurtig) var(--lempning);
}
.fold-hoved:hover { background: rgba(36, 26, 23, .04); }
.fold-navn { flex: 1 1 auto; }
.fold-note {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}
/* Har man valgt noget, skal det kunne ses på den LUKKEDE fold */
.fold-note.valgt {
  font-weight: 600;
  color: #fff;
  background: var(--sea);
  padding: 4px 11px;
  border-radius: 999px;
}
.fold-pil {
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-right: 2px solid var(--sea);
  border-bottom: 2px solid var(--sea);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-blid) var(--lempning);
}
.fold-hoved[aria-expanded="true"] .fold-pil {
  transform: rotate(-135deg) translateY(-2px);
}
.fold-krop { padding: 4px clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 22px); }
.fold-krop[hidden] { display: none; }

/* Hentetid og kontaktoplysninger folder sig ud når der kommer noget
   i kurven. Se noten i js/bestilling.js: de findes slet ikke på
   skærmen før da. */
@keyframes folder-ud {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.folder-ud { animation: folder-ud var(--t-blid) var(--lempning); }

@media (prefers-reduced-motion: reduce) {
  .fold-hoved, .fold-pil { transition: none; }
  .folder-ud { animation: none; }
}
/* "3 valgt" ved siden af et trinnavn. Trin 2 er frivilligt, og uden
   tallet skulle man rulle op gennem seks grupper for at se om man
   havde valgt noget. */
.trin-tal {
  font-family: var(--brod);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--sea);
  color: #fff;
}

/* DE TRE SKRIDT ER VÆK.

   De var tre kort med en overskrift hver og fyldte en hel skærm for
   at sige "vælg, ring, hent". Så blev de én linje med tre numre. Og
   så viste det sig at alle tre skridt allerede stod i sætningen
   under overskriften — "Bestil herunder, så ringer vi og bekræfter,
   og du betaler når du henter." En nummereret liste der gentager
   den sætning man lige har læst, er ikke en hjælp; den er 56 px
   mere man skal rulle forbi for at nå listen.

   Reglerne .skridt og .skridt li er fjernet med dem. */

/* Overskriften over listen. Ét niveau under sidens h1, og med vilje
   ikke et helt afsnitshoved med mærkat og brødtekst — den skal sige
   hvad man gør, og så give plads. */
.liste-titel {
  font-size: clamp(26px, 2.8vw, 38px);
  margin: 0 0 clamp(14px, 1.6vw, 20px);
}

/* ---- Fyldet i grupper ---- */
.fyld-gruppe + .fyld-gruppe { margin-top: 18px; }
.fyld-gruppe .eyebrow { margin-bottom: 9px; }
.bestil-trin > .desc { color: var(--muted); margin: 0 0 14px; font-size: 14px; }

/* Trinnummeret. Et tal i en cirkel, så man kan se hvor man er
   uden at læse overskriften. */
.trin-nr {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--sea);
  color: #fff;
  font: 400 20px/1 var(--display);
  padding-top: 2px;
}

/* ---- Stykkerne med tæller ---- */
.stk-linje {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px 16px;
  /* Vandret polstring, så en valgt linje kan få en flade der ikke
     klipper i teksten. Det negative margin holder navnene på samme
     lodrette linje som resten af afsnittet. */
  padding: 12px 14px;
  margin: 0 -14px;
  border-bottom: 1px solid var(--streg);
  transition:
    background var(--t-hurtig) var(--lempning),
    box-shadow var(--t-hurtig) var(--lempning);
}
.stk-linje:last-child { border-bottom: 0; }

/* VALGTE LINJER LØFTES TIL HVID, DE FÅR IKKE EN TONE
   ------------------------------------------------------------
   Tonen var rgba(127, 174, 214, .10) – en blå sky over sandet.
   Den sænkede luminansen nok til at .desc faldt fra 4,68:1 til
   4,38, altså under kravet på 4,5. Det var med andre ord præcis
   de linjer man havde valgt, der blev de sværeste at læse.

   Hvid går den anden vej og måler 5,30:1. Den løfter samtidig
   linjen ud af listen, hvilket er det man vil have: "den her er
   min". Tallet regnes efter i tests/kontrast.spec.js. */
.stk-linje.valgt {
  background: #fff;
  border-bottom-color: transparent;
  border-radius: var(--r-lille);
  box-shadow:
    0 1px 1px rgba(36, 26, 23, .04),
    0 12px 26px -18px rgba(36, 26, 23, .34);
}
.stk-tekst .navn { font-weight: 600; }
.stk-tekst .desc { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.stk-pris {
  /* ⚠️ ÉN TALSTEMME (5/9). Prisen stod i serif her, i sans 600 på
     menukortet og i serif 700 ved bordet — tre skrifter for det
     samme "89,-", og gæsten går imellem siderne i ét klik.
     Designets egen talstemme (.pricebox b, .today .price) er
     Instrument Sans 600, tabulære cifre, rød. Den gælder nu
     overalt, også her. --red-tekst og ikke --red: 20 px sans på
     creme falder under 4,5:1 med mærkefarven selv. */
  font-family: var(--brod);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--red-tekst);
  font-variant-numeric: tabular-nums;
}

.taeller { display: flex; align-items: center; gap: 4px; }
/* 44 px, ikke 40. Under det rammer en tomme ved siden af, og de to
   knapper står lige ved hinanden – rammer man forkert her, går
   antallet den anden vej. */
.glass.rund {
  width: 44px; height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
}
.glass.rund[disabled] { opacity: .38; cursor: not-allowed; }
.taeller-tal {
  min-width: 2.2ch;
  text-align: center;
  /* Samme talstemme som prisen ved siden af (5/9): et tal i serif
     mellem to knapper og en pris i sans var to stemmer i én række. */
  font-family: var(--brod);
  font-weight: 600;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

/* ---- Fyldet som afkrydsningspiller ----
   Der ligger et rigtigt <input type="checkbox"> bag hver pille.
   Det er ikke pedanteri: tastatur, oplæsning og browserens egen
   udfyldning virker af sig selv, og en div med en klik-lytter kan
   ingen af de tre ting. Feltet er gemt visuelt, ikke fjernet. */
.fyld-valgene { display: flex; flex-wrap: wrap; gap: 8px; }
.fyld-valg {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(36, 26, 23, .18);
  background: rgba(255, 255, 255, .7);
  color: var(--sea);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-hurtig) var(--lempning),
              border-color var(--t-hurtig) var(--lempning),
              transform var(--t-hurtig) var(--lempning);
}
.fyld-valg input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  left: 0; top: 0;
  margin: 0;
  cursor: pointer;
}
.fyld-valg:hover { border-color: rgba(36, 26, 23, .4); }
.fyld-valg:active { transform: scale(.97); }
.fyld-valg.valgt {
  background: var(--sea);
  border-color: var(--sea);
  color: #fff;
}
/* Fokus skal kunne SES, og det er pillen der skal vise det –
   feltet indeni er usynligt. */
.fyld-valg:focus-within {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
/* Et flueben når den er valgt, så farven ikke står alene */
.fyld-valg.valgt::before { content: "✓"; margin-right: 7px; font-size: 13px; }

/* ---- Dagene ----
   Ruller sidelæns på en telefon. Fjorten dage kan ikke stå på 390
   pixel, og en ombrudt klump på fem linjer skubber resten af
   formularen ned under skærmkanten. */
/* Typevælgeren på forespørgselssiden deler regler med
   dagvælgeren: det er den samme håndbevægelse — vælg én af nogle
   få — og to sæt regler for det ville skride fra hinanden den dag,
   trykfladen skal være større. */
.dage, .type-valg {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 18px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.dage::-webkit-scrollbar { height: 4px; }
.dage::-webkit-scrollbar-thumb { background: rgba(36, 26, 23, .2); border-radius: 4px; }
.dag, .type-knap {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: grid;
  gap: 2px;
  min-width: 76px;
  min-height: 62px;
  padding: 10px 14px;
  border-radius: var(--r-lille);
  border: 1px solid rgba(36, 26, 23, .18);
  background: rgba(255, 255, 255, .7);
  color: var(--sea);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-hurtig) var(--lempning),
              border-color var(--t-hurtig) var(--lempning),
              transform var(--t-hurtig) var(--lempning);
}
.dag:hover { border-color: rgba(36, 26, 23, .4); }
.dag:active { transform: scale(.97); }
.dag.valgt, .type-knap.valgt { background: var(--sea); border-color: var(--sea); color: #fff; }
.dag-navn, .type-navn { font-weight: 600; font-size: 14px; }
.dag-dato, .type-note { font-size: 13px; color: var(--muted); }
.dag.valgt .dag-dato,
.type-knap.valgt .type-note { color: rgba(255, 255, 255, .78); }

/* ============================================================
   EN DAG, DER ER FULDT BOOKET  (1/9)
   ------------------------------------------------------------
   Kundens ord: ejeren skal kunne styre, hvor mange af de 55
   borde der må bookes en bestemt dag.

   ⚠️ DAGEN BLIVER STÅENDE. En dag, der MANGLER i striben, ligner
   en fejl på siden — gæsten leder efter den i stedet for at
   vælge en anden. Samme regel som ledighedskalenderen (29/8) og
   som udsolgte varer på kortet: vises, ikke skjules.

   ⚠️ OG ORDET STÅR PÅ KNAPPEN, ikke kun farven. En grå,
   gennemstreget dag uden en forklaring læses som noget, der er
   gået i stykker. Farven er hjælpen; ordet er beskeden.
   ============================================================ */
.dag.fuld {
  opacity: .55;
  cursor: not-allowed;
  background: rgba(36, 26, 23, .04);
}
.dag.fuld:hover { border-color: rgba(36, 26, 23, .18); }
.dag.fuld:active { transform: none; }
.dag.fuld .dag-navn { text-decoration: line-through; }
.dag-fuld {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red-tekst);
}

/* − og + ved "Hvor mange er I?" på bord/ (16/9). Scopet til
   .form-kort: personalesiden deler arket. 48 px knapper — en finger,
   ikke en musemarkør. */
.form-kort .antal-stepper {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 8px;
  align-items: center;
}
.form-kort .antal-stepper input { text-align: center; font-variant-numeric: tabular-nums; }
.form-kort .stepper-knap {
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(36, 26, 23, .18);
  background: #fff;
  color: var(--ink, #241a17);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.form-kort .stepper-knap:active { transform: scale(.96); }

/* Siden er nede (16/9): linjen over listen siger hvorfor og nummeret.
   Se nedeNote i js/skal/bestil.js. Kun på gæstesiderne — admin deler
   arket.

   ⚠️ LISTEN SKJULES, DEN DÆMPES IKKE  (25/9, aften). Dæmpet stod den
   stadig med reservedataenes "Smørrebrød 55,-" og "Håndmad 24,-" —
   priser, koden selv har skrevet. Mikkels ord: "Hvis databasen ikke
   svarer, må hjemmesiden aldrig vise forældede reservepriser." */
body:not(.personale) #bestil-form.er-nede #bestil-stykker {
  display: none;
}
body:not(.personale) .nede-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fbe9e9;
  color: #7a1f27;
  font-weight: 600;
  line-height: 1.4;
}

/* Typeknapperne er bredere end dagene: der står en hel sætning i
   dem, ikke en dato.

   OG DE OMBRYDER I STEDET FOR AT RULLE. Reglen ovenfor er delt
   med dagvælgeren, som ruller sidelæns – men dagene er ti ens
   valg, hvor man kan se mønsteret på de tre første. Typerne er
   TRE FORSKELLIGE spørgsmål, og på en telefon lå "Selskab" skjult
   uden for kanten: målt på et skærmbillede var det vigtigste valg
   på siden halvt væk. */
.type-valg { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
.type-knap { flex: 1 1 9.5rem; min-width: 0; }

/* Én linje pr. knap nu — "To-go" / "Spis her" som hos spiis.
   Uden noterne skal navnet stå midt i fladen, ellers hænger det
   i det øverste venstre hjørne af et 62 px højt felt. */
.type-knap { align-content: center; justify-items: center; }
.type-knap .type-navn { font-size: 15px; }

/* De to linjer under Send — spiis' beroligelse, med små typer og
   midtstillet: de er en fodnote til knappen, ikke et afsnit. */
.send-note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}
.send-note:first-of-type { margin-top: 16px; }

/* "(valgfrit)" i beskedens etiket — dæmpet, så etiketten stadig
   hedder Besked og ikke en hel sætning. */
label .valgfri { font-weight: 400; color: var(--muted); }

/* ============================================================
   ALLERGIFELTET — FÆLLES FOR DE SIDER, DER BESTILLER MAD (16/9)
   ------------------------------------------------------------
   Reglerne lå i css/ved-bordet.css og var scopet til
   `.kort-visning`, som kun findes ved bordet. Da bestil/ fik sit
   eget allergifelt, stod blokken derfor NØGEN: ingen ramme, ingen
   markering — bare et input mellem to andre.

   Præcis samme fælde som dagsbeskeden tidligere samme dag: stilen
   boede i ét ark, og siden, der manglede den, indlæste det ikke.
   Derfor bor de fælles regler her, i det ark BEGGE sider har.

   ⚠️ UDEN `.kort-visning` FORAN. Scopet hørte til bordets
   kortvisning; feltet skal se ens ud, uanset hvor man bestiller.
   Den mørke variant ved bordet (body.ved-bordet …) bliver i
   ved-bordet.css og vinder stadig: det ark indlæses efter dette.

   ⚠️ En rigtig klasse i opmærkningen og IKKE :has(#bestil-allergi).
   :has() virker i alle nye browsere, men det her er allergifeltet:
   dét er ikke stedet, hvor udseendet skal hænge på, hvor gammel
   gæstens telefon er. En klasse virker i dem alle.
   ============================================================ */
.felt-allergi {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--r-flade, 14px);
  border: 1px solid rgba(214, 42, 58, .35);
  background: rgba(214, 42, 58, .05);
}

/* Fluebenet står inde i det røde allergifelt og skal se ud som en
   del af det — ikke som en ny sektion. Trykfladen er hele linjen
   (label'en), så den er nem at ramme med en finger; 44 px er
   husets mindste mål. */
.felt-allergi .allergi-ja {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 10px 0 0; min-height: 44px; padding: 6px 0;
  font-size: 14px; line-height: 1.4; cursor: pointer;
  /* ⚠️ NORMAL VÆGT, OG DET ER MÅLT PÅ ET SKUD (16/9). Linjen er en
     <label>, og style.css giver alle labels font-weight 600. Uden
     den her linje stod samtykket lige så fedt som feltets eget
     navn — og så læses de to som to overskrifter, og gæsten
     springer netop dén tekst over, der er hele pointen.

     Forsiden har den samme linje med den samme begrundelse
     (havnegrillen.css). Den blev fundet dér en gang før; jeg gik i
     den igen, fordi jeg målte ramme, flade og trykflade, men ikke
     vægten. Tallene var grønne, billedet var ikke. */
  font-weight: 400;
}

/* ⚠️ OG DEN HER LINJE ER DEN, DER FAKTISK BIDER (16/9, MÅLT).
   `.felt-allergi .allergi-ja` er (0,2,0) og TABER til
   `#bestil-form label` (1,0,1) længere nede i filen — begge sider
   lægger formularen i #bestil-form. Målt på den beregnede stil:
   vægten var stadig 600, efter jeg havde skrevet 400 ovenfor.

   Det er husets egen lov for syvende gang: mål den BEREGNEDE stil,
   ikke den regel, du lige har skrevet. Forsiden har præcis samme
   trappe (`.field > label.allergi-ja` i havnegrillen.css), og jeg
   gik i fælden alligevel.

   Reglen ovenfor bliver stående: den gælder de steder, blokken
   ikke ligger i #bestil-form. */
/* ⚠️ OG FARVEN HØRER MED (16/9, set på et skud). Vægten var 400,
   og teksten så alligevel tung ud ved siden af hjælpelinjen —
   fordi den arvede label'ens MØRKE farve, mens hjælpeteksten er
   grå. Forsiden sætter `color: var(--muted)` af samme grund. To
   målinger sagde 400; øjet sagde noget andet, og øjet havde ret om
   helheden. */
#bestil-form label.allergi-ja { font-weight: 400; color: var(--muted); }

.felt-allergi .allergi-ja input { margin-top: 3px; flex: none; }

/* CHIP-RÆKKEN "HVAD SKAL DET VÆRE?" ER SLETTET.

   Her lå .slags-valg, .slags-knap og .slags-tal: en vandret
   række chips over listen, der filtrerede udvalget. Kunden bad
   om spiis' form (23/8), og dér står alle kategorier som folde i
   én liste. Se noten i js/bestilling.js, hvor koden lå.

   Reglerne er væk og ikke kommenteret ud: en halv stil, der
   ligger og venter, giver en knap, der ser forkert ud på en
   måde, ingen kan finde. */


/* ---- Tidsvælgeren ---- */
.felt-smal { max-width: 14rem; }
select {
  width: 100%;
  /* Samme 16 px som felterne, af samme grund */
  font: 400 16px/1.45 var(--brod);
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid rgba(36, 26, 23, .22);
  border-radius: 8px;
  background: #fff;
  color: var(--sea);
}
select:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: var(--red);
}

/* ---- Etiketter og hjælpetekst ---- */
#bestil-form label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}
.frivillig { font-weight: 400; color: var(--muted); }
.hjaelp { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

/* ⚠️ INSTRUKTIONEN OVER EN KORTLISTE  (8/9). Kundens ord: *"det
   skal vaere klokkeklart for medarbejderne hvad der sker og hvad
   de skal."* MAALT: over "Nye bookinger" stod 58 ord — den
   laengste prosablok paa hele personalesiden — over den liste,
   man er kommet for at trykke i. Ordene staar bag folden nu, og
   den ENE saetning staar her.

   Den er MOERKERE end en feltlinje med vilje: en feltlinje laeses
   én gang, naar man saetter noget op; den her skal kunne laeses
   af en, der har travlt og ikke leder efter den. */
body.personale .hjaelp.hjaelp-stor {
  font-size: 15px;
  color: var(--sea);
  margin-top: 8px;
}

/* FEJL SKAL KUNNE SES UDEN FARVESYN.
   Der står altid en sætning – farven er kun med til at finde den
   hurtigt. --red-tekst og ikke --red: den lyse rød måler 4,0:1 mod
   sand, og kravet for småt er 4,5. */
.fejl {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--red-tekst);
}
/* ⚠️ MÆRKET ER ET RØDT "!", IKKE ET "⚠ " SKREVET I TEKSTEN (14/9).
   Kundens ord: fejlene må ikke være "forældet eller ringe". Glyffen
   blev tegnet forskelligt på hver telefon og lignede en systemfejl. */
.fejl::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  vertical-align: 1px;
}
/* ⚠️ OG FELTET SELV BLIVER RØDT (28/9). bestil/ og bord/ satte
   aria-invalid på feltet, men ingen regel læste det — sætningen stod
   under et felt, der så helt normalt ud. Mikkels ord: et ugyldigt
   nummer skal være TYDELIGT. Outline, ikke box-shadow: fokusringen er
   box-shadow, og kanten skal blive, mens gæsten retter.
   ⚠️ SCOPET TIL GÆSTESIDERNE — admin sætter ikke attributten, men en
   regel uden scope laver hele admin om (CLAUDE.md). */
body:not(.personale) :is(input, select, textarea)[aria-invalid="true"] {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}
/* FEJLKORTET (14/9). En fejl, der står for sig selv (role=alert —
   #bestil-fejl og #kig-fejl), er et KORT: lys flade, rød kant, blæk
   og ikke rød tekst. Den ene sætning er det, gæsten skal læse, og
   rød skrift på en hel sætning læses som skæld ud. Feltfejlene under
   navn og nummer bliver små røde linjer — de peger på ét felt. */
/* ⚠️ GRID OG IKKE FLEX: med flex-wrap faldt en lang sætning ned UNDER
   mærket, så "!" stod alene på sin egen linje — set på et skud 14/9.
   Mærket er kolonne ét, teksten og vejene videre kolonne to. */
.fejl[role="alert"]:not(.skjult) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0 10px;
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff5f3;
  border: 1px solid rgba(214, 42, 58, .24);
  color: var(--ink, #241a17);
  font-weight: 500;
  line-height: 1.45;
}
.fejl[role="alert"]::before { margin: 1px 0 0; flex: none; }
.fejl[role="alert"] .noedudgang { grid-column: 2; }

/* Nødudgangens to veje — sms og telefon. De står inde i
   fejlboksen, så budskabet og handlingen følges ad, og de skal
   ligne det, de er: knapper man kan ramme med en tomme, ikke
   løbetekst i fejlens røde. */
.fejl .noedudgang {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  font-weight: 400;
}

/* ---- Kvitteringslinjen ----
   Den klæber til bunden. Formularen er lang, og uden den skulle
   man rulle op for at se hvad man havde valgt, og ned igen for at
   sende. På en telefon ligger den over mobilbjælken. */
.bestil-bund {
  /* Den er en KNAP nu, ikke en beholder med en knap i. Et tryk
     fører videre til hentetid og kontaktoplysninger. */
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: sticky;
  bottom: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(22px, 2.6vw, 32px);
  padding: 14px clamp(14px, 1.6vw, 20px);
  border-radius: var(--r-flade);
  /* Massiv, ikke sløret. Den er klæbende, så et slør her skulle
     regnes om ved hvert billede mens man ruller ned gennem
     formularen – og den ligger oven på sand i samme farve.

     DEN SKAL KUNNE SES SOM ET LAG OVENPÅ. Uden kanten flød den
     sammen med listen: kunden så den på sin telefon (23/8) ligge
     midt hen over en tæller, og den lignede noget, der var gået i
     stykker, ikke en bjælke. Sandet er den samme farve som
     afsnittet, og skyggen alene rakte ikke over et hvidt kort.
     Kanten koster én linje og gør forskellen på "et lag" og "en
     fejl". */
  background: var(--sand);
  border: 1px solid rgba(36, 26, 23, .14);
  box-shadow:
    0 -2px 10px rgba(36, 26, 23, .06),
    var(--skygge-loeft);
  animation: bund-op var(--t-blid) var(--lempning);
}
/* Den glider op når den kommer frem – se noten i js/bestilling.js
   om hvorfor den er skjult indtil der er valgt noget. */
@keyframes bund-op {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bestil-bund { animation: none; }
}
#bestil-sum-tekst { font-weight: 600; font-size: 15px; }

/* Kurven forsvinder når man er nået ned til Send-knappen. Er man
   der, har man ikke brug for en genvej dertil – og en klæbende
   bjælke oven på det sidste felt er i vejen. */
.bestil-bund {
  transition:
    opacity var(--t-hurtig) var(--lempning),
    transform var(--t-hurtig) var(--lempning);
}
.bestil-bund.naaet-bunden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
.kurv-videre {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--red-tekst);
}

/* Felterne skal ikke lande under kurven når browseren ruller dem
   frem ved fokus. */
#bestil-form input, #bestil-form textarea, #bestil-form select {
  scroll-margin-bottom: 140px;
}
/* Send-knappen i bunden af formularen. Fuld bredde: det er den
   sidste handling på siden, og der er ikke noget at forveksle den
   med. */
.knap.send {
  width: 100%;
  min-height: 54px;
  margin-top: clamp(20px, 2.4vw, 30px);
  font-size: 16px;
}
#bestil-send[disabled] { opacity: .45; cursor: not-allowed; }

/* ============================================================
   FORMULARKORTET — ÉN FORM PÅ ALLE FIRE FORMULARER
   ============================================================
   Bestilling, selskaber, bord og baglokale er det samme for
   gæsten: hun skriver noget, og forretningen ringer. Så skal de
   også SE ens ud. Før havde de hver deres — samme felter, men
   formularen lå direkte på sandet og flød ud i siden.

   Formen er spiis.dk's, som kunden bad om, men i havnens farver:
   ét hvidt kort på sandet, fede etiketter over bløde felter,
   grupperne som fuldbredde-bjælker, og én stor knap i bunden.

   ALT ER SCOPET TIL .form-kort. Personalesiden bruger de samme
   klasser — .felt, .fold-hoved, input, select — og en regel uden
   scope ville lave hele admin om. Det er sket før: en klasse, der
   hed det samme to steder, farvede hvert bestillingskort i admin
   mørkeblåt. Se noten ved .slags-kort.
   ============================================================ */
.form-kort {
  background: #fff;
  border-radius: clamp(20px, 2.6vw, 32px);
  padding: clamp(20px, 3vw, 42px);
  border: 1px solid rgba(36, 26, 23, .07);
  box-shadow:
    0 1px 2px rgba(36, 26, 23, .04),
    0 30px 60px -46px rgba(36, 26, 23, .55);
}

/* ---- Etiketterne ----
   Fede og mørke, OVER feltet. En etiket, der svæver inde i
   feltet, forsvinder i det øjeblik man begynder at skrive — og
   så står man med et udfyldt felt uden at kunne se hvad det var. */
.form-kort label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--sea);
  margin-bottom: 8px;
}
.form-kort .felt { margin-bottom: 20px; }
.form-kort .hjaelp,
.form-kort .frivillig { font-weight: 400; color: var(--muted); }

/* ---- Felterne ----
   Blød flade i stedet for en hård ramme. Rammen på 1 px gjorde
   formularen til et regneark; fladen gør den til noget, man
   skriver i. 16 px skrift står fast: er den mindre, zoomer
   iPhone ind af sig selv, når feltet får fokus. */
.form-kort input[type="text"],
.form-kort input[type="email"],
.form-kort input[type="tel"],
.form-kort input[type="number"],
.form-kort input[type="date"],
.form-kort input[type="search"],
.form-kort textarea,
.form-kort select {
  width: 100%;
  font: 400 16px/1.45 var(--brod);
  /* 52 px: en tommel skal kunne ramme feltet uden at kigge. */
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid rgba(36, 26, 23, .09);
  border-radius: var(--r-lille);
  background: rgba(36, 26, 23, .035);
  color: var(--sea);
  transition: background var(--t-hurtig) var(--lempning),
              border-color var(--t-hurtig) var(--lempning);
}
.form-kort input:hover,
.form-kort textarea:hover,
.form-kort select:hover { border-color: rgba(36, 26, 23, .2); }
.form-kort input:focus-visible,
.form-kort textarea:focus-visible,
.form-kort select:focus-visible {
  background: #fff;
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: var(--red);
}
.form-kort textarea { min-height: 6rem; }
.form-kort ::placeholder { color: rgba(82, 110, 139, .8); }

/* ---- Overskrifterne inde i kortet ----
   Mindre end sidens egne. De deler et kort, ikke en side, og i
   den gamle størrelse skubbede de felterne under skærmkanten på
   en telefon. */
.form-kort .h-panel,
.form-kort .liste-titel {
  font-size: clamp(22px, 2.2vw, 30px);
  margin-bottom: 14px;
}
.form-kort .h-panel.luft-top { margin-top: clamp(26px, 3vw, 38px); }

/* ---- Grupperne som fuldbredde-bjælker ----
   Adskilte bjælker med luft imellem, ikke rækker i en tabel.
   Hver bjælke er ét tryk, og luften er det, der gør, at man kan
   se hvor den ene slutter. */
.form-kort .vare-gruppe,
.form-kort .fold {
  border: 1px solid rgba(36, 26, 23, .09);
  border-radius: var(--r-lille);
  background: rgba(36, 26, 23, .025);
  margin-bottom: 10px;
  overflow: hidden;
  transition: background var(--t-hurtig) var(--lempning);
}
.form-kort .vare-gruppe:hover,
.form-kort .fold:hover { background: rgba(36, 26, 23, .05); }
.form-kort .fold-hoved { min-height: 62px; }
.form-kort .fold-hoved:hover { background: none; }
.form-kort .fold-navn { font-size: 16px; font-weight: 700; }
/* Åben gruppe: hvid krop, så det valgte løftes ud af bjælken. */
.form-kort .vare-gruppe:has(.fold-krop:not([hidden])),
.form-kort .fold:has(.fold-krop:not([hidden])) { background: #fff; }

/* ---- Tælleren som en pille ----
   De to knapper stod løse ved siden af tallet. Samlet i én blød
   pille hører de sammen — og pillen viser, hvor man skal ramme. */
.form-kort .taeller {
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(36, 26, 23, .05);
  border: 1px solid rgba(36, 26, 23, .07);
}
.form-kort .taeller .glass.rund {
  width: 40px; height: 40px; min-height: 40px;
  background: #fff;
  color: var(--red-tekst);
  box-shadow: 0 1px 2px rgba(36, 26, 23, .08);
}
.form-kort .taeller-tal { font-size: 20px; min-width: 2ch; }

/* ---- Den valgte linje ----
   Rammen i havnens rødt i stedet for en skygge. På spiis er det
   dét, der siger "den her er min", og det kan ses i sollys, hvor
   en skygge ikke kan. */
.form-kort .stk-linje.valgt {
  background: #fff;
  border: 2px solid var(--red);
  border-radius: var(--r-lille);
  box-shadow: 0 10px 24px -20px rgba(214, 42, 58, .8);
  padding: 11px 13px;
}

/* ---- Spis her / tag med ----
   To store knapper, ikke to piller. Valget ændrer, hvad resten
   af formularen betyder, og så skal det fylde derefter. */
.form-kort .type-valg { gap: 10px; }
.form-kort .type-knap {
  min-height: 66px;
  justify-content: center;
  align-content: center;
  text-align: center;
  border-radius: var(--r-lille);
  border-color: rgba(36, 26, 23, .09);
  background: rgba(36, 26, 23, .035);
}
.form-kort .type-knap.valgt {
  background: var(--sea);
  border-color: var(--sea);
}
.form-kort .type-navn { font-size: 16px; }

/* ---- Send ----
   Fuld bredde, og den eneste knap i kortet med den farve. Der
   skal ikke være noget at forveksle den med. */
.form-kort .knap.send,
.form-kort .knap[type="submit"] {
  width: 100%;
  min-height: 58px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  margin-top: clamp(22px, 2.6vw, 32px);
  box-shadow: 0 16px 34px -14px rgba(214, 42, 58, .8);
}

/* Linjerne under knappen: små, midt på, dæmpede. De er en
   fodnote til handlingen, ikke en del af den. */
.form-kort .knap.send ~ .note,
.form-kort .knap[type="submit"] ~ .note {
  text-align: center;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .form-kort input, .form-kort textarea, .form-kort select,
  .form-kort .vare-gruppe, .form-kort .fold { transition: none; }
}

/* ---- Kvitteringen ---- */
#bestil-tak h3 { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 8px; }
#bestil-tak > p { max-width: 46ch; color: var(--muted); }
.kvit {
  margin-top: 20px;
  border-top: 1px solid var(--streg);
}
.kvit-linje {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--streg);
  font-size: 15px;
}
.kvit-navn { font-weight: 600; }
.kvit-vaerdi { color: var(--muted); text-align: right; }
/* Referencen er det gæsten læser op i telefonen. Den skal skille
   sig ud fra resten af kvitteringen. */
.kvit-linje:first-child .kvit-vaerdi {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: .06em;
  color: var(--sea);
}

@media (max-width: 640px) {
  /* Stykkerne får to rækker: tekst og pris øverst, tælleren under.
     På 390 px kan navn, pris og tre knapper ikke stå på én linje
     uden at navnet brækker midt i et ord. */
  .stk-linje {
    grid-template-columns: 1fr auto;
    grid-template-areas: "tekst pris" "taeller taeller";
  }
  .stk-tekst { grid-area: tekst; }
  .stk-pris { grid-area: pris; }
  .taeller { grid-area: taeller; justify-content: flex-start; }

  /* KVITTERINGSLINJEN SKAL VÆRE ÉN LAV RÆKKE.

     Den var to: summen på én linje og en knap i fuld bredde under.
     Det gav en klæbende plade på 200 px, som stod og svævede midt
     hen over trin 2 og 3 mens man rullede. En klæbende bjælke der
     dækker en femtedel af skærmen er ikke en hjælp, det er noget der
     er i vejen.

     Nu: summen til venstre i småt, knappen til højre, én række på
     omkring 64 px. Den klæber over mobilbjælken og båden – 114 px
     tilsammen. */
  /* ⚠️ HER STOD bottom: calc(76px + safe-area) — OG DE 76 PX VAR
     PLADS TIL ET ELEMENT, DER IKKE FINDES MERE  (31/8).

     Noten sagde "over bådstriben på 66 px". Bådstriben blev
     fjernet, da siderne blev bygget om; reglen blev stående.

     MÅLT på en iPhone 13 (390 × 664) med to varer i kurven:
     bjælken lå 522–588 px nede — altså midt inde i varelisten, hen
     over den række, gæsten lige havde trykket på, med 76 px tom
     luft under sig. Det er præcis dét, kunden så: *"den flyder
     bare lidt midt i det hele og er i vejen."*

     Den ligger i bunden nu, hvor den hører til. Sikkerhedsafstanden
     er telefonens egen (env(safe-area-inset-bottom)) og ikke et
     tal, vi har skrevet af — det var netop det tal, der blev
     forældet. */
  .bestil-bund {
    bottom: env(safe-area-inset-bottom, 0px);
    flex-wrap: nowrap;
    gap: 10px;
    padding: 10px 12px;
  }
  #bestil-sum-tekst { font-size: 13px; line-height: 1.25; }

  /* Plads under formularen, så den nederste fold kan rulles fri af
     kurven. Uden den kunne man ikke nå at åbne "Allergier, e-mail
     eller andet" nederst på siden. */
  #bestil-form { padding-bottom: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  .stk-linje, .fyld-valg, .dag { transition: none; }
  .fyld-valg:active, .dag:active { transform: none; }
}

/* Fluebenet på loginskærmen. 44 px høj hele vejen, så hele linjen
   er trykflade og ikke kun den lille firkant. */
.felt-tjek {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 4px;
  cursor: pointer;
  font-size: 15px;
}
.felt-tjek input { width: 20px; height: 20px; margin: 0; cursor: pointer; }

/* ============================================================
   BESTILLINGERNE PÅ PERSONALESIDEN
   ------------------------------------------------------------
   Læses på en telefon eller en tablet ved lugen, med den ene hånd
   fri, mens der er kø. Derfor: hentetiden størst, statussen som et
   ORD og ikke kun en farve, og telefonnummeret som noget man kan
   trykke på.
   ============================================================ */

/* Tallet på fanen: hvor mange der ikke er ringet om endnu. Det
   skal kunne ses på en fane man ikke har åbnet. */
.badge {
  display: inline-grid;
  place-items: center;
  min-width: 21px; height: 21px;
  margin-left: 7px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font: 600 12px/1 var(--brod);
  font-variant-numeric: tabular-nums;
}

.knap.sekundaer {
  background: transparent;
  color: var(--sea);
  border: 1px solid rgba(36, 26, 23, .28);
}
.knap.sekundaer:hover { background: rgba(36, 26, 23, .06); color: var(--sea); }

.bestil-kort {
  border: 1px solid var(--streg);
  border-left: 5px solid var(--streg);
  border-radius: var(--r-lille);
  padding: 14px 16px;
  margin-top: 12px;
  background: #fff;
}
/* Kanten til venstre er statussen, set på en meters afstand. Der
   står ALTID også et ord i mærket – farven er kun til at finde
   den rigtige hurtigt. */
/* Forespørgslerne (fase 2) deler kortet og farverne med
   bestillingerne. De to lister gør det samme for personalet — noget
   er kommet ind, nogen skal ringe, og så er det afsluttet — og et
   andet farvesprog på nabofanen ville kun være noget mere at lære.
   Derfor står de i SAMME regel: bliver den ene farve rettet, følger
   den anden med, og de kan ikke skride fra hinanden. */
.bestil-kort.b-ny         { border-left-color: var(--red); }
.bestil-kort.b-bekraeftet,
.bestil-kort.b-kontaktet  { border-left-color: #3f7fa8; }
.bestil-kort.b-klar,
.bestil-kort.b-aftalt     { border-left-color: #2f8a5b; }
/* ⚠️ EN FÆRDIG BESTILLING SÅ UD SOM EN AFVIST  (31/8).

   Kundens ord med to skærmbilleder af fanen: *"der skal stå
   færdig, og når de er kørt skal det tydeligt ses."*

   b-afhentet var grå og halvgennemsigtig — den SAMME stil som
   b-afvist og b-udeblevet. Altså lignede "maden kom ud ad døren"
   og "det blev aldrig til noget" hinanden på en skærm, personalet
   skimmer hen over en frokost. Og de tre grå kort stod i den
   samme bunke.

   Nu er den grøn og fuldt synlig: et hak, der er sat, skal kunne
   ses som sat. Det afviste og udeblevne bliver gråt — de ER
   færdige, men der kom ingen mad ud.

   ⚠️ .b-klar ER OGSÅ GRØN, og det er med vilje en ANDEN grøn:
   klar er "den venter på gæsten", færdig er "den er ude". Kortet
   skelner dem på fladen, ikke kun på kanten — en kant på 4 px
   findes ikke, når man skimmer tredive kort. */
.bestil-kort.b-faerdig {
  border-left-color: #2f8a5b;
  background:
    linear-gradient(90deg, rgba(47, 138, 91, .09), rgba(47, 138, 91, 0) 42%),
    var(--kort-flade, #fff);
}
/* Mærket siger ordet, fladen siger tilstanden.
   ⚠️ KLASSEN HEDDER .maerke m-<status>, ikke .bestil-maerke —
   gættet forkert én gang, og en regel på et klassenavn, der ikke
   findes, slår aldrig igennem uden at sige det. */
/* ⚠️ KUN STATUSMÆRKET, IKKE HVERT MÆRKE PÅ KORTET (8/9).
   Selektoren var `.maerke` bart, og MÅLT på et færdigt kort blev
   ALLE mærker grønne: en levering, der var kørt ud, stod med
   "LEVERES" i præcis den samme grønne som "FÆRDIG", og så kan
   man ikke se, hvad bestillingen VAR. Kundens ord 8/9: *"det
   ligner hinanden alt for meget."*

   `[data-status]` er det, Admin.statusMaerke sætter — se noten
   dér. Et klassenavn kunne ikke skelne: `m-ny` bar BÅDE
   statussen "Ny" og leveringens mærke, til den kollision blev
   ryddet samme dag. */
.bestil-kort.b-faerdig .maerke[data-status] {
  background: rgba(47, 138, 91, .14);
  color: #1f6b44;
}
/* Uden .b-faerdig — altså afvist og udeblevet — bliver det gråt
   som før: sagen er lukket, og der kom ingen mad ud. */
.bestil-kort.b-afhentet:not(.b-faerdig),
.bestil-kort.b-serveret:not(.b-faerdig) {
  border-left-color: rgba(36, 26, 23, .2);
  opacity: .72;
}
.bestil-kort.b-afvist,
/* Udeblevet ser ud som afvist: begge er sager, der er lukket uden
   at nogen sad ved bordet. Ordene er forskellige, fordi ÅRSAGEN
   er det — men på skærmen er de begge færdige. */
.bestil-kort.b-udeblevet  { border-left-color: rgba(36, 26, 23, .2); opacity: .6; }

.bestil-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.bestil-tid {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  color: var(--sea);
  font-variant-numeric: tabular-nums;
}
.bestil-ref {
  margin-left: auto;
  font: 400 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  color: var(--muted);
}

/* Farverne på mærkerne er de samme som kanten, men som 12%
   baggrund med mørk tekst – 4,5:1 og opefter mod hvid. */
/* "NY" er MØRKERE end --red-tekst, og det er målt.
   --red-tekst (#c33d27) på 12% rød over det hvide kort giver
   4,44:1, og kravet for 10px tekst er 4,5. Seks hundrededele under
   – men et krav er et krav, og mærket er den mindste tekst på hele
   personalesiden. #b23522 giver 5,2:1.
   (Samme farvepar består på menusiden, fordi kortet dér er
   sandfarvet og ikke hvidt. Bunden afgør det, ikke farven alene.) */
.maerke.m-ny         { background: rgba(214, 42, 58, .12);  color: #b23522; }
.maerke.m-bekraeftet,
.maerke.m-kontaktet  { background: rgba(63, 127, 168, .16); color: #2b5d7d; }
.maerke.m-klar,
.maerke.m-aftalt     { background: rgba(47, 138, 91, .16);  color: #236643; }
.maerke.m-afhentet,
.maerke.m-afvist,
.maerke.m-udeblevet  { background: rgba(36, 26, 23, .10);   color: var(--muted); }

/* Tapasfadet: dagens største stykke arbejde. Grøn-blå som havet
   og ikke rød — rød betyder "gør noget NU", og et fad med to
   dages varsel er planlagt arbejde, ikke en alarm. #1f5f6b på den
   lyse baggrund giver 6,1:1 på et hvidt kort. */
.maerke.m-tapas { background: rgba(31, 95, 107, .14); color: #1f5f6b; }

/* Smørrebrødet: samme slags oplysning som fadet — planlagt
   arbejde med et døgns varsel og mindst fire stykker — og derfor
   den SAMME rolige familie og ikke rød. Lidt lysere end fadets,
   så de to kan kendes fra hinanden på et kort med begge.
   #2a6f5a giver 5,6:1 på et hvidt kort. */
.maerke.m-smoer { background: rgba(42, 111, 90, .14); color: #2a6f5a; }

/* Gængeren: et nummer med udeblivelser bag sig. Varm gul-brun og
   ikke rød — det er en oplysning, personalet skal veje, ikke en
   alarm, der skriger på hvert kort. #7a5a17 på den lyse gule
   giver 5,0:1 på hvidt kort. */
.maerke.gaenger { background: rgba(214, 158, 32, .18); color: #7a5a17; }

/* EN NY BESTILLING LYSER OP OG FALDER TIL RO. To sekunder varm
   gul, så øjet fanger den — og så er den et almindeligt kort.
   Animationen slutter på stilarkets egen baggrund, så kortet
   ender præcis, hvor det ville have været uden den. Den kan kun
   virke, fordi der ikke tegnes om i tomgang (se fingeraftrykket
   i js/admin/kerne.js): tegnede vi alt om hvert minut, lyste
   ALT op, og så betød lyset ingenting. */
@keyframes linje-ny {
  from { background-color: #fdf0cd; box-shadow: 0 0 0 2px rgba(214, 158, 32, .4); }
}
.bestil-kort.linje-ny { animation: linje-ny 2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .bestil-kort.linje-ny { animation: none; }
}

.bestil-hvem {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.bestil-tlf {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--red-tekst);
  /* 44 px trykflade uden at linjen bliver høj: der er kø bag ved,
     og nummeret skal rammes i første forsøg. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.bestil-linjer {
  border-top: 1px solid var(--streg);
  border-bottom: 1px solid var(--streg);
  padding: 8px 0;
  margin-bottom: 10px;
}
.bestil-linje {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
}
.bestil-antal-tal {
  flex: 0 0 auto;
  min-width: 3ch;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bestil-vare { flex: 1 1 auto; }
.bestil-linjepris { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ⚠️ EMBALLAGEN STÅR UDEN FOR VARELISTEN  (1/9)
   ------------------------------------------------------------
   Kundens forlæg har den som sin egen chip under maden, og det
   er ikke pynt: stod den mellem retterne, læses den som en ret.
   Målt på Bestillinger-fanen inden rettelsen: en bestilling på
   fem portioner sagde "9 retter", og køkkenets produktionsliste
   bad om at lave "4 Emballage".

   Den er dæmpet med vilje — den er en oplysning om totalen, ikke
   noget nogen skal handle på. */
.bestil-emballage {
  display: inline-flex;
  align-items: center;
  /* ⚠️ EN GRID-CELLE STRÆKKER SIG, HVAD DER END STÅR I `display`.
     Kortet er et grid fra 900 px, og en grid-celle "blokificerer"
     inline-flex — MÅLT: chippen var 748 px bred i et kort på 974,
     mens getComputedStyle sagde `flex` og ikke `inline-flex`.
     Det er `justify-self`, der skal sige det, ikke `display`. */
  justify-self: start;
  gap: 6px;
  margin: 0 0 10px;
  padding: 5px 11px;
  border: 1px solid var(--streg);
  border-radius: 999px;
  background: var(--sand);
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   FORESPØRGSLERNES TRE TRIN
   ------------------------------------------------------------
   Kundens ord (26/8): "en step by step til forespørgsler".
   Stribens opgave er at svare uden at man læser kortet: hvor
   langt er den nået, og hvad mangler.

   ⚠️ SCOPET TIL body.personale. Klassenavnene er almindelige
   ord, og css/style.css bærer stadig ni gæstesider — en regel
   uden scope laver om på en side, ingen har bedt om. Se noten
   ved variablerne på body.personale.
   ============================================================ */
body.personale .trin-stribe {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}
body.personale .trin {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 6px;
  border-radius: 999px;
  border: 1px solid var(--streg);
  font-size: 13px;
  color: var(--muted);
}
body.personale .trin-tal {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--streg);
  color: var(--blaek);
  font-size: 12px;
  font-weight: 700;
}

/* Gjort: grønt, og tallet er blevet et flueben. */
body.personale .trin-gjort { border-color: #b7ddc6; color: #2f6f4c; }
body.personale .trin-gjort .trin-tal { background: #2f8a5b; color: #fff; }

/* ⚠️ "NU" ER DET ENESTE RØDE PÅ KORTET. Er både trin 2 og 3
   fremhævet, er der ikke noget, der er næste — og så er
   striben en pynt. Kun ét trin ad gangen kan være nu. */
body.personale .trin-nu {
  border-color: var(--red);
  background: #fdecec;
  color: var(--red-tekst);
  font-weight: 600;
}
body.personale .trin-nu .trin-tal { background: var(--red); color: #fff; }

/* Venter: trinnet er der, men det er ikke dets tur endnu.
   Droppet: det sker aldrig for den her (afvist, eller ingen
   dato at skrive ind). Begge er stille — de er ikke arbejde. */
body.personale .trin-droppet { opacity: .45; text-decoration: line-through; }

/* ============================================================
   ⚠️ PÅMINDELSEN OM KALENDEREN
   ------------------------------------------------------------
   Den står, til rækken FINDES i kalenderen, og forsvinder så
   af sig selv. Derfor må den godt fylde: den er det farligste
   på fanen — nogen har sagt ja til et selskab, og der står
   ingenting nogen steder om den lørdag.
   ============================================================ */
body.personale .kalender-mangler {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--red);
  border-radius: var(--r-lille);
  background: #fdecec;
  color: var(--red-tekst);
}
body.personale .kalender-mangler .vare-tekst { color: var(--red-tekst); }

/* Felterne til at skrive rækken HER (29/8). De ligger inde i den
   røde advarsel, så arbejdet står præcis dér, hvor problemet
   beskrives — personalet skal ikke bære dato og navn med sig
   over på en anden fane. Fuld bredde: en dato og en titel i to
   smalle felter ved siden af hinanden bliver to halve felter på
   en iPad. */
body.personale .kal-opret {
  display: grid;
  gap: 8px;
  width: 100%;
}
body.personale .kal-opret input { width: 100%; }
body.personale .kal-opret .knap-raekke { margin: 2px 0 0; }

/* ============================================================
   FORESPØRGSLER: TO BUNKER OG EN LINJE  (29/8)
   ------------------------------------------------------------
   Kundens ord om den gamle fane: "layoutet og udseendet er grimt
   og uoverskueligt — lad det ligne resten." Forlægget er hans
   eget skærmbillede: tællere øverst, to overskrifter, og kort
   der er tre linjer høje i stedet for en halv skærm.

   Kontakten står som ÉN linje med ikoner, fordi det er sådan,
   den læses højt i en telefon: dato · navn · antal · nummer ·
   mail. De to links er fanens vigtigste handling — personalet
   skal kontakte gæsten, FØR sagen kan gå videre.
   ============================================================ */
body.personale .foresp-tal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
body.personale .foresp-tal-pille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--streg);
  font-size: 14px;
  color: var(--muted);
}
body.personale .foresp-tal-pille strong { color: var(--sea); font-size: 15px; }
/* ⚠️ KUN DEN, DER HAR ET TAL, RÅBER. "0 venter på jer" i rødt er
   en alarm om ingenting, og så holder man op med at se den. */
body.personale .foresp-tal-pille.haster {
  background: #fdecec;
  box-shadow: inset 0 0 0 1px var(--red);
  color: var(--red-tekst);
}
body.personale .foresp-tal-pille.haster strong { color: var(--red-tekst); }

body.personale .foresp-hoved {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 8px;
}
body.personale .foresp-hoved h3 { font-size: 19px; }
body.personale .foresp-hoved:first-child { margin-top: 0; }

/* ⚠️ TRIN-STRIBEN ER VÆK (29/8, kundens ord: "de to grønne og
   ene røde ting inde i kortet er ass"). Tre piller sagde det
   samme som statusmærket og knappen nedenunder — tre gange den
   samme oplysning i tre former, og øjet skulle læse dem alle for
   at finde ud af, hvad der manglede. Kortet har en OVERSKRIFT i
   stedet: den ene linje, man skimmer en liste på. */
body.personale .foresp-top {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
body.personale .foresp-titel {
  font-size: 18px;
  line-height: 1.15;
  margin: 0;
  /* Overskriften tager pladsen; mærkerne følger efter og bryder
     kun, når der ikke er plads til dem. */
  flex: 1 1 auto;
}
body.personale .foresp-top .bestil-ref { margin-left: auto; }
body.personale .foresp-ventet {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
/* Tre dage er grænsen: en forespørgsel, der har ligget så længe,
   er et selskab, der bliver holdt et andet sted. */
body.personale .foresp-ventet.laenge { color: var(--red-tekst); font-weight: 600; }

body.personale .foresp-detaljer {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

/* ⚠️ ADRESSEN I DETALJELINJEN ER ET LINK  (21/9).

   Resten af linjen er --muted, altså grå med vilje: det er felter,
   man skimmer. Adressen er det ENE af dem, man kan trykke på, og
   den skal derfor have husets linkfarve og en understregning —
   ellers er den en knap, ingen opdager.

   ⚠️ IKKE FED. Linjen har fire-fem felter i forvejen; gjorde vi
   adressen fed, ville øjet læse den som overskriften og springe
   resten over. Farven er nok til at skille den ud fra grå. */
body.personale .foresp-kortlink {
  /* ⚠️ SAMME FARVE SOM KORTETS ANDRE HANDLINGER (.foresp-link:
     nummeret og mailen). --sea er husets overskriftsfarve og
     næsten sort — den ville ligne resten af den grå linje. */
  color: var(--red-tekst);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Adresser brækker grimt midt i et vejnavn. */
  white-space: nowrap;
}

/* ⚠️ KNAPPERNE STÅR TIL HØJRE, som i forlægget — sagen læses fra
   venstre, og handlingen ligger, hvor øjet ender. Det gør kortet
   to linjer lavere, og det var hele klagen.

   Under 900 px falder de under igen: på en telefon ville to
   kolonner give en 90 px bred knapsøjle med ordene brækket over
   fire linjer. Personalesiden er computer- og iPad-først, men
   den skal virke på en telefon. */
@media (min-width: 900px) {
  body.personale #forespoergsler-liste .bestil-kort,
  body.personale #lokale-sager .bestil-kort {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 16px;
  }
  body.personale #forespoergsler-liste .bestil-kort > *,
  body.personale #lokale-sager .bestil-kort > * { grid-column: 1; }
  /* Knap-rækken er kortets EGEN — ikke kalenderfelternes, som
     ligger inde i advarslen (':scope >' er samme lære som i
     udlejning.js). */
  body.personale #forespoergsler-liste .bestil-kort > .knap-raekke,
  body.personale #lokale-sager .bestil-kort > .knap-raekke {
    grid-column: 2;
    grid-row: 1 / span 3;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    min-width: 168px;
  }
}

body.personale .foresp-linje {
  display: flex;
  align-items: center;
  gap: 6px 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--muted);
}
body.personale .foresp-navn { font-weight: 700; color: var(--sea); font-size: 15px; }
body.personale .foresp-dato { color: var(--sea); }
body.personale .foresp-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-weight: 600;
  color: var(--red-tekst);
  font-variant-numeric: tabular-nums;
}

/* Trin 2 er den ene knap, der flytter sagen VIDERE — grøn, som i
   forlægget, hvor "Aftal & sæt tid" er den eneste farvede. */
body.personale .knap.foresp-aftal {
  background: #e8f4ec;
  color: #1f5c3c;
  box-shadow: inset 0 0 0 1px #a9d3ba;
}

body.personale .kalender-staar {
  margin: 12px 0 0;
  font-size: 14px;
  color: #2f6f4c;
}

/* Kortet selv får en ring, så det kan ses i en liste uden at
   man læser hvert kort. Samme greb som .bestil-kort.har-allergi
   — og af samme grund røres den venstre bjælke ikke: den siger
   status. */
body.personale .bestil-kort.mangler-kalender {
  box-shadow: 0 0 0 1px var(--red);
}

/* Gæstens egen besked. Den kan indeholde en allergi, og en allergi
   må ikke se ud som en fodnote.

   ⚠️ white-space: pre-line, fordi gæstens linjeskift ER hendes
   opdeling. js/bestilling.js sætter "ALLERGI: nødder" på sin egen
   linje og hendes øvrige ønsker under. Uden reglen løb de sammen
   til "ALLERGI: nødder Gerne uden remoulade" — én sætning, hvor
   allergien ender midt inde i noget andet. Målt på Bestillinger-
   fanen 26/8. */
.bestil-gaestebesked {
  background: rgba(240, 195, 187, .28);
  border-radius: var(--r-lille);
  padding: 9px 12px;
  margin: 0 0 10px;
  font-size: 14px;
  white-space: pre-line;
}

/* ⚠️ ALLERGIEN FÅR SAMME BEHANDLING SOM I KØKKEN-KØEN — se den
   lange note ved .koek-note.allergi om hvorfor rødt er fladen og
   ikke en fjerde farve. Det er de SAMME bestillinger; kun lugen
   og bordet skiller dem. Så de to skærme skal advare ens, ellers
   afhænger det af, hvor personalet tilfældigvis stod. */
.bestil-gaestebesked.allergi {
  background: #fdecec;
  border: 1px solid var(--red);
  color: var(--red-tekst);
  font-weight: 600;
}
/* ⚠️ KUN en ring — den venstre bjælke får IKKE farve her, som
   den gør i køkken-køen. Bjælken siger status (ny / bekræftet /
   klar), og males den rød af en allergi, holder den op med at
   sige, hvor bestillingen er nået til. */
.bestil-kort.har-allergi {
  box-shadow: 0 0 0 1px var(--red);
}

/* Mærket på vagtskærmen. Det er den eneste af rækkens mærker, der
   ikke er en oplysning men en advarsel — derfor fladen. */
/* ============================================================
   STATUS ER EN RING — TYPEN ER EN FLADE  (8/9)
   ------------------------------------------------------------
   Kundens ord, efter at han selv havde bestilt lidt af hvert:
   *"det ligner hinanden alt for meget, det er alt for uklart
   hvad er hvad ... det skal være klokkeklart for medarbejderne."*

   MÅLT i browseren, ikke læst: status og type stod i PRÆCIS den
   samme pille — 10 px, vægt 600, samme runding, samme 12-14 %
   flade. På ét kort kunne der stå [NY] [SMØRREBRØD] [LEVERES],
   tre ens piller, hvor den første siger HVOR sagen er henne og
   de to andre HVAD den er.

   ⚠️ FARVERNE ER URØRT, og det er med vilje. Hver af dem er målt
   for kontrast (se noterne ovenfor), og hver af dem betyder
   noget: leveringen skal råbe, to-go skal ikke. Det, der skifter,
   er FORMEN — og formen er den eneste egenskab, der var ledig.

   ⚠️ OG DEN VIRKER PÅ ALLE SYV FANER PÅ ÉN GANG, fordi mærket
   bygges ét sted (Admin.statusMaerke). Skrev hver fane sin egen,
   ville halvdelen af huset skifte og halvdelen ikke — og så er
   man tilbage ved klagen. */
body.personale .maerke[data-status] {
  background: none;
  box-shadow: inset 0 0 0 1px currentColor;
}

/* ⚠️ LEVERINGEN HAR SIN EGEN KLASSE NU (8/9). Den bar `m-ny` —
   statussens — og papirerne advarede om netop den kollision 6/9.
   Farven er den SAMME røde: en bestilling, der skal LEVERES, er
   den, der skal råbe højest af de fire typer. */
.maerke.m-lev { background: rgba(214, 42, 58, .12); color: #b23522; }

/* "Overskredet" på vagtskærmen er en ALARM, ikke en status: en
   gæst, der skulle have hentet kl. 13.15 og ikke har, er ikke
   mindre vigtig kl. 13.20. Den bar `m-ny` og stod derfor i den
   samme pille som statussen lige ved siden af. Gul som husets
   øvrige advarsler; #6b4a12 på den lyse gule giver 6,4:1. */
.maerke.m-sen { background: rgba(214, 158, 42, .20); color: #6b4a12; }

.maerke.m-allergi {
  background: #fdecec;
  border: 1px solid var(--red);
  color: var(--red-tekst);
}

/* ============================================================
   BUNDEN AF SKÆRMEN PÅ EN TELEFON
   ------------------------------------------------------------
   HER LÅ MOBILBJÆLKEN: fire faste genveje nederst — menu, ring,
   find vej, smørrebrød. Den er fjernet, og det er ikke en
   forenkling for forenklingens skyld.

   Den tog 56 px af skærmen permanent, oven i bådstribens 66. På en
   iPhone med 844 px højde er det 14% af skærmen der aldrig viser
   indhold. Den var samtidig det sted kunden pegede på tre gange:
   den var grim, den skjulte båden, og teksten kunne læses tværs
   igennem den.

   De to ting bjælken var til for — ring og find vej — står nu
   øverst i skuffemenuen som knapper. Det er ét tryk mere, og til
   gengæld er der en hel skærm mere at læse på.

   Tilbage i bunden er kun båden, som er sidens rullemåler og
   ligger i den nederste kant hvor den hører til.
   ============================================================ */

@media (max-width: 900px) {
  /* BÅDEN ER SLÅET FRA PÅ TELEFON.

     Den kostede 66 px af skærmen permanent, og det er den samme plads
     i bunden som den faste bestil-knap skal have. Der kan kun være én
     ting i den nederste kant, og af de to er det knappen der er til
     noget: båden er en rullemåler, knappen er forretningens
     forretning.

     På en computer bliver den. Dér ligger den i en kant hvor der ikke
     er andet, og skærmen har pladsen. */
  #sail { display: none; }

  /* Plads til den faste bestil-knap, så footeren ikke bliver dækket */
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* Fanerne klæber lige under topmenuen, som er lavere på mobil */
  .afdelinger.klaeb { top: 64px; }
  :root { --topbjaelke: 76px; }
}

@media print {
}

/* ============================================================
   DESIGNBUNDTET, 21. AUGUST 2026 — DE NYE FÆLLES DELE
   ------------------------------------------------------------
   Kunden sendte et mobil-først designbundt (Mosede Mobil v3) med
   otte sider. Farverne og skrifterne var allerede vores — sand,
   marineblå, den røde accent, Bebas Neue og Instrument Sans — så
   det her er ikke et nyt tema. Det er de komponenter bundtet har,
   som vi ikke havde.

   ÉN TING ER IKKE KOPIERET: alle tal og påstande. Bundtet var
   fuldt af dem — "4,8 · 312 anmeldelser", "Bedste fiskefilet på
   hele Sydkysten", baglokalet til 40 personer, leje 1.200,-,
   adressen Mosede Havnevej 15, telefon 43 90 15 00. Ingen af dem
   er bekræftet af forretningen, og flere modsiger det, vi HAR
   fået. Formerne herunder er derfor tomme skaller: de fyldes fra
   databasen, og har de ingenting at vise, skjuler de sig selv.

   SLØRET ER STADIG KUN DE TRE STEDER. Bundtet satte
   backdrop-filter på hver eneste flade. Det gjorde vi også en
   gang, og det kostede halvdelen af billedhastigheden ved
   rulning (se noten ved .glass). Fladerne herunder ligger på
   ensfarvet sand, hvor der ikke er noget at sløre.
   ============================================================ */

/* Genvejsstriben er fjernet fra forsiden sammen med sin HTML —
   kundens rækkefølge (22/8) havde den ikke med, og den sagde det
   samme som "Hvad kan vi hjælpe med?". Reglerne er slettet, ikke
   gemt: en regel uden et element er en fælde for den næste. */

/* ------------------------------------------------------------
   BANNERNE — det personalet råber ud

   PRÆCIS TO, OG DE KAN IKKE LUKKES. Kundens ord (22/8): "ikke
   lad det være en krydsmulighed og kun de to der" — musikken og
   Facebook. Krydset, .ud-animationen og besked-banneret er
   fjernet sammen med deres JavaScript i js/side.js.

     .bn.musik   et arrangement fra kalenderen der er lige om
                 hjørnet. Marineblå med et rødt skær.
     .bn.fb      Facebook. Samme form, uden skær.
   ------------------------------------------------------------ */
.bannere { display: grid; gap: 10px; padding: 18px var(--pad) 0; }

.bn {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-flade);
  color: #fff;
  overflow: hidden;
  max-height: 320px;

  /* TO BAGGRUNDE, OG DEN NEDERSTE ER IKKE PYNT.

     Et forløb er et background-IMAGE. Maler browseren det ikke —
     forced-colors, en gammel motor, et billedlag der fejler —
     står der hvid tekst på ingenting, altså på sandet bagved.
     Målt af tests/kontrast.spec.js: 1,13:1.

     Den massive farve under er den tekst-farven regnes imod, og
     den er der uanset hvad. Testen læser background-color op
     gennem forældrene og standser ved den første massive; uden
     denne linje løb den forbi banneret og helt op i body. */
  background-color: var(--sea);
  background-image: linear-gradient(135deg, var(--sea2), var(--sea));
  box-shadow: var(--skygge-blid);
}

/* Det røde skær i hjørnet er kun på musikbanneret. Det er
   forskellen mellem "der sker noget" og "der står noget". */
.bn.musik::after {
  content: "";
  position: absolute;
  right: -30px; top: -44px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 42, 58, .5), transparent 68%);
  pointer-events: none;
}

.bn-ikon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4);
}
.bn-ind { flex: 1; min-width: 0; position: relative; }
.bn h3 {
  font-family: var(--brod);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  margin: 0;
}
.bn p {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .82);
}
.bn .bn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--red);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35), 0 8px 20px rgba(214, 42, 58, .38);
  transition: transform var(--t-blid) var(--lempning), background var(--t-blid) ease;
}
.bn .bn-cta:hover { background: #bd3b26; color: #fff; transform: translateY(-1px); }
.bn .bn-cta:active { transform: scale(.96); }



/* Equalizeren i musikbanneret. Fire streger der hopper — den
   siger "lyd" hurtigere end et nodeikon gør, og den koster
   ingenting: fire transforms, ingen layout. */
.eq { display: flex; align-items: flex-end; gap: 2.5px; height: 14px; }
.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;  animation-delay: 0s; }
.eq i:nth-child(2) { height: 12px; animation-delay: .16s; }
.eq i:nth-child(3) { height: 7px;  animation-delay: .32s; }
.eq i:nth-child(4) { height: 14px; animation-delay: .48s; }
@keyframes eq {
  0%, 100% { transform: scaleY(.45); }
  50%      { transform: scaleY(1); }
}

/* ------------------------------------------------------------
   NYHEDSKORTENE

   Tabellen `nyheder` og fanen i admin har eksisteret hele tiden,
   men gæsten kunne ikke se dem NOGEN steder. Personalet skrev
   altså ind i en skuffe. Det her er skuffen åbnet.

   Datolinjen er rød og i småt over overskriften, ikke under.
   En nyhed uden dato er ikke en nyhed, og datoen er det man
   scanner efter når man leder efter "er det her stadig aktuelt".
   ------------------------------------------------------------ */
/* ÉN KOLONNE, SOM SPIIS. Kortene læses som en nyhedsstrøm, ikke
   som tre spalter der kæmper om øjet: kunden pegede på spiis'
   forside og bad om den ro. Kolonnen er smallere end afsnittet,
   for et kort i fuld skærmbredde på en computer giver linjer på
   130 tegn, og dem læser ingen til ende.

   ------------------------------------------------------------
   DEN ER EN TIDSLINJE NU
   ------------------------------------------------------------
   Kundens ord (22/8): "nyhederne — lad det se bedre og mere
   spændende ud."

   Tre ens hvide kort under hinanden er en liste. Det, der stod
   på dem, var rækkefølgen — nyeste øverst — og den kunne man
   ikke se; man skulle læse tre datoer og selv regne den ud.

   Nu tegner en linje ned gennem strømmen med en prik ved hvert
   kort. Prikken er ikke pynt: den siger, at kortene hænger
   sammen i tid, og den ØVERSTE er fyldt og ånder, fordi den er
   den nyeste. Det er den eneste oplysning, gæsten leder efter i
   en nyhedsstrøm — "er der sket noget for nylig?" — og den
   står nu i formen i stedet for i teksten.

   Linjen tegnes med ::before på beholderen og prikkerne med
   ::before på kortene. Ingen ekstra elementer, altså intet at
   holde ved lige i js/side.js OG js/nyheder.js, som begge
   bygger de her kort.
   ------------------------------------------------------------ */
.nyhedsnet {
  position: relative;
  display: grid;
  gap: 16px;
  max-width: 670px;      /* 640 til kortet + 30 til tidslinjen */
  padding-left: 30px;
}
/* Linjen. Den standser 24 px oppe i det sidste kort i stedet for
   at løbe ud i ingenting: en streg, der ender i luft, ligner en
   liste, der er klippet over. */
.nyhedsnet::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 24px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    var(--red) 0, rgba(214, 42, 58, .35) 40%, rgba(36, 26, 23, .12) 100%);
}

.nw {
  position: relative;
  display: block;
  padding: 24px 24px 26px;
  border-radius: var(--r-flade);
  background: var(--paper);
  box-shadow: var(--skygge-blid);
  color: var(--sea);
  transition: transform var(--t-blid) var(--lempning), box-shadow var(--t-blid) ease;
}
/* Prikken på linjen. left regnes fra kortets kant: -30px er
   beholderens padding, +5px linjens plads, -4px halv prik. */
.nw::before {
  content: "";
  position: absolute;
  left: -29px;
  top: 26px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sand);
  box-shadow: 0 0 0 2px rgba(36, 26, 23, .18);
}
/* Den nyeste. Fyldt, rød og med en ring der ånder — det er dét,
   der gør strømmen levende i stedet for kronologisk. */
.nw:first-child::before {
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(214, 42, 58, .18);
  animation: nw-puls 3s ease-out infinite;
}
@keyframes nw-puls {
  0%   { box-shadow: 0 0 0 3px rgba(214, 42, 58, .18); }
  60%  { box-shadow: 0 0 0 10px rgba(214, 42, 58, 0); }
  100% { box-shadow: 0 0 0 3px rgba(214, 42, 58, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nw:first-child::before { animation: none; }
}

/* "Der er ikke noget nyt lige nu" er ikke en nyhed og skal ikke
   have en prik på tidslinjen — se noten i js/nyheder.js. Er den
   den eneste boks, skjules linjen med. */
.nw-tom::before { display: none; }
.nyhedsnet:has(.nw-tom)::before { display: none; }
.nyhedsnet:has(.nw-tom) { padding-left: 0; }

a.nw:hover { transform: translateY(-3px); box-shadow: var(--skygge-loeft); color: var(--sea); }

/* Datoen er en pille og ikke en linje tekst. Den skal kunne
   scannes ned gennem strømmen uden at læse noget. */
.nw-naar {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(214, 42, 58, .1);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red-dyb);
}
.nw h3 { font-size: clamp(24px, 5.6vw, 30px); margin-top: 14px; }
/* Den nyeste står større. Ikke fordi den er vigtigere som tekst,
   men fordi en strøm uden en forreste er en stak. */
.nw:first-child h3 { font-size: clamp(28px, 6.4vw, 38px); }
.nw p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* Knapperne flugter med kortene og ikke med sidens kant: de er
   enden på strømmen, ikke starten på noget nyt. 30 px er
   tidslinjens plads, den samme indrykning som kortene har. */
#nyheder .tags { margin-top: 22px; padding-left: 30px; }

/* TOVALGET ER VÆK — To go / Spis her ligger i bestillingen nu.

   Her stod .tovalg og .valgkort: to store kort på forsiden, der
   førte til bestil/ med valget i adressen. Kunden bad om at få
   dem væk (22/8) — valget hører hjemme i formularen, efter maden.
   Se noten i index.html, hvor afsnittet stod.

   Reglerne er SLETTET og ikke kommenteret ud. En halv stil, der
   ligger og venter på at nogen genbruger klassenavnet, er værre
   end ingen stil. */

/* ------------------------------------------------------------
   KORTENE KOMMER ÉT AD GANGEN
   ------------------------------------------------------------
   Kunden kaldte nyhederne "kedelige" og bad om "god animation".
   Sektionens egen indtoning (.rev) løfter hele fladen på én
   gang; her får kortene hver deres lille forsinkelse oveni, så
   afsnittet bygger sig op i stedet for at lande som en klods.
   Samme mønster som prikkerne i isafsnittet.

   Kun transform og opacity — intet layout — og reduceret
   bevægelse slår det hele fra nederst i filen sammen med de
   andre .rev-overgange.
   ------------------------------------------------------------ */
.rev .nw, .rev .row-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .6s var(--lempning);
}
.rev.in .nw, .rev.in .row-card { opacity: 1; transform: none; }
.rev.in .nw:nth-child(2),
.rev.in .row-card:nth-child(2) { transition-delay: .09s; }
.rev.in .nw:nth-child(3), .rev.in .row-card:nth-child(3) { transition-delay: .18s; }
.rev.in .row-card:nth-child(4) { transition-delay: .27s; }
.rev.in .row-card:nth-child(5) { transition-delay: .36s; }
.rev.in .row-card:nth-child(6) { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .rev .nw, .rev .row-card {
    opacity: 1; transform: none; transition: none;
  }
}

/* ------------------------------------------------------------
   PLATTERNE — køkkenets egne platter og sliders
   ------------------------------------------------------------
   Samme kortfamilie som nyhederne: hvidt kort,
   linsestrejf, blid skygge. Indholdslisterne er chefens egne ord
   (se noten i smoerrebroed-ud-af-huset/index.html), og der står
   med vilje ingen priser — dem har køkkenet ikke sat endnu.
   ------------------------------------------------------------ */
.platte-net { display: grid; gap: 14px; margin-top: 26px; }
@media (min-width: 860px) {
  .platte-net { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

.plattekort {
  position: relative;
  padding: 24px 22px;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--skygge-blid);
  overflow: hidden;
}
.plattekort::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(255, 255, 255, .6), transparent 45%);
  pointer-events: none;
}
.platte-emoji {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  font-size: 27px;
  line-height: 1;
  border-radius: 18px;
  background: rgba(214, 42, 58, .09);
  box-shadow: inset 0 1px 1px #fff;
  margin-bottom: 14px;
}
.plattekort:nth-child(2) .platte-emoji { background: rgba(36, 26, 23, .08); }
.plattekort:nth-child(3) .platte-emoji { background: rgba(240, 195, 187, .4); }
.plattekort h3 { font-size: clamp(24px, 5vw, 28px); margin: 0; }
.platte-note { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.plattekort ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.plattekort li {
  padding: 8px 0;
  font-size: 14.5px;
  color: var(--sea);
  border-bottom: 1px solid rgba(36, 26, 23, .08);
}
.plattekort li:last-child { border-bottom: 0; }
.platte-ekstra {
  margin: 12px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--red-tekst);
}

/* Kortene deltager i samme trinvise indtoning som resten */
.rev .plattekort {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .6s var(--lempning);
}
.rev.in .plattekort { opacity: 1; transform: none; }
.rev.in .plattekort:nth-child(2) { transition-delay: .09s; }
.rev.in .plattekort:nth-child(3) { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .rev .plattekort { opacity: 1; transform: none; transition: none; }
}


/* ------------------------------------------------------------
   RÆKKEKORTENE — "Hvad kan vi hjælpe med?"

   Bundtet havde dem som rækker med et ikon til venstre og en pil
   til højre, og det er bedre end vores net af firkanter var: på
   en telefon kan man scanne seks rækker med tommelfingeren, mens
   seks kvadrater kræver at man læser dem to ad gangen.

   Ikonet er en streg-SVG i den røde, i et blødt rødt felt. Det
   siger hvad rækken handler om før man har læst overskriften.
   ------------------------------------------------------------ */
.raekker { margin-top: 26px; display: grid; gap: 10px; }
@media (min-width: 900px) {
  .raekker { grid-template-columns: 1fr 1fr; }
}

.row-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 48px 18px 18px;
  border-radius: var(--r-flade);
  background: rgba(255, 255, 255, .82);
  color: var(--sea);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .95),
    0 1px 1px rgba(36, 26, 23, .05),
    0 12px 30px -18px rgba(36, 26, 23, .3);
  transition: transform var(--t-blid) var(--lempning), box-shadow var(--t-blid) ease;
}
.row-card:hover {
  transform: translateY(-2px);
  color: var(--sea);
  box-shadow: inset 0 1px 1px #fff, 0 18px 40px -20px rgba(36, 26, 23, .42);
}
.row-card:active { transform: translateY(0) scale(.985); }

.row-ikon {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(214, 42, 58, .1);
  color: var(--red);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8);
}
.row-ikon svg { width: 22px; height: 22px; }

/* Tre af husets farver på skift — rød, hav og kuglernes rosa.
   Kunden kaldte rækkerne kedelige ("ved ikke om det er farve,
   dimensionerne eller hvad"), og seks ens grå-røde chips var en
   del af det: øjet fik ingen hjælp til at skille ærinderne ad.
   Farverne er tokens fra paletten, ikke nye farver — og ikonet
   beholder mørk streg på lys bund hele vejen rundt. */
.raekker .row-card:nth-child(3n+2) .row-ikon {
  background: rgba(36, 26, 23, .08);
  color: var(--sea);
}
.raekker .row-card:nth-child(3n) .row-ikon {
  background: rgba(240, 195, 187, .4);
  color: var(--red-dyb, #9e1b28);
}
.row-card h3 { font-size: clamp(19px, 2.2vw, 22px); line-height: 1.04; }
.row-card p {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
}
.row-pil {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red-tekst);
  font-size: 16px;
  transition: transform var(--t-blid) var(--lempning);
}
.row-card:hover .row-pil { transform: translateY(-50%) translateX(4px); }

/* ------------------------------------------------------------
   AFDELINGSKORTENE — menukortet i tre stykker

   De var her før og blev fjernet, fordi de var en
   indholdsfortegnelse midt på siden. Bundtet har dem igen, og
   forskellen er hvad der står på dem: dengang var det en stak
   kategorinavne, nu er det afdelingens navn stort og to tal.

   Tallene TÆLLES af js/side.js på det rigtige menukort. Skriver
   personalet en vare ind, går tallet op af sig selv. Der står
   ikke et rundt tal, nogen har gættet.
   ------------------------------------------------------------ */
.afd-net { display: grid; gap: 12px; margin-top: 26px; }
@media (min-width: 760px) {
  .afd-net { grid-template-columns: repeat(3, 1fr); }
}

.afd-kort {
  position: relative;
  display: block;
  padding: 24px;
  border-radius: var(--r-flade);
  background: rgba(255, 255, 255, .82);
  color: var(--sea);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .95),
    0 1px 1px rgba(36, 26, 23, .05),
    0 14px 34px -20px rgba(36, 26, 23, .32);
  transition: transform var(--t-blid) var(--lempning), box-shadow var(--t-blid) ease;
}
.afd-kort:hover {
  transform: translateY(-3px);
  color: var(--sea);
  box-shadow: inset 0 1px 1px #fff, 0 22px 48px -22px rgba(36, 26, 23, .45);
}
/* PÅ DEN MØRKE GRUND SKAL KORTET VÆRE TÆT.
   .82 hvid oven på marineblå giver cirka #d4d9de, og mod den
   rammer --muted kun 3,4:1 — under kravet på 4,5 for de 13px i
   .afd-tal og .afd-liste. Papirhvid er tæt og rammer 4,9. */
.grund-dyb .afd-kort { background: var(--paper); }
.afd-kort h3 { font-size: clamp(26px, 3vw, 34px); }
.afd-kort .afd-tal { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.afd-kort .afd-liste {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 12px 0 0;
}
.afd-pil {
  position: absolute;
  top: 20px; right: 20px;
  width: 32px; height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(214, 42, 58, .1);
  color: var(--red-tekst);
  font-size: 15px;
}

/* ------------------------------------------------------------
   PRISLISTEN — VI HAVDE DEN OGSÅ

   Designbundtet har .prices: rækker med hårstreger imellem og
   tallet i Bebas til højre. Den blev bygget her og så FJERNET
   igen, før den nåede at blive brugt.

   Smørrebrødssiden har allerede sådan en liste — .smoer-liste med
   .smoer-pris, fyldt af js/smoerrebroed.js fra menukortet. To
   systemer til at vise en pris er præcis den fejl, .phead-noten
   nedenfor handler om: den næste, der skal vise priser, vælger den
   forkerte af dem, og så står to sider af samme forretning med
   hver sit prisformat.

   Bundtets øvrige prislister — frokost 145,-, levering 150,-,
   baglokalet 1.200,- — er alligevel tal, forretningen ikke har
   bekræftet. Der er ingenting at vise i den endnu.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   SIDEHOVEDET PÅ UNDERSIDERNE — DET FANDTES ALLEREDE

   Designbundtet kalder det .phead: en mørkeblå blok lige under
   topmenuen med ærindets navn, én overskrift og to linjer om hvad
   man kan her.

   Vi havde det i forvejen. Det hedder bare .smoer-hoved +
   .side-top + .mork-top (se afsnittet længere oppe), fordi det
   blev bygget til smørrebrødssiden først og siden overtaget af de
   andre seks. Navnet er skævt; det er ikke to systemer.

   Der er IKKE lavet en .phead ved siden af. To klasser der gør det
   samme, er præcis sådan to sider langsomt kommer til at se
   forskellige ud — og den næste, der skal lave en underside,
   vælger den forkerte af dem.

   Det bundtet manglede hos os, var at MENUKORTET ikke havde
   hovedet. Det har det nu.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   TILBAGE-PILEN

   Undersiderne har en pil til forsiden ved siden af logoet.
   Bundtet har den, og den er værd at have: skuffemenuen er tre
   tryk væk fra "tilbage", og telefonens egen tilbage-knap findes
   ikke på iOS uden en kant-svirp mange ikke kender.
   ------------------------------------------------------------ */
/* YDERST TIL VENSTRE, FØR LOGOET. Den stod i midten af toppen —
   flex-rækkefølgen lagde den mellem logoet og menuen, og på en
   telefon endte det som en pil, der svævede midt i hovedet.
   Kunden slog ned på det (22/8). Tilbage hører hjemme i venstre
   hjørne; det er dér, hver app og hver browser har lært folk at
   lede. order i stedet for at flytte HTML på ni undersider. */
.tilbage {
  order: -1;
  width: 42px; height: 42px;
  padding: 0;
  border-radius: 999px;
  flex: 0 0 auto;
  justify-content: center;
  margin-right: 14px;
}
.tilbage svg { width: 19px; height: 19px; }

/* ------------------------------------------------------------
   HERO-PARALLAKSEN

   Baggrunden glider langsommere end siden. Den er sat i
   js/side.js med transform alene — aldrig top eller
   background-position, som begge tvinger browseren til at
   regne layoutet om ved hvert billede.

   will-change står her og ikke i JavaScript, fordi den skal
   sættes FØR den første rulning. Sættes den undervejs, skal
   browseren løfte laget midt i en bevægelse, og det ses som et
   hak lige når man begynder at rulle.
   ------------------------------------------------------------ */
.hero .bg {
  /* 20% EKSTRA I TOPPEN, og det er ikke pynt.

     Parallaksen skubber baggrunden NED mens siden ruller op. Uden
     den ekstra strimmel ville den øverste kant af fotoet komme
     ind på skærmen efter cirka en halv skærms rulning, og så stod
     der en marineblå bjælke over billedet. Strimlen er klippet af
     .hero's egen overflow:hidden, så den ses aldrig — den er der
     kun for at have noget at trække ned fra.

     20% af en hero på 700 px er 140. js/side.js flytter højst
     102 px (0,16 × 640), så der er 38 px i overskud. */
  inset: -20% 0 0;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero .bg { inset: 0; will-change: auto; transform: none !important; }
}

/* ------------------------------------------------------------
   MØRKE AFSNIT — VÆK IGEN

   Nyhedsafsnittet lå en overgang på marineblå for at skille
   "her står der noget" fra "her kan du gøre noget". Kunden så
   det ved siden af spiis.dk og bad om spiis' overskuelighed:
   lys bund og luft i stedet for en tung flade. section.mork-
   reglerne er fjernet, ikke gemt — en regel uden et element
   melder sig aldrig, den dag nogen genbruger klassen og får en
   halv, forældet stil.

   Lærdommen fra dengang er stadig værd at huske: en regel som
   "section.mork p" gjorde teksten i de LYSE kort hvid på hvidt.
   Kortene stod der med deres dato og så tomme ud — ikke som en
   fejl, men som tre tomme kasser. Farv aldrig et helt afsnits
   tekst; farv afsnittets egen overskrift og ingress.
   ------------------------------------------------------------ */

/* ============================================================
   BUNDTETS DAGENS RET-PANEL — SLETTET 23/8
   ============================================================
   Her lå 250 linjer .dagenskort: designbundtets eget lille panel
   med dagens ret, en tæller og et link videre til bestil/.
   Klassenavnene var bundtets — .field, .inp, .item, .step, .seg
   — og de var alle scopet til .dagenskort, netop fordi de er så
   almindelige, at de ellers ville farve resten af siden.

   Panelet er væk. Kunden bad om at kunne bestille dér, hvor maden
   står, og så er det HELE formularen, der ligger på forsiden —
   den samme, bestil/ bruger, med sine egne klasser (.form-kort,
   .stk-linje, .vare-gruppe). To formularer med hver sit stilark
   var to steder at rette den samme fejl.
   ============================================================ */

/* ------------------------------------------------------------
   DET CENTREREDE HOVED MED PRIKKERNE

   Bundtet bruger det til "Dagens ret" og "Menukort": eyebrow i
   rødt, overskrift, fem små prikker, og en kort linje under.
   Prikkerne er ren rytme — de siger "her begynder noget", uden
   at bruge en streg der ligner en skillelinje.
   ------------------------------------------------------------ */
.mid { text-align: center; display: grid; justify-items: center; }
/* margin-top står IKKE her: .eyebrow + h2 sætter .18em, som
   skalerer med skriftstørrelsen. De 8px, der stod her, var
   rigtige ved 40px og for lidt ved 76 — se noten ved .eyebrow. */
.mid h2 { font-size: clamp(40px, 8vw, 76px); }
.mid .sub { max-width: 36ch; margin-top: 12px; color: var(--muted); }
.prikker { display: flex; gap: 7px; margin: 16px 0 2px; }
.prikker i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--red);
  opacity: .55;
}
/* Prikkerne ruller ind én ad gangen, når afsnittet kommer i syne.
   Samme mønster som pillerne i isafsnittet. */
.rev .prikker i { opacity: 0; transform: scale(.4); transition: opacity .4s ease, transform .5s var(--lempning); }
.rev.in .prikker i { opacity: .55; transform: none; }
.rev.in .prikker i:nth-child(1) { transition-delay: .18s; }
.rev.in .prikker i:nth-child(2) { transition-delay: .24s; }
.rev.in .prikker i:nth-child(3) { transition-delay: .30s; }
.rev.in .prikker i:nth-child(4) { transition-delay: .36s; }
.rev.in .prikker i:nth-child(5) { transition-delay: .42s; }
@media (prefers-reduced-motion: reduce) {
  .rev .prikker i { opacity: .55; transform: none; transition: none; }
}

/* Fuld bredde. Bundtets .g.blk — den primære knap i et panel skal
   fylde hele bredden, så den ikke kan forveksles med de dæmpede
   piller ved siden af. */
.glass.blk { width: 100%; justify-content: center; }

/* Pose-ikonet i den flydende knap. Uden en størrelse skalerer en
   inline-SVG til sit eget viewBox gange skriftstørrelsen — ikonet
   blev tre gange så højt som knappen og dækkede teksten. Set på et
   skærmbillede, aldrig i koden. */
.bestil-fast svg { width: 19px; height: 19px; flex: 0 0 auto; }
.bestil-fast-emoji { font-size: 19px; line-height: 1; flex: 0 0 auto; }

/* ------------------------------------------------------------
   MENUKORTETS OVERSKRIFTER ER RØDE, som i designbundtets
   skærmbillede — MAD / IS OG DESSERTER / DRIKKEVARER i husets
   røde. Bebas i 26-34px er stor tekst, kravet er 3,0, og --red
   rammer 4,01 mod panelhvid. Kontrastprøven regner det efter.

   Emojien står i sit eget span FØR overskriften, ikke inde i
   den: prøverne læser h3'ens tekst, og "🍔 Mad" er ikke "Mad". */
.afd-kort h3 { color: var(--red); }
.afd-emoji { font-size: 26px; line-height: 1; display: block; margin-bottom: 8px; }


/* HEROENS TO KNAPPER ER VÆK, og reglerne med dem.

   De stod i en stak i højre side — "Bestil mad" og "Book et
   bord" — og den flydende Bestil-pille lå oven i den nederste af
   dem i højre hjørne. Kunden så det på sin telefon og bad om at
   få dem væk (22/8).

   Heroen siger nu det, en hero skal sige: hvor du er, og hvad
   stedet er. Handlingen er pillen, og den følger med hele vejen
   ned. Book et bord står i topmenuen og i "Hvad kan vi hjælpe
   med?" — stadig ét tryk væk. */

/* ------------------------------------------------------------
   ÅBENT-PILLEN I HJØRNET

   Den fyldte en hel knapbredde mellem knapperne. Men den er et
   SVAR, ikke en handling — og et svar hører hjemme dér, hvor
   øjet lander først: øverst i hjørnet, som et lille skilt.

   Prikken ånder. Det er den eneste bevægelse, der kører i ring
   på siden, og den er tilladt fordi den betyder noget: en puls
   er "lige nu", og det er præcis det, pillen påstår. Ved lukket
   står prikken stille — der er ingenting at pulsere om.
   ------------------------------------------------------------ */
.hero-status {
  position: absolute;
  z-index: 2;
  top: calc(env(safe-area-inset-top, 0px) + 96px);
  right: var(--pad);
  height: 38px;
  padding: 0 15px;
  font-size: 12.5px;
}
.hero-status .dot { animation: aandedrag 2.4s ease-out infinite; }
.hero-status .dot.lukket { animation: none; }
@keyframes aandedrag {
  0%        { box-shadow: 0 0 0 0 rgba(127, 214, 161, .55); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(127, 214, 161, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-status .dot { animation: none; }
}

/* Facebook-banneret i Facebooks egen blå, som i designbundtet. Den
   skiller sig ud fra havnens marineblå med vilje: banneret handler
   ikke om forretningen, det handler om et sted udenfor, og farven
   siger det før man har læst et ord. */
.bn.fb {
  background-color: #1557c4;
  background-image: linear-gradient(135deg, #2b7bf5, #1557c4);
}
/* Knappen er HVID her og ikke rød. En rød knap på blåt er to
   mærkefarver, der slås — og den røde er husets, ikke Facebooks. */
.bn.fb .bn-cta {
  color: #14509c;
  background: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), 0 8px 20px rgba(0, 0, 0, .22);
}
.bn.fb .bn-cta:hover { background: #eef3fb; color: #14509c; }

/* Bestillingspanelet står stille, når gæsten har bedt om ro.

   Rækkerne og knapperne har en overgang på .42s hver. Testen for
   reduceret bevægelse fangede dem: der kørte en bevægelse på 0,84
   sekunder hos en, der havde bedt om ingen. Reglen her er ikke
   pynt — for nogle mennesker er den forskellen på at kunne bruge
   siden og at blive utilpas af den. */
@media (prefers-reduced-motion: reduce) {
  .bn, .bn .bn-cta,
  .row-card, .row-pil, .afd-kort, .nw { transition: none; }
  .row-card:active { transform: none; }
  .eq i { animation: none; }
}

/* Nyhedsfilm-blokken lå her: filmen som baggrund under "Sidste
   nyt fra lugen" med gennemsigtige glaskort. Kunden så den og bad
   om animationen, som den var før — isfilmen hjemme i isafsnittet
   med ramme og smelter. Placeringen af nyhederne som andet afsnit
   BLEV; det var kun filmen, der flyttede tilbage. */


/* Bordmærket i admin. Hverken sandfarvet som "Spis her" eller
   rødt som "Ny": det siger ikke "kig her", det siger HVOR maden
   skal hen. Havets blå på lys bund, så det kan ses på tværs af
   en liste uden at råbe. */
.maerke.m-bord {
  background: rgba(36, 26, 23, .1);
  color: var(--sea);
  font-weight: 600;
}

/* ⚠️ TO-GO ER DEN STILLESTE AF DE FIRE (6/9). Den er den mest
   almindelige bestilling, så mærket skal kunne SES uden at råbe:
   en bestilling, der skal LEVERES, har stadig det røde, og et
   bord har blækkets. Sagde to-go lige så meget som leveringen,
   ville de fire typer være lige vigtige — og så er man tilbage
   ved at skulle læse hvert kort. */
.maerke.m-togo {
  background: rgba(36, 26, 23, .06);
  color: var(--muted);
  font-weight: 600;
}

/* ============================================================
   HVOR MANGE SIDDER DER  (20/9)
   ------------------------------------------------------------
   To mærker med samme form og to forskellige budskaber. Det
   rolige er en OPLYSNING — fire personer, der skal dækkes op
   til — og ligner derfor to-go-mærket: samme dæmpede flade.

   Det gule er en ADVARSEL: der kommer flere, end der er bestilt
   mad til. Farven er den samme, gængeren bruger (linje 7395), og
   det er med vilje — begge siger "kig på den her, før maden
   laves". En tredje advarselsfarve ville gøre begge svagere.

   ⚠️ IKKE den røde. Den er leveringens og statussens i forvejen,
   og huset betalte 8/9 for at to slags oplysning så ens ud. */
.maerke.m-pers {
  background: rgba(36, 26, 23, .06);
  color: var(--muted);
  font-weight: 600;
}
.maerke.m-flere {
  background: rgba(214, 158, 32, .18);
  color: #7a5a17;
  font-weight: 700;
}

/* Et bord, personalet har slukket. Mærkatet på det virker ikke,
   og rækken skal se sådan ud — ellers ligner listen i admin en
   liste over borde, der tager imod. */
.admin-raekke.slukket { opacity: .55; }

/* ============================================================
   KØKKEN-KØEN — skærmen, der står tændt ved lugen
   ------------------------------------------------------------
   Den er bygget til én situation: en iPad på en hylde, sollys på
   skærmen, og hænder der er våde eller fedtede. Derfor er den
   ANDERLEDES end resten af admin, og hvert af de tre steder har
   en grund:

     · Kortene er store og har ÉN knap. Resten af admin har fem
       knapper pr. kort, fordi man sidder ved en skærm og har tid.
       Her rammer man med en tommelfinger på vej forbi.
     · Bordnummeret er det største på kortet. Personalet leder
       efter ét tal, når de skal ud med maden — ikke efter et
       navn eller en reference.
     · Ventetiden bliver rød. Det er skærmens eneste alarm, og
       derfor må ingenting andet på den være rødt.

   Se js/admin/koekken.js.
   ============================================================ */

/* Overskriften over en gruppe punkter i søjlen. Kun på computer:
   på en telefon er fanerne en vandret stribe i bunden, og en
   tekst midt i den ville læses som en fane, man ikke kan trykke
   på. */
.fane-gruppe { display: none; }

@media (min-width: 900px) {
  .fane-gruppe {
    display: block;
    padding: 14px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* 55 % hvid rammer 6,3:1 på den mørke søjle. Den skal kunne
       læses, men aldrig konkurrere med punkterne under sig. */
    color: rgba(255, 255, 255, .55);
  }
  /* Den første gruppe står lige under mærket og skal ikke skubbe
     hele listen ned. */
  .faner > .fane-gruppe:first-child { padding-top: 4px; }
}

/* ---- Alle borde: hvem venter, og hvor længe ---- */
.koek-borde {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.koek-bordchip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  border: 1px solid var(--streg);
  border-radius: var(--r-lille);
  background: var(--sand);
  font-size: 13px;
  color: var(--muted);
}
.koek-bordchip b { font-size: 15px; color: var(--sea); }
/* Samme rødt som på kortet: et bord, der har ventet for længe,
   skal kunne findes i striben OG i listen med det samme blik. */
.koek-bordchip.sent {
  border-color: var(--red);
  background: rgba(214, 42, 58, .08);
}
.koek-bordchip.sent b { color: var(--red-tekst); }

/* ---- Ordrekortet ---- */
.koek-kort {
  border: 1px solid var(--streg);
  border-left: 5px solid var(--sea);
  border-radius: var(--r-flade);
  background: #fff;
  padding: 16px 18px;
  margin-top: 14px;
}
.koek-kort.sent { border-left-color: var(--red); }

/* ------------------------------------------------------------
   KØKKENETS OVERBLIK  (29/9, Lesreg)
   ------------------------------------------------------------ */
/* KLAR ER GRØN. Maden er lavet; nu skal den bæres ud. Rød (for
   længe) vinder stadig — et klart bord, der har ventet 25 min, er
   stadig et bord, der har ventet 25 min. */
.koek-kort.status-klar { border-left-color: #1f7a4a; }
.koek-kort.status-klar.sent { border-left-color: var(--red); }
.koek-status {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--sand2);
}
.koek-status.status-tilberedes { background: rgba(176, 120, 30, .14); color: #7a5410; }
.koek-status.status-klar { background: rgba(31, 122, 74, .14); color: #1f6b45; }

/* Mad og drikke hver for sig på kortet — kun når kortet har begge. */
.koek-gruppe {
  margin: 10px 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.koek-gruppe:first-child { margin-top: 0; }
.koek-gruppe.drikke { color: #2a5f8f; }

/* LAV NU: pillerne er Overbliks egne (.prod-pille), så de to
   skærme siger det samme i det samme sprog. */
.koek-lavnu {
  display: grid;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--streg);
  border-radius: var(--r-flade);
  background: #fff;
}
.koek-lavnu-raekke { display: grid; gap: 8px; }
.koek-lavnu-titel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red-tekst);
}
.koek-lavnu-raekke.drikke .koek-lavnu-titel { color: #2a5f8f; }

/* PÅ TELEFONEN MÅ "LAV NU" IKKE SKUBBE KØEN UD AF SKÆRMEN:
   mindre piller, tættere. */
@media (max-width: 600px) {
  .koek-lavnu { padding: 12px; gap: 8px; }
  .koek-lavnu .prod-raekke { gap: 6px; }
  .koek-lavnu .prod-pille { padding: 5px 10px; gap: 6px; }
  .koek-lavnu .prod-antal { font-size: 18px; }
  .koek-lavnu .prod-navn { font-size: 14px; }
}

/* TO SPALTER, NÅR DER ER PLADS. En iPad på højkant (1024) viste
   fire borde ad gangen i én lang kolonne; to spalter viser det
   dobbelte uden at rulle. Rækkefølgen er stadig ældste først —
   læst linje for linje, venstre før højre. */
@media (min-width: 900px) {
  body.personale #koekken-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
  }
  body.personale #koekken-liste > .koek-kort { margin-top: 0; }
  body.personale #koekken-liste > :not(.koek-kort) { grid-column: 1 / -1; }
  body.personale #koekken-liste { margin-top: 14px; }
}

.koek-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
/* Tallet, personalet leder efter. 34 px og ikke 30 som
   .bestil-tid: dér er klokkeslættet det vigtigste, her er det
   bordet. */
.koek-bord {
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
  color: var(--sea);
  font-variant-numeric: tabular-nums;
}
/* Zonen står UNDER bordnummeret og ikke ved siden af: den er en
   retning at gå i, ikke et tal at lede efter. Den findes kun,
   hvis ejeren har sat den — en tom prik efter bordnummeret ser
   ud som noget, der mangler. */
.koek-zone {
  margin-top: 2px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ⚠️ NUMMERET ER EN HENVISNING, IKKE EN ADRESSE  (10/9).
   Bordet er det store på kortet — maden bæres ud efter DET. Står
   nummeret i samme vægt, er der to tal at vælge imellem på et
   kort, der læses på afstand i et køkken. Tabular-nums, så
   #0044 og #0102 står under hinanden i en kø. */
.koek-nr {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--muted); margin-top: 2px;
}
/* ⚠️ URET ER EN PILLE, IKKE EN LINJE (28/8).

   MÅLT på skærmen som den var: ventetiden stod som 18 px tekst
   ved siden af klokkeslættet, altså det samme som en varelinje.
   Det er tallet, køkkenet handler på, og det skal kunne læses fra
   en gryde to meter væk. Klokkeslættet er flyttet ned i foden:
   det er en oplysning til den, der undersøger noget bagefter. */
.koek-ur {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--streg);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
}
.koek-urtegn { display: block; width: 15px; height: 15px; color: var(--muted); }
.koek-urtegn svg { width: 100%; height: 100%; display: block; }
.koek-min { font-size: 20px; font-weight: 700; color: var(--sea); }
/* SKÆRMENS ENESTE ALARM. Derfor er der ikke andet rødt på
   kortet ud over den venstre kant, der følger med. */
.koek-kort.sent .koek-ur {
  background: var(--red);
  border-color: var(--red);
}
.koek-kort.sent .koek-min { color: #fff; }
.koek-kort.sent .koek-urtegn { color: #fff; }
.koek-kl { font-size: 13px; color: var(--muted); }

/* RUNDE 2 er dessert til nogen, der allerede sidder og spiser —
   ikke et nyt bord, der venter på sin frokost. Dæmpet blå og
   ikke rød: det er en oplysning, ikke en alarm. */
.koek-runde {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--sand2);
  border: 1px solid var(--streg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--sea2);
}

.koek-linjer { margin-top: 12px; }
.koek-linje {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: 17px;
  border-bottom: 1px solid var(--streg);
}
.koek-linje:last-child { border-bottom: 0; }
/* Antallet i egen kolonne med fast bredde: "1 ×" og "12 ×" skal
   stå under hinanden, ellers skal øjet lede efter varenavnet i en
   zigzag. */
.koek-linje b {
  flex: 0 0 auto;
  min-width: 42px;
  color: var(--sea);
  font-variant-numeric: tabular-nums;
}

/* NOTEN ER DET VIGTIGSTE PÅ KORTET — "uden remoulade" og
   "allergi" er ikke en detalje. Derfor en farvet flade og ikke
   en linje mere i listen. */
.koek-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-lille);
  background: var(--sand2);
  font-size: 16px;
  color: var(--sea);
}

/* ============================================================
   ALLERGIEN SKAL IKKE KUNNE SKIMMES FORBI
   ------------------------------------------------------------
   Den stod i "Besked" før, mellem "ekstra remoulade" og "vi
   sidder ude bagved" — og et køkken læser den slags i et blik
   midt i en frokost. Forskellen på en middag og en ambulance må
   ikke ligge i, hvor godt nogen nåede at læse.

   Gæsten skriver den i sit eget felt (#bestil-allergi), og
   js/bestilling.js sætter ordet ALLERGI: foran. Kendingen er DET
   ord — skiftes det ét sted, skal det skiftes begge.

   ⚠️ Rødt er skærmens eneste alarm i forvejen: den venstre kant
   på et kort, der har ventet for længe. Allergien får derfor
   FLADEN og ikke en fjerde farve — to slags rødt, der betyder
   noget forskelligt, er ingen alarm.

   Teksten er --red-tekst og ikke --red: den lille skrift falder
   under 4,5:1 med mærkefarven selv. Samme note står ved
   menukortets priser.
   ============================================================ */
.koek-note.allergi {
  background: #fdecec;
  border: 1px solid var(--red);
  color: var(--red-tekst);
  font-weight: 600;
}
.koek-kort.har-allergi {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red);
}

/* ⚠️ DEN NÆSTE HANDLING FYLDER HELE BREDDEN (28/8).

   Den stod som en knap blandt fire ting på den samme linje —
   status, klokkeslæt, beløb, videre, afvis. Skærmen bruges med en
   fedtet finger, mens den anden hånd holder en tallerken, og den
   mest almindelige handling i huset skal være det nemmeste sted
   at ramme. */
.koek-handling { margin-top: 14px; }
/* Dagens facit under køkkenets hoved. Større og mørkere end
   kort-noten over den: den skal kunne læses på afstand af en, der
   står ved komfuret — se noten i js/admin/koekken.js. */
body.personale .koek-dagslinje {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--sea);
}

.koek-handling .koek-knap { width: 100%; }

.koek-bund {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.koek-status {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.koek-kr { font-size: 13px; color: var(--muted); }
.koek-knap { min-height: 54px; font-size: 18px; }
/* Afvis skubbes ud til højre, væk fra det, fingeren sigter efter.
   Den er en undtagelse, ikke et trin. */
.koek-afvis { margin-left: auto; }

/* ------------------------------------------------------------
   DET NYE I KØKKEN-KØEN — SYNLIGT, IKKE KUN HØRLIGT
   ------------------------------------------------------------
   Der er larm i et køkken, og lyden kan være slået fra (browsere
   blokerer den, indtil nogen har rørt skærmen). Markeringen her
   er derfor ikke et blink på to sekunder som på Bestillinger:
   den BLIVER STÅENDE, til personalet trykker kortet videre.

   Et blink, ingen så, er ingen markering. En, der bliver, er en
   huskeseddel — og den forsvinder af sig selv i det sekund,
   nogen har taget sig af ordren, fordi kortet så tegnes om.
   ------------------------------------------------------------ */
.koek-kort.linje-ny {
  box-shadow: 0 0 0 3px rgba(214, 158, 32, .55);
  animation: koek-ny 1.4s ease-out 2;
}
.koek-kort.linje-ny .koek-bord::after {
  content: "NY";
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: var(--brod);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  vertical-align: middle;
}
@keyframes koek-ny {
  from { box-shadow: 0 0 0 3px rgba(214, 158, 32, .55); }
  50%  { box-shadow: 0 0 0 9px rgba(214, 158, 32, .18); }
  to   { box-shadow: 0 0 0 3px rgba(214, 158, 32, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .koek-kort.linje-ny { animation: none; }
}

/* Knappen til lyden og dens forklaring på samme linje. Knappen
   ER tilladelsen — se noten i js/admin/koekken.js — så den skal
   stå, hvor man ser den, når skærmen sættes op om morgenen. */
.lyd-raekke {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lyd-raekke .hjaelp { margin: 0; }
/* ============================================================
   KORTHOVEDET — admin fik et komponentsystem  (26/8)
   ------------------------------------------------------------
   Kunden så femten faner, der lignede femten forskellige sider,
   og holdt spiis' admin op imod: "udseendet i de forskellige
   taps ... er elendigt, hvor spiis ... er langt kønnere."

   Målt, ikke bare troet: 58 blokke forklarende prosa stod som
   brødtekst inde i kortene (26 vare-tekst + 32 hjaelp), og
   overskrifterne var op til 34 px serif — mod spiis' ~22. Det
   er dét, der læses som rod: hvert kort råber sit navn og
   forklarer sig over fire linjer, før indholdet begynder.

   Komponentet er spiis' vane oversat til havnens tema:

     · Titlen siger NAVNET — 22 px, ikke 34.
     · Noten til højre siger KONSEKVENSEN: hvad kortet styrer
       ude på siden. Én linje, dæmpet. Ikke hvad felterne
       hedder — det kan man se.
     · Alt andet prosa er enten slettet, kogt ned til én
       hjaelp-linje under det felt, det handler om — eller
       bevaret, fordi en prøve eller en aftale holder fast i
       ordene (Salg-fanens "gennem hjemmesiden", Menukortets
       "kortet ved lugen").

   Scopet til body.personale: gæstesidens kort har deres egne
   proportioner, og de skal ikke flytte sig.
   ============================================================ */
body.personale .kort-hoved {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
body.personale .kort-hoved .h-panel { margin: 0; }

/* 22 px overalt i admin — også de h2'er, der endnu ikke står i
   et kort-hoved. Én regel, så en glemt fane ikke råber. */
body.personale .kort .h-panel { font-size: 22px; }
body.personale .kort h3 { font-size: 17px; }

body.personale .kort-note {
  color: var(--muted);          /* #6f5b55 på hvid: 5,97:1 */
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  flex: 1 1 12rem;
  max-width: 36rem;
  margin-left: auto;
}
/* På en telefon ombrydes hovedet, og en højrestillet note under
   en venstrestillet titel ligner en fejl. */
@media (max-width: 599px) {
  body.personale .kort-note { text-align: left; margin-left: 0; }
}

/* ⚠️ ER TITLEN SKJULT, SKAL NOTEN RYKKE MED (27/8).

   .dobbelt-titel skjuler kortets h2, når den siger det samme som
   fanens navn i hovedet — ellers stod "MENUKORT" to gange. Men
   noten blev stående helt ude til højre, og så indledtes fanen af
   en løs, dæmpet sætning, der svævede i luften over indholdet med
   ingenting til venstre for sig.

   MÅLT på fem faner: Åbningstider, Salg, Køkken-kø, Menukort og
   Bestillinger åbnede alle sådan. Den ser ud som en fejl, fordi
   den ER en: en billedtekst uden et billede.

   Noten er stadig sand og skal blive — den siger, hvad kortet
   styrer ude på siden. Den flytter bare hen, hvor titlen stod. */
body.personale .kort-hoved:has(> .h-panel.dobbelt-titel) .kort-note {
  text-align: left;
  margin-left: 0;
  flex: 0 1 auto;
}

/* ------------------------------------------------------------
   FELTERNE — til fedtede fingre, ikke til en gæst i ro
   ------------------------------------------------------------
   Admin arvede gæstesidens felter: 8 px runding, hvid på hvid,
   ingen mindstehøjde. Personalet står ved lugen med våde hænder;
   spiis' felter er høje, varme og bløde, og det er den rigtige
   form til opgaven. Farverne er stadig husets: fyldet er sandet,
   ikke spiis' creme.

   44 px er WCAG's mindste trykflade — og "mindst 44, gerne mere"
   var også spiis-dokumentets eget tal for sol og sand på
   fingrene. Checkbokse og radioknapper er IKKE med: de har deres
   egen form (.afkryds), og en 44 px høj checkbox er bare en stor
   firkant.
   ------------------------------------------------------------ */
body.personale .kort :is(
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], input[type="time"],
  input[type="tel"], input[type="search"], select, textarea) {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--streg);
  background: var(--sand);
}
body.personale .kort :is(input, select, textarea):focus-visible {
  background: #fff;
}
/* select havde ingen grundform overhovedet — browserens egen,
   13 px og flad. Nu følger den felterne. */
body.personale .kort select {
  font: 400 16px/1.45 var(--brod);
  padding: 8px 12px;
  color: var(--sea);
}
body.personale .kort h3.h-panel { font-size: 18px; }

/* ------------------------------------------------------------
   RÆKKENS KNAPPER ER STILLE — PANELETS HOVEDHANDLING ER RØD
   ------------------------------------------------------------
   Menukortets 21 kategorier har hver en Gem-knap, og hver af de
   242 varer har en til. Da alle .knap i admin blev røde (24/8),
   blev fanen til en væg af røde piller — og så betyder rød
   ingenting længere. Skærmbilledet 26/8 viste det tydeligt:
   øjet kunne ikke finde panelets EGEN handling mellem to hundrede
   ens knapper.

   Reglen er derfor: en knap, der hører til ÉN række i en liste,
   er stille — hvid flade, blækkant. Den røde er forbeholdt
   panelets hovedhandling ("Gem priserne", "Tilføj bord") og den
   valgte fane i søjlen. Fare-knapper beholder deres eget udtryk:
   de betyder noget, og det skal de blive ved med.

   Selektoren er KONTEKSTEN (rækken/kategorihovedet), ikke en ny
   klasse: js-filerne skal ikke rettes for at følge reglen, og en
   ny liste arver den af sig selv. */
body.personale :is(.admin-raekke, .kat-hoved) .knap {
  background-color: #fff;
  color: var(--sea);
  border: 1px solid rgba(36, 26, 23, .24);
  box-shadow: none;
}
body.personale :is(.admin-raekke, .kat-hoved) .knap:hover {
  background-color: var(--sand);
}
body.personale :is(.admin-raekke, .kat-hoved) .knap.fare {
  background-color: transparent;
  color: var(--red-tekst);
  border: 0;
  box-shadow: inset 0 0 0 1.5px var(--red-tekst);
}
body.personale :is(.admin-raekke, .kat-hoved) .knap.fare:hover {
  background-color: var(--red);
  color: #fff;
}

/* Footeren siger "Se hjemmesiden" — det gør søjlen også, og på en
   telefon gør topbjælken. Når man ARBEJDER, er den mørke stribe
   derfor kun en væg for enden af hver fane. Login-skærmen
   beholder den: dér er der ingen søjle. */
body.personale.arbejder footer { display: none; }

/* ---- Månedens noter som liste (admin-kalenderen) ---- */
.noter-titel { margin-top: 22px; font-size: 18px; margin-bottom: 2px; }
.noter-under { margin: 0; font-size: 13px; color: var(--muted); }
.noter-linje {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  margin-top: 8px;
  border: 1px solid var(--streg);
  border-radius: var(--r-lille);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.noter-linje:hover { background: var(--sand); }
.noter-linje strong { flex: 0 0 auto; white-space: nowrap; }
/* Én linje pr. note, også når noten er tre sætninger: listen er
   en indholdsfortegnelse, og hele teksten står i dagens panel. */
.noter-linje span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

/* ============================================================
   KALENDEREN: DAGENS STYRING
   ------------------------------------------------------------
   Den halvt åbne dag — se supabase/dagsregler.sql og
   js/admin/kalender.js. Alt er scopet til body.personale, som
   resten af admin: css/style.css bærer stadig ni gæstesider.
   ============================================================ */
body.personale .dag-styring {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--streg);
}
body.personale .dag-under {
  margin: 20px 0 4px;
  font-size: 17px;
}
body.personale .dag-under:first-child { margin-top: 0; }

/* FORSLAGET. Den eneste blok på fanen, der TILBYDER noget, og
   den skal skille sig ud fra felterne omkring. Sandfarvet og
   ikke rød: det er en hjælp, ikke en advarsel. */
body.personale .dag-forslag {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--streg);
  border-left: 4px solid var(--red);
  border-radius: var(--r-lille);
  background: var(--sand2);
}
body.personale .dag-forslag-tekst { flex: 1 1 18rem; }

/* DE TO VEJE ved siden af hinanden. Under hinanden ville de
   ligne to indstillinger i en liste; ved siden af hinanden ligner
   de et valg mellem to ting, og det er dét, de er. */
body.personale .dag-par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
body.personale .dag-vej {
  padding: 14px 16px;
  border: 1px solid var(--streg);
  border-radius: var(--r-lille);
  background: var(--paper);
}
body.personale .dag-vej.er-lukket {
  border-color: var(--red);
  background: rgba(214, 42, 58, .06);
}
body.personale .dag-vej-navn { font-weight: 700; }
body.personale .dag-vej-stand { margin: 6px 0 10px; color: var(--muted); }

body.personale .dag-tider {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

/* ⚠️ Den ene linje på fanen, der siger "gæsterne kan læse det
   her". Den skal ses, ikke findes. */
body.personale .hjaelp.advarsel {
  color: var(--red-tekst);
  font-weight: 600;
}

/* ---- NOTEN, DER FOLDER SIG SAMMEN ----

   MÅLT på Baglokale-fanen: fire kort gav fire åbne notefelter,
   tre af dem tomme og med den samme grå pladsholdertekst. Feltet
   fyldte lige så meget som gæstens navn, dato og antal tilsammen
   — og det er ikke arbejde, det er et sted at skrive noget, hvis
   man vil.

   Har noten indhold, foldes den IKKE: så er den en oplysning om
   sagen og skal kunne læses uden et tryk. Den regel bor i
   js/admin/udlejning.js. */
body.personale .note-fold { margin-top: 10px; }
body.personale .note-fold > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
  /* ⚠️ 8 px OG IKKE 4: MÅLT til 28 px høj af gennemgangen af
     admin (31/8), altså under husets nedre trykmål på 30. Det er
     den fold, personalet åbner hver gang de skriver en note på en
     bestilling — den skal kunne rammes med en fedtet finger på en
     iPad. Luften er lodret padding, ikke en større skrift:
     teksten er dæmpet med vilje, for noten er ikke handlingen. */
  padding: 8px 0;
}
body.personale .note-fold > summary::-webkit-details-marker { display: none; }
/* --sea er admins blæk. Der findes ingen --blaek; en variabel,
   der ikke findes, ville bare arve og se "næsten rigtig" ud. */
body.personale .note-fold > summary:hover { color: var(--sea); }
body.personale .note-fold[open] > summary { margin-bottom: 4px; }

/* ---- MÅNEDSNETTET: dagens tilstand på afstand ---- */
body.personale .maaned-stand {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
body.personale .maaned-stand.halv { color: var(--red-tekst); }
body.personale .maaned-stand.lukket { color: var(--red-tekst); }
body.personale .maaned-stand.tider { color: var(--muted); }
/* ⚠️ DEN VALGTE DAG HAR MØRK FLADE, og mærkefarven forsvinder i
   den. MÅLT på et skærmbillede: --red-tekst (180,31,46) på den
   valgte dags flade (36,26,23) er 2,57:1 — mærket var der, og man
   kunne ikke læse det. Hver regel så rigtig ud for sig; det er
   sammensætningen, der er forkert, og den findes kun ved at måle.
   Prøven i tests/admin-kalender.spec.js læser kontrasten i BEGGE
   tilstande. */
body.personale .maaned-dag.valgt .maaned-stand { color: #ffd9dc; }
body.personale .maaned-dag.valgt .maaned-stand.tider { color: #e8ded9; }

/* ---- KANTEN I VENSTRE SIDE ----
   Den siger "der er noget særligt her" uden at tage plads fra
   navnene. Samme greb som køkken-køens alarm.

   ⚠️ RÆKKEFØLGEN ER REGLEN. Alle fire vejer det samme (0,2,1), så
   det er den SIDSTE, der slår igennem — og de skal stå efter,
   hvor alvorlige de er. En dag med fest OG halvt lukket skal vise
   den røde: festen kan man læse i pillen, men "kun ud af huset"
   er dét, personalet skal svare på i telefonen.

   ⚠️ OG GRØN BETYDER HER "DER ER ET PROGRAM", ikke "det gik godt".
   Det er den samme grønne som mærket m-aftalt bærer på
   forespørgselskortet — altså husets "det her er på plads" — og
   ikke knappernes ✓ Færdig-grønne. */
/* ⚠️ FARVEN STÅR ÉT STED, OG FORKLARINGEN LÅNER DEN.
   Første udgave gav .kal-proeve sin egen baggrund og regnede med
   at arve kanten — men reglerne her er scopet til .maaned-dag,
   så prøverne kom ud som fire ENS blege firkanter. En
   tegnforklaring, der ikke forklarer noget. Set på et skud, ikke
   fanget af prøven.

   Skrev vi farverne af i en egen regel, ville forklaringen love
   én farve og nettet vise en anden, første gang en af de fire
   blev rettet. Derfor står de to selektorer i den SAMME regel. */
body.personale .maaned-dag.er-tider,
body.personale .kal-proeve.er-tider { box-shadow: inset 3px 0 0 var(--streg); }
body.personale .maaned-dag.har-fest,
body.personale .kal-proeve.har-fest { box-shadow: inset 3px 0 0 #2f8a5b; }
body.personale .maaned-dag.er-halv,
body.personale .kal-proeve.er-halv { box-shadow: inset 3px 0 0 var(--red); }
body.personale .maaned-dag.er-lukket,
body.personale .kal-proeve.er-lukket { box-shadow: inset 3px 0 0 var(--red-dyb); }

/* ---- TEGNFORKLARING TIL MÅNEDEN  (9/9) ----
   ⚠️ PRØVERNE ER DE SAMME FIRE KLASSER, dagene bruger, så farven
   kommer ét sted fra. Skrev vi farverne af her, ville
   forklaringen love én farve og nettet vise en anden, første
   gang en af de fire blev rettet — og begge ville se rigtige ud
   for sig selv. Derfor arver .kal-proeve dagens egen regel og
   sætter kun MÅLENE. */
body.personale .kal-sum {
  margin: 8px 0 0; font-size: 13px; color: var(--sea);
  font-variant-numeric: tabular-nums;
}
body.personale .kal-forklaring {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 0;
}
body.personale .kal-forklar {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
}
body.personale .kal-proeve {
  width: 14px; height: 14px; border-radius: 4px;
  background: var(--sand2); flex: none;
}
body.personale .kal-tegn { font-size: 13px; line-height: 1; }

/* ⚠️ DEN VALGTE DAG HAR MØRK FLADE, og pillernes farver forsvinder
   i den — samme måling som mærket ovenfor. Pillerne bliver derfor
   lyse på den valgte dag; farven har allerede gjort sit arbejde,
   da man trykkede. */
body.personale .maaned-dag.valgt .maaned-pille,
body.personale .maaned-dag.valgt .maaned-ret {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
body.personale .maaned-dag.valgt .maaned-tal,
body.personale .maaned-dag.valgt .maaned-flere { color: #e8ded9; }
body.personale .maaned-dag.valgt .mt-retter { color: #fff; }
body.personale .maaned-dag.valgt .maaned-maerke.er-fuldt { color: #ffd9dc; }

/* ============================================================
   BESTILLINGER: DAGENS STYREPULT
   ------------------------------------------------------------
   Kundens billeder (26/8). Alt er scopet til body.personale —
   css/style.css bærer stadig ni gæstesider.

   Admin er computer- og iPad-først: knapperne står som en RÆKKE
   og ikke som en rulleliste. På en skærm er et valg, man kan se,
   bedre end et, man skal åbne.
   ============================================================ */
body.personale .bestil-styr {
  margin: 6px 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--streg);
}
body.personale .bestil-dage {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
body.personale .bestil-dagnavn {
  padding: 0 14px;
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap;
}
/* Pilene er kvadratiske, så de ikke ligner ord.

   ⚠️ OG HØJDEN HØRER HER SAMMEN MED BREDDEN  (17/9). Kun
   min-width var sat, så pilene faldt tilbage på .knap.lille's
   36 px og stod otte pixels lavere end segmentgruppen ved siden
   af dem — i SAMME filterrække. Det kan ingen sætte ord på, men
   øjet ser det: to kontroller, der ikke flugter. MÅLT I
   BROWSEREN; i koden lignede det en færdig regel.
   Se prøven "kontrollerne i en filterrække flugter". */
body.personale .knap.bestil-pil { min-width: 44px; min-height: 44px; padding: 0 12px; }
body.personale .knap.bestil-pil:disabled { opacity: .4; cursor: default; }
/* Den valgte knap er den ENESTE mørke i rækken. To mørke ville
   være to valg, og der er kun ét. */
body.personale .bestil-dage .knap.valgt {
  background: var(--sea);
  border-color: var(--sea);
  color: #fff;
}

body.personale .bestil-sum {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* ⚠️ LINJEN OM DE ANDRE DAGE. Den er grunden til, at dagsvisningen
   er forsvarlig — uden den ville en bestilling til på fredag ligge
   uset, til fredag kom. Derfor må den skille sig ud. */
body.personale .bestil-andre {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--red);
  border-radius: var(--r-lille);
  background: rgba(214, 42, 58, .06);
}
body.personale .bestil-andre-navn { font-weight: 700; color: var(--red-tekst); }

body.personale #bestil-produktion { margin-top: 14px; }

body.personale .bestil-tal {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
body.personale .bestil-tal-pille {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--streg);
  background: var(--paper);
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
}
body.personale .bestil-tal-pille.haster {
  border-color: var(--red);
  background: rgba(214, 42, 58, .08);
  color: var(--red-tekst);
}
body.personale .bestil-tal-pille.klar {
  border-color: #2f6b46;
  background: rgba(47, 107, 70, .08);
  color: #245537;
}
/* "🚗 N skal køres ud" — se noten i js/admin/bestillinger.js.
   ⚠️ --red-tekst og ikke --red: 14 px på en lys flade. Husets
   lyse rød måler for lidt i den størrelse — samme grund som de
   fem andre steder, der bærer den note. Den deler farve med
   haster-pillen med vilje: begge siger "det her mangler", og to
   nuancer rød ville læses som to forskellige slags. */
body.personale .bestil-tal-pille.lev {
  border-color: var(--red);
  background: rgba(214, 42, 58, .08);
  color: var(--red-tekst);
}
/* 🚗-tallet er en knap (7/10): et tryk viser kun leveringerne. Knappens
   egen ramme og skrift må ikke slå pillens igennem. */
body.personale button.bestil-tal-pille {
  font-family: inherit;   /* ikke `font:` — den ville slå pillens 700 og 14 px */
  cursor: pointer;
}
body.personale button.bestil-tal-pille:hover { background: rgba(214, 42, 58, .14); }

/* ---- Leveringens køretider (8/10) — Åbningstider → Levering ----
   Én rubrik pr. postnummer med zonens navn. Titlen er en etiket for en
   GRUPPE af felter (ikke ét), derfor en span med etikettens udseende. */
body.personale .felt-titel {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 6px;
}
body.personale .koeretider {
  display: grid;
  /* 220 og ikke mindre: ved 190 brød "2690 Karlslunde" over to linjer
     ved siden af sin rubrik (målt på et skud 8/10). */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 14px;
}
body.personale label.koeretid {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
}
body.personale label.koeretid input {
  width: 4.5em;
  margin-left: auto;
  text-align: right;
}

/* ---- De to grupper i listen ---- */
body.personale .bestil-gruppe {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 10px;
  font-size: 19px;
}
body.personale .bestil-gruppe-note {
  font-family: var(--brod);
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

/* ============================================================
   BAGLOKALET — FANENS EGNE FORMER  (28/8)
   ------------------------------------------------------------
   Kunden sendte fire skærmbilleder af en færdig udlejningsside
   og bad om, at fanen skulle se sådan ud "og gerne bedre".

   ⚠️ ALT ER SCOPET TIL body.personale. css/style.css bærer
   stadig ni gæstesider; en regel uden scope laver dem om uden at
   nogen har bedt om det. Det er sket før med .bestil-kort.
   ============================================================ */

/* ---- SE PÅ DET HER FØRST ----
   Kortet er rødt i kanten og ikke i fladen: en rød flade bag
   fire linjer tekst gør dem alle sammen lige vigtige, og så er
   ingen af dem vigtige. */
body.personale .obs-kort {
  border-left: 4px solid var(--red);
  background:
    linear-gradient(180deg, rgba(214, 42, 58, .05), rgba(214, 42, 58, 0) 120px),
    var(--paper);
}
body.personale .obs-linje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 0;
  border-top: 1px solid var(--streg);
}
body.personale .obs-linje:first-child { border-top: 0; padding-top: 4px; }
body.personale .obs-tekst {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body.personale .obs-tekst strong { font-size: 15px; font-weight: 600; }
body.personale .obs-haster .obs-tekst strong { color: var(--red-tekst); }
body.personale .obs-tekst .vare-tekst {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
body.personale .obs-linje > .knap { flex: 0 0 auto; }

/* ---- FORLØBET ----
   Fire kort på en række, og de bliver på én række på en iPad.
   På en telefon ruller de sidelæns i stedet for at brække til
   to linjer: fire trin i to rækker læses ikke som ét forløb. */
body.personale .forloeb {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 4px;
}
@media (max-width: 620px) {
  body.personale .forloeb {
    grid-template-columns: repeat(4, 46vw);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  body.personale .trinkort { scroll-snap-align: start; }
}
body.personale .trinkort {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 12px 12px 11px;
  border: 1px solid var(--streg);
  border-radius: var(--r-lille);
  background: var(--paper);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
body.personale .trinkort:hover { border-color: var(--sea3); }
body.personale .trinkort:active { transform: translateY(1px); }
/* Pilen mellem trinene. Den peger fremad og siger, at det er ét
   forløb — fire løse kasser ville bare være fire tal. */
body.personale .trinkort + .trinkort::before {
  content: "›";
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--streg);
  font-size: 20px;
  line-height: 1;
}
body.personale .trinkort-nr {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
body.personale .trinkort-tal {
  font: 400 30px/1 var(--display);
  color: var(--sea);
}
body.personale .trinkort-navn { font-size: 14px; font-weight: 600; }
body.personale .trinkort-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
/* Et trin uden noget i falmer. Det skal stadig kunne ses — det
   er en del af forløbet — men det er ikke arbejde i dag. */
body.personale .trinkort-tom { background: var(--sand); }
/* ⚠️ TRIN 3 MED INDHOLD ER EN ADVARSEL, IKKE ET TAL.
   "Aftalt, men ikke låst" er en dobbeltbooking på vej. */
body.personale .trinkort-advar {
  border-color: rgba(214, 42, 58, .5);
  background: #fff6f6;
}
body.personale .trinkort-advar .trinkort-tal,
body.personale .trinkort-advar .trinkort-note { color: var(--red-tekst); }
body.personale .trinkort.valgt {
  border-color: var(--sea);
  box-shadow: inset 0 0 0 1px var(--sea);
}

/* ---- TEGNFORKLARINGEN ---- */
body.personale .tegnforklaring {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--streg);
}
body.personale .tegn {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
}
body.personale .tegn strong { font-weight: 600; }
body.personale .tegn-tegn { font-size: 13px; line-height: 1; }
body.personale .tegn-note { color: var(--muted); font-size: 12px; }

/* ---- FILTERCHIPS ----
   ⚠️ EGEN KLASSE, IKKE .chip. Gæstesidens .chip er ustyret af
   body.personale og bruges på ni sider; låner vi den her, ændrer
   en rettelse i admin, hvordan menukortets kategorier ser ud
   nede ved vandet. */
body.personale .sag-filtre {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 16px;
}
body.personale .sag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--streg);
  border-radius: 999px;
  background: var(--paper);
  color: var(--sea);
  font: 600 13px/1 var(--brod);
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
body.personale .sag-chip:hover { border-color: var(--sea3); }
body.personale .sag-chip-tal {
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
}
body.personale .sag-chip.valgt {
  background: var(--sea);
  border-color: var(--sea);
  color: #fff;
}
body.personale .sag-chip.valgt .sag-chip-tal { color: rgba(255, 255, 255, .72); }
/* Dagfilteret er rødt: det er det eneste af chipsene, der kan
   skjule noget, man ikke selv har valgt at skjule. */
body.personale .sag-chip.dag-chip {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* ---- KORTENES EGET LAG ---- */
body.personale .ventet {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  align-self: center;
}
body.personale .ventet-sen { color: var(--red-tekst); }
body.personale .sag-varsler {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 2px;
}
body.personale .sag-varsler > p { margin: 0; }
/* Den ene linje om, hvad der skal ske nu. Den står lige over
   knapperne, fordi det er dér, hånden er på vej hen. */
body.personale .naeste-skridt {
  margin: 12px 0 0;
  padding: 9px 12px;
  border-radius: var(--r-lille);
  background: var(--sand2);
  font-size: 13px;
  font-weight: 600;
  color: var(--sea2);
}

/* ⚠️ "AFTALT, IKKE LÅST" SKAL SE ANDERLEDES UD END "LEJET UD".
   Målt på et skud: dagen stod med en rød stribe på hvid bund og
   læste dermed som MINDRE markeret end de bekræftede, der har
   sandfarvet flade — stik imod, hvad der haster. Den stiplede
   kant siger "ikke endelig"; den fulde siger "væk".

   Scopet til #lokale-net: kalenderfanen bruger .er-halv om en
   dag, der er halvt åben, og det er en anden oplysning. */
body.personale #lokale-net .maaned-dag.er-halv {
  background: #fff6f6;
  border-style: dashed;
  border-color: rgba(214, 42, 58, .5);
}
/* Et trin uden noget i skal kunne LÆSES som et nul. Første udgave
   brugte --streg (14 % sort), og tallet var i praksis usynligt —
   så lignede kortet et, der manglede data. */
body.personale .trinkort-tom .trinkort-tal { color: rgba(36, 26, 23, .3); }

/* Hovedets række på Køkken-kø: kontakten til venstre, vejen til
   bordene til højre. Kontakten står UDEN for folden, fordi den er
   den ene indstilling, der bruges under pres. */
body.personale .koek-hoved-raekke {
  display: flex;
  align-items: center;
  gap: 12px 18px;
  flex-wrap: wrap;
  margin-top: 14px;
}
body.personale .koek-hoved-raekke .afkryds { margin: 0; flex: 1 1 auto; }
body.personale .koek-hoved-raekke > .knap { flex: 0 0 auto; }

/* Allergien i ⚠️-kortet får fladen, ikke en fjerde farve — se den
   lange note ved .koek-note.allergi om hvorfor. */
body.personale .obs-allergi {
  background: #fdecec;
  border-radius: var(--r-lille);
  padding-left: 12px;
  padding-right: 12px;
}
body.personale .obs-allergi .obs-tekst strong { color: var(--red-tekst); }
body.personale .obs-allergi + .obs-linje { border-top-color: transparent; }

/* Striben er en genvej nu, ikke en gentagelse: et tryk ruller ned
   til bordets ældste åbne kort. Markeringen holder i halvandet
   sekund — lige nok til at øjet kan følge med, uden at kortet
   bliver ved med at råbe. */
body.personale .koek-bordchip { cursor: pointer; font-family: inherit; }
body.personale .koek-bordchip:hover { border-color: var(--sea3); }
body.personale .koek-kort.peget-paa {
  box-shadow: 0 0 0 3px rgba(214, 42, 58, .35);
  transition: box-shadow .2s;
}

/* ============================================================
   MENUKORTET: OVERBLIKKET OVER 242 VARER  (28/8)
   ------------------------------------------------------------
   Kunden bad om, at fanen skulle være "mere overskuelig" og
   kunne "passe med antal, melde udsolgt, få antal tilbage".

   ⚠️ ALT ER SCOPET TIL body.personale — css/style.css bærer
   stadig ni gæstesider.
   ============================================================ */
body.personale .menu-status {
  padding: 16px 16px 14px;
  border: 1px solid var(--streg);
  border-radius: var(--r-flade);
  background: var(--sand);
  margin-bottom: 18px;
}

/* Fem tal, og hvert af dem er en knap: tallet er også vejen hen
   til arbejdet, ikke bare noget at kigge på. */
body.personale .menu-tal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
}
body.personale .menu-tal-felt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  padding: 11px 13px 10px;
  border: 1px solid var(--streg);
  border-radius: var(--r-lille);
  background: var(--paper);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color .12s, box-shadow .12s;
}
body.personale .menu-tal-felt:hover { border-color: var(--sea3); }
body.personale .menu-tal-tal {
  font: 400 28px/1 var(--display);
  color: var(--sea);
}
body.personale .menu-tal-navn { font-size: 14px; font-weight: 600; }
body.personale .menu-tal-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}
/* Rødt kun når tallet betyder noget I DAG: udsolgt og få tilbage
   skifter flere gange om dagen, hvor en manglende pris er et
   stykke arbejde, der ligger og venter. */
body.personale .menu-tal-felt.varsel {
  border-color: rgba(214, 42, 58, .45);
  background: #fff6f6;
}
body.personale .menu-tal-felt.varsel .menu-tal-tal,
body.personale .menu-tal-felt.varsel .menu-tal-note { color: var(--red-tekst); }
body.personale .menu-tal-felt.valgt {
  border-color: var(--sea);
  box-shadow: inset 0 0 0 1px var(--sea);
}

/* Søgefeltet er det vigtigste redskab på et kort med 242 varer:
   "hvor er pølsen henne" er tyve sekunders rulning uden det. */
body.personale .menu-soeg { margin-top: 12px; }
body.personale .menu-soeg input {
  width: 100%;
  min-height: 44px;
}
body.personale .menu-massehandling {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}
body.personale .menu-massehandling .hjaelp { margin: 0; flex: 1 1 220px; }

/* ---- FOLDEN ----
   Overskriften alene er ikke nok til at vælge en kategori fra:
   "Burgere" siger ikke, om der er noget at se på i den i dag.
   Tallene gør. */
body.personale .menu-fold {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 8px 12px;
  border: 1px dashed var(--streg);
  border-radius: var(--r-lille);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}
body.personale .menu-fold:hover { border-color: var(--sea3); background: var(--sand); }
body.personale .menu-fold.aaben { border-style: solid; }
body.personale .menu-fold-pil { color: var(--sea); font-size: 12px; }
/* Kategoriens ansigt, det SAMME som gæsten ser (js/menu-emoji.js).
   Ingen ny skriftstørrelse: 20px er foldenavnets egen, og
   tests/typografi.spec.js har et loft, der ikke må vokse. */
body.personale .menu-fold-tegn {
  flex: none;
  font-size: 20px;
  line-height: 1;
}
body.personale .menu-fold-navn {
  flex: 1 1 auto;
  font-family: var(--display);
  font-size: 20px;
  color: var(--sea);
}
body.personale .menu-fold-antal { font-weight: 600; color: var(--sea); }
body.personale .menu-fold-varsel { color: var(--red-tekst); font-weight: 600; }
body.personale .menu-fold-note { color: var(--muted); }
/* En foldet kategori står tættere: 21 overskrifter med hver sin
   luft er stadig en skærm at rulle igennem. */
body.personale .menu-gruppe.foldet { margin-bottom: 8px; }
/* Er den ÅBEN, hører folden til hovedet lige under: samme kant,
   ingen luft imellem. Ellers læses linjen som en overskrift over
   den NÆSTE kategori — målt på et skud, hvor "14 varer · 2
   udsolgt" stod tættere på det næste navn end på sit eget. */
body.personale .menu-fold.aaben {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
  background: var(--sand);
}
body.personale .menu-fold.aaben + .kat-hoved { margin-top: 0; }

/* Få tilbage skal kunne SES, ikke læses. Et tal i et felt ligner
   enhver anden værdi, og med 242 rækker ruller man forbi det.
   Grænsen er gæstesidens: js/skal/menukort.js skriver "Kun N
   tilbage" fra og med fem. */
body.personale input.antal-faa {
  border-color: rgba(214, 42, 58, .55);
  background: #fff6f6;
  color: var(--red-tekst);
  font-weight: 700;
}
body.personale input.antal-tom {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
  font-weight: 700;
}

/* ⚠️ HVAD OG HVOR MANGE ER DET, KØKKENET LÆSER  (29/8)
   Kundens ord: "det er utydeligt hvad for noget mad der er
   bestilt hvor mange hvornår." Antallet stod i samme størrelse
   som varenavnet, og prisen i den modsatte kant — på en bred
   skærm er der 500 px imellem, så øjet skal rejse for hver linje. */
body.personale .bestil-linje { align-items: baseline; }
body.personale .bestil-antal-tal {
  flex: 0 0 auto;
  min-width: 52px;
  font-size: 19px;
  font-weight: 700;
  color: var(--sea);
  font-variant-numeric: tabular-nums;
}
body.personale .bestil-vare { font-size: 17px; }
/* Prisen er dæmpet: køkkenet skal lave maden, ikke regne. Den
   skal kunne læses ved lugen, ikke findes fra en gryde. */
body.personale .bestil-linjepris {
  font-size: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Summen er DEN, der siges ved lugen. */
body.personale .bestil-sum {
  border-top: 1px solid var(--streg);
  margin-top: 4px;
  padding-top: 8px;
}
body.personale .bestil-sum .bestil-vare {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
body.personale .bestil-sum .bestil-linjepris {
  font-size: 18px;
  font-weight: 700;
  color: var(--sea);
}
/* ⚠️ ADVARSLEN SKAL VINDE OVER DÆMPNINGEN. `.fejl-tekst` (0,1,0)
   tabte til `body.personale .bestil-linjepris` (0,2,1), så dagens
   billede på Borde-fanen bar klassen og stod alligevel i den
   dæmpede brune — en linje, der siger "3 af 3 borde booket",
   lignede en helt almindelig dag. Klassen sad korrekt hele tiden;
   det var STILEN, der ikke slog igennem. Husets egen regel: mål
   den BEREGNEDE farve, ikke klassen. */
body.personale .bestil-linjepris.fejl-tekst { color: var(--red-tekst); }

/* ============================================================
   MÆRKET — DET SAMME PÅ ALLE SIDER  (29/8)
   ------------------------------------------------------------
   Kundens ord: "vi aldrig fik logo tingen live med det nye logo
   der alle steder."

   MÅLT: den ovale krans lå på de NI sider fra designbundtet, mens
   de otte ældre — bestil/, menu.html, bord/, selskaber/ og resten
   — stod med "MOSEDE HAVNECAFE" som ren tekst. To mærker på det
   samme hus, og gæsten går mellem dem i ét klik.

   ⚠️ FARVEN ER LOGOETS, IKKE SIDENS. Kransen bruger var(--red) på
   de nye sider, men her i style.css er --red #d1462f og ikke
   designets #d62a3a — så teksten i kransen ville få én rød og
   stregerne en anden, i det samme mærke. Et logo skifter ikke
   farve med et tema; tallet står derfor fast.
   ============================================================ */
/* Kransen er den RUNDE fra intro-animationen nu (300-net, blå
   inderring og bølge) — ikke ovalen med undertitlen. Tekstens tal
   er introens egne; bredden er sat, så mærket fylder samme HØJDE
   i bjælken som ovalen gjorde (bredde x 0,7), ellers vokser den. */
.crest { width: 100%; height: auto; display: block; }
.crest .ct {
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  font-size: 18.5px;
  letter-spacing: .19em;
  fill: #d62a3a;
}
/* ⚠️ EST. 2025 ER BLÅ, IKKE RØD — og det er logoets egen blå
   (#2a5f8f), den samme som inderringen. Hele den marineblå familie
   er ellers forbudt i stilarkene siden 29/8; her hører den til, for
   et logo skifter ikke farve med et tema. Tallene er Mikkels egne
   fra intro-filen (3/9): 14,5 px og .19em, altså en anelse mindre
   end ringtekstens 18,5 px. */
.crest .est { font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  font-size: 14.5px; letter-spacing: .19em; fill: #2a5f8f; }
/* Kransen er hvid indeni og læses derfor både på heroens foto og
   på den lyse bjælke, når den klæber. Skyggen er kun til fotoet:
   uden den forsvinder den hvide kant i en lys himmel. */
a.logo.maerke {
  width: 55px;
  flex: none;
  line-height: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
  transition: filter .4s;
}
#hd.stuck a.logo.maerke { filter: none; }
@media (max-width: 480px) { a.logo.maerke { width: 46px; } }

/* ============================================================
   TILMELDINGER: ARRANGEMENTSVÆLGEREN  (30/8)
   ------------------------------------------------------------
   Chipsene er knapper, ikke pynt: personalet står i døren og skal
   ramme den rigtige med en finger, mens den anden hånd holder en
   liste. 44 px høj, som resten af admins felter.
   ⚠️ Scopet til body.personale — css/style.css bærer stadig ni
   gæstesider, og en regel uden scope laver hele admin om.
   ============================================================ */
body.personale .arr-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;min-height:44px;margin-bottom:8px;padding:10px 14px;
  border:1px solid rgba(36,26,23,.14);border-radius:var(--r-lille);
  background:var(--sand);color:var(--sea);font:inherit;text-align:left;cursor:pointer}
body.personale .arr-chip b{font-size:15px;font-weight:600}
body.personale .arr-chip span{font-size:13px;color:var(--muted)}
body.personale .arr-chip.valgt{border-color:var(--red);background:var(--red-svag,rgba(214,42,58,.07))}
body.personale .arr-chip.valgt b{color:var(--red-tekst)}


/* ============================================================
   ET HELT KORT, DER KAN FOLDES  (30/8)
   ------------------------------------------------------------
   Kortets eget hoved er knappen. Der er ingen ekstra overskrift
   og ingen ekstra linje — pilen sætter sig ved siden af noten,
   hvor øjet i forvejen leder efter kortets tilstand.

   ⚠️ Scopet til body.personale som alt andet admin-tema:
   css/style.css bærer stadig gæstesider, og en regel på .kort
   uden scope ville ramme dem.
   ============================================================ */
body.personale details.kort-fold > summary.kort-hoved {
  cursor: pointer;
  list-style: none;
  /* Uden den her kan man ramme pilen og ikke overskriften på en
     telefon — hele hovedet skal være trykfladen. */
  user-select: none;
}
body.personale details.kort-fold > summary.kort-hoved::-webkit-details-marker {
  display: none;
}
body.personale details.kort-fold > summary.kort-hoved::after {
  content: "▸";
  margin-left: 10px;
  color: var(--muted);
  font-size: 15px;
  transition: transform .18s ease;
}
body.personale details.kort-fold[open] > summary.kort-hoved::after {
  content: "▾";
}
/* Det foldede indhold skal have luft til hovedet — ellers klæber
   det første felt op ad overskriften, i det sekund man åbner. */
body.personale details.kort-fold[open] > .kort-hoved {
  margin-bottom: 14px;
}

/* Lukket for bestillinger er ikke en oplysning — det er en
   advarsel. Den skal kunne ses uden at læse. */
body.personale .kort-note.note-lukket {
  color: var(--red-tekst);
  font-weight: 600;
}


/* ============================================================
   TALLENE PÅ KATEGORIFOLDEN ER GENVEJE  (30/8)
   ------------------------------------------------------------
   Kundens ord: "gør så jeg kan trykke dem uden priser." Tallet
   stod som en oplysning, og så skulle man bagefter finde
   filteret øverst på fanen og sætte det selv. Nu er tallet vejen
   derhen.

   Det skal SES, at der kan trykkes — ellers er det bare en
   oplysning, der opfører sig mærkeligt.
   ============================================================ */
body.personale .menu-fold-genvej {
  cursor: pointer;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid transparent;
  transition: border-color .15s ease, background .15s ease;
}
body.personale .menu-fold-genvej:hover,
body.personale .menu-fold-genvej:focus-visible {
  border-color: currentColor;
  background: rgba(255, 255, 255, .55);
  outline: none;
}

/* ⚠️ LUFT MELLEM RÆKKERNE, NÅR KORTET ÅBNES. Felterne stod
   kant-i-kant hele vejen ned, så en vare ikke kunne skelnes fra
   den næste uden at læse. En hårstreg og lidt luft gør en liste
   på tredive til noget, man kan skimme. */
body.personale .vare-raekke {
  padding: 7px 0;
  border-bottom: 1px solid rgba(36, 26, 23, .07);
}
body.personale .vare-raekke:last-of-type { border-bottom: 0; }


/* LYDEN ER SLÅET FRA (26/9) — se sigLydBaand() i js/admin/koekken.js.
   Et bånd, der ER knappen: øverst på Køkkenet, rødt, i fuld bredde. */
body.personale .lyd-baand {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 14px 18px;
  border: 0;
  border-radius: var(--r-lille, 12px);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  color: #fff;
  background: var(--red);
  cursor: pointer;
}

/* ============================================================
   INGEN FORBINDELSE  (26/9) — se tjekNettet() i js/admin/frisk.js.
   ------------------------------------------------------------
   Fast øverst og RØDT, i modsætning til udgave-båndet nedenfor: det
   her er en fejl, der koster bestillinger, og den skal ses, også når
   køkkenet har rullet ned i køen. Scopet til body.personale.
   ============================================================ */
body.personale .net-nede {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 18px;
  color: #fff;
  background: var(--red);
}
body.personale .net-nede b { font-size: 16px; }
body.personale .net-nede span { font-size: 14px; }

/* ============================================================
   "DER ER KOMMET EN NY UDGAVE"  (30/8)
   ------------------------------------------------------------
   Båndet står øverst på personalesiden, når fanen kører gammel
   kode. Det er ikke en fejl, så det er ikke rødt — men det skal
   ses, for den, der har haft admin åben siden i mandags, ved det
   ikke selv.

   ⚠️ Scopet til body.personale: css/style.css bærer stadig
   gæstesider.
   ============================================================ */
body.personale .ny-udgave {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 14px 18px;
  border-radius: var(--r-lille, 12px);
  background: var(--sand2, #f7ede1);
  border: 1px solid rgba(36, 26, 23, .12);
  /* En tynd rød kant i venstre side: samme greb som køkkenets
     "gå ud og sig noget" — det ses i øjenkrogen uden at råbe. */
  border-left: 4px solid var(--red);
}
body.personale .ny-udgave-tekst {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.personale .ny-udgave-tekst b { font-size: 16px; }
body.personale .ny-udgave-tekst span {
  font-size: 14px;
  color: var(--muted);
}
/* ⚠️ DEN HER SKAL VÆRE RØD, og det modsiger ikke reglen om at
   rækkeknapper er stille: båndet er ikke en række, det er
   panelets ene handling — og der er kun én af dem på skærmen. */
body.personale .ny-udgave .knap { flex: 0 0 auto; }


/* ============================================================
   OPSÆTNINGSKORTENE ØVERST PÅ OVERBLIK  (30/8)
   ------------------------------------------------------------
   Formen er lånt fra kundens skærmbilleder; farverne er havnens.
   Ét tegn til venstre, to linjer tekst, én handling til højre —
   og kortet findes kun, når der er noget at gøre.
   ============================================================ */
body.personale .ops-kort {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 16px 18px;
  border-radius: var(--r-lille, 12px);
  background: #fff;
  border: 1px solid rgba(36, 26, 23, .10);
  box-shadow: 0 1px 0 rgba(36, 26, 23, .03);
}
/* ⚠️ DEN VIGTIGE ER TONET, IKKE RØD. Rød er forbeholdt noget,
   der er GALT — en telefon uden beskeder er ikke en fejl, det er
   en opgave. Tonet baggrund og en rød kant siger "gør det her"
   uden at råbe det samme som en udeblevet gæst. */
body.personale .ops-kort.ops-vigtig {
  background: var(--sand2, #f7ede1);
  border-color: var(--red);
}
body.personale .ops-tegn {
  flex: 0 0 auto;
  font-size: 26px;
  line-height: 1;
}
body.personale .ops-midt {
  flex: 1 1 18rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.personale .ops-midt b { font-size: 16px; }
body.personale .ops-midt span { font-size: 14px; color: var(--muted); }
body.personale .ops-kort .knap { flex: 0 0 auto; }

/* ============================================================
   TOMME TILSTANDE: EN STIPLET KASSE, DER SIGER HVAD MAN GØR
   ------------------------------------------------------------
   Et tomt afsnit uden noget i ligner en fejl. Kundens
   skærmbilleder har en stiplet ramme med én sætning — den siger
   "her kommer der noget", i stedet for at lade personalet gætte.

   ⚠️ Og den må ALDRIG stå der, når der ER noget: en stiplet
   kasse under en liste er to gange den samme plads.
   ============================================================ */
body.personale .tom-plads {
  /* ⚠️ display:block OG width:100%. Produktion i alt er en flex-
     række, så uden dem krymper kassen om sin egen tekst og står
     som en halv boks midt i kortet — målt på et skud. */
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 26px 18px;
  border: 1px dashed rgba(36, 26, 23, .20);
  border-radius: var(--r-lille, 12px);
  text-align: center;
  /* ⚠️ Farven skal SLÅ .plan-tom, som er rødlig: en tom dag er
     ikke en advarsel. Derfor står den her og ikke før. */
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}

/* ============================================================
   ⚠️ 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; }

/* ⚠️ EN NY RET, DER IKKE ER LAGT PAA ENDNU  (30/8)
   ------------------------------------------------------------
   Kundens ord: "den viser heller ikke at den gemmer de ting man
   aendrer." Han havde skrevet ret, pris og antal paa to dage i
   Dagens ret og troet, det var gemt — resten af admin har haft
   autogem siden 24/8, saa det er den rimelige forventning.

   En NY raekke kan ikke gemme sig selv (autogem paa et tomt felt
   ville oprette en raekke pr. pause i tastningen — koereplanens
   note faldt i praecis den 26/8). Saa maa raekken sige det i
   stedet: roed kant og en linje, saa snart der staar noget. */
body.personale .admin-raekke.ugemt {
  box-shadow: inset 0 0 0 1.5px var(--red);
  border-radius: var(--r-lille);
}
body.personale .ny-ret-hint { display: none; }
body.personale .admin-raekke.ugemt .ny-ret-hint {
  display: inline;
  color: var(--red-tekst);
  font-size: 13px;
  font-weight: 600;
}
body.personale .admin-raekke.ugemt .knap {
  background-color: var(--red);
  background-image: linear-gradient(180deg, rgba(214,42,58,.94), rgba(193,31,47,.96));
  color: #fff;
}

/* ⚠️ LUK DAGEN, DÉR HVOR AFTALEN BLIVER TIL  (30/8)
   ------------------------------------------------------------
   Kundens spoergsmaal: "naar man har taget imod noget inde i
   forespoergsler og aftalt tid, haenger det saa sammen med, at man
   kan vaelge luk dagen for spisning eller to-go?"

   Motoren fandtes (dags_regler siden 27/8) — knappen gjorde ikke.
   Den, der lige har sagt ja til et selskab paa 40, er den, der
   har travlt, og skulle selv huske at gaa paa Kalender-fanen. */
body.personale .kal-luk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: var(--r-lille);
  background: var(--sand2);
}
body.personale .kal-luk-navn { font-weight: 600; }
body.personale .kal-luk .hjaelp { flex: 1 1 100%; margin: 0; }

/* ---- BEKRÆFT AFTALEN  (16/9) ----
   Trinnet, hvor personalet siger ja: gæstens eget ønske står øverst,
   dagen og tiden kan rettes, og man vælger hvad der lukkes. Den er
   GRØN og ikke rød som "⚠️ Den står ikke i kalenderen" — her er der
   ikke noget galt endnu; her bliver noget besluttet. */
body.personale .kalender-bekraeft {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-lille);
  background: rgba(31, 122, 76, .07);
  box-shadow: inset 0 0 0 1px rgba(31, 122, 76, .28);
}
body.personale .kal-bad-om { margin: 0; font-weight: 600; }

/* "Vis også ældre sager" står under listen — dér, hvor man leder,
   når noget mangler. Knap og linje på samme række. */
body.personale .foresp-aeldre-linje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
body.personale .kal-tid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body.personale .kal-tid input { width: auto; min-width: 7.5rem; }
/* Advarslen om, hvad lukningen rammer. Rød tekst, ingen kasse: den
   står kun, når der ER noget, og skal læses som en oplysning — ikke
   som en fejl, personalet har lavet. */
body.personale .kal-rammer { margin: 0; color: var(--red-tekst); font-weight: 600; }

/* ---- HVORNAAR PAA DAGEN KAN KATEGORIEN BESTILLES  (30/8) ----
   Kundens ord: "morgenmad kun 10-12.30 og derefter alt andet."
   Tre smaa felter under kategorinavnet — de er en undtagelse, ikke
   noget man saetter paa hver kategori, saa de er daempede. */
body.personale .kat-tider {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--streg);
}
body.personale .kat-tid { display: flex; align-items: center; gap: 7px; }
body.personale .kat-tid label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
body.personale .kat-tid input { max-width: 8.5rem; }

/* Fluebenene til emballagen: et net, saa enogtyve kategorier ikke
   bliver enogtyve linjer under hinanden. */
body.personale .afkryds-net {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 6px 16px;
}

/* ============================================================
   KLOKKEN OEVERST TIL HOEJRE  (30/8)
   ------------------------------------------------------------
   Kundens ord: "placeringen skal vaere en klokke oppe i hoejre
   hjoerne ... og virke for mosedehavnecafeen." Formen er
   forlaeggets; farverne er havnens.
   ============================================================ */
body.personale .adm-hoved {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
body.personale .adm-hoved-tekst { flex: 1 1 auto; min-width: 0; }

body.personale .klokke-boks { position: relative; flex: 0 0 auto; }
body.personale .klokke {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--streg);
  border-radius: 50%;
  background: var(--paper);
  color: var(--sea);
  cursor: pointer;
  box-shadow: var(--skygge-blid);
}
body.personale .klokke svg { width: 22px; height: 22px; }
/* Klokken laener sig, naar der er noget — én gang, ikke i en
   loekke. En knap, der bevaeger sig hele tiden, holder man op med
   at se paa. */
body.personale .klokke.har-nyt svg { animation: klokke-ring .9s ease 1; }
@keyframes klokke-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-12deg); }
  45% { transform: rotate(9deg); }
  70% { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  body.personale .klokke.har-nyt svg { animation: none; }
}
body.personale .klokke-tal {
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px;
  background: var(--red); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
  box-shadow: 0 0 0 2px var(--sand);
}

body.personale .klokke-lag {
  position: absolute; top: 58px; right: 0;
  width: min(24rem, calc(100vw - 32px));
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  z-index: 60;
  background: var(--paper);
  border: 1px solid var(--streg);
  border-radius: var(--r-flade);
  box-shadow: 0 24px 60px rgba(36, 26, 23, .22);
  padding: 4px 0 10px;
}
body.personale .klokke-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px 8px;
}
body.personale .klokke-top b { font-size: 17px; }
body.personale .klokke-alle {
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--red-tekst); cursor: pointer;
}
body.personale .klokke-lag .hjaelp { margin: 0 16px 8px; }

body.personale .klokke-dag {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: var(--sand2);
  font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
}
body.personale .klokke-dag-tal {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--red); color: #fff;
  font-size: 11px; line-height: 20px; text-align: center; letter-spacing: 0;
}

body.personale .klokke-post {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 12px 12px 16px;
  border-top: 1px solid var(--streg);
}
/* En laest post bliver STAAENDE, den bliver bare stille. Fjernede
   vi den, kunne personalet ikke finde tilbage til den — og saa er
   klokken en liste, man ikke tor roere. */
body.personale .klokke-post.laest { opacity: .5; }
body.personale .klokke-tegn { flex: 0 0 auto; font-size: 20px; line-height: 1.2; }
body.personale .klokke-midt { flex: 1 1 auto; min-width: 0; }
body.personale .klokke-midt b { display: block; font-size: 14px; line-height: 1.3; }
body.personale .klokke-aabn,
body.personale .klokke-vaek {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: var(--sand2); color: var(--sea);
  font: inherit; font-size: 15px; cursor: pointer;
}
body.personale .klokke-vaek { color: var(--muted); }

body.personale .klokke-veje {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 16px 4px;
}
body.personale .klokke-vej {
  flex: 1 1 8rem;
  min-height: 40px;
  border: 1px solid var(--streg); border-radius: var(--r-lille);
  background: var(--paper); color: var(--sea);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}

/* ---- BORDETS NØGLE (30/8) --------------------------------
   Mærket siger, OM bordet er låst — aldrig hvad koden er.
   Stod koden i listen, ville ét skærmbillede af Borde-fanen
   være 55 gyldige adresser. Scopet til body.personale som alt
   andet i admin: css/style.css bærer stadig gæstesider. */
body.personale .noegle-maerke {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid var(--linse, rgba(36,26,23,.14));
}
body.personale .noegle-maerke.laast {
  background: #e8f3ea;
  color: #1f6b34;
  border-color: rgba(31,107,52,.24);
}
body.personale .noegle-maerke.aaben {
  background: #fdeeee;
  color: var(--red-tekst);
  border-color: rgba(182,32,47,.22);
}

/* ============================================================
   BUNDBJÆLKEN PÅ TELEFONEN  (30/8)

   Kundens ord: "jeg kan ikke vælge imellem fanerne, fordi de
   forsvinder ned i telefonens bar."

   ⚠️ TO FEJL PÅ ÉN GANG, og den ene var værre end den, han så.

   1) Striben rullede SIDELÆNS. Målt på en iPhone 13: fjorten
      piller fylder over 1800 px på en skærm på 390, så tretten
      af dem stod uden for kanten. Der var ikke noget, der sagde,
      at der VAR mere — man skulle vide det og swipe efter det.
   2) Den lå i bunden, hvor browserens egen bjælke lægger sig
      hen over. env(safe-area-inset-bottom) dækker telefonens
      hjemmestreg, men ikke Safaris værktøjslinje.

   Svaret på begge er det samme: FEM FASTE PLADSER, som i en app.
   Fire faner og en dør til resten. Der er ikke noget at swipe
   efter, fordi der ikke er noget uden for kanten.
   ============================================================ */
body.personale .bundbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  /* Ugennemsigtig. Målt 23/8 på topbjælken: fire procent
     gennemsigtighed var nok til, at teksten under kunne anes, og
     så ligner bjælken en fejl. */
  background: var(--sand, #fdf7ef);
  border-top: 1px solid var(--streg);
  box-shadow: 0 -8px 24px rgba(36, 26, 23, .12);
  /* ⚠️ 10 PX MERE END DEN SIKRE ZONE. Telefonens hjemmestreg
     ligger i env(); Safaris værktøjslinje gør ikke, og de ti px
     er forskellen på en knap, man kan ramme, og en, fingeren
     lige akkurat glider forbi. */
  padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 0px));
}

body.personale .bundbar button {
  background: none;
  border: 0;
  padding: 4px 2px 6px;
  /* 52 px: over de 44, en finger kræver — bjælken bruges med en
     fedtet finger, mens den anden hånd holder en tallerken. */
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}

body.personale .bundbar .bb-ikon { font-size: 20px; line-height: 1; }
body.personale .bundbar .bb-navn {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* DEN VALGTE. Farven alene er ikke nok — den, der er farveblind,
   ser to grå etiketter — så der er også en streg over ikonet.
   Samme greb som forlægget, bare over og ikke under: en streg i
   bunden ville ligge i den sikre zone og forsvinde. */
body.personale .bundbar button[aria-current="page"] {
  color: var(--red-tekst);
  background: rgba(214, 42, 58, .07);
}
body.personale .bundbar button[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 3px;
  border-radius: 999px;
  background: var(--red);
}

/* TALLET PÅ FANEN. Det sidder på ikonet og ikke efter navnet:
   "Bestillinger" fylder allerede pladsen ud, og et tal bagefter
   ville skubbe ordet ud i en ellipse. */
body.personale .bundbar .bb-tal {
  position: absolute;
  top: 0;
  left: calc(50% + 7px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--sand, #fdf7ef);
}

/* ---- ARKET MED RESTEN --------------------------------------
   ⚠️ ARKET ER FANERNE SELV, ikke en kopi. En ny fane er stadig
   ét sted at rette. */
body.personale .fane-ark-hoved { display: none; }

@media (max-width: 899px) {
  body.personale .fane-ark {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    background: var(--sand, #fdf7ef);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(36, 26, 23, .22);
    max-height: 76vh;
    display: flex;
    flex-direction: column;
    /* LUKKET ER UDE AF SKÆRMEN, ikke display:none. Arket glider
       op; et spring ville se ud som en fejl på en skærm, hvor
       alt andet bevæger sig blødt. */
    transform: translateY(102%);
    transition: transform .22s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.personale .fane-ark.aabent { transform: translateY(0); }

  body.personale .fane-ark-hoved {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 8px;
    border-bottom: 1px solid var(--streg);
    font-size: 15px;
  }
  body.personale .fane-ark-luk {
    background: rgba(36, 26, 23, .07);
    border: 0;
    border-radius: 999px;
    min-height: 36px;
    padding: 0 16px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--blaek, #241a17);
    cursor: pointer;
  }

  /* ⚠️ TO KOLONNER, IKKE ÉN. Fjorten punkter under hinanden er
     over 700 px, og så skal man rulle i et ark for at finde det,
     arket blev åbnet for. To kolonner får dem alle på skærmen. */
  body.personale .fane-ark .faner {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px 18px;
    background: none;
    border-top: 0;
    box-shadow: none;
  }
  body.personale .fane-ark .faner > .fane-gruppe {
    grid-column: 1 / -1;
    display: block;
    padding: 8px 2px 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  body.personale .fane-ark .faner button {
    justify-content: flex-start;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 14px;
  }

  /* ⚠️ SIDEN MÅ IKKE RULLE BAGVED ARKET. Ruller man i et ark,
     der ligger over en liste, ruller listen med — og når arket
     lukker, står man et helt andet sted end før. Klassen sættes
     af js/admin/bundbar.js. */
  body.personale.ark-aabent { overflow: hidden; }

  /* SKYGGEN BAG ARKET. Uden den ser listen ud som en del af
     siden, og man kan komme til at trykke igennem den. */
  body.personale .fane-skygge {
    position: fixed;
    inset: 0;
    z-index: 44;
    background: rgba(36, 26, 23, .38);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  body.personale .fane-skygge.aabent { opacity: 1; pointer-events: auto; }

  /* Plads i bunden til bjælken. Målt: 52 px knap + 16 px luft +
     den sikre zone. Uden den kan man ikke trykke "Afhentet" på
     dagens sidste bestilling. */
  body.personale .admin-lag,
  body.personale .admin-indhold {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* Fra 900 px og op er søjlen der, og bjælken ville være en anden
   vej til det samme. */
@media (min-width: 900px) {
  body.personale .bundbar { display: none; }
  body.personale .fane-skygge { display: none; }

  /* ⚠️ SKALLEN SKAL VÆRE GENNEMSIGTIG HER, ELLERS BRÆKKER
     SØJLEN.

     .adm-side er en flexsøjle, og .faner er dens midterste del —
     den ene, der må rulle (flex: 1 1 auto). Lagde vi en almindelig
     div imellem, var det SKALLEN, der blev flexbarnet, og .faner
     voksede til hele sin indholdshøjde inde i den. Målt: elementet
     holdt aldrig op med at flytte sig, og otte prøver på
     computerprofilen løb tør for tid på et klik, Playwright ikke
     turde udføre ("waiting for element to be stable"). Ikke ét af
     dem havde noget med bundbjælken at gøre.

     display: contents lader skallen forsvinde ud af layoutet og
     beholder børnene. Samme greb som .adm-side under 900 px. */
  body.personale .fane-ark { display: contents; }
}

/* ============================================================
   ADMINS HOVED PÅ TELEFONEN  (31/8)

   Kundens ord: knapperne og fladerne i admin "ligner noget for
   1850'erne", og "gennemgå det lige på telefonskærm for at se
   hvad jeg mener".

   ⚠️ MÅLT PÅ EN IPHONE 13, og det var værre end det så ud:
   sidetitlen fyldte 33 px, datoen 21, "logget ind som" 21, en
   streg, og så gentog kortet titlen. Det FØRSTE felt, personalet
   kan røre, lå 391 px nede på en skærm på 664. Man skulle rulle
   for at komme til det, fanen hedder.

   Hovedet bliver — man skal kunne se, hvor man er. Det fylder
   bare ikke en tredjedel af skærmen længere.
   ============================================================ */
@media (max-width: 899px) {
  body.personale .adm-hoved {
    padding: 12px 0 10px;
    margin-bottom: 14px;
    /* Titlen og klokken på samme linje — klokken lå i forvejen
       til højre, og de to konkurrerede om lodret plads. */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  body.personale .adm-hoved h1 {
    font-size: 26px;
    line-height: 1.1;
    margin: 0;
  }
  /* ⚠️ DATOEN OG E-MAILEN PÅ ÉN LINJE. To linjer à 21 px for at
     sige "det er fredag, og du er dig" er 42 px, personalet
     bruger til at kigge på bestillinger i stedet. */
  body.personale .adm-hoved-tekst {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 0;
  }
  body.personale .adm-hoved-tekst h1 { flex: 1 0 100%; }
  body.personale .adm-dato,
  body.personale .adm-hvem { font-size: 13px; margin: 2px 0 0; }
  /* ⚠️ INGEN ADSKILLER. Første udgave satte et "·" foran
     e-mailen, så de to kunne stå på én linje. Målt på en iPhone
     13: der er ikke plads til begge, så de ombryder — og så stod
     prikken forrest på anden linje som et punkttegn, ingen havde
     bedt om. En adskiller, der kun virker, når linjen ikke
     ombryder, kan ikke bruges på en telefon. */
}

/* ============================================================
   SEGMENTEREDE KONTROLLER I ADMIN  (31/8)

   Kundens ord: knapperne "ligner noget for 1850'erne".

   ⚠️ MÅLT PÅ EN IPHONE 13: Bestillinger havde FEM løse piller i
   TRE rækker — "I dag", "Alle dage", "Alle", "Lugen", "Bordene"
   — og de så ens ud, selv om de er TO forskellige filtre. Man
   kunne ikke se, at "Alle dage" og "Alle" hørte til hver sit
   spørgsmål, og hver pille bar sit eget emoji, som brød linjen.

   En segmenteret kontrol siger tre ting på én gang: her er et
   valg, det er ét af dem, og de her hører sammen. Det er den
   samme form, gæstesiden bruger (.seg2 i havnegrillen.css) —
   admin har bare sin egen, fordi de to temaer er scopet hver for
   sig, og en delt regel ville lave gæstesiden om.
   ============================================================ */
body.personale .adm-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 10px 0 2px;
}

body.personale .adm-seg-navn {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  /* Etiketten står FØR gruppen og ikke over den: to linjer pr.
     filter er fire linjer på en fane, hvor køen skal være det
     første, man ser. */
  flex: 0 0 auto;
}

body.personale .adm-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(36, 26, 23, .06);
  box-shadow: inset 0 0 0 1px rgba(36, 26, 23, .07);
}

body.personale .adm-seg button {
  border: 0;
  background: none;
  border-radius: 999px;
  /* 38 px og ikke 44: knappen sidder i en gruppe med en ramme
     omkring, så fingerens mål er hele gruppen. Fire segmenter à
     44 px ville ikke kunne stå på 390 px. */
  min-height: 38px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
  -webkit-tap-highlight-color: transparent;
}

body.personale .adm-seg button:hover:not([aria-pressed="true"]) {
  color: var(--blaek, #241a17);
}

/* ⚠️ DEN VALGTE ER HVID PÅ EN MØRK GRUND, IKKE RØD.
   Rød betyder "det her er handlingen" i hele admin — Gem, Afvis,
   Slet. Et filter er ikke en handling; det er et sted, man står.
   Var det rødt, ville de to holde op med at betyde noget hver
   for sig. Samme afvejning som .admin-raekke-knapperne 26/8. */
body.personale .adm-seg button[aria-pressed="true"] {
  background: #fff;
  color: var(--blaek, #241a17);
  box-shadow: 0 1px 2px rgba(36, 26, 23, .16),
              0 0 0 1px rgba(36, 26, 23, .06);
}

/* Dagvælgeren: pil, dag, pil — én linje, der ikke ombrydes. */
body.personale .adm-dagvaelger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
body.personale .adm-dagvaelger .bestil-dagnavn {
  min-width: 9.5rem;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
}

/* ============================================================
   FLUEBENENE I ADMIN  (31/8)

   Kundens ord: knapperne og fladerne "ligner noget for
   1850'erne", og "gennemgå det lige på telefonskærm".

   ⚠️ MÅLT PÅ EN IPHONE 13: fluebenet "Lukket" på Åbningstider
   var browserens EGEN checkbox med accent-color på — en firkantet
   kasse med en systemhak i. Den ser forskellig ud i hver browser,
   den har intet at gøre med resten af huset, og den er dét, øjet
   hæfter sig ved på en side, hvor alt andet er blødt og rundt.

   ⚠️ FORMEN ER STADIG EN CHECKBOX, IKKE EN KONTAKT. En kontakt
   (switch) betyder "det her sker NU"; et flueben betyder "det
   her er sandt, når du gemmer". Åbningstiderne gemmes af
   autogem, men menukortets Udsolgt gør ikke — og to former, der
   ligner hinanden og opfører sig forskelligt, er værre end én,
   der er ærlig.

   ⚠️ OG SELVE input'et BLIVER. appearance:none tegner kun
   fladen; tastaturet, mellemrumstasten og skærmlæseren hænger på
   det rigtige element. En <div>, der ligner en checkbox, er
   ubrugelig for den, der ikke kan bruge en mus.
   ============================================================ */
body.personale .afkryds input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1.5px solid rgba(36, 26, 23, .28);
  background: #fff;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
  transition: background .15s ease, border-color .15s ease,
              box-shadow .15s ease;
}

body.personale .afkryds input[type="checkbox"]:hover {
  border-color: rgba(36, 26, 23, .45);
}

body.personale .afkryds input[type="checkbox"]:checked {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 1px 3px rgba(180, 31, 46, .32);
}

/* Hakket tegnes af en ramme, der drejes — ét element, ingen
   skriftafhængighed. Et ✓ som tegn ville stå forskelligt i hver
   skrift og sidde skævt i kassen. */
body.personale .afkryds input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

/* ⚠️ FOKUSRINGEN SKAL BLIVE. appearance:none tager browserens
   egen med sig, og så kan den, der bruger tastatur, ikke se,
   hvor hun er. */
body.personale .afkryds input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Hele etiketten er trykfladen — 22 px er for lidt til en
   finger, men en 44 px høj firkant ville være en klods. Teksten
   ved siden af gør resten. */
body.personale .afkryds {
  min-height: 40px;
  padding: 2px 0;
}

/* ---- ÅBNINGSTIDERNES RÆKKER PÅ TELEFONEN  (31/8) ----------
   Målt på en iPhone 13: hver ugedag fyldte TRE linjer — navnet,
   "fra", og så "til" med fluebenet — så de syv dage blev over
   tre skærme. Åbningstiderne rettes to gange om året, men når
   man endelig gør det, skal man kunne se ugen.

   To rækker i stedet for tre: dagen står som overskrift, og de
   to klokkeslæt plus "Lukket" deler linjen under. */
@media (max-width: 899px) {
  body.personale .tid-raekke {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px 8px;
    padding: 10px 0;
  }
  body.personale .tid-raekke .navn {
    grid-column: 1 / -1;
    font-size: 14px;
    font-weight: 700;
  }
  body.personale .tid-raekke input[type="time"] {
    width: 100%;
    min-width: 0;
  }
  /* Fluebenet under de to tider, i fuld bredde: en tredje kolonne
     ville klemme klokkeslættene, og de er det, man retter i. */
  body.personale .tid-raekke .afkryds {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* ============================================================
   bord/ OG bestil/ FÅR HAVNENS TEMA  (31/8)

   Kundens ord om bordbookingen: *"book et bord ved vandet — den
   side er elendig, den er sort og hvid, får dårligt layout
   msæssigt og bare ik god nok."*

   Han har ret, og grunden er historisk: de to sider er ÆLDRE end
   designet fra 23/8. De kørte videre på css/style.css, hvor
   heroen er en mørk blækflade uden et eneste rødt element —
   mens hver eneste anden side på hjemmesiden har det
   rød/hvide tern. Gæsten går imellem dem med ét klik.

   ⚠️ DE TO SIDER BLIVER, og det er derfor, det er værd at gøre:
   bord/ er den ENESTE vej til en bordbooking, og bestil/ bærer
   fyldvælgeren. De blev IKKE vejvisere 30/8 af netop den grund.

   ⚠️ OG DET ER KUN DE TO. Selektorerne hænger på .smoer-hoved og
   .mork-top, som ingen andre sider bruger (målt: kun bestil/ og
   bord/). En ændring af .hero ville have ramt ni sider, der
   allerede ser rigtige ud.
   ============================================================ */
body:not(.personale) .smoer-hoved {
  position: relative;
  overflow: hidden;
}

/* ============================================================
   HEROEN PÅ bord/ BÆRER JERES EGEN TERRASSE  (8/9)
   ------------------------------------------------------------
   Kundens ord med et skud af siden: *"fix den ikke matchende
   billed og eventuelt gør det lidt lækkert."*

   MÅLT: heroen var slet ikke et billede — den var en mørk
   blækflade (var(--sea)) med et rødt ternet gitter ovenpå, og
   det er derfor den ikke matchede resten. Hver anden side har
   enten designets hero eller et rigtigt foto.

   ⚠️ OG FOTOET ER JERES EGET, IKKE ET GENERERET. Det er
   stemning-terrasse.jpg, som Mikkel selv lagde op 29/8: det røde
   panel, vinrankerne, lanternerne, vandet og masterne gennem
   døråbningen — og de RØD/HVID-TERNEDE BORDDUG, som husets tern
   er en stiliseret udgave af. Et genereret terrassefoto ville
   være en påstand om, hvordan stedet ser ud, og det er samme
   kategori som et opdigtet tal. Det er grunden til, at
   historiesiden fik sin stemningslinje 6/9 — her er der ikke
   brug for en, fordi billedet ER stedet.

   ⚠️ OG DER OPSKALERES IKKE. Kilden er 800×631 — den størrelse,
   admins egen komprimer() gemte den i, da han lagde den op 29/8.
   Første udgave lavede en 1600 px udgave af den: 188 kB mod 78 for
   præcis de samme pixels — dobbelt så mange bytes, ingen mere
   detalje, og en `image-set(… 2x)`, der løj om, at der var et
   skarpere billede at hente. Der er ÉN fil nu, i kildens egen
   bredde. JPEG 0,82 er admins eget tal, så hans egne uploads ser
   ud som vores.

   ⚠️ OG BESKÆRINGEN BEGYNDER 110 px NEDE, ikke i midten:
   døråbningen med vandet og masterne skal med. Overskriften hedder
   "Book et bord ved vandet", og vandet er det ene på billedet, der
   svarer på den.

   ⚠️ OG TERNET ER SLUKKET BAG FOTOET — det var dét, skuddet
   viste. Første udgave dæmpede gitteret fra 30 % til 14 % og lod
   det ligge, med den begrundelse at prøven fra 31/8 kræver en
   repeating-linear-gradient. MÅLT PÅ SKUDDET: 21 px-banderne
   tegner sig som hårde røde blokke hen over hele terrassen, og min
   egen kommentar sagde ordret, at "to gitre oven i hinanden er
   støj" — og beholdt så gitteret alligevel. En prøve er ikke en
   grund til at lade en fejl stå.

   Reglen fra 31/8 er, at bord/ ikke må være en sort/hvid flade,
   der ser fremmed ud ved siden af resten af huset. Det svarer
   fotoet BEDRE på: borddugene ER ternet. Prøven er vendt MED
   grunden skrevet ned, og den er blevet skarpere — den kræver nu
   et rigtigt foto, hvis forespørgsel svarer 200, og det er et
   stærkere krav end "der findes en gradient".

   ⚠️ OG DET ER KUN bord/. Klassen .hoved-foto står i bord/s egen
   opmærkning; bestil/ deler .smoer-hoved og har INGEN klage fra
   kunden — den beholder tern-heroen fra 31/8 uændret. En regel på
   .smoer-hoved alene ville have skiftet en side, ingen har bedt om
   at få skiftet.

   ⚠️ MØRKNINGEN ER TIL FOR TEKSTEN, ikke for stemningen.
   Overskriften er hvid; uden gradienten står "Book et bord ved
   vandet" på et solbeskinnet trædæk.

   ⚠️ OG KONTRASTEN ER MÅLT PÅ PIXLERNE, ikke regnet på en farve.
   getComputedStyle kan ikke sige, hvad summen af en gradient over
   et foto blev — så tallet er læst af et skud på en iPhone 13:
   etiketten 7,14:1, overskriften 18,25:1, manchetten 18,12:1. */
body:not(.personale) .smoer-hoved.hoved-foto {
  background-color: var(--sea);
  background-image:
    linear-gradient(180deg, rgba(26, 18, 16, .78) 0%,
                            rgba(26, 18, 16, .70) 46%,
                            rgba(26, 18, 16, .92) 100%),
    url("../billeder/bord-terrasse-800.jpg");
  background-size: cover, cover;
  background-position: center 38%, center 38%;
  background-repeat: no-repeat, no-repeat;
}

/* Ternet ligger som et lag OVER blækfladen, ikke i stedet for
   den: teksten er hvid og skal blive ved at kunne læses. Det er
   derfor mønsteret er dæmpet — designets egen 55 % rød ville
   trække kontrasten på "Book et bord ved vandet" under kravet. */
body:not(.personale) .smoer-hoved::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(214, 42, 58, .30) 0 21px, transparent 21px 42px),
    repeating-linear-gradient(0deg,  rgba(214, 42, 58, .30) 0 21px, transparent 21px 42px);
  /* Toner ud mod bunden, så manchetten står på en ren flade og
     ikke oven i et gitter. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 88%);
}

/* ⚠️ ET FOTO SLÅR GITTERET HELT FRA, ikke halvt. Det er de samme
   21 px-bander som på fladen — de er bare støj, når der ligger et
   billede bag, som selv har ternet i borddugene. Og det er
   `display: none` og ikke en lavere opacitet: en dæmpning er et
   tal, nogen skal vælge igen næste gang fotoet skiftes. */
body:not(.personale) .smoer-hoved.hoved-foto::before { display: none; }

/* Indholdet skal ligge OVEN PÅ mønsteret. Uden det tegner ::before
   sig hen over overskriften. */
body:not(.personale) .smoer-hoved > * { position: relative; z-index: 1; }

/* Etiketten øverst var grå på sort. Den er mærkets røde nu — det
   er den samme farve, .eyebrow har på alle de nye sider. */
body:not(.personale) .mork-top .eyebrow { color: #ff8c96; }

/* ---- ET VALG ER RØDT, IKKE SORT --------------------------
   ⚠️ MÅLT PÅ EN IPHONE 13 (31/8): den valgte dag var SORT med
   hvid tekst, og de øvrige hvide med grå kant. Gæsten, der lige
   har valgt "Spis her" i rødt på forsiden, skal ikke lære en ny
   farve for at vælge en dag.

   ⚠️ OG HER STOD "DEN ENESTE FLADE PÅ HELE HJEMMESIDEN" — DET
   PASSEDE IKKE (5/9). Filterchippen ved bordet (Alt · Favoritter
   · Smørrebrød) havde den samme: MÅLT beregnet farve
   rgb(36,26,23) mod dagens rgb(214,42,58). To farver for "det
   her er valgt", og gæsten går imellem de to sider i ét klik.
   Det er husets ældste ar én gang til — en note er ikke et tjek.
   Chippen står i den SAMME regel nu, netop så de ikke kan skride
   fra hinanden igen.

   ⚠️ Selektoren vejer 0,3,0 mod .kort-chip.on's 0,2,0, så den
   vinder, selv om ved-bordet.css indlæses bagefter. Et blik i
   arket ville ikke have afgjort det; den beregnede farve gjorde. */
body:not(.personale) .dag.valgt,
body:not(.personale) .type-knap.valgt,
body:not(.personale) .kort-chip.on {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 1px 2px rgba(36, 26, 23, .16),
              0 6px 16px -6px rgba(180, 31, 46, .38);
}
/* ⚠️ HELT HVID, IKKE .88  (11/9). Datoen er 13 px — lille skrift —
   og hvid .88 på husets røde gav MÅLT 4,11:1 mod kravet 4,5; helt
   hvid giver 4,94. Gennemgangens kontrastmåler kunne ikke se det,
   før den lærte at blande halvgennemsigtig tekst med bunden.
   Hierarkiet mod ugedagen står stadig: 14 px/600 mod 13 px/400. */
body:not(.personale) .dag.valgt .dag-dato,
body:not(.personale) .type-knap.valgt .type-note {
  color: #fff;
}

/* ⚠️ OG STRIBEN SKAL SIGE, AT DER ER MERE.

   Målt: den fjerde dag stod halvt uden for kanten som "Man…",
   og der var intet, der sagde, at man kunne swipe. Det er samme
   fejl som admins fanestribe (30/8) — men her er sidelæns
   rulning det RIGTIGE svar: dagene er en tidslinje, og en gæst
   forstår, at i overmorgen ligger til højre for i morgen. Det,
   der manglede, var en kant, der viser det. */
body:not(.personale) .dage {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  padding-right: 8px;
}
/* Er alt synligt, skal kanten ikke tone en hel dag ud. Uden den
   her ser den sidste dag slukket ud på en bred skærm. */
@media (min-width: 700px) {
  body:not(.personale) .dage {
    -webkit-mask-image: none;
    mask-image: none;
    padding-right: 0;
  }
}

/* ---- FODLINKENE PÅ DE GAMLE SIDER  (31/8) -----------------
   Samme gennemgang som designsiderne: målt på en iPhone 13 var
   footerens links på bestil/ og bord/ 15-21 px høje — og ét af
   dem er telefonnummeret. Teksten bliver; det er trykfladen, der
   vokser.

   ⚠️ Scopet til .fgrid og .fine, ikke til footer a: bord/ har
   også knapper i bunden, og en regel på alt i en footer ville
   lægge luft i dem. */
body:not(.personale) .fgrid a,
body:not(.personale) .fine a,
body:not(.personale) .footer-bund a,
body:not(.personale) .bord-bund a,
/* .hjaelp bærer de to sætninger under bordformularen — "skriv
   til os om den" og "ring 28 87 13 43". Begge inline i en tekst,
   og det ene er et telefonnummer. */
body:not(.personale) .hjaelp a,
body:not(.personale) .desc a {
  display: inline-block;
  padding: 7px 0;
}
body:not(.personale) .fgrid a[href^="tel:"],
body:not(.personale) .desc a[href^="tel:"],
body:not(.personale) .hjaelp a[href^="tel:"],
body:not(.personale) .bord-bund a[href^="tel:"] {
  padding: 11px 2px;
  /* Uden den negative margen skubber luften linjeafstanden i
     afsnittet, som linket står midt i. */
  margin: -11px 0;
}

/* ---- KURVEN ER EN KVITTERING  (31/8) -----------------------
   Kundens ord om QR-siden: "bedre overblik, klarhed over hvad man
   har bestilt". MÅLT på en iPhone 13: bjælken sagde "2 stykker ·
   178,-" og intet andet. Med 242 varer og fire mennesker om et
   bord kunne gæsten ikke se HVAD hun havde valgt.

   ⚠️ SCOPET TIL GÆSTESIDEN. css/style.css bærer også
   personalesiden, og .taeller og .glass.rund findes begge steder. */
body:not(.personale) .bestil-bund {
  flex-direction: column;
  align-items: stretch;
}
body:not(.personale) .kurv-rk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}
/* Summen er en knap nu — den åbner listen. Den skal se ud som
   tekst, ikke som en knap nummer to ved siden af "Videre". */
body:not(.personale) .kurv-sum {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
/* Pilen er tegnet med en kant og ikke skrevet som et tegn: et
   "⌃" sidder for højt i linjen og ser ud som en tastefejl. */
body:not(.personale) .kurv-pil {
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--red-tekst);
  border-bottom: 2px solid var(--red-tekst);
  transform: rotate(-135deg) translate(-2px, -2px);
  transition: transform var(--t-hurtig) var(--lempning);
}
body:not(.personale) .kurv-sum[aria-expanded="true"] .kurv-pil {
  transform: rotate(45deg) translate(-1px, -1px);
}
body:not(.personale) button.kurv-videre {
  border: 0;
  background: none;
  cursor: pointer;
  min-height: 44px;
  padding: 0 2px;
}

body:not(.personale) .kurv-liste {
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(36, 26, 23, .14);
  /* Fire personer om et bord kan bestille meget. Listen får sin
     egen rulning i stedet for at skubbe bjælken ud af skærmen. */
  max-height: 42vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body:not(.personale) .kurv-linje {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
body:not(.personale) .kurv-linje + .kurv-linje {
  border-top: 1px solid rgba(36, 26, 23, .08);
}
body:not(.personale) .kurv-tekst {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body:not(.personale) .kurv-navn {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}
/* Linjens EGEN sum. "2 × 89" tvinger gæsten til at gange i
   hovedet, mens hun sidder og skal betale bagefter. */
body:not(.personale) .kurv-pris {
  font-size: 13.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
body:not(.personale) .kurv-uden { font-style: italic; }
body:not(.personale) .kurv-fyld .kurv-pris { font-style: normal; }
body:not(.personale) .kurv-liste .taeller { flex: 0 0 auto; }

/* ---- VED BORDET: MADEN SKAL VÆRE PÅ FØRSTE SKÆRM  (31/8) ----
   Kundens ord: "hele siden på qr code bestil er rodet og dårlig".

   ⚠️ MÅLT PÅ EN IPHONE 13 (390×664): den første vare, gæsten
   kunne trykke på, lå **626 px nede** — 94 % af det første
   skærmbillede var overskrifter. Og hun har lige scannet et
   mærkat: hun SIDDER ved bordet, kender stedet, og skal se mad.

   ⚠️ MEN BORDNUMMERET BLIVER, OG DET ER IKKE PYNT. Det er
   kvitteringen for, at hun scannede det rigtige mærkat — maden
   bæres ud efter dét nummer. Det, der ryger, er GENTAGELSEN:
   nummeret stod i mærket, i overskriften OG i manchetten.

   ⚠️ SCOPET TIL body.ved-bordet. bestil/ deler .head og .form-kort,
   og den side er en anden situation: dér planlægger man en
   afhentning og skal læse, hvad man går ind til. */
body.ved-bordet .head {
  gap: 6px;
  padding-bottom: 0;
}
body.ved-bordet .head h1 {
  /* Fra clamp(40px, 6.4vw, 104px) til noget, der siger hvor man er
     uden at fylde en skærm. */
  font-size: clamp(23px, 4.6vw, 30px);
  line-height: 1.15;
}
body.ved-bordet .head p {
  font-size: 14px;
  line-height: 1.45;
  max-width: 46ch;
}
body.ved-bordet .wrap.sand {
  padding-top: clamp(14px, 2vw, 20px);
}

/* Panelets egen overskrift siger det samme som søgefeltet lige
   under den ("Søg i menuen — burger, softice, fad…"). To linjer,
   der spørger om det samme, er én for meget, når maden ligger
   under folden. */
body.ved-bordet .form-kort > h2:first-of-type {
  font-size: clamp(19px, 3.4vw, 24px);
  margin-bottom: 10px;
}

/* ---- BESTILLINGSKORTET: ÉN HANDLING FREM  (31/8) -----------
   Kundens forlæg var et skærmbillede: kortet er tre linjer med ÉN
   grøn knap til højre og alt andet gemt bag "···".

   Vores havde tre knapper i fuld bredde UNDER maden, så hvert kort
   blev en halv skærm — og den knap, personalet trykker på ni gange
   ud af ti, stod side om side med to, de næsten aldrig bruger.

   ⚠️ SCOPET TIL body.personale. css/style.css bærer også ni
   gæstesider, og .knap-raekke findes begge steder. */
body.personale .bestil-handling {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
/* ⚠️ TIL HØJRE FRA 900 px — samme greb som forespørgselskortet og
   Overblik fik. Under 900 px falder den under maden igen: to
   kolonner på en telefon ville give en 90 px knapsøjle med ordene
   brækket over fire linjer. */
@media (min-width: 900px) {
  body.personale .bestil-kort {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    column-gap: 18px;
  }
  body.personale .bestil-kort > *:not(.bestil-handling) {
    grid-column: 1;
  }
  body.personale .bestil-handling {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    justify-content: flex-end;
  }
}

/* Den grønne er "det er ude ad døren". De to trin før er husets
   røde: de flytter sagen videre, men lukker den ikke. */
body.personale .bestil-handling .knap.gron {
  background: #2f8a5b;
  border-color: #2f8a5b;
  color: #fff;
}
body.personale .bestil-handling .knap.gron:hover {
  background: #27734c;
  border-color: #27734c;
}

/* Døren til resten. Rund og stille — den er ikke en handling, den
   er et sted, handlinger ligger. */
body.personale .knap-mere {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--linse, rgba(36, 26, 23, .18));
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  letter-spacing: .06em;
}
body.personale .knap-mere:hover {
  background: rgba(36, 26, 23, .05);
  color: var(--blaek, inherit);
}

/* Panelet med resten. Det ligger OVEN PÅ kortet og skubber
   ingenting — ellers ville listen hoppe, hver gang nogen kigger
   efter en knap. */
body.personale .bestil-mere {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 8;
  min-width: 168px;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  background: var(--kort-flade, #fff);
  border: 1px solid var(--linse, rgba(36, 26, 23, .18));
  box-shadow: 0 10px 30px rgba(36, 26, 23, .18);
}
body.personale .bestil-mere.aaben { display: flex; }
body.personale .bestil-mere .knap { width: 100%; justify-content: center; }

/* ---- SMILEY-RAPPORTEN I FOOTEREN  (31/8) -------------------
   Linket er EJERENS EGET (findsmiley.dk/app/1480560, glad smiley,
   seneste kontrol 26-02-2026) — det stod på "Ejeren skal
   bekræfte"-listen som tomt, og nu er det bekræftet. En chip og
   ikke en tekstlinje: det er et af de få eksterne beviser, siden
   har, og det skal kunne findes af den, der leder efter det. */
body:not(.personale) .smiley-linje {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px var(--pad, 20px) 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(47, 138, 91, .12);
  color: inherit;
  font-size: 13.5px;
  text-decoration: none;
}
/* ⚠️ PÅ EN COMPUTER VAR CHIPPEN 1210 PX BRED (14/9) på bestil/ og bord/.
   Den står i en flex-kolonne, og dér strækkes selv en inline-flex ud.
   Kundens ord: "fødevarestyrelses tingen er voldsom langt". Kun fra
   821 px — telefonens udgave er urørt. */
@media (min-width: 821px) {
  body:not(.personale) .smiley-linje { width: fit-content; align-self: flex-start; justify-self: start; }
}

/* ============================================================
   ADMIN: LIQUID GLASS OG ØJEBLIKKELIG RESPONS  (31. august 2026)
   ------------------------------------------------------------
   Kundens ord: "alting, når man gemmer, ændrer inde på siden.
   Knapperne og udseendet er simpelthen forældet ... boksen med
   alt det der, det er grimt. Det skal være liquid glass, instant
   responsivt admin-system og fungere — bedre end spiis, ikke
   mindst funktionelt, men også udseendet."

   ⚠️ DET HER VENDER EN BESLUTNING FRA 24/8, OG DET ER HANS.
   Dengang stod der her, at admin med vilje IKKE har glasknapper:
   "sløring uden et foto bagved koster billeder i sekundet på en
   iPad". Grunden var rigtig og gælder stadig — derfor er den
   ikke bare kastet væk, den er blevet en GRÆNSE:

     · backdrop-filter KUN på de tre faste flader, der ligger
       oven på indhold, som ruller forbi (bundbaren, søjlen,
       kvitteringen). Det er tre elementer på skærmen, ikke tre
       hundrede.
     · Kort, felter og rækker får glassets UDSEENDE — lag,
       linsekant, indvendigt lys — men ingen sløring. Det koster
       ingenting at tegne.

   Alt er scopet til body.personale. css/style.css bærer ni
   gæstesider; en regel uden scope laver hele huset om (arret fra
   .bestil-kort).
   ============================================================ */

/* ---- KVITTERINGEN SVÆVER --------------------------------------
   Se den lange note i js/admin/kerne.js: beskeden stod i sidens
   flow og skubbede alt nedenunder ned, mens skærmen selv rullede
   til toppen. Nu flytter INTET sig. */
body.personale #kvittering,
body.personale #fejl {
  position: fixed;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  /* Over bundbaren på telefonen — en kvittering, der lægger sig
     bag fanerne, er en kvittering, ingen ser. */
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  /* ⚠️ OG OVER DAGSLAGET (7/9). Den stod på 60, og `.dag-lag` står
     på 200 — så et gem INDE i dagspanelet (noten, tiderne,
     beskeden til gæsterne) svarede med et "✓ Gemt", der lå bag
     lagets slør. MÅLT sammen med de to andre fejl samme dag.
     Panelet er fuld af felter, der gemmer; kvitteringen er hele
     svaret på "kom det med?", og den må aldrig kunne dækkes af
     det lag, knappen står i. */
  z-index: 210;
  width: min(560px, calc(100vw - 28px));
  margin: 0;
  padding: 14px 18px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  /* Glasset: en tonet flade, en linsekant hele vejen rundt, lys
     foroven — og sløring, fordi den ligger OVEN PÅ indhold. */
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .26),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 10px 34px -10px rgba(36, 26, 23, .5);
  animation: adm-toast .34s cubic-bezier(.2, .9, .25, 1);
}
body.personale #kvittering {
  background: linear-gradient(180deg, rgba(38, 122, 82, .93), rgba(24, 92, 60, .95));
  color: #fff;
}
body.personale #fejl {
  background: linear-gradient(180deg, rgba(190, 40, 52, .94), rgba(150, 26, 38, .96));
  color: #fff;
}
@keyframes adm-toast {
  from { opacity: 0; transform: translate3d(-50%, 14px, 0); }
  to   { opacity: 1; transform: translate3d(-50%, 0, 0); }
}
/* Fra 900 px er der ingen bundbar — så står den nederst til
   højre, hvor øjet ender efter en handling. */
@media (min-width: 900px) {
  body.personale #kvittering,
  body.personale #fejl {
    left: auto; right: 24px; bottom: 24px;
    transform: none;
    width: min(420px, calc(100vw - 48px));
    animation-name: adm-toast-h;
  }
  @keyframes adm-toast-h {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  body.personale #kvittering,
  body.personale #fejl { animation: none; }
}

/* ---- KNAPPEN, DER SVARER MED DET SAMME ------------------------
   js/admin/kerne.js sætter klasserne. ⚠️ Kun farve og opacity
   skifter — bredden ligger fast på knappens egen, så en knap,
   der skifter fra "Gem åbningstider" til "Gemmer…", ikke får
   rækken ved siden af til at hoppe. */
/* ⚠️ DEN GENERELLE .knap[disabled] DÆMPER TIL 50 % OG TAGER
   SKYGGEN. Målt på et skud: "✓ Gemt" stod blegt grønt og lignede
   en knap, der ikke virkede — mens den lige HAVDE virket. Begge
   tilstande er slået fra imens (et dobbelttryk er en skrivning
   mere), så de skal have deres eget svar tilbage. */
body.personale .knap.gemmer[disabled],
body.personale .knap.gemt[disabled] { opacity: 1; }
body.personale .knap.gemmer { cursor: progress; }
body.personale .knap.gemmer::before {
  /* Et stille pust, mens der skrives — ikke en snurrende ring,
     der beder om opmærksomhed for et halvt sekunds arbejde. */
  content: "";
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, .18);
  animation: adm-puls 1.1s ease-in-out infinite;
}
@keyframes adm-puls { 0%, 100% { opacity: .1 } 50% { opacity: .55 } }
@media (prefers-reduced-motion: reduce) {
  body.personale .knap.gemmer::before { animation: none; }
}
body.personale .knap.gemt {
  background-color: #2f8a5b;
  background-image: linear-gradient(180deg, rgba(255,255,255,.24), rgba(0,0,0,.06));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 6px 16px -6px rgba(47, 138, 91, .45);
}

/* ---- DE FASTE FLADER FÅR GLAS ---------------------------------
   ⚠️ KUN DE HER TO. Begge er faste, begge ligger oven på indhold,
   der ruller forbi — det er dér, en sløring giver mening og ikke
   bare koster. */
body.personale .bundbar {
  background: linear-gradient(180deg, rgba(253, 247, 239, .82), rgba(253, 247, 239, .94));
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 -10px 30px rgba(36, 26, 23, .14);
}
/* ⚠️ MEN KUN NÅR BROWSEREN KAN SLØRE. Uden backdrop-filter er en
   flade på 82 % gennemsigtig præcis den fejl, topbjælken blev
   rettet for 23/8: teksten under kunne anes, og bjælken lignede
   noget i stykker. */
@supports not (backdrop-filter: blur(4px)) {
  body.personale .bundbar { background: var(--sand, #fdf7ef); }
}

/* ---- KORTENE: GLASSETS UDSEENDE, INGEN SLØRING ----------------
   Fladerne står PÅ sandet og ikke oven på noget, der ruller — der
   er intet at sløre, og en blur her ville koste på hver eneste
   række i et menukort med 242 varer. Det, der gør et kort til
   glas, er lagene: en anelse dybde i fyldet, en linsekant og lys
   langs overkanten. */
body.personale .kort {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, 0) 42%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 0 0 1px rgba(255, 255, 255, .5),
    0 1px 2px rgba(36, 26, 23, .05),
    0 12px 28px -18px rgba(36, 26, 23, .3);
}

/* ============================================================
   KURVEN ER LIQUID GLASS  (31/8)
   ------------------------------------------------------------
   Kundens ord om QR-siden: *"når man vælger skal det være en
   liquid glass boks, der ikke er i vejen og er bedre — den flyder
   bare lidt midt i det hele og er i vejen."*

   To ting var galt, og de forstærkede hinanden:

   1) DEN LÅ MIDT PÅ SKÆRMEN. bottom: 76px var plads til en
      bådstribe, der ikke findes mere — se noten længere oppe. Den
      er i bunden nu.
   2) DEN VAR EN SANDFARVET PLADE. Bjælken havde samme farve som
      afsnittet bagved, og noten fra 23/8 forsvarede det med, at et
      slør skulle regnes om ved hvert billede, mens man ruller.

   ⚠️ DEN NOTE ER MÅLT EFTER, IKKE BARE OVERSKREVET. Glasset i
   admin blev målt 31/8 på et 252-varers menukort under fuldt rul:
   værste billede 17,4 ms, p95 16,9, nul billeder over 33 ms. En
   backdrop-filter på ÉT element på 66 px koster ikke det, den
   kostede i 2019 — og her er den forskellen på et lag og en fejl.

   ⚠️ MEN FALDET TILBAGE ER MASSIVT. Uden backdrop-filter (ældre
   Android, Firefox uden flaget) ville en halvgennemsigtig bjælke
   lade varelisten skinne igennem som rod. @supports giver den
   fladen tilbage.
   ============================================================ */
body:not(.personale) .bestil-bund {
  background: rgba(255, 253, 250, .72);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(36, 26, 23, .1);
  box-shadow:
    inset 0 1px .5px rgba(255, 255, 255, .95),
    inset 0 0 0 1px rgba(255, 255, 255, .35),
    0 -6px 26px rgba(36, 26, 23, .14);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body:not(.personale) .bestil-bund { background: var(--sand); }
}

/* Summen er det, øjet lander på — den skal kunne læses på et
   halvt sekund med en telefon i solen. */
body:not(.personale) #bestil-sum-tekst {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* "Videre" er en KNAP, ikke et link i teksten. Den var rød tekst
   uden flade — og på glas forsvandt den. */
/* ⚠️ button.kurv-videre OG IKKE .kurv-videre. Reglen længere oppe
   (body:not(.personale) button.kurv-videre) vejer 0,2,2 og vandt
   over 0,2,1 — MÅLT: background-image stod på "none", mens farven
   slog igennem, så knappen blev hvid tekst på ingenting. Husets
   egen regel: mål den BEREGNEDE stil, ikke klassen. */
body:not(.personale) button.kurv-videre {
  padding: 10px 18px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, var(--red), var(--red-dyb, #9e1b28));
  box-shadow:
    inset 0 1px .5px rgba(255, 255, 255, .45),
    0 6px 16px rgba(214, 42, 58, .3);
  border: 0;
  cursor: pointer;
}

/* ------------------------------------------------------------
   DET SIDSTE KIG SKAL FØLES SOM EN KVITTERING
   ------------------------------------------------------------
   Kundens ord: *"når man trykker på knapperne videre for at
   resumere bestillingen og bekræfte, er knappen helt sådan
   generic og elendig — slet ikke liquid glass og premium
   følende."*

   Panelet står allerede med hele bestillingen og summen. Det, der
   manglede, var, at den sidste knap i hele flowet så ud som den
   vigtigste: den er høj, i fuld bredde, med husets glans over
   sig — og summen står PÅ den, så gæsten bekræfter et beløb og
   ikke bare et ord.
   ------------------------------------------------------------ */
body:not(.personale) #bestil-kig .knap.send {
  width: 100%;
  min-height: 58px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px .5px rgba(255, 255, 255, .5),
    0 10px 28px rgba(214, 42, 58, .32);
}
/* Glansen er designets egen (.sheen på de nye sider) — den samme
   bevægelse, så knappen hører til i huset og ikke ligner en
   knap fra et andet system. */
body:not(.personale) #bestil-kig .knap.send::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  animation: kig-glans 3.4s ease-in-out 1.2s infinite;
}
@keyframes kig-glans {
  0%, 62% { left: -60%; }
  100%    { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.personale) #bestil-kig .knap.send::after { animation: none; opacity: 0; }
}
body:not(.personale) #bestil-kig .knap-raekke {
  flex-wrap: wrap;
  gap: 10px;
}
body:not(.personale) #bestil-kig .knap.sekundaer { width: 100%; }

/* Slagsen på forespørgselskortet (31/8). Den er en OPLYSNING og
   ikke en handling, så den er husets dæmpede mærke — ikke rød:
   rød betyder "tryk her" i hele admin. */
body.personale .foresp-slags {
  background: rgba(36, 26, 23, .07);
  color: var(--muted);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ============================================================
   BILLEDFLISEN PÅ VARERÆKKEN  (31/8)
   ------------------------------------------------------------
   Kundens ord: "hver en ting skal have billede, som de selv kan
   lægge ind i admin". Flisen ER knappen — der er ingen separat
   uploadrække, fordi 242 varer × en uploadrække er et kort,
   dobbelt så langt at rulle igennem.

   ⚠️ 44 PX, IKKE MINDRE. Det er husets trykmål, og fanen bruges
   på en iPad i et køkken.
   ============================================================ */
body.personale .vare-foto {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  display: block;
  border: 1px dashed var(--linse, rgba(36, 26, 23, .28));
  background: rgba(36, 26, 23, .04);
}
body.personale .vare-foto.har-foto {
  border-style: solid;
  border-color: var(--linse, rgba(36, 26, 23, .18));
}
body.personale .vare-foto-flade {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  background-size: cover;
  background-position: center;
}
body.personale .vare-foto:hover { border-color: var(--red); }
/* Tastaturet skal kunne se, hvor det står — filfeltet selv er
   skjult for øjet, så fokusringen skal lægge sig på flisen. */
body.personale .vare-foto:focus-within {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ============================================================
   BILLEDET PÅ EN BESTILLINGSRÆKKE  (31/8)
   ------------------------------------------------------------
   Kundens ord om siden ved bordet: "hver en ting skal have
   billede, som de selv kan lægge ind i admin".

   ⚠️ RÆKKEN FÅR KUN EN KOLONNE MERE, NÅR DER ER ET FOTO.
   .stk-linje er et grid med 1fr auto auto; en fast fjerde
   kolonne ville lægge 64 px tom luft i venstre kant af hver
   eneste af de 242 rækker på et kort helt uden billeder — og
   det er kortet, forretningen har i dag. :has() giver kolonnen
   præcis dér, hvor der er noget at vise; browsere uden :has()
   får billedet stående over teksten i stedet for ved siden af,
   og det er en pæn reserve, ikke et brud.
   ============================================================ */
.stk-linje:has(> .stk-foto) {
  grid-template-columns: auto 1fr auto auto;
}
/* ⚠️ 16:9 OG IKKE EN FIRKANT (12/9). Kundens ord: "så de kan
   uploade 16:9 billeder i småt format, så det passer på telefon".
   Admin beskærer ALTID til 16:9 (komprimer i js/store-skriv.js), og
   flisen var 58 × 58 — altså skar browseren en tredjedel af hvert
   foto væk igen, og en tallerken taget skråt blev til et udsnit af
   dugen. Et lille 16:9-felt viser det billede, ejeren så i admin.
   Højden kommer af forholdet, ikke af et tal, så de to ikke kan
   skride fra hinanden. */
.stk-foto {
  width: 88px;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  background: rgba(36, 26, 23, .05);
}
@media (max-width: 420px) {
  .stk-foto { width: 76px; }
}

/* Færdige i dag på Køkken-kø (31/8). Én linje pr. bestilling —
   det er en fortryd-liste, ikke et opslagsværk; hele historikken
   hører på Historik-fanen. */
body.personale .koek-faerdig {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--streg);
  font-size: 14px;
}
body.personale .koek-faerdig:first-child { border-top: 0; }
body.personale .koek-faerdig-bord { font-weight: 700; flex: 0 0 auto; }
body.personale .koek-faerdig-hvad {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.personale .koek-faerdig-status { flex: 0 0 auto; color: var(--muted); }
body.personale .koek-faerdig .knap { flex: 0 0 auto; }

/* ============================================================
   ET LINK MIDT I EN HJÆLPELINJE  (31/8)
   ------------------------------------------------------------
   Gennemgangen af admin MÅLTE et link på 16 px på Baglokalet-
   fanen ("…så retter de sig på udlejningssiden"). Det er den
   samme fejl, gæstesidens footer havde 31/8, og den samme
   rettelse: lodret luft med negativ margin, så linjeafstanden i
   afsnittet ikke skrider.

   ⚠️ IKKE display: block. Linket står MIDT i en sætning; block
   ville brække linjen. Og inline-block alene var netop det, der
   limede footerens links sammen til "Bestil madMenukort" — her
   er der kun ét link pr. linje, og luften er det, der virker.
   ============================================================ */
body.personale .hjaelp a,
body.personale .kort-note a {
  display: inline-block;
  padding: 8px 2px;
  margin: -8px 0;
}

/* ---- 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 KOLONNE SOM FOTOET. Rækken er et grid, og fotoet
   tilføjer en kolonne foran (`:has(> .stk-foto)`). Tegnet gør
   det samme, så en liste med og uden fotos har navnene på den
   SAMME lodrette linje — ellers hopper teksten fra række til
   række, alt efter om ejeren har lagt et billede op.

   ⚠️ OG DET ER ALDRIG BEGGE DELE: har varen et foto, tegnes
   emojien slet ikke (se vareTegn i js/bestilling.js). To
   ansigter på den samme række er rod. */
.stk-linje:has(> .stk-tegn) {
  grid-template-columns: auto 1fr auto auto;
}
.stk-tegn {
  width: 38px;
  font-size: 24px;
  line-height: 1;
  text-align: center;
  /* Emojien er dekoration og skal ikke stjæle blikket fra navnet
     eller prisen. Den er heller ikke en knap. */
  opacity: .9;
  user-select: none;
}
@media (max-width: 420px) {
  .stk-tegn { width: 30px; font-size: 21px; }
}

/* ⚠️ OG PÅ EN TELEFON ER RÆKKEN NAVNGIVNE OMRÅDER, IKKE KOLONNER.
   Under 640 px er `.stk-linje` sat til
   `grid-template-areas: "tekst pris" "taeller taeller"`, og et
   barn UDEN et område bliver auto-placeret i den første ledige
   celle — altså efter alt det andet.

   MÅLT på en iPhone 13: emojien stod yderst til HØJRE, efter
   prisen, selv om den var det første barn i DOM'en, og
   `grid-template-columns` svarede stadig `1fr auto` fra
   media-blokken. Det var ikke rækkefølgen i koden, der var
   forkert — det var, at kolonnereglen ovenfor slet ikke gælder
   hernede.

   ⚠️ OG FOTOET HAVDE PRÆCIS SAMME FEJL SIDEN 31/8. Det har bare
   aldrig kunnet ses, fordi ingen har lagt et billede op endnu.
   Begge får deres eget område her — det spænder over begge
   rækker, så navnet og tælleren står ved siden af og ikke under. */
@media (max-width: 640px) {
  .stk-linje:has(> .stk-tegn),
  .stk-linje:has(> .stk-foto) {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "tegn tekst pris" "tegn taeller taeller";
  }
  /* ⚠️ align-self: start OG IKKE center. Området spænder over
     begge rækker, så et centreret tegn lander ud for TÆLLEREN og
     læses som en del af knapperne — set på et skud. Det skal stå
     ud for navnet, som er det, det hører til.

     ⚠️ OG DET ER `grid-template-areas` OVENFOR, DER GØR
     ARBEJDET — ikke de to `grid-area`-linjer her. Målt ved at
     falsificere: fjernes de to linjer, står tegnet stadig
     rigtigt, fordi auto-placeringen fylder første celle og
     tegnet er første barn. De bliver stående alligevel, så
     placeringen ikke afhænger af rækkefølgen i DOM'en — men
     fjernes KOLONNEN ovenfor, ryger tegnet 336 px ud til højre,
     efter prisen. Det er dét, prøven måler. */
  .stk-tegn { grid-area: tegn; align-self: start; padding-top: 2px; }
  .stk-foto { grid-area: tegn; align-self: start; }
}

/* ============================================================
   TRIN I ADMIN  (4. sep 2026)
   ------------------------------------------------------------
   Kundens ord: *"også tydeligt fortælle inde i admin hvad det er
   for noget."* Forespørgsler-fanen forklarede de tre trin i en
   sætning med 1) 2) 3) inde i teksten — MÅLT på et skud på
   1280 px: fire linjer prosa øverst på kortet, som skal LÆSES
   for at kunne bruges. Et personale, der har travlt, skimmer.

   ⚠️ SCOPET TIL body.personale. css/style.css bærer stadig
   gæstesider (bestil/, bord/, ved-bordet/), og en regel uden
   scope laver hele huset om — arret fra .bestil-kort.

   ⚠️ OG DEN ER ADMINS EGEN, IKKE GÆSTENS. Gæstesidens
   .note.trin-liste får sit look af `.note ol` i
   havnegrillen.css, som admin ikke indlæser. To ark, to regler
   — men ordene er de samme, og det er dem, der skal passe.
   ============================================================ */
body.personale ol.hjaelp-trin {
  margin: 8px 0 0;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
body.personale ol.hjaelp-trin li { margin-top: 5px; }
body.personale ol.hjaelp-trin li::marker {
  color: var(--red-tekst);
  font-weight: 700;
}
body.personale ol.hjaelp-trin strong,
body.personale ol.hjaelp-trin em { color: var(--sea); }
body.personale ol.hjaelp-trin em { font-style: normal; font-weight: 600; }

/* ==========================================================
   HVILKE DAGE LAVES KATEGORIEN  (5/9)
   ----------------------------------------------------------
   Kundens ord: han skal kunne vælge, *"hvilket mad der f.eks er
   de forskellige dage"* — fx kun det nemme i weekenden, eller
   alt mandag til torsdag. Rullelisten kunne kun tre ting;
   knapperne kan sige alt.

   ⚠️ SCOPET TIL PERSONALESIDEN. css/style.css bærer også
   bestil/, bord/ og ved-bordet/, og en regel uden scope laver
   hele huset om — arret fra .bestil-kort.

   ⚠️ DEN VALGTE ER HVID, IKKE RØD. Rød betyder "det her er
   handlingen" i hele admin (Gem, Afvis, Slet). En ugedag er
   ikke en handling; det er en tilstand. Samme beslutning som
   filtrene på Bestillinger fik 31/8. */
body.personale .kat-dage {
  display: flex;
  gap: 4px;
  flex: none;
}
body.personale .kat-dag {
  /* ⚠️ 32 OG IKKE 30. Gennemgangen fælder en trykflade under 30
     px, og 30 er lige på grænsen — på en iPad i et køkken med
     fedtede fingre er det for lidt luft til at ramme sikkert. */
  width: 32px;
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--linse);
  border-radius: 8px;
  background: var(--sand);
  color: var(--muted);
  font: 600 13px/1 var(--brød), system-ui, sans-serif;
  cursor: pointer;
}
body.personale .kat-dag.paa {
  background: #fff;
  color: var(--blaek);
  border-color: rgba(36, 26, 23, .38);
  box-shadow: 0 1px 2px rgba(36, 26, 23, .08);
}
body.personale .kat-dag:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ============================================================
   HELE SKÆRMEN PÅ DE FIRE GAMLE SIDER  (5. september 2026)
   ------------------------------------------------------------
   De ti designsider fik viewport-fit=cover samme dag: uden det
   lægger Safari hele siden NEDEN UNDER statuslinjen og fylder
   stribens plads med sidens baggrundsfarve. Kundens ord var
   "så meget fullscreen som overhovedet muligt".

   ⚠️ MEN DE FIRE HER BLEV GLEMT — OG DEN VIGTIGSTE ER
   QR-SIDEN. bestil/, bord/, ved-bordet/ og min-bestilling/ er
   ældre end designet fra 23/8 og kører på det her ark. MÅLT på
   en iPhone 13: alle fire havde stadig et viewport uden cover,
   altså den hvide bjælke i toppen — netop på den side, gæsten
   sidder med ved bordet.

   ⚠️ OG SÅ SKAL TOPPEN VIGE FOR HAKKET. Med cover maler siden
   HELE skærmen, også dér hvor kameraet sidder. Uden luften her
   ville mærket og statuspillen ligge bag statuslinjen.

   ⚠️ --topbjaelke SKAL VOKSE MED, og det er den halvdel, der
   kostede en måling. #hd er position:fixed, så indholdet under
   den følger IKKE med af sig selv — det er --topbjaelke, der
   holder pladsen fri (body.underside polstrer med den, og
   .smoer-hoved trækker sig op i den og lægger den på igen).

   MÅLT med et simuleret hak på 47 px, før variablen fulgte med:
   bjælken voksede til 111 px, mens overskriften blev stående på
   114 — tre px luft mellem dem. Alene at give bjælken luften
   ville altså have skubbet den ned over sidens eget hoved.

   ⚠️ HVERT GRUNDTAL ER SIDENS EGET. Der står fire forskellige,
   fordi de fire bjælker har hver sin luft i forvejen — og de
   skal se ud PRÆCIS som i dag på en telefon uden hak (env() er 0
   dér, målt før og efter: alle fire uændrede). Det, der er
   fælles, er MÅDEN: grundtallet plus telefonens eget inset,
   aldrig et tal, vi selv har fundet på.

   ⚠️ OG DEN GÆLDER KUN GÆSTEN. admin.html deler det her ark og
   har ikke bedt om hele skærmen; scopet til body:not(.personale)
   som resten af huset. */
:root { --sikker-top: env(safe-area-inset-top, 0px); }

body:not(.personale) #hd { padding-top: calc(14px + var(--sikker-top)); }
body:not(.personale) #hd.stuck { padding-top: calc(10px + var(--sikker-top)); }
body:not(.personale) .bord-top { padding-top: calc(14px + var(--sikker-top)); }
body:not(.personale) .mb-side .mb-top { padding-top: calc(14px + var(--sikker-top)); }

/* Pladsen, siden holder fri til den faste bjælke. Den bor ét sted
   i forvejen — se noten ved .smoer-hoved — og det er netop derfor,
   den kan følge hakket uden at nogen skal huske det. */
body:not(.personale).underside { padding-top: calc(var(--topbjaelke) + var(--sikker-top)); }
body:not(.personale) .smoer-hoved {
  margin-top: calc((var(--topbjaelke) + var(--sikker-top)) * -1);
  padding-top: calc(var(--topbjaelke) + var(--sikker-top));
}

/* Hjemmestregen forneden: de to sider, coveret lige er slået til
   på, og som ikke havde env() i forvejen. */
body:not(.personale) .mb-side,
body.ved-bordet .bord-side {
  padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
}

/* ⚠️ HVOR BESTILLINGEN KOM IND FRA (8/9). Kundens ord: "det skal
   være tydeligt, hvad det er, hvor det er bestilt fra osv."
   Linjen står STILLE — personalet skal ikke bruge den til noget,
   maden er den samme uanset døren. Den er der, fordi ejeren
   spurgte, og fordi et opkald af og til begynder med "jeg
   bestilte inde på smørrebrødssiden". */
body.personale .bestil-kanal {
  color: var(--muted);
  /* ⚠️ 12 OG IKKE 12,5. Den fulde runde faeldede den paa 50 ms:
     admin-typografi.spec.js's skralde forbyder en broekdels-pixel
     ("en halv pixel er en beslutning, ingen har taget; browseren
     runder den selv, og to naboer ender forskelligt", 5/9). 12 px
     er husets egen lille stoerrelse, brugt 16 steder. Den gik i
     luften roed, fordi jeg skrev reglen uden at laese proeven. */
  font-size: 12px;
}

/* Kanalopdelingen på Salg (8/9): hvilken dør tjener pengene.
   Formen er faktalisten fra bestillingskortet (dl/dt/dd), fordi
   det er den samme slags oplysning — et navn og et tal — og to
   former for det ville være to ting at lære. */
body.personale .salg-kanaler { margin-top: 16px; }
body.personale .salg-kanal-liste {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  margin: 8px 0 0;
  font-size: 14px;
}
body.personale .salg-kanal-liste dt { color: var(--sea); }
body.personale .salg-kanal-liste dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- FIND EN SAG  (10/9) ----
   ⚠️ ÉN LINJE, IKKE ET KORT. Dagens tal er det, personalet kigger
   efter, når de møder ind — det er hele grunden til, at
   opsætningen blev flyttet ned 3/9. Et søgekort øverst ville
   gentage præcis den fejl, så feltet fylder én række og svaret
   findes kun, når der er søgt. */
/* ⚠️ FELTET STÅR I HOVEDET NU (16/9), så det kan nås fra alle faner.
   Under 900 px får det sin egen linje under titlen og klokken; fra
   900 px står det mellem dem. Svaret lægger sig OVEN PÅ siden
   (absolut), så en søgning ikke skubber fanen ned under fingeren. */
body.personale .adm-hoved { flex-wrap: wrap; }
/* ⚠️ TEKSTEN SKAL KUNNE KRYMPE, ellers skubber den klokken ned på
   sin egen linje, så snart hovedet må brække om (målt på et skud på
   en iPhone 13: klokken stod alene under e-mailen, 140 px nede). */
body.personale .adm-hoved-tekst { flex-basis: 0; }
body.personale .find-sag {
  position: relative; margin: 0;
  flex: 1 0 100%; order: 3;
}
body.personale .find-sag input {
  width: 100%; min-height: 44px;
}
body.personale .find-sag-svar {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 40;
  display: grid; gap: 6px;
  max-height: 70vh; overflow: auto;
  padding: 8px;
  background: var(--sand, #fdf7ef);
  border: 1px solid var(--streg); border-radius: var(--r-lille);
  box-shadow: 0 12px 32px rgba(36, 26, 23, .18);
}
@media (min-width: 900px) {
  body.personale .adm-hoved { flex-wrap: nowrap; }
  body.personale .find-sag { flex: 0 1 420px; order: 0; align-self: center; }
}
/* Et træf fører HEN til kortet og markerer det et øjeblik. Outline og
   ikke border: markeringen må ikke flytte kortet en eneste pixel. */
body.personale .find-markeret {
  outline: 3px solid var(--red, #d62a3a);
  outline-offset: 3px;
  transition: outline-color .6s ease;
}
body.personale .find-sag-svar.skjult { display: none; }
body.personale .find-traef {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px;
  align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 8px 12px; text-align: left;
  border: 1px solid var(--streg); border-radius: var(--r-lille);
  background: var(--papir, #fff); cursor: pointer;
}
body.personale .find-tegn { font-size: 17px; line-height: 1; }
body.personale .find-midt { display: grid; gap: 2px; min-width: 0; }
body.personale .find-navn { font-weight: 600; }
/* ⚠️ Referencen kan være lang, og linjen må ikke brække kortet
   op i tre. text-overflow er CSS'ens arbejde — en afkortning i
   koden ville skære ved et fast antal tegn, uanset feltets
   bredde (arret fra kalenderens navne 3/9). */
body.personale .find-under {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.personale .find-pil { color: var(--muted); }
body.personale .find-intet {
  margin: 0; font-size: 13px; color: var(--muted);
}

/* ---- BETINGELSERNE VED SEND-KNAPPEN  (11/9) ----------------
   `bestil/`, `bord/` og `ved-bordet/` kører på det her ark, og her
   er `.fine` FOOTERENS stribe: hvid tekst, kant foroven og flex.
   Linjen bar klassen i en dag og stod derfor som hvid tekst på
   hvid bund — MÅLT rgba(255,255,255,.62) på rgb(255,255,255),
   altså en lovpligtig oplysning, ingen kunne læse.

   ⚠️ DEN MÅ HELLER IKKE HEDDE `.fine` PÅ DESIGNSIDERNE: to motorer
   (js/skal/kalender.js og js/skal/forespoergsel.js) bruger den
   FØRSTE .fine i panelet som fejllinje, og en fejl ville blive
   skrevet hen over betingelserne. Designarket har sin egen regel
   (`.fine,.jura-ved-send`); to ark, to regler, samme udseende.

   ⚠️ LUFTEN ER PADDING MED NEGATIV MARGIN, ikke inline-block —
   det var inline-block, der limede footerens links sammen 31/8. */
body:not(.personale) .jura-ved-send {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
body:not(.personale) .jura-ved-send a {
  color: var(--red-tekst);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding-block: 8px;
  margin-block: -8px;
}


/* ============================================================
   MENUKORTET PÅ TELEFONEN  (13/9)
   ------------------------------------------------------------
   Kundens skud: "når man ruller ned, er de oven i hinanden, og det
   er ikke overskueligt nok og udseendemæssigt forældet ift.
   hjemmesiden."

   · Afsnittene er hver sin <section> (se tegnMenu), så en klæbende
     overskrift går med ud, når dens afsnit slutter
   · Kategoriens indstillinger ligger i en fold på et stort kort
   · Tiderne står i et net med etiketten OVER feltet — "Kan
     bestilles fra" brækkede over tre linjer ved siden af feltet
   · Søgningens hurtigkort er hvidt papir med de tre knapper
   ============================================================ */
/* ⚠️ `section { padding-block: clamp(56px, …) }` øverst i arket
   rammer også de her — målt 13/9: 56 px foroven OG forneden plus
   margenen, altså ~150 px tomt sand mellem to afsnit på en telefon.
   Samme fælde som .kort-gruppe ved bordet (31/8). */
body.personale .menu-afsnit-boks { margin-top: 28px; padding-block: 0; }
body.personale .menu-afsnit-boks:first-of-type { margin-top: 8px; }

/* Folden er hvidt papir med en rigtig kant, som resten af huset —
   den stiplede grå kasse var kundens "forældet ift. hjemmesiden".
   Navnet må krympe (minmax(0, 1fr)), så antallet bliver på linjen i
   stedet for at falde ned under et langt navn.

   ⚠️ GENVEJENE STÅR PÅ DERES EGEN LINJE UNDER NAVNET. Første udgave
   lod dem dele linjen, og så lå "1 udsolgt" midt på kortet: et tryk
   dér filtrerede hele fanen i stedet for at folde kategorien ud.
   Fundet af admin-design.spec.js, der trykker midt på folden — som
   en finger gør. */
body.personale .menu-fold {
  display: grid;
  /* ⚠️ FIRE KOLONNER OG EN PLADS TIL HVER  (25/9): pil · tegn ·
     navn · antal. Griddet havde tre, og da kategoriens emoji kom
     til, rykkede hver eneste celle én plads: MÅLT stod navnet
     yderst til højre og "30 varer" yderst til venstre. Et grid
     uden en udpeget plads pr. barn er et grid, der laver om på sig
     selv, hver gang nogen tilføjer et element. */
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  background: #fff;
  border: 1px solid var(--streg);
  border-radius: 14px;
  padding: 10px 14px;
}
body.personale .menu-fold:hover { border-color: var(--sea3); background: #fff; }
body.personale .menu-fold-pil { grid-column: 1; }
body.personale .menu-fold-tegn { grid-column: 2; }
body.personale .menu-fold-navn {
  grid-column: 3;
  font-size: 19px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.personale .menu-fold-antal { grid-column: 4; white-space: nowrap; }
/* Linjen under navnet og genvejstallene starter, hvor navnet gør. */
body.personale .menu-fold-salg { grid-column: 3 / -1; }
body.personale .menu-fold-genvej { grid-column: 3 / -1; justify-self: start; }
body.personale .menu-afsnit-boks > .menu-afsnit { margin: 0 0 14px; }

body.personale .kat-indstillinger {
  margin: 0 0 12px;
  padding: 2px 12px;
  border: 1px solid var(--streg);
  border-radius: 12px;
  background: var(--sand);
}
body.personale .kat-resume { flex: 1 1 auto; color: var(--sea); }
body.personale .kat-ret { color: var(--muted); white-space: nowrap; }
body.personale .kat-indstillinger > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
body.personale .kat-indstillinger > summary::-webkit-details-marker { display: none; }
body.personale .kat-indstillinger[open] > summary { color: var(--sea); }
body.personale .kat-indstillinger > .kat-hoved { border-bottom: 0; margin-bottom: 4px; }

body.personale .kat-tider {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  align-items: end;
  gap: 10px;
}
body.personale .kat-tid { flex-direction: column; align-items: stretch; gap: 4px; }
body.personale .kat-tid input { max-width: none; width: 100%; }

body.personale .hurtig-liste { display: grid; gap: 10px; margin-top: 12px; }
body.personale .hurtig-note { margin: 0; font-size: 13px; color: var(--muted); }
body.personale .hurtig-kort {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--streg);
  border-radius: var(--r-lille);
}
body.personale .hurtig-kort.er-udsolgt { border-color: rgba(214, 42, 58, .45); }
body.personale .hurtig-kort.er-skjult { opacity: .72; }
body.personale .hurtig-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
body.personale .hurtig-navn { font-size: 17px; color: var(--sea); }
body.personale .hurtig-kat { font-size: 13px; color: var(--muted); }

/* Varerne i en ÅBEN kategori er kort som søgningens (13/9, kundens
   ja). Før skilte en hårstreg dem, og på en telefon flød navn,
   beskrivelse, pris, antal og knapper for tredive varer sammen i én
   søjle, hvor man ikke kunne se, hvor én vare sluttede. */
body.personale .menu-gruppe .vare-raekke {
  padding: 12px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid var(--streg);
  border-radius: 14px;
}
body.personale .menu-gruppe .vare-raekke:last-of-type { border-bottom: 1px solid var(--streg); }
/* Den åbnede række beholder sin sand — ellers ligner "···"-rækkens
   ekstra kontroller noget, der hører til den næste vare. */
body.personale .menu-gruppe .vare-raekke.raekke-aaben { background: var(--sand); }

/* To varer med samme navn — linjen står under rækken i hele bredden. */
body.personale .vare-advarsel {
  flex: 1 0 100%;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--red-tekst);
}

/* ---- HVOR SÆLGES VAREN?  (14/9) ----
   Bag ⋯ står ét flueben pr. sted, varens kategori sælges. Er varen
   taget af et af dem, siger en linje under rækken det — et fravalg,
   der kun stod bag ⋯, ville være usynligt, og så leder ejeren efter
   en fejl, når varen ikke står ved bordet. */
body.personale .vare-steder {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}
body.personale .vare-steder-titel { font-size: 13px; font-weight: 600; color: var(--muted); }
body.personale .vare-sted-note {
  flex: 1 0 100%;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* Tapaskortets tilkøb: en liste, man kan læse, ikke felter. */
body.personale .tapas-tilkoeb-liste { margin: 6px 0 4px; padding-left: 18px; }
body.personale .tapas-tilkoeb-liste li { margin: 2px 0; }

/* ---- DAGE, TIDER OG HVOR  (13/9) ----
   Kundens ord: "hvad tid er meget uklart". Dagene står med tre
   bogstaver og med den valgte som en tydelig flade — hvid mod sand
   kunne ikke ses på et skud. Blæk og ikke rød: en dag er en tilstand,
   ikke en handling. */
body.personale .kat-dage-linje {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
body.personale .kat-dage-linje > label { font-size: 13px; font-weight: 600; color: var(--muted); }
/* Kategoriens mærke (12/10): vælgeren er et kort ord, linjen under siger,
   hvor kategorien står. Ikke hele bredden på en computer. */
body.personale .kat-rolle-linje .kat-rolle { max-width: 16rem; }
body.personale .kat-rolle-linje .kat-rolle-hjaelp { flex-basis: 100%; margin: 0; }
/* Gratis levering (14/10) — sit eget lille felt i leveringskortet. */
body.personale .gratis-levering { margin: 14px 0 4px; padding: 12px 14px; border-radius: 14px;
  background: var(--creme, #fbf6ee); border: 1px solid rgba(36, 26, 23, .08); }
body.personale .gratis-levering .felt-par { margin-top: 8px; }
body.personale .gratis-levering #levering-gratis-status { margin: 8px 0 0; }
/* ⚠️ .kat-dage har `flex: none` fra sin egen regel (5/9) og kunne
   derfor ikke bryde om: målt på et skud løb "Søn" ud over kortets kant
   på en telefon. Inde i dagslinjen må den krympe og bryde. */
body.personale .kat-dage-linje .kat-dage { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; }
body.personale .kat-valg { width: auto; min-width: 11rem; max-width: 100%; }
body.personale .kat-dag { width: auto; min-width: 42px; padding: 0 8px; }
body.personale .kat-dag.paa { background: var(--sea); color: #fff; border-color: var(--sea); }
body.personale .kan-bestilles-boks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 6px 0 10px;
}
body.personale .kan-bestilles-titel { flex: 1 0 100%; font-weight: 600; color: var(--sea); }
body.personale .menu-fold-salg { grid-column: 2 / -1; font-size: 13px; color: var(--muted); }
body.personale .hurtig-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.personale .hurtig-knapper input { width: 8.5rem; min-height: 44px; }

/* ---- FORSLAG TIL BESKRIVELSEN  (13/9) ----
   Egen linje nederst i varerækken, så felterne ikke skubbes. Dæmpet
   og kursiv: det er et udkast, ikke det, gæsten ser. */
body.personale .vare-raekke .vare-forslag { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 4px 0 2px; }
body.personale .vare-forslag-tekst { flex: 1 1 16rem; min-width: 0; font-size: 13px; line-height: 1.4; font-style: italic; color: var(--muted); }
body.personale .forslag-alle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(214, 42, 58, .06); }
body.personale .forslag-alle-tekst { flex: 1 1 16rem; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--ink2, #5c4a45); }

/* HANDELSBETINGELSERNES FLUEBEN (14/9) — bygget af Butik.vilkaar i
   js/store.js, første gang en enhed bestiller. Samme form som
   allergisamtykket i havnegrillen.css: fingerens mål (44 px) og
   NORMAL vægt — et ja er ikke en etiket.
   ⚠️ `.form-kort label` gør etiketter fede og blok; selektoren her
   skal veje mere (0,3,2 mod 0,2,2), ellers står jaet som en
   overskrift. */
body:not(.personale) .form-kort label.vilkaar-ja,
body:not(.personale) label.vilkaar-ja {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  margin: 12px 0 4px;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  cursor: pointer;
}
body:not(.personale) label.vilkaar-ja input {
  margin-top: 3px;
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--red);
}

/* ---- VALG PÅ EN VARE (15/9) — bestil/ og bordet ----
   Én linje pr. valg ("Kebab", "Kylling", "Tun") med sin egen tæller,
   under varens navn. ⚠️ grid-column: 1 / -1 — på en telefon er
   .stk-linje et gitter med NAVNGIVNE områder, og et barn uden et
   område bliver auto-placeret i den første ledige celle (samme fælde
   som tegnet 1/9). Ingen ny skriftstørrelse: navnet arver rækkens. */
body:not(.personale) .stk-linje > .stk-valg {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin-top: 6px;
}
body:not(.personale) .stk-valg-linje {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* ⚠️ Navnet er det, der må brække (20/9) — ellers klemmes tillægget. */
body:not(.personale) .stk-valg-navn { font-weight: 600; flex: 1 1 auto; min-width: 0; }
/* TILLÆGGET PÅ ET VALG  (20/9)
   Samme regel som .item-valg-tillaeg på forsiden: de 3 kroner for en
   glutenfri vaffel skal stå ved valget, før gæsten trykker plus.
   ⚠️ margin-right:auto — rækken er space-between, og uden den lander
   tillægget midt mellem navnet og tælleren. */
body:not(.personale) .stk-valg-tillaeg {
  margin-right: auto;
  /* ⚠️ MÅLT på iPhone 13 (20/9): mærket blev 21 px bredt og 30 px
     højt, så "+3 kr." brækkede over to linjer midt i en pris. Nu
     "+3,-" som på kortet, og det må aldrig brække. */
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
}

/* ---- ISENS PORTIONER — bestil/ og bordet  (25/9) ----
   Kundens ord: "når man bestiller en is skal man med kugler smage
   osv kunne gøre det rigtigt og ikke bare bestille 10 kugler til 1
   vaffel". Én række pr. portion under valgets linje, ét felt pr.
   kugle. Samme model som forsidens (havnegrillen.css) — de tre
   veje skal vise det samme.

   ⚠️ Stregen til venstre er det eneste, der siger, HVILKET valg
   portionerne hører til. Målt på et skud af forsiden (iPhone 13):
   uden den lå rullelisterne midt imellem "Vaffel" og "Bæger". */
body:not(.personale) .stk-valg > .is-portioner {
  display: grid;
  gap: 6px;
  margin: 2px 0 4px;
  padding-left: 10px;
  border-left: 2px solid rgba(214, 42, 58, .3);
}
body:not(.personale) .is-portion {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* ⚠️ flex:none — uden den klemmes nummeret til en streg, når tre
   smagsnavne skal dele en telefonbredde. */
body:not(.personale) .is-portion-nr {
  flex: none;
  min-width: 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
/* ⚠️ select.is-smag OG IKKE .is-smag: sidens bare `select` (0,0,1)
   er 46 px høj med 16 px skrift, og på forsiden blev nøjagtig den
   fælde målt — en klasse alene slog ikke igennem, og feltet stod
   med tal, der ikke stod i filen.
   ⚠️ Og min-width:0 + flex:1: uden dem vokser et <select> efter sit
   LÆNGSTE valg, og "Mango sorbet" ville skubbe rækken ud over
   kanten. */
body:not(.personale) select.is-smag {
  flex: 1 1 92px;
  width: auto;
  min-width: 0;
  min-height: 38px;
  height: 38px;
  padding: 0 9px;
  font-size: 13px;
}
/* Den kugle, der stadig mangler en smag: "Smag" står i samme skrift
   som "Vanilje", og det skal kunne ses FØR gæsten trykker Send. */
body:not(.personale) select.is-smag.mangler {
  background: rgba(214, 42, 58, .07);
  border-color: rgba(214, 42, 58, .45);
}

/* ============================================================
   KØRER VI DERUD? — SVARET UNDER ADRESSEN  (16/9)
   ------------------------------------------------------------
   Flyttet fra havnegrillen.css, som bestil/ ikke indlæser. Da
   siden fik sit eget zonesvar, ville linjen ellers stå nøgen —
   tredje gang på én dag, at en regel lå i ét ark og manglede i
   det andet (dagsbeskeden, allergifeltet, og nu denne).

   ⚠️ GUL OG IKKE RØD. Et postnummer uden for området er et
   SPØRGSMÅL — ejeren kører "længere ude efter aftale". Farvede vi
   det rødt, ville det ligne en formular, der har sagt nej.
   ============================================================ */
#lev-svar.lev-spoerg {
  margin-top: 8px; padding: 9px 13px; border-radius: 13px; font-weight: 600;
  background: rgba(240, 160, 60, .18); color: #7a4a10;
}
#lev-svar.lev-ja {
  margin-top: 8px; padding: 9px 13px; border-radius: 13px; font-weight: 600;
  background: rgba(60, 150, 90, .16); color: #1f6b3c;
}

/* ============================================================
   BYG DIN IS — VED BORDET OG PÅ bestil/  (25. sep 2026)
   ------------------------------------------------------------
   Forløbet er det SAMME som forsidens (js/isbygger.js); kun
   stilarket er et andet, fordi de to sider har hver sit design.
   Kundens ord: *"lad hele is-blokken ryge ned og stå som en
   eksklusiv ting og skille sig ud fra de andre ligesom dagens
   ret."* Formen er derfor dagens rets, som allerede findes her.
   ============================================================ */
:is(body:not(.personale), .is-forhaand) .isbyg-blok {
  /* ⚠️ PADDING SKAL SÆTTES — SAMME FÆLDE SOM .dagens-blok, OG DEN
     BLEV MÅLT IGEN 25/9. Blokken er et <section>, og arket har en
     generisk `section { padding-block: clamp(56px, 7vw, 104px) }`.
     Målt på 390 px: 56 px foroven og 56 forneden, altså 112 px tomt
     sand omkring et forløb, gæsten skal igennem på fire tryk.
     Noten står allerede ved dagens ret; den er skrevet her igen,
     fordi den tredje, der laver en <section>-blok her, ellers
     falder i den en tredje gang. */
  padding: 0;
  margin-top: 16px;
  border: 2px solid var(--red);
  border-radius: 16px;
  background: #fff;
  /* ⚠️ OG FARVEN SKAL SÆTTES MED. MÅLT: teksten arvede bordsidens
     hvide skrift ned på blokkens hvide papir — "Vaffel eller
     bæger?" stod i #fff på #fff, og gæsten så fire røde tal og
     ingen spørgsmål. En baggrund uden en farve er en halv regel;
     `background` her og `color` fra samme sæt. */
  color: var(--sea);
  overflow: hidden;
}
:is(body:not(.personale), .is-forhaand) .isbyg-blok-hoved {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px 9px;
  border-bottom: 1px solid rgba(36, 26, 23, .08);
}
:is(body:not(.personale), .is-forhaand) .isbyg-blok-tegn { font-size: 18px; line-height: 1; flex: none; }
:is(body:not(.personale), .is-forhaand) .isbyg-blok-titel {
  font: 600 18px/1.15 var(--display), system-ui, sans-serif;
  margin: 0;
}
:is(body:not(.personale), .is-forhaand) .isbyg-blok-krop { padding: 4px 14px 14px; }

/* ---- Trinnene ---- */
:is(body:not(.personale), .is-forhaand) .isbyg-trin {
  padding: 13px 0;
  border-bottom: 1px solid rgba(36, 26, 23, .08);
}
:is(body:not(.personale), .is-forhaand) .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. */
:is(body:not(.personale), .is-forhaand) .isbyg-trin.laast { opacity: .42; }
:is(body:not(.personale), .is-forhaand) .isbyg-hoved { display: flex; align-items: center; gap: 8px; }
:is(body:not(.personale), .is-forhaand) .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;
}
:is(body:not(.personale), .is-forhaand) .isbyg-titel { font-size: 15px; font-weight: 600; margin: 0; }
:is(body:not(.personale), .is-forhaand) .isbyg-krop { margin-top: 10px; }

:is(body:not(.personale), .is-forhaand) .isbyg-valg,
:is(body:not(.personale), .is-forhaand) .isbyg-ekstra { display: flex; flex-wrap: wrap; gap: 8px; }
:is(body:not(.personale), .is-forhaand) .isbyg-knap {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid rgba(36, 26, 23, .18);
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  color: var(--sea);
  background: #fff;
  cursor: pointer;
}
:is(body:not(.personale), .is-forhaand) .isbyg-knap-navn { font-weight: 600; }
:is(body:not(.personale), .is-forhaand) .isbyg-knap-bi {
  font-size: 12px;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
:is(body:not(.personale), .is-forhaand) .isbyg-knap.valgt {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}
:is(body:not(.personale), .is-forhaand) .isbyg-knap.valgt .isbyg-knap-bi { color: rgba(255, 255, 255, .86); }
:is(body:not(.personale), .is-forhaand) .isbyg-knap:disabled { cursor: default; }

/* Kuglerne: ét spørgsmål pr. linje. */
:is(body:not(.personale), .is-forhaand) .isbyg-kugle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
:is(body:not(.personale), .is-forhaand) .isbyg-kugle:first-child { margin-top: 0; }
:is(body:not(.personale), .is-forhaand) .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 bare `select`
   er 46 px høj med 16 px skrift, og en ren klasse (0,1,0) taber
   til den ikke — men til `select.inp` andre steder i huset gør
   den. Samme fælde blev målt 25/9 på forsiden. */
:is(body:not(.personale), .is-forhaand) select.isbyg-smag {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 42px;
  font-size: 14px;
}
:is(body:not(.personale), .is-forhaand) select.isbyg-smag.mangler { background: rgba(214, 42, 58, .07); }

/* Ønskefeltet — når ejeren ikke har skrevet sin liste. */
:is(body:not(.personale), .is-forhaand) .isbyg-oenske { display: grid; gap: 7px; }
:is(body:not(.personale), .is-forhaand) .isbyg-oenske-tekst { font-size: 13px; color: var(--ink2); }
:is(body:not(.personale), .is-forhaand) input.isbyg-oenske-felt { min-height: 44px; font-size: 14px; }
:is(body:not(.personale), .is-forhaand) .isbyg-hint { font-size: 13px; color: var(--ink2); }
:is(body:not(.personale), .is-forhaand) .isbyg-mangler {
  padding: 10px 13px;
  border: 1px solid rgba(214, 42, 58, .32);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  background: rgba(214, 42, 58, .07);
}

:is(body:not(.personale), .is-forhaand) .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;
}
:is(body:not(.personale), .is-forhaand) .isbyg-sum {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  /* ⚠️ BELØBET MÅ IKKE BRÆKKE. Knappen stod flex:none, så summen
     var den, der gav plads — målt på 390 px blev "I alt 45,-" til
     to linjer med tallet under ordet. Et beløb på to linjer er et
     beløb, gæsten læser to gange. Nu er det knappen, der må give
     sig; dens tekst er en sætning og tåler det. */
  flex: none;
  white-space: nowrap;
}
/* ⚠️ EGEN KLASSE, IKKE SIDENS KNAPKLASSER. På forsiden blev
   byggerens knap fundet som SENDEKNAPPEN, fordi den delte klasser
   med den og stod først i panelet — målt 25/9. */
:is(body:not(.personale), .is-forhaand) .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);
  cursor: pointer;
}
:is(body:not(.personale), .is-forhaand) .isbyg-laeg:disabled { opacity: .5; cursor: default; }
:is(body:not(.personale), .is-forhaand) .isbyg-kvit {
  margin-top: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  opacity: 0;
  transition: opacity .25s ease;
}
:is(body:not(.personale), .is-forhaand) .isbyg-kvit.vis { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  body:not(.personale) .isbyg-kvit { transition: none; }
}

/* ============================================================
   ISBAREN VED BORDET — ET FORLØB PR. SLAGS IS  (26. sep 2026)
   ------------------------------------------------------------
   Samme forløb som på forsiden (js/isbygger.js), bordsidens
   udseende: hvidt papir, havblå tekst, rød for det valgte. Farven
   sættes på hvert element, der har en baggrund — se noten ved
   .isbyg-blok om hvid tekst på hvidt papir (målt 25/9).
   ============================================================ */
:is(body:not(.personale), .is-forhaand) .isbyg-slags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 8px;
  margin: 12px 0 2px;
}
:is(body:not(.personale), .is-forhaand) .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: 1px solid rgba(36, 26, 23, .18);
  border-radius: 14px;
  font: inherit;
  color: var(--sea);
  background: #fff;
  cursor: pointer;
}
:is(body:not(.personale), .is-forhaand) .isbyg-slag-tegn { grid-row: span 2; font-size: 19px; line-height: 1; }
:is(body:not(.personale), .is-forhaand) .isbyg-slag-navn { font-size: 14px; font-weight: 600; line-height: 1.25; }
:is(body:not(.personale), .is-forhaand) .isbyg-slag-bi { font-size: 12px; color: var(--red); font-variant-numeric: tabular-nums; }
:is(body:not(.personale), .is-forhaand) .isbyg-slag.valgt { color: #fff; background: var(--red); border-color: var(--red); }
:is(body:not(.personale), .is-forhaand) .isbyg-slag.valgt .isbyg-slag-bi { color: rgba(255, 255, 255, .86); }

:is(body:not(.personale), .is-forhaand) .isbyg-beskriv { margin: 12px 0 0; font-size: 14px; color: var(--sea); }
:is(body:not(.personale), .is-forhaand) .isbyg-status {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
:is(body:not(.personale), .is-forhaand) .isbyg-status.fuld { color: var(--red-tekst); }
:is(body:not(.personale), .is-forhaand) .isbyg-tael {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid rgba(36, 26, 23, .08);
}
:is(body:not(.personale), .is-forhaand) .isbyg-tael-navn { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; color: var(--sea); }
:is(body:not(.personale), .is-forhaand) .isbyg-tael-knap {
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(36, 26, 23, .18);
  border-radius: 999px;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--sea);
  background: #fff;
  cursor: pointer;
}
:is(body:not(.personale), .is-forhaand) .isbyg-tael-knap:disabled { opacity: .4; cursor: default; }
:is(body:not(.personale), .is-forhaand) .isbyg-tael-tal {
  min-width: 22px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--sea);
  font-variant-numeric: tabular-nums;
}

:is(body:not(.personale), .is-forhaand) .isbyg-desserter { display: grid; gap: 10px; margin-top: 12px; }
:is(body:not(.personale), .is-forhaand) .isbyg-dessert {
  padding: 12px 13px;
  border: 1px solid rgba(36, 26, 23, .12);
  border-radius: 14px;
  color: var(--sea);
  background: #fff;
}
:is(body:not(.personale), .is-forhaand) .isbyg-dessert.aaben { border-color: var(--red); }
:is(body:not(.personale), .is-forhaand) .isbyg-dessert-top { display: flex; align-items: flex-start; gap: 10px; }
:is(body:not(.personale), .is-forhaand) .isbyg-dessert-tekst { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
:is(body:not(.personale), .is-forhaand) .isbyg-dessert-navn { font-size: 15px; font-weight: 600; }
:is(body:not(.personale), .is-forhaand) .isbyg-dessert-beskriv { font-size: 13px; color: var(--muted); }
:is(body:not(.personale), .is-forhaand) .isbyg-dessert-pris {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--red-tekst);
  font-variant-numeric: tabular-nums;
}
:is(body:not(.personale), .is-forhaand) .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;
}
:is(body:not(.personale), .is-forhaand) .isbyg-dessert-valg { margin-top: 10px; }
:is(body:not(.personale), .is-forhaand) .isbyg-dessert-valg > .isbyg-valg { margin-bottom: 8px; }


/* ============================================================
   IS & SØDT I ADMIN — ISENS FORLØB  (26. sep 2026)
   ------------------------------------------------------------
   Til venstre varerne under det trin, de hører til; til højre
   forløbet, som gæsten ser det. På en bred skærm står
   forhåndsvisningen fast ved siden af, mens man ruller i
   varerne — ellers er det "ret noget, rul ned, se, rul op".
   Forhåndsvisningens egne regler er bordsidens (se
   :is(..., .is-forhaand) ovenfor): ét udseende, ikke to.
   ============================================================ */
body.personale .isbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 6px;
}
@media (min-width: 1100px) {
  body.personale .isbar { grid-template-columns: minmax(0, 1fr) 390px; align-items: start; }
  body.personale .isbar-vis { position: sticky; top: 16px; }
}
body.personale .isbar-afsnit { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; }
body.personale .isbar-afsnit:first-child { margin-top: 4px; }
body.personale .isbar-afsnit-tegn { font-size: 20px; line-height: 1; }
body.personale .isbar-afsnit-navn { font-family: var(--display); font-size: 19px; color: var(--sea); }
body.personale .isbar-gruppe {
  margin-bottom: 10px;
  padding: 10px 12px 12px;
  border: 1px solid var(--streg);
  border-radius: 12px;
  background: #fff;
}
body.personale .isbar-under {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red-tekst);
}
body.personale .isbar-note { margin: 3px 0 8px; font-size: 13px; color: var(--muted); }
body.personale .isbar-tom { margin: 0; font-size: 13px; font-style: italic; color: var(--muted); }
/* ⚠️ ÉN LINJE PR. VARE. MÅLT 25/9 på 1440 px: navn, felter og en
   knap under hinanden gav rækker på 140 px — 26 is-varer blev
   3.600 px, ejeren skulle rulle igennem for at nå desserterne. Side
   om side er de ~52 px, og de brydes kun, når der ikke er plads. */
body.personale .isbar-raekke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 7px 0;
  border-top: 1px solid var(--streg);
}
body.personale .isbar-raekke > .isbar-navn { flex: 1 1 200px; min-width: 0; }
body.personale .isbar-raekke > .isbar-felter { margin-top: 0; }
body.personale .isbar-raekke > .isbar-advarsel { flex: 1 1 100%; }
body.personale .isbar-nulstil {
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  background: none;
  text-decoration: underline;
  cursor: pointer;
}
body.personale .isbar-nulstil:hover { color: var(--sea); }
body.personale .isbar-navn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
body.personale .isbar-vare { font-weight: 600; color: var(--sea); }
body.personale .isbar-pris { font-size: 13px; color: var(--red-tekst); font-variant-numeric: tabular-nums; }
/* "læst af navnet" og "udsolgt": små mærker, ikke sætninger — de
   skal kunne ses på en række af 25 uden at blive læst op. */
body.personale .isbar-maerke {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--sand);
}
body.personale .isbar-gaet { color: var(--red-tekst); background: rgba(214, 42, 58, .08); }
body.personale .isbar-felter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 7px; }
body.personale .isbar-felt { display: flex; align-items: center; gap: 7px; margin: 0; }
body.personale .isbar-etiket { font-size: 13px; color: var(--muted); }
body.personale .isbar-felt select.inp { width: auto; min-width: 210px; height: 38px; }
body.personale .isbar-felt-kort input.inp { width: 72px; height: 38px; }
body.personale .isbar-flueben { font-size: 14px; color: var(--sea); cursor: pointer; }
body.personale .isbar-fast { font-size: 13px; color: var(--muted); }
body.personale .isbar-advarsel { margin: 6px 0 0; font-size: 13px; color: var(--red-tekst); }
body.personale .isbar-vis-titel {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Telefonens bredde — de fleste gæster bestiller isen på en. */
body.personale .is-forhaand { max-width: 390px; }
body.personale .is-forhaand .isbyg-blok { margin-top: 0; }


/* ---- Tilbehør til dagens ret  (1/10) ----
   Ejeren skriver navn og pris på det, gæsten kan vælge til.

   ⚠️ SCOPET TIL body.personale OG .uge-ret. En regel uden scope
   laver hele admin om — .tilvalg-navn er et almindeligt navn, og
   uden scope ville den også ramme en kommende liste et andet
   sted. Det er sket før; se noten i CLAUDE.md.

   Boksen er rykket ind under rækken, så den læses som "hører til
   retten ovenfor" og ikke som en række mere i ugeplanen. */
body.personale .uge-ret .tilvalg-boks {
  flex-basis: 100%;
  margin: 6px 0 0 0;
  padding: 10px 0 2px 12px;
  border-left: 2px solid var(--streg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.personale .uge-ret .tilvalg-titel {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
body.personale .uge-ret .tilvalg-linjer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.personale .uge-ret .tilvalg-linje {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.personale .uge-ret .tilvalg-navn { flex: 1 1 10rem; min-width: 0; }
body.personale .uge-ret .tilvalg-pris { flex: 0 0 5.5rem; width: 5.5rem; }
/* ⚠️ Mindst 40 px at ramme: × er et lille tegn, og den her knap
   SLETTER noget. En fejlramt sletning på en travl torsdag er
   værre end en knap, der fylder lidt. */
body.personale .uge-ret .tilvalg-væk {
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 40px;
  line-height: 1;
}
@media (max-width: 720px) {
  body.personale .uge-ret .tilvalg-navn { flex-basis: 100%; }
}


/* ---- TILBEHØR TIL DAGENS RET — ved bordet  (1/10) ----
   Mikkel om kartoflens tekst: *"den står alt for generisk."* Nu
   står ejerens navne som chips, gæsten kan trykke på, og prisen
   ved siden af hver.

   ⚠️ SCOPET TIL body:not(.personale) som naboerne. En regel uden
   scope ville også ramme admins egen tilvalgsliste — og .valgt er
   en klasse, hele admin bruger.

   ⚠️ CHIPS OG IKKE EN LISTE MED TÆLLERE: se den lange note i
   js/bestilling.js. Chippen siger ÉN ting — er det her på? */
body:not(.personale) .stk-linje > .stk-tilvalg {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
body:not(.personale) .stk-tilvalg-titel {
  flex: 0 0 100%;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
/* ⚠️ MINDST 40 PX HØJ. Chippen trykkes af en gæst med én hånd om
   en menu og den anden om et barn; en chip på 28 px rammes ved
   siden af. Samme mål som × i admin. */
body:not(.personale) .stk-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;
}
body:not(.personale) .stk-tilvalg-chip .stk-tilvalg-pris {
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  white-space: nowrap;
}
/* Valgt skal kunne SES uden at blive læst — og ikke kun på farven:
   en chip, der kun skifter kulør, forsvinder for den, der ser
   farver anderledes. Derfor både ramme, bund og fed skrift. */
body:not(.personale) .stk-tilvalg-chip.valgt {
  border-color: var(--red);
  background: var(--red-svag, rgba(214, 42, 58, .10));
  font-weight: 600;
}
body:not(.personale) .stk-tilvalg-chip.valgt .stk-tilvalg-pris { color: var(--red-tekst, var(--red)); }

/* ============================================================
   BORD/ OG BESTIL/ HAR FORSIDENS FASTE BJÆLKE  (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 FØR: her stod navnet midt for i 17/400 efter
   en pil, Menu-knappen var en hvid flade med tre tykke streger, og på
   computeren stod seks menupunkter og "Find os". Forsidens faste
   bjælke er navnet til venstre i 21/500 og glas-knappen "Menu" til
   højre — og facit bor i havnegrillen.css (.topbar .ordmaerke og
   .topbar .g.icn.menu). Tallene her er de samme, læst af dem:
   · navnet: Host Grotesk 21/500, −.015em, blæk, 40 højt
   · luften: 14 px på telefonen; på computeren spaltens kant,
     max(28px, (100% − 1140px)/2) — som .topbar
   · højden: telefonens hak + 6 (mindst 12) / 40 / 8 = 60; computer
     14 / 40 / 12 = 66
   · knappen: 40 høj, luft 15/13, mellemrum 7, tegnet 18 px (husets
     #menu), "Menu" 14/600 +.01em, hvid 72 % og .g.icn's skygge
   ⚠️ Menupunkterne står stadig i opmærkningen, men vises ikke:
   skuffen har dem alle, som på forsiden.
   ⚠️ Selektorerne har body:not(.personale) foran, fordi reglen fra
   hakket (sidst i arket) vejer så meget — og admin deler arket.
   ============================================================ */
body:not(.personale) #hd{padding-inline:14px;gap:10px}
/* ⚠️ HAKKET: bjælken vokser som FORSIDENS — --kompakt-top er max(hak + 6, 12)
   i havnegrillen.css — altså med hak − 6 og ikke med hele hakket. Og pladsen
   under den (body.underside og smørrebrødets mørke hoved) vokser med det
   SAMME tal, ellers kom der 6 px luft for meget under bjælken (målt af
   fullskaerm-gamle.spec.js). Hakket læses af --sikker-top, husets ene
   variabel for det — ikke env() direkte. */
:root{--hak-vaekst:max(calc(var(--sikker-top, 0px) - 6px), 0px)}
body:not(.personale) #hd.stuck{padding-top:calc(12px + var(--hak-vaekst));padding-bottom:8px;box-shadow:0 .5px 0 rgba(36, 26, 23, .12)}
body:not(.personale).underside{padding-top:calc(var(--topbjaelke) + var(--hak-vaekst))}
body:not(.personale) .smoer-hoved{margin-top:calc((var(--topbjaelke) + var(--hak-vaekst)) * -1);padding-top:calc(var(--topbjaelke) + var(--hak-vaekst))}
body:not(.personale) #hd .logo{display:flex;align-items:center;min-height:40px;padding-block:0;margin-block:0;font-family:"Host Grotesk", system-ui, sans-serif;font-size:21px;font-weight:500;letter-spacing:-.015em;line-height:1.1;color:var(--sea)}
body:not(.personale) #hd nav{display:none}
body:not(.personale) #hd .burger{display:inline-flex;align-items:center;margin-left:auto;height:40px;padding:0 15px 0 13px;gap:7px;border-radius:999px;background:rgba(255, 255, 255, .72);color:var(--sea);font-family:"Host Grotesk", system-ui, sans-serif;font-size:14px;font-weight:600;letter-spacing:.01em;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)}
body:not(.personale) #hd .burger svg{width:18px;height:18px;flex:none;fill:currentColor}
@media (max-width: 360px){
  body:not(.personale) #hd .burger{width:40px;padding:0;justify-content:center}
}
@media (min-width: 821px){
  body:not(.personale) #hd{padding-inline:max(28px, calc((100% - 1140px) / 2))}
  body:not(.personale) #hd.stuck{padding-top:calc(14px + var(--hak-vaekst));padding-bottom:12px}
  /* Skuffen er et vindue midt på skærmen, som forsidens (havnegrillen-
     desktop.css: .sheet-in 460 px, runding 30) — ikke et ark i fuld
     bredde. Lukket står den helt under kanten. */
  body:not(.personale) .ark{left:50%;right:auto;bottom:24px;width:min(460px, 92vw);translate:-50% 0;border-radius:30px;transform:translateY(calc(100% + 48px))}
  body:not(.personale) .ark.aaben{transform:none}
}

/* ============================================================
   DAGE OG TYPER ER FIGMAS CHIP  (11/10)
   ------------------------------------------------------------
   Mikkels ord: *"… lige som book bord tabs knapperne og dem men gøres
   endnu bedre"*. MÅLT FØR: dagene på bord/ og bestil/ og typerne
   (To-go/Spis her/Levering, forespørgslens typer, bordene ved bordet)
   var firkanter på 62 px med navnet over datoen. Figmas valg er en
   chip (LA31 Control / Chip, 103:571 — LÆST UD AF FILEN): 44 høj,
   radius 22, luft 18, mellemrum 8, navnet i 14 og tallet ved siden af
   i småt; hvilende med en tynd kant og ingen flade, valgt fyldt.
   · Valgt er husets RØDE, ikke Figmas sorte: "Et valg er rødt, ikke
     sort" (fullskaerm-gamle.spec.js) — og datoen helt hvid (11/9:
     .88 gav 4,11:1). Reglen for det valgte står ovenfor og er urørt
   · Navnet er 14/400 hvilende og 14/600 valgt (Figma: Regular →
     Medium; husets knapper bærer 600). Datoen er 12 med tal i samme
     bredde — tallet i Figmas chip er sat i mono, og huset har ingen
   · Dagene og typerne deler stadig regel: "samme håndbevægelse"
   ============================================================ */
body:not(.personale) .dag,
body:not(.personale) .type-knap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 1px solid rgba(36, 26, 23, .18);
  background: transparent;
  white-space: nowrap;
}
/* Typerne fylder rækken (flex 1 1 9.5rem ovenfor) — midt i fladen, ellers
   hang "7 ude" i venstre side af en knap i fuld bredde ved bordet. Den
   gamle midtstilling var grid (justify-items) og døde med inline-flex. */
body:not(.personale) .type-knap { justify-content: center; }
/* ⚠️ KUN DET, DER IKKE ER VALGT. :hover vejer det samme som .valgt
   (0,3,1), og reglen her står længere nede — musen over den valgte dag
   gjorde den grå i stedet for rød (fullskaerm-gamle fangede det 11/10). */
body:not(.personale) .dag:not(.valgt):hover,
body:not(.personale) .type-knap:not(.valgt):hover { background: rgba(36, 26, 23, .05); border-color: rgba(36, 26, 23, .18); }
body:not(.personale) .dag-navn,
body:not(.personale) .type-navn { font-size: 14px; font-weight: 400; }
body:not(.personale) .dag.valgt .dag-navn,
body:not(.personale) .type-knap.valgt .type-navn { font-weight: 600; }
body:not(.personale) .dag-dato,
body:not(.personale) .type-note { font-size: 12px; font-variant-numeric: tabular-nums; }
/* Det valgte er fyldt og fladt som Figmas — skyggen under det røde var
   den eneste skygge i striben og løftede valget ud af rækken. */
body:not(.personale) .dag.valgt,
body:not(.personale) .type-knap.valgt { box-shadow: none; }
body:not(.personale) .dag.fuld:not(.valgt) { background: transparent; }

/* ============================================================
   ARRANGEMENTER — ARBEJDSBORDET  (12/10, js/admin/arrangementer.js)
   ------------------------------------------------------------
   Chefens ønske: en event-arrangør, der lægger alle de kommende
   events ind. Husets egne byggeklodser (.kort, .felt, .adm-seg,
   .maerke, .knap) — et nyt sæt knapper ville være en fjerde udgave
   af den samme dør. Alt er scopet til body.personale: gæstesiderne
   deler arket.
   ============================================================ */
body.personale .arr-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 14px; }
body.personale .arr-top input[type="search"] { flex: 1 1 12rem; min-width: 0; }
body.personale .arr-top #arr-ny { margin-left: auto; }
body.personale .arr-tal { font-variant-numeric: tabular-nums; opacity: .7; margin-left: 2px; }
body.personale .arr-tal:empty { display: none; }

body.personale .arr-maaned {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
}
body.personale .arr-maaned:first-child { margin-top: 0; }

body.personale .arr-raekke {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 12px 0;
  border-top: 1px solid var(--streg);
}
body.personale .arr-maaned + .arr-raekke { border-top: 0; }
body.personale .arr-dag {
  display: grid;
  justify-items: center;
  align-content: start;
  padding: 6px 0;
  border-radius: 14px;
  background: rgba(36, 26, 23, .05);
  line-height: 1.1;
}
body.personale .arr-dag b { font-size: 22px; font-variant-numeric: tabular-nums; }
body.personale .arr-ugedag,
body.personale .arr-md { font-size: 12px; color: var(--muted); }
body.personale .arr-raekke.aflyst .arr-titel { text-decoration: line-through; text-decoration-thickness: 1.5px; }
body.personale .arr-raekke.kladde .arr-dag { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(36, 26, 23, .18); }
body.personale .arr-maerker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body.personale .arr-kat { background: rgba(36, 26, 23, .07); color: var(--sea); }
body.personale .arr-serie { font-size: 12px; color: var(--muted); }
body.personale .arr-titel { margin: 4px 0 2px; font-size: 17px; line-height: 1.25; }
body.personale .arr-meta,
body.personale .arr-tilmeldt { margin: 0; font-size: 14px; color: var(--muted); }
body.personale .arr-tilmeldt { color: var(--sea); font-variant-numeric: tabular-nums; }
body.personale .arr-knapper { grid-column: 2; margin-top: 6px; }
body.personale .knap.fare-tekst { color: var(--red-tekst); }
body.personale .arr-tom { padding: 8px 0; }
@media (min-width: 900px) {
  body.personale .arr-raekke { grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; }
  body.personale .arr-knapper { grid-column: 3; margin-top: 0; justify-content: flex-end; }
}

/* ---- Formularen -------------------------------------------- */
body.personale .arr-gitter { display: grid; gap: 20px; }
@media (min-width: 1000px) {
  body.personale .arr-gitter { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  body.personale .arr-eksempel { position: sticky; top: 16px; }
}
body.personale .arr-afsnit {
  margin: 0 0 18px;
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid var(--streg);
  min-width: 0;
}
body.personale .arr-afsnit legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
}
body.personale .felt-etiket { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
/* Valgene ombryder — fem steder står ikke på én linje på en telefon. */
body.personale .adm-seg.arr-valg { display: flex; flex-wrap: wrap; border-radius: 22px; }
body.personale .arr-gentag-liste { margin-top: 4px; }
/* ⚠️ KUN PÅ ARBEJDSBORDET. Første udgave stod som `body.personale
   .knap-tekst` — og "Glemt koden?" på login er også .knap-tekst, så
   den skiftede farve og mistede sin luft (fundet ved at læse reglen,
   ikke af en prøve). Og 44 px høj: den fulde runde målte "Ret
   stedernes navne" til 21 px på en telefon (admin-gennemgang: under
   30 er for lille til en finger). */
body.personale #p-arrangementer .knap-tekst {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--red-tekst);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
body.personale .arr-billede-vis { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
body.personale .arr-billede-vis img { width: 96px; height: 64px; object-fit: cover; border-radius: 10px; }

/* ---- Forhåndsvisningen — kalendersidens kort i lille ---------- */
body.personale .arr-eksempel-titel { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
body.personale .arr-eksempel-titel + * { margin-bottom: 18px; }
body.personale .arr-kv {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(36, 26, 23, .08), 0 8px 24px -12px rgba(36, 26, 23, .18);
}
body.personale .arr-kv-dato { display: grid; justify-items: center; align-content: start; border-right: 1px solid var(--streg); padding-right: 8px; }
body.personale .arr-kv-dato b { font-size: 26px; color: var(--red-tekst); line-height: 1; font-variant-numeric: tabular-nums; }
body.personale .arr-kv-dato span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
body.personale .arr-kv-slags { font-size: 12px; font-weight: 600; color: var(--red-tekst); }
body.personale .arr-kv h4 { margin: 4px 0; font-size: 17px; line-height: 1.2; }
body.personale .arr-kv-meta { margin: 0; font-size: 13px; color: var(--sea); }
body.personale .arr-kv-besk {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.personale .arr-kv-foto { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; margin-top: 8px; }
body.personale .arr-kv-knap { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--muted); }
body.personale .arr-kv-knap.rod { padding: 7px 14px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 600; }
body.personale .arr-kv.aflyst h4 { text-decoration: line-through; }
body.personale .arr-kv.aflyst .arr-kv-knap { color: var(--red-tekst); font-weight: 600; }
body.personale .arr-kv-forside { padding: 12px 14px; border-radius: 16px; background: #241a17; color: #fdf7ef; }
body.personale .arr-kv-forside b { display: block; font-size: 14px; }
body.personale .arr-kv-forside p { margin: 4px 0 0; font-size: 13px; opacity: .85; }

/* ---- Advarslerne: det datoen rammer -------------------------- */
body.personale .arr-advarsler:empty { display: none; }
body.personale .arr-advarsler { margin: 4px 0 12px; }
body.personale .arr-advarsel {
  margin: 0 0 6px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(214, 42, 58, .08);
  color: var(--red-dyb);
  font-size: 14px;
}

/* ---- Stederne -------------------------------------------------- */
body.personale .arr-sted-raekke .navn { flex: 1 1 12rem; }
body.personale .arr-sted-raekke.skjult-sted input { color: var(--muted); text-decoration: line-through; }

/* ---- Tilmeldinger: dørlisten ud af admin ------------------------ */
body.personale .tilmeld-eksport { margin: 4px 0 12px; }

/* ============================================================
   LEVERINGENS TIDSPLAN  (17/10)
   ------------------------------------------------------------
   Mikkel: "er det der, det skal i gang sættes? … det skal være
   ret nemt inden i admin … det må ikke kunne gå galt". Tre trin
   med ord — lav senest · kør senest · ved døren — og én linje,
   der siger, hvad klokken betyder nu. Admin.leveringsPlan bygger
   den; Bestillinger, Overblik og Køkkenet viser den samme.

   Farven er FASEN, ikke pynt: rolig, mens der er tid; ravgul, når
   køkkenet skal i gang; rød først, når bilen skulle være kørt. Et
   rødt kort hele formiddagen ville lære personalet at overse det.
   Kontrasten er regnet: #6b4a12 på ravgul ≈ 7:1, hvid på --red
   4,94:1 (fed 14 px), --red-dyb på --scoop over 6:1.
   ============================================================ */
body.personale .lev-plan {
  margin: 0 0 12px;
  padding: 10px 12px 12px;
  border: 1px solid var(--streg);
  border-radius: var(--r-lille);
  background: var(--paper);
}
body.personale .lev-trin {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
}
body.personale .lev-trin-et {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  border-radius: 10px;
  min-width: 0;
}
/* pilen mellem trinene — rækkefølgen ER informationen */
body.personale .lev-trin-et + .lev-trin-et::before {
  content: "→";
  position: absolute;
  left: -9px;
  top: 22px;
  color: var(--muted);
  font-size: 13px;
}
body.personale .lev-trin-hvad {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
body.personale .lev-trin-kl {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--sea);
}
body.personale .lev-trin-mer {
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  overflow-wrap: anywhere;
}
body.personale .lev-trin-et.aktiv { background: var(--sand2); }
body.personale .lev-trin-et.aktiv .lev-trin-hvad { color: var(--sea); }

body.personale .lev-status,
body.personale .lev-bil {
  margin: 8px 0 0;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
body.personale .lev-plan[data-fase="venter"] .lev-status { background: var(--sand2); color: var(--sea3); font-weight: 600; }
body.personale .lev-plan[data-fase="snart"] .lev-status  { background: rgba(214, 158, 42, .20); color: #6b4a12; }
body.personale .lev-plan[data-fase="nu"] .lev-status     { background: rgba(214, 158, 42, .34); color: #5a3c0c; }
body.personale .lev-plan[data-fase="sen"] .lev-status    { background: var(--red); color: #fff; }
body.personale .lev-plan[data-fase="koert"] .lev-status  { background: rgba(46, 125, 50, .12); color: #1f5a24; font-weight: 600; }
body.personale .lev-plan[data-fase="sen"] { border-color: var(--red); }
body.personale .lev-plan[data-fase="koert"] .lev-trin-kl { color: var(--muted); }
body.personale .lev-bil { background: var(--scoop); color: var(--red-dyb); }

/* Overbliks og Køkkenets række: samme plan, mindre. */
body.personale .lev-plan-kompakt { margin: 8px 0 4px; padding: 6px 8px 8px; }
body.personale .lev-plan-kompakt .lev-trin-kl { font-size: 17px; }
body.personale .lev-plan-kompakt .lev-trin-et { padding: 4px 6px; }
body.personale .lev-plan-kompakt .lev-trin-et + .lev-trin-et::before { top: 17px; }
body.personale .lev-plan-kompakt .lev-status,
body.personale .lev-plan-kompakt .lev-bil { margin-top: 6px; padding: 5px 8px; font-size: 13px; }

/* ---- Åbningstider → Levering: store bestillinger --------------- */
body.personale .store-bestillinger { margin: 14px 0 4px; }
body.personale .store-trin { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
body.personale label.store-raekke {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 15px;
  color: var(--sea);
}
body.personale label.store-raekke input { width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; }
body.personale .store-eksempel {
  margin: 8px 0 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--sand2);
  font-size: 14px;
  line-height: 1.45;
  color: var(--sea);
}
body.personale .store-eksempel:empty { display: none; }
body.personale .store-eksempel.fejl { background: rgba(214, 42, 58, .08); color: var(--red-dyb); }
body.personale .store-tider { margin: 4px 0 0; padding-left: 18px; font-variant-numeric: tabular-nums; }
body.personale .store-tider li { margin: 1px 0; }
body.personale label[for="levering-biler"] { display: block; margin-top: 14px; }

/* ============================================================
   KALENDER → FERIE OG LUKKEDAGE  (18/10)
   ------------------------------------------------------------
   Kortet øverst på fanen: hver lukning på én række med hvornår
   gæsterne ser den, og «Ret». Den grønne status er «det står på
   siden nu» — det, personalet skal kunne se med et blik.
   ============================================================ */
body.personale .ferie-liste { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
body.personale .ferie-raekke {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--streg);
  border-radius: var(--r-lille);
  background: var(--paper);
}
body.personale .ferie-emoji {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sand2);
  font-size: 20px;
  line-height: 1;
}
body.personale .ferie-hvad { flex: 1 1 auto; min-width: 0; }
body.personale .ferie-hvad b { font-size: 16px; color: var(--sea); }
body.personale .ferie-periode { display: block; font-size: 15px; color: var(--sea); }
body.personale .ferie-status { margin: 3px 0 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
body.personale .ferie-status.nu { color: #1f5a24; font-weight: 700; }
body.personale .ferie-raekke .knap { flex: 0 0 auto; }
body.personale .ferie-tom { margin: 8px 0; }

/* Forhåndsvisningen i formularen er gæstens kort i mindre luft —
   og knapperne må ikke sende personalet ud af admin midt i en
   indtastning. */
body.personale .kal-lukket-vis { padding: 6px 0 2px; }
body.personale .kal-lukket-vis a { pointer-events: none; }

/* 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}