:root {
  /* Layout: links uitgelijnd, brede serif-koppen in hoofdletters, weinig tekst.
     Donkerrood is gereserveerd voor het gekozen pad en de slot-CTA. */
  --zwart: #000000;
  --inkt: #261E1C;
  --donkerrood: #5C1A15;
  --zachtrood: #8C3E37;
  --creme: #F5EBE4;
  --dof: #B9ADA6;
  --kop: "Fraunces", Georgia, "Times New Roman", serif;
  --tekst: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lijn: rgba(245, 235, 228, 0.16);
  --rand: rgba(245, 235, 228, 0.45);
  --op-rood: #F5EBE4;
  color-scheme: dark;
}

/* Lichte versie: dezelfde tokens, omgedraaid. --zwart is de achtergrond, --creme de tekst. */
:root[data-thema="licht"] {
  --zwart: #F5EBE4;
  --inkt: #EBDCD2;
  --creme: #261E1C;
  --dof: #6A5851;
  --lijn: rgba(38, 30, 28, 0.18);
  --rand: rgba(38, 30, 28, 0.45);
  color-scheme: light;
}

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

body {
  margin: 0;
  background: var(--zwart);
  color: var(--creme);
  font-family: var(--tekst);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
}

img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--creme); outline-offset: 3px; }

.wrap { width: min(1180px, 100%); margin-inline: auto; padding-inline: 24px; }
.blok { padding-block: clamp(4rem, 9vw, 7.5rem); }
.blok--lijn { border-top: 1px solid var(--lijn); }

h1, h2, h3 { margin: 0; text-wrap: balance; }
.kop {
  font-family: var(--kop);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: -0.012em;
}
.kop--xl { font-size: clamp(2.5rem, 7.6vw, 6.25rem); }
.kop--l { font-size: clamp(2rem, 5.2vw, 4rem); }
.kop--m { font-size: clamp(1.5rem, 3vw, 2.125rem); line-height: 1.05; }
.lead { font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); max-width: 34em; color: var(--creme); }
.dof { color: var(--dof); }
p { margin: 0; max-width: 38em; }
.stapel { display: grid; gap: 1.25rem; }
.stapel--ruim { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }

/* Knoppen */
.knoppen { display: flex; flex-wrap: wrap; gap: 0.875rem; }
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0.75rem 1.5rem;
  background: var(--creme); color: var(--zwart);
  border: 1px solid var(--creme); border-radius: 2px;
  font: 500 1rem/1.2 var(--tekst); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.knop:hover { background: transparent; color: var(--creme); }
.knop--lijn { background: transparent; color: var(--creme); border-color: var(--rand); }
.knop--lijn:hover { background: var(--creme); color: var(--zwart); }
.knop--klein { min-height: 2.625rem; padding: 0.5rem 1.125rem; font-size: 0.9375rem; }

/* Kop van de site */
.top { border-bottom: 1px solid var(--lijn); }
.top__rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-block: 1.125rem; }
.merk { font-family: "Poppins", sans-serif; font-size: 1.125rem; letter-spacing: 0.14em; text-decoration: none; white-space: nowrap; }
.merk span { font-weight: 300; }
.merk strong { font-weight: 700; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; font-size: 0.9375rem; font-weight: 400; }
.nav a:not(.knop) { text-decoration: none; color: var(--dof); }
.nav a:not(.knop):hover { color: var(--creme); }
@media (max-width: 760px) { .nav .nav__extra { display: none; } }

/* Hero */
.hero { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem); }
.hero .kop { max-width: 13em; }

/* Klanten */
.klanten { border-block: 1px solid var(--lijn); }
.klanten__rij { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 3rem; padding-block: 1.75rem; }
.klanten__label { font-size: 0.9375rem; color: var(--dof); }
.klanten__namen { display: flex; flex-wrap: wrap; gap: 0.75rem 3rem; list-style: none; margin: 0; padding: 0; }
.klanten__namen li { font-family: var(--kop); font-weight: 500; font-size: clamp(1.25rem, 2.4vw, 1.75rem); }

/* Probleem */
.tweekolom { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.uitspraak { font-family: var(--kop); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.15; border-left: 3px solid var(--zachtrood); padding-left: 1.25rem; max-width: 18em; }

/* Twee paden */
.paden { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0; border: 1px solid var(--lijn); }
.pad { padding: clamp(1.75rem, 4vw, 3rem); display: grid; gap: 1.5rem; align-content: start; }
.pad--blijven { color: var(--dof); }
.pad--kiezen { background: var(--donkerrood); color: var(--op-rood); }
.pad ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pad li { padding-block: 0.875rem; border-top: 1px solid var(--lijn); }
.pad--kiezen li { border-top-color: rgba(245, 235, 228, 0.28); font-weight: 400; }

/* Werkwijze */
.stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); counter-reset: stap; }
.stappen li { counter-increment: stap; display: grid; gap: 0.75rem; align-content: start; border-top: 1px solid var(--lijn); padding-top: 1.25rem; }
.stappen li::before { content: counter(stap); font-family: var(--kop); font-weight: 600; font-size: 3.25rem; line-height: 1; color: var(--zachtrood); }
.tijd { border: 1px solid var(--lijn); padding: 1.25rem 1.5rem; max-width: 44em; }

/* Rekenhulp */
.reken { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); background: var(--inkt); padding: clamp(1.5rem, 4vw, 3rem); }
.reken__uit { display: grid; gap: 0.5rem; align-content: center; }
.reken__bedrag { font-family: var(--kop); font-weight: 600; font-size: clamp(2.5rem, 7vw, 4.75rem); line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
input[type="range"] { width: 100%; accent-color: var(--creme); }

/* Formulieren */
.veld { display: grid; gap: 0.4rem; }
.veld label, .veld .label { font-size: 0.9375rem; font-weight: 400; }
.veld .hint { font-size: 0.875rem; color: var(--dof); }
input[type="text"], input[type="email"], input[type="url"], input[type="number"], select, textarea {
  width: 100%; min-height: 3.125rem; padding: 0.75rem 0.875rem;
  background: var(--zwart); color: var(--creme);
  border: 1px solid var(--rand); border-radius: 2px;
  font: 300 1rem/1.4 var(--tekst);
}
textarea { min-height: 7rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--creme); outline-offset: 1px; }
.form { display: grid; gap: 1.25rem; background: var(--inkt); padding: clamp(1.5rem, 4vw, 2.5rem); }
.vink { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; }
.vink input { margin-top: 0.3rem; width: 1.125rem; height: 1.125rem; accent-color: var(--creme); flex: none; }
.val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.melding { border: 1px solid var(--creme); padding: 1.25rem 1.5rem; display: grid; gap: 0.875rem; }
.melding[hidden] { display: none; }
.melding--fout { border-color: var(--zachtrood); }

/* Over ons */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.foto { aspect-ratio: 4 / 5; background: var(--inkt); border: 1px dashed var(--rand); display: grid; place-items: end start; padding: 1rem; font-size: 0.875rem; color: var(--dof); }
.waarden { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.waarden li { padding-block: 1rem; border-top: 1px solid var(--lijn); }
.waarden strong { font-weight: 500; display: block; }

/* Vragen */
.vragen { border-bottom: 1px solid var(--lijn); max-width: 52rem; }
.vragen details { border-top: 1px solid var(--lijn); }
.vragen summary { cursor: pointer; list-style: none; padding-block: 1.25rem; font-family: var(--kop); font-weight: 500; font-size: clamp(1.1875rem, 2.2vw, 1.5rem); line-height: 1.2; display: flex; justify-content: space-between; gap: 1.5rem; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: "+"; font-family: var(--tekst); font-weight: 300; flex: none; }
.vragen details[open] summary::after { content: "\2212"; }
.vragen details p { padding-bottom: 1.5rem; color: var(--dof); }

/* Posts */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 0; border-top: 1px solid var(--lijn); }
.postkaart { display: grid; gap: 0.875rem; align-content: start; padding: 1.75rem 1.75rem 2rem 0; border-bottom: 1px solid var(--lijn); text-decoration: none; }
.postkaart__meta { font-size: 0.875rem; color: var(--dof); }
.postkaart__titel { font-family: var(--kop); font-weight: 500; font-size: 1.375rem; line-height: 1.2; }
.postkaart__stuk { font-size: 0.9688rem; color: var(--dof); }
.postkaart__lees { font-size: 0.9375rem; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.postkaart:hover .postkaart__titel { text-decoration: underline; text-underline-offset: 4px; }
.artikel { max-width: 42rem; display: grid; gap: 1.75rem; }
.artikel__tekst { white-space: pre-line; font-size: 1.125rem; line-height: 1.7; }

/* Slot */
.slot { background: var(--donkerrood); color: var(--op-rood); }
.slot .lead { color: var(--op-rood); }
.slot .knop { background: var(--op-rood); color: #000; border-color: var(--op-rood); }
.slot .knop:hover { background: transparent; color: var(--op-rood); }
.slot .knop--lijn { background: transparent; color: var(--op-rood); border-color: var(--op-rood); }
.slot .knop--lijn:hover { background: var(--op-rood); color: #000; }

/* Voet */
.voet { border-top: 1px solid var(--lijn); padding-block: 2.5rem; font-size: 0.9375rem; color: var(--dof); }
.voet__rij { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; }
.voet__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.voet a { color: var(--dof); }
.voet a:hover { color: var(--creme); }

/* WhatsApp */
.wa { position: fixed; right: 16px; bottom: 16px; z-index: 5; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0.625rem 1.125rem; background: var(--creme); color: var(--zwart); border-radius: 999px; font: 500 0.9375rem/1 var(--tekst); text-decoration: none; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }

/* Tekstpagina */
.tekstpagina { max-width: 44rem; display: grid; gap: 1.25rem; }
.tekstpagina h2 { font-family: var(--kop); font-weight: 500; font-size: 1.5rem; margin-top: 1.25rem; }
.tekstpagina ul { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.invullen { background: var(--inkt); border: 1px dashed var(--zachtrood); padding: 0.1rem 0.4rem; }

/* Wissel licht en donker */
.thema { display: inline-grid; place-items: center; width: 2.625rem; height: 2.625rem; padding: 0; background: transparent; color: var(--creme); border: 1px solid var(--rand); border-radius: 999px; cursor: pointer; }
.thema:hover { background: var(--creme); color: var(--zwart); }
.thema svg { width: 1.125rem; height: 1.125rem; }
.thema .zon { display: none; }
:root[data-thema="licht"] .thema .zon { display: block; }
:root[data-thema="licht"] .thema .maan { display: none; }

/* Portretten */
.portret { margin: 0; display: grid; gap: 0.625rem; }
.portret img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.portret figcaption { font-family: var(--kop); font-weight: 500; font-size: 1.25rem; }

/* Route: van fundering naar leads. Eén grote golf: de stappen liggen om en om op een top en in een dal. */
.route { list-style: none; margin: 0; padding: 0; counter-reset: stap; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 140%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M100 4 C200 4 200 136 300 136 S400 4 500 4 S600 136 700 136 S800 4 900 4%22 fill=%22none%22 stroke=%22%238C3E37%22 stroke-width=%222.5%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E") no-repeat 0 4rem / 100% 140px; }
.route > li { counter-increment: stap; position: relative; height: calc(8rem + 140px); }
.route > li::before { content: counter(stap); position: absolute; left: 50%; top: calc(4rem + 4px); width: 2.25rem; height: 2.25rem; margin: -1.125rem 0 0 -1.125rem; display: grid; place-items: center; background: var(--donkerrood); color: var(--op-rood); border-radius: 50%; box-shadow: 0 0 0 6px var(--zwart); font: 500 1rem/1 var(--tekst); }
.route > li:nth-child(even)::before { top: calc(4rem + 136px); }
.route h3 { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: max-content; max-width: 100%; text-align: center; font-size: clamp(1.25rem, 2vw, 1.625rem); }
.route > li:nth-child(even) h3 { top: auto; bottom: 0; }
.route > li.route__doel h3 { background: var(--donkerrood); color: var(--op-rood); padding: 0.5rem 0.875rem; top: -0.5rem; }
.route__eind { display: grid; gap: 0.875rem; }
@media (max-width: 760px) {
  .route { grid-template-columns: 1fr; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 96 1000%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M18 100 C18 200 78 200 78 300 S18 400 18 500 S78 600 78 700 S18 800 18 900%22 fill=%22none%22 stroke=%22%238C3E37%22 stroke-width=%222.5%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E") no-repeat left top / 96px 100%; }
  .route > li { height: 6rem; }
  .route > li::before, .route > li:nth-child(even)::before { top: 50%; left: 18px; }
  .route > li:nth-child(even)::before { left: 78px; }
  .route h3, .route > li:nth-child(even) h3, .route > li.route__doel h3 { left: 124px; top: 50%; bottom: auto; transform: translateY(-50%); text-align: left; }
}

/* Quiz */
.quiz { align-content: start; }
.quiz__balk { height: 4px; background: var(--lijn); }
.quiz__balk span { display: block; height: 100%; background: var(--zachtrood); }
.quiz__opties { display: grid; gap: 0.625rem; }
.quiz__optie { text-align: left; min-height: 3.25rem; padding: 0.75rem 1rem; background: var(--zwart); color: var(--creme); border: 1px solid var(--rand); border-radius: 2px; font: 400 1rem/1.35 var(--tekst); cursor: pointer; }
.quiz__optie:hover, .quiz__optie.is-gekozen { background: var(--creme); color: var(--zwart); border-color: var(--creme); }
.quiz__terug { justify-self: start; padding: 0.25rem 0; background: none; border: 0; color: var(--dof); font: 400 0.9375rem/1.3 var(--tekst); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.quiz__uit { display: grid; gap: 0.5rem; }
.quiz__uit--past { background: var(--donkerrood); color: var(--op-rood); padding: 1.25rem 1.5rem; }
.quiz__uit--past .dof { color: var(--op-rood); opacity: 0.8; }
.quiz .vragen summary { font-size: 1.125rem; padding-block: 0.875rem; }
.quiz .vragen details p { padding-bottom: 1rem; }
.quizpagina { max-width: 44rem; margin-inline: auto; display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
a.quiz__optie { display: flex; align-items: center; text-decoration: none; }
[tabindex="-1"]:focus { outline: none; }
.kop { overflow-wrap: break-word; hyphens: manual; }
.tweekolom > * { min-width: 0; }
@media (max-width: 760px) { .top__rij { gap: 0.5rem 1rem; } .nav { gap: 0.5rem 0.875rem; } }