/* ==========================================================
   CHEBLI MOTORS: kleurverdeling ± 70% wit / 20% zwart / 10% rood
   ========================================================== */
:root {
  --wit: #ffffff;
  --lichtgrijs: #f4f4f4;
  --zwart: #000000;
  --antraciet: #1a1a1a;
  --grijs: #5a5a5a;
  --rood: #e3161b;
  --rood-donker: #b80f13;
  --rand: #e6e6e6;
  --max: 1180px;
  --radius: 6px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 79px; } /* ankers niet onder de vaste header laten vallen */
body {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--antraciet);
  background: var(--wit);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* Titels: Russo One (heeft maar één gewicht, dus geen vet laten namaken) */
h1, h2, h3, h4, .waarom strong {
  font-family: "Russo One", "Montserrat", sans-serif; font-weight: 400; letter-spacing: .02em;
}
.knop, nav a { letter-spacing: .06em; }
h1, h2 { text-transform: uppercase; line-height: 1.15; }
h2 { font-size: clamp(1.45rem, 2.7vw, 2.05rem); margin-bottom: 14px; }
.label {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--rood); margin-bottom: 10px;
}
.sectie { padding: 90px 0; }
.sectie-grijs { background: var(--lichtgrijs); }
.intro { max-width: 620px; color: var(--grijs); margin-bottom: 44px; }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--radius);
  font-weight: 700; font-size: .85rem; text-transform: uppercase;
  border: 2px solid transparent; cursor: pointer; transition: .2s;
}
.knop-rood { background: var(--rood); color: var(--wit); }
.knop-rood:hover { background: var(--rood-donker); }
.knop-lijn { border-color: var(--wit); color: var(--wit); }
.knop-lijn:hover { background: var(--wit); color: var(--zwart); }
.knop-zwart { background: var(--zwart); color: var(--wit); }
.knop-zwart:hover { background: var(--rood); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--zwart); border-bottom: 3px solid var(--rood);
}
.header .container { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.header .logo { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header .logo img { height: 36px; width: auto; }
/* Logo: achterlichten gaan aan bij hover, pinkers knipperen 2x bij een klik (zie main.js).
   Beide lagen zijn een kopie van de onderste strook van het embleem (alleen de lichtstrips), met een filter erover. */
.logo-auto { position: relative; display: block; }
.logo-auto img { display: block; }
.logo-auto::before, .logo-auto::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; pointer-events: none;
  background: url(../img/logo-embleem.png) center bottom / 100% auto no-repeat; opacity: 0;
}
.logo-auto::before {
  filter: brightness(1.4) saturate(1.3) drop-shadow(0 0 3px rgba(255, 30, 30, .9)) drop-shadow(0 0 7px rgba(227, 22, 27, .6));
  transition: opacity .25s;
}
.logo-auto::after { filter: hue-rotate(50deg) brightness(2.4) saturate(1.6) drop-shadow(0 0 4px rgba(255, 150, 0, .9)); }
.logo:hover .logo-auto::before, .logo:focus-visible .logo-auto::before { opacity: 1; }
.logo-auto.pinkt::after { animation: logo-pinker .4s ease-in-out 2; }
@keyframes logo-pinker { 0% { opacity: 0; } 10%, 50% { opacity: 1; } 65%, 100% { opacity: 0; } }
.logo-tekst {
  font-family: "Saira", "Montserrat", sans-serif; /* logo: sportief, zonder schreefjes op de I */
  color: var(--wit); font-weight: 800; font-size: 1.22rem; line-height: 1;
  text-transform: uppercase; letter-spacing: .12em; white-space: nowrap;
  border-left: 1px solid #3a3a3a; padding-left: 14px;
}
.logo-tekst b { color: var(--rood); font-weight: 800; }
/* Menu in dezelfde volgorde als de secties op de homepagina; .actief volgt het scrollen (zie main.js) */
nav ul { list-style: none; display: flex; gap: 28px; align-items: center; }
nav a { display: block; padding: 6px 0; color: #d9d9d9; font-weight: 600; font-size: .8rem; text-transform: uppercase; transition: .2s; }
nav a:hover, nav a.actief { color: var(--wit); }
nav a.actief:not(.knop) { box-shadow: inset 0 -2px 0 var(--rood); }
nav .nav-cta { margin-left: 6px; }
nav .knop[aria-current="page"] { background: var(--rood-donker); }
nav .knop { padding: 10px 18px; font-size: .8rem; }
.menu-knop { display: none; background: none; border: 0; color: var(--wit); font-size: 1.8rem; cursor: pointer; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--wit) 0%, var(--lichtgrijs) 100%); color: var(--antraciet);
  position: relative; overflow: hidden; border-bottom: 1px solid var(--rand);
}
.hero .container { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; padding-top: 60px; padding-bottom: 70px; }
.hero h1 { margin-top: 0; font-size: clamp(2.4rem, 5.5vw, 4.2rem); margin-bottom: 18px; }
.hero h1 span { color: var(--rood); }
.hero p { color: var(--grijs); font-size: 1.02rem; max-width: 540px; margin-bottom: 30px; }
.hero .knoppen { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-troeven { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; font-size: .85rem; font-weight: 600; }
.hero-troeven li { display: flex; align-items: center; gap: 8px; }
.hero-troeven li::before {
  content: ""; width: 10px; height: 5px; margin-top: -3px;
  border-left: 2px solid var(--rood); border-bottom: 2px solid var(--rood); transform: rotate(-45deg);
}
.hero .knop-lijn { border-color: var(--zwart); color: var(--zwart); }
.hero .knop-lijn:hover { background: var(--zwart); color: var(--wit); }
.hero-visual { position: relative; }
.hero-visual img {
  width: 100%; height: auto; max-width: 540px; margin-left: auto; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--radius); box-shadow: 0 24px 50px rgba(0,0,0,.18);
}
.hero-visual::after {
  content: ""; position: absolute; right: 0; bottom: -10px; width: min(540px, 100%); height: 4px;
  background: var(--rood); border-radius: 2px;
}

.page-hero { background: var(--zwart); color: var(--wit); padding: 70px 0 60px; }
.page-hero p { color: #bdbdbd; max-width: 600px; }

/* ---------- Info-balk ---------- */
.infobalk { background: var(--wit); border-bottom: 1px solid var(--rand); }
.infobalk .container { display: grid; grid-template-columns: repeat(3, 1fr); }
.infobalk a, .infobalk div.item {
  display: flex; align-items: center; gap: 14px; padding: 24px 20px;
  border-right: 1px solid var(--rand);
}
.infobalk .container > :last-child { border-right: 0; }
.infobalk svg { flex: 0 0 26px; color: var(--rood); }
.infobalk small { display: block; color: var(--grijs); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.infobalk strong { font-weight: 600; overflow-wrap: anywhere; }
.infobalk a:hover strong { color: var(--rood); }

/* ---------- Diensten ---------- */
.diensten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.dienst {
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 40px; border-top: 4px solid var(--zwart); transition: .25s;
}
.dienst:hover { border-top-color: var(--rood); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.07); }
.dienst .icoon {
  width: 58px; height: 58px; border-radius: 50%; background: var(--zwart); color: var(--wit);
  display: grid; place-items: center; margin-bottom: 22px;
}
.dienst h3 { font-size: 1.2rem; text-transform: uppercase; margin-bottom: 10px; }
.dienst p { color: var(--grijs); margin-bottom: 16px; }
.dienst ul { list-style: none; }
.dienst li { padding: 6px 0 6px 24px; position: relative; border-bottom: 1px dashed var(--rand); }
.dienst li::before { content: ""; position: absolute; left: 0; top: 15px; width: 10px; height: 2px; background: var(--rood); }

/* ---------- Waarom ---------- */
.waarom { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.waarom div { padding: 10px 0; }
.waarom strong { display: block; font-size: 1rem; text-transform: uppercase; margin-bottom: 6px; }
.waarom strong::before { content: ""; display: block; width: 34px; height: 3px; background: var(--rood); margin-bottom: 14px; }
.waarom p { color: var(--grijs); font-size: .9rem; }

/* ---------- Even voorstellen ---------- */
.sectie-zwart { background: var(--zwart); color: var(--wit); }
.voorstellen { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: center; }
.voorstellen-foto { position: relative; }
.voorstellen-foto img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); }
.voorstellen-foto::after {
  content: ""; position: absolute; left: 0; bottom: -10px; width: 100%; height: 4px;
  background: var(--rood); border-radius: 2px;
}
.voorstellen-tekst p { color: #bdbdbd; max-width: 620px; margin-bottom: 16px; }
.voorstellen-tekst .voorstellen-lead { color: var(--wit); font-size: 1.15rem; font-weight: 600; }
.voorstellen-tekst .voorstellen-doel {
  color: var(--wit); font-size: 1.05rem; font-weight: 600;
  border-left: 3px solid var(--rood); padding-left: 18px; margin: 28px 0;
}
.voorstellen-tekst .voorstellen-slot {
  font-family: "Russo One", "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: .02em;
  color: var(--wit); margin-bottom: 0;
}
.voorstellen-slot .rood { color: var(--rood); }
/* Waarom-punten onder het verhaal, in dezelfde zwarte sectie */
.waarom-rij {
  display: grid; grid-template-columns: 230px 1fr; gap: 40px; align-items: start;
  margin-top: 80px; padding-top: 56px; border-top: 1px solid #222;
}
.waarom-kop { font-size: 1.45rem; line-height: 1.2; text-transform: uppercase; }
.sectie-zwart .waarom p { color: #9a9a9a; }

/* ---------- Occasies ---------- */
.kop-rij { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.kop-rij .intro { margin-bottom: 0; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters button {
  font: inherit; font-size: .85rem; font-weight: 600; padding: 8px 16px; border-radius: 40px;
  border: 1px solid var(--rand); background: var(--wit); cursor: pointer; transition: .2s;
}
.filters button:hover { border-color: var(--zwart); }
.filters button.actief { background: var(--zwart); color: var(--wit); border-color: var(--zwart); }

.auto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.auto {
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: .25s;
}
.auto:hover { box-shadow: 0 16px 34px rgba(0,0,0,.09); transform: translateY(-4px); }
.auto-foto { position: relative; aspect-ratio: 4/3; background: var(--lichtgrijs); overflow: hidden; }
.auto-foto img { width: 100%; height: 100%; object-fit: cover; }
.auto-foto .geen-foto { width: 100%; height: 100%; display: grid; place-items: center; color: #b9b9b9; }
.badge {
  position: absolute; top: 14px; left: 14px; background: var(--rood); color: var(--wit);
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 3px;
}
.badge.verkocht { background: var(--zwart); }
.auto.is-verkocht .auto-foto img { filter: grayscale(1) opacity(.6); }
.auto.is-verkocht:hover { box-shadow: none; transform: none; }
.auto.is-verkocht:hover .auto-foto img { transform: none; }
.auto-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.auto-body h3 { font-size: 1.05rem; text-transform: uppercase; line-height: 1.25; }
.auto-body .uitvoering { color: var(--grijs); font-size: .85rem; margin-bottom: 16px; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: .84rem; margin-bottom: 20px; }
.specs span { display: flex; align-items: center; gap: 7px; }
.specs svg { color: var(--rood); flex: 0 0 16px; }
.auto-voet {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--rand); padding-top: 16px; gap: 10px;
}
.prijs { font-size: 1.25rem; font-weight: 700; white-space: nowrap; }
.auto-voet .knop { padding: 9px 14px; font-size: .75rem; }
.leeg { grid-column: 1/-1; text-align: center; color: var(--grijs); padding: 40px; }
.centreer { text-align: center; margin-top: 44px; }

.foto-aantal {
  position: absolute; right: 12px; bottom: 12px; background: rgba(0,0,0,.7); color: var(--wit);
  font-size: .75rem; font-weight: 600; padding: 4px 9px; border-radius: 3px;
}
/* Hele kaart klikbaar via de titel-link; Car-Pass-link ligt erboven */
.auto { position: relative; }
.auto-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.auto-voet .knop { margin-left: 0; }
.carpass { position: relative; z-index: 2; display: inline-flex; margin-left: auto; padding: 4px 6px; border-radius: 4px; transition: .2s; }
.carpass img { height: 24px; width: auto; }
a.carpass:hover { background: var(--lichtgrijs); }
.carpass.op-aanvraag { cursor: help; }

.carpass-blok {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 22px;
  border: 1px solid var(--rand); border-radius: var(--radius); font-weight: 600; font-size: .88rem;
}
.carpass-blok .carpass { margin-left: 0; padding: 0; }
.carpass-groot img { height: 34px; }
.carpass-blok a:not(.carpass) { color: var(--rood); }
.carpass-blok a:not(.carpass):hover { text-decoration: underline; }
.carpass-blok small { display: block; color: var(--grijs); font-weight: 400; font-size: .8rem; }

.auto-foto img { transition: transform .4s; }
.auto:hover .auto-foto img { transform: scale(1.04); }

/* Horizontale rij "andere occasies" */
.auto-rij {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 56px) / 3); gap: 28px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 18px;
}
.auto-rij .auto { scroll-snap-align: start; }

/* Carrousel uitgelichte occasies (homepage) */
.carrousel { position: relative; }
.carrousel-rij { scrollbar-width: none; }
.carrousel-rij::-webkit-scrollbar { display: none; }
.carrousel-rij:focus-visible { outline: 2px solid var(--rood); outline-offset: 4px; border-radius: var(--radius); }
.carrousel-pijl {
  position: absolute; top: calc(50% - 9px); transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--wit); color: var(--zwart);
  box-shadow: 0 8px 22px rgba(0,0,0,.16); transition: background .2s, color .2s, transform .2s;
}
.carrousel-pijl:hover, .carrousel-pijl:focus-visible { background: var(--rood); color: var(--wit); }
.carrousel-pijl:active { transform: translateY(-50%) scale(.94); }
.carrousel-pijl[hidden] { display: none; }
.carrousel-pijl.vorige { left: -24px; }
.carrousel-pijl.volgende { right: -24px; }
@media (max-width: 1240px) { .carrousel-pijl.vorige { left: -8px; } .carrousel-pijl.volgende { right: -8px; } }

/* ---------- Detailpagina wagen ---------- */
.wagen-nav { background: var(--antraciet); color: #d9d9d9; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.wagen-nav .container { display: flex; justify-content: space-between; align-items: center; height: 52px; gap: 12px; }
.wagen-nav a { cursor: pointer; transition: .2s; }
.wagen-nav a:hover { color: var(--wit); }
.wagen-nav .blader { display: flex; align-items: center; gap: 18px; }
.wagen-nav .blader[hidden] { display: none; }
.wagen-nav .blader a { border: 1px solid #444; border-radius: var(--radius); padding: 4px 12px; }
.wagen-nav .blader a:hover { border-color: var(--rood); background: var(--rood); }
.wagen-nav #positie { color: #8c8c8c; font-size: .72rem; }

.wagen-detail { padding-top: 40px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 40px; align-items: start; }

.galerij-groot { position: relative; aspect-ratio: 3/2; background: var(--zwart); border-radius: var(--radius); overflow: hidden; }
.galerij-groot > img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.galerij-groot .geen-foto { height: 100%; display: grid; place-items: center; color: #777; }
.g-pijl, .lb-pijl {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.6); color: var(--wit); font-size: 2rem; line-height: 1; cursor: pointer; transition: .2s;
}
.g-pijl:hover, .lb-pijl:hover { background: var(--rood); }
.g-vorige { left: 14px; } .g-volgende { right: 14px; }
.g-teller, .g-vergroot {
  position: absolute; bottom: 14px; background: rgba(0,0,0,.7); color: var(--wit);
  font-size: .85rem; font-weight: 600; padding: 6px 12px; border-radius: 3px; border: 0;
}
.g-teller { left: 14px; }
.g-vergroot { right: 14px; font: inherit; font-size: .85rem; cursor: pointer; }
.g-vergroot:hover { background: var(--rood); }

.galerij-duim { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.galerij-duim button { flex: 0 0 auto; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 4px; overflow: hidden; opacity: .55; transition: .2s; outline: 2px solid transparent; outline-offset: -2px; }
.galerij-duim img { width: 104px; height: 70px; object-fit: cover; }
.galerij-duim button:hover, .galerij-duim button.actief { opacity: 1; }
.galerij-duim button.actief { outline-color: var(--rood); }
.foto-credit { margin-top: 10px; font-size: .72rem; color: var(--grijs); }
.foto-credit a { text-decoration: underline; }
.foto-credit a:hover { color: var(--rood); }

.detail-info { position: sticky; top: 100px; border: 1px solid var(--rand); border-top: 4px solid var(--rood); border-radius: var(--radius); padding: 30px; }
.detail-info h1 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); }
.detail-info .uitvoering { color: var(--grijs); font-size: .92rem; margin-top: 4px; }
.detail-info .prijs { font-size: 2.1rem; color: var(--rood); margin: 14px 0 2px; line-height: 1.1; }
.detail-info .extra { font-size: .85rem; font-weight: 600; margin-bottom: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.chips span { display: inline-flex; align-items: center; gap: 6px; background: var(--lichtgrijs); padding: 6px 12px; border-radius: 40px; font-size: .82rem; font-weight: 500; }
.chips svg { color: var(--rood); }
.detail-info .knoppen { display: grid; gap: 10px; }
.detail-info .knoppen .knop { justify-content: center; }
.detail-info .klein { color: var(--grijs); font-size: .85rem; margin-top: 16px; }
.route-link {
  display: flex; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rand);
  font-size: .88rem; font-weight: 600; line-height: 1.4; transition: .2s;
}
.route-link svg { color: var(--rood); flex: 0 0 18px; margin-top: 1px; }
.route-link small { display: block; margin-top: 4px; color: var(--rood); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.route-link:hover { color: var(--rood); }

.detail-onder { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 40px; margin-top: 56px; }
.detail-onder h2 { font-size: 1.3rem; margin-bottom: 14px; }
.detail-onder .omschrijving { color: var(--grijs); margin-bottom: 36px; max-width: 680px; white-space: pre-line; } /* enters uit het beheer behouden */
.highlights { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.highlights li { padding: 9px 0 9px 28px; position: relative; border-bottom: 1px dashed var(--rand); }
.highlights li::before {
  content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px;
  border-left: 2px solid var(--rood); border-bottom: 2px solid var(--rood); transform: rotate(-45deg);
}
.spec-tabel { width: 100%; border-collapse: collapse; }
.spec-tabel td { padding: 10px 0; border-bottom: 1px solid var(--rand); }
.spec-tabel td:first-child { color: var(--grijs); width: 48%; }
.spec-tabel td:last-child { font-weight: 600; }

/* Volledig scherm */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.95); display: none; place-items: center; padding: 50px 70px; }
.lightbox.open { display: grid; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 100px); object-fit: contain; user-select: none; }
.lb-vorige { left: 16px; } .lb-volgende { right: 16px; }
.lb-sluit {
  position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.12); color: var(--wit); font-size: 1.6rem; cursor: pointer;
}
.lb-sluit:hover { background: var(--rood); }
.lb-teller { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #ccc; font-size: .9rem; }

/* ---------- CTA ---------- */
.cta { background: var(--rood); color: var(--wit); padding: 60px 0; }
.cta .container { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta h2 { margin-bottom: 4px; }
.cta p { opacity: .9; }
.cta .knop-zwart:hover { background: var(--wit); color: var(--zwart); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; }
.contact-lijst { list-style: none; margin-top: 10px; }
.contact-lijst li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rand); }
.contact-lijst svg { color: var(--rood); flex: 0 0 24px; margin-top: 2px; }
.contact-lijst small { display: block; color: var(--grijs); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.contact-lijst a:hover { color: var(--rood); }
/* Knop "Route plannen": wit blijven bij hover en het icoon niet rood kleuren zoals de andere contacticonen */
.contact-lijst .route-knop { display: flex; width: max-content; margin-top: 12px; padding: 10px 18px; font-size: .75rem; }
.contact-lijst .route-knop, .contact-lijst .route-knop:hover { color: var(--wit); }
.contact-lijst .route-knop svg { color: currentColor; flex: none; margin: 0; }
.kaart { border-radius: var(--radius); overflow: hidden; min-height: 380px; border: 1px solid var(--rand); }
.kaart iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }


/* ---------- Footer ---------- */
.footer { background: var(--zwart); color: #a8a8a8; padding: 60px 0 0; font-size: .9rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer img { width: 220px; margin-bottom: 14px; }
.footer h4 { color: var(--wit); text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; margin-bottom: 14px; }
.footer ul { list-style: none; }
.footer li { padding: 4px 0; }
.footer a:hover { color: var(--wit); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero .container, .contact-grid { grid-template-columns: 1fr; }
  .detail-grid, .detail-onder { grid-template-columns: minmax(0, 1fr); }
  .detail-info { position: static; }
  .auto-rij { grid-auto-columns: calc((100% - 28px) / 2); }
  .hero-visual img { margin: 0 auto; max-width: 520px; }
  .hero-visual::after { left: 50%; right: auto; transform: translateX(-50%); width: min(520px, 100%); }
  .auto-grid { grid-template-columns: repeat(2, 1fr); }
  .waarom { grid-template-columns: repeat(2, 1fr); }
  .voorstellen { grid-template-columns: 1fr; gap: 48px; }
  .voorstellen-foto { max-width: 520px; }
  .waarom-rij { grid-template-columns: 1fr; gap: 24px; margin-top: 64px; padding-top: 48px; }
  .waarom-kop br { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1160px) {
  nav ul { gap: 20px; }
  .logo-tekst { font-size: 1.05rem; letter-spacing: .1em; }
}
@media (max-width: 880px) {
  .menu-knop { display: block; width: 44px; height: 44px; margin-right: -8px; line-height: 1; }
  nav ul {
    position: absolute; top: 79px; left: 0; right: 0; background: var(--zwart);
    flex-direction: column; align-items: stretch; gap: 0; padding: 4px 20px 20px; display: none;
    border-bottom: 3px solid var(--rood); box-shadow: 0 18px 30px rgba(0, 0, 0, .25);
  }
  nav ul.open { display: flex; }
  nav li:not(.nav-cta) a { padding: 15px 0; border-bottom: 1px solid #1f1f1f; font-size: .85rem; }
  nav a.actief:not(.knop) { box-shadow: none; color: var(--rood); }
  nav .nav-cta { margin: 18px 0 0; }
  nav .knop { display: flex; justify-content: center; padding: 14px 18px; font-size: .85rem; }
}
@media (max-width: 760px) {
  .header .logo { gap: 10px; }
  .header .logo img { height: 28px; }
  .logo-tekst { font-size: 1rem; letter-spacing: .08em; padding-left: 10px; }
  .infobalk .container, .diensten, .auto-grid, .footer-grid { grid-template-columns: 1fr; }
  .infobalk a, .infobalk div.item { border-right: 0; border-bottom: 1px solid var(--rand); padding-left: 0; padding-right: 0; }
  .sectie { padding: 64px 0; }
  .dienst { padding: 28px; }
  .auto-rij { grid-auto-columns: 82%; gap: 16px; }
  .wagen-nav .blader a span { display: none; }
  .wagen-nav .blader { gap: 10px; }
  .wagen-detail { padding-top: 20px; }
  .detail-info { padding: 22px; }
  .highlights { grid-template-columns: 1fr; }
  .galerij-duim img { width: 78px; height: 54px; }
  .g-pijl { width: 40px; height: 40px; font-size: 1.6rem; }
  .lightbox { padding: 50px 0; }
  .lb-pijl { top: auto; bottom: 8px; transform: none; }
}
@media (max-width: 480px) { .waarom { grid-template-columns: 1fr; } }

/* ---------- Baseline ---------- */
/* Langste regel "DRIVEN BY YOUR" is in Russo One 8,8× de lettergrootte breed: grootte zo gekozen dat ze altijd past */
.hero .hero-titel { font-size: clamp(2.2rem, 5.1vw, 3.9rem); line-height: 1.08; letter-spacing: 0; margin-bottom: 24px; }
@media (max-width: 960px) { .hero .hero-titel { font-size: min(9.5vw, 3.9rem); } }
.hero .hero-titel span { display: block; color: var(--antraciet); white-space: nowrap; }
.hero .hero-titel .rood { color: var(--rood); }

.hero-keuze { display: grid; gap: 12px; max-width: 480px; }
.keuze {
  display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 14px;
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,.05); transition: .2s;
}
.keuze:hover { border-color: var(--rood); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.09); }
.keuze-icoon {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--zwart); color: var(--wit); display: grid; place-items: center; transition: .2s;
}
.keuze:hover .keuze-icoon { background: var(--rood); }
.keuze-tekst small { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--grijs); }
.keuze-tekst strong { display: block; font-size: .9rem; font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: .02em; }
.keuze-pijl { margin-left: auto; color: var(--rood); font-size: 1.25rem; transition: transform .2s; }
.keuze:hover .keuze-pijl { transform: translateX(4px); }
@media (max-width: 760px) {
  .hero .hero-titel span { white-space: normal; }
}
/* Zelfde opbouw als de hero-titel, kleiner geschaald voor de footerkolom (wit i.p.v. zwart op de donkere achtergrond) */
.footer .baseline {
  font-family: "Russo One", "Montserrat", sans-serif; text-transform: uppercase;
  font-size: 1.35rem; line-height: 1.1; letter-spacing: 0; margin-top: 6px;
}
.footer .baseline span { display: block; color: var(--wit); white-space: nowrap; }
.footer .baseline .rood { color: var(--rood); }

/* ---------- WhatsApp ---------- */
.knop-whatsapp { background: #25d366; color: var(--wit); }
.knop-whatsapp:hover { background: #1da851; }
.wa-zwevend {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: flex; align-items: center; gap: 8px; padding: 13px 18px 13px 15px; border-radius: 40px;
  background: #25d366; color: var(--wit); font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.22); transition: .2s;
}
.wa-zwevend svg { width: 24px; height: 24px; }
.wa-zwevend:hover { background: #1da851; transform: translateY(-2px); }
@media (max-width: 760px) {
  .wa-zwevend { right: 16px; bottom: 16px; padding: 14px; }
  .wa-zwevend span { display: none; }
}

/* ---------- Onderste balk + credit ---------- */
.f-bar { background: var(--zwart); border-top: 1px solid #1f1f1f; color: #8c8c8c; font-size: .78rem; }
.f-bar .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px; padding-top: 18px; padding-bottom: 18px; }
.f-brand { font-family: "Saira", "Montserrat", sans-serif; font-weight: 800; letter-spacing: .12em; color: var(--wit); }
.f-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.f-links a, .f-admin { color: #a8a8a8; transition: .2s; }
.f-links a:hover, .f-admin:hover { color: var(--wit); }
.f-admin { opacity: .5; }

.f-credit {
  position: relative; overflow: hidden; background: #0b0b0b; color: #6f6f6f;
  text-align: center; padding: 12px 20px; font-size: .74rem; letter-spacing: .04em;
}
.fc-text .name { color: #bdbdbd; font-weight: 600; transition: .2s; }
.fc-text:hover .name { color: var(--rood); }
/* Raceautootje volgt de cursor over de footer (zie main.js); rook verschijnt als het snel rijdt */
.fc-f1, .fc-smoke {
  position: absolute; top: 50%; left: 0; font-size: 1.45rem; line-height: 1;
  pointer-events: none; transform: translateY(-50%); will-change: transform, opacity;
}
.fc-smoke { opacity: 0; font-size: 1.2rem; }
@media (prefers-reduced-motion: reduce) {
  .fc-f1 { position: static; display: inline-block; transform: none; margin-right: 8px; vertical-align: middle; font-size: 1.2rem; }
  .fc-smoke { display: none; }
}
@media (max-width: 760px) {
  .f-bar .container { flex-direction: column; text-align: center; }
  .f-links { justify-content: center; }
}

/* ---------- Google-reviews (zie js/reviews.js) ---------- */
.knop-omlijnd { border-color: var(--zwart); color: var(--zwart); }
.knop-omlijnd:hover { background: var(--zwart); color: var(--wit); }
.knop-omlijnd-wit { border-color: #4a4a4a; color: var(--wit); }
.knop-omlijnd-wit:hover { border-color: var(--wit); background: var(--wit); color: var(--zwart); }

/* Vaste selectie echte reviews: grote review links, drie kleinere rechts */
.quotes { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 24px; }
.quote {
  position: relative; margin: 0; display: flex; flex-direction: column; gap: 14px;
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); padding: 24px 26px;
}
.quote-groot { grid-row: 1 / span 3; background: var(--zwart); border-color: var(--zwart); color: var(--wit); padding: 34px 36px; gap: 18px; }
.quote-groot::before {
  content: "\201D"; position: absolute; top: 2px; right: 26px; pointer-events: none;
  font-family: "Russo One", "Montserrat", sans-serif; font-size: 6.5rem; line-height: 1; color: var(--rood);
}
.sterren-5 {
  display: block; flex: none; width: 100px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fbbc04' d='M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.2 1.2-6.5-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E") left center / 20px 18px repeat-x;
}
.quote-tekst { margin: 0; font-size: .92rem; line-height: 1.6; }
.quote-tekst p + p { margin-top: .6em; }
.quote-kop { font-weight: 700; }
.quote-groot .quote-tekst { font-size: 1rem; line-height: 1.65; color: #e3e3e3; }
.quote-groot .quote-kop {
  font-family: "Russo One", "Montserrat", sans-serif; font-weight: 400; font-size: 1.5rem;
  line-height: 1.2; text-transform: uppercase; color: var(--wit); margin-bottom: .25em;
}
.quote figcaption {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rand);
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px;
}
.quote figcaption strong, .quote figcaption small { white-space: nowrap; }
.quote-groot figcaption { border-top-color: #2b2b2b; }
.quote figcaption strong { font-size: .92rem; }
.quote figcaption small { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); }
.quote-groot figcaption small { color: #9a9a9a; }
.quote-meer {
  align-self: flex-start; margin-top: -6px; background: none; border: 0; padding: 0;
  font: inherit; font-size: .8rem; font-weight: 700; color: var(--rood); cursor: pointer;
}
.quote-meer:hover { text-decoration: underline; }
.reviews-acties { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-top: 28px; }
.reviews-acties .knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.reviews-acties p { font-size: .8rem; color: var(--grijs); }

/* Desktop: scorekaart + 5 reviews in een raster van 3; gsm: scorekaart en daaronder veegbare reviews */
.reviews-live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.reviews-lijst { display: contents; }
.review-score {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: var(--zwart); color: var(--wit); border-radius: var(--radius); padding: 30px;
}
.review-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a8a8a8; }
.score-getal { font-family: "Russo One", "Montserrat", sans-serif; font-weight: 400; font-size: 3.6rem; line-height: 1; }
.review-score p { color: #bdbdbd; font-size: .9rem; margin-bottom: auto; padding-bottom: 18px; }
.review-score .knop { width: 100%; justify-content: center; padding: 11px 18px; font-size: .78rem; }

.review {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); padding: 24px;
}
.review-auteur { display: flex; align-items: center; gap: 12px; }
.review-auteur img, .review-initiaal { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; }
.review-initiaal { display: grid; place-items: center; background: var(--zwart); color: var(--wit); font-weight: 700; }
.review-auteur strong { display: block; font-size: .92rem; line-height: 1.3; transition: .2s; }
.review-auteur small { display: block; color: var(--grijs); font-size: .78rem; }
a.review-auteur:hover strong { color: var(--rood); }
.review-tekst {
  font-size: .9rem; color: var(--antraciet); white-space: pre-line; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6;
}
.review.open .review-tekst { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.review-meer {
  align-self: flex-start; margin-top: -4px; background: none; border: 0; padding: 0;
  font: inherit; font-size: .8rem; font-weight: 700; color: var(--rood); cursor: pointer;
}
.review-meer:hover { text-decoration: underline; }
.reviews-noot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 20px; margin-top: 14px; font-size: .75rem; color: var(--grijs); }
/* Google Maps-logo: 18px hoog en vrije ruimte rondom volgens de richtlijnen van Google */
.reviews-noot img { height: 18px; width: auto; margin: 10px 10px 5px; }

/* width: max-content: anders rekt de rij uit in de kaart en klopt de gedeeltelijke vulling niet */
.sterren { position: relative; display: inline-flex; vertical-align: middle; width: max-content; }
.ster-basis, .ster-vol { display: flex; gap: 2px; }
.ster-basis { color: #d9d9d9; }
.ster-vol { position: absolute; top: 0; left: 0; overflow: hidden; color: #fbbc04; }
.sterren svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.review-score .sterren svg { width: 22px; height: 22px; }
.review-score .ster-basis { color: #3d3d3d; }

@media (max-width: 960px) {
  .reviews-live { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quote-groot { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 760px) {
  .reviews-live { display: block; }
  .reviews-lijst {
    display: grid; grid-auto-flow: column; grid-auto-columns: 85%; gap: 14px; margin-top: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px;
  }
  .review { scroll-snap-align: start; }
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .quote-groot { padding: 26px 24px; }
  /* Lange review inklappen, met "Lees meer" */
  .quote-groot .quote-tekst { position: relative; max-height: 16em; overflow: hidden; }
  .quote-groot .quote-tekst::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4em; background: linear-gradient(rgba(0, 0, 0, 0), var(--zwart)); }
  .quote-groot.open .quote-tekst { max-height: none; }
  .quote-groot.open .quote-tekst::after { display: none; }
}

/* ---------- Wagen op aanvraag ---------- */
.zoekopdracht {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 28px;
  margin-top: 34px; padding: 30px 32px; background: var(--wit);
  border: 1px solid var(--rand); border-left: 4px solid var(--rood); border-radius: var(--radius);
}
.zoek-icoon { width: 58px; height: 58px; border-radius: 50%; background: var(--zwart); color: var(--wit); display: grid; place-items: center; }
.zoek-tekst .label { margin-bottom: 4px; }
.zoek-tekst h3 { font-size: 1.3rem; line-height: 1.2; text-transform: uppercase; margin-bottom: 8px; }
.zoek-tekst p { color: var(--grijs); max-width: 580px; }
.zoek-knoppen { display: flex; flex-direction: column; gap: 10px; }
.zoek-knoppen .knop { justify-content: center; }
.cta-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 960px) {
  .zoekopdracht { grid-template-columns: auto minmax(0, 1fr); }
  .zoek-knoppen { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .zoekopdracht { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .zoek-knoppen { flex-direction: column; }
}

/* ---------- Laadscherm: rolpoort met rode ledstrip (zie main.js) ---------- */
.laadscherm {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background:
    radial-gradient(ellipse 60% 45% at 50% 46%, rgba(255, 255, 255, .07), transparent 70%),
    repeating-linear-gradient(to bottom, #0a0a0a 0 46px, #161616 46px 47px, #040404 47px 48px);
  background-color: #070707;
  animation: laadscherm-noodstop .5s ease 6s forwards; /* vangnet als het script niet loopt */
}
.intro-gezien .laadscherm { display: none; }
.laadscherm::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--rood); box-shadow: 0 0 22px 3px rgba(227, 22, 27, .75);
}
.laadscherm.open { transform: translateY(-100%); transition: transform .8s cubic-bezier(.75, 0, .2, 1); }
.laad-inhoud { display: flex; flex-direction: column; align-items: center; gap: 18px; transition: opacity .35s; }
.laadscherm.open .laad-inhoud { opacity: 0; }
.laad-auto { position: relative; width: 213px; animation: laad-in .6s ease-out both; }
.laad-auto img { display: block; width: 100%; height: auto; }
/* Achterlichten die aanfloepen */
.laad-auto::before, .laad-auto::after {
  content: ""; position: absolute; bottom: -4%; width: 34%; height: 40%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 45, 45, .95), rgba(227, 22, 27, .35) 60%, transparent);
  filter: blur(8px); mix-blend-mode: screen; opacity: 0;
  animation: laad-lichten 1.1s ease-out .35s forwards;
}
.laad-auto::before { left: -6%; }
.laad-auto::after { right: -6%; }
.laad-woordmerk {
  font-family: "Saira", "Montserrat", sans-serif; font-weight: 800; font-size: 1.35rem; line-height: 1;
  text-transform: uppercase; letter-spacing: .14em; margin-right: -.14em; color: var(--wit);
  animation: laad-woord .8s ease-out .15s both;
}
.laad-woordmerk b { color: var(--rood); font-weight: 800; }
.laad-balk { width: 190px; height: 3px; border-radius: 2px; background: #262626; overflow: hidden; }
.laad-balk span {
  display: block; height: 100%; background: var(--rood); box-shadow: 0 0 10px rgba(227, 22, 27, .9);
  transform: scaleX(0); transform-origin: left;
  animation: laad-vul 1.1s cubic-bezier(.3, .7, .3, 1) .3s forwards;
}
.laadscherm.klaar .laad-balk span { animation: laad-af .3s ease-out forwards; }
@keyframes laad-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes laad-woord { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; letter-spacing: .14em; } }
@keyframes laad-lichten { 0% { opacity: 0; } 25% { opacity: 1; } 35% { opacity: .2; } 50% { opacity: 1; } 100% { opacity: .85; } }
@keyframes laad-vul { to { transform: scaleX(.9); } }
@keyframes laad-af { from { transform: scaleX(.9); } to { transform: scaleX(1); } }
@keyframes laadscherm-noodstop { to { opacity: 0; visibility: hidden; } }

/* ---------- Juridische pagina's (privacy, cookies, voorwaarden) ---------- */
.juridisch { max-width: 780px; color: var(--grijs); }
.juridisch .bijgewerkt { font-size: .85rem; font-weight: 600; color: var(--rood); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 18px; }
.juridisch h2 { font-size: 1.25rem; color: var(--antraciet); margin: 38px 0 12px; }
.juridisch p { margin-bottom: 14px; }
.juridisch ul { margin: 0 0 16px 20px; display: grid; gap: 8px; }
.juridisch li { list-style: disc; }
.juridisch strong { color: var(--antraciet); }
.juridisch a { color: var(--rood); font-weight: 600; }
.juridisch a:hover { text-decoration: underline; }
.juridisch-tabel { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: .92rem; }
.juridisch-tabel th, .juridisch-tabel td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--rand); }
.juridisch-tabel th { color: var(--antraciet); background: var(--lichtgrijs); }
@media (max-width: 600px) { .juridisch-tabel th:last-child, .juridisch-tabel td:last-child { display: none; } }