/* ============================================================
   Yanieke Nijenkamp — praktijk voor kind & ouder
   Mobile-first. De basisregels gelden voor de telefoon; verderop
   staan de uitzonderingen voor tablet (600px) en desktop (960px).
   ============================================================ */

/* ---------- Lettertypes (staan in assets/fonts/) ----------
   Zelf gehost, niet via Google Fonts. Dat is sneller en er gaan
   geen bezoekersgegevens naar een externe partij (AVG). */

@font-face {
  font-family: 'Lora';
  src: url('../assets/fonts/lora-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/nunito-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Kleuren en maten ----------
   Overgenomen uit de bestaande website, zodat het merk herkenbaar
   blijft. Terracotta is de leidende kleur. */

:root {
  --terracotta:      #6F262F;   /* het diepe paarsrood van de site */
  --terracotta-diep: #571D25;   /* donkerder, voor knoppen bij aanwijzen */
  --terracotta-licht:#C48D94;   /* het zachte roze: streepje, bolletjes */
  --roze-zacht:      #EFDCDD;   /* bleker roze, voor vlakken met veel tekst */
  --goud:            #F9C349;
  --creme:           #FFF4E8;
  --creme-diep:      #F6E7D6;
  --wit:             #F8F7F3;
  --inkt:            #1E1810;   /* koppen */
  --tekst:           #62615C;   /* lopende tekst */
  --tekst-licht:     #F8F7F3;   /* tekst op donkere vlakken */

  --font-kop:   'Lora', Georgia, 'Times New Roman', serif;
  --font-tekst: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap:      1120px;
  --wrap-smal:  700px;
  --ruimte:     clamp(3.5rem, 9vw, 6rem);
  --rond:       1rem;
}

/* ---------- Basis ---------- */

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

/* Het hidden-attribuut moet het altijd winnen van display-regels
   zoals display: flex, anders blijft een verborgen element staan. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;   /* ankerlinks stoppen onder de vaste balk */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--wit);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: 1.0625rem;
  line-height: 1.75;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--font-kop);
  font-weight: 600;
  line-height: 1.2;
  color: var(--inkt);
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2.25rem, 7vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 3.5vw, 1.4rem); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--terracotta); }
a:hover { color: var(--terracotta-diep); }

/* Kleine kop boven een titel. */
.kop-boven {
  font-family: var(--font-tekst);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: .6rem;
}

.lead { font-size: 1.1875rem; }
.midden { text-align: center; }
.zacht-uit { opacity: .8; font-size: .9375rem; }

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

.svg-opslag { position: absolute; width: 0; height: 0; overflow: hidden; }

.visueel-verborgen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  background: var(--terracotta);
  color: var(--tekst-licht);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--rond) 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; top: 0; }

:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}
.sectie--terracotta :focus-visible,
.site-footer :focus-visible { outline-color: var(--goud); }

/* ---------- Knoppen ---------- */

.knop {
  display: inline-block;
  font-family: var(--font-tekst);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.knop:hover { transform: translateY(-2px); }
.knop--klein { padding: .6rem 1.1rem; font-size: .9375rem; }

.knop--vol { background: var(--terracotta); color: var(--tekst-licht); border-color: var(--terracotta); }
.knop--vol:hover { background: var(--terracotta-diep); border-color: var(--terracotta-diep); color: var(--tekst-licht); }

.knop--lijn { border-color: currentColor; color: var(--terracotta); }
.knop--lijn:hover { background: var(--terracotta); color: var(--tekst-licht); border-color: var(--terracotta); }

/* Op het paarsrode vlak kan een rode knop niet: die valt weg tegen de
   achtergrond. Daar wordt het omgedraaid: een crème knop met
   paarsrode letters. */
.sectie--terracotta .knop--vol {
  background: var(--creme);
  border-color: var(--creme);
  color: var(--terracotta);
}
.sectie--terracotta .knop--vol:hover {
  background: var(--goud);
  border-color: var(--goud);
  color: var(--terracotta-diep);
}
.sectie--terracotta .knop--lijn { color: var(--tekst-licht); }
.sectie--terracotta .knop--lijn:hover { background: var(--tekst-licht); color: var(--terracotta); border-color: var(--tekst-licht); }

.knoppenrij {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}
.knoppenrij--midden { justify-content: center; }

/* ---------- Kopbalk ---------- */

/* De balk is paarsrood; alles erin staat er dus in crème op.
   Wil je hem later toch weer licht? Zet background op var(--wit)
   en haal het blok "Kleuren in de balk" hieronder weg. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--terracotta);
  border-bottom: 1px solid var(--terracotta-diep);
}

.site-header__inner {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding-block: .875rem;
  min-height: 4.5rem;
}

/* Je naam staat midden in de balk, met een dun roze lijntje eronder.
   Wil je een andere dikte? Verander de height in .merk::after.
   Een andere kleur? Dat is --terracotta-licht bovenin dit bestand. */
.merk {
  position: relative;
  z-index: 0;
  order: 1;
  flex: none;
  margin-inline: auto;
  padding: 0 .3rem .2rem;
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: clamp(1.15rem, 4.4vw, 1.5rem);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.merk::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--terracotta-licht);
}

/* ---------- Kleuren in de balk ----------
   Op het paarsrood staat alles in crème. Aanwijzen en de pagina
   waar je nu bent worden goud, net als de links in de voettekst. */

.merk { color: var(--creme); }
.merk:hover { color: var(--goud); }

.site-header :focus-visible { outline-color: var(--goud); }

.nav-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  background: rgba(255, 244, 232, .14);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: var(--creme);
}

/* Hamburger: één streepje met twee streepjes erboven en eronder. */
.nav-knop__streepjes,
.nav-knop__streepjes::before,
.nav-knop__streepjes::after {
  display: block;
  width: 1.15rem; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-knop__streepjes { position: relative; }
.nav-knop__streepjes::before,
.nav-knop__streepjes::after { content: ''; position: absolute; left: 0; }
.nav-knop__streepjes::before { top: -6px; }
.nav-knop__streepjes::after  { top: 6px; }

.nav-knop[aria-expanded="true"] .nav-knop__streepjes { background: transparent; }
.nav-knop[aria-expanded="true"] .nav-knop__streepjes::before { transform: translateY(6px) rotate(45deg); }
.nav-knop[aria-expanded="true"] .nav-knop__streepjes::after  { transform: translateY(-6px) rotate(-45deg); }

/* Het menu. Op de telefoon staat alleen je naam in de balk; de links
   klappen eronder uit na een tik op de knop. Vanaf 960px staan ze
   links en rechts van je naam — zie onderaan dit bestand. */
.hoofdnav {
  flex: 1 1 auto;
  min-height: 2.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.hoofdnav__zij {
  display: none;
  width: 100%;
  list-style: none;
  margin: 0; padding: 0;
  flex-direction: column;
  gap: .25rem;
}
.hoofdnav__zij--links  { order: 2; }
.hoofdnav__zij--rechts { order: 3; }

/* Uitgeklapt lopen de links van rand tot rand. De negatieve marge
   haalt de ruimte weg die de knop links en het blokje rechts innemen. */
.hoofdnav.is-open .hoofdnav__zij {
  display: flex;
  margin-inline: -3.25rem;
  width: calc(100% + 6.5rem);
}
.hoofdnav.is-open .hoofdnav__zij--links {
  margin-top: .75rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(255, 244, 232, .25);
}
.hoofdnav.is-open .hoofdnav__zij--rechts { padding-bottom: .5rem; }

.hoofdnav__zij a {
  display: block;
  padding: .55rem 0;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--creme);
  white-space: nowrap;
}
.hoofdnav__zij a:hover { color: var(--goud); }
.hoofdnav__zij a[aria-current="page"] { color: var(--goud); }

/* ---------- Uitklaplijstje onder Aanbod ----------
   Op de telefoon staan de twee pagina's gewoon ingesprongen onder
   Aanbod. Op een breed scherm klappen ze uit zodra je Aanbod aanwijst
   of er met de tab-toets langsgaat. */

.hoofdnav__uit { position: relative; }

.hoofdnav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hoofdnav__sub a {
  padding-left: 1.1rem;
  font-size: .85rem;
  opacity: .85;
}
.hoofdnav__sub a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: .5rem;
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.hoofdnav__sub li { position: relative; }

/* Het pijltje achter Aanbod. */
.hoofdnav__pijl {
  display: inline-block;
  width: .4rem;
  height: .4rem;
  margin-left: .45rem;
  vertical-align: .1em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
/* Het blokje rechts van het menu is er alleen om de knop links te
   compenseren, zodat je naam precies in het midden uitkomt. */
.nav-balans { flex: none; width: 2.75rem; }

/* ---------- Secties en kleurvlakken ---------- */

.sectie {
  position: relative;
  padding-block: var(--ruimte);
  background: var(--wit);
}
.sectie--creme { background: var(--creme); }
.sectie--creme-diep { background: var(--creme-diep); }

.sectie--terracotta {
  background: var(--terracotta);
  color: var(--tekst-licht);
}
.sectie--terracotta h2,
.sectie--terracotta h3 { color: var(--tekst-licht); }
.sectie--terracotta .kop-boven { color: var(--goud); }
.sectie--terracotta a { color: var(--goud); }

/* ---------- Boogvorm om foto's ---------- */

.boog {
  position: relative;
  overflow: hidden;
  border-radius: 999px 999px 1rem 1rem;
  background: var(--creme-diep);
}
.boog img { width: 100%; }
.boog--zacht { border-radius: var(--rond); }

/* ---------- Lijst met klachten ---------- */

.punten { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.punten li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .7rem;
}
.punten li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: .7rem; height: .7rem;
  border-radius: 50%;
  background: var(--terracotta-licht);
}
.sectie--terracotta .punten li::before { background: var(--goud); }

/* Een compacte variant, voor een langer lijstje van korte regels:
   kortere regelafstand en minder lucht tussen de punten. Zet er
   class="punten punten--dicht" bij om hem te gebruiken. Het roze
   bolletje schuift een klein stukje mee omhoog. */
.punten--dicht li {
  line-height: 1.45;
  margin-bottom: .45rem;
}
.punten--dicht li::before { top: .4em; }

/* ---------- Kaarten (trajecten) ---------- */

.kaarten {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

/* ---------- Roze kader achter de kaarten ----------
   Hetzelfde roze als het streepje onder je naam. Het ligt als een
   massief vlak achter de kaart en steekt er rechtsonder uit.

   Verder of minder ver laten uitsteken? Verander de .7rem hieronder
   (allebei de waardes gelijk houden). Wil je het weg, zet dan de
   hele box-shadow-regel op none. */

.kaarten--twee { gap: 1.75rem; }

.kaarten--twee .kaart {
  border-color: var(--terracotta-licht);
  box-shadow: .7rem .7rem 0 var(--terracotta-licht);
}

.kaart {
  background: var(--wit);
  border: 1px solid var(--creme-diep);
  border-radius: var(--rond);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.sectie--creme .kaart { background: var(--wit); }
.kaart h3 { margin-bottom: .4em; }
.kaart p { font-size: .9875rem; }
.kaart .knop { align-self: flex-start; margin-top: auto; }
.kaart__tekst { margin-bottom: 1.25rem; }

/* ---------- Formulier (aanmelden voor de gids) ----------
   Eén kolom met ruime velden, zodat het ook op een telefoon
   prettig invult. De velden worden nooit breder dan 30rem; dat
   leest rustiger dan een veld over de volle breedte.

   Wil je de velden ronder of hoekiger? Verander var(--rond)
   hieronder in bijvoorbeeld .4rem. */

.formulier { margin-top: 2rem; max-width: 30rem; }
.formulier__veld { margin-bottom: 1.25rem; }

.formulier label {
  display: block;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--inkt);
  margin-bottom: .35rem;
}

.formulier input[type="text"],
.formulier input[type="email"] {
  width: 100%;
  padding: .7rem .9rem;
  font: inherit;
  color: var(--inkt);
  background: var(--wit);
  border: 1px solid var(--terracotta-licht);
  border-radius: var(--rond);
}
.formulier input[type="text"]:focus-visible,
.formulier input[type="email"]:focus-visible,
.formulier input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* Het vinkje met de zin ernaast. */
.formulier__akkoord {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: 1.5rem;
}
.formulier__akkoord input {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .15rem;
  accent-color: var(--terracotta);
}
.formulier__akkoord label {
  font-weight: 400;
  font-size: .9375rem;
  color: var(--tekst);
  margin-bottom: 0;
}

/* De spamval: onzichtbaar, maar wel bereikbaar voor robots. Niet
   op display:none zetten, want dan vullen ze hem juist niet in. */
.formulier__honing {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* De verstuurknop is een echte <button> en geen link. Deze regel
   zorgt dat hij er precies zo uitziet als de andere knoppen. */
button.knop {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Het zinnetje dat verschijnt als er iets niet klopte. */
.formulier__fout {
  margin-top: 1.5rem;
  padding: .8rem 1rem;
  background: var(--roze-zacht);
  border-left: 4px solid var(--terracotta);
  border-radius: .4rem;
  color: var(--inkt);
  font-size: .9375rem;
}

/* ---------- Tarieven ---------- */

.tarieven {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--creme-diep);
}
.tarieven li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--creme-diep);
}
.tarieven__bedrag {
  font-family: var(--font-kop);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--terracotta);
  white-space: nowrap;
}

/* ---------- Citaat ---------- */

.citaat {
  margin: 2rem 0 0;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--creme);
  border-left: 4px solid var(--terracotta-licht);
  border-radius: 0 var(--rond) var(--rond) 0;
}
.citaat p {
  font-family: var(--font-kop);
  font-size: 1.1rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--inkt);
  margin-bottom: .6rem;
}
.citaat footer { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }

/* ---------- Ingesloten vensters (Instagram, reviews) ---------- */

.wacht, .nog-leeg {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 8rem;
  color: rgba(98, 97, 92, .7);
  font-size: .9375rem;
}
.sectie--terracotta .wacht,
.sectie--terracotta .nog-leeg { color: rgba(248, 247, 243, .75); }

.feed { margin: 2.5rem 0; min-height: 6rem; }
.feed iframe { display: block; border: 0; width: 100%; }

/* ---------- Contactgegevens ---------- */

.contact-lijst {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  font-size: 1.0625rem;
}
/* Staat de lijst naast een foto, dan lijnt hij links uit in plaats
   van in het midden. */
.fotoblok__tekst .contact-lijst { justify-content: flex-start; }

.contact-lijst a { font-weight: 700; text-decoration: none; }
.contact-lijst a:hover { text-decoration: underline; }

/* ---------- Voettekst ---------- */

.site-footer {
  background: var(--terracotta);
  color: var(--tekst-licht);
  padding-block: var(--ruimte) 2rem;
}
.site-footer a { color: var(--goud); }

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.site-footer h3 { color: var(--tekst-licht); font-size: 1.1rem; margin-bottom: .6em; }

.footer-links, .footer-contact {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: .9375rem;
}
.footer-links a, .footer-contact a { text-decoration: none; }
.footer-links a:hover, .footer-contact a:hover { text-decoration: underline; }

.copyright {
  text-align: center;
  font-size: .8125rem;
  opacity: .75;
  margin: 2.5rem 0 0;
}

/* ============================================================
   BEELDBAND BOVENAAN
   ============================================================
   De fotoband bovenaan de andere pagina's: een foto met een donkere
   waas eroverheen, zodat de titel altijd leesbaar blijft.

   De homepage gebruikt deze band niet meer. Die opent met .hero,
   het blok hieronder.
   ============================================================ */

.header-band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(84vh, 40rem);
  padding-block: 5rem 3rem;
  background: var(--inkt);
  overflow: hidden;
}

/* Kortere uitvoering voor de andere pagina's. */
.header-band--kort {
  min-height: min(46vh, 22rem);
  align-items: center;
  padding-block: 3.5rem;
}

.header-band__beeld {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.header-band__beeld > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Donkere waas, zodat de letters altijd leesbaar blijven. */
.header-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(30, 24, 16, .44) 0%,
    rgba(30, 24, 16, .44) 28%,
    rgba(30, 24, 16, .82) 100%);
}
.header-band--kort::after { background: rgba(30, 24, 16, .60); }

.header-band__inhoud {
  position: relative;
  z-index: 1;
  color: var(--tekst-licht);
  max-width: 44rem;
}
.header-band h1 {
  color: var(--tekst-licht);
  margin-bottom: .25em;
}
.header-band h1 { text-shadow: 0 1px 20px rgba(30, 24, 16, .4); }
.header-band .kop-boven { color: var(--goud); }
.header-band .lead { color: rgba(248, 247, 243, .95); }

.header-band .knop--lijn {
  color: var(--tekst-licht);
  border-color: rgba(248, 247, 243, .8);
}
.header-band .knop--lijn:hover {
  background: var(--tekst-licht);
  color: var(--inkt);
  border-color: var(--tekst-licht);
}
.header-band :focus-visible { outline-color: var(--goud); }

/* ============================================================
   OPENING VAN DE HOMEPAGE
   ============================================================
   Tekst links, jouw foto rechts in een boog met een witte rand.
   Daarachter ligt een paarsrood vlak dat er schuin onderuit steekt.

   ANDERE FOTO? Zet twee bestanden in assets/img — een grote en een
   kleinere voor de telefoon — en pas de adressen in index.html aan.
   Houd een staande verhouding aan van 2 breed op 3 hoog, dan vult
   de foto de boog precies.
   ============================================================ */

.hero {
  background: var(--creme);
  padding-block: clamp(2.5rem, 7vw, 4rem) clamp(3.5rem, 9vw, 5.5rem);
}

.hero__inner {
  display: grid;
  gap: clamp(2.5rem, 6vw, 3.5rem);
  align-items: center;
}

/* Je naam met hetzelfde roze streepje eronder als in de menubalk.
   Het streepje loopt precies zo breed als je naam, doordat de kop
   niet breder wordt dan de tekst (inline-block). De z-index zorgt
   dat het streepje áchter de letters langs loopt, zodat de staart
   van de j er dwars doorheen steekt in plaats van andersom. */
.hero h1 {
  position: relative;
  z-index: 0;
  display: inline-block;
  margin-bottom: .4em;
}
.hero h1::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--terracotta-licht);
}

/* De tekstkolom in de hero blijft prettig leesbaar: geen enkele
   alinea wordt breder dan 34rem, ook niet als er een gewone
   alinea onder de lead staat. */
.hero__tekst > p { max-width: 34rem; }

.hero__onder {
  font-family: var(--font-kop);
  font-style: italic;
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  color: var(--terracotta);
  margin-bottom: 1em;
}

.hero__beeld {
  position: relative;
  justify-self: center;
  width: min(78%, 20rem);
}

/* Het rode vlak achter de foto. Wil je het minder ver laten
   uitsteken, maak de -1.5rem hieronder dan kleiner. */
.hero__beeld::before {
  content: '';
  position: absolute;
  inset: 1.5rem -1.5rem -1.5rem 1.5rem;
  background: var(--terracotta);
  border-radius: 999px 999px 1.5rem 1.5rem;
}

.hero .boog {
  border: 7px solid var(--terracotta-licht);
  border-radius: 999px 999px 1.5rem 1.5rem;
}

/* ---------- Strook met feiten onder de band ---------- */

.sectie--feiten {
  padding-block: 2.25rem;
  background: var(--terracotta);
  color: var(--tekst-licht);
}
.feiten {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 1.5rem;
  text-align: center;
}
/* De koppen in het goud. Liever het roze? Zet var(--goud)
   hieronder om naar var(--terracotta-licht). */
.feiten__kop {
  display: block;
  font-family: var(--font-kop);
  font-size: 1.15rem;
  color: var(--goud);
  margin-bottom: .1rem;
}
.feiten__uitleg { font-size: .9375rem; color: rgba(255, 244, 232, .82); }

/* ---------- Blok met een foto naast de tekst ---------- */

.fotoblok {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.fotoblok + .fotoblok { margin-top: var(--ruimte); }

.fotoblok__beeld {
  border-radius: var(--rond);
  overflow: hidden;
  background: var(--creme-diep);
}
.fotoblok__beeld img { width: 100%; }

/* Enkele blokken krijgen de boogvorm, als knipoog naar de rest. */
.fotoblok__beeld--boog { border-radius: 999px 999px var(--rond) var(--rond); }

/* ---------- Kleiner fotoblok met een kleurvlak erachter ----------
   Voor het welkomblok: een smallere foto met een paarsrood vlak dat
   er schuin achter uitsteekt, net als bij de opening. De foto wordt
   iets minder hoog getoond (4 op 5 in plaats van 2 op 3), zodat het
   blok minder ruimte inneemt.

   Wil je het vlak een andere kleur? Verander var(--terracotta)
   hieronder, bijvoorbeeld in var(--terracotta-licht) voor het roze. */

.fotoblok--klein .fotoblok__beeld {
  position: relative;
  overflow: visible;
  background: none;
  border-radius: 0;
  width: min(72%, 17rem);
  justify-self: center;
}
.fotoblok--klein .fotoblok__beeld::before {
  content: '';
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  background: var(--terracotta);
  border-radius: var(--rond);
}
/* De wandelfoto is staand en wordt hier tot 4 op 5 bijgesneden;
   met deze waarde sta je goed in beeld. */
#contact .fotoblok__beeld img { object-position: center 26%; }

.fotoblok--klein .fotoblok__beeld img {
  position: relative;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  border-radius: var(--rond);
}

/* ---------- Roze streep onder een kop ----------
   Hetzelfde streepje als onder je naam in de opening. Zet de klasse
   kop-streep op een <h2> en het verschijnt vanzelf, precies zo breed
   als de tekst. */

.kop-streep {
  position: relative;
  z-index: 0;
  display: inline-block;
}
.kop-streep::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--terracotta-licht);
}

/* ---------- Instagramfeed op een paarsrood vlak ----------
   Het vlak zelf is paarsrood, met het roze kader er schuin achter,
   net als bij de kaarten van het aanbod. */

.feed--insta {
  background: var(--terracotta);
  color: var(--tekst-licht);
  border: 0;
  border-radius: var(--rond);
  box-shadow: .7rem .7rem 0 var(--terracotta-licht);
  padding: 1.25rem;
}
.feed--insta .wacht,
.feed--insta .nog-leeg { color: rgba(248, 247, 243, .8); }
/* Een ervaring in een roze vak, met een aanhalingsteken linksboven
   en rechtsonder. De tekst staat in index.html; hier staat alleen
   de vormgeving.

   Het vlak is bewust bleekroze: op het volle roze (--terracotta-licht)
   is een lap tekst van deze lengte vermoeiend om te lezen. Wil je het
   toch voller? Zet background hieronder op var(--terracotta-licht). */
.citaat-kaart {
  position: relative;
  margin: 0;
  padding: 3rem 1.75rem 1.75rem;
  background: var(--roze-zacht);
  color: var(--inkt);
  border-radius: var(--rond);
}
.citaat-kaart::before,
.citaat-kaart::after {
  position: absolute;
  font-family: var(--font-kop);
  font-size: 5rem;
  line-height: 1;
  color: var(--terracotta-licht);
  pointer-events: none;
}
.citaat-kaart::before {
  content: '\201C';
  top: .6rem;
  left: 1.4rem;
}
/* Het sluitteken hangt met opzet onder de rand: bij een aanhalings-
   teken staat de inkt bovenin de regel, dus zo komt het onderin het
   vak uit. */
.citaat-kaart::after {
  content: '\201D';
  right: 1.4rem;
  bottom: -3.2rem;
}
/* Het sluitteken hangt onder de kaart uit. Staat de kaart in een
   kolom met tekst eronder, dan is daar ruimte voor nodig. */
.twee-kolommen .citaat-kaart { margin-bottom: 3.5rem; }

.citaat-kaart blockquote { margin: 0; }
.citaat-kaart p { font-size: .95rem; line-height: 1.75; }
.citaat-kaart figcaption {
  margin-top: 1.4rem;
  padding-right: 3.5rem;   /* houdt het sluitteken vrij */
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terracotta-diep);
}
/* De reviewfeed staat in een smalle kolom; geen extra ruimte eromheen. */
.fotoblok__tekst .feed { margin: 1.5rem 0 0; }

/* De melding 'nog niet gekoppeld' hoort links uit te lijnen met de
   tekst ernaast, niet gecentreerd zoals over de volle breedte. */
.fotoblok__tekst .wacht,
.fotoblok__tekst .nog-leeg {
  justify-content: flex-start;
  text-align: left;
  min-height: 6rem;
}

.fotoblok__tekst h2 { margin-bottom: .55em; }

/* ---------- Lopende tekstband ----------
   Een smalle paarsrode band waarin de zin langzaam voorbij schuift.
   De zin staat twee keer in index.html; die kopie zorgt dat de band
   naadloos doorloopt. Te snel of te langzaam? Verander de 70s.
   Zet iemand "minder beweging" aan op zijn toestel, dan staat de
   band gewoon stil — zie onderaan dit bestand. */

.loopband {
  background: var(--terracotta);
  color: var(--creme);
  padding: .95rem 0;
  overflow: hidden;
  font-family: var(--font-kop);
  font-style: italic;
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  letter-spacing: .02em;
}
/* De duur staat op --loop-duur, zodat een pagina met een langere
   zin hem hoger kan zetten. Hoe langer de tekst, hoe hoger dat getal
   moet zijn om even rustig voorbij te blijven lopen. */
.loopband__spoor {
  display: flex;
  width: max-content;
  animation: loopband var(--loop-duur, 70s) linear infinite;
}
.loopband__spoor span { white-space: nowrap; }

@keyframes loopband { to { transform: translateX(-50%); } }
/* ---------- Kleurvlak achter een foto in een fotoblok ----------
   Zet --vlak op een .fotoblok en de foto krijgt een gekleurd vlak dat
   er schuin achter uitsteekt, zoals bij de opening van de homepage.
   De foto houdt zijn eigen verhouding, dus er wordt niets afgesneden.

   Met --vlak-roze erbij wordt het vlak roze in plaats van paarsrood.
   Bij --omgekeerd (foto rechts) steekt het vlak naar links uit. */

.fotoblok--vlak .fotoblok__beeld {
  position: relative;
  overflow: visible;
  background: none;
  border-radius: 0;
}
.fotoblok--vlak .fotoblok__beeld img {
  position: relative;
  border-radius: var(--rond);
}
.fotoblok--vlak .fotoblok__beeld::before {
  content: '';
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  background: var(--terracotta);
  border-radius: var(--rond);
}
.fotoblok--vlak.fotoblok--omgekeerd .fotoblok__beeld::before {
  inset: 1.25rem 1.25rem -1.25rem -1.25rem;
}
.fotoblok--vlak-roze .fotoblok__beeld::before { background: var(--terracotta-licht); }

/* ---------- Twee kolommen naast elkaar ----------
   Voor twee lijstjes of tekstblokken die bij elkaar horen. Op een
   telefoon staan ze onder elkaar. */

.twee-kolommen {
  display: grid;
  gap: 2rem;
  align-items: start;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}
.twee-kolommen h3 { margin-bottom: .4em; }
/* ---------- De stappen van een traject ----------
   Een kaart met daarin een tijdlijn: genummerde bolletjes met een
   lijntje ertussen, want hier gaat het echt om een volgorde. Gaat het
   niet om een volgorde, gebruik dan .punten.

   Een stap erbij? Kopieer in de pagina een heel <li>; de nummers en
   het lijntje lopen vanzelf mee. */

/* ---------- Uitspraak ----------
   Eén zin die eruit mag springen: het lettertype van de koppen,
   schuin, in het paarsrood, met een grote roze krul ervoor. Bewust
   zonder vlak eromheen, zodat hij licht blijft naast de kaders.

   Staat de zin in een kolom naast een kader, dan is de ruimte
   eronder al geregeld door dat kader. */

.uitspraak {
  position: relative;
  margin: .5rem 0 0;
  padding-left: 2.75rem;
  font-family: var(--font-kop);
  font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--terracotta);
}
.uitspraak::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: -.3em;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--terracotta-licht);
  pointer-events: none;
}

/* ---------- Losse foto met een kleurvlak erachter ----------
   Dezelfde look als de foto's in een fotoblok, maar dan als los
   blokje dat je overal kunt neerzetten, bijvoorbeeld in een kolom
   naast tekst. Het vlak steekt rechtsonder schuin uit.

   Foto groter of kleiner? Verander de 16rem hieronder.
   Liever het zachte roze? Zet er --roze bij in de pagina. */

.foto-vlak {
  position: relative;
  width: min(100%, 16rem);
  margin: 0 auto;
}
.foto-vlak::before {
  content: '';
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  background: var(--terracotta);
  border-radius: var(--rond);
}
.foto-vlak img {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--rond);
}
.foto-vlak--roze::before { background: var(--terracotta-licht); }

.stappen-kaart {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding: clamp(1.75rem, 5vw, 2.75rem);
  background: var(--wit);
  border: 1px solid var(--terracotta-licht);
  border-radius: var(--rond);
  box-shadow: .7rem .7rem 0 var(--terracotta-licht);
}
.stappen-kaart h3 { margin-bottom: 0; }

.stappen {
  list-style: none;
  counter-reset: stap;
  margin: 2rem 0 0;
  padding: 0;
}
.stappen li {
  counter-increment: stap;
  position: relative;
  padding: 0 0 1.9rem 3.9rem;
  font-size: .9875rem;
}
.stappen li:last-child { padding-bottom: 0; }

/* Het nummer. */
.stappen li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--creme);
  font-family: var(--font-kop);
  font-size: 1rem;
  font-weight: 600;
}
/* Het lijntje naar de volgende stap. */
.stappen li::after {
  content: '';
  position: absolute;
  left: calc(1.2rem - 1px);
  top: 2.9rem;
  bottom: .3rem;
  width: 2px;
  border-radius: 2px;
  background: var(--terracotta-licht);
}
.stappen li:last-child::after { display: none; }

.stappen b {
  display: block;
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--inkt);
  margin-bottom: .3rem;
  padding-top: .3rem;
}

/* ---------- Sprankelstof ---------- */

/* Het sterrenmannetje staat naast de tekst, niet erboven. */
.sprankel-rij {
  display: grid;
  gap: 1.75rem;
  justify-items: center;
  text-align: center;
}
.mascotte { width: min(48vw, 11rem); margin: 0; }
.mascotte .boog { border: 5px solid rgba(255, 244, 232, .25); }

/* Losse sterretjes als versiering. Puur sfeer, dus verborgen voor
   schermlezers. Wil je er een weg? Haal de <svg>-regel uit de pagina. */
.ster {
  position: absolute;
  fill: var(--goud);
  pointer-events: none;
}
.ster--a { width: 2.5rem;  height: 2.5rem;  top: 2.5rem;  left: 5%;   opacity: .5; }
.ster--b { width: 1.15rem; height: 1.15rem; top: 6.5rem;  left: 12%;  opacity: .75; }
.ster--c { width: 3.25rem; height: 3.25rem; bottom: 14%;  right: 4%;  opacity: .3; }
.ster--d { width: 1.4rem;  height: 1.4rem;  bottom: 26%;  right: 11%; opacity: .65; }
.ster--e { width: 1.6rem;  height: 1.6rem;  top: 30%;     right: 7%;  opacity: .45; }
.ster--f { width: .85rem;  height: .85rem;  top: 12%;     left: 22%;  opacity: .7; }
.ster--g { width: 2rem;    height: 2rem;    top: 46%;     left: 3%;   opacity: .35; }
.ster--h { width: 1rem;    height: 1rem;    bottom: 8%;   left: 18%;  opacity: .6; }
.ster--i { width: 1.9rem;  height: 1.9rem;  top: 4%;      right: 22%; opacity: .3; }
.ster--j { width: .8rem;   height: .8rem;   bottom: 34%;  left: 7%;   opacity: .75; }
.ster--k { width: 1.3rem;  height: 1.3rem;  bottom: 5%;   right: 20%; opacity: .5; }
/* ---------- Speler die pas laadt na een klik ----------
   De Spotify-speler zet een cookie. Daarom staat er eerst een knop:
   pas als een bezoeker daarop klikt, wordt de speler opgehaald. Werkt
   JavaScript niet, dan is diezelfde knop een gewone link naar Spotify.
   Zie js/main.js, hoofdstuk 5. */

.speler {
  margin-top: 2rem;
  border-radius: var(--rond);
  overflow: hidden;
  background: rgba(255, 244, 232, .1);
}
.speler iframe { display: block; border: 0; width: 100%; }

.speler-vraag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  padding: 2.25rem 1.5rem;
}
.speler-vraag p {
  max-width: 34rem;
  font-size: .9375rem;
  margin: 0;
}
/* ---------- Fotoband over de volle breedte ---------- */

.fotoband {
  position: relative;
  height: clamp(13rem, 40vw, 24rem);
  overflow: hidden;
  background: var(--creme-diep);
}
.fotoband img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* Bij een staande foto valt de uitsnede anders. Met deze variant
   schuift de band omhoog, zodat een gezicht er heel op staat. */
.fotoband--hoog img { object-position: 28% 22%; }

/* Variant met de uitspraak aan één kant. De donkere waas loopt van
   links naar rechts weg, zodat de foto zelf ook te zien blijft.

   Staat je gezicht niet goed in beeld? Verander de 36% hieronder:
   lager getal is hoger in de foto, hoger getal is lager. */
.fotoband--quote img { object-position: center 36%; }

.fotoband--quote .fotoband__tekst {
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  background: linear-gradient(
    180deg,
    rgba(30, 24, 16, .10) 0%,
    rgba(30, 24, 16, .72) 58%,
    rgba(30, 24, 16, .88) 100%);
}
.fotoband--quote .fotoband__tekst p { max-width: 30rem; }

.fotoband__tekst {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  background: rgba(30, 24, 16, .58);
  color: var(--tekst-licht);
}
.fotoband__tekst p {
  font-family: var(--font-kop);
  font-style: italic;
  font-size: clamp(1.15rem, 3.2vw, 1.7rem);
  line-height: 1.45;
  max-width: 42rem;
  margin: 0;
}

/* ---------- Kaart met een foto erboven ---------- */

.kaart--beeld { padding: 0; overflow: hidden; }
.kaart--beeld .kaart__beeld {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--creme-diep);
}
.kaart--beeld .kaart__beeld img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.kaart--beeld .kaart__binnen {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ---------- Reviewblok ----------
   De kaartjes zelf komen van je reviewdienst en hebben hun eigen
   vormgeving. Zet die dienst een gewoon stukje HTML in de pagina,
   dan trekken de regels hieronder de letters naar de jouwe. Zet hij
   er een iframe neer, dan kan dat niet en blijft alleen deze band
   van ons. */

.feed--reviews { font-family: var(--font-tekst); }
.feed--reviews :is(p, span, div, a) { font-family: inherit; }

/* ---------- Zachte opkomst bij scrollen (aangezet vanuit js/main.js) ---------- */

.js .komt-op {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .komt-op.is-zichtbaar { opacity: 1; transform: none; }

/* ============================================================
   Tablet
   ============================================================ */

@media (min-width: 600px) {
  .twee-kolommen { grid-template-columns: 1fr 1fr; gap: 3rem; }

  /* Het sterrenmannetje naast de tekst in plaats van erboven. */
  .sprankel-rij {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2.25rem;
    justify-items: start;
    text-align: left;
  }

  .fotoband--quote .fotoband__tekst {
    align-items: center;
    padding-inline: clamp(1.5rem, 6vw, 5rem);
    background: linear-gradient(
      90deg,
      rgba(30, 24, 16, .86) 0%,
      rgba(30, 24, 16, .76) 42%,
      rgba(30, 24, 16, .18) 78%,
      rgba(30, 24, 16, 0) 100%);
  }

  .kaarten { grid-template-columns: repeat(2, 1fr); }
  .feiten { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .contact-lijst { flex-direction: row; justify-content: center; gap: 2rem; }
  .site-footer__inner { flex-direction: row; justify-content: space-between; gap: 3rem; }
}

/* ============================================================
   Desktop
   ============================================================ */

@media (min-width: 960px) {
  /* Menu op een breed scherm: drie links, je naam, twee links. */
  .nav-knop,
  .nav-balans { display: none; }

  .hoofdnav {
    flex-wrap: nowrap;
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }
  .hoofdnav__zij {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
    flex: 1 1 0;
    gap: clamp(1rem, 2.2vw, 1.9rem);
  }
  .hoofdnav__zij--links  { justify-content: flex-end;   order: 0; }
  .hoofdnav__zij--rechts { justify-content: flex-start; order: 2; }

  /* Het lijstje onder Aanbod klapt uit bij aanwijzen of tabben. De
     extra ruimte onder het menu-item zorgt dat je er met de muis
     naartoe kunt zonder dat het lijstje wegvalt. */
  .hoofdnav__uit { padding-bottom: 1rem; margin-bottom: -1rem; }

  .hoofdnav__sub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 11rem;
    padding: .5rem 0;
    background: var(--terracotta-diep);
    border-radius: var(--rond);
    box-shadow: 0 14px 32px -14px rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
    z-index: 60;
  }
  .hoofdnav__uit:hover .hoofdnav__sub,
  .hoofdnav__uit:focus-within .hoofdnav__sub { opacity: 1; visibility: visible; }

  .hoofdnav__sub a {
    padding: .5rem 1.2rem;
    font-size: .8rem;
    opacity: 1;
    white-space: nowrap;
  }
  .hoofdnav__sub a::before { display: none; }
  /* Blijft het menu open staan terwijl het venster breder wordt, dan
     mogen de uitklapregels van de telefoon niet blijven hangen. */
  .hoofdnav.is-open .hoofdnav__zij {
    margin: 0;
    width: auto;
    padding: 0;
    border-top: 0;
  }
  .merk { margin-inline: 0; }
  .hoofdnav__zij a { padding: 0; }


  .hero__inner {
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2.5rem, 5vw, 4rem);
  }
  .hero__beeld {
    justify-self: end;
    width: min(100%, 20rem);
    margin-right: 1.5rem;   /* ruimte voor het rode vlak erachter */
  }

  .kaarten { grid-template-columns: repeat(3, 1fr); }

  /* Twee kaarten: naast elkaar en samen gecentreerd, zodat er
     geen gat overblijft waar een derde kaart zou staan. */
  .kaarten--twee {
    grid-template-columns: repeat(2, 1fr);
    max-width: 48rem;
    margin-inline: auto;
  }

  .fotoblok {
    grid-template-columns: 5fr 6fr;
    gap: 3.5rem;
  }
  /* Om en om: bij het omgekeerde blok staat de foto rechts. De
     kolommen wisselen mee, zodat de foto altijd de smalste is. */
  .fotoblok--omgekeerd { grid-template-columns: 6fr 5fr; }
  .fotoblok--omgekeerd .fotoblok__beeld { order: 2; }

  /* Het welkomblok: smallere foto, meer ruimte voor de tekst. */
  .fotoblok--klein { grid-template-columns: 4fr 7fr; }
  /* Regels niet te lang laten worden; dat leest prettiger. */
  .fotoblok--klein .fotoblok__tekst { max-width: 36rem; }
  .fotoblok--klein .fotoblok__beeld { width: min(100%, 20rem); justify-self: start; margin-left: 1.25rem; }

  /* Omgekeerd: de foto staat rechts, dus wisselen de kolommen om. */
  .fotoblok--klein.fotoblok--omgekeerd { grid-template-columns: 7fr 4fr; }
  .fotoblok--klein.fotoblok--omgekeerd .fotoblok__beeld {
    justify-self: end;
    margin-left: 0;
    margin-right: 1.25rem;
  }
}

/* ============================================================
   Minder beweging: alle animaties uit voor wie dat instelt.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .knop:hover { transform: none; }
  .js .komt-op { opacity: 1; transform: none; }
  .loopband__spoor { animation: none; transform: none; }
}