/* BŒF STHLM — riktning "Mockup". Kundens pekade mockup ar strukturen; bilderna ar
   kundens egna renderingar och fakta kommer ur docs/spec.md.
   Varje kontrastvarde harleds ur matrisen i spec 4 eller ur en raknad slojkvot.
   Ingen animation traffar width, gradient eller filter: bara transform och opacity -
   UTOM .menyomslag (Dennis-godkant "05 Diagonalsvep"), som medvetet far animera
   clip-path for att matcha den faktiska referensen. Se motiveringen dar. */

:root {
  /* Slojan over hero-fotot. Ink, eftersom mockupens hero ar neutralt morkt.
     Basen ligger pa .34 over hela fotot; textbandet lagger .52 ovanpa, alltsa
     samlad tackning 0.683. Over den ljusaste MOJLIGA pixeln (255,255,255) ger det
     6.15:1 mot ivory. Vinvaggen innehaller faktiska (255,255,255)-pixlar, sa
     varsta fallet ar matt och inte antaget. Toppbandet lagger .50 -> 0.670 -> 5.86:1.
     Stoppen star i rem, inte procent: i procent loper fadet genom de oversta
     raderna och glyferna hogst i blocket hamnar pa fel alfa. */
  --sloja: 16, 14, 15;
  --sloja-bas: .34;
  --sloja-topp: .50;
  --sloja-text: .52;
  --sloja-golv: .38;

  --linje-brass: rgba(224, 184, 124, .28);
  --linje-ivory: rgba(245, 243, 239, .18);
  --ram-ivory: rgba(245, 243, 239, .55);
  --matt-text: 34rem;

  /* tokens.css satter .18em - Dennis pekade ut synlig ojamn lucka i versala ord
     (BOEF) vid den bredden, sarskilt runt O. Natt bara har (mockup), inte i
     den delade tokens.css, sa leverans-landningssidan och de andra riktningarna
     inte paverkas. */
  --track-display: .08em;
  /* tokens.css satter .3em pa etikett-labels ("OM BOEF", "JOBB", "TACK").
     Dennis flaggade samma typ av lucka har - natt till samma varde som
     redan anvands for sajtens ovriga sma UI-etiketter (.knapp/.sidfot__copy). */
  --track-etikett: .12em;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--ink);
  /* Utan detta ritar webblasaren scrollbaren i det LJUSA temat aven pa en
     helmork sajt - pa macOS syns den som en blinkande vit stapel var gang
     man scrollar. scrollbar-color tacker Firefox pa Windows/Linux dar
     scrollbaren inte ar en overlay. */
  color-scheme: dark;
  scrollbar-color: var(--charcoal) var(--ink);
  /* Ankarhopp fran menynav ska klara sidhuvudet OCH menynav-raden, inte bara
     sidhuvudet - annars landar rubriken bakom stickynavet. Samma monster och
     samma variabelnamn som restaurang-moldau (--topp-h/--menynav-h). */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topp-h, 4.4rem) + var(--menynav-h, 3.5rem) + var(--s-4));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Grundfargen sitter pa bade html och body: annars visar iOS rubber-band en annan
   farg i kanten an sektionen som ligger dar. */
body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: .01em;
}

/* Spriten far inte vara display:none - da renderar <use> inte i alla lasare. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Visuellt gomd, last av skarmlasare. clip-path framfor width:0 - en nollbred box
   tas bort ur tillganglighetstradet i vissa lasare. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--brass-ljus);
  outline-offset: 3px;
}

/* ---------- typografi ---------- */

.display {
  margin: 0;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 1.14;
  /* Langa versaler med tracking ar obrytbara ord */
  overflow-wrap: break-word;
}
.display--stor { font-size: clamp(1.5rem, 4.4vw, 2.5rem); }
.display__rad { display: block; }

.etikett {
  display: block;
  margin: 0 0 var(--s-6);
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-etikett);
  /* Pa burgundy: brass-ljus 8.94:1. Mockupens rosa faller under 4.5:1. */
  color: var(--brass-ljus);
  overflow-wrap: break-word;
}

.brod {
  max-width: var(--matt-text);
  width: 100%;
  margin: 0 0 var(--s-4);
  color: var(--stone);
  font-size: 1rem;
}
.brod:last-child { margin-bottom: 0; }
/* KAND, MEDVETET AVVAGT: pa om/kontakt/jobb ar .brod--mobil inte DOM-sist
   (osynliga .brod--desktop foljer), sa :last-child missar den och den
   behaller sin vanliga 16px bottenmarginal. Provade att fixa med :has()
   men det gjorde de tre sidornas lada 16px LAGRE an meny/dryck - bytte ett
   68px navoverlapp mot ett 16px hojd-glapp, fel handel givet att Dennis
   upprepat att alla sex ska vara SAMMA storlek. 16px extra luft i botten
   pa tre av fem sidor (64px topp mot 80px botten dar) ar det kvarvarande,
   medvetet accepterade priset - marginellt mot navproblemet det ersatte. */

/* P1 (feedback-checklista), variant 3 "Tracked kicker duo": OM-sektionen pa
   index.html gick fran tre brodstycken till tva korta rader. Behandlas som
   sma versala, sparrade etiketter i brass - samma register som .etikett/
   knapptexten - istallet for brodtext, sa de tva raderna blir arkitektoniska
   snarare an paragraf. Skopat till #om (bara forstasidans sektion) sa ovriga
   fem sidors om__txt/.brod (om-intro/meny-intro/dryck-intro/kontakt-intro/
   jobb-intro) ar oforandrade. */
#om .brod {
  color: var(--brass-ljus);
  font-size: clamp(.9375rem, 1.6vw, 1.0625rem);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
#om .brod:first-of-type { color: var(--ivory); }

/* P3 (feedback-checklista), variant 3 "Kicker trio + payoff": om.html:s
   Metropolitan Gallery-sektion gick fran tva langa stycken till tre korta
   platsrader + Magritte-taglinen. Platsraderna (Tokyo/London/Stockholm) blir
   sma versala brass-etiketter i rad; den franska raden ([lang="fr"]) lyfts
   fram som den stora, ljusa poangen istallet for att smalta in. Skopat till
   #om-intro (bara om.html:s hero) - paverkar inte meny-intro/dryck-intro/
   kontakt-intro/jobb-intro som delar samma om__txt/.brod-markup. */
#om-intro .brod {
  color: var(--brass-ljus);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  /* Varje rad (Tokyo precision./London attitude./Stockholm after dark.) pa
     sin egen rad - block, inte inline-block. (Tidigare inline-block-forsok
     lat tva av dem hamna sida vid sida; Dennis ville ha en per rad.) */
  display: block;
  width: 100%;
  margin: 0 0 var(--s-2);
}
#om-intro .brod[lang="fr"] {
  display: block;
  width: 100%;
  color: var(--ivory);
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  margin: var(--s-4) 0 0;
}

.skiljare {
  width: 4.5rem;
  height: 0;
  margin: var(--s-8) 0;
  border: 0;
  border-top: 1px solid var(--linje-brass);
}

.inner {
  max-width: var(--matt);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

/* ---------- knappar och lankar ----------
   Varje tillstand deklarerar BADA fargerna: a:hover{color} slar varje .klass{color}
   pa specificitet, sa en knapp som bara byter bakgrund arver lankfargen. */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* inline-flex kollapsar blanktecknet mellan barnen */
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-4);
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
}

.knapp--linje {
  background: transparent;
  color: var(--ivory);
  border-color: var(--ivory);
}
.knapp--linje:hover,
.knapp--linje:focus-visible {
  background: var(--ivory);
  color: var(--ink);
  border-color: var(--ivory);
  transform: translateY(-2px);
}
.knapp--linje:active {
  background: var(--ivory);
  color: var(--ink);
  border-color: var(--ivory);
  transform: translateY(0);
}

/* Samma knapp pa den vinroda platan: inverteringen ger 14.97:1 at bada hallen. */
.om__txt .knapp--linje { border-color: var(--ram-ivory); }
.om__txt .knapp--linje:hover,
.om__txt .knapp--linje:focus-visible { background: var(--ivory); color: var(--burgundy); border-color: var(--ivory); }
.om__txt .knapp--linje:active { background: var(--ivory); color: var(--burgundy); border-color: var(--ivory); }

.textlank {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--brass-ljus);
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  text-decoration: underline;
  text-underline-offset: .32em;
  text-decoration-thickness: 1px;
  overflow-wrap: break-word;
  transition: color .2s ease;
}
.textlank:hover,
.textlank:focus-visible { color: var(--ivory); text-decoration-color: var(--ivory); }

.hoppa {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  background: var(--brass-ljus);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  text-decoration: none;
  transform: translateY(-200%);
}
.hoppa:focus-visible { background: var(--brass-ljus); color: var(--ink); transform: translateY(0); }

/* ---------- sidhuvud: fast (foljer scroll), transparent over heron -----------
   .scrolla lagg till av script.html nar man scrollat forbi sjalva heron/introt -
   annars overlappar den transparenta navraden vanligt sidinnehall lasbarhet. */

.topp {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  /* iOS Safari slapper ibland fixed-lagret ur sitt eget compositing-lager
     under en aktiv scroll-gest och maste rita om det - synligt som att
     headern slacks/blinkar till nar man scrollar. translateZ(0) tvingar
     ett eget GPU-lager sa den aldrig ritas om under gesten. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Bakgrunden ligger pa ett eget lager och toningen sker via opacity, inte
   background-color: en background-color-transition maste malas om av
   huvudtraden varje scroll-frame, och hinner den inte far man en vit
   blinkning (elementets omalade standardyta) innan nya farger hinner rendera.
   opacity ar rent GPU-komposit och kan aldrig blinka sa. */
.topp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  border-bottom: 1px solid rgba(245, 243, 239, .08);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  will-change: opacity;
}
.topp.scrolla::before { opacity: 1; }

.topp__inner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: var(--matt);
  margin-inline: auto;
  padding: var(--s-3) var(--s-4);
}

.topp__mark {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  flex: 0 0 auto;
  color: var(--ivory);
  text-decoration: none;
}
.topp__mark:hover, .topp__mark:focus-visible { color: var(--brass-ljus); }
.topp__mark svg { display: block; width: 58px; height: auto; }

.topp__nav { display: none; }

.topp__hoger {
  display: flex;
  align-items: center;
  /* s-4 istallet for s-2 (Dennis 2026-09-17): Boka bord-plakettens egen
     outline-offset:3px ater redan en bit av ett smalt mellanrum, sa
     avstandet till sprakvaxlaren kande sig trangt. */
  gap: var(--s-4);
  margin-inline-start: auto;
  flex: 0 0 auto;
}

.sprak {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--ram-ivory);
  flex: 0 0 auto;
}
.sprak__knapp {
  min-height: var(--tap);
  padding: 0 var(--s-2);
  background: transparent;
  color: var(--ivory);
  border: 0;
  font-family: inherit;
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.sprak__knapp:hover,
.sprak__knapp:focus-visible { background: rgba(245, 243, 239, .14); color: var(--ivory); }
.sprak__knapp[aria-pressed="true"] { background: var(--ivory); color: var(--ink); }
.sprak__knapp[aria-pressed="true"]:hover,
.sprak__knapp[aria-pressed="true"]:focus-visible { background: var(--ivory); color: var(--ink); }

/* Sprakvaxlaren finns pa tva stallen: i sidhuvudet pa desktop och i den utfallda
   panelen pa mobil. Mockupen har ingen vaxlare - tvasprakigheten ar ett krav som
   maste na fram nagonstans, och sidhuvudets hoger ar det enda stallet som finns. */
.topp__hoger .sprak { display: none; }

/* Dennis 2026-09-22, tva steg: forst "den inre ramen kan behovas lite mer
   luft" (8px -> 16px), sedan precisering: "det inre strecket kan narma sig
   boka bord-texten sa den far lite mer spacing mellan linjerna" - alltsa
   12px text-till-inre-linje och 3px mellan linjerna (outline-offset nedan),
   inte 16px/1px. Luften ska sitta MELLAN linjerna, inte innanfor. */
.topp__boka { padding-inline: var(--s-3); }

/* Boka bord ska poppa mer an ovriga knappar (feedback-checklista P11/P12:
   sajtens viktigaste kommersiella CTA, ska kannas hardare an resten).
   Massingsplakett (koncept 03 av 15 provade, Dennis valde 2026-09-17, se
   BŒF-artefakten "Femton satt att fa den att poppa mer"): dubbel massingsram
   med luft mellan linjerna (outline-offset) sa knappen laser som ett fysiskt
   foremal - en gravyrskylt vid entren - inte en vanlig interaktionsyta.
   Ersatte den tidigare vinroda fyllningen (2026-09-15). Galler bade
   skrivbordsnavets knapp och den utfallda mobilpanelens (bada har klassen
   .topp__boka sedan 2026-09-15). Brass/ink-paret ar samma som redan anvands
   av .knapp--fylld (kakbannerns Acceptera alla) - ingen ny kontrastmatning
   behovs for hover-laget. */
.topp__boka.knapp--linje {
  background: transparent;
  color: var(--ivory);
  border: 1px solid var(--brass);
  outline: 1px solid var(--brass);
  outline-offset: 3px;
  /* Dennis 2026-09-22: "gor sa den alignar med sv/en-knappen" - den YTTRE
     linjen ska ga i liv med spraktoggelns ram (46px hog). Ytterramen ligger
     1px linje + 3px luft = 4px utanfor boxen, sa boxen ar 46 - 8 = 38px.
     Klickytan halls anda pa 46px via ::after som tacker ut till ytterlinjen
     (outline ar inte klickbar), sa tap-mattet (44px) klaras. */
  min-height: calc(var(--tap) - 6px);
  position: relative;
}
.topp__boka.knapp--linje::after { content: ""; position: absolute; inset: -4px; }
.topp__boka.knapp--linje:hover,
.topp__boka.knapp--linje:focus-visible {
  background: var(--brass);
  color: var(--ink);
  border-color: var(--brass);
}
.topp__boka.knapp--linje:active {
  background: var(--brass-mork);
  border-color: var(--brass-mork);
  color: var(--ivory);
}

/* Hamburgaren. Tre streck ritade i kod, inget ikonbibliotek. */
.lucka {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  background: transparent;
  border: 1px solid var(--ram-ivory);
  color: var(--ivory);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color .2s ease, border-color .2s ease;
}
.lucka:hover, .lucka:focus-visible { background: rgba(245, 243, 239, .14); border-color: var(--ivory); }
/* <span> med width/height gor ingenting utan display:block. */
.lucka span {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
}

/* Utfalld panel. VARJE barn mats mot panelens bredd: en .knapp ar inline-flex och
   kollapsar till sin textbredd medan nav-lankarna far hela mattet, vilket ger en
   halvbred knapp som laser som fellagd. Darfor display:flex pa knappen har. */
.panel {
  background: var(--ink);
  border-top: 1px solid var(--linje-ivory);
  border-bottom: 1px solid var(--linje-ivory);
  padding: var(--s-4) var(--s-4) var(--s-6);
}
.panel__lista { display: grid; gap: 0; margin: 0 0 var(--s-4); padding: 0; }
.panel__lista a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--linje-ivory);
  color: var(--ivory);
  text-decoration: none;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  overflow-wrap: break-word;
}
.panel__lista a:hover,
.panel__lista a:focus-visible { color: var(--brass-ljus); background: rgba(245, 243, 239, .06); }
.panel__lista a[aria-current="page"] { color: var(--brass-ljus); border-bottom-color: var(--linje-brass); }
.panel .knapp { display: flex; width: 100%; }
.panel__botten { display: flex; justify-content: center; margin-top: var(--s-4); }

/* ---------- hero ----------
   Fotot ar vinvaggen: upplyst vitrin till vanster, rummet till hoger, kompositionellt
   narmast mockupens hero. Massing far ALDRIG sta pa fotografi; blacket ar ivory. */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;   /* svh, aldrig vh: 100vh ar hojden UTAN adressfaltet. Heron ska tacka hela forsta skarmen, inte 88% av den. */
  padding-block: 8rem 4rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

.hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
  z-index: 0;
}

/* Konstant bas over hela fotot. */
.hero__ton {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(var(--sloja), var(--sloja-bas));
  pointer-events: none;
}

/* Toppbandet barer sidhuvudets ivory-text. Flat till 7rem, alltsa hela
   sidhuvudets hojd, och fadet ligger UTANFOR texten. */
.hero__topp {
  position: absolute;
  inset: 0 0 auto 0;
  height: 14rem;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(var(--sloja), var(--sloja-topp)) 0rem,
    rgba(var(--sloja), var(--sloja-topp)) 7rem,
    rgba(var(--sloja), 0) 14rem
  );
  pointer-events: none;
}

.hero__golv {
  position: absolute;
  inset: auto 0 0 0;
  height: 12rem;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(var(--sloja), var(--sloja-golv)) 0rem,
    rgba(var(--sloja), 0) 12rem
  );
  pointer-events: none;
}

.hero__mitt {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: var(--matt);
  padding-inline: var(--s-6);
  text-align: center;
}

/* Textbandet (.hero__mitt::before) togs bort 2026-09-17 (Dennis: "mork box
   for boef-loggan") - den konstanta-alfa-remsan bakom logotypen var byggd
   for stillbilden och lasta bra dar, men mot den rorliga herofilmen las den
   som en tydlig mork ruta istallet for en mjuk kontrastboost. Bastonen
   (.hero__ton) racker for kontrast over hela fotot/filmen. */

.hero__h1 { margin: 0; color: var(--ivory); }
.hero__h1 svg {
  display: block;
  width: min(15rem, 100%);
  height: auto;
  margin-inline: auto;
}

/* Strecket mellan lockupen och tagline - fanns i kundens originalfiler
   (logo1.ai/pdf) men hade degat till en 0-bred bana i bade kall-PDF:en
   och var raa SVG-extraktion, sa den forsvann helt ur ordmarket. Matt ur
   kundens mockup-skarmdump: ett 1px-strecket, ~halva lockupens hojd,
   centrerat i mellanrummet fore taglinen. Hojden foljer darfor samma
   brytpunkter som .hero__h1 svg (bredd * 102.5/185.7 * 0.5). */
.hero__streck {
  display: block;
  width: 1px;
  height: 4.14rem;
  margin: var(--s-8) auto;
  background: var(--ivory);
}

/* En svg ar ett block: text-align:center pa foraldern flyttar inte blocket. */
.hero__ceci { margin: 0; color: var(--ivory); }
.hero__ceci svg {
  display: block;
  width: min(16rem, 100%);
  height: auto;
  margin-inline: auto;
}

/* ---------- om-sektionen: tvadelad, vinrod platta till vanster ---------- */

.delad {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.om__txt {
  background: var(--burgundy);
  color: var(--ivory);
  padding: var(--s-16) var(--s-6);
}
.om__inner { max-width: 30rem; }
/* De sex heroerna (om/meny/dryck/kontakt/jobb - INTE forstasidan, dess block
   ar ett annat monster) hade olika hog text pa mobil beroende pa hur mycket
   copy varje sida rakade ha - allt fran 345px till 524px matt vid 390px bredd,
   Dennis ville att alla sex ska landa pa samma matt som meny/dryck (415px).
   .brod--mobil/.brod--desktop later tva olika langder av SAMMA budskap byta
   plats vid brytpunkten - kortare pa om.html (som annars fick tva hela
   stycken), langre pa kontakt/jobb (som annars var for korta). Galler bara
   .om__inner sa andra sidors vanliga .brod aldrig paverkas. */
.om__inner .brod--mobil { display: none; }
@media (max-width: 47.99rem) {
  .om__inner .brod--mobil { display: block; }
  .om__inner .brod--desktop { display: none; }
}
/* Dennis rattelse 2026-08-27: "centrerad" betydde INTE text-align (den
   forra versionen av den har regeln, borttagen) - han menade att
   textblocket ska ligga mitt i det vinroda blocket VERTIKALT.
   .om__txt HAR symmetrisk padding-block (64px upp/ner via var(--s-16)),
   men .topp ar fixed och LIGGER OVANPA blockets topp (68px pa mobil) - sa
   den effektivt SYNLIGA luften upptill var bara -4px (innehallet startade
   4px UNDER navets nederkant) mot 64px nertill. Dennis pekade ut exakt
   detta: matt fran nav, inte fran boxens rakanslutna topp. Fixen lagger
   navets hojd till padding-top pa mobil (bara pa de fem sidor dar
   .om__txt ar forsta sektionen och alltsa ligger under navet fran start -
   :not(#om) undantar fortfarande forstasidan). */
@media (max-width: 47.99rem) {
  .delad:not(#om) .om__txt {
    padding-top: calc(var(--s-16) + var(--topp-h, 4.4rem));
  }
}

.om__bild { position: relative; background: var(--ink); }
.om__bild img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 42%;
}
.om__ton { position: absolute; inset: 0; pointer-events: none; background: rgba(var(--sloja), var(--sloja-bas)); }

.om__knapp { margin: var(--s-8) 0 0; }

/* ---------- de tre korten ---------- */

.kort-band { background: var(--ink); border-top: 1px solid var(--linje-ivory); }

/* Fotona ska ga kant till kant over hela bredden, till skillnad fran resten av
   sidans textinnehall som halls inom --matt for lasbarhet - se kundens
   referensbild dar KOTT/DRYCK/MILJO tar hela horisontella linjen. */
.kort-rutnat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* Helbildskort: fotot fyller hela kortet, texten ligger ovanpa en morknad
   gradient nertill - inte en separat platta under bilden. Samma princip som
   hero-slojan: en konstant gradient racker har eftersom hela nedre tredjedelen
   ar text, till skillnad fran heron dar bara ett smalt textband behover den
   extra konstant-alfa-remsan. */
.kort {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.kort + .kort { border-top: 1px solid var(--linje-ivory); }

.kort__bild {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
/* Beskarningen per bild, satt efter att crop:en renderats och setts i faktisk storlek. */
#kott .kort__bild { object-position: 50% 12%; }
#dryck .kort__bild { object-position: 50% 50%; }
#miljo .kort__bild { object-position: 50% 46%; }

.kort__ton {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(var(--sloja), .94) 0%,
    rgba(var(--sloja), .82) 30%,
    rgba(var(--sloja), 0) 62%
  );
}

.kort__txtdel { position: relative; z-index: 2; padding: 0 var(--s-6) var(--s-8); }

.kort__ikon {
  display: block;
  margin: 0 0 var(--s-6);
  color: var(--brass);
}
.kort__ikon svg { display: block; width: 32px; height: 32px; }

.kort__rubrik {
  margin: 0 0 var(--s-4);
  font-size: 1.125rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--ivory);
  overflow-wrap: break-word;
}

.kort__txt {
  margin: 0 0 var(--s-6);
  max-width: 26rem;
  color: var(--stone);
  font-size: .9375rem;
}

/* ---------- generisk sid-sektion (under intro-panelen pa undersidor) ---------- */

.sida-sektion { padding-block: var(--s-16) var(--s-24); }

/* ---------- galleri-film (Om BOEF, "Cinematic Letterbox"-karusell) ----------
   ARKIVERAD 2026-08-26 - Dennis bytte till Podium (.podium nedan) pa om.html.
   Markupen ligger sparad i _arkiv-galleri-film-karusell.html.part, denna CSS
   och JS (script.html) rordes inte och fungerar direkt om den aterstalls.
   En scen, en bild i taget - Dennis ville inte skrolla genom sex staplade
   bilder. Aktiv bild tonas in/ut (JS togglar .aktiv), zoomar EN gang per
   visning (klassen .zoomar togglas av script.html med en tvingad reflow sa
   animationen alltid startar om fran scale(1) - annars fortsatter en
   infinite-animation fran nagon godtycklig fas nasta gang bilden visas).
   Bildtexten ligger OVANPA fotot, sa kontrasten ar inte gratis - samma
   tva-lagers slöja som .hero__ton + .hero__golv (matt en gang i spec 4,
   inte gissad pa nytt har). Ingen egen paus-knapp (Dennis 2026-08-26,
   miniatyrraden räcker) - WCAG 2.2.2 (auto-uppdaterande innehall maste
   kunna stoppas) uppfylls istallet genom att ETT klick pa en miniatyr
   bade byter bild OCH stannar autospelet permanent for besoket, se
   gfStanna() i script.html. */
.galleri-film { margin-top: var(--s-8); }
.galleri-film__scen { position: relative; aspect-ratio: 21 / 9; overflow: hidden; isolation: isolate; }
.galleri-film__figur {
  position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s ease;
}
.galleri-film__figur.aktiv { opacity: 1; z-index: 1; }
.galleri-film__figur img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.galleri-film__figur img.zoomar { animation: galleri-film-zoom 5s ease-out forwards; }
.galleri-film__figur--hog img { object-position: 50% 20%; }
.galleri-film__ton { position: absolute; inset: 0; z-index: 1; background: rgba(var(--sloja), var(--sloja-bas)); pointer-events: none; }
.galleri-film__golv {
  position: absolute; inset: auto 0 0 0; z-index: 1; height: 60%; pointer-events: none;
  background: linear-gradient(to top, rgba(var(--sloja), var(--sloja-golv)) 0%, rgba(var(--sloja), 0) 100%);
}
.galleri-film__figur figcaption { position: absolute; z-index: 2; left: var(--s-6); bottom: var(--s-4); right: var(--s-6); }
.galleri-film__figur figcaption .etikett { margin: 0 0 .25rem; }
.galleri-film__figur figcaption strong {
  display: block; font-weight: 300; font-size: clamp(1.125rem, 3vw, 1.5rem);
  letter-spacing: .05em; text-transform: uppercase; color: var(--ivory);
}
@keyframes galleri-film-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }

/* Flex-basis pa knappen sjalv gjorde ingenting - <li> ar flex-barnet, inte
   <button>, sa bredden mattes av bildens innehall (~193px) tills detta
   flyttades till li:et. Samma fallgrop som .galleri__figur en gang var. */
.galleri-film__miniatyrer { display: flex; justify-content: safe center; gap: var(--s-2); margin-top: var(--s-2); overflow-x: auto; }
.galleri-film__miniatyrer li { flex: 0 0 5.5rem; }
.galleri-film__miniatyrer button {
  width: 100%; aspect-ratio: 21 / 9; min-height: var(--tap); padding: 0; border: 2px solid transparent; overflow: hidden;
  cursor: pointer; opacity: .55; transition: opacity .2s ease, border-color .2s ease;
}
.galleri-film__miniatyrer button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galleri-film__miniatyrer button:hover, .galleri-film__miniatyrer button:focus-visible { opacity: .85; }
.galleri-film__miniatyrer button[aria-current="true"] { opacity: 1; border-color: var(--brass-ljus); }

/* ---------- galleri-svep (After Dark, diagonalt scroll-styrt svep) ----------
   Fem koncept provades i en BŒF-artefakt ("Fem sätt att scrolla genom
   kvällen"), Dennis valde detta 2026-09-17: en fast ("sticky") scen som
   staplar helskärmsbilder, dar overgangen mellan tva bilder styrs 1:1 av
   hur langt anvandaren scrollat - inget timer-baserat, inget autoplay.
   --n satts inline per instans (antal bilder) sa sparets hojd blir --n
   gonger 100vh utan att JS behover skriva CSS. JS (script.html) later
   scrollTop over sparet och satter clip-path per bild. */
/* Ingen topp-padding: heron ovanfor slutar i en bild och svepet borjar i en
   bild, det tomma bandet emellan lastes som en tom spalt (Dennis 2026-09-22). */
.galleri-svep-sektion { padding-block: 0; }
/* --kapitel (startsidan, 03 THE SPACE): ingen egen rubrikrad ovanfor -
   kapitelnumret ligger i galleri-svep__figur ISTALLET, sa det hamnar pa
   samma stalle (nere till vanster over bilden) som 02/04/05/06/07:s egna
   etikett - Dennis flaggade att 03 stack ut fore denna andring. */
.galleri-svep-sektion--kapitel { padding-block: 0; }
.galleri-svep { position: relative; height: calc(var(--n, 7) * var(--svep-h, 100vh)); }
.galleri-svep__scen { position: sticky; top: 0; height: var(--svep-h, 100vh); overflow: hidden; isolation: isolate; }
/* Provade en kortare scen har (68vh, samma skala som 02/04/05/06/07) men
   Dennis bad 2026-09-17 om att andra tillbaka - 03 THE SPACE ar helskarm
   igen, --svep-h faller tillbaka till 100vh via basregeln ovan. */
.galleri-svep__bild {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.galleri-svep__bild[data-i="0"] { clip-path: none; }
.galleri-svep__ton {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(var(--sloja), .58), transparent 42%);
}
.galleri-svep__figur { position: absolute; left: var(--s-6); bottom: var(--s-8); z-index: 3; color: var(--ivory); }
.galleri-svep__figur .etikett { display: block; margin-bottom: var(--s-2); }
.galleri-svep__figur strong { font-family: var(--font); font-size: 1.3rem; font-weight: 600; }
@media (min-width: 60rem) {
  .galleri-svep__figur { left: var(--s-12); bottom: var(--s-12); }
  .galleri-svep__figur strong { font-size: 1.7rem; }
}

/* ---------- kapitel (startsidan, P5-kapitlen 02/04/05/06) ----------
   Helskarmsbild + minimal text nertill, samma sloja-teknik som hero/galleri-svep.
   Fristaende sektioner - ingen egen scrollmekanik, bara en tyst helbildskansla
   mellan de befintliga blocken (Dennis 2026-09-17: lagg till, ta inte bort nagot). */
.kapitel { position: relative; overflow: hidden; }
.kapitel__bild { width: 100%; height: 68vh; min-height: 24rem; max-height: 42rem; object-fit: cover; display: block; }
.kapitel__ton {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(var(--sloja), .66), transparent 46%);
}
.kapitel__text { position: absolute; left: var(--s-6); right: var(--s-6); bottom: var(--s-6); color: var(--ivory); }
/* Dennis 2026-09-18, "fa texterna att poppa mer" (02-07): samma textskugga
   som menyomslagens kategorititlar - .kapitel__ton racker inte overallt,
   sarskilt inte over miljovideons rorliga, ibland ljusa bakgrund (03). */
.kapitel__text .etikett,
.kapitel__rad {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 10px rgba(0, 0, 0, .8), 0 6px 28px rgba(0, 0, 0, .65);
}
/* Dennis 2026-09-18, "gor texterna lite storre" (samma 02-07-texter). */
.kapitel__text .etikett { display: block; margin-bottom: var(--s-3); font-size: .8125rem; }
.kapitel__rubrik { margin: 0; font-weight: 300; font-size: 1.5rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ivory); }
/* max-width matchar .kapitel__text-behallaren (34rem pa desktop) istallet for
   en egen, smalare kapning - Dennis 2026-09-21, "botten texten ska vara
   langre an forsta raden": pa THE CELLAR (om.html) gjorde 30rem att "Kottet
   hangmorat, vinet lagrat — samma talamod, samma" bralades om och lamnade
   "hantverk." ensamt pa en egen kort rad - en klassisk overgiven sistarad.
   Bredare kolumn later brodtexten anvanda samma bredd som rubriken star pa
   i stallet for en smalare egen kant. */
.kapitel__rad { margin: var(--s-2) 0 0; max-width: 34rem; color: var(--stone); font-size: 1.125rem; line-height: 1.5; }
.kapitel__lank { margin-top: var(--s-4); display: inline-block; }
@media (min-width: 48rem) {
  .kapitel__text { left: var(--s-12); right: auto; bottom: var(--s-12); max-width: 34rem; }
  .kapitel__rubrik { font-size: 2.1rem; }
}

/* 07 - BOKA BORD: samma struktur/positionering som ovriga kapitel-sektioner
   (Dennis 2026-09-18, "ha knappen och text pa samma struktur som dom andra
   blocken") - ingen egen centrerad platta langre, bara den vanliga
   .kapitel__text-placeringen nere till vanster. .kapitel__cta ger bara
   knappens egna matt (storre klickyta an en textlank). */
.kapitel__cta { margin-top: var(--s-6); font-size: .78rem; padding-inline: var(--s-8); height: 3rem; }

/* 07 - BOKA BORD skiljer sig medvetet fran ovriga kapitel: BARA en centrerad
   knapp (Dennis 2026-09-22: etikett + Ceci-ordmarke bort, "det racker med
   knappen"), lagre sektion, och bilden flyttad sa knappen sitter mitt i
   portalens dorrar. Dorrarnas mittpunkt i portalen-guld ligger pa 47,5 % / 57 %
   av bilden (matt), inte 50/50 - darfor kan inte object-position ensam
   centrera dem nar bilden ar breddstyrd (ingen horisontell beskarning att
   flytta). Scopat pa #boka-kapitel sa 02/04/05/06 ar ororda. */
#boka-kapitel { height: clamp(16rem, 42vh, 30rem); }
#boka-kapitel .kapitel__bild {
  height: 100%; min-height: 0; max-height: none;
  object-position: 47.5% 57%;
}
#boka-kapitel .kapitel__text {
  left: 50%; right: auto; top: 50%; bottom: auto;
  transform: translate(-50%, -50%);
  max-width: 26rem;
  text-align: center;
}
#boka-kapitel .kapitel__cta { margin-top: 0; }
@media (min-width: 48rem) {
  /* Breddstyrd bild: gor den 105,3 % bred och lagg dess (47,5 %, 57 %)-punkt
     exakt i sektionens mitt. 105,3 = 50/47,5 sa vanster kant landar pa 0.
     Hojden begransas till 50vw sa bilden (16:9) alltid tacker vertikalt. */
  #boka-kapitel { height: min(42vh, 30rem, 50vw); }
  #boka-kapitel .kapitel__bild {
    position: absolute; left: 50%; top: 50%;
    width: 105.3%; max-width: none; height: auto;
    object-fit: unset; object-position: unset;
    transform: translate(-47.5%, -57%);
  }
  #boka-kapitel .kapitel__text { max-width: 30rem; }
}

/* Om BOEF THE FIRE/ALTAR/PODIUM/CELLAR/ROOM (Dennis 2026-09-21): forsta
   forsoket atervande .kort-band/.kort-rutnat (startsidans MILJÖ/DRYCK/KÖTT-
   rad, smala portrattkort i ett rutnat) - fel format ("du ska kolla pa
   forsta sidan och hur varje kategori ar en avlang bild"). Ratt monster ar
   .kapitel (startsidans FIRE/RUMMET/ALTAR/MEAT/AFTERDARK - avlanga
   helbildsband, ett i taget) - se sidor/om.html.part, ingen egen CSS
   behovdes, bara atervant klasserna rakt av. */

/* ---------- kontaktsidans uppgifter + bild/karta ----------
   Ingen ljus sektion - BOEF ar morkt genom hela sajten, till skillnad fran
   Moldaus ljusa/morka vaxling. Samma --ink/--charcoal som overallt annars.
   Dennis 2026-09-22: uppgifterna till vanster, till hoger bild OVER karta
   ("bilderna ska ligga pa vertikalen") som tva lika stora block (samma
   bredd, samma 4:3, samma ram). */
.kontakt-sektion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-12);
}
.kontakt-par { display: grid; gap: var(--s-6); }
@media (min-width: 60rem) {
  .kontakt-sektion { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: stretch; }
  /* Dennis 2026-09-22: "bilderna ska vara lika stora som texten ar lang" -
     hogerkolumnen ar exakt lika hog som uppgiftskolumnen och delas i tva
     lika delar. Darfor ingen aspect-ratio pa desktop: hojden kommer fran
     raden (= textens hojd), inte fran bilden. */
  .kontakt-par { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
  .kontakt-par .kontakt-bild, .kontakt-par .kontakt-karta { aspect-ratio: auto; min-height: 0; }
}

.uppgiftslista { display: grid; gap: var(--s-6); margin: var(--s-6) 0 0; }
.uppgiftslista > div { display: grid; gap: var(--s-1); }
.uppgiftslista dt {
  margin: 0;
  color: var(--brass-ljus);
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-etikett);
}
.uppgiftslista dd { margin: 0; color: var(--ivory); font-size: .9375rem; }
/* Dag- och tidskolumnen i linje, som .sidfot__tider. Bada anvander
   minmax(0, max-content) i stallet for bart max-content: ett bart max-content
   far grid-kolumnen att strunta i hur smalt fortaldrarutnatet faktiskt blivit och
   spilla over kanten - upptackt av qa.mjs vid 820px (mellan brytpunkterna). */
.uppgiftslista__tider { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, max-content); gap: 0 var(--s-4); }
.uppgiftslista dd a:not(.sidfot__adress) {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--linje-brass);
}
.uppgiftslista dd a:not(.sidfot__adress):hover,
.uppgiftslista dd a:not(.sidfot__adress):focus-visible { color: var(--brass-ljus); }

.kontakt-bild,
.kontakt-karta {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--charcoal);
  border: 1px solid var(--linje-ivory);
  overflow: hidden;
}
.kontakt-karta iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 16:9-rendering i 4:3-ram: entren sitter till hoger i bilden, sa
   beskarningen lutar dit hellre an mot den tomma gatan till vanster. */
.kontakt-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 88% 50%; }

/* ---------- formsplit ("Split med bild" - forslag 01) ----------
   Bild + formular sida vid sida. Delad mellan Kontakt och Jobb (bytte namn
   fran .kontaktform nar Jobb fick samma struktur, se docs-kommentar 2026-08-26).
   .falt/.jobbform ar redan stylade for jobbansokan, aterbrukas rakt av - se
   den kommentaren for kontrastmatten. */
.formsplit { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-8); margin-top: var(--s-8); align-items: end; }
@media (min-width: 48rem) { .formsplit { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-12); } }
/* Bilden ska vara lika hog som formularet (fran "SKRIV REDAN NU" till knappens
   botten), inte sin egen fasta kvot - darfor stracks kolumnen i stallet for
   att bara bottenjusteras, och img fyller den mattade hojden. min-height:0
   hindrar bildens naturliga kvot fran att tvinga raden hogre an formularet. */
.formsplit__bild { position: relative; align-self: stretch; min-height: 0; overflow: hidden; }
/* Absolut, inte i flodet: annars bidrar bildens egna kvot (1600x1800 pa 576px
   bredd = 648px) till radens hojd och satter ett GOLV under formularet - syntes
   2026-09-22 nar jobbformularet blev 631px hogt och bilden stod kvar pa 648
   med formularet 17px nedanfor bildens topp. Nu ar raden = formularet, alltid. */
.formsplit__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 47.99rem) { .formsplit__bild { display: none; } }
/* (.formsplit--kompakt, private.htmls halva/halva-variant 2026-09-21, togs
   bort 2026-09-22 nar formularet blev ensamt i .formram - se nedan.) */
/* .bildsvep (private.html, kapitelblocket CHAMBRE SÉPARÉE; hette
   .formsplit__bild--svep tills 2026-09-22 nar det flyttade fran formular-
   rutan till kapitelbilden): bildspel med samma diagonala
   klipp-svep som galleri-svepets kategorier (.galleri-svep__bild,
   script.html svepKna) - Dennis 2026-09-21 ville ha tillbaka just den
   effekten efter att en ren opacity-toning kandes for platt.
   TVA FELSOKTA VERSIONER INNAN DENNA (historik, lamnad har for nasta
   gang nagot liknande byggs): (1) alla N bilder permanent i DOM:en, en
   CSS animation-delay-tidtabell per bild - satt fast pa forsta bilden hos
   Dennis (Chrome, reducerad rorelse avstangd, vantat langre an forsta
   svepet). (2) samma N-bilder-permanent-i-DOM-upplagg men JS-driven
   classList+transition istallet for animation-delay - SAMMA symptom.
   Mattes i badda fallen hos Dennis: getComputedStyle och elementFromPoint
   sa att sista bilden korrekt tackte allt (clip-path: hel rektangel,
   ratt element overst i staplingen), men de faktiska pixlarna visade
   fortfarande forsta bilden - aven efter en tvingad scroll-repaint och
   efter att isolation:isolate + transform:translateZ(0) lades till.
   Roten verkar vara ATT SA MANGA (fem) fullrutan-tackande position:absolute-
   lager med clip-path fanns SAMTIDIGT i DOM:en - Chrome tappade bort
   omritningen av staplingsordningen. Fix (den har versionen): ALDRIG mer
   an tva bilder narvarande (inte display:none) samtidigt - script.html
   visar nasta bild, later den svepa in, doljer forra forst DAREFTER.
   Exakt samma tva-lager-modell som .menyomslag (som redan bevisligen
   fungerar for Dennis pa menysidan).
   FORSTA FORSOKET pa "exakt som after dark" (Dennis 2026-09-21) satte
   clip-path direkt via JS varje rAF-frame, som svepKna gor for After Dark
   sjalv - men Dennis rapporterade det som hackigt ("swipen hackar in och
   byter bild"). Roten: en CSS-transition later webblasarens compositor
   interpolera mellan tva polygon()-varden i nativ kod; JS som skriver en
   ny clip-path-strang 60 ggr/s tvingar layout+repaint pa huvudtraden varje
   frame och tappar bildrutor. LOSNING: tillbaka till en CSS-transition
   (som fore After Dark-onskemalet), men med en cubic-bezier som motsvarar
   After Darks egen quad-ease-in-out-kurva (svepKna/svepAutoCykel i
   script.html) sa rorelsens FORM ar densamma, bara motorn som kor den
   skiljer sig - ratt verktyg for en icke-scrollkopplad loop. */
.bildsvep { position: relative; overflow: hidden; }
.bildsvep img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 72% 100%);
  transition: clip-path 1.2s cubic-bezier(.455, .03, .515, .955), opacity 1.2s cubic-bezier(.455, .03, .515, .955);
}
/* Opacity + klipp tillsammans (Dennis 2026-09-21: "försök göra en fade på
   swipen så det inte känns lika hackigt") - den diagonala kanten ensam ar
   ett hart snitt, 100% opacitet pa bada sidor av linjen. Nasta bild tonar
   in SAMTIDIGT som den sveper, sa kanten sjalv blir mjuk istallet for en
   skarp klippning. */
.bildsvep img.svep-in { opacity: 1; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
@media (prefers-reduced-motion: reduce) {
  .bildsvep img { transition: none; }
}
.formsplit .jobbform { margin-top: 0; }

/* ---------- formram (private.html, jobb.html sedan 2026-09-22) ----------
   Dennis: "formularet [pa jobb], kan du bli likadant som pa private" -
   delad klass nu, ingen sidspecifik kopia. Formularet ensamt i en dubbel
   massingsram, samma motiv som Boka bord-plaketten i naven (1px linje,
   luft, 1px linje) men i storre
   skala: 20px mellan linjerna. Ramen ar en kant pa ett block, inte en knapp,
   sa luften inuti ar rejal och ramen halls utanfor .inner-bredden pa mobil
   av outline-offset - darfor 24px sidomarginal pa telefon sa ytterlinjen
   inte kapas av skarmkanten (1px kant + 20px offset + 1px outline = 22px,
   24px ger lite marginal).
   BUGFIX 2026-09-22 (Dennis: "linjerna sitter alldeles for tajt till
   formularet"): paddingen har ANVANT var(--s-10) sedan formram byggdes -
   s-10 finns aldrig definierad i tokens.css (skalan hoppar s-8 -> s-12),
   sa hela padding-deklarationen har varit "guaranteed-invalid" och
   ignorerats av webblasaren i tysthet. Formularet har haft padding: 0
   hela tiden, inte den "rejala 40/32px" den gamla kommentaren pastod -
   bara outline-offset gav nagon luft alls. Fixat med riktiga tokens. */
.formram {
  max-width: 36rem;
  margin: 0 auto;
  padding: var(--s-8) var(--s-8);
  border: 1px solid var(--brass);
  outline: 1px solid var(--brass);
  outline-offset: 20px;
}
.formram .jobbform { margin: 0; max-width: none; }
.formram .jobbform__tack { margin: 0 auto; }
@media (max-width: 47.99rem) { .formram { margin-inline: 24px; } }
/* Dennis 2026-09-22 "gor formularblocket och bildspelet lite mindre... jag
   syftade pa hojden inte det horisontella" - bara det VERTIKALA
   paddingvardet sankt (s-16->s-12 skrivbord, s-12->s-8 mobil ovan), det
   horisontella ar exakt samma som innan. Bildkolumnen kryper med eftersom
   den strackes till formularets hojd (se .formsplit__bild-kommentaren). */
@media (min-width: 48rem) { .formram { padding: var(--s-12) var(--s-12); } }
/* Tack-blocket ersatter formularet i samma kolumn men ska centreras mot
   bilden i stallet for att arva formularets bottenjustering. */
.formsplit .jobbform__tack { align-self: center; }

/* ---------- jobbformular ----------
   appearance:none pa select/input - det enda som tar formen fran plattformen
   (spec.md 10). Kontrast: stone/ink 9.12:1, ivory/ink 17.36:1, redan matt. */
.jobbform { display: grid; gap: var(--s-6); max-width: 34rem; margin: var(--s-6) 0 0; }
/* Dennis 2026-09-22 (private.html, sedan aterbrukad pa jobb.html samma dag
   - "formularet ar for langt at det vertikala, bredda ut det lite mer"):
   falt paras ihop pa samma rad istallet for att staplas var for sig -
   private.html: Namn/E-post och Telefon/Onskat datum. jobb.html: Namn/
   E-post. Enkolumn under 30rem (samma brytpunkt som tva-kol-monstret i
   kontaktformular-forslag.html) sa faten inte blir for smala pa telefon. */
.jobbform__par { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-6); }
@media (min-width: 30rem) { .jobbform__par { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.falt { display: grid; gap: var(--s-2); }
.falt label {
  color: var(--stone);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* Rod stjarna: dold tills ett obligatoriskt falt lamnas tomt vid ett
   inskicksforsok (script.html lyssnar pa "invalid", satter .falt--ogiltig).
   #E05A5A matt mot --ink: 5.3:1, over golvet for den lilla texten. */
.falt__stjarna { margin-left: .25em; color: transparent; }
.falt--ogiltig .falt__stjarna { color: #E05A5A; }
.falt input, .falt select, .falt textarea {
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: 1px solid var(--ram-ivory);
  border-radius: 0;
  color: var(--ivory);
  font-family: inherit;
  font-size: .9375rem;
  appearance: none;
}
.falt textarea { min-height: 8rem; resize: vertical; }
/* private.html enda: kortare meddelande-falt som en del av "mindre i hojd"
   (Dennis 2026-09-22) - jobb.htmls ansokningstextruta paverkas inte. */
#privatform .falt textarea { min-height: 6rem; }
.falt input:focus-visible,
.falt select:focus-visible,
.falt textarea:focus-visible { border-color: var(--brass-ljus); }
.falt select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ivory) 50%),
    linear-gradient(135deg, var(--ivory) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
/* Dennis 2026-09-22 (jobb.html): "lite storre gapp mellan 'Lamna dina
   uppgifter...' och Namn - korta ner spacingen och aligna allt". Etikett och
   ingress hade egna marginaler OVANPA .jobbforms grid-gap, sa avstandet till
   forsta faltet blev dubbelt (48px) mot faltens 24px. Nu noll egen marginal -
   grid-gapen ensam satter rytmen, samma 24px overallt. private.html har sin
   egen kompakt-regel (.formsplit--kompakt #privatform .jobbform__rad) med
   hogre specificitet och paverkas inte. */
.jobbform__etikett { margin: 0; }
.jobbform__rad { margin: 0; max-width: 30rem; color: var(--ivory); font-size: 1.0625rem; font-weight: 300; line-height: 1.5; }

/* Tack-blocket ersatter formuläret efter ett godkant inskick (script.html
   dolljer formuläret, visar detta). Samma etikett+rubrik-monster som
   resten av sajten, inte en liten kursiv rad langst ner. */
.jobbform__tack { display: grid; gap: var(--s-2); max-width: 30rem; }
.jobbform__tack h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--ivory);
}
.jobbform__tack p { margin: 0; color: var(--stone); font-size: .9375rem; line-height: 1.6; }

/* Underrubrik i lopande text - anvands av om.html (THE PODIUM & THE ALTAR)
   och kontakt.html (UPPGIFTER). Ingen inline-stil nagonstans i kodbasen. */
.underrubrik { margin: 0 0 var(--s-4); font-size: 1.5rem; }

/* ---------- menynav__grupp (meny.html: MAT/DRYCK) ----------
   "Tyst rad-vaxlare" (Dennis 2026-09-15, koncept 1 av 3 - se
   boef-vertikal-flikar-artefakten): MAT/DRYCK ar INTE en synlig flikwidget -
   ingen egen ruta, bara vikt+farg skiljer aktiv fran inaktiv grupp (som
   .menynav a gor for aktiv kategori). Star sedan 2026-09-16 i en egen rad
   (.menynav__grupper) OVANFOR kategorierna (.menynav__kategorier) istallet
   for i samma lista, se .menynav nedan. script.html vaxlar aria-pressed +
   [hidden] pa bade kategori-<li> och .matdryck-panel. Kontrast: samma
   tokens som .menynav nedan (stone/ivory mot --ink), ingen ny matning
   behovs. */
.menynav__grupp {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  background: none;
  border: 0;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stone);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease;
}
.menynav__grupp:hover, .menynav__grupp:focus-visible { color: var(--ivory); }
.menynav__grupp[aria-pressed="true"] { color: var(--ivory); }

.matdryck-panel[hidden] { display: none; }

/* ---------- menynav (kategorierna INOM en matdryck-flik) ----------
   Strukturen/klassnamnen har sitt ursprung i moldau-preview.pages.dev/meny
   (restaurang-moldau .menynav), men BOEF ar sedan 2026-09-16 ("ett block som
   transitionas") inte langre ett scroll-spy-ankarnav - ett klick pa en
   kategorilank doljer forra kategorin och visar den nya i SAMMA block, ingen
   scroll. aria-current="true" sätts darfor direkt av script.html
   (bytKategori/vaxlaGrupp) nar en kategori blir aktiv, inte av scrollposition.
   Kontrast ar redan matt i spec 4: stone/ink 9.12:1, ivory/ink 17.36:1. Ingen ny
   matning behovs eftersom bakgrunden ar --ink, inte ett foto. */
.menynav {
  position: sticky;
  top: var(--topp-h, 4.4rem);
  z-index: 30;
  background: var(--ink);
  border-bottom: 1px solid var(--linje-ivory);
  margin: 0 0 var(--s-8);
  /* Samma iOS-fix som .topp: eget GPU-lager sa den klistrade raden inte
     malas om (och darmed kan blinka till) under en aktiv scroll-gest. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Tva rader (Dennis 2026-09-16, "centrera sticky naven och ha mat & dryck
   ovanfor"): .menynav__grupper (MAT/DRYCK) ovanfor, .menynav__kategorier
   (RAW/FIRE/CUTS...) under - bada centrerade, men INTE med
   justify-content:center pa flex-raden. Skalet star kvar fran forra
   losningen: en centrerad flex-rad som svamma over sin scrollcontainer far
   ett negativt start-x vid scrollLeft:0, sa de forsta posterna blir
   oatkomliga oavsett hur mycket man scrollar. Uppmatt pa 390px bredd: de 6
   mat-kategorierna ensamma blir redan bredare an klientrutan.
   Losningen ar att centrera BLOCKET (width:fit-content + margin-inline:auto)
   i stallet for INNEHALLET i det: nar raden ar smalare an sin behallare
   krymper den till sitt eget innehall och margin-auto centrerar den, precis
   som synligt centrering ska se ut. Nar den INTE far plats (kategori-raden
   pa mobil) fyller den 100% av behallaren istallet och overflow-x:auto tar
   over harifran scrollLeft:0 - ingen negativ-offset-fallgrop, bara vanlig
   vansterstartad scroll. */
/* ul.menynav__grupper (inte bara .menynav__grupper): samma fallgrop som
   ul.menylista lite langre ner - ul[role="list"] i tokens.css satter
   margin:0 pa specificitet (0,1,1), som slar en ren klass (0,1,0) och
   nollstaller margin-inline:auto tyst sa centreringen aldrig syns. */
ul.menynav__grupper,
ul.menynav__kategorier {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--s-2) 0;
  gap: var(--s-2);
  list-style: none;
  overflow-x: auto;
}
.menynav__grupper { border-bottom: 1px solid var(--linje-brass); }
.menynav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  color: var(--stone);
  text-decoration: none;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.menynav a:hover, .menynav a:focus-visible { color: var(--ivory); }
.menynav a[aria-current="true"] { color: var(--ivory); border-bottom-color: var(--brass-ljus); }

/* Kategorinavet hade tidigare en stagger-reveal (li-barnen gled in fran
   hoger ett efter ett pa scrollposition) - borttagen (Dennis 2026-09-16,
   "en slider bar som dyker upp i forsta sekunden... ta bort den"). Navet
   star nu bara dar, direkt, ingen entre-animation. */

/* Skopat till sida-sektion - annars traffar den generella "section + section"
   varje <section> i hela sajten, aven de som redan har egna marginaler.
   .menynav + section byttes till menylayout__content > section:first-child
   nar .menylayout-omslaget tillkom (se nedan) - samma element, ny selektor. */
.sida-sektion .menylayout__content > section:first-child { padding-top: var(--s-4); }
.sida-sektion section + section { margin-top: var(--s-16); }
/* Kategorisektionerna (RAW/FIRE/CUTS...) staplas inte langre - bara EN visas
   at gangen, resten [hidden] (Dennis 2026-09-16, "ett block som transitionas").
   "section + section" ovan raknar syskon i DOM:en oavsett hidden, sa utan den
   har nollstallningen skulle t.ex. FIRE fa --s-16 extra topmarginal (den har
   ju RAW som foregaende syskon) medan RAW inte har det - ett hopp varje gang
   man byter kategori. */
.matdryck-panel section + section { margin-top: 0; }

/* Varje kategori (RAW/FIRE/CUTS...) ett eget inramat block, inte bara ett
   namn ovanfor en lista - sa "nasta block dyker upp" nar man scrollar kanns
   som ett eget objekt, inte en fortsattning av foregaende. Skarp kant, ingen
   border-radius (BOEF anvander aldrig runda horn utom pillerknappar/cirklar). */
.menylista__block {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linje-brass);
  padding: var(--s-8) var(--s-6);
}
@media (min-width: 48rem) {
  .menylista__block { padding: var(--s-12) var(--s-8); }
}

/* Kategoriomslag ("05 Diagonalsvep", Dennis 2026-09-16, valt av fem provade i
   BOEF Menyreveals-artefakten): en SEKVENS i tre beats -
   "blocker, bilden forsvinner, sedan fadeas menyn in":
     1) BLOCKER - .menyomslag star i vanligt flode, FAST hojd (34rem, matt pa
        RAWs eget innehall sa alla kategorier delar exakt samma dorrstorlek).
        .menylista__innehall (rubrik+notis+rader) finns i DOM men tar NOLL
        plats (grid-template-rows:0fr) och ar osynlig - blockets hela hojd AR
        dorrens hojd har, inget mer.
     2) BILDEN FORSVINNER - .menyomslag__lager gor sitt diagonala clip-path-
        svep, UNDER TIDEN krymper sjalva .menyomslag-rutan (height 34rem -> 0)
        sa dorren helt lamnar plodet.
     3) MENYN FADEAS IN - .menylista__innehall vaxer (grid-template-rows
        0fr->1fr) och tonar in (opacity). Alla tre beats triggas av EN
        .inne-klass (oppnaOmslag/bytKategori i script.html satter den pa BADE
        .menyomslag OCH .menylista__innehall samtidigt) - ordningen kommer
        helt fran transition-delay per steg.
   .menyomslag--bak (Dennis 2026-09-18, "klickar man tillbaks ska svepet ske
   at bakvant hall, som att animationen spolas tillbaka"): samma svep
   speglat i x-led (x' = 100% - x, punkt for punkt) sa den rorliga kanten
   sveper fran hoger mot vanster istallet - satts av script.html nar man
   klickar en TIDIGARE kategori i navordningen an den man star pa.
   ANM 2026-09-18: flera andra varianter (kontinuerlig glidning, svep-in +
   2s hall + svep-vidare) provades och backades - Dennis bekraftade
   uttryckligen att DEN HAR (klipp-vags-svepet) ar versionen som ska galla. */
.menyomslag {
  position: relative;
  height: 34rem;
  overflow: hidden;
  margin: 0 0 var(--s-6);
  transition: height .6s cubic-bezier(.65, 0, .24, 1) .7s,
              margin-bottom .6s cubic-bezier(.65, 0, .24, 1) .7s;
}
/* Rattelse (Dennis 2026-09-17, "bilderna ar inte anpassade till ramarna"):
   34rem hojd pa mobilens smala bredd gav en nastan portratt-formad ruta
   (t.ex. 375x544) ur bilder som ar breda liggande fotografier - object-fit:
   cover fick da klippa bort merparten av bredden och zooma in pa en smal
   mittremsa. Lagre ruta pa smala skarmar hall crop-formatet narmare
   kallbildernas eget liggande format utan att andra nagot pa desktop, dar
   34rem redan fungerar (samma brytpunkt som .podium/.hero__mitt anvander). */
@media (max-width: 47.99rem) {
  .menyomslag { height: 18rem; }
}
/* .dorr-reset (script.html oppnaOmslag, Dennis 2026-09-21): stanger av
   overgangarna pa hela dorr-sekvensen ett enda animationsfritt ogonblick nar
   en redan besokt kategori nollstalls till blockerarlaget - se motiveringen
   i script.html for varfor det annars svepte fel vag pa aterbesok.
   RATTELSE samma dag ("rak swipe OCH diagonal swipe" pa aterbesok bakat):
   .menyomslag__lager saknades i listan. --bak-klassen togglas INNAN
   resetten, och lagrets egen clip-path-transition (1.05s) var fortfarande
   pa - resultatet blev en extra, ratt osynlig-tankt "rak" svepning fran
   forra stangda formen till den nya viloformen, FORE den riktiga diagonala
   stangningen 1100ms senare. Matt med getComputedStyle-sampling var 50ms:
   utan lagret i listan svepte h/hogerkanten (klipp-punkt 2/3) hela vagen
   over canvasen pa under 1.1s - en synlig andra rorelse, inte en instant
   nollstallning. */
.dorr-reset,
.dorr-reset .menyomslag,
.dorr-reset .menyomslag__lager,
.dorr-reset .menylista__innehall,
.dorr-reset .menylista__innehall__yta {
  transition: none !important;
}
.menyomslag.inne { height: 0; margin-bottom: 0; }
.menyomslag__lager {
  position: absolute;
  inset: 0;
  clip-path: polygon(-20% -15%, 200% -15%, 200% 115%, -50% 115%);
  transition: clip-path 1.05s cubic-bezier(.65, 0, .24, 1);
}
.menyomslag--bak .menyomslag__lager {
  clip-path: polygon(120% -15%, -100% -15%, -100% 115%, 150% 115%);
}
.menyomslag img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.4s cubic-bezier(.22, 0, .18, 1);
}
.menyomslag__sloja {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--sloja), 0) 38%, rgba(var(--sloja), .82));
}
/* Dennis 2026-09-18: titeln (+etiketten ovanfor) ska sitta mitt i bilden,
   inte nere till vanster som fotots eget skylttext-monster. */
.menyomslag__etikett {
  position: absolute;
  inset: 0;
  left: var(--s-6);
  right: var(--s-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Dennis 2026-09-18, "kategori texterna forsvinner lite": sedan titeln
   flyttades till bildens mitt (se motiveringen ovan) sitter den ofta over en
   ljusare/livligare del av fotot an botten-slojan (.menyomslag__sloja) var
   tanad for - den slojan gar fran helt genomskinlig till morkast langst ner,
   sa mitten far bara en bralig del av morkret. En egen textskugga racker
   for att texten ska lasas oavsett vad som rakar ligga bakom den, utan att
   andra sjalva fotots ton. */
.menyomslag__etikett .etikett,
.menyomslag__titel {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 10px rgba(0, 0, 0, .8), 0 6px 28px rgba(0, 0, 0, .65);
}
.menyomslag__etikett .etikett { margin: 0 0 .25rem; }
.menyomslag__titel {
  margin: 0;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  color: var(--ivory);
}

/* RATTELSE nr 2 (Dennis 2026-09-16, "bilden fastnar i botten hoger sida"):
   artefaktens siffror (bottompunkten pa 85%) lamnade en osynlig-i-demot men
   verklig triangel kvar INNANFOR rutan (85-100%) i det "oppna" laget - den
   syntes aldrig i den mindre 16/10-demoboxen men blir tydlig i blockets
   egna, ofta hogre, proportioner. Bada punkterna pa den svepande kanten
   (topp OCH botten) maste hamna >=100% for att verkligen forsvinna - 130%/
   160% ger samma 30-punkters lutning som stangda laget (-20%/-50%) utan att
   nagot blir kvar. */
.menyomslag.inne .menyomslag__lager {
  clip-path: polygon(160% -15%, 200% -15%, 200% 115%, 130% 115%);
}
.menyomslag--bak.inne .menyomslag__lager {
  clip-path: polygon(-60% -15%, -100% -15%, -100% 115%, -30% 115%);
}
.menyomslag.inne img { transform: scale(1); }

/* Beat 3 av dorr-sekvensen ovan: rubrik+notis+rader tar noll plats och ar
   osynliga tills .inne (oppnaOmslag i script.html satter klassen pa
   .menylista__innehall - se kommentaren dar).
   grid-template-rows 0fr->1fr ar den moderna, exakta versionen av det gamla
   max-height-hacket - ingen gissad overgrans, fungerar for VILKEN
   innehallshojd som helst (4 rader eller 12). .menylista__innehall__yta
   maste ha min-height:0 for att grid-tricket ska fa krympa den under sitt
   naturliga innehall. */
.menylista__innehall {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .9s cubic-bezier(.65, 0, .24, 1) .55s;
}
.menylista__innehall.inne { grid-template-rows: 1fr; }
.menylista__innehall__yta {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .8s ease .95s;
}
.menylista__innehall.inne .menylista__innehall__yta { opacity: 1; }

/* Sticky-nav (Dennis 2026-09-16: "lagg sticky nav menyn ovanfor istallet") -
   tog bort det vertikala "Vertical Ledger"-sidonavet som tidigare tog over
   fran 60rem. En och samma horisontella klistrade flikrad ovanpa innehallet
   pa ALLA bredder nu - .menynav ar redan position:sticky i grundregeln har
   ovanfor, ingen egen brytpunkt kvar. */
.menylayout { display: block; }
/* Panelrubriken (FORRATT/HUVUDRATT/DESSERT, VIN/COCKTAILS) ar textligt samma
   strang som sin lank i .menynav - genererad ur samma faltvarde i meny.mjs,
   sa de kan aldrig gli isar. Storre och massingsfargad an .menylista__grupp
   sa besokaren ser vilken sektion hen ar i utan att bara lita pa vilken
   navlank som ar markerad. */
.menylista__panelrubrik {
  margin: 0 0 var(--s-2);
  font-size: 1.5rem;
  font-weight: 300;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: var(--track-display);
  color: var(--brass-ljus);
}
/* Rubrikstilen ar samma grepp som Moldaus .mengrupp__rubrik: centrerad,
   versaler, display-tracking - inte en liten vansterstalld etikett. Delaren
   mellan kategorier ar ocksa samma monster dar (.mengrupp + .mengrupp), fast i
   BOEF:s massing i stallet for Moldaus valnot. */
.menylista__grupp {
  margin: 0 0 var(--s-6);
  font-size: 1.125rem;
  font-weight: 300;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: var(--track-display);
  color: var(--ivory);
}
.menylista + .menylista__grupp {
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--linje-brass);
}
.flik-notis {
  max-width: var(--matt-text);
  margin: 0 auto var(--s-6);
  color: var(--stone);
  font-size: .9375rem;
  font-style: italic;
  text-align: center;
}

/* Exempelrader - visar hur en menylista ser ut layoutmassigt. Innehallet ar
   pahittade ratter/drycker (Dennis, 2026-08-25 - bytte bort fran ordet "Test"
   till en trovardig exempelmeny), inte den bekraftade menyn - flik-notisen
   ovanfor varje lista sager fortfarande att raderna ar exempel. */
/* ul.menylista (inte bara .menylista): ul[role="list"] i tokens.css satter
   margin:0 pa specificitet (0,1,1), som slar en ren klass (0,1,0) och
   nollstaller margin-inline:auto tyst. Samma fallgrop galler .galleri. */
ul.menylista { display: grid; gap: var(--s-6); max-width: var(--matt-text); margin-inline: auto; }
.menyrad__topp { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); }
.menyrad__namn { color: var(--ivory); font-weight: 500; }
.menyrad__pris { color: var(--brass-ljus); white-space: nowrap; }
.menyrad__beskr { margin: var(--s-1) 0 0; color: var(--stone); font-size: .875rem; }

/* Menyradens reveal (Gucci Osterias a-la-carte-glid+linjeritning) borttagen
   (Dennis 2026-09-21, "gillar dorr-svepet pa kategorierna, ta bort ovriga
   animationer pa menysidan") - raden och dess linje star nu bara dar direkt
   nar kategorin oppnas, ingen egen entre-effekt. .menyrad ateranvander
   fortfarande .avtack-klassen som utlosare (oppnaAvtack i script.html), men
   utan nagon egen opacity/transform reagerar den inte langre pa .inne. */
.menyrad.avtack { opacity: 1; transform: none; }

.menyrad__linje {
  display: block;
  height: 1px;
  margin-top: var(--s-3);
  background: var(--linje-brass);
}

/* ---------- sidfot ---------- */

.sidfot {
  background: var(--ink);
  border-top: 1px solid var(--linje-ivory);
  padding-block: var(--s-16) var(--s-8);
}

/* Loggan stor i en dampad ton: stone pa ink ar 9.12:1. Nu en kolumn i rutnatet,
   sida vid sida med Oppettider/Hitta hit/Folj oss - som i kundens mockup,
   inte staplad ovanfor. */
.sidfot__mark { display: block; color: var(--stone); }
.sidfot__mark svg { display: block; width: 9rem; height: auto; }

.sidfot__rutnat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--s-8);
}

.sidfot h2 {
  margin: 0 0 var(--s-3);
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-etikett);
  color: var(--brass-ljus);
  overflow-wrap: break-word;
}

/* Rutnat sa dag- och tidskolumnen hamnar i linje rad for rad, oavsett
   att "Sondag"/"Stangt" ar kortare an "Man - tors"/"16:00 - 00:00". Se
   .uppgiftslista__tider for varfor minmax(0, max-content), inte bart
   max-content. */
.sidfot__tider { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, max-content); gap: var(--s-1) var(--s-4); }
.sidfot__tid { margin: 0; color: var(--ivory); font-size: 1.0625rem; letter-spacing: .04em; }
.sidfot__notis {
  margin: var(--s-2) 0 0;
  max-width: 22rem;
  color: var(--stone);
  font-size: .8125rem;
  line-height: 1.6;
}

/* Adressen AR Maps-lanken. Ingen separat kartknapp - husstandard. */
.sidfot__adress {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: var(--tap);
  padding: var(--s-1) 0;
  color: var(--ivory);
  text-decoration: none;
  font-size: .9375rem;
  overflow-wrap: break-word;
}
.sidfot__adress span { display: block; }
.sidfot__adress span:first-child { border-bottom: 1px solid var(--linje-brass); }
.sidfot__adress:hover, .sidfot__adress:focus-visible { color: var(--brass-ljus); }
.sidfot__adress:hover span:first-child,
.sidfot__adress:focus-visible span:first-child { border-bottom-color: var(--brass-ljus); }

.sidfot__lista { display: grid; gap: var(--s-1); }
.sidfot__lista a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ivory);
  text-decoration: none;
  font-size: .9375rem;
}
.sidfot__lista a:hover,
.sidfot__lista a:focus-visible { color: var(--brass-ljus); text-decoration: underline; }

.sidfot__slut {
  margin-top: var(--s-16);
  padding-top: var(--s-6);
  border-top: 1px solid var(--linje-ivory);
  text-align: center;
}
.sidfot__copy {
  margin: 0;
  color: var(--stone);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  overflow-wrap: break-word;
}
.sidfot__bolag {
  margin: var(--s-2) 0 0;
  color: var(--stone);
  font-size: .75rem;
  letter-spacing: .04em;
  overflow-wrap: break-word;
}

/* Drivs av / Powered by. Husstandard, spec 11: logga 18 px hog, etikett 11 px
   versaler vikt 600, tracking .12em, gap .6rem, hela krediten en lank med 44 px
   tap target, ALLTID ensam pa egen centrerad rad. */
.driven { display: flex; justify-content: center; margin-top: var(--s-4); }
.driven__lank {
  display: inline-flex;
  align-items: center;
  gap: .6rem;                 /* inline-flex kollapsar blanktecknet mellan barnen */
  min-height: var(--tap);
  color: var(--stone);
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}
.driven__lank:hover,
.driven__lank:focus-visible { color: var(--ivory); opacity: .9; }
.driven__etikett {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1;
}
.driven__lank img { height: 18px; width: auto; }

/* Sub-footerns radordning (husstandard): kredit ensam forst, sedan
   copyright+policylankar, sedan foretagsuppgifter - tre flexrader som
   wrappar, inte fyra staplade block. */
.sidfot__juridik {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-4);
}
.sidfot__juridik .sidfot__copy { margin: 0; }
.sidfot__juridik a {
  color: var(--stone);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-decoration: underline;
}
.sidfot__juridik a:hover,
.sidfot__juridik a:focus-visible { color: var(--brass-ljus); }

.lank-knapp {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0;
  background: none;
  border: none;
  color: var(--stone);
  font: inherit;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-decoration: underline;
  cursor: pointer;
}
.lank-knapp:hover,
.lank-knapp:focus-visible { color: var(--brass-ljus); }

/* "Avvikande tider": platshallare-rubrik, alltid narvarande aven tom
   (husstandard, se riserank-qa-checklist). */
.sidfot__avvikande-rubrik {
  margin: var(--s-4) 0 0;
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-etikett);
  color: var(--brass-ljus);
}

/* ---------- kakbanner ----------
   Verifierat mot den LEVANDE Kvarnen-sajten (kvarnen.com/sv/brunch), inte
   bara mallens kallkod - produktionen kor tre val (Acceptera alla / Endast
   nodvandiga / Installningar) plus en installningspanel med kategorier.
   Flytande kort med marginal runt om, inte en list i full bredd. Ratade
   horn pa kortet sjalvt - BOEF har aldrig border-radius nagonstans (se
   .knapp) - men vaxeln langst ner AR rundad med flit, se den kommentaren.
   Samtyckesnyckel i localStorage, se partials/script.html. */
.kakbanner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 70;
  display: flex;
  justify-content: center;
  padding: 0 var(--s-4);
  pointer-events: none;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .3s ease, transform .3s ease;
}
/* Ingen pointer-events:auto har - .kakbanner spanner HELA viewport-bredden
   (inset: auto 0 0 0), sa om ytterdiv:en fick auto skulle den svalja klick i
   hela den transparenta ytan bredvid/under kortet, inte bara pa kortet sjalv.
   .kakbanner__in/.kakinstallningar nedan satter sitt eget auto, men BARA nar
   bannern ar synlig - annars ligger kortet dar overallt kvar (osynligt via
   opacity:0, inte display:none) och svaljer klick pa vad som an rakar hamna
   under det i viewport nar sidan skrollas till botten (upptackt av Dennis:
   sidfotens Integritetspolicy/Om kakor-lankar slutade fungera helt, tysta -
   elementFromPoint traffade kakbannerns dolda etikett i stallet). */
.kakbanner.ar-synlig { opacity: 1; transform: translateY(0); }
.kakbanner__in,
.kakinstallningar { pointer-events: none; }
.kakbanner.ar-synlig .kakbanner__in,
.kakbanner.ar-synlig .kakinstallningar {
  pointer-events: auto;
  width: 100%;
  max-width: var(--matt);
  margin-bottom: var(--s-6);
  background: var(--ink);
  border: 1px solid var(--linje-brass);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
  padding: var(--s-4) var(--s-8);
}
.kakbanner__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.kakbanner__innehall { flex: 1 1 24rem; }
.kakbanner__etikett { margin: 0 0 var(--s-1); }
.kakbanner__text {
  margin: 0;
  color: var(--stone);
  font-size: .875rem;
  line-height: 1.5;
}
.kakbanner__atgarder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-6);
  flex-shrink: 0;
}
.kakbanner__lank {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: var(--brass-ljus);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.kakbanner__lank:hover,
.kakbanner__lank:focus-visible { color: var(--ivory); }

.knapp--fylld {
  background: var(--brass);
  color: var(--ink);
  border-color: var(--brass);
  flex-shrink: 0;
}
.knapp--fylld:hover,
.knapp--fylld:focus-visible {
  background: transparent;
  color: var(--brass);
  border-color: var(--brass);
  transform: none;
}
.knapp--fylld:active { background: transparent; color: var(--brass); border-color: var(--brass); transform: none; }

/* Installningspanelen: samma kort, bytt innehall (script.html vaxlar
   hidden). Kategorirader med etikett+beskrivning till vanster, vaxel till
   hoger - samma monster som kvarnen.com:s riktiga installningsruta. */
.kakinstallningar h2 {
  margin: 0 0 var(--s-3);
  font-size: 1.125rem;
  font-weight: 300;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--ivory);
}
.kakinstallningar__rad {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--linje-ivory);
}
.kakinstallningar__text { display: grid; gap: var(--s-1); max-width: 40rem; }
.kakinstallningar__text strong {
  color: var(--ivory);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.kakinstallningar__text span { color: var(--stone); font-size: .8125rem; line-height: 1.5; }

/* Vaxeln: en ratad kant hade lasts som en trasig knapp, inte som ett
   pa/av-lage - formen ar det som gor den igenkannbar, sa den ar rundad
   med flit trots att resten av sajten aldrig ar det. */
.vaxel {
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.5rem;
  margin-top: .125rem;
  padding: 2px;
  background: transparent;
  border: 1px solid var(--ram-ivory);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s ease;
}
.vaxel::after {
  content: "";
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  background: var(--stone);
  border-radius: 50%;
  transition: transform .2s ease, background-color .2s ease;
}
.vaxel[aria-checked="true"] { border-color: var(--brass); }
.vaxel[aria-checked="true"]::after { background: var(--brass); transform: translateX(1.125rem); }
.vaxel:disabled { cursor: not-allowed; opacity: .7; }

.kakinstallningar__atgarder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-6);
  margin-top: var(--s-4);
}

@media (max-width: 43.75rem) {
  .kakbanner__in { flex-direction: column; align-items: stretch; padding: var(--s-4); }
  .kakbanner__innehall { flex: 0 1 auto; }
  .kakbanner__atgarder { flex-direction: column; align-items: stretch; width: 100%; }
  .kakbanner__atgarder .knapp { width: 100%; }
  .kakbanner__atgarder .kakbanner__lank { justify-content: center; margin-top: var(--s-1); }
  .kakinstallningar { padding: var(--s-4); }
  .kakinstallningar__rad { flex-direction: column; gap: var(--s-2); }
  .kakinstallningar__atgarder { flex-direction: column; align-items: stretch; }
  .kakinstallningar__atgarder .knapp { width: 100%; }
  .kakinstallningar__atgarder .kakbanner__lank { justify-content: center; margin-top: var(--s-1); }
}

/* Sidor utan hero (integritetspolicy m.fl.): rubriken far inte hamna under
   den fixerade headern. */
.sida-sektion--forst { padding-top: var(--s-24); }
/* Integritetspolicy staplar tva .sida-sektion direkt efter varandra (unikt for
   den har sidan) - utan detta lagger bada sina egna padding-block ihop till
   ett 160px-glapp mellan "Senast uppdaterad" och forsta rubriken. En rad
   avstand racker. */
.sida-sektion--forst + .sida-sektion { padding-top: 0; }
/* Integritetspolicy: lopande text centrerad pa Dennis begaran (2026-08-27),
   inte sajtens vanliga vansterstallda brodtext. Kolumnen halls vid
   --matt-text sa centrerade rader inte blir orimligt langa - annars laser
   centrerad text lattare fel eftersom ogat tappar vansterkanten. */
.sida-sektion--forst,
.policy {
  text-align: center;
}
.sida-sektion--forst .brod,
.sida-sektion--forst .skiljare,
.policy .brod {
  margin-inline: auto;
}
.policy h2:not(:first-of-type) { margin-top: var(--s-12); }

/* ---------- entre-animation ----------
   Utlost pa scrollposition, inte pa IntersectionObserver: skarmbildsharnessen
   hoppar till botten och tillbaka och fullPage-fotograferingen scrollar inte, sa
   observern far aldrig veta nagot och sektionerna star kvar pa opacity 0 med
   gron logg. Bara transform och opacity. */
.avtack {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .7s ease, transform .7s ease;
}
.avtack.inne { opacity: 1; transform: none; }

/* ---------- brytpunkter. Star SIST: en media-fraga hojer inte specificiteten,
     ett brytpunktsblock fore basregeln forlorar pa kallordning. ---------- */

@media (min-width: 30rem) {
  .hero__h1 svg { width: min(19rem, 100%); }
  .hero__ceci svg { width: min(20rem, 100%); }
  .hero__streck { height: 5.24rem; }
}

@media (min-width: 48rem) {
  .om__txt { padding: var(--s-24) var(--s-12); }
  .kort-rutnat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kort + .kort { border-top: 0; border-inline-start: 1px solid var(--linje-ivory); }
  .sidfot__rutnat { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-12); }
  .hero__h1 svg { width: min(24rem, 100%); }
  .hero__ceci svg { width: min(24rem, 100%); }
  .hero__streck { height: 6.62rem; }
  .topp__inner { padding-inline: var(--s-6); }
}

@media (min-width: 60rem) {
  /* Grid i stallet for flex sa navet centreras i HELA sidhuvudet - en
     flex-auto-margin hade bara centrerat det i mellanrummet mellan logga och
     topp__hoger, och de ar olika breda (spraktoggel+Boka bord vager mer an
     loggan). */
  .topp__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .topp__mark { justify-self: start; }
  .topp__hoger { justify-self: end; margin-inline-start: 0; }

  .topp__nav {
    display: flex;
    align-items: center;
    justify-self: center;
    margin-inline-start: 0;
  }
  .topp__nav ul {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
  }
  .topp__nav li { display: flex; align-items: center; }
  .topp__nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 var(--s-3);
    color: var(--ivory);
    text-decoration: none;
    font-size: .6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
  }
  .topp__nav a:hover,
  .topp__nav a:focus-visible { color: var(--brass-ljus); text-decoration: underline; text-underline-offset: .4em; }
  /* aria-current="page" sattes redan korrekt av tools/bygg.mjs men saknade
     stil helt - attributet fanns bara for skarmlasare, ingen SYNLIG markering
     av vilken sida man star pa. */
  .topp__nav a[aria-current="page"] { color: var(--brass-ljus); text-decoration: underline; text-underline-offset: .4em; }
  .topp__delare {
    color: var(--ivory);
    font-size: .625rem;
    line-height: 1;
    opacity: .55;
  }
  .topp__nav li:last-child .topp__delare { display: none; }
  .topp__hoger .sprak { display: inline-flex; }
  .lucka { display: none; }
  .panel { display: none; }

  .delad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .om__txt {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--s-24) var(--s-12);
  }
  .om__inner { width: 100%; max-width: 32rem; }
  /* Fast hojd, inte min-height: annars stracker .delads align-items:stretch
     bilden till samma hojd som textkolumnens INNEHALL, och den varierar per
     sida (kort kontakt-text mot lang meny-text) - sidorna slutade se olika
     stora ut trots samma regel. */
  .om__bild img { aspect-ratio: auto; height: 34rem; }

  .hero__h1 svg { width: min(28rem, 100%); }
  .hero__ceci svg { width: min(26rem, 100%); }
  .hero__streck { height: 7.73rem; }

  .sidfot__rutnat { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .sidfot__mark svg { width: 11rem; }

  /* om.html har mer brodtext an meny/dryck/kontakt/jobb (tva langre stycken om
     konceptet) - utan denna knip blir .om__txt 26px hogre an .om__bild img (fast
     hojd) och det roda blocket sticker ut under bilden. Bara skiljelinjens
     marginal, bara har: rubbar inget pa sidorna dar texten redan far plats. */
  #om-intro .skiljare { margin-block: var(--s-4); }
}

/* Lag och bred skarm: telefon i landskap. Ingen hojd att ge bort, sa heron slutar
   krava en full skarm och lever pa sin egen sats i stallet. */
@media (max-height: 460px) {
  .hero { min-height: 0; padding-block: 7rem var(--s-12); }
  .hero__topp { height: 11rem; }
  .hero__golv { height: 8rem; }
}