/* Tanja Kuiper Coaching — één stylesheet voor alle pagina's.
   Licht en donker via prefers-color-scheme; alle kleuren staan in tokens. */

:root {
  color-scheme: light dark;

  --bg: #FDF9F1;
  --paper: #F7F1E4;
  --paper2: #F6EEE1;
  --sage: #E8EEF5;
  --field: #FFFFFF;
  --ink: #201B14;
  --muted: #574E42;
  --blue: #14508F;
  --cta: #2B5486;
  --cta-hover: #24486F;
  --cta-active: #1E3D63;
  --ctaink: #FDF9F1;
  --accent: #14508F;
  --sel: #1B4F86;
  --sel-sterk: #123A65;
  --sel-ink: #FBF7EF;
  --clay: #78391C;
  --line: #DFD6C4;
  --hair: #EBE3D3;
  --shadow-soft: 0 12px 30px -26px rgba(32, 27, 20, 0.45);
  --shadow-lift: 0 24px 48px -34px rgba(32, 27, 20, 0.5);
  --shadow-head: 0 10px 30px -24px rgba(32, 27, 20, 0.5);
  --logo-blend: multiply;

  --radius: 6px;
  --radius-sm: 4px;
  --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Instrument Sans", "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;

  --body: clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem);
  --h1: clamp(2.25rem, 1.55rem + 2.6vw, 4rem);
  --h2: clamp(1.4rem, 1.25rem + 0.9vw, 2.05rem);
  --h3: clamp(1.125rem, 1.08rem + 0.3vw, 1.3rem);
  --small: clamp(0.9375rem, 0.92rem + 0.15vw, 1rem);
  --eyebrow: 0.8125rem;
  --numeral: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);

  --pad: 1.5rem;
  --gutter: 2rem;
  --panelpad: 1.5rem;
  --wrap: 72rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --bg: #14171B;
    --paper: #191D23;
    --paper2: #171B20;
    --sage: #1B242F;
    --field: #1E232A;
    --ink: #ECE7DE;
    --muted: #A7A099;
    --blue: #8FB9E9;
    --cta: #3D6CA6;
    --cta-hover: #4A7CBB;
    --cta-active: #325A8B;
    --ctaink: #F4F1EA;
    --accent: #8FB9E9;
    --sel: #2E6BA8;
    --sel-sterk: #24568A;
    --sel-ink: #F7FAFE;
    --clay: #D99A76;
    --line: #333B45;
    --hair: #262D36;
    --shadow-soft: 0 12px 30px -24px rgba(0, 0, 0, 0.8);
    --shadow-lift: 0 24px 48px -30px rgba(0, 0, 0, 0.85);
    --shadow-head: 0 10px 30px -22px rgba(0, 0, 0, 0.9);
    --logo-blend: normal;
  }
}

:root[data-thema="donker"] {
  --bg: #14171B;
  --paper: #191D23;
  --paper2: #171B20;
  --sage: #1B242F;
  --field: #1E232A;
  --ink: #ECE7DE;
  --muted: #A7A099;
  --blue: #8FB9E9;
  --cta: #3D6CA6;
  --cta-hover: #4A7CBB;
  --cta-active: #325A8B;
  --ctaink: #F4F1EA;
  --accent: #8FB9E9;
  --sel: #2E6BA8;
  --sel-sterk: #24568A;
  --sel-ink: #F7FAFE;
  --clay: #D99A76;
  --line: #333B45;
  --hair: #262D36;
  --shadow-soft: 0 12px 30px -24px rgba(0, 0, 0, 0.8);
  --shadow-lift: 0 24px 48px -30px rgba(0, 0, 0, 0.85);
  --shadow-head: 0 10px 30px -22px rgba(0, 0, 0, 0.9);
  --logo-blend: normal;
}

@media (min-width: 40rem) {
  :root { --pad: 2rem; --panelpad: 2rem; }
}
@media (min-width: 64rem) {
  :root { --pad: 3.5rem; --gutter: 4rem; --panelpad: 3rem; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body);
  line-height: 1.6;
  text-wrap: pretty;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-optical-sizing: auto;
}
h3 { line-height: 1.3; }

a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 220ms cubic-bezier(.2,.6,.2,1),
              text-underline-offset 220ms cubic-bezier(.2,.6,.2,1),
              text-decoration-thickness 220ms cubic-bezier(.2,.6,.2,1),
              background-color 260ms cubic-bezier(.2,.6,.2,1),
              border-color 220ms cubic-bezier(.2,.6,.2,1),
              transform 260ms cubic-bezier(.2,.6,.2,1),
              box-shadow 260ms cubic-bezier(.2,.6,.2,1);
}
a:hover { text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:active { transition-duration: 90ms; }
:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.klein { font-size: var(--small); }
.stil { color: var(--muted); }
.eyebrow {
  margin: 0 0 0.75rem;
  font-size: var(--eyebrow);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}
.lead { max-width: 60ch; font-size: 1.0625em; }
.prose { max-width: 66ch; }
.prose h2 { font-size: var(--h2); margin: 2rem 0 0.75rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--h3); margin: 1.5rem 0 0.5rem; }
.prose p { margin: 0 0 1rem; }
.prose ul, .prose ol { margin: 0 0 1.5rem; padding-left: 1.25rem; display: grid; gap: 0.5rem; }

.overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--cta); color: var(--ctaink);
  padding: 0.75rem 1rem; border-radius: 999px;
}
.overslaan:focus { left: 0.5rem; top: 0.5rem; }

/* Header */
.kop {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--hair);
  transition: box-shadow 320ms cubic-bezier(.2,.6,.2,1);
}
.kop.gescrold { box-shadow: var(--shadow-head); }
.kop-rij {
  max-width: var(--wrap); margin: 0 auto; padding: 0.875rem var(--pad);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem var(--gutter); min-height: 64px;
}
.merk { display: inline-flex; align-items: center; gap: 0.875rem; text-decoration: none; color: var(--ink); }
.merk:hover { text-decoration: none; }
.logo {
  position: relative; display: block; flex: none;
  width: 44px; height: 55px; overflow: hidden; isolation: isolate;
}
.logo-stapel {
  position: absolute; top: 0; left: 0;
  display: block; width: 44px; height: 110px;
  transform: translateY(0);
  transition: transform 620ms cubic-bezier(0.66, 0, 0.2, 1);
  will-change: transform;
}
.merk:hover .logo-stapel,
.merk:focus-visible .logo-stapel { transform: translateY(-55px); }
.logo-vak {
  position: relative; display: block;
  width: 44px; height: 55px; overflow: hidden;
}
.logo-vak img {
  display: block; width: 44px; height: 67px;
  mix-blend-mode: var(--logo-blend);
}
@media (prefers-reduced-motion: reduce) {
  .logo-stapel { transition: none; }
  .merk:hover .logo-stapel, .merk:focus-visible .logo-stapel { transform: none; }
}
.merknaam {
  font-family: var(--display); font-size: 1.375rem; line-height: 1.15;
  letter-spacing: -0.01em; white-space: nowrap;
}
.merknaam span { color: var(--muted); }
.kop-rechts { display: flex; align-items: center; gap: 1.25rem; }
.kop-contact { display: none; margin: 0; font-size: var(--small); color: var(--muted); line-height: 1.5; }
@media (min-width: 40rem) { .kop-contact { display: block; } }

.thema {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  padding: 3px; border: 1px solid var(--hair); border-radius: 999px; background: var(--paper);
}
.thema button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color 200ms cubic-bezier(.2,.6,.2,1), color 200ms cubic-bezier(.2,.6,.2,1);
}
.thema button:hover { color: var(--ink); background: var(--sage); }
.thema button[aria-pressed="true"] { background: var(--sage); color: var(--blue); }
.thema svg { width: 17px; height: 17px; }

.menu { border-top: 1px solid var(--hair); background: var(--paper); }
.menu ul {
  list-style: none; margin: 0 auto; padding: 0 var(--pad); max-width: var(--wrap);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.375rem; font-size: 0.875rem;
}
.menu li { flex: none; }
.menu a {
  display: inline-flex; align-items: center; min-height: 40px;
  text-decoration: none; letter-spacing: 0.01em;
  color: var(--muted); border-bottom: 2px solid transparent; padding: 0 0 2px;
}
.menu a:hover { color: var(--blue); border-bottom-color: var(--line); text-decoration: none; }
.menu a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--accent); }

/* Knoppen */
.knop, .knop-2 {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.625rem 1.25rem; border-radius: 999px;
  text-decoration: none; font-size: 1rem; font-weight: 500; line-height: 1.2;
}
.knop:hover, .knop-2:hover { text-decoration: none; }
.knop { background: var(--cta); color: var(--ctaink); border: 1px solid var(--cta); }
.knop:hover { background: var(--cta-hover); transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(32,27,20,0.5); }
.knop:active { background: var(--cta-active); transform: translateY(0) scale(0.985); box-shadow: none; }
.knop-2 { background: transparent; color: var(--cta); border: 1px solid var(--line); }
.knop-2:hover { background: var(--sage); border-color: var(--cta); transform: translateY(-1px); }
.knop-2:active { background: var(--sage); transform: translateY(0) scale(0.985); }
.cijfers { font-variant-numeric: tabular-nums; }
.knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Hero */
.aanhef { padding-top: 2.5rem; }
.aanhef > div { padding-bottom: 1rem; border-bottom: 1px solid var(--hair); }
.hero {
  display: grid; gap: var(--gutter); align-items: center;
  padding: 3.5rem 0 4rem;
}
.hero h1 { font-size: var(--h1); margin: 0 0 1.5rem; max-width: 21ch; line-height: 1.05; }
.hero h1 em { font-style: italic; font-weight: 300; }
.hero p { margin: 0 0 2rem; max-width: 48ch; font-size: 1.125em; line-height: 1.6; }
.hero figure { margin: 0 auto; width: 100%; max-width: 24rem; }
.hero img {
  display: block; width: 100%; height: auto; aspect-ratio: 4/5;
  object-fit: cover; object-position: 50% 25%;
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
}
@media (max-width: 39.99rem) { .hero figure { max-width: 15rem; } }
@media (min-width: 40rem) {
  .hero { grid-template-columns: 6fr 4fr; }
  .hero figure { margin: 0; justify-self: end; }
}
@media (min-width: 64rem) { .hero { grid-template-columns: 7fr 5fr; } }

/* Secties en kaarten */
.zacht {
  background: linear-gradient(180deg, var(--bg) 0, var(--paper2) 5rem, var(--paper2) 60%, var(--sage) 100%);
  padding-top: 4rem; padding-bottom: 6rem;
}
.pagina { padding-top: 3rem; padding-bottom: 5rem; }
.pagina h1 { font-size: var(--h1); line-height: 1.15; margin: 0 0 1rem; max-width: 26ch; }
.pagina .lead { margin: 0 0 2.5rem; }

.kaarten { display: grid; gap: 1.5rem var(--gutter); }
@media (min-width: 64rem) { .kaarten { grid-template-columns: 1fr 1fr 1fr; } }
.kaart {
  height: 100%; background: var(--field); border: 1px solid var(--hair);
  border-radius: var(--radius-sm); padding: 1.5rem; box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.kaart h2, .kaart h3 { font-size: var(--h3); margin: 0; }
.kaart p { margin: 0; font-size: var(--small); color: var(--muted); }
.kaart .rek { flex: 1; }
.kaart .knop, .kaart .knop-2 { align-self: start; }
.stappen { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.stappen .nr {
  margin: 0 0 0.5rem; font-family: var(--display);
  font-size: var(--numeral); line-height: 1; color: var(--accent);
}

.paneel {
  background: var(--sage); border-radius: var(--radius);
  padding: var(--panelpad); box-shadow: var(--shadow-soft);
}
.paneel-rij { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.paneel-rij img {
  width: 140px; height: 140px; flex: none; object-fit: cover;
  object-position: 50% 22%; border-radius: 50%; box-shadow: var(--shadow-soft);
}
.paneel-rij > div { min-width: 15rem; flex: 1; }
.paneel h2 { font-size: var(--h3); margin: 0 0 0.5rem; }
.paneel p { margin: 0; max-width: 52ch; }

.zij {
  background: var(--sage); border-radius: var(--radius);
  padding: var(--panelpad); box-shadow: var(--shadow-soft);
}
.zij h2 { font-size: var(--h3); margin: 0 0 0.75rem; }
.kolommen { display: grid; gap: var(--gutter); align-items: start; }
@media (min-width: 40rem) { .kolommen { grid-template-columns: 6fr 4fr; } }
@media (min-width: 64rem) { .kolommen { grid-template-columns: 7fr 5fr; } }
@media (min-width: 40rem) { .zij { position: sticky; top: 7rem; } }

.kader {
  padding: 1rem 1.25rem; background: var(--field); border: 1px solid var(--hair);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); font-size: var(--small);
}
.kader strong { display: block; margin-bottom: 0.25rem; }

.termijnen { margin: 0 0 2rem; display: grid; gap: 0.875rem; }
.termijnen > div {
  display: grid; gap: 0.25rem 1rem; padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--hair);
}
.termijnen > div:last-child { padding-bottom: 0; border-bottom: 0; }
.termijnen dt { font-weight: 500; }
.termijnen dd { margin: 0; color: var(--muted); }
@media (min-width: 40rem) { .termijnen > div { grid-template-columns: 1fr 1fr; } }

.tweeluik { display: grid; gap: 1.5rem var(--gutter); max-width: 52rem; }
@media (min-width: 40rem) { .tweeluik { grid-template-columns: 1fr 1fr; } }
.scheiding { margin-top: 3.5rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.scheiding h2 { font-size: var(--h2); margin: 0 0 1.5rem; }

/* Footer */
.voet { background: var(--sage); }
.voet-binnen { max-width: var(--wrap); margin: 0 auto; padding: 3.5rem var(--pad) 6rem; }
.voet-grid { display: grid; gap: 2.5rem var(--gutter); align-items: start; }
@media (min-width: 40rem) { .voet-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .voet-grid { grid-template-columns: 5fr 3fr 4fr 3fr; } }
.voet-logo { display: block; width: 76px; height: 94px; overflow: hidden; margin: 0 0 1rem; }
.voet-logo img { display: block; width: 76px; height: 115px; mix-blend-mode: var(--logo-blend); }
.voet-claim {
  margin: 0; font-family: var(--display); font-size: 1.375rem;
  line-height: 1.25; letter-spacing: -0.01em; max-width: 16ch;
}
.voet-claim em { font-style: italic; }
.voet h2 {
  font-family: var(--sans); font-size: var(--eyebrow); letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 0.875rem; font-weight: 500;
}
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; font-size: var(--small); }
.voet a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0; }
.voet p { margin: 0; font-size: var(--small); line-height: 2; }
.voet-onder {
  margin: 3rem 0 0; padding-top: 1.25rem;
  border-top: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 0.75rem 2rem; font-size: var(--small);
}
.voet-onder ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }

/* Vaste balk op mobiel */
.balk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
  border-top: 1px solid var(--hair); background: var(--paper);
  box-shadow: 0 -10px 28px -20px rgba(32, 27, 20, 0.55);
}
.balk div {
  display: flex; gap: 0.5rem; padding: 0.625rem var(--pad);
  padding-bottom: calc(0.625rem + env(safe-area-inset-bottom));
}
.balk a { flex: 1 1 0; justify-content: center; min-height: 46px; font-size: 0.9375rem; padding: 0.5rem 0.75rem; }
@media (min-width: 40rem) { .balk { display: none; } }

/* Reveal */
.reveal { animation: opkomen 620ms cubic-bezier(.2,.6,.2,1) both; }
.reveal-2 { animation: opkomen 620ms cubic-bezier(.2,.6,.2,1) 120ms both; }
@keyframes opkomen { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

@media print {
  .kop, .menu, .balk, .voet, .noprint { display: none !important; }
  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

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

/* Tekstselectie */
::selection {
  background: var(--sel);
  color: var(--sel-ink);
  text-shadow: none;
}
::-moz-selection {
  background: var(--sel);
  color: var(--sel-ink);
  text-shadow: none;
}
h1::selection, h2::selection, h3::selection, .lead::selection, .nr::selection,
h1 ::selection, h2 ::selection, h3 ::selection, .lead ::selection {
  background: var(--sel-sterk);
  color: var(--sel-ink);
}