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

/* ==========================================================================
   Jules coffee & concept - ontwerp
   Hun eigen taal: wit, bijna zwart, en het roze van de madeleines als enige
   kleur. Geen schreefletter, want hun merk is een strakke grotesk: alle
   koppen staan in Inter, groot en strak op elkaar. Veel wit, dunne lijnen,
   de foto's doen het werk. Alles op de telefoon eerst.
   ========================================================================== */

:root {
  --ink:        #16151a;   /* bijna zwart, zoals hun JULES-letter */
  --ink-2:      #26252b;
  --ink-3:      #3b3a42;
  --paper:      #f7f6f4;   /* gebroken wit, de kleur van hun muren */
  --paper-2:    #ffffff;   /* echt wit, voor kaarten en vlakken */
  --paper-3:    #eeece8;   /* een tint dieper, voor een rustig blok */
  --accent:       #b4525f;   /* het roze van de madeleines, tekstveilig (5,0:1) */
  --accent-tekst: #9e4653;   /* een tint dieper voor kleine tekst */
  --accent-zacht: #f0b6bd;   /* hetzelfde roze opgelicht, alleen op donker */
  --accent-dim:   rgba(180, 82, 95, .10);
  /* De hoofdknop is zwart. Roze knoppen zouden schreeuwen, en dat past niet
     bij een zaak die zelf bijna alles wit laat. */
  --knop:       #16151a;
  --knop-diep:  #000000;
  --muted:      #55535c;
  --muted-dark: rgba(255, 255, 255, .80);
  --line:       rgba(22, 21, 26, .13);
  --line-dark:  rgba(255, 255, 255, .14);
  --ok:         #2f7d54;
  --warn:       #a8531f;

  /* Geen schreefletter bij Jules. --serif blijft bestaan zodat de rest van
     de opmaak niet hoeft te veranderen, maar wijst naar dezelfde grotesk. */
  --serif: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sans:  'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --wrap: 1200px;
  --ftr-lijn: 36px;   /* hoogte van het woordmerk in de voettekst */
  --pad: clamp(18px, 5vw, 56px);        /* zijmarge van elke container */
  --sec: clamp(64px, 9vw, 128px);       /* ruimte boven en onder een sectie */
  --sec-kort: clamp(48px, 6vw, 76px);   /* idem, voor een smalle sectie */
  --kop-gap: clamp(38px, 5vw, 62px);    /* ruimte onder een sectiekop */
  --gap: 14px;                          /* ruimte tussen kaarten in een raster */
  --kaart-pad: clamp(22px, 2vw, 28px);  /* binnenmarge van een kaart */
  --r: 2px;                             /* afronding, overal dezelfde */
  /* Gelaagde schaduwen: een korte die het vlak van de achtergrond tilt en een
     lange die de diepte doet. Een enkele schaduw oogt altijd plat. */
  --schaduw-s:  0 1px 2px rgba(22, 21, 26, .05), 0 3px 8px rgba(22, 21, 26, .05);
  --schaduw-m:  0 1px 2px rgba(22, 21, 26, .05), 0 8px 20px rgba(22, 21, 26, .07), 0 18px 44px rgba(22, 21, 26, .06);
  --shadow:     0 1px 2px rgba(22, 21, 26, .05), 0 10px 26px rgba(22, 21, 26, .08), 0 22px 56px rgba(22, 21, 26, .07);
  --shadow-lg:  0 2px 4px rgba(22, 21, 26, .08), 0 16px 40px rgba(22, 21, 26, .14), 0 38px 90px rgba(22, 21, 26, .16);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-uit: cubic-bezier(.33, 1, .68, 1);
}

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

/* Terugval voor browsers zonder overflow: clip. */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* Raster- en flexcellen krijgen standaard min-width:auto. Eén lange, onbreekbare
   regel rekt dan de hele pagina op. Dit zet dat overal uit, in één regel, in
   plaats van per geval een uitzondering te maken. */
.hero__in > *, .facts__in > *, .over__in > *, .inloop__in > *, .bezoek__in > *, .ftr__grid > *,
/* let op: .hdr__in > * staat hier NIET bij, want de navigatie mag niet krimpen:
   dan lopen de menu-items over de afspraakknop heen */
.svc-grid > *, .kapsel-grid > *, .vz-grid > *, .tabs > *,
.prijslijst li > *, .keuze > *, .kaart-kaart__foot > *, .zones > *,
.demobalk__in > *, .tijden li > *, .samenvat > *,
.hero__actions > *, .kapsel__knoppen > *, .mobar > *, .stapbalk > * { min-width: 0; }

html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* Zijwaarts schuiven hoort niet te kunnen. overflow-x op alleen de body is
     niet genoeg: de html eromheen kan dan nog steeds meeschuiven. clip maakt,
     anders dan hidden, geen scrolldoos aan, dus de vaste kopbalk blijft staan.
     overscroll-behavior-x houdt de veegbeweging tegen die het beeld laat
     doorschieten. */
  overflow-x: clip;
  overscroll-behavior-x: none;
  /* De ruimte van de schuifbalk blijft altijd gereserveerd. Zet een venster de
     pagina stil, dan verdwijnt de schuifbalk anders en springt de hele pagina
     een centimeter opzij, kopbalk incluis. Op de telefoon verandert er niets:
     daar ligt de schuifbalk over de pagina heen. */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -.002em;
  -webkit-font-smoothing: antialiased;
}
/* Vensters zetten de pagina eronder stil. position:fixed en niet alleen
   overflow:hidden, want dat laatste houdt Safari op de iPhone niet tegen.
   main.js onthoudt de scrollplek en zet die bij het sluiten terug. */
body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

img, svg { max-width: 100%; display: block; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r);
}
/* op donkere vlakken moet de ring lichter zijn om op te vallen */
.hero :focus-visible, .kapsels :focus-visible, .ftr :focus-visible,
.demobalk :focus-visible { outline-color: var(--accent-zacht); }

/* --- typografie ---------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0; line-height: 1.1; letter-spacing: -.022em; }

.eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent-tekst);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; flex: none; }

.h-display { font-size: clamp(40px, 6vw, 78px); font-weight: 600; letter-spacing: -.04em; line-height: .98; }
.h-section { font-size: clamp(29px, 3.8vw, 46px); font-weight: 600; letter-spacing: -.03em; }
.lede { font-size: clamp(16px, 1.35vw, 18.5px); color: var(--muted); max-width: min(54ch, 100%); line-height: 1.72; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
section { padding-block: var(--sec); }
/* Een ankerlink landt anders precies achter de vaste kopbalk. --kop-h wordt in
   main.js op de echte hoogte gezet. */
section[id], main[id], [id].wrap { scroll-margin-top: calc(var(--kop-h, 124px) + 20px); }

/* --- knoppen ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 30px; line-height: 1.2;
  font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--r);
  border: 1px solid transparent;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .2s var(--ease);
  text-align: center;
}
.btn { box-shadow: 0 1px 2px rgba(22, 21, 26,.04); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn[disabled] { box-shadow: none; }
@media (hover: hover) {
  .btn--accent:hover, .btn--ink:hover { transform: translateY(-2px); box-shadow: var(--schaduw-m); }
  .btn--ghost:hover, .btn--ghost-light:hover { transform: translateY(-1px); }
}
.btn--accent { background: var(--knop); color: #fff; font-size: 12.5px; font-weight: 600; }
.btn--accent:hover { background: var(--knop-diep); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-3); }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost-light { border-color: var(--line-dark); color: #fff; }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn--sm { min-height: 42px; padding: 0 20px; font-size: 11px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .38; pointer-events: none; }

.link-u {
  position: relative;
  border-bottom: 1px solid rgba(180, 82, 95, .35);
  padding-bottom: 2px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.link-u:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* --- demobalk (weghalen bij oplevering) ---------------------------------- */
.demobalk {
  background: var(--ink); color: rgba(255, 255, 255, .68);
  font-size: 12.5px; line-height: 1.4;
  border-bottom: 1px solid var(--line-dark);
}
.demobalk__in {
  max-width: var(--wrap); margin: 0 auto; padding: 9px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.demobalk b { color: #fff; font-weight: 600; }
.demobalk__merk {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent-zacht); font-weight: 500; letter-spacing: .06em; white-space: nowrap;
  transition: color .25s var(--ease);
}
.demobalk__merk img { width: 18px; height: 18px; border-radius: 4px; flex: none; }
.demobalk__merk span { border-bottom: 1px solid transparent; padding-bottom: 1px; transition: border-color .25s var(--ease); }
a.demobalk__merk:hover { color: #fff; }
a.demobalk__merk:hover span { border-bottom-color: var(--accent); }
.demobalk__weg { display: none; }
@media (min-width: 720px) { .demobalk__weg { display: inline; } }

/* --- kop / navigatie ----------------------------------------------------- */
/* De kopbalk is meteen wit, ook boven aan de pagina. Wens van Kerim (19-08):
   een doorzichtige balk die pas bij het scrollen wit wordt, leest onrustig.
   .is-stuck voegt daarom alleen nog een schaduw toe, geen kleurwissel. */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 90;
  background: rgba(251, 249, 245, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .4s var(--ease);
}
.hdr__in {
  max-width: var(--wrap); margin: 0 auto; padding: 16px var(--pad);
  display: flex; align-items: center; gap: 24px;
}
.hdr.is-stuck { box-shadow: var(--schaduw-s); }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand__mark {
  font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
/* Het woordmerk is de naam zelf, in dezelfde strakke grotesk als op hun raam.
   Inter loopt hier tot 600; zwaarder kan niet, dus het effect komt van de
   grootte en van de krappe letterafstand. */
.brand__naam {
  display: block; font-family: var(--sans); font-size: 25px; font-weight: 600;
  letter-spacing: -.005em; line-height: 1; color: var(--ink);
}
.brand__sub {
  display: block; font-family: var(--sans); font-size: 8px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-top: 6px; line-height: 1.65;
}
.ftr .brand__naam { color: #fff; }

.nav { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
.nav a { white-space: nowrap; }
.nav a {
  font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  transition: color .3s var(--ease);
  position: relative; padding-block: 4px;
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--accent);
  transition: width .3s var(--ease);
}
.nav a:hover::after { width: 100%; }
.nav a:hover { color: var(--accent-tekst); }

.hdr__cta { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }

.status {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}

.burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; }
.burger span { display: block; width: 22px; height: 1px; background: var(--ink); position: relative; transition: background .3s; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 1px; background: inherit;
  transition: transform .3s var(--ease);
}
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
body.nav-open .burger span { background: transparent !important; }
body.nav-open .burger span::before { transform: translateY(7px) rotate(45deg); background: var(--ink); }
body.nav-open .burger span::after { transform: translateY(-7px) rotate(-45deg); background: var(--ink); }

/* --- hero ---------------------------------------------------------------- */
.hero {
  position: relative; background: var(--paper); color: var(--ink);
  overflow: hidden;
}
/* Twee kolommen: links de tekst, rechts een foto van hun eigen bord.
   Geen donkere waas over het beeld, want de pagina moet licht blijven. */
.hero__in {
  position: relative; z-index: 2; width: 100%; min-width: 0;
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(118px, 13vw, 172px) var(--pad) clamp(54px, 7vw, 96px);
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(28px, 5vw, 76px); align-items: center;
}
.hero__tekst { max-width: 34rem; min-width: 0; }
.hero__beeld { position: relative; min-width: 0; }
.hero__beeld img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r);
  box-shadow: var(--shadow);
}
/* Geen kader achter de foto (wens Kerim, 25-08): op wit werkten die dunne
   lijnen niet, ze staken aan twee kanten uit en leidden af van de foto zelf. */
.hero h1 { color: var(--ink); }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .lede { color: var(--muted); margin-top: 22px; max-width: min(42ch, 100%); }
.hero__blok { display: flex; flex-direction: column; align-items: stretch; max-width: 100%; }
/* De tip staat bovenaan het blok, boven de knoppen (wens Kerim, 25-08). Daarom
   houdt de tip de ruimte tot de ondertekst en staan de knoppen dichter eronder. */
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.hero__blok .inlooptip { margin-top: 32px; }
.hero__actions .btn { flex: 0 1 auto; min-width: 0; }

.stars { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 14px; color: var(--muted); }
.stars__icons { display: inline-flex; gap: 2px; color: var(--accent); font-size: 15px; }
.stars b { font-weight: 600; color: var(--ink); }

/* de award, nadrukkelijk in beeld */
.award {
  display: flex; align-items: center; gap: 18px; margin-top: 18px;
  max-width: 100%; padding: 15px 26px 15px 16px;
  border: 1px solid rgba(240, 182, 189,.55); border-radius: var(--r);
  background: linear-gradient(100deg, rgba(240, 182, 189,.20), rgba(240, 182, 189,.05));
  backdrop-filter: blur(4px);
}
.award img { width: 64px; height: 64px; flex: none; }
.award b { display: block; font-family: var(--serif); font-size: 22px; font-weight: 500; color: #fff; line-height: 1.2; }
.award small { display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-zacht); margin-top: 4px; }

/* --- feitenbalk ---------------------------------------------------------- */
.facts { background: var(--ink-2); color: #fff; padding-block: 0; }
.facts__in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.fact { padding: 34px 8px; text-align: center; border-left: 1px solid var(--line-dark); }
.fact:first-child { border-left: 0; }
.fact b { display: block; font-family: var(--serif); font-size: clamp(28px, 3.4vw, 40px); font-weight: 300; color: var(--accent-zacht); }
.fact span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* --- sectiekop ----------------------------------------------------------- */
.shead { max-width: 720px; margin-bottom: var(--kop-gap); }
.shead--center { margin-inline: auto; text-align: center; }
.shead--center .eyebrow { justify-content: center; }
.shead--center .lede { margin-inline: auto; }
.shead .lede { margin-top: 20px; }

/* --- diensten ------------------------------------------------------------ */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.svc {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--kaart-pad); text-align: left; width: 100%; cursor: pointer;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
  display: flex; flex-direction: column;
}
.svc:hover { transform: translateY(-3px); }
.svc__meer {
  display: inline-flex; align-items: center; gap: 6px;
  justify-self: end; margin-top: 2px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-tekst);
}
.svc__meer svg { transition: transform .3s var(--ease); }
.svc:hover .svc__meer svg { transform: translateX(3px); }

.svc { box-shadow: var(--schaduw-s); }
.svc:hover { border-color: rgba(168, 86, 12, .38); box-shadow: var(--shadow); }
.svc:active { transform: translateY(-1px); }
/* Beeld boven op de kaart: het loopt tot aan de rand, dus de binnenmarge van de
   kaart wordt hier met een negatieve marge teruggenomen. */
.svc__beeld {
  display: block; overflow: hidden; background: var(--paper-3);
  margin: calc(var(--kaart-pad) * -1) calc(var(--kaart-pad) * -1) 18px;
  aspect-ratio: 16 / 10;
}
.svc__beeld picture { display: block; height: 100%; }
.svc__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.svc:hover .svc__beeld img { transform: scale(1.05); }
.svc__no { font-family: var(--serif); font-size: 15px; color: var(--accent); letter-spacing: .1em; }
.svc h3 { font-size: 25px; margin: 10px 0 10px; }
.svc p { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.svc__from {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  /* Vaste opbouw van drie regels: kopje, bedrag, "meer lezen" rechts. Met een
     flexregel die mocht afbreken lag de streep bij de langste kaart hoger dan
     bij de andere drie, en dat verschoof ook nog per schermbreedte. */
  display: grid; grid-template-columns: 1fr; row-gap: 6px;
}
.svc__label { display: block; }
.svc__from b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.15; letter-spacing: 0; text-transform: none; color: var(--ink); }

/* --- prijzen ------------------------------------------------------------- */
.prijzen { background: var(--paper-2); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-bottom: 34px; }
.tab {
  min-height: 46px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: var(--r); color: var(--muted);
  transition: all .28s var(--ease);
}
.tab:hover { border-color: var(--ink); color: var(--ink); }
.tab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.prijspaneel[hidden] { display: none; }
.prijspaneel__note {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--accent-dim); border-radius: var(--r); padding: 14px 18px; margin: 0 0 26px;
  font-size: 14px; color: #5c4718;
}
.prijslijst { list-style: none; margin: 0; padding: 0; }
.prijslijst li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 28px; align-items: center;
  padding: 19px 0; border-bottom: 1px solid var(--line);
}
.prijslijst li:first-child { border-top: 1px solid var(--line); }
.prijsnaam { font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.3; }
.prijsnaam small { display: block; font-family: var(--sans); font-size: 14px; color: var(--muted); margin-top: 5px; }
.prijsbedrag { font-family: var(--serif); font-size: 22px; font-weight: 500; white-space: nowrap; text-align: right; }
.prijsbedrag i { font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-tekst); margin-right: 6px; }
.prijslijst .btn { justify-self: end; }

/* --- over ---------------------------------------------------------------- */
.over__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: stretch; }
.over__fig { position: relative; line-height: 0; }
.over__fig picture { display: block; overflow: hidden; border-radius: var(--r); box-shadow: var(--shadow); }
/* een haarfijne binnenrand haalt de harde knip tussen foto en achtergrond weg */
.over__fig::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: var(--r); box-shadow: inset 0 0 0 1px rgba(22, 21, 26,.07);
}
/* De foto loopt van boven tot onder even hoog als de tekstkolom ernaast. */
.over__fig img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; object-position: 50% 46%; }
.over__stamp {
  position: absolute; right: -24px; bottom: -24px; background: var(--ink); color: #fff;
  padding: 20px 28px 22px; text-align: center; box-shadow: var(--shadow-lg);
}
.over__stamp b { display: block; font-family: var(--serif); font-size: 36px; font-weight: 500; color: var(--accent-zacht); line-height: 1.15; }
.over__stamp span { display: block; margin-top: 9px; font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.over p { color: var(--muted); }
.over p + p { margin-top: 18px; }
.zones { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.zones li { background: var(--paper); padding: 18px 20px; }
.zones b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 500; }
.zones span { font-size: 14px; color: var(--muted); }

/* --- kapsels ------------------------------------------------------------- */
.kapsels { background: var(--ink); color: #fff; }
.kapsels .h-section { color: #fff; }
.kapsels .lede { color: var(--muted-dark); }
.kapsels .tab { border-color: var(--line-dark); color: rgba(255,255,255,.66); }
.kapsels .tab:hover { border-color: #fff; color: #fff; }
.kapsels .tab.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.kapsel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.kapsel-grid[hidden] { display: none; }
.kapsel { background: var(--ink); padding: var(--kaart-pad); transition: background .3s var(--ease); }
.kapsel { transition: background .35s var(--ease); }
@media (hover: hover) { .kapsel:hover { background: var(--ink-2); } }
.kapsel h3 { font-size: 24px; color: #fff; margin-bottom: 10px; }
.kapsel--hulp {
  grid-column: 1 / -1; background: var(--ink-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px;
  padding: var(--kaart-pad);
}
.kapsel--hulp div { flex: 1 1 300px; }
.kapsel--hulp h3 { margin-bottom: 4px; }
.kapsel--hulp .kapsel__knoppen { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 10px; }
.kapsel--hulp .kapsel__knoppen .btn { flex: 1 1 auto; }
.kapsel p { margin: 0; font-size: 15px; color: var(--muted-dark); }

/* --- voorzieningen ------------------------------------------------------- */
.vz { background: var(--paper-2); padding-block: var(--sec-kort); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.vz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 26px; }
.vz-grid > * { min-width: 0; }
.vz-kaart { background: var(--paper-2); padding: 20px 22px; }
.vz-kaart b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 500; margin-bottom: 4px; }
.vz-kaart span { font-size: 14px; color: var(--muted); }

/* --- kaart en tijden ----------------------------------------------------- */
.bezoek { background: var(--paper-3); }
.bezoek__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: center; }

.kaart-kaart { background: var(--paper-2); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
#kaart { height: clamp(380px, 42vw, 620px); background: #ddd8d1; z-index: 1; }
.kaart-kaart__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.kaart-kaart__foot a {
  background: var(--paper-2); padding: 17px 12px; text-align: center;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .25s var(--ease);
}
@media (hover: hover) { .kaart-kaart__foot a:hover { background: var(--paper); color: var(--accent); } }
.kaart-kaart__foot a:active { background: var(--paper-3); }

.leaflet-container { font: inherit; }
/* Leaflet zet de bronvermelding zelf op 11 px. Door font: inherit hierboven nam
   hij het paginaformaat over (17 px) en liep de regel over twee regels. Hij hoort
   klein en op één regel rechtsonder in de kaart te staan. */
.leaflet-control-attribution {
  font-size: 11px; line-height: 1.6; white-space: normal; max-width: 100%;
}
.leaflet-control-attribution a { color: inherit; }
.leaflet-control-zoom a { font: inherit; font-size: 20px; line-height: 26px; }
.pin {
  width: 40px; height: 40px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--ink); border: 2px solid var(--accent); display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
.pin::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.kaart-pop { font-family: var(--sans); font-size: 14px; line-height: 1.5; }
.leaflet-popup-content { margin: 14px 16px; }
.leaflet-popup-content-wrapper { border-radius: 2px; }
.leaflet-popup-close-button { padding: 6px 8px 0 0 !important; }
.kaart-pop b { font-family: var(--serif); font-size: 19px; font-weight: 500; display: block; margin-bottom: 4px; }

.tijden { list-style: none; margin: 0 0 26px; padding: 0; }
.tijden li {
  display: flex; justify-content: space-between; gap: 16px; padding: 13px 0;
  border-bottom: 1px solid var(--line); font-size: 15px;
}
.tijden li:first-child { border-top: 1px solid var(--line); }
.tijden li.is-today { color: var(--ink); font-weight: 400; }
.tijden li.is-today .tijden__dag::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 9px; vertical-align: middle; }
.tijden li.is-dicht { color: #77736e; }
.tijden__dag { text-transform: capitalize; }
.tijden__uur { font-variant-numeric: tabular-nums; text-align: right; }
.tijden__uur em { white-space: nowrap; }
.tijden__uur em { font-style: normal; font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-tekst); margin-right: 14px; }

.info-blok { margin-top: 30px; }
.info-blok h4 { font-size: 21px; margin-bottom: 8px; }
.info-blok p { margin: 0; color: var(--muted); font-size: 15px; }
.adres-kaart { background: var(--paper-2); border-radius: var(--r); padding: var(--kaart-pad); box-shadow: var(--shadow); }
.adres-kaart .h-section { font-size: 30px; }

/* --- voettekst ----------------------------------------------------------- */
.ftr { background: var(--ink); color: #fff; padding-block: clamp(52px, 7vw, 86px) 32px; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.ftr__kolom { padding-top: var(--ftr-lijn); }
.ftr h3, .ftr h4 { font-size: 11px; font-family: var(--sans); font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--accent-zacht); margin: 0 0 18px; line-height: 1.4; }
.ftr p, .ftr li { color: rgba(255,255,255,.66); font-size: 15px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr a:hover { color: var(--accent-zacht); }
.ftr li button { padding: 0; text-align: left; font: inherit; color: inherit; }
.ftr li button:hover { color: var(--accent-zacht); }
.ftr__brand .brand__mark { color: #fff; font-size: 30px; }
.ftr__brand .brand__sub { font-size: 9.5px; letter-spacing: .14em; color: var(--accent-zacht); margin-top: 0; line-height: 1.4; }
.ftr__socials { display: flex; gap: 12px; margin-top: 20px; }
.ftr__socials a {
  width: 42px; height: 42px; border: 1px solid var(--line-dark); display: grid; place-items: center;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.ftr__socials a:hover { border-color: var(--accent); background: rgba(180, 82, 95, .12); }
.ftr__bar {
  margin-top: clamp(38px, 5vw, 60px); padding-top: 24px; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  font-size: 12px; color: rgba(255,255,255,.42);
}

/* --- vaste balk op de telefoon ------------------------------------------- */
.mobar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none;
  background: rgba(22, 21, 26,.96); backdrop-filter: blur(12px);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px; border-top: 1px solid var(--line-dark);
}
.mobar .btn { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 11.5px; letter-spacing: .08em; }

/* --- de balk volgt de zichtbare onderkant van het scherm -------------------
   Op de iPhone schuift de knoppenbalk van Safari weg bij het scrollen. Een
   vaste balk blijft dan op de oude plek hangen en je ziet de pagina eronder
   doorlopen. main/app.js meet dat met visualViewport en zet --onderbalk; de
   rok eronder vult wat er ondanks alles nog open zou vallen. */
.mobar{
  transform:translateY(var(--onderbalk,0px));
  will-change:transform;
}
.mobar::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:180px;
  background:rgba(22, 21, 26,.96);pointer-events:none;
}


/* ==========================================================================
   Afspraakmodule
   ========================================================================== */
.modal { position: fixed; inset: 0; bottom: calc(0px - var(--onderbalk, 0px)); z-index: 120; display: none; }
.modal.is-open { display: block; }
.modal__veil { position: absolute; inset: 0; background: rgba(22, 21, 26,.62); backdrop-filter: blur(3px); animation: fade .3s var(--ease); }
.modal__box {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(560px, 100%);
  background: var(--paper); display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg); animation: slidein .38s var(--ease);
}
@keyframes fade { from { opacity: 0; } }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .modal__veil, .modal__box { animation: none; } }

.modal__hd {
  display: flex; align-items: center; gap: 14px; padding: 20px 24px;
  border-bottom: 1px solid var(--line); background: var(--paper-2); flex: none;
}
.modal__hd h2 { font-size: 25px; flex: 1; }
.modal__hd .terug, .modal__hd .sluit {
  width: 42px; height: 42px; border-radius: var(--r); display: grid; place-items: center; border: 1px solid var(--line);
  transition: border-color .25s var(--ease), background .25s var(--ease); flex: none;
}
.modal__hd .terug:hover, .modal__hd .sluit:hover { border-color: var(--ink); background: var(--paper); }
.modal__body { flex: 1; overflow-y: auto; padding: 24px; -webkit-overflow-scrolling: touch; }
.modal__ft { flex: none; padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper-2); }

.stapbalk { display: flex; gap: 6px; padding: 0 24px 16px; background: var(--paper-2); flex: none; }
.stapbalk span { flex: 1; height: 3px; background: var(--line); transition: background .35s var(--ease); }
.stapbalk span.is-done { background: var(--accent); }

.stap[hidden] { display: none; }
.stap__titel { font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-tekst); margin: 0 0 8px; }
.stap__uitleg { margin: 0 0 24px; color: var(--ink); font-size: 20px; font-family: var(--serif); font-weight: 500; }

.keuze-groep + .keuze-groep { margin-top: 26px; }
.keuze-groep__kop { font-family: var(--serif); font-size: 21px; font-weight: 500; margin-bottom: 4px; }
.keuze-groep__voor { font-size: 13.5px; color: #8a6d3c; margin: 0 0 14px; }

.keuze {
  width: 100%; text-align: left; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 17px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "naam prijs" "sub prijs";
  gap: 5px 20px; align-items: start;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.keuze + .keuze { margin-top: 8px; }
.keuze:hover { border-color: var(--accent); }
.keuze.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.keuze__naam { grid-area: naam; font-family: var(--serif); font-size: 18.5px; font-weight: 500; line-height: 1.35; text-wrap: balance; }
.keuze__sub { grid-area: sub; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.keuze__sub:empty { display: none; }
.keuze__prijs { grid-area: prijs; align-self: center; font-family: var(--serif); font-size: 19px; font-weight: 500; text-align: right; white-space: nowrap; }
.keuze__prijs small { display: block; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.keuze__vlag { display: inline-block; font-family: var(--sans); font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-tekst); background: var(--accent-dim); padding: 3px 8px; margin-left: 8px; vertical-align: 2px; }

.datums { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; scroll-snap-type: x mandatory; }
.datums::-webkit-scrollbar { height: 4px; }
.datums::-webkit-scrollbar-thumb { background: var(--line); }
.datum {
  flex: none; width: 66px; padding: 12px 4px; text-align: center; scroll-snap-align: start;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  transition: all .25s var(--ease);
}
.datum small { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.datum b { display: block; font-family: var(--serif); font-size: 25px; font-weight: 400; line-height: 1.2; }
.datum i { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.datum:hover:not([disabled]) { border-color: var(--accent); }
.datum.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.datum.is-on small, .datum.is-on i { color: rgba(255,255,255,.6); }
.datum[disabled] { opacity: .3; }

.dagdeel { margin-top: 20px; }
.dagdeel h4 { font-size: 12px; font-family: var(--sans); font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.sloten { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.slot {
  min-height: 46px; display: grid; place-items: center; text-align: center; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  font-variant-numeric: tabular-nums; font-size: 15px;
  transition: all .22s var(--ease);
}
.slot:hover:not([disabled]) { border-color: var(--accent); }
.slot.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.slot[disabled] { color: #b9b5b0; background: transparent; text-decoration: line-through; }

.leeg { text-align: center; padding: 34px 20px; color: var(--muted); background: var(--paper-2); border: 1px dashed var(--line); border-radius: var(--r); }

.veld { margin-bottom: 16px; }
.veld label { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.veld input, .veld textarea, .veld select {
  width: 100%; min-height: 52px; padding: 13px 16px; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .25s var(--ease);
}
.veld input:focus, .veld textarea:focus { outline: none; border-color: var(--accent); }
/* input-hoogte: eenregelige velden op hetzelfde ritme als de knoppen */
.veld input:not([type=checkbox]) { height: 52px; padding-block: 0; }
.veld textarea { min-height: 96px; padding: 14px 16px; resize: vertical; }
.veld.is-fout input { border-color: #b8654a; }
.veld__fout { display: none; color: #b8654a; font-size: 13px; margin-top: 6px; }
.veld.is-fout .veld__fout { display: block; }
.veld--check { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.veld--check input { width: auto; height: auto; min-height: 0; margin: 4px 0 0; flex: none; }

.samenvat { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; margin-bottom: 24px; }
.samenvat dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; margin: 0; font-size: 15px; }
.samenvat dt { color: var(--muted); }
.samenvat dd { margin: 0; text-align: right; }
.samenvat .totaal { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; display: flex; justify-content: space-between; font-family: var(--serif); font-size: 22px; }

/* --- detailvenster van een behandeling ----------------------------------- */
.dv__lang { margin: 0 0 22px; font-size: 16.5px; line-height: 1.7; color: var(--ink); }
.dv__kop {
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-tekst); margin: 0 0 12px;
}
.dv__punten { list-style: none; margin: 0 0 26px; padding: 0; }
.dv__punten li {
  position: relative; padding: 9px 0 9px 26px; font-size: 15px; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.dv__punten li::before {
  content: ''; position: absolute; left: 4px; top: 17px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
/* --- eigen foto's in het venster van een kaart --------------------------- */
.dv__fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 0 0 26px; }
.dv__foto {
  margin: 0; aspect-ratio: 3 / 4; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2);
}
/* let op: het picture-element moet zelf ook block en 100% hoog zijn */
.dv__foto picture { display: block; height: 100%; }
.dv__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 420px) { .dv__fotos { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

.dv__prijzen { width: 100%; border-collapse: collapse; font-size: 15px; }
.dv__prijzen td { padding: 11px 0; border-bottom: 1px solid var(--line); }
.dv__prijzen td:last-child { text-align: right; white-space: nowrap; font-family: var(--serif); font-size: 18px; font-weight: 500; }
.dv__prijzen tr:last-child td { border-bottom: 0; }

.klaar { text-align: center; padding: 20px 0; }
.klaar__vink {
  width: 76px; height: 76px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; margin: 0 auto 24px; animation: pop .45s var(--ease);
}
@keyframes pop { from { transform: scale(.5); opacity: 0; } }
.klaar h3 { font-size: 32px; margin-bottom: 10px; }
.klaar p { color: var(--muted); margin: 0 auto 22px; max-width: 42ch; }
.klaar__code {
  display: inline-block; font-family: var(--serif); font-size: 27px; letter-spacing: .1em;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 26px; margin-bottom: 24px;
}
.klaar__acties { display: grid; gap: 10px; max-width: 320px; margin: 0 auto; }

/* ==========================================================================
   Chatbot
   ========================================================================== */
.chat-knop {
  position: fixed; right: 20px; bottom: calc(20px - var(--onderbalk, 0px)); z-index: 100;
  width: 60px; height: 60px; border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-lg);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.chat-knop:hover { transform: scale(1.06); background: var(--accent); }
.chat-knop__punt {
  position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--ink);
}
.chat-knop.is-open .chat-knop__punt { display: none; }
.chat-knop svg { transition: opacity .2s, transform .2s; }
.chat-knop .ic-dicht { position: absolute; opacity: 0; transform: rotate(-90deg); }
.chat-knop.is-open .ic-open { opacity: 0; transform: rotate(90deg); }
.chat-knop.is-open .ic-dicht { opacity: 1; transform: none; }

.chat {
  position: fixed; right: 20px; bottom: calc(92px - var(--onderbalk, 0px)); z-index: 100;
  width: min(390px, calc(100vw - 40px)); height: min(600px, calc(100vh - 130px));
  height: min(600px, calc(100dvh - 130px));
  background: var(--paper); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.chat.is-open { opacity: 1; transform: none; pointer-events: auto; }

.chat__hd { background: var(--ink); color: #fff; padding: 18px 20px; display: flex; align-items: center; gap: 13px; flex: none; }
.chat__av { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font-family: var(--serif); font-size: 18px; flex: none; }
.chat__hd b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 400; }
.chat__hd span { font-size: 12px; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 6px; }
.chat__hd span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #3fa66f; }

.chat__body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.bericht { max-width: 86%; padding: 12px 16px; font-size: 14.5px; line-height: 1.6; animation: opkomst .3s var(--ease); }
@keyframes opkomst { from { opacity: 0; transform: translateY(8px); } }
.bericht--bot { background: var(--paper-2); border: 1px solid var(--line); align-self: flex-start; border-radius: 2px 14px 14px 14px; }
.bericht--ik { background: var(--ink); color: #fff; align-self: flex-end; border-radius: 14px 2px 14px 14px; }
.bericht p { margin: 0; }
.bericht p + p { margin-top: 10px; }
.bericht b { font-weight: 500; }
.bericht ul { margin: 10px 0 0; padding-left: 18px; }
.bericht li { margin-bottom: 6px; }
.bericht table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13.5px; }
.bericht td { padding: 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.bericht td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; }
.bericht tr:last-child td { border-bottom: 0; }

.typt { display: flex; gap: 4px; padding: 15px 16px; }
.typt i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: wip 1.1s infinite; }
.typt i:nth-child(2) { animation-delay: .16s; }
.typt i:nth-child(3) { animation-delay: .32s; }
@keyframes wip { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.chat__acties { display: flex; flex-wrap: wrap; gap: 7px; align-self: flex-start; max-width: 100%; }
.chip {
  min-height: 36px; padding: 0 15px; display: inline-flex; align-items: center; font-size: 13px; background: var(--paper-2);
  border: 1px solid var(--accent); color: var(--accent-tekst); border-radius: 999px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.chip:hover { background: var(--accent); color: #fff; }
.chip--vol { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip--vol:hover { background: var(--accent); border-color: var(--accent); }

.chat__ft { flex: none; border-top: 1px solid var(--line); background: var(--paper-2); padding: 12px 14px; display: flex; gap: 10px; align-items: center; }
.chat__ft input { flex: 1; border: 0; background: none; padding: 8px 4px; }
.chat__ft input:focus { outline: none; }
.chat__stuur { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; transition: background .25s var(--ease); }
.chat__stuur:hover { background: var(--accent); }

/* --- kleine hulpklassen (vervangen inline stijlen, want CSP) ------------- */
.is-gecentreerd { justify-content: center; }
.ftr__over { margin-top: 20px; max-width: 38ch; }
.h-section--klein { font-size: 30px; }
.veld label .normaal { text-transform: none; letter-spacing: 0; }
.ftr li button { text-align: left; }
.ic-vast { flex: none; margin-top: 2px; }
.naknop { margin: 26px 0 0; }

/* --- verschijnen bij scrollen -------------------------------------------- */
/* Opkomst bij het scrollen. De vertraging per kind zorgt dat kaarten na
   elkaar binnenkomen in plaats van als een blok. */
.op {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease-uit), transform .7s var(--ease-uit);
  will-change: opacity, transform;
}
.op.is-in { opacity: 1; transform: none; will-change: auto; }

.svc-grid.is-in > *, .werkstrook.is-in > *,
#kapselpanelen.is-in .kapsel-grid > * {
  animation: opkomen .6s var(--ease-uit) both;
}
.svc-grid.is-in > *:nth-child(2),
.werkstrook.is-in > *:nth-child(2), #kapselpanelen.is-in .kapsel-grid > *:nth-child(2) { animation-delay: .07s; }
.svc-grid.is-in > *:nth-child(3),
.werkstrook.is-in > *:nth-child(3), #kapselpanelen.is-in .kapsel-grid > *:nth-child(3) { animation-delay: .14s; }
.svc-grid.is-in > *:nth-child(4),
.werkstrook.is-in > *:nth-child(4), #kapselpanelen.is-in .kapsel-grid > *:nth-child(4) { animation-delay: .21s; }
#kapselpanelen.is-in .kapsel-grid > *:nth-child(5) { animation-delay: .28s; }
#kapselpanelen.is-in .kapsel-grid > *:nth-child(6) { animation-delay: .35s; }
.werkstrook.is-in > *:nth-child(5) { animation-delay: .28s; }
.werkstrook.is-in > *:nth-child(6) { animation-delay: .35s; }
@keyframes opkomen { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  .op { opacity: 1; transform: none; transition: none; }
  .svc-grid.is-in > *, .werkstrook.is-in > *,
  #kapselpanelen.is-in .kapsel-grid > * { animation: none; }
}

/* ==========================================================================
   Schermen tot 1024 en 720 px
   ========================================================================== */
@media (max-width: 1320px) {
  .hdr__cta .status { display: none; }
}

@media (max-width: 1024px) {
  .vz-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .kapsel-grid { grid-template-columns: repeat(2, 1fr); }
  .over__in, .bezoek__in { grid-template-columns: 1fr; }
  .over__stamp { right: 16px; bottom: -20px; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .ftr__brand { grid-column: 1 / -1; }
  .ftr__kolom { padding-top: 0; }
}

@media (max-width: 1080px) {
  /* De kopbalk past hieronder niet meer naast elkaar, dus vanaf hier het
     uitklapmenu. De rest van de telefoonweergave begint pas bij 860 px. */
  .nav {
    position: fixed; inset: 0 0 auto; top: 0;
    padding: calc(var(--kop-h, 139px) + 4px) var(--pad) 16px;
    background: var(--paper); flex-direction: column; align-items: flex-start; gap: 4px;
    transform: translateY(-102%); transition: transform .4s var(--ease);
    box-shadow: var(--shadow); z-index: -1;
  }
  body.nav-open .nav { transform: none; }
  .nav a { font-size: 19px; font-family: var(--serif); letter-spacing: .04em; text-transform: none; color: var(--ink) !important; padding-block: 11px; width: 100%; border-bottom: 1px solid var(--line); }
  .burger { display: flex; }
  .hdr__cta .btn, .hdr__cta .status { display: none; }
  body.nav-open .brand__mark { color: var(--ink); }
  body.nav-open .brand__sub { color: var(--accent); }
}

@media (max-width: 860px) {

  body.nav-open .hdr { background: var(--paper); }

  /* Op de telefoon onder elkaar. De foto staat tussen de ondertekst en de
     zwarte knop (wens Kerim, 25-08). Daarvoor lost de tekstkolom zichzelf op
     met display:contents: de kop, de ondertekst, de foto en het knoppenblok
     worden dan alle vier een rij van hetzelfde raster, en met order zetten we
     de foto op plek drie. De ruimte tussen de rijen komt van de eigen marges
     van die blokken, dus de gap gaat op nul. */
  .hero__in { grid-template-columns: 1fr; gap: 0; padding-top: clamp(104px, 26vw, 132px); }
  .hero__tekst { display: contents; max-width: none; }
  .hero__tekst > * { min-width: 0; }
  .hero .stars { order: 1; }
  .hero h1 { order: 2; }
  .hero .lede { order: 3; }
  .hero__beeld { order: 4; margin-top: 30px; }
  .hero__blok { order: 5; display: flex; }
  .hero__beeld img { aspect-ratio: 5 / 4; }
  .award { margin-top: 14px; padding: 13px 18px 13px 13px; gap: 14px; }
  .award img { width: 54px; height: 54px; }
  .award b { font-size: 19px; }
  .facts__in { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line-dark); }

  .mobar { display: flex; }
  body { padding-bottom: 74px; }
  .chat-knop { bottom: calc(var(--mobar-h, 84px) + 14px - var(--onderbalk, 0px)); }
  .chat { bottom: calc(var(--mobar-h, 84px) + 84px - var(--onderbalk, 0px)); height: min(560px, calc(100vh - 200px)); height: min(560px, calc(100dvh - 200px)); }
  .modal__box { width: 100%; }
}

@media (max-width: 640px) {
  .tabs { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .vz-grid { grid-template-columns: 1fr; }
  .svc-grid, .kapsel-grid { grid-template-columns: 1fr; }
  .zones { grid-template-columns: 1fr; }
  /* De twee routeknoppen blijven naast elkaar, ook op een smal scherm.
     Dat is de vaste vorm voor een kaart; alleen de letters worden kleiner. */
  .kaart-kaart__foot a { font-size: 10px; letter-spacing: .06em; gap: 6px; padding: 16px 6px; }
  .kaart-kaart__foot svg { width: 13px; height: 13px; }
  .ftr__grid { grid-template-columns: 1fr; }
  .hero__figs { grid-template-columns: 1fr 1fr; gap: 10px; }
  .prijslijst li { grid-template-columns: minmax(0, 1fr) auto; }
  .prijslijst .btn { grid-column: 1 / -1; justify-self: start; margin-top: 10px; }
  .chat { right: 10px; left: 10px; width: auto; }
  .chat-knop { right: 14px; }
  .sloten { grid-template-columns: repeat(3, 1fr); }
}

/* --- afdrukken ----------------------------------------------------------- */
@media print {
  .hdr, .mobar, .chat, .chat-knop, .modal, .hero__beeld { display: none !important; }
  body { background: #fff; padding: 0; }
}

/* ==========================================================================
   Agendascherm van de salon (salon.html)
   ========================================================================== */
  body.balie { background: var(--paper-3); padding-bottom: 40px; }
  .telefoon { max-width: 460px; margin: 0 auto; padding: 0 16px; }
  .sk { background: var(--ink); color: #fff; margin: 0 -16px 18px; padding: 26px 22px 22px; }
  .sk .brand__mark { color: #fff; font-size: 22px; }
  /* op het donkere baliescherm leest het merkrood niet, daar blijft messing staan */
  .sk .brand__sub { color: var(--accent-zacht); }
  .sk h1 { font-size: 30px; color: #fff; margin-top: 16px; }
  .sk p { margin: 4px 0 0; color: rgba(255,255,255,.6); font-size: 14px; }
  .melding { display: flex; gap: 12px; align-items: flex-start; background: var(--accent-dim); border-left: 3px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; padding: 14px 16px; font-size: 14px; color: #5c4718; margin-bottom: 18px; }
    .dagtabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-bottom: 18px; }
  .dagtabs .tab { padding: 0 6px; text-align: center; }
  .dagtabs > * { min-width: 0; }
  .agenda { list-style: none; margin: 0; padding: 0; }
  .afs { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; padding: 16px 18px; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 4px 16px; }
  .afs > * { min-width: 0; }
  .afs__tijd { font-family: var(--serif); font-size: 22px; line-height: 1.1; grid-row: 1 / span 3; border-right: 1px solid var(--line); padding-right: 12px; }
  .afs__tijd small { display: block; font-family: var(--sans); font-size: 11px; color: var(--muted); letter-spacing: .06em; margin-top: 4px; }
  .afs__naam { font-family: var(--serif); font-size: 20px; }
  .afs__wat { font-size: 14px; color: var(--muted); }
  .afs__rij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
  .merkje { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: var(--paper-3); border-radius: var(--r); padding: 4px 10px; color: var(--muted); }
  .merkje--nieuw { background: var(--accent); color: #fff; }
  .afs__bel { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--accent); border-bottom: 1px solid var(--accent); }
  .afs__opm { grid-column: 2; font-size: 14px; background: var(--paper-3); padding: 9px 12px; margin-top: 8px; }
  .uitleg { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: var(--kaart-pad); margin-top: 26px; font-size: 14px; }
  .uitleg h2 { font-size: 21px; margin-bottom: 10px; }
  .uitleg ol { margin: 0; padding-left: 18px; color: var(--muted); }
  .uitleg li { margin-bottom: 8px; }
  .terugnaar { display: inline-block; margin-top: 22px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }

/* ==========================================================================
   Fotogalerij, vergrootvenster, teamblok en productblok
   ========================================================================== */
.fotopagina { padding-block: calc(var(--kop-h, 139px) + var(--sec-kort)) var(--sec); }

.galerij-balk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  margin-bottom: 26px;
}
.galerij-filters { flex: 1 1 380px; margin-bottom: 0; }
.galerij-teller { margin: 0; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.galerij {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.galerij > * { min-width: 0; }
/* Elk vak even groot. Dat geeft een strak raster zonder gaten; de foto's
   zelf worden bijgesneden met object-fit. */
.foto {
  padding: 0; overflow: hidden; background: var(--paper-3);
  border-radius: var(--r); position: relative; cursor: zoom-in;
  aspect-ratio: 1 / 1;
}
.foto { box-shadow: var(--schaduw-s); }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-uit); }
.foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(22, 21, 26,.35));
  opacity: 0; transition: opacity .35s var(--ease);
}
@media (hover: hover) {
  .foto:hover img { transform: scale(1.05); }
  .foto:hover::after { opacity: 1; }
}
.foto:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.galerij-slot {
  margin-top: clamp(38px, 5vw, 62px); padding: var(--kaart-pad);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px;
}
.galerij-slot > div:first-child { flex: 1 1 320px; min-width: 0; }
.galerij-slot p { margin: 6px 0 0; color: var(--muted); }
.galerij-slot__knoppen { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- vergrootvenster ----------------------------------------------------- */
.vergroot { position: fixed; inset: 0; bottom: calc(0px - var(--onderbalk, 0px)); z-index: 130; display: none; place-items: center; }
.vergroot.is-open { display: grid; }
.vergroot__veil { position: absolute; inset: 0; background: rgba(22, 21, 26,.94); }
.vergroot__doek {
  position: relative; margin: 0; max-width: min(1100px, 94vw); max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.vergroot__doek img {
  max-width: 100%; max-height: 76vh; max-height: 76dvh; width: auto; height: auto;
  object-fit: contain; border-radius: var(--r); background: var(--ink-2);
}
.vergroot figcaption {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 16px;
  color: rgba(255,255,255,.78); font-size: 14.5px; text-align: center;
}
.vergroot__positie { color: var(--accent-zacht); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.vergroot__sluit, .vergroot__pijl {
  position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  transition: background .25s var(--ease);
}
.vergroot__sluit:hover, .vergroot__pijl:hover { background: rgba(255,255,255,.2); }
.vergroot__sluit { top: 18px; right: 18px; }
.vergroot__pijl--links { left: 18px; top: 50%; transform: translateY(-50%); }
.vergroot__pijl--rechts { right: 18px; top: 50%; transform: translateY(-50%); }

/* --- strook met uitgelicht werk op de hoofdpagina ------------------------- */
/* Deze sectie heeft dezelfde achtergrond als de sectie erboven. Een haarlijn
   houdt de twee blokken uit elkaar, net als tussen de andere secties. */
#werk { position: relative; }
#werk::before {
  content: ''; position: absolute; top: 0; left: var(--pad); right: var(--pad);
  height: 1px; background: var(--line);
}
@media (min-width: 1313px) {
  #werk::before { left: calc((100% - var(--wrap)) / 2 + var(--pad)); right: calc((100% - var(--wrap)) / 2 + var(--pad)); }
}

.werkstrook { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); }
.werkstrook > * { min-width: 0; }
.werkstrook__foto {
  display: block; aspect-ratio: 3/4; overflow: hidden; position: relative;
  border-radius: var(--r); background: var(--ink-2);
  box-shadow: var(--schaduw-s);
  transition: box-shadow .4s var(--ease-uit), transform .4s var(--ease-uit);
}
/* Zachte verduistering onderaan, zodat de foto niet als een losse rechthoek
   op de achtergrond ligt maar erin zakt. */
.werkstrook__foto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(22, 21, 26,.28));
  opacity: .8; transition: opacity .4s var(--ease-uit);
}
.werkstrook__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
@media (hover: hover) {
  .werkstrook__foto:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .werkstrook__foto:hover img { transform: scale(1.05); }
  .werkstrook__foto:hover::after { opacity: .45; }
}

/* --- brede band met de zaak ---------------------------------------------- */
/* --- teamblok ------------------------------------------------------------ */
.team { background: var(--paper-2); box-shadow: inset 0 -1px 0 var(--line); }
.team__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.team__foto {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: var(--paper-3); box-shadow: var(--shadow);
}
.team__foto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(22, 21, 26,.07);
}
.team__foto img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; }
.team__namen { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.team__namen li {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: var(--r); padding: 7px 13px; color: var(--muted);
}

/* --- zonder afspraak: de wachtlijst -------------------------------------- */
.inloop { background: var(--paper-2); }
.inloop__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.inloop__fig { position: relative; line-height: 0; }
.inloop__fig picture { display: block; overflow: hidden; border-radius: var(--r); box-shadow: var(--shadow); }
.inloop__fig::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: var(--r); box-shadow: inset 0 0 0 1px rgba(22, 21, 26,.07);
}
.inloop__fig img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.inloop p { color: var(--muted); }

.wacht { margin-top: 28px; background: var(--ink); color: #fff; border-radius: var(--r); padding: var(--kaart-pad); box-shadow: var(--shadow); }
.wacht__kop { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-zacht); }
.wacht__stip { width: 9px; height: 9px; border-radius: 50%; background: #8b93a6; flex: none; }
.wacht__stip.is-open { background: #49c07d; box-shadow: 0 0 0 4px rgba(73,192,125,.22); }
.wacht__cijfer { margin: 14px 0 2px; font-family: var(--serif); font-size: clamp(34px, 5vw, 46px); font-weight: 300; line-height: 1.05; color: #fff; }
.wacht__cijfer i { font-family: var(--sans); font-style: normal; font-size: 15px; font-weight: 400; letter-spacing: .04em; color: var(--muted-dark); margin-left: 6px; }
.wacht__gesloten { font-size: clamp(28px, 4vw, 36px); }
.wacht__uitleg { margin: 0 0 20px; font-size: 15px; color: var(--muted-dark); }
.wacht .btn--accent:disabled { opacity: .5; cursor: not-allowed; }
.wacht__noot { margin: 14px 0 0; font-size: 12.5px; color: rgba(255,255,255,.55); }

/* --- tip in de hero ------------------------------------------------------ */
.inlooptip {
  display: inline-flex; align-items: center; gap: 16px; margin-top: 18px;
  border: 1px solid var(--line); background: var(--paper-2);
  padding: 14px 22px 14px 16px; border-radius: var(--r);
}
.inlooptip__paal {
  width: 3px; height: 46px; flex: none; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-zacht), var(--accent));
}
.inlooptip b { display: block; font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--ink); line-height: 1.2; }
.inlooptip small { display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-tekst); margin-top: 5px; }

@media (max-width: 1024px) {
  .galerij { grid-template-columns: repeat(3, 1fr); }
  .werkstrook { grid-template-columns: repeat(3, 1fr); }
  .team__in { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .galerij { grid-template-columns: repeat(2, 1fr); }
  .galerij-teller { display: none; }
  .vergroot__sluit { top: 12px; right: 12px; width: 44px; height: 44px; }
  .vergroot__pijl { width: 44px; height: 44px; }
  .vergroot__pijl--links { left: 8px; }
  .vergroot__pijl--rechts { right: 8px; }
  .vergroot__doek img { max-height: 66vh; max-height: 66dvh; }
  .werkstrook { grid-template-columns: repeat(2, 1fr); }
  .galerij-slot__knoppen { width: 100%; }
  .galerij-slot__knoppen .btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   De foto naast een tekstkolom loopt van boven tot onder even hoog als die
   tekst. Geldt voor het salonblok en voor "Zonder afspraak". Deze regels
   staan bewust achteraan: eerder in het bestand winnen de basisregels het.
   Let op: het <picture> ertussen moet zelf ook display:block en height:100%
   krijgen, anders lost de 100% op tegen een auto-hoogte en gebeurt er niets.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .over__fig, .over__fig picture { display: block; height: 100%; }
  .over__fig img { height: 100%; aspect-ratio: auto; object-fit: cover; }

  /* Kerim 19-08: de foto hing los in het midden, met ruimte boven en onder.
     De kolommen rekken nu mee, dus boven- en onderkant liggen gelijk. */
  .inloop__in { align-items: stretch; }
  .inloop__fig, .inloop__fig picture { display: block; height: 100%; }
  .inloop__fig img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 42%; }
}

/* Onder 1024 px gaan de twee kolommen onder elkaar. Deze regel MOET achter de
   basisregel van .inloop__in staan: die staat verderop in het bestand dan het
   media-blok bovenaan, en bij gelijke zwaarte wint de laatste. Stond hij
   bovenaan, dan bleef de foto op een telefoon in een halve kolom hangen. */
@media (max-width: 1024px) {
  .inloop__in { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Baliescherm: de wachtlijst boven de agenda. Alleen op balie.html.
   -------------------------------------------------------------------------- */
.blok-kop {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 26px 0 12px; font-size: 11.5px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-tekst);
}
.blok-kop:first-of-type { margin-top: 0; }
.blok-kop span { letter-spacing: .06em; text-transform: none; color: var(--muted); font-size: 13px; }
.afs__plek { background: var(--accent); color: #fff; }
.afs--klaar { opacity: .55; }
.afs__knop {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--accent); border-bottom: 1px solid var(--accent);
}


/* ==========================================================================
   GOUDEN STANDAARD: Google-reviews  (vastgelegd 19-08-2026)
   Dit blok staat letterlijk zo op elke demosite van project 14. Alleen de
   negen variabelen in .gr verschillen per site. Verander daaronder niets,
   anders lopen de zes sites uit elkaar. Zie de README van project 14.
   ========================================================================== */
.gr {
  --gr-accent: var(--accent-tekst);
  --gr-ink:    var(--ink);
  --gr-muted:  var(--muted);
  --gr-kaart:  var(--paper-2);
  --gr-vlak:   var(--paper-3);
  --gr-lijn:   var(--line);
  --gr-serif:  var(--serif);
  --gr-sans:   var(--sans);
  --gr-rond:   var(--r);
  background: var(--gr-vlak);
  padding-block: var(--sec);
}
.gr .gr__oog {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
  font-family: var(--gr-sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gr-accent);
}
.gr .gr__oog::before { content: ''; width: 34px; height: 1px; background: var(--gr-accent); flex: none; }
.gr .gr__titel {
  font-family: var(--gr-serif); font-weight: 400; line-height: 1.1; letter-spacing: -.01em;
  font-size: clamp(30px, 4.4vw, 52px); color: var(--gr-ink); margin: 0 0 16px;
}
.gr .gr__lede {
  margin: 0 0 clamp(28px, 4vw, 46px); max-width: 62ch;
  font-family: var(--gr-sans); font-size: 17px; line-height: 1.7; color: var(--gr-muted);
}
.gr .gr__rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.gr .gr__rij > * { min-width: 0; }
.gr .gr-kaart {
  margin: 0; display: flex; flex-direction: column;
  background: var(--gr-kaart); border: 1px solid var(--gr-lijn); border-radius: var(--gr-rond);
  padding: clamp(22px, 2vw, 28px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: transform .35s cubic-bezier(.33, 1, .68, 1), box-shadow .35s cubic-bezier(.33, 1, .68, 1);
}
@media (hover: hover) {
  .gr .gr-kaart:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .09); }
}
.gr .gr-kaart__sterren { color: var(--gr-accent); font-size: 14px; letter-spacing: 2px; line-height: 1; }
.gr .gr-kaart__tekst {
  margin: 14px 0 0; font-family: var(--gr-sans); font-size: 15.5px; line-height: 1.65; color: var(--gr-ink);
}
.gr .gr-kaart__tekst::before { content: '“'; }
.gr .gr-kaart__tekst::after  { content: '”'; }
.gr .gr-kaart__naam {
  margin-top: auto; padding-top: 16px;
  font-family: var(--gr-serif); font-size: 17px; line-height: 1.3; color: var(--gr-ink);
}
.gr .gr-kaart__naam span {
  display: block; margin-top: 4px; font-family: var(--gr-sans);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gr-muted);
}
/* Twee knoppen naast elkaar: alles lezen, en zelf een review schrijven.
   Dezelfde knop, alleen andere tekst; op een smal scherm onder elkaar. */
.gr .gr__na { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.gr .gr__knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px;
  border: 1px solid var(--gr-lijn); border-radius: var(--gr-rond);
  background: var(--gr-kaart); color: var(--gr-ink); text-decoration: none;
  font-family: var(--gr-sans); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  transition: border-color .3s, color .3s;
}
.gr .gr__knop:hover { border-color: var(--gr-accent); color: var(--gr-accent); }
@media (max-width: 1024px) { .gr .gr__rij { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .gr .gr__rij { grid-template-columns: 1fr; } }

/* ==========================================================================
   Alleen op deze site: het woordmerk als beeld, de stappen en de werkbank
   ========================================================================== */

/* --- hun eigen logo: takje, woordmerk en gouden streepje ------------------
   Eén beeld, dus geen losse ondertitel meer in de kopbalk. Het beeld is drie
   keer zo hoog als het op het scherm staat, zodat het op een scherm met dubbele
   puntdichtheid ook scherp blijft. */
.brand__logo { display: block; width: auto; height: 64px; }
.ftr__brand .brand__logo { height: 74px; margin-bottom: 10px; }
@media (max-width: 860px) { .brand__logo { height: 56px; } }
@media (max-width: 400px) { .brand__logo { height: 50px; } }

/* --- stappen in het aanvraagblok ---------------------------------------- */
.stappen { counter-reset: stap; list-style: none; margin: 16px 0 22px; padding: 0; }
.stappen li {
  position: relative; padding-left: 34px; margin-bottom: 12px;
  font-size: 15px; line-height: 1.55; color: var(--muted-dark);
}
.stappen li b { color: #fff; font-weight: 600; }
.stappen li::before {
  counter-increment: stap; content: counter(stap);
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600; display: grid; place-items: center;
}

/* --- losse velden in het aanvraagvenster --------------------------------- */
.veld--los { margin-top: 18px; }
#vraagbudget.is-fout .keuze { border-color: #a3401f; }
.mand__noot { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }

/* --- de werkbank: aanvragen die binnenkomen ------------------------------ */
.kaartje {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 10px; padding: 16px 18px;
}
.kaartje--klaar { opacity: .5; }
.kaartje--spoed { border-left: 3px solid var(--accent); }
.kaartje__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.kaartje__gel {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r); background: var(--paper-3); color: var(--muted);
}
.kaartje__spoed {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r); background: var(--accent); color: #fff;
}
.kaartje__code { margin-left: auto; font-size: 12px; letter-spacing: .1em; color: var(--muted); }
.kaartje__naam { font-family: var(--serif); font-size: 21px; margin-bottom: 10px; }
.kaartje__rij {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px;
  margin: 0; font-size: 14.5px;
}
.kaartje__rij dt { color: var(--muted); }
.kaartje__rij dd { margin: 0; }
.kaartje__wens {
  margin: 12px 0 0; padding: 10px 12px; background: var(--paper-3);
  border-radius: var(--r); font-size: 14.5px; font-style: italic;
}
.kaartje__voet {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.kaartje__bel { font-size: 13px; color: var(--accent); border-bottom: 1px solid var(--accent); }
.kaartje__knop {
  margin-left: auto; min-height: 36px; padding: 0 16px;
  border-radius: var(--r); background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.kaartje__knop:hover { background: var(--accent); }

/* ==========================================================================
   Alleen op deze site: het menu, de agenda en de bestelmand
   ========================================================================== */

/* --- de menukaart -------------------------------------------------------- */
.menu-sectie { background: var(--paper-3); padding-block: var(--sec); }
/* Twee kolommen die main.js zelf vult, zie de opmerking daar. Met een gewoon
   raster kwam "Special" met een enkel gerecht naast een lijst van tien te staan
   en bleef er onder die kolom een gat over. */
.menu-lijst { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 52px); align-items: start; }
.menu-kolom { display: grid; gap: 34px; align-content: start; min-width: 0; }
.menu-groep__kop { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 6px; }
.menu-groep__kop h3 { font-size: 23px; margin: 0; }
.menu-groep__kop span { display: block; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-tekst); margin-top: 5px; }
.menu-items { list-style: none; margin: 0; padding: 0; }
.menu-items li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.menu-items li:last-child { border-bottom: 0; }
.menu-item__naam { flex: 1; min-width: 0; font-size: 16px; color: var(--ink); }
.menu-item__naam em { display: block; font-style: normal; font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.menu-item__vlag {
  display: inline-block; font-style: normal; font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-tekst);
  background: var(--accent-dim); border-radius: 999px; padding: 2px 9px; margin-left: 6px;
  vertical-align: 2px;
}
.menu-item__prijs { flex: none; font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--ink); }

/* --- agenda, kanalen en verkooppunten ------------------------------------ */
.agenda-sectie { padding-block: var(--sec); }
.agenda-sectie__in { display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(24px, 3vw, 44px); align-items: start; }
.popup-lijst { display: grid; gap: var(--gap); }
/* De pop-upkaart heeft een beeld boven de tekst. Daaronder de datum in een blok
   en de tekst ernaast. Zonder dat beeld waren de twee kaarten samen een stuk
   korter dan de kolom ernaast en bleef er onderaan een gat over. */
.popup {
  display: grid; grid-template-columns: 66px 1fr; gap: 20px;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--kaart-pad); box-shadow: var(--schaduw-s);
}
.popup__beeld {
  grid-column: 1 / -1; display: block; overflow: hidden; background: var(--paper-3);
  margin: calc(var(--kaart-pad) * -1) calc(var(--kaart-pad) * -1) 2px;
  aspect-ratio: 24 / 7;
}
.popup__beeld picture { display: block; height: 100%; }
.popup__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.popup__datum {
  width: 66px; text-align: center; background: var(--ink); color: #fff;
  border-radius: var(--r); padding: 12px 0 10px; align-self: flex-start;
}
.popup__datum b { display: block; font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1; }
.popup__datum span { display: block; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-zacht); margin-top: 4px; }
.popup__tekst { min-width: 0; }
.popup__tekst h3 { font-size: 22px; margin: 0 0 6px; }
.popup__waar { font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--accent-tekst); margin: 0 0 10px; }
.popup__tekst p { margin: 0 0 14px; color: var(--muted); font-size: 15px; }

/* Het vak rekt mee tot de onderkant van de kolom ernaast, zodat beide kolommen
   op dezelfde lijn eindigen. */
.kanalen {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--kaart-pad); box-shadow: var(--schaduw-s);
  align-self: stretch;
}
.kanalen__kop { margin-top: 26px; }
.kanaal-lijst { display: grid; gap: 9px; margin-top: 14px; }
.kanaal {
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none; color: var(--ink); background: var(--paper);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.kanaal:hover { border-color: var(--accent); background: var(--paper-2); }
.kanaal__tekst { min-width: 0; }
.kanaal__tekst b { display: block; font-size: 15px; }
.kanaal__tekst span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.kanaal__knop {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-tekst);
}
.punt-lijst { list-style: none; margin: 14px 0 0; padding: 0; }
.punt-lijst li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.punt-lijst li:last-child { border-bottom: 0; }
.punt-lijst b { display: block; font-size: 15px; }
.punt-lijst span { display: block; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-tekst); margin: 3px 0 4px; }
.punt-lijst em { display: block; font-style: normal; font-size: 14px; color: var(--muted); }

/* --- het cateringformulier in de sectie ---------------------------------- */
.cat-form { margin-top: 24px; }
.cat-form__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cat-klaar { margin-top: 24px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: var(--kaart-pad); text-align: center; }
.cat-klaar h3 { font-size: 25px; margin: 0 0 8px; }
.cat-klaar p { margin: 0; color: var(--muted); }
.klaar__vink--klein { width: 48px; height: 48px; margin-bottom: 14px; }

/* --- de bestelmand in het venster ---------------------------------------- */
.mand__groep {
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-tekst); margin: 22px 0 6px;
}
.mand__groep:first-child { margin-top: 0; }
.mand-rij {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.mand-rij__naam { flex: 1; min-width: 0; }
.mand-rij__naam b { display: block; font-size: 15px; font-weight: 500; }
.mand-rij__naam em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.mand-rij__prijs { flex: none; font-family: var(--serif); font-size: 17px; color: var(--ink); }
.mand-rij.is-gekozen .mand-rij__prijs { color: var(--accent-tekst); }
.teller { flex: none; display: inline-flex; align-items: center; gap: 2px; }
.teller__knop {
  width: 34px; height: 34px; flex: none; border: 1px solid var(--line); background: var(--paper-2);
  border-radius: var(--r); font-size: 17px; line-height: 1; color: var(--ink); cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.teller__knop:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-tekst); }
.teller__knop:disabled { opacity: .35; cursor: default; }
.teller__cijfer { width: 30px; text-align: center; font-size: 15px; font-weight: 500; }
.mand-balk {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 13px; color: var(--muted); margin-bottom: 12px;
}
.mand-balk b { font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--ink); }

/* --- regels op een kaartje van het keukenscherm --------------------------- */
.kaartje__regels { list-style: none; margin: 10px 0 0; padding: 0; }
.kaartje__regels li { font-size: 14px; padding: 3px 0; color: var(--ink); }
.kaartje__regels span { display: inline-block; min-width: 26px; font-weight: 600; color: var(--accent-tekst); }

@media (max-width: 1024px) {
  .agenda-sectie__in { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .menu-lijst { grid-template-columns: 1fr; gap: 34px; }
  .cat-form__rij { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 560px) {
  .popup { grid-template-columns: 1fr; gap: 14px; }
  .popup__datum { width: 100%; display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 8px 0; }
  .popup__datum span { margin-top: 0; }
}

/* --- laatste ronde na commentaar van Kerim (24-08) ------------------------ */

/* Het vlaggetje "meest besteld" stond bij een lange naam onder de tekst en bij
   een korte ernaast. Op de telefoon staat hij nu altijd op zijn eigen regel,
   dus bij elk gerecht hetzelfde. */
@media (max-width: 860px) {
  .menu-item__vlag { display: block; width: fit-content; margin: 7px 0 0; vertical-align: baseline; }
}

/* Het cateringformulier was op de telefoon te log. Kleinere velden, minder lucht. */
@media (max-width: 560px) {
  .cat-form { margin-top: 20px; }
  .cat-form .veld { margin-bottom: 12px; }
  .cat-form .veld label { font-size: 11px; margin-bottom: 5px; }
  .cat-form .veld input:not([type=checkbox]), .cat-form .veld select { height: 46px; min-height: 46px; padding: 0 13px; }
  .cat-form .veld select { padding-block: 0; }
  .cat-form .veld textarea { min-height: 74px; padding: 11px 13px; }
  .cat-form .btn { margin-top: 4px; }
  .cat-form .wacht__noot { font-size: 11.5px; }
}


/* ============================================================
   PRIVACYVERKLARING (gouden standaard, gelijk op alle acht demo's)
   Alleen maten en ruimte. De kleuren komen van de site zelf.
   ============================================================ */
.pv{max-width:760px;margin:0 auto}
.pv h1{font-size:clamp(26px,4.4vw,34px);line-height:1.18;margin:0 0 14px}
.pv h2{font-size:clamp(17px,2.4vw,20px);line-height:1.3;margin:30px 0 8px}
.pv p,.pv li{font-size:16px;line-height:1.65}
.pv p{margin:0 0 12px}
.pv ul{margin:0 0 12px;padding-left:20px}
.pv li{margin:0 0 6px}
.pv__kader{border:1px solid rgba(0,0,0,.16);border-radius:12px;padding:16px 18px;margin:0 0 26px}
.pv__kader p:last-child{margin:0}
.pv__datum{margin-top:28px;font-size:14px;opacity:.7}
@media (max-width:600px){
  .pv h1{margin-bottom:12px}
  .pv h2{margin-top:26px}
}

/* De noot onder de kaart: de prijzen zijn van ons, niet van de zaak. Dat moet
   je op een demo altijd zeggen, en het moet leesbaar blijven. */
.prijsnoot { max-width: 62ch; margin: 26px auto 0; text-align: center; color: var(--muted); }