/* ═══════════════════════════════════════════════════════════════
   HechtrTouch — "Aan tafel"
   Warm-editorial systeem: papier, avondblauw en één koperen lamp.
   Fraunces vertelt, Karla legt uit.
═══════════════════════════════════════════════════════════════ */

:root {
  /* Kleuren */
  --papier: #FAF5EC;
  --papier-diep: #F3EBDB;
  --wit: #ffffff;
  --avondblauw: #1C2B3A;
  --avondblauw-diep: #14212E;
  --avondblauw-medium: #2c4a60;
  --inkt: #2A3540;
  --subtekst: #5C6570;
  --koper: #D4862D;
  --koper-diep: #b06c1d;
  --koper-tekst: #935617;
  --koper-licht: #f5c880;
  --akkoordgroen: #3A7D44;
  --akkoordgroen-licht: #8FD19A;
  --zandrand: #E4DAC6;
  --donatie-beige: #F5F0E3;

  /* Illustratiepalet (alleen voor SVG's) */
  --leem: #C98A74;
  --salie: #7FA98B;
  --staalblauw: #4E7A96;

  /* Typografie */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Karla", system-ui, -apple-system, sans-serif;

  /* Ruimte */
  --ruimte-xs: 0.5rem;
  --ruimte-s: 1rem;
  --ruimte-m: 1.5rem;
  --ruimte-l: 2.5rem;
  --ruimte-xl: 4.5rem;
  --ruimte-xxl: 7.5rem;

  /* Vorm & schaduw */
  --rond: 0.625rem;
  --rond-groot: 1.25rem;
  --schaduw: 0 4px 24px rgba(28, 43, 58, 0.09);
  --schaduw-l: 0 10px 44px rgba(28, 43, 58, 0.14);
  --focusgloed: 0 0 0 3px rgba(212, 134, 45, 0.28);
}

/* ─── Basis ──────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--inkt);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--focusgloed);
  border-radius: var(--rond);
}

.container {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* ─── Typografische stemmen ──────────────────────────────────── */

.kicker {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--koper-tekst);
}
.kicker--donker { color: var(--koper-licht); }

/* De poëtische sectieopener — één zin die op een affiche kan. */
.opener {
  font-family: var(--serif);
  font-weight: 420;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--avondblauw);
  max-width: 21ch;
  text-wrap: balance;
}
.opener em {
  font-style: italic;
  font-weight: 480;
  color: var(--koper-tekst);
}
.opener--donker { color: var(--papier); }
.opener--donker em { color: var(--koper-licht); }

.kop {
  font-family: var(--serif);
  font-weight: 560;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--avondblauw);
  text-wrap: balance;
}
.kop--donker { color: var(--papier); }

.subkop {
  font-family: var(--serif);
  font-weight: 560;
  font-size: 1.45rem;
  color: var(--avondblauw);
}
.subkop--donker { color: var(--papier); }

.proza {
  max-width: 38rem;
  color: var(--inkt);
}
.proza + .proza { margin-top: var(--ruimte-s); }
.proza--nadruk {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 480;
  font-size: 1.2rem;
  color: var(--avondblauw);
}
.proza--donker { color: rgba(250, 245, 236, 0.85); }

/* ─── Onthul-animatie ────────────────────────────────────────── */

.onthul {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
  transition-delay: var(--vertraging, 0s);
}
.onthul.zichtbaar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .onthul { opacity: 1; transform: none; transition: none; }
}

/* ─── Kopbalk ────────────────────────────────────────────────── */

.kopbalk {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem clamp(1.25rem, 5vw, 3rem);
}

.woordmerk {
  font-family: var(--serif);
  font-weight: 640;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--avondblauw);
  text-decoration: none;
}
.woordmerk__accent { color: var(--koper-tekst); font-style: italic; font-weight: 480; }

.kopbalk__link {
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--avondblauw);
  border-bottom: 2px solid var(--koper);
  padding-bottom: 2px;
  transition: color 0.15s ease;
}
.kopbalk__link:hover { color: var(--koper-tekst); }

/* ─── Knoppen ────────────────────────────────────────────────── */

.knop {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 2rem;
  padding: 0.85rem 1.9rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.15s ease;
}
.knop:hover { transform: translateY(-1px); }
.knop:active { transform: translateY(0); }

.knop--primair {
  background: var(--koper);
  color: var(--wit);
}
.knop--primair:hover { background: var(--koper-diep); }

.knop--stil {
  background: transparent;
  color: var(--avondblauw);
  border-color: rgba(28, 43, 58, 0.35);
}
.knop--stil:hover { border-color: var(--avondblauw); background: rgba(28, 43, 58, 0.05); }

.knop--breed { display: block; width: 100%; text-align: center; }

/* ─── Secties: ritme van papier en avond ─────────────────────── */

.sectie { padding-block: var(--ruimte-xxl); }
.sectie--diep { background: var(--papier-diep); }
.sectie--donker {
  background:
    radial-gradient(90rem 40rem at 70% -10%, rgba(245, 200, 128, 0.07), transparent 60%),
    var(--avondblauw);
}

.sectie__hoofd { max-width: 42rem; margin-bottom: var(--ruimte-xl); }
.sectie__hoofd .kicker { margin-bottom: var(--ruimte-s); }
.sectie__hoofd .kop { margin-bottom: var(--ruimte-m); }

.sectie__deel { margin-top: var(--ruimte-xl); }
.sectie__deel .subkop { margin-bottom: var(--ruimte-xs); }
.sectie__deel > .proza { margin-bottom: var(--ruimte-m); }

/* ─── 1 · Hero ───────────────────────────────────────────────── */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: 78rem;
  margin-inline: auto;
  padding: clamp(7rem, 14vh, 9.5rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 8vh, 5rem);
  min-height: 88vh;
}

.hero__titel {
  font-family: var(--serif);
  font-weight: 560;
  font-size: clamp(2.6rem, 6.2vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--avondblauw);
  margin-block: var(--ruimte-m) var(--ruimte-m);
  text-wrap: balance;
}
.hero__titel em {
  font-style: italic;
  font-weight: 480;
  color: var(--koper-tekst);
}

.hero__ondertitel {
  max-width: 34rem;
  font-size: 1.15rem;
  color: var(--subtekst);
  margin-bottom: var(--ruimte-l);
}

.hero__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-s);
}

.hero__beeld { width: 100%; max-width: 34rem; justify-self: center; }
.hero__beeld svg { width: 100%; }

/* ─── 2 · De lange middag ────────────────────────────────────── */

.middag__raster {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.middag__beeld { width: 100%; max-width: 19rem; justify-self: center; }
.middag__beeld svg { width: 100%; }
.middag .opener { margin-bottom: var(--ruimte-m); }

/* ─── 3 · Een tafel die meedoet ──────────────────────────────── */

.tafel .opener { margin-bottom: var(--ruimte-l); }

.tafel__raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-bottom: var(--ruimte-xl);
}
.tafel__beeld { width: 100%; max-width: 30rem; justify-self: center; }
.tafel__beeld svg { width: 100%; }

.feiten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ruimte-m);
}
.feit {
  background: var(--wit);
  border: 1px solid var(--zandrand);
  border-radius: var(--rond-groot);
  padding: var(--ruimte-m) var(--ruimte-m);
  box-shadow: var(--schaduw);
}
.feit__titel {
  font-family: var(--serif);
  font-weight: 560;
  font-size: 1.15rem;
  color: var(--avondblauw);
  margin-bottom: 0.4rem;
}
.feit__tekst { font-size: 0.95rem; color: var(--subtekst); }

/* ─── 4 · De spellen ─────────────────────────────────────────── */

.spellen .opener { margin-bottom: var(--ruimte-m); }
.spellen .proza { margin-bottom: var(--ruimte-xl); }

.spellen__raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ruimte-m);
}

.spel {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--rond-groot);
  padding: var(--ruimte-m);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.spel:hover { background: rgba(255, 255, 255, 0.09); transform: translateY(-2px); }

.spel__beeld {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.07);
  margin-bottom: var(--ruimte-s);
  display: grid;
  place-items: center;
}
.spel__beeld svg { width: 3.6rem; height: 3.6rem; }

.spel__naam {
  font-family: var(--serif);
  font-weight: 560;
  font-size: 1.12rem;
  color: var(--papier);
  margin-bottom: 0.35rem;
}
.spel__tekst {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(250, 245, 236, 0.78);
}

.spellen__groei {
  margin-top: var(--ruimte-l);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 420;
  font-size: 1.12rem;
  color: rgba(250, 245, 236, 0.85);
}

/* Kalme beweging in de vignetten */
@media (prefers-reduced-motion: no-preference) {
  .koi--een { animation: koidrift 7s ease-in-out infinite alternate; }
  .koi--twee { animation: koidrift 9s ease-in-out infinite alternate-reverse; }
  .ballon--een { animation: zweef 5s ease-in-out infinite alternate; }
  .ballon--twee { animation: zweef 6.5s ease-in-out infinite alternate-reverse; }
}
@keyframes koidrift {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(4px, -3px) rotate(3deg); }
}
@keyframes zweef {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}

/* ─── 5 · De cirkel ──────────────────────────────────────────── */

.cirkel .opener { margin-bottom: var(--ruimte-l); }

.cirkel__raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.cirkel__beeld { width: 100%; max-width: 29rem; justify-self: center; }
.cirkel__afbeelding {
  width: 100%;
  border-radius: var(--rond-groot);
}

.cirkel__stappen {
  margin-top: var(--ruimte-m);
  display: grid;
  gap: 0.7rem;
}
.cirkel__stappen li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--inkt);
}
.cirkel__nr {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--koper);
  color: var(--wit);
  font-family: var(--serif);
  font-weight: 640;
  font-size: 0.9rem;
}

/* ─── 6 · Twee deuren ────────────────────────────────────────── */

.deuren { text-align: center; }
.deuren .opener { margin-inline: auto; margin-bottom: var(--ruimte-s); }
.deuren .proza { margin-inline: auto; margin-bottom: var(--ruimte-xl); }

.deuren__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 22rem));
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.deur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ruimte-s);
  width: 100%;
  font: inherit;
  text-align: center;
  text-decoration: none;
  border-radius: var(--rond-groot);
  padding: var(--ruimte-l);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              border-color 0.2s ease, opacity 0.2s ease;
}
.deur:hover { transform: translateY(-4px); box-shadow: var(--schaduw-l); }
.deur:focus-visible { border-radius: var(--rond-groot); }

.deur--licht {
  background: var(--wit);
  border: 1px solid var(--zandrand);
  box-shadow: var(--schaduw);
}
.deur--donker {
  background: var(--avondblauw);
  border: 1px solid var(--avondblauw);
}

/* Gekozen pad: koperen nadruk. Het niet-gekozen pad dimt. */
.deur.is-gekozen {
  border-color: var(--koper);
  box-shadow: 0 0 0 3px rgba(212, 134, 45, 0.35), var(--schaduw-l);
}
.deur--donker.is-gekozen { border-color: var(--koper-licht); }
.deuren__raster.heeft-keuze .deur:not(.is-gekozen) { opacity: 0.5; }
.deuren__raster.heeft-keuze .deur:not(.is-gekozen):hover { opacity: 1; }

.deur__icoon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1rem;
  background: var(--papier-diep);
}
.deur__icoon svg { width: 2.6rem; height: auto; }
.deur--donker .deur__icoon { background: rgba(255, 255, 255, 0.08); }

.deur__titel {
  font-family: var(--serif);
  font-weight: 560;
  font-size: 1.35rem;
  color: var(--avondblauw);
}
.deur--donker .deur__titel { color: var(--papier); }

.deur__tekst { font-size: 0.95rem; color: var(--subtekst); max-width: 17rem; }
.deur--donker .deur__tekst { color: rgba(250, 245, 236, 0.75); }

.deur__status {
  margin-top: auto;
  padding-top: 0.4rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--koper-tekst);
}
.deur--donker .deur__status { color: var(--koper-licht); }
.deur.is-gekozen .deur__status { color: var(--koper); }
.deur--donker.is-gekozen .deur__status { color: var(--koper-licht); }

/* ─── 7 · Bedrijvenpad ───────────────────────────────────────── */

.stappen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ruimte-m);
}

.stap {
  background: var(--wit);
  border: 1px solid var(--zandrand);
  border-radius: var(--rond-groot);
  padding: var(--ruimte-m);
  box-shadow: var(--schaduw);
}

.stap__nummer {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--koper);
  color: var(--wit);
  font-family: var(--serif);
  font-weight: 640;
  font-size: 1.3rem;
  box-shadow: 0 0 0 6px rgba(212, 134, 45, 0.14);
  margin-bottom: var(--ruimte-s);
}

.stap__titel {
  font-family: var(--serif);
  font-weight: 560;
  font-size: 1.15rem;
  color: var(--avondblauw);
  margin-bottom: 0.4rem;
}
.stap__tekst { font-size: 0.95rem; color: var(--subtekst); }

.gratis { color: var(--akkoordgroen); font-weight: 700; }
.gratis--donker { color: var(--akkoordgroen-licht); }

/* Callout */
.callout {
  margin-top: var(--ruimte-xl);
  background: var(--donatie-beige);
  border: 1px solid var(--zandrand);
  border-left: 4px solid var(--koper);
  border-radius: var(--rond);
  padding: var(--ruimte-m);
}
.callout strong {
  font-family: var(--serif);
  font-weight: 560;
  font-size: 1.08rem;
  color: var(--avondblauw);
}
.callout p { margin-top: 0.35rem; font-size: 0.95rem; color: var(--subtekst); }

/* ─── Formulieren ────────────────────────────────────────────── */

.formulier {
  background: var(--wit);
  border: 1px solid var(--zandrand);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  gap: var(--ruimte-m);
}

.formulier--donker {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.formulier__rij {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ruimte-m);
}

.formulier__veld { display: grid; gap: 0.35rem; }

.formulier__label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--inkt);
}
.formulier__label--donker { color: rgba(250, 245, 236, 0.9); }

.verplicht { color: var(--koper-tekst); }
.verplicht--donker { color: var(--koper-licht); }

.formulier__input {
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--inkt);
  background: var(--wit);
  border: 1.5px solid var(--zandrand);
  border-radius: var(--rond);
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.formulier__input:focus-visible {
  border-color: var(--koper);
  box-shadow: var(--focusgloed);
  outline: none;
}

.formulier__input--donker {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--papier);
}
.formulier__input--donker::placeholder { color: rgba(250, 245, 236, 0.4); }

.formulier__textarea { resize: vertical; min-height: 5.5rem; }

.formulier__bevestiging {
  background: rgba(58, 125, 68, 0.1);
  border: 1px solid var(--akkoordgroen);
  border-radius: var(--rond);
  padding: var(--ruimte-s) var(--ruimte-m);
  color: var(--akkoordgroen);
  font-weight: 500;
}
.formulier__bevestiging--donker {
  background: rgba(143, 209, 154, 0.12);
  border-color: var(--akkoordgroen-licht);
  color: var(--akkoordgroen-licht);
}

.formulier__fout {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: #b23a2a;
}
.formulier--donker .formulier__fout { color: #f0a58f; }

/* ─── 8 · Zorgpad ────────────────────────────────────────────── */

.zorg-beloften {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ruimte-m);
  margin-bottom: var(--ruimte-xl);
}

.belofte {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--rond-groot);
  padding: var(--ruimte-m);
}
.belofte__titel {
  font-family: var(--serif);
  font-weight: 560;
  font-size: 1.15rem;
  color: var(--papier);
  margin-bottom: 0.4rem;
}
.belofte__tekst { font-size: 0.95rem; color: rgba(250, 245, 236, 0.78); }

.prijs-blok {
  background: rgba(245, 200, 128, 0.08);
  border: 1px solid rgba(245, 200, 128, 0.25);
  border-radius: var(--rond-groot);
  padding: var(--ruimte-l);
}
.prijs-blok .subkop { margin-bottom: var(--ruimte-xs); }
.prijs-blok__tekst { color: rgba(250, 245, 236, 0.88); }

/* ─── 9 · Voet ───────────────────────────────────────────────── */

.voet {
  background: var(--avondblauw-diep);
  color: rgba(250, 245, 236, 0.75);
  padding-top: var(--ruimte-xl);
}

.voet__raster {
  display: grid;
  grid-template-columns: 2fr 1.4fr 1fr;
  gap: var(--ruimte-l);
  padding-bottom: var(--ruimte-l);
}

.woordmerk--voet { color: var(--papier); font-size: 1.5rem; margin-bottom: var(--ruimte-s); }
.woordmerk--voet .woordmerk__accent { color: var(--koper-licht); }

.voet__titel {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--koper-licht);
  margin-bottom: var(--ruimte-s);
}

.voet__tekst { font-size: 0.95rem; max-width: 30rem; }

.voet__lijst { display: grid; gap: 0.4rem; }
.voet__link {
  text-decoration: none;
  transition: color 0.15s ease;
}
.voet__link:hover { color: var(--koper-licht); }

.voet__bodem {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--ruimte-m) clamp(1.25rem, 5vw, 3rem);
  font-size: 0.85rem;
  text-align: center;
  color: rgba(250, 245, 236, 0.5);
}

/* ─── Responsief ─────────────────────────────────────────────── */

@media (max-width: 68rem) {
  .spellen__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 56rem) {
  .sectie { padding-block: var(--ruimte-xl); }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 6.5rem;
  }
  .hero__beeld { max-width: 26rem; }

  .middag__raster,
  .tafel__raster,
  .cirkel__raster { grid-template-columns: 1fr; }
  .middag__beeld { order: 2; max-width: 15rem; }

  .feiten, .stappen, .zorg-beloften { grid-template-columns: 1fr; }

  .deuren__raster { grid-template-columns: minmax(0, 24rem); }

  .voet__raster { grid-template-columns: 1fr; gap: var(--ruimte-m); }
}

@media (max-width: 40rem) {
  .spellen__raster { grid-template-columns: 1fr; }
  .formulier__rij { grid-template-columns: 1fr; }
  .hero__knoppen .knop { width: 100%; text-align: center; }
}