/* ==========================================================================
   Yvonne Baank — designsysteem & responsive styles
   Kleuren/typografie overgenomen uit het aangeleverde ontwerp.
   ========================================================================== */

/* ---- Fonts (zelf-gehost, variabel: één bestand dekt alle gewichten) ----- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-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;
}

/* ---- Themavariabelen op :root (donker = default) ------------------------ */
:root {
  --bg: #15120F;
  --headerBg: rgba(21, 18, 15, 0.72);
  --fg: #ECE4D8;
  --muted: #A99E8E;
  --cap: #8f8676;
  --accent: #C2A06B;
  --navline: rgba(236, 228, 216, 0.10);
  --portrait: #1E1A16;

  --primaryBg: #C2A06B;
  --primaryFg: #15120F;
  --primaryBd: #C2A06B;
  --primaryHover: #D4B57F;

  --secFg: #ECE4D8;
  --secBd: rgba(236, 228, 216, 0.28);
  --secHoverBd: rgba(194, 160, 107, 0.7);
  --secHoverFg: #C2A06B;

  --cardBg: #1E1A16;
  --cardBd: rgba(236, 228, 216, 0.10);
  --cardPanel: #15120F;
  --cardPanelBd: rgba(236, 228, 216, 0.08);
  --cardDivider: rgba(236, 228, 216, 0.10);

  --slotBd: rgba(236, 228, 216, 0.18);
  --avatarBg: #C2A06B;
  --avatarFg: #15120F;
  --inputBg: #1E1A16;
  --inputBd: rgba(236, 228, 216, 0.22);

  --frameShadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  --cardShadow: 0 18px 44px rgba(0, 0, 0, 0.30);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #F3ECE2;
  --headerBg: rgba(243, 236, 226, 0.72);
  --fg: #1E1813;
  --muted: #5f554a;
  --cap: #756a5b;
  --accent: #8a6433;
  --navline: rgba(30, 24, 19, 0.10);
  --portrait: #E7DCCD;

  --primaryBg: #1E1813;
  --primaryFg: #F3ECE2;
  --primaryBd: #1E1813;
  --primaryHover: #332a21;

  --secFg: #1E1813;
  --secBd: rgba(30, 24, 19, 0.30);
  --secHoverBd: #A37C46;
  --secHoverFg: #A37C46;

  --cardBg: #FFFFFF;
  --cardBd: rgba(30, 24, 19, 0.10);
  --cardPanel: #FAF5EC;
  --cardPanelBd: rgba(30, 24, 19, 0.08);
  --cardDivider: rgba(30, 24, 19, 0.10);

  --slotBd: rgba(30, 24, 19, 0.18);
  --avatarBg: #1E1813;
  --avatarFg: #F3ECE2;
  --inputBg: #FFFFFF;
  --inputBd: rgba(30, 24, 19, 0.22);

  --frameShadow: 0 24px 70px rgba(60, 45, 25, 0.14);
  --cardShadow: 0 18px 44px rgba(60, 45, 25, 0.10);

  color-scheme: light;
}

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

html { background: var(--bg); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Warme ambient-achtergrond (subtiele diepte, thema-bewust) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(194, 160, 107, 0.05), transparent 60%),
    radial-gradient(90% 60% at 50% 120%, rgba(147, 167, 187, 0.04), transparent 55%);
}
html[data-theme="light"] body::before {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(138, 100, 51, 0.05), transparent 60%),
    radial-gradient(90% 60% at 50% 120%, rgba(90, 110, 130, 0.035), transparent 55%);
}

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

a { color: inherit; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---- Eyebrow (label met lijntjes) -------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.eyebrow::before, .eyebrow .line {
  content: "";
  width: 28px; height: 1px;
  background: var(--accent);
  display: inline-block;
  flex: 0 0 auto;
}
.eyebrow--center { justify-content: center; }

/* ---- Knoppen ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: 1px;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
  min-height: 48px;
}
.btn--primary {
  color: var(--primaryFg);
  background: var(--primaryBg);
  border-color: var(--primaryBd);
}
.btn--primary:hover { background: var(--primaryHover); border-color: var(--primaryHover); }
.btn--secondary {
  color: var(--secFg);
  background: transparent;
  border-color: var(--secBd);
}
.btn--secondary:hover { border-color: var(--secHoverBd); color: var(--secHoverFg); }

/* ---- Header / navigatie ------------------------------------------------- */
.site-header {
  border-bottom: 1px solid transparent;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--headerBg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color .4s ease, background .4s ease;
}
.site-header.scrolled { border-bottom-color: var(--navline); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 84px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.nav__brand {
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nav__right { display: flex; align-items: center; gap: 12px; }

.nav__cta {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--secFg);
  background: transparent;
  text-decoration: none;
  font-weight: 600;
  padding: 11px 22px;
  border: 1px solid var(--secBd);
  border-radius: 1px;
  transition: background .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
.nav__cta:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* Rustige tekstlink in de nav (geen kader; voor secundaire pagina's zoals Tarieven) */
.nav__link {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  padding: 11px 10px;
  transition: color .25s;
  white-space: nowrap;
}
.nav__link:hover { color: var(--accent); }

/* Themaschakelaar (hitbox >= 44px) */
.theme-toggle {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--secBd);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: border-color .2s;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle__icon {
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--fg);
  background: linear-gradient(90deg, transparent 0 50%, var(--fg) 50% 100%);
}

/* Hamburger (verborgen op desktop) */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--secBd);
  border-radius: 1px;
  cursor: pointer;
  padding: 0;
}
.nav__toggle-bars, .nav__toggle-bars::before, .nav__toggle-bars::after {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--fg);
  position: relative;
  transition: transform .25s, opacity .2s;
}
.nav__toggle-bars::before { content: ""; position: absolute; top: -6px; left: 0; }
.nav__toggle-bars::after  { content: ""; position: absolute; top: 6px;  left: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---- Main wrapper ------------------------------------------------------- */
.main { flex: 1 1 auto; display: flex; flex-direction: column; position: relative; z-index: 1; }

/* Reveal-on-scroll (progressive enhancement; alleen actief met .js-vlag) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---- Hero (homepage) --------------------------------------------------- */
.hero {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: stretch;
  min-height: clamp(520px, 70vh, 760px);
}
.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* De hero loopt over de volle breedte, maar de tekst moet op hetzelfde raster
     staan als de header, de secties en de footer (.container: max 1200px + gutter).
     Daarom links dezelfde inspringing als .container in plaats van margin-left:auto.
     Let op: 100vw telt de schuifbalk mee, dus op Windows kan dit een paar pixels
     schelen; dat is verwaarloosbaar naast de 50 tot 80px die het eerst scheelde. */
  --heroInset: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(40px, 6vw, 72px) var(--heroInset);
  max-width: calc(var(--heroInset) + 632px + var(--gutter));
  margin-left: 0;
  width: 100%;
}
.hero__title {
  font-size: clamp(34px, 5.2vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 26px 0;
  max-width: 17ch;
}
.hero__lead {
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--fg);
  margin: 0 0 16px;
  max-width: 40ch;
}
.hero__body {
  font-size: clamp(15.5px, 1.9vw, 16.5px);
  line-height: 1.62;
  color: var(--muted);
  margin: 0 0 36px;
  max-width: 47ch;
}
.hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.hero__portrait {
  position: relative;
  background: var(--portrait);
  overflow: hidden;
}
.hero__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 80px 0 90px -40px var(--bg);
}

/* Statische portret-placeholder (geen upload) */
.portrait-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
  color: var(--cap);
}
.portrait-placeholder img,
.portrait-placeholder .portrait-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Portretfoto (transparante uitsnede) — volledige figuur, onderaan verankerd */
.portrait-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.portrait-placeholder__icon { width: 40px; height: 40px; opacity: 0.5; }
.portrait-placeholder__text {
  font-size: 13px;
  letter-spacing: 0.04em;
  max-width: 22ch;
}

/* ---- Generieke sectie -------------------------------------------------- */
.section {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: clamp(48px, 8vw, 88px) 0;
}
.section--center { text-align: center; justify-content: center; }
/* Boeking: bovenaan uitlijnen + compactere bovenruimte zodat de agenda hoog staat */
.section--booking {
  align-items: flex-start;
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(32px, 5vw, 56px);
}

/* ---- Boekingspagina ---------------------------------------------------- */
.booking {
  display: block;
  width: 100%;
}
.booking__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.booking__intro-aside { padding-bottom: 8px; }
.booking__intro .booking__lead { margin: 0; max-width: 46ch; }
.booking__title { font-size: clamp(34px, 4.4vw, 48px); line-height: 1.06; margin: 14px 0; max-width: 13ch; }
.booking__lead { font-size: clamp(16px, 2vw, 18px); line-height: 1.55; color: var(--muted); margin: 0 0 22px; max-width: 42ch; }
.booking__points { display: flex; flex-direction: column; gap: 14px; padding: 0; margin: 0; list-style: none; }
.booking__point { display: flex; align-items: center; gap: 13px; font-size: 15.5px; color: var(--fg); }
.booking__point::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: 0 0 auto;
}

/* Widget-container (klaar voor embed) */
.booking__widget {
  background: var(--cardBg);
  border: 1px solid var(--cardBd);
  border-radius: 5px;
  box-shadow: var(--cardShadow);
  overflow: hidden;
  min-height: 520px;
  display: block;
}
.booking__embed { width: 100%; min-height: 520px; border: 0; display: block; }
.booking__embed-mount { width: 100%; }
.booking__embed-mount iframe { width: 100%; border: 0; display: block; min-height: 560px; }
.widget-placeholder {
  text-align: center;
  padding: clamp(32px, 6vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.widget-placeholder__badge {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--avatarBg); color: var(--avatarFg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px; letter-spacing: 0.04em;
}
.widget-placeholder__title { font-family: var(--serif); font-size: 26px; color: var(--fg); }
.widget-placeholder__text { font-size: 14px; color: var(--muted); max-width: 34ch; }
.booking__note { font-size: 12.5px; color: var(--cap); margin: 14px 0 0; }

/* ---- Nieuwsbrief ------------------------------------------------------- */
.newsletter { max-width: 660px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.newsletter__title { font-size: clamp(38px, 6vw, 60px); line-height: 1.08; margin: 24px 0; max-width: 15ch; }
.newsletter__lead { font-size: clamp(17px, 2.4vw, 19px); line-height: 1.6; color: var(--muted); margin: 0 0 36px; max-width: 48ch; }

/* Knoppenrij (o.a. consult-pagina) */
.actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Ervaringsverhalen: korte citaten van cursisten, met hun voornaam eronder.
   Let op de .prose ervoor: dit blok staat binnen .prose, en .prose ul/li/p staan verderop in dit
   bestand met gelijke specificiteit. Zonder .prose winnen die en komt de naam dichter bij het
   VOLGENDE citaat te staan dan bij het eigen citaat. */
.prose .quotes { margin: 24px 0 28px; padding-left: 0; list-style: none; }
.prose .quotes li { margin: 0 0 22px; padding-left: 18px; border-left: 2px solid var(--accent); }
.prose .quotes li:last-child { margin-bottom: 0; }
.prose .quotes p { margin: 0 0 8px; font-style: italic; }
.prose .quotes cite { display: block; margin-top: 10px; font-style: normal; font-size: 14px; letter-spacing: 0.04em; color: var(--cap); }
.prose .quotes p:last-of-type { margin-bottom: 0; }

.signup-form { width: 100%; max-width: 520px; }
.signup-form__row { display: flex; gap: 12px; flex-wrap: wrap; }
.field { flex: 1 1 180px; display: flex; flex-direction: column; text-align: left; }
.field label { font-size: 12px; letter-spacing: 0.04em; color: var(--cap); margin-bottom: 6px; font-weight: 600; }
.input {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--fg);
  background: var(--inputBg);
  border: 1px solid var(--inputBd);
  border-radius: 1px;
  padding: 15px 16px;
  outline: none;
  transition: border-color .2s;
  min-height: 48px;
}
.input:focus { border-color: var(--accent); }
.signup-form .btn { width: 100%; margin-top: 14px; }

/* Honeypot — verborgen voor mensen, zichtbaar voor domme bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.consent {
  font-size: 13px;
  color: var(--cap);
  margin: 16px 0 0;
  line-height: 1.5;
  text-align: center;
}
.consent a { color: var(--accent); }

/* Form-meldingen */
.form-msg {
  width: 100%;
  max-width: 520px;
  margin: 18px auto 0;
  padding: 14px 16px;
  border-radius: 2px;
  font-size: 14.5px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.form-msg[hidden] { display: none; }
.form-msg--ok { color: var(--fg); border-color: var(--accent); background: rgba(194, 160, 107, 0.10); }
.form-msg--err { color: var(--fg); border-color: #c0563f; background: rgba(192, 86, 63, 0.10); }

/* Prominente bevestiging na inschrijven (het formulier is dan verborgen) */
.form-msg--success {
  text-align: center;
  font-size: 17px;
  line-height: 1.6;
  padding: 26px 22px;
  margin-top: 26px;
}
.form-msg--success::before {
  content: "\2713";
  display: block;
  font-size: 26px;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 10px;
}

/* ---- Prose (privacyverklaring) ----------------------------------------- */
.prose { max-width: 720px; margin: 0 auto; }
.prose h1 { font-size: clamp(34px, 5vw, 48px); line-height: 1.1; margin: 12px 0 8px; }
/* Koppen groter en met meer lucht erboven, zodat de pagina te scannen is in
   plaats van te lezen. De sprong van h2 naar tekst was te klein om als kop te
   werken; nu is er echt hiërarchie. */
.prose h2 {
  font-size: clamp(27px, 3.6vw, 38px);
  line-height: 1.15;
  margin: 56px 0 14px;
  color: var(--fg);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--sans);
  font-size: clamp(16px, 1.6vw, 18px);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.3;
  margin: 34px 0 8px;
  color: var(--accent);
}
.prose p, .prose li { color: var(--muted); font-size: 17px; line-height: 1.75; }
.prose p { margin: 0 0 16px; max-width: 66ch; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a { color: var(--accent); }
.prose ul { padding-left: 1.15em; margin: 0 0 20px; }
.prose li { margin-bottom: 10px; padding-left: 2px; }
.prose li::marker { color: var(--accent); }
.prose .lead { color: var(--fg); font-size: clamp(19px, 2vw, 21px); line-height: 1.6; }
.prose .back-link { margin-top: 32px; }

/* Form-melding die altijd zichtbaar is (no-JS bevestigingspagina) */
.form-msg--static { display: block; }

/* ---- Footer ------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--navline);
  padding: 36px 0;
  margin-top: auto;
  position: relative;
  z-index: 1;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-footer__brand {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 600;
}
.site-footer__meta { font-size: 13px; color: var(--cap); line-height: 1.7; }
.site-footer__meta a { color: var(--cap); text-decoration: none; }
.site-footer__meta a:hover { color: var(--accent); }
.site-footer__sep { opacity: 0.5; margin: 0 8px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tussenmaat: onder 1200px past het volledige menu alleen als de lucht tussen de
   items eruit gaat. Bewust padding en letterruimte, niet de tekengrootte: de links
   blijven even leesbaar, ze staan alleen dichter op elkaar. Gemeten in de browser:
   het menu gaat hiermee van 574px naar circa 485px. De ondergrens sluit aan op het
   hamburgerpunt hieronder (1000/1001), zodat de twee bereiken elkaar niet overlappen
   en er precies één nav-vorm per breedte geldt.
   LET OP: over-mij.html heeft een eigen inline kopie van deze nav-CSS. Wijzig je
   hier iets, wijzig het daar mee, anders springt de header van vorm tussen pagina's. */
@media (min-width: 1001px) and (max-width: 1200px) {
  .nav { gap: 12px; }
  .nav__right { gap: 10px; }
  .nav__link { padding-left: 5px; padding-right: 5px; letter-spacing: 0.01em; }
  .nav__cta { padding-left: 15px; padding-right: 15px; letter-spacing: 0.01em; }
}

/* Tablet en kleiner: nav wordt hamburger.
   1000 en niet 860: met de oude ruime padding paste het volledige menu pas vanaf
   1070px naast het 280px-logo, en tussen 861 en 1065 viel "Plan een consult" naar
   een tweede regel dwars over het logo heen. Met de compactere tussenmaat hierboven
   past het vanaf circa 975px, maar daar knijpt flexbox het menu al zichtbaar samen.
   Vandaar 1000: daaronder de hamburger, daarboven het volledige menu met minstens
   45px lucht naast het logo, en op een laptop van 1024px zelfs 67px. */
@media (max-width: 1000px) {
  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--navline);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    display: none;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu .nav__cta,
  .nav__menu .nav__link {
    border: none;
    border-bottom: 1px solid var(--navline);
    border-radius: 0;
    padding: 16px 0;
    text-align: left;
    font-size: 16px;
  }
  .nav__menu .nav__cta:hover { background: transparent; color: var(--accent); }
  .nav__toggle { display: inline-flex; }
}

/* Hero stapelt op tablet/mobiel: tekst boven, portret eronder */
@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero__text {
    margin: 0 auto;
    padding: clamp(40px, 9vw, 64px) var(--gutter);
    max-width: 760px;
    order: 1;
  }
  .hero__portrait {
    order: 2;
    min-height: clamp(320px, 60vw, 460px);
  }
  .hero__portrait::after { box-shadow: inset 0 80px 90px -40px var(--bg); }
  .hero__title, .hero__lead, .hero__body { max-width: none; }
  /* Gestapelde hero: het portret staat onder de tekst, dus de strook achter de
     webinarbanner heeft geen vlak meer om op aan te sluiten. */
  .webinar-banner::after { display: none; }
}

/* Boeking: op smal scherm de kop-kolommen stapelen */
@media (max-width: 720px) {
  .booking__intro { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .booking__intro-aside { padding-bottom: 0; }
  .booking__title, .booking__lead { max-width: none; }
}

/* Smal: verberg het tweede sierlijntje zodat de eyebrow netjes afbreekt */
@media (max-width: 600px) {
  .eyebrow .line { display: none; }
  /* Gecentreerde eyebrow: dan ook de linkerlijn weg, anders staat 'ie scheef */
  .eyebrow--center::before { display: none; }
}

/* Mobiel: knoppen vol breed, comfortabeler tikken */
@media (max-width: 480px) {
  .hero__actions, .actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn, .actions .btn { width: 100%; }
  .signup-form__row { flex-direction: column; }
  /* In kolom-modus mag flex-basis (180px) niet als hoogte gaan gelden */
  .signup-form__row .field { flex: 0 0 auto; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* Toegankelijkheid: respecteer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* Doorstuurblok op de bedankpagina: het kant-en-klare bericht moet er als een
   selecteerbaar tekstblok uitzien, ook voor wie het met de hand kopieert. */
.share-quote {
  margin: 1.25rem 0;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--accent, #b08d57);
  border-radius: 6px;
  background: rgba(127, 127, 127, .08);
  font-size: .97rem;
  line-height: 1.65;
  color: inherit;
}

/* Merklogo in de header. Twee bestanden: goud voor het donkere thema, donkerbruin
   voor het lichte. De wissel gaat via CSS en niet via JavaScript, zodat het
   anti-flash-script het thema al heeft gezet vóór de eerste paint en er dus geen
   verkeerde variant even oplicht. Zonder deze regels zouden beide zichtbaar zijn,
   dus de cachebuster van styles.css moet mee omhoog. */
.nav__brand { display: inline-flex; align-items: center; min-width: 0; }
/* Volle grootte: 280 x 42, precies zoals aangeleverd. Krimpt pas mee als het
   naast de knoppen niet meer past, want dan botst het met de hamburger. */
.nav__brand-logo { display: block; width: 280px; height: auto; max-width: 100%; }
[data-theme="dark"] .nav__brand-logo--light,
[data-theme="light"] .nav__brand-logo--dark { display: none; }
@media (max-width: 700px) { .nav__brand-logo { width: 220px; } }
@media (max-width: 480px) { .nav__brand-logo { width: 180px; } }

/* Actieve pagina in de nav. De gewone links staan op --muted; de pagina waar je
   nu bent wordt vet én lichter (--fg), zodat het verschil ook opvalt zonder dat
   je de kleuren naast elkaar ziet. De call-to-action krijgt zijn gevulde staat,
   dat leest als "je bent hier". */
.nav__link[aria-current="page"] {
  color: var(--fg);
  font-weight: 700;
}
.nav__cta[aria-current="page"] {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* Merk in de footer: alleen het monogram, niet de hele lockup. Die staat al in
   de header van dezelfde pagina; twee keer hetzelfde voegt niets toe. Het merk
   krijgt hier de herhaling die het nodig heeft (het is ook de favicon en straks
   haar avatar), terwijl de naam gewoon leesbaar blijft in het e-mailadres eronder
   en voor schermlezers via de verborgen tekst. */
a.site-footer__brand { display: inline-flex; align-items: center; text-decoration: none; border-radius: 2px; transition: opacity .2s; }
a.site-footer__brand:hover { opacity: .75; }
.site-footer__mark { display: block; height: 34px; width: auto; }
[data-theme="dark"] .site-footer__mark--light,
[data-theme="light"] .site-footer__mark--dark { display: none; }

/* De sierstreepjes om de eyebrow zijn gemaakt voor een GECENTREERD blok; daar
   omlijsten ze de tekst netjes. In een linkslijnend blok werkt dat niet: laat je
   ze staan, dan begint de tekst 44px naast de kop; haal je alleen het linker weg,
   dan hangt het rechter er los bij. Daarom in linkslijnende blokken geen streepjes,
   en lijnt de tekst exact uit met de kop eronder. Gecentreerd houdt ze wel. */
.eyebrow:not(.eyebrow--center) { justify-content: flex-start; }
.eyebrow:not(.eyebrow--center)::before,
.eyebrow:not(.eyebrow--center) .line { display: none; }

/* Werknotitie op een pagina die nog niet af is. Valt op, hoort er niet blijvend te staan. */
.nota {
  border-left: 3px solid var(--accent);
  background: rgba(194, 160, 107, .08);
  padding: 14px 18px;
  margin: 22px 0;
  font-size: .95rem;
  line-height: 1.6;
}
.nota strong { color: var(--accent); }

/* ---- Knoppen binnen .prose --------------------------------------------
   .prose a zet alle links op de accentkleur en wint van .btn--primary
   (0,1,1 tegen 0,1,0). Daardoor stond er goud op goud en was de knoptekst
   onzichtbaar. Hier expliciet terugzetten. */
.prose a.btn--primary { color: var(--primaryFg); }
.prose a.btn--secondary { color: var(--secFg); }
.prose a.btn--secondary:hover { color: var(--secHoverFg); }
.prose .actions { justify-content: flex-start; margin-top: 26px; }

/* ---- Opleidingspagina: inhoud met een meescrollend infoblok ------------ */
.yms-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.yms-aside { position: sticky; top: 100px; }
.yms-card {
  border: 1px solid var(--cardBd);
  background: var(--cardBg);
  box-shadow: var(--cardShadow);
  border-radius: 2px;
  padding: 26px 24px;
}
.yms-card__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cap);
  font-weight: 600;
  margin: 0 0 4px;
}
.yms-card__price {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1.05;
  color: var(--fg);
  margin: 0 0 2px;
}
.yms-card__sub { font-size: 13px; color: var(--cap); margin: 0 0 20px; }
.yms-card__list { list-style: none; margin: 0 0 22px; padding: 0; }
.yms-card__list li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--cardDivider); font-size: 14px;
}
.yms-card__list li:last-child { border-bottom: 0; }
.yms-card__label { color: var(--cap); flex: 0 0 auto; }
.yms-card__value { color: var(--fg); font-weight: 600; text-align: right; }
.yms-card .btn { width: 100%; margin-bottom: 10px; }
.yms-card__note { font-size: 12.5px; color: var(--cap); line-height: 1.55; margin: 14px 0 0; }
.yms-card__note a { color: var(--accent); }
.yms-card__hr { border: 0; border-top: 1px solid var(--cardDivider); margin: 20px 0; }

@media (max-width: 960px) {
  .yms-layout { grid-template-columns: 1fr; }
  .yms-aside { position: static; order: -1; }
  .yms-card { max-width: 460px; }
}

/* ---- Kop van de webinarpagina: tekst links, beeld rechts ---------------
   De kolommen zijn EXPRES identiek aan .yms-layout (1fr + 340px, zelfde gap).
   Daardoor staat het beeld precies boven het aanmeldblok en loopt de kop op
   dezelfde lijn als de tekst eronder. Wijzig je .yms-layout, wijzig dit mee. */
.yms-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.yms-hero__beeld img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  border: 1px solid var(--cardBd);
  box-shadow: var(--cardShadow);
}

/* Zelfde kantelpunt als .yms-layout, anders schuift het beeld weg onder de kaart. */
@media (max-width: 960px) {
  .yms-hero { grid-template-columns: 1fr; }
  /* Even breed als .yms-card hieronder, zodat kop, beeld en aanmeldblok
     op mobiel dezelfde linkerlijn en dezelfde breedte houden. */
  .yms-hero__beeld { max-width: 460px; }
}

/* Portret op de opleidingspagina. Bewust NIET .portrait-photo: die is
   position:absolute en hoort in de hero-container; buiten die context plakt
   hij aan het venster en schuift hij over de tekst. */
.yms-portret {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 2px;
  margin: 0 auto 10px;
}

/* Kop van de opleidingspagina: de merknaam groot, de gevoelsregel eronder. */
.yms-titel { font-size: clamp(40px, 6.5vw, 76px); line-height: 1.02; margin: 0 0 16px; }
.yms-subtitel {
  font-family: var(--serif);
  font-size: clamp(21px, 2.2vw, 24px);
  line-height: 1.4;
  color: var(--fg);
  margin: 0 0 22px;
  max-width: 22ch;
}

/* Datum en tijd van het webinar: dit is de kerninformatie van die pagina en
   stond eerst als gewone tekstregel tussen de alinea's. Nu groot in het blok. */
.yms-card__datum {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 38px);
  line-height: 1.05;
  color: var(--fg);
  margin: 2px 0 6px;
}
.yms-card__tijd {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 20px;
}
/* Het formulier zit in een smalle kolom; velden onder elkaar in plaats van naast elkaar. */
.yms-card .signup-form { max-width: none; }
.yms-card .signup-form__row { flex-direction: column; gap: 10px; }
/* .field heeft flex-basis 180px. Bij flex-direction:row is dat een breedte, maar zodra de rij
   naar column kantelt wordt het een HOOGTE, en dan groeit elk veld naar 180px met een gat onder
   het invoerveld. Dezelfde fix staat al bij de mobiele breakpoint; hij ontbrak alleen hier. */
.yms-card .signup-form__row .field { flex: 0 0 auto; }
.yms-card .signup-form .btn { width: 100%; margin-top: 14px; margin-bottom: 0; }

/* Kortere pagina's, zoals de bedankpagina. Twee dingen maakten het gat tussen
   de blokken groot: 88px padding aan beide kanten, én .section groeit mee
   (flex: 1 1 auto) zodat de hero op de homepage de hoogte kan vullen. Op een
   korte pagina rekt dat de tussenruimte extra op. Hier zetten we allebei uit. */
.section--tight { padding-top: clamp(16px, 2.5vw, 30px); padding-bottom: clamp(16px, 2.5vw, 30px); flex: 0 0 auto; }
.section--pb-sm { padding-bottom: clamp(16px, 2.5vw, 30px); flex: 0 0 auto; }
/* Tegenhanger van --pb-sm. Twee opeenvolgende .section's tellen hun padding bij
   elkaar op: 88 onder plus 88 boven is 176px gat. Met dit paar wordt dat 60px,
   net iets ruimer dan de 56px die de koppen binnen .prose onderling houden. */
.section--pt-sm { padding-top: clamp(16px, 2.5vw, 30px); flex: 0 0 auto; }

/* Tekstblok dat op dezelfde as staat als een gecentreerde sectie erboven.
   Het citaat blijft links: dat is bedoeld om te lezen en te kopiëren. */
.prose--center { text-align: center; }
.prose--center p, .prose--center h2 { margin-left: auto; margin-right: auto; }
.prose--center .share-quote { text-align: left; }
.prose--center .actions { justify-content: center; }

/* Kopieerknop in de hoek van het doorstuurbericht. Wordt door JavaScript
   aangemaakt, zodat er zonder script geen knop staat die niets doet. */
.share-quote-wrap { position: relative; }
.share-quote { padding-right: 116px; }
.share-copy {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
  color: var(--accent);
  background: var(--bg);
  border: 1px solid var(--secBd);
  border-radius: 2px;
  padding: 7px 11px;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.share-copy:hover { border-color: var(--accent); }
.share-copy.is-done {
  color: var(--primaryFg); background: var(--accent); border-color: var(--accent);
}
.share-copy svg { width: 13px; height: 13px; flex: 0 0 auto; }
@media (max-width: 560px) {
  .share-quote { padding-right: 16px; padding-top: 52px; }
  .share-copy { top: 10px; right: 10px; }
}

/* Uitgelicht instructieblok: een stap die de bezoeker echt moet zetten en die
   niet mag wegvallen in kleine, gedempte tekst. */
.uitleg {
  border: 1px solid var(--cardBd);
  background: var(--cardBg);
  border-radius: 2px;
  padding: 22px 24px;
  margin: 26px auto;
  max-width: 560px;
  font-size: clamp(17px, 1.9vw, 19px);
  line-height: 1.65;
  color: var(--fg);
  text-align: left;
}
.uitleg strong { color: var(--accent); }

/* ==========================================================================
   Tijdelijke webinarbanner (homepage) — Your Magical Soul, 25 augustus
   Goud op donker, in de lijn van de flyer die Yvonne op social zet. Hij mag
   opvallen zonder te schreeuwen: één gouden kader, een warme gloed en een paar
   sterretjes, verder gewoon het bestaande designsysteem (serif-kop, --accent,
   .btn--primary). Op 19 aug op verzoek van Yvonne een maat kleiner gezet: kleinere
   kop, medaillon en tekst, minder padding en een lichtere schaduw, zodat hij de hero
   niet meer wegdrukt. WEGHALEN NA 25 AUGUSTUS, samen met de <section> in index.html.
   ========================================================================== */
.webinar-banner {
  /* Lokale variabelen, zodat de lichte variant alleen deze regels overschrijft. */
  --wbPanel: linear-gradient(135deg, #221D18 0%, #15120F 58%, #1C1813 100%);
  --wbBd: rgba(194, 160, 107, 0.42);
  --wbGlowA: rgba(194, 160, 107, 0.16);
  --wbGlowB: rgba(194, 160, 107, 0.10);
  --wbHalo: 0 0 48px rgba(194, 160, 107, 0.10);
  --wbShadow: 0 16px 38px rgba(0, 0, 0, 0.26);
  --wbStar: #C2A06B;
  --wbTitle: #E9D6AE;
  --wbTint: rgba(194, 160, 107, 0.08);

  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  padding: clamp(10px, 1.4vw, 18px) 0 0;
}
html[data-theme="light"] .webinar-banner {
  --wbPanel: linear-gradient(135deg, #FFFFFF 0%, #FBF4E9 100%);
  --wbBd: rgba(163, 124, 70, 0.48);
  --wbGlowA: rgba(163, 124, 70, 0.13);
  --wbGlowB: rgba(163, 124, 70, 0.08);
  --wbHalo: 0 0 42px rgba(163, 124, 70, 0.08);
  --wbShadow: 0 14px 32px rgba(60, 45, 25, 0.09);
  --wbStar: #A37C46;
  --wbTitle: #6C4A1E;
  --wbTint: rgba(163, 124, 70, 0.07);
}

.webinar-banner__inner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "datum tekst cta";
  align-items: center;
  gap: clamp(16px, 2.1vw, 30px);
  padding: clamp(14px, 1.7vw, 20px) clamp(18px, 2.2vw, 26px);
  background: var(--wbPanel);
  border: 1px solid var(--wbBd);
  border-radius: 3px;
  box-shadow: var(--wbShadow), var(--wbHalo);
}
/* Het portretvlak van de hero (.hero__portrait) begint precies onder deze banner,
   en dat geeft een harde streep over de volle breedte. Deze strook trekt datzelfde
   vlak door tot onder de headerbalk, zodat de banner erop ligt in plaats van erboven.
   Breedte = de rechterkolom van .hero (1fr van 1.25fr + 1fr = 44,4444%), en het
   verloop aan de linkerkant is hetzelfde als .hero__portrait::after, zodat de twee
   vlakken in elkaar overlopen. Vervalt vanzelf samen met de banner. */
.webinar-banner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44.4444%;
  z-index: -1;
  background: var(--portrait);
  box-shadow: inset 80px 0 90px -40px var(--bg);
  pointer-events: none;
}

/* Warme gloed van linksboven naar rechtsonder, als het licht op de flyer. */
.webinar-banner__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 130% at 10% 0%, var(--wbGlowA), transparent 62%),
    radial-gradient(52% 130% at 92% 100%, var(--wbGlowB), transparent 60%);
}

/* ---- Sterretjes -------------------------------------------------------- */
.webinar-banner__sparkles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.webinar-banner__sparkles .wb-star {
  position: absolute;
  color: var(--wbStar);
  opacity: .3;
  /* Basiswaarde staat hier en niet alleen in de keyframes: bij
     prefers-reduced-motion wordt de animatie tot vrijwel nul teruggebracht en
     valt de ster terug op deze regels. */
}
/* De sterretjes horen in de marges, niet over de tekst: ze staan weliswaar
   achter de inhoud (z-index), maar een ster die tussen de letters doorpiept
   leest als een vlek. Vandaar alleen posities in de vier hoeken. */
.wb-star--1 { top: 14%;    left: 4.5%; width: 16px; height: 16px; animation: wb-twinkle 4.4s ease-in-out infinite; }
.wb-star--2 { bottom: 15%; left: 2.2%; width: 10px; height: 10px; animation: wb-twinkle 5.6s ease-in-out .8s infinite; }
.wb-star--3 { top: 10%;   right: 16%;  width: 12px; height: 12px; animation: wb-twinkle 6.2s ease-in-out 1.6s infinite; }
.wb-star--4 { bottom: 12%; right: 5%;  width: 18px; height: 18px; animation: wb-twinkle 5s   ease-in-out .4s infinite; }

@keyframes wb-twinkle {
  0%, 100% { opacity: .18; transform: scale(.82); }
  50%      { opacity: .72; transform: scale(1.14); }
}
/* De globale reduced-motion-reset zet de duur op vrijwel nul, maar de animatie
   loopt door en bevriest de ster op een willekeurige stand. Hier echt uitzetten,
   zodat hij terugvalt op de basisopacity hierboven. */
@media (prefers-reduced-motion: reduce) {
  .webinar-banner__sparkles .wb-star { animation: none; }
}

/* ---- Datum-medaillon --------------------------------------------------- */
.webinar-banner__datum {
  grid-area: datum;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: clamp(68px, 6.6vw, 82px);
  margin: 0;
  padding: 10px 8px;
  border: 1px solid var(--wbBd);
  border-radius: 2px;
  background: var(--wbTint);
}
.webinar-banner__dag,
.webinar-banner__maand {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.webinar-banner__nummer {
  font-family: var(--serif);
  font-size: clamp(30px, 3.2vw, 36px);
  line-height: 1;
  color: var(--fg);
}

/* ---- Tekst ------------------------------------------------------------- */
.webinar-banner__text { grid-area: tekst; position: relative; z-index: 1; }
.webinar-banner__eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 5px;
}
.webinar-banner__titel {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.5vw, 30px);
  line-height: 1.08;
  color: var(--wbTitle);
  margin: 0 0 6px;
}
.webinar-banner__body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 8px;
  max-width: 62ch;
}
.webinar-banner__meta {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--fg);
  margin: 0;
}
/* De spaties rond de punt staan in de TEKST zelf (index.html) en niet alleen in
   deze marge: een schermlezer leest marges niet, en dan werd "Zoom · gratis"
   voorgelezen als "Zoomgratis". Vandaar hier maar een kleine extra ruimte. */
.webinar-banner__sep { color: var(--accent); margin: 0 4px; }

/* ---- Knop -------------------------------------------------------------- */
.webinar-banner__cta {
  grid-area: cta;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.webinar-banner__cta .btn { white-space: nowrap; }
.webinar-banner__note {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--cap);
  text-align: center;
  margin: 0;
  max-width: 24ch;
  align-self: center;
}

/* Knop onder de tekst zodra de drie kolommen te krap worden. */
@media (max-width: 1040px) {
  .webinar-banner__inner {
    grid-template-columns: auto minmax(0, 1fr);
    /* De knop schuift onder de TEKST, niet onder het hele blok: zo staat hij op
       dezelfde lijn als de alinea en wordt hij geen gouden balk van 700px. */
    grid-template-areas:
      "datum tekst"
      ".     cta";
    gap: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 24px);
    align-items: start;
  }
  .webinar-banner__datum { align-self: start; }
  /* Het medaillon staat nu in de linkerbovenhoek, dus daar kan ster 1 niet meer
     staan; hij zakt naar de lege strook eronder en ster 2 vervalt (te dichtbij). */
  .wb-star--1 { top: auto; bottom: 11%; left: 3%; }
  .wb-star--2 { display: none; }
  .webinar-banner__cta { max-width: 340px; }
  .webinar-banner__cta .btn { width: 100%; }
  .webinar-banner__note { max-width: none; text-align: left; align-self: stretch; }
}

/* Zodra de knop onder de tekst staat en het blok smal wordt, kruipt de knop naar
   de rechteronderhoek en komt hij onder ster 4 te liggen. Die is dekkend goud,
   dus de ster verdwijnt er half achter en dat leest als een vlek op de knop. */
@media (max-width: 720px) {
  .wb-star--4 { display: none; }
}

/* Mobiel: het medaillon wordt een liggende datumregel, anders eet het de breedte op. */
@media (max-width: 560px) {
  .webinar-banner__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "datum"
      "tekst"
      "cta";
    gap: 13px;
  }
  .webinar-banner__datum {
    flex-direction: row;
    align-items: baseline;
    gap: 9px;
    width: auto;
    justify-self: start;
    padding: 7px 13px;
  }
  .webinar-banner__nummer { font-size: 26px; }
  .webinar-banner__cta { max-width: none; }
  /* Alles staat onder elkaar en over de volle breedte; de enige plek waar met
     zekerheid niets staat is rechts naast de datumpil. Onderin ligt de knop, en
     die is dekkend goud: een ster erachter is daar simpelweg onzichtbaar. */
  .wb-star--1 { top: 6%;  bottom: auto; left: auto; right: 6%;  width: 18px; height: 18px; }
  .wb-star--3 { top: 14%; right: 22%; width: 11px; height: 11px; display: block; }
  .wb-star--2, .wb-star--4 { display: none; }
}