/* Connected Haarlem - huisstijl van de bestaande site, zonder framework.
   Kleuren en letters komen uit de Mobirise-site: turquoise #13b4c6, antraciet #232323,
   Rubik voor alles. De openingsquote zit in de foto zelf, dus daar is geen letter voor nodig. */

/* ---------- letters ---------- */
/* Zelf gehost: geen verzoek naar Google Fonts, dus ook geen bezoekers-IP naar derden
   en geen cookiebanner nodig voor iets wat we zelf kunnen serveren. */
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/rubik-300.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/rubik-400.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/rubik-500.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/rubik-700.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- variabelen ---------- */
:root {
  --turquoise: #13b4c6;
  --turquoise-diep: #0c7580;
  --ink: #232323;
  --ink-zacht: #4a4a4a;
  --grijs: #767676;
  --lijn: #e4e4e4;
  --papier: #fff;
  --papier-warm: #f7f9f9;
  --donker: #1b1b1b;
  --bar-hoogte: 4.5rem;
  --wrap: 72rem;
  --radius: 0.5rem;
  --schaduw: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .06);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ink-zacht);
  background: var(--papier);
}

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

h1, h2, h3 { color: var(--ink); font-weight: 500; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.05rem); }
h3 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); }
p { margin: 0 0 1.1em; }

a { color: var(--turquoise-diep); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--turquoise); }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--turquoise);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }

.sr, .skip {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; inset: .5rem auto auto .5rem; width: auto; height: auto;
  clip-path: none; margin: 0; padding: .6rem 1rem; z-index: 100;
  background: var(--papier); color: var(--ink); box-shadow: var(--schaduw); border-radius: var(--radius);
}

.lead { font-size: 1.1em; color: var(--grijs); }
.noot { font-size: .9em; color: var(--grijs); }

/* ---------- knoppen ---------- */
.btn {
  display: inline-block;
  padding: .7rem 1.35rem;
  border: 1px solid var(--turquoise);
  border-radius: var(--radius);
  background: var(--turquoise);
  color: #fff;
  font-weight: 400;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--turquoise-diep); border-color: var(--turquoise-diep); color: #fff; }
.btn--leeg { background: transparent; color: var(--turquoise-diep); }
.btn--leeg:hover { background: var(--turquoise); border-color: var(--turquoise); color: #fff; }
.btn--pill { border-radius: 2rem; padding: .5rem 1.1rem; font-size: .95rem; }
.btn--wit { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .7); color: #fff; }
.btn--wit:hover { background: #fff; border-color: #fff; color: var(--turquoise-diep); }

/* ---------- balk ---------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  /* Sluier in plaats van doorzichtig: de openingsfoto van de verhuurpagina is licht,
     en daar verdwenen het witte logo en de menu-items volledig in. */
  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, .25) 70%, rgba(0, 0, 0, 0));
  transition: background .25s, box-shadow .25s;
}
.bar[data-vast] { background: rgba(27, 27, 27, .95); background-image: none; box-shadow: 0 1px 12px rgba(0, 0, 0, .18); }

.bar__inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto; padding: .75rem 1.25rem;
  min-height: var(--bar-hoogte);
  display: flex; align-items: center; gap: 1rem;
}
.bar__home { margin-right: auto; width: 2.5rem; height: 2.5rem; }

.bar__nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 1.5rem;
}
.bar__nav a { color: #fff; text-decoration: none; font-size: .95rem; }
.bar__nav a:not(.btn):hover { color: var(--turquoise); }

.bar__toggle {
  display: none;
  width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; background: transparent; cursor: pointer;
}
.bar__bars, .bar__bars::before, .bar__bars::after {
  display: block; width: 24px; height: 2px; background: #fff; margin-inline: auto;
  transition: transform .2s, opacity .2s;
}
.bar__bars::before, .bar__bars::after { content: ''; position: relative; }
.bar__bars::before { top: -7px; }
.bar__bars::after { top: 5px; }

@media (max-width: 860px) {
  .bar { background: rgba(27, 27, 27, .95); background-image: none; }
  .bar__toggle { display: block; }
  .bar__nav {
    position: absolute; inset: 100% 0 auto; display: none;
    background: rgba(27, 27, 27, .98); padding: .5rem 1.25rem 1.25rem;
  }
  .bar__nav[data-open] { display: block; }
  .bar__nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .bar__nav li + li { border-top: 1px solid rgba(255, 255, 255, .12); }
  .bar__nav a:not(.btn) { display: block; padding: .85rem 0; }
  .bar__nav .btn { margin-top: .9rem; text-align: center; }
  [data-menu-toggle][aria-expanded="true"] .bar__bars { transform: rotate(45deg); }
  [data-menu-toggle][aria-expanded="true"] .bar__bars::before { opacity: 0; }
  [data-menu-toggle][aria-expanded="true"] .bar__bars::after { top: -2px; transform: rotate(-90deg); }
}

/* ---------- opening ---------- */
.held { background: var(--donker); }
/* picture is van zichzelf inline zonder hoogte; zonder deze regel heeft height:100%
   op de img niets om zich aan te meten en blijft de foto net te laag. */
.held picture { display: block; }
.held img { width: 100%; height: auto; }

/* De quote zit rechts in de foto gebakken, en de foto is 1,92 keer zo breed als hoog.
   Schermvullend maken kan dus alleen door horizontaal te knippen, en dan sneuvelt juist
   die tekst. Vandaar drie gevallen.

   1. Breed en liggend (vanaf 8:5): schermvullend met object-position rechts, zodat een
      horizontale snee altijd van de linkerkant af gaat en de quote heel blijft. */
@media (min-width: 760px) and (min-aspect-ratio: 8/5) {
  .held:not(.held--kort) { height: 100svh; }
  .held:not(.held--kort) picture { height: 100%; }
  .held:not(.held--kort) img { height: 100%; object-fit: cover; object-position: right center; }
}

/* 2. Tussenin: de foto op volle breedte, hoogte volgt. Geen snee, dus quote heel. */

/* De quote als echte tekst, alleen zichtbaar waar de gebakken versie is weggeknipt (geval 3
   hieronder zet hem aan; deze basisregel moet daar dus vóór staan, anders wint display: none
   op volgorde — dat was de eerste versie op 22-9-2026). Schrijfletter
   met schreven omdat die in de foto ook schreven heeft; Rubik zou er los van staan. Geen extra
   webfont: dit is één blok van twee regels, dat is een systeemschreefletter niet waard om
   128 kB voor te downloaden. */
.held__quote { display: none; margin: 0; padding: 1.4rem 1.25rem 1.9rem; text-align: center; }
.held__quote p {
  margin: 0 auto;
  max-width: 20rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.1rem;
  line-height: 1.5;
  color: #ededed;
}
.held__quote cite {
  display: block;
  margin-top: .7rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-style: italic;
  color: #9fb4b7;
}

/* 3. Smal: de hele foto is op 375 px maar 195 px hoog, en de gebakken quote wordt dan
      onleesbaar klein (±9 px). Dus knippen naar de pluis én de quote eronder als echte
      tekst (.held__quote).

      ⚠ Een hoogte in svh werkte niet: de zichtbare breedte is dan containerverhouding
      gedeeld door 1,92, en die hangt dus af van de schermhoogte. Op Dicks iPhone kwam het
      venster daardoor precies ín de tekst uit — "Het / va / en b" tegen de rechterrand
      (22-9-2026). Met een vaste verhouding is de uitsnede op elk toestel gelijk: vierkant
      geeft 1 / 1,92 = 52% van de breedte, en met object-position 10% loopt het venster van
      4,8% tot 56,9%. De tekst begint op 63%, dus ruim zes procentpunt marge. */
@media (max-width: 759px) {
  .held:not(.held--kort) picture { aspect-ratio: 1 / 1; }
  .held:not(.held--kort) img { height: 100%; object-fit: cover; object-position: 10% center; }
  .held__quote { display: block; }
}

.held--kort img { max-height: min(46vh, 22rem); object-fit: cover; object-position: center; }

/* ---------- inhoud ---------- */
/* Het donkere blok met het merk links en de tekst rechts, zoals op de oude site. */
.intro { background: #000; color: #cfcfcf; padding-block: clamp(2.5rem, 6vw, 5rem); }
.intro__grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 820px) { .intro__grid { grid-template-columns: 1fr 1fr; } }

.intro__merk { width: min(100%, 26rem); margin-inline: auto; }
.intro h1 { color: var(--turquoise); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin-bottom: 1.1rem; }
.intro h1 span { display: block; font-weight: 400; margin-top: .1em; }
.intro p { color: #cfcfcf; }
.intro__acties { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.intro .btn--leeg { color: #fff; border-color: rgba(255, 255, 255, .75); }
.intro .btn--leeg:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* De opendag-pagina gebruikt het introblok voor gewone tekst op wit. */
.intro--licht { background: var(--papier); color: var(--ink-zacht); }
.intro--licht p { color: var(--ink-zacht); }

.kop { background: var(--turquoise); color: #fff; padding-block: clamp(2rem, 4vw, 3.25rem); }
.kop--hoog { padding-top: calc(var(--bar-hoogte) + 2.5rem); }
.kop h1 { color: #fff; }
.kop .lead { color: rgba(255, 255, 255, .92); }
.kop__acties { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 0; }

.band { background: var(--donker); }
.band picture { display: block; }
.band img { width: 100%; max-height: min(52vh, 26rem); object-fit: cover; object-position: center 62%; }

.kolommen { display: grid; gap: clamp(1.5rem, 4vw, 3rem); padding-block: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 800px) { .kolommen { grid-template-columns: 1fr 1fr; } }

section.wrap { padding-block: clamp(2rem, 4vw, 3.5rem); }

/* ---------- therapeuten ---------- */
.therapeuten { text-align: center; }
.therapeuten h2 { color: var(--turquoise-diep); }
.therapeuten .lead { max-width: 38rem; margin-inline: auto; }

.kaarten {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; gap: 2rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.kaart article { display: grid; justify-items: center; gap: .35rem; height: 100%; }

.kaart__foto { display: block; width: 9.5rem; border-radius: 50%; overflow: hidden; line-height: 0; }
.kaart__foto img { width: 9.5rem; height: 9.5rem; object-fit: cover; border-radius: 50%; }

.kaart blockquote {
  margin: 1rem 0 auto; font-size: .95rem; color: var(--ink-zacht);
  max-width: 22rem; text-wrap: pretty;
}
.kaart blockquote::before { content: '\201C'; }
.kaart blockquote::after { content: '\201D'; }

.kaart__praktijk { margin: .9rem 0 0; }
.kaart__praktijk a { color: var(--turquoise); text-decoration: none; }
.kaart__praktijk a:hover { text-decoration: underline; }
.kaart__naam { margin: 0; font-weight: 500; color: var(--ink); }

/* ---------- tarieven ---------- */
.dagdelen {
  list-style: none; margin: 1.5rem 0; padding: 0;
  display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.dagdelen li {
  border: 1px solid var(--lijn); border-left: 3px solid var(--turquoise);
  border-radius: var(--radius); padding: .75rem 1rem; background: var(--papier-warm);
}
.dagdelen strong { display: block; color: var(--ink); font-weight: 500; }
.dagdelen span { color: var(--grijs); font-size: .95rem; }

.soorten { list-style: none; counter-reset: soort; margin: 1.5rem 0; padding: 0; display: grid; gap: 1rem; }
.soorten li {
  counter-increment: soort;
  border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1.1rem 1.25rem 1.1rem 3.5rem;
  position: relative; background: var(--papier);
}
.soorten li::before {
  content: counter(soort);
  position: absolute; left: 1.1rem; top: 1.1rem;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--turquoise); color: #fff;
  display: grid; place-items: center; font-size: .95rem;
}
.soorten h3 { margin-bottom: .4rem; }
.korting {
  display: inline-block; margin-left: .35rem; padding: .1rem .55rem;
  border-radius: 1rem; background: rgba(19, 180, 198, .12);
  color: var(--turquoise-diep); font-size: .78rem; font-weight: 400; vertical-align: .12em;
}
.soorten p { margin: 0; }

.vanaf {
  border-left: 3px solid var(--turquoise); background: var(--papier-warm);
  padding: .9rem 1.1rem; border-radius: var(--radius); margin-block: 1.5rem;
}

/* ---------- ruimtes ---------- */
.plattegrond { margin: 1.5rem 0 2rem; }
.plattegrond img { border: 1px solid var(--lijn); border-radius: var(--radius); }

.ruimtes { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }

/* Kaarten waren ongelijk hoog, waardoor de prijzen op willekeurige hoogtes zweefden en het
   geheel rommelig werd. Nu is elke kaart een kolom: de beschrijving rekt mee en het
   prijsblok staat altijd onderaan, dus de bedragen liggen over de hele rij op één lijn. */
.ruimte {
  display: flex; flex-direction: column;
  border: 1px solid var(--lijn); border-top: 3px solid var(--turquoise);
  border-radius: var(--radius);
  background: var(--papier); box-shadow: var(--schaduw);
  overflow: hidden;
}
.ruimte > :not(.ruimte__beeld) { margin-inline: 1.25rem; }
.ruimte > h3 { margin-top: 1.1rem; }
.ruimte > :last-child { margin-bottom: 1.25rem; }

/* Beeld tot aan de rand van de kaart: dat maakt het blok levendiger dan een muur tekst. */
.ruimte__beeld { display: block; }
.ruimte__beeld img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* Zonder foto begint de kaart met de naam; dan hoort daar wat lucht boven. */
.ruimte > h3:first-child { margin-top: 1.25rem; }
.ruimte h3 { color: var(--turquoise-diep); margin-bottom: .5rem; }
.ruimte__tekst { flex: 1 1 auto; }

.ruimte__maat { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.ruimte__maat span {
  background: rgba(19, 180, 198, .1); color: var(--turquoise-diep);
  border-radius: 1rem; padding: .15rem .65rem; font-size: .78rem; white-space: nowrap;
}

/* Label links, bedrag rechts, altijd. Met flex-wrap belandde het bedrag in een smalle
   kaart op een eigen regel en leek het gecentreerd. */
.prijzen {
  margin: 1.25rem 0 0; display: grid;
  background: var(--papier-warm); border-radius: var(--radius); padding: .1rem .9rem;
}
.prijzen > div {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .75rem;
  padding: .65rem 0; border-top: 1px solid var(--lijn);
}
.prijzen > div:first-child { border-top: 0; }
.prijzen dt { color: var(--ink); font-size: .92rem; }
.prijzen dt small { display: block; color: var(--grijs); font-size: .76rem; }
.prijzen dd { margin: 0; text-align: right; color: var(--turquoise-diep); font-weight: 500;
              font-size: 1.05rem; white-space: nowrap; }
.prijzen dd small { display: block; font-weight: 300; font-size: .78rem; color: var(--grijs); }

.ruimte .noot { margin: .75rem 0 0; }

/* ---------- galerij ---------- */
/* Volle breedte met een eigen achtergrond, inhoud in een .wrap eronder - net als .kop en
   .slot. Eerder centreerde ik de kinderen met "> *", maar .galerij zet daarna zelf
   margin: 1.5rem 0 0 en die overschreef de automatische marge: de lijst stond links tegen
   de rand in plaats van in de kolom. */
.galerij-blok { background: var(--papier-warm); padding-block: clamp(2rem, 4vw, 3.5rem); }
.galerij {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.galerij img { border-radius: var(--radius); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

/* ---------- afsluiter ---------- */
.slot { background: var(--turquoise); color: #fff; padding-block: clamp(2.25rem, 4vw, 3.5rem); text-align: center; }
.slot h2 { color: #fff; }
.slot p { color: rgba(255, 255, 255, .95); }
.slot__acties { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.5rem; }
.slot .btn { background: #fff; border-color: #fff; color: var(--turquoise-diep); }
.slot .btn:hover { background: var(--donker); border-color: var(--donker); color: #fff; }
.slot .btn--leeg { background: transparent; border-color: rgba(255, 255, 255, .8); color: #fff; }
.slot .btn--leeg:hover { background: #fff; border-color: #fff; color: var(--turquoise-diep); }

.voorstellen { display: grid; gap: 1.75rem; align-items: start; }
.voorstellen img { border-radius: var(--radius); }
@media (min-width: 700px) { .voorstellen { grid-template-columns: 20rem 1fr; } }

/* ---------- voet ---------- */
.voet { background: var(--donker); color: #cfe9ec; padding-block: clamp(2.25rem, 4vw, 3.25rem) 1.25rem; }
.voet__grid { display: grid; gap: 1.75rem; }
.voet__info { display: grid; gap: 1.75rem; align-content: start; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.voet h2 { color: #7fe3ee; font-size: 1rem; font-weight: 500; margin-bottom: .5rem; }
.voet p { margin: 0; font-size: .95rem; }
.voet a { color: #eaf7f8; }
.voet a:hover { color: var(--turquoise); }
.voet__onder { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.voet__onder p { font-size: .85rem; color: #a9d3d8; }

/* ---------- kaart ---------- */
/* De embed-URL verwijst naar de Google-vestiging zelf (plaats-id), zodat de kaart de
   infokaart met naam en beoordelingen toont in plaats van alleen een speld. Google klapt
   die kaart weg als de iframe te laag of te breed wordt, dus staat de kaart rechts in de
   voet met ruwweg de afmetingen van de oude site. */
.kaart { margin-top: .75rem; }
.kaart iframe { width: 100%; height: 16rem; border: 0; border-radius: var(--radius); display: block; }

@media (min-width: 900px) {
  .voet__grid { grid-template-columns: minmax(0, 1fr) minmax(20rem, 30rem); gap: 2.5rem; }
  /* Naast de kaart is er ruimte voor drie kolommen; twee bij twee staat netter dan
     drie met een losse vierde eronder. */
  .voet__info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet__kaart { margin-top: 0; }
  .kaart iframe { height: 23rem; }
}