/* Landvetter Halkbana – all CSS i en fil. Design: variant 1 (foto-hero) + variant 4:s kurskort.
   Palett ur logotypen (#436fb6 uppmätt i logo-512.png). Kontrast mätt med WCAG-formeln 2026-09-04:
     vit på --blue        5,01:1  godkänd brödtext        (knappar, hero-pill)
     vit på --navy       14,66:1                          (mörka ytor, kortknappar)
     --navy på vitt      14,66:1  / på --sky 13,16:1      (rubriker)
     --ink på vitt       15,49:1  / på --sky 13,90:1      (brödtext)
     --muted på vitt      6,95:1  / på --sky  6,24:1      (sekundär text)
     --blue-dark på vitt  7,47:1  / på --ice  5,98:1      (länkar, pills)
     --blue på vitt       5,01:1                          (ikoner, bockar, länkfärg)
     --orange på vitt     4,95:1                          (pris i kort)
     --navy på --orange-bg 4,82:1                         (tagg "Populärast")
   Använd inga andra par för text utan att mäta först. */

:root {
  --blue: #436fb6;
  --blue-dark: #2f5493;
  --navy: #14284a;
  --ink: #1b2438;
  --muted: #4d5a72;
  --ice: #dce7f7;
  --sky: #eef3fb;
  --line: #d9e1ee;
  --white: #fff;
  --orange: #b5540c;
  --orange-bg: #e8731e;
  --star: #f5b301;
  --focus: #0b57d0;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 12px 30px rgba(20, 40, 74, 0.14);
  --container: 1160px;
  --header-h: 72px;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
/* blockquote saknades här till 2026-09-07 och behöll webbläsarens margin: 1em 40px, vilket gjorde
   omdömeskorten 80 px smalare än sin spalt – i 375 px blev citatet 143 px brett och tio rader långt. */
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; }
a { color: var(--blue-dark); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; }
strong { font-weight: 700; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

/* Typografi */
h1, h2, h3, h4 { color: var(--navy); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h2 { font-size: clamp(1.55rem, 2.7vw, 2.15rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
.lead { font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.55; }
.muted { color: var(--muted); }
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
/* Rubrik först i ett .prose-block som självt står först i sin förälder: sektionens padding ger avståndet, 2em blev
   69 px död yta (14 block, uppmätt 2026-09-18, användaren: "stor tom yta" på hitta hit). Står blocket efter ett
   syskon (/priser/, /en/prices/, /riskutbildning/) är marginalen det som skiljer dem åt och ska vara kvar, därför
   :first-child på .prose och inte en nollning av alla .prose > :first-child (den klistrade ihop dem 2026-09-07). */
.prose:first-child > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose a { font-weight: 600; }
.faktaruta {
  background: var(--sky);
  border-left: 5px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px;
  margin: 1.4em 0;
}
.faktaruta p + p { margin-top: 0.5em; }
.faktaruta strong { color: var(--navy); }

/* Layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.section { padding-block: clamp(48px, 7vw, 80px); }
.section--sky { background: var(--sky); }
.section--navy { background: var(--navy); color: var(--white); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section-head { max-width: 720px; margin-bottom: clamp(24px, 3vw, 36px); }
.section-head p { margin-top: 10px; color: var(--muted); text-wrap: pretty; }
.lead, .kort p, .steg p, .varfor p { text-wrap: pretty; } /* inga ensamma ord på sista raden (användaren 2026-09-05: "mejl." på egen rad) */
/* Inga ensamma ord på sista raden (global regel 2026-09-17): pretty räcker inte, den släpper igenom två ord.
   Korta block får balance (Chrome balanserar bara ≤ 6 rader, längre bryts som vanligt), löptext pretty.
   Mätt med headless Chrome i 1280 + 390 px över alla sidor 2026-09-18. Prose-raden först så att
   .offert-text p (som också är .prose) får balance. */
.prose p, .prose li { text-wrap: pretty; }
.lead, .kort p, .steg p, .varfor p, .faq summary, .faq .svar, .hero-fakta span, .ingar-lista span,
.fb-a__rad small, .form small, .offert-text p, .kort__form, .boka-ruta__not, .omdomen__antal,
.forfattare p, .kort li, .bana__rad span, .kontakt-stor { text-wrap: balance; }
/* Löptext i övrigt: main.js avsnitt 9 byter korta stycken (2–6 rader) till balance när sista raden ändå blir kort. */
.section--navy .section-head p { color: rgba(255, 255, 255, 0.85); }
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* Skip-länk */
.skip { position: absolute; left: 12px; top: -60px; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 200; font-weight: 700; }
.skip:hover { color: #fff; } /* a:hover (navy) vann annars: navy på navy, hittat av Impeccables detektor 2026-09-18 */
.skip:focus { top: 12px; }

/* Knappar */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 12px; font-weight: 700; font-size: 1rem; line-height: 1.15;
  text-decoration: none; border: 2px solid transparent; cursor: pointer; text-align: center;
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-dark); color: #fff; }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: #0d1b33; color: #fff; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn--light { background: #fff; color: var(--blue-dark); border-color: var(--ice); }
.btn--light:hover { border-color: var(--blue); color: var(--navy); }
.btn--sm { padding: 10px 16px; font-size: 0.95rem; border-radius: 10px; }
.btn--lg { padding: 16px 28px; font-size: 1.08rem; }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }

.pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 0.86rem; font-weight: 700; }
.pill--light { background: rgba(255, 255, 255, 0.16); color: #fff; }
.pill--ice { background: var(--ice); color: var(--blue-dark); }
.stars { color: var(--star); letter-spacing: 1px; font-size: 0.95em; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); font-weight: 800; letter-spacing: -0.01em; font-size: 1.05rem; }
.brand img { width: 44px; height: 44px; border-radius: 50%; }
.nav { display: flex; align-items: center; gap: 4px; }
.header-cta { display: flex; align-items: center; gap: 10px; }
.menu { display: none; }
/* Mobilheader (under 960 px, där megamenyn ersätts): bara den runda logotypen, Boka kurs och en menyknapp.
   Brandtext och flagga krockade i 375–430 px (användarens skärmdump 2026-09-05); språkbytet ligger i menyn. */
@media (max-width: 960px) {
  /* backdrop-filter gör headern till containing block för position: fixed, så arket hamnade ovanför skärmen (mätt top -486). */
  .site-header { backdrop-filter: none; background: #fff; }
  .nav, .header-cta .btn--portal, .header-cta .lang-switch, .brand span { display: none; }
  .brand img { width: 44px; height: 44px; }
  .menu { display: block; }
  .menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--ice); color: var(--navy); background: #fff; position: relative; z-index: 130; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary:hover { background: var(--sky); }
  .menu__ikon--stang, .menu[open] .menu__ikon--oppna { display: none; }
  .menu[open] .menu__ikon--stang { display: block; }
  .menu[open] summary { background: var(--sky); }

  /* Bottenark (variant C, vald av användaren 2026-09-05) */
  .menu__bakgrund { position: fixed; inset: 0; background: rgba(20, 40, 74, 0.55); z-index: 110; }
  .menu__ark { position: fixed; left: 0; right: 0; bottom: 0; max-height: 88dvh; max-width: 560px; margin: 0 auto; background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.25); z-index: 120; display: flex; flex-direction: column; }
  .menu__handtag { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 10px auto 0; flex: none; }
  .menu__topp { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 0; flex: none; }
  .menu__topp strong { font-size: 1.15rem; font-weight: 800; color: var(--navy); }
  .menu__stang { display: none; width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--ice); background: #fff; color: var(--navy); cursor: pointer; align-items: center; justify-content: center; }
  html.js .menu__stang { display: inline-flex; }
  .menu__inner { padding: 12px 18px 14px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
  .menu__kort { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .menu__kort--en { grid-template-columns: 1fr; }
  .menu__kort > div { background: var(--sky); border-radius: 14px; padding: 14px 14px 8px; }
  .menu__kh { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--navy); font-size: 1rem; margin-bottom: 6px; }
  .menu__kh svg { width: 22px; height: 22px; color: var(--blue); flex: none; }
  .menu__kort a { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.92rem; padding: 9px 0; border-top: 1px solid rgba(20, 40, 74, 0.08); }
  .menu__kort a small { color: var(--muted); font-weight: 700; font-size: 0.82rem; white-space: nowrap; }
  .menu__kort a[aria-current="page"] { color: var(--blue); }
  .menu__brickor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
  .menu__brickor a { text-decoration: none; color: var(--navy); font-weight: 700; font-size: 0.84rem; text-align: center; padding: 12px 6px 10px; border: 1.5px solid var(--line); border-radius: 12px; display: grid; gap: 6px; justify-items: center; min-height: 44px; }
  .menu__brickor a[aria-current="page"] { border-color: var(--blue); color: var(--blue); }
  .menu__brickor svg { width: 22px; height: 22px; color: var(--blue); }
  .menu__fot { padding: 12px 18px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 10px; border-top: 1px solid var(--line); flex: none; }
  .menu__fot .btn { width: 100%; }
  .menu__rad2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .btn--sky { background: var(--sky); color: var(--navy); }
  .btn--sky:hover { background: var(--ice); color: var(--navy); }
  .btn--lg { padding: 15px 18px; font-size: 1.05rem; border-radius: 12px; }
  @media (prefers-reduced-motion: no-preference) {
    .menu[open] .menu__ark { animation: menu-upp 0.22s ease-out; }
    .menu[open] .menu__bakgrund { animation: menu-tona 0.22s ease-out; }
  }
}
@keyframes menu-upp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes menu-tona { from { opacity: 0; } to { opacity: 1; } }
/* Kort skärm på höjden (liggande telefon): korten får rulla i arket */
@media (max-width: 960px) and (max-height: 520px) { .menu__ark { max-height: 100dvh; border-radius: 0; } }

/* Hero (variant 1) */
.hero { position: relative; overflow: hidden; color: #fff; background: var(--navy); }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 40, 74, 0.93) 0%, rgba(20, 40, 74, 0.78) 42%, rgba(20, 40, 74, 0.3) 100%); }
.hero__in { position: relative; padding-block: clamp(56px, 8vw, 96px) clamp(48px, 6vw, 72px); max-width: 660px; }
.hero h1 { color: #fff; margin-top: 14px; }
.hero .lead { margin-top: 14px; max-width: 560px; color: rgba(255, 255, 255, 0.95); }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero__trust { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 24px; font-size: 0.95rem; font-weight: 600; }
.hero__trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero__trust svg { width: 18px; height: 18px; }
@media (max-width: 700px) {
  .hero__bg::after { background: linear-gradient(180deg, rgba(20, 40, 74, 0.6) 0%, rgba(20, 40, 74, 0.9) 70%); }
  .hero__bg img { object-position: center 30%; }
}

/* Sidhuvud för undersidor */
.page-head { background: var(--sky); padding-block: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 44px); }
.page-head .lead { margin-top: 12px; max-width: 720px; color: var(--muted); }
.page-head--kurs { background: var(--sky); }
.page-head__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .page-head__grid { grid-template-columns: minmax(0, 1fr); } }

/* Brödsmulor */
.crumbs { font-size: 0.9rem; color: var(--muted); margin-bottom: 14px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--muted); }
.crumbs a { color: var(--blue-dark); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }

/* Bokningsruta på kurssidor */
.boka-ruta { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; border: 1px solid var(--line); }
.boka-ruta__pris { font-size: 2rem; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; line-height: 1.1; }
.boka-ruta__pris small { display: block; font-size: 0.9rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-top: 4px; }
.boka-ruta dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 16px 0 18px; font-size: 0.95rem; }
.boka-ruta dt { color: var(--muted); font-weight: 600; }
.boka-ruta dd { margin: 0; color: var(--navy); font-weight: 600; }
.boka-ruta .btn { margin-top: 4px; }
.boka-ruta__not { margin-top: 12px; font-size: 0.86rem; color: var(--muted); }

/* Fordonsval: tydligt klickbar växlare (användarens önskemål 2026-09-04) */
.fordonsval { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 22px; }
.fordonsval__label { font-weight: 800; color: var(--navy); }
.segment { display: inline-flex; padding: 5px; background: #fff; border: 2px solid var(--ice); border-radius: 999px; gap: 4px; }
.segment__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; border: 2px solid transparent;
  background: transparent; color: var(--blue-dark); font-weight: 800; font-size: 1rem; cursor: pointer; min-width: 110px; justify-content: center;
}
.segment__btn svg { width: 22px; height: 22px; }
.segment__btn:hover { background: var(--sky); color: var(--navy); }
.segment__btn[aria-selected="true"] { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(67, 111, 182, 0.35); }
.segment__btn[aria-selected="true"]:hover { background: var(--blue-dark); }
.fordonsval__hint { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.92rem; font-weight: 600; }
.fordonsval__hint svg { width: 18px; height: 18px; color: var(--blue); }
.panel-rubrik { font-size: 1.1rem; color: var(--muted); font-weight: 700; margin-bottom: 14px; }
.js .panel-rubrik { display: none; }

/* Kurskort (variant 4) */
.kort { position: relative; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.kort--tagg { border-color: var(--blue); }
.kort__tagg { position: absolute; top: -12px; left: 18px; background: var(--orange-bg); color: var(--navy); font-weight: 800; font-size: 0.8rem; padding: 4px 10px; border-radius: 999px; }
.kort h3 { color: var(--navy); }
.kort h3 a { color: inherit; text-decoration: none; }
.kort h3 a:hover { text-decoration: underline; }
.kort__pris { font-size: 1.55rem; font-weight: 800; color: var(--orange); letter-spacing: -0.02em; line-height: 1.1; }
.kort__pris small { font-size: 0.85rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.kort__form { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.kort ul { list-style: none; display: grid; gap: 6px; font-size: 0.97rem; color: var(--muted); }
.kort ul li { padding-left: 24px; position: relative; }
.kort ul li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.kort__knappar { margin-top: auto; display: grid; gap: 8px; padding-top: 8px; }
.kort__mer { font-size: 0.93rem; font-weight: 600; text-align: center; }

/* Steg */
.steg { counter-reset: steg; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.steg > div { background: #fff; border-radius: var(--radius); padding: 22px; border: 1px solid var(--line); }
.steg__num { counter-increment: steg; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; display: grid; place-items: center; margin-bottom: 12px; }
.steg__num::before { content: counter(steg); }
.steg p { color: var(--muted); margin-top: 6px; }
@media (max-width: 760px) { .steg { grid-template-columns: minmax(0, 1fr); } }

/* Varför oss */
.varfor { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.varfor > div { padding: 20px; border-radius: var(--radius); background: var(--sky); }
.varfor svg { width: 30px; height: 30px; color: var(--blue); margin-bottom: 10px; }
.varfor p { color: var(--muted); margin-top: 4px; font-size: 0.97rem; }
@media (max-width: 900px) { .varfor { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .varfor { grid-template-columns: minmax(0, 1fr); } }
.varfor--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* sex rutor fyller två rader (Borås-sidan 2026-09-18) */
@media (max-width: 900px) { .varfor--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .varfor--3 { grid-template-columns: minmax(0, 1fr); } }

/* Omdömen */
.omdomen__topp { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.omdomen__betyg { font-size: 2.4rem; font-weight: 800; color: var(--navy); line-height: 1; }
.omdomen__g { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy); }
.omdomen__g svg { width: 22px; height: 22px; stroke: none; }
.omdomen__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.omdome { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.omdome p { color: var(--ink); }
.omdome footer { margin-top: 10px; font-weight: 700; color: var(--navy); font-size: 0.95rem; }
.omdome .stars { display: block; margin-bottom: 8px; }
@media (max-width: 760px) { .omdomen__lista { grid-template-columns: minmax(0, 1fr); } }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 800px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.faq summary { cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 700; color: var(--navy); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
/* Ritat plus/minus i stället för Unicode-tecken (Impeccables slutgranskning 2026-09-18, gäller alla FAQ:er). */
.faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background-color: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M7 1.5h2V7h5.5v2H9v5.5H7V9H1.5V7H7z%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M7 1.5h2V7h5.5v2H9v5.5H7V9H1.5V7H7z%27/%3E%3C/svg%3E") center / contain no-repeat; }
.faq details[open] summary::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M1.5 7h13v2h-13z%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M1.5 7h13v2h-13z%27/%3E%3C/svg%3E"); }
.faq .svar { padding: 0 18px 18px; color: var(--ink); max-width: 70ch; }

/* Media/bild */
.bild-ram { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.bild-ram img { width: 100%; height: 100%; object-fit: cover; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* CTA-band */
.cta-band { background: var(--navy); color: #fff; }
.cta-band__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: clamp(32px, 5vw, 56px); }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.85); margin-top: 6px; }
.cta-band__knappar { display: flex; gap: 12px; flex-wrap: wrap; }

/* Priser */
.pristabell th, .pristabell td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pristabell th { color: var(--navy); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; }
.pristabell td.pris { font-weight: 800; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabell-scroll { overflow-x: auto; }

/* Formulär */
.form { display: grid; gap: 14px; max-width: 560px; }
.form label { display: grid; gap: 6px; font-weight: 700; color: var(--navy); font-size: 0.95rem; }
.form input, .form textarea { font: inherit; padding: 12px 14px; border: 2px solid var(--line); border-radius: 10px; width: 100%; color: var(--ink); background: #fff; }
.form input:focus, .form textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(67, 111, 182, 0.25); }
.form .hp { position: absolute; left: -9999px; }
.form small { color: var(--muted); font-weight: 500; }

/* Artiklar */
.artikel { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.artikel__meta { font-size: 0.92rem; color: var(--muted); display: flex; gap: 8px 16px; flex-wrap: wrap; margin-top: 10px; }
.artikel__meta a { font-weight: 700; }
.sidokort { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 16px; }
.sidokort .kort { box-shadow: none; }
.kallor { margin-top: 2.5em; padding-top: 1.2em; border-top: 1px solid var(--line); font-size: 0.95rem; }
.kallor h2 { font-size: 1.1rem; margin-bottom: 0.5em; }
.kallor ul { list-style: none; display: grid; gap: 6px; padding: 0; }
.forfattare { display: flex; gap: 14px; align-items: center; background: var(--sky); border-radius: var(--radius); padding: 16px; }
.forfattare__init { width: 52px; height: 52px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; display: grid; place-items: center; flex: none; font-size: 1.1rem; }
.forfattare p { color: var(--muted); font-size: 0.93rem; }
.forfattare strong { color: var(--navy); display: block; }
@media (max-width: 900px) { .artikel { grid-template-columns: minmax(0, 1fr); } .sidokort { position: static; } }
.guide-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.guide-lista a.kort { text-decoration: none; }
.guide-lista .kort p { color: var(--muted); }
@media (max-width: 700px) { .guide-lista { grid-template-columns: minmax(0, 1fr); } }

/* Footer */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, 0.88); padding-block: clamp(40px, 6vw, 64px) 24px; font-size: 0.95rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 32px; }
.footer-grid h2 { color: #fff; font-size: 1rem; margin-bottom: 12px; letter-spacing: 0.02em; }
.footer-grid ul { list-style: none; display: grid; gap: 8px; }
.footer-grid address { font-style: normal; display: grid; gap: 6px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: #fff; font-size: 1.05rem; margin-bottom: 12px; }
.footer-brand img { width: 44px; height: 44px; border-radius: 50%; }
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.footer-social svg { width: 20px; height: 20px; fill: #fff; }
.footer-bottom { margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.15); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 0.88rem; color: rgba(255, 255, 255, 0.75); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* 404 */
.tom { text-align: center; padding-block: clamp(60px, 10vw, 120px); }
.tom p { margin-top: 12px; color: var(--muted); }
.tom .btn { margin-top: 22px; }

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

/* Mobil: header och fordonsval (uppmätt 2026-09-05 i 375 px: logotexten och knappen radbröts,
   segmentknapparna staplade ikon över text till 101 px höjd) */
.btn, .brand span { white-space: nowrap; }
.segment { flex: none; }
.segment__btn { white-space: nowrap; }
@media (max-width: 560px) {
  .fordonsval { flex-direction: column; align-items: stretch; gap: 10px; }
  .segment { display: flex; width: 100%; }
  .segment__btn { flex: 1; min-width: 0; padding: 12px 10px; }
}
@media (max-width: 420px) {
  .brand { font-size: 0.95rem; gap: 8px; }
  .brand img { width: 38px; height: 38px; }
  .header-cta .btn--sm { padding: 9px 12px; font-size: 0.9rem; }
  .menu summary { padding: 8px 10px; }
}
/* Under 420 px ryms inte logotext + två knappar (uppmätt 407 px behov mot 375 px). Logotypen bär namnet;
   länken har aria-label. */
.site-header__bar > * { min-width: 0; }
@media (max-width: 420px) {
  .brand span { display: none; }
  .brand img { width: 44px; height: 44px; }
}

/* ===== Megameny (mönster från Reko): hover + focus-within, under 960 px ersätts den av details-menyn ===== */
.nav__list { list-style: none; display: flex; align-items: center; gap: 4px; }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--navy); font-weight: 600; font-size: 0.97rem; padding: 10px 12px; border-radius: 8px; }
.nav__link:hover, .nav__link.is-active { background: var(--sky); color: var(--navy); }
.nav__link.is-active { box-shadow: inset 0 -2px 0 var(--blue); }
.nav__link svg { transition: transform 0.15s; }
.has-mega:hover .nav__link svg, .has-mega:focus-within .nav__link svg { transform: rotate(180deg); }
.mega { position: absolute; left: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s; z-index: 120; }
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
/* Osynlig brygga så menyn inte stängs när pekaren korsar glappet */
.has-mega::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.mega__inner { display: grid; grid-template-columns: 240px 1fr 1fr; gap: 22px; min-width: 620px; }
.mega--liten { min-width: 220px; }
.mega__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega__col a { text-decoration: none; color: var(--navy); font-weight: 600; font-size: 0.95rem; padding: 8px 10px; border-radius: 8px; white-space: nowrap; }
.mega__col a:hover, .mega__col a[aria-current="page"] { background: var(--sky); }
.mega__col a[aria-current="page"] { font-weight: 800; }
.mega__heading { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 800; padding: 4px 10px 6px; }
.mega__alla { margin-top: 6px; color: var(--blue-dark) !important; }
.mega__promo { background: var(--sky); border-radius: var(--radius-sm); padding: 16px; }
.mega__promo strong { display: block; color: var(--navy); margin-bottom: 6px; }
.mega__promo p { font-size: 0.9rem; color: var(--muted); }
.mega__promo .btn { margin-top: 12px; width: 100%; }
.lang-switch { display: inline-flex; align-items: center; border-radius: 6px; padding: 4px; line-height: 0; }
.lang-switch:hover { background: var(--sky); }
.flagga { border-radius: 3px; box-shadow: 0 0 0 1px rgba(20, 40, 74, 0.15); }
@media (max-width: 960px) { .nav { display: none; } }

/* ===== Hero: fyra USP:ar på en rad (användaren 2026-09-05) + flagga uppe till höger ===== */
.hero__lang { position: absolute; top: 16px; right: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--navy); font-weight: 700; font-size: 0.86rem; text-decoration: none; }
.hero__lang:hover { background: #fff; color: var(--navy); }
.hero__in { max-width: 700px; }
.usp { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 18px 0 0; }
.usp > span { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-sm); padding: 12px 14px; font-weight: 700; font-size: 0.95rem; color: #fff; }
.usp svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 960px) { .usp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .usp > span { font-size: 0.9rem; padding: 10px 12px; } }

/* ===== Sidfot: kurser i två spalter inom en kolumn ===== */
.footer-kurser { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.footer-grid { grid-template-columns: 1.2fr 1.4fr 0.9fr 1.1fr; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.site-footer address a { display: block; }

/* ===== Artiklar: kategorier, bild i artikeln, kort med bild ===== */
.kat-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.kat-nav a { text-decoration: none; }
.pill--nyhet { background: #fdebd6; color: var(--orange); }
.pill--regler { background: var(--ice); color: var(--blue-dark); }
.pill--guide { background: #dff3e6; color: #1e6b3a; }
.artikel__bild { margin: 0 0 1.6em; }
.artikel__bild img { width: 100%; }
.kort--artikel { padding: 0; overflow: hidden; }
.kort--artikel .kort__bild { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ice); }
.kort--artikel .kort__bild img { width: 100%; height: 100%; object-fit: cover; }
.kort--artikel > .kort__form, .kort--artikel > h3, .kort--artikel > p, .kort--artikel > .kort__mer { margin-inline: 22px; }
.kort--artikel > .kort__form { margin-top: 18px; }
.kort--artikel > .kort__mer { margin-bottom: 22px; margin-top: auto; padding-top: 10px; }
.kort--artikel:hover .kort__bild img { transform: scale(1.03); transition: transform 0.3s; }
/* Bildremsa (startsida, kurssidor) */
.bildrad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bildrad .bild-ram { aspect-ratio: 4 / 3; }
.bildrad--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .bildrad, .bildrad--2 { grid-template-columns: minmax(0, 1fr); } }
figcaption { font-size: 0.9rem; color: var(--muted); margin-top: 8px; }

/* ===== Omgång 3 (2026-09-05): hero-luft, header-flagga, varför-rubriker, omdömespanel, split, artiklar 3/rad, kundportal i sidfoten ===== */
.hero .container { padding-bottom: clamp(40px, 6vw, 72px); }
.hero__in { padding-bottom: clamp(24px, 3vw, 40px); }
.hero .h1-brand { display: block; font-size: clamp(2.3rem, 5vw, 3.8rem); letter-spacing: -0.03em; }
.hero .h1-rad { display: block; font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin-top: 8px; color: rgba(255, 255, 255, 0.95); text-wrap: balance; }
.usp { padding-top: 22px; }
.lang-switch .flagga { display: block; }
.header-cta .lang-switch { margin-right: 2px; }
.varfor h3 { font-size: 1.12rem; }
.eyebrow { display: block; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-dark); font-weight: 800; margin-bottom: 12px; }

/* Omdömen i Rekos panelstil */
.omdomen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; background: var(--sky); border-radius: 28px; padding: clamp(28px, 4vw, 56px); }
.omdomen__vanster h2 { margin-bottom: 18px; }
.omdomen__betygsrad { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.omdomen__g { width: 44px; height: 44px; stroke: none; flex: none; }
.omdomen__betyg { display: block; font-size: 2.2rem; font-weight: 800; color: var(--navy); line-height: 1; }
.omdomen__betygsrad .stars { display: block; margin: 2px 0; }
.omdomen__antal { display: block; font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.omdomen__spar { display: grid; gap: 16px; }
.omdome { position: relative; background: #fff; border: 0; border-radius: 22px; padding: 30px 28px 24px; box-shadow: var(--shadow); }
.omdome__citattecken { display: block; font-size: 2.6rem; line-height: 0.6; color: var(--blue); font-weight: 800; margin-bottom: 14px; }
.omdome p { font-style: italic; font-size: 1.08rem; color: var(--ink); }
.omdome footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; color: var(--muted); font-size: 0.93rem; }
.omdomen__styr { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.omdomen__pil { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--navy); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 12px rgba(20, 40, 74, 0.12); }
.omdomen__pil:hover { background: var(--ice); }
.omdomen__pil svg { width: 20px; height: 20px; }
.omdomen__punkter { display: flex; gap: 0; }
/* 24 px träffyta per punkt (WCAG 2.5.8), den synliga pricken ritas som ::before */
.omdomen__punkt { width: 24px; height: 24px; border: 0; background: transparent; cursor: pointer; position: relative; padding: 0; }
.omdomen__punkt::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ice); }
.omdomen__punkt[aria-selected="true"]::before { background: var(--orange-bg); }
.omdomen__punkt:focus-visible { outline: none; }
.omdomen__punkt:focus-visible::before { outline: 3px solid var(--focus); outline-offset: 3px; }
.omdomen__styr:not(.js *) { display: none; }
.js .omdomen__styr { display: flex; }
@media (max-width: 860px) { .omdomen { grid-template-columns: minmax(0, 1fr); gap: 24px; border-radius: 20px; } }

/* Artiklar: tre per rad */
.guide-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .guide-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .guide-lista { grid-template-columns: minmax(0, 1fr); } }

/* Sidfot: kundportal som knapp, logotypen som länk */
.footer-brand { text-decoration: none; }
.footer-brand:hover { text-decoration: none; }
.footer-portal { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 16px; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 10px; color: #fff; font-weight: 700; text-decoration: none; }
.footer-portal:hover { background: rgba(255, 255, 255, 0.1); text-decoration: none; }
.footer-portal svg { width: 18px; height: 18px; }

/* Porträtt på författarkort och personsidor */
.forfattare__foto { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.forfattare__foto--stor { width: 160px; height: 160px; }
.kort--person .forfattare__foto { width: 120px; height: 120px; margin-bottom: 6px; }
@media (max-width: 560px) { .forfattare__foto--stor { width: 110px; height: 110px; } }

/* ===== Foto-hero på kurssidor (test 2026-09-05, startsidans stil med bokningskortet ovanpå bilden) ===== */
.hero--kurs { padding-top: 22px; }
.hero--kurs .hero__bg::after { background: linear-gradient(90deg, rgba(20, 40, 74, 0.94) 0%, rgba(20, 40, 74, 0.8) 45%, rgba(20, 40, 74, 0.45) 100%); }
.hero--kurs .crumbs, .hero--kurs .crumbs a, .hero--kurs .crumbs li + li::before { color: rgba(255, 255, 255, 0.85); position: relative; }
.hero--kurs .crumbs { position: relative; }
.hero--kurs__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: 36px; align-items: start; padding-bottom: clamp(40px, 6vw, 72px); }
.hero--kurs .hero__in { padding-block: clamp(20px, 3vw, 36px) 0; max-width: none; }
.hero--kurs h1 { color: #fff; }
.hero--kurs .lead { color: rgba(255, 255, 255, 0.94); }
.hero--kurs .boka-ruta { margin-top: clamp(20px, 3vw, 36px); }
@media (max-width: 860px) {
  .hero--kurs__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hero--kurs .hero__bg::after { background: linear-gradient(180deg, rgba(20, 40, 74, 0.7) 0%, rgba(20, 40, 74, 0.92) 60%); }
}

/* ===== Granskningsfixar 2026-09-05 ===== */
/* Tabeller blir kort på mobil (prissidorna gav sidoscroll i 375 px trots scrollbehållare) */
@media (max-width: 640px) {
  .pristabell thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pristabell, .pristabell tbody, .pristabell tr, .pristabell th, .pristabell td { display: block; width: 100%; }
  .pristabell tr { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 12px; }
  .pristabell th[scope="row"] { border: 0; padding: 0 0 8px; font-size: 1.1rem; text-transform: none; letter-spacing: 0; }
  .pristabell td { border: 0; padding: 4px 0; display: flex; gap: 12px; justify-content: space-between; white-space: normal; }
  .pristabell td::before { content: attr(data-label); color: var(--muted); font-weight: 600; flex: none; }
  .pristabell td[data-label=""]::before { display: none; }
  .pristabell td[data-label=""] { padding-top: 10px; }
  .pristabell td[data-label=""] .btn { width: 100%; }
  .pristabell td.pris { font-size: 1.15rem; }
  .tabell-scroll { overflow: visible; }
}
/* Träffyta för språkflaggan (mätt 36×22) */
.lang-switch { min-height: 26px; min-width: 40px; justify-content: center; }
/* Etiketten över omdömena var 12,5 px */
.eyebrow { font-size: 0.82rem; }
/* Kurssidornas hero på mobil: tätare så bokningskortet kommer högre upp (mätt 911 px hög i 375) */
@media (max-width: 560px) {
  .hero--kurs { padding-top: 12px; }
  .hero--kurs .hero__in { padding-top: 10px; }
  .hero--kurs .lead { font-size: 1rem; }
  .hero--kurs .boka-ruta { margin-top: 10px; }
  .hero--kurs__grid { padding-bottom: 28px; }
}
/* Formulärfel */
.form-fel { background: #fdecec; border-left: 5px solid #b3261e; color: #7a1a13; padding: 12px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 14px; font-weight: 600; }

/* ===== Mobil-hero på startsidan (användaren 2026-09-05): betygspillen och flaggan på samma rad och mindre;
   USP:arna får aldrig bli tre rader (texten "Inget körkortstillstånd krävs" kortades till två ord). ===== */
@media (max-width: 560px) {
  .hero__in { padding-top: 14px; }
  .hero__lang { top: 14px; right: 16px; font-size: 0.78rem; padding: 5px 9px 5px 6px; gap: 6px; }
  .hero__lang .flagga { height: 13px; width: auto; } /* bara höjden: 26×13 gav den svenska flaggan (1,6:1) luft på sidorna */
  .pill--betyg { font-size: 0.78rem; padding: 5px 10px; gap: 5px; white-space: nowrap; max-width: calc(100% - 104px); }
  .pill--betyg .stars { font-size: 0.85em; letter-spacing: 0; }
  /* "Landvetter Halkbana" ska rymmas på en rad (användaren 2026-09-07). Texten är ca 9,6 px bred per px
     teckenstorlek, så den kräver (bredd − 40) / 9,6; 8,6vw ligger under det hela vägen ner till 320 px.
     Taket 2,3rem är den gamla storleken, så allt från 428 px och uppåt är oförändrat. */
  .hero .h1-brand { font-size: clamp(1.75rem, 8.6vw, 2.3rem); }
  /* Luften mellan knapparna och USP-rutorna var 46 px (24 + 22) och kändes för stor (användaren 2026-09-07) */
  .usp { gap: 8px; padding-top: 8px; }
  .usp > span { font-size: 0.86rem; padding: 10px 10px; gap: 8px; line-height: 1.3; }
  .usp svg { width: 20px; height: 20px; }
}
@media (max-width: 420px) { .pill__antal { display: none; } }
@media (max-width: 340px) { .usp { grid-template-columns: minmax(0, 1fr); } }
/* Startsidans hero-knappar (bara .hero__cta, inga andra knappar på sajten) är alltid två fullbreddsknappar
   under varandra på mobil – aldrig sida vid sida i någon mobilbredd (användaren 2026-09-07).
   Tidigare avgjorde flex-wrap saken, alltså hur långa orden råkade vara: svenskan (114 + 194 + 10 = 318 px)
   låg på en rad från 358, engelskan (147 + 188 + 10 = 345) först från 385, så under 385 hade sajten två
   olika designer beroende på språk. Brytpunkten 560 är samma som resten av mobil-heron använder. */
@media (max-width: 560px) {
  .hero__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__cta .btn { width: 100%; }
  .hero__cta .btn--lg { padding: 14px 18px; font-size: 1rem; }
}
/* Artikelbilden har alltid samma format som kortet i listan (16:9, beskuren), oavsett om originalet är stående (nyheten fick en jättehög bild) */
.artikel__bild { aspect-ratio: 16 / 9; background: var(--ice); }
/* Split-bilder har fast format så ett stående original aldrig blir en jättehög bild (om oss 2026-09-05).
   Ändrat 4:3 → 16:9 2026-09-07: båda bilder som använder .split i dag (bana-lakta på startsidan,
   skylt-overgang på FAQ) är 16:9, så 4:3 beskar bara bort 25 % i sidled och gjorde rutan 100 px för hög. */
.split > .bild-ram { aspect-ratio: 16 / 9; }

/* ===== Hitta till oss, layout B (2026-09-05): sidopanel med adress och kartknappar (öppettider borta 2026-09-12) ===== */
.hitta { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "text panel"; gap: 40px; align-items: start; }
.hitta__text { grid-area: text; }
.hitta__panel { grid-area: panel; position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 16px; }
.hitta__panel .btn { width: 100%; }
.hitta__panel .adress { line-height: 1.5; }
.hitta__panel .adress strong { color: var(--navy); }
.hitta__not { font-size: 0.88rem; }
.rubrik-ikon { display: flex; align-items: center; gap: 10px; }
.rubrik-ikon svg { width: 22px; height: 22px; color: var(--blue); flex: none; }
.rubrik-ikon h2, .rubrik-ikon h3 { font-size: 1.15rem; margin: 0; }
.kort--sky { background: var(--sky); border-color: transparent; box-shadow: none; }
.rutt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.prose .rutt h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.05rem; margin-top: 0; }
.prose .rutt p { margin-top: 0; }
.linje { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 26px; border-radius: 6px; background: var(--navy); color: #fff; font-size: 0.8rem; font-weight: 800; padding: 0 8px; letter-spacing: 0.02em; }
.hitta__foton { margin-top: 28px; }
.btn--sky { background: var(--sky); color: var(--navy); }
.btn--sky:hover { background: var(--ice); color: var(--navy); }
@media (max-width: 900px) {
  /* Mobil: panelen med adress och knappar först, sedan texten */
  .hitta { grid-template-columns: minmax(0, 1fr); grid-template-areas: "panel" "text"; gap: 28px; }
  .hitta__panel { position: static; }
  .rutt { grid-template-columns: minmax(0, 1fr); }
}



/* ===== Prissidan under tabellen, variant B (2026-09-05): kombokursen som säljpanel, två textkolumner, SEO-text ===== */
.kombo-panel { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 28px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; align-items: center; margin-top: 32px; }
.kombo-panel--en { grid-template-columns: 1.4fr 1fr; }
.kombo-panel h2 { color: #fff; font-size: clamp(1.4rem, 2.2vw, 1.75rem); }
.kombo-panel > div > p { color: rgba(255, 255, 255, 0.85); margin-top: 8px; }
.kombo-pris { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; padding: 18px; }
.kombo-pris small { display: block; color: rgba(255, 255, 255, 0.8); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; }
.kombo-pris strong { display: block; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; margin: 4px 0 2px; line-height: 1.1; }
.kombo-pris em { font-style: normal; color: #ffd48a; font-weight: 700; font-size: 0.92rem; } /* #ffd48a på --navy 11,9:1 */
.kombo-pris .btn { width: 100%; margin-top: 12px; }
.tva-kolumner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.tva-kolumner h2.rubrik-ikon { font-size: 1.15rem; margin-bottom: 10px; }
.tva-kolumner p + p { margin-top: 10px; }
.ingar-lista { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.ingar-lista li { display: flex; gap: 10px; align-items: flex-start; }
.ingar-lista svg { width: 18px; height: 18px; color: var(--blue); flex: none; margin-top: 4px; }
.pris-seo { padding-top: 36px; }
@media (max-width: 900px) {
  .kombo-panel, .kombo-panel--en { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px; }
  .tva-kolumner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ===== Kontakt, layout B (2026-09-05): blått band med kontaktuppgifter, formuläret i vitt kort (veckoremsan borta 2026-09-12) ===== */
.kontakt-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
.kontakt-info { display: grid; gap: 22px; }
.kontakt-rad { display: flex; gap: 12px; align-items: flex-start; }
.kontakt-rad > svg { width: 22px; height: 22px; color: var(--blue); flex: none; margin-top: 4px; }
.kontakt-rad span { display: block; color: var(--muted); font-size: 0.93rem; }
.kontakt-rad span a { font-weight: 600; }
.kontakt-stor { display: block; font-size: 1.25rem; font-weight: 800; color: var(--blue-dark); text-decoration: none; letter-spacing: -0.01em; line-height: 1.3; }
.kontakt-stor:hover { color: var(--navy); text-decoration: underline; }
.kontakt-stor--mail { font-size: 1.1rem; overflow-wrap: anywhere; }
.kontakt-stor--adress { font-size: 1.05rem; color: var(--navy); } /* länk till Google Maps-vägbeskrivning (användaren 2026-09-05: såg ut som länk men var text) */
.kontakt-h2 { font-size: 1.15rem; margin-bottom: 10px; }
.kontakt-form { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; }
.kontakt-form .form { max-width: none; }
.form__rad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) {
  .kontakt-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 480px) {
  .form__rad { grid-template-columns: minmax(0, 1fr); }
  .kontakt-form { padding: 20px 16px; }
}

/* ===== "Halkbanan i Landvetter" på startsidan, variant B (2026-09-07) =====
   Sektionen hade 100 px tom yta i 1160 px bredd. Två orsaker drog åt samma håll: fotot är 16:9 men
   .split > .bild-ram tvingade rutan till 4:3 (bilden 407 px hög mot textens 263), och .split--stretch
   la hela överskottet ovanför länkraden med justify-content: space-between + margin-top: auto.
   Båda är borttagna. Det praktiska i andra stycket ligger nu i tre skannbara rader, och länkarna är
   knappar i stället för en understruken rad med punkt emellan. ===== */
/* Rubriken är först i sitt .prose-block, så .prose h2 { margin-top: 2em } blir en tom rad på 69 px i
   toppen. Nollas här i stället för globalt: på /priser/ och /riskutbildning/ är samma 2em det enda som
   skiljer rubriken från blocket ovanför, så en global regel skulle klistra ihop dem. */
.bana__text > :first-child { margin-top: 0; }
.bana__fakta { display: grid; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.bana__rad { display: flex; gap: 12px; align-items: flex-start; }
.bana__rad > svg { width: 20px; height: 20px; color: var(--blue); flex: none; margin-top: 4px; }
.bana__rad span { display: block; color: var(--muted); font-size: 0.96rem; }
.bana__rad b { color: var(--navy); font-weight: 800; }
.bana__knappar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ===== Företag och trafikskolor (2026-09-12): landningssidorna /foretag/ och /trafikskolor/ (+ /en/), variant A,
   och företagsblocket (block A) på kontakt och om oss. Varianterna: drafts/design/foretag-varianter.html. ===== */
/* Formulärkortet står där kurssidornas bokningskort står (samma .hero--kurs__grid). */
.offert-kort { background: #fff; color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; border: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.offert-kort h2 { font-size: 1.35rem; color: var(--navy); margin-bottom: 14px; }
.offert-kort .form { gap: 12px; max-width: none; }
.offert-kort .form small { font-size: 0.84rem; line-height: 1.45; }
.form input::placeholder, .form textarea::placeholder { color: #6b778c; } /* 4,5:1 mot vitt */
.hero-fakta { list-style: none; display: grid; gap: 10px; margin-top: 24px; padding: 0; }
.hero-fakta li { display: flex; gap: 10px; align-items: flex-start; color: #fff; font-weight: 600; }
.hero-fakta svg { width: 20px; height: 20px; color: #a9c6f5; flex: none; margin-top: 3px; }
/* Anläggningen: rubriken är först i .prose, så 2em-marginalen nollas per sektion (se .bana__text ovan) */
.offert-text > :first-child { margin-top: 0; }
.prose .ingar-lista { padding-left: 0; }
.prose .ingar-lista li + li { margin-top: 0; }
.samarbete .kort__mer { text-align: left; margin-top: auto; }
/* Block A: länkrader i samma stil som kontaktraderna */
.fb-a { display: grid; gap: 8px; }
.fb-a .kontakt-h2 { margin-bottom: 2px; }
.fb-a--bred { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fb-a__rad { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--ink); transition: border-color 0.15s; }
.fb-a__rad:hover { border-color: var(--blue); }
.fb-a__rad > svg:first-child { width: 26px; height: 26px; color: var(--blue); flex: none; }
.fb-a__rad > svg:last-child { width: 18px; height: 18px; color: var(--blue); flex: none; margin-left: auto; }
.fb-a__rad b { display: block; color: var(--navy); font-weight: 800; }
.fb-a__rad small { display: block; color: var(--muted); font-size: 0.92rem; }
.foretagsuppgifter { margin-top: 48px; }
.foretagsuppgifter > :first-child { margin-top: 0; }
@media (max-width: 760px) { .fb-a--bred { grid-template-columns: minmax(0, 1fr); } }
/* Megamenyn: tredje kolumn "För företag" till höger om MC (bara svenska; engelskan har en kurskolumn) */
.mega__inner--foretag { grid-template-columns: 240px 1fr 1fr 1fr; min-width: 820px; }
/* "Alla kurser" hör till både Bil och MC, så den ligger som en rad under de två kolumnerna */
.mega__alla-rad { grid-column: 2 / 4; border-top: 1px solid var(--line); padding-top: 6px; margin-top: -8px; }
.mega__alla-rad .mega__alla { margin-top: 0; align-self: flex-start; }
/* Panelen är 858 px bred och hänger från menyknappen, så under ca 1220 px stack den ut till höger om skärmen
   (mätt 2026-09-12: 103 px i 1000, 133 px i 961). Där läggs promorutan som en rad under de tre kolumnerna. */
@media (max-width: 1219px) {
  .mega__inner--foretag { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 600px; }
  .mega__inner--foretag .mega__promo { order: 1; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: center; }
  .mega__inner--foretag .mega__promo strong { margin-bottom: 2px; }
  .mega__inner--foretag .mega__promo .btn { grid-column: 2; grid-row: 1 / span 2; width: auto; margin-top: 0; }
  .mega__alla-rad { grid-column: 1 / 3; }
}
/* Mobilmenyn: en rad under brickorna */
.menu__foretag { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.menu__foretag a { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: var(--navy); font-weight: 700; font-size: 0.84rem; padding: 12px 8px; border-radius: 12px; background: var(--sky); min-height: 44px; text-align: center; }
.menu__foretag a[aria-current="page"] { color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
.menu__foretag svg { width: 20px; height: 20px; color: var(--blue); flex: none; }
/* Sidfoten: "För företag" under Kurser bil, och "Webbplats av Pigment" längst till höger i bottenraden */
.footer-grid h2.footer-h2--andra { margin-top: 22px; }
.footer-bottom { justify-content: flex-start; }
.footer-credit { margin-left: auto; }
@media (max-width: 560px) { .footer-credit { margin-left: 0; } }
/* Bildspel (Bildspel.astro, 2026-09-12): en bild i taget med scroll-snap; pilarna och räknaren kommer från main.js */
.bildspel { min-width: 0; }
.bildspel__spar { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--radius); box-shadow: var(--shadow); scrollbar-width: none; overscroll-behavior-x: contain; }
.bildspel__spar::-webkit-scrollbar { display: none; }
.bildspel__bild { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 9; }
.bildspel__bild img { width: 100%; height: 100%; object-fit: cover; }
.bildspel__styr { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.bildspel__styr .omdomen__pil[disabled] { opacity: 0.4; cursor: default; box-shadow: none; }
.bildspel__nr { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 5ch; text-align: center; }
/* Telefonnumret bryts aldrig mitt i (användaren 2026-09-12: "073-570 / 55 12" i ett stegkort). Gäller alla tel-länkar. */
a[href^="tel:"] { white-space: nowrap; }
/* Film (Video.astro, 2026-09-12): miniatyr med knapp, byts mot iframe vid klick (med samtycke) */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--navy); }
.video__lank { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.video__lank img { width: 100%; height: 100%; object-fit: cover; }
/* Knappen nere till höger: mitten av miniatyren bär skylten "Landvetter Halkbana Trafikövningsplats" */
.video__play { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 999px; background: rgba(20, 40, 74, 0.9); font-weight: 800; font-size: 0.95rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); transition: background 0.15s, transform 0.15s; font-variant-numeric: tabular-nums; }
.video__play svg { width: 22px; height: 22px; fill: #fff; }
.video__lank:hover .video__play, .video__lank:focus-visible .video__play { background: var(--blue); transform: scale(1.04); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__not { font-size: 0.85rem; color: var(--muted); margin-top: 8px; }

/* Borås-sidan (/halkbana-boras/, 2026-09-18): variant A i sajtens egen design. Resvägskortet i OffertHero. */
.boras-rad { margin-top: 6px; }
.boras-buss { margin-top: 16px; }
.boras-boka { margin-top: 20px; }
.boras-vag { margin-top: 10px; }