/* ==========================================================================
   Garage 't Noorden — stylesheet
   Semantische, toegankelijke, responsive CSS zonder framework.
   Opgebouwd met CSS Custom Properties, Flexbox en Grid.
   ========================================================================== */

/* -------------------- 1. Custom properties / design tokens -------------------- */
:root {
  /* Kleuren — professionele, rustige automotive-huisstijl.
     Uitgangspunt: donkerblauw (vertrouwen, techniek) + warm oranjerood (actie/CTA).

     Het logo zelf gebruikt maar twee kleuren: een lichte hemelsblauwe baan
     (#b7e4f7) en vrijwel zwarte letters (ongeveer #524147). Die lichtblauwe tint
     is bewust niet als hoofdkleur gebruikt: op een witte achtergrond haalt hij
     bij lange na niet het vereiste contrast (ongeveer 1.3:1, terwijl 4.5:1 nodig
     is), waardoor tekst en knoppen slecht leesbaar zouden worden. Het donkerblauw
     hieronder is een toegankelijke, in dezelfde familie passende invulling.
     Wilt u dichter bij het logo blijven, gebruik #b7e4f7 dan als accent op een
     donkere ondergrond, niet als tekst- of knopkleur op wit. */
  --color-primary-900: #0b2338;
  --color-primary-800: #123353;
  --color-primary-700: #1a4570;
  --color-primary-600: #23578d;
  --color-primary-100: #e7edf3;

  --color-accent-600: #ca461e; /* AA-contrast (4.77:1) met wit knoptekst gecontroleerd */
  --color-accent-700: #b23c18;
  --color-accent-100: #fdece4;

  --color-success-700: #1e6b3c;
  --color-success-100: #e5f4ea;

  --color-neutral-900: #1c2226;
  --color-neutral-700: #3f4a52;
  --color-neutral-500: #6b7680;
  --color-neutral-300: #c6ced4;
  --color-neutral-200: #e2e7ea;
  --color-neutral-100: #f4f6f7;
  --color-white: #ffffff;

  --color-border: var(--color-neutral-200);
  --color-focus: #ffb703;

  --font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Segoe UI Semibold", "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;

  --fs-base: 1rem;
  --line-height-base: 1.6;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 3px rgba(11, 35, 56, 0.12);
  --shadow-md: 0 6px 20px rgba(11, 35, 56, 0.14);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --container-width: 1180px;

  --mobile-bar-height: 56px;
}

/* -------------------- 2. Reset -------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--line-height-base);
  color: var(--color-neutral-900);
  background: var(--color-white);
  overflow-x: hidden;
}
img, picture, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--color-primary-700); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--color-accent-700); }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.25; color: var(--color-primary-900); margin: 0 0 var(--space-3); }
h1 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); }
p { margin: 0 0 var(--space-4); max-width: 68ch; }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.3em; }
li { margin-bottom: var(--space-2); }
figure { margin: 0; }
button { font-family: inherit; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-accent-600);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* Focus styles — zichtbaar en consistent voor toetsenbordgebruik */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* -------------------- 3. Layout helpers -------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.section { padding-block: var(--space-7); }
.section--muted { background: var(--color-neutral-100); }
.section--dark { background: var(--color-primary-900); color: var(--color-white); }
.section--dark h2, .section--dark h3 { color: var(--color-white); }
.section-intro { max-width: 62ch; margin-bottom: var(--space-6); }
.grid {
  display: grid;
  gap: var(--space-6);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* -------------------- 4. Topbar (trust bar boven header) -------------------- */
.topbar {
  background: var(--color-primary-900);
  color: var(--color-neutral-200);
  font-size: 0.875rem;
}
.topbar .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
}
.topbar a { color: var(--color-white); }
.topbar__contact { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.topbar__contact a { display: inline-flex; align-items: center; gap: var(--space-2); }
.topbar__badges { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
.topbar__badges img { height: 24px; width: 50px; object-fit: contain; background: #fff; border-radius: 4px; padding: 3px 5px; }

/* -------------------- 5. Header & navigatie -------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-3);
}
.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-primary-900);
}
.site-logo img { height: 48px; width: auto; }
.footer-grid .site-logo img { height: 40px; width: auto; }

.main-nav__toggle {
  display: none;
  background: var(--color-primary-900);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 0.95rem;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}
.main-nav a {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-neutral-900);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  background: var(--color-primary-100);
  color: var(--color-primary-800);
}
.main-nav .has-submenu { position: relative; }
.main-nav .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  min-width: 220px;
  list-style: none;
  z-index: 50;
}
.main-nav .has-submenu:hover .submenu,
.main-nav .has-submenu:focus-within .submenu {
  display: block;
}
.main-nav .submenu a { display: block; white-space: nowrap; }

.header-cta { display: flex; align-items: center; gap: var(--space-3); }

/* -------------------- 6. Buttons -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.3rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  line-height: 1.2;
}
.btn-primary { background: var(--color-accent-600); color: #fff; }
.btn-primary:hover { background: var(--color-accent-700); color: #fff; }
.btn-secondary { background: var(--color-primary-900); color: #fff; }
.btn-secondary:hover { background: var(--color-primary-700); color: #fff; }
.btn-outline { background: transparent; border-color: var(--color-white); color: var(--color-white); }
.btn-outline:hover { background: rgba(255,255,255,0.12); color: #fff; }
.btn-outline-dark { background: transparent; border-color: var(--color-primary-800); color: var(--color-primary-800); }
.btn-outline-dark:hover { background: var(--color-primary-100); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.5rem 0.9rem; font-size: 0.88rem; }

/* -------------------- 7. Hero -------------------- */
.hero {
  background: linear-gradient(135deg, var(--color-primary-900), var(--color-primary-700));
  color: #fff;
  padding-block: var(--space-8);
}
.hero .container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); align-items: center; }
.hero__eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-4);
}
.hero h1 { color: #fff; }
.hero p.lead { font-size: 1.15rem; color: var(--color-neutral-200); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.hero__trust { display: flex; gap: var(--space-5); margin-top: var(--space-6); flex-wrap: wrap; font-size: 0.9rem; color: var(--color-neutral-200); }
.hero__trust li { list-style: none; margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.hero__media {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Kleine pagina-hero voor binnenpagina's (zonder grote afbeelding) */
.page-hero {
  background: linear-gradient(135deg, var(--color-primary-900), var(--color-primary-700));
  color: #fff;
  padding-block: var(--space-6);
}
.page-hero h1 { color: #fff; margin-bottom: var(--space-2); }
.page-hero p.lead { color: var(--color-neutral-200); margin-bottom: 0; }

/* -------------------- 8. Breadcrumbs -------------------- */
.breadcrumbs { background: var(--color-neutral-100); border-bottom: 1px solid var(--color-border); }
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) 0;
  font-size: 0.85rem;
  color: var(--color-neutral-700);
}
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: var(--space-2); color: var(--color-neutral-500); }
.breadcrumbs a { color: var(--color-neutral-700); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-accent-700); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--color-neutral-900); font-weight: 600; }

/* -------------------- 9. Cards -------------------- */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.card h3 { margin-bottom: var(--space-2); }
.card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-100);
  color: var(--color-accent-700);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
  font-size: 1.4rem;
}
.card--link { text-decoration: none; display: block; transition: box-shadow .15s ease, transform .15s ease; }
.card--link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* -------------------- 10. Openingstijden / infoblokken -------------------- */
.info-block {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.hours-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.hours-table th, .hours-table td { text-align: left; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }
.hours-table th { font-weight: 600; color: var(--color-neutral-700); width: 55%; }

/* -------------------- 11. Formulieren -------------------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-field label { font-weight: 600; font-size: 0.92rem; }
.form-field .hint { font-size: 0.82rem; color: var(--color-neutral-500); }
.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-neutral-900);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:invalid:not(:placeholder-shown) { border-color: var(--color-accent-600); }
fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin: 0 0 var(--space-5); }
legend { font-weight: 700; padding: 0 var(--space-2); }
.required-mark { color: var(--color-accent-700); }
.form-notice {
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  border: 1px solid;
}
.form-notice--success { background: var(--color-success-100); border-color: var(--color-success-700); color: var(--color-success-700); }
.form-notice--error { background: var(--color-accent-100); border-color: var(--color-accent-700); color: var(--color-accent-700); }
.form-notice--info { background: var(--color-primary-100); border-color: var(--color-primary-700); color: var(--color-primary-800); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------------------- 12. Gallery -------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.gallery figure {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 4/3;
  background: var(--color-neutral-100);
}
.gallery img { width: 100%; height: 100%; object-fit: cover; }

/* Team */
.team-card { text-align: left; }
.team-card__photo {
  aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-neutral-200);
  margin-bottom: var(--space-3);
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__role { color: var(--color-neutral-500); font-size: 0.9rem; margin-bottom: var(--space-2); }

/* Medewerkers zonder foto: als nette lijst in plaats van lege kaarten. */
.team-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3) var(--space-6);
  max-width: 900px;
}
.team-list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.team-list span { color: var(--color-neutral-500); font-size: 0.9rem; }

/* -------------------- 13. FAQ -------------------- */
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: var(--space-4);
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-neutral-100);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--color-accent-600); line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-item .faq-answer { padding: var(--space-4); }

/* -------------------- 14. Testimonials / reviews -------------------- */
.review-card { border-left: 4px solid var(--color-accent-600); }
.review-card__stars { color: var(--color-accent-600); font-size: 1.1rem; letter-spacing: 2px; margin-bottom: var(--space-2); }
.review-widget-placeholder {
  border: 2px dashed var(--color-neutral-300);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  color: var(--color-neutral-700);
  background: var(--color-neutral-100);
}

/* -------------------- 15. Sticky mobiele contactbalk -------------------- */
.mobile-contact-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  display: none;
  background: var(--color-primary-900);
  border-top: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.2);
}
.mobile-contact-bar ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 0; padding: 0;
  height: var(--mobile-bar-height);
}
.mobile-contact-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #fff;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 700;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.mobile-contact-bar li:last-child a { border-right: 0; }
.mobile-contact-bar .icon { font-size: 1.15rem; }

/* -------------------- 16. Footer -------------------- */
.site-footer {
  background: var(--color-primary-900);
  color: var(--color-neutral-200);
  padding-block: var(--space-7) var(--space-6);
}
.site-footer a { color: var(--color-white); }
.site-footer h2, .site-footer h3 { color: #fff; font-size: 1.05rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: var(--space-2); }
.footer-badges { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-4); flex-wrap: wrap; }
.footer-badges img { height: 34px; width: 60px; object-fit: contain; background: #fff; border-radius: var(--radius-sm); padding: 4px 6px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--color-neutral-300);
}
.footer-bottom ul { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }

/* -------------------- 17. Map -------------------- */
.map-embed { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); }
.map-embed iframe { width: 100%; height: 340px; border: 0; display: block; }

/* -------------------- 17b. Externe inhoud met klik om te laden --------------------
   De kaart en de beoordelingenwidget laden pas na een klik van de bezoeker. Zolang
   dat niet is gebeurd staat er alleen eigen HTML op de pagina en worden er geen
   cookies van derden geplaatst. */
.consent-embed {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  overflow: hidden;
  display: flex;
  aspect-ratio: var(--embed-ratio, 4 / 3);
}
.consent-embed__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-6);
  width: 100%;
}
.consent-embed__placeholder h3 { margin: 0; font-size: 1.05rem; }
.consent-embed__placeholder p { margin: 0; max-width: 46ch; color: var(--color-neutral-700); }
.consent-embed__note { font-size: 0.78rem; color: var(--color-neutral-500); }
.consent-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.consent-embed.is-loaded { background: none; aspect-ratio: var(--embed-ratio, 4 / 3); }

@media (max-width: 599px) {
  .consent-embed { aspect-ratio: auto; min-height: 320px; }
}

/* -------------------- 18. Content pagina's (privacy, voorwaarden) -------------------- */
.prose h2 { margin-top: var(--space-6); }
.prose h3 { margin-top: var(--space-5); }
.prose ul { max-width: 68ch; }
.control-flag {
  display: inline-block;
  background: #fff3cd;
  color: #7a5b00;
  border: 1px solid #f0c343;
  border-radius: var(--radius-sm);
  padding: 0.1em 0.5em;
  font-size: 0.85em;
  font-weight: 700;
}

/* -------------------- 19. 404 -------------------- */
.error-page { text-align: center; padding-block: var(--space-8); }
.error-page__code { font-size: 5rem; font-weight: 800; color: var(--color-primary-100); margin: 0; }

/* -------------------- 20. Utility -------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-success-100);
  color: var(--color-success-700);
  border-radius: 999px;
  padding: 0.2em 0.75em;
  font-size: 0.82rem;
  font-weight: 700;
}

/* -------------------- 21. Responsive -------------------- */
@media (max-width: 1023px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero__media { order: -1; aspect-ratio: 16/9; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 899px) {
  .topbar__badges { display: none; }
  .main-nav { display: none; }
  .main-nav.is-open { display: block; width: 100%; }
  .main-nav.is-open ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav.is-open .submenu { display: block; position: static; border: 0; box-shadow: none; padding-left: var(--space-4); }
  .main-nav.is-open .has-submenu:hover .submenu { display: block; }
  .site-header .container { flex-wrap: wrap; }
  .main-nav__toggle { display: inline-flex; }
  .header-cta .btn span.btn-text { display: none; }
  .mobile-contact-bar { display: block; }
  body { padding-bottom: var(--mobile-bar-height); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

@media (max-width: 599px) {
  .container { padding-inline: var(--space-4); }
  .section { padding-block: var(--space-6); }
  h1 { font-size: 1.7rem; }
  .hero__trust { gap: var(--space-3); }
  .site-logo img { height: 32px; }
  .main-nav__toggle { padding: var(--space-2); }
  .main-nav__toggle .toggle-text { display: none; }
}

/* Print */
@media print {
  .site-header, .mobile-contact-bar, .breadcrumbs, .site-footer, .hero__actions { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Merkenlijst op de werkplaatspagina */
.merken-lijst {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.merken-lijst li {
  background: var(--color-primary-900);
  color: #fff;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* -------------------- 21. Klantbeoordelingen --------------------
   Uitgangspunt: de eenregelaar die de klant zelf schreef is het oordeel, en
   krijgt dus het meeste gewicht. De toelichting is ondersteunend, de herkomst
   is bijschrift. Geen nieuwe lettertypes of kleuren: het verschil komt uit
   schaal, gewicht en witruimte, zodat het blok bij de rest van de site hoort
   en de site vrij blijft van externe verbindingen. */

/* --- Scoreblok bovenaan de beoordelingenpagina --- */
.reviews-banner {
  display: flex;
  align-items: stretch;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--color-primary-900);
  color: #fff;
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: var(--space-7);
}
.reviews-banner__cijfer {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  padding-right: clamp(1.25rem, 3vw, 2.5rem);
  border-right: 1px solid rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}
.reviews-banner__cijfer span {
  font-family: var(--font-heading);
  font-weight: 700;
  /* Bewust groot: dit cijfer is waar de pagina om draait. */
  font-size: clamp(3.5rem, 9vw, 5.75rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: lining-nums tabular-nums;
}
.reviews-banner__cijfer small {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}
.reviews-banner__tekst { align-self: center; }
.reviews-banner__groot {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.25;
  color: #fff;
  margin: 0 0 var(--space-3);
  max-width: 24ch;
}
.reviews-banner__klein {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  max-width: 62ch;
}

/* --- Compacte score op de homepage --- */
.reviews-score {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
  max-width: none;
}
.reviews-score__cijfer {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-primary-900);
  font-variant-numeric: lining-nums tabular-nums;
}
.reviews-score__tekst {
  font-size: 0.92rem;
  color: var(--color-neutral-700);
  max-width: 40ch;
  line-height: 1.45;
}

/* --- De beoordelingen zelf --- */
/* De teksten lopen van 18 tot bijna 1000 tekens. In een raster levert dat of
   afgekapte tekst op of grote gaten; in kolommen voegt elke beoordeling zich
   naar zijn eigen lengte. */
.reviews-lijst {
  columns: 3 300px;
  column-gap: var(--space-6);
}
.reviews-lijst .review {
  break-inside: avoid;
  margin-bottom: var(--space-6);
}
.reviews-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}

.review {
  position: relative;
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-primary-900);
}
.review__grade {
  position: absolute;
  top: var(--space-4);
  right: 0;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--color-neutral-500);
  font-variant-numeric: lining-nums tabular-nums;
}
.review__grade-num::after {
  content: "/10";
  font-weight: 600;
  font-size: 0.78em;
  color: var(--color-neutral-300);
}
/* De eenregelaar is het oordeel in de woorden van de klant. */
.review__kop {
  margin: 0 3.5rem var(--space-3) 0;
  font-family: var(--font-heading);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary-900);
  hyphens: auto;
}
.review__tekst {
  margin: 0 0 var(--space-4);
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-neutral-700);
  max-width: 46ch;
}
.review__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem var(--space-3);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--color-neutral-500);
}
.review__wie { font-weight: 600; color: var(--color-neutral-700); }

@media (max-width: 719px) {
  .reviews-banner { flex-direction: column; gap: var(--space-4); }
  .reviews-banner__cijfer {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    padding: 0 0 var(--space-4);
  }
  .reviews-lijst { columns: 1; }
}


/* ==========================================================================
   22. Occasions
   Opzet volgt de vertrouwde indeling van het oude voorraadsysteem: merk en
   model groot, uitvoering eronder, de kerngegevens in een strook en de prijs
   apart. Het kenteken is als echte gele plaat weergegeven: dat is meteen
   herkenbaar en het is gewoon de data die in de feed staat.
   ========================================================================== */
:root {
  --occ-blauw: #0092cb;   /* sluit aan bij het lichtblauw van het logo */
  --occ-plaat: #f5d417;
}

/* -------------------- Kentekenplaat -------------------- */
.kenteken {
  display: inline-flex;
  align-items: stretch;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #4a3f00;
  background: var(--occ-plaat);
  font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.kenteken__eu {
  background: #003399;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.28rem 0.2rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.kenteken__nr {
  color: #111;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.5rem;
  white-space: nowrap;
}

/* -------------------- Lijst -------------------- */
.occasions-tel {
  font-size: 0.95rem;
  color: var(--color-neutral-700);
  margin-bottom: var(--space-6);
}
.occasions-tel strong { color: var(--color-primary-900); }

.occasions-lijst {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: var(--space-5);
}

.occasion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}
.occasion:hover { box-shadow: var(--shadow-md); border-color: var(--color-neutral-300); }
.occasion:focus-within { box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { .occasion { transition: none; } }

.occasion__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.occasion__beeld { position: relative; background: var(--color-neutral-100); }
.occasion__beeld img {
  width: 100%; height: auto;
  aspect-ratio: 960 / 436;
  object-fit: cover;
  display: block;
}
.occasion__beeld .kenteken { position: absolute; right: var(--space-3); bottom: var(--space-3); }
.occasion__geenfoto {
  aspect-ratio: 960 / 436;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-neutral-500); font-size: 0.85rem;
}

.occasion__tekst { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; flex: 1; }
.occasion__naam {
  margin: 0 0 0.1rem;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.occasion__naam span { color: var(--color-neutral-500); font-weight: 600; }
.occasion__uitvoering {
  margin: 0 0 var(--space-4);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-neutral-700);
  max-width: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}

.occasion__feiten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 var(--space-4);
  border-top: 1px solid var(--color-border);
}
.occasion__feiten > div {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.occasion__feiten > div:nth-child(odd) { padding-right: var(--space-4); }
.occasion__feiten dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-neutral-500);
  margin-bottom: 0.1rem;
}
.occasion__feiten dd { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--color-primary-900); }

.occasion__voet {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.occasion__prijs { margin: 0; display: flex; align-items: baseline; gap: 0.45rem; }
.occasion__prijs span,
.occasion__prijs { font-family: var(--font-heading); }
.occasion__prijs {
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-primary-900);
  font-variant-numeric: lining-nums tabular-nums;
}
.occasion__prijs small {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-neutral-500);
  background: var(--color-neutral-100);
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
}
.occasion__meer { font-size: 0.82rem; font-weight: 600; color: var(--occ-blauw); white-space: nowrap; }
.occasion__link:hover .occasion__meer { text-decoration: underline; }

.occasions-leeg {
  border: 2px dashed var(--color-neutral-300);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  color: var(--color-neutral-700);
  max-width: none;
}

/* ==========================================================================
   23. Voertuigpagina
   ========================================================================== */
.voertuig-kop {
  background: var(--color-primary-900);
  color: #fff;
  padding-block: var(--space-5) var(--space-6);
}
.voertuig__kruimel { margin: 0 0 var(--space-4); font-size: 0.85rem; }
.voertuig__kruimel a { color: rgba(255, 255, 255, 0.85); }
.voertuig__kruimel a:hover { color: #fff; }
.voertuig-kop__rij {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.voertuig-kop h1 {
  color: #fff;
  margin: 0 0 0.25rem;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.1;
}
.voertuig__merk { color: rgba(255, 255, 255, 0.62); font-weight: 600; }
.voertuig__uitvoering {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.98rem;
  max-width: 60ch;
}
.voertuig-kop__prijs {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
  line-height: 1;
  color: #fff;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.voertuig-kop__prijs small {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-900);
  background: #fff;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}

.voertuig__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: var(--space-6);
  align-items: start;
}

/* -------------------- Galerij -------------------- */
.galerij { margin-bottom: var(--space-6); }
.galerij__hoofd { position: relative; margin: 0; }
.galerij__hoofd img {
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 436;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
}
.galerij__teller {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  background: rgba(11, 35, 56, 0.82);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.galerij__duimen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.galerij__duim {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: none;
  line-height: 0;
}
.galerij__duim img { width: 100%; height: auto; aspect-ratio: 960 / 436; object-fit: cover; }
.galerij__duim:hover { border-color: var(--color-neutral-300); }
.galerij__duim.is-actief { border-color: var(--occ-blauw); }

/* -------------------- Kerngegevens -------------------- */
.voertuig__kernfeiten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  margin: 0 0 var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.kernfeit {
  padding: var(--space-4);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.kernfeit dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-neutral-500);
  margin-bottom: 0.2rem;
}
.kernfeit dd { margin: 0; font-weight: 600; color: var(--color-primary-900); font-size: 0.95rem; }

.voertuig__tekst h2 { margin-top: 0; }
.voertuig__punten { list-style: none; padding: 0; }
.voertuig__punten li { position: relative; padding-left: 1.4em; }
.voertuig__punten li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--color-success-700);
  font-weight: 700;
}

/* -------------------- Zijkolom -------------------- */
.voertuig__zij {
  position: sticky;
  top: 96px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.voertuig__zijprijs {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--color-primary-900);
  font-variant-numeric: lining-nums tabular-nums;
}
.voertuig__zijprijs small {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-neutral-500);
}
.voertuig__garantie {
  margin: 0 0 var(--space-4);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-success-700);
}
.voertuig__zij .kenteken { margin-bottom: var(--space-5); }
.voertuig__adres {
  margin: var(--space-5) 0 var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 0.88rem;
  color: var(--color-neutral-700);
}

/* -------------------- Specificaties -------------------- */
.voertuig__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 var(--space-7);
  margin: 0;
}
.voertuig__specs .spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-neutral-300);
}
.voertuig__specs dt { color: var(--color-neutral-700); font-size: 0.88rem; }
.voertuig__specs dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  font-size: 0.9rem;
  color: var(--color-primary-900);
}

.voertuig__opties {
  columns: 3 230px;
  column-gap: var(--space-7);
  list-style: none;
  padding: 0;
  margin: 0;
}
.voertuig__opties li {
  break-inside: avoid;
  padding-left: 1.4em;
  position: relative;
  font-size: 0.9rem;
  margin-bottom: var(--space-2);
}
.voertuig__opties li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--color-success-700);
  font-weight: 700;
}

@media (max-width: 899px) {
  .voertuig__raster { grid-template-columns: 1fr; }
  .voertuig__zij { position: static; }
  .voertuig-kop__rij { align-items: flex-start; }
}