/* STUDIO EMBERLANE — SPOTLIGHT — main.css v3.0 */

/* ═══════════════════════════════════════════════════
   STUDIO EMBERLANE — THEMA: SPOTLIGHT
   
   Concept: Achter de schermen van de bioscoop.
   De spotlights die door de vleugels snijden voor
   de voorstelling begint — warm, gericht, doelgericht.
   
   Palet:    Filmdoek-crème × Spotlight-amber × Diepe schaduw
   Fonts:    Cormorant (display) · Libre Baskerville (body)
             DM Sans (UI)
   Sfeer:    Licht mode · Warm amber · Cinematische spots
             Zachte schaduwen · Dramatische typografie
═══════════════════════════════════════════════════ */

:root {
  /* ── KERN: EDITORIAL WARMTE ── */
  --doek:       #F9F9FC;   /* koel off-white                           */
  --doek-warm:  #F1F1F7;   /* koel lichtgrijs                          */
  --doek-rand:  #D9D9E5;   /* koele borders                            */
  --doek-diep:  #C2C2D0;   /* koele scheiders                          */

  /* ── TEKST: WARMER & ZACHTER ── */
  --inkt:       #1C1C2E;   /* donker indigo-zwart                      */
  --inkt-mid:   #2D2D40;   /* body tekst — koel donker                 */
  --inkt-zacht: #5A5A72;   /* subtekst — koel middengrijs              */
  --inkt-hint:  #7A7A90;   /* labels — koel grijs                      */

  /* ── ACCENTKLEUREN: EDITORIAL ── */
  /* Behoud spotlight identiteit, maar warmer en zachter */
  --spot:       #5B4DB5;   /* warmer paars-indigo                      */
  --spot-mid:   #7A6DC4;   /* zachter midtone                          */
  --spot-zacht: #A399D4;   /* veel zachter accent                      */
  --spot-pale:  #F3F0FA;   /* heel subtiele background                 */
  --spot-rand:  rgba(91,77,181,.15);

  /* ── PAARS: WARMER ACCENT ── */
  --paars:      #6B4D94;   /* warmer paars met bruin undertone         */
  --paars-tekst:#FFFFFF;   /* wit op paars                             */
  --paars-pale: #F5F1F8;   /* heel licht paars                         */
  --paars-rand: rgba(107,77,148,.15);

  /* ── WARM BRUIN VOOR EDITORIAL BALANCE ── */
  /* VERVANGEN DOOR SPOT-MID (v8.3) — bruin → paars/indigo */
  --bruin:      #5B4DB5;   /* alias voor spot (legacy)                 */
  --bruin-diep: #5B4DB5;   /* spot — dieper paars voor contrasten      */
  --bruin-pale: #F3F0FA;   /* spot-pale — licht paars background       */

  /* ── SCÈNE-DONKER (minimaal gebruik) ── */
  --scene:      #1E1A2E;   /* donker indigo — past bij paars accent    */
  --scene-mid:  #2A2540;   /* donker paars midtone                     */

  /* ── TYPOGRAFIE ── */
  --display: 'Cormorant', Georgia, serif;
  --serif:   'Libre Baskerville', Georgia, serif;
  --sans:    'DM Sans', system-ui, sans-serif;
  --leest:   'Atkinson Hyperlegible', Arial, sans-serif;

  /* ── HULP ── */
  --lijn:  1px solid var(--doek-rand);
  --t:     320ms cubic-bezier(.22,1,.36,1);  /* iets rustiger */
  --t-mid: 480ms cubic-bezier(.22,1,.36,1);  /* meer bedachtzaam */
  
  /* ── ZACHTE SCHADUWEN (editorial) ── */
  --shadow-subtiel: 0 1px 3px rgba(27,27,47,.06);
  --shadow-zacht:   0 2px 8px rgba(27,27,47,.08);
  --shadow-medium:  0 4px 16px rgba(27,27,47,.10);
}

/* ─────────────────────────────────────────────────
   RESET & BASIS
───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:17px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
body{
  font-family:var(--serif);
  font-size:1.125rem; /* 18px — WCAG aanbeveling */
  background:var(--doek);
  color:var(--inkt-mid);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
body.ml{font-size:19px;line-height:2.1}
body.ml *{font-family:var(--leest)!important}
body.ml [data-n]{display:none!important}
[data-m]{display:none}
body.ml [data-m]{display:revert}

.wrap{width:min(100% - 3rem, 74rem);margin-inline:auto}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--spot);outline-offset:3px;border-radius:2px;outline-offset:3px}

/* ─────────────────────────────────────────────────
   SKIP LINKS
───────────────────────────────────────────────── */
.skip-links{position:absolute;top:0;left:0;z-index:9999}
.skip-link{
  display:inline-block;padding:.5em 1em;
  background:var(--spot);color:var(--doek);
  font-family:var(--sans);font-weight:700;font-size:.875rem;
  text-decoration:none;transform:translateY(-120%);
  transition:transform var(--t);
}
.skip-link:focus{transform:translateY(0)}

/* ─────────────────────────────────────────────────
   TAALWISSELAAR BALK
───────────────────────────────────────────────── */
.tb-balk{
  background:var(--spot-pale);
  border-bottom:var(--lijn);
  padding:.6rem 0;
  position:sticky;top:0;z-index:600;
}
.tb-in{display:flex;align-items:center;justify-content:center;gap:1.25rem}
.tb-label{
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--spot);
}
.tb-opt{font-family:var(--sans);font-size:.75rem;color:var(--inkt-zacht);transition:color var(--t)}
.tb-opt.aan{color:var(--spot);font-weight:500}
.sch{position:relative;display:inline-block;width:44px;height:24px}
.sch input{position:absolute;opacity:0;width:0;height:0}
.sch-baan{
  position:absolute;inset:0;cursor:pointer;
  background:var(--doek-rand);border-radius:999px;
  transition:background var(--t);border:1px solid var(--doek-diep);
}
.sch-baan::after{
  content:'';position:absolute;
  width:16px;height:16px;border-radius:50%;
  background:var(--inkt-hint);top:3px;left:3px;
  transition:transform var(--t),background var(--t);
}
.sch input:checked~.sch-baan{background:var(--spot);border-color:var(--spot)}
.sch input:checked~.sch-baan::after{transform:translateX(20px);background:var(--doek)}
.sch input:focus-visible~.sch-baan{outline:2px solid var(--spot);outline-offset:2px}
.ml-badge{
  display:none;background:var(--paars);color:var(--paars-tekst);
  font-family:var(--sans);font-size:.75rem;padding:.2em .65em;border-radius:2px;font-weight:500;
}
body.ml .ml-badge{display:inline-block}

/* ─────────────────────────────────────────────────
   HEADER & LOGO
───────────────────────────────────────────────── */
.site-header{
  background:var(--doek);
  border-bottom:var(--lijn);
  padding:1.125rem 0;
  position:sticky;top:33px;z-index:500;
  box-shadow:var(--shadow-subtiel); /* veel zachter */
}
.nav-in{display:flex;align-items:center;justify-content:space-between}

/* Logo: vonk in de laan — donkere versie */
.logo{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.logo-vonk{flex-shrink:0;transition:transform var(--t)}
.logo:hover .logo-vonk{transform:translateY(-2px)}
.logo-namen{line-height:1.2}
.logo-hoofd{
  font-family:var(--display);font-size:1.5rem;font-weight:700;
  letter-spacing:.01em;color:var(--inkt);display:block;line-height:1;
}
.logo-hoofd em{color:var(--spot);font-style:normal;font-weight:700}
.logo-sub{
  font-family:var(--sans);font-size:.75rem;font-weight:400;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--inkt-hint);display:block;margin-top:.25rem;
}

.burger{
  display:none;background:none;border:1px solid var(--doek-rand);
  color:var(--inkt-mid);padding:.4em .8em;font-size:1.1rem;
  cursor:pointer;min-height:44px;line-height:1;border-radius:2px;
}
.burger[aria-expanded="true"] .ico-open{display:none}
.burger[aria-expanded="false"] .ico-sluit{display:none}

.nav-menu ul{display:flex;align-items:center;gap:1.75rem;list-style:none}
.nav-menu a{
  font-family:var(--sans);font-size:1.05rem;font-weight:500;
  color:var(--inkt-zacht);text-decoration:none;
  transition:color var(--t);letter-spacing:.03em;
}
.nav-menu a:hover{color:var(--inkt)}
.status-pil{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  padding:.25em .875em;border:1px solid rgba(34,139,86,.3);
  color:#228B56;background:rgba(34,139,86,.08);letter-spacing:.04em;
}
.pil-stip{
  width:5px;height:5px;border-radius:50%;
  background:#228B56;animation:knip 2.5s ease-in-out infinite;
}
@keyframes knip{0%,100%{opacity:1}50%{opacity:.2}}
.nav-cta{
  font-family:var(--sans);font-size:.8rem;font-weight:600;
  background:var(--spot)!important;color:var(--doek)!important;
  border:1px solid var(--spot)!important;
  padding:.45em 1.3em!important;transition:all var(--t)!important;
  border-radius:3px;
}
.nav-cta:hover{
  background:var(--spot-mid)!important;
  border-color:var(--spot-mid)!important;
}

/* ─────────────────────────────────────────────────
   HERO — filmframe met intertitel
───────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:75vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:5rem;
  background:var(--doek-warm);
}

/* Donkere filmachtergrond met grain-textuur */
.hero-achter{
  position:absolute;inset:0;
  /* Drie spotlights vanuit de coulissen — links, midden, rechts */
  background:
    radial-gradient(ellipse 55% 70% at 15% 110%,
      rgba(80,64,176,.12) 0%,
      rgba(80,64,176,.06) 40%,
      transparent 65%),
    radial-gradient(ellipse 40% 60% at 78% 105%,
      rgba(80,64,176,.08) 0%,
      rgba(80,64,176,.04) 45%,
      transparent 65%),
    radial-gradient(ellipse 30% 50% at 48% 100%,
      rgba(92,61,122,.12) 0%,
      transparent 55%),
    var(--doek-warm);
  z-index:0;
}
/* Zachte grain — als fotopapier, niet als film */
.hero-achter::after{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events:none;
}

/* Letterbox-strepen */
.hero-letterbox{
  position:absolute;left:0;right:0;
  pointer-events:none;z-index:3;
}
/* Boven: dunne amber schaduwlijn — als theaterdoek dat omhoog gaat */
.hero-letterbox.boven{
  top:0;height:4px;
  background:linear-gradient(90deg,var(--spot),var(--paars),var(--spot));
  opacity:.6;
}
.hero-letterbox.onder{display:none}

/* Filmstrip gaatjes — links -->
.hero-strip{
  position:absolute;top:0;bottom:0;
  width:28px;background:rgba(27,27,47,.06);
  z-index:4;display:flex;flex-direction:column;
  justify-content:space-around;padding:12px 0;
  border-right:1px solid rgba(27,27,47,.08);
}
.hero-strip.links{left:0;border-right:1px solid rgba(27,27,47,.07);border-left:none}
.hero-strip.rechts{right:0;border-left:1px solid rgba(27,27,47,.07);border-right:none}
.strip-gat{
  width:14px;height:10px;
  background:rgba(27,27,47,.06);
  border:1px solid rgba(27,27,47,.1);
  border-radius:2px;margin:0 auto;
}

/* Frame-nummering filmisch */
.hero-frame-nr{
  position:absolute;bottom:2rem;left:44px;
  font-family:var(--sans);font-size:.75rem;
  color:var(--inkt-hint);letter-spacing:.2em;
  z-index:5;font-variant-numeric:tabular-nums;
}

/* Hero inhoud */
.hero-in{
  position:relative;z-index:5;
  padding:0 3rem;
  max-width:min(100% - 6rem, 74rem);
  margin-inline:auto;
  width:100%;
}

/* Eyebrow-label */
.hero-oog{
  display:flex;align-items:center;gap:1rem;
  margin-bottom:2rem;
}
.hero-oog span{color:var(--spot);font-weight:500}
.hero-oog-lijn{width:3rem;height:1px;background:var(--spot);flex-shrink:0;opacity:.7}
.hero-oog span{
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--spot);
}

/* Intertitel — rustiger, editorialer */
.hero-intertitel{
  font-family:var(--display);
  font-size:clamp(2.5rem,5.5vw,4.75rem); /* veel kleiner — editorial */
  font-weight:500;  /* lichter gewicht */
  font-style:normal;
  line-height:1.15; /* iets meer ruimte */
  letter-spacing:-.01em; /* minder strak */
  color:var(--inkt);
  margin-bottom:2rem;
  max-width:22ch; /* iets breder voor leesbaarheid */
}
.hero-intertitel em{
  color:var(--spot);
  font-style:normal;
  font-weight:600; /* subtiel accent */
}

/* Stelling — meer witruimte */
.hero-stelling{
  font-family:var(--serif);
  font-size:1.125rem; /* iets groter voor leesbaarheid */
  line-height:1.9;  /* meer ruimte */
  color:var(--inkt-zacht);
  max-width:52ch; /* breder voor comfort */
  margin-bottom:2.75rem;
  border-left:2px solid var(--spot-mid); /* warmer accent */
  padding-left:1.5rem; /* meer ruimte */
}

/* Acties */
.hero-acties{display:flex;flex-wrap:wrap;gap:.875rem;align-items:center}

/* Auteursfoto in hero — rechts, klein, in filmframe */
.hero-portret{
  position:absolute;
  right:3rem;bottom:10vh;
  z-index:5;
}
.portret-frame{
  width:160px;
  border:1px solid var(--doek-rand);
  position:relative;
  filter:sepia(8%) contrast(1.02); /* subtieler */
  overflow:hidden;
  box-shadow:var(--shadow-zacht); /* veel zachter */
}
.portret-frame img{
  width:100%;aspect-ratio:3/4;
  object-fit:cover;display:block;
}
.portret-leeg{
  width:160px;aspect-ratio:3/4;
  background:var(--doek-warm);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:.5rem;color:var(--inkt-hint);
  font-family:var(--sans);font-size:.75rem;text-align:center;padding:1rem;
}
/* Amber accent lijn onder portret */
.portret-frame::after{
  content:'';position:absolute;
  bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--spot),var(--paars));
}
.portret-naam{
  font-family:var(--sans);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--inkt-hint);margin-top:.5rem;text-align:center;
}

/* ─────────────────────────────────────────────────
   KNOPPEN
───────────────────────────────────────────────── */
/* ── BUTTONS: UNIFORM SYSTEEM (v8.5) ─────────── */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  font-family:var(--sans);font-size:1rem;font-weight:500;
  text-decoration:none;cursor:pointer;border:2px solid transparent;
  padding:.75em 1.875em;min-height:48px;line-height:1;
  letter-spacing:.02em;transition:all var(--t);white-space:nowrap;
  border-radius:6px;
}
.knop:active{transform:scale(.97)}
.knop:focus-visible{outline:3px solid var(--spot);outline-offset:3px}

/* Primair — gevuld paars */
.knop-p{background:var(--spot);color:var(--doek);border-color:var(--spot)}
.knop-p:hover{background:var(--spot-mid);border-color:var(--spot-mid)}

/* Secundair / klein — ghost outline */
.knop-s,.knop-o{
  background:transparent;color:var(--spot);
  border:2px solid var(--spot);
}
.knop-s:hover,.knop-o:hover{
  background:var(--spot);color:var(--doek);
  border-color:var(--spot);
}

/* Groot — iets meer padding */
.knop-l{
  background:var(--spot);color:var(--doek);border-color:var(--spot);
  padding:1em 2.5em;
}
.knop-l:hover{background:var(--spot-mid);border-color:var(--spot-mid)}

/* LinkedIn knop */
───────────────────────────────────────────────── */
.bewijs-balk{
  background:var(--doek-warm);
  border-block:var(--lijn);
  padding:1.25rem 0;
}
.bewijs-in{display:flex;align-items:center;flex-wrap:wrap;gap:0}
.bewijs-lbl{
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--inkt-hint);margin-right:2rem;flex-shrink:0;
}
.bewijs-items{display:flex;flex-wrap:wrap}
.bewijs-item{
  line-height:1.5;
  font-family:var(--serif);font-size:.875rem;font-style:normal;
  color:var(--inkt-zacht);padding:.2em 1.25rem;
  border-left:1px solid var(--doek-rand);
}
.bewijs-item:first-child{border-left:none}
.bewijs-item strong{color:var(--inkt-mid);font-style:normal;font-weight:500}

/* ─────────────────────────────────────────────────
   SECTIES
───────────────────────────────────────────────── */
.sectie{padding-block:5.5rem;border-bottom:var(--lijn)}
.s-donker{background:var(--scene);color:var(--doek)}
.s-donker .s-oog-lbl{color:var(--spot-zacht)}
.s-donker .knop-s,.s-donker .knop-o{color:var(--doek);border-color:rgba(248,245,240,.4)}
.s-donker .knop-s:hover,.s-donker .knop-o:hover{background:var(--spot);color:var(--doek);border-color:var(--spot)}
.s-midden{background:var(--doek-warm)}
/* Spotlight-sectie: dramatisch donker — spaarzaam ingezet */
.s-scene{background:var(--scene)}

.s-oog{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.s-oog::before{
  content:'';display:block;width:2.5rem;height:1px;
  background:var(--spot);flex-shrink:0;opacity:.8;
}
.s-oog-lbl{
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--spot);opacity:.9;
}
.s-h2{
  font-family:var(--display);
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:600;line-height:1.1;letter-spacing:-.01em;
  color:var(--inkt);margin-bottom:1rem;
}
.s-h2 em{font-style:normal;color:var(--spot)}
.s-h2 strong,.s-h2 b{font-weight:600}
/* Op donkere scene-secties: doek-kleur */
.s-scene .s-h2{color:var(--doek)}
.s-scene .s-p{color:rgba(248,244,238,.92)}
.s-scene .s-oog-lbl{color:rgba(248,244,238,.85)}
.s-p{
  font-family:var(--serif);font-size:1.0625rem;
  line-height:1.85;color:var(--inkt-zacht);max-width:52ch;
}

/* ─────────────────────────────────────────────────
   OVER MIJ — asymmetrisch filmisch grid
───────────────────────────────────────────────── */
.over-grid{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:5rem;align-items:start;
}
.over-foto-kader{
  aspect-ratio:3/4;overflow:hidden;
  background:var(--doek-warm);
  border:1px solid var(--doek-rand);
  filter:sepia(8%) contrast(1.02); /* subtieler */
  position:relative;
  box-shadow:var(--shadow-zacht); /* zachter */
}
.over-foto-kader img{width:100%;height:100%;object-fit:cover;display:block}
.over-foto-kader::after{
  content:'';position:absolute;
  bottom:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--spot),var(--paars));
}
.over-foto-leeg{
  width:100%;height:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:.75rem;text-align:center;padding:1.5rem;
  color:var(--inkt-hint);font-family:var(--sans);font-size:.8rem;
}
.over-citaat{
  font-family:var(--display);font-style:normal;
  font-size:1.4rem;line-height:1.6;
  color:var(--inkt);
  border-left:3px solid var(--spot);
  padding:.75rem 0 .75rem 1.5rem;
  margin:1.875rem 0;
}
.over-alinea{
  font-family:var(--serif);font-size:1.0625rem;
  line-height:1.9;color:var(--inkt-mid);margin-bottom:.5rem;
  /* v3.2: Toegankelijkheids-achtergrond */
  background:var(--doek-warm,#EEE9E1);
  padding:var(--ruimte-md,24px);
  border-radius:4px;
}
.over-alinea p{margin-bottom:1.25rem}
.over-alinea p:last-child{margin-bottom:0}
.prestaties{
  display:flex;flex-direction:column;gap:.625rem;margin-top:1.5rem;
  /* v3.2: Toegankelijkheids-achtergrond */
  background:var(--spot-pale,#EEE8FF);
  padding:var(--ruimte-md,24px);
  border-radius:8px;
  border:1px solid var(--spot,#5040B0);
}
.prestatie{
  display:flex;align-items:baseline;gap:.875rem;
  padding:.875rem 1.125rem;
  background:var(--spot-pale);
  border-left:2px solid var(--spot);
  border-radius:0 3px 3px 0;
}
.p-stip{color:var(--spot);font-size:.75rem;flex-shrink:0}
.p-hoofd{display:block;font-family:var(--serif);font-size:.9375rem;font-weight:700;color:var(--inkt);margin-bottom:.2em}
.p-sub{font-family:var(--serif);font-size:.875rem;color:var(--inkt-zacht);line-height:1.6}

/* ─────────────────────────────────────────────────
   AANBOD — numbered list cinematisch
───────────────────────────────────────────────── */
.aanbod-lijst{margin-top:2.5rem}
.dienst{
  display:grid;
  grid-template-columns:4rem 1fr auto;
  gap:1.75rem;align-items:start;
  padding:2rem 0;
  border-bottom:var(--lijn);
  transition:opacity var(--t);
}
.dienst:last-child{border-bottom:none}
.dienst:hover{opacity:.8}
.d-nr{
  font-family:var(--display);font-size:2rem;font-weight:300;
  color:rgba(27,27,47,.12);line-height:1;
  padding-top:.1em;
}
.d-naam{
  font-family:var(--display);font-size:1.5rem;font-weight:600;
  color:var(--inkt);margin-bottom:.5rem;letter-spacing:-.01em;
}
.d-tekst{
  font-family:var(--serif);font-size:.9375rem;
  line-height:1.8;color:var(--inkt-zacht);
}
.d-link{
  font-family:var(--sans);font-size:.8rem;font-weight:500;
  color:var(--spot);text-decoration:none;white-space:nowrap;
  padding-top:.4em;transition:opacity var(--t);
}
.d-link:hover{opacity:.7}

/* ─────────────────────────────────────────────────
   DIENST-KAARTEN — uitgebreid aanbod
───────────────────────────────────────────────── */
.dienst-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem;
  margin-top:2.5rem;
}
.dienst-kaart{
  background:var(--doek);
  border:2px solid var(--doek-rand);
  border-radius:8px;
  padding:2rem;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  transition:border-color var(--t),box-shadow var(--t);
}
.dienst-kaart:hover{
  border-color:var(--spot-rand);
  box-shadow:0 6px 24px rgba(27,27,47,.09);
}
.dk-kop{
  display:flex;
  align-items:baseline;
  gap:.75rem;
}
.dk-nr{
  font-family:var(--display);
  font-size:2rem;
  font-weight:700;
  color:var(--spot);
  line-height:1;
  opacity:.5;
}
.dk-naam{
  font-family:var(--display);
  font-size:1.35rem;
  font-weight:700;
  color:var(--inkt);
  line-height:1.3;
}
.dk-blok{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.dk-label{
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:700;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--spot);
  background:rgba(80,64,176,0.08);
  padding:.3em .65em;
  border-radius:3px;
  border:1px solid rgba(80,64,176,0.2);
  display:inline-block;
}
.dk-tekst{
  font-family:var(--serif);
  font-size:.9375rem;
  line-height:1.7;
  color:var(--inkt-mid);
}

/* Geen cursief — nergens op de site */
em, i, em *, i * { font-style: normal !important; }
.dk-punten{
  list-style:none;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.dk-punten li{
  font-family:var(--sans);
  font-size:.85rem;
  color:var(--inkt-mid);
  padding-left:1.2em;
  position:relative;
}
.dk-punten li::before{
  content:"◆";
  position:absolute;
  left:0;
  color:var(--spot);
  font-size:.75rem;
  top:.35em;
}
.dk-aanbeveling{
  background:#EFEAFD;
  border-left:3px solid var(--spot);
  border-radius:0 6px 6px 0;
  padding:1rem 1.25rem;
  margin:0;
}
.dk-quote p{
  font-family:var(--serif);
  font-size:.875rem;
  font-style:normal;
  line-height:1.7;
  color:var(--inkt-mid);
  margin:0;
}
.dk-quote-bron{
  display:flex;
  flex-direction:column;
  margin-top:.5rem;
}
.dk-quote-naam{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  color:var(--inkt);
}
.dk-quote-functie{
  font-family:var(--sans);
  font-size:.72rem;
  color:var(--inkt-zacht);
}
.dk-link{
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  font-family:var(--sans);font-size:1rem;font-weight:500;
  color:var(--spot);text-decoration:none;
  border:2px solid var(--spot);border-radius:6px;
  padding:.75em 1.875em;min-height:48px;line-height:1;
  transition:all var(--t);white-space:nowrap;
  margin-top:auto;
}
.dk-link:hover{background:var(--spot);color:var(--doek);border-color:var(--spot)}
.dk-link:focus-visible{outline:3px solid var(--spot);outline-offset:3px}
.aanbod-header{max-width:54ch;margin-bottom:1rem}

@media(max-width:900px){
  .dienst-grid{grid-template-columns:1fr}
}

/* ─────────────────────────────────────────────────
   DIENST KAART ILLUSTRATIE (rechtsboven)
───────────────────────────────────────────────── */
.dienst-kaart-illu{position:relative;overflow:hidden}
.dk-illu{
  position:absolute;top:12px;right:12px;
  width:44px;height:44px;opacity:.45;
  pointer-events:none;
}
.dienst-kaart-illu:hover .dk-illu{opacity:.7}

/* ─────────────────────────────────────────────────
   SPREKEN + AANBEVELINGEN (2 kolommen)
───────────────────────────────────────────────── */
.spreken-abv-grid{
  display:grid;
  grid-template-columns:1fr;
  align-items:start;
}
.abv-kolom{
  max-width:none;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.75rem;
  margin-top:2rem;
}
.abv-kolom > .s-oog,
.abv-kolom > h2{
  grid-column:1 / -1;
}
.abv-kolom > h2{
  margin-bottom:.5rem;
}
@media(max-width:700px){
  .abv-kolom{grid-template-columns:1fr}
}
.abv-mini-kaart{
  background:#EFEAFD;
  border:none;
  border-left:3px solid var(--spot);
  border-radius:0 6px 6px 0;
  padding:1.5rem 1.75rem;
  margin-bottom:0;
}
  transition:border-color var(--t);
}
#spreken-abv .abv-mini-kaart .abv-citaat p,
.abv-mini-kaart .abv-citaat p{
  font-family:'Libre Baskerville',Georgia,serif !important;
  font-size:.875rem;font-style:normal;
  line-height:1.7;color:var(--inkt-mid);margin:0;
  display:block;
  overflow:visible;
  -webkit-line-clamp:unset;
  -webkit-box-orient:unset;
}
.abv-mini-kaart .abv-persoon{margin-top:.5rem}
.abv-mini-kaart .abv-naam{
  font-family:var(--sans);font-size:.78rem;
  font-weight:600;color:var(--inkt);
}
.abv-mini-kaart .abv-functie{
  font-family:var(--sans);font-size:.72rem;
  color:var(--inkt-zacht);
}

/* ─────────────────────────────────────────────────
   OVER MIJ HOME (compact)
───────────────────────────────────────────────── */
.over-home-grid{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:2rem;
  align-items:center;
}
.over-home-foto{overflow:hidden;border-radius:6px}
.over-home-foto img{width:100%;height:auto;display:block;border-radius:6px;aspect-ratio:3/4;object-fit:cover}
@media(max-width:768px){
  .over-home-grid{grid-template-columns:1fr;text-align:center}
  .over-home-foto{max-width:140px;margin:0 auto}
}

/* ─────────────────────────────────────────────────
   CITAAT SECTIE — groot en donker
───────────────────────────────────────────────── */
.citaat-sectie{
  padding-block:7rem;
  background:var(--scene);
  border-bottom:var(--lijn);
  position:relative;overflow:hidden;
}
.citaat-sectie::before{
  content:'';position:absolute;
  width:700px;height:700px;border-radius:50%;
  /* Spotlight van boven: projectorlicht dat de spreker verlicht */
  background:radial-gradient(ellipse 50% 60% at 50% 0%,rgba(80,64,176,.1) 0%,rgba(196,114,14,.06) 50%,transparent 75%);
  top:0;left:50%;transform:translateX(-50%);pointer-events:none;
}
.citaat-in{
  display:grid;grid-template-columns:1fr 1fr;
  gap:5rem;align-items:center;
}
.groot-citaat{
  font-family:var(--display);font-style:normal;
  font-size:clamp(1.75rem,3.5vw,2.6rem);
  font-weight:400;line-height:1.3;
  /* Op donkere scene: doek-kleur */
  color:var(--doek);position:relative;
  padding-top:2rem;
}
.groot-citaat::before{
  content:'\201C';
  position:absolute;top:-.5em;left:-.1em;
  font-size:6rem;line-height:1;
  color:var(--spot);opacity:.4;
  font-style:normal;
}
.citaat-bron{
  font-family:var(--sans);font-size:.75rem;
  color:rgba(248,244,238,.7);margin-top:1.25rem;
  letter-spacing:.08em;text-transform:uppercase;
}
.citaat-tekst{
  font-family:var(--serif);font-size:1.0625rem;
  line-height:1.85;color:rgba(248,244,238,.92);
}

/* ─────────────────────────────────────────────────
   BESCHIKBAARHEID
───────────────────────────────────────────────── */
.beschik{background:var(--doek-warm);border-block:var(--lijn);padding-block:5rem}
.beschik-kaart{
  text-align:center;padding:4rem 2rem;
  border:var(--lijn);position:relative;overflow:hidden;
  background:var(--doek);
  box-shadow:0 4px 24px rgba(27,27,47,.08);
}
.beschik-kaart::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--spot),var(--paars));
}
.beschik-h2{
  font-family:var(--display);
  font-size:clamp(1.75rem,3.5vw,2.5rem);
  font-weight:600;color:var(--inkt);
  margin:1.25rem 0 .875rem;letter-spacing:-.01em;
}
.beschik-p{
  font-family:var(--serif);font-size:1.0625rem;
  color:var(--inkt-zacht);max-width:46ch;margin:0 auto 2rem;line-height:1.85;
}
.beschik-knoppen{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ─────────────────────────────────────────────────
   VIDEO SECTIE
───────────────────────────────────────────────── */
.video-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:4rem;align-items:center}
.yt-kader{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  cursor:pointer;background:var(--doek-warm);
  border:1px solid var(--doek-rand);
  box-shadow:0 8px 32px rgba(27,27,47,.12);
}
.yt-kader img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--t-mid)}
.yt-kader:hover img{transform:scale(1.04)}
.yt-play{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  filter:drop-shadow(0 4px 20px rgba(0,0,0,.6));
  transition:transform .3s;
}
.yt-kader:hover .yt-play{transform:translate(-50%,-50%) scale(1.12)}
.yt-kader iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.video-bijschr{
  font-family:var(--sans);font-size:.8rem;
  color:var(--inkt-hint);margin-top:.75rem;text-align:center;
  letter-spacing:.04em;
}

/* ─────────────────────────────────────────────────
   PUBLICATIES
───────────────────────────────────────────────── */
.uitgelicht-pub{
  display:grid;grid-template-columns:1fr 1fr;
  /* Spotlight: donker vlak met amber goud-accent */
  background:linear-gradient(135deg,var(--scene) 0%,#2A1A3E 100%);
  border:var(--lijn);overflow:hidden;margin-bottom:2.5rem;
}
.upl-beeld{
  min-height:280px;
  /* Spotlight van boven op het uitgelichte werk */
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(80,64,176,.1) 0%,rgba(27,27,47,.9) 70%);
  display:flex;align-items:center;justify-content:center;
  font-size:4rem;position:relative;overflow:hidden;
}
.upl-beeld img{width:100%;height:100%;object-fit:cover}
.upl-body{padding:2.5rem;display:flex;flex-direction:column;justify-content:center}
.upl-tag{
  display:inline-block;background:var(--spot);color:var(--doek);
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.3em .875em;margin-bottom:1rem;
}
.upl-titel{
  font-family:var(--display);font-size:1.9rem;font-weight:600;
  font-style:normal;color:var(--doek);line-height:1.15;margin-bottom:.75rem;
}
.upl-samenv{
  font-family:var(--serif);font-size:1rem;
  color:rgba(248,244,238,.92);line-height:1.8;margin-bottom:1.5rem;
}
.pub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.pub-kaart{
  background:var(--doek);border:var(--lijn);
  overflow:hidden;transition:border-color var(--t),box-shadow var(--t);
}
.pub-kaart:hover{border-color:var(--spot-rand);box-shadow:0 6px 24px rgba(27,27,47,.1)}
.pub-beeld{
  aspect-ratio:16/9;background:var(--doek-warm);
  display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;position:relative;overflow:hidden;
}
.pub-beeld img{width:100%;height:100%;object-fit:cover}
.pub-type{
  position:absolute;top:.75rem;left:.75rem;
  background:var(--spot);color:#FFFFFF;
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:.2em .65em;
}
.pub-in{padding:1.25rem}
.pub-meta{
  font-family:var(--sans);font-size:.72rem;
  color:var(--inkt-hint);margin-bottom:.5rem;letter-spacing:.06em;
}
.pub-naam{
  font-family:var(--display);font-size:1.15rem;font-weight:600;
  color:var(--inkt);line-height:1.3;margin-bottom:.5rem;
}
.pub-samenv{
  font-family:var(--serif);font-size:.9rem;
  color:var(--inkt-zacht);line-height:1.7;margin-bottom:1rem;
}
.pub-link{
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  font-family:var(--sans);font-size:1rem;font-weight:500;
  color:var(--spot);text-decoration:none;
  border:2px solid var(--spot);border-radius:6px;
  padding:.75em 1.875em;min-height:48px;line-height:1;
  transition:all var(--t);white-space:nowrap;
}
.pub-link:hover{background:var(--spot);color:var(--doek);border-color:var(--spot)}

/* ─────────────────────────────────────────────────
   PROJECTEN
───────────────────────────────────────────────── */
.projecten-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.project-dossier{
  background:var(--doek);border:var(--lijn);
  overflow:hidden;transition:border-color var(--t),box-shadow var(--t);
  border-radius:6px;
}
.project-dossier:hover{border-color:var(--spot-rand);box-shadow:0 6px 24px rgba(27,27,47,.1)}
.project-dossier.project-huidig{
  border-color:var(--spot);border-width:2px;
  grid-column:1 / -1;
  display:grid;grid-template-columns:1fr 2fr;
}
.project-foto{
  aspect-ratio:16/10;overflow:hidden;
  background:var(--doek-warm);
}
.project-foto img{width:100%;height:100%;object-fit:cover;display:block}
.project-foto-leeg{
  width:100%;height:100%;min-height:140px;
  display:flex;align-items:center;justify-content:center;
  color:var(--inkt-hint);font-family:var(--sans);font-size:.75rem;
}
.project-dossier.project-huidig .project-foto{aspect-ratio:auto;min-height:100%}
.project-huidig-label{
  font-family:var(--sans);font-size:.75rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--spot);margin-bottom:.5rem;
  display:flex;align-items:center;gap:.4rem;
}
.project-kop-balk{
  padding:1.25rem 1.5rem;
  display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;
  border-bottom:var(--lijn);
}
.project-titel{
  font-family:var(--display);font-size:1.3rem;font-weight:600;
  color:var(--inkt);line-height:1.2;
}
.project-status-badge{
  line-height:1.4;
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.25em .75em;white-space:nowrap;flex-shrink:0;
}
.ps-lopend{background:var(--paars-pale);color:var(--paars);border:1px solid var(--paars-rand)}
.ps-concept{background:var(--doek-warm);color:var(--inkt-hint);border:1px solid var(--doek-rand)}
.ps-afgerond{background:rgba(46,184,120,.08);color:#2EB878;border:1px solid rgba(46,184,120,.3)}
.ps-pauze{background:rgba(91,77,181,.08);color:var(--spot);border:1px solid rgba(91,77,181,.25)}
.project-body{padding:1.25rem 1.5rem}
.project-kernidee-label{
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--inkt-hint);margin-bottom:.5rem;
}
.project-kernidee{
  font-family:var(--serif);font-size:.9375rem;
  color:var(--inkt-zacht);line-height:1.7;margin-bottom:1.25rem;
}
.project-vb-labels{
  display:flex;justify-content:space-between;
  font-family:var(--sans);font-size:.72rem;color:var(--inkt-hint);
  font-weight:500;margin-bottom:.35rem;
}
.project-vb-baan{
  height:3px;background:var(--doek-rand);
  border-radius:2px;overflow:hidden;
}
.project-vb-vulling{
  height:100%;
  background:linear-gradient(90deg,var(--spot),var(--paars));
  border-radius:2px;
}
.projecten-cta{
  background:linear-gradient(135deg,var(--scene) 0%,#2A1A3E 100%);
  border:var(--lijn);padding:3rem 2rem;text-align:center;margin-top:3rem;
}
.projecten-cta h3{
  font-family:var(--display);font-size:1.75rem;font-weight:600;
  font-style:normal;color:var(--doek);margin-bottom:.75rem;
}
.projecten-cta p{
  font-family:var(--serif);font-size:1.0625rem;
  color:rgba(248,244,238,.92);max-width:48ch;margin:0 auto 2rem;line-height:1.8;
}

/* ─────────────────────────────────────────────────
   CONTACT HOME + MINI-AGENDA
───────────────────────────────────────────────── */
.contact-home-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:start;
}
.mini-agenda{
  background:var(--doek);
  border:var(--lijn);
  border-radius:8px;
  padding:1.5rem;
}
.mini-agenda-kop{
  font-family:var(--sans);font-size:.8rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--spot);margin-bottom:1rem;
}
.mini-agenda-grid{
  display:grid;
  grid-template-columns:auto repeat(5,1fr);
  gap:2px;
}
.mag-header{
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  color:var(--inkt-hint);text-align:center;
  padding:.35rem .25rem;letter-spacing:.05em;
}
.mag-week{
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  color:var(--inkt-hint);padding:.4rem .5rem .4rem 0;
  display:flex;align-items:center;
}
.mag-cel{
  text-align:center;padding:.4rem .25rem;
  background:var(--doek-warm);border-radius:3px;
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
}
.mag-ico{font-size:.85rem;line-height:1}
.mag-datum{font-family:var(--sans);font-size:.75rem;line-height:1.4;color:var(--inkt-hint)}
.mini-agenda-legenda{
  display:flex;flex-wrap:wrap;gap:.75rem;
  margin-top:1rem;padding-top:.75rem;
  border-top:var(--lijn);
}
.mag-leg-item{
  font-family:var(--sans);font-size:.75rem;
  color:var(--inkt-zacht);display:flex;align-items:center;gap:.3rem;
}
@media(max-width:900px){
  .contact-home-grid{grid-template-columns:1fr}
}

/* ─────────────────────────────────────────────────
   CONTENT
───────────────────────────────────────────────── */
.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:3rem;align-items:start}
.content-artikel{
  background:var(--doek);border:var(--lijn);
  overflow:hidden;margin-bottom:1.25rem;transition:border-color var(--t),box-shadow var(--t);
}
.content-artikel:hover{border-color:var(--spot-rand);box-shadow:0 4px 16px rgba(27,27,47,.08)}
.content-artikel-kop{
  display:flex;align-items:flex-start;gap:1rem;
  padding:1.5rem;border-bottom:var(--lijn);
}
.content-artikel-meta{flex:1}
.content-datum{
  font-family:var(--sans);font-size:.75rem;
  color:var(--inkt-hint);letter-spacing:.06em;margin-bottom:.3rem;
}
.content-titel{
  font-family:var(--display);font-size:1.25rem;font-weight:600;
  color:var(--inkt);line-height:1.25;margin-bottom:.4rem;
}
.content-samenv{
  font-family:var(--serif);font-size:.9rem;
  color:var(--inkt-zacht);line-height:1.65;
}
.content-tag{
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.25em .65em;flex-shrink:0;
}
.ct-vrij{background:var(--doek-warm);color:var(--inkt-hint);border:1px solid var(--doek-rand)}
.ct-premium{background:var(--spot);color:var(--doek)}
.content-slot{
  padding:1.25rem 1.5rem;display:flex;
  align-items:center;gap:1rem;justify-content:space-between;
}
.slot-blok{
  background:var(--paars-pale);
  border:1px solid var(--paars-rand);padding:2.5rem 2rem;
  text-align:center;margin-bottom:1.5rem;
}
.slot-kop{
  font-family:var(--display);font-size:1.4rem;font-weight:600;
  font-style:normal;color:var(--inkt);margin-bottom:.5rem;
}
.slot-p{
  font-family:var(--serif);font-size:.9375rem;
  color:var(--inkt-zacht);line-height:1.7;max-width:42ch;margin:0 auto 1.5rem;
}
.slot-voordelen{
  list-style:none;text-align:left;max-width:30ch;
  margin:0 auto 1.75rem;display:flex;flex-direction:column;gap:.6rem;
}
.slot-voordelen li{
  font-family:var(--serif);font-size:.9rem;color:var(--inkt-zacht);
  display:flex;align-items:flex-start;gap:.5em;
}
.slot-voordelen li::before{
  content:'◈';color:var(--spot);font-size:.8rem;
  margin-top:.15em;flex-shrink:0;
}
.notif-kaart{
  background:var(--doek);border:var(--lijn);
  border-top:3px solid var(--paars);padding:1.75rem;
  position:sticky;top:100px;
  box-shadow:0 4px 20px rgba(27,27,47,.08);
}
.notif-kop{
  font-family:var(--display);font-size:1.3rem;font-weight:600;
  color:var(--inkt);margin-bottom:.4rem;
}
.notif-p{
  font-family:var(--serif);font-size:.9rem;
  color:var(--inkt-zacht);line-height:1.65;margin-bottom:1.25rem;
}
.notif-succes{
  display:none;background:rgba(46,184,120,.08);border:1px solid rgba(46,184,120,.3);
  padding:1rem;color:#2EB878;font-family:var(--serif);
  font-size:.9rem;text-align:center;margin-top:.75rem;
}

/* ─────────────────────────────────────────────────
   OFFERTE & FORMULIEREN
───────────────────────────────────────────────── */
.offerte-grid{display:grid;grid-template-columns:1fr 490px;gap:5rem;align-items:start}
.tarief-tabel{width:100%;border-collapse:collapse;margin-top:1.5rem}
.tarief-tabel th{
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-hint);
  background:var(--doek-warm);padding:.875rem 1rem;
  text-align:left;border-bottom:var(--lijn);
}
.tarief-tabel td{
  font-family:var(--serif);padding:.9rem 1rem;
  border-bottom:1px solid var(--doek-rand);
  font-size:.9375rem;color:var(--inkt-mid);
}
.tarief-tabel td:last-child{
  color:var(--spot);font-weight:400;
  font-family:var(--display);font-size:1.05rem;
}
.tarief-tabel tr:last-child td{border-bottom:none}
.tarief-flexibel{background:var(--spot-pale)}
.tarief-noot{
  margin-top:.875rem;background:var(--spot-pale);
  border:1px solid var(--spot-rand);
  border-left:3px solid var(--spot);
  padding:.875rem 1rem;font-family:var(--serif);
  font-size:.875rem;color:var(--inkt-zacht);line-height:1.65;
}
.offerte-form{
  background:var(--doek);border:var(--lijn);
  padding:2.5rem;
  box-shadow:0 8px 32px rgba(27,27,47,.1);
}
.form-kop{
  font-family:var(--display);font-size:1.6rem;font-weight:600;
  color:var(--inkt);margin-bottom:.4rem;
}
.form-sub{font-family:var(--serif);font-size:.9375rem;color:var(--inkt-zacht);margin-bottom:2rem}
.form-groep{margin-bottom:1.25rem}
.form-groep label{
  display:block;font-family:var(--sans);font-size:.8rem;font-weight:500;
  letter-spacing:.04em;color:var(--inkt-mid);margin-bottom:.5rem;
}
.ster{color:var(--spot);margin-left:2px}
.form-veld,.form-keuze,.form-tekstvak{
  width:100%;padding:.8em 1em;
  background:var(--doek-warm);border:1px solid var(--doek-rand);
  color:var(--inkt-mid);font-family:var(--serif);font-size:1rem;
  transition:border-color var(--t),background var(--t);
  appearance:none;min-height:48px;
}
.form-veld::placeholder,.form-tekstvak::placeholder{color:var(--inkt-hint)}
.form-veld:focus,.form-keuze:focus,.form-tekstvak:focus{
  border-color:var(--spot);background:var(--doek);outline:none;
  box-shadow:0 0 0 3px var(--spot-rand);
}
.form-tekstvak{resize:vertical;min-height:120px;line-height:1.7}
.form-keuze{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235040B0' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1em center;
  padding-right:2.5em;cursor:pointer;background-color:var(--doek);
}
.form-keuze option{background:var(--doek-warm);color:var(--inkt-mid)}
.form-rij{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-opm{font-family:var(--sans);font-size:.8rem;color:var(--inkt-hint);margin-bottom:.875rem}
.form-verzend{width:100%;margin-top:.5rem;font-size:1rem;justify-content:center}
.form-priv{font-family:var(--sans);font-size:.8rem;color:var(--inkt-hint);text-align:center;margin-top:.75rem;line-height:1.5}
.form-priv a{color:var(--spot)}

/* Foutmeldingen (toegankelijkheid) */
.form-err{
  font-family:var(--sans);font-size:.78rem;font-weight:500;
  color:#B33A3A;display:block;min-height:1.2em;
  line-height:1.5;margin-top:.25rem;
}
.form-err:empty{margin:0;min-height:0}
[aria-invalid="true"]{border-color:#B33A3A!important;box-shadow:0 0 0 2px rgba(179,58,58,.15)}
.ster{color:#B33A3A}
.form-succes{text-align:center;padding:2rem;display:none}
.form-succes-ico{font-size:2.5rem;color:var(--spot);margin-bottom:1rem}
.form-succes-kop{font-family:var(--display);font-size:1.5rem;color:var(--inkt);margin-bottom:.5rem}
.form-succes-tekst{font-family:var(--serif);color:var(--inkt-zacht);font-size:1rem}

/* ─────────────────────────────────────────────────
   AFSPRAKEN & KALENDER
───────────────────────────────────────────────── */
.afspraak-grid{display:grid;grid-template-columns:1fr 390px;gap:4rem;align-items:start}
.afsprk-intro{font-family:var(--serif);font-size:1.0625rem;line-height:1.8;color:var(--inkt-zacht);margin-bottom:1.5rem}
.afsprk-opties{display:flex;flex-direction:column;gap:.75rem;margin:1.5rem 0}
.optie-chip{
  display:flex;align-items:center;gap:.875rem;
  padding:1rem 1.125rem;background:var(--doek-warm);border:var(--lijn);
}
.optie-ico{font-size:1.25rem}
.optie-naam{display:block;font-family:var(--display);font-size:1rem;font-weight:600;color:var(--inkt)}
.optie-info{font-family:var(--serif);font-size:.875rem;color:var(--inkt-zacht)}
.afsprk-mail a{color:var(--spot)}
.kalender{background:var(--doek);border:var(--lijn);overflow:hidden;box-shadow:0 8px 32px rgba(27,27,47,.1)}
.kal-kop{
  background:var(--scene);border-bottom:var(--lijn);
  padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;
}
.kal-maand{font-family:var(--display);font-size:1.25rem;font-weight:600;color:var(--doek)}
.kal-pijlen{display:flex;gap:.5rem}
.kal-pijl{
  background:rgba(250,246,238,.1);border:1px solid rgba(250,246,238,.15);
  color:var(--inkt-zacht);width:36px;height:36px;
  cursor:pointer;font-size:1.1rem;display:flex;
  align-items:center;justify-content:center;
  transition:all var(--t);font-weight:400;border-radius:2px;
}
.kal-pijl:hover{background:rgba(250,246,238,.2);color:var(--doek)}
.kal-weekdagen{display:grid;grid-template-columns:repeat(7,1fr);padding:.75rem 1.25rem .4rem}
.kal-weekdagen span{
  text-align:center;font-family:var(--sans);font-size:.75rem;
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--doek-rand);
}
.kal-dagen{display:grid;grid-template-columns:repeat(7,1fr);padding:0 1.25rem 1.25rem;gap:.2rem}
.dag-knop{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:.9375rem;
  background:none;border:none;cursor:pointer;
  color:var(--inkt-mid);transition:background var(--t),color var(--t);
  min-height:38px;min-width:38px;
}
.dag-knop:hover:not(:disabled){background:var(--spot-pale);color:var(--inkt)}
.dag-knop.gekozen{background:var(--spot)!important;color:var(--doek)!important;font-weight:700}
.dag-knop.vandaag{border:1px solid var(--spot);color:var(--spot)}
.dag-knop.andere-mnd{color:var(--doek-diep)}
.dag-knop:disabled{opacity:.2;cursor:not-allowed}
.tijdsloten{padding:0 1.25rem 1.25rem}
.tijdsloten-label{
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--inkt-hint);margin-bottom:.75rem;
}
.tijden{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.tijd-knop{
  padding:.5em;text-align:center;
  background:var(--doek-warm);border:var(--lijn);
  font-family:var(--sans);font-size:.8125rem;font-weight:400;
  color:var(--inkt-mid);cursor:pointer;
  transition:all var(--t);min-height:40px;
  display:flex;align-items:center;justify-content:center;
}
.tijd-knop:hover{background:var(--spot-pale);border-color:var(--spot);color:var(--inkt)}
.tijd-knop.gekozen{background:var(--spot);border-color:var(--spot);color:var(--doek)}
.kal-form{padding:0 1.25rem 1.5rem}
.kal-sel{
  background:var(--spot-pale);border:1px solid var(--spot-rand);
  padding:.75rem 1rem;margin-bottom:1rem;
  font-family:var(--serif);font-size:.875rem;color:var(--inkt-mid);
}
.kal-veld{
  width:100%;padding:.65em .9em;
  background:var(--doek-warm);border:1px solid var(--doek-rand);
  color:var(--inkt-mid);font-family:var(--sans);font-size:.9rem;
  min-height:44px;transition:border-color var(--t);
  appearance:none;margin-bottom:.75rem;
}
.kal-veld:focus{border-color:var(--spot);outline:none;box-shadow:0 0 0 3px var(--spot-rand)}
.kal-veld-label{
  display:block;font-family:var(--sans);font-size:.8rem;
  font-weight:500;color:var(--inkt-mid);margin-bottom:.4rem;
}
.kal-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235040B0' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75em center;padding-right:2em;
}
.kal-verzend{width:100%;justify-content:center;margin-top:.5rem}

/* ─────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────── */
.site-footer{
  background:var(--scene);
  border-top:1px solid rgba(91,77,181,.25);
  padding-block:4.5rem 3rem;
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:4rem;margin-bottom:3rem}
.footer-logo-naam{
  font-family:var(--display);font-size:1.3rem;font-weight:600;
  color:var(--doek);display:block;margin-bottom:.25rem;
}
.footer-logo-naam em{color:rgba(180,168,255,.9);font-style:normal}
.footer-logo-tag{
  font-family:var(--sans);font-size:.75rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(248,244,238,.4);display:block;margin-bottom:1.25rem;
}
.footer-tekst{
  font-family:var(--serif);font-style:normal;font-size:.9375rem;
  color:rgba(248,244,238,.65);line-height:1.8;max-width:30ch;margin-bottom:1.5rem;
}
.footer-socials{display:flex;gap:.625rem}
.social-knop{
  width:38px;height:38px;
  border:1px solid rgba(248,244,238,.2);
  display:flex;align-items:center;justify-content:center;
  color:rgba(248,244,238,.6);text-decoration:none;
  font-size:.875rem;transition:all var(--t);
}
.social-knop:hover{border-color:var(--spot);color:var(--spot)}
.footer-kop{
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--inkt-hint);margin-bottom:1rem;
}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.footer-links a{
  font-family:var(--sans);font-size:.875rem;
  color:rgba(248,244,238,.7);text-decoration:none;transition:color var(--t);
}
.footer-links a:hover{color:var(--doek)}
.footer-onderkant{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1rem;padding-top:2rem;
  border-top:1px solid rgba(248,244,238,.12);
}
.footer-copy{font-family:var(--sans);font-size:.75rem;color:rgba(248,244,238,.45)}
.footer-jur{list-style:none;display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-jur a{
  font-family:var(--sans);font-size:.75rem;
  color:rgba(248,244,238,.45);text-decoration:none;transition:color var(--t);
}
.footer-jur a:hover{color:var(--doek)}
.wcag-badge{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--sans);font-size:.75rem;letter-spacing:.06em;
  border:1px solid rgba(248,244,238,.2);
  color:rgba(248,244,238,.5);padding:.3em .7em;
}
.footer-taal-knop{
  font-family:var(--sans);font-size:.75rem;
  color:rgba(245,240,232,.45);background:none;
  border:1px solid rgba(245,240,232,.12);
  padding:.35em .875em;cursor:pointer;transition:all var(--t);
}
.footer-taal-knop:hover{border-color:var(--spot-zacht);color:var(--spot)}

/* ─────────────────────────────────────────────────
   VOORTGANGSBALKEN
───────────────────────────────────────────────── */
.vb-labels{
  display:flex;justify-content:space-between;
  font-family:var(--sans);font-size:.72rem;color:var(--inkt-hint);
  font-weight:500;margin:.75rem 0 .3rem;
}
.vb-baan{height:3px;background:var(--doek-rand);overflow:hidden}
.vb-vulling{height:100%;background:linear-gradient(90deg,var(--spot),var(--paars))}
.pk-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.pk-label{
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-hint);
}
.pk-project{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--inkt);margin-bottom:.25rem}
.pk-partner{font-family:var(--sans);font-size:.8rem;color:var(--spot);margin-bottom:.6rem}
.pk-omschr{font-family:var(--serif);font-size:.85rem;color:var(--inkt-zacht);line-height:1.6}
.project-kaartje{
  background:var(--doek-warm);border:var(--lijn);
  padding:1.1rem 1.25rem;margin-top:1.5rem;
}

/* ─────────────────────────────────────────────────
   ANIMATIES
───────────────────────────────────────────────── */
@keyframes omhoog{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.kom-op{opacity:0;animation:omhoog .8s cubic-bezier(.22,1,.36,1) forwards}
.kom-op:nth-child(1){animation-delay:.1s}
.kom-op:nth-child(2){animation-delay:.22s}
.kom-op:nth-child(3){animation-delay:.34s}
.kom-op:nth-child(4){animation-delay:.46s}
@media(prefers-reduced-motion:reduce){.kom-op{opacity:1;animation:none}}

/* ─────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────── */
@media(max-width:1024px){
  .hero-portret{display:none}
  .hero-in{padding:0 1.5rem}
  .over-grid{grid-template-columns:240px 1fr;gap:3rem}
  .offerte-grid,.afspraak-grid,.video-grid,.content-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
  .projecten-grid{grid-template-columns:repeat(2,1fr)}
  .project-dossier.project-huidig{grid-column:span 2;grid-template-columns:1fr 2fr}
  .notif-kaart{position:static}
  .citaat-in{grid-template-columns:1fr;gap:2.5rem}
}
@media(max-width:768px){
  .over-grid{grid-template-columns:1fr}
  .over-foto-kader{max-width:220px;aspect-ratio:3/4}
  .pub-grid,.projecten-grid{grid-template-columns:1fr}
  .project-dossier.project-huidig{grid-column:span 1;grid-template-columns:1fr}
  .uitgelicht-pub{grid-template-columns:1fr}
  .upl-beeld{min-height:180px}
  .form-rij{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .dienst{grid-template-columns:3rem 1fr}.d-link{display:none}
}
@media(max-width:900px){
  .burger{display:flex}
  .nav-menu{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--doek);border-top:var(--lijn);
    padding:1.5rem;box-shadow:0 12px 40px rgba(27,27,47,.15);
    z-index:100;max-height:calc(100vh - 100px);overflow-y:auto;
  }
  .nav-menu.open{display:block}
  .nav-menu ul{flex-direction:column;align-items:flex-start;gap:1rem;width:100%}
  .nav-menu a{font-size:1.125rem;color:var(--inkt-mid);font-weight:500;display:block;padding:.4rem 0;min-height:44px;display:flex;align-items:center}
  .nav-cta{width:100%!important;display:block!important;text-align:center;margin-top:.5rem;padding:.85rem 1.25rem!important}
}
@media(max-width:640px){
  .site-header{top:33px}
  .tb-in{justify-content:space-between}
  .hero{min-height:auto;padding-block:4rem 3rem}
  .hero-letterbox,.hero-strip,.hero-frame-nr{display:none}
  .hero-in{padding:0 1.5rem}
  .hero-intertitel{font-size:clamp(2.4rem,9vw,3.5rem)}
  .s-h2{font-size:clamp(1.7rem,6vw,2.2rem)}
  .footer-onderkant{flex-direction:column;align-items:flex-start}
  .tijden{grid-template-columns:repeat(2,1fr)}
}
/* ── HERO FOTO-SYSTEEM ──────────────────────────── */
.hero[data-bg="foto"] .hero-achter,
.hero[data-bg="foto_dim"] .hero-achter,
.hero[data-bg="foto_blur"] .hero-achter {
  background-image:var(--hero-bg-url);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.hero[data-bg="foto_blur"] .hero-achter{filter:blur(3px);transform:scale(1.04)}
.hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s}
.hero[data-bg="foto_dim"] .hero-overlay,
.hero[data-bg="foto_blur"] .hero-overlay{opacity:var(--hero-overlay-opacity,.6)}
.hero-overlay[data-kleur="donker"]{background:#18140F}
.hero-overlay[data-kleur="scene"] {background:#12100E}
.hero-overlay[data-kleur="paars"] {background:linear-gradient(135deg,#18140F,#2A1A3E)}
.hero-overlay[data-kleur="spot"]  {background:linear-gradient(135deg,#18140F,#1E1050)}
/* lichte tekst op donkere foto */
.hero[data-tekst="licht"] .hero-intertitel{color:var(--doek)}
.hero[data-tekst="licht"] .hero-oog span{color:rgba(248,244,238,.75)}
.hero[data-tekst="licht"] .knop-o:hover,.hero[data-tekst="licht"] .knop-s:hover{background:var(--spot-mid);border-color:var(--spot-mid)}
.hero[data-tekst="licht"] .hero-frame-nr{color:rgba(248,244,238,.3)}
/* zorg dat alles boven overlay staat */
.hero[data-bg] .hero-in,.hero[data-bg] .hero-portret,
.hero[data-bg] .hero-strip,.hero[data-bg] .hero-letterbox,
.hero[data-bg] .hero-frame-nr{position:relative;z-index:6}

/* ═══════════════════════════════════════════════════
   PRODUCTEN-PAGINA
   page-producten.php — Studio Emberlane Spotlight
═══════════════════════════════════════════════════ */

/* ── HERO ───────────────────────────────────────── */
.prod-hero{
  position:relative;
  padding-block:5.5rem 4rem;
  background:var(--doek-warm);
  border-bottom:var(--lijn);
  overflow:hidden;
}
.prod-hero-achter{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 65% at 10% 108%,rgba(80,64,176,.15) 0%,transparent 65%),
    radial-gradient(ellipse 30% 45% at 85% 105%,rgba(91,61,138,.1) 0%,transparent 60%);
  pointer-events:none;
}
.prod-hero-in{position:relative;z-index:1}
.prod-h1{
  font-family:var(--display);
  font-size:clamp(2.5rem,5vw,4rem);
  font-weight:600;font-style:normal;
  line-height:1.05;letter-spacing:-.02em;
  color:var(--inkt);margin-bottom:1.25rem;
}
.prod-intro{
  font-family:var(--serif);font-size:1.05rem;
  line-height:1.85;color:var(--inkt-zacht);
  max-width:58ch;
}

/* ── STATUS BADGE ───────────────────────────────── */
.prod-status-badge{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  padding:.25em .875em;border:1px solid;
  letter-spacing:.04em;margin-bottom:.875rem;
}
.prod-stip{
  width:5px;height:5px;border-radius:50%;
  animation:knip 2.5s ease-in-out infinite;
  flex-shrink:0;
}

/* ── TYPE TAG ───────────────────────────────────── */
.prod-type-tag{
  position:absolute;top:.75rem;left:.75rem;
  background:var(--spot);color:#fff;
  font-family:var(--sans);font-size:.75rem;
  font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:.2em .65em;
  z-index:2;
}

/* ── UITGELICHT PRODUCT — groot formaat ─────────── */
.prod-uitgelicht{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:0;
  border:var(--lijn);
  overflow:hidden;
  margin-bottom:2.5rem;
  background:var(--doek);
  transition:box-shadow var(--t);
}
.prod-uitgelicht:hover{
  box-shadow:0 8px 40px rgba(27,27,47,.12);
}
.prod-uitgelicht-beeld{
  position:relative;
  overflow:hidden;
  background:var(--doek-warm);
  min-height:320px;
}
.prod-uitgelicht-beeld img{
  width:100%;height:100%;object-fit:cover;
  display:block;
  filter:sepia(8%) contrast(1.04);
  transition:transform .5s var(--t-mid);
}
.prod-uitgelicht:hover .prod-uitgelicht-beeld img{
  transform:scale(1.03);
}
.prod-beeld-leeg{
  width:100%;height:100%;min-height:320px;
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;color:var(--doek-rand);
}
/* Spotlight-gradiënt over beeld */
.prod-uitgelicht-beeld::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 60%,rgba(248,245,240,.12) 100%);
  pointer-events:none;
}

.prod-uitgelicht-body{
  padding:2.5rem;
  display:flex;flex-direction:column;
  justify-content:center;
  border-left:var(--lijn);
}
/* Spotlight-accentlijn links -->
.prod-uitgelicht-body::before{
  content:'';
  position:absolute;
  left:0;top:15%;bottom:15%;
  width:3px;
  background:linear-gradient(180deg,var(--spot),var(--paars));
  opacity:.6;
}
.prod-uitgelicht{position:relative}

.prod-naam{
  font-family:var(--display);
  font-size:clamp(1.6rem,2.5vw,2.2rem);
  font-weight:600;font-style:normal;
  color:var(--inkt);line-height:1.15;
  letter-spacing:-.01em;margin-bottom:.5rem;
}
.prod-samenw{
  font-family:var(--sans);font-size:.8rem;
  color:var(--spot);margin-bottom:.875rem;
  font-weight:500;
}
.prod-omschr{
  font-family:var(--serif);font-size:1rem;
  line-height:1.85;color:var(--inkt-mid);
  margin-bottom:1.25rem;
}
.prod-omschr p{margin-bottom:.75rem}

/* Kenmerken-lijst -->
.prod-kenmerken{
  list-style:none;padding:0;margin:0 0 1.5rem;
  display:flex;flex-direction:column;gap:.4rem;
}
.prod-kenmerken li{
  font-family:var(--sans);font-size:.875rem;
  color:var(--inkt-zacht);
  display:flex;align-items:baseline;gap:.5em;
}
.prod-kenmerken li::before{
  content:'◈';color:var(--spot);font-size:.75rem;flex-shrink:0;
}

/* Acties-rij -->
.prod-acties{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:.5rem;
}
.prod-prijs{
  font-family:var(--display);font-size:1.4rem;
  font-weight:600;color:var(--inkt);
  letter-spacing:-.01em;
}

/* ── KAARTEN-RASTER ─────────────────────────────── */
.prod-raster{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  margin-top:2.5rem;
}

.prod-kaart{
  background:var(--doek);
  border:var(--lijn);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.prod-kaart:hover{
  border-color:var(--spot-rand);
  box-shadow:0 8px 32px rgba(27,27,47,.12);
  transform:translateY(-3px);
}

.prod-kaart-beeld{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--doek-warm);
  flex-shrink:0;
}
.prod-kaart-beeld img{
  width:100%;height:100%;object-fit:cover;
  display:block;
  filter:sepia(8%) contrast(1.04);
  transition:transform .5s var(--t-mid);
}
.prod-kaart:hover .prod-kaart-beeld img{transform:scale(1.04)}

.prod-kaart-body{
  padding:1.5rem;
  display:flex;flex-direction:column;
  flex:1;
}
.prod-kaart-naam{
  font-family:var(--display);
  font-size:1.25rem;font-weight:600;
  color:var(--inkt);line-height:1.2;
  margin-bottom:.4rem;letter-spacing:-.01em;
}
.prod-kaart-excerpt{
  font-family:var(--serif);font-size:.9375rem;
  line-height:1.75;color:var(--inkt-zacht);
  margin-bottom:1rem;flex:1;
}
.prod-kenmerken-compact{flex-direction:row;flex-wrap:wrap;gap:.5rem .875rem;margin-bottom:1rem}
.prod-kenmerken-compact li{font-size:.8rem}

.prod-kaart-acties{
  display:flex;align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;gap:.5rem;
  padding-top:1rem;
  border-top:var(--lijn);
  margin-top:auto;
}
.prod-prijs-klein{
  font-family:var(--display);font-size:1.1rem;
  font-weight:600;color:var(--inkt);
}
.prod-meer-link{
  font-family:var(--sans);font-size:.8rem;font-weight:500;
  color:var(--spot);text-decoration:none;
  transition:opacity var(--t);
}
.prod-meer-link:hover{opacity:.7}

/* ── RESPONSIVE ────────────────────────────────── */
@media(max-width:1024px){
  .prod-raster{grid-template-columns:repeat(2,1fr)}
  .prod-uitgelicht{grid-template-columns:1fr}
  .prod-uitgelicht-beeld{min-height:220px}
  .prod-uitgelicht-body{border-left:none;border-top:var(--lijn)}
  .prod-uitgelicht-body::before{display:none}
}
@media(max-width:640px){
  .prod-raster{grid-template-columns:1fr}
  .prod-naam{font-size:1.5rem}
}

/* ── PRODUCTEN-PAGINA: footer-mini ── */
.footer-mini{
  display:flex;align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;gap:1rem;
}
.footer-mini a{
  color:rgba(248,244,238,.5);
  text-decoration:none;
  transition:color var(--t);
}
.footer-mini a:hover{color:var(--doek)}

/* ── OFFERTE: AANBOD-OVERZICHT (vervangt tarieven) ── */
.offerte-aanbod-lijst{
  display:flex;flex-direction:column;
  gap:0;
  margin-bottom:.5rem;
}
.offerte-dienst{
  padding:1.25rem 0;
  border-bottom:var(--lijn);
}
.offerte-dienst:last-child{border-bottom:none}
.offerte-dienst-kop{
  display:flex;align-items:baseline;
  gap:.875rem;margin-bottom:.375rem;
}
.offerte-dienst-nr{
  font-family:var(--display);
  font-size:1.1rem;font-weight:300;
  color:var(--inkt-hint);flex-shrink:0;
  line-height:1;
}
.offerte-dienst-naam{
  font-family:var(--display);
  font-size:1.15rem;font-weight:600;
  color:var(--inkt);letter-spacing:-.01em;
  line-height:1.2;
}
.offerte-dienst-kort{
  font-family:var(--serif);
  font-size:.9375rem;line-height:1.75;
  color:var(--inkt-zacht);
  padding-left:2.1rem; /* uitlijnen met naam */
}

/* ── OFFERTE: CONTACTUITNODIGING ── */
.offerte-uitnodiging{
  font-family:var(--serif);font-size:1.05rem;
  line-height:1.85;color:var(--inkt-zacht);
  max-width:38ch;margin-bottom:2rem;
}
.offerte-contact-knoppen{
  display:flex;gap:1rem;flex-wrap:wrap;
  margin-top:2rem;
}

/* ═══════════════════════════════════════════════════
   PRODUCTEN-SPOTLIGHT — homepage sectie
═══════════════════════════════════════════════════ */
.prod-spot-sectie{
  background:var(--scene);
  position:relative;overflow:hidden;
  padding-block:6rem;
  border-bottom:1px solid rgba(80,64,176,.2);
}

/* Decoratieve spotlights */
.prod-spot-achter{position:absolute;inset:0;pointer-events:none}
.prod-spot-licht{
  position:absolute;border-radius:50%;
  filter:blur(80px);
}
.prod-spot-licht-1{
  width:500px;height:500px;
  background:rgba(80,64,176,.18);
  left:-120px;bottom:-150px;
}
.prod-spot-licht-2{
  width:400px;height:400px;
  background:rgba(91,61,138,.14);
  right:-80px;top:-100px;
}

/* Header rij */
.prod-spot-header{
  display:flex;align-items:flex-end;
  justify-content:space-between;
  gap:2rem;flex-wrap:wrap;
  margin-bottom:3rem;
}
.prod-spot-h2{
  font-family:var(--display);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:600;font-style:normal;
  color:var(--doek);line-height:1.1;
  letter-spacing:-.02em;
  margin-bottom:.5rem;
}
.prod-spot-intro{
  font-family:var(--serif);font-size:1rem;
  line-height:1.8;color:rgba(248,244,238,.65);
  max-width:48ch;margin-top:.75rem;
}
.prod-spot-alle-knop{
  color:rgba(248,244,238,.7)!important;
  border-color:rgba(248,244,238,.2)!important;
  white-space:nowrap;flex-shrink:0;
}
.prod-spot-alle-knop:hover{
  color:var(--doek)!important;
  border-color:rgba(248,244,238,.5)!important;
}

/* Kaarten-rij */
.prod-spot-rij{
  display:grid;
  grid-template-columns:repeat(3,1fr);  /* drie kaarten naast elkaar */
  gap:1.25rem;
}

/* Kaart — verticaal: beeld boven, tekst onder */
.prod-spot-kaart{
  background:rgba(248,244,238,.04);
  border:1px solid rgba(248,244,238,.1);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:border-color var(--t),background var(--t),transform var(--t);
}
.prod-spot-kaart:hover{
  border-color:rgba(80,64,176,.5);
  background:rgba(80,64,176,.07);
  transform:translateY(-4px);
}
/* Spotlight-lijn bovenaan elke kaart */
.prod-spot-kaart::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--spot),var(--paars),transparent);
  opacity:0;
  transition:opacity var(--t);
}
.prod-spot-kaart:hover::before{opacity:1}

/* Beeld — 16/9 bovenaan */
.prod-spot-beeld{
  position:relative;
  overflow:hidden;
  background:rgba(80,64,176,.08);
  aspect-ratio:16/9;
}
.prod-spot-beeld img{
  width:100%;height:100%;object-fit:cover;
  display:block;filter:sepia(15%) contrast(1.05) brightness(.9);
  transition:transform .5s var(--t-mid),filter .4s var(--t);
}
.prod-spot-kaart:hover .prod-spot-beeld img{
  transform:scale(1.04);filter:sepia(5%) contrast(1.05);
}
.prod-spot-beeld-leeg{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 70% 80% at 50% 110%,rgba(80,64,176,.25) 0%,transparent 70%);
}
.prod-spot-type-tag{
  position:absolute;top:.5rem;left:.5rem;
  background:var(--spot);color:#fff;
  font-family:var(--sans);font-size:.75rem;
  font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:.18em .6em;
  z-index:2;
}

/* Body — rechterkolom */
.prod-spot-body{
  padding:1.25rem;
  display:flex;flex-direction:column;
  flex:1;
}
.prod-spot-status{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--sans);font-size:.75rem;
  font-weight:500;letter-spacing:.04em;
  margin-bottom:.6rem;
}
.prod-spot-stip{
  width:5px;height:5px;border-radius:50%;
  animation:knip 2.5s ease-in-out infinite;flex-shrink:0;
}
.prod-spot-naam{
  font-family:var(--display);
  font-size:1.15rem;font-weight:600;
  color:var(--doek);line-height:1.2;
  letter-spacing:-.01em;margin-bottom:.3rem;
}
.prod-spot-samenw{
  font-family:var(--sans);font-size:.75rem;
  color:rgba(180,168,255,.8);margin-bottom:.6rem;
}
.prod-spot-excerpt{
  font-family:var(--serif);font-size:.875rem;
  line-height:1.75;color:rgba(248,244,238,.6);
  flex:1;margin-bottom:1rem;
}
.prod-spot-acties{
  display:flex;align-items:center;
  justify-content:space-between;
  padding-top:.875rem;
  border-top:1px solid rgba(248,244,238,.08);
  margin-top:auto;
}
.prod-spot-prijs{
  font-family:var(--display);font-size:1rem;
  font-weight:600;color:var(--doek);
}
.prod-spot-link{
  font-family:var(--sans);font-size:.8rem;
  font-weight:500;color:rgba(180,168,255,.9);
  text-decoration:none;
  display:inline;   /* nooit een blok */
  width:auto;
  transition:color var(--t);
}
.prod-spot-link:hover{color:var(--doek)}

/* Onderste link */
.prod-spot-footer{
  text-align:center;
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:1px solid rgba(248,244,238,.07);
}
.prod-spot-meer-link{
  font-family:var(--sans);font-size:.875rem;
  font-weight:400;letter-spacing:.04em;
  color:rgba(248,244,238,.4);text-decoration:none;
  transition:color var(--t);
}
.prod-spot-meer-link:hover{color:rgba(248,244,238,.8)}

/* Responsive */
@media(max-width:960px){
  .prod-spot-rij{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .prod-spot-rij{grid-template-columns:1fr}
  .prod-spot-alle-knop{display:none}
}

/* ═══════════════════════════════════════════════════
   CROWDFUNDING CTA — homepage sectie
═══════════════════════════════════════════════════ */
.cf-sectie{
  background:var(--scene);
  position:relative;overflow:hidden;
  padding-block:6.5rem;
  border-bottom:1px solid rgba(80,64,176,.2);
}

/* Spotlichten */
.cf-achter{position:absolute;inset:0;pointer-events:none}
.cf-spot{position:absolute;border-radius:50%;filter:blur(90px)}
.cf-spot-1{width:600px;height:600px;background:rgba(80,64,176,.2);left:-150px;top:-100px}
.cf-spot-2{width:400px;height:400px;background:rgba(91,61,138,.15);right:-80px;bottom:-80px}
.cf-filmstrip{
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--spot),var(--paars),var(--spot),transparent);
}

/* Header */
.cf-in{position:relative;z-index:1}
.cf-header{margin-bottom:3rem}
.cf-oog-label{
  display:block;
  font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(180,168,255,.7);
  margin-bottom:1rem;
}
.cf-h2{
  font-family:var(--display);
  font-size:clamp(2.5rem,5vw,4rem);
  font-weight:600;font-style:normal;
  color:var(--doek);line-height:1.05;
  letter-spacing:-.02em;margin-bottom:.75rem;
}
.cf-sub{
  font-family:var(--serif);font-size:1.05rem;
  line-height:1.8;color:rgba(248,244,238,.65);
  max-width:52ch;
}

/* Grid */
.cf-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:5rem;align-items:start;
}

/* Tekst kolom */
.cf-tekst p{
  font-family:var(--serif);font-size:1rem;
  line-height:1.85;color:rgba(248,244,238,.7);
  margin-bottom:1.25rem;
}
.cf-kenmerken{
  list-style:none;padding:0;margin:1.5rem 0;
  display:flex;flex-direction:column;gap:.625rem;
}
.cf-kenmerken li{
  display:flex;align-items:baseline;gap:.625rem;
  font-family:var(--sans);font-size:.875rem;
  color:rgba(248,244,238,.65);
}
.cf-kenmerk-stip{color:var(--spot);font-size:.75rem;flex-shrink:0}
.cf-meer-link{
  font-family:var(--sans);font-size:.8rem;font-weight:500;
  color:rgba(180,168,255,.85);text-decoration:none;
  transition:color var(--t);
  display:inline-block;margin-top:.5rem;
}
.cf-meer-link:hover{color:var(--doek)}

/* Actie kolom */
.cf-actie{
  display:flex;flex-direction:column;
  gap:1.25rem;
}

/* GROTE primaire CTA knop */
.cf-knop-groot{
  display:flex!important;
  align-items:center;
  gap:1.25rem;
  padding:1.375rem 2rem!important;
  background:var(--spot)!important;
  color:#fff!important;
  border:none!important;
  width:100%;
  text-decoration:none;
  transition:background var(--t),transform var(--t)!important;
  min-height:72px!important;
}
.cf-knop-groot:hover{
  background:var(--spot-mid)!important;
  transform:translateX(4px)!important;
}
.cf-knop-groot:focus-visible{
  outline:3px solid #fff;outline-offset:3px;
}
.cf-knop-ico{
  font-size:1.5rem;flex-shrink:0;
  color:rgba(255,255,255,.6);
}
.cf-knop-groot-lbl{
  font-family:var(--sans);font-size:1.0625rem;
  font-weight:500;letter-spacing:.02em;
  display:block;line-height:1.2;
}
.cf-knop-groot-sub{
  font-family:var(--sans);font-size:.75rem;
  font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  display:block;margin-top:.25rem;
}

/* Secundaire knoppenrij */
.cf-knop-rij{
  display:flex;gap:.875rem;flex-wrap:wrap;
}
.cf-knop-sec{
  flex:1;min-width:130px;
  color:rgba(248,244,238,.75)!important;
  border-color:rgba(248,244,238,.2)!important;
  justify-content:center;
}
.cf-knop-sec:hover{
  color:var(--doek)!important;
  border-color:rgba(248,244,238,.5)!important;
}

/* Voortgang */
.cf-voortgang{margin-top:.5rem}
.cf-voortgang-baan{
  height:4px;background:rgba(248,244,238,.1);
  overflow:hidden;margin-bottom:.625rem;
}
.cf-voortgang-vulling{
  height:100%;background:linear-gradient(90deg,var(--spot),var(--paars));
  transition:width 1s var(--t);
}
.cf-voortgang-labels{
  display:flex;justify-content:space-between;
  font-family:var(--sans);font-size:.72rem;
  color:rgba(248,244,238,.4);
}

/* Responsive */
@media(max-width:900px){
  .cf-grid{grid-template-columns:1fr}
  .cf-actie{margin-top:1rem}
}
@media(max-width:600px){
  .cf-knop-groot{min-height:64px!important;padding:1.125rem 1.5rem!important}
  .cf-knop-rij{flex-direction:column}
  .cf-knop-sec{min-width:auto}
}

/* ═══════════════════════════════════════════════════
   AANBOD — quote, bullets, naam-link
═══════════════════════════════════════════════════ */
.dienst-kop{display:flex;gap:1rem;align-items:flex-start}
.dienst-tekst{flex:1}
.d-naam-link{
  color:inherit;text-decoration:none;
  transition:color var(--t);
}
.d-naam-link:hover{color:var(--spot)}
.d-naam-link:focus-visible{outline:2px solid var(--spot);outline-offset:2px}

.d-punten{
  list-style:none;padding:0;
  margin:.75rem 0;
  display:flex;flex-direction:column;gap:.35rem;
}
.d-punten li{
  font-family:var(--sans);font-size:.875rem;
  color:rgba(248,244,238,.65);
  display:flex;align-items:baseline;gap:.5em;
}
.d-punten li::before{
  content:'◈';color:var(--spot);
  font-size:.75rem;flex-shrink:0;
}

.d-quote{
  margin-top:.875rem;
  padding-left:1rem;
  border-left:2px solid rgba(80,64,176,.5);
}
.d-quote p{
  font-family:var(--display);
  font-size:.9375rem;font-style:normal;
  line-height:1.7;color:rgba(248,244,238,.6);
}

/* ═══════════════════════════════════════════════════
   BESCHIKBAAR — compact
═══════════════════════════════════════════════════ */
.beschik-compact{
  background:var(--doek-warm);
  border-bottom:var(--lijn);
  padding-block:2.5rem;
}
.beschik-compact-in{
  display:flex;flex-direction:column;gap:1.5rem;
}
.beschik-badge{
  display:inline-flex;align-items:center;gap:.625rem;
  font-family:var(--sans);font-size:.8rem;font-weight:500;
  padding:.4em 1.125em;border:1px solid;
  letter-spacing:.03em;
  align-self:flex-start;
}
.beschik-stip{
  width:7px;height:7px;border-radius:50%;
  animation:knip 2.5s ease-in-out infinite;
  flex-shrink:0;
}
.beschik-urgentie{
  font-size:.72rem;opacity:.75;
  padding-left:.5rem;border-left:1px solid currentColor;
}

/* Agenda */
.beschik-agenda{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.625rem;
}
.agenda-week{
  padding:.625rem .75rem;
  border-top:2px solid;
  display:flex;flex-direction:column;gap:.25rem;
}
.agenda-week-huidig{
  box-shadow:0 0 0 1.5px currentColor;
}
.agenda-week-nr{
  font-family:var(--sans);font-size:.75rem;
  font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--inkt-hint);
}
.agenda-datum{
  font-family:var(--sans);font-size:.8rem;
  color:var(--inkt);font-weight:500;
}
.agenda-status{
  font-family:var(--sans);font-size:.75rem;
  font-weight:500;letter-spacing:.04em;
}
.beschik-cta{margin-top:.25rem}

@media(max-width:768px){
  .beschik-agenda{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:460px){
  .beschik-agenda{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════════════════════════════════════════════
   OVER MIJ — polaroid + wist-je-datjes
═══════════════════════════════════════════════════ */
.over-grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:4rem;align-items:start;
}

/* Polaroid */
.polaroid{
  position:relative;
  background:#fff;
  padding:.875rem .875rem .5rem;
  box-shadow:
    0 4px 12px rgba(27,27,47,.14),
    0 1px 3px rgba(27,27,47,.08);
  transform:rotate(-1.5deg);
  transition:transform var(--t),box-shadow var(--t);
  max-width:260px;
}
.polaroid:hover{
  transform:rotate(0deg) scale(1.02);
  box-shadow:0 8px 28px rgba(27,27,47,.18);
}
.polaroid-beeld{
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--doek-warm);
}
.polaroid-beeld img{
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  display:block;
  filter:sepia(8%) contrast(1.04);
}
.polaroid-leeg{
  width:100%;height:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:.5rem;color:var(--doek-rand);
  font-family:var(--sans);font-size:.72rem;
  font-style:normal;
}
.polaroid-bijschrift{
  font-family:'Cormorant',Georgia,serif;
  font-size:.875rem;font-style:normal;
  text-align:center;color:var(--inkt-zacht);
  padding:.5rem .25rem .25rem;
  letter-spacing:.02em;
}

/* Wist je dat */
.wjd-blok{
  margin-top:1.75rem;
  padding:1.125rem 1.25rem;
  background:var(--spot-pale);
  border-left:3px solid var(--spot);
}
.wjd-label{
  font-family:var(--sans);font-size:.75rem;
  font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--spot);
  margin-bottom:.75rem;
}
.wjd-lijst{
  list-style:none;padding:0;
  display:flex;flex-direction:column;gap:.625rem;
}
.wjd-lijst li{
  font-family:var(--serif);font-size:.875rem;
  line-height:1.65;color:var(--inkt-mid);
  display:flex;align-items:baseline;gap:.5em;
}
.wjd-lijst li::before{
  content:'→';color:var(--spot);
  font-size:.75rem;flex-shrink:0;
}

@media(max-width:860px){
  .over-grid{grid-template-columns:1fr}
  .polaroid{max-width:200px;margin:0 auto}
  .over-links{display:flex;flex-direction:column;align-items:center}
}

/* ═══════════════════════════════════════════════════
   LINKEDIN KNOP
═══════════════════════════════════════════════════ */
.knop-linkedin{
  display:inline-flex!important;align-items:center;gap:.625rem;
  background:#0A66C2;color:#fff!important;
  border:1.5px solid #0A66C2!important;
  font-family:var(--sans);font-size:.8rem;font-weight:500;
  padding:.75em 1.5em;min-height:48px;
  text-decoration:none;
  transition:background var(--t)!important;
}
.knop-linkedin:hover,.knop-linkedin:focus-visible{
  background:#004182!important;border-color:#004182!important;
}

/* ═══════════════════════════════════════════════════
   AANBEVELINGEN
═══════════════════════════════════════════════════ */
.abv-raster{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
  margin-top:1.75rem;
}
.abv-kaart-groot{
  grid-column:span 1;
}
.abv-kaart{
  background:var(--doek);
  border:var(--lijn);
  padding:1.1rem 1.25rem;
  position:relative;
  transition:border-color var(--t),box-shadow var(--t);
}
.abv-kaart:hover{
  border-color:var(--spot-rand);
  box-shadow:0 6px 24px rgba(27,27,47,.09);
}
.abv-quote-ico{
  font-family:var(--display);
  font-size:2rem;line-height:.8;
  color:var(--spot);opacity:.2;
  margin-bottom:.2rem;
  font-style:normal;
}
.abv-citaat p{
  font-family:var(--display);
  font-size:.8rem;font-style:normal;
  line-height:1.45;color:var(--inkt-mid);
  margin-bottom:.5rem;
}
.abv-persoon{
  display:flex;flex-direction:column;gap:.1rem;
  padding-top:.6rem;
  border-top:var(--lijn);
}
.abv-naam{
  font-family:var(--sans);font-size:.72rem;
  font-weight:600;color:var(--inkt);
}
.abv-functie{
  line-height:1.25;
  font-family:var(--sans);font-size:.66rem;
  color:var(--inkt-hint);
}

.abv-kaart-groot .abv-citaat p{font-size:.8rem}

@media(max-width:900px){
  .abv-raster{grid-template-columns:1fr}
  .abv-kaart-groot{grid-column:span 1}
}

/* ═══════════════════════════════════════════════════
   HERO — CTA knoppen (aliassen naar basis .knop systeem)
═══════════════════════════════════════════════════ */
/* Hero buttons — alleen iets groter, verder identiek aan basis */
/* Hero buttons erven van .knop basis */

/* ═══════════════════════════════════════════════════
   OFFERTE — compacte tariefbalk
═══════════════════════════════════════════════════ */
.tarief-balk{
  width:100%;
  margin-bottom:1.75rem;
  border:var(--lijn);
  overflow:hidden;
}
.tarief-rij{
  display:flex;justify-content:space-between;
  align-items:baseline;
  padding:.625rem .875rem;
  gap:1rem;
  border-bottom:var(--lijn);
}
.tarief-rij:last-child{border-bottom:none}
.tarief-rij-kop{
  background:var(--scene);
  padding:.5rem .875rem;
}
.tarief-rij-kop span{
  font-family:var(--sans);font-size:.75rem;
  font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(248,244,238,.5);
}
.tarief-rij-even{background:var(--doek-warm)}
.tarief-rij span:first-child{
  font-family:var(--serif);font-size:.9375rem;
  color:var(--inkt-mid);flex:1;
}
.tarief-prijs{
  font-family:var(--display);
  font-size:1rem;font-weight:600;
  color:var(--spot);white-space:nowrap;
  flex-shrink:0;
}

/* ═══════════════════════════════════════════════════
   DAGAGENDA — beschikbaar per dag
═══════════════════════════════════════════════════ */
.beschik-wrap{
  display:flex;flex-direction:column;gap:1.25rem;
}

/* Status badge */
.beschik-badge{
  display:inline-flex;align-items:center;gap:.625rem;
  font-family:var(--sans);font-size:.8rem;font-weight:500;
  padding:.4em 1.125em;border:1px solid;
  letter-spacing:.03em;align-self:flex-start;
}
.beschik-stip{
  width:7px;height:7px;border-radius:50%;
  animation:knip 2.5s ease-in-out infinite;flex-shrink:0;
}
.beschik-urgentie{opacity:.75;font-size:.75rem}

/* Grid: week-label + 5 dagen */
.dag-agenda{
  display:flex;flex-direction:column;gap:3px;
  width:100%;
}
.dag-agenda-header,
.dag-agenda-rij{
  display:grid;
  grid-template-columns:4.5rem repeat(5,1fr);
  gap:3px;
}
/* Kolomkoppen */
.dag-agenda-header{margin-bottom:2px}
.dag-kop{
  font-family:var(--sans);font-size:.75rem;
  font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--inkt-hint);
  text-align:center;padding:.25rem 0;
}
.dag-agenda-week-lbl{
  font-family:var(--sans);
  display:flex;flex-direction:column;
  justify-content:center;
  padding-right:.5rem;
}
.dag-week-nr{
  font-size:.75rem;font-weight:600;
  color:var(--inkt-zacht);letter-spacing:.04em;
}
.dag-week-datum{
  font-size:.75rem;color:var(--inkt-hint);
  margin-top:.1rem;white-space:nowrap;
}

/* Dag-cel */
.dag-cel{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:.25rem;
  padding:.5rem .25rem;
  border-top:2px solid var(--doek-rand);
  background:var(--doek-warm);
  min-height:52px;
  position:relative;
  transition:transform var(--t);
}
.dag-cel:hover{transform:translateY(-2px)}

/* Vandaag markering */
.dag-vandaag{
  outline:2px solid var(--spot);
  outline-offset:-1px;
  z-index:1;
}
.dag-vandaag .dag-nummer{color:var(--spot);font-weight:700}

/* Verleden */
.dag-verleden{
  opacity:.35;background:transparent!important;
  border-color:transparent!important;
}
.dag-verleden-streep{
  font-size:.75rem;color:var(--inkt-hint);
}

.dag-nummer{
  font-family:var(--sans);font-size:.75rem;
  font-weight:500;color:var(--inkt-zacht);
  line-height:1;
}
.dag-status-stip{
  width:5px;height:5px;border-radius:50%;
  flex-shrink:0;
}

/* CTA knop */
.beschik-cta-knop{align-self:flex-start}

/* Beschikbaar compact als sectie */
.beschik-compact{
  background:var(--doek-warm);
  border-bottom:var(--lijn);
  padding-block:2rem 2.25rem;
}

/* Legenda */
.dag-legenda{
  display:flex;gap:1.25rem;flex-wrap:wrap;
  margin-top:.25rem;
}
.legenda-item{
  display:flex;align-items:center;gap:.4rem;
  font-family:var(--sans);font-size:.75rem;color:var(--inkt-hint);
}
.legenda-stip{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}

/* Responsive */
@media(max-width:640px){
  .dag-agenda-header,
  .dag-agenda-rij{grid-template-columns:3rem repeat(5,1fr);gap:2px}
  .dag-cel{min-height:44px;padding:.4rem .1rem}
  .dag-week-datum{display:none}
}
@media(max-width:400px){
  .dag-agenda-header,
  .dag-agenda-rij{grid-template-columns:2.5rem repeat(5,1fr)}
  .dag-agenda-week-lbl{padding-right:.25rem}
  .dag-kop{font-size:.75rem}
}

/* Opdracht & Niet beschikbaar dag-statussen */
/* Opdracht: paars — dag is bezet met bestaande opdracht */
/* Niet: donkergrijs — dag beschikbaar maar niet voor werk */

/* sr-only utility — verbergt tekst visueel maar niet voor schermlezer */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
/* Dag-cel keyboard focus */
.dag-cel:focus-visible{
  outline:3px solid var(--spot);
  outline-offset:-2px;
  z-index:2;
}

/* Offerte-pakketten lijst */
.offerte-pakketten{
  list-style:none;padding:0;
  margin:1.25rem 0 1.75rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.offerte-pakketten li{
  font-family:var(--sans);font-size:.9rem;
  color:var(--inkt-zacht);
  display:flex;align-items:baseline;gap:.625rem;
  padding:.5rem 0;
  border-bottom:var(--lijn);
}
.offerte-pakketten li::before{
  content:'→';color:var(--spot);
  font-size:.8rem;flex-shrink:0;
}

/* ── TOEGANKELIJKHEIDS-CSS (v3.2) ────────────────────── */
/* Lichte achtergronden voor content boxes - verbeterde contrast */

/* FAQ items */
.faq-item {
  background: var(--doek-warm, #EEE9E1);
  border-left: 3px solid var(--spot, #5040B0);
  padding: var(--ruimte-md, 24px);
  margin-bottom: var(--ruimte-sm, 16px);
  border-radius: 4px;
}

/* Algemene content box */
.content-box {
  background: var(--spot-pale, #EEE8FF);
  border: 1px solid var(--doek-rand, #D8D0C4);
  padding: var(--ruimte-md, 24px);
  border-radius: 8px;
  margin: var(--ruimte-md, 24px) 0;
}

/* Over-citaat styling */
.over-citaat {
  background: var(--doek-warm, #EEE9E1);
  border-left: 4px solid var(--spot, #5040B0);
  padding: var(--ruimte-md, 24px);
  margin: var(--ruimte-lg, 40px) 0;
  font-style: normal;
}

/* ── WERKWIJZE-KADER OPVALLENDER (v3.2.1) ────────────── */
.werkwijze-kader {
  background: var(--spot-pale, #EEE8FF) !important;
  border: 3px solid var(--spot, #5040B0) !important;
  border-radius: 12px !important;
  padding: 32px !important;
  margin-top: 40px !important;
  box-shadow: 0 4px 12px rgba(80, 64, 176, 0.15) !important;
}

.werkwijze-kader h3 {
  font-size: 1.35rem !important;
  margin-bottom: 16px !important;
}

/* ── PRESTATIE ITEMS ALS DUIDELIJKE BLOKKEN (v3.2.1) ─── */
.prestatie {
  background: white !important;
  border: 2px solid var(--spot, #5040B0) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

.prestatie:hover {
  transform: translateX(4px) !important;
  box-shadow: 0 2px 8px rgba(80, 64, 176, 0.2) !important;
}

.prestatie .p-stip {
  color: var(--spot, #5040B0) !important;
  font-size: 1.2rem !important;
  line-height: 1.4 !important;
  flex-shrink: 0 !important;
}

.prestatie .p-hoofd {
  color: var(--spot, #5040B0) !important;
  font-family: var(--display) !important;
  font-size: 1.1rem !important;
}

.prestatie .p-sub {
  color: var(--inkt-mid, #2D2D40) !important;
  font-family: var(--serif) !important;
}

/* Prestaties container aanpassing */
.prestaties {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-top: 24px !important;
}

/* ── MEER MARGE RONDOM TEKSTBLOKKEN (v3.2.2) ────────── */

/* Over-alinea blokken - meer verticale ruimte */
.over-alinea {
  margin-bottom: 32px !important;  /* was 24px */
}

/* Werkwijze-kader - meer ruimte eromheen */
.werkwijze-kader {
  margin-top: 48px !important;  /* was 40px */
  margin-bottom: 48px !important;  /* nieuw */
}

/* Prestaties container - meer ruimte */
.prestaties {
  margin-top: 40px !important;  /* was 24px */
  margin-bottom: 40px !important;  /* nieuw */
}

/* Individuele prestatie items - meer ruimte tussen items */
.prestatie {
  margin-bottom: 20px !important;  /* was 12px */
}

/* Over-citaat - meer ruimte */
.over-citaat {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

/* Algemene sectie spacing */
.s-midden {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* Content wrapper - meer horizontale padding op mobiel */
@media (max-width: 768px) {
  .over-alinea,
  .werkwijze-kader,
  .prestatie {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
}

/* ── MINDER PADDING BINNEN TEKSTBLOKKEN (v3.2.4) ────────── */

/* Over-alinea - minder padding binnen het blok */
.over-alinea {
  padding: 16px !important;  /* was 24px - 33% minder */
}

/* Werkwijze-kader - minder padding */
.werkwijze-kader {
  padding: 24px !important;  /* was 32px - 25% minder */
}

/* Prestatie items - minder padding */
.prestatie {
  padding: 12px 16px !important;  /* was 16px 20px - 25% minder */
}

/* FAQ items - minder padding */
.faq-item {
  padding: 16px !important;  /* was 24px - 33% minder */
}

/* Content box - minder padding */
.content-box {
  padding: 16px !important;  /* was 24px - 33% minder */
}

/* Over-citaat - minder padding */
.over-citaat {
  padding: 16px !important;  /* was 24px - 33% minder */
}

/* ── HERO TEXT CONTRAST VERBETERING (v3.4) ──────────────── */
/* Text-shadow voor betere leesbaarheid van witte tekst over foto */

.hero h1,
.hero .hero-stelling,
.hero .hero-oog {
  text-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Extra shadow voor hoofdkop voor maximale leesbaarheid */
.hero h1 {
  text-shadow: 
    0 2px 12px rgba(0, 0, 0, 0.4),
    0 4px 20px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   THEME v6.4 UPDATES
   - Sticky "Boek afspraak" button verwijderd
   - "Wat je krijgt" tekst leesbaar
   - Section headers groter
   - Marges verkleind
   - Body tekst groter & uniform
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   FIX 1: "WAT JE KRIJGT" TEKST LEESBAAR - DONKER MAKEN!
   ─────────────────────────────────────────────────────────────── */

/* ALLE tekst in features/wat-je-krijgt secties DONKER */
[class*="wat-je-krijgt"] *,
[class*="features"] *,
[class*="feature-list"] *,
[id*="wat-je-krijgt"] *,
[id*="features"] * {
    color: var(--inkt, #18120E) !important;
}

/* Beschrijvende tekst - leesbaar grijs */
[class*="wat-je-krijgt"] p,
[class*="features"] p,
[class*="feature-list"] p,
[class*="wat-je-krijgt"] li,
[class*="features"] li,
[class*="feature-list"] li,
[class*="wat-je-krijgt"] span:not(.highlight),
[class*="features"] span:not(.highlight),
[class*="feature-list"] span:not(.highlight) {
    color: var(--inkt-zacht, #4A4A60) !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
}

/* Feature titels (WCAG 3.0 Compliant, etc.) */
[class*="wat-je-krijgt"] h4,
[class*="features"] h4,
[class*="feature-list"] h4,
[class*="wat-je-krijgt"] strong,
[class*="features"] strong,
[class*="feature-list"] strong {
    color: var(--inkt, #18120E) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

/* NUCLEAIRE OPTIE: Overschrijf alle inline lichte kleuren */
[style*="color: #D8D0C4"],
[style*="color: #EEE9E1"],
[style*="color: #F7F3EE"],
[style*="color: rgb(216"],
[style*="color: rgb(238"],
[style*="color: rgb(247"] {
    color: var(--inkt-zacht, #4A4A60) !important;
}


/* ───────────────────────────────────────────────────────────────
   FIX 2: SECTION HEADERS VEEL GROTER!
   ─────────────────────────────────────────────────────────────── */

.section-label,
.section-title,
.section-header,
h3.section-header,
[class*="section-label"],
[class*="section-title"],
.sectie-kop {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    margin-bottom: 32px !important;
}


/* ───────────────────────────────────────────────────────────────
   FIX 3: MARGES VERKLEINEN - HELE WEBSITE
   ─────────────────────────────────────────────────────────────── */

/* Sections: minder top/bottom padding */
section,
.section,
[class*="section"],
.sectie {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

/* Cards: dichter bij elkaar */
.aanbod-card,
.service-card,
.feature-card,
.project-card,
.card {
    margin-bottom: 32px !important;
}

/* Paragrafen: minder spacing */
p {
    margin-bottom: 16px !important;
}

p + p {
    margin-top: 16px !important;
}

/* Headers: Cormorant als standaard lettertype site-breed,
   plus minder ruimte */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--display);
}

h1 {
    margin-bottom: 16px !important;
    margin-top: 32px !important;
}

h2 {
    margin-bottom: 16px !important;
    margin-top: 32px !important;
}

h3 {
    margin-bottom: 12px !important;
    margin-top: 24px !important;
}

h4 {
    margin-bottom: 8px !important;
    margin-top: 16px !important;
}


/* ───────────────────────────────────────────────────────────────
   FIX 4: BODY TEKST GROTER & UNIFORM
   ─────────────────────────────────────────────────────────────── */

/* Base body tekst */
body,
p {
    font-size: 19px !important;
    line-height: 1.7 !important;
}

/* Lead paragraphs */
.lead,
.intro-text,
.hero-oog {
    font-size: 22px !important;
    line-height: 1.75 !important;
}

/* Lijst items */
ul li,
ol li {
    font-size: 18px !important;
    line-height: 1.65 !important;
    margin-bottom: 8px !important;
}

/* Quote tekst */
blockquote,
.quote,
.citaat {
    font-size: 20px !important;
    line-height: 1.7 !important;
}

/* Labels blijven compact maar leesbaar */
.label,
label,
.tag {
    font-size: 15px !important;
}


/* ═══════════════════════════════════════════════════════════════
   EINDE v6.4 UPDATES
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   v7.0: FAQ ACCORDION STYLING
   ═══════════════════════════════════════════════════════════════ */

.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: white;
  border: 2px solid var(--spot);
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 200ms ease;
}

.faq-item:hover {
  border-color: var(--spot-mid);
  box-shadow: 0 2px 12px rgba(91,77,181,.1);
}

.faq-item.active {
  border-color: var(--spot);
  background: var(--spot-pale);
}

.faq-question {
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 700;
  color: #1C1C2E;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color 200ms ease;
}

.faq-question:hover {
  color: var(--spot);
}

.faq-question:focus-visible {
  outline: 3px solid var(--spot);
  outline-offset: -3px;
}

.faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  font-size: 2rem;
  font-weight: 700;
  color: var(--spot);
  transition: transform 200ms ease;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease;
}

.faq-item.active .faq-answer {
  max-height: 1000px;
}

.faq-answer-content {
  padding: 0 24px 24px 24px;
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.8;
  color: #2D2D40;
}

.faq-answer-content p {
  margin-bottom: 16px;
}

.faq-answer-content p:last-child {
  margin-bottom: 0;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .faq-question {
    font-size: 1.1rem;
    padding: 16px 20px;
  }
  
  .faq-answer-content {
    padding: 0 20px 20px 20px;
    font-size: 17px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v7.0: LICHTERE PRODUCT & PROJECT KAARTEN
   (dezelfde stijl als case study - lichter, cleaner)
   ═══════════════════════════════════════════════════════════════ */

/* Update product kaarten - lichter */
.prod-kaart {
  background: white;
  border: 2px solid var(--lijn, #D8D0C4);
  box-shadow: 0 2px 8px rgba(24, 18, 14, 0.06);
}

.prod-kaart:hover {
  border-color: var(--spot, #5040B0);
  box-shadow: 0 8px 24px rgba(24, 18, 14, 0.12);
}

/* Update project kaarten - lichter */
.project-kaartje,
.project-dossier {
  background: white !important;
  border: 2px solid var(--lijn, #D8D0C4) !important;
  box-shadow: 0 2px 8px rgba(24, 18, 14, 0.06);
  transition: all 200ms ease;
}

.project-kaartje:hover,
.project-dossier:hover {
  border-color: var(--spot, #5040B0);
  box-shadow: 0 8px 24px rgba(24, 18, 14, 0.12);
  transform: translateY(-2px);
}

/* Uitgelicht product ook lichter */
.prod-uitgelicht {
  background: white;
  border: 2px solid var(--lijn, #D8D0C4);
  box-shadow: 0 4px 16px rgba(24, 18, 14, 0.08);
}

.prod-uitgelicht:hover {
  box-shadow: 0 12px 32px rgba(24, 18, 14, 0.14);
}

/* ═══════════════════════════════════════════════════════════════
   v7.0: LEESBAARDER LOGO TAGLINE
   ═══════════════════════════════════════════════════════════════ */

.logo-sub {
  font-size: .75rem !important;  /* Was .65rem - nu groter */
  font-weight: 500 !important;   /* Was 400 - nu iets dikker */
  letter-spacing: .24em !important;  /* Was .32em - iets minder ruimte */
  color: var(--inkt-zacht, #4A4A60) !important;  /* Was --inkt-hint - nu donkerder */
  opacity: 0.9;  /* Subtle opacity voor balans */
}

/* ═══════════════════════════════════════════════════════════════
   v7.0: GECENTREERDE HEADER NAVIGATIE
   Navigatie items in het midden naast Status + CTA
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {
  .nav-in {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
  }
  
  .nav-menu {
    display: flex;
    justify-content: center;
  }
  
  .nav-menu > ul:first-of-type {
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v7.0.1: UI POLISH FIXES
   ═══════════════════════════════════════════════════════════════ */

/* Fix 1: Beschikbaarheids label meer naar rechts */
.status-pil {
  margin-left: 12px !important;
}

/* Fix 2: Tekst leesbaarder maken op aanbod pagina */
.aanbod-intro,
.wat-krijg-tekst,
.krijg-item p,
.dienst-omschrijving {
  color: var(--inkt, #18140F) !important;
  font-weight: 400;
}

/* Extra donker voor belangrijke teksten */
.wat-krijg-titel,
.dienst-titel {
  color: var(--inkt, #18140F) !important;
}

/* Fix 3: Project en product kaarten - CASE STUDY STIJL */
.project-kaartje,
.project-dossier,
.prod-kaart {
  background: white !important;
  border: 2px solid var(--lijn, #D8D0C4) !important;
  box-shadow: 0 2px 12px rgba(24, 18, 14, 0.08) !important;
  overflow: hidden;
  transition: all 200ms ease;
}

.project-kaartje:hover,
.project-dossier:hover,
.prod-kaart:hover {
  border-color: var(--spot, #5040B0) !important;
  box-shadow: 0 8px 28px rgba(24, 18, 14, 0.14) !important;
  transform: translateY(-3px);
}

/* Project/product afbeelding styling - zoals case study */
.project-beeld,
.prod-kaart-beeld {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--doek-warm, #EEE9E1);
}

.project-beeld img,
.prod-kaart-beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.project-kaartje:hover .project-beeld img,
.prod-kaart:hover .prod-kaart-beeld img {
  transform: scale(1.05);
}

/* Project body - clean padding */
.project-body,
.prod-kaart-body {
  padding: 24px;
  background: white;
}

.project-titel,
.prod-kaart-titel {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--inkt);
  margin-bottom: 12px;
  line-height: 1.3;
}

.project-omschrijving,
.prod-kaart-tekst {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--inkt-zacht, #4A4A60);
  margin-bottom: 16px;
}

/* Case study stijl voor uitgelichte items */
.case-study,
.project-uitgelicht,
.prod-uitgelicht {
  background: white !important;
  border: 2px solid var(--lijn) !important;
  box-shadow: 0 4px 20px rgba(24, 18, 14, 0.1) !important;
}

.case-study:hover,
.project-uitgelicht:hover,
.prod-uitgelicht:hover {
  box-shadow: 0 12px 36px rgba(24, 18, 14, 0.16) !important;
}

/* ── WERKWIJZE KAARTEN (v8.3 — verplaatst uit inline style) ──── */
.sectie-werkwijze {
  background: var(--doek);
}

.werkwijze-intro {
  max-width: 62ch;
  margin: 1.5rem 0 3rem;
}

.werkwijze-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  margin: 3rem 0;
}

.werkwijze-kaart {
  background: var(--doek-warm);
  border-left: 4px solid var(--spot);
  padding: 2rem 1.75rem;
  transition: all var(--t);
  border-radius: 4px;
}

.werkwijze-kaart:hover {
  border-left-color: var(--spot);
  background: var(--doek);
  box-shadow: var(--shadow-zacht);
}

.werkwijze-nummer {
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 300;
  font-style: normal;
  color: var(--spot);
  opacity: 0.25;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.werkwijze-titel {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--inkt);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.werkwijze-tekst {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--inkt-zacht);
  margin: 0;
}

.werkwijze-afsluiting {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--doek-rand);
}

.werkwijze-afsluiting em {
  font-style: normal;
  color: var(--spot);
  font-weight: 500;
}

@media (max-width: 768px) {
  .werkwijze-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  
  .werkwijze-kaart {
    padding: 1.5rem 1.25rem;
  }
  
  .werkwijze-nummer {
    font-size: 2.5rem;
  }
}

/* ── HERO KOLOMMEN + PULL QUOTE (v8.5) ───────── */
.hero-kolommen {
  width: 100%;
}

.hero-kolommen.heeft-pq {
  display: flex;
  flex-wrap: nowrap;
  gap: 2.5rem;
  align-items: flex-start;
  width: 100%;
}

.hero-links {
  flex: 1 1 0%;
  min-width: 0;
}

/* ── PULL QUOTE KADER (rechts in hero) ────────── */
.hero-rechts {
  flex: 0 0 280px;
  max-width: 280px;
  padding-top: 2rem;
}

.hero-pullquote {
  background: #FFFFFF;
  border: 2px solid var(--doek-rand);
  border-left: 5px solid var(--spot);
  border-radius: 0 10px 10px 0;
  padding: 1.5rem 1.5rem 1.25rem;
  margin: 0;
  box-shadow:
    0 2px 8px rgba(42, 36, 31, 0.06),
    0 8px 24px rgba(42, 36, 31, 0.04);
  position: relative;
  z-index: 10;
}

/* Aanhalingsteken decoratie */
.hero-pullquote::before {
  content: '\201C';
  position: absolute;
  top: -8px;
  left: 12px;
  font-family: var(--display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--spot);
  opacity: 0.25;
}

.hero-pullquote p {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: normal;
  line-height: 1.65;
  color: var(--inkt-mid);
  margin: 0 0 0.75rem;
}

.hero-pullquote cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--spot);
}

/* Op donkere hero-foto achtergrond */
[data-tekst="licht"] .hero-pullquote {
  background: rgba(42, 36, 31, 0.85);
  border-color: rgba(255, 255, 255, 0.15);
  border-left-color: var(--spot-zacht);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

[data-tekst="licht"] .hero-pullquote::before {
  color: var(--spot-zacht);
}

[data-tekst="licht"] .hero-pullquote p {
  color: rgba(248, 245, 240, 0.9);
}

[data-tekst="licht"] .hero-pullquote cite {
  color: var(--spot-zacht);
}

/* Responsive: onder 1024px wordt het 1 kolom */
@media (max-width: 1024px) {
  .hero-kolommen.heeft-pq {
    flex-wrap: wrap;
  }

  .hero-rechts {
    flex: 0 0 100%;
    max-width: 480px;
    padding-top: 0;
  }
}

/* ═════════════════════════════════════════════════════════════
   v1.3 — MOBIEL/TABLET VERFIJNING
   ═════════════════════════════════════════════════════════════ */

/* ── iOS auto-zoom voorkomen ─────────────────────────────
   iOS Safari zoomt automatisch in als een input focus krijgt met
   font-size < 16px. Door minimaal 16px aan te houden voorkomen we dat. */
@media (max-width: 900px) {
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ── Touch-device specifieke optimalisaties (pointer:coarse) ────
   Alleen actief op aanraakapparaten — desktops met muis krijgen
   nog steeds de compacte knoppen. */
@media (pointer: coarse) {
  /* Knoppen — minimaal 44×44px tap-target */
  .knop,
  .knop-p,
  .knop-s,
  .knop-o,
  .nav-cta,
  .pakket-toggle,
  .dk-link,
  button:not(.burger):not(.sch):not(.ico-open):not(.ico-sluit) {
    min-height: 44px;
    min-width: 44px;
    padding-top: .65rem;
    padding-bottom: .65rem;
  }
  /* Links binnen body-tekst extra ruimte (anders worden ze moeilijk
     tikbaar als ze op één regel met andere woorden staan) */
  p a, li a, .verhaal-tekst a {
    padding: .15em 0;
    display: inline-block;
  }
}

/* ── Lange woorden netjes afbreken ──────────────────────
   Voorkomt dat lange woorden (zoals 'maatschappijwetenschappelijk')
   uit een smal scherm vallen. */
body, p, h1, h2, h3, h4, .dk-naam, .hero-h1, .s-h2,
.dk-tekst, .verhaal-tekst, .dk-label {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Voorkom horizontale scroll op het hele document */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── iOS tap-highlight — netter ─────────────────────────
   Standaard iOS blauwe flash bij tap → subtiele paarse highlight */
button, a, input, label, .pakket-toggle {
  -webkit-tap-highlight-color: rgba(80, 64, 176, 0.15);
}

/* ── Heel kleine schermen (iPhone SE 1ste gen: 320px) ───── */
@media (max-width: 360px) {
  /* Iets kleinere paddings zodat alle content past */
  .wrap, .hero-in, .ml-knop-wrap {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* Hero titel iets kleiner */
  .hero-intertitel,
  .hero-h1 {
    font-size: clamp(1.9rem, 8vw, 2.4rem) !important;
  }
  .s-h2 {
    font-size: clamp(1.5rem, 7vw, 1.9rem) !important;
  }
  /* Pakket-knoppen passen smaller */
  .pakket-toggle, .pakket-knop {
    font-size: .85rem;
    padding-left: .85rem;
    padding-right: .85rem;
  }
  /* ML knop iets kleiner */
  .ml-knop {
    font-size: .82rem;
    padding-left: .7rem;
    padding-right: .85rem;
  }
  .ml-knop-status {
    font-size: .65rem;
    padding: .12rem .45rem;
  }
}

/* ── Tablet portrait (iPad: 768px) ─────────────────────── */
@media (min-width: 641px) and (max-width: 900px) {
  /* Hero met meer adem op tablet */
  .hero-in {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  /* Twee-koloms grids waar mogelijk */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }
  /* Dienst-kaarten in 2 kolommen */
  .diensten-grid,
  .dk-grid,
  .dienst-kaarten {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   SOLIDARITEITSTARIEF — drie tariefkaarten
   ═════════════════════════════════════════════════════════════ */
.solidariteit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.solidariteit-kaart {
  background: white;
  border: 2px solid var(--spot, #5040B0);
  border-radius: 10px;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.solidariteit-label {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0;
  min-height: 2.6em;
  border-bottom: 1px solid var(--rand, #D8D0C4);
  padding-bottom: .65rem;
}

.solidariteit-tekst {
  font-family: var(--serif, Georgia, serif);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--inkt-mid, #524840);
  margin: 0;
  flex: 1;
}

/* Tablet: 2 kolommen, derde kaart vol */
@media (max-width: 900px) and (min-width: 641px) {
  .solidariteit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .solidariteit-kaart:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
  }
}

/* Mobiel: alles gestapeld */
@media (max-width: 640px) {
  .solidariteit-grid {
    grid-template-columns: 1fr;
  }
  .solidariteit-label {
    min-height: auto;
  }
  .solidariteit-kaart:nth-child(3) {
    max-width: none;
  }
}

/* ═════════════════════════════════════════════════════════════
   TOEGANKELIJKHEIDS-FEEDBACK KADER (op contactpagina)
   ═════════════════════════════════════════════════════════════ */
.a11y-feedback {
  background: white;
  border: 2px solid var(--spot, #5040B0);
  border-radius: 10px;
  padding: 1.75rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  position: relative;
  box-shadow: 0 4px 16px rgba(80, 64, 176, .08);
}

.a11y-feedback-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--spot, #5040B0);
  color: white;
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

.a11y-feedback-inhoud {
  flex: 1;
  min-width: 0;
}

.a11y-feedback-kop {
  font-family: var(--display, Georgia, serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--inkt, #18140F);
  margin: 0 0 .65rem 0;
  line-height: 1.3;
}

.a11y-feedback-tekst {
  font-family: var(--serif, Georgia, serif);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--inkt-mid, #524840);
  margin: 0 0 1.25rem 0;
}

.a11y-feedback-knop {
  display: inline-block;
}

/* Mobiel: badge boven content */
@media (max-width: 640px) {
  .a11y-feedback {
    flex-direction: column;
    padding: 1.25rem;
  }
}

/* ═════════════════════════════════════════════════════════════
   REISAGENDA — combi-afspraken op contactpagina
   ═════════════════════════════════════════════════════════════ */
.reisagenda-sectie {
  padding: 32px 0;
}

.reisagenda-kader {
  background: var(--doek-warm, #EEE9E1);
  border-radius: 14px;
  padding: 1.75rem;
}

.reisagenda-header {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.reisagenda-icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--spot, #5040B0);
  color: white;
  border-radius: 8px;
  flex-shrink: 0;
}

.reisagenda-tekst {
  flex: 1;
  min-width: 0;
}

.reisagenda-kop {
  font-family: var(--display, Georgia, serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--inkt, #18140F);
  margin: 0 0 .35rem 0;
  line-height: 1.3;
}

.reisagenda-intro {
  font-family: var(--serif, Georgia, serif);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--inkt-mid, #524840);
  margin: 0;
}

.reisagenda-lijst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.reisagenda-item {
  background: white;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.25rem;
  align-items: center;
  border-left: 4px solid var(--spot, #5040B0);
}

.reisagenda-datum {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--doek-warm, #EEE9E1);
  border-radius: 8px;
  padding: .55rem .85rem;
  min-width: 60px;
  line-height: 1;
}

.reisagenda-dag {
  font-family: var(--display, Georgia, serif);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--spot, #5040B0);
}

.reisagenda-mnd {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inkt-mid, #524840);
  margin-top: .2rem;
}

.reisagenda-jaar {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .62rem;
  color: var(--inkt-zacht, #8B837A);
  margin-top: .1rem;
}

.reisagenda-info {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.reisagenda-weekdag {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--spot, #5040B0);
}

.reisagenda-plaats {
  font-family: var(--display, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--inkt, #18140F);
  line-height: 1.2;
}

.reisagenda-notitie {
  font-family: var(--serif, Georgia, serif);
  font-size: .88rem;
  color: var(--inkt-mid, #524840);
  line-height: 1.4;
  margin-top: .15rem;
}

.reisagenda-knop {
  display: inline-flex;
  align-items: center;
  background: var(--spot, #5040B0);
  color: white !important;
  text-decoration: none;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .82rem;
  font-weight: 600;
  padding: .55rem 1rem;
  border-radius: 6px;
  min-height: 44px;
  white-space: nowrap;
  transition: background-color 180ms ease;
}

.reisagenda-knop:hover,
.reisagenda-knop:focus-visible {
  background: var(--paars, #5B3D8A);
}

/* Tablet/mobiel: stacken */
@media (max-width: 640px) {
  .reisagenda-kader {
    padding: 1.25rem;
  }
  .reisagenda-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }
  .reisagenda-item {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
  }
  .reisagenda-knop {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

/* ═════════════════════════════════════════════════════════════
   CROWDFUNDING — Voordekunst pagina-templates
   ═════════════════════════════════════════════════════════════ */

/* — Actieve campagne: voortgang-kader ────────────────── */
.cf-voortgang-kader {
  background: white;
  border: 2px solid var(--spot, #5040B0);
  border-radius: 14px;
  padding: 2rem 1.75rem;
  box-shadow: 0 4px 20px rgba(80, 64, 176, .08);
}

.cf-voortgang-cijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.cf-cijfer {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.cf-cijfer-getal {
  font-family: var(--display, Georgia, serif);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--spot, #5040B0);
  line-height: 1.1;
}

.cf-cijfer-label {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .78rem;
  color: var(--inkt-mid, #524840);
  line-height: 1.3;
}

.cf-balk {
  background: var(--doek-warm, #EEE9E1);
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.cf-balk-vol {
  background: linear-gradient(90deg, var(--spot, #5040B0) 0%, var(--paars, #5B3D8A) 100%);
  height: 100%;
  border-radius: 999px;
  transition: width 600ms ease;
}

.cf-steun-knoppen {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.cf-steun-primair {
  flex: 1;
  min-width: 220px;
  text-align: center;
}

.cf-afgerond {
  background: var(--doek-warm, #EEE9E1);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  font-family: var(--serif, Georgia, serif);
  color: var(--inkt-mid, #524840);
  margin: 0;
}

/* — Actieve campagne: verhaal & waarom ─────────────── */
.cf-story-tekst p,
.cf-beloningen-tekst p {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--inkt-mid, #524840);
  margin: 0 0 1.1rem 0;
}

.cf-waarom-kader {
  background: var(--doek-warm, #EEE9E1);
  border-left: 4px solid var(--spot, #5040B0);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
}

.cf-waarom-kop {
  font-family: var(--display, Georgia, serif);
  font-size: 1.3rem;
  color: var(--inkt, #18140F);
  margin: 0 0 1rem 0;
}

.cf-waarom-lijst {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cf-waarom-lijst li {
  position: relative;
  padding: .4rem 0 .4rem 1.5rem;
  font-family: var(--serif, Georgia, serif);
  font-size: .98rem;
  line-height: 1.55;
  color: var(--inkt-mid, #524840);
}

.cf-waarom-lijst li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--spot, #5040B0);
  font-weight: 700;
}

/* — Pre-launch ────────────────────────────────────── */
.cfl-hero {
  background: linear-gradient(135deg, var(--doek, #F8F5F0) 0%, var(--doek-warm, #EEE9E1) 100%);
}

.cfl-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: white;
  border: 2px solid var(--spot, #5040B0);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--spot, #5040B0);
  margin-bottom: 1.25rem;
}

.cfl-badge-stip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--spot, #5040B0);
  animation: cflPuls 2s infinite;
}

@keyframes cflPuls {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.cfl-titel {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  margin: 0 0 1rem 0;
}

.cfl-pitch {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--inkt-mid, #524840);
  margin: 0 auto 1.5rem;
  max-width: 50ch;
}

.cfl-datum {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: white;
  border-radius: 8px;
  padding: .6rem 1rem;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .92rem;
  color: var(--inkt-mid, #524840);
  margin: 0;
}

.cfl-datum-label {
  color: var(--inkt-zacht, #8B837A);
}

.cfl-tekst p,
.cfl-waarom-tekst {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--inkt-mid, #524840);
  margin: 0 0 1.1rem 0;
}

.cfl-waarom-tekst:first-of-type::first-line {
  font-weight: 600;
  color: var(--inkt, #18140F);
}

.cfl-aanmeld-kader {
  background: white;
  border: 2px solid var(--spot, #5040B0);
  border-radius: 14px;
  padding: 2rem 1.75rem;
}

.cfl-aanmeld-kop {
  font-family: var(--display, Georgia, serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--inkt, #18140F);
  margin: 0 0 .65rem 0;
  text-align: center;
}

.cfl-aanmeld-tekst {
  font-family: var(--serif, Georgia, serif);
  font-size: .98rem;
  line-height: 1.6;
  color: var(--inkt-mid, #524840);
  text-align: center;
  margin: 0 0 1.5rem 0;
}

.cfl-form-label {
  display: block;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .85rem;
  font-weight: 600;
  color: var(--inkt, #18140F);
  margin-bottom: .5rem;
}

.cfl-required {
  color: #C03030;
}

.cfl-form-rij {
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
}

.cfl-input {
  flex: 1;
  min-width: 180px;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 16px;
  padding: .75rem 1rem;
  border: 1px solid var(--rand, #D8D0C4);
  border-radius: 6px;
  background: white;
  min-height: 44px;
}

.cfl-input:focus-visible {
  outline: 3px solid var(--spot, #5040B0);
  outline-offset: 2px;
  border-color: var(--spot, #5040B0);
}

.cfl-submit {
  white-space: nowrap;
}

.cfl-privacy {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .78rem;
  color: var(--inkt-zacht, #8B837A);
  line-height: 1.5;
  margin: .85rem 0 0 0;
  text-align: center;
}

.cfl-config-warning {
  background: rgba(217, 119, 6, 0.08);
  border-left: 4px solid #D97706;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .9rem;
  color: var(--inkt-mid, #524840);
  line-height: 1.55;
  margin: 0;
}

/* Mobiel */
@media (max-width: 640px) {
  .cf-voortgang-kader,
  .cfl-aanmeld-kader {
    padding: 1.25rem;
  }
  .cf-cijfer-getal {
    font-size: 1.55rem;
  }
  .cfl-form-rij {
    flex-direction: column;
  }
  .cfl-submit {
    width: 100%;
  }
  .cf-steun-knoppen {
    flex-direction: column;
  }
  .cf-steun-knoppen .knop {
    width: 100%;
    text-align: center;
  }
}

/* ═════════════════════════════════════════════════════════════
   EBOOK LANDING — gratis lead magnet
   ═════════════════════════════════════════════════════════════ */

/* — Hero ─────────────────────────────────────────────── */
.ebook-hero {
  background: linear-gradient(135deg, var(--doek) 0%, var(--doek-warm) 100%);
}

.ebook-rij {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
}

.ebook-oog {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--spot, #5040B0);
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.ebook-oog::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--spot, #5040B0);
}

.ebook-titel {
  font-family: var(--display, Georgia, serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--inkt, #18140F);
  margin: 0 0 1rem 0;
  letter-spacing: -0.01em;
}

.ebook-pitch {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--inkt-mid, #524840);
  margin: 0 0 1.5rem 0;
}

.ebook-meta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .92rem;
  color: var(--inkt-mid, #524840);
  margin: 0 0 1.5rem 0;
}

.ebook-meta-stip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--groen, #228B56);
  display: inline-block;
}

.ebook-cta-knop {
  display: inline-block;
  font-size: 1.05rem;
  padding: .9rem 1.75rem;
}

/* — Cover (echte afbeelding) ───────────────────────── */
.ebook-cover-beeld {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.05),
    0 25px 50px -12px rgba(80, 64, 176, 0.3),
    0 10px 20px -8px rgba(0,0,0,0.15);
  transform: rotate(-1.5deg);
  transition: transform 300ms ease;
}

.ebook-cover-beeld:hover {
  transform: rotate(0) translateY(-4px);
}

/* — Cover (placeholder als geen afbeelding) ──────── */
.ebook-cover-placeholder {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 5 / 7;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--spot, #5040B0) 0%, var(--paars, #5B3D8A) 100%);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem 1.75rem;
  color: white;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.05),
    0 25px 50px -12px rgba(80, 64, 176, 0.4),
    0 10px 20px -8px rgba(0,0,0,0.2);
  transform: rotate(-1.5deg);
  position: relative;
  overflow: hidden;
}

.ebook-cover-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8px;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.15);
}

.ebook-cover-placeholder-oog {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.ebook-cover-placeholder-titel {
  font-family: var(--display, Georgia, serif);
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 1rem 0 auto;
}

.ebook-cover-placeholder-auteur {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, 0.85);
  margin-top: auto;
}

/* — Inhoud sectie ───────────────────────────────── */
.ebook-inhoud-kader,
.ebook-voor-kader {
  background: white;
  border-radius: 12px;
  padding: 1.75rem 2rem;
  border-left: 4px solid var(--spot, #5040B0);
}

.ebook-voor-kader {
  background: white;
  border-left-color: var(--paars, #5B3D8A);
}

.ebook-inhoud-kop,
.ebook-voor-kop {
  font-family: var(--display, Georgia, serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--inkt, #18140F);
  margin: 0 0 1rem 0;
  line-height: 1.3;
}

.ebook-inhoud-lijst,
.ebook-voor-lijst {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ebook-inhoud-lijst li,
.ebook-voor-lijst li {
  position: relative;
  padding: .4rem 0 .4rem 1.75rem;
  font-family: var(--serif, Georgia, serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--inkt-mid, #524840);
}

.ebook-inhoud-lijst li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--spot, #5040B0);
  font-weight: 700;
  font-size: 1rem;
}

.ebook-voor-lijst li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--paars, #5B3D8A);
  font-weight: 700;
}

/* — Formulier ────────────────────────────────────── */
.ebook-form-sectie {
  background: var(--doek, #F8F5F0);
}

.ebook-form-kader {
  background: white;
  border: 2px solid var(--spot, #5040B0);
  border-radius: 14px;
  padding: 2rem 1.75rem;
  box-shadow: 0 4px 20px rgba(80, 64, 176, .1);
}

.ebook-form-kop {
  font-family: var(--display, Georgia, serif);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--inkt, #18140F);
  margin: 0 0 .65rem 0;
  text-align: center;
  line-height: 1.2;
}

.ebook-form-tekst {
  font-family: var(--serif, Georgia, serif);
  font-size: .98rem;
  line-height: 1.6;
  color: var(--inkt-mid, #524840);
  text-align: center;
  margin: 0 0 1.5rem 0;
}

.ebook-form-label {
  display: block;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .85rem;
  font-weight: 600;
  color: var(--inkt, #18140F);
  margin-bottom: .5rem;
}

.ebook-required {
  color: var(--rood, #C03030);
}

.ebook-form-rij {
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
}

.ebook-input {
  flex: 1;
  min-width: 180px;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 16px;
  padding: .75rem 1rem;
  border: 1px solid var(--rand, #D8D0C4);
  border-radius: 6px;
  background: white;
  min-height: 44px;
}

.ebook-input:focus-visible {
  outline: 3px solid var(--spot, #5040B0);
  outline-offset: 2px;
  border-color: var(--spot, #5040B0);
}

.ebook-submit {
  white-space: nowrap;
  min-height: 44px;
}

.ebook-privacy {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .78rem;
  color: var(--inkt-zacht, #8B837A);
  line-height: 1.55;
  margin: .85rem 0 0 0;
  text-align: center;
}

.ebook-config-warn {
  background: rgba(217, 119, 6, 0.08);
  border-left: 4px solid var(--amber, #D97706);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .9rem;
  color: var(--inkt-mid, #524840);
  line-height: 1.55;
  margin: 0;
}

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

/* — Bedankt-sectie na inschrijving ──────────────── */
.ebook-bedankt {
  text-align: center;
  padding: 1rem 0;
}

.ebook-bedankt-kop {
  font-family: var(--display, Georgia, serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--spot, #5040B0);
  margin: 0 0 .65rem 0;
}

.ebook-bedankt-tekst {
  font-family: var(--serif, Georgia, serif);
  font-size: .98rem;
  line-height: 1.6;
  color: var(--inkt-mid, #524840);
  margin: 0 0 1.5rem 0;
}

/* — Mobiel — verticaal stacken ──────────────────── */
@media (max-width: 800px) {
  .ebook-rij {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .ebook-cover-kolom {
    order: -1;
  }
}

@media (max-width: 640px) {
  .ebook-form-kader,
  .ebook-inhoud-kader,
  .ebook-voor-kader {
    padding: 1.25rem;
  }
  .ebook-form-rij {
    flex-direction: column;
  }
  .ebook-submit {
    width: 100%;
  }
  .ebook-cover-placeholder,
  .ebook-cover-beeld {
    max-width: 220px;
  }
}

/* ═════════════════════════════════════════════════════════════
   STICKY REQUIREMENT — GEEN donkere achtergronden
   Override van .s-donker en .s-scene naar lichte achtergrond
   ═════════════════════════════════════════════════════════════ */
.s-donker,
.s-scene {
  background: var(--doek-warm) !important;
  color: var(--inkt) !important;
}

/* Eyebrows binnen die secties — terug naar gewoon spot */
.s-donker .s-oog-lbl,
.s-scene .s-oog-lbl {
  color: var(--spot) !important;
}

/* Knoppen binnen die secties terug naar normale stijl */
.s-donker .knop-s,
.s-donker .knop-o,
.s-scene .knop-s,
.s-scene .knop-o {
  color: var(--spot) !important;
  border-color: var(--spot) !important;
  background: transparent !important;
}

.s-donker .knop-s:hover,
.s-donker .knop-o:hover,
.s-scene .knop-s:hover,
.s-scene .knop-o:hover {
  color: white !important;
  background: var(--spot) !important;
  border-color: var(--spot) !important;
}

/* Primaire knop binnen die secties: behoud volle paars */
.s-donker .knop-p,
.s-scene .knop-p {
  background: var(--spot) !important;
  color: white !important;
  border-color: var(--spot) !important;
}

/* Headings en alinea's gewone donkere tekst-kleur */
.s-donker h1, .s-donker h2, .s-donker h3, .s-donker h4,
.s-scene h1, .s-scene h2, .s-scene h3, .s-scene h4 {
  color: var(--inkt) !important;
}

.s-donker p, .s-donker li,
.s-scene p, .s-scene li {
  color: var(--inkt-mid) !important;
}

/* Links in donkere secties terug naar spot */
.s-donker a:not(.knop):not(.knop-p):not(.knop-s):not(.knop-o):not(.dk-link),
.s-scene a:not(.knop):not(.knop-p):not(.knop-s):not(.knop-o) {
  color: var(--spot) !important;
}

/* ═════════════════════════════════════════════════════════════
   STICKY REQUIREMENT — GEEN donkere achtergronden
   Overschrijf de --scene variabele zelf naar licht crème.
   Daardoor worden ALLE plekken die --scene gebruiken licht
   (footer, secties, hero-gradients, alles).
   ═════════════════════════════════════════════════════════════ */
:root {
  --scene:     #F8F5F0 !important;  /* was #1E1A2E (donker indigo) */
  --scene-mid: #EEE9E1 !important;  /* was #2A2540 (donker paars)  */
}

/* Tekst in voormalig-donkere secties: zwart i.p.v. wit */
.s-donker,
.s-scene,
.site-footer {
  color: var(--inkt) !important;
}

/* Eyebrows weer zichtbaar paars */
.s-donker .s-oog-lbl,
.s-scene .s-oog-lbl,
.site-footer .s-oog-lbl {
  color: var(--spot) !important;
}

/* Knoppen-stijl voor secties die voorheen donker waren */
.s-donker .knop-s,
.s-donker .knop-o,
.s-scene .knop-s,
.s-scene .knop-o {
  color: var(--spot) !important;
  border-color: var(--spot) !important;
  background: transparent !important;
}

.s-donker .knop-s:hover,
.s-donker .knop-o:hover,
.s-scene .knop-s:hover,
.s-scene .knop-o:hover {
  color: white !important;
  background: var(--spot) !important;
}

/* Footer kleuren — tekst en links donker op licht */
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer p,
.site-footer .footer-tekst,
.site-footer .footer-kop,
.site-footer .footer-links a,
.site-footer .footer-onderkant {
  color: var(--inkt) !important;
}

.site-footer .footer-links a {
  color: var(--inkt-mid) !important;
}

.site-footer .footer-links a:hover {
  color: var(--spot) !important;
}

.site-footer .footer-logo-naam,
.site-footer .footer-logo-naam em {
  color: var(--inkt) !important;
}

.site-footer .footer-logo-naam em {
  color: var(--spot) !important;
}

.site-footer .footer-logo-tag {
  color: var(--inkt-zacht) !important;
}

/* Social-knoppen in footer */
.site-footer .social-knop {
  color: var(--spot) !important;
  border-color: var(--spot) !important;
  background: transparent !important;
}

.site-footer .social-knop:hover {
  background: var(--spot) !important;
  color: white !important;
}

/* ═════════════════════════════════════════════════════════════
   v1.7 — Resterende hardcoded donkere kleuren overschrijven
   ═════════════════════════════════════════════════════════════ */

/* Hero-overlays — alle varianten naar lichte tinten of transparant */
.hero-overlay[data-kleur="donker"] {
  background: rgba(248, 245, 240, 0.4) !important;  /* lichte crème met opacity */
}
.hero-overlay[data-kleur="scene"] {
  background: rgba(248, 245, 240, 0.4) !important;
}
.hero-overlay[data-kleur="paars"] {
  background: linear-gradient(135deg, rgba(91,77,181,0.15), rgba(107,77,148,0.15)) !important;
}
.hero-overlay[data-kleur="spot"] {
  background: linear-gradient(135deg, rgba(91,77,181,0.2), rgba(91,77,181,0.1)) !important;
}

/* Coming-soon filmstrips lichter (was #18140F) */
.filmstrip-boven,
.filmstrip-onder {
  background: var(--doek-warm) !important;
  border-top: 1px solid var(--doek-rand) !important;
  border-bottom: 1px solid var(--doek-rand) !important;
}

/* Copyright-notice op publicaties — was donker met witte tekst */
aside.copyright-notice[style*="--scene"],
aside.copyright-notice {
  background: var(--doek-warm) !important;
  color: var(--inkt) !important;
  border: 1px solid var(--doek-rand) !important;
}

/* Boeken-modal achtergrond was rgba(24,20,15,0.8) — paars licht */
.booking-modal,
[id="booking-modal"] {
  background: rgba(91, 77, 181, 0.25) !important;
}

/* Video container in zie-mij-spreken (had inline var(--scene)) */
.zie-mij-spreken-video,
.zie-mij-spreken-wrap > div[style*="--scene"] {
  background: var(--doek-warm) !important;
}

/* ═════════════════════════════════════════════════════════════
   v1.8 — DEFINITIEVE FIX (live getest in browser)
   Alle resterende donkere achtergronden van v3.0 overschreven.
   ═════════════════════════════════════════════════════════════ */

:root {
  --scene: #F8F5F0 !important;
  --scene-mid: #EEE9E1 !important;
}

/* Alle voorheen donkere secties → licht crème */
.s-donker,
.s-scene,
.site-footer,
.projecten-cta {
  background: var(--doek-warm) !important;
  color: var(--inkt) !important;
}

/* Projecten-CTA krijgt subtiele paars-tint i.p.v. donker paars */
.projecten-cta {
  background: linear-gradient(135deg, var(--doek-warm) 0%, rgba(91,77,181,0.08) 100%) !important;
  border: 1px solid var(--rand) !important;
}

/* Tekst in deze secties altijd donker */
.s-donker h1, .s-donker h2, .s-donker h3, .s-donker p, .s-donker li,
.s-scene h1, .s-scene h2, .s-scene h3, .s-scene p, .s-scene li,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer p, .site-footer li,
.projecten-cta h1, .projecten-cta h2, .projecten-cta h3, .projecten-cta p {
  color: var(--inkt) !important;
}
.s-donker p, .s-scene p, .site-footer p, .projecten-cta p {
  color: var(--inkt-mid) !important;
}

/* Footer-logo zichtbaar (was wit op licht = onzichtbaar) */
.footer-logo-naam, .site-footer .footer-logo-naam {
  color: var(--inkt) !important;
}
.footer-logo-naam em, .site-footer .footer-logo-naam em {
  color: var(--spot) !important;
}

/* Eyebrows in deze secties */
.s-donker .s-oog-lbl, .s-scene .s-oog-lbl,
.site-footer .s-oog-lbl, .projecten-cta .s-oog-lbl {
  color: var(--spot) !important;
}

/* Links in deze secties */
.s-donker a:not(.knop):not([class*="knop-"]):not(.dk-link),
.s-scene a:not(.knop):not([class*="knop-"]):not(.dk-link),
.site-footer a:not(.knop):not([class*="knop-"]):not(.dk-link) {
  color: var(--inkt-mid) !important;
}
.s-donker a:not(.knop):not(.dk-link):hover,
.s-scene a:not(.knop):not(.dk-link):hover,
.site-footer a:not(.knop):hover {
  color: var(--spot) !important;
}

/* Knoppen in deze secties — outline-stijl */
.s-donker .knop-s, .s-donker .knop-o,
.s-scene .knop-s, .s-scene .knop-o,
.projecten-cta .knop-s, .projecten-cta .knop-o, .projecten-cta .knop {
  color: var(--spot) !important;
  border-color: var(--spot) !important;
  background: transparent !important;
}
.s-donker .knop-s:hover, .s-scene .knop-s:hover, .projecten-cta .knop:hover {
  background: var(--spot) !important;
  color: white !important;
}

/* Hero overlay — alle kleur-varianten naar licht */
.hero-overlay[data-kleur="donker"],
.hero-overlay[data-kleur="scene"] {
  background: rgba(248, 245, 240, 0.25) !important;
}
.hero-overlay[data-kleur="paars"],
.hero-overlay[data-kleur="spot"] {
  background: linear-gradient(135deg, rgba(91,77,181,.12), rgba(107,77,148,.12)) !important;
}

/* Hero pullquote-kader was donker met witte tekst */
.hero-pullquote {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--inkt) !important;
  border-left: 4px solid var(--spot) !important;
  border-color: var(--spot) !important;
}
.hero-pullquote *, .hero-pullquote cite { color: var(--inkt) !important; }
.hero-pullquote .hero-pullquote-bron, .hero-pullquote cite {
  color: var(--inkt-mid) !important;
}


/* Coming-soon filmstrips niet meer zwart */
.filmstrip-boven, .filmstrip-onder {
  background: var(--doek-warm) !important;
}

/* Copyright notice op publicatie-pagina niet meer donker */
aside.copyright-notice {
  background: var(--doek-warm) !important;
  color: var(--inkt) !important;
  border: 1px solid var(--rand) !important;
}

/* Boekings-modal overlay niet meer zwart */
.booking-modal, #booking-modal {
  background: rgba(91, 77, 181, 0.25) !important;
}

/* ═════════════════════════════════════════════════════════════
   v1.8 — COMPACTE PROJECTKAARTEN NAAST FOTO
   Optionele homepage-layout waar 5 dienst-kaarten compact
   naast de portret-foto staan. Activeer met body.layout-naast-foto
   ═════════════════════════════════════════════════════════════ */

.hero-met-kaarten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

/* Foto-kolom links */
.hero-met-kaarten-foto {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: var(--doek-warm);
}

.hero-met-kaarten-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Compacte kaartjes rechts */
.compact-kaarten-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
}

.compact-kaart {
  background: white;
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: all 200ms ease;
  min-height: 64px;
}

.compact-kaart:hover {
  border-color: var(--spot);
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(91,77,181,.08);
}

.compact-kaart-nr {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--spot-zacht);
  line-height: 1;
  flex-shrink: 0;
  min-width: 32px;
}

.compact-kaart-inhoud {
  flex: 1;
  min-width: 0;
}

.compact-kaart-naam {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--inkt);
  line-height: 1.2;
  margin: 0 0 .15rem 0;
}

.compact-kaart-wat {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--inkt-zacht);
  line-height: 1.4;
  margin: 0;
}

.compact-kaart-pijl {
  font-size: 1.2rem;
  color: var(--spot);
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.compact-kaart:hover .compact-kaart-pijl {
  transform: translateX(4px);
}

/* Tablet/mobiel: stack — foto bovenaan, kaarten eronder */
@media (max-width: 900px) {
  .hero-met-kaarten {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .hero-met-kaarten-foto {
    max-width: 400px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 480px) {
  .compact-kaart {
    padding: .85rem 1rem;
    gap: .75rem;
    min-height: 56px;
  }
  .compact-kaart-nr {
    font-size: 1.2rem;
    min-width: 28px;
  }
  .compact-kaart-naam {
    font-size: 1rem;
  }
  .compact-kaart-wat {
    font-size: .73rem;
  }
}

/* ═════════════════════════════════════════════════════════════
   v1.9 — UNIFORM BUTTON SYSTEM
   Eén basisstijl, vier varianten. Alle 44px+ tap-target.
   Live getest in browser tegen v3.0 productie.
   ═════════════════════════════════════════════════════════════ */

.knop,
.knop-p, .knop-s, .knop-o, .knop-l, .knop-linkedin,
.social-knop, .footer-taal-knop,
button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: .9375rem !important;
  line-height: 1.2 !important;
  letter-spacing: .005em !important;
  min-height: 44px !important;
  padding: .75rem 1.25rem !important;
  border-radius: 6px !important;
  border: 2px solid transparent !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 200ms cubic-bezier(.22,1,.36,1) !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.knop:focus-visible,
.knop-p:focus-visible, .knop-s:focus-visible, .knop-o:focus-visible,
.knop-l:focus-visible, .knop-linkedin:focus-visible,
.social-knop:focus-visible, .footer-taal-knop:focus-visible,
button[type="submit"]:focus-visible {
  outline: 3px solid var(--spot) !important;
  outline-offset: 3px !important;
}

/* PRIMAIR — gevulde paarse knop, witte tekst */
.knop-p, button[type="submit"] {
  background: var(--spot) !important;
  color: white !important;
  border-color: var(--spot) !important;
}
.knop-p:hover, button[type="submit"]:hover {
  background: var(--spot-mid) !important;
  border-color: var(--spot-mid) !important;
  transform: translateY(-1px);
}

/* SECUNDAIR & OUTLINE — paarse rand, transparante achtergrond */
.knop-s, .knop-o {
  background: transparent !important;
  color: var(--spot) !important;
  border-color: var(--spot) !important;
}
.knop-s:hover, .knop-o:hover {
  background: var(--spot) !important;
  color: white !important;
  transform: translateY(-1px);
}

/* TEKST-LINK — geen rand, alleen underline */
.knop-l {
  background: transparent !important;
  color: var(--spot) !important;
  border: none !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  padding: .5rem .75rem !important;
}
.knop-l:hover { color: var(--spot-mid) !important; }

/* ICON-KNOPPEN (social, taal-toggle) — vierkant 44px met afgeronde hoeken */
.social-knop, .footer-taal-knop {
  background: transparent !important;
  color: var(--spot) !important;
  border: 2px solid var(--spot) !important;
  border-radius: 6px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: .5rem .85rem !important;
  font-size: .85rem !important;
  font-family: 'DM Sans', sans-serif !important;
}
.social-knop {
  width: 44px !important;
  padding: 0 !important;
}
.social-knop:hover, .footer-taal-knop:hover {
  background: var(--spot) !important;
  color: white !important;
}

/* LINKEDIN — behoudt LinkedIn-blauw maar matched dimensies */
.knop-linkedin {
  background: #0A66C2 !important;
  color: white !important;
  border-color: #0A66C2 !important;
}
.knop-linkedin:hover {
  background: #004182 !important;
  border-color: #004182 !important;
}

/* Knoppen-groepen — wrap netjes op mobiel */
.hero-cta, .hero-knoppen, .knoppen-rij {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .75rem !important;
}

/* Op mobiel: knoppen 100% breedte */
@media (max-width: 480px) {
  .knop-p, .knop-s, .knop-o {
    width: auto !important;
  }
  .knoppen-rij .knop-p, .knoppen-rij .knop-s, .knoppen-rij .knop-o,
  .hero-cta .knop-p, .hero-cta .knop-s, .hero-cta .knop-o {
    width: auto !important;
    flex: 0 1 auto !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   v2.0 — Twee gerichte fixes
   1. Sticky Makkelijk Lezen-balk weg (gebruiker vond hem hinderlijk)
   2. Buttons mogen geen 100% width op mobiel — width: auto
   ═════════════════════════════════════════════════════════════ */

/* Sticky Makkelijk Lezen balk volledig verbergen */
.tb-balk,
[class^="tb-balk"],
.taalbalk,
div[role="region"][aria-label="Leesvoorkeur"] {
  display: none !important;
}

/* Buttons NIET op 100% breedte op mobiel — width: auto */
@media (max-width: 480px) {
  .knop, .knop-p, .knop-s, .knop-o, .knop-l, .knop-linkedin,
  .social-knop, .footer-taal-knop,
  button[type="submit"] {
    width: auto !important;
  }
  .knoppen-rij .knop, .knoppen-rij [class*="knop-"],
  .hero-cta .knop, .hero-cta [class*="knop-"] {
    width: auto !important;
    flex: 0 1 auto !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   v2.9 FIXES
   1. Hero lichte tekst: NIET overschrijven (wit op foto is correct)
   2. Footer: social-knoppen en taal-knop terugzetten naar compact
   ═════════════════════════════════════════════════════════════ */

/* Footer social-knoppen: compact, niet het volledige button-systeem */
.site-footer .social-knop {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  border: 1px solid var(--spot) !important;
  border-radius: 6px !important;
  font-family: 'Libre Baskerville', Georgia, serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--spot) !important;
  background: transparent !important;
  text-decoration: none !important;
}
.site-footer .social-knop:hover {
  background: var(--spot) !important;
  color: white !important;
}

/* Footer taal-knop: compact inline */
.site-footer .footer-taal-knop {
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  height: auto !important;
  min-height: 36px !important;
  min-width: auto !important;
  padding: .4rem .75rem !important;
  border: 1px solid var(--doek-rand) !important;
  border-radius: 4px !important;
  font-family: var(--sans) !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  color: var(--inkt-zacht) !important;
  background: transparent !important;
  white-space: nowrap !important;
}
.site-footer .footer-taal-knop:hover {
  border-color: var(--spot) !important;
  color: var(--spot) !important;
  background: transparent !important;
}

/* Footer-grid: niet laten breken door button-widths */
.footer-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 3rem !important;
}
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
}

/* Footer tekst: leesbaar op licht */
.site-footer .footer-logo-naam { color: var(--inkt) !important; }
.site-footer .footer-logo-naam em { color: var(--spot) !important; }
.site-footer .footer-logo-tag { color: var(--inkt-zacht) !important; }
.site-footer .footer-tekst { color: var(--inkt-mid) !important; }
.site-footer .footer-kop { color: var(--inkt) !important; }
.site-footer .footer-links a { color: var(--inkt-mid) !important; }
.site-footer .footer-links a:hover { color: var(--spot) !important; }

/* v3.1 FIX — dk-link knoppen op aanbod-pagina: tekst zichtbaar */
.dk-link {
  background: var(--spot) !important;
  color: white !important;
  border-color: var(--spot) !important;
}
.dk-link:hover {
  background: var(--spot-mid) !important;
  color: white !important;
  border-color: var(--spot-mid) !important;
}

/* Garantie: ook binnen s-donker secties */
.s-donker .dk-link {
  background: var(--spot) !important;
  color: white !important;
  border-color: var(--spot) !important;
}

/* v3.5 FIX — Hero subtitel + eyebrow wit op foto */
.hero[data-tekst="licht"] .hero-stelling {
  color: rgba(248, 244, 238, 0.85) !important;
  border-left-color: var(--spot) !important;
}
.hero[data-tekst="licht"] .hero-oog span,
.hero[data-tekst="licht"] .hero-oog-lbl {
  color: rgba(248, 244, 238, 0.75) !important;
}

/* ML-knop niet afgesneden — genoeg ruimte bovenaan */
.ml-knop-balk {
  overflow: visible !important;
  z-index: 10;
  position: relative;
}
.ml-knop-wrap {
  margin-top: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* v3.7 FIX — Hero subtitel leesbaar op alle huidskleuren */
.hero[data-tekst="licht"] .hero-stelling {
  color: white !important;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.5),
    0 2px 12px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(0, 0, 0, 0.2) !important;
  border-left-color: white !important;
}

/* Zelfde voor de eyebrow boven de titel */
.hero[data-tekst="licht"] .hero-oog span,
.hero[data-tekst="licht"] .hero-oog-lbl,
.hero[data-tekst="licht"] .s-oog-lbl {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Titel ook iets sterkere schaduw */
.hero[data-tekst="licht"] .hero-intertitel {
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* ═════════════════════════════════════════════════════════════
   v3.8 FIXES
   1. Hero subtitel: semi-transparante achtergrond + paarse zijstreep
   2. ML-knop: niet meer afgesneden
   ═════════════════════════════════════════════════════════════ */

/* Hero subtitel — leesbaar op ALLE achtergronden */
.hero[data-tekst="licht"] .hero-stelling {
  color: white !important;
  background: rgba(0, 0, 0, 0.35) !important;
  padding: 1rem 1.25rem !important;
  border-radius: 6px !important;
  border-left: 3px solid var(--spot) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Hero titel — sterkere schaduw voor leesbaarheid */
.hero[data-tekst="licht"] .hero-intertitel {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

/* Eyebrow op hero — ook beter leesbaar */
.hero[data-tekst="licht"] .hero-oog span,
.hero[data-tekst="licht"] .hero-oog-lbl,
.hero[data-tekst="licht"] .s-oog-lbl {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

/* ML-knop niet afgesneden */
.ml-knop-balk {
  position: relative !important;
  z-index: 50 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  background: var(--doek) !important;
  border-bottom: 1px solid var(--doek-rand) !important;
}

/* Voorkom dat body overflow de knop knipt */
body.logged-in.admin-bar .ml-knop-balk {
  margin-top: 0 !important;
}

/* ═════════════════════════════════════════════════════════════
   v3.9 — Header minder hoog + ML-knop niet meer bedekt
   ═════════════════════════════════════════════════════════════ */

/* Header compacter */
.site-header {
  padding: 0.65rem 0 !important;
}

/* ML-knop balk: zelfde z-index als header zodat hij niet bedekt wordt */
.ml-knop-balk {
  position: sticky !important;
  top: 32px !important;         /* net onder admin-bar */
  z-index: 501 !important;      /* boven de header */
  background: var(--doek) !important;
  border-bottom: 1px solid var(--doek-rand) !important;
  padding: 6px 0 !important;
}

/* Zonder admin-bar */
body:not(.admin-bar) .ml-knop-balk {
  top: 0 !important;
}

/* Header schuift daaronder */
body.admin-bar .site-header {
  top: calc(32px + 50px) !important;  /* admin-bar + ML-balk hoogte */
}
body:not(.admin-bar) .site-header {
  top: 50px !important;               /* ML-balk hoogte */
}

/* v3.9b — ML-knop fix (boven header in HTML, niet sticky) */
.ml-knop-balk {
  position: relative !important;
  z-index: 10 !important;
  top: auto !important;
  background: var(--doek) !important;
  border-bottom: 1px solid var(--doek-rand) !important;
  padding: 8px 0 !important;
}

/* Header compacter en correct sticky */
.site-header {
  padding: 0.65rem 0 !important;
}

/* Reset de eerdere top-overrides */
body.admin-bar .site-header {
  top: 32px !important;
}
body:not(.admin-bar) .site-header {
  top: 0 !important;
}

/* v4.3 — Offerte/contact formulier header groter */
#contact-pag-kop,
#offerte-kop {
  font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
  margin-bottom: 1.25rem !important;
}

/* v4.5 — Formulier-kop "Offerte aanvragen" groter */
.form-kop {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
  margin-bottom: .6rem !important;
}

/* ═════════════════════════════════════════════════════════════
   v4.6 FIXES
   1. Geen agressieve woordafbreking meer op mobiel
   2. Nav-cta button niet afbreken op tablet
   ═════════════════════════════════════════════════════════════ */

/* Verwijder hyphens: auto — Nederlandse woorden breken lelijk af */
body, p, h1, h2, h3, h4, .dk-naam, .hero-h1, .s-h2,
.dk-tekst, .verhaal-tekst, .dk-label {
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* Nav-cta (Neem contact op) button: nooit afbreken of 100% breed */
.nav-cta {
  width: auto !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Tablet: nav-cta mag smaller maar niet 100% */
@media (max-width: 768px) {
  .nav-cta {
    width: auto !important;
    display: inline-flex !important;
    padding: .7rem 1.1rem !important;
    font-size: .9rem !important;
    white-space: nowrap !important;
  }
}

/* ─────────────────────────────────────────────────
   NOODVANGNET: aanbevelingen-lettertype
   Allerlaatste regel in het bestand, wint gegarandeerd.
───────────────────────────────────────────────── */
#spreken-abv .abv-citaat p{
  font-family:'Libre Baskerville',Georgia,serif !important;
}