/* FinFix UF som fröpåse: salviagrönt papper, påsgrönt i hela fält, svart tryckfärg.
   Gult betyder bara "nu" eller vald månad. Alla färgpar är kontrollerade mot WCAG AA. */
:root {
  color-scheme: only light;
  --papper: #dde5d8;
  --gron-ljus: #e5f5ec;
  --svart: #0b0b0b;
  --svart-2: #3b3b39;
  --gron: #04b564;
  --gron-mork: #083a22;
  --sol: #f2c200;
  --sol-ljus: #fff4c2;
  --linje: #c3cdbe;

  --typ-smal: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --typ-text: "Sofia Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  --tryck: 1.5px;
  --radie: 6px;
  --bredd: 1200px;
  --ut: cubic-bezier(0.16, 1, 0.3, 1);
  --topp-hojd: 73px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  font-family: var(--typ-text);
  font-size: 1.125rem;
  line-height: 1.55;
  background: var(--papper);
  color: var(--svart);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  background: var(--sol);
  color: var(--svart);
}

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

a,
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(4 181 100 / 0.25);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--svart);
  outline-offset: 3px;
  border-radius: 2px;
}

h1,
h2 {
  font-family: var(--typ-smal);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
}

.ram {
  max-width: var(--bredd);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.visuellt-dold {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hoppa {
  position: absolute;
  left: var(--s4);
  top: -4rem;
  z-index: 100;
  background: var(--svart);
  color: var(--papper);
  padding: var(--s3) var(--s4);
  border-radius: var(--radie);
  font-weight: 700;
}

.hoppa:focus {
  top: var(--s4);
}

/* --- Knappar ---
   En knapp är ett tryckt block ur påsen: rak kant, ingen ram, påsgrönt med svart text. */

.knapp {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--s3) var(--s5);
  background: var(--gron);
  color: var(--svart);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s var(--ut), color 0.15s var(--ut), scale 0.15s var(--ut);
}

.knapp:hover {
  background: var(--svart);
  color: var(--gron);
}

.knapp:active {
  background: var(--gron-mork);
  color: var(--papper);
  scale: 0.98;
}

.knapp-stor {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: var(--s4) var(--s6) var(--s4) var(--s5);
}

.knapp-stor span:first-child {
  font-family: var(--typ-smal);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
}

.knapp-adress {
  font-weight: 500;
  font-size: 1rem;
}

.knapp-liten {
  min-height: 44px;
  padding: var(--s2) var(--s4);
  font-size: 1.05rem;
}

/* --- Toppen --- */

#toppen {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papper);
  border-bottom: var(--tryck) solid var(--svart);
}

.toppen-rad {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding-block: var(--s3);
}

#logga {
  display: flex;
  align-items: center;
  min-height: 48px;
  flex-shrink: 0;
  margin-right: auto;
}

#logga img {
  height: 44px;
  width: auto;
}

#meny-knapp {
  display: none;
}

.meny-kontakt {
  display: none;
}

#meny-lista {
  display: flex;
  gap: var(--s5);
  list-style: none;
}

#meny-lista a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
}

#meny-lista a:hover,
#meny-lista a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--gron);
  text-decoration-thickness: 3px;
}

/* --- Framsidan: erbjudandet och påsen --- */

/* Framsidan fyller hela första skärmen; kalendern kommer först när man scrollar.
   svh i stället för vh, annars blir den för hög bakom mobilens adressfält. */
#forsida {
  display: grid;
  align-items: center;
  min-height: calc(100vh - var(--topp-hojd));
  min-height: calc(100svh - var(--topp-hojd));
  padding-block: var(--s6) var(--s7);
}

.forsida-rutnat {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(4rem, 8vw, 8rem);
  align-items: center;
  /* #forsida är ett grid; utan full bredd krymper ramen och hamnar indragen jämfört med loggan */
  width: 100%;
}

#forsida h1 {
  font-size: clamp(3rem, 5.6vw, 5rem);
  max-width: 11ch;
}

.ingress {
  margin-top: var(--s5);
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.45;
  color: var(--svart-2);
  max-width: 34ch;
}

.handlingar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s5);
  margin-top: var(--s6);
}

.ring {
  font-size: 1.2rem;
  color: var(--svart-2);
}

.ring a,
.band-ring a {
  display: inline-block;
  padding-block: 0.55rem;
  color: var(--svart);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pris-rad {
  margin-top: var(--s5);
  font-size: 1rem;
  color: var(--svart-2);
}

/* Påsens tandade kant: två diagonala gradienter ger sågtanden utan clip-path */
.pase {
  --rx: 0deg;
  --ry: 0deg;
  justify-self: center;
  width: 100%;
  max-width: 410px;
  transform: perspective(1000px) rotate(-2deg) rotateX(var(--rx)) rotateY(var(--ry));
  filter: drop-shadow(0 18px 22px rgb(11 11 11 / 0.22));
  transition: transform 0.7s var(--ut), filter 0.7s var(--ut);
}

/* Medan musen är över följer påsen snabbt; när den släpps glider den tillbaka */
.pase.lutar {
  transition: transform 0.12s linear, filter 0.4s var(--ut);
  filter: drop-shadow(0 28px 30px rgb(11 11 11 / 0.26));
  will-change: transform;
}

/* Ljuset ligger över hela påsen, tänderna också; masken har samma sågtand som kanterna */
.pase {
  position: relative;
}

.pase::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--glans-x, 50%) var(--glans-y, 30%), rgb(255 255 255 / 0.45), transparent 55%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.4s var(--ut);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(135deg, transparent 50%, #000 50%) left top / 14px 14px repeat-x,
    linear-gradient(225deg, transparent 50%, #000 50%) left top / 14px 14px repeat-x,
    linear-gradient(#000, #000) center / 100% calc(100% - 28px) no-repeat,
    linear-gradient(45deg, transparent 50%, #000 50%) left bottom / 14px 14px repeat-x,
    linear-gradient(315deg, transparent 50%, #000 50%) left bottom / 14px 14px repeat-x;
  mask:
    linear-gradient(135deg, transparent 50%, #000 50%) left top / 14px 14px repeat-x,
    linear-gradient(225deg, transparent 50%, #000 50%) left top / 14px 14px repeat-x,
    linear-gradient(#000, #000) center / 100% calc(100% - 28px) no-repeat,
    linear-gradient(45deg, transparent 50%, #000 50%) left bottom / 14px 14px repeat-x,
    linear-gradient(315deg, transparent 50%, #000 50%) left bottom / 14px 14px repeat-x;
}

.pase.lutar::after {
  opacity: 1;
}

.pase-kant {
  height: 14px;
  background:
    linear-gradient(135deg, transparent 50%, var(--gron) 50%) 0 0 / 14px 14px repeat-x,
    linear-gradient(225deg, transparent 50%, var(--gron) 50%) 0 0 / 14px 14px repeat-x;
}

.pase-kant-botten {
  transform: scaleY(-1);
}

.pase-kropp {
  background: var(--gron);
  padding: var(--s4) var(--s5) var(--s5);
}

.pase-marke {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: var(--tryck) solid var(--svart);
  font-family: var(--typ-smal);
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Påsens bildfönster visar ett riktigt jobb, som fröpåsen visar det som växer */
.pase-fonster {
  margin-top: var(--s4);
  aspect-ratio: 4 / 3;
  border: var(--tryck) solid var(--svart);
  overflow: hidden;
}

.pase-fonster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tills jobbfotot finns står loggan direkt på påsens gröna, utan ram eller botten.
   Hjärtats svarta kontur gör att det syns mot det gröna. */
.pase-fonster-logga {
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  padding-block: var(--s6);
  border: 0;
  background: none;
}

.pase-fonster-logga img {
  height: auto;
  object-fit: contain;
}

/* Platshållare tills teamets egna bilder finns, tydligt märkta så de inte ser färdiga ut */
.bild-plats {
  display: grid;
  place-items: center;
  padding: var(--s4);
  background: var(--gron-ljus);
  text-align: center;
}

.bild-plats p {
  max-width: 18ch;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}

.bild-plats-efter {
  background: var(--sol-ljus);
}

.pase-sort {
  margin-top: var(--s4);
  font-family: var(--typ-smal);
  font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.pase-finstilt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: var(--tryck) solid var(--svart);
}

.pase-finstilt dt {
  font-family: var(--typ-smal);
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pase-finstilt dd {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gron-mork);
}

/* --- Året: såkalendern --- */

#aret {
  padding-block: var(--s6) var(--s9);
  border-top: var(--tryck) solid var(--svart);
}

.aret-huvud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s6);
  align-items: end;
  margin-bottom: var(--s5);
}

.aret-huvud p {
  max-width: 44ch;
  color: var(--svart-2);
}

.kalender-rullning {
  --etikett: 34%;
  scrollbar-color: var(--svart) var(--papper);
}

.kalender-yta {
  position: relative;
}

/* Markören är en enda remsa som flyttas med transform, så rutnätet ligger alltid stilla */
.manad-markor {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--etikett);
  width: calc((100% - var(--etikett)) / 12);
  background: var(--sol-ljus);
  border-inline: var(--tryck) solid var(--svart);
  transform: translateX(calc(var(--kol, 0) * 100%));
  transition: transform 0.7s var(--ut);
  z-index: 0;
}

.js .manad-markor {
  display: block;
}

.kalender {
  position: relative;
  z-index: 1;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.kol-syssla {
  width: var(--etikett);
}

.kalender thead th {
  height: 3.25rem;
  border-bottom: var(--tryck) solid var(--svart);
  font-family: var(--typ-smal);
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.manad-knapp {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 44px;
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--svart);
  cursor: pointer;
}

.manad-knapp:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.manad-knapp {
  transition: background-color 0.2s var(--ut);
}

.manad-knapp:hover:not([aria-pressed="true"]) {
  background: var(--gron-ljus);
}

/* Vald månad får också ett svart streck, så valet inte hänger på grönt mot salviagrönt */
.manad-knapp[aria-pressed="true"] {
  background: var(--gron);
  color: var(--svart);
  box-shadow: inset 0 -4px 0 var(--svart);
}

.kalender tbody tr {
  transition: background-color 0.2s var(--ut);
}

.kalender tbody tr:hover {
  background: rgb(4 181 100 / 0.08);
}

.nu-lapp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.2rem;
  font-size: 0.7rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--svart);
}

.kalender tbody th {
  padding: var(--s4) var(--s4) var(--s4) 0;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

.kalender tbody tr {
  border-bottom: 1px solid var(--linje);
}

.kalender tbody tr:last-child {
  border-bottom: var(--tryck) solid var(--svart);
}

.syssla-namn {
  display: block;
  font-family: var(--typ-smal);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

.syssla-tid {
  display: block;
  margin-top: var(--s1);
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.syssla-rad {
  display: block;
  margin-top: var(--s1);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--svart-2);
}

.kalender td {
  position: relative;
}

/* Stapeln: grön med svart tryckkant; start- och slutrutor stänger stapeln */
.kalender td.pa::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.25rem;
  transform: translateY(-50%);
  background: var(--gron);
  border-block: var(--tryck) solid var(--svart);
}

.kalender td.start::before {
  left: 5px;
  border-left: var(--tryck) solid var(--svart);
  border-radius: 3px 0 0 3px;
}

.kalender td.slut::before {
  right: 5px;
  border-right: var(--tryck) solid var(--svart);
  border-radius: 0 3px 3px 0;
}

.kalender td.start.slut::before {
  border-radius: 3px;
}

/* Med JavaScript ersätts bitarna av en hel stapel per säsong */
.hela-staplar td.pa::before {
  content: none;
}

.stapel {
  --in-v: 0px;
  --in-h: 0px;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: var(--in-v);
  width: calc(var(--langd) * 100% - var(--in-v) - var(--in-h));
  height: 1.25rem;
  transform: translateY(-50%);
  transform-origin: left center;
  background: var(--gron);
  border-block: var(--tryck) solid var(--svart);
}

.stapel.har-start {
  --in-v: 5px;
  border-left: var(--tryck) solid var(--svart);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.stapel.har-slut {
  --in-h: 5px;
  border-right: var(--tryck) solid var(--svart);
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.rad-annat .stapel {
  background: transparent;
}

/* Ihålig stapel = går att fråga om, inte en fast säsong; genomskinlig så månadsmarkören syns igenom */
.rad-annat td.pa::before {
  background: transparent;
}

.forklaring {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s6);
  margin-top: var(--s4);
  list-style: none;
  font-size: 0.95rem;
  color: var(--svart-2);
}

.forklaring li {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.tecken {
  width: 2rem;
  height: 0.9rem;
  border: var(--tryck) solid var(--svart);
  border-radius: 3px;
}

.tecken-hel {
  background: var(--gron);
}

.tecken-ihalig {
  background: transparent;
}

/* Utläsningen är tryckt direkt under kalendern, som finstilt på påsens baksida */
.manad-utlasning {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto;
  gap: var(--s3) var(--s6);
  align-items: baseline;
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: var(--tryck) solid var(--svart);
}

.utlasning-manad {
  font-family: var(--typ-smal);
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1;
  text-transform: uppercase;
}

.utlasning-sysslor {
  font-size: 1.15rem;
  max-width: 48ch;
}

.manad-steg {
  display: none;
}

.steg-knapp {
  min-height: 48px;
  padding: var(--s2) var(--s3);
  background: none;
  border: var(--tryck) solid var(--svart);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: var(--svart);
  cursor: pointer;
  transition: background-color 0.15s var(--ut);
}

.steg-knapp:hover,
.steg-knapp:active {
  background: var(--gron);
}

.lank-mejl {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration-color: var(--gron);
  text-decoration-thickness: 3px;
  white-space: nowrap;
}

.lank-mejl:hover {
  text-decoration-color: var(--svart);
}

/* --- Före och efter --- */

#fore-efter {
  padding-block: var(--s8);
  border-top: var(--tryck) solid var(--svart);
}

.fe-rutnat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6);
}

.fe {
  margin: 0;
}

/* Reglaget ligger osynligt över hela bilden, så man kan dra var som helst; linjen och handtaget visar läget */
.fe-yta {
  --delning: 50%;
  position: relative;
  aspect-ratio: 4 / 3;
  border: var(--tryck) solid var(--svart);
  overflow: hidden;
}

.fe-lager {
  position: absolute;
  inset: 0;
}

.fe-lager img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fe-efter {
  clip-path: inset(0 0 0 var(--delning));
}

/* Platshållartexterna står i var sin halva, så handtaget inte klyver dem */
.fe-fore.bild-plats {
  justify-items: start;
  padding-left: 7%;
}

.fe-efter.bild-plats {
  justify-items: end;
  padding-right: 7%;
}

.fe .bild-plats p {
  max-width: 11ch;
}

/* Delningslinjen */
.fe-yta::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--delning);
  z-index: 2;
  width: 2px;
  transform: translateX(-1px);
  background: var(--svart);
  pointer-events: none;
}

/* Handtaget: en tryckt flik med två små pilar som visar att den dras i sidled */
.fe-handtag {
  position: absolute;
  top: 50%;
  left: var(--delning);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 52px;
  height: 40px;
  padding-inline: 9px;
  transform: translate(-50%, -50%);
  background: var(--papper);
  border: var(--tryck) solid var(--svart);
  box-shadow: 0 3px 8px rgb(11 11 11 / 0.18);
  pointer-events: none;
  transition: background-color 0.2s var(--ut), scale 0.2s var(--ut), box-shadow 0.2s var(--ut);
}

.fe-handtag::before,
.fe-handtag::after {
  content: "";
  width: 0;
  height: 0;
  border-block: 6px solid transparent;
}

.fe-handtag::before {
  border-right: 8px solid var(--svart);
}

.fe-handtag::after {
  border-left: 8px solid var(--svart);
}

.fe-yta:hover .fe-handtag {
  background: var(--gron);
}

.fe-yta.drar .fe-handtag {
  background: var(--gron);
  scale: 1.08;
  box-shadow: 0 6px 14px rgb(11 11 11 / 0.22);
}

.fe-reglage {
  touch-action: pan-y;
}

.fe-yta:has(.fe-reglage:focus-visible) {
  outline: 3px solid var(--svart);
  outline-offset: 3px;
}

.fe-lapp {
  position: absolute;
  top: var(--s3);
  z-index: 2;
  padding: 0.1rem var(--s2);
  background: var(--papper);
  border: var(--tryck) solid var(--svart);
  font-family: var(--typ-smal);
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  pointer-events: none;
}

.fe-lapp-fore {
  left: var(--s3);
}

.fe-lapp-efter {
  right: var(--s3);
}

.fe-reglage {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.fe figcaption {
  margin-top: var(--s3);
  font-size: 1rem;
  color: var(--svart-2);
}

/* --- Vilka vi är --- */

#vilka {
  padding-block: var(--s8);
  border-top: var(--tryck) solid var(--svart);
}

.vilka-rutnat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s6);
  align-items: end;
}

#vilka p {
  max-width: 44ch;
  color: var(--svart-2);
}

.packat-av {
  margin-top: var(--s7);
  padding-top: var(--s3);
  border-top: var(--tryck) solid var(--svart);
}

.packat-av dt,
.zon-strip dt {
  font-family: var(--typ-smal);
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lank-pil {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--s4);
  font-weight: 700;
  text-decoration-color: var(--gron);
  text-decoration-thickness: 3px;
}

.namn-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--s6);
  margin-top: var(--s2);
  list-style: none;
  font-family: var(--typ-smal);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1;
  text-transform: uppercase;
}

/* --- Gröna bandet --- */

.gron-band {
  position: relative;
  padding-block: var(--s9);
  background: var(--gron);
}

.gron-band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
  background:
    linear-gradient(135deg, transparent 50%, var(--gron) 50%) 0 0 / 14px 14px repeat-x,
    linear-gradient(225deg, transparent 50%, var(--gron) 50%) 0 0 / 14px 14px repeat-x;
}

.gron-band h2 {
  max-width: 14ch;
}

.band-text {
  margin-top: var(--s4);
  max-width: 46ch;
  font-size: 1.25rem;
  line-height: 1.45;
}

.gron-band a:focus-visible {
  outline-color: var(--svart);
}

.mejl-stor {
  display: inline-block;
  margin-top: var(--s5);
  padding-block: 0.12em;
  font-family: var(--typ-smal);
  font-weight: 800;
  font-size: clamp(2.25rem, 7vw, 5.5rem);
  line-height: 1;
  text-decoration-thickness: 4px;
  text-underline-offset: 0.12em;
  overflow-wrap: anywhere;
}

.mejl-stor:hover {
  text-decoration-color: var(--papper);
}

.band-ring {
  margin-top: var(--s5);
  font-size: 1.35rem;
  color: var(--gron-mork);
}

.band-socialt {
  display: flex;
  gap: var(--s5);
  margin-top: var(--s4);
}

.band-socialt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

/* --- Undersidor --- */

.sida-topp {
  padding-block: var(--s8) 0;
}

.sida-topp h1 {
  font-size: clamp(3rem, 7vw, 5.5rem);
}

.sida-topp p {
  margin-top: var(--s5);
  max-width: 44ch;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--svart-2);
}

.text-block {
  padding-block: var(--s8);
}

.text-block h2 + * {
  margin-top: var(--s5);
}

.text-block p + p {
  margin-top: var(--s4);
}

.lastext {
  max-width: 62ch;
}

/* Arbetszonen sätts som finstiltsraden på påsen, fast i full storlek */
.zon-strip {
  padding-block: var(--s4);
  border-block: var(--tryck) solid var(--svart);
}

.zon-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2) var(--s6);
  margin-top: var(--s2);
  list-style: none;
  font-family: var(--typ-smal);
  font-weight: 800;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1;
  text-transform: uppercase;
}

.portratt-rutnat {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5);
  list-style: none;
}

.portratt figure {
  margin: 0;
}

.portratt-bild {
  aspect-ratio: 4 / 5;
  border: var(--tryck) solid var(--svart);
  overflow: hidden;
}

.portratt-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portratt-bild.bild-plats {
  align-content: center;
  gap: var(--s2);
}

.portratt-initial {
  font-family: var(--typ-smal);
  font-weight: 800;
  font-size: 4.5rem;
  line-height: 1;
}

.portratt figcaption {
  margin-top: var(--s3);
  font-family: var(--typ-smal);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  text-transform: uppercase;
}

/* Kontaktsidans checklista trycks som påsens instruktionsruta, ett eget fält i gult */
.instruktion-band {
  padding-block: var(--s8);
  background: var(--sol-ljus);
  border-block: var(--tryck) solid var(--svart);
}

.instruktion-rutnat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s6);
  align-items: end;
}

.kontakt-lista {
  margin-top: var(--s2);
}

.kontakt-lista div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--s4);
  align-items: baseline;
  padding-block: var(--s5);
  border-bottom: 1px solid var(--linje);
}

.kontakt-lista div:first-child {
  border-top: var(--tryck) solid var(--svart);
}

.kontakt-lista dt {
  font-family: var(--typ-smal);
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.kontakt-lista dd a {
  font-family: var(--typ-smal);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.1;
  text-decoration-color: var(--gron);
  text-decoration-thickness: 3px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.bra-att-veta {
  margin-top: var(--s5);
  list-style: none;
  font-size: 1.25rem;
}

.bra-att-veta li {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}

.bra-att-veta li::before {
  content: "";
  flex-shrink: 0;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--gron);
  border: var(--tryck) solid var(--svart);
  transform: translateY(0.05em);
}

.bra-att-veta li + li {
  margin-top: var(--s3);
}

/* --- Sidfoten --- */

#sidfot {
  padding-block: var(--s7);
  background: var(--papper);
  border-top: var(--tryck) solid var(--svart);
}

.sidfot-rad {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s5) var(--s7);
  align-items: center;
}

.sidfot-logga {
  width: 200px;
}

.sidfot-lankar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s2) var(--s5);
  list-style: none;
}

.sidfot-lankar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  text-decoration-color: var(--gron);
  font-variant-numeric: tabular-nums;
}

.sidfot-signatur {
  grid-column: 1 / -1;
  margin-top: calc(var(--s5) * -1);
  font-size: 0.95rem;
  color: var(--svart-2);
}

.sidfot-finstilt {
  grid-column: 1 / -1;
  padding-top: var(--s4);
  border-top: 1px solid var(--linje);
  font-size: 0.95rem;
  color: var(--svart-2);
}

/* --- Scrollrörelse ---
   Bara när JavaScript satt klassen .rorelse; annars och med "minska rörelse" syns allt direkt.
   translate och scale används i stället för transform så att påsens 3D-lutning får vara ifred. */

.rorelse .avslojas {
  transition:
    opacity 0.8s var(--ut) calc(var(--i, 0) * 80ms),
    translate 0.8s var(--ut) calc(var(--i, 0) * 80ms),
    clip-path 0.9s var(--ut);
}

.rorelse .avslojas:not(.synlig) {
  opacity: 0;
  translate: 0 1.5rem;
}

/* Rubriker trycks fram från vänster, som en rad som går genom tryckpressen */
.rorelse [data-avslojas="tryck"] {
  clip-path: inset(-0.25em -0.25em -0.25em -0.25em);
}

.rorelse [data-avslojas="tryck"]:not(.synlig) {
  opacity: 1;
  translate: none;
  clip-path: inset(-0.25em 100% -0.25em -0.25em);
}

.rorelse [data-avslojas="pase"]:not(.synlig) {
  translate: 0 2.5rem;
}

.rorelse .pase.avslojas {
  transition: opacity 0.8s var(--ut), translate 0.8s var(--ut), transform 0.7s var(--ut), filter 0.7s var(--ut);
}

.rorelse .pase.avslojas.lutar {
  transition: opacity 0.8s var(--ut), translate 0.8s var(--ut), transform 0.12s linear, filter 0.4s var(--ut);
}

.rorelse [data-avslojas="rad"]:not(.synlig) {
  translate: 0 1rem;
}


/* Kalendern själv står kvar; staplarna ritas ut från vänster, en kolumn i taget */
.rorelse [data-avslojas="staplar"]:not(.synlig) {
  translate: none;
}

/* Året går: ett tunt streck sveper från januari till december i jämn takt.
   Varje stapel fylls precis när strecket passerar den, och den gula månaden tänds när strecket når den.
   En rörelse för hela kalendern, i stället för att varje del animeras för sig. */
.rorelse .kalender-rullning {
  --manad-tid: 110ms;
}

.rorelse .stapel {
  transition: scale calc(var(--langd) * var(--manad-tid)) linear calc(var(--start) * var(--manad-tid));
}

.rorelse .kalender-rullning:not(.synlig) .stapel {
  scale: 0 1;
  transition: scale 0.2s var(--ut);
}

.ar-linje {
  display: none;
}

.rorelse .ar-linje {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--etikett);
  z-index: 2;
  width: 2px;
  background: var(--svart);
  opacity: 0;
  pointer-events: none;
}

.rorelse .kalender-rullning.synlig .ar-linje {
  animation: aret-gar calc(12 * var(--manad-tid)) linear forwards;
}

@keyframes aret-gar {
  0% {
    left: var(--etikett);
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 2px);
    opacity: 0;
  }
}

.rorelse .manad-markor {
  transition: transform 0.7s var(--ut), opacity 0.25s linear calc(var(--kol, 0) * var(--manad-tid));
}

.rorelse .kalender-rullning:not(.synlig) .manad-markor {
  opacity: 0;
  transition: transform 0.7s var(--ut), opacity 0.2s linear;
}

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

  .manad-markor,
  .knapp {
    transition: none;
  }
}

/* --- Mobil och surfplatta: skriv alltid mobilregler sist --- */

@media (max-width: 1000px) {
  .forsida-rutnat {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s7);
  }

  /* När påsen hamnar under texten står allt på samma mittlinje */
  .erbjudande {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .handlingar {
    justify-content: center;
  }

  .knapp-stor {
    align-items: center;
  }

  .pase {
    max-width: 400px;
  }

  .aret-huvud,
  .vilka-rutnat,
  .instruktion-rutnat {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }

  .portratt-rutnat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manad-utlasning {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 1.0625rem;
  }

  #forsida {
    padding-block: var(--s6) var(--s8);
  }

  #aret,
  #vilka,
  #fore-efter,
  .gron-band {
    padding-block: var(--s7);
  }

  .fe-rutnat {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Telefon: hela året får plats i bredd. Varje syssla står på egen rad ovanför sin stapel,
     och tabellen läggs ut som ett rutnät (rollerna i HTML:en behåller tabellsemantiken). */
  .kalender-rullning {
    --etikett: 0px;
    padding-top: var(--s2);
  }

  .kalender,
  .kalender thead,
  .kalender tbody {
    display: block;
  }

  .kalender tr {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .kalender thead th.hornet {
    display: none;
  }

  .kalender thead th {
    height: 2.75rem;
    font-size: 0.8rem;
    letter-spacing: 0;
  }

  .kalender tbody th {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--s3);
    padding: var(--s4) 0 var(--s2);
  }

  .syssla-namn {
    font-size: 1.35rem;
  }

  .syssla-tid {
    margin-top: 0;
  }

  .kalender td {
    height: 2.25rem;
  }

  .kalender tbody tr {
    border-bottom: 0;
  }

  .kalender tbody tr + tr th {
    border-top: 1px solid var(--linje);
  }

  .syssla-rad {
    display: none;
  }

  .nu-lapp {
    bottom: 0.1rem;
    font-size: 0.6rem;
  }

  /* Stora knappar för att bläddra månad, eftersom månadsrubrikerna blir för smala att träffa */
  .manad-steg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
    width: 100%;
  }

  .sidfot-rad {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidfot-lankar {
    justify-content: flex-start;
  }

  .kontakt-lista div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s1);
  }
}

@media (max-width: 640px) {
  .toppen-rad {
    gap: var(--s2);
  }

  #logga img {
    height: 30px;
  }

  #meny {
    position: static;
  }

  /* Mejla oss ligger i menyn på telefon; toppen visar bara loggan och menyknappen */
  .toppen-mejl {
    display: none;
  }

  #meny-knapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .meny-streck {
    display: grid;
    gap: 6px;
    width: 26px;
  }

  .meny-streck span {
    height: 2.5px;
    background: var(--svart);
    transition: transform 0.3s var(--ut), opacity 0.2s var(--ut);
  }

  #meny-knapp[aria-expanded="true"] .meny-streck span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
  }

  #meny-knapp[aria-expanded="true"] .meny-streck span:nth-child(2) {
    opacity: 0;
  }

  #meny-knapp[aria-expanded="true"] .meny-streck span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
  }

  /* Panelen rullas ner under toppen i stället för att bara dyka upp */
  #meny-lista {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: var(--s2) clamp(1rem, 4vw, 2.5rem) var(--s6);
    background: var(--papper);
    border-bottom: var(--tryck) solid var(--svart);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path 0.35s var(--ut), visibility 0s linear 0.35s;
  }

  #meny-lista.oppen {
    clip-path: inset(0 0 -2px 0);
    visibility: visible;
    transition: clip-path 0.4s var(--ut), visibility 0s;
  }

  #meny-lista a:not(.knapp):not(.meny-ring) {
    width: 100%;
    min-height: 60px;
    font-family: var(--typ-smal);
    font-weight: 800;
    font-size: 2rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--linje);
  }

  #meny-lista a[aria-current="page"] {
    text-decoration-thickness: 4px;
  }

  .meny-kontakt {
    display: grid;
    gap: var(--s3);
    margin-top: var(--s5);
  }

  #meny-lista .meny-kontakt .knapp {
    justify-content: center;
    min-height: 56px;
    font-family: var(--typ-smal);
    font-weight: 800;
    font-size: 1.5rem;
  }

  #meny-lista .meny-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .knapp-liten {
    padding-inline: var(--s3);
  }

  .handlingar .knapp-stor {
    width: 100%;
  }

  .pase-sort {
    font-size: 2.6rem;
  }

  .namn-lista,
  .zon-lista {
    justify-content: flex-start;
  }
}