/* 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. */

: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. */

.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;
  gap: var(--s-2);
  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; }

.topp__boka { padding-inline: var(--s-3); }

/* 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 ar pinnat till textblocket sjalvt, med 5.5rem overhang i bada
   riktningar. Fadet loper helt i overhanget; over glyferna ar alfa KONSTANT. */
.hero__mitt::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: -5.5rem;
  bottom: -5.5rem;
  background: linear-gradient(
    to bottom,
    rgba(var(--sloja), 0) 0rem,
    rgba(var(--sloja), var(--sloja-text)) 5.5rem,
    rgba(var(--sloja), var(--sloja-text)) calc(100% - 5.5rem),
    rgba(var(--sloja), 0) 100%
  );
  pointer-events: none;
}

.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__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); }

/* ---------- podium (Om BOEF, "The Podium") ----------
   Editorial radbyte: bild och text sida vid sida, alternerande. Ingen sloja
   behovs - texten star bredvid fotot pa sidans egna --ink, inte ovanpa det,
   sa samma kontrast som overallt annars galler (.etikett/.brod ar redan
   matta pa --ink). .etikett har en egen margin-bottom pa var(--s-6) fran
   sitt allmanna bruk - for stort i en tva-rads rubrik har, natt till 0. */
.podium { display: flex; flex-direction: column; gap: var(--s-16); margin-top: var(--s-8); }
.podium__rad { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-6); align-items: center; }
@media (min-width: 48rem) {
  .podium__rad { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-12); }
  .podium__rad:nth-child(even) .podium__bild { order: 2; }
}
.podium__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.podium__bild--hog img { object-position: 50% 15%; }
.podium__text { text-align: center; }
@media (min-width: 48rem) { .podium__text { text-align: left; } }
.podium__text .etikett { margin-bottom: var(--s-2); }
.podium__text h3 {
  margin: 0; font-weight: 300; font-size: 1.25rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ivory);
}
.podium__text p {
  margin: var(--s-3) 0 0; max-width: 26rem; color: var(--stone); font-size: .9375rem;
  line-height: 1.5;
}
@media (min-width: 48rem) { .podium__text p { margin-inline: 0; } }
@media (max-width: 47.99rem) { .podium__text p { margin-inline: auto; } }

/* ---------- kontaktsidans uppgifter + karta ----------
   Ingen ljus sektion - BOEF ar morkt genom hela sajten, till skillnad fran
   Moldaus ljusa/morka vaxling. Samma --ink/--charcoal som overallt annars. */
.kontakt-rutnat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-12);
}
@media (min-width: 60rem) {
  .kontakt-rutnat { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}

.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-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; }

/* ---------- 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 { align-self: stretch; min-height: 0; overflow: hidden; }
.formsplit__bild img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 47.99rem) { .formsplit__bild { display: none; } }
.formsplit .jobbform { margin-top: 0; }
/* 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; }
.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; }
.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;
}
.jobbform__etikett { margin: 0 0 var(--s-2); }
.jobbform__rad { margin: 0 0 var(--s-6); 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 (meny/dryck) ----------
   Strukturen och klassnamnen ar kopierade fran moldau-preview.pages.dev/meny
   (restaurang-moldau .menynav/.menynav__spar): ett stickynav av ANKARLANKAR,
   inte flikar som gommer/visar paneler. Alla kategorier ligger alltid kvar i
   dokumentet i en enda scroll; lanken hoppar dit och scroll-spy (script.html)
   markerar aria-current="true" pa den lank vars sektion ar synlig.
   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;
}
.menynav__spar {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}
.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); }

/* Skopat till sida-sektion - annars traffar den generella "section + section"
   varje <section> i hela sajten, aven de som redan har egna marginaler. */
.sida-sektion .menynav + section { padding-top: var(--s-4); }
.sida-sektion section + section { margin-top: var(--s-16); }
/* 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; }

/* ---------- 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(4, 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); }
  .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; }
}