@import url('./fonts.css');

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

html { overflow-x: clip; scrollbar-gutter: stable; }

:root {
  --color-primary: #C05F3F;
  --color-primary-dark: #933A22;
  --color-primary-light: #fff8f6;
  --color-nav: #ffffff;
  /* De footer is bewust donker en heeft een eigen token: hij hing eerder aan
     --color-nav en werd onleesbaar toen de nav wit werd. */
  --color-footer: #252525;
  --color-footer-onder: #1A1A1A;
  --color-topbar: var(--color-primary);
  --color-bg-white: #ffffff;
  --color-bg-section: #efe9ce;
  --color-text-dark: #000000;
  --color-text-medium: #6C6C6C;
  --color-text-white: #FFFFFF;
  --color-border: #e8e0cc;
  --font-kop: 'Merriweather', 'Merriweather-fallback', Georgia, serif;
  --font-body: 'Roboto', 'Roboto-fallback', Arial, Helvetica, sans-serif;
  --font-size-h1: 3rem;
  --font-size-h2: 1.75rem;
  --font-size-h3: 1.4rem;
  --font-size-h4: 1.125rem;
  --font-size-body: 1rem;
  --font-size-klein: 0.875rem;
  --line-height-kop: 1.35;
  --line-height-body: 1.6;
  --container-max: 1200px;
  --section-padding: 80px 0;
  --section-padding-mob: 48px 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  /* Vrije ruimte onder de zwevende nav: nav reikt tot 92px (top 12 + hoogte 80),
     de topbar (40px) schuift mee, dus 92 - 40 + lucht. Paginakoppen gebruiken dit
     als padding-top zodat breadcrumb en titel niet onder de nav verdwijnen. */
  --nav-vrijruimte: 76px;
  /* Onderrand van de zwevende nav in de viewport, gemeten tijdens scrollen.
     Sticky elementen plakken hieronder vast, anders schuiven ze eronder weg. */
  --nav-onderrand: 92px;
  /* CTA-tokens (AenB-cta-tokens v1.json, variant Alles-in-1) */
  --cta-terracotta: #C05F3F;
  --cta-terracotta-deep: #B0492E;
  --cta-terracotta-deeper: #933A22;
  --cta-terracotta-wash: #F3E1D8;
  --cta-shadow-primair: 0 12px 24px -10px rgba(176,73,46,0.65);
  --cta-shadow-hover: 0 16px 30px -10px rgba(176,73,46,0.70);
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
  line-height: var(--line-height-body);
  background: var(--color-bg-white);
  overflow-x: clip;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-family: var(--font-kop);
  font-weight: 400;
  line-height: var(--line-height-kop);
  color: var(--color-text-dark);
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-family: var(--font-body); font-size: var(--font-size-h4); font-weight: 400; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { color: var(--cta-terracotta-deeper); }

img { max-width: 100%; height: auto; display: block; }

/* Knoppen */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}
.btn-primair {
  background: var(--cta-terracotta-deep);
  color: var(--color-text-white);
}
.btn-primair:hover { background: var(--cta-terracotta-deeper); color: var(--color-text-white); }
.btn-outline {
  background: transparent;
  border: 2px solid var(--cta-terracotta-deeper);
  color: var(--cta-terracotta-deeper);
  padding: 10px 26px;
}
.btn-outline:hover { background: var(--color-primary-light); color: var(--cta-terracotta-deep); }
.cta-sectie .btn-outline:hover { background: rgba(255,255,255,0.15); color: white; }
.btn-donker {
  background: var(--cta-terracotta-deep);
  color: var(--color-text-white);
}
.btn-donker:hover { background: var(--cta-terracotta-deeper); color: var(--color-text-white); }

/* Sectie-titel stijl */
.sectie-titel {
  text-align: center;
  margin-bottom: 48px;
}
.sectie-titel h2 { margin-bottom: 12px; font-size: calc(var(--font-size-h2) * 1.2); }
.sectie-kicker {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary-dark);
  margin-bottom: 10px;
}
.sectie-titel p {
  color: var(--color-text-medium);
  max-width: 560px;
  margin: 16px auto 0;
}

/* ─── BEHANDELING DETAILPAGINA ─── */
.detail-header {
  background: var(--color-bg-section);
  padding: var(--nav-vrijruimte) 0 36px;
}
.detail-header .breadcrumb { font-size: 0.8rem; color: var(--color-text-medium); margin-bottom: 1.25rem; }
.detail-header .breadcrumb a { color: var(--color-text-medium); }
.detail-header .breadcrumb a:hover { color: var(--color-primary); }
.detail-header .breadcrumb span { color: var(--color-primary); }
.detail-header h1 { font-size: calc(var(--font-size-h2) * 1.35); }
.detail-header .detail-sub { color: var(--color-text-medium); margin: 0.5rem 0 0; font-size: 1.05rem; }

.detail-sectie { padding: var(--section-padding); }
.detail-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: start;
}
.detail-grid img {
  border-radius: var(--radius-md);
  width: 100%;
  object-fit: cover;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}
.detail-tekst p { color: var(--color-text-medium); }
.detail-tekst h2 { font-size: 1.3rem; margin: 1.75rem 0 0.75rem; }
.detail-tekst h2:first-child { margin-top: 0; }
.detail-tekst h3 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }
.detail-tekst ul { list-style: none; margin: 0.5rem 0 1rem; display: grid; gap: 8px; }
.detail-tekst ul li { position: relative; padding-left: 26px; color: var(--color-text-medium); }
.detail-tekst ul li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}
.detail-tekst h4 { font-size: 0.95rem; margin: 1rem 0 0.4rem; }
/* Uitsluitingen ("niet geschikt bij"): neutraal streepje i.p.v. een vinkje,
   dat zou suggereren dat de behandeling juist wél kan */
.detail-tekst ul.detail-uitsluiting li::before { content: '\2013'; color: var(--color-text-medium); }
.detail-variant { border-top: 1px solid var(--color-border); padding-top: 1.75rem; margin-top: 2rem; }
.detail-variant:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.detail-variant .variant-meta { color: var(--color-primary); font-weight: 600; font-size: 0.9rem; margin: 0 0 0.75rem; }
.detail-tekst ol { margin: 0.5rem 0 1rem 1.25rem; display: grid; gap: 6px; color: var(--color-text-medium); }
.detail-tekst ol li { padding-left: 4px; }
.detail-tekst table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1.25rem; font-size: var(--font-size-klein); }
.detail-tekst th, .detail-tekst td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--color-border); color: var(--color-text-medium); }
.detail-tekst th { color: var(--color-text-dark); font-weight: 600; }
.detail-tekst td:nth-child(2), .detail-tekst th:nth-child(2) { white-space: nowrap; }

.detail-indicaties { list-style: none; margin: 0.5rem 0 1rem; display: grid; gap: 8px; }
.detail-indicaties li { position: relative; padding-left: 26px; color: var(--color-text-medium); }
.detail-indicaties li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.detail-varianten { list-style: none; margin: 0.5rem 0 1rem; }
.detail-varianten li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; }
.detail-varianten .stippel { flex: 1; border-bottom: 1px dotted #BBBBBB; min-width: 16px; }
.detail-varianten .prijs { color: var(--color-primary); font-weight: 500; white-space: nowrap; }

.detail-prijs {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 24px;
  margin: 1.5rem 0;
}
.detail-prijs-bedrag { font-family: var(--font-kop); font-size: 1.9rem; font-weight: 700; color: var(--color-primary); }
.detail-prijs-label { font-size: var(--font-size-klein); color: var(--color-text-medium); }

.detail-service-gebied-kop {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--font-size-klein);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin-top: 1.5rem;
  margin-bottom: 0.25rem;
}
.detail-service-gebied { font-size: var(--font-size-klein); color: var(--color-text-medium); }
.detail-bijgewerkt { font-size: var(--font-size-klein); color: var(--color-text-medium); margin-top: 1rem; }
.detail-knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.5rem; }

@media (max-width: 768px) {
  .detail-grid { grid-template-columns: 1fr; gap: 28px; }
  .detail-grid img { order: -1; max-height: 340px; }
}

/* Kaarten */
.kaart {
  background: var(--color-bg-white);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.kaart:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}
.kaart img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.4s ease; }
.kaart:hover img { transform: scale(1.05); }
.kaart-body { padding: 1.25rem; }

/* ─── TOPBAR ─── */
.topbar {
  background: var(--color-topbar);
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  color: var(--color-text-medium);
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.topbar a { color: #fff; }
.topbar a:hover { color: #1a1a1a; }
.topbar-links { display: flex; gap: 20px; align-items: center; }

/* ─── NAVIGATIE ─── */
.nav {
  background: var(--color-nav);
  position: fixed;
  top: 12px;
  left: 48px;
  right: 48px;
  z-index: 100;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transition: border-radius 0.2s;
}
.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0 32px;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo-img { height: 68px; width: auto; display: block; }
.footer-logo-img { height: 64px; width: auto; display: block; filter: brightness(0) invert(1); }
/* Op desktop is het paneel niets meer dan een omhulsel om het menu heen;
   kop en knoppen horen alleen bij de mobiele schermvullende variant. */
.nav-paneel { display: flex; align-items: center; }
.nav-paneel-kop, .nav-paneel-cta { display: none; }

.nav-menu {
  display: flex;
  gap: 28px;
  list-style: none;
  align-items: center;
}
.nav-menu a {
  color: #1a1a1a;
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
/* Diepe terracotta i.p.v. #C05F3F: op wit haalt dat 5,47:1 contrast (AA) */
.nav-menu a:hover { color: var(--cta-terracotta-deep); }
.nav-menu a[aria-current="page"] {
  color: var(--cta-terracotta-deep);
  font-weight: 600;
  position: relative;
}
.nav-menu a[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
/* ── ZOEKKNOP NAV ── */
.nav-zoek {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: var(--color-text-dark);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  margin-right: 4px;
}
.nav-zoek:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.nav-zoek svg { width: 20px; height: 20px; display: block; }

/* ── ZOEK OVERLAY ── */
.zoek-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 100px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.zoek-overlay.open { opacity: 1; visibility: visible; }
body.zoek-open { overflow: hidden; }

.zoek-modal {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 580px;
  margin: 0 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.zoek-invoer-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
}
.zoek-icoon { width: 20px; height: 20px; color: var(--color-text-medium); flex-shrink: 0; }
.zoek-invoer {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--color-text-dark);
  background: transparent;
}
.zoek-invoer::placeholder { color: #aaa; }
.zoek-sluiten {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: var(--color-bg-section);
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-text-medium);
  flex-shrink: 0;
  transition: background 0.15s;
}
.zoek-sluiten:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.zoek-sluiten svg { width: 14px; height: 14px; display: block; }
.zoek-resultaten { max-height: 380px; overflow-y: auto; padding: 6px 0; }
.zoek-resultaat-item {
  display: block;
  padding: 11px 18px;
  text-decoration: none;
  transition: background 0.12s;
  border-bottom: 1px solid var(--color-border);
}
.zoek-resultaat-item:last-child { border-bottom: none; }
.zoek-resultaat-item:hover { background: var(--color-primary-light); }
.zoek-res-titel {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 2px;
}
.zoek-res-omschrijving {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-medium);
}
.zoek-geen-resultaat {
  padding: 20px 18px;
  color: var(--color-text-medium);
  font-size: 0.88rem;
}

.nav-cta { margin-left: 12px; }
.nav-cta a.btn-primair {
  background: transparent;
  border: 1.5px solid var(--cta-terracotta);
  color: var(--cta-terracotta-deep);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 700;
}
.nav-cta a.btn-primair:hover { background: var(--cta-terracotta-wash); color: var(--cta-terracotta-deep); }
.nav-telefoon { display: none; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.hamburger-icon span {
  display: block;
  width: 24px;
  height: 2px;
  /* Was #efe9ce (creme) en daarmee vrijwel onzichtbaar op de witte navbalk;
     nu gelijk aan de kleur van het MENU-label ernaast. */
  background: #1a1a1a;
  transition: 0.3s;
}
.hamburger-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hamburger-label {
  display: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

/* ─── DYNAMISCHE NAV (alleen mobiel) ─── */
@media (max-width: 768px) {
  .hamburger .hamburger-label { display: none !important; }
  .hamburger { align-items: center; flex-direction: column; }

  /* Grote staat — bovenaan pagina */
  .nav .container {
    height: 110px;
    padding: 0 16px;
    position: relative;
    transition: height 0.4s ease;
  }
  .nav-logo-img {
    height: 80px;
    transition: height 0.4s ease;
  }
  .nav-cta {
    display: flex;
    opacity: 1;
    transform: scale(1);
    transform-origin: center center;
    pointer-events: auto;
    /* terugweg (klein → groot): direct infaden, mee-opschalen */
    transition: transform 0.4s ease, opacity 0.04s ease;
  }

  /* Kleine staat — na scrollen */
  .nav.nav-compact .container { height: 64px; }
  .nav.nav-compact .nav-logo-img { height: 46px; }
  .nav.nav-compact .nav-zoek {
    opacity: 0;
    transform: scale(0.58);
    pointer-events: none;
    transition: transform 0.4s ease, opacity 0.04s ease 0.36s;
  }
  .nav.nav-compact .nav-cta {
    opacity: 0;
    transform: scale(0.58);
    pointer-events: none;
    /* heenweg (groot → klein): meekrimpen met de balk, fade pas op het einde */
    transition: transform 0.4s ease, opacity 0.04s ease 0.36s;
  }
  .nav.nav-compact .hamburger {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  /* MENU-label schuift pas in als de knop volledig is weggefaded (na 0.4s),
     anders duwt hij de knop zichtbaar naar links */
  .nav.nav-compact .hamburger .hamburger-label {
    display: block !important;
    font-size: 0.65rem;
    margin: 0 8px 0 0;
    max-width: 60px;
    overflow: hidden;
    white-space: nowrap;
    animation: menu-label-in 0.25s ease 0.4s backwards;
  }
  @keyframes menu-label-in {
    from { max-width: 0; margin-right: 0; opacity: 0; }
    to { max-width: 60px; margin-right: 8px; opacity: 1; }
  }
  /* Telefoonnummer: alleen in compacte staat, gecentreerd tussen logo en MENU.
     Absoluut gepositioneerd zodat hij de layout niet verschuift; fadet in
     zodra de afspraak-knop weg is (na 0.4s) */
  .nav.nav-compact .nav-telefoon {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    white-space: nowrap;
    animation: nav-telefoon-in 0.25s ease 0.4s backwards;
  }
  .nav.nav-compact .nav-telefoon svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }
  @keyframes nav-telefoon-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* ─── HERO ─── */
.hero {
  position: relative;
  min-height: max(680px, 85vh);
  display: flex;
  align-items: center;
  background: #f5efe8;
  overflow: hidden;
  padding-top: 92px;
}
.hero > .container {
  width: 100%;
}
.hero-bg { display: none; }
.hero-inner { display: contents; }
@keyframes hero-zoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
.hero-img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: contain;
  object-position: center 15%;
  opacity: 0.2;
  animation: hero-zoom 6s ease-out forwards;
  transform-origin: center center;
}
@media (prefers-reduced-motion: reduce) {
  .hero-img { animation: none; }
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  padding: 60px 0;
}
.hero-content h1 { margin-bottom: 1rem; }
.hero-content p { color: var(--color-text-medium); margin-bottom: 1.5rem; font-size: 1.05rem; }
.hero-knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.btn-hero-primair {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 17px 32px;
  background: var(--cta-terracotta-deep);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: var(--cta-shadow-primair);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-hero-primair svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-hero-primair:hover {
  background: var(--cta-terracotta-deeper);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--cta-shadow-hover);
}
.btn-hero-primair:active { background: var(--cta-terracotta-deeper); transform: scale(0.98); }
.btn-hero-primair:focus-visible { outline: 3px solid var(--cta-terracotta); outline-offset: 2px; }
.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 32px;
  background: var(--cta-terracotta-wash);
  color: var(--cta-terracotta-deeper);
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.btn-hero-outline:hover { background: #EBD3C6; color: var(--cta-terracotta-deeper); }
.btn-hero-outline:focus-visible { outline: 3px solid var(--cta-terracotta); outline-offset: 2px; }
.hero-content .hero-microcopy {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cta-terracotta-deep);
  margin: -14px 0 24px 4px;
}
.hero-reviews-kaart {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.92);
  border-radius: 50px;
  padding: 16px 28px;
  gap: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.hero-reviews-score {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-score-cijfer {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-kop);
}
.hero-score-max {
  font-size: 0.9rem;
  font-weight: 400;
}
.hero-sterren { color: #AA6500; font-size: 1.1rem; letter-spacing: 2px; }
.hero-reviews-aantal {
  font-size: 0.82rem;
  color: #444;
  text-align: center;
}
.hero-reviews-link {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  text-decoration: none;
}
.hero-reviews-link:hover { text-decoration: underline; }

/* ─── HERO INFOBALK ─── */
/* Golf-overgang onderaan de hero — witte golf loopt over in de infobalk */
.hero-golf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  line-height: 0;
  pointer-events: none;
}
.hero-golf svg { display: block; width: 100%; height: 56px; }
@media (max-width: 768px) {
  .hero-golf svg { height: 36px; }
}

.hero-infobalk {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 14px 24px;
  flex-wrap: wrap;
}
.hero-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  transition: color 0.2s;
}
.hero-info-item:hover { color: var(--color-primary); }

/* ─── USP BLOKKEN ─── */
.usp-sectie { padding: var(--section-padding); background: var(--color-bg-white); }
.usp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.usp-kaart {
  text-align: center;
  /* Terracotta voetbalk, gelijk aan de behandeltegels: markeert het einde van
     de kaart, zodat witte kaarten op een witte sectie niet in elkaar overlopen */
  border-bottom: 6px solid var(--color-primary);
  transition: border-color 0.25s ease;
}
.usp-kaart:hover { border-bottom-color: var(--cta-terracotta-deep); }
.usp-kaart img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 1.25rem; }
.usp-kaart h3 { margin-bottom: 0.75rem; }
.usp-kaart p { color: var(--color-text-medium); font-size: var(--font-size-klein); margin-bottom: 1rem; }

/* ─── CIJFERBAND ─── */
.cijferband {
  background: var(--color-bg-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 40px 0;
}
.cijferband-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.cijfer-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cijfer-groot {
  font-family: var(--font-kop);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.1;
}
.cijfer-groot .cijfer-klein {
  font-size: 1.2rem;
  font-weight: 400;
  margin-left: 2px;
  color: var(--color-text-medium);
}
.cijfer-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-medium);
}
@media (max-width: 768px) {
  .cijferband { padding: 28px 0; }
  .cijferband-grid { gap: 12px; }
  .cijfer-groot { font-size: 1.8rem; }
  .cijfer-groot .cijfer-klein { font-size: 0.95rem; }
  .cijfer-label { font-size: 0.62rem; }
}

/* Pijl-link in kaarten — volle knoppen blijven voorbehouden aan conversiepunten */
.kaart-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cta-terracotta-deep);
  text-decoration: none;
  transition: color 0.2s, gap 0.2s;
}
.kaart-link:hover { color: var(--cta-terracotta-deeper); gap: 10px; }

/* ─── REVIEWS ─── */
.reviews-sectie { padding: var(--section-padding); background: var(--color-bg-section); }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.review-kaart { padding: 1.5rem; }
.sterren { color: #AA6500; font-size: 1.1rem; margin-bottom: 0.75rem; }
.review-tekst { font-style: italic; color: var(--color-text-medium); margin-bottom: 1rem; font-size: var(--font-size-klein); }
.review-naam { font-weight: 500; font-size: var(--font-size-klein); }
.review-tijd { font-weight: 400; color: var(--color-text-medium); }
.reviews-totaal { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 0.5rem; margin-bottom: 1.5rem; }
.reviews-score { font-size: 2rem; font-weight: 700; color: var(--color-primary); }
.reviews-sterren { color: #AA6500; font-size: 1.2rem; }
.reviews-aantal { font-size: var(--font-size-klein); color: var(--color-text-medium); }

/* ─── OVER ONS ─── */
.over-ons-sectie { padding: var(--section-padding); background: var(--color-bg-white); }
.over-ons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.over-ons-grid img { border-radius: var(--radius-md); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.over-ons-tekst h2 { margin-bottom: 1.25rem; }
.over-ons-tekst p { color: var(--color-text-medium); margin-bottom: 1rem; }

/* ─── VOORDELEN ─── */
.voordelen-sectie { padding: var(--section-padding); background: var(--color-bg-section); }
.voordelen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.voordeel { text-align: center; }
.voordeel-icoon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-primary-light);
  border: 1.5px solid #f0cfc0;
  color: var(--color-primary);
  margin: 0 auto 1.25rem;
}
.voordeel-icoon svg {
  width: 28px;
  height: 28px;
}
.voordeel h3 { margin-bottom: 0.5rem; }
.voordeel p { color: var(--color-text-dark); font-size: var(--font-size-klein); }

/* ─── LOCATIE ─── */
.locatie-sectie { padding: var(--section-padding); background: var(--color-bg-white); }
.locatie-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.locatie-grid img { border-radius: var(--radius-md); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.locatie-info h2 { margin-bottom: 1.25rem; }
.locatie-info p { color: var(--color-text-medium); }
.openingstijden { margin: 1.25rem 0; }
.openingstijden table { width: 100%; font-size: var(--font-size-klein); }
.openingstijden td { padding: 4px 0; color: var(--color-text-medium); }
.openingstijden td:last-child { text-align: right; font-weight: 500; color: var(--color-text-dark); }
.openingstijden tr.vandaag td { color: var(--color-primary); font-weight: 500; }

/* ─── INSTAGRAM ─── */
.instagram-sectie { padding: var(--section-padding); background: var(--color-bg-white); }
.instagram-feed-wrapper { max-width: 700px; margin: 0 auto; }

/* ─── FOOTER ─── */
.footer { background: var(--color-footer); color: #AAAAAA; padding: 60px 0 0; }
.footer-grid {
  display: grid;
  /* Adreskolom breed, "Volg ons" smal: die had eerder 1.5fr en liet rechts een gat */
  grid-template-columns: 2fr 1fr 1.2fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer h3 { color: var(--color-text-white); font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; }
.footer p, .footer a { color: #AAAAAA; font-size: var(--font-size-klein); line-height: 1.8; }
.footer a:hover { color: var(--color-primary); }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 6px; }
.footer-logo { font-family: var(--font-kop); font-size: 1.2rem; color: var(--color-text-white); margin-bottom: 0.75rem; }
.footer-logo span { color: var(--color-primary); }

/* Openingstijden: dag links, tijd rechts, zodat de tijden onder elkaar uitlijnen */
.footer-tijden { list-style: none; max-width: 210px; }
.footer-tijden li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--font-size-klein);
  line-height: 1.8;
}
.footer-tijden .tijd { color: #CFCFCF; font-variant-numeric: tabular-nums; }

/* Sociale links met icoon, zelfde opzet als de contactknoppen */
.footer-sociaal { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.footer-sociaal a { display: inline-flex; align-items: center; gap: 10px; }
.footer-sociaal svg { width: 18px; height: 18px; flex-shrink: 0; }

.footer-bottom {
  background: var(--color-footer-onder);
  padding: 16px 0;
  font-size: 0.75rem;
  color: #8A8A8A;
  border-top: 1px solid #333;
}
.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 20px;
}
.footer-bottom .scheiding { color: #555; }
.footer-bottom a { color: #B8B8B8; }
.footer-bottom a:hover { color: var(--color-primary); }


/* ─── TABLET (iPad: 768px – 1024px) ─── */
@media (max-width: 1024px) and (min-width: 769px) {
  .usp-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .reviews-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .voordelen-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .over-ons-grid, .locatie-grid { gap: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .nav-menu { gap: 18px; }
  .nav-menu a { font-size: 0.78rem; }
}

/* ─── MOBIEL (onder 768px) ─── */
@media (max-width: 768px) {
  /* Mobiel: nav is in grote staat 110px hoog (reikt tot 122px), topbar 36px */
  :root { --font-size-h1: 1.6rem; --font-size-h2: 1.35rem; --nav-vrijruimte: 106px; --nav-onderrand: 76px; }

  .topbar { height: 36px; }
  .topbar .container { display: none; }

  /* ─── SCHERMVULLEND UITKLAPMENU ───
     Los paneel over de hele viewport (boven de contactzijbalk op z-index 900),
     met eigen kop, sluitknop en actieknoppen onderaan. */
  .nav-paneel {
    display: none;
    position: fixed;
    inset: 12px;
    z-index: 1000;
    flex-direction: column;
    background: var(--color-bg-white);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.22);
    padding: 16px 20px 20px;
    overflow-y: auto;
    /* voorkomt dat doorscrollen de pagina eronder meeneemt */
    overscroll-behavior: contain;
  }
  .nav-paneel.open { display: flex; }

  .nav-paneel-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .nav-paneel-logo { height: 56px; width: auto; display: block; }

  /* Zelfde vormtaal als de knoppen op desktop: --radius-md, kapitalen,
     letterspatiering. Geen pilvorm en geen ronde icoonbadges. */
  .nav-sluiten {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--cta-terracotta-deep);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-sluiten:hover { background: var(--cta-terracotta-deeper); }
  /* Bij het openen krijgt deze knop de focus (voor toetsenbord en schermlezers).
     Op touch liet dat een blauwe systeemring achter; die ring hoort alleen te
     verschijnen bij toetsenbordbediening, vandaar :focus-visible. */
  .nav-sluiten:focus { outline: none; }
  .nav-sluiten:focus-visible {
    outline: 2px solid var(--cta-terracotta-deeper);
    outline-offset: 2px;
  }
  .nav-sluiten-icoon { display: inline-flex; align-items: center; }
  .nav-sluiten-icoon svg { width: 14px; height: 14px; }

  /* Menu-items groot en onder elkaar; niet in kapitalen, dat leest op dit
     formaat rustiger dan de kleine kapitalen van de desktopbalk */
  .nav-paneel .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 20px;
  }
  .nav-paneel .nav-menu li { width: 100%; }
  .nav-paneel .nav-menu a {
    display: block;
    padding: 14px 0;
    font-size: 1.3rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #1a1a1a;
  }
  .nav-paneel .nav-menu a:hover { color: var(--cta-terracotta-deep); }
  .nav-paneel .nav-menu a[aria-current="page"] {
    color: var(--cta-terracotta-deep);
    font-weight: 500;
  }

  /* Geen blauwe tikflits op mobiel; de focusring blijft wel voor toetsenbord */
  .nav-paneel a { -webkit-tap-highlight-color: transparent; }
  .nav-paneel a:focus-visible {
    outline: 2px solid var(--cta-terracotta-deep);
    outline-offset: 3px;
  }

  /* Actieknoppen onderaan het paneel */
  .nav-paneel-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 28px;
  }
  /* Gevuld + omlijnd, net als .btn-primair en .btn-outline op desktop */
  .nav-paneel-knop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .nav-paneel-knop-licht {
    background: transparent;
    /* 2px rand met 12px padding: samen even hoog als de gevulde knop */
    border: 2px solid var(--cta-terracotta-deep);
    padding: 12px 16px;
    color: var(--cta-terracotta-deep);
  }
  .nav-paneel-knop-licht:hover { background: var(--color-primary-light); color: var(--cta-terracotta-deep); }
  .nav-paneel-knop-vol {
    background: var(--cta-terracotta-deep);
    color: #fff;
  }
  .nav-paneel-knop-vol:hover { background: var(--cta-terracotta-deeper); color: #fff; }
  /* Icoon erft de tekstkleur via currentColor */
  .nav-paneel-icoon { display: inline-flex; align-items: center; flex-shrink: 0; }
  .nav-paneel-icoon svg { width: 16px; height: 16px; }

  /* Pagina eronder vastzetten zolang het paneel open staat */
  body.nav-open { overflow: hidden; }

  /* .nav heeft z-index 100 en maakt daarmee een eigen stapelcontext: een hoge
     z-index op het paneel zelf helpt niet, want dat blijft binnen die context.
     Daarom tilt de nav als geheel omhoog. 1100 en niet 1000, want de zwevende
     afspraakbalk zit ook op 1000 en staat later in de DOM — bij een gelijke
     z-index wint dan die balk. De cookiebanner (9999) blijft bewust bovenaan. */
  body.nav-open .nav { z-index: 1100; }

  /* Allebei overbodig zolang het menu open staat, en ze dekken het paneel af:
     de contactzijbalk rechts en de afspraakbalk die bij scrollen opkomt.
     Die afspraakknop zit ook onderin het paneel zelf. */
  body.nav-open .contact-sidebar { display: none; }
  body.nav-open ab-sticky-cta { display: none; }

  .nav { left: 12px; right: 12px; }
  .nav .container { padding: 0 16px; }
  .nav-cta { display: flex; margin-left: auto; margin-right: 12px; }
  .nav-cta a.btn-primair { white-space: nowrap; }
  .hamburger { display: flex; }

  .hero { min-height: 100svh; }
  .hero-bg { background: rgba(255,255,255,0.88); }
  /* Ruimte vrijhouden voor de zwevende contactknoppen rechts */
  .hero-content { padding-right: 56px; }

  /* Kaarten onder elkaar: forsere voetbalk en diepere schaduw voor onderscheid */
  .usp-grid { grid-template-columns: 1fr; }
  .usp-kaart { border-bottom-width: 8px; }
  .usp-kaart.kaart { box-shadow: 0 3px 18px rgba(0,0,0,0.11); }
  .reviews-grid { grid-template-columns: 1fr; }
  .voordelen-grid { grid-template-columns: repeat(2, 1fr); }
  .over-ons-grid, .locatie-grid { grid-template-columns: 1fr; }
  .over-ons-grid img, .locatie-grid img { order: -1; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  .usp-sectie, .reviews-sectie, .over-ons-sectie, .voordelen-sectie, .locatie-sectie { padding: var(--section-padding-mob); }
}

/* ─── KLEINE MOBIEL (onder 480px) ─── */
@media (max-width: 480px) {
  .voordelen-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-knoppen { flex-direction: column; }
}

/* ─── STICKY CONTACT SIDEBAR (tokens: floatingButton) ─── */
.contact-sidebar {
  position: fixed;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.contact-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--cta-terracotta);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,0.5);
  transition: background 0.2s, transform 0.2s;
}
.contact-sidebar-item:hover {
  background: var(--cta-terracotta-deeper);
  color: #fff;
  transform: scale(1.06);
}

.contact-sidebar-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* WhatsApp — groen, blijft groen bij hover (iets donkerder) */
.contact-sidebar-whatsapp { background: #25D366; }
.contact-sidebar-whatsapp:hover { background: #1da851; }

/* Op mobiel iets kleiner en dichter op de rand; geen hover-effect op touch */
@media (max-width: 768px) {
  .contact-sidebar {
    right: 8px;
    gap: 8px;
    transition: opacity 0.25s, visibility 0.25s;
  }
  .contact-sidebar-item { width: 40px; height: 40px; }
  .contact-sidebar-item svg { width: 18px; height: 18px; }
  .contact-sidebar-item:hover { transform: none; }

  /* Verberg sidebar wanneer sticky CTA-balk actief is — voorkomt dubbele CTA */
  body.ab-cta-actief .contact-sidebar {
    opacity: 0;
    visibility: hidden;
  }
}

/* ─── PAGINA HERO (foto-header op binnenste pagina's) ─── */
.pagina-hero {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-nav);
}
.pagina-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.pagina-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(37,37,37,0.82) 40%, rgba(37,37,37,0.4) 100%);
}
.pagina-hero-content {
  position: relative;
  z-index: 2;
  /* Alleen boven en onder: een korte `padding` zou de zijkanten op 0 zetten
     en daarmee de 24px van .container wegdrukken (dit element heeft beide
     klassen). Op mobiel plakte de tekst daardoor tegen de schermrand. */
  padding-top: 60px;
  padding-bottom: 60px;
}
.pagina-hero h1 {
  color: var(--color-text-white);
  margin-bottom: 0.5rem;
}
.pagina-hero p {
  color: #CCCCCC;
  margin: 0;
  font-size: 1.05rem;
}
.pagina-hero .breadcrumb {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 1rem;
}
.pagina-hero .breadcrumb a {
  color: rgba(255,255,255,0.65);
}
.pagina-hero .breadcrumb a:hover {
  color: #fff;
}
.pagina-hero .breadcrumb span {
  color: rgba(255,255,255,0.9);
}

@media (max-width: 768px) {
  /* Het verloop links-naar-rechts hoort bij de desktop, waar de tekst in de
     donkere linkerhelft staat. Op mobiel loopt de tekst over de volle breedte
     en viel het einde van een regel op het lichte deel (ruim onder 4,5:1).
     Daarom hier van boven naar beneden en overal donker genoeg. */
  .pagina-hero-overlay {
    background: linear-gradient(to bottom, rgba(37,37,37,0.62), rgba(37,37,37,0.78));
  }
  /* Hoogte volgt de inhoud; de bovenmarge houdt de tekst vrij van de
     zwevende navbalk, net als bij de gewone paginakoppen. */
  .pagina-hero {
    min-height: 0;
    align-items: stretch;
  }
  .pagina-hero-content {
    padding-top: var(--nav-vrijruimte);
    padding-bottom: 36px;
  }
  .pagina-hero p { font-size: 0.95rem; }
  .pagina-hero .breadcrumb { margin-bottom: 0.6rem; }
}

/* ─── FAQ SECTIE ─── */
.faq-sectie {
  padding: var(--section-padding);
  background: var(--color-bg-section);
}
.faq-lijst {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-item {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-dark);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--cta-terracotta-deep);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.faq-item[open] > summary::after {
  transform: rotate(45deg);
}
.faq-item summary:hover {
  background: #fdf5f2;
}
.faq-antwoord {
  padding: 0 20px 18px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-medium);
  font-size: var(--font-size-klein);
  line-height: 1.7;
}
.faq-antwoord p { margin: 12px 0 0; }
.faq-antwoord p:first-child { margin-top: 12px; }

@media (max-width: 768px) {
  .faq-sectie { padding: var(--section-padding-mob); }
  .faq-item summary { padding: 15px 16px; font-size: 0.9rem; }
  .faq-antwoord { padding: 0 16px 15px; }
}