/* Wildhearts and Openminds — gedeelde stijl voor alle pagina's */

/* Lettertype: Instrument Sans, uit de eigen map (geen verbinding met Google nodig) */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Kopletter-lettertype: Instrument Serif (tijdschriftstijl, ook uit de eigen map) */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --bg: #EEE7DC;
  --ink: #1B1917;
  --muted: #5A544D;
  --sand: #C8B399;
  --line: rgba(27, 25, 23, 0.18);
  --white: #FFFFFF;
  --blue-bg: #DFE3D3;
  --blue: rgba(255, 255, 255, 0.55);
  --peach-bg: #EDD3C4;
  --peach: rgba(255, 255, 255, 0.55);

  --gutter: clamp(20px, 5.6vw, 80px);
  --section: clamp(96px, 11.2vw, 160px);
  --gap: clamp(40px, 5.6vw, 80px);
  --radius: 24px;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--ink); }
a:hover { color: var(--muted); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3, p { margin: 0; }

.page { max-width: 1440px; margin: 0 auto; overflow-x: clip; }

/* ---------- Knoppen & links ---------- */

.btn {
  display: inline-block;
  background: var(--sand);
  color: var(--ink);
  text-decoration: none;
  padding: 18px 30px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  transition: transform 0.35s var(--spring), opacity 0.2s ease;
}
.btn:hover { color: var(--ink); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); opacity: 0.85; }
.btn--dark { background: var(--ink); color: var(--bg); padding: 18px 32px; }
.btn--dark:hover { color: var(--bg); }
.btn--small { padding: 12px 22px; font-size: 15px; }

.arrow-link {
  display: inline-block;
  font-weight: 500;
  font-size: 16px;
  transition: transform 0.35s var(--spring);
}
.arrow-link:hover { transform: translateX(3px); }
.arrow-link:active { transform: translateX(0); opacity: 0.7; }

.actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }

/* ---------- Navigatie ---------- */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: clamp(20px, 2.23vw, 32px) var(--gutter);
}
.nav__logo {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.nav { position: relative; z-index: 10; }
.nav__right { display: flex; align-items: center; gap: 28px; }
.nav__links { display: flex; gap: 28px; align-items: center; font-size: 15px; }
.nav__links a { text-decoration: none; white-space: nowrap; }
.nav__links a:active { opacity: 0.6; }

.nav__toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.35s var(--spring);
}
.nav__toggle:hover { transform: translateY(-1px); }
.nav__toggle:active { transform: scale(0.96); }
.nav__toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 1180px) {
  .nav__toggle { display: inline-flex; }
  .nav__right { gap: 12px; }
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px;
    background: var(--bg);
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(60, 45, 30, 0.06), 0 12px 32px -8px rgba(60, 45, 30, 0.18);
    font-size: 17px;
  }
  .nav.is-open .nav__links { display: flex; }
  .nav__links a { padding: 14px 0; border-top: 1px solid var(--line); }
  .nav__links a:first-child { border-top: 0; }
}

@media (max-width: 860px) {
  .nav__logo { font-size: 16px; }
  .btn--small { padding: 10px 16px; font-size: 14px; }
}
@media (max-width: 520px) {
  .nav__right .btn--small { display: none; }
}

/* ---------- Typografie ---------- */

.display {
  font-size: clamp(52px, 6.7vw, 96px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.display--xl { font-size: clamp(56px, 8.9vw, 128px); letter-spacing: -0.05em; }
.display--lg { font-size: clamp(52px, 7.8vw, 112px); letter-spacing: -0.05em; }
.display .light { font-weight: 400; }

.h2 {
  font-size: clamp(38px, 3.62vw, 52px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.h2--statement { font-size: clamp(32px, 3.1vw, 44px); line-height: 1.05; }

.lead { font-size: clamp(19px, 1.53vw, 22px); line-height: 1.5; max-width: 500px; }
.body { font-size: clamp(17px, 1.32vw, 19px); line-height: 1.65; }
.eyebrow { font-size: 15px; font-weight: 500; color: var(--muted); }
.note { font-size: 15px; color: var(--muted); }

/* ---------- Layout ---------- */

.section { padding: var(--section) var(--gutter) 0; }
.section--first { padding-top: clamp(40px, 6.7vw, 96px); }

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.split--center { align-items: center; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 40px;
}
.section-head p { font-size: 18px; line-height: 1.5; max-width: 420px; }
.section-head p.note { font-size: 16px; max-width: 560px; }

.stack { display: flex; flex-direction: column; }
.gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.gap-48 { gap: 48px; } .gap-64 { gap: 64px; } .gap-96 { gap: clamp(64px, 6.7vw, 96px); }

@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Beelden ---------- */

.photo {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  background: rgba(27, 25, 23, 0.06);
}
.photo--640 { height: clamp(380px, 44.5vw, 640px); }
.photo--720 { height: clamp(420px, 50vw, 720px); }
.photo--820 { height: clamp(440px, 57vw, 820px); }
.photo--520 { height: clamp(380px, 36.2vw, 520px); border-radius: 20px; }

/* ---------- Hero homepage ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding: 32px var(--gutter) 0;
}
.hero__text { display: flex; flex-direction: column; justify-content: center; gap: 32px; }
.hero__text .lead { font-size: clamp(19px, 1.5vw, 21px); max-width: 460px; }
.hero__img { width: 100%; height: auto; align-self: center; border-radius: var(--radius); }

@media (min-width: 900px) {
  .hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); min-height: 760px; }
  /* Homepage: foto krijgt meer ruimte en blijft volledig zichtbaar */
  .hero--wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ---------- Workshop-rijen homepage ---------- */

.workshop-row { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.workshop-row .photo { order: -1; }
@media (min-width: 900px) {
  .workshop-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
  /* Foto even hoog als de kaart ernaast */
  .workshop-row .photo { order: 0; height: 0; min-height: 100%; }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: var(--radius);
  padding: clamp(28px, 3.34vw, 48px);
  background: var(--white);
}
.card--blue { background: var(--blue-bg); }
.card--peach { background: var(--peach-bg); }
.card h3 {
  font-size: clamp(36px, 3.34vw, 48px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.card h3 a { text-decoration: none; }
.card p { font-size: 18px; line-height: 1.6; }

.pill {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--sand);
}
.pill--blue { background: var(--blue); }
.pill--peach { background: var(--peach); }

.price-list { display: flex; flex-direction: column; font-size: 16px; margin-top: 8px; }
.price-list div {
  border-top: 1px solid var(--line);
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.price-list div:last-child { border-top-color: var(--sand); border-bottom: 1px solid var(--line); }
.price-list span:last-child { font-weight: 600; white-space: nowrap; }

/* ---------- Stappen ---------- */

.step { display: flex; gap: 24px; }
.step__num { font-size: 17px; font-weight: 600; color: var(--muted); width: 32px; flex-shrink: 0; }
.step__title { font-size: 20px; font-weight: 600; }
.step__text { font-size: 17px; line-height: 1.55; }

/* ---------- Lijsten met lijnen ---------- */

.rule-list { display: flex; flex-direction: column; font-size: 18px; }
.rule-list > div { border-top: 1px solid var(--sand); padding: 20px 0; }
.rule-list > div:last-child { border-bottom: 1px solid var(--sand); }
.rule-list--spread > div { padding: 22px 0; display: flex; justify-content: space-between; gap: 24px; }
.rule-list--spread > div span:last-child { font-weight: 600; text-align: right; }

/* ---------- Carrousel ---------- */

.carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel img {
  flex: 0 0 auto;
  width: min(416px, 78vw);
  height: clamp(420px, 36.2vw, 520px);
  object-fit: cover;
  border-radius: 20px;
  scroll-snap-align: start;
}
.carousel-controls { display: flex; justify-content: flex-end; gap: 12px; padding-top: 8px; }
.round-btn {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.35s var(--spring), opacity 0.2s ease;
}
.round-btn:hover:not(:disabled) { transform: scale(1.06); }
.round-btn:active:not(:disabled) { transform: scale(0.94); }
.round-btn:disabled { opacity: 0.3; cursor: default; }

/* ---------- Quotes ---------- */

.quote-main { font-size: clamp(24px, 2.5vw, 36px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.25; max-width: 1080px; }
.quotes { display: grid; grid-template-columns: 1fr; gap: 40px 64px; }
.quote { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--sand); padding-top: 32px; }
.quote__text { font-size: clamp(19px, 1.53vw, 22px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.4; }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Workshoppagina's ---------- */

.benefits { display: grid; grid-template-columns: 1fr; gap: 32px 40px; }
.benefit { border-top: 1px solid var(--sand); padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.benefit__title { font-size: 20px; font-weight: 600; }
.benefit__text { font-size: 16px; line-height: 1.55; }
@media (min-width: 640px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gallery-3 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.gallery-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .gallery-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.audience { display: grid; grid-template-columns: 1fr; gap: 16px; }
.audience__card {
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: clamp(28px, 3.34vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.audience__card h3 { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; }
.audience__card p { font-size: 17px; line-height: 1.6; }
@media (min-width: 760px) { .audience { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.phases { display: grid; grid-template-columns: 1fr; gap: 40px 48px; }
.phase { border-top: 1px solid var(--sand); padding-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.phase__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.phase__title { font-size: 24px; font-weight: 600; }
.phase__text { font-size: 17px; line-height: 1.55; }
@media (min-width: 900px) { .phases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.price {
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.price__label { font-size: 17px; font-weight: 600; }
.price__amount { display: flex; align-items: baseline; gap: 8px; }
.price__amount span:first-child { font-size: 44px; font-weight: 600; letter-spacing: -0.04em; }
.price__amount span:last-child { font-size: 16px; color: var(--muted); }
.price__note { font-size: 15px; line-height: 1.5; color: var(--muted); }

/* ---------- Contactblok ---------- */

.cta {
  background: var(--sand);
  color: var(--ink);
  border-radius: 32px;
  padding: clamp(40px, 6.7vw, 96px) clamp(24px, 7.8vw, 112px);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.cta h2 { font-size: clamp(40px, 4.45vw, 64px); font-weight: 600; letter-spacing: -0.045em; line-height: 0.98; }
.cta p { font-size: 19px; line-height: 1.6; max-width: 520px; }
.cta__actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; flex-shrink: 0; }
@media (min-width: 1000px) {
  .cta { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 64px; }
  .cta__actions { align-items: flex-end; }
}

/* ---------- Footer ---------- */

.footer {
  margin-top: 80px;
  padding: 40px var(--gutter);
  border-top: 1px solid var(--sand);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  font-size: 15px;
}
.footer__name { font-weight: 600; letter-spacing: -0.02em; }
.footer__links { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.footer__links a { text-decoration: none; }
.footer__links a:active { opacity: 0.6; }

/* ---------- Hero byline ---------- */

.byline { display: flex; align-items: center; gap: 14px; }
.byline img { width: 48px; height: 48px; border-radius: 999px; object-fit: cover; object-position: center; }
.byline__name { font-size: 15px; font-weight: 600; }
.byline__role { font-size: 14px; color: var(--muted); }

.intro { font-size: clamp(20px, 1.6vw, 23px); line-height: 1.45; letter-spacing: -0.01em; max-width: 560px; }

/* ---------- Veelgestelde vragen ---------- */

.faq { display: flex; flex-direction: column; border-bottom: 1px solid var(--sand); }
.faq__item { border-top: 1px solid var(--sand); }
.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  font-size: clamp(18px, 1.4vw, 21px);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--muted); }
.faq__item summary:active { opacity: 0.7; }
.faq__item summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.faq__icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.35s var(--spring); }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: currentColor; border-radius: 2px;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__item p { font-size: 17px; line-height: 1.65; max-width: 760px; padding-bottom: 28px; }

/* ---------- Agenda ---------- */

.agenda { display: flex; flex-direction: column; border-bottom: 1px solid var(--sand); }
.agenda__row, .agenda__empty { border-top: 1px solid var(--sand); padding: 24px 0; }
.agenda__row { display: grid; grid-template-columns: 1fr; gap: 6px 32px; align-items: baseline; }
.agenda__date { font-size: 18px; font-weight: 600; }
.agenda__what { font-size: 17px; }
.agenda__empty { font-size: 18px; color: var(--muted); }
@media (min-width: 760px) { .agenda__row { grid-template-columns: 260px 1fr auto; } }

.subhead { font-size: clamp(26px, 2.5vw, 36px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }

/* Contactblok vult het scherm, zodat een klik op "Contact" er precies op landt */
.section--contact {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 24px;
}
.section--contact + .footer, main:has(.section--contact) + .footer { margin-top: 0; }

/* ---------- Aanvraagformulier ---------- */

.cta--form { align-items: stretch; }
.cta__intro { max-width: 460px; }
@media (min-width: 1000px) {
  .cta--form { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 64px; }
}

.request-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: var(--radius);
  padding: clamp(20px, 2.8vw, 36px);
  box-shadow: 0 1px 2px rgba(60, 45, 30, 0.06), 0 16px 40px -16px rgba(60, 45, 30, 0.22);
}
.field { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field__label { font-size: 15px; font-weight: 600; padding: 0; }
.field__label--small { font-size: 14px; font-weight: 500; color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(27, 25, 23, 0.18);
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 52px;
}
.input::placeholder { color: rgba(90, 84, 77, 0.7); }
.input:hover { border-color: rgba(27, 25, 23, 0.4); }
.input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
input[type="date"].input { cursor: pointer; }

.choices { display: flex; flex-direction: column; gap: 10px; }
.choices--3 { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid rgba(27, 25, 23, 0.18);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.35s var(--spring);
}
.choice--row { flex-direction: row; align-items: center; gap: 12px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__name { font-size: 16px; font-weight: 600; }
.choice__sub { font-size: 14px; color: var(--muted); }
.choice--row::before {
  content: '';
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(27, 25, 23, 0.45);
  background: var(--white);
}
.choice:hover { border-color: rgba(27, 25, 23, 0.45); }
.choice:active { transform: scale(0.98); }
.choice:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.choice:has(input:checked) .choice__sub { color: rgba(238, 231, 220, 0.75); }
.choice--row:has(input:checked)::before { border-color: var(--bg); background: var(--bg); box-shadow: inset 0 0 0 4px var(--ink); }
.choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }

.request-form__own { padding: 4px 0 4px 4px; }
.request-form__own[hidden] { display: none; }
.request-form__submit { align-self: flex-start; border: 0; cursor: pointer; font: inherit; font-weight: 500; font-size: 16px; }
.request-form__submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.request-form__status { font-size: 15px; line-height: 1.5; }

/* Portret bij "Wie ben ik?": kleiner en rechts uitgelijnd */
.photo--portrait { width: 100%; max-width: 400px; height: auto; aspect-ratio: 4 / 5; justify-self: end; }
@media (max-width: 899px) { .photo--portrait { justify-self: start; max-width: 320px; } }

/* ---------- Doorlopende fotoband ---------- */

.marquee {
  margin: 0 calc(var(--gutter) * -1);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  gap: 16px;
  width: max-content;
  will-change: transform;
}
.marquee__dup { display: contents; }
.marquee img {
  width: clamp(200px, 20vw, 280px);
  height: clamp(260px, 26vw, 360px);
  object-fit: cover;
  border-radius: 18px;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
}
.marquee { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.marquee:active { cursor: grabbing; }
.marquee img { -webkit-user-drag: none; pointer-events: none; }
.marquee img.wide { width: auto; aspect-ratio: 3 / 2; }

/* From Body to Brush: diepgroen van het welkomstscherm + dubbele foto (eerst bewegen, dan schilderen) */
.card--sage { background: #DADEE2; }
.pill--sage { background: rgba(255, 255, 255, 0.55); }
.photo-duo { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; gap: 12px; order: -1; height: clamp(440px, 110vw, 620px); }
.photo-duo img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: var(--radius); background: rgba(27, 25, 23, 0.06); }
@media (min-width: 900px) {
  .workshop-row .photo-duo { order: 0; height: 0; min-height: 100%; }
}

/* Lijst met label links en antwoord rechts ("Voor elke groep") */
.rule-list--labels { margin: 0; }
.rule-list--labels > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: baseline; }
.rule-list--labels dt { font-weight: 600; }
.rule-list--labels dd { margin: 0; line-height: 1.5; }

/* Instagram-icoon */
.ig-link { display: inline-flex; align-items: center; gap: 8px; }
.ig-icon { flex-shrink: 0; transition: transform 0.35s var(--spring); }
.ig-link:hover .ig-icon, .arrow-link:hover .ig-icon { transform: scale(1.12) rotate(-6deg); }
.ig-inline { display: inline-flex; vertical-align: -4px; margin-right: 8px; }
.nav__ig {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px;
  color: var(--ink); text-decoration: none;
  transition: transform 0.35s var(--spring);
}
.nav__ig:hover { color: var(--ink); transform: scale(1.08) rotate(-6deg); }
.nav__ig:active { transform: scale(0.94); }
.nav__ig .ig-icon { width: 22px; height: 22px; }


/* ---------- Tekenen op de website ---------- */

.draw-layer { position: fixed; left: 0; top: 0; z-index: 9990; pointer-events: none; }
.is-drawing .draw-layer { pointer-events: auto; cursor: crosshair; touch-action: none; }

/* Klein en bescheiden: alleen een potloodje, de kleuren verschijnen pas bij gebruik */
.draw-bar {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border-radius: 999px;
}
.is-drawing .draw-bar {
  background: rgba(238, 231, 220, 0.94);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(60, 45, 30, 0.08), 0 8px 22px -10px rgba(60, 45, 30, 0.3);
}
.draw-bar button { font: inherit; cursor: pointer; border: 0; transition: transform 0.35s var(--spring), opacity 0.2s ease; }
.draw-bar button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.draw-bar button:active { transform: scale(0.9); }
.draw-bar__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(238, 231, 220, 0.8);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px rgba(27, 25, 23, 0.14);
  opacity: 0.7;
}
.draw-bar__toggle:hover { opacity: 1; transform: scale(1.06); }
.draw-bar__toggle[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; opacity: 1; }
.draw-bar__tools { display: flex; align-items: center; gap: 5px; padding-right: 4px; }
.draw-bar__tools[hidden] { display: none; }
.draw-bar__color {
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(27, 25, 23, 0.2);
}
.draw-bar__color:hover { transform: scale(1.12); }
.draw-bar__color[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(27, 25, 23, 0.2), 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
.draw-bar__text { padding: 5px 9px; border-radius: 999px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 500; }
.draw-bar__text:hover { background: rgba(27, 25, 23, 0.06); }

/* ---------- Welkomstscherm (alleen homepage, één keer per bezoek) ---------- */
/* Zelfde beige, lettertype en knop als de website, zodat het naadloos overloopt */

.welcome-open, .welcome-open body { overflow: hidden; }
.welcome {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 25% 15%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(200, 179, 153, 0.25), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.welcome.is-leaving { opacity: 0; transform: scale(1.03); pointer-events: none; }
.welcome__inner { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; animation: welcome-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.welcome__kicker { font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
.welcome__name {
  font-size: clamp(44px, 7vw, 104px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.95;
  max-width: 11ch;
  isolation: isolate;
}
.welcome__and { position: relative; display: inline-block; font-weight: 400; }
.welcome__and > span { position: relative; z-index: 1; }
.welcome__mark {
  position: absolute; left: 50%; top: 52%;
  width: 1.7em; height: 1.7em;
  translate: -50% -50%;
  color: var(--sand);
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
  animation: spiral-turn 60s linear infinite;
}
.welcome__enter { font-size: 16px; padding: 16px 40px; letter-spacing: 0.02em; border: 0; cursor: pointer; font-family: inherit; }
.welcome__enter:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@keyframes welcome-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .welcome, .welcome__inner { transition: opacity 0.3s ease; animation: none; }
  .welcome.is-leaving { transform: none; }
  .welcome__mark { animation: none; }
}

/* ---------- Privacy en voorwaarden ---------- */

.legal { display: grid; gap: 56px; }
.legal__body { display: flex; flex-direction: column; max-width: 760px; }
.legal__block { border-top: 1px solid var(--sand); padding: 28px 0; display: grid; gap: 10px; }
.legal__block:last-child { border-bottom: 1px solid var(--sand); }
.legal__block h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.legal__block p { font-size: 17px; line-height: 1.7; }
@media (min-width: 900px) {
  .legal { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: start; }
  .legal > .stack { position: sticky; top: 32px; }
}
/* Nog in te vullen tekst: valt op zodat je het niet vergeet */
mark.todo { background: #FBE7A1; color: var(--ink); padding: 1px 5px; border-radius: 4px; }
.legal__title { font-size: clamp(48px, 5vw, 72px); overflow-wrap: anywhere; }


/* ---------- Stijl van het welkomstscherm, terug op de site ---------- */

:root { --forest: #454D40; --linen: #EFEAE0; }

/* Diepgroen met korrel: footer */
.footer {
  background-color: var(--forest);
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, 0.06), transparent 60%),
    radial-gradient(ellipse at 85% 95%, rgba(0, 0, 0, 0.16), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--linen);
}

.footer { border-top: 0; padding-top: 48px; padding-bottom: 48px; }
.footer a { color: var(--linen); }
.footer a:hover { color: #FFFFFF; }
.footer a:focus-visible { outline-color: var(--linen); }
.footer__muted { color: rgba(239, 234, 224, 0.65); }
.footer__name { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; }

/* Spiraaltje licht achter het woordje "and" in de naam */
.nav__logo, .footer__name { isolation: isolate; }
.logo-and { position: relative; display: inline-block; }
.logo-and > span { position: relative; z-index: 1; }
.logo-and__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.5em;
  height: 2.5em;
  translate: -50% -50%;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.6s var(--spring), opacity 0.3s ease;
}
.nav__logo:hover .logo-and__mark { transform: rotate(-30deg); opacity: 0.28; }
.footer__name .logo-and__mark { width: 3.4em; height: 3.4em; opacity: 0.16; }

/* Korte labels in de gespatieerde hoofdletters van "[ enter ]" */
.eyebrow--caps { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; }

/* ---------- Magische spiraal op het welkomstscherm ---------- */
.welcome__mark {
  color: inherit;
  width: 2.2em;
  height: 2.2em;
  overflow: visible;
  filter: drop-shadow(0 0 14px rgba(216, 157, 88, 0.55)) drop-shadow(0 0 3px rgba(255, 240, 215, 0.95));
  animation: spiral-turn 70s linear infinite;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s ease;
}
/* De spiraal tekent zichzelf, van binnen naar buiten, als een onzichtbare kwast */
.welcome__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: spiral-draw 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards; }
@keyframes spiral-draw { to { stroke-dashoffset: 0; } }

/* Sterretjes die rustig oplichten */
.welcome__mark .twinkle { fill: #D89D58; opacity: 0; transform-box: fill-box; transform-origin: center; animation: twinkle 4s ease-in-out infinite; }
.welcome__mark .twinkle:nth-of-type(1) { animation-delay: 2.4s; }
.welcome__mark .twinkle:nth-of-type(2) { animation-delay: 3.1s; fill: #E9BAA0; }
.welcome__mark .twinkle:nth-of-type(3) { animation-delay: 3.8s; fill: #FFF6E6; }
.welcome__mark .twinkle:nth-of-type(4) { animation-delay: 2.8s; fill: #E9BAA0; }
.welcome__mark .twinkle:nth-of-type(5) { animation-delay: 4.4s; fill: #FFF6E6; }
.welcome__mark .twinkle:nth-of-type(6) { animation-delay: 3.4s; }
.welcome__mark .twinkle:nth-of-type(7) { animation-delay: 5s; fill: #FFF6E6; }
.welcome__mark .twinkle:nth-of-type(8) { animation-delay: 4.1s; fill: #E9BAA0; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.4); } 45% { opacity: 1; transform: scale(1.3); } 60% { opacity: 0.8; transform: scale(1); } }

/* De rest verschijnt zacht terwijl de spiraal zich tekent */
.welcome__kicker { animation: welcome-in 1.2s ease 0.2s backwards; }
.welcome__enter { animation: welcome-in 1.2s ease 2.2s backwards; }

/* Bij Enter: de spiraal draait nog één keer rond en lost op in het licht */
.welcome.is-leaving .welcome__mark { animation: none; transform: rotate(220deg) scale(2.2); opacity: 0; }
.welcome.is-leaving .welcome__inner > *:not(.welcome__name) { opacity: 0; transition: opacity 0.5s ease; }

@media (prefers-reduced-motion: reduce) {
  .welcome__mark, .welcome__mark .twinkle, .welcome__line, .welcome__kicker, .welcome__enter { animation: none; }
  .welcome__line { stroke-dashoffset: 0; }
  .welcome__mark .twinkle { opacity: 0.8; }
}

/* ---------- Magisch moment na een aanvraag ---------- */
.request-form__status:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--white);
  border-radius: 16px;
  animation: welcome-in 0.8s ease both;
}
.confirm-spiral {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  color: #C8A26E;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(216, 157, 88, 0.5));
  animation: spiral-turn 40s linear infinite;
}
.confirm-spiral path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: spiral-draw 2.2s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards; }
@media (prefers-reduced-motion: reduce) {
  .confirm-spiral, .confirm-spiral path, .request-form__status:not([hidden]) { animation: none; }
  .confirm-spiral path { stroke-dashoffset: 0; }
}


/* Langzame draaiing voor de spiraal (welkomstscherm en bevestiging) */
@keyframes spiral-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.byline { text-decoration: none; color: inherit; }
.byline:hover .byline__name { text-decoration: underline; }
.byline:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 999px; }

/* ---------- Overzichtelijke workshopkaarten ---------- */

/* Kerngegevens in één oogopslag */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 0; }
.facts div { background: rgba(255, 255, 255, 0.55); border-radius: 12px; padding: 10px 12px; }
.facts dt { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 4px 0 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } }

/* Prijzen: particulier en zakelijk naast elkaar */
.price-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.price-table th { text-align: left; font-size: 13px; font-weight: 600; padding: 0 0 10px; vertical-align: bottom; }
.price-table th span { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.price-table th:not(:first-child), .price-table td:not(:first-child) { text-align: right; }
.price-table td { padding: 11px 0; border-top: 1px solid var(--line); }
.price-table td:not(:first-child) { font-weight: 600; white-space: nowrap; padding-left: 12px; }
.price-table tbody tr:last-child td { border-bottom: 1px solid var(--line); }

.solo-line { font-size: 15px; text-decoration: none; color: var(--ink); }
.solo-line:hover { text-decoration: underline; color: var(--ink); }

.card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }

.price__vat { font-size: 13px; color: var(--muted); }
.price__split { margin: 2px 0 0; display: grid; gap: 4px; font-size: 14px; }
.price__split div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 6px; }
.price__split dt { color: var(--muted); }
.price__split dd { margin: 0; font-weight: 600; }

/* ---------- Extra overzicht ---------- */

/* Drie workshops in één oogopslag */
.ws-overview { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .ws-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.ws-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  border-radius: 20px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.35s var(--spring);
}
.ws-tile:hover { color: var(--ink); transform: translateY(-3px); }
.ws-tile:active { transform: translateY(0) scale(0.98); }
.ws-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ws-tile--blue { background: var(--blue-bg); }
.ws-tile--peach { background: var(--peach-bg); }
.ws-tile--sage { background: #DADEE2; }
.ws-tile__kind { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.ws-tile__name { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.ws-tile__line { font-size: 15px; line-height: 1.45; }
.ws-tile__meta { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; border-top: 1px solid var(--line); }
.workshop-row { scroll-margin-top: 24px; }

/* Label boven elk onderdeel */
.section-label { margin-bottom: 14px; }

/* Boeken in drie stappen */
.book-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.book-steps li { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.book-steps span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-size: 13px; font-weight: 600;
}

/* Kennismakingsprijs-melding */
.intro-offer {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--white);
  font-size: 15px;
  box-shadow: 0 1px 2px rgba(60, 45, 30, 0.06), 0 8px 22px -14px rgba(60, 45, 30, 0.35);
}
.intro-offer a { font-weight: 500; }
.input--area { min-height: 110px; resize: vertical; line-height: 1.5; }

/* Workshopkleuren met een vleugje Instagram-sfeer: effen mosgroen, terracotta en schemerblauw */
.pill--blue { background: #C6CDB4; }
.pill--peach { background: #DDB49F; }
.pill--sage { background: #C3CAD2; }

/* ---------- Meldingsbalk bovenaan ---------- */
:root { --terra: #B86E50; }
.announce {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 16px;
  padding: 10px var(--gutter);
  background: var(--terra); color: var(--linen);
  font-size: 14px; text-align: center;
}
.announce a { color: var(--linen); font-weight: 500; }
.announce a:hover { color: #FFFFFF; }
.announce a:focus-visible { outline: 2px solid var(--linen); outline-offset: 2px; }

/* Terracotta als accent in de kleine labels */
.eyebrow--caps { color: var(--terra); }


/* Meldingsbalk reist mee bij het scrollen */
.announce { position: sticky; top: 0; z-index: 60; }
html { scroll-padding-top: 64px; }
.workshop-row { scroll-margin-top: 72px; }
.announce__short { display: none; }
@media (max-width: 640px) {
  .announce { flex-wrap: nowrap; font-size: 13px; padding-top: 9px; padding-bottom: 9px; gap: 10px; }
  .announce__long { display: none; }
  .announce__short { display: inline; }
  .announce a { white-space: nowrap; }
}

/* Gekozen workshop in het formulier krijgt de eigen workshopkleur */
.choice:has(input[value="Movement in Presence"]:checked) { background: #C6CDB4; border-color: #8E9A72; color: var(--ink); }
.choice:has(input[value="Intuitive Painting"]:checked) { background: #DDB49F; border-color: #B86E50; color: var(--ink); }
.choice:has(input[value="First Move, Then Paint"]:checked) { background: #C3CAD2; border-color: #5F6E80; color: var(--ink); }
.choice:has(input[name="workshop"]:checked) .choice__sub { color: var(--muted); }

/* Bevestiging na verzenden: rustig en klein */
.confirm-text { display: flex; flex-direction: column; gap: 4px; }
.confirm-text__title { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.confirm-text__note { font-size: 13px; line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }
.request-form__status:not([hidden]) { align-items: flex-start; gap: 14px; padding: 18px 20px; }
.request-form__status .confirm-spiral { width: 34px; height: 34px; }

/* Taalknop NL / EN */
.nav__lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; border-radius: 999px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.08em;
  color: var(--ink); text-decoration: none;
  transition: transform 0.35s var(--spring), opacity 0.2s ease;
}
.nav__lang:hover { transform: translateY(-1px); opacity: 0.7; }
.nav__lang:active { transform: scale(0.94); }
.nav__lang:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nav__langs { display: flex; align-items: center; }
@media (max-width: 520px) { .nav__lang { min-width: 26px; height: 36px; font-size: 12px; letter-spacing: 0.04em; } .nav__right { gap: 4px; } .nav__ig { width: 36px; } .nav__toggle { margin-left: 4px; } }

/* Talen voluit in het uitklapmenu op telefoon en tablet */
.nav__menu-langs { display: none; }
@media (max-width: 1180px) {
  .nav__menu-langs { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 14px 0 10px; border-top: 1px solid var(--line); font-size: 15px; }
  .nav__links .nav__menu-langs a { padding: 4px 0; border-top: 0; color: var(--muted); text-decoration: none; transition: opacity 0.2s ease; }
  .nav__links .nav__menu-langs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .nav__links .nav__menu-langs a:active { opacity: 0.6; }
  .nav__links .nav__menu-langs a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .nav__links .nav__menu-langs a[aria-current] { color: var(--ink); font-weight: 600; }
}

/* Taalkeuze op het welkomstscherm */
.welcome__langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 14px; letter-spacing: 0.04em; animation: welcome-in 1.2s ease 2.6s backwards; }
.welcome__langs a { color: var(--muted); text-decoration: none; padding: 4px 2px; transition: opacity 0.2s ease, transform 0.35s var(--spring); }
.welcome__langs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.welcome__langs a:active { transform: scale(0.96); }
.welcome__langs a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.welcome__langs a[aria-current] { color: var(--ink); font-weight: 600; }
.welcome.is-leaving .welcome__langs { opacity: 0; transition: opacity 0.5s ease; }
@media (prefers-reduced-motion: reduce) { .welcome__langs { animation: none; } }

/* Heel smalle telefoons: talen alleen in het menu */
@media (max-width: 359px) { .nav__langs { display: none; } }
.welcome__kicker.is-swapping { animation: welcome-in 0.7s ease both; }
@media (prefers-reduced-motion: reduce) { .welcome__kicker.is-swapping { animation: none; } }
.welcome__langs a { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.welcome__langs .flag { display: block; width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(27, 25, 23, 0.12); opacity: 0.85; transition: opacity 0.2s ease, transform 0.35s var(--spring); }
.welcome__langs a:hover .flag, .welcome__langs a[aria-current] .flag { opacity: 1; transform: translateY(-1px); }
.welcome__langs a:hover { text-decoration: none; }
.welcome__langs a:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* =====================================================================
   Nieuw ontwerp (homepage, menu, footer)
   Raster van 12 kolommen, vaste tekstmaten, ruim en rustig ritme.
   ===================================================================== */
.hp { --col-gap: clamp(16px, 2vw, 28px); --space: clamp(112px, 12vw, 184px); }
.hp > section { padding-inline: var(--gutter); }
.hp > section + section { margin-top: var(--space); }

.hp-label { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.hp-h2 { margin: 0; font-size: clamp(38px, 4.6vw, 66px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }

/* Hero: grote typografie, daaronder een fotostrook */
.hp-hero { padding-top: clamp(32px, 5vw, 80px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(40px, 5vw, 72px); }
.hp-hero__text { grid-column: 1 / span 8; display: flex; flex-direction: column; gap: 28px; }
.hp-hero__text .hp-label { max-width: 520px; text-transform: none; letter-spacing: 0; font-size: 15px; }
.hp-hero__title { margin: 0; font-size: clamp(54px, 8.4vw, 132px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.92; }
.hp-hero__title .light { display: block; font-weight: 400; }
.hp-hero__sub { font-size: clamp(22px, 2.1vw, 30px); letter-spacing: -0.02em; }
.hp-hero__side { grid-column: 9 / span 4; align-self: end; display: flex; flex-direction: column; gap: 28px; padding-bottom: 8px; }
.hp-hero__lead { font-size: 19px; line-height: 1.6; }
.hp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.hp-hero__images { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.75fr 1fr; gap: var(--col-gap); height: clamp(320px, 40vw, 600px); }
.hp-hero__images img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; }

/* Hoe het werkt */
.hp-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(40px, 4vw, 64px); }
.hp-intro > .hp-label { grid-column: 1 / span 3; padding-top: 0.9em; }
.hp-statement { grid-column: 4 / -1; font-size: clamp(30px, 3.5vw, 52px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.12; text-wrap: balance; }
.hp-steps { grid-column: 4 / -1; list-style: none; margin: 0; padding: 32px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.hp-steps__num { font-size: 13px; letter-spacing: 0.08em; color: var(--muted); font-variant-numeric: tabular-nums; }
.hp-steps h3 { margin: 14px 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.hp-steps p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 32ch; }

/* Drie workshops: gelijke kaarten in de eigen kleur */
.hp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 64px; margin-bottom: clamp(36px, 4vw, 56px); }
.hp-head > div { display: flex; flex-direction: column; gap: 16px; }
.hp-head__text { max-width: 400px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.hp-ws { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.hp-ws__item {
  --c: var(--blue-bg); --dot: #7F8B68;
  display: flex; flex-direction: column; overflow: hidden; border-radius: 24px;
  background: var(--c); color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 2px rgba(60, 45, 30, 0.05), 0 22px 44px -28px rgba(60, 45, 30, 0.28);
  transition: transform 0.5s var(--spring);
}
.hp-ws__item--paint { --c: var(--peach-bg); --dot: #C47C5E; }
.hp-ws__item--both { --c: #DADEE2; --dot: #5F6E80; }
.hp-ws__item:hover { color: var(--ink); transform: translateY(-6px); }
.hp-ws__item:active { transform: translateY(-2px) scale(0.99); }
.hp-ws__item:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 24px; }
.hp-ws__img { aspect-ratio: 4 / 5; overflow: hidden; }
.hp-ws__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.hp-ws__item:hover .hp-ws__img img { transform: scale(1.04); }
.hp-ws__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 26px; }
.hp-ws__kind { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hp-ws__kind::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.hp-ws__name { margin: 0; font-size: clamp(24px, 2.1vw, 30px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.hp-ws__text { font-size: 16px; line-height: 1.55; color: var(--muted); }
.hp-ws__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(27, 25, 23, 0.12); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; font-size: 14px; }
.hp-ws__more { font-weight: 500; transition: transform 0.35s var(--spring); }
.hp-ws__item:hover .hp-ws__more { transform: translateX(3px); }

/* 1:1 sessies: één rustige regel */
.hp-solo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 20px; align-items: end; }
.hp-solo > div:first-child { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 16px; }
.hp-solo__text { grid-column: 5 / span 4; font-size: 19px; line-height: 1.55; }
.hp-solo__end { grid-column: 9 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hp-solo__meta { font-size: 15px; color: var(--muted); }
.hp > .hp-solo { margin-top: clamp(80px, 9vw, 136px); padding-top: clamp(40px, 4vw, 56px); }
.hp-solo { position: relative; }
.hp-solo::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }

/* Sfeerfoto's */
.hp-gallery { display: flex; flex-direction: column; gap: 28px; }

/* Voor wie */
.hp-who { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
.hp-who__img { grid-column: 1 / span 5; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; }
.hp-who__text { grid-column: 7 / -1; display: flex; flex-direction: column; gap: 22px; }
.hp-who__intro { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.45; letter-spacing: -0.015em; }
.hp-who__body { font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 560px; }
.hp-who .rule-list { margin-top: 8px; }

/* Ervaringen */
.hp-reviews { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(32px, 4vw, 48px); }
.hp-quote { margin: 0; max-width: 1000px; }
.hp-quote blockquote { margin: 0; font-size: clamp(24px, 2.7vw, 40px); line-height: 1.28; letter-spacing: -0.025em; text-wrap: balance; }
.hp-quote figcaption { margin-top: 22px; font-size: 15px; color: var(--muted); }
.hp-quotes { width: 100%; max-width: 1000px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); text-align: left; }
.hp-quotes figure { margin: 0; padding: 28px 30px; border-radius: 22px; background: rgba(255, 255, 255, 0.5); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.hp-quotes blockquote { margin: 0; font-size: 17px; line-height: 1.6; }
.hp-quotes figcaption { font-size: 14px; color: var(--muted); }

/* Contact op de homepage: zelfde ritme */
.hp > .section--contact { padding-top: 0; }

/* Telefoon en tablet */
@media (max-width: 899px) {
  .hp-hero__text, .hp-hero__side { grid-column: 1 / -1; }
  .hp-hero__images { grid-template-columns: 1fr 1fr; height: auto; }
  .hp-hero__images img { aspect-ratio: 4 / 5; height: auto; }
  .hp-hero__images img:nth-child(2) { grid-column: 1 / -1; order: -1; aspect-ratio: 3 / 2; }
  .hp-intro > .hp-label, .hp-statement, .hp-steps { grid-column: 1 / -1; }
  .hp-steps { grid-template-columns: 1fr; gap: 28px; }
  .hp-ws { grid-template-columns: 1fr; gap: 20px; }
  .hp-ws__img { aspect-ratio: 4 / 3; }
  .hp-solo > div:first-child, .hp-solo__text, .hp-solo__end { grid-column: 1 / -1; }
  .hp-who__img, .hp-who__text { grid-column: 1 / -1; }
  .hp-who { row-gap: 40px; }
  .hp-quotes { grid-template-columns: 1fr; }
}
@media (min-width: 900px) and (max-width: 1180px) {
  .hp-hero__text { grid-column: 1 / span 7; }
  .hp-hero__side { grid-column: 8 / -1; }
}

/* Menu: lichter en rustiger */
.nav__links { gap: 32px; }
.nav__links a { font-size: 15px; transition: opacity 0.2s ease; }
.nav__links a:hover { color: var(--ink); opacity: 0.6; }

/* Footer: kolommen, effen kleur (geen verloop) */
.footer--pro { display: block; margin-top: var(--section); padding: clamp(64px, 7vw, 104px) var(--gutter) 32px; background-image: none; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr; gap: 40px var(--gap); }
.footer__brand { display: flex; flex-direction: column; gap: 14px; }
.footer--pro .footer__name { font-size: 16px; line-height: 1.5; }
main:has(.section--contact) + .footer--pro, .footer--pro { margin-top: clamp(80px, 9vw, 128px); }
.footer__tag { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 15px; }
.footer__h { margin: 0 0 6px; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }
.footer__col a { text-decoration: none; transition: opacity 0.2s ease; }
.footer__col a:hover { opacity: 0.7; }
.footer__col a:active { opacity: 0.5; }
.footer__bottom { margin-top: clamp(48px, 6vw, 80px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.16); display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; opacity: 0.75; }
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__top { grid-template-columns: 1fr; }
}

/* Fotostrook: de kleurenfoto in het midden helemaal in beeld (niet bijgesneden);
   de foto's ernaast volgen de hoogte daarvan */
.hp-hero__images { height: auto; align-items: stretch; }
.hp-hero__images img:nth-child(2) { aspect-ratio: 750 / 499; height: auto; }
.hp-hero__images img:nth-child(1), .hp-hero__images img:nth-child(3) { height: 100%; contain: size; }
@media (max-width: 899px) {
  .hp-hero__images img:nth-child(1), .hp-hero__images img:nth-child(3) { contain: none; aspect-ratio: 4 / 5; height: auto; }
  .hp-hero__images img:nth-child(2) { aspect-ratio: 750 / 499; }
}

/* Agenda: zelfde rustige regel als 1:1 */
.hp > .hp-agenda { margin-top: 0; }
.hp-agenda__list { grid-column: 5 / span 4; font-size: 19px; line-height: 1.55; }
.hp-agenda__list .agenda__empty { padding: 0; border: 0; font-size: inherit; color: var(--ink); }
@media (max-width: 899px) { .hp-agenda__list { grid-column: 1 / -1; } }

/* Hero-titel in tijdschriftstijl (Vogue-achtig): Bodoni, tweede regel cursief */
.hp-hero__title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.025em; line-height: 0.95; font-variation-settings: 'opsz' 96; }
.hp-hero__title .light { font-style: italic; font-weight: 400; }
/* Letters subtiel over elkaar: krappe letterafstand, regels gewoon onder elkaar */
.hp-hero__title { letter-spacing: -0.065em; }
.hp-hero__title .light { letter-spacing: -0.055em; }

/* =====================================================================
   Tijdschriftstijl (Vogue / DANSK): Bodoni-koppen, kleine kapitalen,
   dunne lijnen, rechte foto's. Hoofdpagina = cover.
   ===================================================================== */
:root { --serif: 'Instrument Serif', Georgia, serif; }

/* Koppen in Bodoni */
main :is(h1, h2, h3):not(.hp-label):not(.eyebrow),
.display, .h2, .hp-h2, .hp-statement, .hp-quote blockquote, .cover__lead, .hp-pagehead__lead {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: 'opsz' 96;
}
.display, .h2, .hp-h2, .cta h2, .legal__title, main h1 { letter-spacing: -0.035em; line-height: 0.98; }
.display .light { font-style: italic; font-weight: 400; }
.hp-h2 { font-size: clamp(42px, 5vw, 76px); }
.hp-statement { font-size: clamp(30px, 3.4vw, 50px); letter-spacing: -0.02em; line-height: 1.12; }
.hp-steps h3 { font-size: 28px; letter-spacing: -0.015em; }
.hp-ws__name { font-size: clamp(28px, 2.4vw, 36px); letter-spacing: -0.025em; line-height: 1.02; }
.hp-quote blockquote { font-style: italic; letter-spacing: -0.015em; line-height: 1.25; }
main h3 { letter-spacing: -0.015em; }

/* Rechte foto's en kaarten, zoals in een tijdschrift */
main img { border-radius: 0; }
.byline img { border-radius: 50%; }
.hp-ws__item, .hp-ws__img, .hp-quotes figure { border-radius: 0; }
.hp-ws__item:focus-visible { border-radius: 0; }

/* ---------- Menu: compact, kleine kapitalen ---------- */
.nav { padding-block: 18px; border-bottom: 1px solid var(--line); }
.nav__logo { font-family: var(--serif); font-weight: 500; font-size: 21px; letter-spacing: -0.015em; font-variation-settings: 'opsz' 28; }
.nav__right { gap: 26px; }
.nav__links { gap: 26px; }
.nav__links > a { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.nav__lang { font-size: 11px; letter-spacing: 0.12em; }
.nav__cta {
  display: inline-flex; align-items: center; padding: 9px 16px;
  border: 1px solid var(--ink); border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; color: var(--ink);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.nav__cta:hover { background: var(--ink); color: var(--bg); }
.nav__cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nav__toggle { padding: 9px 16px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }

/* Tablet en groter: menu gewoon in één regel */
@media (min-width: 900px) and (max-width: 1180px) {
  .nav__toggle { display: none; }
  .nav__links {
    display: flex; position: static; flex-direction: row; align-items: center;
    gap: 20px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .nav__links > a { padding: 0; border: 0; }
  .nav__menu-langs { display: none !important; }
  .nav__right { gap: 20px; }
}

/* Telefoon: menu als rustig scherm met grote Bodoni-letters */
@media (max-width: 899px) {
  .nav__logo, .nav__toggle, .nav__langs { position: relative; z-index: 2; }
  .nav__links {
    position: fixed; inset: 0; z-index: 1;
    padding: 132px var(--gutter) 40px;
    border: 0; border-radius: 0; box-shadow: none;
    background: var(--bg);
    overflow-y: auto;
  }
  .nav.is-open .nav__links { display: flex; animation: menu-in 0.35s ease both; }
  .nav.is-open .nav__langs { visibility: hidden; }
  .nav__links > a {
    font-family: var(--serif); font-size: clamp(34px, 9vw, 44px); font-weight: 400;
    letter-spacing: -0.02em; text-transform: none; line-height: 1.1;
    padding: 14px 0; border-top: 1px solid var(--line);
  }
  .nav__links > a:first-child { border-top: 0; }
  .nav__menu-langs { margin-top: 18px; }
  .nav__cta { display: none; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav.is-open .nav__links { animation: none; } }

/* ---------- Cover (hoofdpagina) ---------- */
.cover {
  --col-gap: clamp(16px, 2vw, 28px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap); row-gap: clamp(28px, 3.4vw, 48px);
  padding: clamp(20px, 2.6vw, 36px) var(--gutter) 0;
}
.cover__top {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
.cover__title { grid-column: 1 / -1; font-size: clamp(56px, 11.2vw, 184px); line-height: 0.9; }
.cover__title .light { display: block; }
.cover__photo { grid-column: 1 / span 7; margin: 0; }
.cover__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1206 / 812; object-fit: cover; }
.cover__side { grid-column: 9 / -1; display: flex; flex-direction: column; gap: 36px; }
.cover__lead { font-size: clamp(22px, 1.9vw, 28px); font-style: italic; line-height: 1.3; letter-spacing: -0.01em; }
.cover__index { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.cover__index a {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink); transition: padding-left 0.3s var(--spring);
}
.cover__index a:hover { padding-left: 8px; color: var(--ink); }
.cover__index a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cover__num { font-size: 11px; letter-spacing: 0.1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.cover__name { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; line-height: 1.15; }
.cover__kind { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: right; }
@media (max-width: 899px) {
  .cover__photo, .cover__side { grid-column: 1 / -1; }
  .cover__top span + span { display: none; }
}
@media (max-width: 420px) { .cover__kind { display: none; } .cover__index a { grid-template-columns: 30px 1fr; } }

/* ---------- Kop van de workshoppagina ---------- */
.hp-pagehead { display: flex; flex-direction: column; gap: 22px; padding-top: clamp(40px, 6vw, 96px); }
.hp-pagehead .hp-label { text-transform: none; letter-spacing: 0; font-size: 15px; max-width: 520px; }
.hp-pagehead__title { font-size: clamp(64px, 12vw, 200px); line-height: 0.88; letter-spacing: -0.05em; }
.hp-pagehead__lead { font-size: clamp(22px, 2vw, 30px); font-style: italic; max-width: 640px; line-height: 1.3; }
.hp > .hp-pagehead + section { margin-top: clamp(80px, 9vw, 140px); }
@media (min-width: 900px) { .cover__side { grid-column: 8 / -1; padding-left: clamp(8px, 2vw, 40px); } }
.cover__name { white-space: nowrap; }
.hp > .hp-agenda { margin-top: clamp(40px, 4vw, 56px); }
.hp-agenda__list .agenda { border: 0; }
/* Telefoon: naam op één regel, menu-knop compact */
.nav__logo > span { white-space: nowrap; }
@media (max-width: 520px) {
  .nav__logo { font-size: 16px; }
  .nav__toggle { padding: 7px 12px; font-size: 11px; letter-spacing: 0.14em; }
  .nav__lang { min-width: 22px; font-size: 10px; }
}
@media (max-width: 374px) { .nav__langs { display: none; } }
@media (max-width: 899px) {
  .nav.is-open .nav__langs { display: none; }
  .nav { z-index: 50; }
}
@media (max-width: 899px) { .nav__links { gap: 0; } .nav__links > a { padding: 16px 0; } }
/* Overal strakke hoeken voor foto's en vlakken (knoppen blijven rond) */
main img.photo, main .photo, .audience__card, .price, .cta, .request-form, .ws-tile, .facts > *, .phases > * { border-radius: 0; }

/* ---------- Duidelijker en compacter: alleen de titels in Bodoni ---------- */
main h3, .hp-statement, .hp-quote blockquote, .cover__lead, .hp-pagehead__lead,
.hp-ws__name, .cover__name, .nav__logo, .nav__links > a {
  font-family: 'Instrument Sans', sans-serif;
  font-variation-settings: normal;
  font-style: normal;
}
.nav__logo { font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.hp-statement { font-weight: 500; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -0.03em; line-height: 1.2; }
.hp-steps h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
main h3 { font-weight: 600; letter-spacing: -0.02em; }
.hp-ws__name { font-size: clamp(21px, 1.8vw, 25px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.hp-quote blockquote { font-size: clamp(20px, 2vw, 28px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.4; }
.cover__lead, .hp-pagehead__lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; letter-spacing: 0; max-width: 520px; }
.cover__name { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.cover__index a { padding: 11px 0; }

/* Titels: iets kleiner en strakker */
.cover__title { font-size: clamp(52px, 8.6vw, 136px); }
.hp-pagehead__title { font-size: clamp(56px, 8.6vw, 136px); }
.hp-h2 { font-size: clamp(36px, 3.8vw, 56px); }
.display { font-size: clamp(46px, 5.6vw, 80px); }
.display--xl, .display--lg { font-size: clamp(50px, 6.6vw, 96px); }
.cta h2 { font-size: clamp(34px, 3.6vw, 52px); }

/* Compacter ritme */
.hp { --space: clamp(80px, 8.5vw, 128px); }
.cover { row-gap: clamp(22px, 2.6vw, 36px); }
.cover__side { gap: 28px; }
.hp-pagehead { gap: 16px; padding-top: clamp(32px, 4.5vw, 72px); }
.hp > .hp-pagehead + section { margin-top: clamp(64px, 7vw, 104px); }
.nav { padding-block: 14px; }

/* Telefoonmenu: helder en compact */
@media (max-width: 899px) {
  .nav__links { padding-top: 112px; }
  .nav__links > a { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; padding: 14px 0; }
}
main h3:not(.hp-label):not(.eyebrow) { font-family: 'Instrument Sans', sans-serif; font-variation-settings: normal; font-weight: 600; }
/* Smalle telefoons: talen staan in het menu, zodat de menuknop past */
@media (max-width: 430px) { .nav__langs { display: none; } .nav__logo { font-size: 16px; } }
/* Fotorij op de cover */
.cover__gallery { grid-column: 1 / -1; margin-top: clamp(48px, 5vw, 80px); }
.marquee img { border-radius: 0; }
.cover__gallery { min-width: 0; }
/* Cover: ondertitel direct onder de titel */
.cover__sub { grid-column: 1 / -1; margin-top: calc(clamp(22px, 2.6vw, 36px) * -0.6); font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -0.02em; }
.cover__side .hp-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
/* Ervaringen op de cover */
.cover__reviews { grid-column: 1 / -1; min-width: 0; margin-top: clamp(64px, 7vw, 112px); }

/* Vogue-titels, maar duidelijker: steviger lijnen (lagere optische maat),
   iets zwaarder en letters niet meer over elkaar */
.hp-hero__title, .cover__title, .hp-pagehead__title,
main :is(h1, h2):not(.hp-label):not(.eyebrow), .display, .h2, .hp-h2 {
  font-weight: 500;
  font-variation-settings: 'opsz' 36;
}
.hp-hero__title, .cover__title { letter-spacing: -0.03em; }
.hp-hero__title .light, .cover__title .light { letter-spacing: -0.025em; font-weight: 500; }
.hp-pagehead__title { letter-spacing: -0.035em; }
.display, .h2, .hp-h2, .cta h2, .legal__title { letter-spacing: -0.025em; }
/* Vlaggetje achter de plaatsnaam bij ervaringen */
.flag--inline { display: inline-block; width: 16px; height: auto; margin-left: 4px; vertical-align: -1px; border-radius: 1px; box-shadow: 0 0 0 0.5px rgba(27, 25, 23, 0.25); }
/* Paginatitels: tweede deel cursief op een eigen regel, net als op de homepage */
h1.display .light, h1.h2 .light { display: block; font-style: italic; font-weight: 500; letter-spacing: -0.025em; }
/* Over ons: titel net zo groot en sierlijk als op de homepage */
h1.h2--statement { font-size: clamp(46px, 5.6vw, 84px); line-height: 0.98; letter-spacing: -0.03em; }
h2.h2 .light { font-style: italic; font-weight: 500; }
/* Duidelijker: op de andere pagina's geen cursief in de titels, alles rechtop
   (alleen "Dan schilderen." op de homepage blijft cursief) */
h1.display .light, h1.h2 .light, h2.h2 .light { font-style: normal; display: inline; }
h1.h2--statement .light { display: block; }
h1.h2--statement { font-size: clamp(38px, 4.2vw, 60px); line-height: 1.02; }

/* Titels in Instrument Serif: één gewicht, geen nep-vet, iets groter want deze letter is smaller */
.hp-hero__title, .cover__title, .hp-pagehead__title, .cover__title .light, .hp-hero__title .light,
main :is(h1, h2):not(.hp-label):not(.eyebrow), main :is(h1, h2) .light, .display, .h2, .hp-h2 {
  font-weight: 400; font-variation-settings: normal; font-synthesis: none;
}
.cover__title { font-size: clamp(58px, 9.6vw, 152px); letter-spacing: -0.025em; line-height: 0.92; }
.cover__title .light { letter-spacing: -0.02em; }
.hp-pagehead__title { font-size: clamp(62px, 9.6vw, 152px); letter-spacing: -0.03em; }
.hp-h2 { font-size: clamp(40px, 4.2vw, 62px); letter-spacing: -0.02em; }
.display { font-size: clamp(50px, 6.2vw, 88px); letter-spacing: -0.02em; }
.display--xl, .display--lg { font-size: clamp(54px, 7.2vw, 104px); }
.h2, .cta h2 { letter-spacing: -0.02em; }
.h2 { font-size: clamp(38px, 4.2vw, 60px); }
.cta h2 { font-size: clamp(38px, 4vw, 58px); }
h1.h2--statement { font-size: clamp(42px, 4.6vw, 66px); letter-spacing: -0.02em; }
.h2--statement { letter-spacing: -0.015em; }

/* =====================================================================
   High-end afwerking: overal dezelfde rust als de cover.
   Geen gekleurde vlakken of kaartjes, dunne lijnen, strakke hoeken.
   ===================================================================== */

/* Knoppen: zwart, strak, klein kapitaal */
.btn, .btn--dark {
  background: var(--ink); color: var(--bg);
  padding: 16px 28px; border-radius: 999px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.35s var(--spring);
}
.btn:hover, .btn--dark:hover { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); transform: none; }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.arrow-link { text-underline-offset: 4px; }

/* Kortingsbalk: een smal, rustig regeltje in plaats van een oranje balk */
.announce {
  position: relative; background: var(--bg); color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: 8px var(--gutter);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.announce strong { font-weight: 500; color: var(--ink); }
.announce a { color: var(--ink); font-weight: 500; }
.announce a:hover { color: var(--muted); }
.announce a:focus-visible { outline: 2px solid var(--ink); }
html { scroll-padding-top: 16px; }

/* Workshopkaarten: foto, dunne lijn, tekst. Geen pastelvlakken of schaduw */
.hp-ws__item { background: transparent; box-shadow: none; border-radius: 0; }
.hp-ws__item:hover { transform: none; }
.hp-ws__item:hover .hp-ws__img img { transform: scale(1.03); }
.hp-ws__img { overflow: hidden; }
.hp-ws__img img { transition: transform 0.8s var(--spring); }
.hp-ws__body { padding: 20px 0 0; border-top: 0; }
.hp-ws__foot { border-top: 1px solid var(--line); }
.hp-ws__more { text-decoration: underline; text-underline-offset: 4px; }

/* Fotorij: scherpe randen, geen vervaging */
.marquee { -webkit-mask-image: none; mask-image: none; }

/* Voor wie: twee kolommen met een lijn erboven, geen kaders */
.audience__card { border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding: 24px 0 0; }
.audience__card h3 { font-size: 24px; }

/* Tarieven: open kolommen met een lijn, geen witte kaartjes */
.prices { gap: 0 clamp(20px, 2.4vw, 36px); }
.price { background: transparent; border-radius: 0; border-top: 1px solid var(--ink); padding: 24px 0 8px; }
.price__label { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.price__amount span:first-child { font-family: var(--serif); font-weight: 400; font-size: 52px; letter-spacing: -0.02em; }

/* Formulierblok: licht vlak met een lijn, formulier zonder schaduw */
.cta { background: transparent; border-radius: 0; border-top: 1px solid var(--ink); padding: clamp(40px, 5vw, 72px) 0 0; }
.request-form { background: transparent; box-shadow: none; border-radius: 0; padding: 0; }
.input { border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid rgba(27, 25, 23, 0.35); padding: 12px 2px; min-height: 48px; }
.input:focus-visible { outline: 0; border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
.input--area { border: 1px solid rgba(27, 25, 23, 0.35); padding: 12px 14px; }
.choice { border-radius: 0; background: transparent; }
.book-steps span { border-radius: 0; }

/* Overige zachte vlakken strak maken */
.hp-quotes figure { background: transparent; border-top: 1px solid var(--ink); padding: 22px 0 0; }
.photo-duo img, .card--sage { border-radius: 0; }
@media (max-width: 640px) {
  .announce { text-transform: none; letter-spacing: 0; font-size: 12px; padding-block: 8px; }
}

/* Tarieven: één heldere prijslijst */
.ratecard { max-width: 920px; }
.ratecard__intro { font-size: 17px; margin-bottom: 18px; }
.ratecard__intro span { color: var(--muted); }
.ratecard__table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); }
.ratecard__table th, .ratecard__table td { text-align: left; padding: 18px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; font-weight: 400; }
.ratecard__table thead th { padding: 14px 0; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.ratecard__table thead th span { display: block; margin-top: 2px; font-size: 11px; letter-spacing: 0.06em; text-transform: none; opacity: 0.8; }
.ratecard__table thead th span:empty { display: none; }
.ratecard__table th:not(:first-child), .ratecard__table td { text-align: right; width: 26%; }
.ratecard__table tbody th { font-size: 17px; }
.ratecard__table td { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 36px); line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.ratecard__solo th { padding-top: 26px; }
.ratecard__solo th span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.ratecard__solo th, .ratecard__solo td { border-top: 1px solid var(--ink); }
@media (max-width: 520px) {
  .ratecard__table tbody th { font-size: 15px; }
  .ratecard__table td { font-size: 26px; padding-left: 12px; }
}
/* Naam onderaan: link naar de homepage */
a.footer__name { text-decoration: none; transition: opacity 0.2s ease; }
a.footer__name:hover { opacity: 0.7; color: var(--linen); }
a.footer__name:hover .logo-and__mark { transform: rotate(-30deg); opacity: 0.28; }
.ratecard__table td small { display: block; margin-top: 6px; font-family: 'Instrument Sans', sans-serif; font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
.ratecard__table td small { font-size: 13px; color: var(--ink); opacity: 0.7; }

/* =====================================================================
   Compacter en verfijnder: minder witruimte, kleinere titels en foto's
   ===================================================================== */
:root { --section: clamp(64px, 7.2vw, 104px); }
.hp { --space: clamp(64px, 7vw, 104px); }
.gap-48 { gap: 32px; } .gap-64 { gap: 44px; } .gap-96 { gap: clamp(48px, 5vw, 72px); }
.section--first { padding-top: clamp(32px, 4.5vw, 64px); }

/* Titels */
.cover__title { font-size: clamp(50px, 7.6vw, 120px); }
.hp-pagehead__title { font-size: clamp(52px, 7.6vw, 116px); }
.display { font-size: clamp(42px, 4.8vw, 70px); }
.display--xl, .display--lg { font-size: clamp(44px, 5.4vw, 78px); }
.h2, .hp-h2 { font-size: clamp(32px, 3.2vw, 46px); }
.cta h2 { font-size: clamp(32px, 3.2vw, 46px); }
.h2--statement, h1.h2--statement { font-size: clamp(28px, 2.9vw, 42px); line-height: 1.1; }
.legal__title { font-size: clamp(42px, 4.6vw, 64px); }
.hp-statement { font-size: clamp(22px, 2.2vw, 32px); }

/* Tekst iets fijner */
.lead, .cover__lead, .hp-pagehead__lead, .hp-hero__lead { font-size: clamp(17px, 1.3vw, 19px); }
.cover__sub { font-size: clamp(17px, 1.4vw, 21px); }
.hp-quote blockquote { font-size: clamp(19px, 1.8vw, 25px); }

/* Foto's minder hoog */
.photo--720 { height: clamp(360px, 40vw, 580px); }
.photo--520 { height: clamp(300px, 30vw, 420px); }
.cover__side { gap: 24px; }
.cover { row-gap: clamp(20px, 2.2vw, 30px); }
.cover__gallery { margin-top: clamp(36px, 4vw, 60px); }
.cover__reviews { margin-top: clamp(48px, 5vw, 80px); }

/* Prijslijst: lagere regels, p.p. naast het bedrag */
.ratecard__table th, .ratecard__table td { padding: 12px 0; }
.ratecard__table thead th { padding: 10px 0; }
.ratecard__table td { font-size: clamp(22px, 2vw, 28px); }
.ratecard__table td small { display: inline; margin: 0 0 0 6px; font-size: 12px; }
.ratecard__table tbody th { font-size: 16px; }
.ratecard__solo th { padding-top: 16px; }
.ratecard__intro { font-size: 16px; margin-bottom: 12px; }

/* Footer en contactblok compacter */
.footer--pro, main:has(.section--contact) + .footer--pro { margin-top: clamp(64px, 7vw, 104px); padding-top: clamp(48px, 5vw, 72px); }
.footer__bottom { margin-top: clamp(36px, 4vw, 56px); }
.cta { padding-top: clamp(32px, 4vw, 56px); gap: 32px; }
.request-form { gap: 20px; }
.photo--820 { height: clamp(360px, 42vw, 600px); }
/* Smalle telefoons: p.p. weer onder het bedrag; juridische pagina's niet breder dan het scherm */
@media (max-width: 600px) { .ratecard__table td small { display: block; margin: 4px 0 0; } }
.legal, .legal > *, .legal__body, .legal__block { min-width: 0; }
.legal :is(h1, h2, p, a) { overflow-wrap: anywhere; }
/* Lange knopteksten (bijv. Hongaars) mogen op smalle telefoons afbreken */
@media (max-width: 400px) { .btn { white-space: normal; text-align: center; } }
/* Prijzen iets groter, regels blijven compact */
.ratecard__table td { font-size: clamp(28px, 2.5vw, 36px); }
.ratecard__table th, .ratecard__table td { padding: 13px 0; }
@media (max-width: 520px) { .ratecard__table td { font-size: 28px; } }
@media (max-width: 360px) { .ratecard__table td { font-size: 24px; } }
/* Prijzen netjes uitgelijnd: bedragen recht onder elkaar, toevoeging in een vaste kolom */
.ratecard__table td { font-variant-numeric: tabular-nums lining-nums; }
@media (min-width: 601px) {
  .ratecard__table td small { display: inline-block; width: 6.6em; margin-left: 10px; text-align: left; vertical-align: baseline; }
  .ratecard__table thead th:not(:first-child) { padding-right: calc(6.6em * 12 / 11 + 10px); }
}

/* Iets meer lucht: tussen de blokken en tussen alinea's */
:root { --section: clamp(72px, 8.4vw, 124px); }
.hp { --space: clamp(72px, 8vw, 120px); }
.split .stack.gap-24 { gap: 20px; }
p.body { line-height: 1.7; }
.hp-who__text { gap: 26px; }
.legal__block + .legal__block { margin-top: 12px; }
/* Zelfde ruimte boven het formulierblok als tussen de andere blokken */
.section--contact { padding-top: var(--section); }
/* Workshops: foto van het doek in het gras naast de titel */
.hp-pagehead__img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 55%; }
@media (min-width: 900px) {
  .hp-pagehead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 18px; align-content: end; }
  .hp-pagehead > :not(.hp-pagehead__img) { grid-column: 1 / span 7; }
  .hp-pagehead > .hp-label { align-self: end; }
  .hp-pagehead__img { grid-column: 9 / -1; grid-row: 1 / span 3; align-self: end; max-height: 560px; }
}
@media (max-width: 899px) { .hp-pagehead__img { margin-top: 12px; max-height: 70vh; } }
.hp-pagehead__text { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) {
  .hp-pagehead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; row-gap: 0; }
  .hp-pagehead > .hp-pagehead__text { grid-column: 1 / span 7; padding-bottom: 8px; }
  .hp-pagehead > .hp-pagehead__img { grid-column: 9 / -1; grid-row: auto; max-height: 540px; }
}

/* =====================================================================
   Telefoon: rustiger en compacter
   ===================================================================== */
.hp-who__img { border-radius: 0; }
@media (max-width: 640px) {
  :root { --section: 64px; }
  .hp { --space: 64px; }

  /* Foto's minder hoog: liggend in plaats van staand */
  .hp-pagehead__img { aspect-ratio: 3 / 2; max-height: none; object-position: center 62%; margin-top: 8px; }
  .hp-ws__img { aspect-ratio: 3 / 2; }
  .hp-who__img { aspect-ratio: 3 / 2; }
  .photo--720, .photo--820 { height: auto; aspect-ratio: 4 / 3; }
  .photo--520 { height: auto; aspect-ratio: 3 / 2; }
  .cover__photo img { aspect-ratio: 3 / 2; }

  /* Tekst iets kleiner en strakker */
  .hp-statement { font-size: 21px; line-height: 1.3; }
  .hp-who__intro { font-size: 18px; line-height: 1.5; }
  .hp-who { row-gap: 28px; }
  .hp-who__text { gap: 18px; }

  /* Hoe het werkt: nummer naast de titel, minder ruimte */
  .hp-steps { gap: 20px; padding-top: 24px; }
  .hp-steps li { display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; }
  .hp-steps__num { grid-row: 1; padding-top: 4px; }
  .hp-steps h3 { margin: 0 0 4px; font-size: 18px; }
  .hp-steps p { grid-column: 2; }

  /* Workshopkaarten dichter op elkaar */
  .hp-ws { gap: 36px; }
  .hp-ws__body { padding-top: 14px; gap: 8px; }

  /* Overige blokken */
  .hp-solo { row-gap: 14px; }
  .hp > .hp-solo { margin-top: 56px; padding-top: 32px; }
  .hp > .hp-agenda { margin-top: 32px; }
  .hp-quotes { gap: 24px; }
  .benefits { gap: 20px; }
  .gallery-3 { gap: 10px; }
  .gap-48 { gap: 24px; }
}
.hp-pagehead__img { height: auto; }

/* ---------- Kalender in de agenda ---------- */
.kalender { grid-column: 5 / -1; margin-top: 28px; max-width: 760px; }
.kal__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.kal__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.015em; }
.kal__title span { color: var(--muted); }
.kal__nav { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.kal__nav:hover { background: var(--ink); color: var(--bg); }
.kal__nav:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--line); }
.kal__wd { padding: 10px 8px 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kal__dag { position: relative; min-height: 64px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kal__dag--leeg { background: rgba(27, 25, 23, 0.025); }
.kal__num { font-size: 14px; font-variant-numeric: tabular-nums; }
.kal__dag.is-weekend .kal__num { color: var(--muted); }
.kal__dag.is-feest { background: rgba(184, 110, 80, 0.08); }
.kal__dag.is-feest .kal__num { color: var(--terra); font-weight: 600; }
.kal__dag.is-workshop { background: var(--ink); }
.kal__dag.is-workshop .kal__num { color: var(--bg); font-weight: 600; }
.kal__dag.is-vandaag .kal__num { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ink); color: var(--bg); font-weight: 600; }
.kal__marks { position: absolute; right: 7px; bottom: 7px; color: var(--ink); line-height: 0; }
.kal__moon { display: inline-block; vertical-align: middle; }
.kal__list { list-style: none; margin: 18px 0 0; padding: 0; columns: 2; column-gap: 32px; }
.kal__list li { display: grid; grid-template-columns: 26px 18px 1fr auto; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; break-inside: avoid; }
.kal__li-date { font-family: var(--serif); font-size: 18px; line-height: 1; }
.kal__li-icon { display: inline-flex; align-items: center; }
.kal__li-flags { display: inline-flex; gap: 4px; }
.kal__flag { display: block; border-radius: 1px; box-shadow: 0 0 0 0.5px rgba(27, 25, 23, 0.25); }
.kal__ws-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.kal__li-none { display: block !important; color: var(--muted); }
.kal__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font-size: 12px; color: var(--muted); }
.kal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.kal__legend .kal__moon { color: var(--ink); }
@media (max-width: 899px) { .kalender { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .kal__dag { min-height: 46px; padding: 5px; }
  .kal__wd { padding: 8px 4px 6px; font-size: 10px; letter-spacing: 0.06em; }
  .kal__num { font-size: 13px; }
  .kal__marks { right: 3px; bottom: 3px; }
  .kal__moon { width: 10px; height: 10px; }
  .kal__list { columns: 1; }
  .kal__dag.is-vandaag .kal__num { width: 22px; height: 22px; margin: -3px 0 0 -3px; }
}
main .kalender h3.kal__title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; }
/* Kaart First Move, Then Paint: twee foto's naast elkaar (bewegen + schilderen) */
.hp-ws__img--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.hp-ws__img--duo img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
/* Kalender: lijst met uitleg per feestdag */
.kal__list { columns: 1; }
.kal__list li { grid-template-columns: 30px 18px 1fr auto; align-items: start; padding: 10px 0; }
.kal__li-date { padding-top: 1px; }
.kal__li-icon, .kal__li-flags { padding-top: 3px; }
.kal__li-name { font-size: 15px; }
.kal__li-sub { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ---------- Kalender: uitleg, soorten dagen, vandaag ---------- */
.kal__head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kal__back { border: 0; background: none; padding: 2px 4px; font: inherit; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kal__back:hover { color: var(--ink); }
button.kal__dag { display: block; width: 100%; margin: 0; font: inherit; color: inherit; text-align: left; background: transparent; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; cursor: pointer; transition: background-color 0.2s ease; }
button.kal__dag:hover { background: rgba(27, 25, 23, 0.06); }
button.kal__dag:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.kal__dag.is-natuur { background: rgba(110, 130, 90, 0.12); }
.kal__dag.is-cn { background: rgba(196, 40, 40, 0.09); }
.kal__dag.is-cn .kal__num { color: #B42323; font-weight: 600; }
.kal__dag.is-jarig { background: rgba(212, 120, 150, 0.14); }
.kal__dag.is-jarig .kal__num { color: #A23A64; font-weight: 600; }
.kal__dag.is-gekozen { box-shadow: inset 0 0 0 2px var(--ink); }
.kal__dag.is-vandaag { box-shadow: inset 0 0 0 1px var(--ink); }
.kal__dag.is-vandaag.is-gekozen { box-shadow: inset 0 0 0 2px var(--ink); }
.kal__today { display: block; margin-top: 4px; font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.kal__marks { display: inline-flex; gap: 2px; }
.kal__sun { color: #5E7246; }
.kal__cn { color: #B42323; }
.kal__heart { color: #A23A64; }
.kal__info { margin-top: 16px; padding: 18px 20px; background: rgba(255, 255, 255, 0.45); border-top: 1px solid var(--ink); }
.kal__hint { margin: 0; font-size: 14px; color: var(--muted); }
.kal__info-date { margin: 0 0 10px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.kal__info-moon { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 14px; }
.kal__info-item + .kal__info-item { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
main .kalender h4.kal__info-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -0.01em; line-height: 1.15; }
.kal__info-meta { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.06em; color: var(--muted); }
.kal__info-item p { margin: 0 0 6px; font-size: 15px; line-height: 1.6; }
.kal__info-origin span { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 4px; }
.kal__list li { display: block; padding: 0; }
.kal__li-btn { display: grid; grid-template-columns: 30px 18px 1fr auto; align-items: start; gap: 6px; width: 100%; padding: 10px 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; }
button.kal__li-btn { cursor: pointer; }
button.kal__li-btn:hover .kal__li-name { text-decoration: underline; text-underline-offset: 3px; }
button.kal__li-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kal__legend-fs .kal__sun, .kal__legend-cn .kal__cn { width: 12px; height: 12px; }
@media (max-width: 640px) {
  .kal__today { font-size: 8px; letter-spacing: 0.04em; }
  .kal__info { padding: 14px; }
  main .kalender h4.kal__info-name { font-size: 20px; }
}
.input--area { background: #FFFFFF; }
/* Kalender: het Chinese jaar onder de maand */
.kal__cnyear { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; margin: 2px 0 0; font-size: 13px; color: var(--ink); text-align: center; }
.kal__cnyear span { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.kal__cnyear .kal__cn { width: 11px; height: 11px; }
.kal__cnyear span { font-size: 12px; letter-spacing: 0; text-transform: none; font-style: italic; }
/* Chinees jaarsymbool (dierteken) */
.kal__glyph { display: inline-block; font-family: 'Songti SC', 'STSong', 'Noto Serif SC', 'SimSun', serif; font-size: 1.15em; line-height: 1; color: #B42323; }
.kal__marks .kal__glyph { font-size: 13px; }
.kal__li-icon .kal__glyph { font-size: 15px; }

/* ---------- Kalender compacter en rustiger: één zachte tint, lijst inklapbaar ---------- */
.kalender { margin-top: 20px; max-width: 640px; }
.kal__top { padding-bottom: 10px; }
.kal__title { font-size: clamp(22px, 2vw, 28px); }
.kal__nav { width: 32px; height: 32px; font-size: 17px; }
.kal__wd { padding: 7px 6px 6px; font-size: 10px; }
.kal__dag { min-height: 48px; padding: 6px 7px; }
/* Bijzondere dagen: geen gekleurde vlakken meer, alleen een rustig stipje */
.kal__dag.is-feest, .kal__dag.is-natuur, .kal__dag.is-cn, .kal__dag.is-jarig { background: transparent; }
.kal__dag.is-feest .kal__num, .kal__dag.is-cn .kal__num, .kal__dag.is-jarig .kal__num { color: var(--ink); font-weight: 600; }
.kal__dag.is-feest::after, .kal__dag.is-natuur::after, .kal__dag.is-cn::after, .kal__dag.is-jarig::after {
  content: ""; position: absolute; left: 8px; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--terra); opacity: 0.75;
}
.kal__sun, .kal__heart, .kal__glyph, .kal__cn { color: var(--muted); }
.kal__marks .kal__glyph { font-size: 12px; }
.kal__dag.is-workshop { background: var(--ink); }
.kal__dag.is-workshop .kal__num, .kal__dag.is-workshop .kal__marks { color: var(--bg); }
.kal__today { font-size: 8px; margin-top: 2px; }
/* Uitleg alleen als er op een dag is geklikt */
.kal__info { margin-top: 10px; padding: 0; background: none; border-top: 0; }
.kal__info.is-open { margin-top: 14px; padding: 16px 18px; background: rgba(255, 255, 255, 0.45); border-top: 1px solid var(--ink); }
.kal__hint { font-size: 12px; }
/* Lijst van de maand: ingeklapt */
.kal__more { margin-top: 8px; border-top: 1px solid var(--line); }
.kal__more > summary { list-style: none; cursor: pointer; padding: 10px 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.kal__more > summary::-webkit-details-marker { display: none; }
.kal__more > summary::after { content: " +"; }
.kal__more[open] > summary::after { content: " −"; }
.kal__more > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kal__list { margin-top: 0; }
.kal__li-btn { padding: 8px 0; }
.kal__li-sub { font-size: 12px; }
.kal__legend { margin-top: 10px; gap: 4px 14px; font-size: 11px; }
@media (max-width: 640px) {
  .kal__dag { min-height: 40px; padding: 4px 5px; }
  .kal__dag.is-feest::after, .kal__dag.is-natuur::after, .kal__dag.is-cn::after, .kal__dag.is-jarig::after { left: 5px; bottom: 4px; width: 4px; height: 4px; }
}
/* Kalender: elke dag klikbaar; plan-knop in de uitleg */
.kal__plan-wrap { margin: 12px 0 0 !important; padding-top: 12px; border-top: 1px solid var(--line); }
.kal__plan { font-size: 15px; }

/* Lijstjes met labels (Waar, Regio, Materiaal…): verfijnd, zoals een colofon */
.rule-list--labels > div { grid-template-columns: 104px 1fr; gap: 16px; padding: 12px 0; align-items: baseline; }
.rule-list--labels dt { font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.rule-list--labels dd { font-size: 16px; line-height: 1.5; }
.hp-who .rule-list { margin-top: 4px; }
/* Lijstjes "Hoe het verloopt" / "Praktisch": ook iets lichter */
.rule-list > div { padding-top: 12px; padding-bottom: 12px; }
.rule-list dd, .rule-list dt { font-size: 16px; }
@media (max-width: 520px) {
  .rule-list--labels > div { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
}
/* Labelkolom past zich aan het langste label aan (ook in het Pools en Hongaars) */
.rule-list--labels { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 28px; border-bottom: 1px solid var(--sand); }
.rule-list--labels > div { display: contents; }
.rule-list--labels > div:last-child { border-bottom: 0; }
.rule-list--labels dt, .rule-list--labels dd { border-top: 1px solid var(--sand); padding: 12px 0; }
.rule-list--labels dt { padding-top: 15px; }
@media (max-width: 520px) {
  .rule-list--labels { grid-template-columns: 1fr; }
  .rule-list--labels dt { padding: 12px 0 0; }
  .rule-list--labels dd { border-top: 0; padding: 2px 0 12px; }
}
/* Workshops: grote spiraal (uit het logo) naast de titel, tekent zichzelf */
.hp-pagehead__spiral { display: block; width: clamp(150px, 26vw, 360px); height: auto; color: var(--terra); justify-self: end; align-self: center; }
.hp-pagehead__spiral path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: spiraal-teken 3.2s cubic-bezier(0.45, 0, 0.2, 1) 0.3s forwards; }
@keyframes spiraal-teken { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hp-pagehead__spiral path { animation: none; stroke-dashoffset: 0; } }
@media (min-width: 900px) {
  .hp-pagehead > .hp-pagehead__spiral { grid-column: 9 / -1; grid-row: 1; }
}
@media (max-width: 899px) {
  .hp-pagehead { position: relative; }
  .hp-pagehead__spiral { position: absolute; right: var(--gutter); top: clamp(24px, 4vw, 48px); width: 120px; opacity: 0.9; }
  .hp-pagehead__text { padding-right: 0; }
}
.hp-pagehead__spiral path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }

/* Spiraal bij Workshops: dezelfde als op het welkomstscherm (goud, gloed, sterretjes, langzame draai) */
.hp-pagehead__spiral {
  display: block; width: clamp(150px, 24vw, 330px); height: auto; overflow: visible; color: inherit; opacity: 1;
  filter: drop-shadow(0 0 14px rgba(216, 157, 88, 0.45)) drop-shadow(0 0 3px rgba(255, 240, 215, 0.9));
  animation: spiral-turn 70s linear infinite;
}
.hp-pagehead__spiral .twinkle { fill: #D89D58; opacity: 0; transform-box: fill-box; transform-origin: center; animation: twinkle 4s ease-in-out infinite; }
.hp-pagehead__spiral .twinkle:nth-of-type(1) { animation-delay: 2.4s; }
.hp-pagehead__spiral .twinkle:nth-of-type(2) { animation-delay: 3.1s; fill: #E9BAA0; }
.hp-pagehead__spiral .twinkle:nth-of-type(3) { animation-delay: 3.8s; fill: #FFF6E6; }
.hp-pagehead__spiral .twinkle:nth-of-type(4) { animation-delay: 2.8s; fill: #E9BAA0; }
.hp-pagehead__spiral .twinkle:nth-of-type(5) { animation-delay: 4.4s; fill: #FFF6E6; }
.hp-pagehead__spiral .twinkle:nth-of-type(6) { animation-delay: 3.4s; }
.hp-pagehead__spiral .twinkle:nth-of-type(7) { animation-delay: 5s; fill: #FFF6E6; }
.hp-pagehead__spiral .twinkle:nth-of-type(8) { animation-delay: 4.1s; fill: #E9BAA0; }
@media (prefers-reduced-motion: reduce) {
  .hp-pagehead__spiral, .hp-pagehead__spiral .twinkle { animation: none; }
  .hp-pagehead__spiral .twinkle { opacity: 0.8; }
}
/* Telefoon: spiraal onder de tekst, niet eroverheen */
@media (max-width: 899px) {
  .hp-pagehead__spiral { position: static; width: 140px; margin: 8px 0 0 auto; opacity: 1; }
}

/* =====================================================================
   Telefoon: laatste verfijning (rustiger, korter, minder zware blokken)
   ===================================================================== */
/* Keuze "Eigen locatie / geen locatie": geen zware zwarte balk, maar een fijne omlijning */
.choice--row:has(input:checked) { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice--row:has(input:checked)::before { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 3px var(--bg); }

@media (max-width: 640px) {
  /* Voordelen in twee kolommen */
  .benefits { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .benefit { padding-top: 14px; gap: 6px; }
  .benefit__title { font-size: 16px; }
  .benefit__text { font-size: 14px; line-height: 1.5; }

  /* Foto's op workshoppagina's naast elkaar in plaats van onder elkaar */
  .gallery-2, .gallery-3 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gallery-2 .photo, .gallery-3 .photo { height: auto; aspect-ratio: 4 / 5; }
  .gallery-3 .photo:nth-child(3) { display: none; }
  .gallery-2 > .stack { gap: 8px !important; }
  .gallery-2 > .stack .photo { aspect-ratio: 4 / 5; }

  /* Formulier compacter */
  .request-form { gap: 16px; }
  .choices { gap: 8px; }
  .choice { padding: 10px 12px; }
  .choice__name { font-size: 15px; }
  .choice__sub { font-size: 12px; }
  .field__label { font-size: 14px; }

  /* Ervaringen: alles links uitgelijnd en iets kleiner */
  .hp-reviews { align-items: stretch; text-align: left; }
  .hp-quote blockquote { font-size: 19px; line-height: 1.45; text-wrap: pretty; }
  .hp-quotes figure { padding-top: 18px; }
  .hp-quotes blockquote { font-size: 15px; }

  /* Fotorij: swipen, geen ronde pijlknoppen */
  .carousel-controls { display: none; }

  /* Footer compact: naam op één regel, Workshops en Meer naast elkaar */
  .footer--pro { padding-top: 44px; padding-bottom: 24px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer__brand, .footer__top > .footer__col:last-child { grid-column: 1 / -1; }
  .footer--pro .footer__name { font-size: 13px; letter-spacing: 0.14em; }
  .footer__tag { font-size: 10px; letter-spacing: 0.14em; }
  .footer__col { gap: 9px; font-size: 14px; }
  .footer__h { margin-bottom: 2px; }
  .footer__bottom { margin-top: 28px; gap: 6px 16px; font-size: 12px; }
}
.request-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.request-form__submit:disabled { opacity: 0.6; cursor: wait; }

/* ---------- Ervaringen: raster op de pagina Workshops, citaat op workshoppagina's ---------- */
.hp-quotes--grid { max-width: 1200px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--col-gap); }
.ws-quote { margin: 0 auto; max-width: 860px; text-align: center; }
.ws-quote blockquote { margin: 0; font-family: 'Instrument Sans', sans-serif; font-size: clamp(20px, 2vw, 27px); line-height: 1.4; letter-spacing: -0.02em; text-wrap: balance; }
.ws-quote figcaption { margin-top: 16px; font-size: 14px; color: var(--muted); }
@media (max-width: 899px) { .hp-quotes--grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .hp-quotes--grid { grid-template-columns: 1fr; gap: 0; }
  .ws-quote { text-align: left; }
  .ws-quote blockquote { font-size: 19px; }
}

/* ---------- Korting als rustig regeltje op de cover ---------- */
.cover__deal { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cover__deal strong { font-weight: 600; color: var(--ink); }

/* ---------- Kleine labels iets beter leesbaar ---------- */
.hp-label, .eyebrow--caps, .cover__top, .kal__wd, .kal__more > summary, .footer__h, .ratecard__table thead th, .price__label { font-size: 12px; }
.cover__kind, .cover__num, .kal__today, .kal__legend, .kal__info-date, .kal__back { font-size: 12px; }
.rule-list--labels dt { font-size: 12px; }
:root { --muted: #544E47; }
@media (max-width: 640px) {
  .kal__wd { font-size: 11px; }
  .kal__today { font-size: 9px; }
}
/* Raster met acht ervaringen: vier kolommen op een groot scherm */
@media (min-width: 1100px) { .hp-quotes--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; } }

/* Alle ervaringen: losjes verspringend raster (korte en lange naast elkaar) */
.hp-quotes--grid { display: block; columns: 3 300px; column-gap: clamp(24px, 2.6vw, 40px); max-width: 1200px; }
.hp-quotes--grid > figure { break-inside: avoid; margin: 0 0 clamp(24px, 2.4vw, 36px); display: flex; }
.quotes--all { display: block; columns: 2 300px; column-gap: clamp(24px, 3vw, 48px); }
.quotes--all > figure { break-inside: avoid; margin: 0 0 clamp(24px, 2.4vw, 36px) !important; display: flex; flex-direction: column; gap: 12px; }
.cover__allreviews { align-self: center; margin-top: 4px; }
@media (max-width: 640px) { .hp-quotes--grid, .quotes--all { columns: 1; } .cover__allreviews { align-self: flex-start; } }
/* Ervaringen op de workshoppagina's */
.ws-reviews { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 3.4vw, 44px); }
.ws-reviews .hp-quotes--grid { width: 100%; text-align: left; }
@media (max-width: 640px) { .ws-reviews { align-items: stretch; } }
.hp-quotes--grid.hp-quotes--few { columns: 2 280px; max-width: 860px; margin-inline: auto; }

/* ---------- Ervaringen als scrollbare rij ---------- */
.review-row {
  display: flex !important; columns: auto !important; gap: clamp(20px, 2.4vw, 32px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: none !important; width: 100%;
  padding-bottom: 4px; text-align: left;
}
.review-row::-webkit-scrollbar { display: none; }
.review-row > figure { flex: 0 0 clamp(260px, 30%, 380px); margin: 0 !important; scroll-snap-align: start; break-inside: auto; }
.review-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.review-controls { display: flex; justify-content: flex-end; gap: 12px; width: 100%; margin-top: -8px; }
.review-controls .round-btn:disabled { opacity: 0.3; cursor: default; transform: none; }
.quotes--all.review-row > figure { flex-basis: clamp(260px, 42%, 440px); }
@media (max-width: 640px) {
  .review-row > figure, .quotes--all.review-row > figure { flex-basis: 84%; }
  .review-controls { display: none; }
}

/* ---------- Ervaringen kleiner en compacter ---------- */
/* Grote citaten */
.hp-quote blockquote, .ws-quote blockquote, .quote-main { font-size: clamp(17px, 1.45vw, 21px) !important; line-height: 1.5 !important; letter-spacing: -0.01em; max-width: 760px; margin-inline: auto; }
.quote-main { margin-inline: 0; }
.hp-quote figcaption, .ws-quote figcaption, .quote-main + figcaption { margin-top: 10px; font-size: 12px !important; }
.hp-quote, .ws-quote { max-width: 760px; }
/* Kaartjes in de rij */
.review-row { gap: clamp(16px, 1.8vw, 24px); }
.review-row > figure { flex-basis: clamp(220px, 23%, 300px); gap: 10px; padding-top: 14px !important; }
.quotes--all.review-row > figure { flex-basis: clamp(220px, 31%, 320px); }
.review-row blockquote, .review-row .quote__text { font-size: 14px !important; line-height: 1.55 !important; }
.review-row figcaption, .review-row .note { font-size: 11.5px !important; line-height: 1.4; }
/* Minder ruimte rond het blok */
.hp-reviews, .ws-reviews { gap: clamp(18px, 2.2vw, 28px) !important; }
.cover__reviews { margin-top: clamp(40px, 4vw, 64px); }
.review-controls { margin-top: -4px; }
.review-controls .round-btn { width: 40px; height: 40px; }
@media (max-width: 640px) {
  .review-row > figure, .quotes--all.review-row > figure { flex-basis: 78%; }
  .hp-quote blockquote, .ws-quote blockquote, .quote-main { font-size: 17px !important; }
}
/* Vlaggetjes bij de ervaringen kleiner */
.flag--inline { width: 12px; margin-left: 3px; vertical-align: 0; }
.review-row .flag--inline { width: 11px; }

/* =====================================================================
   Witte vlakken op belangrijke plekken (meer diepte, minder eentonig)
   ===================================================================== */
:root { --card: #FFFFFF; }
/* Tarieven */
.ratecard { background: var(--card); padding: clamp(20px, 2.8vw, 40px); max-width: 960px; }
.ratecard__table { border-top-color: var(--ink); }
/* Boekingsformulier */
.request-form { background: var(--card); padding: clamp(20px, 2.8vw, 40px); }
.choice { background: var(--card); }
.input--area { background: var(--card); }
/* Kalender */
.kalender { background: var(--card); padding: clamp(16px, 2.2vw, 28px); }
.kal__info.is-open { background: var(--bg); }
.kal__dag--leeg { background: rgba(27, 25, 23, 0.03); }
/* Ervaringen: witte kaartjes in de rij */
.review-row > figure { background: var(--card); padding: 18px 20px !important; border-top: 0 !important; }
.hp-quotes figure { border-top: 0; }
@media (max-width: 640px) {
  .ratecard, .request-form { padding: 18px 16px; }
  .kalender { padding: 12px; }
  .review-row > figure { padding: 16px 16px !important; }
}
/* Formulier: zacht warm-wit vlak; invulvakken en keuzes helder wit */
.request-form { background: #F7F2EA; }
.choice, .input--area { background: #FFFFFF; }
.input { background: transparent; }
/* Formulier weer zoals het was: beige, alleen keuzes en tekstvak wit */
.request-form { background: transparent; padding: 0; }
@media (max-width: 640px) { .request-form { padding: 0; } }
/* Spiraal: witte glinsteringen en witte sterretjes */
.hp-pagehead__spiral .spiral-glint { opacity: 0; animation: glint-in 1.6s ease 3.2s forwards, glint-shimmer 6s ease-in-out 4.8s infinite; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9)); }
@keyframes glint-in { to { opacity: 0.95; } }
@keyframes glint-shimmer { 0%, 100% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: -14; } }
.hp-pagehead__spiral .twinkle--white { fill: #FFFFFF; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 5px rgba(255, 246, 230, 0.8)); }
.hp-pagehead__spiral .twinkle--white:nth-of-type(9) { animation-delay: 2.1s; }
.hp-pagehead__spiral .twinkle--white:nth-of-type(10) { animation-delay: 3.6s; }
.hp-pagehead__spiral .twinkle--white:nth-of-type(11) { animation-delay: 2.7s; }
.hp-pagehead__spiral .twinkle--white:nth-of-type(12) { animation-delay: 4.7s; }
.hp-pagehead__spiral .twinkle--white:nth-of-type(13) { animation-delay: 3.2s; }
.hp-pagehead__spiral .twinkle--white:nth-of-type(14) { animation-delay: 5.3s; }
.hp-pagehead__spiral .twinkle--white:nth-of-type(15) { animation-delay: 2.4s; }
.hp-pagehead__spiral .twinkle--white:nth-of-type(16) { animation-delay: 4.0s; }
@media (prefers-reduced-motion: reduce) {
  .hp-pagehead__spiral .spiral-glint { animation: none; opacity: 0.9; }
}
/* Spiraal bij Workshops: zichtbaar maar rustig met de klok mee draaien */
.hp-pagehead__spiral { animation: spiral-clockwise 40s linear infinite; transform-origin: 50% 50%; }
@keyframes spiral-clockwise { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hp-pagehead__spiral { animation: none; } }
/* Spiraal: een paar kleine zwarte stipjes */
.hp-pagehead__spiral .twinkle--ink { fill: var(--ink); filter: none; }
.hp-pagehead__spiral .twinkle--ink:nth-of-type(17) { animation-delay: 2.9s; }
.hp-pagehead__spiral .twinkle--ink:nth-of-type(18) { animation-delay: 4.4s; }
.hp-pagehead__spiral .twinkle--ink:nth-of-type(19) { animation-delay: 3.5s; }
.hp-pagehead__spiral .twinkle--ink:nth-of-type(20) { animation-delay: 5.6s; }
.hp-pagehead__spiral .twinkle--ink:nth-of-type(21) { animation-delay: 2.2s; }
/* Spiraal: dun zwart lijntje dat meeloopt */
.hp-pagehead__spiral .spiral-ink { opacity: 0; animation: ink-in 1.8s ease 3s forwards; }
@keyframes ink-in { to { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .hp-pagehead__spiral .spiral-ink { animation: none; opacity: 0.55; } }

/* Welkomstscherm: dezelfde accenten als de spiraal bij Workshops (huisstijl) */
.welcome__mark .spiral-ink { opacity: 0; animation: ink-in 1.8s ease 2.6s forwards; }
.welcome__mark .spiral-glint { opacity: 0; animation: glint-in 1.6s ease 2.9s forwards, glint-shimmer 6s ease-in-out 4.5s infinite; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9)); }
.welcome__mark .twinkle--white { fill: #FFFFFF; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 5px rgba(255, 246, 230, 0.8)); }
.welcome__mark .twinkle--ink { fill: var(--ink); filter: none; }
.welcome__mark .twinkle:nth-of-type(9) { animation-delay: 2.1s; }
.welcome__mark .twinkle:nth-of-type(10) { animation-delay: 3.6s; }
.welcome__mark .twinkle:nth-of-type(11) { animation-delay: 2.7s; }
.welcome__mark .twinkle:nth-of-type(12) { animation-delay: 4.7s; }
.welcome__mark .twinkle:nth-of-type(13) { animation-delay: 3.2s; }
.welcome__mark .twinkle:nth-of-type(14) { animation-delay: 5.3s; }
.welcome__mark .twinkle:nth-of-type(15) { animation-delay: 2.4s; }
.welcome__mark .twinkle:nth-of-type(16) { animation-delay: 4.0s; }
.welcome__mark .twinkle:nth-of-type(17) { animation-delay: 2.9s; }
.welcome__mark .twinkle:nth-of-type(18) { animation-delay: 4.4s; }
.welcome__mark .twinkle:nth-of-type(19) { animation-delay: 3.5s; }
.welcome__mark .twinkle:nth-of-type(20) { animation-delay: 5.6s; }
.welcome__mark .twinkle:nth-of-type(21) { animation-delay: 2.2s; }
@media (prefers-reduced-motion: reduce) {
  .welcome__mark .spiral-ink { animation: none; opacity: 0.55; }
  .welcome__mark .spiral-glint { animation: none; opacity: 0.9; }
}
/* Kalender: sterrenbeelden */
.kal__zod { display: inline-block; font-family: 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols', serif; font-size: 12px; line-height: 1; color: var(--muted); font-variant-emoji: text; }
.kal__marks .kal__zod { font-size: 11px; }
.kal__li-icon .kal__zod, .kal__info-name .kal__zod { font-size: 15px; color: var(--ink); }
.kal__dag.is-zod::after { content: ""; position: absolute; left: 8px; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--terra); opacity: 0.75; }
/* Hoe het werkt: drie witte kaartjes */
.hp-steps { border-top: 0; padding-top: 0; gap: clamp(12px, 1.6vw, 20px); }
.hp-steps li { background: var(--card); padding: clamp(18px, 2vw, 26px); }
@media (max-width: 640px) { .hp-steps { gap: 10px; } .hp-steps li { padding: 16px; } }
/* Drie workshops: echte kaarten, foto boven en tekst op wit */
.hp-ws__item { background: var(--card); }
.hp-ws__body { padding: clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px); }
.hp-ws__item:hover { box-shadow: 0 1px 0 var(--line), 0 14px 30px -18px rgba(60, 45, 30, 0.35); }
/* Workshopkaarten: bij aanwijzen of aantikken de kleur van de workshop */
.hp-ws__item { transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.5s var(--spring); }
.hp-ws__item--move { --hover: #C6CDB4; }
.hp-ws__item--paint { --hover: #DDB49F; }
.hp-ws__item--both { --hover: #C3CAD2; }
.hp-ws__item:hover, .hp-ws__item:focus-visible, .hp-ws__item:active { background: var(--hover); }

/* Berichtveld wit */
.input.input--area { background: var(--card); }

/* Locatiekeuze zwart als aangeklikt */
.choice--row:has(input[name="plek"]:checked) { background: var(--ink); border-color: var(--ink); color: #FFFFFF; box-shadow: none; }
.choice--row:has(input[name="plek"]:checked)::before { border-color: #FFFFFF; background: #FFFFFF; box-shadow: inset 0 0 0 3px var(--ink); }

/* Spiraal rustiger: geen gloed, geen sterretjes, heel traag draaien */
.welcome__mark { filter: none; animation-duration: 160s; }
.hp-pagehead__spiral { animation-duration: 160s; }

/* Logo-spiraal in dezelfde stijl als het welkomstscherm: zandkleurige lijn + dun zwart lijntje */
.logo-and__mark { opacity: 0.6; }
.logo-and__line { stroke: var(--sand); }
.logo-and__ink { opacity: 0.45; }
.nav__logo:hover .logo-and__mark, a.footer__name:hover .logo-and__mark { opacity: 0.85; }
.footer__name .logo-and__mark { opacity: 0.6; }

/* Stipjes terug, maar zonder gloed: rustig en grafisch */
.hp-pagehead__spiral .twinkle--white, .welcome__mark .twinkle--white { filter: none; }

/* Carrousel: foto's een tikkeltje laten opgaan in de achtergrond */
.marquee img { mix-blend-mode: multiply; opacity: 0.94; }

/* Alles een tikkeltje ingeblend: witte vlakken warm gebroken wit, foto's gaan op in de achtergrond */
:root { --card: #FFFFFF; }
.choice, .input--area, .input.input--area { background: var(--card); }
main img, .marquee img { mix-blend-mode: multiply; opacity: 0.94; }

/* Workshopkaarten: foto blendt alleen met het gebroken wit, niet met de hoverkleur */
.hp-ws__img { background: var(--card); isolation: isolate; }

/* Alle halfdoorzichtige vlakken ook echt wit */
.pill--sage, .facts div, .hp-quotes figure, .kal__info, .kal__info.is-open { background: var(--card); }

/* Voordelen (bijv. Spanning loslaten) als witte vlakken, net als de stappen */
.benefits { gap: clamp(12px, 1.6vw, 20px); }
.benefit { background: var(--card); border-top: 0; padding: clamp(18px, 2vw, 26px); }
@media (max-width: 640px) { .benefit { padding: 16px; } }

/* Spiraal B: zandkleurige handlijn + strakke zwarte haarlijn (gulden snede) met een stip in het hart */
@keyframes hair-in { to { opacity: 0.9; } }
.hp-pagehead__spiral .spiral-ink, .welcome__mark .spiral-ink { animation-name: hair-in; }
.spiral-eye { opacity: 0; animation: hair-in 1.2s ease 3.2s forwards; }
.logo-and__ink { opacity: 0.8; }
@media (prefers-reduced-motion: reduce) { .hp-pagehead__spiral .spiral-ink, .welcome__mark .spiral-ink, .spiral-eye { animation: none; opacity: 0.9; } }

/* Voordelen: titel half in en half buiten het witte vlak */
.benefits { row-gap: clamp(30px, 3vw, 40px); padding-top: 0.7em; }
.benefit { padding-top: 0; overflow: visible; }
.benefit__title { margin-top: -0.62em; line-height: 1.2; }
@media (max-width: 640px) { .benefit { padding-top: 0; } .benefits { row-gap: 28px; } }

/* Logo-spiraal veel zachter */
.logo-and__mark, .footer__name .logo-and__mark { opacity: 0.32; }
.logo-and__ink { opacity: 0.5; }
.nav__logo:hover .logo-and__mark, a.footer__name:hover .logo-and__mark { opacity: 0.55; }

/* Voordelen: titels sierlijker en speelser in Instrument Serif, groot en duidelijk */
.benefit__title { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(26px, 2.3vw, 32px); letter-spacing: -0.01em; line-height: 1.05; margin-top: -0.5em; }
@media (max-width: 640px) { .benefit__title { font-size: 23px; } }

/* Voor wie: Groepen en 1-op-1 als blokken in dezelfde stijl */
.benefits--2 { grid-template-columns: 1fr; margin: 22px 0 8px; }
@media (min-width: 640px) { .benefits--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .benefits--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.benefit__link { margin-top: auto; align-self: flex-start; font-size: 15px; }

/* Voordelen: titel weer helemaal in het witte vlak */
.benefits { padding-top: 0; row-gap: clamp(12px, 1.6vw, 20px); }
.benefit { padding-top: clamp(18px, 2vw, 26px); }
.benefit__title { margin-top: 0; }
@media (max-width: 640px) { .benefit { padding-top: 16px; } .benefits { row-gap: 12px; } }
.benefits--2 { margin: 8px 0 8px; }

/* Voor wie op de workshoppagina's: Groepen en 1-op-1 als witte blokken, net als de voordelen */
.audience { gap: clamp(12px, 1.6vw, 20px); }
.audience__card { background: var(--card); border-top: 0; padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; gap: 10px; }
main .audience .audience__card h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(26px, 2.3vw, 32px); letter-spacing: -0.01em; line-height: 1.05; }
.audience__card p { font-size: 16px; line-height: 1.55; }
.audience__card .note { margin-top: auto; padding-top: 6px; }
@media (max-width: 640px) { .audience__card { padding: 16px; } main .audience .audience__card h3 { font-size: 23px; } .audience__card p { font-size: 14px; line-height: 1.5; } }

/* Homepage: wat en voor wie boven de kop, knoppen, en het blok "Waarom bewegen én schilderen?" */
.cover__what { grid-column: 1 / -1; max-width: 640px; text-transform: none; letter-spacing: 0; font-size: 15px !important; color: var(--ink); margin-bottom: calc(clamp(20px, 2.2vw, 30px) * -0.5); }
.cover__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hp-why { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap, 24px); row-gap: 14px; margin-top: clamp(48px, 5vw, 80px); background: var(--card); padding: clamp(22px, 3vw, 44px); }
.hp-why .hp-label { grid-column: 1 / span 4; }
.hp-why__text { grid-column: 5 / -1; font-family: 'Instrument Serif', serif; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.25; letter-spacing: -0.01em; max-width: 40ch; }
@media (max-width: 760px) { .hp-why .hp-label, .hp-why__text { grid-column: 1 / -1; } }

/* Workshops: vier veelgestelde vragen boven het formulier */
.hp-faq { display: flex; flex-direction: column; gap: 20px; }
.hp-faq__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.hp-why__note { grid-column: 5 / -1; font-size: 15px; color: var(--muted); }
@media (max-width: 760px) { .hp-why__note { grid-column: 1 / -1; } }

/* Homepage: lezerszin naast de foto in een wit blok */
.cover__lead { background: var(--card); padding: clamp(18px, 2vw, 26px); }

/* Opbouw met vier stappen: vier naast elkaar op de computer */
@media (min-width: 1100px) { .phases { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Opbouw: totaal onder de stappen */
.phases__total { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--ink); padding-top: 14px; font-size: 17px; font-weight: 600; }
.phases__total span:first-child { font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); align-self: center; }

/* Opbouw: stappen als witte blokken, net als de andere blokken */
.phases { gap: clamp(12px, 1.6vw, 20px); }
.phase { background: var(--card); border-top: 0; padding: clamp(18px, 2vw, 26px); }
@media (max-width: 640px) { .phase { padding: 16px; } }
.phases__total { margin-top: clamp(4px, 1vw, 8px); }

/* Minder blokken: wit alleen voor wat je kiest of aanklikt. De rest is tekst met een dunne lijn erboven */
.cover__lead { background: transparent; padding: 0; }
.hp-steps li, .benefit, .phase, .audience__card { background: transparent; border-top: 1px solid var(--sand); padding: 18px 0 0; }
.hp-steps, .benefits, .phases, .audience { gap: clamp(20px, 2.4vw, 36px) clamp(20px, 2.6vw, 40px); }
@media (max-width: 640px) { .hp-steps li, .benefit, .phase, .audience__card { padding: 14px 0 0; } }

/* Homepage rustiger, vooral op de telefoon */
.cover__side .cover__actions { flex-direction: column; align-items: flex-start; gap: 14px; }
@media (max-width: 760px) {
  .cover__side { gap: 28px; }
  .cover__side .cover__actions { align-items: stretch; text-align: center; }
  .cover__side .cover__actions .btn { width: 100%; justify-content: center; }
  .cover__side .cover__actions .arrow-link { align-self: center; }
  .hp-why { padding: 22px 20px; }
  .hp-why__text { font-size: 21px; line-height: 1.3; }
}

/* Telefoon: spiraal klein rechts naast de titel "Workshops", geen lege ruimte eronder */
@media (max-width: 899px) {
  .hp > .hp-pagehead { position: relative; }
  .hp > .hp-pagehead > .hp-pagehead__spiral { position: absolute; right: var(--gutter); top: calc(clamp(32px, 4.5vw, 72px) + 44px); width: 92px; height: 92px; margin: 0; }
}
.hp-why__note { font-size: 13px; }

/* Homepage-top: alleen de landen, rechts, en niet op de telefoon */
.cover__top { justify-content: flex-end; }
@media (max-width: 760px) { .cover__top { display: none; } }

/* Foto van Reena bij "Door Reena" op volle sterkte, zonder blend */
main .byline img { mix-blend-mode: normal; opacity: 1; }

/* "Of één van de twee." hoort bij de kop: zelfde serif, klein en zacht, dicht eronder */
.cover__sub { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -0.01em; line-height: 1.1; color: var(--muted); margin-top: calc(clamp(20px, 2.2vw, 30px) * -0.75); }

/* "Of één van de twee." rechts onder "dan schilderen." */
.cover__head { grid-column: 1 / -1; width: fit-content; max-width: 100%; display: flex; flex-direction: column; }
.cover__head .cover__sub { align-self: flex-end; text-align: right; margin-top: 0.15em; }

/* Datum als drie keuzelijsten: dag, maand, jaar */
.date-select { display: grid; grid-template-columns: 0.8fr 1.6fr 1fr; gap: 8px; }
.date-select select.input { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231B1917' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; color: var(--ink); font: inherit; min-width: 0; }
.date-select select.input:invalid { color: var(--muted); }
.date-select { grid-template-columns: 0.7fr 1.6fr; }

/* Formulier stijlvoller: labels in de kleine hoofdletters van de site, rustige velden, nette datum */
.request-form .field__label { font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.request-form .field__label .field__label--small { letter-spacing: 0.04em; text-transform: none; }
.request-form .field__label--small { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.request-form .field { gap: 6px; }
.date-select { gap: 18px; }
.date-select select.input { background-size: 9px 5px; background-position: right 2px center; padding-left: 2px; font-size: 16px; }
.date-select select.input:invalid, .request-form .input::placeholder { color: rgba(90, 84, 77, 0.6); }
.request-form .choice__name { font-weight: 500; }

/* Boeken: WhatsApp- en Instagram-link een tikje kleiner */
.cta__intro .arrow-link { font-size: 13px; }
.cta__intro .ig-icon { width: 16px; height: 16px; }

/* Openingsfoto iets hoger bijgesneden */
.cover__photo img { aspect-ratio: 1206 / 690; }

/* Openingsfoto en rechterkolom even hoog: kolom compacter, foto vult de hoogte */
@media (min-width: 900px) {
  .cover__side { gap: 20px; }
  .cover__side .cover__lead { margin-bottom: 4px; }
  .cover__side { gap: 16px; }
  .cover__photo img { aspect-ratio: 1206 / 690; object-position: center top; }
  .cover > .cover__photo { grid-column: 1 / span 8; }
  .cover > .cover__side { grid-column: 9 / -1; padding-left: 0; }
  .cover__side .cover__lead { font-size: clamp(17px, 1.35vw, 20px); }
  .cover__side .cover__kind { white-space: nowrap; letter-spacing: 0.1em; }
  .cover__side .cover__index a { padding-block: 8px; }
  .cover__side .cover__index a { padding-block: 9px; }
}

/* Homepage-top als magazinekop: links wat en voor wie, rechts de landen, in kleine gespatieerde hoofdletters */
.cover__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--line, rgba(27,25,23,0.15)); padding-bottom: 12px; }
.cover__top .cover__what { font-size: 11.5px !important; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); max-width: none; margin: 0; }
@media (max-width: 760px) {
  .cover__top { display: flex; }
  .cover__top .cover__where { display: none; }
  .cover__top .cover__what { font-size: 10.5px !important; letter-spacing: 0.14em; line-height: 1.6; }
}

/* Inhoud-lijstje: labels rechts alleen als er ruimte is, anders netjes weg */
.cover__side { container-type: inline-size; }
.cover__index .cover__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 380px) {
  .cover__index .cover__kind { display: none; }
  .cover__index a { grid-template-columns: 30px 1fr; }
}

/* Opbouw als rustige tijdlijn: tijd links, titel in serif, korte tekst, dunne lijnen */
.phases { display: block; border-top: 1px solid var(--ink); }
.phase { display: grid; grid-template-columns: 110px minmax(140px, 220px) 1fr; column-gap: clamp(16px, 3vw, 48px); align-items: baseline; background: transparent; border-top: 0; border-bottom: 1px solid var(--line, rgba(27,25,23,0.12)); padding: clamp(16px, 1.8vw, 22px) 0; }
.phase__head { display: contents; }
.phase__head .note { grid-column: 1; grid-row: 1; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.phase__title { grid-column: 2; grid-row: 1; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(24px, 2vw, 30px); letter-spacing: -0.01em; line-height: 1.1; }
.phase__text { grid-column: 3; grid-row: 1; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 520px; }
.phases__total { border-top: 0; padding-top: 14px; margin-top: 0; justify-content: flex-start; gap: clamp(16px, 3vw, 48px); font-weight: 500; }
.phases__total span:first-child { width: 110px; }
@media (max-width: 760px) {
  .phase { grid-template-columns: 70px 1fr; row-gap: 4px; }
  .phase__head .note { grid-column: 1; grid-row: 1 / span 2; }
  .phase__title { grid-column: 2; grid-row: 1; font-size: 22px; }
  .phase__text { grid-column: 2; grid-row: 2; font-size: 14px; }
  .phases__total span:first-child { width: 70px; }
}

/* Intuitive Painting: "Wat er ontstaat" met het schilderij feel/leef */
.feel { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: end; }
.feel__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.feel__text { display: flex; flex-direction: column; gap: 12px; }
.feel__word { font-family: 'Instrument Serif', serif; font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -0.02em; }
.feel__note { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 340px; }
@media (min-width: 900px) { .feel { grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 64px); } }

/* Kalender: vandaag zonder woord, alleen in terracotta */
.kal__dag.is-vandaag .kal__num { background: var(--terra); color: #FFFFFF; }
.kal__dag.is-vandaag { box-shadow: inset 0 0 0 1px var(--terra); }
.kal__dag.is-vandaag.is-gekozen { box-shadow: inset 0 0 0 2px var(--terra); }
.feel__credit { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

/* Welkomstscherm: spiraal stijlvoller, minder sierlijk. Eén zandkleurige lijn, de zwarte haarlijn, alleen een paar kleine zwarte stipjes */
.welcome__mark .welcome__line { stroke: #B9A88F; stroke-width: 1.5; }
.welcome__mark .twinkle:not(.twinkle--ink) { display: none; }
.welcome__mark .twinkle--ink { animation: none; opacity: 0.55; }
.welcome__mark .spiral-eye { fill: var(--ink); }

/* Workshops-spiraal in dezelfde stijlvolle versie als het welkomstscherm */
.hp-pagehead__spiral path:not(.spiral-ink):not(.spiral-eye):not(.spiral-white) { stroke: #B9A88F; }
.hp-pagehead__spiral .twinkle:not(.twinkle--ink) { display: none; }
.hp-pagehead__spiral .twinkle--ink { animation: none; opacity: 0.55; }
.logo-and__line { stroke: #B9A88F; }
/* Witte lijn in de spiraal, komt zacht op na de tekening */
.spiral-white { opacity: 0; animation: white-in 1.6s ease 3s forwards; }
@keyframes white-in { to { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) { .spiral-white { animation: none; opacity: 0.95; } }
.hp-pagehead__spiral path.spiral-white, .welcome__mark path.spiral-white { stroke: #FFFFFF; opacity: 0; animation: white-in 1.6s ease 3s forwards; }
@media (prefers-reduced-motion: reduce) { .hp-pagehead__spiral path.spiral-white, .welcome__mark path.spiral-white { animation: none; opacity: 0.95; } }
.hp-pagehead__spiral path.spiral-white, .welcome__mark path.spiral-white { animation: none; opacity: 0.95; }


/* "Of één van de twee." in een fijn handschrift, rechtop, in zacht inkt-grijs */
.cover__head .cover__sub { font-family: 'Sacramento', 'Instrument Serif', cursive; font-weight: 400; font-size: clamp(38px, 3.9vw, 58px); line-height: 1; letter-spacing: 0; color: #5F6E80; margin-top: 0.05em; }
@media (max-width: 760px) { .cover__head .cover__sub { font-size: 38px; } }
/* Handgeschreven regel loopt een beetje over de kop heen */
.cover__head .cover__sub { position: relative; z-index: 1; margin-top: 0.05em; margin-right: -1.9em; }
@media (max-width: 760px) { .cover__head .cover__sub { margin-top: 0.05em; margin-right: -0.5em; } }

/* "Of één van de twee." weer in de serif van de kop, rustig, in het blauwgrijs, rechts onder de kop */
.cover__head .cover__sub { font-family: 'Instrument Serif', serif; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.1; letter-spacing: -0.01em; color: #5F6E80; margin-top: 0.15em; margin-right: 0; }
@media (max-width: 760px) { .cover__head .cover__sub { font-size: 22px; margin-top: 0.15em; margin-right: 0; } }

/* Logo zonder spiraal: alleen de naam */
.logo-and__mark { display: none; }

/* Kleine foto's bij de tekst, zoals in een magazine */
.hp-steps__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 14px; }
@media (max-width: 640px) {
  .hp-steps li { grid-template-columns: 96px 1fr; column-gap: 16px; align-items: start; }
  .hp-steps__img { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 4 / 5; margin: 0; }
  .hp-steps__num { grid-column: 2; grid-row: 1; padding-top: 0; }
  .hp-steps h3 { grid-column: 2; grid-row: 2; }
  .hp-steps p { grid-column: 2; grid-row: 3; }
}
.hp-why__img { grid-column: 1 / span 3; grid-row: 2; width: 100%; max-width: 220px; aspect-ratio: 4 / 5; object-fit: cover; align-self: end; }
.hp-why .hp-label { grid-row: 1; }
.hp-why__text { grid-row: 1 / span 2; }
@media (max-width: 760px) {
  .hp-why { grid-template-columns: 1fr 112px; column-gap: 16px; row-gap: 16px; }
  .hp-why .hp-label { grid-column: 1; grid-row: 1; align-self: end; }
  .hp-why__img { grid-column: 2; grid-row: 1; max-width: none; }
  .hp-why__text { grid-column: 1 / -1; grid-row: 2; }
}
.hp-solo__img { width: 140px; aspect-ratio: 4 / 5; object-fit: cover; margin-top: 8px; }

/* Waarom bewegen én schilderen: twee kleine foto's, bewegen en schilderen */
.hp-why__imgs { grid-column: 1 / span 4; grid-row: 2; display: flex; gap: 10px; align-self: end; max-width: 300px; }
.hp-why__imgs img { width: 50%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .hp-why { grid-template-columns: 1fr; }
  .hp-why .hp-label { grid-column: 1; grid-row: 1; }
  .hp-why__imgs { grid-column: 1; grid-row: 2; max-width: 240px; }
  .hp-why__text { grid-column: 1; grid-row: 3; }
}

/* Workshops-kop: wat en voor wie in dezelfde magazinestijl als de homepage */
.hp-pagehead__what { margin: 0; font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--line, rgba(27,25,23,0.15)); padding-bottom: 12px; max-width: 520px; }
@media (max-width: 760px) { .hp-pagehead__what { font-size: 10.5px; letter-spacing: 0.14em; line-height: 1.6; max-width: calc(100% - 110px); } }

/* "Hoe het werkt" naast de stappen: eerst de zin, dan het label met Bewegen, Schilderen, Delen */
.hp-intro > .hp-statement { grid-row: 1; }
.hp-intro > .hp-label { grid-row: 2; align-self: start; padding-top: 0; }
.hp-intro > .hp-steps { grid-row: 2; }
@media (max-width: 899px) {
  .hp-intro > .hp-statement { grid-row: 1; }
  .hp-intro > .hp-label { grid-row: 2; margin-bottom: -16px; }
  .hp-intro > .hp-steps { grid-row: 3; }
}

/* Workshops-spiraal groter */
.hp-pagehead__spiral { width: clamp(220px, 32vw, 470px); }
@media (max-width: 899px) {
  .hp > .hp-pagehead > .hp-pagehead__spiral { width: 116px; height: 116px; top: calc(clamp(32px, 4.5vw, 72px) + 2px); }
  .hp-pagehead__what { max-width: calc(100% - 140px); }
}

/* Stipjes komen later, één voor één, nadat de spiraal er staat */
@keyframes dot-in { from { opacity: 0; transform: scale(0.3); } to { opacity: 0.55; transform: scale(1); } }
.welcome__mark .twinkle--ink, .hp-pagehead__spiral .twinkle--ink { opacity: 0; transform-box: fill-box; transform-origin: center; animation: dot-in 0.9s ease forwards; }
.welcome__mark .twinkle--ink:nth-of-type(17), .hp-pagehead__spiral .twinkle--ink:nth-of-type(17) { animation-delay: 3.4s; }
.welcome__mark .twinkle--ink:nth-of-type(18), .hp-pagehead__spiral .twinkle--ink:nth-of-type(18) { animation-delay: 4.0s; }
.welcome__mark .twinkle--ink:nth-of-type(19), .hp-pagehead__spiral .twinkle--ink:nth-of-type(19) { animation-delay: 4.6s; }
.welcome__mark .twinkle--ink:nth-of-type(20), .hp-pagehead__spiral .twinkle--ink:nth-of-type(20) { animation-delay: 5.2s; }
.welcome__mark .twinkle--ink:nth-of-type(21), .hp-pagehead__spiral .twinkle--ink:nth-of-type(21) { animation-delay: 5.8s; }
@media (prefers-reduced-motion: reduce) { .welcome__mark .twinkle--ink, .hp-pagehead__spiral .twinkle--ink { animation: none; opacity: 0.55; } }

/* Stipjes in de kleuren van de workshops, plus zwart en wit */
.welcome__mark .twinkle--ink:nth-of-type(17), .hp-pagehead__spiral .twinkle--ink:nth-of-type(17) { fill: #8E9A72; }
.welcome__mark .twinkle--ink:nth-of-type(18), .hp-pagehead__spiral .twinkle--ink:nth-of-type(18) { fill: #B86E50; }
.welcome__mark .twinkle--ink:nth-of-type(19), .hp-pagehead__spiral .twinkle--ink:nth-of-type(19) { fill: #5F6E80; }
.welcome__mark .twinkle--ink:nth-of-type(20), .hp-pagehead__spiral .twinkle--ink:nth-of-type(20) { fill: #1B1917; }
.welcome__mark .twinkle--ink:nth-of-type(21), .hp-pagehead__spiral .twinkle--ink:nth-of-type(21) { fill: #FFFFFF; }
@keyframes dot-in-full { from { opacity: 0; transform: scale(0.3); } to { opacity: 0.9; transform: scale(1); } }
.welcome__mark .twinkle--ink, .hp-pagehead__spiral .twinkle--ink { animation-name: dot-in-full; }
.welcome__mark .twinkle--white:nth-of-type(10), .hp-pagehead__spiral .twinkle--white:nth-of-type(10),
.welcome__mark .twinkle--white:nth-of-type(14), .hp-pagehead__spiral .twinkle--white:nth-of-type(14) { display: inline; fill: #FFFFFF; filter: none; opacity: 0; transform-box: fill-box; transform-origin: center; animation: dot-in-full 0.9s ease 6.4s forwards; }
.welcome__mark .twinkle--white:nth-of-type(14), .hp-pagehead__spiral .twinkle--white:nth-of-type(14) { animation-delay: 7s; }
@media (prefers-reduced-motion: reduce) { .welcome__mark .twinkle--ink, .hp-pagehead__spiral .twinkle--ink, .welcome__mark .twinkle--white, .hp-pagehead__spiral .twinkle--white { animation: none; opacity: 0.9; } }
/* Precies vijf stipjes: groen, terracotta, blauw, zwart, wit */
.welcome__mark .twinkle--white, .hp-pagehead__spiral .twinkle--white { display: none !important; }

/* Kalender-blok: "Nieuwe eventdata volgen binnenkort." en de Instagram-link kleiner */
.agenda__empty { font-size: 15px !important; }
.hp-agenda .hp-solo__end .arrow-link { font-size: 13px; }

/* Teller bij de ervaringen, bijv. 3 / 14 */
.review-controls { align-items: center; }
.review-count { font-size: 12px; letter-spacing: 0.16em; color: var(--muted); font-variant-numeric: tabular-nums; margin-right: auto; }
@media (max-width: 760px) {
  .review-controls { display: flex !important; margin-top: 4px; }
  .review-controls .round-btn { display: none; }
}

/* Welkomstscherm: spiraal groter, zoals op de Workshops-pagina */
.welcome__mark { width: 3.4em; height: 3.4em; }
@media (max-width: 640px) { .welcome__mark { width: 2.8em; height: 2.8em; } }

/* Voor wie: praktische info als magazinekader, twee kolommen, genummerd, waarde in serif */
.hp-who .rule-list--labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 36px); row-gap: 0; border-top: 1px solid var(--ink); border-bottom: 0; counter-reset: info; margin-top: 12px; }
.hp-who .rule-list--labels > div { display: flex; flex-direction: column; gap: 8px; padding: 18px 0 20px; border-bottom: 1px solid var(--sand); counter-increment: info; }
.hp-who .rule-list--labels dt, .hp-who .rule-list--labels dd { border: 0; padding: 0; }
.hp-who .rule-list--labels dt { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.hp-who .rule-list--labels dt::before { content: counter(info, decimal-leading-zero) "  ·  "; color: #B9A88F; white-space: pre; }
.hp-who .rule-list--labels dd { font-family: 'Instrument Serif', serif; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
@media (max-width: 760px) {
  .hp-who .rule-list--labels { column-gap: 18px; }
  .hp-who .rule-list--labels dd { font-size: 17px; }
}
@media (max-width: 360px) { .hp-who .rule-list--labels { grid-template-columns: 1fr; } }

/* Voor wie: Groepen en 1-op-1 als twee magazinekaartjes met foto */
.hp-who .benefits--2 { gap: clamp(18px, 2.4vw, 32px); margin: 18px 0 8px; }
.hp-who .benefits--2 .benefit { border-top: 0; padding: 0; gap: 10px; }
.hp-who .benefits--2 .benefit__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 4px; }
.hp-who .benefits--2 .benefit__title { font-size: clamp(24px, 2vw, 30px); padding-top: 10px; border-top: 1px solid var(--ink); }
.hp-who .benefits--2 .benefit__text { font-size: 15px; line-height: 1.6; color: var(--muted); }
.hp-who .benefits--2 .benefit__link { font-size: 14px; margin-top: 4px; }
@media (max-width: 640px) {
  .hp-who .benefits--2 { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hp-who .benefits--2 .benefit__title { font-size: 20px; }
  .hp-who .benefits--2 .benefit__text { font-size: 13.5px; }
}

/* Welkomstscherm: taalkeuze kleiner en stijlvoller, in kleine gespatieerde hoofdletters met mini-vlaggetjes */
.welcome__langs { gap: 6px 26px; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; }
.welcome__langs a { gap: 7px; padding: 4px 0; }
.welcome__langs .flag { width: 16px; height: 11px; border-radius: 2px; opacity: 0.7; }
.welcome__langs a[aria-current] { font-weight: 500; }
.welcome__langs a[aria-current] span { border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.welcome__langs a:hover span { text-decoration: none; border-bottom: 1px solid var(--muted); padding-bottom: 3px; }
@media (max-width: 640px) { .welcome .welcome__langs { gap: 6px 14px; font-size: 10px !important; letter-spacing: 0.12em; flex-wrap: nowrap; } }

/* Waarom bewegen én schilderen: als magazinepagina. Geen wit kader, twee verspringende foto's met onderschrift, tekst groot in serif met een initiaal */
.hp-why { background: transparent; padding: clamp(28px, 3vw, 44px) 0 0; border-top: 1px solid var(--ink); row-gap: 18px; align-items: start; }
.hp-why .hp-label { grid-column: 1 / -1; grid-row: 1; }
.hp-why__imgs { grid-column: 1 / span 5; grid-row: 2; max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); align-self: start; }
.hp-why__imgs figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.hp-why__imgs figure:last-child { margin-top: clamp(40px, 6vw, 90px); }
.hp-why__imgs img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.hp-why__imgs figcaption { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.hp-why__text { grid-column: 7 / -1; grid-row: 2; max-width: 30ch; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.22; }
.hp-why__text::first-letter { float: left; font-size: 3.4em; line-height: 0.82; padding: 0.06em 0.1em 0 0; color: #5F6E80; }
@media (max-width: 760px) {
  .hp-why { padding-top: 22px; }
  .hp-why .hp-label { grid-column: 1; grid-row: 1; }
  .hp-why__imgs { grid-column: 1; grid-row: 2; max-width: none; gap: 12px; }
  .hp-why__imgs figure:last-child { margin-top: 36px; }
  .hp-why__text { grid-column: 1; grid-row: 3; font-size: 22px; max-width: none; }
}
/* Geen grote beginletter: de tekst leest gewoon als één zin */
.hp-why__text::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; color: inherit; }
/* "Waarom bewegen én schilderen?" als echte kop, in de serif van de site */
.hp-why .hp-label { font-family: 'Instrument Serif', serif; font-size: clamp(30px, 3.2vw, 46px) !important; font-weight: 400; letter-spacing: -0.015em; line-height: 1.05; text-transform: none; color: var(--ink); margin-bottom: 8px; }
@media (max-width: 760px) { .hp-why .hp-label { font-size: 30px !important; } }

/* Goed om te weten: duidelijke lijst, label links, antwoord rechts, één kolom */
.hp-who__info-title { font-family: 'Instrument Serif', serif; font-size: clamp(24px, 2vw, 30px); line-height: 1.1; margin: 28px 0 0; }
.hp-who .rule-list--labels { display: block; border-top: 1px solid var(--ink); counter-reset: none; margin-top: 12px; }
.hp-who .rule-list--labels > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--sand); }
.hp-who .rule-list--labels dt::before { content: none; }
.hp-who .rule-list--labels dt { font-size: 11px; letter-spacing: 0.18em; }
.hp-who .rule-list--labels dd { font-family: 'Instrument Sans', sans-serif; font-size: 15px; line-height: 1.55; letter-spacing: 0; }
@media (max-width: 760px) {
  .hp-who .rule-list--labels > div { grid-template-columns: 92px 1fr; gap: 12px; }
  .hp-who .rule-list--labels dd { font-size: 14.5px; }
}

/* Totaalregel onder "Hoe het verloopt" / "Praktisch", in dezelfde stijl als bij de opbouw */
.rule-list--spread > div.rule-total { border-top: 1px solid var(--ink); border-bottom: 0; align-items: baseline; }
.rule-list--spread > div.rule-total span:first-child { font-size: 11.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.rule-list--spread > div.rule-total span:last-child { font-weight: 600; }
.rule-list--spread > div:nth-last-child(2) { border-bottom: 0; }

/* Kies een thema: kopje met vier thema's in de magazinestijl */
.hp-themes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 24px; }
.hp-themes__head { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 12px; }
.hp-themes__intro { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 36ch; }
.hp-themes__list { grid-column: 5 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 40px); border-top: 1px solid var(--ink); }
.hp-themes__list li { padding: 16px 0 18px; border-bottom: 1px solid var(--sand); display: flex; flex-direction: column; gap: 6px; }
.hp-themes__list h3 { margin: 0; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(24px, 2vw, 30px); letter-spacing: -0.01em; line-height: 1.1; }
.hp-themes__list p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.hp-themes__note { grid-column: 5 / -1; font-size: 14px; color: var(--muted); }
@media (max-width: 899px) {
  .hp-themes__head, .hp-themes__list, .hp-themes__note { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hp-themes__list { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .hp-themes__list h3 { font-size: 21px; }
  .hp-themes__list p { font-size: 13.5px; }
}
/* Vijfde thema over de volle breedte */
.hp-themes__list li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Ook als traject: klein blokje onder de thema's */
.hp-themes__traject { grid-column: 5 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding-top: 16px; border-top: 1px solid var(--ink); }
.hp-themes__traject h3 { margin: 0; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(22px, 1.8vw, 26px); }
.hp-themes__traject p { margin: 0; flex: 1 1 280px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.hp-themes__traject .arrow-link { font-size: 14px; }
@media (max-width: 899px) { .hp-themes__traject { grid-column: 1 / -1; } }

/* Thema's uitklapbaar: klik op een thema voor meer uitleg */
.hp-themes__list details { display: flex; flex-direction: column; }
.hp-themes__list summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.hp-themes__list summary::-webkit-details-marker { display: none; }
.hp-themes__name { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hp-themes__plus { position: relative; width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.35s var(--spring); }
.hp-themes__plus::before, .hp-themes__plus::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1px; background: var(--ink); }
.hp-themes__plus::after { transform: rotate(90deg); transition: transform 0.35s var(--spring); }
.hp-themes__list details[open] .hp-themes__plus::after { transform: rotate(0deg); }
.hp-themes__list summary:hover h3 { color: #5F6E80; }
.hp-themes__list summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.hp-themes__more { margin: 12px 0 0 !important; font-size: 15px; line-height: 1.6; color: var(--ink) !important; max-width: 52ch; }
@media (max-width: 640px) { .hp-themes__more { font-size: 14px; } }

/* Thema's beeldend: vijf kleine foto's met de naam, uitleg pas na een klik */
.hp-themes__list { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(10px, 1.2vw, 18px); row-gap: 18px; border-top: 0; align-items: start; }
.hp-themes__list li { padding: 0; border: 0; gap: 0; }
.hp-themes__list li:last-child:nth-child(odd) { grid-column: auto; }
.hp-themes__img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 0.6s var(--spring), filter 0.4s ease; }
.hp-themes__list summary { gap: 10px; }
.hp-themes__list summary:hover .hp-themes__img { transform: scale(1.02); }
.hp-themes__list h3 { font-size: clamp(19px, 1.5vw, 23px); }
.hp-themes__short { margin: 10px 0 0 !important; font-size: 14px !important; line-height: 1.5; color: var(--muted); }
.hp-themes__more { margin: 8px 0 0 !important; font-size: 14px !important; line-height: 1.55; }
.hp-themes__head { gap: 10px; }
@media (max-width: 1100px) { .hp-themes__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .hp-themes__list { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
  .hp-themes__list li { flex: 0 0 42%; scroll-snap-align: start; }
  .hp-themes__list h3 { font-size: 19px; }
}

/* Kies een thema: één felle kleurpagina, als in een magazine */
.hp-themes { --fel: #E0582E; background: var(--fel); color: #FFFFFF; padding-top: clamp(40px, 5vw, 72px) !important; padding-bottom: clamp(40px, 5vw, 72px) !important; }
.hp-themes .hp-label, .hp-themes__intro, .hp-themes__note, .hp-themes__traject p, .hp-themes__short, .hp-themes__more { color: rgba(255, 255, 255, 0.86) !important; }
.hp-themes .hp-h2, .hp-themes__list h3, .hp-themes__traject h3 { color: #FFFFFF; }
.hp-themes__plus::before, .hp-themes__plus::after { background: #FFFFFF; }
.hp-themes__list summary:hover h3 { color: #FFFFFF; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.hp-themes__traject { border-top-color: rgba(255, 255, 255, 0.6); }
.hp-themes__traject .arrow-link { color: #FFFFFF; }
.hp-themes main img, .hp-themes .hp-themes__img { mix-blend-mode: normal; opacity: 1; }
main .hp-themes .hp-themes__list h3, main .hp-themes .hp-themes__traject h3 { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.01em; }
/* Kies een thema in het bosgroen van de footer */
.hp-themes { --fel: var(--forest, #454D40); }

/* Boeken als hoofdprijs: donkere uitnodiging, grote witte kop, formulier als witte kaart */
.section--contact { background: #1B1917; color: #FFFFFF; padding: clamp(64px, 8vw, 128px) var(--gutter) !important; position: relative; overflow: hidden; }
.section--contact .cta { border-top: 0; padding-top: 0; }
.section--contact .eyebrow { color: #B9A88F; letter-spacing: 0.24em; }
.section--contact .cta__intro h2 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(46px, 5.6vw, 88px); line-height: 0.98; letter-spacing: -0.02em; color: #FFFFFF; }
.section--contact .book-steps li { color: rgba(255, 255, 255, 0.88); font-size: 16px; }
.section--contact .book-steps span { background: transparent; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.45); }
.section--contact .cta__intro .arrow-link { color: rgba(255, 255, 255, 0.85); }
.section--contact .ig-icon { color: #FFFFFF; }
.section--contact .request-form { background: #FFFFFF !important; color: var(--ink); padding: clamp(22px, 3vw, 44px) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.section--contact::after { content: ""; position: absolute; right: -6vw; bottom: -10vw; width: 38vw; height: 38vw; border: 1px solid rgba(185, 168, 143, 0.18); border-radius: 50%; pointer-events: none; }
.section--contact::before { content: ""; position: absolute; right: 2vw; bottom: -2vw; width: 22vw; height: 22vw; border: 1px solid rgba(185, 168, 143, 0.14); border-radius: 50%; pointer-events: none; }
.section--contact .cta { position: relative; z-index: 1; }
main:has(.section--contact) + .footer--pro, .section--contact + .footer--pro { margin-top: 0 !important; }
@media (max-width: 640px) { .section--contact .cta__intro h2 { font-size: 44px; } .section--contact .request-form { padding: 20px 16px !important; } }
/* Boeken: formulierkaart in het beige van de site, keuzevakjes wit */
.section--contact .request-form { background: var(--bg) !important; }
.section--contact .book-steps span { background: var(--bg); color: var(--ink); border-color: var(--bg); }

/* Alle foto's weer zoals ze waren: geen blend, volle sterkte */
main img, .marquee img { mix-blend-mode: normal !important; opacity: 1 !important; }
/* Kies een thema in diep bordeaux: de kleur van het hart (Wildhearts) */
.hp-themes { --fel: #5C1F24; }

/* ---------- Over mij en FAQ in dezelfde magazinestijl ---------- */
.over__what { font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--line, rgba(27,25,23,0.15)); padding-bottom: 12px; max-width: 420px; }
.over__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0; max-width: 460px; }
.over__duo figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.over__duo figure:last-child { margin-top: 36px; }
.over__duo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.over__duo figcaption { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.over__mission { font-family: 'Instrument Serif', serif; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.15; letter-spacing: -0.01em; color: #5F6E80; border-top: 1px solid var(--ink); padding-top: 18px; margin-top: 8px; }
/* Vragen in de serif, antwoorden rustig */
.faq__item summary { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -0.01em; }
.faq__item p { font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 64ch; }
/* Afsluiter op Over mij en FAQ: dezelfde donkere uitnodiging als het boekblok */
.section--invite { background: #1B1917; color: #FFFFFF; padding: clamp(64px, 8vw, 120px) var(--gutter) !important; margin-top: clamp(64px, 8vw, 120px); }
.section--invite .cta { border-top: 0; padding-top: 0; }
.section--invite .cta h2 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(44px, 5.4vw, 84px); line-height: 0.98; color: #FFFFFF; }
.section--invite .cta p { color: rgba(255, 255, 255, 0.82); }
.section--invite .btn--dark { background: var(--bg); color: var(--ink); }
.section--invite .arrow-link { color: rgba(255, 255, 255, 0.85); }
main:has(.section--invite) + .footer--pro { margin-top: 0 !important; }

/* Kies een thema in het zand van de site, met zwarte tekst */
.hp-themes { --fel: #C8B399; color: var(--ink); }
.hp-themes .hp-label { color: var(--ink) !important; }
.hp-themes__intro, .hp-themes__note, .hp-themes__traject p, .hp-themes__short { color: rgba(27, 25, 23, 0.78) !important; }
.hp-themes__more { color: var(--ink) !important; }
.hp-themes .hp-h2, .hp-themes__list h3, .hp-themes__traject h3, main .hp-themes .hp-themes__list h3, main .hp-themes .hp-themes__traject h3 { color: var(--ink); }
.hp-themes__plus::before, .hp-themes__plus::after { background: var(--ink); }
.hp-themes__list summary:hover h3 { color: var(--ink); }
.hp-themes__traject { border-top-color: rgba(27, 25, 23, 0.5); }
.hp-themes__traject .arrow-link { color: var(--ink); }
/* Boeken: de cirkels op de achtergrond groter en iets zichtbaarder */
.section--contact::after { right: -14vw; bottom: -22vw; width: 64vw; height: 64vw; border-color: rgba(185, 168, 143, 0.24); }
.section--contact::before { right: -2vw; bottom: -8vw; width: 40vw; height: 40vw; border-color: rgba(185, 168, 143, 0.2); }
@media (max-width: 640px) { .section--contact::after { width: 120vw; height: 120vw; right: -50vw; bottom: -40vw; } .section--contact::before { width: 80vw; height: 80vw; right: -30vw; bottom: -20vw; } }



/* Een gouden Flower of Life, verborgen achter het formulier: hij is er wel, maar het beige ligt eroverheen.
   Een stille wens voor veel mooie aanvragen. */
.section--contact::before { display: block; }
.section--contact .request-form { background: linear-gradient(var(--bg), var(--bg)), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-32 -32 64 64%22 fill=%22none%22 stroke=%22%23C9A24A%22 stroke-width=%220.35%22%3E%3Ccircle cx=%22-20.0%22 cy=%220.0%22 r=%2210%22/%3E%3Ccircle cx=%22-15.0%22 cy=%22-8.66%22 r=%2210%22/%3E%3Ccircle cx=%22-15.0%22 cy=%228.66%22 r=%2210%22/%3E%3Ccircle cx=%22-10.0%22 cy=%22-17.321%22 r=%2210%22/%3E%3Ccircle cx=%22-10.0%22 cy=%220.0%22 r=%2210%22/%3E%3Ccircle cx=%22-10.0%22 cy=%2217.321%22 r=%2210%22/%3E%3Ccircle cx=%22-5.0%22 cy=%22-8.66%22 r=%2210%22/%3E%3Ccircle cx=%22-5.0%22 cy=%228.66%22 r=%2210%22/%3E%3Ccircle cx=%220.0%22 cy=%22-17.321%22 r=%2210%22/%3E%3Ccircle cx=%220.0%22 cy=%220.0%22 r=%2210%22/%3E%3Ccircle cx=%220.0%22 cy=%2217.321%22 r=%2210%22/%3E%3Ccircle cx=%225.0%22 cy=%22-8.66%22 r=%2210%22/%3E%3Ccircle cx=%225.0%22 cy=%228.66%22 r=%2210%22/%3E%3Ccircle cx=%2210.0%22 cy=%22-17.321%22 r=%2210%22/%3E%3Ccircle cx=%2210.0%22 cy=%220.0%22 r=%2210%22/%3E%3Ccircle cx=%2210.0%22 cy=%2217.321%22 r=%2210%22/%3E%3Ccircle cx=%2215.0%22 cy=%22-8.66%22 r=%2210%22/%3E%3Ccircle cx=%2215.0%22 cy=%228.66%22 r=%2210%22/%3E%3Ccircle cx=%2220.0%22 cy=%220.0%22 r=%2210%22/%3E%3Ccircle cx=%220%22 cy=%220%22 r=%2230%22 stroke-width=%220.5%22/%3E%3Ccircle cx=%220%22 cy=%220%22 r=%2231.2%22 stroke-width=%220.25%22/%3E%3C/svg%3E") no-repeat center / 80% !important; }

/* Boeken: geen cirkels of spiraal op de achtergrond */
.section--contact::before, .section--contact::after { display: none !important; }

/* Welkomstscherm een tikje sneller */
.welcome__inner { animation-duration: 1s; }
.welcome__kicker { animation-duration: 0.9s; animation-delay: 0.1s; }
.welcome__line { animation-duration: 1.7s; animation-delay: 0.2s; }
.welcome__enter { animation-duration: 0.9s; animation-delay: 1.3s; }
.welcome .welcome__langs { animation-duration: 0.9s; animation-delay: 1.5s; }
.welcome__mark .spiral-ink { animation-delay: 1.5s; animation-duration: 1.2s; }
.welcome__mark .spiral-eye { animation-delay: 1.8s; animation-duration: 0.8s; }
.welcome__mark .twinkle--ink:nth-of-type(17) { animation-delay: 2.0s; }
.welcome__mark .twinkle--ink:nth-of-type(18) { animation-delay: 2.35s; }
.welcome__mark .twinkle--ink:nth-of-type(19) { animation-delay: 2.7s; }
.welcome__mark .twinkle--ink:nth-of-type(20) { animation-delay: 3.05s; }
.welcome__mark .twinkle--ink:nth-of-type(21) { animation-delay: 3.4s; }
.welcome__mark { transition-duration: 0.8s, 0.6s; }

/* Welkomstscherm: balkje "Choose your language", dan de talen, dan Enter */
.welcome__choose { display: flex; align-items: center; gap: 14px; margin: 6px 0 -10px; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); animation: welcome-in 0.9s ease 1.2s backwards; }
.welcome__choose::before, .welcome__choose::after { content: ""; width: 40px; height: 1px; background: currentColor; opacity: 0.5; }
.welcome .welcome__langs { animation-delay: 1.35s; }
.welcome__enter { animation-delay: 1.6s; margin-top: 6px; }
.welcome.is-leaving .welcome__choose { opacity: 0; transition: opacity 0.4s ease; }
@media (prefers-reduced-motion: reduce) { .welcome__choose { animation: none; } }


/* Vlaggetje verschijnt pas bij hover (telefoon: alleen de woorden) */
.welcome__langs a { position: relative; }
.welcome__langs .flag { position: absolute; left: 50%; top: 100%; margin-top: 6px; opacity: 0 !important; transform: translate(-50%, -4px) !important; transition: opacity 0.35s ease, transform 0.45s var(--spring); pointer-events: none; }
.welcome__langs a:hover .flag, .welcome__langs a:focus-visible .flag { opacity: 0.9 !important; transform: translate(-50%, 0) !important; }
@media (hover: none) { .welcome__langs .flag { display: none; } }

/* Welkomstscherm nog sneller: talen staan er binnen een seconde */
.welcome__inner { animation-duration: 0.7s; }
.welcome__kicker { animation-duration: 0.7s; animation-delay: 0.05s; }
.welcome__line { animation-duration: 1.1s; animation-delay: 0.1s; }
.welcome__choose { animation-duration: 0.7s; animation-delay: 0.55s; }
.welcome .welcome__langs { animation-duration: 0.7s; animation-delay: 0.7s; }
.welcome__mark .spiral-ink { animation-delay: 0.9s; animation-duration: 0.9s; }
.welcome__mark .spiral-eye { animation-delay: 1.1s; animation-duration: 0.6s; }
.welcome__mark .twinkle--ink:nth-of-type(17) { animation-delay: 1.3s; }
.welcome__mark .twinkle--ink:nth-of-type(18) { animation-delay: 1.55s; }
.welcome__mark .twinkle--ink:nth-of-type(19) { animation-delay: 1.8s; }
.welcome__mark .twinkle--ink:nth-of-type(20) { animation-delay: 2.05s; }
.welcome__mark .twinkle--ink:nth-of-type(21) { animation-delay: 2.3s; }
/* Binnenkomen: welkomstscherm schuift sneller weg */
.welcome { transition-duration: 0.45s, 0.5s; }
.welcome__mark { transition-duration: 0.5s, 0.4s; }
.welcome.is-leaving .welcome__inner > *:not(.welcome__name), .welcome.is-leaving .welcome__langs, .welcome.is-leaving .welcome__choose { transition-duration: 0.3s; }

/* Hoofdfoto heel laten: eigen verhouding, niets wegsnijden */
.cover > .cover__photo img { aspect-ratio: 695 / 463 !important; object-fit: contain; }

/* Cover: tekstkolom netjes gelijk met de foto (boven én onder) */
@media (min-width: 1200px) {
  .cover > .cover__photo { align-self: start; }
  .cover > .cover__side { align-self: stretch; justify-content: space-between; }
}
/* Kleinere laptops: foto over de hele breedte, tekst eronder in twee kolommen */
@media (min-width: 900px) and (max-width: 1199px) {
  .cover > .cover__photo, .cover > .cover__side { grid-column: 1 / -1; }
  .cover > .cover__side { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 64px); row-gap: 22px; align-items: start; padding-left: 0; }
  .cover > .cover__side > * { grid-column: 1; }
  .cover > .cover__side > div:has(.cover__index) { grid-column: 2; grid-row: 1 / span 4; }
}

/* Thema Verbinding: de twee vrouwen in het midden van het beeld */
.hp-themes .hp-themes__img[src*="tegenover"] { object-position: 25% center; }

/* Alle foto's een vleugje warme tint, zodat ze als één serie voelen */
main img, .marquee img { filter: sepia(0.07) saturate(0.96) contrast(0.955) brightness(1.02); }

/* ===== Kleurenkaart (oktober 2026): wit · crème · zand · terracotta · groen · blauw · grijs · zwart =====
   Alle kleuren op de site komen hieruit. Lichte vlakken zijn een lichtere versie van een kaartkleur.
   De kalender houdt bewust haar eigen markeringskleuren. */
:root {
  --wit: #FFFFFF; --creme: #EEE7DC; --zand: #C8B399; --terra: #B86E50; --groen: #7F8B68; --blauw: #A9C6F3; --grijs: #D8D5CF; --zwart: #1B1917;
  --bg: var(--creme); --ink: var(--zwart); --sand: var(--zand);
  --groen-licht: #DBDFD5; --terra-licht: #EBD6CE; --blauw-licht: #E1EBFB;
  --groen-mid: #BFC5B4; --terra-mid: #DCB7A8; --blauw-mid: #C3D7F7;
  --blue-bg: var(--groen-licht); --peach-bg: var(--terra-licht);
  --forest: var(--zwart); --linen: var(--creme);
}
/* Workshopkleuren: bewegen = groen, schilderen = terracotta, beide = blauw */
.hp-ws__item--move { --c: var(--groen-licht); --dot: var(--groen); --hover: var(--groen-mid); }
.hp-ws__item--paint { --c: var(--terra-licht); --dot: var(--terra); --hover: var(--terra-mid); }
.hp-ws__item--both { --c: var(--blauw-licht); --dot: var(--blauw); --hover: var(--blauw-mid); }
.card--sage, .ws-tile--sage { background: var(--blauw-licht); }
.pill--sage { background: var(--blauw-mid); }
.choice:has(input[value="Movement in Presence"]:checked) { background: var(--groen-mid); border-color: var(--groen); }
.choice:has(input[value="Intuitive Painting"]:checked) { background: var(--terra-mid); border-color: var(--terra); }
.choice:has(input[value="First Move, Then Paint"]:checked) { background: var(--blauw-mid); border-color: var(--blauw); }
/* Accenttekst in plaats van het oude blauwgrijs */
.cover__head .cover__sub { color: var(--terra); }
.hp-why__text::first-letter { color: var(--terra); }
.over__mission { color: var(--groen); }
.hp-themes__list summary:hover h3 { color: var(--wit); }
/* Spiraal en details in zand, stippen in de kaartkleuren */
.welcome__mark .welcome__line, .hp-pagehead__spiral path:not(.spiral-ink):not(.spiral-eye):not(.spiral-white), .logo-and__line { stroke: var(--zand); }
.welcome__mark .twinkle--ink:nth-of-type(17), .hp-pagehead__spiral .twinkle--ink:nth-of-type(17) { fill: var(--groen); }
.welcome__mark .twinkle--ink:nth-of-type(18), .hp-pagehead__spiral .twinkle--ink:nth-of-type(18) { fill: var(--terra); }
.welcome__mark .twinkle--ink:nth-of-type(19), .hp-pagehead__spiral .twinkle--ink:nth-of-type(19) { fill: var(--blauw); }
.welcome__mark .twinkle, .hp-pagehead__spiral .twinkle { fill: var(--zand); }
.welcome__mark .twinkle--white, .hp-pagehead__spiral .twinkle--white { fill: var(--wit); }
.hp-who .rule-list--labels dt::before, .section--contact .eyebrow { color: var(--zand); }
.request-form { background-color: var(--creme); }
/* Footer zwart met crème tekst en een dunne grijze lijn */
.footer { background-color: var(--creme); color: var(--zwart); border-top: 1px solid var(--zwart); }
.footer a, a.footer__name:hover { color: var(--zwart); }
.footer a:hover { color: var(--zwart); }
.footer a:focus-visible { outline-color: var(--zwart); }
.footer__muted { color: var(--muted); }
.footer__bottom { border-top-color: var(--grijs); }
main:has(.section--contact) + .footer--pro { margin-top: 0; }
.footer__col a:hover, .footer__bottom a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--blauw); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Blauw als frisse knipoog: selectie, markeerstift, hover */
::selection { background: var(--blauw); color: var(--zwart); }
.cover__title .light { display: block; width: fit-content; background: linear-gradient(transparent 62%, var(--blauw) 62%, var(--blauw) 90%, transparent 90%); padding: 0 0.08em; }
.nav__links > a { text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.2s ease; }
.nav__links > a:hover { opacity: 1 !important; border-bottom-color: var(--blauw); }
.welcome__langs a:hover span { border-bottom-color: var(--blauw) !important; }
/* Grijs voor rustige infovlakken */
.hp-who__info-title + .rule-list--labels { background: var(--grijs); padding: 6px clamp(16px, 2vw, 24px); margin-top: 14px; }

/* Carrousel als één fotoserie: alles staand 4:5; op desktop zwart-wit, in kleur als je eroverheen beweegt */
.marquee img, .marquee img.wide { width: clamp(208px, 20.8vw, 288px) !important; height: auto !important; aspect-ratio: 4 / 5 !important; object-fit: cover; }
@media (hover: hover) {
  .marquee img { pointer-events: auto; filter: grayscale(1) sepia(0.07) contrast(0.97) brightness(1.02); transition: filter 0.6s ease; }
  .marquee img:hover { filter: sepia(0.07) saturate(0.96) contrast(0.955) brightness(1.02); }
}
.welcome__mark .twinkle:nth-of-type(n):not(.twinkle--ink):not(.twinkle--white), .hp-pagehead__spiral .twinkle:nth-of-type(n):not(.twinkle--ink):not(.twinkle--white) { fill: var(--zand); }

/* Welkomstscherm: spiraal weer zichtbaar, talen en regeltjes iets groter */
.welcome__mark .welcome__line { stroke-width: 2.8; }
.welcome__mark .spiral-ink { stroke-width: 1.1; }
.welcome .welcome__kicker { font-size: 13px !important; letter-spacing: 0.26em; color: var(--zwart); opacity: 0.8; }
.welcome .welcome__choose { font-size: 12px !important; letter-spacing: 0.24em; color: var(--zwart); opacity: 0.7; }
.welcome .welcome__langs { font-size: 14px !important; gap: 10px 40px; letter-spacing: 0.18em; }
.welcome .welcome__langs a { padding: 8px 2px; }
@media (max-width: 640px) {
  .welcome .welcome__kicker { font-size: 11.5px !important; letter-spacing: 0.2em; }
  .welcome .welcome__choose { font-size: 11px !important; }
  .welcome .welcome__langs { font-size: 11.5px !important; gap: 8px 16px; letter-spacing: 0.1em; }
}
/* Spiraal achter de letters: de naam blijft scherp bovenop */
.welcome__name { isolation: isolate; position: relative; }
.welcome__name .welcome__mark { z-index: -1 !important; }

/* Menu: Workshops · Over · Kalender · FAQ; "Plan een workshop" alleen in het telefoonmenu (desktop heeft de knop) */
.nav__links > a.nav__links-cta { display: none; }
@media (max-width: 899px) { .nav__links > a.nav__links-cta { display: block; } }

/* Zoeken: vergrootglas in het menu en een rustig crème zoekscherm */
.nav__search { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; background: none; color: var(--zwart); cursor: pointer; border-radius: 999px; transition: background 0.2s ease; }
.nav__search:hover { background: var(--grijs); }
.nav__search:focus-visible { outline: 2px solid var(--zwart); outline-offset: 2px; }
.zoek { position: fixed; inset: 0; z-index: 200; background: rgba(238, 231, 220, 0.97); overflow-y: auto; animation: zoek-in 0.25s ease; }
.zoek[hidden] { display: none; }
@keyframes zoek-in { from { opacity: 0; } to { opacity: 1; } }
html.zoek-open { overflow: hidden; }
.zoek__inner { max-width: 760px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) 16px 64px; }
.zoek__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(24px, 4vw, 48px); }
.zoek__label { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; }
.zoek__close { font: inherit; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; background: none; border: 1px solid var(--zwart); border-radius: 999px; padding: 9px 18px; cursor: pointer; color: var(--zwart); }
.zoek__input { width: 100%; font-family: 'Instrument Serif', serif; font-size: clamp(32px, 6vw, 56px); line-height: 1.1; letter-spacing: -0.02em; color: var(--zwart); background: none; border: 0; border-bottom: 1px solid var(--zwart); padding: 0 0 12px; outline: none; border-radius: 0; -webkit-appearance: none; appearance: none; }
.zoek__input::placeholder { color: rgba(27, 25, 23, 0.35); }
.zoek__input::-webkit-search-cancel-button { display: none; }
.zoek__hint, .zoek__count { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.zoek__list { list-style: none; margin: 18px 0 0; padding: 0; }
.zoek__list li { border-bottom: 1px solid var(--grijs); }
.zoek__list a { display: block; padding: 18px 0; text-decoration: none; color: var(--zwart); }
.zoek__list a:hover .zoek__where { text-decoration: underline; text-decoration-color: var(--blauw); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.zoek__where { display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.zoek__text { display: block; font-size: 16px; line-height: 1.55; }
.zoek__text mark { background: linear-gradient(transparent 55%, var(--blauw) 55%, var(--blauw) 92%, transparent 92%); color: inherit; padding: 0 1px; }
.zoek__none { padding: 18px 0; color: var(--muted); border-bottom: 0 !important; }
@media (max-width: 899px) { .nav__search { order: -1; width: 36px; height: 36px; } }

/* Zoeken als woord: naast het vergrootglas op desktop, als menu-item op de telefoon */
.nav__search { width: auto; padding: 0 12px; gap: 8px; }
.nav__search-label { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.nav__links > a.nav__links-search { display: none; }
@media (max-width: 899px) {
  .nav__search { padding: 0; width: 36px; }
  .nav__search-label { display: none; }
  .nav__links > a.nav__links-search { display: block; }
}
.feel__story { font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; margin: 2px 0 0; }
/* Kunstwerklabel: vast blauw vlakje, zoals een museumlabel */
.feel__credit { display: inline-block; align-self: flex-start; width: fit-content; background: var(--blauw); color: var(--zwart); padding: 3px 8px; }
.feel__about { font-size: 16px; line-height: 1.6; color: var(--zwart); margin: 14px 0 0; max-width: 46ch; }
.faq__more { color: var(--zwart); text-decoration: underline; text-decoration-color: var(--blauw); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Tarieven: maatwerk-zin als onderste regel van de kaart */
.ratecard__foot { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--grijs); font-size: 15px; line-height: 1.5; color: var(--muted); }
.ratecard__foot a { color: var(--zwart); font-weight: 500; text-decoration: underline; text-decoration-color: var(--blauw); text-decoration-thickness: 2px; text-underline-offset: 4px; white-space: nowrap; }
#tarieven { padding-bottom: clamp(56px, 7vw, 104px) !important; }
/* Carrousel: elke foto reageert bij hover (zacht inzoomen); kleurenfoto's krijgen ook hun kleur terug */
@media (hover: hover) {
  .marquee img { transition: filter 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); position: relative; }
  .marquee img:hover { transform: scale(1.045); z-index: 2; }
}

/* Ervaringen: klikbaar, en dan groot uitvergroot */
.review-card { cursor: zoom-in; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; }
@media (hover: hover) { .review-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -18px rgba(27, 25, 23, 0.35); } }
.review-card:focus-visible { outline: 2px solid var(--zwart); outline-offset: 3px; }
.review-big { position: fixed; inset: 0; z-index: 210; background: rgba(238, 231, 220, 0.97); display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; animation: zoek-in 0.25s ease; }
.review-big[hidden] { display: none; }
html.review-open { overflow: hidden; }
.review-big__inner { position: relative; max-width: 820px; width: 100%; padding-top: 56px; }
.review-big__close { position: absolute; top: 0; right: 0; font: inherit; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; background: none; border: 1px solid var(--zwart); border-radius: 999px; padding: 9px 18px; cursor: pointer; color: var(--zwart); }
.review-big__quote { margin: 0; font-family: 'Instrument Serif', serif; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.22; letter-spacing: -0.01em; color: var(--zwart); }
.review-big__who { margin: 28px 0 0; font-size: 13px; letter-spacing: 0.08em; color: var(--muted); }
.review-big__who .flag--inline { width: 14px; }
.review-big__nav { display: flex; align-items: center; gap: 14px; margin-top: 36px; }
.review-big__count { font-size: 12px; letter-spacing: 0.12em; color: var(--muted); min-width: 52px; text-align: center; }
.review-big, .zoek { background: var(--creme); }

/* Uitgelichte ervaring als magazine-quote: groter, schreefletter, gecentreerd */
.hp-quote, .ws-quote { max-width: 900px !important; margin-inline: auto; text-align: center; }
.hp-quote blockquote, .ws-quote blockquote { font-family: 'Instrument Serif', serif !important; font-style: normal !important; font-size: clamp(26px, 3vw, 42px) !important; line-height: 1.22 !important; letter-spacing: -0.015em !important; max-width: 900px; text-wrap: balance; }
.hp-quote figcaption, .ws-quote figcaption { margin-top: 20px; font-size: 12px !important; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 640px) { .hp-quote blockquote, .ws-quote blockquote { font-size: 24px !important; } }
/* Intuïtief schilderen: kleurrijke verfstroom naast de uitleg, gespiegeld t.o.v. feel */
@media (min-width: 900px) { .feel--flip { grid-template-columns: 5fr 7fr; } .feel--flip .feel__img { order: 2; } .feel--flip .feel__text { order: 1; } }
.feel--flip .feel__img { aspect-ratio: 3 / 2; filter: none !important; }
.feel--flip { align-items: center; margin-top: clamp(24px, 3vw, 48px); }
.feel__about--big { font-size: clamp(17px, 1.3vw, 19px); max-width: 40ch; }
.feel__fig { margin: 0; }
@media (min-width: 900px) { .feel--flip .feel__fig { order: 2; } }
.feel__cap { margin-top: 10px; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 16px; color: var(--muted); }
.feel__year { font-family: 'Instrument Sans', sans-serif; font-style: normal; font-size: 11px; letter-spacing: 0.16em; margin-left: 6px; }
/* Bijschrift verfstroom: strak lettertype, rustig en klein (anders dan de schuine zin bij feel) */
.feel__cap { font-family: 'Instrument Sans', sans-serif; font-style: normal; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 52ch; }
.feel__year { color: var(--zwart); font-weight: 500; }

/* Foto's op de workshoppagina's compacter: lagere fotoparen, kunstwerken kleiner naast de tekst */
@media (min-width: 900px) {
  .photo--820 { height: clamp(300px, 30vw, 440px); }
  .photo--720 { max-height: 520px; }
  .feel { grid-template-columns: 1fr 1fr; }
  .feel--flip { grid-template-columns: 1fr 1fr; }
  .feel__img { max-height: 440px; }
  .feel > .feel__img, .feel__fig { max-width: 560px; }
  .feel--flip .feel__fig { justify-self: end; }
}
/* Grote ervaring: tekst altijd op dezelfde hoogte, pijlen en sluiten vast op hun plek */
.review-big { align-items: flex-start; padding-top: clamp(96px, 16vh, 180px); padding-bottom: 140px; }
.review-big__inner { padding-top: 0; }
.review-big__close { position: fixed; top: clamp(20px, 4vh, 40px); right: clamp(16px, 4vw, 48px); }
.review-big__nav { position: fixed; left: 50%; bottom: clamp(24px, 6vh, 56px); transform: translateX(-50%); margin: 0; background: var(--creme); padding: 6px 10px; border-radius: 999px; }
.hp-quote.review-card:hover, .ws-quote.review-card:hover { box-shadow: none; transform: none; opacity: 0.8; }
.hp-solo__about { display: inline-block; margin-top: 12px; font-size: 14px; color: var(--zwart); text-decoration: underline; text-decoration-color: var(--blauw); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Pijlen hoger: vast op ongeveer driekwart van het scherm; tekst iets compacter zodat lange ervaringen erboven passen */
.review-big { padding-top: clamp(72px, 12vh, 140px); padding-bottom: 32vh; }
.review-big__quote { font-size: clamp(22px, 2.4vw, 34px); line-height: 1.25; }
.review-big__nav { bottom: auto; top: 74vh; }
@media (max-width: 640px) { .review-big__quote { font-size: 21px; } .review-big__nav { top: auto; bottom: 28px; } }
.hp-who .hp-h2 .light { display: block; font-style: italic; font-size: 0.62em; color: var(--muted); margin-top: 4px; }
.field__hint { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); letter-spacing: 0; text-transform: none; }
/* Over: lopende tekst iets kleiner en rustiger */
.over-page main p[style*="font-size:18px"], main .split p[style*="font-size:18px"] { font-size: 16px !important; line-height: 1.7 !important; }

/* Tekstgroottes rustiger, overal gelijk: lopende tekst 16px, intro's 17px, accenten kleiner */
main .body, main p.body, .hp-solo__text, .feel__about, .feel__about--big, .section--invite p, .section--contact .section-head p, main .quote-main { font-size: 16px !important; line-height: 1.7 !important; }
main .lead, .hp-pagehead__lead, .cover__lead, .hp-head__text { font-size: 17px !important; line-height: 1.6 !important; }
.hp-who__intro { font-size: clamp(17px, 1.4vw, 19px) !important; line-height: 1.55 !important; }
.hp-statement { font-size: clamp(20px, 1.9vw, 26px) !important; line-height: 1.35 !important; }
.hp-why__text { font-size: clamp(19px, 1.6vw, 23px) !important; line-height: 1.5 !important; }
.over__mission { font-size: clamp(22px, 2vw, 28px) !important; }
.hp-quote blockquote, .ws-quote blockquote { font-size: clamp(24px, 2.4vw, 34px) !important; }
.feel__story { font-size: clamp(18px, 1.5vw, 20px) !important; }
@media (max-width: 640px) { .hp-quote blockquote, .ws-quote blockquote { font-size: 22px !important; } .hp-statement { font-size: 20px !important; } }
.cta__intro > p { font-size: 16px !important; line-height: 1.65 !important; }

/* Foto's compacter: hoofdfoto, fotoparen op de workshoppagina's en de groepsfoto bij Voor wie */
@media (min-width: 900px) {
  .cover > .cover__photo img { max-height: 500px; width: auto; max-width: 100%; height: auto; object-fit: cover; }
  .section--first.gallery-2 .photo, .section.gallery-2 .photo { height: clamp(280px, 26vw, 380px) !important; }
  .hp-who__img { max-height: 520px; }
}

/* Thema's-pagina */
.themas__head { max-width: 640px; display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(32px, 4vw, 56px); }
.themas__intro { font-size: 16px; line-height: 1.7; color: var(--muted); }
.themas__gebied { margin-top: clamp(36px, 4vw, 64px); }
.themas__gebied > .hp-label { padding-bottom: 12px; border-bottom: 1px solid var(--zwart); margin-bottom: 24px; }
.themas__grid { display: grid; grid-template-columns: 1fr; gap: 32px clamp(20px, 2.4vw, 36px); }
@media (min-width: 700px) { .themas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .themas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.thema { display: flex; flex-direction: column; gap: 10px; }
.thema__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 6px; }
main .thema__naam { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.05; margin: 0; }
.thema__kort { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 18px; line-height: 1.35; margin: 0; }
.thema__uitleg { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0; }
.thema__plan { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 500; color: var(--zwart); text-decoration: underline; text-decoration-color: var(--blauw); text-decoration-thickness: 2px; text-underline-offset: 4px; align-self: flex-start; }
.themas__eind { margin-top: clamp(48px, 5vw, 80px); display: flex; flex-direction: column; gap: 24px; }
/* Workshoppagina: korte vooruitblik met thema-namen */
.hp-themes--teaser { display: flex; flex-direction: column; gap: 22px; }
.themas__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.themas__chips a { display: inline-block; padding: 9px 16px; border: 1px solid rgba(27, 25, 23, 0.35); border-radius: 999px; font-family: 'Instrument Serif', serif; font-size: 19px; color: var(--zwart); text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease; }
.themas__chips a:hover { background: var(--blauw); border-color: var(--blauw); }
.themas__sub { font-family: 'Instrument Serif', serif; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; margin: 0; }
.themas__sub span { display: block; font-style: italic; }
/* Carrousel: de kleurrijke kwastenfoto blijft altijd in kleur */
@media (hover: hover) { .marquee img.is-kleur { filter: saturate(0.98) contrast(0.98); } }
.themas__titel span { display: block; font-style: italic; }
/* Formulier: themakeuze */
select.input { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--zwart) 50%), linear-gradient(135deg, var(--zwart) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; cursor: pointer; }
.thema-eigen[hidden] { display: none; }
.thema__img[src*="reena-lacht"] { object-position: center 12%; }

/* Thema's: vraag per thema (verschijnt bij hover), kaart trekken, themakeuze */
.thema__vraag { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 16px; line-height: 1.35; color: var(--zwart); margin: 0; padding-left: 10px; border-left: 2px solid var(--blauw); }
@media (hover: hover) {
  .thema__vraag { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.35s ease; }
  .thema:hover .thema__vraag, .thema:focus-within .thema__vraag { max-height: 80px; opacity: 1; }
}
.kaart-trek { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; background: var(--wit); padding: clamp(24px, 3vw, 40px); margin-bottom: clamp(16px, 2vw, 24px); }
@media (min-width: 760px) { .kaart-trek { grid-template-columns: 1fr 1fr; } }
.kaart-trek__tekst { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.kaart-trek__intro { font-family: 'Instrument Serif', serif; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; margin: 0; }
.kaart-trek__stapel { perspective: 1200px; display: flex; justify-content: center; }
.kaart-trek__kaart { position: relative; width: min(280px, 100%); aspect-ratio: 3 / 4; cursor: pointer; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.kaart-trek__kaart.is-om { transform: rotateY(180deg); }
.kaart-trek__voor, .kaart-trek__achter { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 24px; }
.kaart-trek__voor { background: var(--zwart); color: var(--zand); box-shadow: inset 0 0 0 8px var(--zwart), inset 0 0 0 9px var(--zand); }
.kaart-trek__spiraal { font-size: 54px; line-height: 1; }
.kaart-trek__achter { transform: rotateY(180deg); background: var(--creme); box-shadow: inset 0 0 0 8px var(--creme), inset 0 0 0 9px var(--zwart); gap: 14px; }
.kaart-trek__naam { font-family: 'Instrument Serif', serif; font-size: 32px; line-height: 1; margin: 0; }
.kaart-trek__vraag { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 19px; line-height: 1.3; margin: 0; }
.kaart-trek__achter .thema__plan { margin-top: 6px; align-self: center; }
.themakeuze { margin-top: clamp(48px, 5vw, 80px); background: var(--grijs); padding: clamp(24px, 3vw, 40px); display: grid; gap: 22px; }
.themakeuze__vraag { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.themakeuze__vraag legend { font-family: 'Instrument Serif', serif; font-size: 24px; margin-bottom: 10px; padding: 0; width: 100%; }
.themakeuze__vraag label { cursor: pointer; }
.themakeuze__vraag input { position: absolute; opacity: 0; pointer-events: none; }
.themakeuze__vraag label span { display: inline-block; padding: 9px 16px; border: 1px solid rgba(27, 25, 23, 0.4); border-radius: 999px; font-size: 14px; background: var(--creme); transition: background 0.2s ease, border-color 0.2s ease; }
.themakeuze__vraag input:checked + span { background: var(--zwart); color: var(--creme); border-color: var(--zwart); }
.themakeuze__vraag input:focus-visible + span { outline: 2px solid var(--zwart); outline-offset: 2px; }
.themakeuze__uitkomst { background: var(--creme); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.themakeuze__uitkomst[hidden] { display: none; }
.themakeuze__label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0; }
.themakeuze__naam { font-family: 'Instrument Serif', serif; font-size: 34px; line-height: 1; margin: 0; }
.themakeuze__kort { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 18px; margin: 0 0 6px; }
@media (max-width: 640px) { .kaart-trek__kaart { width: 210px; } .kaart-trek__naam { font-size: 26px; } .kaart-trek__vraag { font-size: 17px; } }
.themakeuze { margin-top: 0; margin-bottom: clamp(16px, 2vw, 24px); }
/* Kaart: voorkant met de spiraal van de site */
.kaart-trek__voor { background: var(--wit); box-shadow: inset 0 0 0 8px var(--wit), inset 0 0 0 9px var(--zwart); }
.kaart-trek__voor .kaart-trek__svg { position: static !important; width: 72% !important; height: auto !important; margin: 0 !important; opacity: 1 !important; justify-self: auto; }
.kaart-trek__voor { background: var(--creme); box-shadow: inset 0 0 0 8px var(--creme), inset 0 0 0 9px var(--zwart); }
.kaart-trek__achter { background: var(--wit); box-shadow: inset 0 0 0 8px var(--wit), inset 0 0 0 9px var(--zwart); }
.kaart-trek__voor .kaart-trek__svg { width: 82% !important; }
.kaart-trek__voor .kaart-trek__svg path:first-of-type { stroke-width: 2.2 !important; }
.kaart-trek__voor .kaart-trek__svg .spiral-ink { stroke-width: 1.1 !important; }
.kaart-trek__voor .kaart-trek__svg .spiral-white { stroke-width: 1.6 !important; }
.kaart-trek__voor .kaart-trek__svg circle { transform: scale(1.4); }
.themas__gebied + .kaart-trek, .kaart-trek { margin-top: clamp(48px, 5vw, 80px); }
/* Kaart: zwarte voorkant, de spiraal licht op */
.kaart-trek__voor { background: var(--zwart); box-shadow: inset 0 0 0 8px var(--zwart), inset 0 0 0 9px var(--zand); }
.kaart-trek__voor .kaart-trek__svg .spiral-ink, .kaart-trek__voor .kaart-trek__svg .spiral-eye { stroke: var(--zand) !important; fill: none; opacity: 0.5 !important; }
.kaart-trek__voor .kaart-trek__svg .spiral-eye { fill: var(--zand) !important; stroke: none !important; opacity: 1 !important; }
.kaart-trek__voor .kaart-trek__svg .twinkle--ink:nth-of-type(20) { fill: var(--grijs) !important; }
.kaart-trek__voor .kaart-trek__svg .twinkle--ink:nth-of-type(21) { fill: var(--wit) !important; }
.kaart-trek__voor .kaart-trek__svg { width: 62% !important; }
/* Thema's: elke foto netjes uitgesneden */
.thema__img[src*="dansen"] { object-position: 50% 10%; }
.thema__img[src*="tegenover-midden"] { object-position: 50% 25%; }
.thema__img[src*="armen-omhoog"] { object-position: 50% 22%; }
.thema__img[src*="kring"] { object-position: 50% 8%; }
.thema__img[src*="schilderstudio"] { object-position: 50% 22%; }
.thema__img[src*="handen-op-hart"] { object-position: 50% 38%; }
.thema__img[src*="reena-lacht"] { object-position: 30% 10%; }
/* Achterkant van de kaart in zand */
.kaart-trek__achter { background: var(--zand); box-shadow: inset 0 0 0 8px var(--zand), inset 0 0 0 9px var(--zwart); }
.kaart-trek__achter .thema__plan { text-decoration-color: var(--wit); }
/* Elke kaart heeft een nummer */
.kaart-trek__nr { position: absolute; top: 22px; left: 0; right: 0; margin: 0; font-family: "Instrument Serif", serif; font-size: 17px; letter-spacing: 0.12em; color: var(--zwart); }
.kaart-trek__nr::before, .kaart-trek__nr::after { content: ""; display: inline-block; width: 18px; height: 1px; background: currentColor; vertical-align: middle; margin: 0 10px; opacity: 0.5; }
/* Kaart: de vijf stippen verschijnen snel na elkaar */
.kaart-trek__voor .kaart-trek__svg .twinkle--ink { animation-duration: 0.6s !important; }
.kaart-trek__voor .kaart-trek__svg .twinkle--ink:nth-of-type(17) { animation-delay: 0.3s !important; }
.kaart-trek__voor .kaart-trek__svg .twinkle--ink:nth-of-type(18) { animation-delay: 0.5s !important; }
.kaart-trek__voor .kaart-trek__svg .twinkle--ink:nth-of-type(19) { animation-delay: 0.7s !important; }
.kaart-trek__voor .kaart-trek__svg .twinkle--ink:nth-of-type(20) { animation-delay: 0.9s !important; }
.kaart-trek__voor .kaart-trek__svg .twinkle--ink:nth-of-type(21) { animation-delay: 1.1s !important; }
/* Naam onderaan de buitenkant van de kaart */
.kaart-trek__merk { position: absolute; bottom: 22px; left: 0; right: 0; margin: 0; font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--zand); opacity: 0.85; }
@media (max-width: 640px) { .kaart-trek__merk { font-size: 7px; bottom: 18px; letter-spacing: 0.18em; } }
/* Homepage: rustig blok met de kaart, linkt naar de Thema's-pagina */
.hp-kaart { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 24px clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(48px, 5vw, 80px); background: var(--wit); padding: clamp(22px, 3vw, 40px); }
.hp-kaart__zin { font-family: 'Instrument Serif', serif; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.25; max-width: 32ch; margin: 10px 0 14px; }
.hp-kaart__link { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--blauw); }
.hp-kaart__beeld { display: block; }
/* Homepage: de kaartendoos. Dicht zie je het diepe deksel met de spiraal; zodra je hem ziet schuift het deksel opzij en piepen de kaarten uit de doos */
@media (max-width: 560px) { .hp-kaart { grid-template-columns: 1fr; } }
.doos { --b: 150px; --h: 200px; --bak: calc(var(--h) - 18px); position: relative; display: block; width: calc(var(--b) + 138px); height: calc(var(--h) + 40px); }
.doos > span { position: absolute; left: 0; bottom: 0; width: var(--b); }
/* binnenkant: de achterwand steekt iets boven de voorkant uit, met een dunne zandrand */
.doos__bak { left: 4px !important; width: calc(var(--b) - 8px) !important; height: calc(var(--bak) + 12px); background: linear-gradient(#0b0a09, #15130f); box-shadow: inset 0 1px 0 rgba(200, 179, 153, 0.55), 0 22px 34px -20px rgba(27, 25, 23, 0.6); z-index: 1; }
.doos__kaarten { height: var(--bak); z-index: 2; }
.doos__kaart { position: absolute; left: 12px; right: 12px; bottom: 6px; height: var(--bak); background: var(--zand); box-shadow: inset 0 0 0 5px var(--zand), inset 0 0 0 6px var(--zwart), 0 -1px 3px rgba(27, 25, 23, 0.25); transform-origin: 50% 100%; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.doos__spiraal { position: absolute; top: 9px; left: 50%; width: 14px; height: 14px; margin-left: -7px; }
/* voorkant van de doos, met een lichte bovenrand voor dikte */
.doos__voor { height: var(--bak); z-index: 3; background: linear-gradient(180deg, #24211d 0, #24211d 3px, var(--zwart) 3px); box-shadow: inset 0 0 0 7px transparent, inset 0 -1px 0 rgba(255, 255, 255, 0.03); }
.doos__voor::after { content: ""; position: absolute; inset: 10px 7px 7px; border: 1px solid rgba(200, 179, 153, 0.7); pointer-events: none; }
.doos__label { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 4; text-align: center; font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--zand); }
/* deksel: dubbel kader en een rand onderaan, zodat je ziet dat het een deksel met dikte is */
.doos__deksel { height: var(--h); z-index: 5; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 16px 30px -16px rgba(27, 25, 23, 0.55); }
.doos__deksel::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px; background: #0d0c0a; box-shadow: inset 0 1px 0 rgba(200, 179, 153, 0.35); }
.doos__deksel .kaart-trek__voor { padding: 14px; box-shadow: inset 0 0 0 6px var(--zwart), inset 0 0 0 7px var(--zand), inset 0 0 0 10px var(--zwart), inset 0 0 0 11px rgba(200, 179, 153, 0.45); }
.doos__deksel .kaart-trek__merk { font-size: 5.5px; bottom: 17px; letter-spacing: 0.18em; }
/* open */
.doos.is-open .doos__deksel { transform: translate(132px, 4px) rotate(7deg); }
.doos.is-open .doos__kaart:nth-child(1) { transform: translateY(-10px) rotate(-3deg); transition-delay: 0.35s; }
.doos.is-open .doos__kaart:nth-child(2) { transform: translateY(-17px) rotate(1deg); transition-delay: 0.45s; }
.doos.is-open .doos__kaart:nth-child(3) { transform: translateY(-26px); transition-delay: 0.55s; }
.doos.is-open:hover .doos__kaart:nth-child(3) { transform: translateY(-46px) rotate(-1deg); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .doos__deksel, .doos__kaart { transition: none; } }
/* Kaart: onder de vraag een kleine uitnodiging om meteen iets mee te doen */
.kaart-trek__achter { gap: 12px; padding: 44px 26px 30px; }
.kaart-trek__vraag { font-size: 18px; }
.kaart-trek__doe { margin: 0; max-width: 26ch; font-size: 12.5px; line-height: 1.45; color: var(--zwart); }
.kaart-trek__uitnodiging::before { content: ""; display: block; width: 22px; height: 1px; margin: 0 auto 10px; background: var(--zwart); opacity: 0.45; }
.kaart-trek__label { margin: 0 0 4px; font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--zwart); opacity: 0.7; }
.kaart-trek__uitnodiging:has(.kaart-trek__doe:empty) { display: none; }
@media (max-width: 640px) { .kaart-trek__kaart { width: 240px; } .kaart-trek__achter { gap: 9px; padding: 38px 18px 24px; } .kaart-trek__naam { font-size: 24px; } .kaart-trek__vraag { font-size: 15.5px; } .kaart-trek__doe { font-size: 11.5px; } }
/* Kaart, verfijnd: slanke tarotverhouding, dubbel kader, rustige typografie, zachte schaduw */
.kaart-trek__kaart { width: min(270px, 100%); aspect-ratio: 5 / 8; }
.kaart-trek__voor, .kaart-trek__achter { outline: 0; }
.kaart-trek__stapel { filter: none; }
.kaart-trek__voor::before, .kaart-trek__achter::before { content: ""; position: absolute; inset: 0; z-index: -1; box-shadow: 0 22px 30px -14px rgba(27, 25, 23, 0.3); }
.kaart-trek__voor { box-shadow: inset 0 0 0 9px var(--zwart), inset 0 0 0 10px rgba(200, 179, 153, 0.9), inset 0 0 0 13px var(--zwart), inset 0 0 0 14px rgba(200, 179, 153, 0.35); }
.kaart-trek__achter { box-shadow: inset 0 0 0 9px var(--zand), inset 0 0 0 10px rgba(27, 25, 23, 0.85), inset 0 0 0 13px var(--zand), inset 0 0 0 14px rgba(27, 25, 23, 0.3); justify-content: flex-start; gap: 0; padding: 30px 30px 34px; }
.kaart-trek__nr { position: static; margin: 0; font-size: 13px; letter-spacing: 0.3em; }
.kaart-trek__nr::before, .kaart-trek__nr::after { width: 14px; margin: 0 9px; opacity: 0.4; }
.kaart-trek__naam { margin-top: auto; font-size: 34px; line-height: 1.02; letter-spacing: -0.01em; }
.kaart-trek__vraag { margin-top: 14px; font-size: 18px; line-height: 1.32; max-width: 19ch; }
.kaart-trek__uitnodiging { margin-top: auto; }
.kaart-trek__uitnodiging::before { width: 18px; margin-bottom: 12px; opacity: 0.35; }
.kaart-trek__label { font-size: 7.5px; letter-spacing: 0.32em; margin-bottom: 6px; opacity: 0.6; }
.kaart-trek__doe { font-size: 12px; line-height: 1.5; max-width: 25ch; }
.kaart-trek__merk { bottom: 30px; font-size: 7.5px; letter-spacing: 0.3em; opacity: 0.75; }
@media (max-width: 640px) { .kaart-trek__kaart { width: 236px; } .kaart-trek__achter { padding: 26px 22px 28px; } .kaart-trek__naam { font-size: 27px; } .kaart-trek__vraag { font-size: 15.5px; margin-top: 10px; } .kaart-trek__doe { font-size: 11px; } .kaart-trek__merk { bottom: 24px; font-size: 6.5px; } }
/* Echte tarotmaat: 70 × 120 mm (7:12), zodat de kaart later ook zo gedrukt kan worden; de doos op de homepage volgt dezelfde maat */
.kaart-trek__kaart { width: min(250px, 100%); aspect-ratio: 7 / 12; }
@media (max-width: 640px) { .kaart-trek__kaart { width: 226px; } }
.doos { --b: 136px; --h: 238px; --bak: calc(var(--h) - 16px); }
.doos__kaart { left: 10px; right: 10px; height: var(--bak); }
/* Doos: kaarten en deksel exact in tarotmaat 7:12 */
.doos { --b: 136px; --h: 233px; --bak: 200px; }
.doos__kaart { height: auto; aspect-ratio: 7 / 12; }
/* Orakelmaat 89 × 127 mm (± 7:10): minder langwerpig dan tarot, standaard bij drukkers */
.kaart-trek__kaart { width: min(272px, 100%); aspect-ratio: 89 / 127; }
@media (max-width: 640px) { .kaart-trek__kaart { width: 252px; } }
.doos { --b: 140px; --h: 200px; --bak: 170px; }
.doos__kaart { aspect-ratio: 89 / 127; }
/* Wachtlijst kaartenset, onder de link bij de doos */
.wachtlijst { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--grijs); max-width: 380px; }
.wachtlijst__titel { margin: 0 0 10px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted, #6b655d); }
.wachtlijst__rij { display: flex; gap: 8px; }
.wachtlijst__rij[hidden] { display: none; }
.wachtlijst__mail { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--grijs); background: #FFFFFF; color: var(--zwart); border-radius: 0; }
.wachtlijst__mail:focus { outline: none; border-color: var(--zwart); }
.wachtlijst__knop { font: inherit; font-size: 12px; letter-spacing: 0.08em; padding: 10px 14px; border: 1px solid var(--zwart); background: var(--zwart); color: var(--wit); cursor: pointer; white-space: nowrap; border-radius: 0; }
.wachtlijst__knop:hover { background: transparent; color: var(--zwart); }
.wachtlijst__dank { margin: 0; font-family: 'Instrument Serif', serif; font-size: 20px; }
@media (max-width: 420px) { .wachtlijst__rij { flex-direction: column; } }
/* Wachtlijst onder de knop bij de kaart op Thema's */
.kaart-trek__tekst .wachtlijst { margin-top: 28px; }
/* Workshops: blok voor teams en organisaties, zakelijk en rustig */
.hp-zakelijk { grid-column: 1 / -1; margin-top: clamp(48px, 5vw, 80px); background: var(--wit); padding: clamp(22px, 3vw, 44px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap, 24px); row-gap: 14px; }
.hp-zakelijk > .hp-label, .hp-zakelijk > .hp-h2, .hp-zakelijk__intro { grid-column: 1 / span 5; margin: 0; }
.hp-zakelijk__intro { max-width: 42ch; }
.hp-zakelijk__lijst { grid-column: 7 / -1; grid-row: 1 / span 4; align-self: start; }
.hp-zakelijk > .arrow-link { grid-column: 1 / span 5; align-self: start; }
@media (max-width: 860px) { .hp-zakelijk > .hp-label, .hp-zakelijk > .hp-h2, .hp-zakelijk__intro, .hp-zakelijk__lijst, .hp-zakelijk > .arrow-link { grid-column: 1 / -1; grid-row: auto; } }
.hp-zakelijk { grid-template-rows: auto auto auto 1fr; }
.hp-zakelijk > .hp-h2 { margin-top: 6px; }
.hp-zakelijk__intro { margin-top: 6px; }
.hp-zakelijk > .arrow-link { margin-top: 12px; }
/* Workshops: twee kanten naast elkaar, vrienden en familie | teams */
.hp-voorwie { grid-column: 1 / -1; margin-top: clamp(48px, 5vw, 80px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
.hp-voorwie__kant { background: var(--wit); padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.hp-voorwie__kant .hp-label, .hp-voorwie__kant .hp-h2 { margin: 0; }
.hp-voorwie__intro { margin: 0; max-width: 46ch; }
.hp-voorwie__kant .rule-list--labels { margin-top: 6px; }
.hp-voorwie__kant .arrow-link { margin-top: auto; padding-top: 10px; align-self: flex-start; }
@media (max-width: 860px) { .hp-voorwie { grid-template-columns: 1fr; } }
/* Voor wie: drie deuren, daarna één keer de praktische info */
.hp-who { row-gap: clamp(28px, 3vw, 44px); align-items: start; }
.hp-who__kop { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; }
.hp-who__kop > * { margin: 0; }
.hp-deuren { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.hp-deur { background: var(--wit); padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 10px; }
.hp-deur > * { margin: 0; }
.hp-deur__kop { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.08; }
.hp-deur__tekst { font-size: 15px; }
.hp-deur__feit { font-size: 13px; color: var(--muted, #6b655d); padding-top: 10px; border-top: 1px solid var(--grijs); }
.hp-deur .arrow-link { margin-top: auto; padding-top: 6px; align-self: flex-start; }
.hp-who .hp-who__text { align-self: start; }
@media (max-width: 960px) { .hp-deuren { grid-template-columns: 1fr; } }
.hp-deur h3.hp-deur__kop { font-family: 'Instrument Serif', serif !important; font-weight: 400 !important; letter-spacing: -0.005em; }
.hp-deur__kop .light { font-style: italic; }
.hp-deur__feit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hp-who__regel { grid-column: 1 / -1; margin: 0; font-size: 15px; }
.hp-vragen-regel .arrow-link { margin-left: 8px; }
.hp-vragen-regel { grid-column: 1 / -1; margin: clamp(24px, 3vw, 40px) 0 0; font-size: 15px; }
/* Doos: deksel helemaal naast de doos, zodat "24 kaarten" leesbaar blijft; blok iets compacter */
.doos { width: calc(var(--b) + 168px); }
.doos.is-open .doos__deksel { transform: translate(158px, 6px) rotate(6deg); }
.hp-kaart { padding-top: clamp(20px, 2.4vw, 32px); padding-bottom: clamp(20px, 2.4vw, 32px); }
/* Workshops-pagina: meer lucht tussen en binnen de blokken */
main.hp > section + section { margin-top: clamp(96px, 11vw, 168px); }
main.hp > .hp-pagehead + section { margin-top: clamp(80px, 9vw, 136px); }
.hp-intro { row-gap: clamp(48px, 5vw, 80px); }
.hp-who { row-gap: clamp(40px, 4.5vw, 72px); }
.hp-who__kop { gap: 18px; }
.hp-deuren { gap: clamp(18px, 2vw, 28px); }
.hp-deur { padding: clamp(26px, 3vw, 44px); gap: 14px; }
.hp-deur__tekst { line-height: 1.6; }
.hp-who__regel { margin-top: -12px; }
.hp-reviews { gap: clamp(40px, 5vw, 64px); }
.hp-vragen-regel { margin-top: clamp(8px, 1vw, 16px); }
.hp-who__info-title + .rule-list--labels > div { padding-top: 14px; padding-bottom: 14px; }
main.hp > section.hp-agenda { margin-top: clamp(96px, 11vw, 168px) !important; padding-top: clamp(48px, 5vw, 72px) !important; }
#contact .hp-vragen-regel { margin: clamp(40px, 5vw, 64px) 0 0; text-align: center; }
#contact .hp-vragen-regel { grid-column: 1 / -1; width: 100%; color: rgba(243, 237, 227, 0.75); }
#contact .hp-vragen-regel .arrow-link { color: #F3EDE3; }
/* Workshopkaarten: prijs en link onderaan */
.hp-ws__meta { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--grijs); font-size: 13px; color: var(--muted, #6b655d); }
.hp-ws__more { color: var(--zwart); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--blauw); }
.hp-ws__item:hover .hp-ws__more { text-decoration-color: var(--zwart); }
/* Goed om te weten: zonder foto, strak in twee kolommen */
.hp-who .hp-who__text { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.hp-who .hp-who__info-title { grid-column: 1 / span 4; margin: 0; }
.hp-who .hp-who__info-title + .rule-list--labels { grid-column: 5 / -1; margin: 0; background: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 48px); border-top: 1px solid var(--zwart); }
.hp-who .hp-who__info-title + .rule-list--labels > div { grid-template-columns: 100px 1fr; border-bottom: 1px solid var(--grijs); padding: 16px 0; }
@media (max-width: 860px) { .hp-who .hp-who__info-title, .hp-who .hp-who__info-title + .rule-list--labels { grid-column: 1 / -1; } .hp-who .hp-who__info-title + .rule-list--labels { grid-template-columns: 1fr; margin-top: 14px; } }
.hp-who .hp-who__text { margin-top: clamp(32px, 4vw, 56px); }
/* Deuren zijn zelf klikbaar, zonder losse links */
a.hp-deur { color: inherit; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; }
a.hp-deur:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -22px rgba(27, 25, 23, 0.45); }
a.hp-deur .hp-deur__feit { margin-top: auto; }
/* Workshopkaarten: foto zoomt zacht in bij hover */
.hp-ws__img { overflow: hidden; }
.hp-ws__img img { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease; }
@media (hover: hover) { .hp-ws__item:hover .hp-ws__img img { transform: scale(1.04); } }
/* Formulier: bij hover en bij kiezen krijgt elke workshop zijn eigen kleur */
.choice { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
.choice:has(input[value="Movement in Presence"]) { --wk: #7F8B68; --wk-tekst: #FFFFFF; }
.choice:has(input[value="Intuitive Painting"]) { --wk: #B86E50; --wk-tekst: #FFFFFF; }
.choice:has(input[value="First Move, Then Paint"]) { --wk: #A9C6F3; --wk-tekst: #1B1917; }
@media (hover: hover) { .choice:has(input[name="workshop"]):hover { background: var(--wk); border-color: var(--wk); color: var(--wk-tekst); } .choice:has(input[name="workshop"]):hover .choice__sub { color: inherit; opacity: 0.8; } }
.choice:has(input[name="workshop"]:checked) { background: var(--wk); border-color: var(--wk); color: var(--wk-tekst); }
.choice:has(input[name="workshop"]:checked) .choice__sub { color: inherit; opacity: 0.8; }
/* Goed om te weten staat nu boven Voor wie */
.hp-who .hp-who__text { margin-top: 0; margin-bottom: clamp(48px, 6vw, 96px); }
/* Doos verfijnd: licht en diepte op de voorkant, een stapel kaartranden, een deksel met dikte */
.doos__voor { background: linear-gradient(180deg, #2a2621 0, #1f1c19 18%, #181613 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -18px 30px -18px rgba(0, 0, 0, 0.6), 0 26px 40px -24px rgba(27, 25, 23, 0.7); }
.doos__voor::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(180deg, #3a342e, #1B1917); }
.doos__voor::after { inset: 14px 9px 9px; border-color: rgba(200, 179, 153, 0.55); }
.doos__label { bottom: 22px; font-size: 7px; letter-spacing: 0.34em; opacity: 0.9; }
/* stapel: dunne kaartranden die net boven de doos uitkomen */
.doos__kaarten::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: calc(var(--bak) - 4px); height: 9px; background: repeating-linear-gradient(180deg, #C8B399 0 1px, #b6a185 1px 2px); box-shadow: 0 -1px 0 rgba(27, 25, 23, 0.25); opacity: 0; transition: opacity 0.6s ease 0.3s; }
.doos.is-open .doos__kaarten::after { opacity: 1; }
/* deksel: rand rondom voor dikte, ligt schuin naast de doos */
.doos__deksel { box-shadow: 3px 4px 0 #0f0d0b, 5px 7px 0 -1px rgba(200, 179, 153, 0.25), 0 26px 38px -20px rgba(27, 25, 23, 0.7); }
.doos__deksel::after { display: none; }
.doos.is-open .doos__deksel { transform: translate(160px, 14px) rotate(8deg); }
/* Workshops: alle blokken met hetzelfde kleine label, links */
#ervaringen.hp-reviews { align-items: stretch; text-align: left; }
.hp-who h2.hp-who__info-title { font-family: inherit; font-size: inherit; line-height: inherit; }
.hp-who h2.hp-label.hp-who__info-title { font-family: 'Instrument Sans', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.18em; line-height: 1.5; color: var(--muted); }
/* Formulier: workshopkeuzes ruimer, titel en ondertitel niet op elkaar */
.request-form .choices--3 { gap: 12px; }
.request-form .choice:has(input[name="workshop"]) { gap: 6px; padding: 16px 16px 15px; justify-content: flex-start; }
.request-form .choice:has(input[name="workshop"]) .choice__name { line-height: 1.25; font-size: 15px; }
.request-form .choice:has(input[name="workshop"]) .choice__sub { line-height: 1.35; font-size: 12.5px; }
/* Voor wie: redactionele kolommen in plaats van witte blokken, zodat ze anders ogen dan de ervaringen */
.hp-deuren { gap: clamp(24px, 3vw, 48px); }
.hp-deur { background: none; padding: 22px 0 0; border-top: 1px solid var(--zwart); gap: 12px; }
a.hp-deur:hover { transform: none; box-shadow: none; }
.hp-deur h3.hp-deur__kop { font-size: clamp(26px, 2.3vw, 34px); line-height: 1.05; }
.hp-deur__kop::after { content: " →"; font-family: 'Instrument Sans', sans-serif; font-size: 0.55em; opacity: 0; transition: opacity 0.25s ease; vertical-align: middle; }
a.hp-deur:hover .hp-deur__kop::after { opacity: 1; }
.hp-deur__feit { border-top: 0; padding-top: 0; margin-top: auto; }
@media (max-width: 960px) { .hp-deur { padding-bottom: 8px; } }
/* Voor wie: één zandkleurig vlak met drie kolommen, gescheiden door fijne lijnen */
.hp-deuren { background: var(--zand); padding: clamp(28px, 3.5vw, 52px); gap: 0; }
.hp-deur { border-top: 0; padding: 4px clamp(18px, 2.4vw, 36px) 4px; border-left: 1px solid rgba(27, 25, 23, 0.25); }
.hp-deur:first-child { border-left: 0; padding-left: 0; }
.hp-deur:last-child { padding-right: 0; }
.hp-deur .hp-label { color: rgba(27, 25, 23, 0.7); }
.hp-deur__feit { color: rgba(27, 25, 23, 0.7); }
@media (max-width: 960px) { .hp-deur, .hp-deur:first-child, .hp-deur:last-child { border-left: 0; padding: 20px 0; border-top: 1px solid rgba(27, 25, 23, 0.25); } .hp-deur:first-child { border-top: 0; padding-top: 0; } }
/* Voor wie: geen vlak, alleen drie luchtige kolommen met fijne verticale lijnen */
.hp-deuren { background: none; padding: 0; }
.hp-deur { padding: 6px clamp(24px, 3vw, 48px); border-left: 1px solid rgba(27, 25, 23, 0.2); }
.hp-deur:first-child { padding-left: 0; border-left: 0; }
.hp-deur:last-child { padding-right: 0; }
.hp-deur .hp-label, .hp-deur__feit { color: var(--muted, #6b655d); }
@media (max-width: 960px) { .hp-deur, .hp-deur:first-child, .hp-deur:last-child { border-left: 0; padding: 22px 0; border-top: 1px solid rgba(27, 25, 23, 0.15); } .hp-deur:first-child { border-top: 0; padding-top: 0; } }
/* Voor wie: een lichte band over de hele breedte, zodat het een eigen stuk van de pagina is */
.hp-deuren { box-shadow: 0 0 0 100vmax #F6F1E9; clip-path: inset(-112px -100vmax -104px -100vmax); }
.hp-who__regel { position: relative; }
.hp-deuren { background: #F6F1E9; }
.hp-who__kop { position: relative; z-index: 1; }
.hp-who__regel { z-index: 1; }
/* Voor wie: een ronde foto boven elke kolom, als een klein venster */
.hp-deur__foto { width: clamp(84px, 8vw, 112px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; margin-bottom: 8px; filter: grayscale(1) sepia(0.07) contrast(0.97) brightness(1.02); transition: filter 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) { a.hp-deur:hover .hp-deur__foto { filter: sepia(0.07) saturate(0.96); transform: scale(1.05); } }
/* Voor wie staat nu direct onder Hoe het werkt; Goed om te weten heeft geen ondermarge meer nodig */
.hp-who#goed-om-te-weten .hp-who__text { margin-bottom: 0; }
#goed-om-te-weten .hp-who__regel { grid-column: 5 / -1; margin-top: clamp(-8px, -1vw, 0px); }
@media (max-width: 860px) { #goed-om-te-weten .hp-who__regel { grid-column: 1 / -1; } }
.hp-deuren { clip-path: inset(-112px -100vmax -72px -100vmax); }
/* Workshops-pagina, één systeem: klein label erboven, titels in de schreefletter, inhoud over de volle breedte */
main.hp .hp-intro > .hp-label, main.hp .hp-agenda > div:first-child { grid-column: 1 / -1; padding-top: 0; }
main.hp .hp-statement { grid-column: 1 / span 10; margin: 0; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.12; letter-spacing: -0.01em; color: var(--zwart); max-width: 26ch; }
main.hp .hp-steps { grid-column: 1 / -1; }
main.hp .hp-steps h3, main.hp .hp-ws__name { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.005em; font-size: clamp(24px, 2vw, 30px); line-height: 1.05; }
main.hp .hp-ws .hp-head, main.hp .hp-head { align-items: end; }
main.hp #goed-om-te-weten .hp-who__text { row-gap: 22px; }
main.hp #goed-om-te-weten .hp-who__info-title { grid-column: 1 / -1; }
main.hp #goed-om-te-weten .hp-who__info-title + .rule-list--labels { grid-column: 1 / -1; }
main.hp #goed-om-te-weten .hp-who__regel { grid-column: 1 / -1; }
main.hp .hp-agenda { row-gap: 22px; }
main.hp .hp-intro > .hp-label { grid-row: 1 !important; margin: 0 !important; }
main.hp .hp-intro > .hp-statement { grid-row: 2 !important; font-size: clamp(28px, 2.8vw, 42px) !important; line-height: 1.14 !important; max-width: 30ch; text-wrap: balance; }
main.hp .hp-intro > .hp-steps { grid-row: 3 !important; }
main.hp .hp-steps h3, main.hp .hp-ws__name { font-family: 'Instrument Serif', serif !important; font-weight: 400 !important; }
main.hp .hp-head { flex-direction: column; align-items: flex-start; gap: 10px; }
main.hp .hp-head__text { max-width: 52ch; }
/* Kalender: dagen van inheemse volken */
.kal__dag.is-inheems { background: transparent; }
.kal__dag.is-inheems .kal__num { color: var(--ink); font-weight: 600; }
.kal__dag.is-inheems::after { content: ""; position: absolute; left: 8px; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--terra); opacity: 0.75; }
.kal__veer { color: var(--muted); vertical-align: -1px; }
/* Doos: het deksel even groot als de doos, de naam op de doos zelf */
.doos__deksel { width: calc(var(--b) + 4px) !important; height: calc(var(--bak) + 4px) !important; left: -2px !important; }
.doos__deksel .kaart-trek__voor { padding: 12px; }
.doos__deksel .kaart-trek__svg { width: 62% !important; }
.doos__merk { position: absolute; left: 0; right: 0; top: 46%; transform: translateY(-50%); z-index: 4; text-align: center; font-size: 7.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--zand); line-height: 1.9; padding: 0 18px; }
/* Doos, echte vorm: een ondiepe kap op de doos die bij openen omhoog tilt; kaarten eronder, naam op de doos */
.doos { width: calc(var(--b) + 24px); height: calc(var(--bak) + 120px); }
.doos__deksel { width: calc(var(--b) + 6px) !important; height: 62px !important; left: -3px !important; bottom: calc(var(--bak) - 34px) !important; z-index: 6; background: linear-gradient(180deg, #2a2621, #1B1917); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 18px -10px rgba(0, 0, 0, 0.6) !important; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.doos__deksel .kaart-trek__voor { position: absolute; inset: 0; padding: 0; background: none; box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(200, 179, 153, 0.55) !important; display: flex; align-items: center; justify-content: center; }
.doos__deksel .kaart-trek__svg { width: auto !important; height: 70% !important; }
.doos__deksel .kaart-trek__merk { display: none; }
.doos.is-open .doos__deksel { transform: translate(6px, -86px) rotate(-5deg); }
.doos.is-open .doos__kaart:nth-child(1) { transform: translateY(-10px) rotate(-3deg); }
.doos.is-open .doos__kaart:nth-child(2) { transform: translateY(-17px) rotate(1deg); }
.doos.is-open .doos__kaart:nth-child(3) { transform: translateY(-26px); }
.doos.is-open:hover .doos__deksel { transform: translate(6px, -98px) rotate(-6deg); }
.doos.is-open:hover .doos__kaart:nth-child(3) { transform: translateY(-40px) rotate(-1deg); }
.doos__merk { top: 44%; }
.doos__deksel { background: #1B1917 !important; }
.doos__deksel .kaart-trek__voor { box-shadow: none !important; outline: 1px solid rgba(200, 179, 153, 0.55); outline-offset: -6px; }
.doos__deksel .kaart-trek__voor::before { display: none; }
/* Kalender: seizoensfeesten */
.kal__dag.is-seizoen { background: transparent; }
.kal__dag.is-seizoen .kal__num { color: var(--ink); font-weight: 600; }
.kal__dag.is-seizoen::after { content: ""; position: absolute; left: 8px; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--terra); opacity: 0.75; }
.kal__blad { color: var(--muted); vertical-align: -1px; }
/* Homepage: een waaier van vijf kaarten in plaats van een doos */
.waaier { position: relative; display: block; width: 300px; height: 240px; }
.waaier__kaart { position: absolute; left: 50%; bottom: 10px; width: 124px; aspect-ratio: 89 / 127; margin-left: -62px; transform-origin: 50% 115%; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 14px 26px -16px rgba(27, 25, 23, 0.55); }
.waaier__kaart .kaart-trek__voor { position: absolute; inset: 0; padding: 10px; background: var(--zwart); box-shadow: inset 0 0 0 6px var(--zwart), inset 0 0 0 7px rgba(200, 179, 153, 0.8) !important; display: flex; align-items: center; justify-content: center; backface-visibility: visible; transform: none; }
.waaier__kaart .kaart-trek__svg { width: 64% !important; height: auto !important; position: static !important; margin: 0 !important; opacity: 1 !important; }
.waaier__kaart .kaart-trek__merk { font-size: 5px; bottom: 13px; letter-spacing: 0.18em; }
.waaier__kaart--1, .waaier__kaart--2, .waaier__kaart--3, .waaier__kaart--4 { filter: brightness(0.92); }
/* dicht: een nette stapel */
.waaier__kaart--1 { transform: rotate(-1.5deg); } .waaier__kaart--2 { transform: rotate(-0.8deg); } .waaier__kaart--3 { transform: rotate(0deg); } .waaier__kaart--4 { transform: rotate(0.8deg); } .waaier__kaart--5 { transform: rotate(1.5deg); }
/* open: rustig uitgewaaierd */
.waaier.is-open .waaier__kaart--1 { transform: rotate(-24deg); }
.waaier.is-open .waaier__kaart--2 { transform: rotate(-12deg); }
.waaier.is-open .waaier__kaart--3 { transform: rotate(0deg); }
.waaier.is-open .waaier__kaart--4 { transform: rotate(12deg); }
.waaier.is-open .waaier__kaart--5 { transform: rotate(24deg) translateY(-6px); }
.waaier.is-open:hover .waaier__kaart--5 { transform: rotate(24deg) translateY(-26px); }
@media (prefers-reduced-motion: reduce) { .waaier__kaart { transition: none; } }
@media (max-width: 560px) { .waaier { width: 260px; height: 210px; } .waaier__kaart { width: 108px; margin-left: -54px; } }
/* Waaier rijker: elf kaarten, gelijkmatig verdeeld over een boog */
.waaier { --n: 11; width: 340px; height: 250px; }
.waaier__kaart { transform: rotate(calc((var(--i) - 5) * 0.35deg)); filter: brightness(calc(0.82 + var(--i) * 0.018)); }
.waaier.is-open .waaier__kaart { transform: rotate(calc((var(--i) - 5) * 6.5deg)); }
.waaier.is-open .waaier__kaart:last-child { transform: rotate(calc((var(--i) - 5) * 6.5deg)) translateY(-6px); }
.waaier.is-open:hover .waaier__kaart:last-child { transform: rotate(calc((var(--i) - 5) * 6.5deg)) translateY(-26px); }
.waaier__kaart:nth-child(1), .waaier__kaart:nth-child(2), .waaier__kaart:nth-child(3), .waaier__kaart:nth-child(4), .waaier__kaart:nth-child(5) { transition-delay: 0s; }
.waaier__kaart:last-child { filter: none; }
@media (max-width: 560px) { .waaier { width: 280px; height: 220px; } .waaier.is-open .waaier__kaart { transform: rotate(calc((var(--i) - 5) * 5deg)); } .waaier.is-open .waaier__kaart:last-child { transform: rotate(calc((var(--i) - 5) * 5deg)) translateY(-6px); } }
/* Waaier: de bovenste kaart rechtop in het midden, de rest gelijk aan beide kanten */
.waaier.is-open .waaier__kaart { transform: rotate(calc((var(--i) - 4.5) * 7deg)); }
.waaier.is-open .waaier__kaart:last-child { transform: translateY(-8px); }
.waaier.is-open:hover .waaier__kaart:last-child { transform: translateY(-28px); }
@media (max-width: 560px) { .waaier.is-open .waaier__kaart { transform: rotate(calc((var(--i) - 4.5) * 5.5deg)); } .waaier.is-open .waaier__kaart:last-child { transform: translateY(-8px); } }
/* Thema's: de kaart zelf is de knop; zacht oplichten bij hover nodigt uit om te klikken */
.kaart-trek__kaart { cursor: pointer; }
@media (hover: hover) { .kaart-trek__kaart:not(.is-om):hover { transform: translateY(-6px) rotate(-1deg); } }
.kaart-trek__kaart:focus-visible { outline: 2px solid var(--zwart); outline-offset: 6px; }
/* Waaier: één kant op, zoals je kaarten in je hand houdt; elf kaarten, de bovenste vooraan */
.waaier { width: 320px; }
.waaier__kaart { left: 38%; transform-origin: 30% 110%; }
.waaier.is-open .waaier__kaart { transform: rotate(calc(-10deg + var(--i) * 3.4deg)); }
.waaier.is-open .waaier__kaart:last-child { transform: rotate(24deg) translateY(-4px); }
.waaier.is-open:hover .waaier__kaart:last-child { transform: rotate(24deg) translateY(-22px); }
@media (max-width: 560px) { .waaier.is-open .waaier__kaart { transform: rotate(calc(-8deg + var(--i) * 2.8deg)); } .waaier.is-open .waaier__kaart:last-child { transform: rotate(20deg) translateY(-4px); } }
/* Waaier gecentreerd: in de rechterhelft van het blok, en de kaarten midden in hun vlak */
.hp-kaart { grid-template-columns: 1fr 1fr; }
.hp-kaart .waaier { justify-self: center; }
.waaier__kaart { left: calc(38% + 18px); bottom: 46px; }
@media (max-width: 560px) { .hp-kaart { grid-template-columns: 1fr; } }
.waaier__kaart { left: calc(38% + 44px); bottom: 36px; }
.kaart-verder .arrow-link { margin-left: 8px; }
/* Kaart: de vraag is de hoofdzaak, het thema een klein label erboven */
.kaart-trek__achter .kaart-trek__naam { font-family: 'Instrument Sans', sans-serif; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; line-height: 1.4; color: rgba(27, 25, 23, 0.7); margin: 0 0 12px; }
.kaart-trek__achter .kaart-trek__vraag { font-family: 'Instrument Serif', serif; font-style: normal; font-size: 25px; line-height: 1.12; letter-spacing: -0.005em; max-width: 13ch; margin: 0 auto; }
.kaart-trek__achter .kaart-trek__doe { font-size: 13px; line-height: 1.5; }
@media (max-width: 640px) { .kaart-trek__achter .kaart-trek__vraag { font-size: 21px; } .kaart-trek__achter .kaart-trek__doe { font-size: 12px; } }
.kaart-trek__achter { justify-content: flex-start; padding-top: 56px; }
.kaart-trek__achter .kaart-trek__naam { margin-top: auto; }
.kaart-trek__achter .kaart-trek__uitnodiging { margin-top: auto; }
/* Thema's: de korte zin onder de naam duidelijker, rechtop en iets groter */
.thema__kort { font-family: 'Instrument Serif', serif; font-style: normal; font-size: 21px; line-height: 1.2; color: var(--zwart); margin: 4px 0 2px; }
.kaart-trek__deel { display: inline-block; margin-top: 14px; }
.kaart-trek__deel[hidden] { display: none; }
/* Kalender: elke dag een zinnetje van de maan */
.kal__vandaag { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--grijs); font-family: 'Instrument Serif', serif; font-style: italic; font-size: 18px; line-height: 1.35; color: var(--zwart); }
/* Wachtlijst onder het kaartblok, zodat de kaart op zichzelf staat */
.kaart-wacht { margin-top: clamp(28px, 3vw, 40px); }
.kaart-wacht .wachtlijst { margin-top: 0; padding-top: 0; border-top: 0; }
.kal__info-maan { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted, #6b655d); }
.kal__dagzin-link { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blauw); }
.kal__dagzin-link:hover { text-decoration-color: var(--zwart); }
/* Levende kalender: vandaag ademt zacht, het zinnetje komt rustig binnen met de maan van nu */
.kal__vandaag { display: flex; gap: 10px; align-items: baseline; animation: kal-binnen 1.4s ease both; }
.kal__vandaag-maan { flex: none; color: var(--zwart); position: relative; top: 1px; }
.kal__vandaag-maan svg { width: 14px; height: 14px; }
@keyframes kal-binnen { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.kal__dag.is-vandaag { animation: kal-adem 5s ease-in-out infinite; }
@keyframes kal-adem { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(169, 198, 243, 0.5); } 50% { box-shadow: inset 0 0 0 1px rgba(120, 160, 225, 0.95), 0 0 14px rgba(169, 198, 243, 0.6); } }
@media (prefers-reduced-motion: reduce) { .kal__vandaag, .kal__dag.is-vandaag { animation: none; } }
/* Een vlinder die heel af en toe over de kalender fladdert */
.kal__vlinder { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; }
@keyframes kal-fladder { from { transform: scaleX(1); } to { transform: scaleX(0.3); } }
/* Vonkje in plaats van vlinder: een twinkelend sterretje in zand en goud */
.kal__ster { fill: #E2C891; stroke: #B8955A; stroke-width: 0.4; transform-box: fill-box; transform-origin: center; animation: kal-twinkel 1.6s ease-in-out infinite alternate; }
.kal__ster--2 { animation-delay: -0.5s; fill: #FFFFFF; stroke: #C8B399; }
.kal__ster--3 { animation-delay: -1s; fill: #FFFFFF; stroke: #C8B399; }
.kal__gloed { animation: kal-gloed 2.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes kal-twinkel { from { transform: scale(0.75) rotate(0deg); opacity: 0.75; } to { transform: scale(1.1) rotate(25deg); opacity: 1; } }
@keyframes kal-gloed { from { opacity: 0.5; transform: scale(0.85); } to { opacity: 1; transform: scale(1.15); } }
/* Vuurvliegjes: kleine warme stipjes die zacht oplichten en weer doven */
.kal__vlieg { position: absolute; left: 0; top: 0; z-index: 3; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; pointer-events: none; background: var(--kleur, #C8B399); box-shadow: 0 0 5px 1px var(--kleur, #C8B399), 0 0 14px 4px color-mix(in srgb, var(--kleur, #C8B399) 45%, transparent); animation: kal-vuur var(--puls, 1400ms) ease-in-out infinite alternate; }
@keyframes kal-vuur { from { opacity: 0.35; transform: scale(0.7); } to { opacity: 1; transform: scale(1.15); } }
/* De atalanta: een echte foto, de twee vleugelhelften klappen om het lijfje */
.kal__vlinder { width: 44px; height: 25px; display: block; filter: drop-shadow(0 3px 4px rgba(27, 25, 23, 0.2)); }
.kal__vleugel { position: absolute; top: 0; width: 50%; height: 100%; background: url(images/vlinder-atalanta.webp) no-repeat; background-size: 200% 100%; animation: kal-fladder 0.3s ease-in-out infinite alternate; }
.kal__vleugel--l { left: 0; background-position: 0 0; transform-origin: right center; }
.kal__vleugel--r { right: 0; background-position: 100% 0; transform-origin: left center; }
/* Legenda: klik op een teken voor uitleg */
.kal__legend button { all: unset; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border-bottom: 1px dotted transparent; }
.kal__legend button:hover, .kal__legend button.is-aan { color: var(--zwart); border-bottom-color: currentColor; }
.kal__legend button:focus-visible { outline: 1px solid var(--zwart); outline-offset: 2px; }
.kal__legend-uitleg { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--zwart); }
/* Kalender: Slavische traditie, met de varenbloem */
.kal__dag.is-slavisch { background: transparent; }
.kal__dag.is-slavisch .kal__num { color: var(--ink); font-weight: 600; }
.kal__dag.is-slavisch::after { content: ""; position: absolute; left: 8px; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--terra); opacity: 0.75; }
.kal__varen { color: var(--muted); vertical-align: -1px; }
.kal__dag.is-hongaars { background: transparent; }
.kal__dag.is-hongaars .kal__num { color: var(--ink); font-weight: 600; }
.kal__dag.is-hongaars::after { content: ""; position: absolute; left: 8px; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--zand); }
.kal__tulp { color: var(--muted); vertical-align: -1px; }
.kal__dag.is-dier { background: transparent; }
.kal__dag.is-dier .kal__num { color: var(--ink); font-weight: 600; }
.kal__dag.is-dier::after { content: ""; position: absolute; left: 8px; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); opacity: 0.3; }
.kal__poot { color: var(--muted); vertical-align: -1px; }
.kal__verder { grid-column: 5 / -1; margin: 18px 0 0; font-size: 15px; }
.kal__verder .arrow-link { margin-left: 8px; }
@media (max-width: 860px) { .kal__verder { grid-column: 1 / -1; } }
/* Vlinder in rust: vleugels bewegen nauwelijks, heel langzaam */
.kal__vlinder.is-rust .kal__vleugel { animation-name: kal-rust; animation-timing-function: ease-in-out; }
@keyframes kal-rust { from { transform: scaleX(1); } to { transform: scaleX(0.82); } }

/* Aarde: een open ringetje */
.kal__dag.is-aarde { background: transparent; }
.kal__dag.is-aarde .kal__num { color: var(--ink); font-weight: 600; }
.kal__dag.is-aarde::after { content: ""; position: absolute; left: 8px; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; box-sizing: border-box; border: 1px solid var(--ink); opacity: 0.5; }
.kal__blad { color: var(--muted); vertical-align: -1px; }
/* Dagen die al geweest zijn: een zacht crème vlak uit de kleurenkaart */
.kal__grid .kal__dag.is-geweest { background: rgba(238, 231, 220, 0.45); }
.kal__grid .kal__dag.is-geweest .kal__num { opacity: 0.45; }
/* Sterrenbeelden uitgeklapt in de legenda */
.kal__zodlijst { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.kal__zodlijst li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.kal__zodteken { flex: none; width: 22px; font-size: 18px; line-height: 1.1; text-align: center; color: var(--zwart); }
.kal__zoddatum { color: var(--muted, #6b655d); font-size: 12px; }
@media (max-width: 560px) { .kal__zodlijst { grid-template-columns: 1fr; } }
.kal__titel { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 14px; color: var(--zwart); }
/* Kalender warm: vandaag in terracotta, de stipjes in zand */
.kal__dag.is-vandaag .kal__num { background: var(--terra); color: #FFFFFF; }
.kal__dag.is-vandaag { box-shadow: inset 0 0 0 1px var(--terra); }
.kal__dag.is-vandaag.is-gekozen { box-shadow: inset 0 0 0 2px var(--terra); }
.kal__dag.is-feest .kal__num { color: #9A7F5E; }
.kal__dag.is-zod::after, .kal__dag.is-inheems::after, .kal__dag.is-seizoen::after, .kal__dag.is-slavisch::after, .kal__dag.is-hongaars::after, .kal__dag.is-dier::after { background: var(--zand); opacity: 1; }
.kal__dag.is-aarde::after { border-color: var(--zand); opacity: 1; }
.kal__tijd { display: inline-flex; gap: 3px; align-items: center; }
.kal__tijd i { display: block; width: 9px; height: 9px; box-sizing: border-box; }
.kal__tijd .is-geweest { background: rgba(238, 231, 220, 0.9); border: 1px solid var(--line, #D8D5CF); }
.kal__tijd .is-nu { background: var(--blauw); border-radius: 50%; }
.kal__tijd .is-straks { background: #FFFFFF; border: 1px solid var(--line, #D8D5CF); }
.kal__alef { display: inline-block; width: 12px; text-align: center; font-family: 'Times New Roman', serif; font-size: 13px; line-height: 1; color: var(--muted); }
.kal__dag.is-hebr { background: transparent; }
.kal__dag.is-hebr .kal__num { color: var(--ink); font-weight: 600; }
.kal__dag.is-hebr::after { content: ""; position: absolute; left: 8px; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--zand); }
.kal__uitn { margin: 8px 0 0; padding: 8px 12px; background: rgba(238, 231, 220, 0.6); font-size: 14px; line-height: 1.5; font-style: italic; }
.kal__uitn span { font-style: normal; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted, #6b655d); margin-right: 6px; }
/* Kalender iets groter op de computer */
@media (min-width: 900px) { .kalender { max-width: 720px; } .kal__dag { min-height: 60px; padding: 8px 9px; } .kal__num { font-size: 15px; } }
/* Kalenderinfo iets beter leesbaar, maar stil: kleine maten een tikje groter */
.kal__legend { font-size: 12.5px; gap: 6px 16px; }
.kal__hint { font-size: 13px; }
.kal__info-moon, .kal__info-maan { font-size: 15px; }
.kal__info-meta { font-size: 13px; }
.kal__legend-uitleg { font-size: 14px; }
.kal__uitn { font-size: 15px; }
.kal__zodlijst li { font-size: 14px; }
.kal__piramide { color: var(--muted); vertical-align: -1px; }
.kal__dag.is-maya { background: transparent; }
.kal__dag.is-maya .kal__num { color: var(--ink); font-weight: 600; }
.kal__dag.is-maya::after { content: ""; position: absolute; left: 8px; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--zand); }
.kal__dertien { color: var(--muted); vertical-align: -1px; }
.kal__dag.is-dertien { background: transparent; }
.kal__dag.is-dertien .kal__num { color: var(--ink); font-weight: 600; }
.kal__dag.is-dertien::after { content: ""; position: absolute; left: 8px; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--zand); }
.kal__ecl, .kal__raster { color: var(--muted); vertical-align: -1px; }
.kal__dag.is-ecl { background: transparent; }
.kal__dag.is-ecl .kal__num { color: var(--ink); font-weight: 600; }
.kal__dag.is-ecl::after { content: ""; position: absolute; left: 8px; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--zand); }
.kal__legend-rest { display: contents; }
.kal__legend-rest[hidden] { display: none; }
.kal__legend .kal__legend-meer { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zwart); border-bottom: 1px solid currentColor; }
.kal__nsk { color: var(--muted); vertical-align: -1px; }
.kal__zodteken { font-family: 'Instrument Serif', serif; }
.kal__eerlijk { grid-column: 5 / -1; max-width: 720px; margin-top: clamp(28px, 3vw, 40px); }
@media (max-width: 860px) { .kal__eerlijk { grid-column: 1 / -1; } }
.kal__eerlijk .hp-label { margin: 0 0 10px; }
.kal__eerlijk p:last-child { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink); }
.kal__eerlijk > summary { list-style: none; cursor: pointer; display: inline-block; }
.kal__eerlijk > summary::-webkit-details-marker { display: none; }
.kal__eerlijk > summary::after { content: ' +'; }
.kal__eerlijk[open] > summary::after { content: ' −'; }
.kal__eerlijk > summary:hover { color: var(--zwart); }
.kal__legend .kal__legend-eerlijk { font-style: italic; }
.kal__sleutel { color: var(--muted); vertical-align: -1px; margin-right: 4px; }
.kal__ankh, .kal__lotus, .kal__torii { color: var(--muted); vertical-align: -1px; }
.kal__dag.is-oudkal { background: transparent; }
.kal__dag.is-oudkal .kal__num { color: var(--ink); font-weight: 600; }
.kal__dag.is-oudkal::after { content: ""; position: absolute; left: 8px; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--zand); }
.kal__diya { color: var(--muted); vertical-align: -1px; }
/* Portaal: grijs zoals de rest; bij aanraken licht het langzaam op in goud */
.kal__legend .kal__legend-eerlijk, .kal__legend .kal__legend-eerlijk .kal__sleutel { transition: color 2.2s ease, text-shadow 2.8s ease, border-color 2.2s ease; }
.kal__legend .kal__legend-eerlijk:hover, .kal__legend .kal__legend-eerlijk.is-aan { color: #A8823F; text-shadow: 0 0 10px rgba(216, 181, 106, 0.55); border-bottom-color: #C8A25A; }
.kal__legend .kal__legend-eerlijk:hover .kal__sleutel, .kal__legend .kal__legend-eerlijk.is-aan .kal__sleutel { color: #A8823F; }
/* …en als het goud is, gaat het zacht glinsteren: twee sterretjes en een ademende gloed */
.kal__legend .kal__legend-eerlijk { position: relative; }
.kal__legend .kal__legend-eerlijk::before, .kal__legend .kal__legend-eerlijk::after { content: "✦"; position: absolute; font-style: normal; color: #D8B56A; opacity: 0; pointer-events: none; transition: opacity 1.5s ease 1.6s; }
.kal__legend .kal__legend-eerlijk::before { top: -7px; right: -6px; font-size: 8px; }
.kal__legend .kal__legend-eerlijk::after { bottom: -5px; left: 10px; font-size: 6px; }
.kal__legend .kal__legend-eerlijk:hover::before, .kal__legend .kal__legend-eerlijk.is-aan::before { opacity: 1; animation: kal-glinster 1.8s ease-in-out 2s infinite; }
.kal__legend .kal__legend-eerlijk:hover::after, .kal__legend .kal__legend-eerlijk.is-aan::after { opacity: 1; animation: kal-glinster 2.3s ease-in-out 2.6s infinite; }
.kal__legend .kal__legend-eerlijk:hover, .kal__legend .kal__legend-eerlijk.is-aan { animation: kal-gloed 3s ease-in-out 2.2s infinite; }
@keyframes kal-glinster { 0%, 100% { opacity: 0.2; transform: scale(0.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }
@keyframes kal-gloed { 0%, 100% { text-shadow: 0 0 8px rgba(216, 181, 106, 0.45); } 50% { text-shadow: 0 0 14px rgba(216, 181, 106, 0.9), 0 0 2px rgba(255, 240, 200, 0.9); } }
@media (prefers-reduced-motion: reduce) { .kal__legend .kal__legend-eerlijk, .kal__legend .kal__legend-eerlijk::before, .kal__legend .kal__legend-eerlijk::after { animation: none !important; } }
/* Het sleuteltje staat los tussen de tekens, zonder woord */
.kal__legend .kal__legend-eerlijk { padding: 2px 4px; margin: -2px -4px; }
.kal__legend .kal__legend-eerlijk .kal__sleutel { margin-right: 0; width: 13px; height: 13px; }
.kal__legend .kal__legend-eerlijk::after { left: 2px; }
/* Zinnen en lopende tekst in Instrument Sans; alleen titels blijven in Instrument Serif (Reena, 4 okt 2026) */
.hp-why__text, .hp-statement, main.hp .hp-statement, .cover__lead, .hp-pagehead__lead, .over__mission,
.hp-quote blockquote, .ws-quote blockquote, .review-big__quote, .hp-who .rule-list--labels dd,
.feel__story, .feel__cap, .thema__kort, .thema__vraag, .themakeuze__kort, .kaart-trek__intro,
.hp-kaart__zin, .wachtlijst__dank, .kal__vandaag {
  font-family: 'Instrument Sans', sans-serif !important; font-style: normal !important; font-weight: 400 !important; letter-spacing: -0.005em !important;
}
.hp-why__text { font-size: clamp(17px, 1.45vw, 20px) !important; line-height: 1.6 !important; }
.hp-statement, main.hp .hp-statement { font-size: clamp(20px, 1.9vw, 27px) !important; line-height: 1.35 !important; }
.hp-quote blockquote, .ws-quote blockquote, .review-big__quote { font-size: clamp(18px, 1.7vw, 23px) !important; line-height: 1.5 !important; }
.cover__lead, .hp-pagehead__lead { line-height: 1.5 !important; }
.over__mission { font-size: clamp(19px, 1.7vw, 24px) !important; line-height: 1.4 !important; }
.hp-who .rule-list--labels dd { font-size: clamp(16px, 1.3vw, 18px) !important; line-height: 1.5 !important; }
.thema__kort, .themakeuze__kort { font-size: 16px !important; line-height: 1.45 !important; }
.thema__vraag { font-size: 15px !important; line-height: 1.5 !important; }
.feel__story { font-size: clamp(15px, 1.2vw, 17px) !important; line-height: 1.5 !important; }
.feel__cap { font-size: 14px !important; }
.kaart-trek__intro, .hp-kaart__zin { font-size: clamp(17px, 1.5vw, 20px) !important; line-height: 1.45 !important; }
.wachtlijst__dank { font-size: 16px !important; }
.kal__vandaag { font-size: 16px !important; line-height: 1.5 !important; }
@media (max-width: 640px) {
  .hp-quote blockquote, .ws-quote blockquote, .review-big__quote { font-size: 17px !important; }
  .hp-statement, main.hp .hp-statement { font-size: 19px !important; }
  .hp-why__text { font-size: 16px !important; }
}
/* Compacter en stijlvoller, maar goed leesbaar: iets kleiner, smallere regels */
.hp-why__text { font-size: clamp(16px, 1.25vw, 18px) !important; line-height: 1.55 !important; max-width: 58ch !important; }
.hp-statement, main.hp .hp-statement { font-size: clamp(19px, 1.6vw, 23px) !important; line-height: 1.38 !important; max-width: 40ch; }
.hp-quote blockquote, .ws-quote blockquote, .review-big__quote { font-size: clamp(17px, 1.45vw, 20px) !important; line-height: 1.5 !important; max-width: 52ch !important; margin-inline: auto; }
.over__mission { font-size: clamp(18px, 1.5vw, 21px) !important; max-width: 46ch; }
.cover__lead, .hp-pagehead__lead { max-width: 46ch; }
.kaart-trek__intro, .hp-kaart__zin { font-size: clamp(16px, 1.35vw, 18px) !important; }
@media (max-width: 640px) {
  .hp-why__text { font-size: 15.5px !important; }
  .hp-statement, main.hp .hp-statement { font-size: 18px !important; }
  .hp-quote blockquote, .ws-quote blockquote, .review-big__quote { font-size: 16px !important; }
}
.hp-why__text > p { margin: 0 0 0.9em; }
.hp-why__text > p:last-child { margin-bottom: 0; }
.kal__legend .kal__legend-eerlijk .kal__sleutel { width: 15px; height: 15px; vertical-align: -2px; }
/* Bij het sleuteltje: geen sterretjes maar de dots van de spiraal (groen, terracotta, blauw, zwart en een licht bolletje) */
.kal__legend .kal__legend-eerlijk::after { content: none !important; }
.kal__legend .kal__legend-eerlijk::before { content: "" !important; top: -6px; right: -12px; width: 4px; height: 4px; border-radius: 50%; background: #7F8B68; font-size: 0; box-shadow: 7px 4px 0 #B86E50, 2px 10px 0 #A9C6F3, 10px 13px 0 #1B1917, -4px 16px 0 #D8D5CF; }
.kal__legend .kal__legend-eerlijk:hover::before, .kal__legend .kal__legend-eerlijk.is-aan::before { animation: kal-dots 2.6s ease-in-out 2s infinite !important; }
@keyframes kal-dots { 0%, 100% { opacity: 0.55; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
/* De vijf dots van de spiraal, heel klein, in een boogje naast het sleuteltje; ze verschijnen pas als het goud wordt */
.kal__legend .kal__legend-eerlijk { padding-right: 24px !important; }
.kal__legend .kal__legend-eerlijk::before { top: 50% !important; right: 2px !important; left: auto !important; width: 3px !important; height: 3px !important; margin-top: -1px; background: #7F8B68 !important;
  box-shadow: 4px -3px 0 #B86E50, 8px -4px 0 #A9C6F3, 12px -3px 0 #1B1917, 16px 0 0 #D8D5CF !important; transform: translateX(-16px); }
.kal__legend .kal__legend-eerlijk:hover::before, .kal__legend .kal__legend-eerlijk.is-aan::before { animation: kal-dots2 2.6s ease-in-out 2s infinite !important; }
@keyframes kal-dots2 { 0%, 100% { opacity: 0.55; transform: translateX(-16px) translateY(0); } 50% { opacity: 1; transform: translateX(-16px) translateY(-1.5px); } }
/* De vijf dots van de spiraal fonkelen elk apart, als sterretjes */
.kal__legend .kal__legend-eerlijk::before { content: none !important; }
.kal__dots { position: absolute; right: 2px; top: 50%; width: 18px; height: 10px; margin-top: -6px; pointer-events: none; }
.kal__dots i { position: absolute; width: 3px; height: 3px; border-radius: 50%; opacity: 0; transition: opacity 1.4s ease 1.6s; }
.kal__dots i:nth-child(1) { left: 0; top: 6px; background: #7F8B68; }
.kal__dots i:nth-child(2) { left: 4px; top: 3px; background: #B86E50; }
.kal__dots i:nth-child(3) { left: 8px; top: 2px; background: #A9C6F3; }
.kal__dots i:nth-child(4) { left: 12px; top: 3px; background: #1B1917; }
.kal__dots i:nth-child(5) { left: 16px; top: 6px; background: #D8D5CF; }
.kal__legend-eerlijk:hover .kal__dots i, .kal__legend-eerlijk.is-aan .kal__dots i { opacity: 1; animation: kal-fonkel 1.6s ease-in-out infinite; }
.kal__legend-eerlijk:hover .kal__dots i:nth-child(1), .kal__legend-eerlijk.is-aan .kal__dots i:nth-child(1) { animation-delay: 2s; }
.kal__legend-eerlijk:hover .kal__dots i:nth-child(2), .kal__legend-eerlijk.is-aan .kal__dots i:nth-child(2) { animation-delay: 2.5s; animation-duration: 1.9s; }
.kal__legend-eerlijk:hover .kal__dots i:nth-child(3), .kal__legend-eerlijk.is-aan .kal__dots i:nth-child(3) { animation-delay: 2.2s; animation-duration: 1.4s; }
.kal__legend-eerlijk:hover .kal__dots i:nth-child(4), .kal__legend-eerlijk.is-aan .kal__dots i:nth-child(4) { animation-delay: 2.8s; animation-duration: 2.1s; }
.kal__legend-eerlijk:hover .kal__dots i:nth-child(5), .kal__legend-eerlijk.is-aan .kal__dots i:nth-child(5) { animation-delay: 2.35s; animation-duration: 1.7s; }
@keyframes kal-fonkel { 0%, 100% { opacity: 0.25; transform: scale(0.6); box-shadow: none; } 45% { opacity: 1; transform: scale(1.35); box-shadow: 0 0 4px 1px rgba(255, 236, 190, 0.9); } 60% { opacity: 0.9; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .kal__dots i { animation: none !important; } }
/* De vijf dots in het spiraaltje op de kaart fonkelen als sterretjes, elk in een eigen ritme */
.kaart-trek__voor .kaart-trek__svg .twinkle--ink { opacity: 1; animation: kaart-fonkel 1.8s ease-in-out infinite !important; }
.kaart-trek__voor .kaart-trek__svg .twinkle--ink:nth-of-type(17) { animation-delay: 0.2s !important; animation-duration: 1.7s !important; }
.kaart-trek__voor .kaart-trek__svg .twinkle--ink:nth-of-type(18) { animation-delay: 0.9s !important; animation-duration: 2.1s !important; }
.kaart-trek__voor .kaart-trek__svg .twinkle--ink:nth-of-type(19) { animation-delay: 0.5s !important; animation-duration: 1.5s !important; }
.kaart-trek__voor .kaart-trek__svg .twinkle--ink:nth-of-type(20) { animation-delay: 1.3s !important; animation-duration: 2.3s !important; }
.kaart-trek__voor .kaart-trek__svg .twinkle--ink:nth-of-type(21) { animation-delay: 0.7s !important; animation-duration: 1.9s !important; }
@keyframes kaart-fonkel { 0%, 100% { opacity: 0.35; transform: scale(1); filter: none; } 45% { opacity: 1; transform: scale(1.9); filter: drop-shadow(0 0 1.2px rgba(255, 236, 190, 0.95)); } 60% { opacity: 0.9; transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) { .kaart-trek__voor .kaart-trek__svg .twinkle--ink { animation: none !important; opacity: 1; } }
/* De vijf dots vliegen als glitter rond het sleuteltje (ook over de woorden ernaast) en glinsteren */
.kal__legend .kal__legend-eerlijk { padding-right: 4px !important; z-index: 2; }
.kal__dots { left: 9px !important; right: auto !important; top: 50% !important; width: 0 !important; height: 0 !important; margin: 0 !important; transform: scaleY(0.5); overflow: visible; }
.kal__dots i { left: -1.5px !important; top: -1.5px !important; }
.kal__legend-eerlijk:hover .kal__dots i, .kal__legend-eerlijk.is-aan .kal__dots i { opacity: 1; animation: kal-baan var(--t, 5s) linear infinite, kal-glans var(--g, 1.6s) ease-in-out infinite !important; animation-delay: 1.6s, var(--d, 1.6s) !important; }
.kal__dots i:nth-child(1) { --r: 22px; --t: 4.6s; --g: 1.5s; --d: 1.8s; --s: 0deg; }
.kal__dots i:nth-child(2) { --r: 34px; --t: 6.2s; --g: 1.9s; --d: 2.2s; --s: 72deg; }
.kal__dots i:nth-child(3) { --r: 28px; --t: 5.4s; --g: 1.3s; --d: 2s; --s: 144deg; }
.kal__dots i:nth-child(4) { --r: 40px; --t: 7s; --g: 2.1s; --d: 2.5s; --s: 216deg; }
.kal__dots i:nth-child(5) { --r: 18px; --t: 3.8s; --g: 1.7s; --d: 1.9s; --s: 288deg; }
.kal__dots i:nth-child(2), .kal__dots i:nth-child(4) { animation-direction: reverse, normal !important; }
@keyframes kal-baan { from { transform: rotate(var(--s)) translateX(var(--r)) scaleY(2); } to { transform: rotate(calc(var(--s) + 360deg)) translateX(var(--r)) scaleY(2); } }
@keyframes kal-glans { 0%, 100% { opacity: 0.3; box-shadow: none; } 45% { opacity: 1; box-shadow: 0 0 4px 1.5px rgba(255, 236, 190, 0.95); } }
@media (prefers-reduced-motion: reduce) { .kal__dots i { animation: none !important; } }
/* Glitterbanen zonder variabelen (betrouwbaarder in elke browser) */
@keyframes kal-baan1 { from { transform: rotate(0deg) translateX(22px); } to { transform: rotate(360deg) translateX(22px); } }
.kal__legend-eerlijk:hover .kal__dots i:nth-child(1), .kal__legend-eerlijk.is-aan .kal__dots i:nth-child(1) { animation: kal-baan1 4.6s linear 1.6s infinite, kal-glans 1.5s ease-in-out 1.8s infinite !important; }
@keyframes kal-baan2 { from { transform: rotate(432deg) translateX(34px); } to { transform: rotate(72deg) translateX(34px); } }
.kal__legend-eerlijk:hover .kal__dots i:nth-child(2), .kal__legend-eerlijk.is-aan .kal__dots i:nth-child(2) { animation: kal-baan2 6.2s linear 1.6s infinite, kal-glans 1.9s ease-in-out 2.2s infinite !important; }
@keyframes kal-baan3 { from { transform: rotate(144deg) translateX(28px); } to { transform: rotate(504deg) translateX(28px); } }
.kal__legend-eerlijk:hover .kal__dots i:nth-child(3), .kal__legend-eerlijk.is-aan .kal__dots i:nth-child(3) { animation: kal-baan3 5.4s linear 1.6s infinite, kal-glans 1.3s ease-in-out 2.0s infinite !important; }
@keyframes kal-baan4 { from { transform: rotate(576deg) translateX(40px); } to { transform: rotate(216deg) translateX(40px); } }
.kal__legend-eerlijk:hover .kal__dots i:nth-child(4), .kal__legend-eerlijk.is-aan .kal__dots i:nth-child(4) { animation: kal-baan4 7.0s linear 1.6s infinite, kal-glans 2.1s ease-in-out 2.5s infinite !important; }
@keyframes kal-baan5 { from { transform: rotate(288deg) translateX(18px); } to { transform: rotate(648deg) translateX(18px); } }
.kal__legend-eerlijk:hover .kal__dots i:nth-child(5), .kal__legend-eerlijk.is-aan .kal__dots i:nth-child(5) { animation: kal-baan5 3.8s linear 1.6s infinite, kal-glans 1.7s ease-in-out 1.9s infinite !important; }
/* Heel het gebied rond het sleuteltje licht langzaam op: een zachte gouden gloed */
.kal__legend .kal__legend-eerlijk::after { content: "" !important; position: absolute; left: 9px; top: 50%; width: 110px; height: 60px; margin: -30px 0 0 -55px; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 201, 135, 0.45), rgba(232, 201, 135, 0.18) 55%, rgba(232, 201, 135, 0) 100%); opacity: 0; transition: opacity 2.4s ease; pointer-events: none; z-index: -1; animation: none !important; }
.kal__legend .kal__legend-eerlijk:hover::after, .kal__legend .kal__legend-eerlijk.is-aan::after { opacity: 1; }
.kal__om { display: inline-block; width: 12px; text-align: center; font-size: 12px; line-height: 1; color: var(--muted); vertical-align: 0; }
.kal__menora { color: var(--muted); vertical-align: -1px; }
.kal__dots { display: none !important; }
/* Onderschrift van de grote quote: geen hoofdletters meer, klein en zacht */
.hp-quote figcaption, .ws-quote figcaption { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; color: var(--muted) !important; }
/* Onderschriften onder foto's, kunst en reviews zonder hoofdletters; titels en labels blijven in hoofdletters */
.hp-why__imgs figcaption, .over__duo figcaption, .feel__credit {
  text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; color: var(--muted) !important;
}
/* ===== Workshoppagina rustiger (4 okt 2026): titel per sectie, open deuren en kaarten, nette lijst ===== */
.sec__titel { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.01em; margin: 10px 0 0; color: var(--zwart); }
/* Voor wie: grote rechthoekige foto's, naam als kop, één zin */
.hp-deuren .hp-deur__foto { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; border-radius: 0 !important; object-fit: cover; margin: 0 0 18px !important; }
.hp-deuren .hp-deur__kop { font-size: clamp(24px, 2vw, 30px) !important; line-height: 1.1; margin: 0 0 8px; }
.hp-deuren .hp-deur__tekst { font-size: 15px; line-height: 1.5; margin: 0 0 6px; }
.hp-deuren .hp-deur__feit { font-size: 13px; color: var(--muted); }
/* Drie workshops: geen witte blokken, foto en tekst direct op de achtergrond */
.hp-ws .hp-ws__item { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.hp-ws .hp-ws__body { padding: 16px 0 0 !important; background: transparent !important; }
.hp-ws .hp-ws__name { font-size: clamp(26px, 2.3vw, 34px) !important; }
.hp-ws .hp-ws__text { font-size: 15px; }
/* Goed om te weten: rustige lijst in twee gelijke kolommen, zonder lijnen */
.hp-who .rule-list--labels { display: block !important; columns: 2 320px; column-gap: clamp(32px, 5vw, 72px); border: 0 !important; margin-top: 28px; }
.hp-who .rule-list--labels > div { display: block !important; break-inside: avoid; border: 0 !important; padding: 0 0 22px !important; }
.hp-who .rule-list--labels dt { margin: 0 0 4px; }
.hp-who .rule-list--labels dd { margin: 0; }
.hp-who__regel { margin-top: 8px !important; }
.hp-who .hp-who__text { grid-column: 1 / -1 !important; display: block !important; }
.hp-who .hp-who__text .rule-list--labels { background: transparent !important; padding: 0 !important; }
.hp-deuren .hp-deur { display: flex; flex-direction: column; }
@media (max-width: 760px) {
  .hp-deuren { grid-template-columns: 1fr !important; padding: 24px 0 !important; gap: 36px !important; background: transparent !important; }
  .hp-deuren .hp-deur { border: 0 !important; padding: 0 !important; }
  .hp-ws { grid-template-columns: 1fr !important; gap: 36px !important; }
  .hp-who .rule-list--labels { columns: 1 !important; }
  .sec__titel { font-size: 30px; }
}
.hp-deuren .hp-deur .hp-deur__foto { aspect-ratio: 4 / 3 !important; width: 100% !important; height: auto !important; max-height: none !important; max-width: none !important; }
/* Voor wie: de lichte band om de hele sectie, zodat label en titel er netjes in staan */
.hp-voorwie .hp-deuren { box-shadow: none !important; clip-path: none !important; background: transparent !important; }
.hp-voorwie { background: #F6F1E9; box-shadow: 0 0 0 100vmax #F6F1E9; clip-path: inset(-64px -100vmax -64px -100vmax); }
/* Voor wie: alle drie de foto's even hoog */
.hp-deuren .hp-deur .hp-deur__foto { aspect-ratio: auto !important; height: clamp(200px, 19vw, 290px) !important; object-fit: cover; }
/* Workshoppagina's: alle ervaringen als blok naast elkaar; bij drie stuks netjes in drie kolommen */
.hp-quotes--grid.hp-quotes--drie { columns: 3 260px; max-width: 1200px; }
.hp-quotes--grid.hp-quotes--drie { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); columns: auto !important; max-width: none !important; }
.hp-quotes--grid.hp-quotes--drie > figure { margin: 0 !important; }
@media (max-width: 760px) { .hp-quotes--grid.hp-quotes--drie { grid-template-columns: 1fr; } }
.hp-quotes--grid.hp-quotes--drie > figure { padding: 24px 26px !important; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; background: var(--card, #FFFFFF); }
.hp-quotes--grid.hp-quotes--drie blockquote { font-size: 15px !important; line-height: 1.6 !important; }
.hp-quotes--grid.hp-quotes--drie figcaption { font-size: 12px !important; }
/* Tarieven: de opmerking (materiaal, kennismakingsprijs, reiskosten) staat onder de prijslijst */
.ratecard__note { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.ratecard__note strong { font-weight: 600; color: var(--ink); }
/* Hoe het werkt staat nu op de pagina First Move, Then Paint */
.ws-hoe { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(24px, 3vw, 40px); }
.ws-hoe > .hp-label { grid-column: 1 / -1; grid-row: 1; margin: 0; }
.ws-hoe > .hp-statement { grid-column: 1 / span 10; grid-row: 2; margin: 0; max-width: 40ch; }
.ws-hoe > .hp-steps { grid-column: 1 / -1; grid-row: 3; }
.ws-hoe .hp-steps h3 { font-family: 'Instrument Serif', serif !important; font-weight: 400 !important; font-size: clamp(24px, 2vw, 30px); line-height: 1.05; letter-spacing: -0.005em; }
.ws-feiten { grid-column: 1 / -1; margin: 8px 0 0; padding-top: 18px; border-top: 1px solid var(--line, #D8D5CF); font-size: 14px; color: var(--muted); letter-spacing: 0.01em; }
/* Homepage: vier ervaringen als blokken naast elkaar */
.hp-quotes--grid.hp-quotes--vier { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); columns: auto !important; max-width: none !important; width: 100%; }
.hp-quotes--grid.hp-quotes--vier > figure { margin: 0 !important; padding: 24px 24px !important; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; background: var(--card, #FFFFFF); }
.hp-quotes--grid.hp-quotes--vier blockquote { font-size: 15px !important; line-height: 1.6 !important; }
.hp-quotes--grid.hp-quotes--vier figcaption { font-size: 12px !important; }
@media (max-width: 1000px) { .hp-quotes--grid.hp-quotes--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hp-quotes--grid.hp-quotes--vier { grid-template-columns: 1fr; } }
/* Workshoppagina's: het label bovenaan met een gekleurd stipje, net als op de workshopkaartjes */
.eyebrow--dot { display: flex !important; align-items: center; gap: 8px; color: var(--muted) !important; }
.eyebrow--dot::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
/* Kalender: titel en kalender links uitgelijnd, net als de andere secties */
main.hp .hp-agenda .hp-agenda__list, main.hp .hp-agenda .kalender, main.hp .hp-agenda .kal__verder { grid-column: 1 / -1 !important; }
/* Geen los woordje op een nieuwe regel */
main.hp .hp-head__text, .hp-head__text { max-width: 62ch !important; text-wrap: pretty; }
/* Dagzin: als gewone zin lopen, zodat er geen spatie voor de punt komt */
.kal__vandaag { display: block !important; }
.kal__vandaag .kal__vandaag-maan { display: inline-block; margin-right: 8px; vertical-align: -1px; }
/* Telefoon: spiraal klein boven de titel, workshops als swipe-rij */
@media (max-width: 760px) {
  .hp-pagehead { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between; gap: 16px; }
  .hp-pagehead .hp-pagehead__text { flex: 1 1 auto; min-width: 0; }
  .hp-pagehead .hp-pagehead__spiral { position: static !important; flex: none; align-self: flex-start !important; width: 72px !important; height: 72px !important; margin: 4px 0 0 !important; inset: auto !important; transform: none !important; }
  .hp-ws { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px !important; margin-right: calc(-1 * var(--gutter, 20px)); padding-right: var(--gutter, 20px); scrollbar-width: none; }
  .hp-ws::-webkit-scrollbar { display: none; }
  .hp-ws .hp-ws__item { flex: 0 0 80%; scroll-snap-align: start; }
}
/* Bovenaan de kalender: spreuk en 'vandaag' als twee aparte regels */
.kal__vandaag .kal__vandaag-zin { margin: 0; font-family: 'Instrument Sans', sans-serif !important; font-style: normal !important; font-size: 16px !important; line-height: 1.45; color: var(--zwart); }
.kal__vandaag .kal__vandaag-dag { margin: 6px 0 0 26px; font-family: 'Instrument Sans', sans-serif; font-style: normal; font-size: 13px; letter-spacing: 0.01em; color: var(--muted); }
/* De maan links, de twee regels er netjes naast */
.kal__vandaag { display: flex !important; align-items: center; gap: 12px; }
.kal__vandaag .kal__vandaag-maan { margin: 0 !important; flex: none; display: flex; }
.kal__vandaag .kal__vandaag-maan svg { width: 22px; height: 22px; }
.kal__vandaag .kal__vandaag-dag { margin: 2px 0 0 !important; }
.kal__vandaag .kal__vandaag-maan svg { width: 16px !important; height: 16px !important; }
.kal__vandaag { gap: 10px !important; }
.kal__vandaag .kal__vandaag-zin { font-size: 15px !important; }
.kal__vandaag .kal__vandaag-dag { font-size: 12.5px !important; }
/* Stipjes onder een swipe-rij: alleen op de telefoon */
.swipe-dots { display: none; }
@media (max-width: 760px) {
  .swipe-dots { display: flex; justify-content: center; gap: 8px; margin: 18px 0 0; }
  .swipe-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--grijs); transition: background 0.3s ease, transform 0.3s ease; }
  .swipe-dots i.is-aan { background: var(--kleur, var(--zwart)); transform: scale(1.3); }
}
/* Thema's zonder foto's: rustige tekstblokken met een dunne lijn erboven */
.themas__grid > .thema { border-top: 1px solid var(--zwart); padding-top: 18px; }
/* Swipen door de thema's, als een stapeltje kaarten in de stijl van de site */
.swipe { margin: clamp(48px, 6vw, 80px) auto 0; max-width: 460px; text-align: center; }
.swipe__hint { font-size: 15px; color: var(--muted); margin: 6px 0 26px; }
.swipe__stapel { display: grid; padding-bottom: 26px; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.swipe__kaart { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; text-align: left; background: var(--wit); padding: 26px 28px 34px; border-top: 3px solid var(--zwart); box-shadow: 0 8px 24px rgba(27, 25, 23, 0.06); cursor: grab; transform-origin: 50% 100%; transition: border-color 0.2s ease; }
.swipe__kaart:active { cursor: grabbing; }
.swipe__kaart.is-ja { border-top-color: var(--terra); }
.swipe__kaart.is-nee { border-top-color: var(--grijs); }
.swipe__nr { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 17px; color: var(--muted); margin: 0 0 2px; }
.swipe__knoppen { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.swipe__knop { padding: 11px 22px; border-radius: 999px; border: 1px solid var(--zwart); font: inherit; font-size: 14px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.swipe__nee { background: transparent; color: var(--zwart); border-color: rgba(27, 25, 23, 0.4); }
.swipe__nee:hover { border-color: var(--zwart); }
.swipe__ja { background: var(--zwart); color: var(--creme); }
.swipe__ja:hover { background: var(--terra); border-color: var(--terra); }
.swipe__eind { background: var(--wit); border-top: 3px solid var(--zwart); padding: 30px 28px 26px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.swipe__eind-titel { font-family: 'Instrument Serif', serif; font-size: 34px; line-height: 1.05; margin: 0; }
.swipe__lijsten { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; }
.swipe__lijst-kop { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--zwart); }
.swipe__lijst ul { list-style: none; margin: 0; padding: 0; }
.swipe__lijst li { border-bottom: 1px solid var(--line); }
.swipe__lijst button { background: none; border: 0; padding: 9px 0; width: 100%; text-align: left; font: inherit; font-size: 15px; cursor: pointer; color: var(--zwart); }
.swipe__lijst--ja button::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--terra); margin-right: 9px; vertical-align: 2px; }
.swipe__lijst--nee li { color: var(--muted); font-size: 15px; padding: 9px 0; }
.swipe__lijst li.leeg { font-size: 14px; color: var(--muted); padding: 9px 0; }
.swipe__tip { font-size: 13px; color: var(--muted); margin: 0; }
.swipe__opnieuw { background: none; border: 0; font: inherit; font-size: 14px; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 4px; }
.themas__alle { margin: clamp(64px, 8vw, 104px) 0 24px; }
.swipe [hidden], .swipe[hidden] { display: none !important; }
.themas__alle { border-bottom: 0 !important; padding-bottom: 0 !important; }
.themas { overflow-x: clip; }
.swipe__titel { font-family: 'Instrument Serif', serif; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; margin: 0; }
.swipe__lijst--ja button[aria-pressed="true"] { font-weight: 600; }
.swipe__lijst--ja button[aria-pressed="true"]::after { content: ' ✓'; color: var(--terra); }
.swipe__lijst--ja button:hover { color: var(--terra); }
/* Swipe-kaartjes als visitekaartjes: liggend, weinig tekst, naam in de titelletter */
.swipe { max-width: 420px; }
.swipe__kaart { aspect-ratio: 85 / 55; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto auto; gap: 0 12px; padding: 20px 24px 22px; background: #FBF8F3; border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 3px; box-shadow: 0 1px 1px rgba(27, 25, 23, 0.04), 0 10px 24px rgba(27, 25, 23, 0.07); }
.swipe__kaart.is-ja { border-color: var(--terra); }
.swipe__kaart.is-nee { border-color: var(--line); }
.swipe__nr { grid-column: 1; grid-row: 1; font-family: inherit; font-style: normal; font-size: 11px; letter-spacing: 0.16em; margin: 0; }
.swipe__merk { grid-column: 2; grid-row: 1; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0; }
main .swipe__kaart .thema__naam { grid-column: 1 / -1; grid-row: 3; font-family: 'Instrument Serif', serif !important; font-weight: 400 !important; font-size: clamp(30px, 8vw, 38px) !important; line-height: 1 !important; margin: 0 0 6px; }
.swipe__kaart .thema__kort { grid-column: 1 / -1; grid-row: 4; margin: 0; color: var(--muted); font-size: 15px !important; }
.swipe__knoppen { gap: 40px; margin-top: 2px; }
.swipe__knop, .swipe__ja, .swipe__nee { background: none; border: 0; border-radius: 0; padding: 8px 2px 6px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--zwart); border-bottom: 1px solid transparent; }
.swipe__nee { color: var(--muted); }
.swipe__ja:hover { background: none; color: var(--terra); border-bottom-color: var(--terra); }
.swipe__nee:hover { color: var(--zwart); border-bottom-color: var(--zwart); }
.swipe__eind { border-top: 1px solid var(--line); border: 1px solid var(--line); background: #FBF8F3; border-radius: 3px; }
/* Visitekaartjes: tastbaar papier en letterpers-naam */
.swipe__kaart, .swipe__eind { background-color: #FAF6EF; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.36  0 0 0 0 0.28  0 0 0 0.09 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"), linear-gradient(160deg, #FDFBF7 0%, #F6F1E8 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 1px 1px rgba(27, 25, 23, 0.05), 0 12px 26px rgba(27, 25, 23, 0.08); }
main .swipe__kaart .thema__naam { color: #2A2622; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(27, 25, 23, 0.10); }
.swipe__nr, .swipe__merk { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
/* Visitekaartje van het thema: naam, rol, motto en waar het te vinden is */
.swipe__kaart { grid-template-rows: auto minmax(18px, 1fr) auto auto auto auto; }
main .swipe__kaart .thema__naam { grid-row: 3; margin: 0 0 4px; }
.swipe__rol { grid-column: 1 / -1; grid-row: 4; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.swipe__motto { grid-column: 1 / -1; grid-row: 5; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 19px; line-height: 1.25; color: var(--zwart); margin: 0 0 8px; }
.swipe__bereik { grid-column: 1 / -1; grid-row: 6; font-size: 12.5px; line-height: 1.45; color: var(--muted); margin: 0; }
.swipe__bereik span { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; margin-right: 6px; color: var(--zwart); }
.thema__visite[hidden] { display: none !important; }
.swipe__stapel { grid-template-columns: minmax(0, 1fr); }
.swipe__kaart { min-width: 0; grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 480px) { .swipe__kaart { padding: 18px 18px 20px; } .swipe__merk { font-size: 9px; letter-spacing: 0.14em; } .swipe__rol { letter-spacing: 0.14em; } }
/* Motto is een zin: Instrument Sans, niet schuin */
.swipe__motto { font-family: 'Instrument Sans', sans-serif; font-style: normal; font-size: 16px; line-height: 1.4; font-weight: 500; }
/* Visitekaartje beter leesbaar: grotere, donkerdere kleine tekst */
.swipe__nr, .swipe__merk { font-size: 11.5px !important; color: #4A443E; }
.swipe__rol { font-size: 12.5px !important; letter-spacing: 0.12em !important; color: #3A352F; }
.swipe__motto { font-size: 17.5px; color: var(--zwart); }
.swipe__bereik { font-size: 14.5px; line-height: 1.5; color: #3A352F; }
.swipe__bereik span { font-size: 11.5px; letter-spacing: 0.14em; }
/* Functie op het kaartje: gewone zin, geen hoofdletters */
.swipe__rol { text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; color: var(--muted) !important; }
/* Visitekaartje, opnieuw opgemaakt: veel lucht, naam in het midden, gegevens onderaan in twee kolommen */
.swipe__kaart { display: flex !important; flex-direction: column; justify-content: space-between; gap: 0 !important; padding: 18px 22px 20px !important; }
.swipe__kop { display: flex; justify-content: space-between; align-items: baseline; }
.swipe__kaart .swipe__nr, .swipe__kaart .swipe__merk { font-size: 10.5px !important; letter-spacing: 0.16em; color: var(--muted); }
main .swipe__kaart .thema__naam { margin: 18px 0 2px !important; font-size: clamp(34px, 9vw, 42px) !important; }
.swipe__kaart .swipe__rol { margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; font-size: 14.5px !important; }
.swipe__voet { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; padding-top: 12px; border-top: 1px solid var(--line); align-items: start; }
.swipe__kaart .swipe__motto { margin: 0; font-size: 14.5px; line-height: 1.4; font-weight: 500; }
.swipe__kaart .swipe__bereik { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.swipe__kaart .swipe__bereik span { display: block; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px; }
.swipe__voet > p, .swipe__midden > *, .swipe__kop > p { grid-column: auto !important; grid-row: auto !important; }
.swipe__midden { margin: auto 0; padding: 14px 0 16px; }
main .swipe__kaart .thema__naam { margin: 0 0 4px !important; }
.swipe__kaart .swipe__rol { margin: 0 !important; }
/* Kaartendeck: wat zit erin, voorproefje-zin, copyright */
.deck-inhoud { margin: 0 0 26px; max-width: 460px; }
.deck-inhoud ul { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--line); }
.deck-inhoud li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.4; }
.wachtlijst__tekst { font-size: 15px; line-height: 1.5; color: var(--zwart); margin: 0 0 14px; }
.themas__copy { font-size: 12px; color: var(--muted); margin: 28px 0 0; }
/* Thema's op de computer: de laatste, niet volle rij staat in het midden */
@media (min-width: 1000px) {
  .themas__grid { display: flex !important; flex-wrap: wrap; justify-content: center; }
  .themas__grid > .thema { flex: 0 0 calc((100% - 2 * clamp(20px, 2.4vw, 36px)) / 3); }
}
/* Review vergroot: hetzelfde witte blok als in de rij, alleen groter */
.review-big { align-items: center !important; padding: 80px 16px 120px !important; background: rgba(238, 231, 220, 0.96); }
.review-big__inner { max-width: 600px; min-height: min(440px, 62vh); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; background: var(--wit); padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 48px) !important; box-shadow: 0 18px 50px rgba(27, 25, 23, 0.10); animation: review-groei 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes review-groei { from { transform: scale(0.86); opacity: 0; } to { transform: none; opacity: 1; } }
.review-big__quote { font-family: 'Instrument Sans', sans-serif !important; font-size: clamp(17px, 1.6vw, 20px) !important; line-height: 1.6 !important; letter-spacing: 0 !important; }
.review-big__who { margin: 0 !important; font-size: 13px !important; letter-spacing: 0 !important; }
.review-big__nav { top: auto !important; bottom: clamp(20px, 5vh, 48px) !important; }
@media (max-width: 640px) { .review-big__inner { min-height: 0; } .review-big__quote { font-size: 17px !important; } }
.kal__vandaag-label { font-style: normal; font-weight: 500; margin-right: 2px; }
/* Vergrote review als mooie kaart, zelfde papier als de visitekaartjes */
.review-big__inner { background-color: #FAF6EF !important; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.36  0 0 0 0 0.28  0 0 0 0.09 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"), linear-gradient(160deg, #FDFBF7 0%, #F6F1E8 100%) !important; border: 1px solid var(--line); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 2px 2px rgba(27, 25, 23, 0.04), 0 22px 50px rgba(27, 25, 23, 0.12) !important; gap: 24px !important; }
.review-big__kop { display: flex; justify-content: space-between; align-items: baseline; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.review-big__quote { flex: 1; display: flex; align-items: center; }
.review-big__who { padding-top: 14px; border-top: 1px solid var(--line); }

/* Vergrote review: wit, net als de blokken in de rij */
.review-big__inner { background: var(--wit) !important; background-image: none !important; }
.review-big__count { display: none !important; }
/* Alle thema's ingeklapt achter één regel */
.themas__lijst { margin-top: clamp(48px, 6vw, 80px); }
.themas__toon { list-style: none; cursor: pointer; text-align: center; font-size: 15px; color: var(--muted); padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.themas__toon::-webkit-details-marker { display: none; }
.themas__toon span { color: var(--zwart); border-bottom: 1px solid var(--zwart); margin-left: 6px; }
.themas__toon:hover span { color: var(--terra); border-color: var(--terra); }
.themas__lijst[open] .themas__toon { margin-bottom: 32px; }
.themas__lijst[open] .themas__toon span { font-size: 0; border: 0; }
.themas__lijst[open] .themas__toon span::after { content: '↑'; font-size: 15px; color: var(--zwart); }
/* Kies je workshop: kleinere, liggende foto's zodat alle drie in één keer te zien zijn */
.hp-ws__img { aspect-ratio: 3 / 2 !important; }
@media (max-width: 760px) { .hp-ws__img { aspect-ratio: 16 / 10 !important; } }
.kal__plan-wrap { margin: 8px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.kal__plan-wrap { border-top: 0 !important; padding-top: 0 !important; }
/* Workshops: compacte kop zodat de drie workshops meteen in beeld staan */
.hp-pagehead--kort { padding-top: clamp(20px, 3vw, 40px) !important; min-height: 0 !important; }
.hp-pagehead--kort .hp-pagehead__title { font-size: clamp(48px, 6vw, 88px) !important; }
.hp-pagehead--kort .hp-pagehead__spiral { width: clamp(72px, 9vw, 130px) !important; height: auto !important; }
.hp > .hp-pagehead--kort + section { margin-top: clamp(32px, 4vw, 56px) !important; }
.hp-ws__solo { margin: 22px 0 0; font-size: 15px; color: var(--muted); }
.hp-ws__solo .arrow-link { margin-left: 6px; color: var(--zwart); }
.ws-slot { font-family: 'Instrument Serif', serif; font-size: clamp(34px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.01em; color: var(--zwart); margin: 18px 0 0; }
.ws-slot--open { margin: 0 0 6px; }
.team-cta { margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
.team-cta span { font-size: 14px; color: var(--muted); }
/* Menu met Teamuitje erbij: op kleinere laptops compacter, zodat alles op één regel past */
@media (min-width: 900px) and (max-width: 1279px) {
  .nav__links { gap: 16px !important; }
  .nav__links > a { letter-spacing: 0.1em !important; }
  .nav__search { padding: 0 !important; width: 38px !important; }
  .nav__search-label { display: none !important; }
  .nav__right { gap: 12px !important; }
}
@media (min-width: 900px) and (max-width: 1079px) {
  .nav__cta { display: none !important; }
}
/* Geen zoekknop meer rechts in het menu op de computer */
@media (min-width: 900px) { .nav__search { display: none !important; } }
/* ---------- Teamuitjes: landingspagina voor bedrijven ---------- */
.team-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding-top: clamp(24px, 4vw, 56px); }
.team-hero__titel { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(48px, 6.4vw, 96px); line-height: 0.95; letter-spacing: -0.02em; margin: 10px 0 18px; }
.team-hero__titel span { display: block; font-style: italic; }
.team-hero__lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; max-width: 520px; margin: 0 0 26px; }
.team-hero__actie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0; }
.team-hero__actie span { font-size: 14px; color: var(--muted); }
.team-hero__img { width: 100%; height: clamp(320px, 42vw, 560px); object-fit: cover; object-position: center 35%; }
.team-feiten { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--zwart); border-bottom: 1px solid var(--line); }
.team-feiten li { padding: 18px 16px 18px 0; display: flex; flex-direction: column; gap: 4px; }
.team-feiten li + li { padding-left: 16px; border-left: 1px solid var(--line); }
.team-feiten strong { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; }
.team-feiten span { font-size: 14px; color: var(--muted); }
.team-waarom { margin-top: clamp(72px, 9vw, 128px); }
.team-waarom__lijst { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 36px); }
.team-waarom__lijst li { border-top: 1px solid var(--zwart); padding-top: 16px; }
.team-nr { display: block; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 18px; color: var(--terra); margin-bottom: 10px; }
.team-waarom__lijst h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(24px, 2vw, 30px); line-height: 1.1; margin: 0 0 10px; }
.team-waarom__lijst p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }
.team-quote { margin: clamp(72px, 9vw, 120px) auto 0; max-width: 760px; text-align: center; }
.team-quote blockquote { font-family: 'Instrument Serif', serif; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; margin: 0; }
.team-quote figcaption { margin-top: 18px; font-size: 13px; color: var(--muted); }
.team-stappen { margin-top: clamp(72px, 9vw, 120px); padding: clamp(28px, 4vw, 56px); background: var(--wit); }
.team-stappen__lijst { list-style: none; margin: 24px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.team-stappen__lijst .team-nr { font-size: 40px; line-height: 1; color: var(--zwart); font-style: normal; }
.team-stappen__lijst p { margin: 0; font-size: 16px; line-height: 1.55; }
.team-stappen__lijst strong { display: block; font-weight: 600; margin-bottom: 4px; }
.team-stappen__klein { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.team-stappen__klein .arrow-link { color: var(--zwart); margin-left: 4px; }
@media (max-width: 899px) {
  .team-hero { grid-template-columns: 1fr; }
  .team-hero__img { height: 300px; order: -1; }
  .team-feiten { grid-template-columns: 1fr 1fr; }
  .team-feiten li:nth-child(3) { padding-left: 0; border-left: 0; }
  .team-feiten li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .team-waarom__lijst { grid-template-columns: 1fr 1fr; }
  .team-stappen__lijst { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .team-waarom__lijst { grid-template-columns: 1fr; } }
/* Zoekknop helemaal weg uit de kop */
.nav__search { display: none !important; }
.hp > .team-feiten { margin-left: var(--gutter); margin-right: var(--gutter); }
.hp > .team-quote { padding-inline: var(--gutter); }
.hp > .team-stappen { margin-left: var(--gutter); margin-right: var(--gutter); }
.hp > .team-feiten + section, .hp > .team-quote + section, .hp > section + .team-quote { margin-top: clamp(72px, 9vw, 120px); }
main .team-waarom__lijst h3 { font-family: 'Instrument Serif', serif !important; font-weight: 400 !important; font-size: clamp(24px, 2vw, 30px) !important; letter-spacing: 0 !important; }
.team-beeld { display: block; width: 100%; height: clamp(260px, 34vw, 480px); object-fit: cover; object-position: center 35%; margin-top: clamp(40px, 5vw, 64px); }
/* Review op de teampagina: hetzelfde witte reviewkaartje als elders op de site */
.team-quote { max-width: 640px !important; text-align: left !important; background: var(--wit); padding: clamp(26px, 3.4vw, 44px) !important; box-shadow: 0 18px 50px rgba(27, 25, 23, 0.08); }
.hp > .team-quote { margin-left: auto; margin-right: auto; padding-inline: clamp(26px, 3.4vw, 44px) !important; }
.team-quote blockquote { font-family: 'Instrument Sans', sans-serif !important; font-size: clamp(16px, 1.4vw, 18px) !important; line-height: 1.65 !important; color: var(--zwart); }
.team-quote figcaption { margin-top: 24px !important; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
@media (max-width: 899px) { .hp > .team-quote { margin-left: var(--gutter); margin-right: var(--gutter); } }
.team-voorbeeld { margin: 0 0 28px; padding: 14px 18px; background: var(--wit); font-size: 15px; display: inline-block; }
.team-voorbeeld strong:first-child { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-right: 10px; }
.team-voorbeeld { margin: 24px 0 0 !important; }
/* Rekenvoorbeeld zonder wit vlak, zodat het niet botst met het witte blok eronder */
.team-voorbeeld { background: none !important; padding: 14px 0 !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: block !important; }
/* Rekenvoorbeeld als kleine prijslijst, met de aanrader bovenaan */
.team-voorbeeld { margin: 28px 0 0 !important; padding: 0 !important; border: 0 !important; display: block !important; max-width: 640px; }
.team-voorbeeld__kop { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.team-voorbeeld__lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--zwart); }
.team-voorbeeld__lijst li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.team-voorbeeld__lijst span { flex: 0 0 auto; }
.team-voorbeeld__lijst em { font-style: normal; font-size: 12px; color: var(--terra); }
.team-voorbeeld__lijst strong { margin-left: auto; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 22px; }
.team-voorbeeld__lijst li.is-aanrader span { font-weight: 600; }
.team-voorbeeld__lijst li.is-aanrader strong { font-size: 26px; }
.team-voorbeeld__klein { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
@media (max-width: 520px) { .team-voorbeeld__lijst li { flex-wrap: wrap; } .team-voorbeeld__lijst em { order: 3; flex-basis: 100%; } }
/* Aanrader in het blauw van First Move, Then Paint */
.team-voorbeeld__lijst em { color: var(--zwart) !important; background: rgba(169, 198, 243, 0.55); padding: 3px 9px; border-radius: 999px; }
.thema .thema__plan { align-self: flex-start; margin-top: 4px; font-size: 14px; }
.kaart-trek__plan { display: inline-block; margin-top: 14px; }
.kaart-trek__plan[hidden] { display: none; }
/* Instagram-icoon in de kop: alleen op telefoon en tablet */
.nav__ig { display: none; }
@media (max-width: 899px) { .nav__ig { display: inline-flex; width: 38px; height: 38px; } }
/* Twee routes bovenaan de homepage */
.cover__routes { display: grid; gap: 10px; }
.cover__route { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 16px 18px; background: var(--wit); text-decoration: none; color: var(--zwart); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.cover__route:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(27,25,23,0.08); color: var(--zwart); }
.cover__route-label { font-family: 'Instrument Serif', serif; font-size: 24px; line-height: 1.1; }
.cover__route-tekst { grid-column: 1; font-size: 13.5px; color: var(--muted); }
.cover__route-pijl { grid-column: 2; grid-row: 1 / span 2; font-size: 20px; }
/* Kennismakingsgesprek in het formulier */
.field--bellen { display: grid; gap: 12px; }
.field--bellen .check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.field--bellen .check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--zwart); }
.bellen-nummer[hidden] { display: none; }
.feel--solo { grid-template-columns: 1fr !important; max-width: 760px; margin-inline: auto; }
/* Waarom bewegen en schilderen: de twee foto's naast elkaar, even groot en op dezelfde hoogte */
.hp-why__imgs figure:last-child { margin-top: 0 !important; }
.hp-why__imgs { align-items: start; }
/* Kennismakingsgesprek valt op in het formulier: zacht blauw vlak, zoals het Aanrader-labeltje */
.field--bellen { background: rgba(169, 198, 243, 0.45); padding: 14px 16px; border-radius: 4px; }
.field--bellen .check strong { font-weight: 600; }
.field--bellen .check span { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
/* Belmoment: drie kleine knopjes, alleen zichtbaar als het vinkje aan staat */
.bellen-moment { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bellen-moment[hidden] { display: none; }
.bellen-moment legend { width: 100%; margin-bottom: 8px; padding: 0; }
.bellen-moment label { cursor: pointer; }
.bellen-moment input { position: absolute; opacity: 0; pointer-events: none; }
.bellen-moment label span { display: inline-block; padding: 7px 14px; border: 1px solid rgba(27, 25, 23, 0.35); border-radius: 999px; font-size: 14px; background: var(--wit); }
.bellen-moment input:checked + span { background: var(--zwart); color: var(--creme); border-color: var(--zwart); }
.bellen-moment input:focus-visible + span { outline: 2px solid var(--zwart); outline-offset: 2px; }
/* Het verborgen portaal: een donker venster met gouden gloed en sterren */
.kal__legend-uitleg.is-portaal { position: relative; overflow: hidden; background: #1B1917; color: #EFE6D4; padding: 26px 24px 28px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(214, 178, 110, 0.55), 0 0 40px rgba(214, 178, 110, 0.25); animation: portaal-open 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes portaal-open { from { clip-path: circle(0% at 50% 50%); opacity: 0.4; } to { clip-path: circle(150% at 50% 50%); opacity: 1; } }
.portaal__sterren { position: absolute; inset: 0; pointer-events: none; }
.portaal__sterren i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #F3DCA8; box-shadow: 0 0 6px 1px rgba(243, 220, 168, 0.8); animation: portaal-ster 3s ease-in-out infinite; opacity: 0; }
@keyframes portaal-ster { 0%, 100% { opacity: 0; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.2); } }
.portaal__open, .portaal__zin, .portaal__welkom { position: relative; opacity: 0; animation: portaal-zin 1s ease forwards; }
.portaal__open { display: block; font-family: 'Instrument Serif', serif; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; color: #F3DCA8; margin-bottom: 12px; text-shadow: 0 0 18px rgba(243, 220, 168, 0.45); }
.portaal__zin { font-size: 15px; line-height: 1.7; }
.portaal__welkom { display: block; margin-top: 16px; font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(24px, 2.4vw, 32px); color: #F3DCA8; text-shadow: 0 0 22px rgba(243, 220, 168, 0.6); }
@keyframes portaal-zin { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .kal__legend-uitleg.is-portaal, .portaal__open, .portaal__zin, .portaal__welkom { animation: none; opacity: 1; } .portaal__sterren i { animation: none; opacity: 0.6; } }
.portaal__boodschap { position: relative; display: block; margin: 14px 0 6px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #D6B26E; opacity: 0; animation: portaal-zin 1s ease forwards; }
@media (prefers-reduced-motion: reduce) { .portaal__boodschap { animation: none; opacity: 1; } }
/* Welkom in het portaal: moderner, strak in hoofdletters met een gouden lijn */
.portaal__welkom { font-family: 'Instrument Sans', sans-serif !important; font-style: normal !important; font-size: 13px !important; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; margin-top: 22px !important; padding-top: 16px; border-top: 1px solid rgba(214, 178, 110, 0.45); text-shadow: 0 0 14px rgba(243, 220, 168, 0.5) !important; }
/* Portaal rustiger: minder gloed en waas, wel het moment van openen */
.kal__legend-uitleg.is-portaal { box-shadow: 0 0 0 1px rgba(214, 178, 110, 0.5) !important; }
.portaal__open, .portaal__welkom { text-shadow: none !important; }
.portaal__sterren i { box-shadow: none !important; width: 3px; height: 3px; animation-iteration-count: 2 !important; }
@keyframes portaal-zin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Portaal: jouw spiraal tekent zich in goud, stijlvol in plaats van zweverig */
.portaal__spiraal { position: relative; display: block; width: 46px; height: 46px; margin: 0 0 14px; }
.portaal__spiraal path { fill: none; stroke: #D6B26E; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: portaal-teken 2.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards; }
@keyframes portaal-teken { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .portaal__spiraal path { animation: none; stroke-dashoffset: 0; } }
/* Portaal: de kaart-spiraal in het midden, zoals op de achterkant van het kaartje */
.portaal__kaart { position: relative; display: flex; justify-content: center; margin: 0 0 18px; animation: portaal-zin 1.2s ease both; }
.portaal__kaart svg { position: static !important; width: 120px !important; height: auto !important; margin: 0 !important; opacity: 1 !important; filter: drop-shadow(0 0 10px rgba(243, 220, 168, 0.35)); }
.portaal__kaart svg path:first-of-type { stroke-width: 2.2 !important; }
.portaal__kaart svg .spiral-ink, .portaal__kaart svg .spiral-eye { stroke: var(--zand) !important; fill: none; opacity: 0.5 !important; }
.portaal__kaart svg .spiral-eye { fill: var(--zand) !important; stroke: none !important; opacity: 1 !important; }
.portaal__kaart svg .spiral-white { stroke-width: 1.6 !important; }
.kal__legend-uitleg.is-portaal .portaal__open, .kal__legend-uitleg.is-portaal .portaal__welkom { text-align: center; }
.portaal__kaart svg { width: 76px !important; }
.portaal__kaart { margin-bottom: 14px; }
/* Uitleg in de legenda: een kopje en korte alinea's in plaats van een blok tekst */
.kal__legend-uitleg:not(.is-portaal) { max-width: 560px; }
.kal__legend-uitleg:not(.is-portaal) p { margin: 0 0 10px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.kal__legend-uitleg:not(.is-portaal) p:last-child { margin-bottom: 0; }
.kal__leg-kop { font-family: 'Instrument Serif', serif; font-size: 22px !important; line-height: 1.15 !important; color: var(--zwart) !important; margin: 0 0 8px !important; }
.kal__legend-uitleg:not(.is-portaal) p { font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
.kal__leg-kop { font-size: 19px !important; margin-bottom: 6px !important; }
/* Stipje alleen nog bij dagen zonder icoontje (feestdagen); waar een icoontje staat, zegt dat het al */
.kal__dag:has(.kal__marks > *)::after { display: none !important; }
/* Dag-uitleg: stijlvol, leesbaar en compact */
.kal__info.is-open { padding: 16px 18px 18px !important; }
.kal__info-date { margin: 0 0 6px !important; font-size: 11px !important; letter-spacing: 0.16em; }
.kal__info .kal__plan-wrap { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.kal__info .kal__plan { font-size: 14px; }
.kal__info-moon, .kal__info-maan { display: grid !important; grid-template-columns: 16px 1fr; column-gap: 8px; align-items: baseline; margin: 0 0 3px !important; font-size: 13px !important; line-height: 1.45 !important; color: var(--muted); }
.kal__info-moon > svg, .kal__info-moon > span:first-child { justify-self: center; position: relative; top: 2px; color: var(--ink); }
.kal__info-moon .kal__zod { top: 0; font-size: 13px; }
.kal__info-item { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.kal__info-item + .kal__info-item { margin-top: 14px !important; padding-top: 14px !important; }
main .kalender h4.kal__info-name { display: block; margin: 0 0 3px !important; font-size: 21px !important; line-height: 1.15 !important; }
main .kalender h4.kal__info-name > svg, main .kalender h4.kal__info-name > span:first-child:not(.kal__li-flags) { display: inline-block; width: 13px; height: 13px; margin-right: 7px; vertical-align: 1px; color: var(--muted); }
main .kalender h4.kal__info-name > .kal__zod { width: auto; font-size: 15px; vertical-align: 0; }
.kal__info-meta { margin: 0 0 8px !important; font-size: 10.5px !important; letter-spacing: 0.12em !important; text-transform: uppercase; line-height: 1.5; color: var(--muted); }
.kal__info-item p { font-size: 14px !important; line-height: 1.55 !important; margin: 0 0 6px !important; }
.kal__info-item .kal__info-meta { font-size: 10.5px !important; line-height: 1.5 !important; }
.kal__info-item .kal__info-origin { font-size: 13px !important; color: var(--muted); }
.kal__info-origin span, .kal__uitn span { font-size: 9.5px !important; letter-spacing: 0.16em; font-weight: 600; color: var(--ink); margin-right: 6px; }
.kal__info-item .kal__uitn { margin: 8px 0 0 !important; padding: 8px 12px !important; font-size: 13.5px !important; line-height: 1.5 !important; }
main .kalender h4.kal__info-name > .kal__li-flags { display: inline-flex; gap: 4px; width: auto; height: auto; margin: 0 0 0 9px; vertical-align: 2px; }
main .kalender h4.kal__info-name .kal__flag { display: block; width: 15px; height: 10px; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.18); }
.kal__info-maan { display: block !important; padding-left: 24px; margin: 0 0 6px !important; font-style: italic; }
/* Getrokken kaart eerst, de planlink eronder */
.kaart-trek__stapel { flex-direction: column; align-items: center; gap: 22px; }
.kaart-trek__stapel .kaart-trek__plan { margin-top: 0; }
.kaart-trek__plan[hidden] { display: none !important; }
@media (max-width: 640px) { .kaart-trek__kaart { width: min(252px, 100%) !important; } .kaart-trek__stapel .kaart-trek__plan { max-width: 100%; } }
.kaart-trek__stapel .kaart-trek__plan + .kaart-trek__deel { margin-top: -10px; }
.kaart-trek__stapel .kaart-trek__plan, .kaart-trek__stapel .kaart-trek__deel { font-size: 15px !important; line-height: 1.4; text-align: center; }
/* Taalkeuze: twee duidelijke, gelijkwaardige knoppen */
.welcome .welcome__langs { gap: 12px !important; flex-wrap: wrap !important; font-size: 12px !important; letter-spacing: 0.16em !important; }
.welcome .welcome__langs a { flex-direction: row !important; gap: 10px !important; min-width: 150px; justify-content: center; padding: 14px 20px !important; border: 1px solid var(--ink); color: var(--ink) !important; font-weight: 500 !important; background: transparent; transition: background 0.25s ease, color 0.25s ease, transform 0.35s var(--spring); }
.welcome .welcome__langs a span { border: 0 !important; padding: 0 !important; }
.welcome .welcome__langs a:hover, .welcome .welcome__langs a:focus-visible { background: var(--ink); color: var(--bg) !important; }
.welcome .welcome__langs .flag { display: block !important; position: static !important; margin: 0 !important; width: 18px !important; height: 12px !important; opacity: 1 !important; transform: none !important; }
@media (max-width: 640px) { .welcome .welcome__langs a { min-width: 0; flex: 1 1 130px; padding: 14px 12px !important; } .welcome .welcome__langs { font-size: 11.5px !important; width: 100%; max-width: 320px; margin: 0 auto; } }
/* Entree zonder taalkeuze: de taal gaat vanzelf */
.welcome .welcome__choose, .welcome .welcome__langs { display: none !important; }
/* Homepagetitel: markering volgt de regels, ook als de tweede helft over twee regels loopt */
.cover__title .light { display: inline !important; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cover__title .cover__mark { background: linear-gradient(transparent 62%, var(--blauw) 62%, var(--blauw) 90%, transparent 90%); padding: 0 0.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cover__title .light.light--los { background: none !important; padding: 0; }
/* Ervaringen: de kern in het blauw */
.q-kern { background: linear-gradient(transparent 58%, var(--blauw) 58%, var(--blauw) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.04em; }
/* Ervaringen: markering achter de hele woorden, zodat ze juist beter leesbaar zijn */
.q-kern { background: rgba(169, 198, 243, 0.55) !important; color: var(--zwart, #1B1917); font-weight: 500; padding: 0.06em 0.2em !important; border-radius: 3px; }
/* Ervaringen: zelfde blauw als geselecteerde tekst (zoals bij 'In beeld') */
.q-kern { background: var(--blauw) !important; color: var(--zwart) !important; font-weight: inherit !important; padding: 0.02em 0.12em !important; border-radius: 0 !important; }
/* Ervaringen rustiger: twee tegelijk op de computer, één op de telefoon, met meer lucht */
.review-row { gap: clamp(20px, 2.4vw, 32px) !important; align-items: stretch; }
.review-row > figure, .quotes--all.review-row > figure { flex: 0 0 calc(50% - clamp(10px, 1.2vw, 16px)) !important; padding: clamp(24px, 2.6vw, 36px) clamp(24px, 2.8vw, 40px) !important; }
.review-row blockquote, .review-row .quote__text { font-size: clamp(15px, 1.25vw, 17px) !important; line-height: 1.65 !important; }
@media (max-width: 760px) {
  .review-row > figure, .quotes--all.review-row > figure { flex-basis: 88% !important; padding: 22px 20px !important; }
  .review-row blockquote, .review-row .quote__text { font-size: 15px !important; }
}
@media (max-width: 760px) { .review-row { align-items: flex-start !important; } }
/* Homepage: extra's als rustige rij links bij 'Maak het persoonlijk' */
.hp-extra { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hp-extra .hp-kaart__link { margin: 0; }
.cover > .section--invite { grid-column: 1 / -1; margin-top: clamp(32px, 4vw, 64px); }
.cover > .section--invite { margin-bottom: clamp(40px, 5vw, 80px); }
/* Geen losse teksten: alles vast aan iets */
.cover__sub { text-align: left !important; margin-top: 6px !important; }
.cover__actions + .cover__deal { margin-top: 10px !important; text-align: center; font-size: 12.5px; }
.cover__side .byline { background: var(--wit, #fff); padding: 16px 18px; margin-top: 18px; }
.cover__actions + .cover__deal { margin-top: -18px !important; }
/* Losse regels vastzetten aan het blok erboven */
.hp-ws__solo { background: var(--wit, #fff); padding: 14px 18px; margin-top: 18px !important; }
.hp-who__regel { margin-top: 18px !important; padding-top: 14px; border-top: 1px solid var(--line); }
.hp-vragen-regel { margin-top: 20px !important; padding-top: 16px; border-top: 1px solid rgba(238, 231, 220, 0.22); text-align: left !important; }
.cta--form .cta__intro p { color: rgba(238, 231, 220, 0.82); }
.review-controls { margin-top: 14px !important; }
@media (max-width: 760px) { .review-row { align-items: stretch !important; } }
.themas__eind { margin-top: 18px !important; padding-top: 14px; border-top: 1px solid var(--line); }
.themas__eind .kaart-verder a { margin-left: 0 !important; }
.themas__eind .themas__copy { margin-top: 10px !important; }
.review-controls { margin-top: 6px !important; }
.hp-why__text .byline { background: var(--wit, #fff); padding: 16px 18px; margin-top: 22px; }
.hp-why__text .byline { align-items: center; }
/* Waarom-tekst: in een rustig wit vlak, drie gelijke alinea's, goed leesbaar */
.hp-why__text { background: var(--wit, #fff); padding: clamp(22px, 3vw, 40px) clamp(20px, 3vw, 44px); align-self: start; }
.hp-why__text p { font-size: clamp(16px, 1.25vw, 17.5px) !important; line-height: 1.7 !important; margin: 0 !important; padding: 18px 0; border-top: 1px solid var(--line); }
.hp-why__text p:first-child { padding-top: 0; border-top: 0; }
.hp-why__text p::first-letter { all: unset; }
.hp-why__text .byline { background: transparent !important; padding: 18px 0 0 !important; margin-top: 0 !important; border-top: 1px solid var(--line); }
/* Waarom: foto's even hoog als het tekstvlak, label in de foto */
.hp-why { align-items: stretch !important; }
.hp-why__imgs { align-self: stretch !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 18px); }
.hp-why__imgs figure { position: relative; margin: 0 !important; min-height: 240px; overflow: hidden; }
.hp-why__imgs img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; aspect-ratio: auto !important; }
.hp-why__imgs figcaption { position: absolute; left: 10px; bottom: 10px; margin: 0 !important; padding: 5px 10px; background: var(--wit, #fff); color: var(--zwart); font-size: 10.5px !important; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; }
.hp-why__text { align-self: stretch !important; }
@media (max-width: 760px) { .hp-why__imgs figure { min-height: 0; aspect-ratio: 3 / 4; } }
@media (min-width: 761px) { .hp-why__imgs { grid-template-rows: 1fr; height: 100%; } .hp-why__imgs figure { height: 100%; } }
.hp-why__imgs img.hp-why__kwast { object-position: 50% 12%; }
.hp-why__imgs figcaption { background: var(--blauw) !important; color: var(--zwart) !important; }

/* ===== Alle pagina's zo overzichtelijk als de homepage: tekst in witte vlakken, niets los ===== */
/* Verhaal op de workshoppagina's */
.split > .stack.gap-24 { background: var(--wit, #fff); padding: clamp(22px, 3vw, 40px) clamp(20px, 3vw, 44px); gap: 0 !important; align-self: start; }
.split > .stack.gap-24 > p { margin: 0 !important; padding: 16px 0; border-top: 1px solid var(--line); font-size: clamp(16px, 1.25vw, 17.5px); line-height: 1.7; }
.split > .stack.gap-24 > p:first-child { padding-top: 0; border-top: 0; }
.split > .stack.gap-24 > p:last-child { padding-bottom: 0; }
/* Voordelen als vier gelijke kaartjes */
.benefits .benefit { background: var(--wit, #fff); padding: clamp(18px, 2vw, 26px); border-top: 0 !important; }
/* Hoe het verloopt, Goed om te weten: in een wit vlak */
.split > .rule-list, .hp-who__text .rule-list, .ws-hoe .ws-feiten { background: var(--wit, #fff); padding: clamp(14px, 2vw, 22px) clamp(18px, 2.6vw, 32px); }
.hp-who__text .hp-who__regel { background: var(--wit, #fff); padding: 14px clamp(18px, 2.6vw, 32px) !important; margin-top: 2px !important; border-top: 1px solid var(--line); }
/* Voor wie: kaartjes wit */
.audience__card { background: var(--wit, #fff); padding: clamp(18px, 2.4vw, 30px) !important; border-top: 0 !important; }
/* Over: tekst in een wit vlak */
.split--center > .stack.gap-24 { background: var(--wit, #fff); padding: clamp(22px, 3vw, 40px) clamp(20px, 3vw, 44px); }
/* Teamuitje: opbrengsten en stappen als kaartjes */
.team-waarom__lijst > * , .team-stappen__lijst > li { background: var(--wit, #fff); padding: clamp(16px, 2vw, 24px) !important; border-top: 0 !important; }
.split > .stack.gap-24 > p.body, .split--center > .stack.gap-24 p { font-size: clamp(16px, 1.25vw, 17.5px) !important; line-height: 1.7 !important; }
.split > .stack.gap-24 > .ws-slot { font-size: clamp(18px, 1.5vw, 22px) !important; }
.hp-who .hp-who__text .rule-list--labels { background: var(--wit, #fff) !important; padding: clamp(18px, 2.4vw, 30px) clamp(18px, 2.6vw, 32px) !important; }
.hp-who > .hp-who__regel { background: var(--wit, #fff); padding: 14px clamp(18px, 2.6vw, 32px) !important; margin-top: 2px !important; border-top: 0 !important; }
.feel .feel__text { background: var(--wit, #fff); padding: clamp(22px, 3vw, 40px) clamp(20px, 3vw, 44px) !important; align-self: center; }
.ws-hoe .hp-steps > * { background: var(--wit, #fff); padding-bottom: 16px; }
.ws-hoe .hp-steps > * > :not(img):not(figure) { padding-left: 16px; padding-right: 16px; }
/* Workshopnaam gemarkeerd in de eigen kleur, zoals het blauw op de homepage */
.mark-groen { background: linear-gradient(transparent 62%, var(--groen-mid) 62%, var(--groen-mid) 90%, transparent 90%); padding: 0 0.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Reviews: markering in de kleur van de workshop */
.q-kern--groen { background: var(--groen-mid) !important; }
.q-kern--terra { background: var(--terra-mid) !important; }
.q-kern--blauw { background: var(--blauw) !important; }
.mark-terra { background: linear-gradient(transparent 62%, var(--terra-mid) 62%, var(--terra-mid) 90%, transparent 90%); padding: 0 0.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Credit bij het schilderij: groter en in de kleur van Intuitive Painting */
.feel .feel__credit { background: var(--terra-mid) !important; color: var(--zwart) !important; font-size: 13.5px !important; letter-spacing: 0.08em !important; padding: 5px 11px !important; }
/* Kennismakingsvak in de kleur van de workshoppagina */
body:has(h1 .mark-groen) .field--bellen { background: var(--groen-licht); }
body:has(h1 .mark-terra) .field--bellen { background: var(--terra-licht); }
/* Het kennismakingsvak volgt de gekozen workshop in het formulier */
.request-form:has(input[name="workshop"][value="Movement in Presence"]:checked) .field--bellen { background: var(--groen-licht) !important; }
.request-form:has(input[name="workshop"][value="Intuitive Painting"]:checked) .field--bellen { background: var(--terra-licht) !important; }
.request-form:has(input[name="workshop"][value="First Move, Then Paint"]:checked) .field--bellen { background: rgba(169, 198, 243, 0.45) !important; }
.field--bellen { transition: background-color 0.3s ease; }
/* Beschrijving onder het schilderij: wit kaartje vast aan de foto, jaartal als terra label */
.feel--solo .feel__cap { display: flex; flex-direction: column; gap: 10px; background: var(--wit, #fff); margin: 0 !important; padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 32px); font-size: clamp(15.5px, 1.2vw, 17px) !important; line-height: 1.65; color: var(--zwart) !important; font-style: italic; }
.feel--solo .feel__cap .feel__year { order: -1; align-self: flex-start; font-style: normal; background: var(--terra-mid); color: var(--zwart); padding: 5px 11px; font-size: 13.5px !important; letter-spacing: 0.08em; font-weight: 500; margin: 0 !important; }
/* Schilderij en beschrijving naast elkaar, even groot (computer) */
@media (min-width: 900px) {
  .feel--solo { max-width: none !important; }
  .feel--solo .feel__fig { display: grid !important; grid-template-columns: 1fr 1fr; align-items: stretch; max-width: none !important; width: 100%; justify-self: stretch !important; }
  .feel--solo .feel__img { width: 100% !important; height: 100% !important; object-fit: cover; aspect-ratio: auto !important; }
  .feel--solo .feel__cap { justify-content: center; }
}
.mark-blauw { background: linear-gradient(transparent 62%, var(--blauw) 62%, var(--blauw) 90%, transparent 90%); padding: 0 0.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* First Move, Then Paint: kop met twee foto's eronder, naast het tekstvlak, even hoog */
.split__links { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); align-self: stretch; }
.split__links .ws-duo { flex: 1; height: auto !important; min-height: 260px; }
.split__links .ws-duo figure { height: auto !important; min-height: 260px; }
.split__links .ws-duo img.photo { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; aspect-ratio: auto !important; }
@media (max-width: 760px) { .split__links .ws-duo, .split__links .ws-duo figure { min-height: 0; } .split__links .ws-duo figure { aspect-ratio: 3 / 4; } }
@media (min-width: 761px) { .split__links .ws-duo { display: grid !important; grid-template-rows: 1fr; align-items: stretch; } .split__links .ws-duo figure { height: 100% !important; } }
.audience__card .audience__link { display: inline-block; margin-top: 14px; }
/* Labels in de foto's in de kleur van de workshop */
body:has(h1 .mark-groen) .ws-duo figcaption { background: var(--groen-mid) !important; }
body:has(h1 .mark-terra) .ws-duo figcaption { background: var(--terra-mid) !important; }
.split:has(.split__links) > .stack.gap-24 { align-self: stretch !important; justify-content: center; }
@media (min-width: 761px) { .split__links .ws-duo, .split__links .ws-duo figure { min-height: 220px; } }
/* Goed om te weten: zandkleurig vlak */
.hp-who .hp-who__text .rule-list--labels, .hp-who > .hp-who__regel { background: #E2D6C4 !important; }

/* ===== Workshopkaarten: één wit kaartje per workshop, niets los ===== */
.hp-ws__item { background: var(--wit, #fff); flex-direction: column; text-decoration: none; transition: transform 0.35s var(--spring, ease), box-shadow 0.35s ease; }
.hp-ws__item:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(27, 25, 23, 0.08); }
.hp-ws__body { padding: 18px clamp(18px, 1.8vw, 24px) 20px !important; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.hp-ws__name { width: fit-content; padding: 0 0.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hp-ws__item--move .hp-ws__name { background: linear-gradient(transparent 62%, var(--groen-mid) 62%, var(--groen-mid) 90%, transparent 90%); }
.hp-ws__item--paint .hp-ws__name { background: linear-gradient(transparent 62%, var(--terra-mid) 62%, var(--terra-mid) 90%, transparent 90%); }
.hp-ws__item--both .hp-ws__name { background: linear-gradient(transparent 62%, var(--blauw) 62%, var(--blauw) 90%, transparent 90%); }
.hp-ws__meta { margin-top: auto !important; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hp-ws__meta > span:first-child { font-weight: 500; color: var(--zwart); }
.hp-ws__more { flex: none; padding: 7px 14px; border: 1px solid var(--zwart); border-radius: 999px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.hp-ws__item:hover .hp-ws__more { background: var(--zwart); color: var(--bg); }
.hp-ws .hp-ws__item { background: var(--wit, #fff) !important; }
.hp-ws .hp-ws__item .hp-ws__body { padding: 18px clamp(18px, 1.8vw, 24px) 20px !important; }
.ratecard__incl { margin: 16px 0 0; padding: 12px 14px; background: var(--bg); font-size: 14.5px; line-height: 1.55; }
/* Paginaspiraal net zo krachtig als op de beginpagina */
.hp-pagehead__spiral { opacity: 1 !important; }

/* ===== Kleur heeft betekenis: groen, terra en blauw alleen bij de workshops; al het andere zand ===== */
:root { --zand-licht: #E2D6C4; --zand-mid: #D3C2A7; }
::selection { background: var(--zand-mid); color: var(--zwart); }
.footer__col a:hover, .footer__bottom a:hover, .zoek__list a:hover .zoek__where, .faq__more, .hp-solo__about, .thema__plan, .hp-kaart__link, .hp-ws__more, .kal__dagzin-link { text-decoration-color: var(--zand-mid) !important; }
.nav__links > a:hover { border-bottom-color: var(--zand-mid) !important; }
.zoek__text mark { background: linear-gradient(transparent 55%, var(--zand-mid) 55%, var(--zand-mid) 92%, transparent 92%) !important; }
.themas__chips a:hover { background: var(--zand-mid) !important; border-color: var(--zand-mid) !important; }
.thema__vraag { border-left-color: var(--zand-mid) !important; }
.team-voorbeeld__lijst em { background: var(--zand-licht) !important; }
.field--bellen { background: var(--zand-licht); }
.q-kern { background: var(--zand-mid) !important; }
.q-kern--groen { background: var(--groen-mid) !important; }
.q-kern--terra { background: var(--terra-mid) !important; }
.q-kern--blauw { background: var(--blauw) !important; }
/* Homepage: bewegen groen, schilderen terra, net als de workshops */
.cover__title > .cover__mark { background: linear-gradient(transparent 62%, var(--groen-mid) 62%, var(--groen-mid) 90%, transparent 90%) !important; }
.cover__title .light .cover__mark { background: linear-gradient(transparent 62%, var(--terra-mid) 62%, var(--terra-mid) 90%, transparent 90%) !important; }
.hp-why .hp-why__imgs figure:first-child figcaption { background: var(--groen-mid) !important; }
.hp-why .hp-why__imgs figure:last-child figcaption { background: var(--terra-mid) !important; }
/* 'Aanrader' op de teampagina hoort bij First Move, Then Paint: blauw */
.team-voorbeeld__lijst em { background: rgba(169, 198, 243, 0.55) !important; }
/* 'Of één van de twee.' in rustig donkergrijs, geen workshopkleur */
.cover__sub, .hp-hero__sub.cover__sub { color: var(--muted, #6b655d) !important; }

/* ===== Blauw als merkkleur: alle grote accenten blauw; groen en terra alleen als klein stipje en in het formulier ===== */
.mark-groen, .mark-terra, .mark-blauw,
.cover__title > .cover__mark, .cover__title .light .cover__mark,
.hp-ws__item--move .hp-ws__name, .hp-ws__item--paint .hp-ws__name, .hp-ws__item--both .hp-ws__name {
  background: linear-gradient(transparent 62%, var(--blauw) 62%, var(--blauw) 90%, transparent 90%) !important;
}
.q-kern, .q-kern--groen, .q-kern--terra, .q-kern--blauw { background: var(--blauw) !important; }
.hp-why .hp-why__imgs figure figcaption, body .ws-duo figcaption, body:has(h1 .mark-groen) .ws-duo figcaption, body:has(h1 .mark-terra) .ws-duo figcaption,
.feel .feel__credit, .feel--solo .feel__cap .feel__year { background: var(--blauw) !important; }
::selection { background: var(--blauw); }
.footer__col a:hover, .footer__bottom a:hover, .zoek__list a:hover .zoek__where, .faq__more, .hp-solo__about, .thema__plan, .hp-kaart__link, .hp-ws__more, .kal__dagzin-link { text-decoration-color: var(--blauw) !important; }
.nav__links > a:hover { border-bottom-color: var(--blauw) !important; }
.zoek__text mark { background: linear-gradient(transparent 55%, var(--blauw) 55%, var(--blauw) 92%, transparent 92%) !important; }
.themas__chips a:hover { background: var(--blauw) !important; border-color: var(--blauw) !important; }
.thema__vraag { border-left-color: var(--blauw) !important; }
.field--bellen { background: rgba(169, 198, 243, 0.45); }
.hp-why .hp-why__imgs figure:first-child figcaption, .hp-why .hp-why__imgs figure:last-child figcaption { background: var(--blauw) !important; }
/* Over: twee foto's symmetrisch, even groot, label in de foto */
.over__duo { display: grid !important; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 16px); align-items: start; }
.over__duo figure { position: relative; margin: 0 !important; transform: none !important; aspect-ratio: 3 / 4; overflow: hidden; }
.over__duo figure img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; aspect-ratio: auto !important; margin: 0 !important; }
.over__duo figcaption { position: absolute; left: 10px; bottom: 10px; margin: 0 !important; padding: 5px 10px !important; background: var(--blauw) !important; color: var(--zwart) !important; font-size: 10.5px !important; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; text-align: left !important; }
/* Over: missie onder het portret */
.over__portret { margin: 0; display: flex; flex-direction: column; gap: 0; }
.over__portret .over__mission { margin: 0 !important; background: var(--wit, #fff); padding: 16px 20px; font-family: 'Instrument Serif', serif; font-size: clamp(19px, 1.6vw, 23px) !important; line-height: 1.3; color: var(--zwart) !important; }
/* Over: kernwoorden dikgedrukt in plaats van gemarkeerd */
#over .q-kern { background: none !important; padding: 0 !important; font-weight: 600 !important; color: var(--zwart) !important; }

/* ===== Kalender in het teken van één onderwerp ===== */
.kal__grid--onderwerp { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 8px !important; border: 0 !important; }
.kal__odag { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-height: 92px; padding: 12px 14px; background: var(--wit, #fff); border: 1px solid var(--line); transition: border-color 0.2s ease, transform 0.25s ease; }
.kal__odag:hover, .kal__odag:focus-visible { border-color: var(--zwart); transform: translateY(-2px); }
.kal__odag-datum { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.kal__odag-naam { font-family: 'Instrument Serif', serif; font-size: 18px; line-height: 1.2; color: var(--zwart); }
.kal__odag.is-geweest { opacity: 0.5; }
.kal__odag.is-vandaag { border-color: var(--terra); box-shadow: inset 0 0 0 1px var(--terra); }
.kal__odag.is-gekozen { background: var(--blauw); border-color: var(--blauw); }
.kal__title--onderwerp { display: flex; align-items: center; justify-content: center; gap: 8px; }
.kal__title--onderwerp svg { width: 20px; height: 20px; }
.kal__terug { all: unset; cursor: pointer; margin-top: 6px; font-size: 12px; letter-spacing: 0.06em; text-decoration: underline; text-decoration-color: var(--blauw); text-underline-offset: 4px; }
.kal__nav[disabled] { opacity: 0.25; cursor: default; }
@media (max-width: 640px) { .kal__grid--onderwerp { grid-template-columns: 1fr 1fr !important; } .kal__odag-naam { font-size: 16px; } .kal__odag { min-height: 84px; padding: 10px 11px; } }

/* Onderwerp-weergave: strakke lijst, schreefloze letters */
.kal__grid--onderwerp { display: block !important; background: var(--wit, #fff); border: 1px solid var(--line) !important; padding: 4px 0; }
.kal__ojaar { padding: 14px 18px 6px; font-family: 'Instrument Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: var(--muted); }
.kal__odag { all: unset; box-sizing: border-box; cursor: pointer; display: grid !important; grid-template-columns: 112px 1fr 16px; align-items: center; gap: 12px; width: 100%; min-height: 0 !important; padding: 11px 18px !important; background: none !important; border: 0 !important; border-top: 1px solid var(--line) !important; transform: none !important; font-family: 'Instrument Sans', sans-serif; }
.kal__ojaar + .kal__odag { border-top: 0 !important; }
.kal__odag:hover, .kal__odag:focus-visible { background: var(--bg) !important; }
.kal__odag-datum { font-family: 'Instrument Sans', sans-serif !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--muted); font-variant-numeric: tabular-nums; }
.kal__odag-naam { font-family: 'Instrument Sans', sans-serif !important; font-size: 15px !important; line-height: 1.35 !important; color: var(--zwart); }
.kal__odag-pijl { font-size: 14px; color: var(--muted); opacity: 0; transition: opacity 0.2s ease; }
.kal__odag:hover .kal__odag-pijl { opacity: 1; }
.kal__odag.is-geweest { opacity: 0.45; }
.kal__odag.is-vandaag { box-shadow: inset 3px 0 0 var(--terra) !important; }
.kal__odag.is-gekozen { background: var(--blauw) !important; }
.kal__title--onderwerp { font-family: 'Instrument Sans', sans-serif !important; font-size: 17px !important; font-weight: 600; letter-spacing: 0.01em; }
@media (max-width: 640px) { .kal__odag { grid-template-columns: 92px 1fr; padding: 11px 14px !important; } .kal__odag-pijl { display: none; } .kal__ojaar { padding: 12px 14px 6px; } }

/* Onderwerp-weergave: kalenderblaadje, uitleg, maandkopjes */
.kal__ojaar { padding: 18px 20px 8px !important; font-size: 11px !important; letter-spacing: 0.16em !important; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.kal__odag { grid-template-columns: 58px 1fr 16px !important; gap: 16px !important; padding: 14px 20px !important; align-items: center; }
.kal__oblad { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 64px; border: 1px solid var(--zwart); background: var(--wit, #fff); font-family: 'Instrument Sans', sans-serif; line-height: 1; }
.kal__oblad b { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.kal__oblad i { font-style: normal; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 4px; }
.kal__oblad em { font-style: normal; font-size: 10px; color: var(--muted); margin-top: 3px; }
.kal__otekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kal__odag-naam { font-size: 15.5px !important; font-weight: 500; }
.kal__odag-waarom { font-size: 13px; line-height: 1.45; color: var(--muted); }
.kal__oeerst { display: inline-block; margin-left: 6px; padding: 2px 8px; background: var(--blauw); color: var(--zwart); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; vertical-align: 2px; }
.kal__odag.is-geweest { opacity: 0.4 !important; }
.kal__odag.is-vandaag .kal__oblad { border-color: var(--terra); box-shadow: inset 0 0 0 1px var(--terra); }
.kal__odag.is-vandaag { box-shadow: none !important; }
.kal__odag.is-gekozen { background: rgba(169, 198, 243, 0.35) !important; }
/* Rust: zolang een onderwerp open staat, verdwijnen het maanzinnetje en de hint */
.is-onderwerp .kal__vandaag, .is-onderwerp .kal__hint { display: none !important; }
@media (max-width: 640px) {
  .kal__odag { grid-template-columns: 50px 1fr !important; gap: 12px !important; padding: 12px 14px !important; }
  .kal__oblad { width: 50px; height: 56px; } .kal__oblad b { font-size: 20px; }
  .kal__ojaar { padding: 14px 14px 6px !important; }
}

/* Onderwerp als kalender: vakjes naast elkaar, net als de dagen */
.kal__grid--onderwerp { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0 !important; background: transparent !important; padding: 0 !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-left: 1px solid var(--line) !important; }
.kal__ovak { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 92px; padding: 9px 10px 10px; background: var(--wit, #fff); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: 'Instrument Sans', sans-serif; transition: background 0.2s ease; }
.kal__ovak:hover, .kal__ovak:focus-visible { background: var(--bg); }
.kal__ovak-datum { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.kal__ovak-datum b { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--zwart); text-transform: none; }
.kal__ovak-naam { font-size: 13.5px; line-height: 1.25; color: var(--zwart); font-weight: 500; overflow-wrap: anywhere; }
.kal__ovak .kal__oeerst { position: absolute; top: 9px; right: 8px; margin: 0; padding: 2px 6px; font-size: 8.5px; }
.kal__ovak.is-geweest { opacity: 0.45; }
.kal__ovak.is-vandaag { box-shadow: inset 0 0 0 2px var(--terra); }
.kal__ovak.is-gekozen { background: var(--blauw) !important; opacity: 1; }
.kal__ogakal { all: unset; cursor: pointer; display: inline-block; margin-top: 14px; font-size: 13px; text-decoration: underline; text-decoration-color: var(--blauw); text-underline-offset: 4px; }
@media (max-width: 640px) { .kal__grid--onderwerp { grid-template-columns: repeat(3, 1fr) !important; } .kal__ovak { min-height: 84px; padding: 8px; } .kal__ovak-naam { font-size: 12.5px; } .kal__ovak .kal__oeerst { position: static; align-self: flex-start; } }

/* Kalender: onderwerp als jaarkalender (12 maandjes) */
.is-onderwerp .kal__top { flex-wrap: wrap; row-gap: 14px; }
.kal__terugrij { flex: 0 0 100%; display: flex; justify-content: flex-start; }
.kal__terug { font: 600 0.88rem/1 'Instrument Sans', sans-serif; color: var(--ink, #1f1d1a); background: var(--zand-licht, #E2D6C4); border: 1px solid var(--zand-mid, #D3C2A7); border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: background .2s; text-decoration: none; margin-top: 0; letter-spacing: .01em; }
.kal__terug:hover, .kal__terug:focus-visible { background: var(--zand-mid, #D3C2A7); }
.kal__terug--klein { padding: 8px 14px; font-size: 0.82rem; }
.kal__nav[disabled] { opacity: .25; cursor: default; }
.kal__info-terug { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }

/* Onderwerp: gewone kalendervakjes op een rij */
.kal__grid--rij { border-top: 1px solid var(--line); }
.kal__grid--rij .kal__dag { min-height: 96px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 9px 26px; }
.kal__grid--rij .kal__num { font-size: 18px; font-weight: 600; color: var(--ink); }
.kal__rmnd { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kal__rnaam { font-size: 11.5px; line-height: 1.25; color: var(--ink); margin-top: 4px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.kal__grid--rij .kal__dag.is-geweest { opacity: .5; }
.kal__grid--rij .kal__dag.is-gekozen { background: var(--blauw); opacity: 1; }
.kal__grid--rij .kal__dag.is-vandaag .kal__num { width: auto; height: auto; margin: 0; background: none; color: var(--ink); border-radius: 0; }
@media (max-width: 720px) {
  .kal__grid--rij { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kal__grid--rij .kal__dag { min-height: 92px; padding: 6px 6px 22px; }
  .kal__grid--rij .kal__num { font-size: 16px; }
  .kal__rnaam { font-size: 10.5px; }
}

/* Onderwerp aan: alleen het vak met de blokjes wordt zwart */
.kal__grid--rij { --line: rgba(238, 231, 220, 0.2); --muted: rgba(238, 231, 220, 0.62); --ink: #EEE7DC; background: #1B1917; border-left-color: var(--line); border-top-color: var(--line); }
.kal__grid--rij .kal__dag, .kal__grid--rij .kal__dag.is-geweest { background: transparent; color: #EEE7DC; }
.kal__grid--rij button.kal__dag:hover { background: rgba(238, 231, 220, 0.08); }
.kal__grid--rij .kal__dag.is-gekozen { background: var(--blauw); box-shadow: none; }
.kal__grid--rij .kal__dag.is-gekozen * { color: #1B1917; }
/* Kleuren in het zwarte blokjesvak: crème, zand en blauw uit het merk */
.kal__grid--rij { background: #1E1C1A; --line: rgba(226, 214, 196, 0.16); }
.kal__grid--rij .kal__num { color: #F4EFE6; }
.kal__grid--rij .kal__rmnd { color: var(--zand-mid, #D3C2A7); }
.kal__grid--rij .kal__rnaam { color: rgba(244, 239, 230, 0.86); }
.kal__grid--rij .kal__marks, .kal__grid--rij .kal__marks > * { color: var(--blauw) !important; }
.kal__grid--rij .kal__dag.is-geweest { opacity: 1; }
.kal__grid--rij .kal__dag.is-geweest .kal__num, .kal__grid--rij .kal__dag.is-geweest .kal__rnaam { color: rgba(244, 239, 230, 0.4); }
.kal__grid--rij .kal__dag.is-geweest .kal__rmnd { color: rgba(211, 194, 167, 0.45); }
.kal__grid--rij .kal__dag.is-geweest .kal__marks { opacity: .4; }
.kal__grid--rij .kal__dag.is-vandaag { box-shadow: inset 0 0 0 2px var(--terra-mid, #DCB7A8); }
.kal__grid--rij button.kal__dag:hover { background: rgba(169, 198, 243, 0.12); }
.kal__grid--rij .kal__dag.is-gekozen { background: var(--blauw); }
.kal__grid--rij .kal__dag.is-gekozen .kal__num, .kal__grid--rij .kal__dag.is-gekozen .kal__rnaam { color: #1B1917; }
.kal__grid--rij .kal__dag.is-gekozen .kal__rmnd { color: rgba(27, 25, 23, 0.65); }
.kal__grid--rij .kal__dag.is-gekozen .kal__marks, .kal__grid--rij .kal__dag.is-gekozen .kal__marks > * { color: #1B1917 !important; }
/* Gekozen cultuur in het lijstje: klein zwart blokje, passend bij het zwarte vak */
.kalender.is-onderwerp .kal__legend button.is-aan { background: #1E1C1A; color: #F4EFE6 !important; border-bottom-color: transparent !important; border-radius: 4px; padding-left: 7px; padding-right: 7px; }
.kalender.is-onderwerp .kal__legend button.is-aan svg, .kalender.is-onderwerp .kal__legend button.is-aan * { color: var(--blauw) !important; }
.is-onderwerp .kal__top { scroll-margin-top: 24px; }
/* Geweest in het zwarte vak: warm zand in plaats van grijs, goed leesbaar */
.kal__grid--rij .kal__dag.is-geweest { background: rgba(200, 179, 153, 0.10); }
.kal__grid--rij .kal__dag.is-geweest .kal__num, .kal__grid--rij .kal__dag.is-geweest .kal__rnaam { color: var(--zand, #C8B399); }
.kal__grid--rij .kal__dag.is-geweest .kal__rmnd { color: rgba(200, 179, 153, 0.75); }
.kal__grid--rij .kal__dag.is-geweest .kal__marks { opacity: 1; }
.kal__grid--rij .kal__dag.is-geweest .kal__marks, .kal__grid--rij .kal__dag.is-geweest .kal__marks > * { color: var(--zand, #C8B399) !important; }
.kal__grid--rij .kal__dag.is-geweest .kal__num, .kal__grid--rij .kal__dag.is-geweest .kal__rnaam, .kal__grid--rij .kal__dag.is-geweest .kal__rmnd { opacity: 1; }
.kal__rnaam { overflow-wrap: break-word; word-break: normal; hyphens: auto; -webkit-hyphens: auto; }
.is-onderwerp .kal__top { flex-wrap: wrap; }
.is-onderwerp .kal__top .kal__head { flex: 1 1 0; min-width: 0; }
.is-onderwerp .kal__top .kal__title--onderwerp { font-size: clamp(1.05rem, 4.6vw, 1.35rem); overflow-wrap: break-word; }
.kal__rnaam { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
/* Geweest in het zwarte vak: saliegroen in plaats van bruinig zand */
.kal__grid--rij .kal__dag.is-geweest { background: rgba(191, 197, 180, 0.07); }
.kal__grid--rij .kal__dag.is-geweest .kal__num, .kal__grid--rij .kal__dag.is-geweest .kal__rnaam { color: #BFC5B4; }
.kal__grid--rij .kal__dag.is-geweest .kal__rmnd { color: rgba(191, 197, 180, 0.7); }
.kal__grid--rij .kal__dag.is-geweest .kal__marks, .kal__grid--rij .kal__dag.is-geweest .kal__marks > * { color: #BFC5B4 !important; }
.kal__grid--rij .kal__dag { min-width: 0; overflow: hidden; } .kal__grid--rij .kal__rnaam { width: 100%; max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
/* Vandaag in het zwarte vak: crèmewitte rand in plaats van terracotta */
.kal__grid--rij .kal__dag.is-vandaag { box-shadow: inset 0 0 0 2px #F4EFE6; }
.kal__grid--rij .kal__dag.is-vandaag.is-gekozen { box-shadow: inset 0 0 0 2px #F4EFE6, inset 0 0 0 4px #1E1C1A; }
/* Vandaag in de gewone kalender: blauw, de merkkleur, in plaats van terracotta */
.kal__dag.is-vandaag .kal__num { background: var(--blauw); color: var(--ink); }
.kal__dag.is-vandaag { box-shadow: inset 0 0 0 1px var(--blauw); }
.kal__dag.is-vandaag.is-gekozen { box-shadow: inset 0 0 0 2px var(--ink); }
.kal__grid--rij .kal__dag.is-vandaag .kal__num { background: none; color: #F4EFE6; }
.kal__grid--rij .kal__dag.is-vandaag { animation: none; }
/* Aanklikken: geen donkere tik-flits op de telefoon, en de gekozen dag in blauw in plaats van zwart */
.kalender button, .kalender a { -webkit-tap-highlight-color: transparent; }
.kal__grid:not(.kal__grid--rij) .kal__dag.is-gekozen { box-shadow: inset 0 0 0 2px var(--blauw); background: rgba(169, 198, 243, 0.18); }
.kal__grid:not(.kal__grid--rij) .kal__dag.is-vandaag.is-gekozen { animation: none; box-shadow: inset 0 0 0 2px var(--blauw); }
/* Mobiel: taalknopje (EN of NL) direct naast Instagram */
@media (max-width: 430px) {
  .nav__langs { display: flex !important; }
  .nav__right { gap: 2px; }
  .nav__ig { order: 1; }
  .nav__langs { order: 2; }
  .nav__toggle { order: 3; }
  .nav__lang { min-width: 30px; height: 36px; font-size: 12px; letter-spacing: 0.06em; }
}
@media (max-width: 345px) { .nav__logo { font-size: 14px; } .nav__toggle { padding-left: 10px; padding-right: 10px; } }
@media (max-width: 430px) {
  .nav__ig { width: 32px !important; }
  .nav__lang { min-width: 26px; }
  .nav__toggle { padding: 8px 12px !important; margin-left: 2px !important; }
}
@media (max-width: 370px) {
  .nav .nav__logo, .nav .nav__logo > span { font-size: 13px !important; }
  .nav__right { gap: 0 !important; }
  .nav__ig .ig-icon { width: 20px; height: 20px; }
}
@media (max-width: 360px) { .nav { padding-left: 16px !important; padding-right: 12px !important; } }

/* Verhalen: rustige leespagina, Reena's eigen tekst in een wit vlak */
.verhaal__artikel { max-width: 720px; margin: 0 auto; }
.verhaal__datum { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.verhaal__titel { font-size: clamp(44px, 6vw, 72px); margin: 0 0 14px; }
.verhaal__noot { font-size: 15px; color: var(--muted); font-style: italic; margin: 0 0 28px; }
.verhaal__tekst { background: var(--wit, #fff); padding: clamp(24px, 5vw, 48px); display: grid; gap: 18px; }
.verhaal__tekst p { font-size: 18px; line-height: 1.75; margin: 0; }
.verhaal__kop { letter-spacing: 0.04em; }
.verhaal__tekst a { text-decoration: underline; text-decoration-color: var(--blauw); text-underline-offset: 4px; }
.verhaal__verder { margin: 28px 0 0; }
.verhalen__titel { font-size: clamp(48px, 6vw, 80px); margin: 0 0 32px; }
.verhalen__kaart { display: block; max-width: 720px; background: var(--wit, #fff); padding: clamp(22px, 4vw, 36px); color: inherit; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.verhalen__kaart:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(27, 25, 23, 0.08); }
.verhalen__kop { font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 10px; }
.verhalen__intro { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
/* Geen geflikker: de gekozen dag blijft blauw, ook als de muis erop staat of je klikt */
.kal__grid--rij .kal__dag.is-gekozen, .kal__grid--rij .kal__dag.is-gekozen:hover, .kal__grid--rij .kal__dag.is-gekozen:active { background: var(--blauw) !important; }
.kal__grid:not(.kal__grid--rij) .kal__dag.is-gekozen:hover, .kal__grid:not(.kal__grid--rij) .kal__dag.is-gekozen:active { background: rgba(169, 198, 243, 0.18); }
.kal__grid .kal__dag.is-gekozen { transition: none; }
/* Workshoppagina's: één rustige regel onder Voor wie, naar de thema's */
.audience__thema { font-size: 17px; line-height: 1.6; margin: 4px 0 0; padding: 18px 22px; background: var(--wit, #fff); }
.audience__thema .arrow-link { white-space: nowrap; margin-left: 4px; }

/* Teamuitje in de opbouw van de workshoppagina's */
.audience--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .audience--drie { grid-template-columns: 1fr; } }
.team-kaart { color: inherit; text-decoration: none; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.team-kaart:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(27, 25, 23, 0.08); }
.team-kaart .audience__link { margin-top: auto; padding-top: 14px; }
.team-stappen2 > div { align-items: baseline; gap: 18px; }
.team-stappen2 > div > span:first-child { font-weight: 600; white-space: nowrap; }
.team-stappen2 b { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: var(--blauw); font-size: 12px; }
@media (max-width: 640px) { .team-stappen2 > div { flex-direction: column; gap: 4px; } .team-stappen2 > div > span:first-child { white-space: normal; } }
.team-foto2 { width: 100%; max-height: 520px; object-fit: cover; object-position: center 40%; }
.team-tabel td { text-align: right; font-weight: 600; white-space: nowrap; }
.team-tabel th span { display: block; font-weight: 400; font-size: 14px; color: var(--muted); }
.team-stappen2 > div { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 4px !important; padding: 14px 0; }
.team-stappen2 > div > span:first-child { white-space: normal; }
.team-stappen2 > div > span:last-child { padding-left: 32px; text-align: left !important; color: var(--muted); }
.team-rekenvb { text-align: right; }
.mark-blauw.mark-vol { background: var(--blauw); padding: 0.06em 0.3em; color: var(--ink); }
.mark-blauw.mark-vol { background-image: none !important; background-color: var(--blauw) !important; padding: 0 0.1em !important; }
.team-tabel th span.mark-vol { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Teamuitje: kaartjes kleuren mee met de workshop als je eroverheen gaat */
.team-kaart { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease; }
.team-kaart--groen:hover, .team-kaart--groen:focus-visible { background: var(--groen-licht, #DBDFD5); }
.team-kaart--terra:hover, .team-kaart--terra:focus-visible { background: var(--terra-licht, #EBD6CE); }
.team-kaart--blauw:hover, .team-kaart--blauw:focus-visible { background: rgba(169, 198, 243, 0.45); }
/* Teamuitje: de drie kaartjes staan altijd in de kleur van hun workshop */
.team-kaart--groen { background: var(--groen-licht, #DBDFD5) !important; }
.team-kaart--terra { background: var(--terra-licht, #EBD6CE) !important; }
.team-kaart--blauw { background: rgba(169, 198, 243, 0.45) !important; }
.team-kaart--groen:hover { background: var(--groen-mid, #BFC5B4) !important; }
.team-kaart--terra:hover { background: var(--terra-mid, #DCB7A8) !important; }
.team-kaart--blauw:hover { background: rgba(169, 198, 243, 0.7) !important; }
/* Teamuitje rekenvoorbeeld: kleurbolletjes, aanrader-label en knop */
.team-stip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 10px; vertical-align: 0.12em; }
.team-stip--groen { background: var(--groen-mid, #BFC5B4); }
.team-stip--terra { background: var(--terra-mid, #DCB7A8); }
.team-stip--blauw { background: var(--blauw); }
.team-label { display: inline-block; font-style: normal; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink); background: var(--blauw); padding: 3px 10px; border-radius: 999px; margin: 6px 0 0 19px; vertical-align: middle; }
@media (min-width: 640px) { .team-label { margin: 0 0 0 10px; } }
.team-knop { margin: 18px 0 0; }
.team-tabel thead th:last-child { text-align: right; }
.team-tabel thead th span { display: block; }
.team-knop { margin: 0; }
.team-rekenvb-dik, .team-rekenvb-dik strong { font-weight: 700; color: var(--ink); }
/* Teamuitje: thema's als teamdoelen */
.team-themas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .team-themas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .team-themas { grid-template-columns: 1fr; } }
.team-thema { display: block; background: var(--wit, #fff); padding: 20px 18px; color: inherit; text-decoration: none; border-top: 3px solid var(--blauw); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.team-thema:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(27, 25, 23, 0.08); }
.team-thema h3 { font-size: 22px; margin: 0 0 8px; }
.team-thema p { font-size: 15px; line-height: 1.5; margin: 0; color: var(--muted); }
.team-thema h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 26px; letter-spacing: -0.01em; line-height: 1.05; }
.team-themas .team-thema h3 { font-family: 'Instrument Serif', serif !important; font-weight: 400 !important; font-size: 26px !important; letter-spacing: -0.01em; }

/* Thema's-pagina in workshopstijl: drie families, elk met een eigen kleur */
.themas__familie + .themas__familie { margin-top: clamp(40px, 4vw, 64px); }
.themas__fam-naam { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; margin: 0 0 20px; }
.themas__fam-naam::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--fam); }
.themas__familie--groen { --fam: var(--groen); }
.themas__familie--terra { --fam: var(--terra); }
.themas__familie--blauw { --fam: var(--blauw); }
.themas__familie .themas__grid > .thema { border-top: 3px solid var(--fam); padding-top: 18px; }
.themas__familie .thema__plan { text-decoration-color: var(--fam); }
.themas__familie .thema__vraag { border-left-color: var(--fam); }
@media (min-width: 1100px) { .themas__familie .themas__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.themas__familie .themas__grid { display: grid !important; gap: 32px clamp(20px, 2.4vw, 36px); }
.themas__familie .themas__grid > .thema { width: auto !important; max-width: none !important; }

/* Thema's op de telefoon: per familie een rij om opzij te vegen */
@media (max-width: 699px) {
  .themas__familie .themas__grid { display: grid !important; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scroll-padding: 0 var(--gutter); }
  .themas__familie .themas__grid::-webkit-scrollbar { display: none; }
  .themas__familie .themas__grid > .thema { scroll-snap-align: start; background: var(--wit, #fff); padding: 18px 18px 20px !important; }
  .themas__familie .themas__fam-naam::after { content: "→"; margin-left: auto; letter-spacing: 0; opacity: 0.5; }
  .themas__familie .themas__fam-naam { display: flex; }
}
@media (max-width: 699px) { .team-feiten2 > div > span:first-child { white-space: nowrap; padding-right: 16px; } }
/* Teamuitje: thema's in de kleur van hun familie, zoals op de Thema's-pagina */
.team-thema--groen { border-top-color: var(--groen); }
.team-thema--terra { border-top-color: var(--terra); }
.team-thema--blauw { border-top-color: var(--blauw); }
/* Kleuren horen bij de workshops; thema's krijgen één rustige zwarte lijn */
.themas__familie { --fam: var(--zwart); }
.themas__familie .thema__plan { text-decoration-color: var(--blauw); }
.team-themas .team-thema { border-top-color: var(--zwart); }

/* Missie onder het portret: klein en rustig */
.over__portret .over__mission { background: none !important; padding: 14px 0 0 !important; margin: 0 !important; border-top: 1px solid rgba(27, 25, 23, 0.25); font-family: 'Instrument Serif', serif; font-style: italic; font-size: 17px !important; line-height: 1.45 !important; color: var(--muted) !important; max-width: 40ch; }
.over__portret .over__mission { border-top: 0 !important; padding-top: 12px !important; }
.over__duo { margin-left: auto !important; margin-right: auto !important; width: 100%; }
/* Zoeken als vergrootglas in de menubalk, op elk scherm */
.nav .nav__search { display: inline-flex !important; width: 38px !important; height: 38px; padding: 0 !important; }
.nav .nav__search-label { display: none !important; }
.nav__links > a.nav__links-search { display: none !important; }
@media (max-width: 899px) { .nav .nav__search { width: 30px !important; height: 34px; } .nav__right { gap: 6px !important; } }
@media (max-width: 400px) { .nav__logo { font-size: 15px !important; } .nav { gap: 10px !important; } .nav__toggle { padding-left: 11px !important; padding-right: 11px !important; } }
/* Gekozen dag die al geweest is: donkere tekst op het blauw, net als andere gekozen dagen */
.kal__grid--rij .kal__dag.is-geweest.is-gekozen .kal__num, .kal__grid--rij .kal__dag.is-geweest.is-gekozen .kal__rnaam { color: #1B1917 !important; opacity: 1 !important; }
.kal__grid--rij .kal__dag.is-geweest.is-gekozen .kal__rmnd { color: rgba(27, 25, 23, 0.65) !important; opacity: 1 !important; }
.kal__grid--rij .kal__dag.is-geweest.is-gekozen .kal__marks, .kal__grid--rij .kal__dag.is-geweest.is-gekozen .kal__marks > * { color: #1B1917 !important; opacity: 1 !important; }
/* Portaal: de slotzinnen na het welkom, elk op een eigen regel, zacht en gecentreerd */
.kal__legend-uitleg.is-portaal .portaal__slot { display: block; text-align: center; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 17px; line-height: 1.5; color: #F3DCA8; }
.kal__legend-uitleg.is-portaal .portaal__welkom + .portaal__slot { margin-top: 12px; }

/* ---------- Het portaal als magisch briefje: perkament, inkt en een lakzegel ---------- */
.kal__legend-uitleg.is-portaal {
  max-width: 540px; margin-left: auto; margin-right: auto;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 250, 236, 0.9), rgba(255, 250, 236, 0) 70%),
    radial-gradient(ellipse at 0% 0%, rgba(150, 110, 60, 0.18), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(150, 110, 60, 0.22), transparent 50%),
    repeating-linear-gradient(0deg, rgba(120, 90, 50, 0.025) 0 2px, transparent 2px 5px),
    #EFE2C4 !important;
  color: #3B2A1C !important;
  padding: 34px clamp(22px, 5vw, 44px) 64px !important;
  border-radius: 3px !important;
  box-shadow: inset 0 0 0 1px rgba(140, 100, 50, 0.35), inset 0 0 0 6px #EFE2C4, inset 0 0 0 7px rgba(140, 100, 50, 0.25), 0 18px 40px rgba(27, 25, 23, 0.22), 0 2px 6px rgba(27, 25, 23, 0.12) !important;
  transform-origin: 50% 0;
  animation: brief-open 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both !important;
  overflow: visible !important;
}
@keyframes brief-open { from { opacity: 0; transform: perspective(900px) rotateX(-70deg) scaleY(0.4) rotate(-0.6deg); } to { opacity: 1; transform: perspective(900px) rotateX(0) scaleY(1) rotate(-0.6deg); } }
/* Lakzegel onderaan */
.kal__legend-uitleg.is-portaal::after {
  content: ""; position: absolute; left: 50%; bottom: -22px; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #B5483F, #7E2620 60%, #5E1A16);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.08), inset 0 0 0 7px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(27, 25, 23, 0.35);
  opacity: 0; animation: brief-zegel 0.6s ease 5.6s forwards;
}
@keyframes brief-zegel { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: scale(1); } }
.kal__legend-uitleg.is-portaal .portaal__sterren i { background: #B8903F !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg { filter: none !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg path, .kal__legend-uitleg.is-portaal .portaal__kaart svg .spiral-white { stroke: #6B4A2B !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg .spiral-eye { fill: #7E2620 !important; }
.kal__legend-uitleg.is-portaal .portaal__open { color: #3B2A1C !important; font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(24px, 2.4vw, 30px) !important; text-shadow: none !important; }
.kal__legend-uitleg.is-portaal .portaal__zin { font-family: 'Instrument Serif', serif; font-size: 18px; line-height: 1.55; color: #3B2A1C; }
.kal__legend-uitleg.is-portaal .portaal__boodschap { color: #7E2620 !important; text-align: center; }
.kal__legend-uitleg.is-portaal .portaal__welkom { color: #6B4A2B !important; border-top-color: rgba(107, 74, 43, 0.35) !important; }
.kal__legend-uitleg.is-portaal .portaal__slot { color: #7E2620 !important; font-size: 19px; }
@media (prefers-reduced-motion: reduce) { .kal__legend-uitleg.is-portaal { animation: none !important; transform: rotate(-0.6deg); } .kal__legend-uitleg.is-portaal::after { animation: none; opacity: 1; } }

/* Briefje: de spiraal als een klein orakelkaartje, zwart met gouden rand en fonkelende sterren */
.kal__legend-uitleg.is-portaal .portaal__kaart { width: 104px; height: 140px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; background: #1B1917; border-radius: 4px; box-shadow: inset 0 0 0 6px #1B1917, inset 0 0 0 7px rgba(200, 179, 153, 0.9), inset 0 0 0 9px #1B1917, inset 0 0 0 10px rgba(200, 179, 153, 0.35), 0 10px 22px rgba(27, 25, 23, 0.35); transform: rotate(2deg); }
.kal__legend-uitleg.is-portaal .portaal__kaart svg { width: 74px !important; filter: drop-shadow(0 0 6px rgba(243, 220, 168, 0.35)) !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg path:first-of-type { stroke: #C8B399 !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg .spiral-ink { stroke: #C8B399 !important; opacity: 0.5 !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg .spiral-white { stroke: #FFFFFF !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg .spiral-eye { fill: #C8B399 !important; stroke: none !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg .twinkle { opacity: 0; fill: #F3DCA8; animation: kaart-fonkel 2s ease-in-out infinite !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg .twinkle--white { fill: #FFF6E6; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg .twinkle:nth-of-type(3n) { animation-delay: 0.6s !important; animation-duration: 2.4s !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg .twinkle:nth-of-type(3n+1) { animation-delay: 1.2s !important; animation-duration: 1.8s !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg .twinkle:nth-of-type(4n) { animation-delay: 1.7s !important; }
@media (prefers-reduced-motion: reduce) { .kal__legend-uitleg.is-portaal .portaal__kaart svg .twinkle { animation: none !important; opacity: 0.8; } }
.kal__legend-uitleg.is-portaal .portaal__kaart { width: 128px; height: 172px; } .kal__legend-uitleg.is-portaal .portaal__kaart svg { width: 92px !important; }
.kal__legend-uitleg.is-portaal { text-align: center; }
/* Briefje: geen kaartje, alleen de spiraal, in goud met fonkelende sterren */
.kal__legend-uitleg.is-portaal .portaal__kaart { width: auto; height: auto; background: none; box-shadow: none; transform: none; border-radius: 0; margin: 0 auto 14px; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg { width: 104px !important; filter: drop-shadow(0 0 8px rgba(214, 178, 110, 0.55)) !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg path:first-of-type { stroke: #A8803A !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg .spiral-ink { stroke: #6B4A2B !important; opacity: 0.45 !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg .spiral-white { stroke: #FFF8E8 !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg .spiral-eye { fill: #7E2620 !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg .twinkle, .kal__legend-uitleg.is-portaal .portaal__kaart svg .twinkle--white { fill: #B8903F; }
/* Briefje op Reena's perkament: hoeken en randen blijven heel, het midden rekt mee */
.kal__legend-uitleg.is-portaal {
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
  border-style: solid; border-color: transparent;
  border-width: 88px 38px 78px 38px;
  
  padding: 0 clamp(4px, 2vw, 18px) 8px !important;
  filter: drop-shadow(0 14px 18px rgba(27, 25, 23, 0.18));
}
.kal__legend-uitleg.is-portaal::after { bottom: 6px; }
.kal__legend-uitleg.is-portaal .portaal__kaart { margin-top: -54px; }
.kal__legend-uitleg.is-portaal::after { bottom: -62px !important; } .kal__legend-uitleg.is-portaal { padding-bottom: 24px !important; }
/* Briefje iets kleiner: blad en tekst */
.kal__legend-uitleg.is-portaal { max-width: 420px; border-width: 70px 30px 62px 30px; }
.kal__legend-uitleg.is-portaal .portaal__kaart { margin-top: -42px; margin-bottom: 10px; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg { width: 78px !important; }
.kal__legend-uitleg.is-portaal .portaal__open { font-size: clamp(19px, 1.9vw, 23px) !important; margin-bottom: 8px; }
.kal__legend-uitleg.is-portaal .portaal__zin { font-size: 15px; line-height: 1.5; }
.kal__legend-uitleg.is-portaal .portaal__boodschap { font-size: 10px; margin: 10px 0 4px; }
.kal__legend-uitleg.is-portaal .portaal__welkom { font-size: 11px !important; margin-top: 16px !important; padding-top: 12px; }
.kal__legend-uitleg.is-portaal .portaal__slot { font-size: 16px; }
.kal__legend-uitleg.is-portaal::after { width: 44px; height: 44px; margin-left: -22px; bottom: -50px !important; }
/* De spiraal geeft licht: een warme gouden gloed die zacht ademt */
.kal__legend-uitleg.is-portaal .portaal__kaart { position: relative; }
.kal__legend-uitleg.is-portaal .portaal__kaart::before { content: ""; position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 150, 0.85) 0%, rgba(255, 214, 120, 0.45) 35%, rgba(255, 214, 120, 0) 70%); animation: spiraal-licht 3.2s ease-in-out infinite; pointer-events: none; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg { position: relative !important; filter: drop-shadow(0 0 4px rgba(255, 220, 140, 0.95)) drop-shadow(0 0 12px rgba(240, 190, 90, 0.7)) !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg path:first-of-type { stroke: #C99A45 !important; }
@keyframes spiraal-licht { 0%, 100% { opacity: 0.55; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .kal__legend-uitleg.is-portaal .portaal__kaart::before { animation: none; opacity: 0.8; } }
/* Geen schaduwkader om het blad; zwarte lijn in de spiraal voor meer tekening */
.kal__legend-uitleg.is-portaal { filter: none !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart svg .spiral-ink { stroke: #1B1917 !important; opacity: 0.9 !important; stroke-width: 1.2 !important; }
/* Briefje op zwart: donker venster, perkament erin, spiraal midden bovenaan op het blad */
.kal__legend-uitleg.is-portaal {
  background: #1B1917 !important; border: 0 !important; border-image: none !important; border-radius: 6px !important;
  max-width: 480px; padding: 120px 72px 108px !important; position: relative;
}
.kal__legend-uitleg.is-portaal::before {
  content: ""; position: absolute; top: 26px; right: 26px; bottom: 26px; left: 26px; z-index: 0; pointer-events: none;
  border-style: solid; border-color: transparent; border-width: 70px 30px 62px 30px;
  
}
.kal__legend-uitleg.is-portaal > * { position: relative; z-index: 1; }
.kal__legend-uitleg.is-portaal > .portaal__sterren { position: absolute; z-index: 1; }
.kal__legend-uitleg.is-portaal .portaal__kaart { margin: -28px auto 12px !important; }
.kal__legend-uitleg.is-portaal::after { z-index: 2; bottom: 34px !important; }
.kal__legend-uitleg.is-portaal .portaal__sterren i { background: #F3DCA8 !important; }
@media (max-width: 520px) { .kal__legend-uitleg.is-portaal { padding: 112px 54px 100px !important; } .kal__legend-uitleg.is-portaal::before { top: 18px; right: 14px; bottom: 18px; left: 14px; } .kal__legend-uitleg.is-portaal::after { bottom: 26px !important; } }
/* Toch wit rond het blad; het blad als één afbeelding (geen naden) */
.kal__legend-uitleg.is-portaal { background: transparent !important; }
.kal__legend-uitleg.is-portaal::before { border: 0 !important; border-image: none !important;  }
/* Blad weer weg: terug naar het zachte perkament-briefje in CSS (kleiner, spiraal lichtgevend) */
.kal__legend-uitleg.is-portaal {
  max-width: 420px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 250, 236, 0.9), rgba(255, 250, 236, 0) 70%),
    radial-gradient(ellipse at 0% 0%, rgba(150, 110, 60, 0.18), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(150, 110, 60, 0.22), transparent 50%),
    repeating-linear-gradient(0deg, rgba(120, 90, 50, 0.025) 0 2px, transparent 2px 5px),
    #EFE2C4 !important;
  border: 0 !important; border-image: none !important; border-radius: 3px !important;
  padding: 28px clamp(20px, 4vw, 34px) 52px !important;
  box-shadow: inset 0 0 0 1px rgba(140, 100, 50, 0.35), inset 0 0 0 6px #EFE2C4, inset 0 0 0 7px rgba(140, 100, 50, 0.25), 0 18px 40px rgba(27, 25, 23, 0.22), 0 2px 6px rgba(27, 25, 23, 0.12) !important;
}
.kal__legend-uitleg.is-portaal::before { display: none !important; }
.kal__legend-uitleg.is-portaal .portaal__kaart { margin: 0 auto 10px !important; }
.kal__legend-uitleg.is-portaal::after { bottom: -20px !important; }
@media (max-width: 520px) { .kal__legend-uitleg.is-portaal { padding: 26px 18px 48px !important; } .kal__legend-uitleg.is-portaal::after { bottom: -20px !important; } }
.kal__legend-uitleg.is-portaal .portaal__kaart svg { position: relative !important; top: auto !important; right: auto !important; left: auto !important; margin: 0 auto !important; width: 78px !important; height: auto !important; opacity: 1 !important; justify-self: center !important; align-self: center !important; }
/* Briefje op de telefoon: smaller en compacter, als een klein briefje in je hand */
@media (max-width: 520px) {
  .kal__legend-uitleg.is-portaal { max-width: 84%; padding: 22px 16px 42px !important; }
  .kal__legend-uitleg.is-portaal .portaal__kaart svg { width: 60px !important; }
  .kal__legend-uitleg.is-portaal .portaal__kaart::before { width: 92px; height: 92px; margin: -46px 0 0 -46px; }
  .kal__legend-uitleg.is-portaal .portaal__open { font-size: 18px !important; margin-bottom: 6px; }
  .kal__legend-uitleg.is-portaal .portaal__zin { font-size: 13.5px; line-height: 1.45; }
  .kal__legend-uitleg.is-portaal .portaal__boodschap { font-size: 9px; margin: 8px 0 3px; }
  .kal__legend-uitleg.is-portaal .portaal__welkom { font-size: 10px !important; margin-top: 12px !important; padding-top: 10px; letter-spacing: 0.22em; }
  .kal__legend-uitleg.is-portaal .portaal__slot { font-size: 14.5px; }
  .kal__legend-uitleg.is-portaal::after { width: 36px; height: 36px; margin-left: -18px; bottom: -16px !important; }
}
@media (max-width: 520px) { .kal__legend-uitleg.is-portaal { max-width: 90%; padding: 20px 14px 40px !important; } .kal__legend-uitleg.is-portaal .portaal__zin { font-size: 13px; line-height: 1.4; } .kal__legend-uitleg.is-portaal .portaal__kaart svg { width: 52px !important; } .kal__legend-uitleg.is-portaal .portaal__kaart { margin-bottom: 6px !important; } }
/* Meer lucht tussen de knop en de regel over de gratis kennismaking */
.cover__actions + .cover__deal { margin-top: 4px !important; }
@media (min-width: 900px) { .cover__actions + .cover__deal { text-align: left !important; } }
/* Signatuur onderin de footer */
.footer__maker { margin-left: auto; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 15px; letter-spacing: 0; }
@media (max-width: 600px) { .footer__maker { margin-left: 0; flex-basis: 100%; } }
/* Signatuur in dezelfde duidelijke letter als de rest van de onderste regel */
.footer__maker { font-family: inherit !important; font-style: normal !important; font-size: inherit !important; }
.hp-ws__themas { margin: 26px 0 0; font-size: 16px; }
/* Over: link naar het hele verhaal, kleiner en in blauw */
#over a.arrow-link[href*="verhaal-hoe-het-begon"] { font-size: 15px; color: #4F7FC7; text-decoration-color: #A9C6F3; white-space: nowrap; }
#over a.arrow-link[href*="verhaal-hoe-het-begon"]:hover { color: #2F5EA8; }
/* Missie onder het portret: klein label, sierlijke zin */
.over__portret .over__mission { font-family: 'Instrument Serif', serif !important; font-style: italic !important; font-size: 21px !important; line-height: 1.3 !important; color: var(--zwart) !important; opacity: 1 !important; padding-top: 14px !important; }
.over__mission-label { display: block; margin-bottom: 6px; font-family: 'Instrument Sans', sans-serif; font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
/* Missiezin in de duidelijke letter */
.over__portret .over__mission { font-family: 'Instrument Sans', sans-serif !important; font-style: normal !important; font-size: 17px !important; line-height: 1.5 !important; font-weight: 500; }
.over__portret .over__mission { font-size: 15px !important; }
/* Homepage: de kernbelofte met de blauwe markeerstreep van de titel */
.hp-why__mark { background: linear-gradient(transparent 60%, var(--blauw) 60%, var(--blauw) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 2px; }
.hp-why__mark { background: linear-gradient(transparent 38%, rgba(169, 198, 243, 0.75) 38%, rgba(169, 198, 243, 0.75) 96%, transparent 96%) !important; }
.hp-why__mark { background: var(--blauw) !important; padding: 1px 3px; }
/* Openingszin van "Waarom bewegen én schilderen?" als kopje in de sierlijke letter */
.hp-why__text .hp-why__opening { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.01em; color: var(--zwart); }
.hp-why .hp-why__text p.hp-why__opening { font-family: "Instrument Serif", serif !important; font-weight: 400 !important; font-size: clamp(24px, 2.2vw, 30px) !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; color: var(--zwart) !important; }
/* Reena bovenaan haar verhaal */
.hp-why__text .hp-why__door { margin: 0 0 18px; padding-top: 0; border-top: 0; }
/* Link onder 'Door Reena' */
.byline .byline__meer { margin-top: 3px; font-size: 13px; color: #4F7FC7; text-decoration: underline; text-decoration-color: #A9C6F3; text-underline-offset: 3px; }
.byline:hover .byline__meer { color: #2F5EA8; }
/* Tijdlijn: het verloop van een sessie */
.tijdlijn__lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tijdlijn__lijst li { display: grid; grid-template-columns: 96px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.tijdlijn__tijd { font-family: 'Instrument Serif', serif; font-size: 22px; line-height: 1.2; color: var(--zwart); }
.tijdlijn__stap { display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.5; }
.tijdlijn__stap strong { font-weight: 600; }
.tijdlijn__stap span { color: var(--muted); }
.tijdlijn__slot { margin: 18px 0 0; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 20px; }
.tijdlijn__intro { color: var(--muted); }
.tijdlijn__extra { margin-top: 28px; }
@media (max-width: 600px) { .tijdlijn__lijst li { grid-template-columns: 72px 1fr; gap: 14px; } .tijdlijn__tijd { font-size: 19px; } }
/* Teamuitje: zakelijke prijzen per persoon */
.team-prijzen thead th { font-size: 12px; letter-spacing: 0.06em; text-transform: none; vertical-align: bottom; }
.team-prijzen td { text-align: right; white-space: nowrap; }
@media (max-width: 600px) { .team-prijzen thead th { font-size: 11px; } .team-prijzen th[scope="row"] { white-space: nowrap; } }
.team-prijzen thead th:not(:first-child) { text-align: right !important; } .team-prijzen thead th i.team-stip { margin-right: 6px; }
.team-prijzen thead th { padding-right: 0 !important; padding-left: 12px !important; } .team-prijzen thead th:first-child { padding-left: 0 !important; } .team-prijzen td { padding-left: 12px; }
@media (max-width: 600px) { .team-prijzen td { font-size: 21px !important; padding-left: 6px !important; } .team-prijzen th[scope="row"] { font-size: 13px !important; } .team-prijzen thead th { font-size: 10px !important; padding-left: 6px !important; letter-spacing: 0 !important; } .team-prijzen thead th i.team-stip { display: block; margin: 0 0 4px auto; } }
.team-intro-rechts { text-align: right; }
.tijdlijn__lijst li.tijdlijn__totaal { border-top: 1px solid var(--zwart); border-bottom: 0; margin-top: -1px; } .tijdlijn__totaal .tijdlijn__tijd { font-weight: 600; }
/* Over: Ons team */
.team-ons { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.team-ons__kop { margin: 0; }
.team-ons__lid { display: grid; grid-template-columns: 120px 1fr; gap: 28px; padding: 32px 0; border-top: 1px solid rgba(27,25,23,.18); }
.team-ons__lid:last-child { border-bottom: 1px solid rgba(27,25,23,.18); }
.team-ons__info { display: flex; flex-direction: column; gap: 8px; }
.team-ons__foto { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; display: block; }
.team-ons__rol { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.team-ons__naam { margin: 0; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.05; }
.team-ons__tekst { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 52ch; }
.team-ons__link { align-self: flex-start; margin-top: 4px; font-size: 15px; color: #4F7FC7; text-decoration-color: #A9C6F3; }
@media (max-width: 760px) {
  .team-ons { grid-template-columns: 1fr; gap: 24px; }
  .team-ons__lid { grid-template-columns: 84px 1fr; gap: 18px; padding: 24px 0; }
  .team-ons__foto { width: 84px; height: 84px; }
}

/* Over: regeltje bovenaan naar het team */
.team-link { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-bottom: 20px; font-size: 14px; color: var(--muted); text-decoration: none; }
.team-link:hover .team-link__tekst { color: #4F7FC7; }
.team-link__fotos { display: inline-flex; }
.team-link__fotos img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; display: block; }
.team-link__fotos img + img { margin-left: -8px; }
.team-link__tekst { border-bottom: 1px solid rgba(27,25,23,.25); padding-bottom: 1px; }

.byline .byline__missie { margin-top: 6px; font-family: 'Instrument Sans', sans-serif; font-style: normal; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink); max-width: 34ch; }
.byline .byline__missie::before { content: "\201C"; } .byline .byline__missie::after { content: "\201D"; }

/* Vlinders & Flowers (concept) */
.vf { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 96px); }
.vf__kop { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vf__vlinder { width: 80px; height: auto; display: block; margin-bottom: 4px; }
.vf__label { margin: 0; font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.vf__titel { margin: 0; }
.vf__lead { margin: 0; font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; color: var(--ink); }
.vf__verhaal { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.vf__verhaal p { margin: 0; font-size: 19px; line-height: 1.7; }
.vf__duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 32px); max-width: 880px; margin: 0 auto; width: 100%; }
.vf__duo figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.vf__duo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; display: block; }
.vf__duo figcaption { font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.vf__quote { margin: 0 auto; max-width: 760px; text-align: center; font-family: 'Instrument Serif', serif; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.2; color: var(--ink); }
.vf__avond { display: flex; flex-direction: column; gap: 32px; }
.vf__stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.vf__stappen li { border-top: 1px solid var(--ink); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.vf__nr { font-size: 12px; letter-spacing: 0.2em; color: var(--muted); }
.vf .vf__stappen h3 { margin: 0; font-family: 'Instrument Serif', serif !important; font-weight: 400 !important; font-size: 34px !important; letter-spacing: 0 !important; }
.vf__stappen p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.vf__praktisch { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.vf__praktisch p { font-size: 17px; line-height: 1.65; margin: 16px 0 0; }
.vf__feiten { list-style: none; margin: 0; padding: 0; }
.vf__feiten li { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(27,25,23,.18); font-size: 16px; }
.vf__feiten li:first-child { border-top: 1px solid rgba(27,25,23,.18); }
.vf__feiten span { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.vf__tuin { background: #fff; padding: clamp(32px, 5vw, 56px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.vf__tuin p { margin: 0 0 8px; max-width: 520px; font-size: 17px; line-height: 1.65; }
@media (max-width: 760px) {
  .vf__stappen, .vf__praktisch { grid-template-columns: 1fr; }
  .vf__feiten li { grid-template-columns: 110px 1fr; }
}
.vf__slot { margin: 8px 0 0; text-align: center; font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(22px, 2.4vw, 28px); color: var(--ink); }
.vf-hero-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vw, 20px); width: 100%; align-self: center; }
.vf-hero-duo figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.vf-hero-duo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.vf-hero-duo figcaption { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
/* Vlinders & Flowers: eigen kleur oudroze (zoals Reena's sjaal op het strand) */
:root { --roze: #E2B4AC; --roze-mid: rgba(226, 180, 172, 0.7); }
.q-kern--roze { background: var(--roze) !important; }
mark.todo--roze { background: var(--roze); }

.vf-form { background: var(--creme); color: var(--ink); padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 18px; }
.vf-form .field { display: flex; flex-direction: column; gap: 6px; }
.vf-form .field[hidden], .vf-form__knop[hidden] { display: none; }
.vf-form textarea.input { resize: vertical; min-height: 90px; font: inherit; }
.vf-form__knop { align-self: flex-start; }
.vf-form__dank { margin: 0; font-family: 'Instrument Serif', serif; font-size: 26px; line-height: 1.25; }
.vf-tip { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "label label label" "naam tekst meer"; gap: 6px 24px; align-items: baseline; margin-top: 24px; padding: 22px 26px; background: var(--roze-mid); color: var(--ink); text-decoration: none; }
.vf-tip__label { grid-area: label; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.vf-tip__naam { grid-area: naam; font-family: 'Instrument Serif', serif; font-size: 28px; }
.vf-tip__tekst { grid-area: tekst; font-size: 15px; }
.vf-tip__meer { grid-area: meer; font-size: 15px; }
@media (max-width: 700px) { .vf-tip { grid-template-columns: 1fr; grid-template-areas: "label" "naam" "tekst" "meer"; } }
.vf-meer { align-self: flex-start; font-size: 14px; color: #4F7FC7; text-decoration-color: #A9C6F3; }

.vf-wa { background: var(--creme); color: var(--ink); padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.cta .vf-wa .vf-wa__titel { margin: 0; font-family: 'Instrument Serif', serif !important; font-size: 34px !important; line-height: 1.1; color: var(--ink) !important; }
.cta .vf-wa .vf-wa__tekst { color: var(--ink) !important; margin: 0 0 6px; font-size: 17px; line-height: 1.6; max-width: 46ch; }
.vf-wa__mail { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.vf-wa__mail a { color: #4F7FC7; text-decoration-color: #A9C6F3; }

.vf-aanmeld { display: flex; flex-direction: column; gap: 0; align-items: stretch; width: 100%; }
.vf-aanmeld > * { width: 100%; box-sizing: border-box; max-width: none !important; }
.cta .vf-aanmeld .vf-of { margin: 0; padding: 22px clamp(28px, 4vw, 44px) 0; background: var(--creme); color: var(--muted) !important; font-size: 14px; border-top: 1px solid rgba(27,25,23,.15); }
.vf-aanmeld .vf-form { padding-top: 14px; }

.vf-duet { position: relative; width: clamp(110px, 11vw, 150px); margin: clamp(32px, 5vw, 64px) 0 0 clamp(40px, 6vw, 90px); }
.vf-duet__bloem { width: 100%; height: auto; display: block; filter: none !important; -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 14%); mask-image: linear-gradient(to left, transparent 0%, #000 14%); }
.vf-duet__vlinder { position: absolute; width: 38%; height: auto; top: -8%; left: -32%; transform: rotate(-16deg); filter: none !important; animation: vf-fladder 6s ease-in-out infinite; }
@keyframes vf-fladder { 0%, 100% { transform: translate(0, 0) rotate(-16deg); } 50% { transform: translate(6px, -8px) rotate(-10deg); } }
@media (prefers-reduced-motion: reduce) { .vf-duet__vlinder { animation: none; } }
@media (max-width: 760px) { .vf-duet { width: 105px; margin: 24px auto 0; } }

/* De Tuin: de bloem groeit uit het aanmeldblok */
.vf-aanmeld { position: relative; }
.vf-wa { position: relative; padding-right: clamp(110px, 12vw, 150px) !important; }
.vf-groei { position: absolute; right: clamp(16px, 2.5vw, 32px); bottom: -2px; width: clamp(72px, 7vw, 96px); pointer-events: none; z-index: 1; }
.vf-groei__bloem { display: block; width: 100%; height: auto; filter: none !important; -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 14%); mask-image: linear-gradient(to left, transparent 0%, #000 14%); }
.vf-groei__vlinder { position: absolute; width: 46%; top: -6%; left: -48%; transform: rotate(-16deg); filter: none !important; animation: vf-fladder 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .vf-groei__vlinder { animation: none; } }
.vf-groei__bloem { transform-origin: 30% 100%; animation: vf-adem 5.5s ease-in-out infinite; }
@keyframes vf-adem { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .vf-groei__bloem { animation: none; } }
@media (max-width: 760px) { .vf-groei__vlinder { top: -34%; left: -20%; } }
.vf-groei__vlinder { height: auto !important; }
.vf-link { color: #4F7FC7; text-decoration: underline; text-decoration-color: #A9C6F3; text-underline-offset: 3px; }
/* Vlinder en bloem bewegen zachtjes naar elkaar toe */
.vf-groei__vlinder { animation: vf-naar-bloem 8s ease-in-out infinite !important; }
.vf-groei__bloem { animation: vf-naar-vlinder 8s ease-in-out infinite !important; }
@keyframes vf-naar-bloem { 0%, 100% { transform: translate(0, 0) rotate(-16deg); } 50% { transform: translate(7px, 4px) rotate(-12deg); } }
@keyframes vf-naar-vlinder { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.025) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .vf-groei__vlinder, .vf-groei__bloem { animation: none !important; } }
/* Wind en vleugels: de bloem wiegt in de wind, de vlinder fladdert in de lucht */
.vf-groei__bloem { transform: none !important; transform-origin: 30% 100%; animation: vf-wind 7s ease-in-out infinite !important; }
@keyframes vf-wind { 0%, 100% { rotate: 0deg; } 20% { rotate: -2.2deg; } 45% { rotate: 0.8deg; } 70% { rotate: -1.4deg; } 85% { rotate: 0.4deg; } }
.vf-groei__vlinder { transform: none !important; rotate: -14deg; animation: vf-zweef 9s ease-in-out infinite, vf-vleugels 3.2s ease-in-out infinite !important; }
@keyframes vf-zweef { 0%, 100% { translate: 0 0; } 25% { translate: 6px -6px; } 50% { translate: 10px 2px; } 75% { translate: 3px 5px; } }
@keyframes vf-vleugels { 0%, 40%, 100% { scale: 1 1; } 8% { scale: 0.62 1; } 16% { scale: 1 1; } 24% { scale: 0.7 1; } 32% { scale: 1 1; } }
@media (prefers-reduced-motion: reduce) { .vf-groei__vlinder, .vf-groei__bloem { animation: none !important; } }

/* Taalkeuze onderaan */
.footer__langs { display: inline-flex; gap: 14px; }
.footer__langs a { text-decoration: none; opacity: 0.7; }
.footer__langs a[aria-current="true"] { opacity: 1; font-weight: 600; text-decoration: underline; text-decoration-color: var(--blauw); text-underline-offset: 4px; }

/* Taalknop bovenin: wereldbolletje + taal voluit (telefoon: kort) */
.nav__lang { display: inline-flex; align-items: center; gap: 6px; width: auto !important; padding: 0 10px; white-space: nowrap; }
.nav__lang-globe { flex: none; }
.nav__lang-kort { display: none; }
@media (max-width: 600px) { .nav__lang-lang { display: none; } .nav__lang-kort { display: inline; } .nav__lang { padding: 0 6px; } }
.tuin-en { font-size: 0.5em; opacity: 0.65; letter-spacing: 0.02em; white-space: nowrap; }
.tuin-en { display: block; margin-top: 4px; font-size: 0.45em; }
.cover__tag { display: inline-block; margin-left: 8px; padding: 2px 7px 1px; background: var(--roze); color: var(--ink); font-family: 'Instrument Sans', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; vertical-align: middle; border-radius: 2px; }
.vf-uitleg { display: block; margin-top: 10px; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 0.32em; letter-spacing: 0; color: var(--muted); }

/* Vlinders & Flowers: praktische info als rustige kaart */
.vf-info { margin: 0; background: #fff; padding: clamp(24px, 3.5vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
.vf-info > div { border-top: 1px solid rgba(27,25,23,.14); padding-top: 14px; }
.vf-info dt { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.vf-info dd { margin: 0; font-family: 'Instrument Serif', serif; font-size: 23px; line-height: 1.2; color: var(--ink); }
.vf-info small { display: block; margin-top: 6px; font-family: 'Instrument Sans', sans-serif; font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (max-width: 600px) { .vf-info { grid-template-columns: 1fr; gap: 20px; } }
.vf-uitleg { font-family: 'Instrument Sans', sans-serif !important; font-style: normal !important; font-size: 14px !important; letter-spacing: 0.02em !important; margin-top: 12px !important; }

/* Telefoon: bloem en vlinder rechtsboven bij de kop, zodat de WhatsApp-knop vrij blijft */
@media (max-width: 760px) {
  .vf-wa { padding-right: clamp(24px, 6vw, 40px) !important; padding-top: 34px !important; }
  .vf-groei { top: 14px; bottom: auto; right: 18px; width: 58px; }
  .vf-groei__vlinder { top: 4% !important; left: -62% !important; width: 52% !important; }
  .cta .vf-wa .vf-wa__titel { padding-right: 90px; }
}
@media (max-width: 760px) { .vf-groei { width: 46px !important; top: 10px !important; } }

/* Een plukje gras bij de bloem, zodat ze ergens uit groeit */
.vf-groei__gras { position: absolute; left: -45%; bottom: -3px; width: 170%; height: 32%; transform-origin: 50% 100%; animation: vf-gras 7s ease-in-out infinite; pointer-events: none; }
@keyframes vf-gras { 0%, 100% { transform: skewX(0deg); } 25% { transform: skewX(-4deg); } 55% { transform: skewX(2deg); } 80% { transform: skewX(-2deg); } }
@media (prefers-reduced-motion: reduce) { .vf-groei__gras { animation: none; } }

/* Grasrand over de hele lijn onder De Tuin; de bloem groeit eruit */
.vf-wa::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 13px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%2016%22%20width%3D%22120%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M0.7%2C16%20Q2.3%2C9.4%204.9%2C5.0%20Q3.2%2C9.4%203.1%2C16%20Z%22%20fill%3D%22%23879470%22/%3E%3Cpath%20d%3D%22M5.7%2C16%20Q7.0%2C11.4%209.0%2C8.3%20Q8.0%2C11.4%208.0%2C16%20Z%22%20fill%3D%22%23879470%22/%3E%3Cpath%20d%3D%22M9.7%2C16%20Q9.9%2C11.9%209.3%2C9.2%20Q10.7%2C11.9%2011.7%2C16%20Z%22%20fill%3D%22%238E9B76%22/%3E%3Cpath%20d%3D%22M12.9%2C16%20Q13.6%2C10.3%2013.9%2C6.4%20Q14.7%2C10.3%2015.6%2C16%20Z%22%20fill%3D%22%239EAA86%22/%3E%3Cpath%20d%3D%22M17.4%2C16%20Q17.0%2C7.9%2015.2%2C2.5%20Q17.7%2C7.9%2019.2%2C16%20Z%22%20fill%3D%22%239EAA86%22/%3E%3Cpath%20d%3D%22M21.0%2C16%20Q21.4%2C8.2%2021.0%2C3.0%20Q22.4%2C8.2%2023.5%2C16%20Z%22%20fill%3D%22%239EAA86%22/%3E%3Cpath%20d%3D%22M24.7%2C16%20Q25.5%2C8.9%2026.0%2C4.2%20Q26.6%2C8.9%2027.3%2C16%20Z%22%20fill%3D%22%23A8B391%22/%3E%3Cpath%20d%3D%22M28.9%2C16%20Q29.9%2C10.2%2030.7%2C6.3%20Q31.1%2C10.2%2031.8%2C16%20Z%22%20fill%3D%22%238E9B76%22/%3E%3Cpath%20d%3D%22M33.4%2C16%20Q33.5%2C10.7%2032.6%2C7.2%20Q34.4%2C10.7%2035.6%2C16%20Z%22%20fill%3D%22%238E9B76%22/%3E%3Cpath%20d%3D%22M37.1%2C16%20Q36.9%2C11.8%2035.4%2C9.0%20Q37.8%2C11.8%2039.2%2C16%20Z%22%20fill%3D%22%238E9B76%22/%3E%3Cpath%20d%3D%22M42.1%2C16%20Q41.6%2C7.8%2039.6%2C2.4%20Q42.5%2C7.8%2044.1%2C16%20Z%22%20fill%3D%22%238E9B76%22/%3E%3Cpath%20d%3D%22M45.0%2C16%20Q45.3%2C7.1%2045.2%2C1.2%20Q46.1%2C7.1%2046.9%2C16%20Z%22%20fill%3D%22%239EAA86%22/%3E%3Cpath%20d%3D%22M49.6%2C16%20Q49.4%2C10.9%2047.8%2C7.6%20Q50.2%2C10.9%2051.8%2C16%20Z%22%20fill%3D%22%23A8B391%22/%3E%3Cpath%20d%3D%22M53.7%2C16%20Q53.7%2C11.8%2052.8%2C8.9%20Q54.5%2C11.8%2055.6%2C16%20Z%22%20fill%3D%22%238E9B76%22/%3E%3Cpath%20d%3D%22M56.9%2C16%20Q57.9%2C9.8%2059.2%2C5.6%20Q58.7%2C9.8%2058.9%2C16%20Z%22%20fill%3D%22%23879470%22/%3E%3Cpath%20d%3D%22M60.0%2C16%20Q60.0%2C8.4%2058.7%2C3.4%20Q61.0%2C8.4%2062.5%2C16%20Z%22%20fill%3D%22%238E9B76%22/%3E%3Cpath%20d%3D%22M64.3%2C16%20Q64.1%2C7.1%2062.3%2C1.1%20Q65.3%2C7.1%2067.2%2C16%20Z%22%20fill%3D%22%23879470%22/%3E%3Cpath%20d%3D%22M68.4%2C16%20Q68.5%2C7.6%2067.5%2C2.0%20Q69.4%2C7.6%2070.7%2C16%20Z%22%20fill%3D%22%23879470%22/%3E%3Cpath%20d%3D%22M73.3%2C16%20Q75.0%2C11.9%2077.8%2C9.1%20Q75.8%2C11.9%2075.4%2C16%20Z%22%20fill%3D%22%237F8B68%22/%3E%3Cpath%20d%3D%22M75.7%2C16%20Q77.1%2C9.1%2079.1%2C4.5%20Q78.0%2C9.1%2078.0%2C16%20Z%22%20fill%3D%22%238E9B76%22/%3E%3Cpath%20d%3D%22M79.8%2C16%20Q80.0%2C9.3%2079.2%2C4.8%20Q81.0%2C9.3%2082.3%2C16%20Z%22%20fill%3D%22%237F8B68%22/%3E%3Cpath%20d%3D%22M84.9%2C16%20Q85.9%2C11.7%2086.9%2C8.9%20Q87.0%2C11.7%2087.7%2C16%20Z%22%20fill%3D%22%239EAA86%22/%3E%3Cpath%20d%3D%22M89.4%2C16%20Q89.6%2C11.4%2088.5%2C8.4%20Q90.7%2C11.4%2092.3%2C16%20Z%22%20fill%3D%22%23879470%22/%3E%3Cpath%20d%3D%22M91.9%2C16%20Q93.3%2C11.4%2095.1%2C8.3%20Q94.5%2C11.4%2094.9%2C16%20Z%22%20fill%3D%22%239EAA86%22/%3E%3Cpath%20d%3D%22M97.5%2C16%20Q98.0%2C10.3%2098.3%2C6.5%20Q98.8%2C10.3%2099.4%2C16%20Z%22%20fill%3D%22%238E9B76%22/%3E%3Cpath%20d%3D%22M100.0%2C16%20Q101.6%2C12.2%20104.3%2C9.7%20Q102.4%2C12.2%20102.1%2C16%20Z%22%20fill%3D%22%23A8B391%22/%3E%3Cpath%20d%3D%22M104.3%2C16%20Q105.2%2C8.0%20106.1%2C2.6%20Q106.0%2C8.0%20106.5%2C16%20Z%22%20fill%3D%22%239EAA86%22/%3E%3Cpath%20d%3D%22M109.8%2C16%20Q109.8%2C7.1%20108.4%2C1.2%20Q110.7%2C7.1%20112.2%2C16%20Z%22%20fill%3D%22%23879470%22/%3E%3Cpath%20d%3D%22M113.3%2C16%20Q114.7%2C10.9%20117.2%2C7.5%20Q115.6%2C10.9%20115.3%2C16%20Z%22%20fill%3D%22%238E9B76%22/%3E%3Cpath%20d%3D%22M116.0%2C16%20Q116.1%2C10.2%20115.2%2C6.3%20Q116.8%2C10.2%20117.9%2C16%20Z%22%20fill%3D%22%237F8B68%22/%3E%3C/svg%3E") repeat-x left bottom / auto 13px; opacity: 0.85; pointer-events: none; }
/* Telefoon: bloem groeit onder de knop uit de grasrand */
@media (max-width: 760px) {
  .vf-wa { padding-bottom: 84px !important; padding-top: clamp(24px, 6vw, 40px) !important; }
  .vf-groei { top: auto !important; bottom: -2px !important; right: 26px !important; width: 50px !important; }
  .cta .vf-wa .vf-wa__titel { padding-right: 0 !important; }
}

/* Grasrand iets hoger, groener en voller */
.vf-wa::after { height: 19px !important; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%2020%22%20width%3D%22120%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22M-0.9%2C20%20Q0.2%2C10.6%201.5%2C4.4%20Q1.3%2C10.6%201.7%2C20%20Z%22%20fill%3D%22%238FA872%22/%3E%3Cpath%20d%3D%22M3.5%2C20%20Q5.3%2C12.1%208.3%2C6.8%20Q6.2%2C12.1%205.8%2C20%20Z%22%20fill%3D%22%2386A06A%22/%3E%3Cpath%20d%3D%22M4.6%2C20%20Q5.2%2C15.2%205.0%2C12.0%20Q6.3%2C15.2%207.4%2C20%20Z%22%20fill%3D%22%237E9663%22/%3E%3Cpath%20d%3D%22M7.1%2C20%20Q9.0%2C10.2%2012.0%2C3.7%20Q10.2%2C10.2%2010.1%2C20%20Z%22%20fill%3D%22%239DB37F%22/%3E%3Cpath%20d%3D%22M11.5%2C20%20Q13.2%2C10.3%2015.9%2C3.9%20Q14.4%2C10.3%2014.3%2C20%20Z%22%20fill%3D%22%237E9663%22/%3E%3Cpath%20d%3D%22M14.1%2C20%20Q15.5%2C11.6%2017.1%2C6.1%20Q16.6%2C11.6%2017.0%2C20%20Z%22%20fill%3D%22%236F8756%22/%3E%3Cpath%20d%3D%22M15.1%2C20%20Q15.0%2C10.3%2013.3%2C3.8%20Q16.3%2C10.3%2018.2%2C20%20Z%22%20fill%3D%22%237E9663%22/%3E%3Cpath%20d%3D%22M18.8%2C20%20Q19.3%2C11.6%2018.9%2C5.9%20Q20.3%2C11.6%2021.5%2C20%20Z%22%20fill%3D%22%238FA872%22/%3E%3Cpath%20d%3D%22M22.2%2C20%20Q23.6%2C12.1%2025.9%2C6.8%20Q24.5%2C12.1%2024.3%2C20%20Z%22%20fill%3D%22%238FA872%22/%3E%3Cpath%20d%3D%22M23.7%2C20%20Q25.6%2C8.8%2028.4%2C1.3%20Q26.8%2C8.8%2026.8%2C20%20Z%22%20fill%3D%22%2386A06A%22/%3E%3Cpath%20d%3D%22M28.0%2C20%20Q29.0%2C14.7%2029.9%2C11.2%20Q30.1%2C14.7%2030.8%2C20%20Z%22%20fill%3D%22%239DB37F%22/%3E%3Cpath%20d%3D%22M29.4%2C20%20Q31.1%2C9.1%2033.8%2C1.8%20Q32.2%2C9.1%2032.0%2C20%20Z%22%20fill%3D%22%236F8756%22/%3E%3Cpath%20d%3D%22M33.5%2C20%20Q33.8%2C11.9%2033.4%2C6.5%20Q34.9%2C11.9%2036.2%2C20%20Z%22%20fill%3D%22%236F8756%22/%3E%3Cpath%20d%3D%22M34.2%2C20%20Q35.7%2C14.6%2037.6%2C11.0%20Q37.1%2C14.6%2037.6%2C20%20Z%22%20fill%3D%22%239DB37F%22/%3E%3Cpath%20d%3D%22M37.2%2C20%20Q38.3%2C14.7%2039.4%2C11.2%20Q39.4%2C14.7%2040.0%2C20%20Z%22%20fill%3D%22%2386A06A%22/%3E%3Cpath%20d%3D%22M41.3%2C20%20Q42.3%2C11.5%2043.4%2C5.9%20Q43.2%2C11.5%2043.6%2C20%20Z%22%20fill%3D%22%238FA872%22/%3E%3Cpath%20d%3D%22M43.7%2C20%20Q44.2%2C9.7%2043.9%2C2.8%20Q45.4%2C9.7%2046.8%2C20%20Z%22%20fill%3D%22%236F8756%22/%3E%3Cpath%20d%3D%22M46.2%2C20%20Q47.9%2C14.1%2050.7%2C10.1%20Q48.8%2C14.1%2048.4%2C20%20Z%22%20fill%3D%22%239DB37F%22/%3E%3Cpath%20d%3D%22M48.6%2C20%20Q50.0%2C10.7%2051.7%2C4.5%20Q51.3%2C10.7%2051.9%2C20%20Z%22%20fill%3D%22%238FA872%22/%3E%3Cpath%20d%3D%22M51.7%2C20%20Q53.6%2C8.7%2056.8%2C1.1%20Q54.8%2C8.7%2054.5%2C20%20Z%22%20fill%3D%22%236F8756%22/%3E%3Cpath%20d%3D%22M54.4%2C20%20Q54.7%2C12.7%2054.0%2C7.9%20Q56.0%2C12.7%2057.6%2C20%20Z%22%20fill%3D%22%238FA872%22/%3E%3Cpath%20d%3D%22M57.3%2C20%20Q58.0%2C12.3%2058.1%2C7.2%20Q59.2%2C12.3%2060.4%2C20%20Z%22%20fill%3D%22%237E9663%22/%3E%3Cpath%20d%3D%22M60.9%2C20%20Q61.0%2C14.9%2060.2%2C11.4%20Q62.0%2C14.9%2063.3%2C20%20Z%22%20fill%3D%22%239DB37F%22/%3E%3Cpath%20d%3D%22M62.3%2C20%20Q64.1%2C12.6%2066.8%2C7.7%20Q65.3%2C12.6%2065.2%2C20%20Z%22%20fill%3D%22%238FA872%22/%3E%3Cpath%20d%3D%22M66.7%2C20%20Q67.3%2C10.3%2067.7%2C3.8%20Q68.3%2C10.3%2069.0%2C20%20Z%22%20fill%3D%22%2386A06A%22/%3E%3Cpath%20d%3D%22M68.9%2C20%20Q70.9%2C12.0%2074.1%2C6.7%20Q72.2%2C12.0%2072.1%2C20%20Z%22%20fill%3D%22%236F8756%22/%3E%3Cpath%20d%3D%22M71.7%2C20%20Q72.8%2C9.4%2073.8%2C2.3%20Q73.8%2C9.4%2074.3%2C20%20Z%22%20fill%3D%22%2386A06A%22/%3E%3Cpath%20d%3D%22M74.6%2C20%20Q74.5%2C12.1%2073.1%2C6.8%20Q75.7%2C12.1%2077.4%2C20%20Z%22%20fill%3D%22%238FA872%22/%3E%3Cpath%20d%3D%22M76.8%2C20%20Q78.3%2C15.1%2080.0%2C11.9%20Q79.6%2C15.1%2080.2%2C20%20Z%22%20fill%3D%22%237E9663%22/%3E%3Cpath%20d%3D%22M78.7%2C20%20Q79.1%2C13.0%2078.3%2C8.4%20Q80.4%2C13.0%2082.0%2C20%20Z%22%20fill%3D%22%239DB37F%22/%3E%3Cpath%20d%3D%22M81.4%2C20%20Q83.5%2C12.5%2086.7%2C7.5%20Q84.8%2C12.5%2084.7%2C20%20Z%22%20fill%3D%22%238FA872%22/%3E%3Cpath%20d%3D%22M84.2%2C20%20Q84.3%2C12.6%2083.1%2C7.6%20Q85.4%2C12.6%2087.1%2C20%20Z%22%20fill%3D%22%238FA872%22/%3E%3Cpath%20d%3D%22M87.0%2C20%20Q87.2%2C14.4%2086.5%2C10.7%20Q88.2%2C14.4%2089.4%2C20%20Z%22%20fill%3D%22%236F8756%22/%3E%3Cpath%20d%3D%22M90.4%2C20%20Q91.4%2C9.3%2092.5%2C2.2%20Q92.3%2C9.3%2092.7%2C20%20Z%22%20fill%3D%22%239DB37F%22/%3E%3Cpath%20d%3D%22M92.5%2C20%20Q94.0%2C10.3%2096.0%2C3.8%20Q95.1%2C10.3%2095.4%2C20%20Z%22%20fill%3D%22%2386A06A%22/%3E%3Cpath%20d%3D%22M96.9%2C20%20Q98.2%2C10.1%20100.2%2C3.5%20Q99.0%2C10.1%2098.9%2C20%20Z%22%20fill%3D%22%239DB37F%22/%3E%3Cpath%20d%3D%22M99.1%2C20%20Q100.2%2C12.6%20101.2%2C7.6%20Q101.5%2C12.6%20102.3%2C20%20Z%22%20fill%3D%22%238FA872%22/%3E%3Cpath%20d%3D%22M101.3%2C20%20Q101.4%2C10.6%20100.8%2C4.3%20Q102.3%2C10.6%20103.3%2C20%20Z%22%20fill%3D%22%239DB37F%22/%3E%3Cpath%20d%3D%22M103.3%2C20%20Q105.4%2C10.4%20108.8%2C4.0%20Q106.7%2C10.4%20106.5%2C20%20Z%22%20fill%3D%22%2386A06A%22/%3E%3Cpath%20d%3D%22M107.2%2C20%20Q107.9%2C11.4%20108.6%2C5.7%20Q108.8%2C11.4%20109.3%2C20%20Z%22%20fill%3D%22%2386A06A%22/%3E%3Cpath%20d%3D%22M109.9%2C20%20Q110.4%2C8.8%20109.9%2C1.4%20Q111.6%2C8.8%20112.9%2C20%20Z%22%20fill%3D%22%2386A06A%22/%3E%3Cpath%20d%3D%22M113.0%2C20%20Q114.0%2C13.9%20115.1%2C9.9%20Q115.0%2C13.9%20115.4%2C20%20Z%22%20fill%3D%22%238FA872%22/%3E%3Cpath%20d%3D%22M115.2%2C20%20Q117.0%2C13.1%20120.2%2C8.5%20Q117.9%2C13.1%20117.3%2C20%20Z%22%20fill%3D%22%237E9663%22/%3E%3Cpath%20d%3D%22M117.8%2C20%20Q119.6%2C11.1%20122.0%2C5.1%20Q120.9%2C11.1%20121.2%2C20%20Z%22%20fill%3D%22%2386A06A%22/%3E%3C/svg%3E") repeat-x left bottom / auto 19px !important; opacity: 1 !important; }
/* Bloem staat achter het gras: de rand ligt eroverheen */
.vf-wa::after { z-index: 2; }
.vf-groei { z-index: 1; bottom: -6px !important; }
.vf-groei { bottom: 4px !important; }

/* Een pol gras (zelfde kleuren als de rand) vóór de steel, zodat de bloem echt aansluit */
.vf-groei { bottom: 2px !important; }
.vf-groei__pol { position: absolute; z-index: 3; left: -38%; bottom: -4px; width: 95%; height: auto; pointer-events: none; }
.footer__maker a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.footer__maker a:hover { opacity: .7; }
/* V&F: gras weg, steel loopt zacht uit */
.vf-wa::after, .vf-groei__pol, .vf-groei__gras { display: none !important; }
.vf-groei { bottom: 0 !important; }
.vf-groei__bloem { -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 14%), linear-gradient(to top, transparent 0%, #000 34%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, transparent 0%, #000 14%), linear-gradient(to top, transparent 0%, #000 34%); mask-composite: intersect; }
/* V&F: bloem en vlinder natuurlijker, minder "geknipt" */
.vf-groei .vf-groei__bloem { filter: saturate(.86) contrast(.95) brightness(1.02) drop-shadow(2px 5px 5px rgba(70, 50, 30, .22)) !important; }
.vf-groei .vf-groei__vlinder { filter: saturate(.9) drop-shadow(1px 3px 3px rgba(70, 50, 30, .2)) !important; }

/* 29 okt 2026: labels op de zwart-witfoto's (Bewegen / Schilderen) zonder blauw vlak, gewoon witte letters */
.hp-why .hp-why__imgs figure figcaption, .hp-why .hp-why__imgs figure:first-child figcaption, .hp-why .hp-why__imgs figure:last-child figcaption, .over__duo figcaption {
  background: none !important; color: #fff !important; padding: 0 !important; left: 14px !important; bottom: 12px !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}