/* ===========================================================
   Kinderdagverblijf De Vlindertuin – hoofdstijl
   Vrolijk, kleurrijk en kindvriendelijk
   =========================================================== */

:root {
  --groen:   #5bb85c;
  --groen-d: #3d8c3e;
  --geel:    #ffc94d;
  --geel-d:  #f5a623;
  --roze:    #ff6fae;
  --roze-d:  #e84d92;
  --blauw:   #4fb3e8;
  --blauw-d: #2f93c9;
  --paars:   #9b6fd4;
  --oranje:  #ff8a3d;
  --crème:   #fff8ec;
  --donker:  #3a3a4a;
  --grijs:   #6c6c7a;
  --wit:     #ffffff;
  --schaduw: 0 10px 30px rgba(58, 58, 74, .12);
  --schaduw-s: 0 4px 14px rgba(58, 58, 74, .10);
  --radius:  22px;
  --radius-s: 14px;
  --max:     1180px;
  --font:    'Baloo 2', 'Comic Sans MS', 'Segoe UI', sans-serif;
  --font-body: 'Nunito', 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--donker);
  background: var(--crème);
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font); line-height: 1.2; color: var(--donker); }

a { text-decoration: none; color: inherit; }

img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 22px; }

section { padding: 70px 0; position: relative; }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font); font-weight: 600; font-size: 1.05rem;
  padding: 14px 28px; border-radius: 50px; border: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: var(--schaduw-s);
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--schaduw); }
.btn-roze   { background: var(--roze); color: #fff; }
.btn-groen  { background: var(--groen); color: #fff; }
.btn-geel   { background: var(--geel); color: var(--donker); }
.btn-blauw  { background: var(--blauw); color: #fff; }
.btn-wit    { background: #fff; color: var(--donker); }
.btn-outline{ background: transparent; border: 3px solid #fff; color: #fff; box-shadow: none; }

/* ---------- Header / navigatie ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(58, 58, 74, .08);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo img { width: 52px; height: 52px; }
.logo-tekst { font-family: var(--font); font-weight: 700; font-size: 1.35rem; color: var(--groen-d); line-height: 1; }
.logo-tekst span { display: block; font-size: .72rem; font-weight: 600; color: var(--roze); letter-spacing: 1px; }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a {
  font-family: var(--font); font-weight: 500; font-size: 1rem;
  padding: 9px 15px; border-radius: 50px; transition: background .2s, color .2s;
  color: var(--donker);
}
.nav-links a:hover, .nav-links a.active { background: var(--geel); color: var(--donker); }
.nav-links .btn { color: #fff; padding: 10px 20px; }
.nav-links .btn:hover { background: var(--roze-d); }

/* Dropdown */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: 100%; left: 0; list-style: none; background: #fff;
  border-radius: 14px; box-shadow: var(--schaduw); padding: 8px; min-width: 216px;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s; z-index: 60;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: block; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 28px; height: 3px; background: var(--donker); border-radius: 3px; margin: 5px 0; transition: .3s; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, #d6f0ff 0%, #fff3da 55%, #ffe3f1 100%);
  padding: 80px 0 120px; overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero h1 { font-size: 3.2rem; margin-bottom: 18px; }
.hero h1 .accent { color: var(--roze); }
.hero p.lead { font-size: 1.25rem; color: var(--grijs); margin-bottom: 28px; max-width: 520px; }
.hero-knoppen { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-art img { width: 100%; max-width: 520px; margin: 0 auto; }
.hero-badges { display: flex; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
.hero-badge { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--donker); }
.hero-badge .dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; }

/* Golf onderaan secties */
.wave { position: absolute; left: 0; width: 100%; line-height: 0; }
.wave.top { top: -1px; }
.wave.bottom { bottom: -1px; }

/* ---------- Sectiekop ---------- */
.sectiekop { text-align: center; max-width: 680px; margin: 0 auto 50px; }
.sectiekop .pill {
  display: inline-block; font-family: var(--font); font-weight: 600;
  background: var(--geel); color: var(--donker); padding: 6px 18px;
  border-radius: 50px; font-size: .9rem; margin-bottom: 14px;
}
.sectiekop h2 { font-size: 2.4rem; margin-bottom: 12px; }
.sectiekop p { color: var(--grijs); font-size: 1.1rem; }

/* ---------- Kaarten ---------- */
.kaart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.kaart {
  background: #fff; border-radius: var(--radius); padding: 32px 26px;
  box-shadow: var(--schaduw-s); transition: transform .25s, box-shadow .25s;
  border-bottom: 6px solid transparent;
}
.kaart:hover { transform: translateY(-8px); box-shadow: var(--schaduw); }
.kaart .icoon { width: 70px; height: 70px; border-radius: 20px; display: grid; place-items: center; font-size: 2rem; margin-bottom: 18px; }
.kaart h3 { font-size: 1.4rem; margin-bottom: 10px; }
.kaart p { color: var(--grijs); }
.b-groen { border-color: var(--groen); } .bg-groen { background: #e3f6e3; }
.b-roze  { border-color: var(--roze);  } .bg-roze  { background: #ffe3f0; }
.b-blauw { border-color: var(--blauw); } .bg-blauw { background: #def0fb; }
.b-geel  { border-color: var(--geel-d);} .bg-geel  { background: #fff1d4; }
.b-paars { border-color: var(--paars); } .bg-paars { background: #efe4fb; }
.b-oranje{ border-color: var(--oranje);} .bg-oranje{ background: #ffe7d6; }

/* ---------- Groepskaarten ---------- */
.groep-kaart { background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--schaduw-s); transition: transform .25s; }
.groep-kaart:hover { transform: translateY(-8px); box-shadow: var(--schaduw); }
.groep-kaart .top { padding: 30px; color:#fff; }
.groep-kaart .top h3 { color:#fff; font-size:1.6rem; }
.groep-kaart .top .leeftijd { font-weight:700; opacity:.95; }
.groep-kaart .body { padding: 24px 30px 30px; }
.groep-kaart ul { list-style:none; margin-top:10px; }
.groep-kaart li { padding: 6px 0 6px 28px; position:relative; color: var(--grijs); }
.groep-kaart li::before { content:"🦋"; position:absolute; left:0; }

/* ---------- Split blok ---------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap:50px; align-items:center; }
.split.omgekeerd .split-tekst { order: 2; }
.split-art img { border-radius: var(--radius); box-shadow: var(--schaduw); }
.split-tekst h2 { font-size:2.1rem; margin-bottom:16px; }
.split-tekst p { color: var(--grijs); margin-bottom:14px; }
.lijst { list-style:none; margin:18px 0; }
.lijst li { padding:8px 0 8px 36px; position:relative; font-weight:600; }
.lijst li::before { content:"✓"; position:absolute; left:0; width:24px; height:24px; background:var(--groen); color:#fff; border-radius:50%; display:grid; place-items:center; font-size:.8rem; }

/* ---------- Galerij ---------- */
.galerij-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:18px; }
.galerij-item { border-radius: var(--radius-s); overflow:hidden; box-shadow: var(--schaduw-s); aspect-ratio: 4/3; transition: transform .25s; }
.galerij-item:hover { transform: scale(1.03) rotate(-1deg); }
.galerij-item img { width:100%; height:100%; object-fit: cover; }

/* ---------- Tarieven ---------- */
.prijs-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:28px; align-items:stretch; }
.prijs-kaart { background:#fff; border-radius: var(--radius); padding:36px 30px; box-shadow: var(--schaduw-s); text-align:center; position:relative; border-top: 8px solid var(--groen); }
.prijs-kaart.populair { border-top-color: var(--roze); transform: scale(1.04); }
.prijs-kaart .label { position:absolute; top:-15px; left:50%; transform:translateX(-50%); background:var(--roze); color:#fff; font-family:var(--font); padding:5px 18px; border-radius:50px; font-size:.85rem; }
.prijs-kaart h3 { font-size:1.5rem; margin-bottom:6px; }
.prijs-kaart .prijs { font-family:var(--font); font-size:2.6rem; color:var(--groen-d); margin:14px 0 4px; }
.prijs-kaart .prijs small { font-size:1rem; color:var(--grijs); font-weight:600; }
.prijs-kaart ul { list-style:none; text-align:left; margin:22px 0; }
.prijs-kaart li { padding:8px 0 8px 30px; position:relative; color:var(--grijs); }
.prijs-kaart li::before { content:"✓"; position:absolute; left:0; color:var(--groen); font-weight:800; }

.info-blok { background:#fff; border-radius:var(--radius); padding:34px; box-shadow:var(--schaduw-s); }
.info-blok h3 { margin-bottom:10px; }

/* ---------- Tabel ---------- */
.tabel { width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--schaduw-s); }
.tabel th, .tabel td { padding:16px 20px; text-align:left; }
.tabel thead { background:var(--groen); color:#fff; font-family:var(--font); }
.tabel tbody tr:nth-child(even) { background:#f6fbf6; }
.tabel tbody tr { border-bottom:1px solid #eee; }

/* ---------- Stappen ---------- */
.stappen { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:24px; counter-reset:stap; }
.stap { background:#fff; border-radius:var(--radius); padding:30px 24px; box-shadow:var(--schaduw-s); position:relative; }
.stap .nr { width:48px; height:48px; border-radius:50%; background:var(--blauw); color:#fff; font-family:var(--font); font-size:1.4rem; display:grid; place-items:center; margin-bottom:16px; }
.stap:nth-child(2) .nr { background:var(--roze); }
.stap:nth-child(3) .nr { background:var(--geel-d); }
.stap:nth-child(4) .nr { background:var(--paars); }

/* ---------- Quote / testimonials ---------- */
.quotes { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px; }
.quote { background:#fff; border-radius:var(--radius); padding:30px; box-shadow:var(--schaduw-s); }
.quote .sterren { color:var(--geel-d); font-size:1.2rem; margin-bottom:10px; }
.quote p { font-style:italic; color:var(--donker); margin-bottom:16px; }
.quote .wie { display:flex; align-items:center; gap:12px; font-weight:700; }
.quote .avatar { width:44px; height:44px; border-radius:50%; background:var(--blauw); color:#fff; display:grid; place-items:center; font-family:var(--font); }

/* ---------- CTA-band ---------- */
.cta-band { background: linear-gradient(120deg, var(--roze), var(--paars)); color:#fff; text-align:center; border-radius:var(--radius); padding:56px 30px; box-shadow:var(--schaduw); }
.cta-band h2 { color:#fff; font-size:2.3rem; margin-bottom:12px; }
.cta-band p { font-size:1.15rem; opacity:.95; margin-bottom:26px; }

/* ---------- Pagina-kop (subpagina's) ---------- */
.pagina-kop { background: linear-gradient(160deg,#fff3da, #ffe3f1); padding:60px 0 70px; text-align:center; position:relative; }
.pagina-kop h1 { font-size:2.8rem; margin-bottom:10px; }
.pagina-kop p { color:var(--grijs); font-size:1.15rem; max-width:620px; margin:0 auto; }
.kruimel { font-weight:600; color:var(--grijs); margin-bottom:14px; font-size:.95rem; }
.kruimel a:hover { color:var(--roze); }

/* ---------- Formulier ---------- */
.form-card { background:#fff; border-radius:var(--radius); padding:38px; box-shadow:var(--schaduw); }
.form-rij { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.veld { margin-bottom:18px; }
.veld label { display:block; font-weight:700; margin-bottom:6px; font-family:var(--font); }
.veld input, .veld select, .veld textarea {
  width:100%; padding:13px 16px; border:2px solid #e7e7ef; border-radius:var(--radius-s);
  font-family:var(--font-body); font-size:1rem; transition:border .2s; background:#fdfdff;
}
.veld input:focus, .veld select:focus, .veld textarea:focus { outline:none; border-color:var(--roze); }
.veld textarea { min-height:130px; resize:vertical; }
.form-melding { background:#e3f6e3; color:var(--groen-d); padding:16px; border-radius:var(--radius-s); margin-top:18px; font-weight:700; display:none; }

/* ---------- Contact ---------- */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap:40px; }
.contact-info .regel { display:flex; gap:16px; align-items:flex-start; margin-bottom:22px; }
.contact-info .regel .ic { width:50px; height:50px; flex:none; border-radius:14px; display:grid; place-items:center; font-size:1.4rem; }
.contact-info h4 { margin-bottom:2px; }
.contact-info p { color:var(--grijs); }
.map-box { border-radius:var(--radius); overflow:hidden; box-shadow:var(--schaduw-s); }
.map-box iframe { width:100%; height:320px; border:0; display:block; }

/* ---------- Openingstijden ---------- */
.openingstijden { list-style:none; }
.openingstijden li { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed #e0e0e8; }
.openingstijden li span:last-child { font-weight:700; }

/* ---------- FAQ ---------- */
.faq-item { background:#fff; border-radius:var(--radius-s); margin-bottom:14px; box-shadow:var(--schaduw-s); overflow:hidden; }
.faq-vraag { width:100%; text-align:left; background:none; border:none; padding:20px 24px; font-family:var(--font); font-weight:600; font-size:1.1rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; color:var(--donker); }
.faq-vraag .plus { color:var(--roze); font-size:1.6rem; transition:transform .3s; }
.faq-item.open .faq-vraag .plus { transform:rotate(45deg); }
.faq-antwoord { max-height:0; overflow:hidden; transition:max-height .35s ease; padding:0 24px; color:var(--grijs); }
.faq-item.open .faq-antwoord { padding:0 24px 22px; }

/* ---------- Team ---------- */
.team-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px; }
.team-kaart { background:#fff; border-radius:var(--radius); padding:26px; text-align:center; box-shadow:var(--schaduw-s); transition:transform .25s; }
.team-kaart:hover { transform:translateY(-6px); box-shadow:var(--schaduw); }
.team-kaart img { width:120px; height:120px; margin:0 auto 16px; border-radius:50%; background:#f0f0f5; }
.team-kaart h4 { margin-bottom:2px; }
.team-kaart .rol { color:var(--roze); font-weight:700; }

/* ---------- Footer ---------- */
.footer { background:var(--donker); color:#d9d9e2; padding:60px 0 26px; position:relative; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:34px; }
.footer h4 { color:#fff; margin-bottom:16px; font-size:1.15rem; }
.footer a { color:#d9d9e2; }
.footer a:hover { color:var(--geel); }
.footer ul { list-style:none; }
.footer ul li { padding:5px 0; }
.footer .merk { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.footer .merk img { width:46px; }
.footer .merk b { font-family:var(--font); color:#fff; font-size:1.2rem; }
.footer p { color:#a9a9b8; }
.socials { display:flex; gap:12px; margin-top:14px; }
.socials a { width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; font-size:1.1rem; transition:background .2s, transform .2s; }
.socials a:hover { background:var(--roze); transform:translateY(-3px); }
.footer-onder { border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:22px; text-align:center; font-size:.9rem; color:#a9a9b8; }

/* ---------- Drijvende decoraties ---------- */
.deco { position:absolute; pointer-events:none; opacity:.8; z-index:1; }
.float { animation: zweef 6s ease-in-out infinite; }
@keyframes zweef { 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-18px) rotate(8deg); } }

/* ---------- Animatie bij scrollen ---------- */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease; }
.reveal.zichtbaar { opacity:1; transform:none; }

/* ---------- Responsief ---------- */
@media (max-width: 900px) {
  .hero-grid, .split, .contact-grid, .form-rij { grid-template-columns:1fr; }
  .split.omgekeerd .split-tekst { order:0; }
  .hero h1 { font-size:2.5rem; }
  .hero-art { order:-1; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .nav-toggle { display:block; }
  .nav-links {
    position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:6px;
    background:#fff; padding:18px; box-shadow:var(--schaduw); align-items:stretch;
    max-height:0; overflow:hidden; transition:max-height .35s ease; padding-top:0; padding-bottom:0;
  }
  .nav-links.open { max-height:720px; padding:18px; }
  .nav-links a { text-align:center; }
  .has-dropdown .dropdown { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; padding:4px 0 8px; min-width:0; background:transparent; }
  .has-dropdown .dropdown a { font-size:.92rem; color:var(--grijs); }
  .prijs-kaart.populair { transform:none; }
}
@media (max-width: 540px) {
  section { padding:48px 0; }
  .hero h1 { font-size:2.1rem; }
  .sectiekop h2 { font-size:1.9rem; }
  .footer-grid { grid-template-columns:1fr; }
  .cta-band h2 { font-size:1.7rem; }
}