/* ============================================================
   Mevrouw de Hond — gedeelde stijl voor alle pagina's
   Huisstijl-lettertypes staan in de map lettertypes/
   ============================================================ */

/* Gratis lettertypes (SIL Open Font License), op de eigen hosting: zie lettertypes/LICENTIES.txt
   Kulim Park = koppen, menu, knoppen · Handlee = handgeschreven accenten · Jost = lopende tekst
   Nunito = de woorden UITLAATSERVICE en COACHING in de keuzevakken */
@font-face { font-family:'Kulim Park'; src:url('lettertypes/kulim-park-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Kulim Park'; src:url('lettertypes/kulim-park-600.woff2') format('woff2'); font-weight:500 600; font-display:swap; }
@font-face { font-family:'Kulim Park'; src:url('lettertypes/kulim-park-700.woff2') format('woff2'); font-weight:700 800; font-display:swap; }
@font-face { font-family:'Handlee'; src:url('lettertypes/handlee.woff2') format('woff2'); font-weight:400 700; font-display:swap; }
@font-face { font-family:'Jost'; src:url('lettertypes/jost.woff2') format('woff2'); font-weight:400 600; font-display:swap; }
@font-face { font-family:'Jost'; src:url('lettertypes/jost-schuin.woff2') format('woff2'); font-weight:400 600; font-style:italic; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('lettertypes/nunito-600.woff2') format('woff2'); font-weight:600; font-display:swap; }

:root {
  --terra: #dd8153;
  --terra-dark: #c56a3e;
  --terra-licht: #f7e6da;
  --groen: #5d7a4e;
  --groen-dark: #48613c;
  --mint: #b4dcb8;          /* mintgroen uit het logo */
  --mint-zacht: #eef7ef;
  --creme: #faf6f0;
  --wit: #ffffff;
  --inkt: #3d3833;
  --inkt-zacht: #6b6259;
  --lijn: #e8ddd0;
  --schaduw: 0 2px 14px rgba(61,56,51,.10);
  --tekstkolom: 100%;       /* tekst even breed als de schuifrijen met de kaartjes */
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Jost', 'Trebuchet MS', system-ui, sans-serif;
  color:var(--inkt); background:var(--creme);
  line-height:1.65; font-size:17px;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--terra-dark); }
h1,h2,h3 { font-family:'Kulim Park', 'Trebuchet MS', sans-serif; line-height:1.25; }
h2 { font-size:clamp(1.6rem, 3.5vw, 2.2rem); font-weight:700; margin-bottom:.35em; }
h3 { font-size:1.15rem; font-weight:700; margin-bottom:.3em; }
.accent { font-family:'Handlee', cursive; color:var(--terra); font-size:1.25em; }
.verborgen {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
section { padding:4.5rem 1.25rem; }
.wrap { max-width:1060px; margin:0 auto; }
.lead { font-size:1.1rem; color:var(--inkt-zacht); max-width:var(--tekstkolom); }

/* ---------- panelen: alleen de gekozen dienst tonen ---------- */
html.js .paneel { display:none; }
html.js .paneel.actief { display:block; }
html.js .taakbalk { display:none; }
html.js body.gekozen .taakbalk { display:flex; }
html.js #over { display:none; }
/* Over Linda toont per dienst een andere foto */
html.js #over .foto-uitlaatservice, html.js #over .foto-coaching { display:none; }
html.js body[data-dienst="uitlaatservice"] #over .foto-uitlaatservice { display:block; }
html.js body[data-dienst="coaching"] #over .foto-coaching { display:block; }
html.js body.gekozen #over { display:block; }
html.js #instagram { display:none; }
html.js body.gekozen #instagram { display:block; }
[id] { scroll-margin-top:60px; }
.paneel { scroll-margin-top:0; }

/* ---------- taakbalk onder de keuzevakken ---------- */
.taakbalk {
  position:sticky; top:0; z-index:50;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.8rem;
  background:rgba(255,255,255,.96); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--lijn); padding:.7rem 1.25rem;
}
.taakbalk a {
  font-family:'Kulim Park', sans-serif; font-weight:500; font-size:1.05rem;
  text-decoration:none; color:var(--inkt);
}
.taakbalk a:hover { color:var(--terra); }
.taakbalk .home { display:inline-flex; align-items:center; gap:.4rem; color:var(--terra-dark); }
.taakbalk .home svg { width:1.05em; height:1.05em; fill:currentColor; }
@media (max-width:640px){
  .taakbalk { gap:.3rem .9rem; padding:.55rem .6rem; }
  .taakbalk a { font-size:.85rem; }
  .taakbalk .home { gap:.25rem; }
}

/* ---------- hoofdmenu op de startpagina ---------- */
.start-logo { width:min(430px, 80%); margin:0 auto 2rem; }
/* ---------- startpagina: keuze ---------- */
.start {
  display:flex; flex-direction:column; justify-content:center;
  padding:2.8rem 1.25rem 3rem;
  background:var(--creme);
}
.keuze {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:2.5rem; max-width:1060px; margin:0 auto; width:100%;   /* even breed als .wrap, net als de rest van de pagina */
}
.keuze a {
  display:block; text-decoration:none; color:var(--inkt);
  background:var(--wit); border-radius:18px; overflow:hidden;
  box-shadow:var(--schaduw); transition:transform .18s ease, box-shadow .18s ease;
  container-type:inline-size;   /* de tekst in het vak schaalt mee met de breedte van het vak */
}
.keuze a:hover { transform:translateY(-4px); box-shadow:0 8px 26px rgba(61,56,51,.18); }
.keuze a.actief { box-shadow:0 0 0 3px var(--terra), 0 8px 26px rgba(61,56,51,.18); }
.keuze img { width:100%; aspect-ratio:4 / 3; object-fit:cover; }
.keuze .kop {
  display:flex; flex-direction:column; justify-content:center; text-align:center;
  min-height:7.05rem;   /* dezelfde hoogte als voorheen: het vak blijft even groot */
  padding:1rem 1rem .8rem;
}
/* telefoon en tablet: alleen het woord groter, iets minder letterafstand zodat het in het vak past */
.keuze .dienst {
  display:block; font-family:'Nunito', 'Kulim Park', sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; text-indent:.12em; line-height:1.18;
  font-size:1.5rem;                                /* voor browsers zonder cqw */
  font-size:clamp(1.3rem, 8.6cqw, 2.1rem);
  color:var(--inkt);
}
.keuze .sub {
  display:block; font-family:'Handlee', cursive; color:var(--terra);
  font-size:1.3rem; line-height:1.3; margin-top:.25rem;
}
/* groot scherm: woord én slogan groter, met de ruime letterafstand */
@media (min-width:900px) {
  .keuze .dienst { letter-spacing:.2em; text-indent:.2em; font-size:min(2.3rem, 7.2cqw); }
  .keuze .sub { font-size:min(1.75rem, 5.5cqw); }
}
/* telefoon (vakken onder elkaar): compacter, zodat het vak Coaching al op het eerste scherm in beeld komt */
@media (max-width:639px) {
  .start { padding-top:1.4rem; }
  .start-logo { width:min(220px, 60%); margin-bottom:1.3rem; }
  .keuze { gap:1.4rem; }
  .keuze .kop { min-height:0; padding:.8rem 1rem .6rem; }
  .keuze .kaart-tekst { padding:.7rem 1.3rem .9rem; }
  .keuze .kaart-tekst p:not(.pijl) { display:none; }   /* de uitleg staat ook bovenaan de dienst zelf */
}
.keuze .kaart-tekst { padding:1.1rem 1.3rem 1.4rem; }
.keuze p { color:var(--inkt-zacht); font-size:1.05rem; }
.keuze .pijl { color:var(--terra); font-weight:600; }

/* ---------- tekstpagina (privacyverklaring) ---------- */
.start.kopje { padding-bottom:1rem; }
.start.kopje .start-logo { width:min(260px, 60%); margin-bottom:0; }
.tekstpagina { padding-top:2rem; }
.tekstpagina h1 { font-size:clamp(1.6rem, 3.5vw, 2.2rem); font-weight:700; margin-bottom:.6em; }
.tekstpagina h2 { margin-top:2.4rem; }
.tekstpagina h3 { margin-top:1.4rem; font-size:1.05rem; }
.tekstpagina p { margin-top:.6rem; }
.tekstpagina ul { margin:.5rem 0 0 1.4rem; }
.tekstpagina li { margin-top:.2rem; }

/* ---------- kopfoto bovenaan een dienst ---------- */
/* afgeronde foto binnen de tekstbreedte, met de witte titel en slogan erop */
.kopfoto {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  width:100%; aspect-ratio:2 / 1; padding:1.2rem 1rem; margin-bottom:2.4rem;
  color:#fff; background-color:var(--mint); background-size:cover;
  border-radius:14px; box-shadow:var(--schaduw);
}
/* alleen rond de tekst iets donkerder, zodat de rest van de foto helder blijft */
.kopfoto::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 65% 60% at center, rgba(45,40,35,.45), rgba(45,40,35,.15) 70%, rgba(45,40,35,.05));
}
.kopfoto > * { position:relative; }
.kopfoto .kop-titel {
  font-family:inherit; line-height:1.65;   /* is op de dienstpagina's de h1: zelfde letter als voorheen */
  font-weight:500; text-transform:uppercase; letter-spacing:.22em; text-indent:.22em;
  font-size:clamp(1.35rem, 4.2vw, 2.6rem); text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.kopfoto .sub {
  font-family:'Handlee', cursive; font-size:clamp(1.05rem, 2.4vw, 1.6rem);
  margin-top:.3rem; text-shadow:0 2px 10px rgba(0,0,0,.55);
}
/* het vak volgt de vorm van de foto, zodat er zo min mogelijk afvalt */
.kopfoto.panorama { aspect-ratio:1920 / 575; }   /* de brede strook van de uitlaatservice */
@media (max-width:900px){ .kopfoto.panorama { aspect-ratio:5 / 2; } }
@media (max-width:560px){
  .kopfoto { aspect-ratio:3 / 2; margin-bottom:1.8rem; }
  .kopfoto.panorama { aspect-ratio:5 / 2; }
}

/* ---------- melding (klantenstop) ---------- */
.melding {
  background:var(--terra-licht); border-left:4px solid var(--terra);
  border-radius:0 12px 12px 0; padding:1.1rem 1.3rem; margin:2.2rem 0;
  max-width:var(--tekstkolom);
}
.melding strong { font-family:'Kulim Park', sans-serif; letter-spacing:.06em; }
.melding p { font-size:.97rem; color:var(--inkt-zacht); margin-top:.2rem; }

/* ---------- aanmeldformulier ---------- */
.formulier { max-width:var(--tekstkolom); margin-top:1.8rem; }
.formulier .velden { display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.2rem; }
@media (max-width:620px){ .formulier .velden { grid-template-columns:1fr; } }
.formulier label { display:block; font-size:.95rem; color:var(--inkt); margin-bottom:1rem; }
.formulier input:not([type=checkbox]), .formulier select, .formulier textarea {
  display:block; width:100%; margin-top:.3rem; font:inherit; line-height:1.65; color:var(--inkt);
  background:var(--wit); border:1px solid var(--lijn); border-radius:10px; padding:.6rem .8rem;
}
.formulier input:focus, .formulier select:focus, .formulier textarea:focus {
  outline:2px solid var(--terra); outline-offset:1px; border-color:var(--terra);
}
.formulier textarea { resize:vertical; }
/* een keuzelijst krijgt van de browser een eigen regelhoogte: even hoog maken als de invulvelden */
.formulier select { height:calc(1.65em + 1.2rem + 2px); }
.formulier .akkoord { display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--inkt-zacht); }
.formulier .akkoord input { margin-top:.35rem; flex:0 0 auto; }
.formulier .honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.melding.gelukt { background:var(--mint-zacht); border-left-color:var(--groen); }
.melding.mislukt { background:#fdeceb; border-left-color:#c0392b; }


/* ---------- schuifrijen: op een telefoon veeg je erdoorheen ---------- */
.slider { position:relative; }
.schuifrij {
  display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.4rem 1.25rem 1.2rem; margin:0 -1.25rem;   /* loopt door tot de schermrand */
  scroll-padding-left:1.25rem; scrollbar-width:none;
}
.schuifrij::-webkit-scrollbar { display:none; }
.schuifrij > * { flex:0 0 82%; min-width:0; scroll-snap-align:start; }

/* de kaartjes van de uitlaatservice: hele tekst in beeld, allemaal even hoog
   (de flexrij rekt ze op tot het langste kaartje) */
.schuifkaart {
  display:flex; flex-direction:column;
  background:var(--wit); border-radius:14px; overflow:hidden; box-shadow:var(--schaduw);
}
.schuifkaart img { flex:none; width:100%; aspect-ratio:3 / 2; object-fit:cover; }
.schuifkaart .tekst { flex:1; padding:1.1rem 1.3rem 1.4rem; }
.schuifkaart h3 { margin-bottom:.35rem; }
.schuifkaart p { font-size:.95rem; color:var(--inkt-zacht); }

/* de ervaringen zijn wel te lang voor één kaartje: vaste hoogte met een dun schuifbalkje */
.ervaringen-rij .ervaring { display:flex; flex-direction:column; height:min(58vh, 460px); }
.ervaringen-rij .ervaring-tekst {
  margin-top:0; flex:1; overflow-y:auto; overscroll-behavior:contain; padding-right:.5rem;
  scrollbar-width:thin; scrollbar-color:var(--terra) var(--lijn);
}
.ervaringen-rij .ervaring-tekst::-webkit-scrollbar { width:6px; }
.ervaringen-rij .ervaring-tekst::-webkit-scrollbar-thumb { background:var(--terra); border-radius:3px; }
.ervaringen-rij .ervaring-tekst::-webkit-scrollbar-track { background:var(--lijn); border-radius:3px; }

.ervaringen-rij .naam {
  font-family:'Kulim Park', sans-serif; font-weight:700; color:var(--terra-dark);
  margin-bottom:.5rem;
}

/* bediening: stipjes links, pijlen rechts */
.bediening { display:flex; align-items:center; justify-content:space-between; margin-top:-.4rem; }
.stipjes { display:flex; gap:.45rem; }
.stipjes span { width:.55rem; height:.55rem; border-radius:50%; background:var(--lijn); }
.stipjes span.actief { background:var(--terra); }
.pijlen { display:flex; gap:.6rem; }
.pijlen button {
  width:2.6rem; height:2.6rem; border-radius:50%; border:none; cursor:pointer;
  background:var(--terra); color:#fff; font-size:1.2rem; line-height:1;
}
.pijlen button:hover { background:var(--terra-dark); }
.pijlen button[disabled] { background:var(--lijn); cursor:default; }

/* op een groot scherm blijven het schuifrijen: drie kaartjes tegelijk in beeld */
@media (min-width:900px) {
  .schuifrij > * { flex:0 0 calc((100% - 2rem) / 3); }
}
/* op een tablet twee kaartjes tegelijk, met een stukje van het volgende in beeld
   (anders worden de foto's en de reviews veel te groot) */
@media (min-width:561px) and (max-width:899px) {
  .schuifrij > * { flex:0 0 44%; }
}

/* ---------- instagram: eigen foto's als schuifrij, elke foto linkt naar het profiel ---------- */
.instafoto {
  display:block; aspect-ratio:1 / 1; border-radius:14px; overflow:hidden; box-shadow:var(--schaduw);
}
.instafoto img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.instafoto:hover img { transform:scale(1.04); }
.knop-instagram { display:inline-flex; align-items:center; gap:.55rem; }
.knop-instagram svg {
  width:1.6em; height:1.6em; fill:none; stroke:currentColor; stroke-width:2;
  transform:translateY(.48em);   /* logo op dezelfde hoogte als de letters van de knop */
}
.knop-instagram svg .stip { fill:currentColor; stroke:none; }

/* ---------- kaarten & grids ---------- */
.grid { display:grid; gap:1.4rem; margin-top:2rem; }
.grid-4 { grid-template-columns:repeat(4, 1fr); }
@media (max-width:980px){ .grid-4 { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .grid-4 { grid-template-columns:1fr; } }
.grid-2 { grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); }
.kaart { background:var(--wit); border-radius:14px; padding:1.4rem 1.3rem; box-shadow:var(--schaduw); }
.kaart p { font-size:.95rem; color:var(--inkt-zacht); }
.fotokaart { padding:0; overflow:hidden; }
.fotokaart img { width:100%; aspect-ratio:4 / 3; object-fit:cover; }
.fotokaart .kaart-tekst { padding:1.1rem 1.3rem 1.4rem; }
.fotokaart .kaart-tekst p { font-size:.95rem; color:var(--inkt-zacht); }

.fotostrip { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:1rem; margin-top:2.4rem; }
.fotostrip img { border-radius:12px; width:100%; aspect-ratio:3 / 2; object-fit:cover; box-shadow:var(--schaduw); }

.stappen { counter-reset:stap; margin-top:1.6rem; display:grid; gap:1rem; max-width:var(--tekstkolom); }
.stap { display:flex; gap:1rem; align-items:flex-start; }
.stap::before {
  counter-increment:stap; content:counter(stap);
  flex:0 0 2.1rem; height:2.1rem; border-radius:50%;
  background:var(--mint); color:var(--inkt); font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.stap p { font-size:.97rem; color:var(--inkt-zacht); }

/* ---------- tarieven ---------- */
.wit-vlak { background:var(--wit); }
table {
  width:100%; max-width:var(--tekstkolom); border-collapse:collapse; margin-top:1.6rem;
  background:var(--wit); border-radius:12px; overflow:hidden; box-shadow:var(--schaduw);
}
th, td { padding:.8rem 1.1rem; text-align:left; }
th { background:var(--mint); color:var(--inkt); font-size:.95rem; font-family:'Kulim Park', sans-serif; font-weight:700; }
tr:nth-child(even) td { background:var(--creme); }
td:last-child, th:last-child { text-align:right; white-space:nowrap; }
td:last-child { font-weight:600; }
.voetnoot { font-size:.88rem; color:var(--inkt-zacht); margin-top:.8rem; max-width:var(--tekstkolom); }

/* ---------- coaching ---------- */
details {
  background:var(--wit); border-radius:10px; margin-top:.6rem; padding:.75rem 1.1rem;
  box-shadow:var(--schaduw); transition:background .15s ease;
  max-width:var(--tekstkolom);
}
details:hover { background:#f6fbf6; }
details summary {
  cursor:pointer; font-family:'Kulim Park', sans-serif; font-weight:500;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  list-style:none;
}
details summary::-webkit-details-marker { display:none; }
details summary .stapnr { font-weight:700; color:var(--terra-dark); letter-spacing:.02em; }
details summary::after {
  content:'+'; flex:0 0 1.6rem; height:1.6rem; border-radius:50%;
  background:var(--terra); color:#fff; font-size:1.15rem; line-height:1.5rem;
  text-align:center; font-family:'Jost', sans-serif;
}
details[open] summary::after { content:'–'; }
details p { margin-top:.5rem; font-size:.95rem; color:var(--inkt-zacht); }

.ervaring {
  background:var(--wit); border-left:4px solid var(--terra);
  border-radius:0 14px 14px 0; box-shadow:var(--schaduw); padding:1.1rem 1.3rem;
}
.ervaring .naam {
  display:block; font-family:'Kulim Park', sans-serif; font-weight:700;
  color:var(--terra-dark);
}
.ervaring .flard {
  display:block; margin-top:.25rem; font-style:italic;
  color:var(--inkt-zacht); font-size:.95rem;
}
.ervaring[open] .flard { display:none; }
.ervaring-tekst { margin-top:.6rem; font-style:italic; color:var(--inkt-zacht); font-size:.95rem; }
.ervaring-tekst p + p { margin-top:.8rem; }
.ervaring-tekst .toelichting { font-style:normal; font-size:.88rem; }

/* ---------- knoppen ---------- */
.knop {
  display:inline-block; background:var(--terra); color:#fff !important;
  text-decoration:none; padding:.75rem 1.6rem; border-radius:999px;
  margin-top:1.6rem; transition:background .15s;
  font-family:'Kulim Park', sans-serif; font-weight:500; font-size:inherit;
}
.knop:hover { background:var(--terra-dark); }

/* ---------- over Linda ---------- */
.over-flex { display:grid; grid-template-columns:320px 1fr; gap:2.5rem; align-items:start; margin-top:1.5rem; }
.over-flex img { border-radius:14px; box-shadow:var(--schaduw); }
.badges { display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; margin-top:1.2rem; }
.badges span {
  background:var(--mint-zacht); border:1px solid var(--mint); border-radius:999px;
  padding:.3rem .9rem; font-size:.85rem; color:var(--inkt);
}
@media (max-width:720px){ .over-flex { grid-template-columns:1fr; } }

/* ---------- contact ---------- */
.contact-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem; margin-top:2rem; }
@media (max-width:680px){ .contact-grid { grid-template-columns:1fr; } }
.contact-grid .kaart p { font-size:.95rem; }
.contact-groot { font-size:1.1rem; }
.contact-groot a { text-decoration:none; }

/* ---------- footer ---------- */
footer { background:var(--inkt); color:#bdb5ab; font-size:.85rem; padding:2.2rem 1.25rem; }
footer .wrap { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; }
footer a { color:#e0d8cc; }