/* Rugzakje Coaching · website. Zelfde tokens als de app (src/index.css), richting A "Klei & Haver". */

@font-face { font-family: 'Fraunces'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/fraunces-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-display: swap; font-weight: 200 1000; src: url('/fonts/nunito-sans-latin-wght-normal.woff2') format('woff2'); }

:root {
  --bg: #F6EFE6; --surface: #FFFBF5; --line: #E8DCCD; --text: #3A2A21; --text-2: #6E5A4C;
  --accent: #A9502F; --accent-soft: #F1DDCC; --on-accent: #FFFFFF; --sage: #6F8F72; --sage-soft: #E3EADF;
  --ruggie: #C9795A; --ruggie-dark: #8E4B31; --danger: #A3312A;
  --steen-1: #C9795A; --steen-2: #E2B07A; --steen-3: #8FA98F; --steen-4: #D9A5A0; --steen-5: #9C7F9E;
  --font-display: 'Fraunces', Georgia, serif; --font-body: 'Nunito Sans', system-ui, sans-serif;
  --r-sm: 12px; --r-md: 18px; --r-lg: 28px; --shadow: 0 8px 24px rgb(60 40 30 / .08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #1F1813; --surface: #2A211B; --line: #3D3129; --text: #F3E9DF; --text-2: #C4B3A4;
    --accent: #E08A68; --accent-soft: #43291E; --on-accent: #1F1813; --sage: #A3C1A5; --sage-soft: #26302A;
    --ruggie-dark: #6E3823; --danger: #F0907F; --shadow: 0 8px 24px rgb(0 0 0 / .3); color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
/* Het hidden-attribuut moet altijd winnen van display: flex/grid. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
/* Springen via het menu: kop niet onder de vaste menubalk. */
[id] { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 650; line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.breed { width: min(100% - 32px, 1120px); margin-inline: auto; }
.smal-blok { max-width: 760px; }
.klein { font-size: 14px; color: var(--text-2); }
.bovenkop { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.intro { font-size: 19px; color: var(--text-2); }
.intro.smal { max-width: 640px; margin-top: 12px; }

.overslaan { position: absolute; left: -9999px; top: 8px; z-index: 20; padding: 10px 14px; background: var(--surface); border-radius: var(--r-sm); }
.overslaan:focus { left: 16px; }

/* Knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font: 800 16px/1 var(--font-body); text-decoration: none; cursor: pointer;
}
.knop.groot { min-height: 56px; padding: 0 28px; font-size: 17px; }
.knop.stil { background: transparent; color: var(--accent); border: 1px solid var(--line); }
.knop:disabled { opacity: .6; cursor: default; }
.knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* Kop */
.kop { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.kop-binnen { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.merk { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.merk .ruggie { width: 38px; height: 38px; flex-shrink: 0; }
.merk span { display: flex; flex-direction: column; line-height: 1.2; }
.merk strong { font-family: var(--font-display); font-size: 18px; }
.merk small { font-size: 12px; color: var(--text-2); }
.menu { display: flex; align-items: center; gap: 22px; }
.menu a:not(.knop) { color: var(--text-2); font-weight: 700; text-decoration: none; font-size: 15px; }
.menu a:not(.knop):hover { color: var(--text); }
.menu .knop { min-height: 42px; padding: 0 18px; font-size: 15px; }
@media (max-width: 760px) { .menu a:not(.knop) { display: none; } }

/* Held */
.held { padding: 64px 0 72px; }
.held-klein { padding: 56px 0 24px; }
.held-binnen { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.held h1 { font-size: clamp(36px, 5.2vw, 58px); margin-bottom: 20px; }
.held-klein h1 { font-size: clamp(32px, 4.5vw, 46px); margin-bottom: 16px; }
@media (max-width: 900px) { .held-binnen { grid-template-columns: 1fr; gap: 40px; } }

/* Telefoon met app-voorbeeld */
.telefoon { margin: 0 auto; width: min(100%, 330px); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.scherm {
  width: 100%; padding: 30px 16px 20px; border-radius: 40px; background: var(--bg);
  border: 10px solid var(--text); box-shadow: 0 30px 60px rgb(60 40 30 / .18);
  display: flex; flex-direction: column; gap: 12px; font-size: 14px;
}
.app-dag { font-size: 12px; font-weight: 700; color: var(--text-2); }
.app-groet { font-family: var(--font-display); font-weight: 650; font-size: 28px; line-height: 1; margin-top: -8px; }
.app-kaart { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.app-ruggie-rij { display: flex; align-items: flex-end; gap: 8px; }
.app-ruggie-rij .ruggie { width: 52px; height: 52px; flex-shrink: 0; }
.app-bubbel { flex: 1; padding: 9px 11px; border-radius: 14px 14px 14px 4px; background: var(--accent-soft); font-weight: 700; font-size: 13px; line-height: 1.3; }
.app-gewichten { display: flex; gap: 4px; }
.app-gewichten span { flex: 1; padding: 22px 2px 6px; border: 2px solid var(--line); border-radius: 12px; font-size: 9px; font-weight: 800; text-align: center; line-height: 1.1; position: relative; }
.app-gewichten span::before { content: ''; position: absolute; top: 6px; left: 50%; width: 12px; height: 13px; margin-left: -6px; border: 2px solid currentColor; border-radius: 4px; opacity: .6; }
.app-gewichten .gekozen { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.app-klaar { padding: 12px 14px; border-radius: 22px; background: var(--sage-soft); display: flex; flex-direction: column; }
.app-klaar .label { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.app-klaar strong { font-family: var(--font-display); font-size: 17px; }
.app-stenen strong { font-family: var(--font-display); font-size: 16px; }
.app-stenen div { display: flex; gap: 6px; }
.app-stenen i { display: block; width: 26px; height: 21px; border-radius: 50%; background: var(--steen-1); }
.app-stenen i:nth-child(2) { background: var(--steen-2); width: 20px; height: 16px; }
.app-stenen i:nth-child(3) { background: var(--steen-3); width: 30px; height: 24px; }
.app-stenen i:nth-child(4) { background: var(--steen-4); }
.app-stenen i:nth-child(5) { background: var(--steen-5); width: 22px; height: 18px; }

/* Secties */
.sectie { padding: 80px 0; }
.sectie.zacht { background: var(--surface); border-block: 1px solid var(--line); }
.sectie h2 { font-size: clamp(30px, 4vw, 42px); }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 36px; }
.raster.drie { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kaart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.sectie.zacht .kaart { background: var(--bg); }
.kaart h3 { font-size: 20px; }
.kaart p, .kaart li { color: var(--text-2); font-size: 16px; }
.kaart ul { margin: 0; padding-left: 18px; }

.stappen { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.stappen li { display: flex; flex-direction: column; gap: 8px; }
.stappen h3 { font-size: 21px; }
.stappen p { color: var(--text-2); }
.stapnummer {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font: 800 16px/1 var(--font-body);
}

.privacy-blok { margin-top: 28px; padding: 26px; border-radius: var(--r-lg); background: var(--sage-soft); display: flex; flex-direction: column; gap: 8px; }
.privacy-blok h3 { font-size: 22px; }

.over { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 48px; align-items: start; }
.over p { margin-top: 14px; color: var(--text-2); }
.over-beeld .ruggie { width: 180px; height: 180px; }
@media (max-width: 760px) { .over { grid-template-columns: 1fr; gap: 20px; } .over-beeld .ruggie { width: 96px; height: 96px; } }
.cijfers { display: flex; flex-wrap: wrap; gap: 28px; margin: 28px 0 0; }
.cijfers dt { font-family: var(--font-display); font-size: 34px; font-weight: 650; color: var(--accent); }
.cijfers dd { margin: 0; font-size: 14px; color: var(--text-2); }

details { border-bottom: 1px solid var(--line); padding: 16px 0; }
details:first-of-type { margin-top: 24px; }
summary { cursor: pointer; font-weight: 800; font-size: 18px; list-style-position: outside; }
details p { margin-top: 10px; color: var(--text-2); }

.lijst-vink { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 8px; }
.lijst-vink li::before { content: '✓'; color: var(--sage); font-weight: 900; margin-right: 10px; }

/* Formulier */
.formulier { margin-top: 32px; display: flex; flex-direction: column; gap: 22px; }
.blok { margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.blok-kind { background: var(--sage-soft); border-color: transparent; }
legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 650; font-size: 22px; }
legend + * { clear: both; }
.uitleg { font-size: 15px; color: var(--text-2); }
.rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 600px) { .rij { grid-template-columns: 1fr; } .blok { padding: 18px; } }
.veld { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 15px; }
.veld input, .veld select, .veld textarea {
  width: 100%; min-width: 0; min-height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--text); font: 400 16px/1.4 var(--font-body);
}
.veld textarea { padding: 12px 14px; resize: vertical; }
.veld [aria-invalid='true'] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.optioneel { font-weight: 400; font-size: 13px; color: var(--text-2); margin-left: 4px; }

.themas { display: flex; flex-direction: column; gap: 14px; }
.themagroep { display: flex; flex-direction: column; gap: 8px; }
.themagroep h4, .themagroep-titel { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 15px; font-weight: 600; cursor: pointer; }
.chip input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.chip:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

.vink { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--text-2); cursor: pointer; }
.vink input { flex-shrink: 0; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); }
.vink strong { color: var(--text); }
.vink:has(input[aria-invalid='true']) { color: var(--danger); }

.lokveld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.foutoverzicht { padding: 16px 18px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--text); }
.foutoverzicht ul { margin: 8px 0 0; padding-left: 18px; }
.bedankt { margin-top: 32px; padding: 36px 28px; border-radius: var(--r-lg); background: var(--sage-soft); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bedankt .ruggie { width: 96px; height: 96px; }
.bedankt h3 { font-size: 28px; }

/* Voet */
.voet { padding: 48px 0 56px; border-top: 1px solid var(--line); }
.voet-binnen { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--text-2); }
.voet .merk { margin-bottom: 8px; }

/* Contactpagina */
.contact-sectie { padding-top: 24px; }
.contact-raster { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.contact-kaart { gap: 10px; padding: 26px; }
.contact-kaart h2 { font-size: 24px; }
.contact-kaart .knop { align-self: flex-start; margin-top: 6px; }
.contact-icoon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.contact-gegeven { font-weight: 800; font-size: 18px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.contact-gegeven:hover { text-decoration: underline; }
.contact-verder { margin-top: 28px; }
.contact-nood { margin-top: 28px; }
.menu a[aria-current='page'] { color: var(--text); }

/* ─── Menu: schaduw bij scrollen en mobiel menu ─────────────────────── */
.kop { transition: box-shadow .3s ease; }
.kop.gescrold { box-shadow: 0 6px 20px rgb(60 40 30 / .08); }
.menu a[aria-current='page'] { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.menu-mobiel { display: none; position: relative; }
.menu-mobiel summary { list-style: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-content: center; gap: 4px; cursor: pointer; }
.menu-mobiel summary::-webkit-details-marker { display: none; }
.menu-mobiel summary span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .25s ease, opacity .25s ease; }
.menu-mobiel[open] summary span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-mobiel[open] summary span:nth-child(2) { opacity: 0; }
.menu-mobiel[open] summary span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-mobiel nav { position: absolute; right: 0; top: 56px; min-width: 220px; padding: 10px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 40px rgb(60 40 30 / .16); display: flex; flex-direction: column; animation: menuIn .22s ease both; }
.menu-mobiel nav a { padding: 12px 14px; border-radius: var(--r-sm); color: var(--text); font-weight: 700; text-decoration: none; }
.menu-mobiel nav a:hover, .menu-mobiel nav a[aria-current='page'] { background: var(--accent-soft); }
@media (max-width: 760px) { .menu-mobiel { display: block; } .kop-binnen { gap: 10px; } .menu { margin-left: auto; } }
@media (max-width: 1000px) and (min-width: 761px) { .menu { gap: 16px; } .menu a:not(.knop) { font-size: 14px; } }

/* ─── Pagina's: gedeelde bouwstenen ──────────────────────────────────── */
.midden { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.knoppen.midden { justify-content: center; }
.slot .ruggie { width: 110px; height: 110px; }
.lijst-vink.ruim { gap: 14px; font-size: 18px; }

/* De app */
.kenmerk-icoon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 6px; }
.kenmerk-icoon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.adem { width: 52px; height: 52px; margin-bottom: 6px; display: grid; place-items: center; }
.adem-cirkel { width: 52px; height: 52px; border-radius: 50%; background: var(--sage-soft); box-shadow: 0 0 0 6px color-mix(in srgb, var(--sage) 14%, transparent); display: grid; place-items: center; }
.adem-cirkel .ruggie { width: 34px; height: 34px; }
.beleving-label { align-self: flex-start; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; background: var(--accent-soft); color: var(--accent); }
.beleving[data-soort='midden'] .beleving-label { background: color-mix(in srgb, var(--steen-2) 30%, var(--surface)); color: var(--text); }
.beleving[data-soort='rustig'] .beleving-label { background: var(--sage-soft); color: var(--sage); }
.raster.basis { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bewust .lijst-vink { margin-top: 8px; }
.tabel-rol { margin-top: 28px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); }
.wie-ziet { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 16px; }
.wie-ziet th, .wie-ziet td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.wie-ziet thead th { font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.wie-ziet tbody th { font-weight: 800; }
.wie-ziet td { color: var(--text-2); }
.wie-ziet tr:last-child > * { border-bottom: 0; }

/* Veelgestelde vragen */
.faq-inhoud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.faq-inhoud a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; font-size: 15px; text-decoration: none; transition: background .2s, border-color .2s; }
.faq-inhoud a:hover { background: var(--accent-soft); border-color: var(--accent); }
.faq-sectie { padding-top: 32px; }
.faq-groep + .faq-groep { margin-top: 48px; }
.faq-groep h2 { font-size: clamp(24px, 3vw, 30px); }
details.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: ''; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft) no-repeat center / 14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 2v10M2 7h10' stroke='%23A9502F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); transition: transform .3s ease; }
details.faq[open] summary::after { transform: rotate(45deg); }
.faq-antwoord { margin-top: 10px; color: var(--text-2); }
details.faq[open] .faq-antwoord { animation: omhoog .35s ease both; }

/* ─── Beweging ───────────────────────────────────────────────────────── */
@keyframes omhoog { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes telIn { from { opacity: 0; transform: translateY(46px) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes plop { 0% { opacity: 0; transform: scale(.7); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes steenVal { 0% { opacity: 0; transform: translateY(-70px); } 70% { opacity: 1; transform: translateY(4px); } 85% { transform: translateY(-3px); } 100% { opacity: 1; transform: none; } }
@keyframes zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes tik { 0%, 88%, 100% { transform: none; } 92% { transform: scale(.93); } 96% { transform: scale(1.04); } }
@keyframes adem { 0%, 100% { transform: scale(.78); } 40% { transform: scale(1.08); } }

/* Onthullen bij scrollen: alleen als animaties.js draait (klasse .beweeg). */
.beweeg .onthul { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 80ms); }
.beweeg .onthul.zichtbaar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Openingsbeeld */
  .held-tekst > *, .held-klein .smal-blok > * { animation: omhoog .8s cubic-bezier(.2,.7,.2,1) both; }
  .held-tekst > :nth-child(2), .held-klein .smal-blok > :nth-child(2) { animation-delay: .08s; }
  .held-tekst > :nth-child(3), .held-klein .smal-blok > :nth-child(3) { animation-delay: .16s; }
  .held-tekst > :nth-child(4), .held-klein .smal-blok > :nth-child(4) { animation-delay: .24s; }
  .telefoon .scherm { animation: telIn 1s cubic-bezier(.2,.8,.3,1) .15s both; }
  .telefoon figcaption { animation: omhoog .6s ease 1.2s both; }
  .app-bubbel { animation: plop .5s cubic-bezier(.3,0,.3,1.4) .8s both; transform-origin: 0 100%; }
  .app-ruggie-rij .ruggie { animation: zweef 3.4s ease-in-out 1.4s infinite; }
  .app-gewichten span { animation: plop .4s cubic-bezier(.3,0,.3,1.4) both; }
  .app-gewichten span:nth-child(1) { animation-delay: 1s; }
  .app-gewichten span:nth-child(2) { animation-delay: 1.07s; }
  .app-gewichten span:nth-child(3) { animation: plop .4s cubic-bezier(.3,0,.3,1.4) 1.14s both, tik 5s ease-in-out 2.5s infinite; }
  .app-gewichten span:nth-child(4) { animation-delay: 1.21s; }
  .app-gewichten span:nth-child(5) { animation-delay: 1.28s; }
  .app-klaar { animation: omhoog .6s ease 1.5s both; }
  .app-stenen i { animation: steenVal .7s cubic-bezier(.5,0,.6,1) both; }
  .app-stenen i:nth-child(1) { animation-delay: 1.8s; }
  .app-stenen i:nth-child(2) { animation-delay: 1.95s; }
  .app-stenen i:nth-child(3) { animation-delay: 2.1s; }
  .app-stenen i:nth-child(4) { animation-delay: 2.25s; }
  .app-stenen i:nth-child(5) { animation-delay: 2.4s; }

  /* Kleine details */
  .adem-cirkel { animation: adem 10s ease-in-out infinite; }
  .slot .ruggie, .over-beeld .ruggie { animation: zweef 4s ease-in-out infinite; }
  .kaart { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .raster .kaart:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
  .knop { transition: transform .15s ease, background .2s ease, box-shadow .2s ease; }
  .knop:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgb(169 80 47 / .22); }
  .knop.stil:hover { box-shadow: none; background: var(--accent-soft); }
  .knop:active { transform: scale(.98); }
  .stapnummer { transition: transform .3s cubic-bezier(.3,0,.3,1.6); }
  .stappen li:hover .stapnummer { transform: scale(1.12) rotate(-6deg); }
}

/* Keuzehulp */
.keuzehulp-sectie { padding-top: 24px; }
.keuzehulp { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.kh-voortgang { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.kh-voortgang span { display: block; height: 100%; width: 20%; border-radius: 99px; background: var(--accent); transition: width .4s cubic-bezier(.2,.7,.2,1); }
.kh-stap { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.kh-vraag { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kh-vraag legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font-family: var(--font-display); font-weight: 650; font-size: clamp(22px, 3vw, 28px); line-height: 1.2; outline: none; }
.kh-vraag legend + * { clear: both; }
.kh-optie { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s; }
.kh-optie input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.kh-optie:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.kh-optie:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.kh-optie:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.kh-knoppen { margin-top: 4px; justify-content: space-between; }
.kh-knoppen #kh-verder { margin-left: auto; }
.kh-uitslag { display: flex; flex-direction: column; gap: 18px; outline: none; }
.kh-advies { padding: 28px; border-radius: var(--r-lg); background: var(--sage-soft); display: flex; flex-direction: column; gap: 12px; }
.kh-advies[data-advies='nood'] { background: var(--accent-soft); }
.kh-advies h2 { font-size: clamp(26px, 3.4vw, 34px); }
.kh-advies .knoppen { margin-top: 8px; }
.kh-nood { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.kh-uitslag > .knop { align-self: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  .kh-vraag:not([hidden]), .kh-advies:not([hidden]) { animation: omhoog .45s cubic-bezier(.2,.7,.2,1) both; }
}
@media (max-width: 600px) { .keuzehulp, .kh-advies { padding: 20px; } }

/* Inloggen */
.menu .menu-inloggen { background: transparent; color: var(--accent); border: 1px solid var(--line); }
@media (max-width: 760px) { .menu .menu-inloggen { display: none; } }
.menu-mobiel nav .menu-mobiel-inloggen { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); color: var(--accent); }
.inlog-sectie { padding-top: 16px; }
.inlog-raster { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 780px; }
.inlog-kaart { align-items: flex-start; gap: 10px; padding: 28px; color: var(--text); text-decoration: none; }
.inlog-kaart h2 { font-size: 26px; }
.inlog-kaart .knop { margin-top: 8px; }
.inlog-beeld { width: 64px; height: 64px; display: grid; place-items: center; }
.inlog-beeld .ruggie { width: 64px; height: 64px; }
.inlog-icoon { border-radius: 50%; background: var(--sage-soft); color: var(--sage); }
.inlog-icoon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.inlog-kaart:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.inlog-voet { margin-top: 22px; }

/* Intakeformulier */
.intake-vraag { display: flex; flex-direction: column; gap: 8px; }
.intake-vraag .veldnaam, .veld .veldnaam { font-weight: 700; font-size: 15px; }
.uitleg.nadruk { padding: 14px 16px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--text); font-weight: 600; }
.intake-vraag[aria-invalid='true'], .intake-vraag:has([aria-invalid='true']) .veldnaam { color: var(--danger); }
.schaal10 { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.schaal10 .chip { justify-content: center; padding: 0; }
.schaal10-labels { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-2); }
@media (max-width: 520px) { .schaal10 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }