/* ==========================================================================
   Kungälvs Sotarna AB — stilmall
   Färger hämtade ur logotypen: tegelrött, sot och kalkputs.
   Alla färger, typsnitt och mått ligger som variabler här överst.
   ========================================================================== */

:root {
  --sot: #1c1a18;
  --sot-2: #2a2724;
  --tegel: #b02e26;
  --tegel-mork: #8a221c;
  --tegel-ljus: #f6e4df;
  --kalk: #f6f2ec;
  --sten: #ebe4d9;
  --linje: #dcd3c6;
  --text: #23201d;
  --dampad: #5f5850;
  --pa-morkt: #e8e2da;
  --pa-morkt-dampad: #b9b0a4;
  --vit: #fff;

  --skal: 1160px;
  --radie: 4px;
  --skugga: 0 1px 2px rgba(28, 26, 24, .06), 0 10px 28px rgba(28, 26, 24, .08);
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Tegelmönstret från logotypens ram. Rutan är 56 × 20 px = två skift tegel. */
  --tegelmonster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='20'%3E%3Crect width='56' height='20' fill='%23b02e26'/%3E%3Cg fill='none' stroke='%23f6f2ec' stroke-width='2'%3E%3Cpath d='M0 1h56M0 11h56M14 1v10M42 1v10M0 11v9M28 11v9M56 11v9'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Grund ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--vit);
}

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

a { color: var(--tegel-mork); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--tegel); }

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

[id] { scroll-margin-top: 6.5rem; }

h1, h2, h3 {
  margin: 0 0 .5em;
  color: var(--sot);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.08;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.4rem); }
h3 { font-size: 1.2rem; font-stretch: 105%; }

p { margin: 0 0 1em; }

figure { margin: 0; }

.skal { width: min(100% - 2.5rem, var(--skal)); margin-inline: auto; }

.hoppa {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .6rem 1rem; background: var(--sot); color: #fff;
}
.hoppa:focus { top: 1rem; }

.etikett {
  display: inline-block;
  margin: 0 0 .8rem;
  color: var(--tegel);
  font-size: .8rem;
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ingress {
  max-width: 40em;
  color: var(--dampad);
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  line-height: 1.55;
}

.tegelband { height: 20px; background: var(--tegelmonster) repeat-x; background-size: 56px 20px; }

.pil { text-decoration: none; font-weight: 700; }
.pil::after { content: " →"; }
.pil:hover { text-decoration: underline; }

/* ---------- Knappar ---------- */

.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.25rem;
  border: 2px solid var(--tegel);
  border-radius: var(--radie);
  background: var(--tegel);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  font-stretch: 95%;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.knapp:hover { background: var(--tegel-mork); border-color: var(--tegel-mork); color: #fff; }

.knapp--kontur { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.knapp--kontur:hover { background: #fff; border-color: #fff; color: var(--sot); }

.knapp--bred { width: 100%; }

.ikon { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- Topplist och sidhuvud ---------- */

.toppremsa { background: var(--sot); color: var(--pa-morkt-dampad); font-size: .875rem; }
.toppremsa__inre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding-block: .45rem; }
.toppremsa a { color: #fff; text-decoration: none; }
.toppremsa a:hover { text-decoration: underline; }
.toppremsa__kontakt { display: flex; flex-wrap: wrap; gap: .25rem .7rem; }
.toppremsa__kontakt span { color: #6d655c; }

.sidhuvud { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--linje); }
.sidhuvud__inre { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .55rem; }

.varumarke { flex: none; }
.varumarke img { width: auto; height: 68px; }

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav__lista { display: flex; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.nav__lista a {
  padding: .4rem 0;
  border-bottom: 3px solid transparent;
  color: var(--sot);
  font-weight: 600;
  font-stretch: 95%;
  text-decoration: none;
}
.nav__lista a:hover { border-bottom-color: var(--linje); }
.nav__lista a[aria-current="page"] { border-bottom-color: var(--tegel); }

.menyknapp { display: none; }

@media (max-width: 860px) {
  .varumarke img { height: 52px; }
  .toppremsa__tid { display: none; }

  /* Utan JavaScript ligger menyn synlig under logotypen. */
  .sidhuvud__inre { flex-wrap: wrap; }
  .nav { flex-wrap: wrap; gap: .75rem 1.25rem; }
  .nav__lista { flex-wrap: wrap; gap: .25rem 1.25rem; }

  .js .menyknapp {
    display: inline-flex; align-items: center; gap: .65rem;
    padding: .55rem .85rem;
    border: 2px solid var(--sot);
    border-radius: var(--radie);
    background: #fff;
    color: var(--sot);
    font: inherit; font-weight: 700;
    cursor: pointer;
  }
  .menyknapp__streck, .menyknapp__streck::before, .menyknapp__streck::after {
    display: block; width: 18px; height: 2px; background: currentColor; position: relative;
  }
  .menyknapp__streck::before, .menyknapp__streck::after { content: ""; position: absolute; left: 0; }
  .menyknapp__streck::before { top: -6px; }
  .menyknapp__streck::after { top: 6px; }
  .is-open .menyknapp__streck { background: transparent; }
  .is-open .menyknapp__streck::before { top: 0; transform: rotate(45deg); }
  .is-open .menyknapp__streck::after { top: 0; transform: rotate(-45deg); }

  .js .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .25rem 1.25rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--linje);
    box-shadow: var(--skugga);
  }
  .js .sidhuvud.is-open .nav { display: flex; }
  .js .nav__lista { flex-direction: column; gap: 0; }
  .js .nav__lista a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--sten); }
  .js .nav__lista a[aria-current="page"] { color: var(--tegel); border-bottom-color: var(--sten); }
  .js .nav__ring { margin-top: 1rem; }
}

/* ---------- Hjältebild ---------- */

.hjalte { position: relative; isolation: isolate; overflow: hidden; background: var(--sot); color: #fff; }
.hjalte__bild { position: absolute; inset: 0; z-index: -2; }
.hjalte__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; }
.hjalte::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(22, 20, 18, .93) 0%, rgba(22, 20, 18, .8) 38%, rgba(22, 20, 18, .3) 72%, rgba(22, 20, 18, .08) 100%);
}
.hjalte__inre { padding-block: clamp(4rem, 10vw, 7.5rem) clamp(3.5rem, 8vw, 6rem); }
.hjalte__text { max-width: 37rem; }
.hjalte h1 { color: #fff; }
.hjalte .etikett { color: #f2b6ab; }
.hjalte .ingress { color: var(--pa-morkt); }
.hjalte__knappar { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }

.hjalte__fakta {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  margin: 2.6rem 0 0; padding: 0;
  list-style: none;
  color: var(--pa-morkt);
  font-size: .95rem;
}
.hjalte__fakta li { display: flex; align-items: center; gap: .55rem; }
.hjalte__fakta li::before { content: ""; flex: none; width: 14px; height: 7px; background: var(--tegel); }

.hjalte__foto { position: absolute; right: 1rem; bottom: .5rem; margin: 0; color: rgba(255, 255, 255, .7); font-size: .72rem; }

@media (max-width: 700px) {
  .hjalte::before { background: linear-gradient(180deg, rgba(22, 20, 18, .72), rgba(22, 20, 18, .9)); }
}

/* ---------- Sektioner ---------- */

.sektion { padding-block: clamp(3.5rem, 8vw, 6rem); }
.sektion--kalk { background: var(--kalk); }
.sektion--tunn { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.sektion--sot { background: var(--sot); color: var(--pa-morkt); }
.sektion--sot h2, .sektion--sot h3 { color: #fff; }
.sektion--sot .etikett { color: #f2b6ab; }
.sektion--sot .ingress { color: #cfc6ba; }

.sektion__huvud { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ---------- Tjänster ---------- */

.tjanster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 900px) { .tjanster { grid-template-columns: 1fr; } }

.tjanst { overflow: hidden; background: #fff; border: 1px solid var(--linje); border-radius: var(--radie); }
.tjanst__topp { height: 10px; background: var(--tegelmonster); background-size: 28px 10px; }
.tjanst__inre { padding: 1.6rem 1.6rem 1.8rem; }
.tjanst__nr { margin: 0; color: var(--tegel); font-size: .8rem; font-weight: 700; font-stretch: 85%; letter-spacing: .14em; text-transform: uppercase; }
.tjanst h3 { margin: .3rem 0 1.2rem; font-size: 1.45rem; }
.tjanst dl { margin: 0; }
.tjanst dt { color: var(--sot); font-weight: 700; }
.tjanst dd { margin: .1rem 0 1rem; color: var(--dampad); font-size: .975rem; line-height: 1.55; }
.tjanst dd:last-child { margin-bottom: 0; }

/* ---------- Bild och text sida vid sida ---------- */

.delad { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 860px) { .delad { grid-template-columns: 1fr; } }

.bildram { position: relative; isolation: isolate; margin: 0 1.25rem 1.25rem 0; }
.bildram::after {
  content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; z-index: -1;
  background: var(--tegelmonster); background-size: 28px 10px;
  border-radius: var(--radie);
}
.bildram img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radie); }

.fakta { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 2rem; margin-top: 1.5rem; }
@media (max-width: 560px) { .fakta { grid-template-columns: 1fr; } }
.fakta h3 { margin-bottom: .35rem; }
.fakta p { color: var(--dampad); font-size: 1rem; }

.notis {
  margin: .5rem 0 1.5rem;
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--tegel);
  border-radius: 0 var(--radie) var(--radie) 0;
  background: var(--tegel-ljus);
}

/* ---------- Pristavlor ---------- */

.priser {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radie);
}
@media (max-width: 800px) { .priser { grid-template-columns: 1fr; } }

.pris { padding: 1.8rem 1.6rem; background: var(--sot); }
.pris__namn { margin: 0 0 .9rem; color: #fff; font-size: 1.1rem; font-weight: 700; font-stretch: 105%; }
.pris__belopp {
  margin: 0;
  color: #fff;
  font-size: clamp(2.3rem, 1.6rem + 2vw, 3.1rem);
  font-weight: 800;
  font-stretch: 112%;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pris__belopp small { margin-left: .25rem; font-size: 1rem; font-weight: 600; font-stretch: 100%; }
.pris__not { margin: .7rem 0 0; color: var(--pa-morkt-dampad); font-size: .92rem; line-height: 1.5; }

.priser__fot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.6rem; color: #cfc6ba; font-size: .95rem; }
.priser__fot p { margin: 0; max-width: 40rem; }

/* ---------- Samarbeten ---------- */

.partner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 800px) { .partner { grid-template-columns: 1fr; } }

.partner__kort {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.4rem 1.5rem;
  background: #fff;
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  color: var(--dampad);
  font-size: .975rem;
  line-height: 1.5;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.partner__kort:hover { border-color: #c4b9aa; box-shadow: var(--skugga); color: var(--dampad); }
.partner__kort strong { display: block; margin-bottom: .2rem; color: var(--sot); font-size: 1.05rem; }
.partner__logo { flex: none; width: 150px; height: auto; }
.partner__logo--kvadrat { width: 64px; }
@media (max-width: 480px) { .partner__kort { flex-direction: column; align-items: flex-start; } }

/* ---------- Kontakt ---------- */

.kontakt { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .kontakt { grid-template-columns: 1fr; } }

.uppgifter { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; margin-top: 2rem; }
@media (max-width: 480px) { .uppgifter { grid-template-columns: 1fr; } }
.uppgift--hel { grid-column: 1 / -1; }
.uppgift h2, .uppgift h3 { margin: 0 0 .3rem; color: var(--tegel); font-size: .8rem; font-weight: 700; font-stretch: 85%; letter-spacing: .14em; text-transform: uppercase; }
.uppgift p { margin: 0; }
.uppgift address { font-style: normal; }
.uppgift__stor {
  color: var(--sot);
  font-size: 1.45rem;
  font-weight: 800;
  font-stretch: 108%;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.uppgift__stor:hover { color: var(--tegel); }
.uppgift__liten { color: var(--dampad); font-size: .95rem; }

.mobiler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.mobiler li { padding: .75rem .95rem; background: #fff; border: 1px solid var(--linje); border-radius: var(--radie); }
.mobiler span { display: block; color: var(--sot); font-weight: 700; }
.mobiler a { font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.mobiler a:hover { text-decoration: underline; }

/* ---------- Formulär ---------- */

.formular {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: #fff;
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  box-shadow: var(--skugga);
}
.formular h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); margin-bottom: .35em; }
.formular > p { color: var(--dampad); }

.falt-rad { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .falt-rad { grid-template-columns: 1fr; } }

.falt { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.falt label { color: var(--sot); font-size: .95rem; font-weight: 600; }
.falt label .valfritt { color: var(--dampad); font-weight: 400; }
.krav { color: var(--tegel); }

.falt input, .falt textarea {
  width: 100%;
  padding: .7rem .8rem;
  background: #fff;
  border: 1.5px solid #c9bfb2;
  border-radius: var(--radie);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}
.falt input:focus, .falt textarea:focus { outline: none; border-color: var(--tegel); box-shadow: 0 0 0 3px rgba(176, 46, 38, .18); }
.falt textarea { min-height: 8rem; resize: vertical; }

.samtycke { display: flex; align-items: flex-start; gap: .65rem; margin: .4rem 0 1.4rem; font-size: .95rem; }
.samtycke input { flex: none; width: 1.15rem; height: 1.15rem; margin: .22rem 0 0; accent-color: var(--tegel); }

.formular__not { margin: 1rem 0 0; color: var(--dampad); font-size: .85rem; }
.formular__status { margin: 1rem 0 0; padding: .8rem 1rem; background: var(--kalk); border-radius: var(--radie); color: var(--sot); font-weight: 600; }
.formular__status:empty { display: none; }

/* ---------- Undersidor ---------- */

.sidrubrik { padding-block: clamp(2.6rem, 6vw, 4.5rem) clamp(2.4rem, 5vw, 3.8rem); background: var(--sot); color: var(--pa-morkt); }
.sidrubrik h1 { margin-bottom: .35em; color: #fff; }
.sidrubrik .ingress { color: #d3cabf; }

.brodsmulor { margin-bottom: 1.2rem; color: #a39a8f; font-size: .85rem; }
.brodsmulor ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.brodsmulor li + li::before { content: "/"; margin-right: .4rem; color: #6d655c; }
.brodsmulor a { color: #d3cabf; }

.innehall-rutnat { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
/* minmax(0, …) låter tabellerna rulla i sin ram i stället för att bredda kolumnen. */
@media (max-width: 960px) { .innehall-rutnat { grid-template-columns: minmax(0, 1fr); } }

.text { max-width: 46rem; }
.text h2 { margin-top: 2em; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 1.95rem); }
.text > h2:first-child { margin-top: 0; }
.text ul, .text ol { padding-left: 1.25rem; }
.text li { margin-bottom: .55rem; }
.text li::marker { color: var(--tegel); }

.sidokolumn { position: sticky; top: 7rem; display: grid; gap: 1.25rem; }
@media (max-width: 960px) { .sidokolumn { position: static; } }

.ruta { padding: 1.5rem; background: var(--kalk); border: 1px solid var(--linje); border-radius: var(--radie); }
.ruta h2 { margin-bottom: .5rem; font-size: 1.2rem; font-stretch: 105%; }
.ruta p { font-size: .975rem; }
.ruta > :last-child { margin-bottom: 0; }
.ruta--sot { background: var(--sot); border-color: var(--sot); color: var(--pa-morkt); }
.ruta--sot h2 { color: #fff; }
.ruta--sot a:not(.knapp) { color: #fff; }
.ruta img { margin-bottom: 1rem; }

.bild-rundad { border-radius: var(--radie); }

/* ---------- Taxetabeller ---------- */

.tabellram { overflow-x: auto; margin: 0 0 2rem; border: 1px solid var(--linje); border-radius: var(--radie); }
.taxa { width: 100%; min-width: 30rem; border-collapse: collapse; }
.taxa caption { padding: .95rem 1.1rem; background: var(--sot); color: #fff; font-size: 1.15rem; font-weight: 800; font-stretch: 108%; text-align: left; }
.taxa th, .taxa td { padding: .72rem 1.1rem; border-top: 1px solid var(--sten); text-align: left; vertical-align: top; }
.taxa thead th { border-top: 0; background: var(--kalk); color: var(--dampad); font-size: .76rem; font-weight: 700; font-stretch: 85%; letter-spacing: .12em; text-transform: uppercase; }
.taxa tbody th { font-weight: 500; }
.taxa .tal { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.taxa td.tal { color: var(--dampad); }
.taxa td.tal--exkl { color: var(--sot); font-weight: 700; }
.taxa__grupp th { background: var(--tegel-ljus); color: var(--tegel-mork); font-size: .95rem; font-weight: 700 !important; }
.taxa__not { margin: -1.2rem 0 2rem; color: var(--dampad); font-size: .95rem; }

/* På smala skärmar ska alla tre kolumnerna synas utan sidledsrullning. */
@media (max-width: 560px) {
  .taxa { min-width: 0; font-size: .95rem; }
  .taxa caption { padding: .85rem .8rem; font-size: 1.05rem; }
  .taxa th, .taxa td { padding: .65rem .8rem; }
  .taxa th + th, .taxa td { padding-left: .4rem; }
  .taxa thead th { letter-spacing: .06em; }
}

.bestammelser { counter-reset: punkt; margin: 0; padding: 0; list-style: none; }
.text .bestammelser li { position: relative; margin: 0; padding: .9rem 0 .9rem 2.8rem; border-top: 1px solid var(--sten); }
.bestammelser li::before {
  counter-increment: punkt;
  content: counter(punkt);
  position: absolute; left: 0; top: .95rem;
  display: grid; place-items: center;
  width: 1.8rem; height: 1.8rem;
  background: var(--sot); color: #fff;
  border-radius: 50%;
  font-size: .85rem; font-weight: 700;
}

/* ---------- Sidfot ---------- */

.sidfot { background: var(--sot); color: #c9c1b6; font-size: .95rem; }
.sidfot a { color: #fff; text-decoration: none; }
.sidfot a:hover { text-decoration: underline; }

.sidfot__rutnat { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 2rem; padding-block: 3.5rem 2.5rem; }
@media (max-width: 900px) { .sidfot__rutnat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sidfot__rutnat { grid-template-columns: 1fr; } }

.sidfot__namn { margin: 0 0 .6rem; color: #fff; font-size: 1.25rem; font-weight: 800; font-stretch: 110%; }
.sidfot address { margin-bottom: .8rem; font-style: normal; }
.sidfot p { margin: 0 0 .8rem; }
.sidfot__rubrik { margin: 0 0 .9rem; color: #a39a8f; font-size: .78rem; font-weight: 700; font-stretch: 85%; letter-spacing: .14em; text-transform: uppercase; }
.sidfot ul { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.sidfot__ssr { display: inline-block; margin-top: .3rem; padding: .35rem; background: #fff; border-radius: var(--radie); }
.sidfot__ssr img { width: 60px; height: 60px; }

.sidfot__botten {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  padding-block: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: #91887d;
  font-size: .85rem;
}

/* ---------- Felsida ---------- */

.felsida { padding-block: clamp(4rem, 12vw, 8rem); text-align: center; }
.felsida .ingress { margin-inline: auto; }
.felsida__kod { margin: 0; color: var(--tegel); font-size: clamp(4rem, 3rem + 6vw, 7rem); font-weight: 800; font-stretch: 125%; line-height: 1; }
.felsida__knappar { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }
.felsida .knapp--kontur { border-color: var(--sot); color: var(--sot); }
.felsida .knapp--kontur:hover { background: var(--sot); color: #fff; }

/* ---------- Tillgänglighet och utskrift ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

@media print {
  .toppremsa, .menyknapp, .nav, .hjalte__knappar, .formular, .tegelband, .hoppa { display: none !important; }
  .sidhuvud { position: static; }
  .hjalte, .sektion--sot, .sidrubrik, .sidfot { background: none; color: #000; }
  .hjalte h1, .sektion--sot h2, .sidrubrik h1, .pris, .pris__belopp, .pris__namn { color: #000; background: none; }
  .hjalte__bild, .hjalte::before { display: none; }
  .sidokolumn { position: static; }
  a { color: #000; }
}