/* ==========================================================================
   BikeVibes — stijlblad
   Eén bestand. Aanpassen mag, maar de kleurwaarden staan bovenaan in :root
   zodat je nooit door de rest hoeft te zoeken.
   ========================================================================== */

:root {
  /* Merkkleuren, bemonsterd uit het logo */
  --groen: #43A169;
  --groen-donker: #2D8345;
  --groen-diep: #1F5F32;
  --donker: #111E26;
  --licht: #E9F4EE;

  /* Neutralen */
  --wit: #FFFFFF;
  --papier: #FBFCFB;
  --lijn: #E2E7E4;
  --lijn-sterk: #C9D2CD;
  --grijs: #5C6A64;
  --grijs-licht: #8A968F;

  /* Signaalkleuren voor onderdeelstatus */
  --status-goed: #2D8345;
  --status-nieuw: #1D6FA5;
  --status-let-op: #B4761B;
  --status-slijt: #9A4B2F;

  /* Maatvoering */
  --breedte: 1180px;
  --breedte-smal: 760px;
  --radius: 4px;
  --radius-groot: 8px;

  /* Typografie */
  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ----------------------------------------------------------- lettertypen -
   De letters staan in assets/fonts/ en worden vanaf je eigen domein geladen.
   Dat is sneller dan Google Fonts en er gaan geen bezoekersgegevens naar
   een externe partij. Niets aan te passen; laat de map staan.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/archivo-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/archivo-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* --------------------------------------------------------------- reset -- */

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

/* Het hidden-kenmerk moet altijd winnen. Zonder deze regel overschrijft
   bijvoorbeeld .kaart { display: flex } het verbergen, waardoor de filters
   op het aanbod (en het vinkje "Verkochte fietsen tonen") niets verborgen. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--donker);
  background: var(--wit);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--groen-donker); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--groen-diep); }

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.35rem); }
h4 { font-size: 1rem; }
p  { margin: 0 0 1.1em; max-width: 68ch; }

hr { border: 0; border-top: 1px solid var(--lijn); margin: 3rem 0; }

::selection { background: var(--licht); }

/* --------------------------------------------------------------- layout - */

.wrap { width: 100%; max-width: var(--breedte); margin: 0 auto; padding: 0 20px; }
.wrap-smal { max-width: var(--breedte-smal); }

.sectie { padding: 42px 0; }
.sectie-klein { padding: 30px 0; }
.sectie-licht { background: var(--licht); }
.sectie-papier { background: var(--papier); border-block: 1px solid var(--lijn); }
.sectie-donker { background: var(--donker); color: var(--wit); }
.sectie-donker h2, .sectie-donker h3 { color: var(--wit); }
.sectie-donker p { color: #C4CFD4; }

@media (min-width: 820px) { .sectie { padding: 58px 0; } }

/* Staan twee secties zonder achtergrondkleur onder elkaar, dan telt de
   witruimte dubbel: de onderkant van de eerste plus de bovenkant van de
   tweede. Dat leest als een gat waar je doorheen moet scrollen. Bij een
   sectie mét kleur is dat niet zo, want daar zit de ruimte binnen het vlak. */
.sectie:not(.sectie-licht):not(.sectie-papier):not(.sectie-donker)
  + .sectie:not(.sectie-licht):not(.sectie-papier):not(.sectie-donker) {
  padding-top: 8px;
}

.raster { display: grid; gap: 24px; }
.raster-2 { grid-template-columns: 1fr; }
.raster-3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .raster-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 700px) { .raster-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .raster-3 { grid-template-columns: repeat(3, 1fr); } }

.overloop { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------ typografie */

.kop-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--groen-donker);
  margin: 0 0 12px;
  font-weight: 500;
}
.sectie-donker .kop-label { color: var(--groen); }

.lead { font-size: 1.13rem; color: var(--grijs); max-width: 62ch; }
.sectie-donker .lead { color: #B8C4CA; }

.klein { font-size: 0.9rem; color: var(--grijs); }
.mono { font-family: var(--mono); }

/* ---------------------------------------------------------------- knopen */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  min-height: 48px;
}
.knop-primair { background: var(--groen-donker); color: var(--wit); }
.knop-primair:hover { background: var(--groen-diep); color: var(--wit); }
.knop-secundair { background: transparent; color: var(--donker); border-color: var(--lijn-sterk); }
.knop-secundair:hover { border-color: var(--donker); color: var(--donker); }
.sectie-donker .knop-secundair { color: var(--wit); border-color: #3A4C55; }
.sectie-donker .knop-secundair:hover { border-color: var(--wit); color: var(--wit); }

/* Tweede hoofdingang. Even zwaar als knop-primair maar in een andere kleur,
   zodat twee knoppen naast elkaar allebei als hoofdkeuze lezen en geen van
   beide op de tweede plaats komt te staan. */
.knop-tweede { background: var(--donker); color: var(--wit); }
.knop-tweede:hover { background: #0A141A; color: var(--wit); }

.knop-groep { display: flex; flex-wrap: wrap; gap: 12px; }

/* WhatsApp: knoppen en links worden door site.js aangebracht */
.whatsapp-link svg, .voet-whatsapp svg { vertical-align: -4px; margin-right: 6px; }
.whatsapp-regel { margin: 14px 0 0; font-size: .95rem; }
.whatsapp-link { font-weight: 600; }
.whatsapp-blok { margin: 20px 0 22px; }
.whatsapp-blok .klein { margin: 8px 0 0; }

/* Tabel met accutypes op een merkpagina. Op een smal scherm mag hij zijwaarts
   schuiven binnen zijn eigen kader; de pagina zelf schuift nooit mee. */
.tabelrol { overflow-x: auto; margin: 20px 0; -webkit-overflow-scrolling: touch; }
.merktabel { width: 100%; border-collapse: collapse; min-width: 520px; }
.merktabel thead th {
  text-align: left; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grijs); font-weight: 500;
  padding: 0 14px 10px 0; border-bottom: 1px solid var(--lijn-sterk); white-space: nowrap;
}
.merktabel tbody th {
  text-align: left; font-weight: 600; padding: 13px 14px 13px 0; vertical-align: top;
}
.merktabel td {
  padding: 13px 14px 13px 0; vertical-align: top; color: var(--grijs);
  white-space: nowrap;
}
.merktabel td:last-child { white-space: normal; }
.merktabel tbody tr + tr th, .merktabel tbody tr + tr td { border-top: 1px solid var(--lijn); }
.merktabel .toelichting { margin: 6px 0 0; font-size: .82rem; white-space: normal; }
.merktabel .prijskolom { font-weight: 600; color: var(--donker); white-space: nowrap; }

/* Merkpagina's als lijst op de accurevisiepagina. */
.merkkaarten { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.merkkaart {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 13px 15px; border: 1px solid var(--lijn); border-radius: var(--radius);
  text-decoration: none; color: var(--donker); background: #fff;
}
.merkkaart:hover { border-color: var(--groen); color: var(--donker); }
.merkkaart span:last-child { font-family: var(--mono); font-size: .72rem; color: var(--grijs); }

/* Het afspraakformulier in de zijkaart van een dossier. Smaller dan de grote
   formulieren op contact- en verkooppagina, en de velden staan altijd onder
   elkaar want de kolom is maar zo'n 300 pixels breed. */
.formulier-kort { margin-top: 4px; }
.formulier-kort .veld { margin-bottom: 14px; }
.formulier-kort label { font-size: 0.86rem; margin-bottom: 4px; }
.formulier-kort input[type="text"] { padding: 10px 12px; font-size: 0.94rem; }
.formulier-kort .keuzes { margin: 4px 0 16px; }
.formulier-kort .keuze span { font-size: 0.82rem; line-height: 1.45; }
.formulier-kort .notitie { margin-bottom: 14px; }

/* Vraag-en-antwoordblokken op de accurevisiepagina. */
.vraag { padding: 22px 0; border-top: 1px solid var(--lijn); }
.vraag:first-of-type { border-top: none; padding-top: 8px; }
.vraag h3 { margin: 0 0 8px; }
.vraag p { margin: 0; max-width: 68ch; }

/* ------------------------------------------------------------ navigatie - */

.balk {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--lijn);
}
.balk-in { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }

.merk { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--donker); }
.merk img { width: 42px; height: auto; }
.merk-tekst { display: flex; flex-direction: column; line-height: 1; }
.merk-naam { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.merk-naam span { color: var(--groen-donker); }
.merk-sub {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing:0.06em;
  color: var(--grijs); text-transform: uppercase; margin-top: 3px;
white-space:nowrap;}

.nav { display: none; align-items: center; gap: 4px; }
.nav a {
  padding: 9px 13px; border-radius: var(--radius); font-size: 0.95rem;
  font-weight: 500; color: var(--donker); text-decoration: none;
}
.nav a:hover { background: var(--licht); }
.nav a[aria-current="page"] { color: var(--groen-donker); font-weight: 600; }
.nav .knop { margin-left: 8px; }

.menu-knop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 1px solid var(--lijn-sterk);
  background: var(--wit); border-radius: var(--radius); cursor: pointer;
}
.menu-knop span { display: block; width: 20px; height: 2px; background: var(--donker); position: relative; }
.menu-knop span::before, .menu-knop span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--donker);
}
.menu-knop span::before { top: -6px; }
.menu-knop span::after { top: 6px; }

.mobiel-nav { display: none; border-bottom: 1px solid var(--lijn); background: var(--wit); }
.mobiel-nav.open { display: block; }
.mobiel-nav a {
  display: block; padding: 15px 20px; border-top: 1px solid var(--lijn);
  color: var(--donker); text-decoration: none; font-weight: 500;
}
.mobiel-nav a:first-child { border-top: 0; }

@media (min-width: 900px) {
  .nav { display: flex; }
  .menu-knop { display: none; }
  .mobiel-nav { display: none !important; }
}

/* Verwijsstrook: korte brug tussen de twee rubrieken */
.strook {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--lijn); border-radius: var(--radius-groot);
  background: var(--papier); padding: 22px 24px;
}
.strook h3 { margin: 0 0 4px; font-size: 1.05rem; }
.strook p { margin: 0; max-width: 62ch; }
.strook .knop { flex: none; }

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

.hero { padding: 36px 0 42px; border-bottom: 1px solid var(--lijn); }
@media (min-width: 820px) { .hero { padding: 60px 0 58px; } }
.hero h1 { max-width: 16ch; }
.hero-in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 940px) { .hero-in { grid-template-columns: 1.05fr 0.95fr; gap: 56px; } }

/* Meetkaart in de hero: laat direct zien wat een dossier is */
.hero-kaart {
  border: 1px solid var(--lijn);
  border-radius: var(--radius-groot);
  background: var(--wit);
  box-shadow: 0 1px 2px rgba(17,30,38,.04), 0 12px 32px rgba(17,30,38,.06);
  overflow: hidden;
}
.hero-kaart-kop {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 18px; background: var(--donker); color: var(--wit);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.hero-kaart-body { padding: 22px 18px 24px; }

/* ------------------------------------------------------------ meetwaarde */

.meetwaarde { display: flex; flex-direction: column; gap: 2px; }
.meetwaarde-label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--grijs);
}
.meetwaarde-getal {
  font-size: clamp(1.9rem, 5.5vw, 2.6rem);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; color: var(--donker);
}
.meetwaarde-getal .eenheid {
  font-size: 0.42em; font-weight: 500; letter-spacing: 0; color: var(--grijs);
  margin-left: 4px; vertical-align: baseline;
}
.meetwaarde-bij { font-size: 0.85rem; color: var(--grijs); }
.sectie-donker .meetwaarde-getal { color: var(--wit); }
.sectie-donker .meetwaarde-label, .sectie-donker .meetwaarde-bij { color: #97A6AD; }

.meetrij { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
@media (min-width: 640px) { .meetrij-4 { grid-template-columns: repeat(4, 1fr); } }

/* Capaciteitsbalk: gemeten capaciteit t.o.v. fabriekswaarde */
.balkje { margin-top: 10px; }
.balkje-spoor {
  position: relative; height: 10px; border-radius: 2px;
  background: var(--licht); overflow: hidden;
}
.balkje-vul { position: absolute; inset: 0 auto 0 0; border-radius: 2px 0 0 2px; background: var(--groen); }
.balkje-vul.laag { background: var(--status-let-op); }
.balkje-schaal {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family: var(--mono); font-size: 0.65rem; color: var(--grijs-licht);
}

/* Normschaal: plaatst een meetwaarde tegen een vast ijkpunt.
   De grenzen zelf staan in assets/js/gegevens.js, niet hier. */
.schaal { margin-top: 9px; }
.schaal-spoor {
  position: relative; height: 10px; border-radius: 2px;
  background: var(--licht); overflow: hidden;
}
.schaal-zone { position: absolute; top: 0; bottom: 0; }
.schaal-zone.goed { background: rgba(67, 161, 105, 0.30); }
.schaal-zone.let-op { background: rgba(180, 118, 27, 0.28); }
.schaal-merk { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--donker); }
.schaal-tekst {
  margin-top: 6px; font-family: var(--mono); font-size: 0.65rem;
  color: var(--grijs); letter-spacing: 0.01em; line-height: 1.45;
}
.sectie-donker .schaal-spoor { background: #1C2C35; }
.sectie-donker .schaal-merk { background: var(--wit); }
.sectie-donker .schaal-tekst { color: #97A6AD; }

/* ------------------------------------------------------------- kaarten -- */

.kaart {
  border: 1px solid var(--lijn);
  border-radius: var(--radius-groot);
  background: var(--wit);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.kaart { text-decoration: none; color: inherit; }
a.kaart:hover { border-color: var(--lijn-sterk); box-shadow: 0 8px 24px rgba(17,30,38,.07); }

.kaart-foto { position: relative; aspect-ratio: 4 / 3; background: var(--licht); }
.kaart-foto img { width: 100%; height: 100%; object-fit: cover; }
.kaart-foto .leeg {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grijs-licht);
}

.vlag {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 3px; background: var(--donker); color: var(--wit);
}
.vlag.verkocht { background: var(--grijs); }
.vlag.gereserveerd { background: var(--status-let-op); }

.kaart-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.kaart-titel { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.kaart-sub { font-size: 0.86rem; color: var(--grijs); margin: 2px 0 0; }
.kaart-motor {
  display: flex; align-items: baseline; gap: 8px; margin: 8px 0 0;
  font-size: 0.86rem; color: var(--donker);
}
.kaart-motor span {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--grijs); flex: none;
}

.kaart-meet {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 14px 0; border-block: 1px solid var(--lijn);
}
.kaart-meet-een { grid-template-columns: 1fr; }
.kaart-meet .meetwaarde-getal { font-size: 1.45rem; }

.kaart-voet { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: auto; }
.prijs { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; }
.prijs-bij { font-size: 0.78rem; color: var(--grijs-licht); }
.kaart-link { font-size: 0.9rem; font-weight: 600; color: var(--groen-donker); }

/* ------------------------------------------------------------- statuslijst */

.statuslijst { list-style: none; margin: 0; padding: 0; }
.statuslijst li {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px;
  align-items: start; padding: 14px 0; border-top: 1px solid var(--lijn);
}
.statuslijst li:first-child { border-top: 0; }
.statuslijst .onderdeel { font-weight: 600; }
.statuslijst .toelichting { grid-column: 1 / -1; font-size: 0.92rem; color: var(--grijs); margin: 0; }

.status {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grijs);
}
.status::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--grijs-licht); }
.status.gecontroleerd::before { background: var(--status-goed); }
.status.goed::before { background: var(--status-goed); } /* voor losse lijstjes buiten het dossier */
.status.afgesteld::before { background: var(--status-goed); }
.status.vervangen::before { background: var(--status-nieuw); }
.status.gebrek::before { background: var(--status-let-op); }

/* Revisiekans op een merkpagina: drie duidelijk verschillende signalen.
   "Soms" moet niet groen zijn — dan lees je het als ja. */
.status.kans-meestal::before { background: var(--status-goed); }
.status.kans-soms::before { background: var(--status-let-op); }
.status.kans-niet::before { background: #B3261E; }
.status.kans-onbekend::before { background: var(--grijs-licht); }

/* --------------------------------------------------------------- tabel -- */

.spec { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.spec th, .spec td { text-align: left; padding: 12px 0; border-top: 1px solid var(--lijn); vertical-align: top; }
.spec tr:first-child th, .spec tr:first-child td { border-top: 0; }
.spec th { font-weight: 500; color: var(--grijs); width: 46%; padding-right: 16px; }
.spec td { font-weight: 600; }

/* ------------------------------------------------------------- dossier -- */

.dossier-kop { padding: 22px 0 26px; border-bottom: 1px solid var(--lijn); }
.kruimels { font-size: 0.85rem; color: var(--grijs); margin-bottom: 14px; }
.kruimels a { color: var(--grijs); }

/* Op mobiel: foto's, dan prijs en afspraak, dan het dossier.
   Op desktop: dossier links, prijskaart rechts meelopend. */
.dossier {
  display: grid; gap: 20px; padding: 18px 0 52px;
  grid-template-areas: "foto" "media" "zij" "blok";
}
@media (min-width: 1000px) {
  .dossier {
    /* De galerij staat linksboven, met de prijskaart ernaast — zoals eerder.
       De linkerkolom is wel breder gemaakt, zodat de foto's groot blijven. */
    grid-template-columns: minmax(0,1.8fr) minmax(300px,1fr);
    grid-template-areas: "foto zij" "media zij" "blok zij";
    column-gap: 48px; row-gap: 0;
    align-items: start;
    padding-top: 24px;
  }
  .dossier-galerij { margin-bottom: 24px; }
}
.dossier-galerij { grid-area: foto; }
.dossier-media { grid-area: media; }
.dossier > .zijkaart { grid-area: zij; }
.dossier-blokken { grid-area: blok; }

.blok { padding: 26px 0; border-top: 1px solid var(--lijn); }
.blok h2 { font-size: 1.35rem; }

/* Kop van een dossierblok, met het onderscheid gemeten / gecontroleerd */
.blok-kop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 0.6em;
}
.blok-kop h2 { margin: 0; }
.soortlabel {
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.13em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 3px; white-space: nowrap;
}
.soortlabel.gemeten { background: var(--donker); color: var(--wit); }
.soortlabel.gecontroleerd { background: var(--licht); color: var(--groen-diep); }

.zijkaart {
  position: sticky; top: 88px;
  border: 1px solid var(--lijn); border-radius: var(--radius-groot);
  padding: 24px; background: var(--papier);
}
@media (max-width: 999px) { .zijkaart { position: static; } }

/* --------------------------------------------------------------- galerij --
   Bij een tweedehands fiets is de foto het belangrijkste verkoopargument, dus
   die krijgt de meeste ruimte. Op mobiel één foto per rij over de volle
   breedte; op desktop loopt de galerij over beide kolommen, met de eerste foto
   twee keer zo breed en twee keer zo hoog als de rest.
   De verhouding is overal 4:3.
   -------------------------------------------------------------------------- */
.galerij { display: grid; gap: 8px; grid-template-columns: 1fr; }
.galerij figure { margin: 0; display: flex; flex-direction: column; min-width: 0; }

.galerij-knop {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
  cursor: zoom-in; flex: 1 1 auto; min-height: 0; border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 0 0 1px var(--lijn) inset;
}
.galerij-knop:focus-visible { outline: 3px solid var(--groen); outline-offset: 3px; }
.galerij-knop img {
  display: block; width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover;
  background: var(--licht);
}
.galerij-knop:hover { box-shadow: 0 0 0 2px var(--groen) inset; }

.galerij figcaption { font-size: 0.8rem; color: var(--grijs); margin-top: 6px; }

@media (min-width: 700px) {
  .galerij { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* De eerste foto over de volle kolombreedte; de rest twee naast elkaar. */
  .galerij .groot { grid-column: 1 / -1; }
}

/* Meetblok met datum */
.meetkader {
  border: 1px solid var(--lijn); border-radius: var(--radius-groot);
  background: var(--papier); padding: 22px;
}
.meetkader + .meetkader { margin-top: 16px; }
.meetkader-kop {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--lijn);
}
.meetkader-kop h3 { margin: 0; font-size: 1.05rem; }
.meetkader-kop .datum { font-family: var(--mono); font-size: 0.72rem; color: var(--grijs); white-space: nowrap; }

/* Gebreken: bewust nuchter, niet weggestopt */
.gebreken { list-style: none; margin: 0; padding: 0; }
.gebreken li {
  padding: 12px 0 12px 24px; border-top: 1px solid var(--lijn); position: relative; font-size: 0.97rem;
}
.gebreken li:first-child { border-top: 0; }
.gebreken li::before {
  content: ""; position: absolute; left: 2px; top: 20px;
  width: 8px; height: 8px; border-radius: 999px; background: var(--status-let-op);
}
/* Zelfde opmaak, groene stip: uitgevoerd werk en meegeleverde spullen */
.gedaanlijst { list-style: none; margin: 0; padding: 0; }
.gedaanlijst li {
  padding: 12px 0 12px 24px; border-top: 1px solid var(--lijn); position: relative; font-size: 0.97rem;
}
.gedaanlijst li:first-child { border-top: 0; }
.gedaanlijst li::before {
  content: ""; position: absolute; left: 2px; top: 20px;
  width: 8px; height: 8px; border-radius: 999px; background: var(--status-goed);
}

/* --------------------------------------------------------------- filters */

.filterbalk {
  border: 1px solid var(--lijn); border-radius: var(--radius-groot);
  padding: 18px; background: var(--papier); margin-bottom: 28px;
}
.filterrij { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (min-width: 860px) { .filterrij { grid-template-columns: repeat(4, 1fr); } }
.filterveld { display: flex; flex-direction: column; gap: 6px; }
.filterveld label, .veld label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--grijs);
}
.filter-voet {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lijn); flex-wrap: wrap;
}
.telling { font-family: var(--mono); font-size: 0.8rem; color: var(--grijs); }
.wissen {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: 0.88rem; color: var(--groen-donker); text-decoration: underline; text-underline-offset: 3px;
}

/* ------------------------------------------------------- formuliervelden */

select, input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="url"], textarea {
  width: 100%; padding: 12px 13px; font: inherit; font-size: 1rem;
  color: var(--donker); background: var(--wit);
  border: 1px solid var(--lijn-sterk); border-radius: var(--radius);
  min-height: 48px;
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--grijs) 50%), linear-gradient(135deg, var(--grijs) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

.formulier { display: grid; gap: 22px; }
.veldrij { display: grid; gap: 22px; }
@media (min-width: 640px) { .veldrij-2 { grid-template-columns: 1fr 1fr; } }
.veld { display: flex; flex-direction: column; gap: 6px; }
.veld .hint { font-size: 0.84rem; color: var(--grijs); }
.veld .verplicht { color: var(--groen-donker); }

fieldset { border: 1px solid var(--lijn); border-radius: var(--radius-groot); padding: 22px; margin: 0; }
legend { font-weight: 600; padding: 0 8px; font-size: 1.02rem; }

.keuzes { display: grid; gap: 10px; }
.keuze { display: flex; gap: 10px; align-items: flex-start; font-size: 0.97rem; }
.keuze input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--groen-donker); flex: none; }

/* --------------------------------------------------------------- stappen */

.stappen { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 4px; }
.stappen li { counter-increment: s; display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid var(--lijn); }
.stappen li:first-child { border-top: 0; }
.stappen li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.85rem; color: var(--groen-donker);
  padding-top: 3px; font-weight: 500;
}
.stappen h3 { margin: 0 0 6px; font-size: 1.08rem; }
.stappen p { margin: 0; font-size: 0.97rem; color: var(--grijs); }

/* --------------------------------------------------------------- notitie */

.notitie {
  border-left: 3px solid var(--groen); background: var(--licht);
  padding: 18px 20px; border-radius: 0 var(--radius) var(--radius) 0;
}
.notitie p:last-child { margin-bottom: 0; }
.notitie h3 { font-size: 1rem; margin-bottom: 8px; }

/* ---------------------------------------------------------------- footer */

.voet { background: var(--donker); color: #A9B7BE; padding: 56px 0 28px; font-size: 0.93rem; }
.voet h4 { color: var(--wit); font-size: 0.82rem; font-family: var(--mono); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; margin-bottom: 14px; }
.voet a { color: #A9B7BE; text-decoration: none; }
.voet a:hover { color: var(--wit); text-decoration: underline; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.voet-raster { display: grid; gap: 36px; }
@media (min-width: 760px) { .voet-raster { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; } }
.voet-merk .merk-naam { color: var(--wit); font-size: 1.15rem; }
.voet-merk p { color: #8A99A1; font-size: 0.9rem; max-width: 34ch; }
.voet-onder {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid #23343D;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: 0.82rem; color: #7C8C94;
}
.voet-onder .mono { font-family: var(--mono); font-size: 0.78rem; }

/* ------------------------------------------------------------- overig --- */

.centreer { text-align: center; }
.verborgen { display: none !important; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.overslaan {
  position: absolute; left: -9999px; top: 0; background: var(--donker); color: var(--wit);
  padding: 12px 18px; z-index: 100;
}
.overslaan:focus { left: 0; }

.leegmelding {
  border: 1px dashed var(--lijn-sterk); border-radius: var(--radius-groot);
  padding: 48px 24px; text-align: center; color: var(--grijs);
}

/* ------------------------------------------------- merkenlijst revisie ---
   Losse labels in plaats van een opsomming: het is een greep uit wat kan,
   geen limitatieve lijst. De inhoud komt uit gegevens.js.
   -------------------------------------------------------------------------- */
.merkenlijst {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.merkenlijst li {
  font-family: var(--mono); font-size: 0.82rem;
  border: 1px solid var(--lijn); border-radius: 999px;
  padding: 6px 13px; background: var(--wit); color: var(--donker);
}

/* -------------------------------------------------------------- lichtbak --
   Schermvullend bekijken van een foto. Hier wordt niet bijgesneden: je ziet de
   hele foto, met de zwarte achtergrond eromheen.
   -------------------------------------------------------------------------- */
.lichtbak {
  position: fixed; inset: 0; z-index: 200;
  background: #0B1216;                 /* dekkend, anders schemert de balk erdoorheen */
  display: flex; flex-direction: column; padding: 12px; gap: 10px;
}
.lichtbak[hidden] { display: none; }
.lichtbak-balk {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.lichtbak-teller {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em;
  color: #8FA8A0; padding-left: 6px;
}
.lichtbak-figuur {
  flex: 1 1 auto; min-height: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
/* De hoogte staat vast uitgedrukt, anders rekent de browser hem niet uit en
   loopt een liggende foto onderaan het scherm uit beeld. */
.lichtbak-figuur img {
  max-width: 100%; width: auto; height: auto; object-fit: contain;
  max-height: calc(100vh - 160px);
  border-radius: var(--radius); background: #0B1216;
}
@supports (height: 100dvh) {
  .lichtbak-figuur img { max-height: calc(100dvh - 160px); }
}
.lichtbak-figuur figcaption {
  flex: none; color: #C4CFD4; font-size: 0.9rem; text-align: center; max-width: 70ch;
}
.lichtbak-figuur figcaption[hidden] { display: none; }
.lichtbak-voet { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; }

.lichtbak button {
  font: inherit; font-size: 0.9rem; color: var(--wit);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius); padding: 10px 16px; cursor: pointer;
  min-width: 44px; min-height: 44px;
}
.lichtbak button:hover { background: rgba(255,255,255,0.16); }
.lichtbak button:focus-visible { outline: 3px solid var(--groen); outline-offset: 2px; }
.lichtbak button[disabled] { opacity: 0.35; cursor: default; }
.lichtbak-sluit { font-family: var(--mono); letter-spacing: 0.08em; }

body.lichtbak-open { overflow: hidden; }

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

/* ------------------------------------------------------------- vangnet --
   Alleen op de foutpagina, en alleen zolang nog niet vaststaat of de fiets
   bestaat. Zie assets/js/vangnet.js. Zonder deze regels ziet de bezoeker
   eerst "Deze pagina bestaat niet" en pas daarna het dossier — een fout die
   er niet is. De markering bv-vangnet wordt door dat script gezet vóórdat de
   pagina getekend wordt, en weer weggehaald als het toch een echte fout is. */
html.bv-vangnet #hoofd > * { display: none; }
html.bv-vangnet #hoofd::after {
  content: "Een ogenblik\2026";
  display: block; padding: 120px 24px; text-align: center;
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--grijs);
}

/* ------------------------------------------------------- accutypes ------
   De kaarten op een merkpagina. De foto staat naast de tekst, want de
   bezoeker zoekt zijn eigen accu op het plaatje en leest de naam er pas
   daarna bij. Op een telefoon komt de foto boven de tekst.
   Een accutype zonder foto krijgt geen leeg kader: de tekst neemt dan de
   hele breedte in. */
.accutypes { display: grid; gap: 14px; margin-top: 18px; }
.accutype { display: grid; grid-template-columns: 220px 1fr; gap: 18px;
  align-items: start; background: #fff; border: 1px solid var(--lijn);
  border-radius: 8px; padding: 16px; scroll-margin-top: 80px; }
.accutype:not(:has(.accutype-foto)) { grid-template-columns: 1fr; }
.accutype-foto { background: var(--licht); border-radius: 6px; overflow: hidden; }
.accutype-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: contain; }
.accutype-tekst h3 { margin: 0 0 4px; font-size: 1.08rem; }
.accutype-bij { margin: 0 0 10px; font-size: .85rem; color: var(--grijs);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.typenummers { margin: 0 0 12px; font-size: .84rem; }
.typenummers span { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grijs); margin-right: 6px; }
.typenummers code { font-family: var(--mono); font-size: .82em; background: var(--papier);
  border: 1px solid var(--lijn); border-radius: 3px; padding: 2px 6px;
  margin-right: 4px; display: inline-block; }
.accutype table.caps { width: 100%; border-collapse: collapse; margin: 0 0 10px; }
.accutype table.caps thead th { font-family: var(--mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grijs);
  text-align: left; padding: 0 0 5px; font-weight: 400;
  border-bottom: 1px solid var(--lijn); }
.accutype table.caps thead th:last-child { text-align: right; }
.accutype table.caps tbody th { text-align: left; font-weight: 400; padding: 7px 0;
  border-bottom: 1px solid var(--lijn); }
.accutype table.caps tbody td { text-align: right; font-weight: 600; padding: 7px 0;
  border-bottom: 1px solid var(--lijn); white-space: nowrap; }
.accutype ul.letop { margin: 10px 0 0; padding-left: 18px; font-size: .84rem;
  color: var(--grijs); }
.accutype ul.letop li { margin-bottom: 4px; }

@media (max-width: 620px) {
  .accutype { grid-template-columns: 1fr; gap: 12px; }
  .accutype-foto { max-width: 260px; }
}

/* ------------------------------------------------ accu zoeken ----------
   Het keuzemenu op de accurevisiepagina. Het is een snelkoppeling naar de
   merkpagina's, geen vervanging: alle inhoud staat daar. */
.accuzoek { background: #fff; border: 1px solid var(--lijn); border-radius: 8px;
  padding: 20px; margin: 22px 0; }
.accuzoek h2 { margin: 0 0 4px; font-size: 1.15rem; }
.accuzoek .keuzes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 16px; }
.accuzoek label { display: block; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grijs);
  margin-bottom: 5px; }
.accuzoek select, .accuzoek input[type="search"] {
  width: 100%; font: inherit; font-size: 16px; padding: 11px 12px;
  border: 1px solid var(--lijn-sterk); border-radius: 6px; background: #fff;
  -webkit-appearance: none; appearance: none; }
.accuzoek select:disabled { background: var(--licht); color: var(--grijs); }
.accuzoek .uitkomst { margin-top: 16px; }
.zoekrij { display: block; padding: 11px 0; border-top: 1px solid var(--lijn); }
.zoekrij strong { display: block; }
.zoekrij .bij { font-size: .84rem; color: var(--grijs); }
.zoekrij .prijs-klein { float: right; font-weight: 600; }
.merkenlijst { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0;
  list-style: none; }
.merkenlijst a { display: inline-block; border: 1px solid var(--lijn-sterk);
  border-radius: 20px; padding: 7px 14px; font-size: .9rem; text-decoration: none; }
.merkenlijst a:hover { background: var(--licht); }

@media (max-width: 620px) {
  .accuzoek .keuzes { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- zoeken bovenaan ------
   Op de accurevisiepagina staat het keuzemenu meteen onder de kop, met de
   uitleg ernaast. De bezoeker komt met één vraag binnen — zit mijn accu
   erbij en wat kost het — en die moet hij kunnen stellen zonder eerst drie
   alinea's te lezen.

   Op een telefoon komt het menu eerst en de uitleg eronder; dat is ook de
   volgorde in de HTML, dus het klopt ook zonder opmaak en voor een
   schermlezer. */
.zoekbovenaan { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px; align-items: start; margin-top: 26px; }
.zoekbovenaan .accuzoek { margin: 0; position: sticky; top: 90px; }
.zoekuitleg p { margin-top: 0; }
.zoekuitleg .kortelijst { list-style: none; margin: 20px 0; padding: 0; }
.zoekuitleg .kortelijst li { position: relative; padding-left: 24px; margin-bottom: 9px;
  font-size: .93rem; }
.zoekuitleg .kortelijst li::before { content: ""; position: absolute; left: 2px; top: .48em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--groen, #1f5b2b); }

/* In de smallere kolom naast de tekst passen drie keuzelijsten net niet
   comfortabel naast elkaar; laat ze meebuigen in plaats van knijpen. */
.zoekbovenaan .accuzoek .keuzes {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

@media (max-width: 900px) {
  .zoekbovenaan { grid-template-columns: 1fr; gap: 28px; }
  .zoekbovenaan .accuzoek { position: static; }
}

/* --------------------------------------------------- capaciteit kiezen ---
   Op een merkpagina is elke capaciteit een knop naar het aanvraagformulier.
   Dat is het hele bestelproces: accu zoeken, capaciteit aantikken. Daarom
   moeten deze regels er ook uitzien als iets waar je op drukt — een prijs in
   een tabel nodigt nergens toe uit. */
.caps-kop { display: flex; justify-content: space-between; margin: 0 0 6px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grijs); }
.caps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.cap { display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: 10px; padding: 12px 14px; border: 1px solid var(--lijn-sterk);
  border-radius: 8px; text-decoration: none; color: inherit; background: #fff;
  transition: border-color .12s, background .12s, transform .06s; }
.cap:hover, .cap:focus-visible { border-color: var(--groen-donker, #1f5b2b);
  background: #f6faf7; }
.cap:active { transform: translateY(1px); }
.cap-maat { font-weight: 500; }
.cap-prijs { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cap-pijl { color: var(--groen-donker, #1f5b2b); font-size: 1.05rem; line-height: 1; }
.cap-doen { display: none; }
.cap:hover .cap-doen, .cap:focus-visible .cap-doen {
  display: inline; grid-column: 1 / -1; font-size: .76rem; color: var(--groen-donker, #1f5b2b);
  font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.cap-twijfel { margin: 0 0 4px; }

/* ------------------------------------------------------- merkkaarten -----
   De merken op de accurevisiepagina, met een accufoto erbij. Een rij
   tekstlinkjes wordt over het hoofd gezien; een plaatje van een accu die op de
   jouwe lijkt, niet. */
.merkkaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 10px; margin: 0; }
.merkkaart { display: flex; flex-direction: column; gap: 2px; padding: 10px;
  border: 1px solid var(--lijn); border-radius: 8px; background: #fff;
  text-decoration: none; color: inherit;
  transition: border-color .12s, box-shadow .12s, transform .06s; }
.merkkaart:hover, .merkkaart:focus-visible { border-color: var(--groen-donker, #1f5b2b);
  box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.merkkaart:active { transform: translateY(1px); }
.merkkaart-beeld { display: block; aspect-ratio: 4 / 3; background: var(--licht);
  border-radius: 5px; overflow: hidden; margin-bottom: 6px; }
.merkkaart-beeld img { width: 100%; height: 100%; object-fit: contain; display: block; }
.merkkaart-naam { font-weight: 600; font-size: .95rem; }
.merkkaart-bij { font-size: .76rem; color: var(--grijs); }

/* ------------------------------------------------------- je keuze --------
   Boven het aanvraagformulier: wat de bezoeker heeft aangeklikt. */
.gekozen { background: #f6faf7; border: 1px solid #cfe3d4; border-left: 3px solid
  var(--groen-donker, #1f5b2b); border-radius: 8px; padding: 16px 18px; margin-bottom: 24px; }
.gekozen h3 { margin: 2px 0 8px; font-size: 1.1rem; }
.gekozen-regel { display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid #cfe3d4; }
.gekozen-regel strong { font-size: 1.35rem; white-space: nowrap; }
.gekozen .klein { margin: 8px 0 0; }

/* Ruimte boven het keuzeblok als er met een anker naartoe wordt gesprongen. */
#gekozen { scroll-margin-top: 24px; }

/* ------------------------------------------------------- eigen foto's ----
   Plekken voor eigen beeld op de inhoudspagina's. De verhouding staat per foto
   in de HTML, zodat de pagina niet verspringt terwijl het bestand nog laadt.

   Ontbreekt de foto, dan staat dit blok er helemaal niet: assembleer.py laat
   het weg als het bestand niet bestaat. Er is dus nooit een lege plek of een
   gebroken plaatje — dat is de reden dat hier geen minimumhoogte of
   plaatshouderkleur nodig is. */
.eigenfoto { margin: 24px 0 0; background: var(--licht); border-radius: 8px;
  overflow: hidden; position: relative; }
.eigenfoto picture { display: block; width: 100%; height: 100%; }
.eigenfoto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eigenfoto figcaption { position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 10px 14px; font-size: .8rem; line-height: 1.45; color: #fff;
  background: linear-gradient(to top, rgba(17,30,38,.86), rgba(17,30,38,0)); }
@media (max-width: 720px) {
  .eigenfoto figcaption { font-size: .76rem; padding: 8px 12px; }
}

/* Werkwijze: meetapparatuur naast de introductie. */
.werkwijze-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px;align-items:center}
.werkwijze-foto{margin:0;min-width:0}
.werkwijze-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.werkwijze-foto figcaption{margin-top:8px;color:var(--grijs);font-size:.75rem}
.werkwijze-intro-tekst{min-width:0}
@media(max-width:760px){.werkwijze-intro{grid-template-columns:1fr;gap:24px}}

/* Homepage en accurevisie */
.home-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:48px}
.home-vernieuwd h1{max-width:20ch;font-size:clamp(2rem,3.6vw,3.2rem)}
.home-foto{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:right center;border-radius:14px}
.home-afspraak{margin:20px 0 0;color:var(--grijs)}
.home-aanbod-knop{text-align:center;margin-top:32px}
#uitgelicht{scroll-margin-top:90px}
.revisie-intro .accuzoek{position:static}
.revisie-galerij{margin-top:28px}
.revisie-galerij .merkkaarten{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;grid-auto-rows:1fr}
.revisie-galerij .merkkaart{min-width:0}
.revisie-galerij .merkkaart-beeld picture{display:block;width:100%;height:100%}
.revisie-galerij .merkkaart-bij{overflow-wrap:anywhere}
@media(max-width:1050px){.revisie-galerij .merkkaarten{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.home-intro{grid-template-columns:1fr;gap:28px}.home-foto{aspect-ratio:16/9}.revisie-galerij .merkkaarten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.revisie-galerij .merkkaarten{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Beeld en pagina-introducties */
.kaart-foto img{filter:brightness(1.07) contrast(1.08) saturate(1.05)}
.revisie-merken-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(260px,1fr);gap:32px;align-items:start}
.revisie-merken-eerste .merkkaarten{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.revisie-merken-rest .merkkaarten{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.revisie-merken-layout .zoekuitleg p{margin-top:0}
.pagina-sfeer{position:relative;isolation:isolate;overflow:hidden;background:#f3f5f1}
.pagina-sfeer::before,.pagina-sfeer::after{content:"";position:absolute;inset:0;pointer-events:none}
.pagina-sfeer::before{z-index:-2;background-repeat:no-repeat;background-position:right center;background-size:auto 100%}
.pagina-sfeer::after{z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.88) 52%,rgba(255,255,255,.60))}
.accus-sfeer::before{background-image:url('../img/accus-cirkel.jpg')}
.verkopen-sfeer::before{background-image:url('../img/aanbod-ebike-achtergrond.jpg')}
.contact-sfeer::before{background-image:url('../img/accu-meetapparatuur.jpg')}
@media(max-width:1050px){.revisie-merken-rest .merkkaarten{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.revisie-merken-layout{grid-template-columns:1fr;gap:24px}.revisie-merken-rest .merkkaarten{grid-template-columns:repeat(3,minmax(0,1fr))}.pagina-sfeer::before{background-size:auto 100%;background-position:68% center}.pagina-sfeer::after{background:rgba(255,255,255,.90)}}
@media(max-width:380px){.revisie-merken-rest .merkkaarten{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Op desktop loopt hetzelfde raster onder het zoekblok door. */
.revisie-galerij .merkkaart-beeld{width:100%;flex-shrink:0;align-self:stretch}
@media(min-width:901px){
  .revisie-overzicht{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:26px;align-items:start}
  .revisie-overzicht .revisie-intro,
  .revisie-overzicht .revisie-galerij,
  .revisie-overzicht .merkkaarten{display:contents}
  .revisie-overzicht .accuzoek{grid-column:1 / 4;grid-row:1;margin:0}
  .revisie-overzicht .zoekuitleg{grid-column:4 / 7;grid-row:1 / 4;padding-left:16px}
  .revisie-overzicht .revisie-galerij > p{grid-column:1 / 4;grid-row:2;margin:0!important}
  .revisie-overzicht .merkkaart{height:250px;min-width:0}
  .revisie-overzicht .merkkaart:nth-child(1){grid-column:1;grid-row:3}
  .revisie-overzicht .merkkaart:nth-child(2){grid-column:2;grid-row:3}
  .revisie-overzicht .merkkaart:nth-child(3){grid-column:3;grid-row:3}
}

/* BikeVibes — geschat bereik bij accurevisie-capaciteiten */
.cap-bereik{
  display:block;
  margin-top:3px;
  font-size:.78rem;
  line-height:1.25;
  font-weight:600;
  color:#557078;
}
.cap-bereik-uitleg{
  margin:.6rem 0 0;
  font-size:.8rem;
  line-height:1.45;
  color:#687a80;
}


/* BikeVibes fix: witte achtergrond achter accufoto's */
.accu-card img,
.accu-overzicht img,
.accu-detail img,
.card-media img,
.product-media img,
.accu-foto,
.accu-grid img,
.accu-hero img {
  background: #fff !important;
}