/* OnzeSpeeltuin.nl, landingspagina. Gebruikt alleen tokens uit tokens.css. Gegenereerd uit het lab (naar-site.py). */

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  html { background: var(--wit); overflow-x: clip; }   /* krullen die buiten beeld lopen mogen de pagina niet breder maken (Renoud 04-10) */
  body { margin: 0; background: var(--kleur-achtergrond); color: var(--kleur-donker); font: 400 1.06rem/1.6 var(--font-tekst); -webkit-font-smoothing: antialiased; overflow-x: clip; }
  img, video, svg { display: block; max-width: 100%; }
  a { color: inherit; }
  button { font: inherit; color: inherit; }
  :focus-visible { outline: 3px solid var(--kleur-donker); outline-offset: 3px; border-radius: 8px; }
  /* titels: één stijl, Bricolage ExtraBold, overal */
  h1, h2, h3 { font-family: var(--font-kop); font-weight: 800; font-variation-settings: "opsz" 96; line-height: 1; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
  h1 { font-size: clamp(2.5rem, 6.4vw, 5.6rem); line-height: .96; }
  h2 { font-size: clamp(2.1rem, 4.4vw, 3.8rem); }
  h3 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.1; }
  p { margin: 0; }
  .wrap { width: min(1280px, 100% - 40px); margin-inline: auto; }
  .label { display: block; font-size: .82rem; color: var(--kleur-tekst-zacht); margin-bottom: var(--ruimte-4); }
  .pijl { font-family: var(--font-kop); font-weight: 800; }
  .midden { text-align: center; }
  .midden .sub { margin: 22px auto 0; max-width: 46ch; color: var(--kleur-tekst-zacht); }
  .sectie { padding-block: var(--ruimte-sectie); }

  .knop { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 54px; padding: 0 var(--ruimte-7); border-radius: var(--r-pil); background: var(--kleur-accent); color: var(--kleur-donker); font: 700 1rem/1 var(--font-tekst); text-decoration: none; border: 0; cursor: pointer; transition: transform .3s var(--uit); white-space: nowrap; }
  /* Hover alleen waar een muis is: op een telefoon blijft een tik anders 'hangen'. */
  @media (hover: hover) {
    .knop:hover { transform: translateY(-2px) scale(1.03); }
    /* In de zwevende balk tilt het bolletje niet op (dan klopt de uitlijning in de balk niet meer); alleen de pijl schuift. */
    .zweef .knop:hover { transform: none; }
    .zweef .knop .pijl { transition: transform .3s var(--uit); }
    .zweef .knop:hover .pijl { transform: translateX(3px); }
    .tabs button:not([aria-selected="true"]):hover { background: color-mix(in srgb, var(--kleur-donker-2) 80%, var(--kleur-achtergrond)); }
    .keuzes span:hover { border-color: var(--kleur-donker); }
    .stippen button:not([aria-current="true"]):hover { background: var(--kleur-tekst-zacht); }
  }
  .knop.donker { background: var(--kleur-donker); color: var(--kleur-achtergrond); }
  .knop.lijn { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; min-height: 44px; padding: 0 var(--ruimte-5); font-size: .92rem; }
  .knop .speel { width: 26px; height: 26px; border-radius: 50%; background: var(--kleur-donker); display: grid; place-items: center; }
  .knop .speel::before { content: ""; border-left: 9px solid var(--kleur-accent); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }

  /* 1. hero: de levende speeltuin uit de kijkdoos, logo in het midden, geen menu */
  .hero { position: relative; margin: 10px; border-radius: var(--r-groot); overflow: hidden; min-height: min(100svh - 20px, 960px); display: grid; grid-template-rows: auto 1fr; background: var(--groen-60); }   /* gelijk aan de lucht van de illustratie */
  .hero > .poster { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% + 160px); object-fit: cover; object-position: 50% 100%; will-change: transform; }   /* stil beeld; schuift op 80% van de scroll mee (parallax) */
  /* desktop: de oorspronkelijke uitsnede (zoals op 1440 breed); op grotere schermen schaalt hij niet mee maar herhaalt hij
     zich naast elkaar (Renoud 04-10). De scène raakt de randen nergens, dus de herhaling is naadloos. */
  .hero > .poster { display: none; }
  /* hoog genoeg dat de bomen nooit achter de tekst vallen: tekstblok + de hoogte van de bomen op de schaal van de scène */
  .hero { min-height: max(min(100svh - 20px, 960px), calc(clamp(1100px, 100vw - 20px, 1800px) * .36 + 420px)); }
  .hero .speeltuin { position: absolute; left: 0; right: 0; bottom: 0; top: -160px; background: var(--groen-60) url(/img/scene-hero.webp?v=9) repeat-x 50% 100% / clamp(1100px, 100%, 1800px) auto;   /* max 1800 breed (Renoud 04-10) */ will-change: transform; }
  /* de wip en de schommel bewegen: losse lagen (plank, zitjes, voorpoten) op hun plek boven de achtergrond, alleen met CSS
     (draaien op de grafische kaart, geen script per frame); maten in % van de hero-scène (2200 x 1500) (Renoud 04-10) */
  .hero .middel { position: absolute; left: 50%; bottom: 0; width: clamp(1100px, 100%, 1800px); aspect-ratio: 2200 / 1500; translate: -50% 0; }
  .hero .poster > img { display: block; width: 100%; height: 100%; }
  .deel { position: absolute; display: block; }
  .deel img { display: block; width: 100%; height: auto; }
  .d-wip { left: 16.136%; top: 70%; width: 16.864%; transform-origin: 46.9% 51.2%; }   /* de wip beweegt alleen op scroll en kan omslaan (zie site.js) */
  .d-zit { left: 62%; top: 68.733%; width: 14.182%; }
  .d-zit1, .d-zit2 { top: 68.47%; }   /* 4 px hoger dan het origineel: de kettingen beginnen achter de bovenbalk */
  .d-zit1 { transform-origin: 39.1% 27.9%; animation: zwaai1 1.65s ease-in-out infinite alternate; }
  .d-zit2 { transform-origin: 61.5% 29.7%; animation: zwaai2 1.8s ease-in-out -.6s infinite alternate; }
  @keyframes wippen { from { rotate: -2.6deg; } to { rotate: 2.6deg; } }
  @keyframes zwaai1 { from { rotate: -3.6deg; } 60% { rotate: 2.4deg; } to { rotate: 3.6deg; } }
  @keyframes zwaai2 { from { rotate: 3deg; } 45% { rotate: -1.8deg; } to { rotate: -3deg; } }
  @media (prefers-reduced-motion: reduce) { .deel { animation: none !important; } }
  /* de illustratie verschijnt pas als achtergrond en losse delen er allemaal zijn, dan in één keer (Renoud 04-10) */
  .hero .speeltuin > *, .hero .speeltuin, .hero > .poster { opacity: 0; transition: opacity .5s ease; }
  .hero.geladen .speeltuin, .hero.geladen .speeltuin > *, .hero.geladen > .poster { opacity: 1; }
  .hero .logo { position: relative; z-index: 2; justify-self: center; margin-top: 30px; }
  .hero .logo svg { width: 146px; height: auto; } .hero .logo path { fill: var(--kleur-donker); }
  .hero .inhoud { position: relative; z-index: 2; text-align: center; padding: clamp(var(--ruimte-11), 9vh, 120px) var(--ruimte-5) 0; }
  .hero .sub { margin: var(--ruimte-6) auto var(--ruimte-8); max-width: 40ch; font-size: 1.12rem; }

  /* zwevende aanmeldknop: blijft net boven de onderkant tot het formulier in beeld komt */
  .zweef { position: fixed; z-index: 60; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translate(-50%, 0); display: flex; align-items: center; gap: 18px; padding: 10px 10px 10px 26px; border-radius: var(--r-pil); background: var(--kleur-accent); transition: transform .5s var(--uit), opacity .3s; }
  .zweef span { font-family: var(--font-kop); font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
  .zweef .knop { min-height: 46px; padding: 0 22px; }
  .zweef .kort { display: none; }
  .zweef { padding: 7px 7px 7px var(--ruimte-7); }
  .zweef .knop { width: 48px; height: 48px; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.15rem; }
  .zweef .knop .tekst-knop { display: none; }
  .zweef.weg { transform: translate(-50%, 160%); opacity: 0; pointer-events: none; }

  /* hero en waar het knelt op wit, voor contrast met de lichtgroene hero (Renoud 04-10) */
  .bovenkant { background: var(--kleur-vlak); padding: 10px 0 0; }
  .bovenkant .hero { margin-top: 0; }

  /* krullen rond "waar het knelt", met parallax (Renoud 04-10); ze lopen over de rand van de sectie heen */
  .knelt { position: relative; }
  .flieber { position: absolute; z-index: 3; pointer-events: none; will-change: transform; }
  .f-roze { width: 280px; right: calc((100vw - min(1280px, 100vw - 40px)) / -2 - 90px); top: -30px; rotate: -24deg; }
  .f-geel { width: 260px; left: calc((100vw - min(1280px, 100vw - 40px)) / -2 - 50px); bottom: -150px; rotate: 18deg; }

  /* 2. waar het knelt */
  .knelt .twee { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ruimte-13); align-items: start; }
  .knelt .stelling { font-family: var(--font-kop); font-weight: 600; font-variation-settings: "opsz" 48; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.25; }
  .knelt .intro { margin-top: var(--ruimte-5, 20px); max-width: 30em; color: var(--kleur-tekst-zacht); font-size: 1.05rem; line-height: 1.55; }
  .knelt ul { list-style: none; margin: 0; padding: 0; }
  .knelt li { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--kleur-lijn); }
  .knelt li:first-child { padding-top: 0; }

  /* 3. de tegelwand uit de film: wit vlak, heel lichtgroene tegels, kolommen om en om lager */
  .wand { background: var(--kleur-achtergrond); }
  .tegels { --kol: 4; display: grid; grid-template-columns: repeat(var(--kol), 1fr); gap: 22px; margin: var(--ruimte-13) auto 0; max-width: 1080px; padding-bottom: 60px; }
  .tegel { aspect-ratio: 1 / .93; background: var(--kleur-vlak); border-radius: var(--r-tegel); display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; padding: 26px 10px 26px; font-family: var(--font-kop); font-weight: 800; font-size: clamp(1rem, 1.45vw, 1.3rem); text-align: center; }
  .tegel:nth-child(4n+1), .tegel:nth-child(4n+3) { transform: translateY(60px); }
  .tegel.op.zichtbaar:nth-child(4n+1), .tegel.op.zichtbaar:nth-child(4n+3) { transform: translateY(60px); }
  /* op scroll bewegen de kolommen subtiel tegen elkaar in (Renoud 04-10); los van de transform van het verschijnen */
  .tegel { translate: 0 var(--sch, 0px); }
  .ic { width: 42%; aspect-ratio: 1; background: var(--c, var(--kleur-donker)); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

  /* 4. het beheer: een interactieve demo over de hele breedte */
  .beheer { background: var(--kleur-donker); color: var(--kleur-achtergrond); }
  .beheer .sub { color: var(--groen-200); }
  .tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: var(--ruimte-9); }
  .tabs button { border: 0; cursor: pointer; padding: var(--ruimte-3) var(--ruimte-5); border-radius: var(--r-pil); background: var(--kleur-donker-2); color: var(--kleur-achtergrond); font: 600 .98rem var(--font-tekst); transition: background .25s; }
  /* De geselecteerde tab blijft groen; de gele ring eromheen laat zien welke loopt (Jasper 05-10). */
  .tabs button[aria-selected="true"] { color: var(--kleur-achtergrond); }
  /* Ring om de actieve tab (zie site.js): net buiten de pil, loopt in 5 s vol tijdens de cyclus,
     staat vol als iemand zelf kiest. pathLength=1, dus 1 = de hele omtrek. */
  .tabs button { position: relative; }
  .tab-ring { position: absolute; left: -4px; top: -4px; max-width: none; overflow: visible; pointer-events: none; }   /* max-width: none, anders knijpt de reset (svg max-width 100%) hem in */
  .tab-ring rect { fill: none; stroke: transparent; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .tabs button[aria-selected="true"] .tab-ring rect { stroke: var(--kleur-accent); stroke-dashoffset: 0; }
  .tabs button[data-klok] .tab-ring rect { animation: tab-klok 5s linear forwards; }
  @keyframes tab-klok { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @media (prefers-reduced-motion: reduce) { .tabs button[data-klok] .tab-ring rect { animation: none; } }
  .uitleg { text-align: center; margin: 22px auto 0; max-width: 56ch; color: var(--groen-200); min-height: 3.2em; }
  .scherm { margin-top: 36px; border-radius: 22px; overflow: hidden; background: var(--zwart-scherm); box-shadow: var(--schaduw-scherm); }
  .scherm .balk { display: flex; align-items: center; gap: var(--ruimte-2); padding: var(--ruimte-3) var(--ruimte-4); background: var(--balk); }
  .scherm .balk i { width: 11px; height: 11px; border-radius: 50%; background: var(--balk-stip); }
  .scherm .balk span { margin-left: var(--ruimte-3); font-size: .82rem; color: var(--kleur-tekst-zacht); background: var(--kleur-vlak); border-radius: var(--r-pil); padding: var(--ruimte-1) 14px; }
  .scherm .doos { position: relative; aspect-ratio: 1064 / 640; background: #f3f3f3; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
  .scherm .baan { display: flex; height: 100%; transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
  .scherm .baan img { flex: 0 0 100%; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
  @media (prefers-reduced-motion: reduce) { .scherm .baan { transition: none; } }
  .demo-hint { text-align: center; margin-top: 18px; font-size: .9rem; color: var(--groen-400); }
  .demo-hint a { color: var(--groen-200); }
  .demo-mobiel { display: none; }

  /* 5. voorbeelden: brede kaart met de speeltuinillustratie, de site er klein in */
  .voorbeelden { background: var(--kleur-vlak); }
  .strip { margin-top: var(--ruimte-12); display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 max(var(--ruimte-5), calc((100vw - 1180px) / 2)); scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .kaart { position: relative; flex: 0 0 min(1180px, 88vw); aspect-ratio: 2 / 1; border-radius: var(--r-groot); overflow: hidden; scroll-snap-align: center; background: var(--kleur-achtergrond) center / cover no-repeat; }
  .kaart .tekst { position: absolute; left: 40px; top: 36px; z-index: 2; max-width: 30ch; }
  .kaart h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
  .kaart .tekst p { margin-top: var(--ruimte-2); font-size: .95rem; }
  .kaart .site { position: absolute; left: 50%; top: 50%; width: 54%; transform: translate(-50%, -50%); border-radius: var(--r-klein); box-shadow: var(--schaduw-site); }   /* midden midden (Renoud 04-10) */
  .kaart .pil { position: absolute; z-index: 2; top: 34%; left: calc(23% - 40px); background: var(--kleur-vlak); border-radius: var(--r-klein); padding: var(--ruimte-3) var(--ruimte-4); font-size: .86rem; font-weight: 600; box-shadow: var(--schaduw-pil); }
  .kaart:nth-child(odd) .pil { left: auto; right: calc(23% - 40px); }   /* om en om rechts en links, op de foto (Renoud 06-10) */
  .kaart:nth-child(2) .pil { top: 65.4%; transform: translateY(-50%); }   /* sponsor: midden op de foto van de site (12,5% + 70,5% van 74,9%) */
  .kaart .pil small { display: block; font-weight: 400; color: var(--kleur-tekst-zacht); }
  .stippen { display: flex; justify-content: center; gap: var(--ruimte-2); margin-top: 26px; }
  .stippen button { width: 9px; height: 9px; padding: 0; border-radius: var(--r-pil); border: 0; background: var(--kleur-lijn); cursor: pointer; transition: width .3s; }
  .stippen button[aria-current="true"] { width: 32px; background: var(--kleur-donker); }

  /* 6. groot moment: zit je ergens mee, met zwevende krullen */
  .moment { position: relative; margin: 10px; border-radius: var(--r-groot); display: grid;   /* container zonder achtergrond en zonder afsnijden: de krullen mogen eroverheen (Renoud 06-10) */
    place-items: center; padding: var(--ruimte-sectie) var(--ruimte-5); text-align: center; }
  .moment .krul { position: absolute; pointer-events: none; z-index: 1; }   /* parallax zoals de andere krullen (Renoud 04-10), elk een eigen snelheid */
  /* op brede schermen: roze en blauw blijven in een band van 1420 breed rond het midden, groen en geel staan halverwege
     tussen die band en de rand van het scherm, dus verder naar buiten (Renoud 06-10) */
  .moment .k1 { width: 300px; left: max(-40px, calc((100% - 1420px) / 4 - 40px)); top: 40px; --d: 10s; }
  .moment .k2 { width: 240px; right: max(4%, calc((100% - 1420px) / 2 + 57px)); top: 70px; --d: 12s; --r2: -5deg; }
  .moment .k3 { width: 280px; left: max(10%, calc((100% - 1420px) / 2 + 142px)); bottom: -40px; --d: 11s; }
  .moment .k4 { width: 260px; right: max(-30px, calc((100% - 1420px) / 4 - 30px)); bottom: 30px; --d: 9s; --r2: 6deg; }
  .moment .inhoud { position: relative; z-index: 2; max-width: 760px; }
  .moment .sub { margin: var(--ruimte-5) auto 0; max-width: 40ch; color: var(--kleur-tekst-zacht); }
  /* kennisbank zoals de tegel in het beheer: groene kaart met de companion en het zoekveld; het antwoord los eronder */
  .chat { margin: var(--ruimte-10) auto 0; max-width: 640px; display: grid; gap: 14px; text-align: left; }
  .tegel-kennis { background: var(--kleur-donker); color: var(--kleur-achtergrond); border-radius: var(--r-kaart); padding: 26px; display: grid; gap: var(--ruimte-5); }
  .tegel-kennis .kop { display: flex; align-items: center; gap: 14px; }
  .tegel-kennis .ava { width: 52px; height: 52px; flex: none; } .tegel-kennis .ava svg { width: 100%; height: 100%; display: block; }
  .tegel-kennis b { display: block; font-family: var(--font-kop); font-weight: 800; font-size: 1.35rem; line-height: 1.1; }
  .tegel-kennis small { display: block; font-size: .88rem; opacity: .7; }
  .tegel-kennis .veld { display: flex; align-items: center; gap: 10px; min-height: 56px; border-radius: var(--r-pil); background: var(--veld-op-groen); border: 1px solid var(--veld-rand-op-groen); padding: var(--ruimte-3) var(--ruimte-5); font-size: 1.05rem; }
  .tegel-kennis .veld svg { width: 18px; height: 18px; flex: none; opacity: .65; }
  .tegel-kennis .vraagtekst:empty::before { content: "Zeg wat je zoekt"; opacity: .55; }
  .cursor-streep { width: 2px; height: 1.2em; background: var(--kleur-accent); animation: knipper 1s steps(1) infinite; }
  @keyframes knipper { 50% { opacity: 0; } }
  .chat .antw { background: var(--kleur-donker-2); color: var(--groen-120); border-radius: 26px; padding: var(--ruimte-6) 26px; min-height: 152px; transition: opacity .35s, transform .45s var(--uit); }
  .chat .antw.weg { opacity: 0; transform: translateY(10px); }
  .chat .antw p { margin: 0; }
  .chat .antw .bron { display: block; margin-top: var(--ruimte-3); font-size: .82rem; color: var(--groen-300); }

  /* 7. aanmelden in drie stappen */
  .reis { background: var(--kleur-donkerst); color: var(--kleur-achtergrond); margin: 10px; border-radius: var(--r-groot); }
  .reis .twee { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--ruimte-13); }
  .reis .intro { margin-top: var(--ruimte-5, 20px); max-width: 30em; color: var(--groen-200); font-size: 1.05rem; line-height: 1.55; }
  .reis .vraagje { margin-top: 30px; color: var(--groen-200); font-size: .95rem; }
  .reis .vraagje .knop { margin-top: var(--ruimte-3); color: var(--kleur-achtergrond); }
  .reis details { border-bottom: 1px solid var(--lijn-op-groen); }
  .reis summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 48px 1fr auto; align-items: baseline; padding: 26px 0; font-family: var(--font-kop); font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
  .reis summary::-webkit-details-marker { display: none; }
  .reis summary small { font: 400 .85rem var(--font-tekst); color: var(--groen-400); }
  .reis summary::after { content: "+"; width: 26px; height: 26px; border-radius: 50%; background: var(--kleur-accent); color: var(--kleur-donker); display: grid; place-items: center; font: 700 1rem/1 var(--font-tekst); transition: transform .3s var(--uit); }
  .reis details[open] summary::after { transform: rotate(45deg); }
  .reis details p { padding: 0 0 26px var(--ruimte-10); color: var(--groen-200); max-width: 50ch; }

  /* 8. vragen */
  .vragen .twee { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--ruimte-13); }
  .vragen details { background: var(--kleur-vlak-zacht); border-radius: var(--r-midden); margin-bottom: var(--ruimte-3); padding: 0 var(--ruimte-6); }
  .vragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--ruimte-4); padding: 22px 0; font-family: var(--font-kop); font-weight: 800; font-size: 1.1rem; }
  .vragen summary::-webkit-details-marker { display: none; }
  /* plus en min als twee getekende streepjes: een tekenglyph zakt op de basislijn uit het midden */
  .vragen summary::after { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--kleur-donker); background: linear-gradient(var(--kleur-donker), var(--kleur-donker)) center / 10px 1.5px no-repeat, linear-gradient(var(--kleur-donker), var(--kleur-donker)) center / 1.5px 10px no-repeat; }
  .vragen details[open] summary::after { background-size: 10px 1.5px, 0 0; }
  .vragen details p { padding: 0 0 22px; color: var(--kleur-tekst-zacht); }

  /* 9. aanmelden: de gele lus groot op de achtergrond */
  .aanmeld { position: relative; overflow: visible; z-index: 0; }   /* de lus loopt door tot achter de illustratie (Renoud 04-10) */
  main { overflow-x: clip; }
  .aanmeld .lus { position: absolute; z-index: 0; width: min(1780px, 140vw); height: auto; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-6deg); pointer-events: none; }   /* voorgerenderd (lus-render.mjs): geen live SVG meer */
  .aanmeld .lus:not(.klaar) { visibility: hidden; }
  .aanmeld .twee { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--ruimte-12); align-items: center; }
  .aanmeld .sub { margin-top: 22px; max-width: 34ch; font-size: 1.12rem; }
  form { background: var(--kleur-vlak); border-radius: var(--r-kaart); padding: 34px; display: grid; gap: 14px; box-shadow: 0 34px 70px -34px rgb(43 75 45 / .5); }
  form h3 { margin-bottom: var(--ruimte-1); }
  label { display: grid; gap: 6px; font-weight: 600; font-size: .93rem; }
  input, select { font: inherit; font-weight: 400; color: var(--kleur-donker); padding: 13px var(--ruimte-4); border-radius: var(--r-klein); border: 1.5px solid var(--kleur-lijn); background: var(--kleur-achtergrond); width: 100%; }
  input:focus, select:focus { outline: none; border-color: var(--kleur-donker); background: var(--kleur-vlak); }
  .rij2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ruimte-3); }
  fieldset { border: 0; padding: 0; margin: 0; }
  legend { font-weight: 600; font-size: .93rem; margin-bottom: var(--ruimte-2); }
  .keuzes { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; }
  .keuzes label { display: inline-flex; font-weight: 500; }
  .keuzes input { position: absolute; opacity: 0; pointer-events: none; }
  .keuzes span { display: inline-flex; align-items: center; padding: var(--ruimte-2) 14px; border-radius: var(--r-pil); border: 1.5px solid var(--kleur-lijn); cursor: pointer; transition: background .2s, border-color .2s; }
  /* Gekozen: geen volle vulling maar een vinkje in de pil (Jasper 05-10). Het vinkje is een getekende hoek
     die bij 'niet gekozen' geen breedte inneemt. */
  .keuzes span::before { content: ""; width: 0; height: .62em; margin: 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-.12em); opacity: 0; transition: width .2s, margin .2s, opacity .2s; }
  .keuzes input:checked + span { background: var(--kleur-vlak-zacht); border-color: var(--kleur-donker); color: var(--kleur-donker); }
  .keuzes input:checked + span::before { width: .32em; margin: 0 .55em 0 .1em; opacity: 1; }
  .keuzes input:disabled + span { cursor: default; }
  fieldset legend small { display: block; font-weight: 400; font-size: .85rem; color: var(--kleur-tekst-zacht); margin-top: 2px; }
  .keuzes input:focus-visible + span { outline: 3px solid var(--kleur-donker); outline-offset: 2px; }
  form .knop { justify-self: start; }
  .bedankt { display: none; text-align: center; padding: 36px 6px; }
  .bedankt b { font-family: var(--font-kop); font-weight: 800; font-size: 1.8rem; display: block; margin-bottom: var(--ruimte-2); }
  .bedankt-tekst { display: block; max-width: 34ch; margin: 0 auto; }
  .bedankt small { display: block; margin-top: var(--ruimte-4); color: var(--kleur-tekst-zacht); font-size: .9rem; }
  form.verstuurd > :not(.bedankt) { display: none; } form.verstuurd .bedankt { display: block; }
  form .honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  form .hint { margin: -6px 0 0; font-size: .88rem; color: var(--kleur-tekst-zacht); }
  form .privacy { margin: 0; font-size: .82rem; color: var(--kleur-tekst-zacht); }
  form .privacy a { color: inherit; }
  form .knop.nog-niet { opacity: .4; }
  @media (hover: hover) { form .knop.nog-niet:hover { transform: none; } }
  form label { position: relative; }
  form input.mis { background: var(--kleur-vlak); }
  .veld-houder { position: relative; display: block; }
  .mis-ring { position: absolute; left: -4px; top: -4px; max-width: none; pointer-events: none; overflow: visible; }
  .mis-ring rect { fill: none; stroke: var(--kleur-accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 5; animation: mis-loopt 1.2s linear infinite; }
  @keyframes mis-loopt { to { stroke-dashoffset: -11; } }
  @media (prefers-reduced-motion: reduce) { .mis-ring rect { animation: none; } }
  /* Melding volgens de signaalregel: gewone tekst met een rood rondje en uitroepteken, geen gekleurd vlak. */
  form .fout { margin: 0; display: flex; align-items: center; gap: .5em; color: var(--kleur-donker); font-weight: 500; }
  form .fout[hidden] { display: none; }
  form .fout::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.15em; height: 1.15em; border: 1.5px solid #d94f2a; border-radius: 50%; color: #d94f2a; font-size: .85em; font-weight: 700; line-height: 1; box-sizing: border-box; }

  /* 10. overgang en voet: een brede, lage speeltuin; de grond loopt door in de footer (zelfde korrel) */
  .overgang { position: relative; z-index: 1; margin-top: clamp(-260px, -14vw, -120px); }   /* omhoog, over de onderkant van de lus heen */
  .overgang img { width: 100%; height: auto; aspect-ratio: 3000 / 880; object-fit: cover; object-position: 50% 100%; }
  .voet { background: var(--groen-250) url(/img/scene-grond.webp?v=1) 0 0 / 600px; margin-top: -1px; padding: 0 0 var(--ruimte-7); }   /* inhoud hoger, de hoogte blijft (Renoud 04-10) */
  .kolommen { display: grid; grid-template-columns: auto 1fr auto; align-items: start; padding: 0 0 clamp(96px, 9vw, 160px); }
  .kolommen > * { padding: var(--ruimte-1) clamp(var(--ruimte-7), 4vw, var(--ruimte-12)); }
  .kolommen > :first-child { padding-left: 0; } .kolommen > :last-child { padding-right: 0; }
  .kolommen > * + * { border-left: 2px dotted var(--stippel); }
  .merk svg { width: clamp(180px, 18vw, 250px); height: auto; } .merk path { fill: var(--kleur-donker); }
  .kopje { display: block; font-family: var(--font-kop); font-weight: 800; font-size: 1rem; margin-bottom: var(--ruimte-3); }
  .over p { max-width: 46ch; font-size: .98rem; } .over p + p { margin-top: 10px; }
  .contact { font-style: normal; display: grid; gap: var(--ruimte-1); font-size: .98rem; }
  .contact a { text-decoration: none; } .contact a:hover { text-decoration: underline; text-underline-offset: .2em; }
  .contact .adres { margin-top: 14px; }
  .onderregel { display: flex; justify-content: space-between; gap: var(--ruimte-5); padding-top: var(--ruimte-1); font-size: .86rem; }   /* geen stippellijn over de volle breedte (Renoud 04-10) */

  /* de film, groot, na "Bekijk video" */
  /* het filmvenster bestaat pas als hij open is: Safari kleurt zijn balken naar vaste elementen, ook onzichtbare (Renoud 04-10) */
  .filmvenster { position: fixed; inset: 0; z-index: 90; background: var(--sluier); display: none; place-items: center; padding: var(--ruimte-5); opacity: 0; transition: opacity .3s; }
  .filmvenster.open { display: grid; opacity: 1; }
  .filmvenster video { width: min(1280px, 100%); border-radius: var(--r-midden); transform: scale(.92); transition: transform .45s var(--uit); }
  .filmvenster.open video { transform: none; }
  .filmvenster .sluit { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--kleur-vlak); cursor: pointer; font-size: 1.4rem; }

  /* verschijnen zoals de letters van het logo */
  .op { transform: translateY(25px) scale(.92); opacity: 0; transition: transform .6s var(--uit), opacity .3s; }
  .op.zichtbaar { transform: none; opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .op { transform: none !important; opacity: 1; transition: none; } .krul { animation: none !important; } html { scroll-behavior: auto; } }

  /* ── mobiel ── */
  @media (max-width: 900px) {
    :root { --ruimte: 96px; }
    .knelt .twee, .reis .twee, .vragen .twee, .aanmeld .twee { grid-template-columns: 1fr; gap: var(--ruimte-9); }
    /* tegels: kleine liggende varianten, twee kolommen, geen carrousel */
    .f-roze { width: 150px; right: -80px; top: -10px; } .f-geel { width: 150px; left: -60px; bottom: -90px; }
    .tegels { --kol: 2; gap: 10px; margin-top: 44px; padding-bottom: 0; }
    .tegel { aspect-ratio: auto; grid-template-rows: none; grid-template-columns: 30px 1fr; justify-items: start; gap: 10px; padding: 14px 14px; border-radius: 18px; font-size: .95rem; text-align: left; }
    .tegel .ic { width: 30px; }
    .tegel:nth-child(n), .tegel.op.zichtbaar:nth-child(n) { transform: none; }
    /* demo: op een telefoon geen verkleind beheer, maar per onderdeel een kaart met het scherm, en de echte demo op volle grootte */
    .tabs, .uitleg, .scherm, .demo-hint { display: none; }
    .demo-mobiel { display: grid; gap: var(--ruimte-3); margin-top: var(--ruimte-9); }
    .demo-mobiel details { background: var(--kleur-donker-2); border-radius: var(--r-midden); overflow: hidden; }
    .demo-mobiel summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--ruimte-5); font-family: var(--font-kop); font-weight: 800; font-size: 1.1rem; }
    .demo-mobiel summary::-webkit-details-marker { display: none; }
    .demo-mobiel summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; transition: transform .3s var(--uit); }
    .demo-mobiel details[open] summary::after { transform: rotate(45deg); }
    .demo-mobiel p { padding: 0 var(--ruimte-5) var(--ruimte-4); color: var(--groen-200); font-size: .95rem; }
    .demo-mobiel img { width: calc(100% - 24px); margin: 0 var(--ruimte-3) var(--ruimte-3); border-radius: 12px; display: block; height: auto; }
    .demo-mobiel .knop { margin-top: var(--ruimte-2); width: 100%; }
    .demo-mobiel-hint { margin: var(--ruimte-2) 0 0; text-align: center; font-size: .9rem; color: var(--groen-400); }
    /* voorbeelden: onder elkaar, geen carrousel */
    /* mobiel: wel een carrousel (Renoud 04-10), met een stukje van de volgende kaart in beeld */
    .strip { gap: var(--ruimte-3); margin-top: 44px; padding: 0 var(--ruimte-5); scroll-padding: 0 var(--ruimte-5); }
    .kaart { flex: 0 0 86%; aspect-ratio: 4 / 3.6; background-size: auto 100%; background-position: 50% 100%; scroll-snap-align: start; }
    .kaart .site { width: 80%; border-radius: 10px; }
    .kaart .pil { display: none; }
    .stippen { margin-top: var(--ruimte-5); }
    .moment .k1 { width: 170px; left: -50px; top: 10px; } .moment .k2 { width: 140px; right: -30px; top: 30px; } .moment .k3, .moment .k4 { display: none; }
    .tegel-kennis { padding: var(--ruimte-5); } .tegel-kennis .veld { font-size: .95rem; min-height: 52px; } .chat .antw { min-height: 190px; }
    .rij2 { grid-template-columns: 1fr; }
    form { padding: var(--ruimte-6); }
    .aanmeld .lus { width: 190vw; top: 22%; }
    .kolommen { grid-template-columns: 1fr; padding-bottom: var(--ruimte-8); }
    .kolommen > * { padding: var(--ruimte-6) 0; } .kolommen > * + * { border-left: 0; border-top: 2px dotted var(--stippel); }
    .onderregel { flex-direction: column; gap: var(--ruimte-1); }
    .overgang img { height: 180px; object-position: 30% 100%; }
    .zweef { left: 12px; right: 12px; transform: none; padding: var(--ruimte-2) var(--ruimte-2) var(--ruimte-2) 22px; justify-content: space-between; }
    .zweef.weg { transform: translateY(160%); }
    .zweef { bottom: 16px; left: 16px; right: 16px; height: 62px; padding: 7px 7px 7px 22px; }
    .zweef .lang { display: none; } .zweef .kort { display: inline; font-size: .98rem; }
    .zweef .knop { width: 48px; height: 48px; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.15rem; flex: none; }
    .zweef .knop .tekst-knop { display: none; }
    .hero { min-height: 0; }
    /* mobiel: exact Renouds frame (04-10). Hero + zwevende knop vullen samen het scherm; de ruimte van de knop blijft
       onder de hero vrij, daarna begint de volgende sectie. De illustratie in vaste uitsnede: van de linker boom (met
       glijbaan) tot de boom rechts, die wordt afgebeten; maten in cqw, zodat het op elke breedte gelijk blijft. */
    .hero .speeltuin { display: none; } .hero > .poster { display: block; }
    .hero .inhoud { padding-bottom: 0 !important; }
    .bovenkant { padding-top: var(--ruimte-4); }
    .hero { container-type: inline-size; margin: 0 var(--ruimte-4); height: calc(100svh - 16px - 16px - 62px - 16px); min-height: 520px; max-height: 760px; display: block; }
    .hero .logo { display: block; width: fit-content; margin: 8.5cqw auto 0; } .hero .logo svg { width: 39cqw; }
    .hero .inhoud { padding: 0 18px; margin-top: clamp(var(--ruimte-7), 6svh, 60px); }
    .hero > .poster { left: -57cqw; width: 176cqw; max-width: none; height: auto; aspect-ratio: 2200 / 1500; bottom: -7.6cqw; }   /* gemeten op Renouds frame */
    .bovenkant .hero { margin-bottom: 94px; }   /* uitsparing voor de knop */
    h1 { font-size: 2.2rem; line-height: 1; }
    .hero h1 { font-size: 10.3cqw; }
    .hero .sub { font-size: 4.2cqw; line-height: 1.25; margin: 6.5cqw auto 8cqw; max-width: 86cqw; }   /* regelafstand 125% (Renoud 04-10) */
    .hero .knop { min-height: 14.4cqw; padding: 0 9cqw; font-size: 4.5cqw; }
  }

  /* tooltip bij de tegels: volgt de muis, een regel per tegel (Renoud 06-10) */
  .tip { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; max-width: 280px; padding: 10px 14px; border-radius: 12px; background: #fff; color: var(--kleur-donker); font-size: .9rem; line-height: 1.4; box-shadow: 0 6px 20px rgb(30 50 30 / .12); opacity: 0; transition: opacity .15s; }
  .tip.aan { opacity: 1; }