/* Dierenambulance Waterland — publieke website
   Hoofdkleur groen, steunkleur logo-rood, veel wit/licht. */
:root{
  --green:#1b8f4d; --green-dark:#136a3a; --green-700:#157a42;
  --green-light:#eaf7ef; --green-soft:#f4fbf7;
  --red:#e23a2e; --red-dark:#c12c22;
  --ink:#16241d; --muted:#5b6b62; --line:#e4ece7;
  --bg:#ffffff; --bg-soft:#f6faf7;
  --shadow:0 6px 24px rgba(19,106,58,.08); --shadow-lg:0 18px 50px rgba(19,106,58,.14);
  --radius:16px; --radius-sm:10px; --maxw:1480px;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --head:'Poppins',var(--font);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--green-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--head);line-height:1.18;margin:0 0 .5em;color:var(--ink);font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4vw,3.1rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.2rem)}
h3{font-size:1.25rem}
p{margin:0 0 1rem}
.container{max-width:var(--maxw);margin:0 auto;padding:0 30px}
.section{padding:72px 0}
.section--soft{background:var(--bg-soft)}
.section--green{background:var(--green-light)}
.center{text-align:center}
.lead{font-size:1.15rem;color:var(--muted);max-width:680px}
.center .lead{margin-left:auto;margin-right:auto}
.eyebrow{display:inline-block;font-family:var(--head);font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green);background:var(--green-light);padding:6px 14px;border-radius:999px;margin-bottom:14px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--head);font-weight:600;font-size:1rem;padding:13px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:.18s;text-decoration:none;line-height:1}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--primary{background:var(--green);color:#fff}
.btn--primary:hover{background:var(--green-dark);color:#fff;box-shadow:var(--shadow)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-dark);color:#fff;box-shadow:var(--shadow)}
.btn--ghost{background:#fff;color:var(--green-dark);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--green);color:var(--green-dark)}
.btn--light{background:#fff;color:var(--green-dark)}
.btn--light:hover{background:#f0f0f0;color:var(--green-dark)}
.btn--lg{padding:16px 32px;font-size:1.05rem}
.btn--block{display:flex;width:100%;justify-content:center}

/* Top emergency bar */
.topbar{background:linear-gradient(90deg,var(--green),var(--green-dark));color:#fff;font-size:.94rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:13px;padding-bottom:13px;flex-wrap:wrap}
.topbar a{color:#fff;font-weight:600}
.topbar .emergency{display:inline-flex;align-items:center;gap:8px}
.topbar .emergency b{background:var(--red);padding:3px 12px;border-radius:999px}

/* Header / nav */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 30px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--head);font-weight:700;font-size:1.15rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .logo{width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:1.5rem;box-shadow:var(--shadow)}
.brand small{display:block;font-size:.72rem;font-weight:500;color:var(--muted);letter-spacing:.02em}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{font-family:var(--head);font-weight:500;color:var(--ink);padding:9px 14px;border-radius:10px;font-size:.97rem}
.nav-links a:hover{background:var(--green-light);color:var(--green-dark);text-decoration:none}
.nav-links a.active{color:var(--green-dark);background:var(--green-light)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;font-size:1.6rem;color:var(--green-dark)}

/* Hero */
.hero{position:relative;background:linear-gradient(135deg,var(--green-soft),#fff 60%);overflow:hidden}
.hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:70px;padding-bottom:70px}
.hero__img{border-radius:24px;box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--green-light)}
.hero h1 span{color:var(--green)}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero .phone-pill{display:inline-flex;align-items:center;gap:13px;margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 26px 10px 10px;box-shadow:var(--shadow);font-weight:600;max-width:100%}
.hero .phone-pill .ico{background:var(--red);color:#fff;width:40px;height:40px;min-width:40px;border-radius:50%;display:grid;place-items:center;font-size:1.1rem}

/* Cards / grids */
.grid{display:grid;gap:24px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);transition:.18s}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.card .ico{width:54px;height:54px;border-radius:14px;background:var(--green-light);color:var(--green-dark);display:grid;place-items:center;font-size:1.6rem;margin-bottom:14px}

/* Stat counters */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{background:#fff;border-radius:var(--radius);padding:30px 20px;text-align:center;box-shadow:var(--shadow);border:1px solid var(--line)}
.stat .num{font-family:var(--head);font-weight:800;font-size:2.6rem;color:var(--green);line-height:1}
.stat .lbl{color:var(--muted);margin-top:8px;font-size:.95rem}

/* CTA split blocks */
.split{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.cta-card{border-radius:var(--radius);padding:38px;color:#fff;box-shadow:var(--shadow-lg)}
.cta-card--green{background:linear-gradient(135deg,var(--green),var(--green-dark))}
.cta-card--red{background:linear-gradient(135deg,var(--red),var(--red-dark))}
.cta-card h3{color:#fff;font-size:1.5rem}
.cta-card p{color:rgba(255,255,255,.92)}

/* Sponsor slider */
.slider{overflow:hidden;position:relative;padding:10px 0}
.slider__track{display:flex;gap:30px;align-items:center;width:max-content;animation:scroll 32s linear infinite}
.slider:hover .slider__track{animation-play-state:paused}
.slider__item{flex:0 0 auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 30px;box-shadow:var(--shadow);display:grid;place-items:center;min-width:180px;height:110px}
.slider__item img{max-height:64px;width:auto;object-fit:contain}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Animal cards */
.animal-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.18s}
.animal-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.animal-card .photo{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--green-light)}
.animal-card .body{padding:18px}
.animal-card .tag{display:inline-block;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:4px 10px;border-radius:999px}
.tag--vermist{background:#fde8e6;color:var(--red-dark)}
.tag--gevonden{background:var(--green-light);color:var(--green-dark)}
.meta{color:var(--muted);font-size:.9rem}

/* Forms */
.form-row{margin-bottom:16px}
.form-row label{display:block;font-weight:600;margin-bottom:6px;font-size:.95rem}
.input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;background:#fff;transition:.15s}
.input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-light)}
textarea{min-height:120px;resize:vertical}
.help{color:var(--muted);font-size:.86rem;margin-top:4px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.amount-options{display:flex;gap:10px;flex-wrap:wrap}
.amount-options label{cursor:pointer;border:2px solid var(--line);border-radius:12px;padding:12px 20px;font-weight:700;font-family:var(--head)}
.amount-options input{position:absolute;opacity:0}
.amount-options input:checked+span,.amount-options label.sel{color:var(--green-dark)}
.amount-options label:has(input:checked){border-color:var(--green);background:var(--green-light);color:var(--green-dark)}

/* Alerts */
.alert{padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:18px;border:1px solid}
.alert--ok{background:var(--green-light);border-color:#bbe9cd;color:var(--green-dark)}
.alert--err{background:#fde8e6;border-color:#f6c5c0;color:var(--red-dark)}
.alert--info{background:#eef6ff;border-color:#cfe4fb;color:#1d4ed8}

/* Footer */
.site-footer{background:var(--ink);color:#cdd8d1;padding:60px 0 26px;margin-top:40px}
.site-footer a{color:#cdd8d1}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:14px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:20px;text-align:center;font-size:.86rem;color:#90a097}
.footer-badges{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.footer-badges span{background:rgba(255,255,255,.1);padding:6px 12px;border-radius:8px;font-size:.8rem}

/* Page header */
.page-head{background:linear-gradient(135deg,var(--green-soft),#fff);padding:54px 0;border-bottom:1px solid var(--line)}
.breadcrumb{color:var(--muted);font-size:.9rem;margin-bottom:8px}

.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.toolbar .input{max-width:280px}
.spacer{flex:1}

/* Responsive */
@media(max-width:960px){
  .hero .container{grid-template-columns:1fr;padding-top:48px}
  .hero__img{order:-1;aspect-ratio:16/10}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-links,.topbar .hide-sm{display:none}
  .nav-toggle{display:block}
  .nav-links.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:14px;gap:4px;box-shadow:var(--shadow)}
  .nav-links.open a{width:100%}
}
@media(max-width:560px){
  .section{padding:48px 0}
  .grid--4,.grid--3,.grid--2,.stats,.form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  h1{font-size:2rem}
}

/* ============================================================
   Revisie: echte logo's, foto's en verbeterd menu
   ============================================================ */
.brand{gap:12px}
.brand-logo{width:60px;height:60px;object-fit:contain;border-radius:13px;background:#fff;padding:4px;box-shadow:var(--shadow)}
.brand-text{font-family:var(--head);font-weight:700;font-size:1.22rem;line-height:1.05;color:var(--ink);display:flex;flex-direction:column}
.brand-text small{font-size:.8rem;font-weight:500;color:var(--muted);letter-spacing:.06em;margin-top:2px}
.nav-links a{white-space:nowrap}
.nav-donate{margin-left:6px}

/* Hamburger met ruime tap-zone */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:48px;height:48px;padding:11px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.nav-toggle span{display:block;height:3px;width:100%;background:var(--green-dark);border-radius:3px;transition:.2s}
.nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav-donate-mobile{display:none}

/* Footer brand */
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-family:var(--head);font-weight:700;color:#fff;font-size:1.05rem}
.footer-brand .brand-logo{width:44px;height:44px}

/* Hero foto wat steviger neerzetten */
.hero__img{object-position:center}

/* Fotoband (foto naast gekleurd tekstvlak) */
.photoband{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg)}
.photoband__img{min-height:360px;object-fit:cover;width:100%;height:100%}
.photoband__text{padding:46px;display:flex;flex-direction:column;justify-content:center}
.photoband__text--green{background:var(--green);color:#fff}
.photoband__text--ink{background:var(--ink);color:#fff}
.photoband__text h2{color:#fff}
.photoband__text p{color:rgba(255,255,255,.92)}

/* Teamfoto */
.team-photo{width:100%;border-radius:24px;box-shadow:var(--shadow-lg);object-fit:cover;aspect-ratio:16/10}

/* Grotere, proportionele placeholder-iconen (ook mobiel) */
.photo.ph{display:grid;place-items:center;background:var(--green-light);font-size:clamp(3rem,9vw,4.5rem)}

@media(max-width:960px){
  .nav{position:relative}
  .nav-toggle{display:flex}
  .nav-donate{display:none}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;background:#fff;border-radius:0 0 16px 16px;border-bottom:1px solid var(--line);padding:12px 14px 18px;gap:4px;box-shadow:var(--shadow-lg);z-index:60}
  .nav-links.open a{width:100%;padding:15px 16px;font-size:1.1rem;border-radius:12px}
  .nav-donate-mobile{display:block;margin-top:10px}
  .photoband{grid-template-columns:1fr}
  .photoband__img{min-height:240px}
  .photoband__text{padding:32px}
}

/* Mobiele bovenbalk + algemeen-nummer netter uitlijnen */
@media(max-width:960px){
  .topbar .container{justify-content:center;text-align:center;gap:6px;padding-top:11px;padding-bottom:11px}
  .topbar .emergency{flex-wrap:wrap;justify-content:center;gap:6px;font-size:.85rem}
  .hero .phone-pill{max-width:100%;flex-wrap:wrap;justify-content:center;text-align:center;row-gap:4px}
}
@media(max-width:560px){
  .topbar{font-size:.82rem}
  .topbar .emergency b{padding:3px 10px}
}


/* ===== Mobiele navigatie - autoritatief (lost cache/conflict op) ===== */
@media(max-width:960px){
  .nav{position:relative;gap:10px;padding:10px 16px}
  .nav-toggle{display:flex !important;font-size:0}
  .nav-donate{display:none !important}
  .nav-links{display:none}
  .nav-links.open{display:flex !important;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;border-radius:0 0 16px 16px;border-top:1px solid var(--line);padding:12px 14px 18px;gap:4px;box-shadow:var(--shadow-lg);z-index:60}
  .nav-links.open a{width:100%;padding:15px 16px;font-size:1.1rem;border-radius:12px}
  .nav-donate-mobile{display:block;margin-top:10px}
  .brand-logo{width:66px;height:66px}
  .brand-text{font-size:1.08rem}
}
@media(max-width:480px){
  .brand-logo{width:60px;height:60px;border-radius:13px}
  .brand-text{font-size:1rem}
  .brand-text small{font-size:.66rem;margin-top:1px}
  .topbar .container{font-size:.78rem}
}

/* Losse afbeeldingen krijgen standaard ronde hoeken (consistent met de stijl) */
main img{border-radius:14px}
.brand-logo,.footer-brand img{border-radius:13px}
.photoband__img{border-radius:0}            /* vult de band, blijft strak */
.animal-card .photo{border-radius:0}        /* kaart rondt zelf de bovenhoeken af */
.slider__item img{border-radius:6px}

/* ===== Full-screen mobiel schuif-menu ===== */
.mobile-menu{display:none}
.mobile-menu__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mobile-menu__close{width:48px;height:48px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:1.7rem;line-height:1;color:var(--green-dark);cursor:pointer;display:grid;place-items:center}
.mobile-menu__links{display:flex;flex-direction:column}
.mobile-menu__links a{padding:16px 4px;font-family:var(--head);font-weight:600;font-size:1.25rem;color:var(--ink);border-bottom:1px solid var(--line);text-decoration:none}
.mobile-menu__links a.active{color:var(--green-dark)}
.mobile-menu__cta{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.mobile-menu__cta .btn{justify-content:center;font-size:1.06rem;padding:16px 20px;border-radius:14px}
.mobile-menu__contact{margin-top:20px;color:var(--muted);font-size:.95rem;text-align:center}
.mobile-menu__contact a{color:var(--green-dark);font-weight:600}
@media(max-width:960px){
  .nav-toggle{display:flex !important}
  .nav-donate{display:none !important}
  .nav-links{display:none !important}
  .mobile-menu{display:flex;flex-direction:column;position:fixed;inset:0;background:#fff;z-index:300;
    padding:16px 22px 30px;overflow-y:auto;transform:translateX(100%);transition:transform .26s ease;visibility:hidden}
  .mobile-menu.open{transform:none;visibility:visible}
}

/* Footer: inlogknop voor medewerkers */
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footer-login{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.25);color:#fff !important;padding:9px 16px;border-radius:999px;font-size:.88rem;font-weight:600;text-decoration:none}
.footer-login:hover{background:rgba(255,255,255,.12);text-decoration:none}

/* Mobiel: kaart-afbeeldingen in betere verhouding + grotere placeholder */
@media(max-width:620px){
  .animal-card .photo{aspect-ratio:16/9}
  .photo.ph{font-size:clamp(4rem,20vw,6rem)}
}

/* ============================================================
   RESTYLE 2026 — speelser, twee tinten groen + zacht geel accent
   Rood uitsluitend nog voor spoed. (Latere regels winnen.)
   ============================================================ */
:root{
  /* Fris & luchtig: wit/lichtgrijs als basis, fris groen als accent.
     Geen geel/crème meer als achtergrond. */
  --green:#33a45a;            /* hoofd-groen: fris, helder (grasgroen) */
  --green-dark:#1f7d45;       /* dieper groen, ZELFDE grasgroene hue (tekst/accent/footer) */
  --green-700:#2a8f4d;
  --green-light:#e7f5ec;      /* zeer licht groen (pills/badges) */
  --green-soft:#f3faf5;       /* bijna wit met groenzweem */
  --green-2:#5fc98a;          /* fris licht-groen accent */
  --green-2-dark:#3fae70; --green-2-light:#e4f6ec;
  --glow:rgba(51,164,90,.16); /* transparante groene gloed */
  --cream:#eef3f0; --cream-soft:#f6f9f7;   /* neutraal lichtgrijs-groen (geen geel) */
  --mist:#eceeed;                          /* licht grijs */
  --sun:#dff0e6; --sun-dark:#cfe8db; --sun-soft:#eef3f0; --sun-ink:#15764e; /* geneutraliseerd naar groen */
  --red:#e2513e; --red-dark:#c93c2b;       /* alleen spoed */
  --ink:#173a2c; --muted:#5f6f66; --line:#e7ece9;
  --footer:#1f7d45;                        /* footer = zelfde grasgroene dark als de rest */
  --bg:#ffffff; --bg-soft:#f5f8f6;
  --shadow:0 6px 22px rgba(16,93,74,.06);
  --shadow-lg:0 22px 55px rgba(16,93,74,.13);
}

/* Knoppen: geel accent + donker */
.btn--accent{background:var(--sun);color:var(--sun-ink)}
.btn--accent:hover{background:var(--sun-dark);color:var(--sun-ink);box-shadow:var(--shadow)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#0d1712;color:#fff}

/* Frisse bovenbalk */
.topbar{background:linear-gradient(90deg,var(--green-dark),var(--green),var(--green-2-dark))}

/* ---- HERO met wisselende fotobanner ---- */
.hero2{position:relative;min-height:clamp(500px,72vh,680px);display:flex;align-items:center;overflow:hidden;background:var(--green-dark)}
.hero2__bg{position:absolute;inset:0}
.hero2__slide{position:absolute;inset:0;background-size:cover;background-position:center 30%;opacity:0;transition:opacity 1.2s ease}
.hero2__slide.is-active{opacity:1}
.hero2::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(9,38,23,.86),rgba(9,38,23,.42) 55%,rgba(9,38,23,.05))}
.hero2__overlay{position:relative;z-index:2;width:100%;padding:40px 0}
.hero2__card{max-width:640px;color:#fff}
.hero2__card .eyebrow{background:rgba(255,255,255,.2);color:#fff}
.hero2__card h1{color:#fff}
.hero2__card h1 span{color:var(--sun)}
.hero2__card .lead{color:rgba(255,255,255,.94);max-width:560px}
.hero2 .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.hero2 .phone-pill{display:inline-flex;align-items:center;gap:13px;margin-top:22px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:10px 24px 10px 10px;font-weight:600;color:#fff}
.hero2 .phone-pill .ico{background:var(--red);color:#fff;width:40px;height:40px;min-width:40px;border-radius:50%;display:grid;place-items:center}
.hero2__cap{position:absolute;right:18px;bottom:44px;z-index:3;background:rgba(0,0,0,.45);color:#fff;padding:8px 14px;border-radius:12px;max-width:56%;backdrop-filter:blur(4px)}
.hero2__cap b{display:block;font-family:var(--head)}
.hero2__cap small{opacity:.85}
.fade-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:var(--green-dark);font-size:1.6rem;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow)}
.fade-arrow--prev{left:16px}.fade-arrow--next{right:16px}
.fade-arrow:hover{background:#fff}
.fade-dots{position:absolute;z-index:3;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.fade-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55);border:0;cursor:pointer;padding:0;transition:.2s}
.fade-dot.is-active{background:#fff;width:26px;border-radius:6px}
@media(max-width:640px){
  .hero2::after{background:linear-gradient(180deg,rgba(9,38,23,.35),rgba(9,38,23,.85))}
  .hero2__cap,.fade-arrow{display:none}
  .hero2 .actions{flex-direction:column;align-items:stretch}
  .hero2 .actions .btn{justify-content:center}
}

/* ---- 'Ik wil…' actietegels (springen naar voren) ---- */
.section--tiles{padding:58px 0}
.tiles-head{text-align:center;margin-bottom:26px}
.tiles-head h2{margin:.2em 0 0}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tile{display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:20px;color:#fff;text-decoration:none;box-shadow:var(--shadow);min-height:158px;justify-content:flex-end;transition:transform .2s cubic-bezier(.2,.7,.3,1.4),box-shadow .2s}
.tile:hover{transform:translateY(-9px) scale(1.03);box-shadow:var(--shadow-lg);text-decoration:none}
.tile:active{transform:translateY(-3px) scale(1.0)}
.tile__ic{font-size:2.2rem}
.tile__t{font-family:var(--head);font-weight:700;font-size:1.12rem;line-height:1.2}
.tile__s{font-size:.9rem;opacity:.92}
.tile--red{background:linear-gradient(150deg,var(--red),var(--red-dark))}
.tile--green{background:linear-gradient(150deg,var(--green),var(--green-dark))}
.tile--green2{background:linear-gradient(150deg,var(--green-2),var(--green-2-dark))}
.tile--sun{background:linear-gradient(150deg,var(--sun),var(--sun-dark));color:var(--sun-ink)}
.tile--sun .tile__s{opacity:.8}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tiles{grid-template-columns:1fr}}

/* ---- Pop-kaarten (tips, procedures, nieuws) ---- */
.pop-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);color:inherit;text-decoration:none;transition:transform .2s cubic-bezier(.2,.7,.3,1.4),box-shadow .2s}
.pop-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-lg);text-decoration:none}
.pop-card:active{transform:translateY(-3px) scale(1.0)}
.pop-card__img{display:block;height:180px;background-size:cover;background-position:center}
.pop-card__ico{display:grid;place-items:center;height:150px;font-size:3.4rem;background:var(--green-2-light)}
.pop-card__body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.pop-card__body strong{font-family:var(--head);font-size:1.12rem;line-height:1.25;color:var(--ink)}
.pop-card__text{color:var(--muted);font-size:.94rem}
.pop-card__more{margin-top:auto;color:var(--green-dark);font-weight:700;font-family:var(--head);font-size:.92rem}
.chip{align-self:flex-start;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:4px 10px;border-radius:999px}
.chip--green{background:var(--green-light);color:var(--green-dark)}
.chip--sun{background:var(--sun-soft);color:var(--sun-ink)}

/* ---- Horizontale slideshow (nieuws) ---- */
.scroller{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.scroller>*{scroll-snap-align:start;flex:0 0 clamp(260px,31%,360px)}
.scroller-nav{display:flex;gap:8px}
.scroller-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:1.5rem;line-height:1;color:var(--green-dark);cursor:pointer;box-shadow:var(--shadow)}
.scroller-btn:hover{background:var(--green-light)}
@media(max-width:620px){.scroller>*{flex:0 0 84%}}

/* ---- Seizoenschips ---- */
.season-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.season-chip{padding:10px 18px;border-radius:999px;border:2px solid var(--line);background:#fff;font-family:var(--head);font-weight:600;color:var(--ink);text-decoration:none;transition:.15s}
.season-chip:hover{border-color:var(--green-2);text-decoration:none}
.season-chip.is-active{background:var(--green);border-color:var(--green);color:#fff}
.section-head{margin:0 0 18px}
.section-head h2{margin:0}
.btn-center{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---- Callouts ---- */
.callout{border-radius:20px;padding:24px 26px;box-shadow:var(--shadow)}
.callout h3{margin:0 0 6px}
.callout--spoed{background:linear-gradient(135deg,#fff,var(--green-2-light));border:1px solid #cdeedd}
.callout--wide{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:linear-gradient(135deg,#fff5f4,#ffe9e6);border:1px solid #ffd6d0}
.callout--wide p{margin:0}

/* ---- CTA-kaarten in nieuwe kleuren ---- */
.cta-card--green2{background:linear-gradient(135deg,var(--green-2),var(--green-2-dark))}
.cta-card--sun{background:linear-gradient(135deg,var(--sun),var(--sun-dark));color:var(--sun-ink)}
.cta-card--sun h3{color:var(--sun-ink)}
.cta-card--sun p{color:rgba(0,0,0,.72)}

/* Vermist-label: warm amber i.p.v. rood (rood blijft voor spoed) */
.tag--vermist{background:#fff1d6;color:#b45309}

/* Gele pagina-kop voor tips */
.page-head--yellow{background:linear-gradient(135deg,var(--sun-soft),#fff)}

/* Leestekst (tips/procedure-detail) */
.prose h2,.prose h3{margin-top:1.2em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1rem}
.prose li{margin-bottom:.4rem}
.prose img{border-radius:14px}

/* Algemene kaart-hover iets speelser */
.card{transition:transform .2s cubic-bezier(.2,.7,.3,1.4),box-shadow .2s}
.card:hover{transform:translateY(-6px) scale(1.01)}
.animal-card{transition:transform .2s cubic-bezier(.2,.7,.3,1.4),box-shadow .2s}
.animal-card:hover{transform:translateY(-6px) scale(1.01)}

/* ---- Social media in eigen merkkleuren ---- */
.socials{display:flex;gap:10px;margin-top:16px}
.soc{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff !important;transition:transform .15s}
.soc:hover{transform:translateY(-3px);text-decoration:none}
.soc--fb{background:#1877f2}
.soc--ig{background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fd5949 45%,#d6249f 70%,#285AEB 100%)}
.soc--li{background:#0a66c2}
.soc--yt{background:#ff0000}

/* ============================================================
   HERO v3 — afgeronde slider (niet paginabreed) + speels
   tekstvlak eroverheen + actietegels onder elkaar ernaast
   ============================================================ */
.hero3{padding:34px 0 48px;background:linear-gradient(180deg,var(--green-soft),#fff 70%)}
.hero3__grid{display:grid;grid-template-columns:1.4fr .95fr;gap:34px;align-items:stretch}
.hero3__media{position:relative;min-height:540px;border-radius:28px}
.hero3__slides{position:absolute;inset:0;border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--green-dark)}
.hero3 .fade-slide{position:absolute;inset:0;background-size:cover;background-position:center 28%;opacity:0;transform:scale(1.06);transition:opacity 1.2s ease,transform 7s ease}
.hero3 .fade-slide.is-active{opacity:1;transform:scale(1)}
.hero3__media .fade-dots{left:auto;right:18px;bottom:16px;transform:none}
.hero3__media .fade-arrow{width:40px;height:40px;font-size:1.4rem}

/* Speels groen tekstvlak dat over de foto valt */
.hero3__card{position:absolute;left:22px;bottom:22px;max-width:70%;background:linear-gradient(140deg,var(--green),var(--green-dark));color:#fff;padding:26px 28px;border-radius:24px;box-shadow:0 24px 55px rgba(9,38,23,.35);transform:rotate(-.6deg)}
.hero3__card .eyebrow{background:rgba(255,255,255,.2);color:#fff;margin-bottom:10px}
.hero3__card h1{color:#fff;font-size:clamp(1.5rem,2.4vw,2.25rem);margin-bottom:8px}
.hero3__card .lead{color:rgba(255,255,255,.94);font-size:1rem;max-width:none;margin-bottom:16px}
.hero3__card .actions{display:flex;gap:10px;flex-wrap:wrap}
.hero3__card .phone-pill{display:inline-flex;align-items:center;gap:12px;margin-top:14px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 18px 8px 8px;font-weight:600;color:#fff;font-size:.9rem}
.hero3__card .phone-pill .ico{background:var(--red);color:#fff;width:34px;height:34px;min-width:34px;border-radius:50%;display:grid;place-items:center}

/* Rechterkolom: 'Waarmee kunnen we je helpen?' met tegels onder elkaar */
.hero3__side{display:flex;flex-direction:column;justify-content:center}
.hero3__side h2{margin:.2em 0 16px;font-size:clamp(1.3rem,2vw,1.7rem)}
.hero3__tiles{display:flex;flex-direction:column;gap:13px}
.tile-row{display:flex;align-items:center;gap:15px;padding:16px 18px;border-radius:18px;color:#fff;text-decoration:none;box-shadow:var(--shadow);transition:transform .2s cubic-bezier(.2,.7,.3,1.4),box-shadow .2s}
.tile-row:hover{transform:translateX(6px) scale(1.02);box-shadow:var(--shadow-lg);text-decoration:none}
.tile-row:active{transform:translateX(2px) scale(1.0)}
.tile-row__ic{font-size:1.6rem;width:48px;height:48px;min-width:48px;border-radius:13px;background:rgba(255,255,255,.2);display:grid;place-items:center}
.tile-row__tx{display:flex;flex-direction:column;line-height:1.2;flex:1}
.tile-row__tx b{font-family:var(--head);font-weight:700;font-size:1.02rem}
.tile-row__tx small{opacity:.9;font-size:.85rem;margin-top:2px}
.tile-row__arr{font-size:1.3rem;opacity:.85}
.tile-row.tile--sun{color:var(--sun-ink)}
.tile-row.tile--sun .tile-row__ic{background:rgba(0,0,0,.12)}

@media(max-width:960px){
  .hero3__grid{grid-template-columns:1fr;gap:24px}
  .hero3__media{min-height:400px}
  .hero3__card{max-width:84%;left:16px;bottom:16px;padding:20px 22px;transform:none}
}
@media(max-width:560px){
  .hero3__media{min-height:340px}
  .hero3__card{position:static;max-width:none;margin:-52px 10px 0;transform:none}
  .hero3 .fade-slide{background-position:center 22%}
}

/* ============================================================
   HERO v4 — full-width: 2/3 fotoslider + 1/3 groen hulp-paneel
   (opzet zoals home_new)
   ============================================================ */
.hero4{padding:26px 0 40px;background:linear-gradient(180deg,var(--green-soft),#fff 75%)}
.hero4__grid{max-width:1680px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:2fr 1fr;gap:22px;align-items:stretch}
.hero4__media{position:relative;min-height:480px;border-radius:26px;overflow:hidden;background:var(--green-dark);box-shadow:var(--shadow-lg)}
.hero4__slides{position:absolute;inset:0}
.hero4 .fade-slide{position:absolute;inset:0;background-size:cover;background-position:center 30%;opacity:0;transform:scale(1.06);transition:opacity 1.2s ease,transform 8s ease}
.hero4 .fade-slide.is-active{opacity:1;transform:scale(1)}
.hero4__media .fade-dots{left:auto;right:18px;bottom:16px;transform:none}

/* Groen hulp-paneel */
.hero4__panel{display:flex;flex-direction:column;background:linear-gradient(150deg,var(--green),var(--green-dark));color:#fff;border-radius:26px;padding:30px 30px;box-shadow:var(--shadow-lg)}
.hero4__panel .eyebrow{background:rgba(255,255,255,.2);color:#fff}
.hero4__panel h1{color:#fff;font-size:clamp(1.5rem,1.9vw,2rem);margin-bottom:8px}
.hero4__panel .intro{color:rgba(255,255,255,.92);font-size:.95rem;margin-bottom:16px}
.help-label{font-family:var(--head);font-weight:700;font-size:1.02rem;margin-bottom:10px}
.hero4__help{display:flex;flex-direction:column;gap:10px}
.help-row{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 14px;color:#fff;text-decoration:none;transition:.18s}
.help-row:hover{background:rgba(255,255,255,.22);transform:translateX(5px);text-decoration:none}
.help-row__ic{width:42px;height:42px;min-width:42px;border-radius:12px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:1.3rem}
.help-row__tx{flex:1;line-height:1.2}
.help-row__tx b{display:block;font-family:var(--head);font-size:1rem}
.help-row__tx small{opacity:.86;font-size:.82rem}
.help-row__arr{opacity:.7;font-size:1.15rem}
.help-row--spoed{background:var(--red);border-color:transparent}
.help-row--spoed:hover{background:var(--red-dark)}
.help-row--spoed .help-row__ic{background:rgba(255,255,255,.22)}
.hero4__foot{margin-top:16px;font-size:.88rem;color:rgba(255,255,255,.9)}
.hero4__foot a{color:#fff;font-weight:700}

@media(max-width:900px){
  .hero4__grid{grid-template-columns:1fr;gap:18px}
  .hero4__media{min-height:340px}
}

/* ============================================================
   HERO v5 — ÉCHT full-width, sterker contrast, overlappende
   kaders met witte curved randen (speelser)
   ============================================================ */
.hero5{padding:24px 0 46px;background:radial-gradient(120% 90% at 12% 0%, #cdeedb 0%, #eaf7ef 45%, #ffffff 100%)}
.hero5__wrap{width:100%;max-width:2160px;margin:0 auto;padding:0 clamp(12px,1.8vw,30px);display:grid;grid-template-columns:1.85fr 1fr;align-items:center}
.hero5__media{position:relative;min-height:clamp(430px,60vh,600px);border-radius:34px;overflow:hidden;border:7px solid #fff;box-shadow:0 26px 60px rgba(9,38,23,.24);background:var(--green-dark)}
.hero5__slides{position:absolute;inset:0}
.hero5 .fade-slide{position:absolute;inset:0;background-size:cover;background-position:center 30%;opacity:0;transform:scale(1.06);transition:opacity 1.2s ease,transform 8s ease}
.hero5 .fade-slide.is-active{opacity:1;transform:scale(1)}
.hero5__media .fade-dots{left:22px;right:auto;bottom:18px;transform:none}
@media(min-width:901px){ .hero5__media .fade-arrow--next{right:96px} }

/* Overlappend groen paneel met witte curved rand + sterk licht→donker verloop */
.hero5__panel{position:relative;z-index:2;margin-left:-76px;align-self:center;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(158deg,#4bc17d 0%,var(--green) 32%,#0b5230 100%);color:#fff;
  border:7px solid #fff;border-radius:32px;padding:30px 30px;
  box-shadow:0 26px 60px rgba(9,38,23,.32)}
.hero5__panel .eyebrow{background:rgba(255,255,255,.22);color:#fff}
.hero5__panel h1{color:#fff;font-size:clamp(1.5rem,1.9vw,2.05rem);margin-bottom:8px}
.hero5__panel .intro{color:rgba(255,255,255,.94);font-size:.95rem;margin-bottom:16px}
.hero5__help{display:flex;flex-direction:column;gap:10px}
.hero5__foot{margin-top:16px;font-size:.88rem;color:rgba(255,255,255,.92)}
.hero5__foot a{color:#fff;font-weight:700}

@media(max-width:900px){
  .hero5__wrap{grid-template-columns:1fr}
  .hero5__media{min-height:330px}
  .hero5__panel{margin:-58px 12px 0;align-self:auto}
}

/* ============================================================
   STIJL DOORZETTEN — hero-elementen elders op de site:
   rijker licht→donker groen, witte fotokaders, frissere koppen
   ============================================================ */
/* Frissere paginakoppen (zelfde sfeer als de hero-achtergrond) */
.page-head{background:radial-gradient(120% 90% at 12% 0%, #cdeedb 0%, #eaf7ef 45%, #fff 100%)}
.page-head--yellow{background:radial-gradient(120% 90% at 12% 0%, #fff0c6 0%, #fff8e2 45%, #fff 100%)}

/* Witte fotokaders met curved rand (zelfde motief als de hero) */
.team-photo,.photoband{border:7px solid #fff;box-shadow:0 24px 55px rgba(9,38,23,.20)}
.photoband{border-radius:28px}

/* Rijker, sterker groen verloop op de gekleurde vlakken */
.photoband__text--green{background:linear-gradient(158deg,#4bc17d 0%,var(--green) 34%,#0b5230 100%)}
.cta-card--green{background:linear-gradient(158deg,#4bc17d 0%,var(--green) 34%,#0b5230 100%)}
.cta-card--sun{background:linear-gradient(158deg,#ffe07a 0%,var(--sun) 42%,#e0a900 100%)}

/* Detail-/nieuwsfoto's krijgen dezelfde witte curved rand */
.guide-hero-img,.prose>img:first-child{border:6px solid #fff;box-shadow:0 20px 46px rgba(9,38,23,.18)}

/* ============================================================
   MOBIELE VERFIJNING — de site net zo sterk op de telefoon
   ============================================================ */
@media(max-width:760px){
  /* Nieuws-/sponsor-scrollers: vegen i.p.v. pijltjes */
  .scroller-nav{display:none}
  .scroller>*{flex:0 0 86%}
}

@media(max-width:600px){
  /* HERO — compacter, overlappend paneel onder de foto, lekker leesbaar */
  .hero5{padding:16px 0 30px}
  .hero5__wrap{padding:0 12px}
  .hero5__media{min-height:270px;border-width:6px;border-radius:24px}
  .hero5__panel{padding:22px 20px;border-width:6px;border-radius:24px;margin:-44px 8px 0}
  .hero5__panel h1{font-size:1.5rem}
  .hero5__panel .intro{font-size:.92rem}
  .help-label{font-size:.98rem}
  .help-row{padding:13px 14px}
  .help-row__ic{width:44px;height:44px;min-width:44px;font-size:1.25rem}

  /* SPONSOREN — gecentreerd, grotere kaart in beeld */
  .sponsors__grid{gap:16px}
  .sponsors__intro{text-align:center}
  .sponsors__intro .btn{margin:0 auto}
  .sponsor-card{flex:0 0 74%;height:140px}

  /* Secties compacter + koppen niet te groot */
  .section{padding:40px 0}
  .toolbar{gap:10px}
  .toolbar h2{font-size:1.35rem}
  .section-head h2{font-size:1.4rem}

  /* Pop-kaarten: afbeelding iets lager zodat er meer op 't scherm past */
  .pop-card__img{height:160px}
  .pop-card__ico{height:130px;font-size:3rem}

  /* Callout 'wat te doen' netjes stapelen */
  .callout--wide{flex-direction:column;align-items:flex-start;text-align:left}
  .callout--wide .btn{width:100%;justify-content:center}

  /* Seizoenschips lekker tikbaar */
  .season-chip{padding:9px 14px;font-size:.92rem}
}

@media(max-width:400px){
  .hero5__panel h1{font-size:1.34rem}
  .hero5__panel{padding:20px 16px}
  .sponsor-card{flex:0 0 82%}
}

/* ============================================================
   RESTYLE 2026-B — zachter/frisser palet, eigen iconen,
   nieuw logo/menu/topbar/footer, nieuwe lichte hero
   ============================================================ */
/* Eigen SVG-iconen */
.ic-svg{width:1.1em;height:1.1em;display:inline-block;vertical-align:middle;overflow:visible;flex:0 0 auto}
/* iconen naast tekst krijgen een klein tikje ruimte, nooit afgekapt */
.btn .ic-svg,.pop-card__more .ic-svg{margin-right:.05em}
.ic--sm{width:1em;height:1em}
.ic--lg{width:1.5em;height:1.5em}
.ic--tiny{width:.82em;height:.82em;vertical-align:-.05em}
.ic--acc{color:var(--green)}
.ic--rot-r{transform:rotate(90deg)}
.ic--rot-l{transform:rotate(-90deg)}

/* Achtergrond-sfeer wat luchtiger */
body{background:var(--bg)}
.section--soft{background:var(--green-soft)}
.section--cream{background:var(--cream-soft)}
.section--green{background:var(--green-light)}

/* Knoppen (zachter) */
.btn--primary{background:var(--green);color:#fff}
.btn--primary:hover{background:var(--green-700);color:#fff}
.btn--accent{background:var(--sun);color:var(--sun-ink)}
.btn--accent:hover{background:var(--sun-dark);color:var(--sun-ink)}
.eyebrow{background:var(--green-light);color:var(--green-dark)}

/* Topbar: spoed links, doneren rechts (algemeen nummer + mail weg) */
.topbar{background:var(--green);color:#fff;font-size:.92rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.topbar a{color:#fff}
.topbar .emergency{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.topbar .emergency b{background:var(--red);padding:3px 12px;border-radius:999px}
.topbar .emergency b a{color:#fff}
.topbar-donate{padding:6px 16px;gap:.4em}

/* Logo (volledig logo, geen losse tekst) */
.brand{gap:0}
.brand-logo--full{height:64px;width:auto;object-fit:contain;background:none;padding:0;box-shadow:none;border-radius:0;display:block}
.site-header{background:rgba(255,255,255,.96);backdrop-filter:blur(10px)}
.nav-links{margin-left:auto}

/* Menu-dropdown 'Over ons' */
.nav-links .has-sub{position:relative}
.nav-links .has-sub>a{display:inline-flex;align-items:center}
.sub-caret{display:inline-flex;align-items:center;margin-left:3px;color:var(--muted)}
.sub-caret .ic-svg{width:.85em;height:.85em}
.subnav{position:absolute;top:calc(100% + 6px);left:0;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:8px;margin:0;list-style:none;display:none;z-index:70}
.nav-links .has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:8px}
.nav-links .has-sub:hover .subnav,.nav-links .has-sub:focus-within .subnav{display:block}
.subnav li{margin:0}
.subnav a{display:block;padding:9px 12px;border-radius:10px;white-space:nowrap;color:var(--ink)}
.subnav a:hover{background:var(--green-light);color:var(--green-dark)}

/* INTRO los boven de header */
.home-intro{padding:38px 0 8px;text-align:center}
.home-intro h1{margin-bottom:.35em}
.home-intro .lead{margin:0 auto}

/* HERO v6 — grote foto + smal licht hulp-paneel */
.hero6{padding:14px 0 42px;background:radial-gradient(120% 80% at 50% 0%, var(--green-light) 0%, #fff 62%)}
.hero6__wrap{width:100%;max-width:2160px;margin:0 auto;padding:0 clamp(12px,1.8vw,30px);display:grid;grid-template-columns:2.5fr 1fr;gap:20px;align-items:stretch}
.hero6__media{position:relative;min-height:clamp(420px,64vh,640px);border-radius:32px;overflow:hidden;border:7px solid #fff;box-shadow:var(--shadow-lg);background:var(--green-2-light)}
.hero6__slides{position:absolute;inset:0}
.hero6 .fade-slide{position:absolute;inset:0;background-size:cover;background-position:center 32%;opacity:0;transform:scale(1.05);transition:opacity 1.2s ease,transform 8s ease}
.hero6 .fade-slide.is-active{opacity:1;transform:scale(1)}
.hero6__media .fade-dots{left:20px;right:auto;bottom:16px;transform:none}
.hero6__panel{display:flex;flex-direction:column;justify-content:center;background:#fff;border:7px solid #fff;border-radius:28px;box-shadow:var(--shadow-lg);padding:22px}
.hero6__panel .help-label{font-family:var(--head);font-weight:700;font-size:1.05rem;color:var(--green-dark);margin-bottom:12px}
.hero6__help{display:flex;flex-direction:column;gap:11px}
.hero6 .help-row{display:flex;align-items:center;gap:13px;background:var(--green-soft);border:1px solid var(--line);border-radius:16px;padding:13px 14px;color:var(--ink);text-decoration:none;transition:.18s}
.hero6 .help-row:hover{background:var(--green-light);transform:translateX(5px);border-color:#cfe8db;text-decoration:none}
.hero6 .help-row__ic{width:44px;height:44px;min-width:44px;border-radius:13px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--green)}
.hero6 .help-row__ic .ic-svg{width:22px;height:22px}
.hero6 .help-row__tx{flex:1;line-height:1.2}
.hero6 .help-row__tx b{display:block;font-family:var(--head);font-size:1rem;color:var(--ink)}
.hero6 .help-row__tx small{color:var(--muted);font-size:.82rem}
.hero6 .help-row__arr{color:var(--green);opacity:.65;display:inline-flex}
.hero6 .help-row--spoed{background:var(--red);border-color:transparent;color:#fff}
.hero6 .help-row--spoed:hover{background:var(--red-dark)}
.hero6 .help-row--spoed .help-row__ic{background:rgba(255,255,255,.22);border-color:transparent;color:#fff}
.hero6 .help-row--spoed .help-row__tx b{color:#fff}
.hero6 .help-row--spoed .help-row__tx small{color:rgba(255,255,255,.85)}
.hero6 .help-row--spoed .help-row__arr{color:#fff;opacity:.9}
@media(max-width:900px){
  .hero6__wrap{grid-template-columns:1fr;gap:16px}
  .hero6__media{min-height:300px}
  .home-intro{padding:24px 0 4px}
}

/* Compacte cijfer-band */
.statsband{padding:32px 0}
.statsband__inner{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:linear-gradient(135deg,var(--green-light),var(--cream-soft));border:1px solid #e2ede7;border-radius:24px;padding:22px 28px}
.statsband__intro h2{margin:.2em 0 0}
.statsband .stats{grid-template-columns:repeat(4,1fr);gap:16px}
.statsband .stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 12px;box-shadow:none}
.statsband .stat .num{color:var(--green-dark)}
.statsband .stat .lbl{display:inline-flex;align-items:center;gap:5px}
@media(max-width:820px){.statsband__inner{grid-template-columns:1fr}.statsband .stats{grid-template-columns:repeat(2,1fr)}}

/* CTA-kaarten (zachter) */
.cta-card--green{background:linear-gradient(155deg,var(--green-2),var(--green) 55%,var(--green-dark))}
.cta-card--sun{background:linear-gradient(155deg,#f7f39a,var(--sun) 55%,var(--sun-dark));color:var(--sun-ink)}
.cta-card--sun h3{color:var(--sun-ink)}
.cta-card--sun p{color:rgba(0,0,0,.68)}

/* Footer: merkgroen i.p.v. bijna-zwart + volledig logo op witte chip */
.site-footer{background:var(--footer);color:#d7e6de}
.site-footer a{color:#d7e6de}
.site-footer a:hover{color:#fff}
.footer-bottom{border-top-color:rgba(255,255,255,.14);color:#a7c2b6}
.footer-badges span{background:rgba(255,255,255,.12)}
.footer-brand{margin-bottom:16px}
.footer-logo-chip{display:inline-flex;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 8px 22px rgba(0,0,0,.14)}
.footer-logo-chip img{height:66px;width:auto;display:block}
.footer-contact li{display:flex;align-items:flex-start;gap:8px}
.footer-contact .ic-svg{color:var(--green-2);margin-top:.15em}
.footer-login{border-color:rgba(255,255,255,.28)}

/* Socials in eigen merkkleuren (incl. TikTok) */
.socials{display:flex;gap:10px;margin-top:16px}
.soc{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff !important;transition:transform .15s}
.soc .ic-svg{width:20px;height:20px}
.soc:hover{transform:translateY(-3px);text-decoration:none}
.soc--fb{background:#1877f2}
.soc--ig{background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fd5949 45%,#d6249f 70%,#285AEB 100%)}
.soc--tt{background:#111}
.soc--soon{opacity:.5;cursor:default}

/* ============================================================
   RESTYLE 2026-D — méér wit, omlijnde groene kaders,
   filled/outlined afwisselen, iconen in omlijnde cirkels
   ============================================================ */
:root{ --outline:#cbe4d6; --outline-soft:#e2f0e9; }

/* Secties overwegend wit (weg met de vele grijs/groene vlakken) */
body{background:#fff}
.section--soft,.section--cream,.section--green{background:#fff}
.section{padding:64px 0}

/* Kaarten: wit met dunne groene omlijning i.p.v. gevuld + zware schaduw */
.card,.pop-card,.animal-card,.sponsor-card,.kpi,.callout,.season-chip{box-shadow:none}
.pop-card,.animal-card,.sponsor-card{background:#fff;border:1.6px solid var(--outline);border-radius:20px;transition:transform .2s cubic-bezier(.2,.7,.3,1.4),border-color .2s,box-shadow .2s}
.pop-card:hover,.animal-card:hover,.sponsor-card:hover{transform:translateY(-6px);border-color:var(--green);box-shadow:0 16px 34px rgba(16,93,74,.10)}
.card{background:#fff;border:1.6px solid var(--outline);box-shadow:none}

/* Icoon-vlak op kaarten → omlijnde cirkel op wit (herkenbaar, eigen) */
.pop-card__ico{background:#fff;border-bottom:1.6px solid var(--outline-soft);height:132px}
.pop-card__ico .ic-svg{width:34px;height:34px;color:var(--green);padding:15px;border:2px solid var(--outline);border-radius:50%;box-sizing:content-box;background:#fff}
.pop-card__img{border-bottom:1.6px solid var(--outline-soft)}

/* Chips en eyebrow → omlijnd op wit */
.chip--green,.chip--sun{background:#fff;border:1.5px solid var(--outline);color:var(--green-dark)}
.eyebrow{background:#fff;border:1.6px solid var(--outline);color:var(--green-dark)}

/* Cijferband: wit met omlijning, outlined stat-kaarten, groen accentlijntje */
.statsband{background:#fff;padding:20px 0}
.statsband__inner{background:#fff;border:1.6px solid var(--outline);border-radius:26px}
.statsband .stat{background:#fff;border:1.5px solid var(--outline);box-shadow:none}
.statsband .stat .lbl .ic-svg{color:var(--green)}

/* Hero-hulprijen: wit + omlijnd (spoed blijft gevuld rood voor contrast) */
.hero7 .help-row{background:#fff;border:1.6px solid var(--outline)}
.hero7 .help-row:hover{background:#fff;border-color:var(--green)}
.hero7 .help-row__ic{background:#fff;border:2px solid var(--outline);color:var(--green)}

/* Afwisseling: donateur gevuld groen, vrijwilliger omlijnd wit */
.cta-card{box-shadow:none}
.cta-card--sun{background:#fff;border:1.8px solid var(--green);color:var(--green-dark)}
.cta-card--sun h3{color:var(--green-dark)}
.cta-card--sun p{color:var(--muted)}
.cta-card--sun .btn--dark{background:var(--green);color:#fff}

/* Sponsors-carrousel op wit */
.sponsor-card{height:150px}

/* Callouts: omlijnd i.p.v. gevuld (spoed-callout houdt subtiele tint) */
.callout--spoed{background:#fff;border:1.6px solid var(--outline)}
.callout--wide{background:#fff;border:1.6px solid #f2cfc8}

/* Fijne, dunne accentlijn onder sectiekoppen (designdetail) */
.toolbar>h2,.section-head h2,.tiles-head h2,.sponsors__intro h2{position:relative}
.home-intro h1::after{content:"";display:block;width:64px;height:3px;border-radius:3px;background:var(--green);margin:14px auto 0}

/* Zachtere, subtielere schaduw als variabele (minder 'soft AI') */
:root{ --shadow:0 4px 16px rgba(16,93,74,.05); }

/* Mobiel menu: submenu-inspringing + logo */
.mobile-menu__sub{display:flex;flex-direction:column;padding-left:14px;border-left:3px solid var(--green-light);margin:2px 0}
.mobile-menu__sub a{font-size:1.08rem;padding:12px 4px;border-bottom:1px solid var(--line)}

/* ============================================================
   RESTYLE 2026-C — horizontaal logo, weg met geel, leesbare
   doneerknop, iconen als badges, speelse organische hero
   ============================================================ */
/* Horizontaal logo, groter en leesbaar */
.brand-logo--full{height:48px;width:auto;object-fit:contain;background:none;padding:0;box-shadow:none;border-radius:0}
.footer-logo-chip img{height:42px}
.mobile-menu .brand-logo--full{height:42px}
@media(max-width:560px){ .brand-logo--full{height:40px} }

/* Icoon-varianten */
.ic--card{width:34px;height:34px}
.ic--ph{width:clamp(42px,9vw,60px);height:clamp(42px,9vw,60px)}
.h1-ic{display:inline-flex;vertical-align:-.14em;margin-right:.15em}
.season-chip{display:inline-flex;align-items:center;gap:7px}
.pop-card__ico{color:var(--green);background:var(--green-2-light)}
.pop-card__ico .ic-svg{width:40px;height:40px}
.photo.ph{color:var(--green);background:var(--green-2-light)}
.footer-contact .ic-svg,.socials .ic-svg{flex:0 0 auto}

/* Geen fel geel meer: knoppen + gele vlakken vervangen */
.btn--accent{background:var(--green);color:#fff;border:2px solid transparent}
.btn--accent:hover{background:var(--green-700);color:#fff}

/* Lichte, frisse bovenbalk (i.p.v. zwaar groen) */
.topbar{background:var(--green-soft);color:var(--ink);border-bottom:1px solid var(--line)}
.topbar a{color:var(--green-dark)}
.topbar .emergency b{background:var(--red)}
.topbar .emergency b a{color:#fff}
.topbar-donate{background:var(--green);color:#fff;border:none;padding:6px 16px;gap:.45em}
.topbar .btn.topbar-donate{color:#fff}
.topbar-donate:hover{background:var(--green-700);color:#fff}
.topbar-donate .ic-svg{color:#fff}

.cta-card--sun{background:linear-gradient(155deg,var(--green-2-light),#d6efe0);color:var(--green-dark)}
.cta-card--sun h3{color:var(--green-dark)}
.cta-card--sun p{color:#2f5a48}
.page-head--yellow{background:radial-gradient(120% 90% at 12% 0%, var(--green-light) 0%, var(--green-soft) 45%, #fff 100%)}

/* ---- HERO v7: speelse, organische, overlappende vormen ---- */
.hero7{position:relative;padding:8px 0 48px;overflow:hidden;
  background:radial-gradient(48% 55% at 16% 22%, var(--glow), transparent 70%),
             radial-gradient(46% 55% at 92% 82%, rgba(95,201,138,.20), transparent 72%), #fff}
.hero7__blob{position:absolute;border-radius:50%;z-index:0;pointer-events:none;filter:blur(6px)}
.hero7__blob--a{width:460px;height:460px;background:radial-gradient(circle at 35% 35%,rgba(51,164,90,.20),transparent 66%);top:-110px;left:-120px;animation:blobfloat 15s ease-in-out infinite}
.hero7__blob--b{width:400px;height:400px;background:radial-gradient(circle at 60% 40%,rgba(95,201,138,.22),transparent 70%);bottom:-110px;right:-90px;animation:blobfloat 19s ease-in-out infinite reverse}
@keyframes blobfloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-16px) scale(1.07)}}
.hero7__wrap{position:relative;z-index:1;max-width:2100px;margin:0 auto;padding:0 clamp(12px,1.8vw,30px);display:grid;grid-template-columns:2fr .95fr;align-items:center}
.hero7__media{position:relative;min-height:clamp(420px,62vh,600px);border-radius:44px 44px 38px 96px;overflow:hidden;border:7px solid #fff;box-shadow:var(--shadow-lg);background:var(--green-2-light)}
.hero7__slides{position:absolute;inset:0}
.hero7 .fade-slide{position:absolute;inset:0;background-size:cover;background-position:center 32%;opacity:0;transform:scale(1.05);transition:opacity 1.2s ease,transform 8s ease}
.hero7 .fade-slide.is-active{opacity:1;transform:scale(1)}
.hero7__media .fade-dots{left:22px;right:auto;bottom:18px;transform:none}
.hero7__badge{position:absolute;left:42px;bottom:44px;z-index:3;display:inline-flex;align-items:center;gap:11px;background:#fff;border-radius:999px;padding:8px 18px 8px 8px;box-shadow:var(--shadow-lg);animation:floaty 4.5s ease-in-out infinite}
.hero7__badge>.ic-svg{width:22px;height:22px;color:#fff;background:var(--green);border-radius:50%;padding:8px;box-sizing:content-box}
.hero7__badge b{display:block;font-family:var(--head);font-size:.92rem;line-height:1.15;color:var(--ink)}
.hero7__badge small{color:var(--muted);font-size:.76rem}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero7__panel{position:relative;z-index:2;margin-left:-58px;background:#fff;border:7px solid #fff;border-radius:30px;box-shadow:var(--shadow-lg);padding:22px;display:flex;flex-direction:column;justify-content:center}
.hero7__panel .help-label{font-family:var(--head);font-weight:700;font-size:1.05rem;color:var(--green-dark);margin-bottom:12px}
.hero7__help{display:flex;flex-direction:column;gap:11px}
.hero7 .help-row{display:flex;align-items:center;gap:13px;background:var(--green-soft);border:1px solid var(--line);border-radius:16px;padding:13px 14px;color:var(--ink);text-decoration:none;transition:.18s}
.hero7 .help-row:hover{background:var(--green-light);transform:translateX(5px);border-color:#cfe8db;text-decoration:none}
.hero7 .help-row__ic{width:44px;height:44px;min-width:44px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--green)}
.hero7 .help-row__ic .ic-svg{width:22px;height:22px}
.hero7 .help-row__tx{flex:1;line-height:1.2}
.hero7 .help-row__tx b{display:block;font-family:var(--head);font-size:1rem;color:var(--ink)}
.hero7 .help-row__tx small{color:var(--muted);font-size:.82rem}
.hero7 .help-row__arr{color:var(--green);opacity:.6;display:inline-flex}
.hero7 .help-row__arr .ic-svg{width:20px;height:20px}
.hero7 .help-row--spoed{background:var(--red);border-color:transparent;color:#fff}
.hero7 .help-row--spoed:hover{background:var(--red-dark)}
.hero7 .help-row--spoed .help-row__ic{background:rgba(255,255,255,.22);border-color:transparent;color:#fff}
.hero7 .help-row--spoed .help-row__tx b,.hero7 .help-row--spoed .help-row__tx small{color:#fff}
.hero7 .help-row--spoed .help-row__tx small{color:rgba(255,255,255,.85)}
.hero7 .help-row--spoed .help-row__arr{color:#fff;opacity:.9}
@media(max-width:900px){
  .hero7__wrap{grid-template-columns:1fr}
  .hero7__media{min-height:320px;border-radius:32px 32px 30px 60px}
  .hero7__panel{margin:-40px 10px 0}
  .hero7__blob{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero7__blob,.hero7__badge,.hero7 .fade-slide{animation:none}
}

/* ============================================================
   SPONSOREN — opvallende carrousel (stijl home_new)
   ============================================================ */
.sponsors__grid{display:grid;grid-template-columns:.8fr 1.7fr;gap:34px;align-items:center}
.sponsors__intro h2{font-size:clamp(1.5rem,2.4vw,2.1rem);margin-bottom:10px}
.sponsors__intro .lead{margin-bottom:18px}
.sponsors__carousel{position:relative;display:flex;align-items:center;gap:10px;min-width:0}
.sponsors__track{flex:1;min-width:0}
.sponsors__arr{flex:0 0 auto}
.sponsor-card{flex:0 0 clamp(180px,32%,230px);height:150px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);display:grid;place-items:center;padding:20px;transition:transform .2s cubic-bezier(.2,.7,.3,1.4),box-shadow .2s}
.sponsor-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-lg);text-decoration:none}
.sponsor-card img{max-height:96px;max-width:100%;width:auto;object-fit:contain}
.sponsor-card__name{font-family:var(--head);font-weight:700;color:var(--green-dark);text-align:center;font-size:1.05rem}
@media(max-width:820px){
  .sponsors__grid{grid-template-columns:1fr;gap:20px}
  .sponsors__arr{display:none}
}

/* ============================================================
   RESTYLE 2026-D (SLOT — wint altijd): méér wit, omlijnde kaders
   ============================================================ */
body{background:#fff}
.section--soft,.section--cream,.section--green{background:#fff}
.pop-card,.animal-card,.sponsor-card{background:#fff;border:1.6px solid var(--outline);box-shadow:none}
.pop-card:hover,.animal-card:hover,.sponsor-card:hover{border-color:var(--green);box-shadow:0 16px 34px rgba(16,93,74,.10)}
.card{background:#fff;border:1.6px solid var(--outline);box-shadow:none}
.pop-card__ico{background:#fff;border-bottom:1.6px solid var(--outline-soft);color:var(--green)}
.pop-card__ico .ic-svg{width:34px;height:34px;color:var(--green);padding:15px;border:2px solid var(--outline);border-radius:50%;box-sizing:content-box;background:#fff}
.chip--green,.chip--sun{background:#fff;border:1.5px solid var(--outline);color:var(--green-dark)}
.eyebrow{background:#fff;border:1.6px solid var(--outline);color:var(--green-dark)}
.statsband{background:#fff}
.statsband__inner{background:#fff;border:1.6px solid var(--outline)}
.statsband .stat{background:#fff;border:1.5px solid var(--outline);box-shadow:none}
.hero7 .help-row{background:#fff;border:1.6px solid var(--outline)}
.hero7 .help-row:hover{background:#fff;border-color:var(--green);transform:translateX(5px)}
.hero7 .help-row__ic{background:#fff;border:2px solid var(--outline);color:var(--green)}
.hero7 .help-row--spoed{background:var(--red);border-color:transparent}
.hero7 .help-row--spoed .help-row__ic{background:rgba(255,255,255,.22);border-color:transparent;color:#fff}
.cta-card{box-shadow:none}
.cta-card--sun{background:#fff;border:1.8px solid var(--green);color:var(--green-dark)}
.cta-card--sun h3{color:var(--green-dark)}
.cta-card--sun p{color:var(--muted)}
.cta-card--sun .btn--dark{background:var(--green);color:#fff}
.callout--spoed{background:#fff;border:1.6px solid var(--outline)}
.home-intro h1::after{content:"";display:block;width:64px;height:3px;border-radius:3px;background:var(--green);margin:14px auto 0}

/* Cijferband: wit kader met 4 GEVULDE groene vlakken + witte getallen (contrast) */
.statsband__inner{background:#fff;border:1.6px solid var(--outline)}
.statsband .stats{gap:18px}
.statsband .stat{background:linear-gradient(150deg,var(--green),var(--green-700));border:none;color:#fff;border-radius:18px;box-shadow:0 10px 22px rgba(31,125,69,.16);transition:transform .18s}
.statsband .stat:hover{transform:translateY(-4px)}
.statsband .stat .num{color:#fff}
.statsband .stat .lbl{color:rgba(255,255,255,.92)}
.statsband .stat .lbl .ic-svg{color:#fff}

/* Foto + verhaal-band — zelfde overlappende, organische sfeer als de hero */
.storyband{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:center}
.storyband__media{position:relative}
.storyband__media::before{content:"";position:absolute;top:-30px;left:-30px;width:240px;height:240px;background:radial-gradient(circle,var(--glow),transparent 70%);border-radius:50%;z-index:0}
.storyband__media img{position:relative;z-index:1;width:100%;max-height:470px;object-fit:cover;border:7px solid #fff;border-radius:36px 36px 30px 84px;box-shadow:var(--shadow-lg);display:block}
.storyband__tag{position:absolute;z-index:2;right:-16px;bottom:26px;display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:9px 17px;box-shadow:var(--shadow-lg);font-family:var(--head);font-weight:700;font-size:.92rem;color:var(--green-dark);animation:floaty 4.5s ease-in-out infinite}
.storyband__tag .ic-svg{color:var(--green)}
.storyband__text h2{margin-bottom:.4em}
.storyband__text h2::after{content:"";display:block;width:60px;height:3px;border-radius:3px;background:var(--green);margin:14px 0 0}
.storyband__text p{color:var(--muted);margin-bottom:20px}
@media(max-width:820px){
  .storyband{grid-template-columns:1fr;gap:26px}
  .storyband__media img{max-height:340px;border-radius:28px 28px 24px 56px}
  .storyband__tag{right:16px}
  .storyband__media::before{display:none}
}
@media(prefers-reduced-motion:reduce){ .storyband__tag{animation:none} }

/* Foto-band gespiegeld + speelse tilt t.o.v. de header (bewust nét anders) */
.storyband{grid-template-columns:.9fr 1.1fr}
.storyband__text{order:1}
.storyband__media{order:2}
.storyband__media img{border-radius:38px 88px 30px 38px;transform:rotate(1.4deg)}
.storyband__media::before{top:auto;left:auto;bottom:-34px;right:-30px}
.storyband__tag{right:auto;left:-14px;top:22px;bottom:auto}
@media(max-width:820px){
  .storyband{grid-template-columns:1fr}
  .storyband__text{order:2}
  .storyband__media{order:1}
  .storyband__media img{transform:none;border-radius:28px 56px 24px 28px}
  .storyband__tag{left:16px;top:16px}
}

/* Hover-lift in de scrollers (sponsoren/nieuws) niet meer afkappen */
.scroller{padding-top:16px;padding-bottom:22px}

/* Menubalk licht transparant + glassy bij scrollen */
.site-header{transition:background .25s ease,box-shadow .25s ease}
.site-header.is-scrolled{background:rgba(255,255,255,.78);box-shadow:0 8px 22px rgba(16,93,74,.09)}

/* Kaart-iconen als omlijnde witte cirkel (uniform met homepage) */
.card .ico{background:#fff;border:2px solid var(--outline);color:var(--green);border-radius:50%;width:52px;height:52px}
.card:hover .ico{border-color:var(--green-2)}

/* Hero: foto over de volle breedte van het blok, de hulplinks als losse
   ballonnetjes daar rechts overheen. Het witte vak dat er eerst omheen zat is
   weg; ook het kopje "Waarmee kunnen we je helpen?" is nu een ballonnetje. */
.hero7__wrap{grid-template-columns:1fr;position:relative;padding:0 clamp(14px,3vw,54px)}
.hero7__media{min-height:clamp(420px,64vh,620px)}
.hero7__panel{
  position:absolute;z-index:3;margin:0;padding:0;
  right:clamp(28px,5vw,80px);top:50%;transform:translateY(-50%);
  width:min(400px,36%);
  background:none;border:0;box-shadow:none;
}
/* Kopje als eigen ballonnetje */
.hero7__panel .help-label{
  display:inline-block;margin:0 0 12px;
  background:#fff;color:var(--green-dark);
  border:1.6px solid var(--outline);border-radius:999px;
  padding:8px 16px;box-shadow:0 8px 22px rgba(9,38,23,.16);
}
/* De ballonnetjes zelf liggen nu op de foto en mogen dus wat meer lift hebben */
.hero7 .help-row{box-shadow:0 8px 22px rgba(9,38,23,.16)}
.hero7 .help-row--spoed{box-shadow:0 8px 22px rgba(160,30,20,.26)}

@media(max-width:980px){
  /* Te smal om de foto te delen: ballonnetjes onder de foto, zoals voorheen */
  .hero7__panel{position:static;transform:none;width:auto;margin:-34px 4px 0}
  .hero7__panel .help-label{margin-left:6px}
}

/* Fotostrook onderaan elke pagina: volle breedte, altijd 4:1, nooit hoger
   dan 300px. Op brede schermen snijdt object-fit verder bij in plaats van
   hoger te worden — een strook blijft een strook, ook op mobiel. */
.fotostrook{position:relative;width:100%;aspect-ratio:4/1;max-height:300px;overflow:hidden;line-height:0}
/* Sluit strak aan op de footer: die heeft standaard een marge boven zich */
.fotostrook + .site-footer,
.fotostreep + .site-footer{margin-top:0}

/* Scheidingsstreep in de kleuren van de ambulance. De dikte komt uit het
   beheer (--streep-h); 0 px = geen streep. */
.fotostreep{width:100%;height:var(--streep-h,18px);
  background:repeating-linear-gradient(115deg,
    var(--green,#1b8f4d) 0 18px, #f2c400 18px 36px)}
/* --strook-focus (0 = bovenkant, 100 = onderkant) bepaalt welk deel van de
   foto zichtbaar blijft als de strook op brede schermen wordt afgetopt. */
.fotostrook__img{width:100%;height:100%;display:block;
  object-fit:cover;object-position:center var(--strook-focus,50%)}
/* Alleen een verloop als er tekst overheen staat */
.fotostrook--tekst::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,26,17,.62) 0%,rgba(8,26,17,.28) 55%,rgba(8,26,17,.10) 100%)}
.fotostrook__wrap{position:absolute;inset:0;z-index:1;display:flex;padding:clamp(12px,3vw,34px)}
.fotostrook--x-links{justify-content:flex-start;text-align:left}
.fotostrook--x-midden{justify-content:center;text-align:center}
.fotostrook--x-rechts{justify-content:flex-end;text-align:right}
.fotostrook--y-boven{align-items:flex-start}
.fotostrook--y-midden{align-items:center}
.fotostrook--y-onder{align-items:flex-end}
.fotostrook__tekst{line-height:1.25;max-width:min(760px,86%)}
.fotostrook__tekst strong{display:block;font-family:var(--head);font-weight:700;
  font-size:clamp(.98rem,2.6vw,1.9rem);text-shadow:0 1px 5px rgba(0,0,0,.4)}
.fotostrook__tekst span{display:block;margin-top:.35em;font-size:clamp(.74rem,1.5vw,1.05rem);
  text-shadow:0 1px 4px rgba(0,0,0,.4)}
.fotostrook--wit   .fotostrook__tekst,.fotostrook--wit   strong,.fotostrook--wit   span{color:#fff}
.fotostrook--groen .fotostrook__tekst,.fotostrook--groen strong,.fotostrook--groen span{color:var(--green-dark);text-shadow:0 1px 4px rgba(255,255,255,.45)}
.fotostrook--grijs .fotostrook__tekst,.fotostrook--grijs strong,.fotostrook--grijs span{color:#26332c;text-shadow:0 1px 4px rgba(255,255,255,.45)}
@media(max-width:620px){
  /* Smal scherm: alleen de kop, de extra regel zou onleesbaar klein worden */
  .fotostrook__tekst span{display:none}
  .fotostrook__tekst{max-width:94%}
}

/* Nieuwsblokjes op de homepage: één foto met de titel eroverheen.
   De kleur van de titel komt per bericht uit het beheer (--news-title-color). */
.news-card--photo{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;padding:0}
.news-card--photo .news-card__img{position:absolute;inset:0;display:block;
  background-size:cover;background-position:center;transition:transform .4s ease}
.news-card--photo:hover .news-card__img{transform:scale(1.05)}
.news-card--photo .news-card__img--none{display:grid;place-items:center;background:var(--green-2-light)}
.news-card--photo .news-card__img--none .ic-svg{width:52px;height:52px;color:var(--green)}
.news-card--photo .news-card__overlay{position:absolute;left:0;right:0;bottom:0;padding:22px 20px 20px;
  background:linear-gradient(to top,rgba(8,26,17,.82) 0%,rgba(8,26,17,.55) 45%,rgba(8,26,17,0) 100%)}
.news-card--photo .news-card__title{font-family:var(--head);font-weight:700;
  font-size:clamp(1.02rem,1.3vw,1.22rem);line-height:1.28;
  color:var(--news-title-color,#fff);text-shadow:0 1px 4px rgba(0,0,0,.45);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(prefers-reduced-motion:reduce){ .news-card--photo:hover .news-card__img{transform:none} }

/* Seizoenstips op de homepage: foto boven (67%), tekst eronder (33%).
   De kaart krijgt een vaste hoogte zodat die verhouding klopt; de tekst
   houdt zijn huidige grootte, dus de kaart wordt hoger dan voorheen.
   Alleen op de homepage — /tips en /wat-te-doen blijven zoals ze waren. */
.guide-card--photo{height:clamp(440px,40vw,560px)}
.guide-card--photo .pop-card__img{flex:2 1 0;height:auto;min-height:0;
  display:grid;place-items:center}
.guide-card--photo .pop-card__body{flex:1 1 0;min-height:0;overflow:hidden;justify-content:center}
/* Nog geen foto gekozen: zelfde vlak, met het categorie-icoon erin */
.pop-card__img--placeholder{background:var(--green-2-light)}
.pop-card__img--placeholder .ic-svg{width:46px;height:46px;color:var(--green)}
/* Omschrijving op twee regels houden, zodat de verhouding klopt */
.guide-card--photo .pop-card__text{display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.guide-card--photo .pop-card__body strong{display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
@media(max-width:820px){
  .guide-card--photo{height:420px}
  .guide-card--photo .pop-card__body{padding:16px}
}

/* Zwevende WhatsApp-knop rechtsonder. Blijft staan tijdens scrollen en op
   elke pagina; onder de veilige zone van iPhones met een thuisbalk.
   Standaard verborgen; .wa-fab--mob toont hem op telefoons, .wa-fab--desk
   ook op grotere schermen (in te stellen via het beheer). */
.wa-fab{
  display:none;align-items:center;justify-content:center;
  position:fixed;z-index:900;
  right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:58px;height:58px;border-radius:50%;
  background:#25d366;color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.26);
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease,box-shadow .15s ease;
}
.wa-fab:hover{color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.3)}
.wa-fab:active{transform:scale(.94)}
.wa-fab__ic{line-height:0;display:block}
.wa-fab__ic img{width:34px;height:34px;display:block}
.wa-fab__ic .ic-svg{width:30px;height:30px;color:#fff}
/* Tekst alleen voor schermlezers; het icoon spreekt voor zich. */
.wa-fab__tip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wa-fab--desk{display:flex}
@media(min-width:821px){
  .wa-fab{right:24px;bottom:24px;width:62px;height:62px}
}
@media(max-width:820px){
  .wa-fab--mob{display:flex}
}
@media(prefers-reduced-motion:reduce){ .wa-fab{transition:none} .wa-fab:active{transform:none} }

/* Jaarcijfers-rij op de homepage: hergebruikt .stats/.stat/.num/.lbl,
   alleen de jaartal-kop en het icoon bovenin de kaart zijn nieuw.
   Icoon- en cijferkleur komen per kaart uit het beheer (inline style). */
.yearstats{padding-bottom:0}
.yearstats__year{text-align:center;color:var(--green-dark);margin:0 0 22px}
.yearstats .stat__ic{line-height:0;margin-bottom:10px}
.yearstats .stat__ic .ic-svg{width:30px;height:30px}
/* Cijfer altijd binnen de kaart houden: "3.000%" past op een smal scherm niet
   op de vaste bureaubladgrootte en stak er anders aan de zijkant uit. */
.yearstats .stat .num{font-size:clamp(1.3rem,5.6vw,2.6rem);line-height:1.05;
  white-space:nowrap;max-width:100%}
@media(max-width:820px){
  /* Twee naast elkaar, twee eronder — alles in één oogopslag, geen slider */
  .yearstats .stats{grid-template-columns:repeat(2,1fr);gap:12px}
  .yearstats .stat{padding:20px 10px}
  .yearstats .stat .lbl{font-size:.86rem;margin-top:6px}
  .yearstats .stat__ic .ic-svg{width:24px;height:24px}
}
@media(max-width:380px){
  .yearstats .stats{gap:10px}
  .yearstats .stat{padding:16px 8px}
}

/* ==================================================================
   Sponsorblok "Deze bedrijven rijden met ons mee" (homepage).
   Ontwerp één op één overgenomen uit de referentie; alle classes
   hebben een sp-prefix om botsingen te voorkomen. Geen JavaScript.
   ================================================================== */
.sp-sectie{background:#268946;color:#FFFFFF;padding:56px 0 0;overflow:hidden;font-family:"Poppins",system-ui,sans-serif}
.sp-wrap{max-width:1120px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.sp-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:8px}
.sp-intro{display:flex;flex-direction:column;gap:10px;max-width:580px}
.sp-h2{margin:0;font-size:30px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;color:#FFFFFF}
.sp-sub{margin:0;color:#E6F5EA;font-size:15px;line-height:1.7}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;background:#FFFFFF;color:#268946;border-radius:999px;padding:10px 22px;font-weight:700;font-size:14px;text-decoration:none;min-height:44px;box-sizing:border-box;flex:none}
.sp-btn:hover{background:#F1F8F3;color:#1C3F2E}
.sp-btn:focus-visible,.sp-bord:focus-visible{outline:3px solid #F4CF1B;outline-offset:3px;border-radius:10px}

.sp-weg{position:relative;height:290px;overflow:hidden}
.sp-berm{position:absolute;left:0;right:0;bottom:56px;height:8px;background:repeating-linear-gradient(-45deg,#F4CF1B 0 10px,#2E9E4A 10px 20px)}
.sp-asfalt{position:absolute;left:0;right:0;bottom:0;height:56px;background:#2F3A36}
.sp-streepjes{position:absolute;left:0;right:0;bottom:26px;height:4px;background:repeating-linear-gradient(90deg,#FFFFFF 0 36px,transparent 36px 72px);opacity:.8;animation:sp-wegrol .9s linear infinite}
@keyframes sp-wegrol{to{background-position:-72px 0}}

.sp-borden{position:absolute;left:0;bottom:64px;display:flex;gap:28px;width:max-content;animation:sp-langs 42s linear infinite}
@keyframes sp-langs{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 14px))}}
.sp-weg:hover .sp-borden{animation-play-state:paused}
.sp-bord{display:flex;flex-direction:column;align-items:center;text-decoration:none}
.sp-plaat{width:240px;height:128px;box-sizing:border-box;background:#FFFFFF;border-radius:18px;border:3px solid #FFFFFF;box-shadow:0 10px 24px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;padding:18px 24px;transition:transform .2s}
.sp-bord:hover .sp-plaat,.sp-bord:focus-visible .sp-plaat{transform:translateY(-6px)}
.sp-logo{display:block;max-width:190px;max-height:84px;width:auto;height:auto;object-fit:contain}
.sp-naam{font-size:15px;font-weight:700;color:#1C3F2E;text-align:center;line-height:1.25}
.sp-palen{display:flex;gap:120px}
.sp-paal{width:8px;height:40px;background:#CFD8D3;border-radius:0 0 3px 3px}

.sp-ambu{position:absolute;left:28px;bottom:8px;width:310px;height:144px;z-index:2;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.sp-wiel{transform-box:fill-box;transform-origin:center;animation:sp-draai .45s linear infinite}
@keyframes sp-draai{to{transform:rotate(360deg)}}
.sp-bob{animation:sp-bob .4s ease-in-out infinite alternate}
@keyframes sp-bob{to{transform:translateY(-2px)}}
.sp-zw1{animation:sp-zwaai .8s steps(1) infinite}
.sp-zw2{animation:sp-zwaai .8s steps(1) .4s infinite}
@keyframes sp-zwaai{0%{opacity:1}50%{opacity:.25}}

@media (prefers-reduced-motion:reduce){
  .sp-borden,.sp-streepjes,.sp-wiel,.sp-bob,.sp-zw1,.sp-zw2{animation:none}
}
@media (max-width:820px){
  .sp-wrap{padding:0 20px}
  .sp-kop{flex-direction:column;align-items:flex-start}
  .sp-weg{height:230px}
  .sp-plaat{width:180px;height:100px;padding:14px 18px}
  .sp-logo{max-width:140px;max-height:64px}
  .sp-ambu{width:200px;height:93px;left:8px}
}

/* ==================================================================
   Doneren-subpagina's: Nalaten en Periodiek schenken.
   Waarden exact overgenomen uit de referentiebestanden; alle classes
   hebben een dn-prefix zodat ze niet botsen met de bestaande site-CSS.
   ================================================================== */
.dn-page{color:#1C3F2E;font-family:"Poppins",system-ui,sans-serif;font-size:16px;line-height:1.75}
.dn-page h1,.dn-page h2,.dn-page h3{margin:0;color:#1C3F2E;font-weight:700;line-height:1.2;letter-spacing:-0.01em}
.dn-page p{margin:0;color:#56645B}
.dn-page a{color:#268946;font-weight:600}
.dn-page a:hover{color:#1C3F2E}
.dn-page a:focus-visible{outline:3px solid #D4413D;outline-offset:3px;border-radius:6px}
.dn-page img{display:block;max-width:100%}
.dn-page section{margin:0}

.dn-wrap{max-width:1120px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.dn-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dn-redpill{background:#D4413D;color:#FFFFFF;border-radius:999px;padding:3px 10px;text-decoration:none;font-weight:700}
.dn-crumb{font-size:13px;color:#7A877E}
.dn-crumb a{color:inherit;font-weight:500;text-decoration:none}
.dn-crumb a:hover{text-decoration:underline}
.dn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#3BB55C;color:#FFFFFF;border-radius:999px;padding:11px 24px;font-weight:700;font-size:15px;text-decoration:none;min-height:44px;box-sizing:border-box}
.dn-btn:hover{background:#268946;color:#FFFFFF}
.dn-btn-line{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#FFFFFF;color:#268946;border:1.5px solid #CFE6D6;border-radius:999px;padding:10px 22px;font-weight:700;font-size:15px;text-decoration:none;min-height:44px;box-sizing:border-box}
.dn-pill{display:inline-block;align-self:flex-start;border:1.5px solid #CFE6D6;border-radius:999px;padding:2px 12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#268946;background:#FFFFFF}
.dn-line{width:40px;height:3px;background:#3BB55C;border-radius:2px}
.dn-foto{position:relative;overflow:hidden;border-radius:24px;box-shadow:0 18px 40px rgba(28,63,46,.14);background:#DCEBE0}
.dn-foto img{width:100%;height:100%;object-fit:cover}
.dn-badge{position:absolute;display:inline-flex;align-items:center;gap:8px;background:#FFFFFF;border-radius:999px;padding:5px 14px 5px 5px;font-size:13px;font-weight:700;color:#1C3F2E;box-shadow:0 6px 18px rgba(28,63,46,.18)}
.dn-dot{width:24px;height:24px;border-radius:50%;background:#3BB55C;display:inline-block}
.dn-stripe{height:8px;background:repeating-linear-gradient(-45deg,#F4CF1B 0 10px,#2E9E4A 10px 20px)}
.dn-tel{font-weight:800;line-height:1;letter-spacing:-0.02em;text-decoration:none}
.dn-belbalk{display:none}

/* Nalaten */
.dn-hero{position:relative;height:580px;overflow:hidden}
.dn-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dn-hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,46,33,.86) 0%,rgba(18,46,33,.55) 45%,rgba(18,46,33,0) 75%)}
.dn-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dn-band-foto{min-height:520px;position:relative}
.dn-band-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dn-band-tekst{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:80px 64px;max-width:560px;box-sizing:border-box}
.dn-band.dn-rev .dn-band-foto{order:2}
.dn-band.dn-rev .dn-band-tekst{justify-self:end}
.dn-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.dn-drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.dn-notaris{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:56px;align-items:center}

/* Periodiek schenken */
.dn-hero--mid{height:520px}
.dn-scrim{position:absolute;inset:0;background:rgba(18,46,33,.55)}
.dn-tegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
.dn-tegel{background:#3BB55C;border-radius:14px;padding:20px 18px;box-shadow:0 10px 22px rgba(59,181,92,.28);display:flex;flex-direction:column;gap:2px}
.dn-tegel--donker{background:#268946}
.dn-kaart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1.5px solid #CFE6D6;border-radius:24px;overflow:hidden;background:#FFFFFF}
.dn-kaart .dn-beeld{position:relative;min-height:340px}
.dn-kaart .dn-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dn-kaart.dn-rev .dn-beeld{order:2}
.dn-kaart .dn-tekst{padding:44px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.dn-pijlen{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr);align-items:start;list-style:none;margin:0;padding:0}
.dn-pijl{display:flex;align-items:center;justify-content:center;height:56px;color:#3BB55C}

@media (max-width:820px){
 .dn-page{font-size:15px}
 body.has-dn-belbalk{padding-bottom:76px}
 .dn-wrap{padding:0 20px}
 .dn-belbalk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;gap:8px;padding:10px 12px;background:#FFFFFF;box-shadow:0 -6px 20px rgba(28,63,46,.15)}
 .dn-hero{height:440px}
 .dn-hero--mid{height:380px}
 .dn-hero h1{font-size:44px!important}
 .dn-hero--mid h1{font-size:38px!important}
 .dn-band{grid-template-columns:1fr}
 .dn-band-foto,.dn-band.dn-rev .dn-band-foto{order:0;min-height:260px}
 .dn-band-tekst{padding:32px 20px 48px;max-width:none}
 .dn-duo,.dn-drie,.dn-notaris{grid-template-columns:1fr}
 .dn-tegels{grid-template-columns:1fr 1fr}
 .dn-kaart{grid-template-columns:1fr}
 .dn-kaart.dn-rev .dn-beeld{order:0}
 .dn-kaart .dn-beeld{min-height:220px}
 .dn-kaart .dn-tekst{padding:24px}
 .dn-pijlen{grid-template-columns:1fr;gap:24px}
 .dn-pijl{display:none}
 .dn-contact-grid{grid-template-columns:1fr!important}
 .dn-tel-groot{font-size:40px!important}
}