/* ============================================================
   OPMAAK VAN DE WEBSITE — CISKESTUDIOS
   ------------------------------------------------------------
   Bovenaan staan de kleuren en lettertypes (de "huisstijl").
   Verander je hier een kleur, dan verandert die overal op de site.
   Daaronder volgt de opmaak per onderdeel, in dezelfde volgorde
   als op de pagina: menu, hero, diensten, over mij, werkwijze,
   luisteren, contact, voettekst, pop-up, cookiebanner.
   Helemaal onderaan staat de opmaak voor kleine schermen (mobiel).
   ============================================================ */

:root {
  /* ---- Kleuren (huisstijl) ---- */
  --room:       #FCF4E8;   /* achtergrond */
  --zand:       #EDD5BF;   /* lichte banden */
  --terracotta: #9B3926;   /* accent, prijzen, contactblok */
  --salie:      #697058;   /* subtiele accenten, actieve menu-lijn */
  --karamel:    #B4855C;   /* paneel van de speler */
  --inkt:       #1F1F1F;   /* tekst */

  /* ---- Lettertypes ----
     Inter voor bijna alles (koppen, tekst, menu, knoppen).
     Playfair Display voor de tagline in de hero, de naam bij "Over mij" en de kop van "Werkwijze".
     La Belle Aurore voor het handgeschreven regeltje bij de speler. */
  --font-kop:        'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-tekst:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-handschrift:'La Belle Aurore', 'Segoe Script', 'Bradley Hand', cursive;

  /* ---- Maten ---- */
  --wrap: 1240px;                          /* maximale breedte van de inhoud */
  --gutter: clamp(20px, 4vw, 56px);        /* ruimte links en rechts */
  --header-h: 72px;                        /* hoogte van de menubalk */
  --radius: 6px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-tekst);
  font-size: 16px;
  line-height: 1.6;
  color: var(--inkt);
  background: var(--room);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }

h1, h2 {
  font-family: var(--font-tekst);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

:focus-visible {
  outline: 2px solid var(--salie);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Lopende tekst (alinea's uit teksten.js) */
.alineas p {
  margin: 0 0 1.1em;
  font-size: 16.5px;
  line-height: 1.7;
  max-width: 36em;
}
.alineas p:last-child { margin-bottom: 0; }

/* Naam bij "Over mij" (Playfair Display) */
.naam {
  font-family: var(--font-kop);
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 48px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 22px;
}

/* Link die op een tekstregel lijkt (voettekst, cookiebanner) */
.tekst-knop {
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(31, 31, 31, 0.4);
}
.tekst-knop:hover { text-decoration-color: currentColor; }

/* Rode tekstlink (bijv. naar de algemene voorwaarden in de FAQ) */
.link-rood {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(155, 57, 38, 0.4);
}
.link-rood:hover { text-decoration-color: currentColor; }

/* "Direct naar de inhoud" voor toetsenbordgebruikers */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--inkt);
  color: var(--room);
  border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

/* ============================================================
   1. MENU EN LOGO
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(252, 244, 232, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow 0.25s ease;
}
.site-header.is-gescrold { box-shadow: 0 1px 0 rgba(31, 31, 31, 0.08); }

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo { position: relative; z-index: 2; display: inline-flex; }
.logo img { height: 20px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav-lijst {
  display: flex;
  gap: 32px;
}
.nav-lijst a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  padding-block: 6px;
}
.nav-lijst a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--salie);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-lijst a:hover::after,
.nav-lijst a.is-actief::after { transform: scaleX(1); }

/* Taalwissel NL | EN */
.taal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.taal-knop {
  background: none;
  border: 0;
  padding: 4px 2px;
  opacity: 0.45;
  transition: opacity 0.2s ease;
}
.taal-knop:hover { opacity: 0.8; }
.taal-knop[aria-pressed="true"] { opacity: 1; }
.taal-streep { opacity: 0.35; }

/* Hamburger (alleen zichtbaar op kleine schermen) */
.menu-knop {
  display: none;
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  border-radius: 50%;
}
.menu-knop-streep,
.menu-knop-streep::before,
.menu-knop-streep::after {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: var(--inkt);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.menu-knop-streep { top: 21px; }
.menu-knop-streep::before { content: ""; left: 0; top: -7px; }
.menu-knop-streep::after  { content: ""; left: 0; top: 7px; }
.menu-knop[aria-expanded="true"] .menu-knop-streep { background: transparent; }
.menu-knop[aria-expanded="true"] .menu-knop-streep::before { transform: translateY(7px) rotate(45deg); }
.menu-knop[aria-expanded="true"] .menu-knop-streep::after  { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   2. HOOFDFOTO (HERO)
   ============================================================ */
.hero {
  min-height: calc(100svh - var(--header-h));
  display: flex;
}
.hero-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: end;
  gap: 24px;
}
.hero-tekst {
  align-self: center;
  padding-block: 64px 96px;
}
/* Tagline in drie regels, Playfair Display; verder niets in de hero. */
.hero h1 {
  font-family: var(--font-kop);
  font-size: clamp(44px, 5.2vw, 74px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.hero-foto {
  justify-self: end;
  margin-right: calc(-1 * var(--gutter));
  line-height: 0;
}
.hero-foto img {
  /* schaalt mee met de schermbreedte, maar nooit hoger dan het scherm toelaat */
  height: clamp(560px, 53vw, min(80vh, 1100px));
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom right;
}

/* ============================================================
   3. DIENSTEN (vier kaartjes)
   ============================================================ */
.diensten {
  background: var(--zand);
  padding-block: 52px;
}
.kaarten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.kaart {
  display: flex;
  flex-direction: column;
  background: var(--room);
  border-radius: var(--radius);
  padding: 26px 24px 20px;
}
.kaart-kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.kaart-titel {
  font-family: var(--font-tekst);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.kaart-chevron { display: none; }   /* alleen op mobiel (zie onderaan) */
.ornament {
  display: block;
  width: 26px;
  height: 2px;
  margin: 10px 0 14px;
  background: repeating-linear-gradient(to right, var(--salie) 0 10px, transparent 10px 16px);
}
.kaart-tekst {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(31, 31, 31, 0.85);
}
.kaart-prijs {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.kaart-prijs .pijl {
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.kaart-prijs:hover .pijl { transform: translateX(5px); }

/* Oproep onder de kaartjes */
.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid rgba(31, 31, 31, 0.14);
}
.cta p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  max-width: 40em;
}

/* ============================================================
   4 + 5. OVER MIJ EN WERKWIJZE (foto naast tekst)
   ============================================================ */
.helften {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.helft-foto { line-height: 0; }
.helft-foto img {
  width: 100%;
  max-height: 92vh;
  object-fit: cover;
}
/* Tekst naast een foto staat op hetzelfde raster als het logo en de kaartjes:
   het binnenblok is maximaal een halve "wrap" breed en schuift tegen de wrap-rand aan. */
.helft-tekst {
  padding-block: clamp(48px, 7vw, 112px);
}
.helft-inner {
  max-width: calc(var(--wrap) / 2);
  padding-inline: var(--gutter);
}
.helft-links .helft-inner  { margin-left: auto;  padding-right: clamp(32px, 5vw, 72px); }
.helft-rechts .helft-inner { margin-right: auto; padding-left: clamp(32px, 5vw, 72px); }
.helft-tekst h2 {
  font-size: clamp(30px, 3.4vw, 44px);
  margin-bottom: 26px;
  max-width: 14em;
}

/* Over mij */
.bio-lead {
  margin: -8px 0 20px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.bio-band {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(31, 31, 31, 0.75);
  max-width: 36em;
}
.bio-band a { text-decoration: underline; text-underline-offset: 3px; }
.bio-band a:hover { color: var(--terracotta); }

/* Werkwijze: twee getrapt uitgesneden png's die precies op elkaar aansluiten.
   Beide foto's op dezelfde schaal; hun rechte snijrand staat op de middellijn van de pagina.
   Apparatuur (2181 px breed, snede op x=160, opaak 2021 px) vult de rechterhelft;
   taperecorder (2180 px breed, snede op x=2000) vult de linkerhelft.
   De getallen hieronder komen uit de png's zelf — niet afronden. */
#werkwijze-kop {
  font-family: var(--font-kop);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.werkwijze { overflow: hidden; }
.werkwijze-rij { grid-template-columns: 1fr 1fr; }
.werkwijze-rij .helft-foto img { max-height: none; max-width: none; object-fit: unset; }
.werkwijze-rij-1 { align-items: end; }
.werkwijze-rij-1 .helft-tekst { align-self: start; }            /* kop bovenaan, zoals de schets */
.werkwijze-rij-1 .helft-foto img {
  width: calc(100% * 2181 / 2021);
  margin-left: calc(-100% * 160 / 2021);
}
.werkwijze-rij-2 { align-items: start; }
.werkwijze-rij-2 .helft-tekst { align-self: start; padding-top: clamp(40px, 5vw, 72px); }   /* tekst bovenaan, handtekening eronder */
/* Handtekening (salie-groen) onder de tekst bij Werkwijze; als ondertekening rechts uitgelijnd */
.werkwijze-tekst-2 .handtekening {
  display: block;
  width: 62%;
  margin: 44px 0 0 auto;
}
.werkwijze-rij-2 .helft-foto img {
  width: calc(100% * 2180 / 2000);
}

/* ============================================================
   6. LUISTEREN — VOOR & NA (speler)
   ============================================================ */
/* Donkere studiofoto over de volle breedte; links blijft de foto zichtbaar,
   rechts staat de tekst met de speler als half-doorzichtig "glazen" paneel. */
.luisteren {
  position: relative;
  background: var(--inkt);
  color: var(--room);
  overflow: hidden;
}
.luisteren-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 55%;
}
.luisteren-schaduw {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(31, 31, 31, 0.2) 0%, rgba(31, 31, 31, 0.3) 32%, rgba(31, 31, 31, 0.84) 56%, rgba(31, 31, 31, 0.9) 100%),
    linear-gradient(180deg, rgba(31, 31, 31, 0.3), rgba(31, 31, 31, 0.1) 30%, rgba(31, 31, 31, 0.3));
}
.luisteren-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  align-items: center;
  min-height: min(70vh, 640px);
  padding-block: clamp(48px, 6vw, 80px);
}
.luisteren-blok { grid-column: 2; }
.luisteren-blok h2 {
  font-size: clamp(34px, 4vw, 54px);
  margin-bottom: 14px;
}
.luisteren-tekst {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 32em;
  color: rgba(252, 244, 232, 0.85);
}
.luisteren-hint {
  margin: 18px 0 26px;
  font-family: var(--font-handschrift);
  font-size: 28px;
  line-height: 1.2;
  color: var(--zand);
}
.luisteren-hint:empty { display: none; }

.speler {
  background: rgba(252, 244, 232, 0.10);
  border: 1px solid rgba(252, 244, 232, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--room);
  border-radius: 16px;
  padding: 24px 28px 20px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.speler-boven {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.speler-play {
  flex: none;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: var(--room);
  color: var(--inkt);
  display: grid;
  place-items: center;
  transition: transform 0.15s ease, background 0.2s ease;
}
.speler-play:hover { background: #fff; transform: scale(1.04); }
.speler-play:focus-visible { outline-color: var(--room); }
.speler-play:active { transform: scale(0.97); }
.speler-play svg { width: 24px; height: 24px; fill: currentColor; }
.speler-play .icoon-pauze { display: none; }
.speler.is-afspelen .icoon-play { display: none; }
.speler.is-afspelen .icoon-pauze { display: block; }

/* Schakelaar DEMO | MASTER */
.speler-schakelaar {
  display: inline-flex;
  padding: 4px;
  border: 1px solid rgba(252, 244, 232, 0.55);
  border-radius: 999px;
}
.schakel {
  border: 0;
  background: transparent;
  color: var(--room);
  padding: 9px 22px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}
.schakel:hover { background: rgba(252, 244, 232, 0.14); }
.schakel.is-actief {
  background: var(--room);
  color: var(--inkt);
}

/* Golfvorm */
.speler-golf {
  position: relative;
  height: 96px;
  margin: 20px 0 12px;
  cursor: pointer;
  border-radius: 4px;
  touch-action: none;
}
.speler-golf canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.speler-onder {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.speler-tijd { font-variant-numeric: tabular-nums; }
.speler-status { opacity: 0.85; font-style: italic; }

/* ============================================================
   6a. WERK (releases) EN QUOTES — verborgen zolang leeg
   ============================================================ */
.werk { padding-block: clamp(56px, 7vw, 96px); background: var(--zand); }
.werk-kop { margin-bottom: 32px; }
.werk-kop h2 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 10px; }
.werk-kop p { margin: 0; font-size: 16px; color: rgba(31, 31, 31, 0.75); max-width: 36em; }
.werk-lijst {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.release iframe { display: block; border-radius: 12px; }
.release-info { margin: 10px 4px 0; font-size: 14px; color: rgba(31, 31, 31, 0.8); }
.release-info strong { font-weight: 600; color: var(--inkt); }
.release-info span { display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--salie); margin-top: 2px; }

.quotes { padding-block: clamp(56px, 7vw, 96px); }
.quotes-kop { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 32px; }
.quotes-lijst {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px 48px;
}
.quote { margin: 0; }
.quote p {
  margin: 0 0 12px;
  font-family: var(--font-kop);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.4;
}
.quote footer { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--salie); }

/* ============================================================
   6b. VEELGESTELDE VRAGEN
   ============================================================ */
.faq { padding-block: clamp(56px, 7vw, 96px); }
.faq-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.faq-kop h2 {
  font-size: clamp(30px, 3.4vw, 44px);
  margin-bottom: 14px;
}
.faq-kop p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(31, 31, 31, 0.75);
  max-width: 28em;
}
.faq-item {
  border-top: 1px solid rgba(31, 31, 31, 0.15);
}
.faq-item:last-child { border-bottom: 1px solid rgba(31, 31, 31, 0.15); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i {
  flex: none;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(31, 31, 31, 0.3);
}
.faq-item summary i::before,
.faq-item summary i::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 1.5px;
  background: var(--inkt);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}
.faq-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item summary:hover { color: var(--terracotta); }
.faq-antwoord { padding: 0 44px 20px 0; }
.faq-antwoord p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(31, 31, 31, 0.8);
  max-width: 40em;
}

/* ============================================================
   7. CONTACT
   ============================================================ */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: min(78vh, 760px);
}
.contact-foto { position: relative; }
.contact-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-blok {
  background: var(--terracotta);
  color: var(--room);
  display: grid;
  align-items: center;
  padding: clamp(56px, 8vw, 120px) 0;
}
/* Zelfde raster als de andere rechter tekstkolommen (bio, werkwijze rij 2) */
.contact-inhoud {
  max-width: calc(var(--wrap) / 2);
  padding-inline: clamp(32px, 5vw, 72px) var(--gutter);
  box-sizing: border-box;
}
.contact-inhoud > * { max-width: 460px; }
/* E-mailadres als tekst + kopieerknop */
.contact-adres {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 24px 0 0 !important;
  font-size: 16.5px;
}
.contact-adres a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(252, 244, 232, 0.45);
  overflow-wrap: anywhere;
}
.contact-adres a:hover { text-decoration-color: currentColor; }
.kopieer {
  background: transparent;
  border: 1px solid rgba(252, 244, 232, 0.5);
  color: var(--room);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}
.kopieer:hover { background: rgba(252, 244, 232, 0.15); }
.kopieer.is-gekopieerd { background: var(--room); color: var(--terracotta); border-color: var(--room); }
.contact-noot {
  margin: 14px 0 0 !important;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(252, 244, 232, 0.8);
}
.contact-inhoud h2 {
  font-size: clamp(36px, 4.2vw, 54px);
  margin-bottom: 20px;
}
.contact-inhoud p {
  margin: 0 0 32px;
  font-size: 16.5px;
  line-height: 1.65;
}
.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.knop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: var(--room);
  color: var(--inkt);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.2s ease, transform 0.15s ease;
}
.knop:hover { background: var(--zand); transform: translateY(-1px); }
.knop svg { width: 18px; height: 18px; fill: currentColor; }
.knop-klein { padding: 10px 18px; font-size: 12px; border-color: rgba(31, 31, 31, 0.3); }
.knop-vol { background: var(--inkt); color: var(--room); }
.knop-vol:hover { background: #000; }

/* ============================================================
   8. VOETTEKST
   ============================================================ */
.site-footer { padding-block: 44px 28px; }
.footer-boven {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.footer-lijst {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 15px;
  font-weight: 500;
}
.footer-lijst a:hover { color: var(--terracotta); }
.site-footer .logo img { height: 18px; }
.footer-onder {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(31, 31, 31, 0.12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 13px;
  color: rgba(31, 31, 31, 0.72);
}
.footer-onder p { margin: 0; }
.footer-links { display: flex; gap: 10px; }

/* ============================================================
   POP-UP (algemene voorwaarden / privacyverklaring)
   ============================================================ */
.popup {
  width: min(780px, calc(100vw - 32px));
  max-height: min(86vh, 920px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--room);
  color: var(--inkt);
  box-shadow: 0 30px 80px -20px rgba(31, 31, 31, 0.5);
  overflow: auto;
}
.popup::backdrop { background: rgba(31, 31, 31, 0.6); }
.popup-kop {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 28px 16px;
  background: var(--room);
  border-bottom: 1px solid rgba(31, 31, 31, 0.12);
}
.popup-kop h2 { font-size: clamp(22px, 3vw, 28px); }
.popup-sluit {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--zand);
  display: grid;
  place-items: center;
}
.popup-sluit:hover { background: var(--karamel); color: var(--room); }
.popup-sluit svg { width: 18px; height: 18px; fill: currentColor; }
.popup-inhoud {
  padding: 8px 28px 36px;
  font-size: 15px;
  line-height: 1.65;
}
.popup-inhoud h3 {
  margin: 30px 0 10px;
  font-family: var(--font-tekst);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.popup-inhoud p { margin: 0 0 12px; }
.popup-inhoud ol, .popup-inhoud ul { margin: 0 0 12px; padding-left: 22px; }
.popup-inhoud ol { list-style: decimal; }
.popup-inhoud ul { list-style: disc; }
.popup-inhoud li { margin: 5px 0; }
.popup-inhoud li ul { margin: 6px 0 4px; }
.popup-inhoud hr { border: 0; border-top: 1px solid rgba(31, 31, 31, 0.12); margin: 28px 0 18px; }
.popup-datum { font-size: 13px; color: rgba(31, 31, 31, 0.6); }
.popup-noot {
  font-size: 13.5px;
  font-style: italic;
  padding: 10px 14px;
  background: var(--zand);
  border-radius: var(--radius);
}
.popup-adres { line-height: 1.6; }

/* ============================================================
   COOKIEBANNER
   ============================================================ */
.cookiebanner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 150;
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 20px;
  background: var(--room);
  border: 1px solid rgba(31, 31, 31, 0.15);
  border-radius: 10px;
  box-shadow: 0 20px 50px -20px rgba(31, 31, 31, 0.45);
  font-size: 14px;
  line-height: 1.5;
}
.cookiebanner p { margin: 0; flex: 1 1 320px; }
.cookiebanner-knoppen { display: flex; gap: 10px; }

/* ============================================================
   KLEINE SCHERMEN (tablet en mobiel)
   ============================================================ */
@media (max-width: 1000px) {
  .kaarten { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }

  /* Menu wordt een hamburger met een volledig scherm */
  .menu-knop { display: block; }
  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    padding-top: var(--header-h);
    background: var(--room);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  body.menu-open .nav { visibility: visible; opacity: 1; }
  body.menu-open { overflow: hidden; }
  .nav-lijst {
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }
  .nav-lijst a {
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .taal { font-size: 15px; }

  /* Hero: tekst boven, foto eronder */
  .hero { min-height: 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 0; }
  .hero-tekst { padding-block: 48px 32px; }
  .werkwijze-tekst-2 .handtekening { width: 70%; margin-top: 32px; }
  .hero-foto { justify-self: center; margin-right: 0; }
  .hero-foto img { height: min(60vh, 520px); }

  /* Foto en tekst onder elkaar, foto altijd eerst */
  .helften, .werkwijze-rij, .werkwijze-rij-1, .werkwijze-rij-2 { grid-template-columns: 1fr; }
  .helft-foto { order: -1; }
  .helft-foto img { max-height: 70vh; }
  .helft-tekst { padding-block: 40px 48px; }
  .helft-inner, .helft-links .helft-inner, .helft-rechts .helft-inner {
    max-width: none;
    margin: 0;
    padding-inline: var(--gutter);
  }
  /* Werkwijze-foto's op mobiel: de foto vult de volle breedte inclusief het uitsteeksel,
     zodat de rechte snijrand ongeveer op de tekstlijn (gutter) valt en niets wordt afgesneden. */
  .werkwijze-rij .helft-foto img { max-height: none; }
  .werkwijze-rij-1 .helft-foto img { width: calc(100% * 2181 / 2131); margin-left: calc(-100% * 50 / 2131); }
  .werkwijze-rij-2 .helft-foto img { width: calc(100% * 2180 / 2171); margin-left: 0; }
  /* Volgorde op mobiel: kop + alinea → foto 1 → foto 2 (sluiten op elkaar aan, zoals op desktop) → tekst */
  .werkwijze-rij-1 .helft-foto { order: 0; }
  .werkwijze-rij-1 .helft-tekst { padding-bottom: 28px; }
  .werkwijze-rij-2 .helft-tekst { padding-top: 32px; }

  .faq-inner { grid-template-columns: 1fr; }
  .werk-lijst { grid-template-columns: 1fr; }
  .contact-inhoud { padding-inline: var(--gutter); max-width: none; }

  .luisteren-inner { grid-template-columns: 1fr; min-height: 0; }
  .luisteren-blok { grid-column: 1; }
  .luisteren-foto { object-position: 20% center; }
  .luisteren-schaduw { background: rgba(31, 31, 31, 0.62); }
  .speler { padding: 20px 20px 16px; }
  .schakel { padding: 8px 16px; }

  .contact { grid-template-columns: 1fr; min-height: 0; }
  .contact-foto { aspect-ratio: 4 / 3; }
  .contact-blok { padding-block: 56px; }

  .footer-boven { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-onder { flex-direction: column; }
}

@media (max-width: 600px) {
  .kaarten { grid-template-columns: 1fr; gap: 12px; }

  /* Kaartjes uitklapbaar: titel + prijs zichtbaar, tekst na een tik op de titel */
  .kaart { padding: 18px 20px 16px; }
  .kaart-kop { cursor: pointer; }
  .kaart-chevron {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(31, 31, 31, 0.3);
    position: relative;
    flex: none;
  }
  .kaart-chevron::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 6px; height: 6px;
    border-right: 1.5px solid var(--inkt);
    border-bottom: 1.5px solid var(--inkt);
    transform: translate(-50%, -65%) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .kaart.is-open .kaart-chevron::before { transform: translate(-50%, -35%) rotate(225deg); }
  .kaart .ornament { margin: 8px 0 10px; }
  .kaart-tekst { display: none; margin-bottom: 4px; }
  .kaart.is-open .kaart-tekst { display: block; }
  .kaart-prijs { padding-top: 8px; }
  .hero h1 { font-size: clamp(40px, 11vw, 52px); }
  .speler-boven { flex-wrap: wrap; }
  .cookiebanner { left: 10px; right: 10px; bottom: 10px; }
}

/* Minder beweging voor wie dat in het systeem heeft ingesteld */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}