/* =========================================================================
   Bellans Bilcenter – enkel version
   Ljus, platt och fyrkantig. Blå accent från logotypen i stället för orange,
   inga skuggor, inga rundade hörn att tala om. Medvetet olik den första
   versionen så att de går att jämföra sida vid sida.

   1. Tokens   2. Bas   3. Knappar & formulär   4. Sidhuvud   5. Sidfot
   6. Hero     7. Bilkort & rutnät              8. Startsidan
   9. Bilsidan 10. Kontakt  11. Hjälpklasser
   ========================================================================= */

/* ---------- 1. Tokens ----------
   Paletten är byggd ur logotypen: dess mörka marinblå och dess kungsblå.
   Bakgrunderna är ljusa men svagt blåtonade i stället för rent vita, så att
   sidan får djup utan att bli kall. Mässing används mycket sparsamt till
   etiketter och små detaljer och ger värmen. */
:root {
  --vit: #ffffff;
  --krem: #f7f9fc;
  --sand: #e9eff7;
  --grabg: var(--sand);
  --djup: #142338;

  --ink: #16202c;
  --brod: #4a5666;
  --dim: #5e6a78;
  --linje: #dde5ef;
  --linje-stark: #c2cedd;

  --bla: #2c5cb8;
  --bla-mork: #224a95;
  --bla-ljus: #e7eefb;
  --massing: #8d6124;
  --gron: #2f7a52;

  --max: 1120px;
  --kant: 24px;

  --radie: 3px;
  --font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --rubrik: 'Archivo', var(--font);
  --telikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h3.5l1.8 4.4-2.2 1.6a12 12 0 0 0 5.9 5.9l1.6-2.2L20 16.5V20a1 1 0 0 1-1.1 1A16.9 16.9 0 0 1 3 5.1 1 1 0 0 1 4 4z'/%3E%3C/svg%3E");
}

/* ---------- 2. Bas ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

/* Hoppar man till ett ankare ska rubriken inte hamna bakom sidhuvudet. */
[id] { scroll-margin-top: 96px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--brod);
  background: var(--krem);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--rubrik);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 700;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.15em; }
a { color: var(--bla); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; height: auto; }
ul { margin: 0 0 1.15em; padding-left: 1.2em; }
strong { color: var(--ink); }

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

.omslag { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--kant); }

.block { padding: clamp(56px, 8vw, 96px) 0; }
.block--tat { padding: clamp(40px, 5vw, 64px) 0; }
.block--gra { background: var(--sand); }
.block--mork { background: var(--djup); color: #b9c6d6; }
.block--mork h2 { color: #fff; }

.rubrikblock { max-width: 640px; margin-bottom: clamp(28px, 4vw, 44px); }
.rubrikblock--mitt { margin-inline: auto; text-align: center; }
.rubrikblock p { font-size: 1.05rem; margin-bottom: 0; }

.etikett {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--massing);
  margin-bottom: .8rem;
}

.hoppa { position: absolute; left: -9999px; }
.hoppa:focus { left: 12px; top: 12px; z-index: 99; background: var(--bla); color: #fff; padding: 12px 20px; }

/* ---------- 3. Knappar & formulär ---------- */
.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 14px 28px;
  border: 1px solid var(--bla);
  border-radius: var(--radie);
  background: var(--bla);
  color: #fff;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease;
}
.knapp:hover { background: var(--bla-mork); border-color: var(--bla-mork); color: #fff; text-decoration: none; }
.knapp--tom { background: transparent; color: var(--ink); border-color: var(--linje-stark); }
.knapp--tom:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.knapp--ljus { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.knapp--ljus:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.knapp--bred { width: 100%; }
.knapp--liten { padding: 10px 18px; font-size: .92rem; }
.knapp[disabled] { opacity: .45; cursor: not-allowed; }

.falt { margin-bottom: 18px; }
.falt label, .falt > span.namn {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.falt .tips { font-size: .84rem; color: var(--dim); margin: 6px 0 0; }

input[type='text'], input[type='tel'], input[type='email'], input[type='number'],
select, textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--linje-stark);
  border-radius: var(--radie);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2379828c' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
}
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bla); box-shadow: 0 0 0 3px var(--bla-ljus); }

.falt--fel input, .falt--fel textarea { border-color: #c0392b; }
.felrad { display: none; color: #c0392b; font-size: .84rem; font-weight: 600; margin-top: 6px; }
.falt--fel .felrad { display: block; }

.faltpar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 600px) { .faltpar { grid-template-columns: 1fr; } }

.klart {
  display: none;
  background: #eaf6ef;
  border: 1px solid #bfe2cd;
  border-left: 3px solid var(--gron);
  border-radius: var(--radie);
  padding: 18px 20px;
  color: #14603a;
  margin-bottom: 20px;
}
.klart strong { display: block; color: #0f4a2c; }
.klart.syns { display: block; }

/* ---------- 4. Sidhuvud ---------- */
/* Klistringen sitter på <header> och inte på .topp. En sticky-ruta kan bara
   fastna inom sin förälder, och .topp har en förälder som är exakt lika hög
   som den själv – då finns inget utrymme att fastna i och sidhuvudet följer
   med uppåt i stället för att ligga kvar. */
#topp {
  position: sticky;
  top: 0;
  z-index: 50;
}
.topp {
  background: var(--krem);
  border-bottom: 1px solid var(--linje);
}
.topp__inre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 78px;
}
.marke { display: flex; align-items: center; gap: 12px; }
.marke img { height: 30px; width: auto; }
.marke__namn {
  font-family: var(--rubrik);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.marke__ort { display: block; font-family: var(--font); font-size: .76rem; font-weight: 500; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; }

.meny { display: flex; align-items: center; gap: 28px; }
.meny a { color: var(--ink); font-weight: 600; font-size: 1rem; }
.meny a:hover { color: var(--bla); text-decoration: none; }
.meny a.har { color: var(--bla); }
.topp__tel { font-family: var(--rubrik); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.topp__tel:hover { color: var(--bla); text-decoration: none; }

.menyknapp {
  display: none;
  width: 46px; height: 44px;
  border: 1px solid var(--linje-stark);
  border-radius: var(--radie);
  background: #fff;
  cursor: pointer;
  position: relative;
  padding: 0;
}
.menyknapp span, .menyknapp span::before, .menyknapp span::after {
  content: ''; position: absolute; left: 50%; margin-left: -9px;
  width: 18px; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease;
}
.menyknapp span { top: 21px; }
.menyknapp span::before { margin-left: 0; left: 0; top: -6px; }
.menyknapp span::after { margin-left: 0; left: 0; top: 6px; }
.menyknapp[aria-expanded='true'] span { background: transparent; }
.menyknapp[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.menyknapp[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  .menyknapp { display: block; order: 2; }
  .marke img { height: 20px; }
  .marke__ort { display: none; }
  .topp__inre { min-height: 64px; }
  .meny {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--krem); border-bottom: 1px solid var(--linje);
    padding: 4px var(--kant) 16px;
  }
  .meny.oppen { display: flex; }
  .meny a { padding: 15px 0; border-bottom: 1px solid var(--linje); }
  .meny a:last-child { border-bottom: 0; }
  /* Numret får inte plats som text, men samtal är den viktigaste vägen in
     för en bilhandlare. Därför en kompakt ringknapp i stället för att dölja
     numret helt. */
  .topp__tel {
    font-size: 0;
    flex: none;
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--linje-stark);
    border-radius: var(--radie);
    margin-left: auto;
    margin-right: 10px;
    order: 1;        /* ringknappen före menyknappen */
  }
  .topp__tel::before {
    content: "";
    width: 19px; height: 19px;
    background: currentColor;
    -webkit-mask: var(--telikon) center / contain no-repeat;
    mask: var(--telikon) center / contain no-repeat;
  }
}

/* ---------- 5. Sidfot ---------- */
.fot { background: var(--djup); color: #9fb0c2; font-size: .97rem; }
.fot a { color: #d6e0ea; }
.fot a:hover { color: #fff; }
.fot h4 { color: #fff; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.2em; }
.fot__rutnat {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 44px;
  padding: clamp(48px, 6vw, 72px) 0 40px;
}
.fot__logga { width: 210px; margin-bottom: 20px; }
.fot__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fot__tider { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fot__tider li { display: flex; justify-content: space-between; gap: 14px; }
.fot__tider strong { color: #d6e0ea; font-weight: 600; }
.fot__notis { font-size: .88rem; margin: 14px 0 0; }
.fot__orgnr { font-size: .85rem; color: #7d8fa3; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
.fot__orgnr strong { color: #bccadb; font-weight: 600; }
.fot__botten {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 18px 0 26px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: .87rem; color: #7d8fa3;
}
@media (max-width: 820px) { .fot__rutnat { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px) { .fot__rutnat { grid-template-columns: 1fr; } }

/* ---------- 6. Hero ---------- */
.hero { position: relative; background: var(--djup); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: url('../assets/img/hero.svg');
  background-size: cover; background-position: center 60%;
  opacity: .72;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(72% 92% at 76% 38%, rgba(44, 92, 184, .32), transparent 62%),
    linear-gradient(95deg, rgba(20, 35, 56, .95) 12%, rgba(20, 35, 56, .72) 58%, rgba(20, 35, 56, .36) 100%);
}
.hero__inre {
  position: relative; z-index: 2;
  padding: clamp(72px, 11vw, 132px) 0;
  max-width: 620px;
}
.hero h1 { color: #fff; margin-bottom: .3em; }
.hero p { color: #cbd6e2; font-size: clamp(1.05rem, 1.7vw, 1.2rem); max-width: 44ch; }
.hero__knappar { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* tre korta löften direkt under hero */
.loften { background: var(--sand); border-bottom: 1px solid var(--linje); }
.loften__rad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 30px 0; }
.lofte { display: flex; gap: 12px; align-items: flex-start; }
.lofte svg { flex: none; margin-top: 3px; color: var(--bla); }
.lofte b { display: block; color: var(--ink); font-size: 1rem; }
.lofte span { font-size: .92rem; color: var(--dim); }
@media (max-width: 760px) { .loften__rad { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- 7. Bilkort & rutnät ---------- */
.bilrutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
@media (max-width: 560px) { .bilrutnat { grid-template-columns: 1fr; gap: 22px; } }

.bilkort {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  overflow: hidden;
  transition: border-color .15s ease;
}
.bilkort:hover { border-color: var(--bla); }
.bilkort__bild { aspect-ratio: 3 / 2; background: var(--grabg); overflow: hidden; position: relative; }
.bilkort__bild img { width: 100%; height: 100%; object-fit: cover; }
.bilkort__kropp { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.bilkort__marke { font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--massing); }
.bilkort__namn { font-family: var(--rubrik); font-size: 1.14rem; font-weight: 700; color: var(--ink); margin: 6px 0 10px; letter-spacing: -.01em; }
.bilkort__fakta { font-size: .94rem; color: var(--brod); margin: 0 0 18px; }
.bilkort__pris { font-family: var(--rubrik); font-weight: 700; color: var(--ink); font-size: 1.45rem; margin-top: auto; }
.bilkort__pris del { color: var(--dim); font-size: .92rem; font-weight: 500; display: block; text-decoration: line-through; }
.tacklank::after { content: ''; position: absolute; inset: 0; }

.sald {
  position: absolute; inset: 0;
  background: rgba(23, 41, 63, .6);
  display: grid; place-items: center;
}
.sald span {
  border: 2px solid #fff; color: #fff;
  font-family: var(--rubrik); font-weight: 700; letter-spacing: .2em;
  padding: 8px 18px; font-size: .88rem;
}

/* enkelt filter: bara märke och högsta pris */
.filterrad {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  padding-bottom: 26px; margin-bottom: 30px;
  border-bottom: 1px solid var(--linje);
}
.filterrad .falt { margin: 0; min-width: 190px; }
.filterrad__antal { margin-left: auto; font-size: .95rem; color: var(--dim); }
.filterrad__antal b { color: var(--ink); }
@media (max-width: 600px) {
  .filterrad .falt { flex: 1 1 100%; }
  .filterrad__antal { margin-left: 0; }
}

.tomt { text-align: center; padding: 56px 24px; border: 1px dashed var(--linje-stark); border-radius: var(--radie); }

/* ---------- 8. Startsidan ---------- */
.omoss { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 64px); align-items: center; }
@media (max-width: 860px) { .omoss { grid-template-columns: 1fr; } }
.omoss img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radie); }

/* finansiering och försäkring – mörkt band */
.tjanster { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.tjanster h2 { margin-bottom: 0; }
.tjanster .etikett { color: #c99a4e; }
.tjanster__par { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.tjanst h3 { color: #fff; font-size: 1.05rem; margin-bottom: .35em; }
.tjanst p { margin: 0; font-size: .97rem; }
@media (max-width: 860px) {
  .tjanster { grid-template-columns: 1fr; gap: 24px; }
  .tjanster__par { grid-template-columns: 1fr; gap: 22px; }
}

.kontaktband { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 56px); align-items: start; }
@media (max-width: 860px) { .kontaktband { grid-template-columns: 1fr; } }

.uppgifter { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; }
.uppgifter li { display: flex; gap: 13px; align-items: flex-start; }
.uppgifter svg { flex: none; margin-top: 4px; color: var(--bla); }
.uppgifter b { display: block; color: var(--ink); font-size: .84rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.uppgifter span, .uppgifter a { font-size: 1.02rem; }

.tidtabell { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tidtabell td { padding: 10px 0; border-bottom: 1px solid var(--linje); }
.tidtabell td:last-child { text-align: right; font-weight: 600; color: var(--ink); }
.tidtabell tr:last-child td { border-bottom: 0; }
.tidnotis { font-size: .92rem; color: var(--dim); margin: 14px 0 0; }

.karta { border: 1px solid var(--linje); border-radius: var(--radie); overflow: hidden; }
.karta iframe { display: block; width: 100%; height: clamp(280px, 34vw, 380px); border: 0; }
.kartknappar { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- 9. Bilsidan ---------- */
.bilsida { padding: clamp(28px, 4vw, 44px) 0 clamp(56px, 8vw, 88px); }
.tillbaka { display: inline-flex; align-items: center; gap: 7px; font-size: .95rem; font-weight: 600; margin-bottom: 22px; }

.bilsida__rutnat { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 44px; align-items: start; }
@media (max-width: 940px) { .bilsida__rutnat { grid-template-columns: 1fr; gap: 30px; } }

.galleri__stor { position: relative; aspect-ratio: 3 / 2; background: var(--grabg); border: 1px solid var(--linje); border-radius: var(--radie); overflow: hidden; }
.galleri__stor img { width: 100%; height: 100%; object-fit: cover; }
.galleri__pil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 1px solid var(--linje);
  background: rgba(255, 255, 255, .94); cursor: pointer;
  display: grid; place-items: center; color: var(--ink); border-radius: var(--radie);
}
.galleri__pil:hover { background: #fff; border-color: var(--ink); }
.galleri__pil--bak { left: 12px; }
.galleri__pil--fram { right: 12px; }
.galleri__raknare { position: absolute; right: 12px; bottom: 12px; background: rgba(23, 41, 63, .82); color: #fff; font-size: .82rem; font-weight: 600; padding: 4px 11px; border-radius: var(--radie); }
.galleri__mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.galleri__mini button {
  padding: 0; border: 1px solid var(--linje); background: var(--grabg);
  aspect-ratio: 3 / 2; overflow: hidden; cursor: pointer; border-radius: var(--radie);
}
.galleri__mini img { width: 100%; height: 100%; object-fit: cover; }
.galleri__mini button.vald { border-color: var(--bla); border-width: 2px; }

.prisruta { border: 1px solid var(--linje); border-radius: var(--radie); padding: 26px; background: #fff; }
.prisruta__pris { font-family: var(--rubrik); font-weight: 700; font-size: 2.3rem; color: var(--ink); line-height: 1.1; }
.prisruta__ord { display: block; font-size: .95rem; color: var(--dim); text-decoration: line-through; font-weight: 500; }
.prisruta__spar { display: inline-block; margin-top: 8px; background: #eaf6ef; color: #14603a; font-size: .85rem; font-weight: 600; padding: 3px 11px; border-radius: var(--radie); }
.prisruta__knappar { display: grid; gap: 10px; margin-top: 22px; }
.prisruta__kontakt { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linje); display: grid; gap: 10px; font-size: .97rem; }
.prisruta__kontakt a { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.prisruta__kontakt svg { color: var(--bla); flex: none; }

.spec { width: 100%; border-collapse: collapse; font-size: 1rem; }
.spec th, .spec td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--linje); }
.spec th { font-weight: 500; color: var(--dim); width: 48%; }
.spec td { color: var(--ink); font-weight: 600; }
.speckolumner { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
@media (max-width: 680px) { .speckolumner { grid-template-columns: 1fr; } }

.avsnitt { margin-bottom: 36px; }
.avsnitt h2 { font-size: 1.4rem; margin-bottom: .6em; }

.utrustning { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 28px; }
.utrustning li { display: flex; gap: 10px; align-items: flex-start; font-size: .98rem; }
.utrustning svg { flex: none; margin-top: 4px; color: var(--gron); }
@media (max-width: 600px) { .utrustning { grid-template-columns: 1fr; } }

.formruta { background: var(--grabg); border: 1px solid var(--linje); border-radius: var(--radie); padding: 28px; }

/* ---------- 10. Kontakt ---------- */
.kontaktsida { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 56px); align-items: start; }
@media (max-width: 860px) { .kontaktsida { grid-template-columns: 1fr; } }
.ruta { border: 1px solid var(--linje); border-radius: var(--radie); padding: 26px; margin-bottom: 22px; }
.ruta h3 { font-size: 1.1rem; }
.ruta:last-child { margin-bottom: 0; }

.sidtopp { background: var(--grabg); border-bottom: 1px solid var(--linje); padding: clamp(36px, 5vw, 56px) 0; }
.sidtopp h1 { margin-bottom: .25em; }
.sidtopp p { max-width: 60ch; margin: 0; font-size: 1.05rem; }
.smulor { font-size: .9rem; color: var(--dim); margin-bottom: 12px; }

/* ---------- 11. Hjälpklasser ---------- */
.mitt { text-align: center; }
.ingen-marg { margin-bottom: 0; }
.topp-marg { margin-top: 26px; }
.dold {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* felmeddelande när formuläret inte kunde skickas */
.skickfel {
  background: #fdecea;
  border: 1px solid #f3c2bd;
  border-left: 3px solid #b3261e;
  border-radius: var(--radie);
  padding: 13px 16px;
  margin: 0 0 18px;
  color: #8c1d18;
  font-size: .95rem;
}

/* integritetspolicy */
.policy { max-width: 68ch; }
.policy h2 { font-size: 1.3rem; margin-top: 1.8em; }
.policy h2:first-child { margin-top: 0; }
.policy ul { margin-bottom: 1.15em; }
.policy li { margin-bottom: .4em; }
.policy__datum { margin-top: 2.5em; padding-top: 1.2em; border-top: 1px solid var(--linje); font-size: .92rem; color: var(--dim); }

/* kartan laddas vid klick – knappen som visas innan Google kontaktas */
.kartstart {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--sand);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
}
.kartstart img {
  width: 100%;
  height: clamp(280px, 34vw, 380px);
  object-fit: cover;
  opacity: .5;
  filter: grayscale(.4);
}
.kartstart__ruta {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, calc(100% - 36px));
  background: var(--vit);
  border: 1px solid var(--linje-stark);
  border-radius: var(--radie);
  padding: 18px 20px;
  display: block;
}
.kartstart__rubrik {
  display: block;
  font-family: var(--rubrik);
  font-weight: 700;
  color: var(--bla);
  font-size: 1.05rem;
  margin-bottom: 5px;
}
.kartstart__text { display: block; font-size: .89rem; color: var(--brod); line-height: 1.5; }
.kartstart:hover .kartstart__ruta { border-color: var(--bla); }
.kartstart:hover img { opacity: .62; }

/* samtyckesrad under formulären */
.policyrad { font-size: .88rem; color: var(--dim); margin: 14px 0 0; }

/* ---------- omdömen ---------- */
.omdomesrad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.omdome {
  margin: 0;
  background: var(--vit);
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.omdome__stjarnor { color: var(--massing); font-size: 1rem; letter-spacing: 2px; line-height: 1; }
.omdome blockquote {
  margin: 0;
  font-size: .98rem;
  color: var(--brod);
  line-height: 1.6;
}
.omdome blockquote::before { content: '\201D'; }
.omdome blockquote::after { content: '\201D'; }
.omdome figcaption {
  margin-top: auto;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
}
.omdome figcaption span {
  display: block;
  font-weight: 500;
  color: var(--dim);
}
/* Marginalen sitter på länken, inte på behållaren. Den dolda länken är
   fortfarande ett barn, så :empty hade aldrig slagit till och gett ett
   tomt mellanrum när knappen är avstängd. */
.omdomesfot { display: flex; }
.omdomesfot .knapp { margin-top: 28px; }
/* en ensam tjänstruta ska inte lämna en tom spalt bredvid sig */
.tjanster__par--en { grid-template-columns: 1fr; }

/* ---------- helskärmsvisning av bilbilder ---------- */
.helskarm {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 16, 24, .94);
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 48px);
}
.helskarm[hidden] { display: none; }
.helskarm img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
}
body.har-helskarm { overflow: hidden; }

.helskarm__stang,
.helskarm__pil {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(20, 35, 56, .72);
  color: #fff;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
}
.helskarm__stang:hover,
.helskarm__pil:hover { background: rgba(44, 92, 184, .9); border-color: transparent; }
.helskarm__stang { top: clamp(10px, 3vw, 26px); right: clamp(10px, 3vw, 26px); }
.helskarm__pil--bak  { left: clamp(8px, 2.5vw, 26px); top: 50%; transform: translateY(-50%); }
.helskarm__pil--fram { right: clamp(8px, 2.5vw, 26px); top: 50%; transform: translateY(-50%); }
.helskarm__raknare {
  position: absolute;
  bottom: clamp(12px, 3vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 35, 56, .78);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
}
.helskarm :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }