/* ============================================================
   Gloria Cars — stijlbestand (het "uiterlijk" van de hele site)
   Warm zand + signaalrood · lettertypes Marcellus + Albert Sans

   Dit ene bestand bepaalt hoe ALLE pagina's eruitzien: kleuren, lettertypes,
   knoppen, kaders, afstanden. Anders dan de opmaak-pagina's wordt dit bestand
   NIET vertaald of opnieuw gegenereerd — wat hier staat, geldt meteen overal.
   De pagina's zijn opgedeeld in blokken met een kopje in de vorm
   "---------- naam ----------" zodat je snel het juiste stuk terugvindt.
   ============================================================ */

/* --- De centrale instellingen (kleuren, lettertypes, maten) ---------------
   Alles hieronder is een "variabele": je stelt een waarde één keer in en de
   hele site gebruikt ze. Wil je bv. het rood van de knoppen wijzigen, dan pas
   je enkel --red hieronder aan en verandert het overal mee.

   De kleuren staan genoteerd als oklch(lichtheid  kleurkracht  kleurtint).
     - het 1e getal (%) = hoe licht of donker  (hoger = lichter)
     - het 2e getal      = hoe fel de kleur is  (0 = grijs, hoger = feller)
     - het 3e getal      = welke tint  (±27 = rood, ±130 = olijfgroen, 80 = zand)
   Ken je een gewone kleurcode (bv. #c0392b)? Die mag je hier gewoon in de
   plaats zetten — beide werken. */
:root {
  --ink: oklch(24% 0.015 30);          /* hoofd-tekstkleur (bijna zwart) */
  --ink-soft: oklch(38% 0.015 30);     /* iets lichtere tekst */
  --ink-mute: oklch(50% 0.012 40);     /* grijze bijschriften */
  --paper: oklch(99.4% 0.001 80);      /* achtergrond van de pagina (wit) */
  --sand: oklch(96.8% 0.003 80);       /* zacht zandkleurig vlak */
  --sand-deep: oklch(91% 0.005 80);    /* iets donkerder zand (randen) */
  --card: oklch(99.7% 0.001 80);       /* achtergrond van kaartjes */
  --red: oklch(54% 0.21 27);           /* het huisrood — knoppen, accenten */
  --red-deep: oklch(46% 0.19 27);      /* donkerder rood (knop bij hover) */
  --red-tint: oklch(94% 0.03 27);      /* heel licht rood vlak */
  --olive: oklch(52% 0.07 130);        /* olijfgroen accent */
  --olive-tint: oklch(93% 0.03 130);   /* heel licht groen vlak */
  --on-ink: oklch(94% 0.012 80);       /* lichte tekst op donkere vlakken */
  --on-ink-mute: oklch(72% 0.015 75);  /* gedempte tekst op donkere vlakken */

  /* Lettertypes. "display" = de sierlijke titels, "body" = de gewone tekst.
     De reservenamen erna springen in als het hoofdlettertype niet laadt. */
  --font-display: "Marcellus", "Georgia", serif;
  --font-body: "Albert Sans", "Segoe UI", system-ui, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* het "gevoel" van animaties (soepel) */
  --radius: 14px;                        /* afronding van hoeken (knoppen, velden) */
  --radius-lg: 22px;                     /* grotere afronding (kaarten) */
  --shadow-1: 0 1px 2px oklch(24% 0.015 30 / 0.06), 0 4px 14px oklch(24% 0.015 30 / 0.06); /* lichte schaduw */
  --shadow-2: 0 2px 4px oklch(24% 0.015 30 / 0.08), 0 12px 32px oklch(24% 0.015 30 / 0.12); /* diepere schaduw */
  --wrap: 1160px;                        /* maximale breedte van de inhoud */
}

/* ---------- Paginaovergangen ----------
   View Transitions API: de browser cross-fadet automatisch tussen
   pagina's. Eén CSS-regel, geen JavaScript; browsers zonder
   ondersteuning navigeren gewoon zoals voorheen. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; margin: 0 0 0.5em; letter-spacing: 0.005em; }
h1 { font-size: clamp(2.4rem, 1.2rem + 5vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 1.1rem + 2.6vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); }
p { margin: 0 0 1em; max-width: 70ch; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }

.kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red); margin-bottom: 1.1rem;
}
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--red); border-radius: 2px; }

.lead { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem); color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.85rem 1.7rem; border-radius: 999px;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--red); color: oklch(98% 0.005 80); box-shadow: 0 6px 18px oklch(54% 0.21 27 / 0.28); }
.btn-primary:hover { background: var(--red-deep); box-shadow: 0 8px 24px oklch(46% 0.19 27 / 0.32); }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--on-ink); }
.btn-light { border-color: var(--on-ink); color: var(--on-ink); background: transparent; }
.btn-light:hover { background: var(--on-ink); color: var(--ink); }
.btn-sm { padding: 0.55rem 1.15rem; font-size: 0.92rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: oklch(99.4% 0.001 80 / 0.9);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--sand-deep);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 56px; width: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.2rem); }
.site-nav a { text-decoration: none; font-weight: 600; font-size: 0.98rem; color: var(--ink-soft); padding: 0.4rem 0.15rem; border-bottom: 2px solid transparent; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); }
.site-nav .btn { border-bottom: none; }
/* Reserveren-knop in de navigatie: witte tekst en juiste verhouding
   (overschrijft de generieke .site-nav a-regels via hogere specificiteit) */
.site-nav a.btn { padding: 0.62rem 1.5rem; white-space: nowrap; }
.site-nav a.btn-primary,
.site-nav a.btn-primary:hover { color: oklch(99% 0.005 80); border-bottom: none; }
.nav-toggle { display: none; background: none; border: 2px solid var(--ink); border-radius: 10px; padding: 0.45rem 0.7rem; font: inherit; font-weight: 700; cursor: pointer; }

/* Taalkiezer: toont enkel de huidige taal; klikken klapt de rest uit. */
.lang-switch { position: relative; }
.lang-switch > summary {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0.34rem 0.55rem; border-radius: 8px; cursor: pointer;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--ink-soft); list-style: none; user-select: none;
  border: 1px solid var(--sand-deep);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
/* Het standaard driehoekje van <details> weg in alle browsers */
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::marker { content: ""; }
.lang-switch > summary:hover { color: var(--ink); border-color: var(--ink-mute); }
/* Eigen pijltje dat meedraait bij openklappen */
.lang-switch > summary::after {
  content: ""; width: 0.42em; height: 0.42em; margin-left: 0.1rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.lang-switch[open] > summary::after { transform: translateY(0.08em) rotate(-135deg); }

/* Let op: expliciet verbergen en pas tonen bij [open]. Zonder deze twee regels
   overschrijft een eigen display-waarde de manier waarop de browser de inhoud
   van een gesloten <details> wegstopt, en staat het lijstje altijd open. */
.lang-menu { display: none; }
.lang-switch[open] > .lang-menu { display: flex; }

.lang-menu {
  position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 60;
  flex-direction: column; min-width: 100%;
  padding: 0.3rem; background: var(--paper);
  border: 1px solid var(--sand-deep); border-radius: 10px;
  box-shadow: var(--shadow-2);
}
.site-nav .lang-menu a {
  padding: 0.42rem 0.7rem; font-size: 0.85rem; font-weight: 600;
  color: var(--ink-soft); border-bottom: none; border-radius: 6px;
}
.site-nav .lang-menu a:hover { color: var(--ink); background: var(--sand); }
.site-nav .lang-menu a[aria-current="true"] { color: var(--red); background: var(--red-tint); font-weight: 700; }

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 1rem clamp(1.1rem, 4vw, 2.5rem) 1.4rem; gap: 0.4rem; background: var(--paper); border-bottom: 1px solid var(--sand-deep); box-shadow: var(--shadow-2); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 0.7rem 0.2rem; font-size: 1.05rem; }
  /* In het uitklapmenu op gsm duwt de talenlijst de rest gewoon naar beneden,
     in plaats van eroverheen te zweven: op een smal scherm is een zwevend
     menu dat buiten beeld valt het grootste risico. */
  .lang-switch { margin-top: 0.6rem; padding-top: 0.8rem; border-top: 1px solid var(--sand-deep); }
  .lang-switch > summary { justify-content: space-between; padding: 0.6rem 0.7rem; font-size: 0.95rem; }
  .lang-menu {
    position: static; flex-direction: row; flex-wrap: wrap; gap: 0.3rem;
    margin-top: 0.4rem; box-shadow: none; background: transparent;
  }
  /* 0.68rem geeft een raakvlak van ±44px hoog: de gangbare ondergrens om
     comfortabel met de duim te kunnen mikken. */
  .site-nav .lang-menu a { padding: 0.68rem 0.9rem; font-size: 0.95rem; border: 1px solid var(--sand-deep); }
}

/* ---------- Hero ----------
   Afbeelding over de volledige breedte, zo hoog als het scherm
   (min de hoogte van de vaste navigatie). */
.hero {
  position: relative; overflow: clip; isolation: isolate;
  display: flex; align-items: center;
  min-height: calc(100svh - 77px); /* schermhoogte min navigatie (76px + 1px rand) */
  color: oklch(97% 0.005 80);
  background: var(--ink); /* vangnet: donkere kleur als de foto ooit niet laadt */
  border-bottom: 1px solid var(--sand-deep);
}
@supports not (height: 100svh) { .hero { min-height: calc(100vh - 77px); } }
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(115deg, oklch(20% 0.02 30 / 0.82) 0%, oklch(22% 0.02 30 / 0.6) 55%, oklch(24% 0.02 30 / 0.35) 100%),
    url("../../images/hero-alicante.jpg") center / cover no-repeat;
}
.hero .wrap { width: 100%; padding-block: clamp(2rem, 4vw, 3.5rem); }
.hero-inner { max-width: 720px; margin-inline: auto; text-align: center; }
.hero h1 { font-size: clamp(2.1rem, 1.1rem + 3.6vw, 3.6rem); margin-bottom: 0.35em; color: inherit; }
.hero h1 em { font-style: normal; color: oklch(72% 0.17 27); }
.hero .kicker { color: oklch(78% 0.14 27); justify-content: center; }
.hero .kicker::before { background: oklch(72% 0.17 27); }
.hero .lead { color: oklch(90% 0.01 80); margin-inline: auto; }
.hero-usps { list-style: none; margin: 1.3rem 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.6rem; }
.hero-usps li { display: flex; align-items: baseline; gap: 0.55rem; font-weight: 500; color: oklch(92% 0.008 80); }
.hero-usps li::before { content: "✓"; color: oklch(72% 0.17 27); font-weight: 800; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: center; }
.hero-note { font-size: 0.9rem; color: oklch(82% 0.012 80); margin-top: 1.2rem; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(3.2rem, 7vw, 6rem); }
.section-sand { background: var(--sand); }
.section-ink { background: var(--ink); color: var(--on-ink); }
.section-head { max-width: 640px; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .kicker { justify-content: center; }

/* Waarom — redenen met icoon in een zacht rood vlak (zoals de originele site) */
.reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.reason .icon-chip {
  display: inline-grid; place-items: center;
  width: 54px; height: 54px; border-radius: 16px;
  background: var(--red-tint); color: var(--red);
  margin-bottom: 1rem;
}
.reason .icon { display: block; width: 28px; height: 28px; }
.reason h3 { margin-top: 0.35rem; }
.reason p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }

/* Stappen */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.step { background: oklch(30% 0.017 30); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.5rem; position: relative; }
.step b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; margin: 0.9rem 0 0.4rem; }
.step p { color: var(--on-ink-mute); font-size: 0.95rem; margin: 0; }
.step .num { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: oklch(98% 0.005 80); font-weight: 700; }
.steps-cta { text-align: center; margin-top: clamp(1.6rem, 4vw, 2.4rem); }

/* Stap-voor-stap video's */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.video-card { background: var(--card); border: 1px solid var(--sand-deep); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); }
.video-card video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); object-fit: cover; }
.video-card .video-body { padding: 1.3rem 1.5rem 1.5rem; }
.video-card h3 { margin: 0 0 0.4rem; }
.video-card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.video-note { color: var(--ink-mute); font-size: 0.88rem; margin: 1.2rem 0 0; }

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.4rem; }
.review { background: var(--card); border: 1px solid var(--sand-deep); border-radius: var(--radius-lg); padding: 1.7rem 1.7rem 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.review blockquote { margin: 0; font-family: var(--font-display); font-size: 1.14rem; line-height: 1.45; }
.review blockquote::before { content: "“"; display: block; font-size: 2.6rem; line-height: 0.6; color: var(--red); margin-bottom: 0.5rem; }
.review footer { display: flex; align-items: center; gap: 0.8rem; margin-top: auto; font-size: 0.9rem; color: var(--ink-mute); }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--sand-deep); color: var(--ink); display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; flex: none; }
.stars { color: var(--red); letter-spacing: 0.1em; }

/* Vloot op home — compacte sectie */
.section-tight { padding-block: clamp(2.2rem, 4.5vw, 3.8rem); }
.fleet-home h2 { font-size: clamp(1.6rem, 1rem + 2vw, 2.3rem); white-space: nowrap; }
@media (max-width: 560px) { .fleet-home h2 { white-space: normal; } }
.fleet-home .section-head-row { margin-bottom: 1.2rem; }
.fleet-facts { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 2.8rem); margin: 0 0 1.4rem; padding: 0.85rem 0; border-block: 1px solid var(--sand-deep); }
.fleet-facts div { min-width: 130px; }
.fleet-facts strong { display: block; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; color: var(--red); }
.fleet-facts span { font-size: 0.9rem; color: var(--ink-mute); font-weight: 600; }
.fleet-strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); gap: 1.1rem; overflow-x: auto; padding: 0.4rem 0.2rem 1.2rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.fleet-strip > * { scroll-snap-align: start; }
.fleet-more { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--sand); border: 1.5px dashed var(--sand-deep); border-radius: var(--radius-lg); text-decoration: none; font-weight: 700; color: var(--ink-soft); transition: border-color 0.25s var(--ease), color 0.25s var(--ease); }
.fleet-more:hover { border-color: var(--red); color: var(--red); }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.section-head-row .section-head { margin-bottom: 0; }

/* Blogkaarten */
.posts { display: grid; gap: 0; border-top: 1px solid var(--sand-deep); }
.post-row { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; padding: 1.6rem 0.2rem; border-bottom: 1px solid var(--sand-deep); text-decoration: none; transition: background-color 0.25s var(--ease); }
.post-row:hover { background: var(--sand); }
.post-row .tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); width: 5.5rem; }
.post-row h3 { margin: 0 0 0.25rem; }
.post-row p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }
.post-row .arrow { font-size: 1.5rem; color: var(--red); transition: transform 0.25s var(--ease); }
.post-row:hover .arrow { transform: translateX(6px); }
@media (max-width: 640px) { .post-row { grid-template-columns: 1fr auto; } .post-row .tag { display: none; } }

/* CTA-band */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 18ch; margin-inline: auto; }
.cta-band .btn { margin-top: 1.4rem; }

/* ---------- Wagenkaarten ---------- */
.car-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.4rem; }
.car-card {
  background: var(--card); border: 1px solid var(--sand-deep); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow 0.3s var(--ease), translate 0.3s var(--ease);
}
.car-card:hover { box-shadow: var(--shadow-2); translate: 0 -3px; }
.car-photo { position: relative; background: var(--sand); aspect-ratio: 16 / 10; display: grid; place-items: center; }
.car-photo img { width: 100%; height: 100%; object-fit: contain; padding: 0.9rem; mix-blend-mode: multiply; }
.car-photo .badge { position: absolute; top: 12px; left: 12px; background: var(--ink); color: var(--on-ink); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 0.7rem; border-radius: 999px; }
.car-body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; flex: 1; }
.car-body h3 { margin: 0; font-size: 1.35rem; }
.car-body .variant { color: var(--ink-mute); font-size: 0.9rem; margin: 0.15rem 0 0; }
.car-specs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.car-specs li { background: var(--sand); border-radius: 8px; padding: 0.3rem 0.65rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.car-specs li.spec-elektrisch { background: var(--olive-tint); color: var(--olive); }
.car-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8rem; }
.car-price small { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.car-price strong { font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.car-price strong span { font-size: 0.85rem; font-weight: 600; color: var(--ink-mute); }

/* ---------- Filters (wagens-pagina) — compacte balk bovenaan,
   drie filters zoals op de originele site: prijs, transmissie, personen ---------- */
.filters { background: var(--card); border: 1px solid var(--sand-deep); border-radius: var(--radius-lg); padding: 1.1rem 1.4rem 1.2rem; margin-bottom: 1.4rem; }
.filters-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--sand-deep); }
.filters h2 { font-size: 1.05rem; margin: 0; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem 2rem; align-items: start; }
.filter-group > label, .filter-group > .flabel { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.45rem; }
.filters select, .filters input[type="range"] { width: 100%; }
.filters select { padding: 0.5rem 0.65rem; border: 1.5px solid var(--sand-deep); border-radius: 10px; background: var(--paper); font: inherit; font-size: 0.92rem; font-weight: 500; }
.range-out { font-weight: 700; color: var(--red); font-size: 1.05rem; }
input[type="range"] { accent-color: var(--red); }
.seg { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.seg button { border: 1.5px solid var(--sand-deep); background: var(--paper); border-radius: 999px; padding: 0.32rem 0.85rem; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: all 0.2s var(--ease); }
.seg button:hover { border-color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.fleet-count { font-weight: 600; color: var(--ink-mute); margin-bottom: 1.1rem; }
.fleet-empty { background: var(--sand); border-radius: var(--radius-lg); padding: 2.5rem; text-align: center; color: var(--ink-soft); }
.filters-toggle { display: none; }

@media (max-width: 760px) {
  .filters { display: none; }
  .filters.open { display: block; }
  .filters-toggle { display: inline-flex; margin-bottom: 1.2rem; }
}

/* ---------- Formulieren ---------- */
.form-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } }
.form-card { background: var(--card); border: 1px solid var(--sand-deep); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.4rem); }
fieldset { border: none; margin: 0 0 1.8rem; padding: 0; }
legend { font-family: var(--font-display); font-size: 1.35rem; padding: 0; margin-bottom: 1.1rem; }
.field { margin-bottom: 1.05rem; }
.field label { display: block; font-size: 0.92rem; font-weight: 600; margin-bottom: 0.35rem; }
.field label .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.72rem 0.85rem; border: 1.5px solid var(--sand-deep); border-radius: 10px;
  background: var(--paper); font: inherit; color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field .hint { font-size: 0.82rem; color: var(--ink-mute); margin-top: 0.3rem; }
.honeypot { position: absolute; left: -9999px; }

.aside-card { background: var(--sand); border-radius: var(--radius-lg); padding: 1.7rem 1.7rem 1.8rem; margin-bottom: 1.3rem; }
.aside-card h3 { margin-bottom: 0.8rem; }
.aside-card ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); }
.aside-card li { margin-bottom: 0.55rem; }
.aside-card.contact a { font-weight: 700; text-decoration: none; color: var(--red); }

/* Contactpagina — compacte kaarten naast elkaar */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.contact-grid .aside-card { margin-bottom: 0; }
.contact-note { margin-top: 1.6rem; color: var(--ink-soft); font-size: 0.95rem; }
.contact-note a { color: var(--red); font-weight: 700; text-decoration: none; }

/* Kaart op de contactpagina — responsieve iframe */
.contact-map { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--sand-deep); background: var(--sand); }
.contact-map iframe { display: block; width: 100%; height: clamp(300px, 42vw, 460px); border: 0; }

.form-status { border-radius: var(--radius); padding: 1rem 1.2rem; margin-top: 1.2rem; font-weight: 600; display: none; }
.form-status.ok { display: block; background: var(--olive-tint); color: var(--olive); }
.form-status.err { display: block; background: var(--red-tint); color: var(--red-deep); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; }
.faq-list details { border-bottom: 1px solid var(--sand-deep); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0.2rem; font-weight: 600; font-size: 1.08rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 1.5rem; color: var(--red); transition: rotate 0.25s var(--ease); flex: none; }
.faq-list details[open] summary::after { rotate: 45deg; }
.faq-list details p { color: var(--ink-soft); padding-bottom: 1.25rem; margin: 0; }

/* ---------- Blogartikel ---------- */
.article { max-width: 760px; }
.article-header { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.article h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); margin-top: 2.2rem; }
.article ul { color: var(--ink-soft); padding-left: 1.2rem; }
.article li { margin-bottom: 0.5rem; }
.article-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.5rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-ink-mute); margin-top: 0; }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
@media (max-width: 800px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-footer .cols { grid-template-columns: 1fr; } }
.site-footer .wordmark { font-family: var(--font-display); font-size: 1.7rem; color: var(--on-ink); margin-bottom: 0.6rem; }
.site-footer .wordmark span { color: var(--on-ink); }
.site-footer h4 { color: var(--on-ink); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.site-footer a { color: var(--on-ink-mute); text-decoration: none; transition: color 0.2s var(--ease); }
.site-footer a:hover { color: var(--on-ink); }
.site-footer .legal { border-top: 1px solid oklch(35% 0.015 30); padding-block: 1.3rem; font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: space-between; }

/* ---------- Page hero (subpagina's) ---------- */
.page-hero { background: var(--sand); padding-block: clamp(2.6rem, 6vw, 4.5rem); }
.page-hero p { margin-bottom: 0; }
.page-hero-compact { padding-block: clamp(1.6rem, 3.5vw, 2.5rem); }
.page-hero-compact h1 { font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.6rem); }

/* ---------- Reveal on scroll ---------- */
/* Reveal-animatie werkt alleen als JavaScript actief is (.js op <html>).
   Zonder JS blijft alle inhoud gewoon zichtbaar — niets verdwijnt ooit. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; translate: 0 24px; transition: opacity 0.7s var(--ease), translate 0.7s var(--ease); }
  .js .reveal.in { opacity: 1; translate: 0 0; }
}

/* ---------- Beheer ---------- */
.admin body { background: var(--paper); }
.admin-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.admin-list { display: grid; gap: 0.7rem; }
.admin-row { display: grid; grid-template-columns: 84px minmax(0,1fr) auto; gap: 1rem; align-items: center; background: var(--card); border: 1px solid var(--sand-deep); border-radius: var(--radius); padding: 0.7rem 1rem; }
.admin-row img { width: 84px; height: 56px; object-fit: contain; background: var(--sand); border-radius: 8px; }
.admin-row .meta { font-size: 0.85rem; color: var(--ink-mute); }
.admin-row .acts { display: flex; gap: 0.4rem; }
.admin-row.hidden-car { opacity: 0.5; }
.admin-note { background: var(--sand); border-radius: var(--radius); padding: 1rem 1.2rem; font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 1.4rem; }
.admin-note code { background: var(--card); padding: 0.1rem 0.4rem; border-radius: 6px; }
dialog.admin-dialog { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 2rem; width: min(560px, 92vw); }
dialog.admin-dialog::backdrop { background: oklch(24% 0.015 30 / 0.5); }
.tag-status { font-size: 0.78rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 999px; }
.tag-status.ok { background: var(--olive-tint); color: var(--olive); }
.tag-status.warn { background: var(--red-tint); color: var(--red-deep); }

/* Sticky balk om alle wijzigingen in één keer te publiceren */
.admin-savebar {
  position: sticky; bottom: 1rem; z-index: 20; margin-top: 1.2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--ink); color: var(--on-ink);
  border-radius: var(--radius); padding: 0.85rem 1.15rem; box-shadow: var(--shadow-2);
}
.admin-savebar[hidden] { display: none; }
.admin-savebar strong { color: var(--on-ink); }
.admin-savebar .btn-primary { color: oklch(99% 0.005 80); }