/* 21st Century Leefstijl Coaching, preview oktober 2026.
   Kleuren uit het logo: antraciet van de letters, groen en limoen uit het beeldmerk. Elke sectie is een effen vlak,
   buursecties hebben een andere toon. Geen lijnen, geen randen of schaduwen om kaarten, beelden met rechte hoeken. */
/* Lettertypen zelf gehost (variabele fonts, latin-subset van Google Fonts, SIL Open Font License). */
@font-face { font-family: Outfit; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/outfit-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --inkt: #2b2e2c;
  --inkt-zacht: #555b57;
  --bos: #1f3a2e;
  --bos-diep: #162b22;
  --groen: #23704a;
  --limoen: #c3dc4a;
  --zand: #f4f1ea;
  --salie: #e5ece2;
  --wit: #ffffff;
  --wrap: 1180px;
  --ruimte: clamp(72px, 9vw, 120px);
  --kop-hoogte: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.7 Inter, system-ui, sans-serif; color: var(--inkt); background: var(--wit); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--groen); }
h1, h2, h3 { font-family: Outfit, Inter, sans-serif; font-weight: 500; line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.01em; }
h1 { font-size: clamp(40px, 6vw, 72px); }
h2 { font-size: clamp(30px, 3.6vw, 46px); }
h3 { font-size: 22px; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--wit); padding: 10px 16px; }
:focus-visible { outline: 3px solid var(--limoen); outline-offset: 3px; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 8px; background: var(--groen); color: var(--wit); font: 500 16px/1 Inter, sans-serif; text-decoration: none; border: 0; cursor: pointer; transition: background .2s, color .2s; }
.knop:hover { background: var(--bos); }
.knop-licht { background: var(--wit); color: var(--bos); }
.knop-licht:hover { background: var(--limoen); color: var(--bos-diep); }
.knop-limoen { background: var(--limoen); color: var(--bos-diep); }
.knop-limoen:hover { background: var(--wit); }
.knop-klein { padding: 11px 18px; font-size: 15px; }
.knoppen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.pijl { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.meer { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; }
.meer:hover .pijl { transform: translateX(3px); }
.meer .pijl { transition: transform .2s; }

/* Kop */
.kop { position: sticky; top: 0; z-index: 50; background: var(--wit); transition: box-shadow .2s; }
.kop.vast { box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.kop-binnen { display: flex; align-items: center; justify-content: space-between; height: var(--kop-hoogte); }
.kop-logo img { height: 56px; width: auto; }
.kop-nav { display: flex; align-items: center; gap: 30px; }
.kop-nav > a:not(.knop) { color: var(--inkt); text-decoration: none; font-weight: 500; font-size: 16px; }
.kop-nav > a:not(.knop):hover, .kop-nav > a[aria-current] { color: var(--groen); }
.kop-menu { display: none; }

/* Secties: effen vlakken */
.sectie { padding: var(--ruimte) 0; }
.toon-wit { background: var(--wit); }
.toon-zand { background: var(--zand); }
.toon-salie { background: var(--salie); }
.toon-bos { background: var(--bos); color: #e9efe9; }
.toon-bos h2, .toon-bos h3 { color: var(--wit); }
.toon-bos a:not(.knop) { color: var(--limoen); }
.sectie-kop { max-width: 760px; margin-bottom: 48px; }
.sectie-kop p { font-size: 19px; color: var(--inkt-zacht); }
.toon-bos .sectie-kop p { color: #cfdcd2; }

/* Hero */
.hero { position: relative; min-height: min(86vh, 760px); display: flex; align-items: flex-end; color: var(--wit); background: var(--bos-diep); overflow: hidden; }
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* De kom staat rechts van het midden; op smalle schermen blijft hij zo in beeld. */
.hero-foto-moestuin { object-position: 68% 40%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,28,22,.15) 0%, rgba(14,28,22,.25) 45%, rgba(14,28,22,.78) 100%); }
.hero-tekst { position: relative; z-index: 1; padding-top: 140px; padding-bottom: clamp(56px, 8vw, 96px); width: 100%; }
.hero h1 { max-width: 760px; color: var(--wit); }
.hero-intro { max-width: 600px; font-size: clamp(18px, 1.6vw, 21px); color: #eef3ee; }
.hero-klein { min-height: 0; }
.hero-klein .hero-tekst { padding-top: clamp(140px, 18vw, 220px); }

/* Hero in twee helften: tekst op het groene vlak, foto ernaast (de persoon staat midden in de foto) */
.hero-split { display: grid; grid-template-columns: 1fr 1fr; min-height: min(78vh, 680px); background: var(--bos); color: var(--wit); }
.hero-split-tekst { display: flex; flex-direction: column; justify-content: center; padding: 80px clamp(24px, 5vw, 80px) 80px max(24px, calc((100vw - var(--wrap)) / 2 + 24px)); }
.hero-split h1 { color: var(--wit); font-size: clamp(34px, 4.4vw, 60px); hyphens: manual; }
.hero-split-foto { width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }

/* Tekst naast tekst of beeld */
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.twee-boven { align-items: start; }
.twee .beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.twee .beeld-breed img { aspect-ratio: 3 / 2; }
.lead { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.6; }
.uitspraak { font-family: Outfit, sans-serif; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; font-weight: 400; color: var(--bos); margin: 0; }
.toon-bos .uitspraak { color: var(--limoen); }
.uitspraak-blok { margin-top: clamp(48px, 6vw, 80px); max-width: 900px; }
.slogan { margin-top: 20px; font-weight: 600; color: var(--groen); }

/* Groeireeks (metafoor) */
.groei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.groei img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.groei figure { margin: 0; }
.groei figcaption { margin-top: 14px; font-family: Outfit, sans-serif; font-size: 20px; color: var(--wit); }

/* Kaarten zonder rand of schaduw: alleen een eigen vlak */
.kaarten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.kaart { background: var(--wit); display: flex; flex-direction: column; }
.toon-wit .kaart { background: var(--zand); }
.kaart img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.kaart-tekst { padding: 32px; display: flex; flex-direction: column; flex: 1; }
.kaart-tekst p { color: var(--inkt-zacht); }
.kaart-tekst .meer { margin-top: auto; }

/* Kernwaarden */
.waarden { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.waarde { background: var(--wit); padding: 30px 24px; }
.waarde svg { width: 34px; height: 34px; fill: none; stroke: var(--groen); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
.waarde h3 { font-size: 20px; margin-bottom: .4em; }
.waarde p { font-size: 15.5px; line-height: 1.6; color: var(--inkt-zacht); margin: 0; }

/* Keurmerken */
.keurmerken { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 36px; }
.keurmerken img { height: 44px; width: auto; }

/* Afsluiter */
.afsluiter { text-align: left; }
.afsluiter h2 { max-width: 760px; }

/* Leefstijlcoaching: programma */
.tabs { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.tab { padding: 12px 22px; border-radius: 8px; border: 0; background: var(--wit); color: var(--inkt); font: 500 16px/1 Inter, sans-serif; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--bos); color: var(--wit); }
.sessies { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: sessie; }
.sessies li { background: var(--wit); padding: 22px 24px 22px 72px; position: relative; counter-increment: sessie; }
.sessies li::before { content: counter(sessie); position: absolute; left: 24px; top: 20px; width: 32px; height: 32px; border-radius: 50%; background: var(--salie); color: var(--bos); font: 600 15px/32px Inter, sans-serif; text-align: center; }
.sessies strong { display: block; font-family: Outfit, sans-serif; font-weight: 500; font-size: 19px; margin-bottom: 4px; }
.sessies span { color: var(--inkt-zacht); font-size: 15.5px; line-height: 1.55; }
.feiten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feit { background: var(--zand); padding: 30px 26px; }
.feit h3 { font-size: 21px; }
.feit p, .feit li { font-size: 15.5px; line-height: 1.6; color: var(--inkt-zacht); }
.feit ul { margin: 0; padding-left: 18px; }
.cijfers { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.cijfer { background: var(--wit); padding: 22px 26px; min-width: 180px; }
.cijfer strong { display: block; font: 500 34px/1.1 Outfit, sans-serif; color: var(--bos); }
.cijfer span { font-size: 15px; color: var(--inkt-zacht); }

/* Kinderleefstijlspreekuur */
.onderwerpen { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.onderwerpen li { background: var(--salie); padding: 10px 18px; border-radius: 8px; font-weight: 500; }
.data { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.data li { background: var(--wit); padding: 22px 22px; }
.data strong { display: block; font: 500 21px/1.2 Outfit, sans-serif; color: var(--bos); margin-bottom: 6px; }
.data span { display: block; font-size: 15px; color: var(--inkt-zacht); }
.data-leeg { display: none; }
.adres { background: var(--wit); padding: 28px; margin-top: 28px; }
.adres p { margin: 0; }
.roer-link { display: block; }
.roer-link img { width: 100%; }

/* Contact */
.locaties { display: grid; gap: 12px; margin-top: 28px; }
.locatie { background: var(--zand); padding: 22px 24px; }
.locatie strong { display: block; font-family: Outfit, sans-serif; font-weight: 500; font-size: 19px; }
.formulier { background: var(--zand); padding: clamp(28px, 4vw, 48px); }
.veld { margin-bottom: 18px; }
.veld label { display: block; font-weight: 500; font-size: 15px; margin-bottom: 6px; }
.veld input, .veld textarea, .veld select { width: 100%; padding: 14px 16px; font: 400 16px/1.4 Inter, sans-serif; color: var(--inkt); background: var(--wit); border: 0; border-radius: 8px; }
.veld textarea { min-height: 150px; resize: vertical; }
.velden-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.honing { position: absolute; left: -9999px; }
.melding { padding: 16px 20px; border-radius: 8px; margin-bottom: 20px; }
.melding-ok { background: var(--salie); color: var(--bos); }
.melding-fout { background: #f6e3dc; color: #7a2e14; }
.klein { font-size: 14px; color: var(--inkt-zacht); }

/* Voet */
.voet { background: var(--bos-diep); color: #cfdcd2; padding: 80px 0 32px; }
.voet a { color: #e9efe9; text-decoration: none; }
.voet a:hover { color: var(--limoen); }
.voet-raster { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.voet-merk img { width: 220px; margin-bottom: 18px; }
.voet-kop { font-family: Outfit, sans-serif; color: var(--wit); font-size: 18px; margin-bottom: 14px; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin-bottom: 8px; }
.voet-onder { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 64px; font-size: 14px; }
.voet-onder p { margin: 0; }

/* Tablet */
@media (max-width: 1080px) {
  .waarden { grid-template-columns: repeat(3, 1fr); }
  .feiten { grid-template-columns: repeat(2, 1fr); }
  .data { grid-template-columns: repeat(3, 1fr); }
}

/* Mobiel menu */
@media (max-width: 960px) {
  /* Kom met salade boven de tekst houden: foto bovenin, zacht overlopend in het donkergroen. */
  .hero-foto-moestuin { height: 62%; object-position: 64% 50%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  :root { --kop-hoogte: 72px; }
  .kop-logo img { height: 46px; }
  .kop-menu { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 48px; height: 48px; border: 0; border-radius: 8px; background: var(--bos); cursor: pointer; padding: 0 13px; }
  .kop-menu span:not(.sr) { display: block; height: 2px; background: var(--wit); transition: transform .25s; }
  .kop-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .kop-menu[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .kop-nav { position: fixed; inset: var(--kop-hoogte) 0 0 0; background: var(--wit); flex-direction: column; align-items: flex-start; gap: 6px; padding: 32px 24px; opacity: 0; transform: translateY(-12px); transition: opacity .25s, transform .25s, visibility .25s; visibility: hidden; }
  .kop-nav.open { opacity: 1; transform: none; visibility: visible; }
  .kop-nav > a:not(.knop) { font: 500 28px/1.3 Outfit, sans-serif; padding: 6px 0; }
  .kop-nav .knop { margin-top: 20px; }
  .twee { grid-template-columns: 1fr; }
  .twee .beeld { order: -1; }
  .twee .beeld img { aspect-ratio: 4 / 3; }
  .kaarten { grid-template-columns: 1fr; }
  .sessies { grid-template-columns: 1fr; }
  .voet-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .voet li { overflow-wrap: anywhere; }
  .voet-merk { grid-column: 1 / -1; }
  .hero-split { grid-template-columns: 1fr; }
  .hero-split-foto { order: -1; aspect-ratio: 4 / 3; height: auto; }
  .hero-split-tekst { padding: 48px 24px 56px; }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .waarden { grid-template-columns: 1fr; }
  .feiten { grid-template-columns: 1fr; }
  .data { grid-template-columns: 1fr 1fr; }
  .groei { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .groei figcaption { font-size: 15px; }
  .velden-twee { grid-template-columns: 1fr; }
  .voet-raster { grid-template-columns: 1fr; gap: 28px; }
  .hero { min-height: 78vh; }
  .knoppen .knop { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Hulpklassen */
a.kaart { text-decoration: none; color: inherit; }
a.kaart:hover h3 { color: var(--groen); }
.tussenkop { margin-top: 56px; }
.onder-beeld { margin-top: 14px; }
.kop-ruimte h1 { font-size: clamp(40px, 5vw, 60px); }