/* saporio.se — marknadssidan.
   Egen fil, ingen delad kod med restaurangernas kundvy. De två sidorna delar
   designspråk (se saporio-design-editorial.md) men inte livslängd: en
   restaurangs meny ändras varje vecka, den här sidan ett par gånger om året.
   En gemensam stilmall hade betytt att ett textbyte här kunde flytta en
   prisrad i någons kassa. */

:root {
  --creme: #F5F1E8;
  --grafit: #252525;
  --terrakotta: #B85C38;
  /* Samma terrakotta, nedmörkad tills den bär brödtext. Märkesfärgen ger 4,0:1
     mot cremen och 11 px etiketter i den är inte läsbara för alla — linjer,
     ramar och stora tal får den ljusa, all text under 24 px den djupa. */
  --terrakotta-djup: #A0492A;
  /* Och åt andra hållet, för texten som ligger på hero-fotots mörka toning. */
  --terrakotta-ljus: #E8A57F;
  --oliv: #2E4B3F;
  --morker: #1B2A23;
  --dampad: #5c6b62;
  --meta: #666;
  --linje: rgba(46, 75, 63, .15);
  --ljuslinje: rgba(245, 241, 232, .25);
  --ljustext: #D8D2C4;

  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;

  /* Texten står i en smal spalt. Det är ingen begränsning utan poängen: en rad
     som är för lång att följa med ögat läses inte, den skummas. */
  --spalt: 62rem;
  /* Spalten plus kalkylatorn bredvid den, med luft emellan. */
  --bredspalt: 78rem;
  --kalkbredd: 20rem;
}

* { box-sizing: border-box; }

/* Varje klass med egen display slår ut webbläsarens regel för hidden. Samma
   rad som shop.css och drift.css bär, och av samma anledning. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--grafit);
  font: 400 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--terrakotta-djup); }

/* Text som bara finns för den som lyssnar på sidan. Tabellens hörnruta är tom
   för ögat men måste ha ett namn för en skärmläsare. */
.dold {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.spalt {
  width: 100%;
  max-width: var(--spalt);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Sektionsetikett: versaler i terrakotta, samma som kategoriraden ovanför en
   menysektion i kundvyn. Det är den återkommande signalen om att en ny del
   börjar — inga rubrikramar behövs. */
.etikett {
  margin: 0 0 .8rem;
  font: 400 11px/1 var(--sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--terrakotta-djup);
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; }

/* ------------------------------------------------------------- sidhuvud */

/* Klistrad: kontoknappen ska finnas kvar hela vägen ner, och sidan är lång. */
.sidhuvud {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--creme);
  border-bottom: 1px solid var(--linje);
}
.sidhuvud .spalt {
  max-width: var(--bredspalt);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.marke {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
}
.marke img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: block;
}
.markenamn {
  font: 400 21px/1 var(--serif);
  letter-spacing: .04em;
}
.sidhuvud nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.sidhuvud nav a {
  color: var(--dampad);
  text-decoration: none;
  font-size: 14px;
}
.sidhuvud nav a:hover { color: var(--terrakotta-djup); }

/* Enda länken i listen som är en uppmaning och inte en hopplänk i sidan.
   Olivgrön ram och inte fylld knapp: den ska sticka ut från de fyra intill sig
   utan att konkurrera med den fyllda knappen i hero. */
.sidhuvud nav a.navcta {
  padding: .35rem .8rem;
  border: 1px solid var(--oliv);
  border-radius: 999px;
  color: var(--oliv);
}
.sidhuvud nav a.navcta:hover { background: var(--oliv); color: var(--creme); }

/* Språkväxlaren. Två lägen, inget mer — därför två knappar bredvid varandra och
   ingen rullgardin. Den ska synas när man letar efter den och annars vara
   tyst: samma dämpade grå som navigationen, och bara det valda språket i
   terrakotta. */
.sprakval {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.sprakval button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--meta);
  font: 400 13px/1 var(--sans);
  letter-spacing: 1px;
  /* Genomskinlig ram redan från början: annars hoppar raden två pixlar varje
     gång markeringen flyttar sig. */
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.sprakval button:hover { color: var(--terrakotta-djup); }
.sprakval button.vald {
  color: var(--terrakotta-djup);
  border-bottom-color: var(--terrakotta);
}
/* Avdelaren ritas i CSS och inte som ett tecken i DOM:en — en skärmläsare ska
   inte läsa upp "snedstreck" mellan två språkval. */
.sprakval button + button::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  margin-right: .55rem;
  background: var(--linje);
  vertical-align: -1px;
}

/* Navigationen har också margin-left: auto, så den tar utrymmet först och
   växlaren lägger sig efter den. Försvinner navigationen på smal skärm faller
   växlaren själv ut till höger — den är det enda i sidhuvudet som måste
   överleva dit. */
@media (max-width: 860px) {
  .sidhuvud nav a:not(.navcta) { display: none; }
}
@media (max-width: 700px) {
  .sidhuvud nav { display: none; }
  .sidhuvud .spalt { gap: 1rem; }
}

/* ----------------------------------------------------------------- hero */

/* Fotot ligger som bakgrund med en toning över. Bakgrundsfärgen är satt för
   sig och inte bara som en del av bilden: texten ska ha sin kontrast redan
   innan bilden hunnit hämtas, och den som mäter kontrast mäter mot en färg —
   inte mot ett foto. */
.hero {
  position: relative;
  background-color: var(--morker);
  background-image: url("/bilder/hero-pizzaugn.webp");
  background-size: cover;
  background-position: center 42%;
  color: var(--creme);
  overflow: hidden;
}
/* Toningen: tyngst där texten står, lättast längst ut åt höger där elden i
   ugnen får synas. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              rgba(27, 42, 35, .95) 0%,
              rgba(27, 42, 35, .88) 38%,
              rgba(27, 42, 35, .62) 70%,
              rgba(27, 42, 35, .42) 100%);
}
.heroinnehall {
  position: relative;
  max-width: var(--bredspalt);
  padding-top: 5.5rem;
  padding-bottom: 4.5rem;
}
.hero .tagline {
  margin: 0 0 1.2rem;
  font: italic 400 13px/1 var(--serif);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--terrakotta-ljus);
}
.hero h1 {
  margin: 0;
  font-size: 46px;
  line-height: 1.15;
  max-width: 18ch;
  color: var(--creme);
}
.hero .ingress {
  margin: 1.4rem 0 0;
  max-width: 46ch;
  font: italic 400 20px/1.6 var(--serif);
  color: var(--ljustext);
}
.knapprad {
  margin-top: 2.4rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.knapprad.mitten { margin-top: 2.6rem; }

/* Enda fyllda ytan på sidan. Den är fylld just därför att den är en enda: två
   knappar med samma tyngd är ingen väg framåt, det är ett val. */
.pill {
  display: inline-block;
  padding: .85rem 1.7rem;
  border-radius: 30px;
  background: var(--oliv);
  color: var(--creme);
  text-decoration: none;
  font-size: 15px;
}
.pill:hover { background: #24382e; }
/* Uppmaningen i hero står på en mörk yta. Olivgrönt mot mörkgrönt syns inte —
   där byter knappen håll och blir ljus med mörk text. */
.hero .pill { background: var(--creme); color: var(--morker); }
.hero .pill:hover { background: #fff; }
.lank {
  color: var(--grafit);
  text-decoration: none;
  border-bottom: 1px solid var(--terrakotta);
  padding-bottom: 2px;
  font-size: 15px;
}
.lank:hover { color: var(--terrakotta-djup); }
.lank.ljus { color: var(--creme); border-bottom-color: var(--terrakotta-ljus); }
.lank.ljus:hover { color: var(--terrakotta-ljus); }

/* Trygghetsraden: fyra korta löften med var sin tunn ikon. Ligger vid varje
   uppmaning att registrera sig, för det är där frågan "vad binder jag upp mig
   på?" faktiskt ställs. */
.trygghet {
  margin: 2.6rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 2rem;
  max-width: 60rem;
}
.trygghet li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: 14px;
  color: var(--dampad);
  max-width: 30ch;
}
.trygghet svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: none;
  stroke: var(--terrakotta-djup);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trygghet.ljus li { color: var(--ljustext); }
.trygghet.ljus svg { stroke: var(--terrakotta-ljus); }

@media (max-width: 700px) {
  .heroinnehall { padding-top: 3.2rem; padding-bottom: 3rem; }
  .hero h1 { font-size: 32px; }
  .hero .ingress { font-size: 17px; }
  /* Smal skärm visar mitten av ett stående foto och toningen måste vara jämn
     hela vägen — det finns ingen högerkant att lätta upp. */
  .hero::before {
    background: linear-gradient(180deg,
                rgba(27, 42, 35, .92) 0%,
                rgba(27, 42, 35, .86) 60%,
                rgba(27, 42, 35, .78) 100%);
  }
  .trygghet { gap: .7rem 1.4rem; margin-top: 2rem; }
}

/* ----------------------------------------------------------- sidlayouten */

/* Huvudspalten med kalkylatorn bredvid. Grid först på bred skärm: under
   brytpunkten är kalkylatorn en list längst ner i stället, och då ska den inte
   ligga i flödet alls. */
.sidlayout {
  width: 100%;
  max-width: var(--bredspalt);
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 1080px) {
  .sidlayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--kalkbredd);
    gap: 3.5rem;
    align-items: start;
  }
}

/* -------------------------------------------------------------- avsnitt */

section { padding: 3.5rem 0; }
section h2 {
  margin: 0 0 2rem;
  font-size: 30px;
  line-height: 1.25;
}
section h2 .fortsattning {
  display: block;
  font: italic 400 19px/1.5 var(--serif);
  color: var(--dampad);
  margin-top: .5rem;
  max-width: 52ch;
}
section .not {
  margin: 2rem 0 0;
  font-size: 14px;
  color: var(--meta);
  max-width: 60ch;
}

.avdelare { border-top: 1px solid var(--linje); }

/* ------------------------------------------------------------ varför oss */

/* Rutorna — men rutan är en linje överst och luft under, inte en låda med
   skugga. Rasterna byter till en spalt först när två inte får plats. Samma
   raster bär både "varför Saporio" och gästavsnittet. */
.rutor {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.8rem 2.5rem;
}
.rutor li {
  border-top: 1px solid var(--linje);
  padding-top: 1rem;
}
.rutor .rubrik {
  display: block;
  font: 400 18px/1.4 var(--serif);
}
.rutor .under {
  display: block;
  margin-top: .35rem;
  font-size: 14px;
  color: var(--dampad);
}

/* ------------------------------------------------------------ i köket */

.kokjamforelse {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
}
.bildetikett {
  margin: 0 0 1rem;
  font: 400 11px/1 var(--sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--meta);
}
.bildtext {
  margin: 1.2rem 0 0;
  font-size: 14px;
  color: var(--dampad);
}

/* Lapphögen. Fyra papper på varandra, vridna åt olika håll — ingen bild, bara
   fyra rutor med prickade linjer. Poängen är oordningen, och den går att rita. */
.bonghog {
  position: relative;
  height: 200px;
}
.bong {
  position: absolute;
  width: 108px;
  height: 140px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 14px,
    rgba(0, 0, 0, .18) 14px 15px);
  background-size: 74% 100%;
  background-position: 14px 22px;
  background-repeat: no-repeat;
}
.bong.b1 { left: 4px;   top: 26px; transform: rotate(-7deg); }
.bong.b2 { left: 74px;  top: 8px;  transform: rotate(4deg); }
.bong.b3 { left: 142px; top: 34px; transform: rotate(-3deg); }
.bong.b4 { left: 108px; top: 56px; transform: rotate(11deg); }

/* Köksskärmen. Tre biljetter, sorterade, med färgen på kanten som säger läget.
   Samma tre lägen som den riktiga vyn har — ingen fjärde färg som bara finns
   på marknadssidan. */
.kokskarm {
  background: var(--morker);
  padding: 12px;
  display: grid;
  gap: 8px;
  min-height: 200px;
  align-content: start;
}
.biljett {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  padding: 8px 10px;
  background: #22332B;
  border-left: 3px solid var(--dampad);
}
.biljett .tid {
  font: 400 13px/1.2 var(--sans);
  color: var(--ljustext);
}
.biljett .lage {
  font: 400 11px/1.2 var(--sans);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  justify-self: start;
}
.biljett .rader {
  grid-column: 1 / -1;
  font: 400 13px/1.4 var(--sans);
  color: var(--creme);
}
.biljett.ny { border-left-color: #7FB08A; }
.biljett.ny .lage { color: #9CCBA6; }
.biljett.arbete { border-left-color: var(--terrakotta); }
.biljett.arbete .lage { color: var(--terrakotta-ljus); }
.biljett.klar { border-left-color: var(--ljuslinje); }
.biljett.klar .lage { color: var(--ljustext); }
.biljett.klar .rader { color: var(--ljustext); }

/* -------------------------------------------- egen kanal, egna gäster */

/* Avsnittet är sidans enda riktiga särskiljare mot plattformarna, och det ska
   synas på håll att det inte är ännu ett stycke i spalten. Därför en mörk
   panel: samma yta som köksskärmen ovanför, vänd utåt mot gästen i stället för
   in mot köket. Två spalter — förmånerna till vänster, kampanjerna till höger
   — och slutsatsen utanför panelen, där den läses som sidans egen röst igen. */
.kanalpanel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.6rem;
  background: var(--morker);
  border-radius: 3px;
  padding: 2.2rem 2.4rem 2.4rem;
}
.bildetikett.ljus { color: var(--ljustext); }

.formaner {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.3rem;
}
.formaner li {
  border-top: 1px solid var(--ljuslinje);
  padding-top: .9rem;
}
.formaner .rubrik {
  display: block;
  font: 400 17px/1.4 var(--serif);
  color: var(--creme);
}
.formaner .under {
  display: block;
  margin-top: .3rem;
  font-size: 14px;
  color: var(--ljustext);
}
.kanalnot {
  margin: 1.5rem 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ljustext);
  max-width: 40ch;
}
.kanaltext {
  margin: 0 0 1.2rem;
  font-size: 15px;
  color: var(--ljustext);
  max-width: 44ch;
}
.kanaltext:last-child { margin-bottom: 0; }

/* Exemplen är namn, inte knappar. De ritas som brickor för att de ska läsas
   som något gästen känner igen från en meny, och de får den ljusa terrakottan
   eftersom den djupa försvinner mot det mörka. */
.kampanjexempel {
  margin: 0 0 1.3rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.kampanjexempel li {
  border: 1px solid var(--terrakotta-ljus);
  border-radius: 999px;
  padding: .3rem .9rem;
  font-size: 14px;
  color: var(--terrakotta-ljus);
}

.kanalslutsats {
  margin: 2rem 0 0;
  font: 400 19px/1.6 var(--serif);
  color: var(--grafit);
  max-width: 54ch;
}
.kanalslutsats b { font-weight: 400; color: var(--terrakotta-djup); }

/* ------------------------------------------------------------------ demo */

.demoband {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.demobild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.demotext p { max-width: 52ch; color: var(--dampad); font-size: 17px; }
.demoadress {
  font: 400 15px/1 var(--sans);
  color: var(--meta);
  margin-top: 1.2rem;
}

/* --------------------------------------------------------- vem passar den */

.slag {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
}
.slag li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  width: 6.5rem;
  text-align: center;
  font-size: 14px;
  color: var(--dampad);
}
/* Grundmenyn svarar på branschens tystaste invändning — "vi orkar inte skriva
   in menyn" — och ska läsas som brödtext, inte som en fotnot under den. */
.grundmeny {
  margin: 2.2rem 0 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--grafit);
}

.slag svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--terrakotta-djup);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------------- jämförelse */

/* Tabellen får rulla i sidled för sig själv om den inte får plats. Det som
   aldrig får hända är att hela sidan rullar i sidled. */
.tabellrulle { overflow-x: auto; }
table.jmf {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 15px;
}
table.jmf th,
table.jmf td {
  text-align: left;
  vertical-align: top;
  padding: .85rem 1rem .85rem 0;
  border-bottom: 1px solid var(--linje);
}
table.jmf thead th {
  font: 400 11px/1.4 var(--sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--meta);
  border-bottom-color: var(--oliv);
}
table.jmf thead th:nth-child(2) { color: var(--terrakotta-djup); }
table.jmf tbody th {
  font: 400 15px/1.5 var(--sans);
  color: var(--grafit);
  width: 12rem;
}
table.jmf td { color: var(--dampad); }
table.jmf td:nth-of-type(1) { color: var(--grafit); }

/* ---------------------------------------------------------------- priser */

.trappa { margin: 0; padding: 0; list-style: none; }
.trappa li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linje);
}
.trappa .steg {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  flex-wrap: wrap;
  font: 400 17px/1.4 var(--serif);
}
/* Nivåns namn är samma ord som står på fakturan och i admin. Det ska gå att
   känna igen sitt eget steg utan att räkna ordrar. */
.trappa .nivanamn {
  font: 400 11px/1 var(--sans);
  letter-spacing: 2px;
  color: var(--terrakotta-djup);
}
.trappa .punktlinje {
  flex: 1;
  border-bottom: 1px dotted rgba(0, 0, 0, .25);
  margin-bottom: 5px;
}
.trappa .pris {
  font-size: 15px;
  color: var(--terrakotta-djup);
  white-space: nowrap;
}
.trappa .noll { color: var(--dampad); }
.prisnot {
  margin: 1.4rem 0 0;
  font-size: 14px;
  color: var(--meta);
  max-width: 58ch;
}

/* --------------------------------------------------------------- omdömen */

.omdomen .omdplats {
  font: italic 400 19px/1.6 var(--serif);
  color: var(--dampad);
  max-width: 50ch;
  border-left: 2px solid var(--linje);
  padding-left: 1.4rem;
  margin: 0;
}

/* ---------------------------------------------------------------- frågor */

.fraga {
  border-bottom: 1px solid var(--linje);
  padding: 1rem 0;
}
.fraga summary {
  cursor: pointer;
  font: 400 18px/1.5 var(--serif);
  list-style: none;
  display: flex;
  gap: .8rem;
  align-items: baseline;
}
.fraga summary::-webkit-details-marker { display: none; }
.fraga summary::before {
  content: "+";
  color: var(--terrakotta-djup);
  font: 400 16px/1.5 var(--sans);
}
.fraga[open] summary::before { content: "–"; }
.fraga p {
  margin: .7rem 0 .3rem 1.7rem;
  max-width: 62ch;
  color: var(--dampad);
  font-size: 15px;
}

/* ----------------------------------------------------------- kalkylatorn */

/* Bred skärm: en spalt som följer med i scrollen. Den ska stå still i
   ögonvrån medan resten av sidan rullar förbi — det är hela poängen med att
   den inte är ett avsnitt bland andra. */
.kalkylruta {
  position: sticky;
  top: 5.5rem;
  border-top: 1px solid var(--oliv);
  padding-top: 1.4rem;
  margin: 3.5rem 0;
}

/* Kalkylatorn är med alla fält ifyllda dubbelt så hög som en bärbar skärm, och
   en klistrad ruta som är högre än vyn slutar klistra: resten av den kommer
   fram först när sidan nått sitt slut. Besökaren såg alltså fälten men aldrig
   svaret utan att scrolla förbi hela sidan. Rutan får därför aldrig bli högre
   än vyn, och rullar i sig själv när innehållet inte får plats — då är varje
   siffra nåbar var på sidan man än står. Kedjan till sidans egen scroll lämnas
   på med flit: den som rullat kalkylatorn i botten ska fortsätta ner i sidan,
   inte köra in i en vägg. */
@media (min-width: 1080px) {
  .kalkylruta {
    max-height: calc(100vh - 7.5rem);
    max-height: calc(100dvh - 7.5rem);
    overflow-y: auto;
    /* Rullningslisten läggs utanför texten i stället för att smalna av den:
       spalten är 20rem och har inga pixlar att avvara. */
    padding-right: 1rem;
    margin-right: -1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--oliv) transparent;
  }
  /* Toningen säger att det finns mer under kanten. Den ligger klistrad i
     rutans egen botten och rullar alltså inte med innehållet. Den lägger sig
     inte över texten utan är en egen sista rad: en toning ovanpå fotnoten hade
     gjort sista meningen svårläst just när besökaren nått fram till den. */
  .kalkylruta::after {
    content: "";
    display: block;
    position: sticky;
    bottom: 0;
    height: 2.5rem;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--creme));
  }
}
.kalkylruta h2 {
  margin: 0 0 .6rem;
  font-size: 23px;
  line-height: 1.25;
}
.kalkunder {
  margin: 0 0 1.4rem;
  font-size: 14px;
  color: var(--dampad);
}

.kalkylruta .falt { display: grid; gap: .3rem; margin-bottom: 1.1rem; }
.kalkylruta label { font-size: 13px; color: var(--dampad); }
.kalkylruta input {
  width: 100%;
  padding: .45rem 0;
  border: 0;
  border-bottom: 1px solid var(--oliv);
  background: transparent;
  color: var(--grafit);
  font: 400 22px/1.2 var(--serif);
}
.kalkylruta input:focus {
  outline: none;
  border-bottom-color: var(--terrakotta);
}
/* Snurrpilarna hör hemma i ett formulär där man stegar ett steg i taget. Här
   skriver man 4500, inte 45 klick. */
.kalkylruta input::-webkit-outer-spin-button,
.kalkylruta input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kalkylruta input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.faltnot { font-size: 12px; color: var(--meta); }

.tomtsvar {
  margin: 1.4rem 0 0;
  font: italic 400 15px/1.6 var(--serif);
  color: var(--meta);
}

.utfall {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linje);
}
.utetikett {
  margin: 0 0 .5rem;
  font: 400 11px/1 var(--sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--meta);
}
.utfall .volym {
  margin: 0 0 .5rem;
  font: 400 15px/1.4 var(--serif);
  color: var(--grafit);
}
.utfall .rad, .andel .rad {
  margin: 0 0 .25rem;
  font-size: 14px;
  color: var(--dampad);
}
.siffra { color: var(--terrakotta-djup); }
.besparing {
  margin: .7rem 0 0;
  font: 400 24px/1.2 var(--serif);
  color: var(--terrakotta-djup);
}

.arssumma {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linje);
}
.arssumma .belopp {
  font: 400 34px/1.1 var(--serif);
  /* Stor text får enligt WCAG klara 3:1, men här är det pengar besökaren
     läser — den djupare terrakottan håller 4.5:1 som resten av sidan. */
  color: var(--terrakotta-djup);
  display: block;
}
.arssumma .brodtext {
  font: italic 400 15px/1.5 var(--serif);
  color: var(--dampad);
  display: block;
  margin-top: .3rem;
}
/* Neutrala läget: samma plats, samma tyngd, men utan siffra. En kalkylator som
   svarar med ett minustal har just sagt åt besökaren att gå någon annanstans. */
.arssumma .neutral {
  font: italic 400 16px/1.5 var(--serif);
  color: var(--dampad);
  display: block;
}

.andel {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linje);
}
.andel .rad.stark { color: var(--grafit); }

/* Plattformsrutan. Samma avdelare som de andra utfallen, men den är den enda
   som kan utebli helt — därför får den inte se ut som en tom plats när den
   saknas, och all luft sitter på rutan och inte på det som står ovanför. */
.plattform {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linje);
}
.plattform .rad {
  margin: 0 0 .25rem;
  font-size: 14px;
  color: var(--dampad);
}
.plattformsar {
  margin: .2rem 0 0;
  font: italic 400 15px/1.5 var(--serif);
  color: var(--dampad);
}
/* Förbehållet står med samma vikt som resten av brödtexten och inte som en
   finstilt rad: villkoret för att spara pengarna är en del av erbjudandet, inte
   en reservation vi helst vill att någon missar. */
.plattformsnot {
  margin: .9rem 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--meta);
}

.fotnot {
  margin: 1.6rem 0 0;
  font-size: 12px;
  color: var(--meta);
}

/* Teasern finns bara på smal skärm och visas av JavaScript. Utan JavaScript
   räknar ingenting ändå, och då ska hela kalkylatorn stå öppen. */
.kalkyltease {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: .9rem 1.5rem;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: 400 15px/1.3 var(--sans);
  color: var(--grafit);
}
.teaserrubrik { font: 400 17px/1.3 var(--serif); }
.teasertext { font-size: 13px; color: var(--meta); }
.teasertecken {
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  color: var(--terrakotta-djup);
}
.teasertecken::before { content: "+"; }
.kalkyltease[aria-expanded="true"] .teasertecken::before { content: "–"; }

@media (max-width: 1079px) {
  /* Listen längst ner: alltid nåbar, aldrig i vägen. Den fällda kroppen får
     rulla för sig själv så att en liten skärm i liggande läge inte låser
     besökaren inne i kalkylatorn. */
  .kalkylruta {
    position: fixed;
    /* top måste nollas: den klistrade rutans top: 5.5rem lever kvar annars, och
       en fixerad ruta med både top och bottom sträcks ut över hela skärmen. */
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    margin: 0;
    padding-top: 0;
    background: var(--creme);
    border-top: 1px solid var(--oliv);
  }
  .kalkylruta .kalkylkropp {
    max-height: 72vh;
    overflow-y: auto;
    padding: 0 1.5rem 1.5rem;
  }
  .kalkylruta .etikett { padding-top: .2rem; }
  /* Plats för listen, så att sidfoten går att läsa hela vägen ut. */
  body { padding-bottom: 4rem; }
}

@media (max-width: 820px) {
  .rutor, .kokjamforelse, .kanalpanel { grid-template-columns: minmax(0, 1fr); }
  .kanalpanel { padding: 1.8rem 1.6rem 2rem; }
  /* Under varandra behöver de två halvorna en linje emellan sig. Med bara
     luft läser man kampanjrubriken som en fortsättning på förmånerna. */
  .kanaldel + .kanaldel { border-top: 1px solid var(--ljuslinje); padding-top: 1.9rem; }
  .kanalslutsats { font-size: 17px; }
  .demoband { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .demobild { max-width: 15rem; }
  section h2 { font-size: 25px; }
  section h2 .fortsattning { font-size: 17px; }
  .slag { gap: 1.6rem; }
}

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

.sidfot {
  border-top: 1px solid var(--linje);
  padding: 2.5rem 0 3.5rem;
  font-size: 14px;
  color: var(--meta);
}
.sidfot .spalt {
  max-width: var(--bredspalt);
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: baseline;
}
.sidfot a { color: var(--dampad); text-decoration: none; }
.sidfot a:hover { color: var(--terrakotta-djup); }
.sidfot .hoger { margin-left: auto; }

/* ------------------------------------------- registrering och villkorssida
   Två sidor som serveras av API:t men ser ut att höra hemma här. Stilarna
   ligger i den här filen och inte i admin.css av just det skälet: den som
   fyller i formuläret är inte kund än, och ska inte mötas av kundgränssnittet
   innan hen bestämt sig. */

/* En blankett läses uppifrån och ner, inte i en spalt byggd för brödtext.
   Smalare än --spalt så att fälten hamnar under varandra i ögats bana. */
.smal { max-width: 40rem; }
main.smal { padding-top: 3.5rem; padding-bottom: 4rem; }

.kontoform { margin-top: 2.5rem; }

.kontoform fieldset {
  margin: 0 0 2.2rem;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--linje);
  padding-top: 1.6rem;
  display: grid;
  gap: 1.3rem;
}
.kontoform legend {
  padding: 0 .6rem 0 0;
  font: 400 11px/1 var(--sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--terrakotta);
}

.falt { display: grid; gap: .4rem; }
.etikettrad { font-size: 14px; color: var(--dampad); }
.valfritt {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--meta);
}

.kontoform input[type="text"],
.kontoform input[type="email"],
.kontoform input[type="password"],
.kontoform input:not([type]) {
  width: 100%;
  padding: .75rem .85rem;
  border: 1px solid var(--linje);
  border-radius: 3px;
  background: #fff;
  font: 400 16px/1.4 var(--sans);
  color: var(--grafit);
}
/* Referenskoden. Fyra tecken i versaler och med luft emellan: den skrivs av
   från en lapp, och ett fält i full bredd hade sett ut att vilja ha en mening. */
.kontoform input.kod {
  width: 9rem;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 18px;
}
.kontoform input:focus-visible {
  outline: 2px solid var(--oliv);
  outline-offset: 1px;
  border-color: transparent;
}

/* Postnummer och ort hör ihop på en rad, som på ett kuvert. */
.faltpar { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; }

.hjalp { font-size: 13px; color: var(--meta); }
.hjalp.brett { margin: -.4rem 0 0; }

/* Fel står vid sitt fält och inte i en samlad lista högst upp: den som fyllt i
   nio fält rätt ska se vilket av dem som är det tionde. */
.faltfel { font-size: 13px; color: var(--terrakotta); }
.faltfel.fristaende { margin: -.6rem 0 0; }
.harfel input { border-color: var(--terrakotta); }

.formfel {
  margin: 2rem 0 0;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--terrakotta);
  background: rgba(184, 92, 56, .07);
  font-size: 15px;
}

/* Adressförslaget under namnfältet. Dämpad rad, inte en varning: den säger
   vad som kommer att hända, inte att något är fel. */
.adressrad {
  margin: 0;
  font-size: 14px;
  color: var(--dampad);
}
.adressrad strong { font-weight: 400; color: var(--oliv); }

/* Vad lagar ni? Fem kort med en rubrik och en rad förklaring i vardera.

   Kortet är etiketten och inte en div runt den: hela ytan ska gå att träffa
   med en tumme, och en label som bara omsluter texten ger en träffyta på
   några millimeter. Radioknappen står kvar och är synlig — den säger att
   svaret går att ändra, vilket ett kort som bara "blir valt" inte gör. */
.typkort {
  display: grid;
  gap: .7rem;
}
.typkort-val {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  border: 1px solid var(--linje);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.typkort-val input { margin-top: .25rem; flex: none; }
.typkort-text { display: grid; gap: .2rem; }
.typkort-namn { font-size: 15px; color: var(--grafit); }
/* Förklaringen ska gå att läsa och inte bara anas: --meta ger 5,7:1 mot vitt,
   och det är den som avgör om valet blir ett val eller en gissning. */
.typkort-not { font-size: 13px; line-height: 1.45; color: var(--meta); }

/* Det valda kortet bär både ram och botten. Bara en ändrad ram hade varit en
   kontrastskillnad på under 3:1 mot de andra korten — synlig för den som
   letar och osynlig för den som inte gör det. */
.typkort-val:has(input:checked) {
  border-color: var(--oliv);
  background: rgba(46, 75, 63, .06);
}
.typkort-val:hover { border-color: var(--oliv); }
.typkort-val:has(input:focus-visible) {
  outline: 2px solid var(--oliv);
  outline-offset: 1px;
}

.kryss {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin: 0 0 1.6rem;
  font-size: 15px;
}
.kryss input { margin-top: .35rem; }
.kryss.harfel span { color: var(--terrakotta); }

.kontoform button.pill { border: 0; cursor: pointer; font-size: 15px; }

.finstilt { margin: 1.4rem 0 0; font-size: 13px; color: var(--meta); }

/* Villkorssidan: ren löptext i samma smala spalt. */
.villkor h2 { margin: 2.6rem 0 .6rem; font-size: 20px; }
.villkor p, .villkor li { color: #3c3c3c; }
.villkor .uppdaterad { font-size: 13px; color: var(--meta); }

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