/* ======================= Lokale lettertypes (zelf-gehost) =======================
   Vervangt Google Fonts: geen externe verbinding meer, dus geen IP naar Google.
   Bestanden in /fonts/. Bron: Fontsource (latin + latin-ext). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-wght-normal.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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-wght-normal.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: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-wght-italic.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: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-latin-ext-standard-normal.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: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-latin-standard-normal.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: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-latin-standard-italic.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-400-normal.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-500-normal.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-600-normal.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;
}

/* =========================================================================
   CVO Scala — Digitale fotografie 1 @home
   Moderne huisstijl — voorstel
   Concept: "Het belichtingshandboek" — koel daglicht + merkblauw,
   warme golden-hour accent, redactionele serif + monospace camera-uitlezing,
   beelden in een zoeker-kader met hoekmarkeringen.
   ========================================================================= */

/* ---- Design tokens ---------------------------------------------------- */
:root {
  /* Kleur */
  --ink:        #0e1f2b;   /* bijna-zwart, koel (camerabody) */
  --ink-2:      #42606f;   /* secundaire tekst */
  --ink-3:      #6f8593;   /* gedempt / bijschriften */
  --blue:       #0082c2;   /* merkkleur */
  --blue-600:   #0079b6;
  --blue-700:   #00608f;   /* links / hover op licht */
  --blue-900:   #073b54;   /* diepe "blauwe uur" tint */
  --amber:      #f0a429;   /* golden hour accent */
  --amber-700:  #b9791a;
  --amber-soft: #fcebcd;
  --paper:      #ffffff;
  --mist:       #f2f6f8;   /* koele sectie-achtergrond */
  --mist-2:     #e8eff3;
  --line:       #d9e2e8;   /* haarlijnen */
  --line-2:     #c4d2db;
  --success:    #15915f;

  /* Typografie */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Maatvoering */
  --container: 1180px;
  --pad-x: clamp(1.15rem, 4vw, 2.25rem);
  --section-y: clamp(3.25rem, 7vw, 6rem);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-frame: 6px;

  /* Schaduw */
  --shadow-1: 0 1px 2px rgba(14,31,43,.05), 0 6px 18px rgba(14,31,43,.06);
  --shadow-2: 0 2px 6px rgba(14,31,43,.06), 0 18px 40px rgba(14,31,43,.10);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset / base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-700); text-decoration: none; }
a:hover { color: var(--blue); }
strong { color: var(--ink); font-weight: 600; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; }

/* ---- Layout helpers --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.section { padding-block: var(--section-y); }
.section--mist { background: var(--mist); }
.section--tight { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }
.section--tutor { padding-block: clamp(1.25rem, 2.5vw, 2rem) clamp(.25rem, .75vw, .6rem); }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-700);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--blue-700);
  opacity: .7;
}

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.85rem, 3.6vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.section-head p { margin: 1rem 0 0; font-size: 1.1rem; max-width: 40rem; }

.lead { font-size: 1.15rem; color: var(--ink-2); }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: .95rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease),
              box-shadow .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,130,194,.28);
}
.btn--primary:hover { background: var(--blue-600); color: #fff; box-shadow: 0 12px 26px rgba(0,130,194,.34); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: rgba(14,31,43,.03); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { color: var(--ink); background: #f3f6f8; }
.btn--block { width: 100%; justify-content: center; }
.btn--lg { padding: 1.1rem 1.9rem; font-size: 1.05rem; }
.btn svg { width: 18px; height: 18px; }

/* ---- Chips / labels --------------------------------------------------- */
.chip {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: .42rem .7rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.chip .dot--amber { background: var(--amber); }
.chip .dot--green { background: var(--success); }

.badge-amber {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber-700);
  background: var(--amber-soft);
  border: 1px solid #f4d79a;
  padding: .4rem .7rem;
  border-radius: 999px;
}

/* ---- Zoeker-kader (signatuur) ----------------------------------------- */
.frame { position: relative; display: block; }
.frame > img,
.frame .frame__media { width: 100%; border-radius: var(--radius-frame); display: block; }
.frame .corner {
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.9);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
  z-index: 2;
  pointer-events: none;
}
.frame .corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.frame .corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.frame .corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.frame .corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
/* donkere variant voor lichte beelden */
.frame--ink .corner { border-color: rgba(14,31,43,.55); filter: none; }

.frame__hud {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .02em;
  color: #fff;
  background: rgba(14,31,43,.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  padding: .4rem .65rem;
  border-radius: 8px;
}
.frame__hud .rec { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

/* Play-knop op video-beelden */
.play {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
}
.play__btn {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.play:hover .play__btn { transform: scale(1.07); background: #fff; }
.play__btn::after {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--blue);
  margin-left: 5px;
}

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 6px 22px rgba(14,31,43,.10); }

/* --- Algemene balk (boven) --- */
.site-header__main { position: relative; z-index: 2; border-bottom: 1px solid var(--line); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: 74px;
}

.brand { display: inline-flex; align-items: center; flex: none; }
.brand__logo { height: 44px; width: auto; display: block; }

/* Hoofdmenu met dropdowns */
.site-nav { display: flex; align-items: center; gap: .25rem; }
.site-nav__link, .site-nav__btn {
  font: inherit; font-size: .96rem; font-weight: 500; color: var(--ink-2);
  background: none; border: 0; cursor: pointer;
  padding: .55rem .8rem; border-radius: 9px;
  display: inline-flex; align-items: center; gap: .3rem;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.site-nav__link:hover, .site-nav__btn:hover { color: var(--ink); background: var(--mist); }
.site-nav__btn .caret { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.has-menu.is-open .site-nav__btn { color: var(--ink); background: var(--mist); }
.has-menu.is-open .site-nav__btn .caret { transform: rotate(180deg); }

.site-nav__item { position: relative; }
.site-menu {
  position: absolute; top: calc(100% + .5rem); left: 0; min-width: 300px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-2); padding: .5rem; display: none; z-index: 20;
}
.has-menu.is-open .site-menu { display: block; animation: menuIn .16s var(--ease); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.site-menu a { display: block; padding: .55rem .7rem; border-radius: 9px; font-size: .92rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.site-menu a small { display: block; font-size: .76rem; font-weight: 400; color: var(--ink-3); margin-top: .1rem; }
.site-menu a:hover { background: var(--mist); color: var(--blue-700); }

/* Rechts: social + thema + hamburger */
.site-header__aside { display: flex; align-items: center; gap: .85rem; flex: none; }
.header-social { display: flex; align-items: center; gap: .3rem; }
.header-social a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); transition: color .15s var(--ease), background .15s var(--ease); }
.header-social a:hover { color: var(--blue); background: var(--mist); }
.header-social svg { width: 17px; height: 17px; }
.site-nav .header-social { display: none; }
.s-half { position: relative; display: inline-block; color: var(--line-2); }
.s-half::before { content: "\2605"; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: var(--amber); }

.nav-toggle {
  display: none; width: 42px; height: 42px;
  border: 1px solid var(--line-2); border-radius: 10px; background: transparent;
  cursor: pointer; align-items: center; justify-content: center; color: var(--ink);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span::after { transform: translateY(-6px) rotate(-45deg); }

/* --- Cursus-balk (onder de algemene balk) --- */
.course-bar { position: relative; z-index: 1; background: var(--mist); }
.course-bar__inner { display: flex; align-items: center; gap: 1.25rem; height: 54px; }
.course-bar__name { font-family: var(--serif); font-weight: 500; font-size: 1.08rem; color: var(--ink); white-space: nowrap; flex: none; }
.course-nav { display: flex; align-items: center; gap: 1.4rem; margin-right: auto; }
.course-nav a { font-size: .9rem; font-weight: 500; color: var(--ink-2); position: relative; padding: .3rem 0; white-space: nowrap; }
.course-nav a:hover { color: var(--ink); }
.course-nav a.is-active { color: var(--ink); }
.course-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--blue); border-radius: 2px; }
.course-bar__cta { flex: none; padding: .5rem 1rem; font-size: .9rem; }

/* --- Responsive: hamburger --- */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .1rem;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2); padding: .6rem var(--pad-x) 1rem; display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav__item { position: static; }
  .site-nav__link, .site-nav__btn { width: 100%; justify-content: space-between; padding: .75rem .2rem; font-size: 1rem; }
  .site-menu { position: static; min-width: 0; border: 0; box-shadow: none; border-radius: 0; padding: 0 0 .5rem .9rem; background: transparent; }
  .has-menu.is-open .site-menu { animation: none; }
}
@media (max-width: 760px) {
  .course-bar__name { display: none; }
  .course-bar__inner { height: 48px; gap: 1rem; }
  .course-nav { gap: 1.1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .course-nav::-webkit-scrollbar { display: none; }
  .course-bar__cta { padding: .45rem .85rem; font-size: .85rem; }
  .brand__logo { height: 40px; }
}

/* =========================================================================
   STATUSBALK
   ========================================================================= */
.statusbar {
  background: var(--blue);
  color: #fff;
  text-align: center;
  font-size: .98rem;
  padding: .7rem var(--pad-x);
}
.statusbar a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.statusbar strong { color: #fff; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.25rem, 5vw, 3.5rem); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__eyebrow { margin-bottom: 1.25rem; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.3rem, 5.4vw, 3.95rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  margin-bottom: 1.25rem;
}
.hero h1 em { font-style: italic; color: var(--blue-700); }
.hero__sub { font-size: 1.18rem; max-width: 34rem; margin-bottom: 1.75rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; margin-bottom: 1.5rem; }
.hero__chips { display: flex; flex-wrap: wrap; gap: .55rem; }

.hero__media { position: relative; }
.hero__media .frame { box-shadow: var(--shadow-2); border-radius: var(--radius-frame); }
/* zwevende beoordeling-kaart */
.hero__rating {
  position: absolute;
  right: -14px; top: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .7rem .9rem;
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: .15rem;
  z-index: 5;
}
.hero__rating .num { font-family: var(--mono); font-weight: 600; font-size: 1.35rem; color: var(--ink); line-height: 1; display: flex; align-items: baseline; gap: .25rem; }
.hero__rating .num span { font-size: .8rem; color: var(--ink-3); }
.hero__rating .stars { color: var(--amber); font-size: .85rem; letter-spacing: 1px; }
.hero__rating small { font-size: .68rem; color: var(--ink-3); }

/* =========================================================================
   SPEC-STRIP (camera-uitlezing)
   ========================================================================= */
.specs {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.specs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.spec {
  padding: 1.6rem var(--pad-x);
  text-align: center;
  border-left: 1px solid var(--line);
}
.spec:first-child { border-left: 0; }
.spec__num { font-family: var(--mono); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--ink); line-height: 1; }
.spec__num em { font-style: normal; color: var(--blue); }
.spec__label { font-size: .85rem; color: var(--ink-3); margin-top: .45rem; }

/* =========================================================================
   FEATURE-RIJEN (wat leer je / hoe werkt het)
   ========================================================================= */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.feature + .feature { margin-top: clamp(3rem, 6vw, 5rem); }
.feature--rev .feature__media { order: 2; }
.feature__label {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin-bottom: .85rem;
}
.feature h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin-bottom: .9rem;
}
.feature p { margin: 0 0 1.25rem; }
.feature__media .frame { box-shadow: var(--shadow-1); }

/* Check-lijst */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.checklist li { position: relative; padding-left: 2rem; color: var(--ink-2); }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: .15rem;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,130,194,.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230082c2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

/* =========================================================================
   LESSEN — accordeon
   ========================================================================= */
.lessons__layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  background: none;
  border: 0;
  padding: 1.15rem .25rem;
  cursor: pointer;
  color: var(--ink);
}
.acc-trigger:hover { color: var(--blue-700); }
.acc-num {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--blue);
  background: rgba(0,130,194,.08);
  border-radius: 6px;
  padding: .3rem .5rem;
  flex: none;
  min-width: 58px;
  text-align: center;
}
.acc-title { font-weight: 600; font-size: 1.06rem; flex: 1; }
.acc-icon { flex: none; width: 22px; height: 22px; position: relative; }
.acc-icon::before, .acc-icon::after {
  content: ""; position: absolute; background: var(--ink-3); transition: transform .25s var(--ease), background .2s;
}
.acc-icon::before { top: 10px; left: 3px; width: 16px; height: 2px; }
.acc-icon::after  { left: 10px; top: 3px; width: 2px; height: 16px; }
.acc-trigger:hover .acc-icon::before, .acc-trigger:hover .acc-icon::after { background: var(--blue); }
.acc-item.is-open .acc-icon::after { transform: scaleY(0); }
.acc-panel { overflow: hidden; height: 0; transition: height .3s var(--ease); }
.acc-panel__inner { padding: 0 .25rem 1.4rem 5.1rem; display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.acc-panel__inner p { margin: 0; }
.acc-panel__inner .frame { max-width: 360px; }
.les-shot { max-width: 380px; margin: 0; }
.les-shot img { width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid var(--line); }
@media (min-width: 720px) {
  .acc-panel__inner { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

/* twee kolommen op breed scherm */
@media (min-width: 980px) {
  .accordion.accordion--split {
    column-count: 1;
  }
}

/* =========================================================================
   DOCENT
   ========================================================================= */
.tutor {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.tutor__photo .frame { box-shadow: var(--shadow-1); }
.tutor__photo .frame--ink .corner { border-color: rgba(14,31,43,.5); }
.tutor h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .25rem; }
.tutor__role { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); margin-bottom: 1.1rem; }
.tutor__quote { font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; color: var(--ink); font-style: italic; margin: 0 0 1.1rem; }

/* =========================================================================
   REVIEWS
   ========================================================================= */
.reviews__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.25rem; }
.rating-big { display: flex; align-items: center; gap: 1rem; }
.rating-big .score { font-family: var(--mono); font-weight: 600; font-size: 3rem; color: var(--ink); line-height: 1; }
.rating-big .stars { color: var(--amber); font-size: 1.1rem; letter-spacing: 2px; }
.rating-big small { display: block; color: var(--ink-3); font-size: .85rem; margin-top: .2rem; }

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.review {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.review:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-1); }
.review__stars { color: var(--amber); font-size: .9rem; letter-spacing: 2px; margin-bottom: .8rem; }
.review p { margin: 0 0 1rem; color: var(--ink-2); font-size: .98rem; }
.review__who { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-3); display: flex; align-items: center; gap: .5rem; }
.review__who::before { content: ""; width: 16px; height: 1px; background: var(--line-2); }

/* =========================================================================
   PRIJS
   ========================================================================= */
.pricing {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
}
.price-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
}
.price-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--amber));
}
.price-card__tag { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.price-card__amount { display: flex; align-items: baseline; gap: .5rem; margin: .5rem 0 .35rem; }
.price-card__amount .big { font-family: var(--serif); font-weight: 600; font-size: clamp(3rem, 7vw, 4.2rem); color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.price-card__amount .cur { font-family: var(--serif); font-size: 2rem; color: var(--ink); }
.price-card__amount .per { color: var(--ink-3); font-size: .95rem; }
.price-card__note { color: var(--ink-2); font-size: .98rem; margin: 0 0 1.4rem; }
.price-card .checklist { margin-bottom: 1.6rem; }
.price-card__foot { font-size: .82rem; color: var(--ink-3); margin-top: .9rem; text-align: center; }

.subsidy {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; gap: 1.25rem;
}
.subsidy h3 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; }
.subsidy__item { display: flex; gap: .9rem; }
.subsidy__item .ic {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--blue);
}
.subsidy__item .ic svg { width: 20px; height: 20px; }
.subsidy__item h4 { font-size: 1rem; margin-bottom: .15rem; }
.subsidy__item p { margin: 0; font-size: .92rem; color: var(--ink-2); }

/* =========================================================================
   EXTRA'S inbegrepen
   ========================================================================= */
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.feature + .perks { margin-top: clamp(3rem, 6vw, 5rem); }
.perk {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.perk__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.perk__ic { width: 40px; height: 40px; border-radius: 10px; background: rgba(0,130,194,.08); display: grid; place-items: center; color: var(--blue); flex: none; }
.perk__ic svg { width: 22px; height: 22px; }
.perk h4 { font-size: 1.05rem; }
.perk .tag { font-family: var(--mono); font-size: .7rem; color: var(--amber-700); letter-spacing: .04em; }
.perk p { margin: 0; font-size: .92rem; color: var(--ink-2); }

/* =========================================================================
   INSCHRIJVEN-BLOK
   ========================================================================= */
.enroll {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  box-shadow: var(--shadow-1);
}
.enroll__steps { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .9rem; }
.enroll__steps li { display: flex; gap: .9rem; align-items: flex-start; }
.enroll__steps .n {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: #fff; font-family: var(--mono); font-size: .82rem; font-weight: 600;
  display: grid; place-items: center;
}
.notice {
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem;
  font-size: .94rem;
  margin-top: 1rem;
}
.notice--info  { background: var(--mist); border: 1px solid var(--line); color: var(--ink-2); }
.notice--warn  { background: #fff4f4; border: 1px solid #f3c9c9; color: #7a2e2e; }
.notice--warn a { color: #7a2e2e; font-weight: 700; }
.notice--amber { background: var(--amber-soft); border: 1px solid #f4d79a; color: var(--amber-700); }
.geo-notice { display: none; background: #c0392b; color: #fff; border-radius: var(--radius-sm); padding: 1rem 1.1rem; margin-top: 1rem; font-size: .95rem; }
.geo-notice a, .geo-notice strong { color: #fff; }

/* =========================================================================
   CTA-band (blauwe uur)
   ========================================================================= */
.cta-band {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-900) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(40% 60% at 85% 20%, rgba(240,164,41,.18), transparent 60%),
    radial-gradient(30% 50% at 10% 90%, rgba(255,255,255,.12), transparent 60%);
  pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; text-align: center; max-width: 44rem; margin-inline: auto; }
.cta-band .eyebrow { color: #cdeafb; }
.cta-band .eyebrow::before { background: #cdeafb; }
.cta-band h2 { color: #fff; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; margin: 1rem 0 1rem; }
.cta-band p { color: rgba(255,255,255,.86); font-size: 1.12rem; margin: 0 0 1.9rem; }
.cta-band .btn--primary { background: #fff; color: var(--blue-900); box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.cta-band .btn--primary:hover { background: #f1f8fc; color: var(--blue-900); }
.cta-band .meta { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; color: rgba(255,255,255,.7); margin-top: 1.4rem; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { max-width: 50rem; margin-inline: auto; }
.faq .acc-trigger { padding-block: 1.25rem; }
.faq .acc-title { font-size: 1.08rem; font-weight: 600; }
.faq .acc-panel__inner { padding: 0 .25rem 1.4rem; grid-template-columns: 1fr; }
.faq .acc-panel__inner p { color: var(--ink-2); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { background: var(--ink); color: #b9c8d2; padding-block: clamp(2.75rem, 5vw, 4rem); }
.site-footer a { color: #e6eef3; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.site-footer h4 { color: #fff; font-size: 1.05rem; margin-bottom: .9rem; }
.site-footer .brand__name { color: #fff; }
.site-footer .brand__name small { color: #7d93a1; }
.footer-contact { display: grid; gap: .55rem; font-size: .95rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .85rem; color: #7d93a1; }
.footer-bottom p { margin: 0; }

/* =========================================================================
   Reveal-animatie
   ========================================================================= */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .btn:hover, .review:hover, .play:hover .play__btn { transform: none; }
}

/* Toegankelijkheid: focus */
:focus-visible { outline: 3px solid rgba(0,130,194,.5); outline-offset: 2px; border-radius: 4px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .perks { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .main-nav { display: none; }   /* desktopnav verbergen; mobiele subnav neemt over */

  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { max-width: 560px; }
  .hero__rating { right: 8px; }

  .specs__grid { grid-template-columns: repeat(2, 1fr); }
  .spec:nth-child(3) { border-left: 0; }
  .spec:nth-child(odd) { border-left: 0; }
  .spec { border-top: 1px solid var(--line); }
  .spec:nth-child(1), .spec:nth-child(2) { border-top: 0; }

  .feature { grid-template-columns: 1fr; gap: 1.75rem; }
  .feature--rev .feature__media { order: 0; }
  .feature__media { max-width: 560px; }

  .tutor { grid-template-columns: 1fr; }
  .tutor__photo { max-width: 320px; }

  .pricing { grid-template-columns: 1fr; }
  .acc-panel__inner { padding-left: .25rem; }
}

@media (max-width: 600px) {
  body { font-size: 1rem; }
  .review-grid, .perks { grid-template-columns: 1fr; }
  .reviews__top { align-items: flex-start; }
  .acc-trigger { gap: .65rem; }
  .acc-num { min-width: 52px; }
  .hero__rating { position: static; margin-top: 1rem; display: inline-flex; flex-direction: row; align-items: center; gap: .6rem; }
  .frame__hud { font-size: .68rem; }
}

/* =========================================================================
   AANVULLINGEN — cursuslabel, mobiele subnav, actieblok handboek,
   sfeerbeelden-diashow en video-lightbox
   ========================================================================= */

/* ---- Cursuslabel in de header (desktop) ---------------------------------- */
.course-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-left: .85rem;
  padding-left: .95rem;
  border-left: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue-700);
  white-space: nowrap;
}
.course-tag .athome { color: var(--amber-700); }
@media (max-width: 1100px) { .course-tag { display: none; } }

/* ---- Permanente mobiele navigatiebalk ------------------------------------ */
.subnav { display: none; }                 /* standaard verborgen op desktop */
.subnav {
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.subnav__track {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: .5rem var(--pad-x);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.subnav__track::-webkit-scrollbar { display: none; }
.subnav__track a {
  flex: none;
  scroll-snap-align: start;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .42rem .8rem;
  white-space: nowrap;
}
.subnav__track a.is-active {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}
@media (max-width: 860px) { .subnav { display: block; } }

/* ---- Hero: cursusnaam prominent ------------------------------------------ */
.hero__title {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--ink);
  font-size: clamp(2.4rem, 6vw, 4.1rem);
  margin: .35rem 0 .2rem;
}
.hero__title .athome {
  color: var(--blue);
  font-style: italic;
}
.hero__tagline {
  font-family: var(--serif);
  font-size: clamp(1.18rem, 2.2vw, 1.6rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 .55rem;
}
.hero__tagline em { font-style: italic; color: var(--blue-700); }

/* ---- HUD: kleine play-driehoek i.p.v. opname-stip ------------------------ */
.frame__hud .tri {
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
}

/* ---- Actieblok: gratis handboek ------------------------------------------ */
.bookbanner {
  background:
    radial-gradient(120% 140% at 0% 0%, #fff7e9 0%, var(--amber-soft) 55%, #f7dca6 100%);
  border-top: 1px solid #f0d8a8;
  border-bottom: 1px solid #f0d8a8;
}
.bookbanner__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3rem);
}
.bookbanner__cover {
  position: relative;
  flex: none;
  width: clamp(150px, 22vw, 215px);
}
.bookbanner__cover img {
  width: 100%;
  height: auto;
  display: block;
}
.bookbanner__badge {
  position: absolute;
  top: -14px; right: -14px;
  background: var(--blue);
  color: #fff;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .45rem .7rem;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,96,143,.35);
  transform: rotate(6deg);
}
.bookbanner__body { min-width: 0; }
.bookbanner__body .eyebrow { color: var(--amber-700); }
.bookbanner__body .eyebrow::before { background: var(--amber-700); }
.bookbanner__body h2 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: #5a3d0c;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  margin: .15rem 0 .5rem;
}
.bookbanner__body p { color: #6b4e1c; max-width: 46ch; margin: 0 0 1.2rem; }
.bookbanner__body .btn--primary {
  background: var(--blue);
  border-color: var(--blue);
}
.bookbanner__meta {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: .9rem;
  font-size: .82rem; color: #8a6a2e;
}
.bookbanner__meta s { opacity: .8; }

/* ---- Sfeerbeelden-diashow ------------------------------------------------- */
.gallery { position: relative; }
.gallery__head { margin-bottom: 1.4rem; }
.gallery__stage {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  background: var(--ink);
  aspect-ratio: 16 / 9;
}
.gallery__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.gallery__slide.is-active { opacity: 1; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__corner { position: absolute; z-index: 2; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.7); pointer-events: none; }
.gallery__corner.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.gallery__corner.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.gallery__corner.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.gallery__corner.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.gallery__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(14,31,43,.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s var(--ease);
}
.gallery__nav:hover { background: rgba(14,31,43,.72); }
.gallery__nav svg { width: 20px; height: 20px; }
.gallery__nav--prev { left: 14px; }
.gallery__nav--next { right: 14px; }
.gallery__dots {
  display: flex; justify-content: center; gap: .5rem;
  margin-top: 1.1rem;
}
.gallery__dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: var(--line-2);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.gallery__dot.is-active { background: var(--blue); transform: scale(1.25); }

/* ---- Video-lightbox ------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(8,18,26,.82);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox__frame {
  position: relative;
  width: min(100%, 980px, calc((100vh - 7rem) * 16 / 9));
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  transform: translateY(8px) scale(.98);
  transition: transform .25s var(--ease);
}
.lightbox__frame::before { content: ""; display: block; padding-top: 56.25%; } /* 16:9 verhouding */
.lightbox.is-open .lightbox__frame { transform: none; }
.lightbox__player { position: absolute; inset: 0; }
.lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.lightbox__close {
  position: absolute;
  top: -2px; right: 0;
  transform: translateY(-115%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
}
.lightbox__close:hover { background: rgba(255,255,255,.25); }

/* ---- Responsief gedrag van de aanvullingen ------------------------------- */
@media (max-width: 720px) {
  .bookbanner__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .bookbanner__body p { margin-inline: auto; }
  .bookbanner__body .eyebrow { justify-content: center; }
  .bookbanner__meta { justify-content: center; }
  .gallery__nav { width: 40px; height: 40px; }
  .lightbox__close { transform: translateY(-115%); top: -6px; }
}

/* Brand + cursuslabel samen links houden */
.header-left { display: inline-flex; align-items: center; min-width: 0; }

/* =========================================================================
   AANVULLINGEN v3 — groene inschrijfknop, opvallend inschrijfblok,
   uitgebreide footer, knop 'terug naar boven'
   ========================================================================= */

/* ---- Groene CTA (echte inschrijfknop) ----------------------------------- */
.btn--success { background: var(--success); color: #fff; box-shadow: 0 8px 20px rgba(21,145,95,.28); }
.btn--success:hover { background: #0f7a4f; color: #fff; box-shadow: 0 12px 26px rgba(21,145,95,.34); }

/* ---- Opvallend inschrijfblok -------------------------------------------- */
.section--enroll {
  background: linear-gradient(180deg, #e9f4fb 0%, #dceaf5 100%);
  border-top: 3px solid var(--blue);
  border-bottom: 1px solid var(--line-2);
}
.section--enroll .eyebrow { color: var(--success); }
.section--enroll .eyebrow::before { background: var(--success); }
.section--enroll .enroll {
  border: 1px solid var(--line-2);
  border-top: 4px solid var(--success);
  box-shadow: var(--shadow-2);
}
.enroll__after { margin: 1.1rem 0 0; font-size: .92rem; color: var(--ink-2); line-height: 1.6; }

/* ---- Footer met alle cursussen ------------------------------------------ */
.footer-grid { grid-template-columns: 1.25fr 0.85fr 2.05fr; }
.footer-courses__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem 1.4rem; }
.footer-courses__cat {
  display: block;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: #7d93a1; margin-bottom: .55rem;
}
.footer-courses__cols a { display: block; font-size: .92rem; margin-bottom: .42rem; }

/* ---- Knop 'terug naar boven' -------------------------------------------- */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: #fff; border-color: var(--ink-3); }
.to-top svg { width: 20px; height: 20px; }

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-courses__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .footer-courses__cols { grid-template-columns: 1fr; }
}

/* =========================================================================
   AANVULLINGEN v4 — compacter lesprogramma + compactere reviews
   ========================================================================= */

/* ---- Lesprogramma: compacter, 2 kolommen op breed scherm ---------------- */
.accordion--lessons .acc-trigger { padding-block: .82rem; }
.accordion--lessons .acc-num { min-width: 50px; font-size: .72rem; padding: .25rem .42rem; }
.accordion--lessons .acc-title { font-size: .97rem; }
.accordion--lessons .les-shot { max-width: 300px; }
.accordion--lessons .les-shot img { max-height: 190px; width: auto; }
@media (min-width: 860px) {
  .accordion--lessons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.75rem;
    align-items: start;
  }
  /* in een smalle kolom: tekst en beeld onder elkaar */
  .accordion--lessons .acc-panel__inner { grid-template-columns: 1fr; padding-left: 4.4rem; }
}

/* ---- Reviews compacter, vooral op smartphone (horizontaal swipen) ------- */
@media (max-width: 600px) {
  .review-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: .85rem;
    padding-bottom: .9rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .review-grid::-webkit-scrollbar { display: none; }
  .review { flex: 0 0 85%; scroll-snap-align: start; padding: 1.25rem; }
}

/* =========================================================================
   DONKER THEMA — activeer met <html data-theme="dark">
   Zet de kleurtokens om en corrigeert de plekken met vaste lichte kleuren.
   ========================================================================= */
html[data-theme="dark"] {
  --ink:        #e8eff4;   /* primaire tekst (licht) */
  --ink-2:      #aebfca;   /* secundaire tekst */
  --ink-3:      #7e94a1;   /* gedempt / bijschriften */
  --blue:       #38aae6;   /* accent (helder op donker) */
  --blue-600:   #57b8eb;
  --blue-700:   #88ccf2;   /* links / hover op donker */
  --blue-900:   #0a2231;   /* diepe tint (cta-band) */
  --amber:      #f3b24a;
  --amber-700:  #e0a23a;
  --amber-soft: #2a2211;
  --paper:      #18242d;   /* kaarten (verhoogd) */
  --mist:       #121c23;   /* afwisselende sectie-achtergrond */
  --mist-2:     #1b2832;
  --line:       #28383f;   /* haarlijnen */
  --line-2:     #38505c;
  --success:    #2ab97e;

  --shadow-1: 0 1px 2px rgba(0,0,0,.40), 0 6px 18px rgba(0,0,0,.45);
  --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 18px 40px rgba(0,0,0,.55);

  color-scheme: dark;
}

/* Basislaag: donkerder dan kaarten en mist-secties */
html[data-theme="dark"] body { background: #0c151b; }

/* Header + permanente subnav: doorzichtig donker */
html[data-theme="dark"] .site-header.is-stuck { box-shadow: 0 6px 22px rgba(0,0,0,.5); }

/* Statusbalk + primaire knop: dieper blauw zodat witte tekst leesbaar blijft */
html[data-theme="dark"] .statusbar { background: #0e6394; }
html[data-theme="dark"] .btn--primary { background: #0e7cc0; box-shadow: 0 8px 20px rgba(0,0,0,.45); }
html[data-theme="dark"] .btn--primary:hover { background: #1a8cce; }

/* Hero-beoordelingskaartje + diashow-achtergrond */
html[data-theme="dark"] .hero__rating { background: var(--paper); }
html[data-theme="dark"] .gallery__stage { background: #0c151b; }

/* Viewfinder-hoeken op de leraarfoto → licht op donker */
html[data-theme="dark"] .frame--ink .corner,
html[data-theme="dark"] .tutor__photo .frame--ink .corner { border-color: rgba(255,255,255,.5); }

/* Lesnummer-chip iets zichtbaarder */
html[data-theme="dark"] .acc-num { background: rgba(56,170,230,.16); }

/* Inschrijfblok: donkere blauwe band */
html[data-theme="dark"] .section--enroll {
  background: linear-gradient(180deg, #11293a 0%, #0e1f2b 100%);
  border-top-color: var(--blue);
  border-bottom-color: var(--line-2);
}
/* Stapnummers (gebruikten --ink als donkere bg) */
html[data-theme="dark"] .enroll__steps .n { background: var(--blue); color: #07151d; }

/* Waarschuwings-notice donker */
html[data-theme="dark"] .notice--warn { background: #2a1414; border-color: #5a2a2a; color: #f0b4b4; }
html[data-theme="dark"] .notice--warn a { color: #f0b4b4; }

/* Boekkader: donkere amber-tint i.p.v. crème */
html[data-theme="dark"] .bookbanner {
  background: radial-gradient(120% 140% at 0% 0%, #2c2412 0%, #221c0e 55%, #19140a 100%);
  border-top-color: #3a2f15;
  border-bottom-color: #3a2f15;
}
html[data-theme="dark"] .bookbanner__body h2 { color: #f3deb0; }
html[data-theme="dark"] .bookbanner__body p { color: #d8c39a; }
html[data-theme="dark"] .bookbanner__body .eyebrow { color: var(--amber); }
html[data-theme="dark"] .bookbanner__body .eyebrow::before { background: var(--amber); }

/* CTA-band: dieper verloop zodat witte tekst goed contrasteert */
html[data-theme="dark"] .cta-band { background: linear-gradient(135deg, #0e6394 0%, var(--blue-900) 100%); }

/* Footer blijft donker (— --ink is nu licht, dus expliciet) */
html[data-theme="dark"] .site-footer { background: #0a1117; color: #9fb1bc; }
html[data-theme="dark"] .site-footer .brand__name small,
html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] .footer-courses__cat { color: var(--ink-3); }
html[data-theme="dark"] .footer-bottom { border-top-color: rgba(255,255,255,.08); }

/* Knop 'terug naar boven' donker */
html[data-theme="dark"] .to-top { background: rgba(20,30,38,.92); border-color: var(--line-2); }

/* Donker thema — laatste correcties op vaste lichte vlakjes */
html[data-theme="dark"] .subsidy__item .ic { background: rgba(56,170,230,.14); border-color: var(--line-2); }
html[data-theme="dark"] .perk__ic { background: rgba(56,170,230,.16); }
html[data-theme="dark"] .to-top:hover { background: rgba(28,40,50,.98); border-color: var(--ink-3); }
html[data-theme="dark"] .nav-toggle { background: var(--paper); border-color: var(--line-2); }
html[data-theme="dark"] .cta-band .btn--primary { background: #f1f8fc; color: #0a2231; }

/* =========================================================================
   v5 — logo in header, themaschakelaar, footer met logo's + social,
   voor/na-vergelijker, Adobe-uitgelicht (Lightroom)
   ========================================================================= */

/* ---- Themaschakelaar (discreet knopje) ---------------------------------- */
.theme-toggle {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-2);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); background: var(--mist); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .ic-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ic-sun  { display: block; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

/* ---- Footer: merk, logo's, social --------------------------------------- */
.footer-logos { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-bottom: .2rem; }
.footer-logo { display: block; height: 40px; width: auto; }
.footer-logo--ov { height: 46px; }
.footer-brand > p { margin: 1.1rem 0 0; max-width: 30rem; }
.footer-social { display: flex; gap: .55rem; margin: 1.2rem 0 0; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #cdd9e1;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.footer-social a:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-recognition { margin-top: 1.3rem; }
.footer-recognition img { height: 48px; width: auto; }

/* ---- Voor/na-vergelijker (interactief + auto-demo) ---------------------- */
.ba {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-frame);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  user-select: none;
  touch-action: pan-y;
  background: var(--mist-2);
}
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-img--before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); transition: clip-path .6s var(--ease); }
.ba.is-dragging .ba-img--before { transition: none; }
.ba-line {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 2px; background: #fff; transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
  transition: left .6s var(--ease); pointer-events: none;
}
.ba.is-dragging .ba-line { transition: none; }
.ba-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35);
  display: grid; place-items: center; color: var(--ink);
}
.ba-grip::before, .ba-grip::after {
  content: ""; position: absolute; width: 0; height: 0;
  border-block: 5px solid transparent;
}
.ba-grip::before { border-right: 7px solid currentColor; left: 9px; }
.ba-grip::after  { border-left: 7px solid currentColor; right: 9px; }
.ba-tag {
  position: absolute; top: 12px; z-index: 2;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(14,31,43,.62);
  padding: .3rem .55rem; border-radius: 999px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.ba-tag--before { left: 12px; }
.ba-tag--after  { right: 12px; }
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent;
}
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; cursor: ew-resize; }
.ba-range::-moz-range-thumb { width: 44px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.ba-range:focus-visible { outline: none; }
.ba:focus-within { box-shadow: 0 0 0 3px rgba(0,130,194,.45); }

/* Voor/na-rij: beeld + uitleg naast elkaar op breed scherm */
.ba-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-top: 2.25rem; }
.ba-row:first-of-type { margin-top: 1.5rem; }
.ba-row--rev .ba { order: 2; }
.ba-row h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 0 0 .6rem; }
.ba-row p { margin: 0 0 .6rem; color: var(--ink-2); }
.ba-row ul { margin: .4rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.ba-row ul li { position: relative; padding-left: 1.4rem; color: var(--ink-2); font-size: .96rem; }
.ba-row ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--blue); }

/* ---- Adobe uitgelicht: Adobe-vak dubbel zo groot als Microsoft ---------- */
.extras-adobe { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; align-items: stretch; }
.extras-adobe .perk { margin: 0; }
.extras-adobe .perk--adobe { display: flex; flex-direction: column; justify-content: center; }
.extras-adobe .perk--adobe .perk__price { font-family: var(--mono); font-weight: 600; color: var(--blue-700); font-size: 1.05rem; margin-top: .4rem; }

@media (max-width: 760px) {
  .ba-row { grid-template-columns: 1fr; }
  .ba-row--rev .ba { order: 0; }
  .extras-adobe { grid-template-columns: 1fr; }
}

/* Mobiel: toon meteen de compacte bovenbalk + social in het uitklapmenu */
@media (max-width: 900px) {
  .site-header__inner { height: 58px; }
  .site-header.is-stuck .site-header__inner { height: 58px; }
  .brand__logo, .site-header.is-stuck .brand__logo { height: 34px; }
  .site-header__aside .header-social { display: none; }
  .site-nav .header-social { display: flex; justify-content: center; gap: .5rem; margin-top: .7rem; padding-top: .8rem; border-top: 1px solid var(--line); }
  .site-nav .header-social a { width: 40px; height: 40px; }
}

/* =========================================================================
   HOMEPAGE
   ========================================================================= */
.site-nav__link.is-active { color: var(--ink); position: relative; }
.site-nav__link.is-active::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .2rem; height: 2px; background: var(--blue); border-radius: 2px; }

/* ---- Hero: kaderloze videoles, opgaand in de achtergrond ---------------- */
.hero3 { position: relative; overflow: hidden; isolation: isolate; color: #fff; min-height: clamp(560px, 86vh, 820px); display: flex; align-items: center; background: #07121b; }
.hero3__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.hero3__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, #07121b 0%, rgba(7,18,27,.84) 24%, rgba(7,18,27,.32) 52%, rgba(7,18,27,.08) 76%, rgba(7,18,27,0) 100%),
    linear-gradient(180deg, rgba(7,18,27,.42) 0%, rgba(7,18,27,0) 26%, rgba(7,18,27,0) 54%, rgba(7,18,27,.82) 100%); }
.hero3__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(3.5rem, 9vh, 6.5rem); }
.hero3__text { max-width: 660px; text-shadow: 0 2px 26px rgba(0,0,0,.32); }
.hero3 .eyebrow { color: rgba(255,255,255,.88); }
.hero3 .eyebrow::before { background: var(--amber); opacity: 1; }
.hero3__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 5vw, 4.05rem); line-height: 1.05; letter-spacing: -.02em; margin: 1rem 0 0; color: #fff; }
.hero3__title .kw { background: linear-gradient(100deg, #57c1f0 0%, #9bdcff 45%, #f6b54a 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: kwSheen 7s linear infinite; }
@keyframes kwSheen { to { background-position: 220% center; } }
.hero3__lead { font-size: clamp(1.05rem, 2.1vw, 1.28rem); color: rgba(255,255,255,.92); margin: 1.3rem 0 1.9rem; max-width: 52ch; line-height: 1.55; }
.hero3 .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.hero3 .btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.14); }

/* Verhaalstrip: vijf stappen die voor elke cursus gelden */
.journey { list-style: none; margin: 2.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.1rem .4rem; position: relative; }
.journey::before { content: ""; position: absolute; top: 19px; left: 9%; right: 9%; height: 2px; background: rgba(255,255,255,.2); }
.journey__step { position: relative; z-index: 1; flex: 1 1 0; min-width: 92px; display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; }
.journey__ic { width: 40px; height: 40px; border-radius: 50%; background: rgba(10,21,30,.92); border: 1px solid rgba(255,255,255,.28); color: #fff; display: grid; place-items: center; }
.journey__ic svg { width: 18px; height: 18px; }
.journey__label { font-size: .76rem; color: rgba(255,255,255,.85); line-height: 1.25; max-width: 12ch; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.journey__step:nth-child(1) .journey__ic { animation: jpulse 7.5s ease-in-out infinite 0s; }
.journey__step:nth-child(2) .journey__ic { animation: jpulse 7.5s ease-in-out infinite 1.5s; }
.journey__step:nth-child(3) .journey__ic { animation: jpulse 7.5s ease-in-out infinite 3s; }
.journey__step:nth-child(4) .journey__ic { animation: jpulse 7.5s ease-in-out infinite 4.5s; }
.journey__step:nth-child(5) .journey__ic { animation: jpulse 7.5s ease-in-out infinite 6s; }
@keyframes jpulse { 0%,80%,100%{ background: rgba(10,21,30,.92); border-color: rgba(255,255,255,.28); box-shadow: none; transform: scale(1); } 8%,16%{ background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 6px rgba(56,170,230,.2); transform: scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
  .hero3__title .kw, .journey__ic { animation: none; }
}
@media (max-width: 860px) {
  .hero3 { min-height: 0; }
  .hero3__overlay { background: linear-gradient(180deg, rgba(7,18,27,.42) 0%, rgba(7,18,27,.62) 55%, rgba(7,18,27,.82) 100%); }
  .hero3__inner { padding-block: clamp(3rem, 12vh, 4.5rem); }
}
@media (max-width: 700px) {
  .journey::before { display: none; }
  .journey { gap: 1.2rem 1rem; }
  .journey__step { flex-basis: 26%; }
}

/* ---- Leeromgeving-balk (reeds ingeschreven — compacte strip bovenaan) ---- */
.elo-band { background: linear-gradient(120deg, var(--blue), var(--blue-700)); color: #fff; }
.elo-band__inner { display: flex; align-items: center; justify-content: center; gap: .7rem 1.4rem; padding-block: .7rem; flex-wrap: wrap; }
.elo-band__text { display: inline-flex; align-items: center; gap: .7rem; margin: 0; color: rgba(255,255,255,.96); font-size: .95rem; line-height: 1.35; }
.elo-band__ic { flex: none; width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.18); display: grid; place-items: center; }
.elo-band__ic svg { width: 17px; height: 17px; }
.elo-band__text strong { color: #fff; }
.elo-band__btn { flex: none; background: #fff; color: var(--blue-900); padding: .45rem 1.05rem; font-size: .9rem; box-shadow: none; }
.elo-band__btn:hover { background: #eef7fc; color: var(--blue-900); }
@media (max-width: 620px) {
  .elo-band__text { font-size: .85rem; }
}

/* ---- Reviews-carrousel (één per keer) ----------------------------------- */
.rcarousel { position: relative; max-width: 760px; margin: 0 auto; }
.rcarousel__viewport { overflow: hidden; }
.rcarousel__track { display: flex; transition: transform .5s var(--ease); }
.rcarousel__item { flex: 0 0 100%; min-width: 100%; display: flex; padding: 4px 6px; }
.review--lg { width: 100%; text-align: center; padding: clamp(1.7rem, 4vw, 2.8rem); display: flex; flex-direction: column; justify-content: center; }
.review--lg .review__stars { justify-content: center; font-size: 1.05rem; }
.review--lg p { font-family: var(--serif); font-weight: 400; font-size: clamp(1.1rem, 2.3vw, 1.4rem); line-height: 1.5; color: var(--ink); margin: .4rem 0 0; }
.review--lg .review__who { margin-top: 1.1rem; }
.rcarousel__controls { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.4rem; }
.rcarousel__nav { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease); }
.rcarousel__nav:hover { color: var(--ink); border-color: var(--ink-3); }
.rcarousel__nav svg { width: 20px; height: 20px; }
.rcarousel__dots { display: flex; gap: .5rem; }
.rcarousel__dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: var(--line-2); cursor: pointer; padding: 0; transition: width .2s var(--ease), background .2s var(--ease); }
.rcarousel__dots button.is-active { background: var(--blue); width: 22px; border-radius: 4px; }

/* ---- Aanklikbare cursuskaart -------------------------------------------- */
a.course-card { text-decoration: none; color: inherit; }
.course-card__status { display: block; margin: .3rem 0 .1rem; font-size: .85rem; font-weight: 600; }
.course-card__status--open  { color: #0082c2; }
.course-card__status--bijna { color: #e07a10; }
.course-card__status--vol   { color: #d23128; }
html[data-theme="dark"] .course-card__status--open  { color: #38aae6; }
html[data-theme="dark"] .course-card__status--bijna { color: #f0a429; }
html[data-theme="dark"] .course-card__status--vol   { color: #ff6b5e; }

/* ---- Intro-blok ---------------------------------------------------------- */
.home-intro__lead { font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-family: var(--serif); font-weight: 400; line-height: 1.5; color: var(--ink); max-width: 40ch; }
.home-intro__grid { display: grid; grid-template-columns: 1.05fr 1.1fr; gap: clamp(1.8rem, 5vw, 4rem); align-items: start; margin-top: .5rem; }
.home-intro__body p { color: var(--ink-2); margin: 0 0 1rem; }
.home-intro__points { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.intro-point { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.1rem; }
.intro-point .ic { width: 38px; height: 38px; border-radius: 9px; background: rgba(0,130,194,.1); color: var(--blue); display: grid; place-items: center; margin-bottom: .6rem; }
.intro-point .ic svg { width: 20px; height: 20px; }
.intro-point h4 { font-size: 1rem; margin: 0 0 .25rem; }
.intro-point p { font-size: .88rem; color: var(--ink-3); margin: 0; }

/* ---- Cursuskaarten ------------------------------------------------------- */
.course-group { margin-top: 2.5rem; }
.course-group__head { display: flex; align-items: baseline; gap: .9rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.course-group__title { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; margin: 0; }
.course-group__intro { color: var(--ink-2); font-size: .96rem; margin: 0; flex: 1; min-width: 260px; }
.course-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; }
.course-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.course-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist-2); }
.course-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--ease); }
.course-card:hover .course-card__media img { transform: scale(1.05); }
.course-card__body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.course-card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-1); }
.course-card__tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.course-card__tag .num { color: var(--ink-3); }
.course-card__title { font-family: var(--serif); font-weight: 500; font-size: 1.28rem; margin: 0 0 .5rem; color: var(--ink); line-height: 1.2; }
.course-card__desc { color: var(--ink-2); font-size: .92rem; line-height: 1.55; margin: 0 0 1.1rem; flex: 1; }
.course-card__link { font-weight: 600; font-size: .92rem; color: var(--blue-700); display: inline-flex; align-items: center; gap: .4rem; }
.course-card__link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.course-card:hover .course-card__link svg { transform: translateX(3px); }

@media (max-width: 820px) {
  .home-intro__grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .home-intro__points { grid-template-columns: 1fr; }
  .vf-rec { right: 22px; }
  .vf-read { left: 22px; }
  .vf-reticle { display: none; }
}

/* ============================================================
   INFO-PAGINA'S ('Belangrijke info' + software) + CONTACTFORMULIER
   Toegevoegd in dezelfde stijl als de homepage en cursuspagina's.
   ============================================================ */

/* --- Compacte paginakop --- */
.page-hero { position: relative; padding: clamp(2.4rem,6vw,4.4rem) 0 clamp(1.6rem,3vw,2.4rem); border-bottom: 1px solid var(--line);
  background: radial-gradient(120% 140% at 100% 0%, var(--mist) 0%, transparent 55%), var(--paper); }
.crumbs { font-family: var(--mono); font-size: .8rem; color: var(--ink-3); display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--blue-700); }
.crumbs .sep { color: var(--line-2); }
.crumbs [aria-current] { color: var(--ink); }
.page-hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem,5vw,3.05rem); line-height: 1.05; margin-top: .85rem; letter-spacing:-.01em; }
.page-hero .lede { font-size: clamp(1.05rem,2.1vw,1.28rem); color: var(--ink-2); max-width: 64ch; margin-top: 1rem; }

/* --- Inhoud: hoofdtekst + zijbalk --- */
.info-grid { display:grid; grid-template-columns: 1.55fr .95fr; gap: clamp(1.5rem,4vw,3.25rem); align-items:start; }
@media (max-width: 880px){ .info-grid { grid-template-columns: 1fr; } }

/* --- Leesbare prozakolom --- */
.prose { color: var(--ink-2); max-width: 68ch; }
.prose > * + * { margin-top: 1.05rem; }
.prose p { font-size: 1.02rem; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose h3 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--ink); margin-top: 2rem; }
.prose h4 { font-size: .8rem; font-family: var(--mono); text-transform: uppercase; letter-spacing:.08em; color: var(--blue-700); margin-top: 1.75rem; }
.prose a { color: var(--blue-700); border-bottom: 1px solid var(--line-2); }
.prose a:hover { border-color: var(--blue-700); }
.prose ul { list-style:none; margin-top: .6rem; display:grid; gap:.55rem; }
.prose ul li { position: relative; padding-left: 1.4rem; }
.prose ul li::before { content:""; position:absolute; left:.15rem; top:.62em; width:6px; height:6px; border-radius:50%; background: var(--blue); }
.prose figure { margin: 1.4rem 0 0; }
.prose figcaption { font-size:.85rem; color: var(--ink-3); margin-top:.5rem; }

/* --- Zijbalk-kaart ('Voorwaarden' enz.) --- */
.aside-card { background: var(--mist); border:1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem,2.5vw,1.75rem); position: sticky; top: 92px; }
.aside-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; }
.aside-card h3 + * { margin-top: 1rem; }
.aside-card .checklist { margin-top: 1rem; }
@media (max-width: 880px){ .aside-card { position: static; } }

/* --- Uitgelichte 'gratis/aanbod' elementen --- */
.offer-badge { display:inline-flex; align-items:center; gap:.5rem; font-family: var(--mono); font-size:.82rem; font-weight:600; color: var(--blue-700); background:#eaf5fb; border:1px solid #cfe6f3; padding:.4rem .75rem; border-radius:999px; }
.price-strike { color: var(--ink-3); text-decoration: line-through; }

/* --- Contactformulier --- */
.contact-grid { display:grid; grid-template-columns: 1fr .85fr; gap: clamp(1.75rem,4vw,3.5rem); align-items:start; }
@media (max-width: 880px){ .contact-grid { grid-template-columns: 1fr; } }
.form { display:grid; gap: 1.05rem; }
.form__row { display:grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
@media (max-width: 560px){ .form__row { grid-template-columns: 1fr; } }
.field { display:grid; gap:.4rem; }
.field label { font-family: var(--mono); font-size:.76rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-2); }
.field .req { color: var(--blue); }
.field input, .field textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: var(--paper); border:1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: .8rem .9rem; width:100%; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field textarea:focus { outline:none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,130,194,.16); }
.field--bad input, .field--bad textarea { border-color:#d23128; box-shadow: 0 0 0 3px rgba(210,49,40,.12); }
.sum-q { font-family: var(--mono); font-weight:600; color: var(--ink); }
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.form__actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.25rem; }
.form__note { font-size:.85rem; color: var(--ink-3); max-width: 44ch; }

/* --- Donker thema (afwijkingen op vaste kleuren) --- */
html[data-theme="dark"] .page-hero { background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.04) 0%, transparent 55%), var(--paper); }
html[data-theme="dark"] .offer-badge { background: rgba(56,170,230,.12); border-color: rgba(56,170,230,.32); color: var(--blue); }

/* Twee gelijke inhoudskolommen (b.v. VOV + opleidingscheques) */
.info-grid--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 880px){ .info-grid--even { grid-template-columns: 1fr; } }

/* ============================================================
   CURSUS-HERO MET VIDEO-ACHTERGROND (hero3 op cursuspagina's)
   Extra elementen onder de homepage-hero3: rating + chips op donker.
   ============================================================ */
.hero3__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 2.1rem; }
.hero3__rating { display: inline-flex; align-items: center; gap: .5rem; }
.hero3__rating .stars { color: var(--amber); font-size: 1rem; letter-spacing: 1px; }
.hero3__rating .num { font-family: var(--mono); font-weight: 600; color: #fff; font-size: 1.05rem; display: inline-flex; align-items: baseline; gap: .12rem; }
.hero3__rating .num span { font-size: .72rem; color: rgba(255,255,255,.7); }
.hero3__rating .lbl { font-size: .78rem; color: rgba(255,255,255,.82); }
.hero3__chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.hero3 .chip { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.26); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hero3 .chip .dot { background: #6cc6f2; }
.hero3 .chip .dot--green { background: #3ad29a; }
@media (max-width: 560px) { .hero3__meta { gap: .8rem 1rem; margin-top: 1.6rem; } }

/* ============================================================
   COMPACT INTRO-KADER IN DE VIDEOHERO (naast 'Hoe inschrijven?')
   Zelfde look als de voorbeeldles, maar kleiner en in een lichte hoek.
   ============================================================ */
.hero-introcard {
  flex: 0 0 auto;
  width: clamp(200px, 23vw, 232px);
  border-radius: var(--radius-frame);
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
  transform: rotate(-2.2deg);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.hero-introcard:hover,
.hero-introcard:focus-visible { transform: rotate(0deg) scale(1.02); box-shadow: 0 18px 42px rgba(0,0,0,.42); outline: none; }
.hero-introcard > img { aspect-ratio: 16 / 10; object-fit: cover; }
/* kleinere hoekjes */
.hero-introcard .corner { width: 12px; height: 12px; border-width: 2px; }
.hero-introcard .corner.tl { top: 7px; left: 7px; }
.hero-introcard .corner.tr { top: 7px; right: 7px; }
.hero-introcard .corner.bl { bottom: 7px; left: 7px; }
.hero-introcard .corner.br { bottom: 7px; right: 7px; }
/* kleinere afspeelknop */
.hero-introcard .play__btn { width: 50px; height: 50px; box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.hero-introcard .play__btn::after { border-width: 8px 0 8px 13px; }
/* opschrift als gecentreerde onderbalk */
.hero-introcard .frame__hud {
  left: 8px; right: 8px; bottom: 8px;
  justify-content: center;
  font-size: .62rem; letter-spacing: .01em;
  padding: .34rem .5rem; gap: .4rem;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .hero-introcard { width: min(74vw, 240px); transform: rotate(-1.6deg); }
}

/* ============================================================
   FOTOHOOFDING VOOR DE INFO-PAGINA'S (brede foto i.p.v. video)
   Zelfde gevoel als de videohoofding van de cursuspagina's.
   ============================================================ */
.page-hero--photo {
  position: relative;
  border-bottom: 0;
  background: var(--ink);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(300px, 44vh, 460px);
  padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.2rem, 4vw, 3rem);
}
.page-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero-bg);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.page-hero--photo .page-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,18,26,.9) 0%, rgba(8,18,26,.66) 44%, rgba(8,18,26,.32) 100%),
    linear-gradient(0deg, rgba(8,18,26,.74) 0%, rgba(8,18,26,.16) 48%, rgba(8,18,26,.3) 100%);
}
.page-hero--photo .page-hero__inner { position: relative; z-index: 2; width: 100%; }
.page-hero--photo h1 { color: #fff; }
.page-hero--photo .lede { color: rgba(255,255,255,.92); }
.page-hero--photo strong { color: #fff; }
.page-hero--photo .lede a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.page-hero--photo .lede a:hover { color: rgba(255,255,255,.82); }
.page-hero--photo .eyebrow { color: var(--amber); }
.page-hero--photo .crumbs { color: rgba(255,255,255,.7); }
.page-hero--photo .crumbs a { color: rgba(255,255,255,.85); }
.page-hero--photo .crumbs a:hover { color: #fff; }
.page-hero--photo .crumbs .sep { color: rgba(255,255,255,.4); }
.page-hero--photo .crumbs [aria-current] { color: #fff; }

/* Feature zonder media (bv. rubriek waarvan de foto verwijderd is): één kolom */
.feature--nomedia { grid-template-columns: 1fr; }
.feature--nomedia .feature__body { max-width: 62rem; }

/* ----------------------------- Cookietoestemming ----------------------------- */
.cookiebar { position: fixed; left: 50%; bottom: 1rem; transform: translate(-50%, 12px);
  width: min(680px, calc(100% - 2rem)); z-index: 1200; opacity: 0;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.18);
  transition: transform .25s ease, opacity .25s ease; }
.cookiebar.is-visible { transform: translate(-50%, 0); opacity: 1; }
.cookiebar[hidden] { display: none; }
.cookiebar__inner { display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap; padding: 1rem 1.15rem; }
.cookiebar__text { margin: 0; font-size: .95rem; color: var(--ink-2); flex: 1 1 17rem; line-height: 1.5; }
.cookiebar__text a { color: var(--blue-600); text-decoration: underline; }
.cookiebar__actions { display: flex; align-items: center; gap: .9rem; flex: 0 0 auto; }
.cookiebar .btn { padding: .6rem 1.15rem; font-size: .92rem; }
.cookiebar__decline { background: none; border: 0; padding: .3rem .1rem; font: inherit;
  font-size: .85rem; color: var(--ink-3, var(--ink-2)); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; opacity: .9; white-space: nowrap; }
.cookiebar__decline:hover { color: var(--ink); opacity: 1; }
html[data-theme="dark"] .cookiebar { box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.footer-legal { margin-top: .5rem; font-size: .85rem; color: var(--ink-3, var(--ink-2)); }
.footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: var(--ink); }
.footer-legal .sep { opacity: .5; margin: 0 .5rem; }
@media (max-width: 520px){
  .cookiebar { left: .75rem; right: .75rem; bottom: .75rem; width: auto; transform: translateY(12px); }
  .cookiebar.is-visible { transform: translateY(0); }
  .cookiebar__actions { width: 100%; }
  .cookiebar__actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ---------- Portret/smal scherm: hero-video vervangen door verticale foto ---------- */
.hero3__mobile { display: none; }

/* Posterfoto-laag: zichtbaar in portret én wanneer er geen video is, met subtiele zoom (Ken Burns) */
.hero3 .hero3__mobile {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero-fallback);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform-origin: center;
  animation: hero3Zoom 20s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hero3Zoom { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (orientation: portrait) {
  .hero3 .hero3__video { display: none; }
  .hero3 .hero3__mobile { display: block; background-image: var(--hero-mobile), var(--hero-fallback); }
}
.hero3.is-novideo .hero3__video { display: none; }
.hero3.is-novideo .hero3__mobile { display: block; }
@media (prefers-reduced-motion: reduce) {
  .hero3 .hero3__mobile { animation: none; }
}


/* Portret/smal scherm: fotohoofding toont (indien aanwezig) een verticale -mobile-foto,
   anders blijft de bestaande liggende foto staan (terugval via de tweede laag). */
@media (orientation: portrait) {
  .page-hero--photo .page-hero__bg { background-image: var(--hero-mobile), var(--hero-bg); }
}

/* Officiële erkenning onder de prijsrubriek (discreet) */
.price-legal{margin:1.7rem auto 0;max-width:60rem;text-align:center;font-size:.82rem;line-height:1.55;color:var(--ink-3);}
.price-legal a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;}
.price-legal a:hover{color:var(--blue-700);}

/* ===================== Inbegrepen: rij (Adobe-kaart naast voordelen) ===================== */
.benefits{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:stretch;justify-content:center;}

/* Adobe-aanbod: compacte, opvallende kaart, max 50% breed, gevuld naast de perks */
.adobe-offer{flex:1 1 340px;max-width:50%;position:relative;border-radius:18px;
  background:linear-gradient(150deg,#ffffff,#eef4f8);border:1px solid var(--line);box-shadow:var(--shadow-1);
  padding:1.4rem 1.5rem 1.45rem;}
.adobe-offer__ribbon{display:inline-block;background:var(--amber);color:#3a2806;font-family:var(--mono);
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.66rem;padding:.3rem .75rem;border-radius:99px;margin-bottom:.75rem;}
.adobe-offer__kicker{margin:0 0 .7rem;font-weight:700;color:var(--ink);font-size:.98rem;}
.adobe-offer__deal{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;}
.adobe-offer__from,.adobe-offer__to{display:flex;flex-direction:column;gap:.1rem;}
.adobe-offer__lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);}
.adobe-offer__was{font-size:.95rem;color:var(--ink-3);text-decoration:line-through;text-decoration-color:#c0392b;text-decoration-thickness:2px;}
.adobe-offer__arrow{width:20px;height:20px;color:var(--amber-700);flex:none;margin-top:.7rem;}
.adobe-offer__now{font-size:1.3rem;font-weight:800;color:var(--blue);letter-spacing:-.01em;line-height:1;}
.adobe-offer__per{font-size:.8rem;font-weight:600;color:var(--ink-2);margin-left:.12rem;}
.adobe-offer__note{margin:.6rem 0 0;font-size:.78rem;color:var(--ink-2);line-height:1.4;}
.adobe-offer__note strong{color:var(--amber-700);}
.adobe-offer__apps{display:flex;flex-wrap:wrap;gap:.38rem;list-style:none;margin:.95rem 0 0;padding:0;}
.adobe-offer__app{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  font-weight:700;font-size:.74rem;letter-spacing:-.01em;box-shadow:0 1px 3px rgba(14,31,43,.22);cursor:default;}
.adobe-offer__more{margin-top:1.1rem;display:inline-flex;align-items:center;gap:.4rem;font-size:.86rem;font-weight:600;
  color:var(--blue-700);text-decoration:none;padding:.45rem .95rem;border:1px solid var(--line-2);border-radius:99px;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);}
.adobe-offer__more svg,.perk__more svg{width:15px;height:15px;transition:transform .2s var(--ease);}
.adobe-offer__more:hover{background:var(--blue);border-color:var(--blue);color:#fff;}
.adobe-offer__more:hover svg,.perk__more:hover svg{transform:translateX(2px);}

/* Voordeel-kaarten naast Adobe: vullen de resterende breedte, knop onderaan */
.benefits .perk{flex:1 1 240px;max-width:360px;display:flex;flex-direction:column;}
.perk__more{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;font-size:.86rem;font-weight:600;
  color:var(--blue-700);text-decoration:none;padding:.45rem .95rem;border:1px solid var(--line-2);border-radius:99px;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);}
.benefits .perk .perk__more{margin-top:auto;}
.perk__more:hover{background:var(--blue);border-color:var(--blue);color:#fff;}
@media (max-width:760px){ .adobe-offer{max-width:100%;flex-basis:100%;} }

/* ===================== Leerproces-balk (onder de hero) ===================== */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.lpbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.lpbar__wrap { position: relative; padding: 2.2rem var(--pad-x) 1.5rem; }
.lpbar__track { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.lpbar__line { position: absolute; top: 27px; left: 0; width: 0; height: 3px; border-radius: 3px; background: var(--line-2); z-index: 0; overflow: hidden; }
.lpbar__fill { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--blue-600), var(--blue)); }
.lpstep { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .65rem; }
.lpstep__ic { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--line-2); color: var(--ink-3); transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.lpstep__ic .lpicon { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lpstep.is-active .lpstep__ic { background: var(--blue); border-color: var(--blue); color: #fff; transform: scale(1.08); box-shadow: 0 8px 18px rgba(0,130,194,.28); }
.lpstep--5.is-active .lpstep__ic { background: var(--amber); border-color: var(--amber); color: #3a2806; box-shadow: 0 8px 18px rgba(240,164,41,.32); }
.lpstep__label { font-size: .82rem; font-weight: 600; color: var(--ink-2); line-height: 1.25; max-width: 12ch; transition: color .3s var(--ease); }
.lpstep.is-active .lpstep__label { color: var(--ink); }
/* vorderingen-ring rond stap 5 (loopt elke cyclus verder op) */
.lpring { position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(var(--amber) calc(var(--p, 0) * 1%), var(--line-2) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); transition: --p .6s var(--ease); z-index: 0; pointer-events: none; }
.lpstep--5.is-grow .lpstep__ic { animation: lpGrow .7s var(--ease); }
@keyframes lpGrow { 0% { transform: scale(1.08); } 45% { transform: scale(1.24); } 100% { transform: scale(1.08); } }
/* af-en-toe-bubbel 'Vraag stellen' / 'Advies vragen' */
.lpbranch { position: absolute; top: 0; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; opacity: 0; transition: opacity .35s var(--ease), top .35s var(--ease); pointer-events: none; z-index: 4; }
.lpbranch.is-on { opacity: 1; }
.lpbranch__bubble { display: flex; align-items: center; gap: .35rem; background: var(--ink); color: #fff; border-radius: 99px; padding: .35rem .75rem; font-size: .74rem; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-1); }
.lpbranch__bubble svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lpbranch__stem { width: 2px; height: 12px; background: var(--ink); }
/* cyclus-melding */
.lpbar__loop { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.4rem; color: var(--ink-3); font-size: .8rem; }
.lpbar__loop-ic { width: 17px; height: 17px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lpbar__loop-ic.is-spin { animation: lpSpin .8s var(--ease); }
@keyframes lpSpin { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@media (max-width: 640px) {
  .lpbar__wrap { padding: 1.4rem var(--pad-x); }
  .lpbar__track { flex-direction: column; align-items: stretch; gap: .25rem; }
  .lpbar__line { display: none; }
  .lpbranch { display: none; }
  .lpstep { flex-direction: row; align-items: center; text-align: left; gap: 1rem; padding: .5rem 0; }
  .lpstep__ic { width: 46px; height: 46px; flex: none; }
  .lpstep__ic .lpicon { width: 21px; height: 21px; }
  .lpring { inset: -5px; }
  .lpstep__label { max-width: none; font-size: .92rem; }
  .lpbar__loop { margin-top: .8rem; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .lpstep .lpstep__ic { background: var(--blue); border-color: var(--blue); color: #fff; }
  .lpstep--5 .lpstep__ic { background: var(--amber); border-color: var(--amber); color: #3a2806; }
  .lpbar__fill { width: 100% !important; }
  .lpring { --p: 70; }
}