/* Publieke website Gastouder 't Dasje. Zachte paarse en gele tinten op een crèmekleurige achtergrond; het logo (antraciet met ballon) is de blikvanger. */
@font-face { font-family:"Nunito"; src:url("../fonts/nunito-latin.woff2") format("woff2"); font-weight:200 1000; font-style:normal; font-display:swap; }
:root {
    --bg:#fffaf1; --paper:#ffffff; --ink:#322b3b; --muted:#6e6579;
    --purple:#6e4fae; --purple-d:#4f3586; --lilac:#ece2fb; --lilac-2:#d9c8f6; --lilac-3:#f5effd;
    --yellow:#ffcf4a; --yellow-soft:#fff1c2; --butter:#fff8e1; --line:#eadff5;
    --ok:#2f8f5b; --err:#b8372c;
    --btn:#6e4fae; --btn-d:#4f3586; --btn-ink:#fff; --ribbon:#6e4fae; --logo-bg:transparent;
    --radius:22px; --shadow:0 10px 30px rgba(79,53,134,.10);
    --font:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark) {
    :root { --bg:#15101d; --paper:#2a2137; --ink:#f6f1fc; --muted:#cbbfde; --purple:#c9b3f7; --purple-d:#e6d9ff; --lilac:#3a2d4f; --lilac-2:#5a4a78; --lilac-3:#2f2640; --yellow:#ffd25a; --yellow-soft:#4a3d1d; --butter:#2f2a1b; --line:#4a3d62; --shadow:0 10px 30px rgba(0,0,0,.4); --btn:#ffd25a; --btn-d:#d9a91d; --btn-ink:#2a1f00; --ribbon:#5a3f93; --logo-bg:#fff4dc; --ok:#7fd8a6; --err:#ff8f85; }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font:17px/1.7 var(--font); background:var(--bg); color:var(--ink); overflow-x:hidden; }
img { max-width:100%; }
.wrap { max-width:1060px; margin:0 auto; padding:0 1.25rem; }
a { color:var(--purple); text-underline-offset:3px; }
h1, h2, h3 { font-family:var(--font); line-height:1.15; color:var(--purple-d); letter-spacing:-.01em; }
h1 { font-size:clamp(2rem, 5vw, 3.2rem); margin:.2rem 0 1rem; }
h2 { font-size:clamp(1.5rem, 3.4vw, 2.1rem); margin:0 0 .6rem; }
h3 { font-size:1.05rem; margin:1rem 0 .1rem; }
.lead { font-size:1.2rem; color:var(--ink); }
.muted { color:var(--muted); font-size:.95rem; }
.eyebrow { display:inline-block; font-weight:700; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--purple); background:var(--lilac); padding:.25rem .8rem; border-radius:99px; margin-bottom:.8rem; }
.hl { background:linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 92%, transparent 92%); padding:0 .15em; border-radius:4px; }

/* Knoppen */
.button { display:inline-block; font:inherit; font-weight:700; background:var(--btn); color:var(--btn-ink); border:0; border-radius:99px; padding:.75rem 1.7rem; text-decoration:none; cursor:pointer; box-shadow:0 6px 0 var(--btn-d); transition:transform .15s, box-shadow .15s; }
.button:hover { transform:translateY(2px); box-shadow:0 4px 0 var(--btn-d); }
.button:active { transform:translateY(6px); box-shadow:0 0 0 var(--btn-d); }
.button.yellow { background:var(--yellow); color:#3a2c00; box-shadow:0 6px 0 #d9a91d; }
.button.yellow:hover { box-shadow:0 4px 0 #d9a91d; }
.button.ghost { background:transparent; color:var(--purple-d); border:2px solid var(--lilac-2); box-shadow:none; }
.button.ghost:hover { background:var(--lilac); transform:none; }
.actions { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.2rem; }

/* Header */
.site-header { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.site-header .bar { display:flex; align-items:center; gap:.5rem 1.2rem; padding-top:.5rem; padding-bottom:.5rem; }
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--purple-d); font-weight:800; margin-right:auto; font-size:1.05rem; }
.brand .logo-mini { width:46px; background:var(--logo-bg); border-radius:14px; padding:3px 4px; }
.site-header nav { display:flex; gap:.2rem; overflow-x:auto; scrollbar-width:none; }
.site-header nav::-webkit-scrollbar { display:none; }
.site-header nav a { color:var(--ink); text-decoration:none; padding:.4rem .9rem; border-radius:99px; font-weight:600; white-space:nowrap; transition:background .2s; }
.site-header nav a:hover { background:var(--lilac); }
.site-header nav a.active { background:var(--lilac-2); color:var(--purple-d); }
.site-header nav a.cta { background:var(--yellow); color:#3a2c00; }
@media (max-width:760px) { .brand span { display:none; } }

/* Logo met bewegende ballon */
.logo-anim { position:relative; width:100%; aspect-ratio:729/1000; }
.logo-anim img { position:absolute; display:block; }
.logo-anim .base { left:0; top:0; width:100%; height:100%; }
.logo-anim .balloon { left:68.5%; top:0; width:31.5%; height:auto; transform-origin:52% 100%; animation:sway 5.5s ease-in-out infinite; }
.logo-float { animation:bob 6.5s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform:translateY(0) rotate(-.6deg); } 50% { transform:translateY(-12px) rotate(.6deg); } }
@keyframes sway { 0%,100% { transform:rotate(-5deg); } 50% { transform:rotate(6deg); } }
.logo-mini .logo-float { animation-duration:5s; }

/* Hero */
.hero { position:relative; padding:3rem 0 4.5rem; }
.hero .wrap { display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center; position:relative; z-index:1; }
.hero p { max-width:34rem; }
.stage { position:relative; max-width:360px; margin:0 auto; width:100%; }
.stage::before { content:""; position:absolute; inset:6% -10% 0 -10%; background:var(--lilac); border-radius:46% 54% 50% 50% / 52% 46% 54% 48%; animation:morph 14s ease-in-out infinite; }
@keyframes morph { 0%,100% { border-radius:46% 54% 50% 50% / 52% 46% 54% 48%; transform:rotate(0); } 50% { border-radius:56% 44% 42% 58% / 44% 58% 42% 56%; transform:rotate(6deg); } }
.stage .logo-anim { position:relative; filter:drop-shadow(0 14px 20px rgba(79,53,134,.18)); }
.blob { position:absolute; border-radius:50%; filter:blur(2px); z-index:0; pointer-events:none; }
.blob.b1 { width:340px; height:340px; background:var(--yellow-soft); top:-90px; left:-120px; animation:drift 18s ease-in-out infinite; }
.blob.b2 { width:260px; height:260px; background:var(--lilac); right:-80px; bottom:-60px; animation:drift 22s ease-in-out infinite reverse; }
@keyframes drift { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(30px,24px) scale(1.07); } }
.confetti { position:absolute; z-index:0; pointer-events:none; font-size:1.6rem; opacity:.85; animation:twinkle 4s ease-in-out infinite; }
.confetti.c1 { top:12%; left:46%; color:var(--yellow); }
.confetti.c2 { top:68%; left:40%; color:var(--lilac-2); font-size:2.2rem; animation-delay:1s; }
.confetti.c3 { top:20%; right:6%; color:var(--purple); font-size:1.1rem; animation-delay:2s; }
.confetti.c4 { bottom:10%; right:30%; color:var(--yellow); animation-delay:.5s; }
@keyframes twinkle { 0%,100% { transform:scale(.8) rotate(0); opacity:.55; } 50% { transform:scale(1.25) rotate(20deg); opacity:1; } }
.wave { display:block; width:100%; height:60px; }
.wave path { fill:var(--paper); }
.wave.flip { transform:rotate(180deg); }
@media (max-width:820px) { .hero { padding-top:1.25rem; } .hero .wrap { grid-template-columns:1fr; gap:1.25rem; } .stage { max-width:120px; order:-1; } .site-header nav a.cta { order:-1; } }

/* Lint met woorden */
.ribbon { overflow:hidden; background:var(--ribbon); color:#fff; padding:.8rem 0; transform:rotate(-1deg); margin:-1.5rem -2rem 0; }
.ribbon .track { display:flex; gap:2.5rem; width:max-content; animation:scroll 32s linear infinite; font-weight:700; font-size:1.15rem; }
.ribbon span::after { content:"✦"; margin-left:2.5rem; color:var(--yellow); }
@keyframes scroll { to { transform:translateX(-50%); } }

/* Secties */
section.block { padding:3.5rem 0; }
section.paper { background:var(--paper); }
.section-head { text-align:center; max-width:40rem; margin:0 auto 4.2rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:1.3rem; }
.card { background:var(--paper); border:2px solid var(--line); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); transition:transform .25s, border-color .25s; }
.card:hover { transform:translateY(-6px) rotate(-.6deg); border-color:var(--lilac-2); }
.card h2, .card h3 { margin-top:0; }
.card h3 { font-size:1.3rem; }
.card .icon { display:grid; place-items:center; width:62px; height:62px; border-radius:20px; background:var(--lilac); font-size:1.9rem; margin-bottom:.8rem; transition:transform .3s; }
.card:nth-child(2) .icon { background:var(--yellow-soft); }
.card:hover .icon { transform:rotate(-10deg) scale(1.08); }

.day { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:1rem; margin-top:1.5rem; }
.day .step { text-align:center; padding:1rem .6rem; border-radius:var(--radius); background:var(--paper); border:2px solid var(--line); }
.day .step b { display:block; font-size:2rem; line-height:1.3; transition:transform .3s; }
.day .step:hover b { transform:translateY(-4px) scale(1.15); }
.day .step small { color:var(--muted); display:block; }

.about { display:grid; grid-template-columns:1.3fr .7fr; gap:2rem; align-items:start; }
.about .facts { list-style:none; margin:0; padding:1.4rem; border-radius:var(--radius); background:var(--yellow-soft); }
.about .facts li { padding:.45rem 0 .45rem 2rem; position:relative; font-weight:600; }
.about .facts li::before { content:"★"; position:absolute; left:0; color:var(--purple); animation:twinkle 5s ease-in-out infinite; }
.about .facts li:nth-child(2)::before { animation-delay:1s; } .about .facts li:nth-child(3)::before { animation-delay:2s; } .about .facts li:nth-child(4)::before { animation-delay:3s; }
@media (max-width:760px) { .about { grid-template-columns:1fr; } }

.cta-band { margin:1rem 0 3.5rem; background:var(--yellow-soft); border-radius:32px; padding:2.5rem 1.5rem; text-align:center; position:relative; overflow:hidden; }
.cta-band::before, .cta-band::after { content:""; position:absolute; border-radius:50%; background:var(--lilac); opacity:.7; animation:drift 16s ease-in-out infinite; }
.cta-band::before { width:180px; height:180px; left:-50px; top:-60px; }
.cta-band::after { width:130px; height:130px; right:-30px; bottom:-40px; animation-direction:reverse; }
.cta-band > * { position:relative; z-index:1; }

/* Dagritme */
.timeline { list-style:none; margin:2rem 0; padding:0 0 0 1.4rem; position:relative; }
.timeline::before { content:""; position:absolute; left:1.4rem; top:.5rem; bottom:.5rem; width:4px; border-radius:4px; background:linear-gradient(var(--lilac-2), var(--yellow)); }
.timeline li { position:relative; display:grid; grid-template-columns:9.5rem 1fr; gap:1rem; padding:.9rem 1rem .9rem 2.6rem; margin-bottom:.9rem; background:var(--paper); border:2px solid var(--line); border-radius:var(--radius); }
.timeline li::before { content:attr(data-icon); position:absolute; left:-1.1rem; top:50%; transform:translateY(-50%); width:2.6rem; height:2.6rem; display:grid; place-items:center; font-size:1.3rem; background:var(--yellow); border-radius:50%; border:3px solid var(--bg); }
.timeline li:nth-child(even)::before { background:var(--lilac-2); }
.timeline .time { font-weight:800; color:var(--purple-d); font-variant-numeric:tabular-nums; }
@media (max-width:560px) { .timeline li { grid-template-columns:1fr; gap:.2rem; } }

.plain { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; }
.plain li { background:var(--paper); border:2px solid var(--line); border-radius:var(--radius); padding:1rem 1.2rem; }
.plain li:nth-child(odd) { background:var(--lilac-3); }

/* Formulier */
.contact-grid { display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start; }
@media (max-width:820px) { .contact-grid { grid-template-columns:1fr; } }
form label { display:block; font-weight:700; margin-bottom:.2rem; }
form label.inline { display:inline-block; font-weight:500; margin-right:1rem; padding:.55rem 0; }
.optional { font-weight:400; opacity:.75; }
input[type=text], input[type=email], input[type=tel], input[type=date], textarea { width:100%; font:inherit; color:inherit; background:var(--paper); border:2px solid var(--line); border-radius:14px; padding:.65rem .85rem; transition:border-color .2s, box-shadow .2s; }
input:focus, textarea:focus { outline:none; border-color:var(--purple); box-shadow:0 0 0 4px var(--lilac); }
input[type=checkbox] { accent-color:var(--purple); width:1.3rem; height:1.3rem; vertical-align:-.2rem; }
fieldset { border:2px solid var(--line); border-radius:14px; padding:.5rem 1rem .75rem; margin:0 0 1rem; }
legend { font-weight:700; padding:0 .4rem; }
.field-error { display:block; color:var(--err); font-size:.9rem; margin-top:.2rem; }
.notice { border-radius:16px; padding:.9rem 1.1rem; margin:0 0 1.25rem; }
.notice.ok { background:rgba(47,143,91,.12); border:2px solid var(--ok); }
.notice.bad { background:rgba(184,55,44,.1); border:2px solid var(--err); }
.notice ul { margin:.4rem 0 0; padding-left:1.2rem; }
.hp { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
aside.card .icon { background:var(--yellow-soft); }

/* Footer */
.site-footer { background:var(--purple-d); color:#f4eefb; padding:2rem 0 2.2rem; margin-top:0; position:relative; }
@media (prefers-color-scheme: dark) { .site-footer { background:#120d1a; } }
.site-footer a { color:#fff; }
.site-footer p { margin:.2rem 0; }
.site-footer .logo-foot { width:60px; background:#fff; border-radius:16px; padding:6px 8px; }
.site-footer .foot { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem; }
main.page { padding-top:2.5rem; padding-bottom:3.5rem; }

/* Verschijnen bij scrollen (alleen met JavaScript) */
.js .reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity:1; transform:none; }
.js .reveal.d1 { transition-delay:.1s; } .js .reveal.d2 { transition-delay:.2s; } .js .reveal.d3 { transition-delay:.3s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation:none !important; transition:none !important; }
    .js .reveal { opacity:1; transform:none; }
    html { scroll-behavior:auto; }
}

/* ---- Dasjes die tevoorschijn komen ---- */
.peek-host { position:relative; }
.peek { position:absolute; bottom:100%; left:var(--x,50%); width:var(--w,120px); margin-left:calc(var(--w,120px) / -2); height:calc(var(--w,120px) * .6); overflow:hidden; z-index:2; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.peek svg { display:block; width:100%; height:auto; transform:translateY(105%); transition:transform .9s cubic-bezier(.34,1.56,.64,1); }
.peek.up svg { transform:none; }
.peek .eyes { transform-box:fill-box; transform-origin:center; animation:blink 5.5s infinite; }
.peek .ears { transform-box:fill-box; transform-origin:50% 100%; animation:ears 7s ease-in-out infinite; }
.peek .pupil { transition:transform .12s; }
.peek .eyes { transform-box:fill-box; }
@keyframes blink { 0%,93%,100% { transform:scaleY(1); } 96% { transform:scaleY(.08); } }
@keyframes ears { 0%,88%,100% { transform:rotate(0); } 92% { transform:rotate(-4deg); } 96% { transform:rotate(3deg); } }
.cards > .peek-host:nth-child(2) .icon { background:var(--yellow-soft); }
.card:nth-child(2) .icon { background:var(--lilac); }
.cards > .peek-host:nth-child(2) .card .icon { background:var(--yellow-soft); }
.site-footer .peek-host { position:static; }
.site-footer { margin-top:60px; }
.site-footer .peek { bottom:100%; }
.site-footer > .peek { left:78%; }

/* Hero: de muis laat het logo meekijken */
.stage .tilt { transform:perspective(800px) rotateY(calc(var(--mx, 0) * 9deg)) rotateX(calc(var(--my, 0) * -7deg)); transition:transform .25s ease-out; transform-style:preserve-3d; }

/* Scrollgestuurde animaties (nieuwe browsers); oudere browsers slaan dit gewoon over */
@supports (animation-timeline: scroll()) {
    .progress { position:fixed; inset:0 0 auto 0; height:5px; z-index:50; transform-origin:0 50%; background:linear-gradient(90deg, var(--yellow), var(--lilac-2), var(--purple)); animation:grow linear both; animation-timeline:scroll(root block); }
    @keyframes grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
    .blob.b1 { animation:drift 18s ease-in-out infinite, par linear both; animation-timeline:auto, scroll(root block); animation-range:normal, 0 100vh; --pd:-90px; }
    .blob.b2 { animation:drift 22s ease-in-out infinite reverse, par linear both; animation-timeline:auto, scroll(root block); animation-range:normal, 0 100vh; --pd:140px; }
    .confetti { animation:twinkle 4s ease-in-out infinite, par linear both; animation-timeline:auto, scroll(root block); animation-range:normal, 0 100vh; --pd:-160px; }
    .confetti.c2 { --pd:-70px; } .confetti.c3 { --pd:-220px; }
    @keyframes par { to { translate:0 var(--pd, -80px); } }
    .stage { animation:lift linear both; animation-timeline:scroll(root block); animation-range:0 90vh; }
    @keyframes lift { to { translate:0 -50px; rotate:-3deg; } }
    .ribbon .track { animation-play-state:running; }
    .card, .day .step, .timeline li { animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 55%; }
    @keyframes rise { from { opacity:.25; translate:0 36px; scale:.97; } to { opacity:1; translate:0 0; scale:1; } }
    .js .reveal { opacity:1; transform:none; transition:none; }
}
@media (prefers-reduced-motion: reduce) { .progress { display:none; } .peek svg { transform:none; } }

/* Vloeiende overgang tussen pagina's (waar de browser dat kan) */
@view-transition { navigation:auto; }

/* Plekken, werkwijze, veelgestelde vragen, galerij, reviews */
.openings { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem; background:var(--yellow-soft); border-radius:18px; padding:.8rem 1.1rem; margin-top:1.2rem; }
.chip { display:inline-block; padding:.15rem .8rem; border-radius:99px; background:var(--paper); border:2px solid var(--line); font-weight:700; font-size:.92rem; color:var(--muted); }
.chip.on { background:var(--btn); border-color:var(--btn); color:var(--btn-ink); }
.steps { list-style:none; margin:2rem 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1.1rem; counter-reset:s; }
.steps li { display:flex; gap:1rem; background:var(--paper); border:2px solid var(--line); border-radius:var(--radius); padding:1.2rem; }
.steps b { flex:none; display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%; background:var(--yellow); color:#3a2c00; font-size:1.2rem; }
.steps li:nth-child(even) b { background:var(--lilac-2); color:var(--purple-d); }
.steps h3 { margin:.1rem 0 .3rem; font-size:1.15rem; } .steps p { margin:0; overflow-wrap:anywhere; hyphens:auto; }
.faq details { background:var(--paper); border:2px solid var(--line); border-radius:var(--radius); padding:.2rem 1.2rem; margin-bottom:.8rem; transition:border-color .2s, background .2s; }
.faq details[open] { border-color:var(--lilac-2); background:var(--lilac-3); }
.faq summary { cursor:pointer; font-weight:800; padding:.8rem 0; list-style:none; display:flex; justify-content:space-between; gap:1rem; color:var(--purple-d); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:1.5rem; line-height:1; transition:transform .25s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { margin:0 0 1rem; }
.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; }
.gallery figure { margin:0; overflow:hidden; border-radius:var(--radius); aspect-ratio:4/3; background:var(--lilac); box-shadow:var(--shadow); }
.gallery img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.gallery figure:hover img { transform:scale(1.07) rotate(.6deg); }
.reviews { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1.2rem; }
.reviews blockquote { margin:0; background:var(--paper); border:2px solid var(--line); border-radius:var(--radius); padding:1.4rem; position:relative; }
.reviews blockquote::before { content:"“"; position:absolute; top:-.2rem; left:.9rem; font-size:4rem; color:var(--yellow); line-height:1; }
.reviews cite { display:block; margin-top:.6rem; font-style:normal; font-weight:800; color:var(--purple-d); }
/* Easter egg: een klik op een dasje laat de ballon uit het logo omhoog dwarrelen */
.peek.hop svg { animation:hop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes hop { 0% { transform:translateY(0); } 35% { transform:translateY(-10px) rotate(-4deg); } 100% { transform:translateY(0); } }
.fly { position:fixed; left:0; top:0; z-index:60; width:58px; margin:-70px 0 0 -29px; cursor:pointer; will-change:transform; -webkit-tap-highlight-color:transparent; }
.fly svg { display:block; width:100%; height:auto; overflow:visible; filter:drop-shadow(0 6px 8px rgba(50,43,59,.18)); }
.spark { position:fixed; z-index:61; pointer-events:none; font-size:1.2rem; line-height:1; will-change:transform, opacity; }
@media (prefers-reduced-motion: reduce) { .fly, .spark { display:none; } }
/* Donkere modus: lichte ondergrond achter het antraciete dasje, duidelijkere kaarten. */
@media (prefers-color-scheme: dark) {
    .stage::before { background:#fff4dc; }
    .card, .steps li, .faq details, .reviews blockquote, .day .step, .plain li, .timeline li { border-color:var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
    .site-header { background:color-mix(in srgb, var(--bg) 90%, transparent); }
    .about .facts, .openings, .cta-band { color:var(--ink); }
    .hl { color:var(--ink); background:linear-gradient(transparent 62%, rgba(255,210,90,.45) 62%, rgba(255,210,90,.45) 92%, transparent 92%); }
    .blob.b1 { background:#3a3220; } .blob.b2 { background:#2f2342; }
}
/* Ouderapp-pagina: speels, met zwevende telefoons, gekleurde tegels en praatwolkjes */
.ap-hero .wrap { grid-template-columns:1fr 1fr; }
.ap-phones { position:relative; min-height:430px; max-width:430px; width:100%; margin:0 auto; }
.ap-phones::before { content:""; position:absolute; inset:4% 2% 2% 2%; background:var(--lilac); border-radius:46% 54% 50% 50% / 52% 46% 54% 48%; animation:morph 14s ease-in-out infinite; }
.ap-phones .ph { position:absolute; width:46%; height:auto; border:6px solid var(--purple-d); border-radius:28px; background:var(--bg); box-shadow:0 18px 34px rgba(79,53,134,.25); transition:transform .45s cubic-bezier(.3,1.5,.5,1); }
.ap-phones .p1 { left:0; top:14%; transform:rotate(-9deg); animation:apbob 6s ease-in-out infinite; }
.ap-phones .p2 { left:27%; top:0; z-index:2; transform:rotate(2deg); animation:apbob 5s ease-in-out infinite .6s; }
.ap-phones .p3 { right:0; top:20%; transform:rotate(9deg); animation:apbob 7s ease-in-out infinite 1.2s; }
.ap-phones .ph:hover { transform:rotate(0) scale(1.06); z-index:5; animation-play-state:paused; }
@keyframes apbob { 0%,100% { translate:0 0; } 50% { translate:0 -12px; } }
.ap-float { position:absolute; z-index:6; font-size:2rem; animation:apfloat 5s ease-in-out infinite; filter:drop-shadow(0 6px 6px rgba(50,43,59,.18)); pointer-events:none; }
.ap-float.f1 { left:-2%; top:2%; } .ap-float.f2 { right:2%; top:0; animation-delay:1s; } .ap-float.f3 { left:6%; bottom:2%; animation-delay:2s; } .ap-float.f4 { right:8%; bottom:4%; animation-delay:.5s; }
@keyframes apfloat { 0%,100% { transform:translateY(0) rotate(-8deg); } 50% { transform:translateY(-16px) rotate(10deg); } }
.ap-title { text-align:center; font-size:clamp(1.7rem, 4vw, 2.3rem); margin:0 0 1.8rem; }
.ap-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1.3rem; }
.ap-tile { border-radius:28px; padding:1.5rem 1.4rem 1.4rem; position:relative; color:#322b3b; transition:transform .35s cubic-bezier(.3,1.5,.5,1); }
.ap-tile:nth-child(odd) { rotate:-1.2deg; } .ap-tile:nth-child(even) { rotate:1.2deg; }
.ap-tile:hover { transform:translateY(-6px) rotate(-2deg) scale(1.03); }
.ap-tile .em { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.8); font-size:2rem; margin-bottom:.7rem; box-shadow:0 6px 12px rgba(50,43,59,.08); transition:transform .4s; }
.ap-tile:hover .em { transform:rotate(-14deg) scale(1.12); }
.ap-tile h3 { margin:0 0 .3rem; font-size:1.25rem; color:#322b3b; } .ap-tile p { margin:0; }
.t-yellow { background:#fff1c2; } .t-lilac { background:#e8dcfb; } .t-sky { background:#d8ecfb; } .t-peach { background:#ffe0d3; } .t-mint { background:#d9f3e3; }
.ap-split { display:grid; grid-template-columns:.9fr 1.1fr; gap:2.5rem; align-items:center; }
.ap-bubbles { display:flex; flex-direction:column; gap:1rem; }
.bubble { max-width:88%; padding:.9rem 1.2rem; border-radius:24px; box-shadow:var(--shadow); position:relative; line-height:1.4; }
.bubble small { color:var(--muted); }
.b-left { align-self:flex-start; background:var(--lilac); border-bottom-left-radius:6px; color:#322b3b; } .b-left small { color:#5b5068; }
.b-right { align-self:flex-end; background:var(--yellow); color:#3a2c00; border-bottom-right-radius:6px; } .b-right small { color:#5a4600; }
.ap-single { margin:1.2rem 0 0; } .ap-single img { width:200px; max-width:60%; height:auto; border:6px solid var(--purple-d); border-radius:26px; box-shadow:var(--shadow); rotate:2deg; transition:rotate .4s; } .ap-single img:hover { rotate:-1deg; }
.ap-safe { display:flex; gap:1rem; align-items:flex-start; background:var(--butter); border:2px dashed var(--yellow); border-radius:26px; padding:1.2rem 1.4rem; margin-top:2rem; color:#322b3b; }
.ap-safe .em { font-size:2rem; line-height:1; } .ap-safe p { margin:0; } .ap-safe a { color:var(--purple-d); }
@media (max-width:820px) {
  .ap-hero .wrap { grid-template-columns:1fr; }
  .ap-phones { min-height:360px; max-width:340px; margin-top:1rem; }
  .ap-split { grid-template-columns:1fr; gap:1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .ap-phones .ph, .ap-float, .ap-phones::before { animation:none; } .ap-tile, .ap-tile .em { transition:none; } }.ap-hero { padding-bottom:5.5rem; }

/* Het hidden-attribuut moet altijd winnen. */
[hidden] { display:none !important; }