/* ═══════════════════════════════════════════════════════
   BEERTJE WIJZER — Gedeeld ontwerpsysteem "Beertjes Weide"
   Gebruik op alle binnenpagina's voor één samenhangende look.
   ═══════════════════════════════════════════════════════ */
:root{
  --honing:#E8943C; --honing-diep:#C26F1E;
  --bloesem:#F8B8C6; --bloesem-diep:#E27D95;
  --weide:#8BC34A; --weide-diep:#5E9E2E;
  --lucht:#8FD4E8; --lucht-diep:#4FA8C4;
  --teal:#1F8A82; --teal-diep:#136B64;
  --room:#FFF6E9; --room-diep:#FBE9CE;
  --inkt:#4A3826; --inkt-zacht:#7C6A55;
  --schaduw-zacht:0 6px 18px rgba(74,56,38,0.12);
  --schaduw-kaart:0 10px 28px rgba(74,56,38,0.16);
  --rond-s:16px; --rond-m:24px; --rond-l:34px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Nunito',sans-serif;color:var(--inkt);
  background:
    radial-gradient(circle at 20% 8%, rgba(248,184,198,0.4), transparent 38%),
    radial-gradient(circle at 85% 4%, rgba(143,212,232,0.4), transparent 40%),
    linear-gradient(180deg,#FDEFF4 0%,#EAF6FB 30%,#F2FAE6 100%);
  min-height:100vh;overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Baloo 2',cursive;}

/* vlinders */
.vlinders{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.vlinders span{position:absolute;font-size:1.5rem;opacity:0.45;animation:vlieg linear infinite;}
@keyframes vlieg{0%{transform:translate(0,100vh) rotate(0);}100%{transform:translate(40px,-12vh) rotate(20deg);}}

/* lint */
.lint{position:sticky;top:0;z-index:50;background:linear-gradient(135deg,var(--teal),var(--teal-diep));
  box-shadow:0 4px 14px rgba(19,107,100,0.3);display:flex;align-items:center;gap:12px;padding:10px 16px;}
.lint-terug{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.2);color:#fff;
  border:2px solid rgba(255,255,255,0.4);border-radius:50px;padding:7px 16px;font-family:'Baloo 2';
  font-weight:800;font-size:0.85rem;text-decoration:none;transition:background .15s;}
.lint-terug:hover{background:rgba(255,255,255,0.32);}
.lint-titel{color:#fff;font-family:'Baloo 2';font-weight:800;font-size:1.05rem;text-shadow:0 2px 4px rgba(0,0,0,0.15);}

.wrap{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:18px 16px 60px;}

/* intro-kaart */
.intro-kaart{background:#fff;border-radius:var(--rond-l);padding:20px 22px;text-align:center;
  box-shadow:var(--schaduw-zacht);margin-bottom:22px;}
.intro-kaart h1{font-size:clamp(1.3rem,4vw,1.7rem);color:var(--teal);margin-bottom:6px;}
.intro-kaart p{color:var(--inkt-zacht);font-weight:700;font-size:0.95rem;line-height:1.45;max-width:520px;margin:0 auto;}

/* knoppen */
.knop{display:inline-flex;align-items:center;gap:8px;font-family:'Baloo 2';font-weight:800;font-size:1rem;
  border:none;cursor:pointer;text-decoration:none;padding:13px 24px;border-radius:50px;transition:transform .15s;}
.knop:hover{transform:translateY(-3px);}
.knop-honing{background:linear-gradient(180deg,#F6A94E,var(--honing));color:#fff;box-shadow:0 5px 0 var(--honing-diep);}
.knop-teal{background:linear-gradient(180deg,#2BA59C,var(--teal));color:#fff;box-shadow:0 5px 0 var(--teal-diep);}
.knop-rood{background:linear-gradient(180deg,#EE4B4B,#E23232);color:#fff;box-shadow:0 5px 0 #a81f1f;}

@media(prefers-reduced-motion:reduce){.vlinders span{display:none;}*{scroll-behavior:auto;}}

/* ─── Badges (gedeeld, netjes) ─── */
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px;}
.badge{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;color:var(--inkt);
  border:2px solid rgba(31,138,130,0.15);
  border-radius:50px;padding:9px 18px;
  font-family:'Nunito';font-weight:800;font-size:0.85rem;
  box-shadow:0 3px 10px rgba(74,56,38,0.08);
  white-space:nowrap;
}