/* Ravot huisstijl — speels, warm, Vlaams, nuchter (strategienota §4)
   Ontworpen voor één duim met een kind op de arm. */
:root {
  --gras: #2E7D46;
  --gras-donker: #1F3A2A;
  --zon: #F2B705;
  --creme: #FAF7F0;
  --wit: #FFFFFF;
  --inkt: #26382C;
  --lijn: #E5E0D4;
  --rood: #C0392B;
  --r: 16px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--creme); color: var(--inkt);
  font: 16px/1.55 Inter, system-ui, sans-serif;
  padding-bottom: 84px; /* ruimte voor tabbalk */
}
h1, h2, h3, .logo { font-family: Nunito, Inter, sans-serif; color: var(--gras-donker); }
h1 { font-size: 1.7rem; font-weight: 800; margin: .4rem 0 .6rem; }
h2 { font-size: 1.15rem; font-weight: 800; margin: 1.2rem 0 .5rem; }
a { color: var(--gras); }
.page { max-width: 680px; margin: 0 auto; padding: 12px 16px 24px; }

/* Topbar */
.topbar { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; max-width: 680px; margin: 0 auto; }
.logo { font-size: 1.5rem; font-weight: 800; color: var(--gras); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; }
.logo-vos { width: 30px; height: 30px; display: block; }
.logo-tekst { position: relative; display: inline-block; }
.gras { position: absolute; left: 0; bottom: -7px; width: 58px; height: 10px; }
.topnav a { font-weight: 600; text-decoration: none; padding: 10px; }

/* Antwoordblok — het signatuurelement: feitelijk antwoord bovenaan (SEO §5) */
.answer { background: var(--gras); color: var(--wit); border-radius: var(--r);
  padding: 14px 16px; font-weight: 600; margin: 4px 0 14px; }
.answer strong { color: var(--zon); }

/* Kaarten */
.card { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r);
  padding: 14px; margin-bottom: 12px; }
.card h3 { margin: 0 0 4px; font-size: 1.05rem; }
.card h3 a { color: var(--gras-donker); text-decoration: none; }
.meta { color: #5f6d63; font-size: .9rem; margin: 2px 0; }
.badges { margin: 6px 0 2px; }
.badge { display: inline-block; background: var(--creme); border: 1px solid var(--lijn);
  border-radius: 999px; padding: 3px 10px; font-size: .8rem; margin: 2px 4px 2px 0; }
.badge-free { background: var(--zon); border-color: var(--zon); color: var(--gras-donker); font-weight: 700; }
.badge-score { background: var(--gras); color: var(--wit); border-color: var(--gras); font-weight: 700; }

/* Knoppen — min. 44px tapdoel */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 10px 18px; border-radius: 999px; border: none;
  background: var(--gras); color: var(--wit); font: 700 1rem Nunito, sans-serif;
  text-decoration: none; cursor: pointer; }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--zon); outline-offset: 2px; }
/* Het hidden-attribuut moet ALTIJD winnen, ook van .btn { display: inline-flex }.
   Zonder deze regel stond de installatieknop op elk toestel zichtbaar. */
[hidden] { display: none !important; }
/* Installatietip: rustig, wegklikbaar, met iOS-uitleg */
.install-rij { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.install-weg { border: none; background: none; font-size: 1.3rem; line-height: 1;
  color: var(--gras-donker); opacity: .55; cursor: pointer; padding: 6px 10px; }
.install-weg:hover { opacity: 1; }
.install-uitleg { flex-basis: 100%; background: var(--wit); border: 1.5px solid var(--lijn);
  border-radius: 12px; padding: 10px 14px; font-size: .92rem; }
.btn-zon { background: var(--zon); color: var(--gras-donker); }
.btn-stil { background: var(--wit); color: var(--gras-donker); border: 1.5px solid var(--lijn); }
.btn-klein { min-height: 40px; padding: 6px 14px; font-size: .9rem; }
.acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.acties form { display: inline; }

/* Formulieren */
label { display: block; font-weight: 600; margin: 12px 0 4px; }
input[type=text], input[type=email], input[type=number], input[type=url],
input[type=search], input[type=password], input[type=tel], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--lijn);
  border-radius: 12px; background: var(--wit); font: inherit; }
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 10px 16px; min-height: 44px;
  border-radius: 999px; border: 1.5px solid var(--lijn); background: var(--wit);
  font-weight: 600; }
.chip input:checked + span { background: var(--gras); color: var(--wit); border-color: var(--gras); }
.chip input:focus-visible + span { outline: 3px solid var(--zon); }
.veldrij { display: flex; gap: 10px; }
.veldrij > * { flex: 1; }
.hint { color: #5f6d63; font-size: .85rem; margin-top: 4px; }

/* Smileys (Ravotscore) */
.smileys { display: flex; gap: 6px; font-size: 1.9rem; }
.smileys .chip span { padding: 8px 12px; font-size: 1.6rem; line-height: 1; }

/* Tabbalk */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--wit);
  border-top: 1px solid var(--lijn); display: flex; justify-content: space-around;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 50; }
.tabbar a { flex: 1; text-align: center; text-decoration: none; color: #5f6d63;
  font: 600 .72rem Inter, sans-serif; padding: 6px 2px; border-radius: 12px; min-height: 52px; }
.tabbar a.on { color: var(--gras); background: var(--creme); }
.tab-ico { display: block; font-size: 1.35rem; }

/* Flash + footer */
.flashes { max-width: 680px; margin: 0 auto; padding: 0 16px; }
.flash { border-radius: 12px; padding: 10px 14px; margin: 6px 0; font-weight: 600; }
.flash-ok { background: #E7F3EA; color: var(--gras-donker); }
.flash-error { background: #FBEAE8; color: var(--rood); }
.foot { max-width: 680px; margin: 24px auto 0; padding: 0 16px 20px; color: #77836f; font-size: .82rem; }
.foot a { color: inherit; }

/* Kaartweergave */
#map { height: 62vh; border-radius: var(--r); border: 1px solid var(--lijn); }

/* Reviews */
.review { border-top: 1px dashed var(--lijn); padding: 10px 0; }
.review .wie { font-weight: 700; color: var(--gras-donker); }

/* Tabellen (admin) */
table.simpel { width: 100%; border-collapse: collapse; background: var(--wit);
  border-radius: var(--r); overflow: hidden; }
table.simpel th, table.simpel td { text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--lijn); font-size: .9rem; }
table.simpel th { background: var(--gras); color: var(--wit); }

@media (prefers-reduced-motion: no-preference) {
  .card { transition: transform .12s ease; }
  .card:active { transform: scale(.99); }
}
@media (min-width: 720px) {
  h1 { font-size: 2rem; }
  body { padding-bottom: 96px; }
}

/* ===================================================================
   WEBSITE-JAS — warme, speelse landingspagina + rijkere app-sfeer
   =================================================================== */

/* Speelse achtergrond-textuur: zachte confetti-stippen */
body.met-sfeer {
  background-color: var(--creme);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(242,183,5,.10) 0 8px, transparent 9px),
    radial-gradient(circle at 88% 30%, rgba(46,125,70,.08) 0 10px, transparent 11px),
    radial-gradient(circle at 22% 78%, rgba(46,125,70,.06) 0 7px, transparent 8px),
    radial-gradient(circle at 78% 88%, rgba(242,183,5,.08) 0 9px, transparent 10px);
}

/* ---- HERO ---- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #3C9A5B 0%, var(--gras) 55%, var(--gras-donker) 100%);
  color: #fff; border-radius: 0 0 34px 34px;
  padding: 30px 20px 46px; margin: -12px -16px 0;
  text-align: center;
}
.hero-golf { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; display: block; }
.hero h1 {
  color: #fff; font-size: 2.15rem; line-height: 1.12; margin: 8px 0 10px;
  font-weight: 800; letter-spacing: -.5px;
}
.hero h1 .accent { color: var(--zon); }
.hero .lead { font-size: 1.08rem; opacity: .95; max-width: 30rem; margin: 0 auto 22px; }
.hero .cta-rij { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.hero .btn-groot { min-height: 54px; padding: 14px 26px; font-size: 1.08rem; box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.hero .mini { font-size: .82rem; opacity: .85; margin-top: 12px; }

/* zwevende emoji-ballonnen in de hero */
.floaties { position: absolute; inset: 0; pointer-events: none; }
.floaties span { position: absolute; font-size: 1.7rem; opacity: .8;
  animation: zweef 6s ease-in-out infinite; }
.floaties span:nth-child(1){ left: 8%; top: 22%; animation-delay: 0s;}
.floaties span:nth-child(2){ right: 10%; top: 16%; animation-delay: 1.4s; font-size: 1.4rem;}
.floaties span:nth-child(3){ left: 16%; bottom: 30%; animation-delay: .8s; font-size: 1.3rem;}
.floaties span:nth-child(4){ right: 14%; bottom: 26%; animation-delay: 2.1s;}
@keyframes zweef { 0%,100%{ transform: translateY(0) rotate(-4deg);} 50%{ transform: translateY(-12px) rotate(4deg);} }
@media (prefers-reduced-motion: reduce){ .floaties span { animation: none; } }

/* ---- SECTIES ---- */
.sectie { max-width: 680px; margin: 0 auto; padding: 26px 16px 6px; }
.sectie-titel { text-align: center; font-size: 1.4rem; margin: 8px 0 4px; }
.sectie-sub { text-align: center; color: #5f6d63; margin: 0 auto 20px; max-width: 32rem; }

/* Statistiek-band */
.stat-band { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  max-width: 680px; margin: 18px auto 0; padding: 0 16px; }
.stat { background: #fff; border: 2px solid var(--lijn); border-radius: 20px;
  padding: 14px 20px; text-align: center; min-width: 96px; }
.stat b { display: block; font-family: Nunito, sans-serif; font-size: 1.7rem; color: var(--gras); line-height: 1; }
.stat span { font-size: .8rem; color: #5f6d63; }

/* Feature-kaarten met kleuraccent */
.feature { display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 2px solid var(--lijn); border-radius: 22px;
  padding: 16px 18px; margin-bottom: 14px; }
.feature .emoji { font-size: 2rem; flex: 0 0 auto; width: 54px; height: 54px;
  display: grid; place-items: center; border-radius: 16px; background: var(--creme); }
.feature h3 { margin: 2px 0 4px; font-size: 1.1rem; }
.feature p { margin: 0; color: #4a5850; font-size: .94rem; }
.feature.geel .emoji { background: #FDF0C8; }
.feature.groen .emoji { background: #E3F1E7; }

/* Belofte-strip */
.beloftes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  max-width: 680px; margin: 6px auto; padding: 0 16px; }
.belofte { background: var(--gras-donker); color: #fff; border-radius: 999px;
  padding: 8px 16px; font-size: .86rem; font-weight: 600; }
.belofte b { color: var(--zon); }

/* Afsluitende call-to-action */
.slot-cta { text-align: center; background: var(--zon);
  border-radius: 26px; padding: 26px 20px; margin: 24px 16px 10px;
  max-width: 648px; margin-left: auto; margin-right: auto; }
.slot-cta h2 { margin: 0 0 6px; color: var(--gras-donker); }
.slot-cta p { margin: 0 0 16px; color: #7a5c00; }

/* Ravotscore-demo blokje */
.score-demo { background: #fff; border: 2px dashed var(--gras); border-radius: 20px;
  padding: 16px; text-align: center; max-width: 340px; margin: 8px auto 0; }
.score-demo .smiles { font-size: 1.6rem; letter-spacing: 2px; }
.score-demo .band { display: inline-block; background: var(--creme);
  border-radius: 999px; padding: 3px 12px; font-size: .82rem; margin: 4px 3px; }

/* Rijkere app-kaarten (doorgetrokken sfeer) */
.card { box-shadow: 0 2px 8px rgba(31,58,42,.05); }
.card h3 a:hover { text-decoration: underline; }
.answer { box-shadow: 0 4px 14px rgba(46,125,70,.2); }

/* Sfeervolle lege staat */
.leeg { text-align: center; padding: 20px; }
.leeg .groot-emoji { font-size: 3rem; display: block; margin-bottom: 8px; }

/* Dynamische kinderen-invoer */
.kind-rij { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.kind-rij input { flex: 1; }
.kind-weg { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  border: 1.5px solid var(--lijn); background: #fff; color: var(--rood);
  font-size: 1.3rem; cursor: pointer; line-height: 1; }
.kind-weg:hover { background: #FBEAE8; }
.kind-toevoegen { background: none; border: 1.5px dashed var(--gras); color: var(--gras);
  border-radius: 12px; padding: 8px 14px; font-weight: 600; cursor: pointer; min-height: 44px; }

/* Filterbalk Vandaag/Weekend */
.filterbalk { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px;
  margin: 0 -16px 8px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.filterbalk::-webkit-scrollbar { display: none; }
.filterchip { flex: 0 0 auto; background: #fff; border: 1.5px solid var(--lijn);
  border-radius: 999px; padding: 8px 14px; font-size: .88rem; font-weight: 600;
  color: var(--gras-donker); cursor: pointer; white-space: nowrap; user-select: none; }
.filterchip.aan { background: var(--gras); color: #fff; border-color: var(--gras); }
.filterchip:focus-visible { outline: 3px solid var(--zon); }

/* Thumbnails in de lijst */
.thumb-link { display: block; margin: -14px -14px 10px; border-radius: 16px 16px 0 0; overflow: hidden; }
.thumb { width: 100%; height: 150px; object-fit: cover; display: block; }
@media (min-width: 720px) { .thumb { height: 180px; } }

/* UiTinVlaanderen-verwijzing (publiq-richtlijn) */
.uit-verwijzing { border-top: 1px solid var(--lijn); margin-top: 14px; padding-top: 14px; }
.uit-inspiratie { font-weight: 600; color: var(--gras-donker); margin: 0 0 8px; }
.uit-inspiratie a { color: var(--gras); }
.uit-oproep { font-size: .8rem; color: #77836f; margin: 0 0 10px; }
.badge-vlieg { background: #E8F4EA; border-color: #B9DDC2; color: var(--gras-donker); font-weight: 600; }
.vlieg-legende { font-size: .82rem; color: #5f6d63; background: #F1F8F3;
  border-radius: 12px; padding: 8px 12px; margin: 4px 0 12px; }

/* Guest-navigatie (Pas aan / Home) */
.topnav { display: flex; gap: 4px; align-items: center; }
.nav-mini { font-size: .85rem; padding: 8px 12px; border-radius: 999px;
  background: var(--creme); border: 1.5px solid var(--lijn); text-decoration: none;
  color: var(--gras-donker); font-weight: 600; }
.nav-mini:hover { background: #fff; }

/* Zoekbalk */
.zoekrij { margin: 4px 0 10px; }
.zoekveld { width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 999px;
  border: 1.5px solid var(--lijn); background: #fff; font: inherit; }
.zoekveld:focus { outline: none; border-color: var(--gras); box-shadow: 0 0 0 3px rgba(46,125,70,.12); }

/* Resultaatteller (Baymard-inzicht: altijd feedback tonen) */
.resultaat-teller { color: #5f6d63; font-size: .86rem; font-weight: 600; margin: 2px 0 12px; }

/* Terug-link + event-kop met deelknop */
.terug-link { display: inline-block; color: var(--gras); font-weight: 600;
  text-decoration: none; margin: 0 0 6px; font-size: .92rem; }
.terug-link:hover { text-decoration: underline; }
.event-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.event-kop h1 { flex: 1; }
.deel-knop { flex: 0 0 auto; background: var(--gras); color: #fff; border: none;
  border-radius: 999px; padding: 9px 16px; font: 600 .9rem Nunito, sans-serif;
  cursor: pointer; min-height: 42px; white-space: nowrap; }
.deel-knop:hover { background: var(--gras-donker); }
.deel-knop:focus-visible { outline: 3px solid var(--zon); }

/* Vakantie-banner (fase 2) */
.vakantie-banner { background: linear-gradient(135deg, #F2B705, #F5C93A); color: #5a4500;
  border-radius: 16px; padding: 12px 16px; font-weight: 700; margin: 4px 0 12px;
  box-shadow: 0 3px 10px rgba(242,183,5,.25); }

/* Weer-hint (fase 3) */
.weer-hint { background: #E8EEF4; color: #2c4a63; border-radius: 14px;
  padding: 10px 14px; font-weight: 600; font-size: .92rem; margin: 4px 0 12px; }
.weer-hint.weer-zon { background: #FDF4D6; color: #6b5200; }

/* 2FA-enrollment QR */
.qr-box { display: inline-block; background: #fff; padding: 12px; border-radius: 16px;
  border: 2px solid var(--lijn); line-height: 0; }
.qr-box img, .qr-box svg { width: 240px; height: 240px; display: block; margin: 0 auto; }
.totp-secret { display: inline-block; background: var(--creme); border: 1px solid var(--lijn);
  border-radius: 8px; padding: 8px 14px; font-family: monospace; font-size: 1.05rem;
  letter-spacing: 2px; word-break: break-all; }

/* Inlogcode-invoer: groot en gecentreerd */
.code-invoer { font-size: 1.8rem; letter-spacing: 8px; text-align: center;
  font-family: monospace; max-width: 240px; }

/* ============ VERFIJNRONDE: nav, dashboard, kaart-acties ============ */

/* Nieuwe warme navigatiebalk met ronde iconen */
.tabbar { display: flex; justify-content: space-around; align-items: flex-end;
  background: #fff; border-top: 1px solid var(--lijn);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); position: sticky; bottom: 0;
  box-shadow: 0 -2px 12px rgba(31,58,42,.06); z-index: 40; }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; color: #8a978d; font-size: .68rem; font-weight: 600;
  padding: 4px 2px; border-radius: 14px; transition: color .15s; }
.tabbar a .tab-ico { display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; font-size: 1.25rem; background: transparent; transition: background .15s, transform .15s; }
.tabbar a.on { color: var(--gras-donker); }
.tabbar a.on .tab-ico { background: var(--creme); transform: translateY(-2px); }
.tabbar a:active .tab-ico { transform: scale(.9); }

/* Kaart-acties: altijd zichtbaar op elke kaart */
.kaart-acties { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mini-actie { flex: 1; min-width: 90px; display: inline-flex; align-items: center;
  justify-content: center; gap: 4px; background: var(--creme); border: 1.5px solid var(--lijn);
  border-radius: 999px; padding: 8px 10px; font: 600 .85rem Nunito, sans-serif;
  color: var(--gras-donker); cursor: pointer; text-decoration: none; }
.mini-actie:hover { background: #fff; border-color: var(--gras); }
.mini-actie.aan { background: #FBEAE8; border-color: var(--rood); color: var(--rood); }
.mini-actie form { display: contents; }

/* Personaliseer-banner op Ontdek */
.personaliseer-banner { display: flex; align-items: center; gap: 14px; justify-content: space-between;
  background: linear-gradient(135deg, #E3F1E7, #F1F8F3); border: 1.5px solid #B9DDC2;
  border-radius: 18px; padding: 14px 16px; margin: 4px 0 14px; }
.personaliseer-banner strong { color: var(--gras-donker); }
.personaliseer-banner p { margin: 2px 0 0; font-size: .86rem; color: #4a5850; }
.personaliseer-banner .btn { flex: 0 0 auto; }

/* Dashboard Mijn Ravot */
.dash-snel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0 20px; }
.dash-tegel { display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #fff; border: 1.5px solid var(--lijn); border-radius: 18px; padding: 12px 6px;
  text-decoration: none; color: #5f6d63; font-size: .72rem; font-weight: 600; text-align: center; }
.dash-tegel:hover { border-color: var(--gras); }
.dash-emoji { font-size: 1.5rem; }
.dash-cijfer { font-family: Nunito, sans-serif; font-size: 1.3rem; color: var(--gras); line-height: 1; }
@media (max-width: 380px) { .dash-snel { grid-template-columns: repeat(2, 1fr); } }

.mini-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mini-card .meta { font-size: .82rem; }
.badge-leeg { background: #f0efe9; color: #a09a88; }

section h2 { font-size: 1.25rem; margin: 22px 0 8px; }

/* ============ RESPONSIVE NAV + DESKTOP-LAYOUT ============ */

/* Desktop-nav en hamburger standaard verborgen; tabbar zichtbaar (mobile-first) */
.desktop-nav { display: none; }
.hamburger { display: none; }
.mobiel-menu { display: none; }

/* Hamburger-knop (mobiel) */
.hamburger { background: none; border: none; cursor: pointer; padding: 8px;
  flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; }
.hamburger span { display: block; width: 24px; height: 2.5px; background: var(--gras-donker);
  border-radius: 2px; transition: transform .2s, opacity .2s; }
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobiel dropdown-menu */
.mobiel-menu { flex-direction: column; background: #fff; border-bottom: 1px solid var(--lijn);
  padding: 8px 16px 14px; box-shadow: 0 6px 16px rgba(31,58,42,.08); }
.mobiel-menu.open { display: flex; }
.mobiel-menu a { padding: 12px 8px; text-decoration: none; color: var(--gras-donker);
  font-weight: 600; border-radius: 10px; font-size: 1.05rem; }
.mobiel-menu a.on { background: var(--creme); }

@media (max-width: 720px) {
  .hamburger { display: flex; }
}

/* ===== DESKTOP (breed scherm) ===== */
@media (min-width: 721px) {
  /* Onderbalk weg op desktop, bovenbalk-nav aan */
  .tabbar { display: none; }
  .desktop-nav { display: flex; align-items: center; gap: 6px; }
  .desktop-nav a { padding: 8px 14px; text-decoration: none; color: #5f6d63;
    font-weight: 600; border-radius: 999px; font-size: .98rem; transition: background .15s, color .15s; }
  .desktop-nav a:hover { background: var(--creme); color: var(--gras-donker); }
  .desktop-nav a.on { color: var(--gras-donker); background: var(--creme); }
  .desktop-nav a.nav-cta { background: var(--gras); color: #fff; }
  .desktop-nav a.nav-cta:hover { background: var(--gras-donker); color: #fff; }
  .desktop-nav a.nav-cta.on { background: var(--gras-donker); }

  .topbar { max-width: 1100px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

  /* Bredere content: kaarten in een raster i.p.v. één smalle kolom */
  .page { max-width: 1100px; }
  .page .card.kaart-event,
  .page article.card.kaart-event { }
  /* Lijst/ontdek: events in een grid van 2-3 kolommen op desktop */
  .lijst-grid, .page:has(.kaart-event) { }
}

/* Kaartenraster op brede schermen — toegepast op de lijst-containers */
@media (min-width: 721px) {
  .kaarten-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px; align-items: start; }
  .kaarten-raster .card { margin: 0; }
}

/* ============ NIEUWE RAVOTSCORE (emoji + schuifjes + tags) ============ */
.score-blok { margin-bottom: 22px; }
.score-vraag { display: block; font-weight: 700; color: var(--gras-donker); margin-bottom: 10px; font-size: 1.02rem; }
.score-vraag .hint { font-weight: 400; display: inline; }

/* Emoji-knoppen voor kinderscore */
.emoji-rij { display: flex; gap: 8px; justify-content: space-between; }
.emoji-keuze { flex: 1; cursor: pointer; }
.emoji-keuze input { position: absolute; opacity: 0; width: 0; height: 0; }
.emoji-bol { display: flex; align-items: center; justify-content: center; font-size: 1.9rem;
  aspect-ratio: 1; border: 2px solid var(--lijn); border-radius: 16px; background: #fff;
  transition: border-color .15s, background .15s, transform .1s; }
.emoji-woord { display: block; text-align: center; font-size: .68rem; color: #8a978d; margin-top: 3px; }
.emoji-keuze input:checked + .emoji-bol { border-color: var(--gras); background: #E3F1E7; transform: scale(1.08); }
.emoji-keuze input:focus-visible + .emoji-bol { box-shadow: 0 0 0 3px rgba(46,125,70,.3); }

/* Chip-keuze (ouderscore) */
.keuze-rij { display: flex; gap: 8px; }
.chip-keuze { flex: 1; cursor: pointer; }
.chip-keuze input { position: absolute; opacity: 0; }
.chip-keuze span { display: block; text-align: center; padding: 12px 8px; border: 2px solid var(--lijn);
  border-radius: 999px; font-weight: 600; color: var(--gras-donker); background: #fff; transition: all .15s; }
.chip-keuze input:checked + span { border-color: var(--gras); background: #E3F1E7; }

/* Karakter-schuifjes */
.schuif-blok { margin-bottom: 14px; }
.schuif-labels { display: flex; justify-content: space-between; font-size: .82rem;
  color: #5f6d63; margin-bottom: 2px; }
.schuif-cijfer { font-weight: 800; color: var(--gras); font-family: Nunito, sans-serif; }
.sfeer-schuif { width: 100%; accent-color: var(--gras); }

/* Pluspunt-tags */
.tag-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-keuze { cursor: pointer; }
.tag-keuze input { position: absolute; opacity: 0; }
.tag-keuze span { display: inline-block; padding: 8px 12px; border: 1.5px solid var(--lijn);
  border-radius: 999px; font-size: .88rem; color: #5f6d63; background: #fff; transition: all .15s; }
.tag-keuze input:checked + span { border-color: var(--gras); background: #E3F1E7; color: var(--gras-donker); }

/* Actie-aan-status (Leuk blijft zichtbaar) */
.btn.actie-aan { background: #E3F1E7; border-color: var(--gras); color: var(--gras-donker); }
.btn.actie-uit { background: #F1EEEA; border: 1.5px solid #b9b2a8; color: #6b6257; }
.mini-actie.aan-groen { background: #E3F1E7; border-color: var(--gras); color: var(--gras-donker); }

/* Weer-uitleg */
.weer-uitleg { font-size: .8rem; opacity: .8; cursor: help; text-decoration: underline dotted; margin-left: 6px; }

/* ============ HOMEPAGINA: 3 stappen ============ */
.stappen { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 8px; }
@media (min-width: 600px) { .stappen { grid-template-columns: repeat(3, 1fr); } }
.stap { background: #fff; border: 1.5px solid var(--lijn); border-radius: 16px; padding: 18px 16px; text-align: center; }
.stap-nr { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--gras); color: #fff; font-weight: 800; font-family: Nunito, sans-serif; font-size: 1.2rem; margin-bottom: 8px; }
.stap h3 { margin: 4px 0; color: var(--gras-donker); }
.stap p { margin: 0; font-size: .9rem; color: #5f6d63; }

/* Clickable kaart-titels in dashboard */
.mini-card a { text-decoration: none; color: var(--gras-donker); }
.mini-card a:hover { text-decoration: underline; }

/* ============ KAART-FICHE (popup bij klik op bolletje) ============ */
.fiche-popup .leaflet-popup-content-wrapper { border-radius: 16px; padding: 0; overflow: hidden;
  box-shadow: 0 8px 28px rgba(31,58,42,.18); }
.fiche-popup .leaflet-popup-content { margin: 0; width: 260px !important; }
.kaart-fiche { font-family: Nunito, sans-serif; }
.fiche-img { width: 100%; height: 120px; object-fit: cover; display: block; }
.fiche-body { padding: 12px 16px 16px; }
.fiche-titel { display: block; font-size: 1.02rem; color: var(--gras-donker); line-height: 1.25; margin-bottom: 4px; }
.fiche-meta { font-size: .82rem; color: #5f6d63; margin-bottom: 8px; }
.fiche-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.fiche-badge { font-size: .72rem; padding: 3px 9px; border-radius: 999px; background: #f0efe9;
  color: #5f6d63; font-weight: 600; white-space: nowrap; }
.fiche-badge.groen { background: #E3F1E7; color: var(--gras-donker); }
.fiche-badge.geel { background: #FDF0C8; color: #7a5c00; }
.fiche-badge.grijs { background: #f0efe9; color: #a09a88; }
.fiche-knop { display: block; text-align: center; background: var(--gras); color: #fff !important;
  padding: 10px 14px; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: .9rem;
  white-space: nowrap; }
.fiche-knop:hover { background: var(--gras-donker); }

/* ============ KAART-PINS (mooie speldjes i.p.v. kale bolletjes) ============ */
.rv-pin-wrap { background: none; border: none; }
.rv-pin { position: relative; width: 34px; height: 44px;
  filter: drop-shadow(0 3px 4px rgba(31,58,42,.28)); }
.rv-pin::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 34px; height: 34px; background: var(--pin); border-radius: 50% 50% 50% 0;
  transform: translateX(-50%) rotate(-45deg); border: 2.5px solid #fff; }
.rv-pin-ico { position: absolute; left: 50%; top: 15px; transform: translate(-50%, -50%);
  font-size: 15px; line-height: 1; z-index: 1; }

/* Partner-pin: groter, oranje met gele rand + sterretje — eerlijk uitgelicht */
.rv-pin-partner { position: relative; width: 48px; height: 60px;
  filter: drop-shadow(0 4px 6px rgba(238,128,53,.45)); }
.rv-pin-partner::before { content: ""; position: absolute; left: 50%; top: 0;
  width: 48px; height: 48px; background: #EE8035; border-radius: 50% 50% 50% 0;
  transform: translateX(-50%) rotate(-45deg); border: 3px solid #F4B233; }
.rv-pin-partner .rv-pin-ico { top: 21px; font-size: 20px; }
.rv-pin-ster { position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  font-size: 15px; z-index: 2; }

/* Legende onder de kaart */
.kaart-legende { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 10px 0 4px;
  font-size: .82rem; color: #5f6d63; }
.kaart-legende span { display: inline-flex; align-items: center; gap: 5px; }
.leg-bol { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); display: inline-block; }

/* ============ COOKIEBANNER ============ */
.cookiebanner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: #fff; border-top: 2px solid var(--lijn); box-shadow: 0 -4px 20px rgba(31,58,42,.12);
  padding: 16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) 16px; }
.cb-inhoud { max-width: 800px; margin: 0 auto; }
.cb-tekst { margin: 0 0 10px; font-size: .9rem; color: #3d4a42; line-height: 1.5; }
.cb-keuzes { display: flex; gap: 18px; margin-bottom: 12px; flex-wrap: wrap; }
.cb-optie { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--gras-donker); font-weight: 600; }
.cb-verplicht { color: #a09a88; font-weight: 400; font-size: .8rem; }
.cb-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 480px) { .cb-knoppen .btn { flex: 1; } }

/* ============ ADMIN: tabellen, editor, nav ============ */
.admin-tabel { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .9rem; }
.admin-tabel th, .admin-tabel td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--lijn); }
.admin-tabel th { color: #5f6d63; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.pil { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.pil.groen { background: #E3F1E7; color: var(--gras-donker); }
.pil.grijs { background: #f0efe9; color: #a09a88; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 6px 4px; margin-top: 16px; font-size: .92rem; }

/* Markdown-editor */
.md-editor { border: 1.5px solid var(--lijn); border-radius: 12px; overflow: hidden; }
.md-knoppen { display: flex; gap: 2px; background: var(--creme); padding: 6px; border-bottom: 1px solid var(--lijn); }
.md-knoppen button { width: 34px; height: 32px; border: 1px solid var(--lijn); background: #fff;
  border-radius: 8px; cursor: pointer; font-size: .95rem; }
.md-knoppen button:hover { background: #E3F1E7; border-color: var(--gras); }
.md-tekst { width: 100%; border: none; padding: 12px; font-family: ui-monospace, monospace;
  font-size: .92rem; line-height: 1.6; resize: vertical; }
.md-tekst:focus { outline: none; }

/* Bewerkte content-pagina weergave */
.content-body h1, .content-body h2, .content-body h3 { color: var(--gras-donker); }
.content-body p { line-height: 1.65; margin: 0 0 12px; }
.content-body ul, .content-body ol { padding-left: 22px; line-height: 1.65; }
.content-body a { color: var(--gras); }

/* ============ PAGINERING + FILTER-LABELS ============ */
.paginering { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 20px 0; }
.pag-teller { font-weight: 600; color: #5f6d63; font-size: .9rem; }
.filter-label { font-size: .82rem; color: #8a978d; align-self: center; margin-right: 2px; }
.filterbalk { margin-bottom: 8px; }

/* ============ ADMIN-LAYOUT met vaste linker-navigatie ============ */
.admin-layout { display: flex; gap: 24px; align-items: flex-start; }
.admin-sidebar { flex: 0 0 200px; position: sticky; top: 16px; }
.admin-merk { font-family: Nunito, sans-serif; font-weight: 800; font-size: 1.2rem;
  color: var(--gras-donker); margin-bottom: 14px; }
.admin-merk span { color: var(--gras); font-weight: 600; }
.admin-menu { display: flex; flex-direction: column; gap: 2px; }
.admin-menu a { display: block; padding: 10px 14px; border-radius: 10px; text-decoration: none;
  color: #3d4a42; font-weight: 600; font-size: .92rem; transition: background .12s; }
.admin-menu a:hover { background: #EFEAE0; }
.admin-menu a.on { background: var(--gras); color: #fff; }
.admin-menu .admin-uit { margin-top: 10px; color: #a05; }
.admin-inhoud { flex: 1; min-width: 0; }

@media (max-width: 720px) {
  .admin-layout { flex-direction: column; }
  .admin-sidebar { position: static; flex: none; width: 100%; }
  .admin-menu { flex-direction: row; flex-wrap: wrap; }
  .admin-menu a { font-size: .85rem; padding: 8px 11px; }
}

/* Statistiek-tegels */
.stat-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin: 16px 0 24px; }
.stat-tegel { background: #fff; border: 1.5px solid var(--lijn); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; }
.stat-cijfer { font-family: Nunito, sans-serif; font-size: 2rem; font-weight: 800;
  color: var(--gras); line-height: 1; }
.stat-label { font-weight: 700; color: var(--gras-donker); margin-top: 6px; font-size: .92rem; }
.stat-sub { color: #8a978d; font-size: .78rem; margin-top: 2px; }

.admin-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .admin-kolommen { grid-template-columns: 1fr; } }
.foot-bedrijf { color: #a09a88; font-size: .78rem; margin-top: 6px; }

/* Ingeklapt filterpaneel op Ontdek — rustiger dan vier rijen chips */
.meer-filters { margin: 8px 0 4px; }
.meer-filters > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 14px; border: 1.5px solid var(--lijn); border-radius: 999px;
  background: var(--wit); font-weight: 600; list-style: none; user-select: none; }
.meer-filters > summary::-webkit-details-marker { display: none; }
.meer-filters[open] > summary { background: #EFEAE0; }
.meer-filters .filter-punt { color: var(--gras); font-size: 1.3em; line-height: 0; }
.meer-filters-inhoud { padding: 12px 2px 4px; display: flex; flex-direction: column; gap: 8px; }
.filterrij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Kaart zonder echte foto: nette categorie-banner i.p.v. leeg beeldvak.
   Zelfde hoogte als een echte foto-thumb, zodat het raster gelijk blijft.
   De emoji ligt eronder; een echte foto komt er absoluut overheen. Faalt de
   foto (dode URL), dan verwijdert die zich (onerror) en zie je de emoji. */
.thumb-link { position: relative; }
.thumb-emoji { display: flex; align-items: center; justify-content: center;
  height: 150px; border-radius: 16px 16px 0 0; font-size: 2.8rem; }
.thumb-over { position: absolute; inset: 0; margin: 0; border-radius: 16px 16px 0 0; }
@media (min-width: 720px) { .thumb-emoji { height: 180px; } }
.thumb-emoji.c-buiten   { background: #E7F1E3; }
.thumb-emoji.c-natuur   { background: #E2F0E4; }
.thumb-emoji.c-cultuur  { background: #F3E9DE; }
.thumb-emoji.c-creatief { background: #F5E7EF; }
.thumb-emoji.c-sport    { background: #E4EDF7; }
.thumb-emoji.c-leren    { background: #EFEADD; }
.thumb-emoji.c-binnen   { background: #E9E9F2; }

/* Type-badge: maakt het soort uitstap meteen herkenbaar (speeltuin vs museum…) */
.badge-type { background: var(--gras); color: #fff; font-weight: 700; }

/* Ravot-waardig: menselijke goedkeuring, duidelijk maar niet schreeuwerig */
.badge-waardig { background: #eef6ee; color: var(--gras); border: 1.5px solid var(--gras); font-weight: 700; }
.curatie-melding { background: #eef6ee; border-radius: 10px; padding: 8px 12px; }

/* ---- Weerbericht (woonplaats of gezochte plaats) ---- */
.weer-bericht { display: flex; align-items: center; gap: 10px;
  background: linear-gradient(120deg, #eef6ff, #fdf7ec);
  border: 1px solid var(--lijn); border-radius: 14px;
  padding: 10px 14px; margin: 10px 0; font-size: 0.95rem; }
.weer-bericht .weer-emoji { font-size: 1.7rem; }
.weer-bericht em { color: var(--gras); font-style: normal; font-weight: 700; }

/* ---- Commercieel zonder Partner: gedempte fiche (afspraak 3c) ---- */
.kaart-gedempt { opacity: 0.82; filter: saturate(0.75); }
.kaart-gedempt .thumb, .kaart-gedempt .thumb-over { filter: grayscale(0.35); }

/* ---- Feestjes ---- */
.badge-feest { background: #fdeef5; color: #c2417f; border: 1.5px solid #e78ab5; font-weight: 700; }
.feest-cta { border-color: #e78ab5; background: #fff5fa; }
.feest-partner { align-items: center; gap: 12px; cursor: pointer; }
.feest-partner input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--gras); }
.feest-status-form select { padding: 6px 8px; border-radius: 10px; border: 1px solid var(--lijn); }

/* ---- Daguitstappen ---- */
.daguitstap-item { align-items: center; gap: 10px; }
.daguitstap-nr { min-width: 30px; height: 30px; border-radius: 50%;
  background: var(--oranje, #EE8035); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; }
.daguitstap-knopjes { display: flex; gap: 6px; }

/* ---- Ravotpas (gamification) ---- */
.ravotpas-kop { background: linear-gradient(120deg, #fdf3e7, #eef6ee); }
.ravotpas-niveau { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.ravotpas-emoji { font-size: 2.6rem; }
.ravotpas-balk { height: 12px; border-radius: 8px; background: #eee;
  overflow: hidden; margin: 6px 0 2px; max-width: 340px; }
.ravotpas-vul { height: 100%; border-radius: 8px;
  background: linear-gradient(90deg, var(--zon, #F4B233), var(--oranje, #EE8035)); }
.stempel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px; margin: 10px 0 18px; }
.stempel { display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--wit, #fff); border: 2px dashed var(--gras, #4CA362);
  border-radius: 14px; padding: 10px 6px; text-decoration: none; color: inherit;
  text-align: center; transition: transform 0.1s; }
.stempel:hover { transform: scale(1.04) rotate(-1deg); }
.stempel-emoji { font-size: 1.9rem; }
.stempel-naam { font-size: 0.78rem; font-weight: 700; line-height: 1.15; }
.stempel-plaats { font-size: 0.7rem; color: #888; }
.badge-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin: 10px 0 18px; }
.badge-kaart { display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--wit, #fff); border: 1px solid var(--lijn, #eee);
  border-radius: 14px; padding: 12px 8px; text-align: center; }
.badge-kaart.behaald { border-color: var(--zon, #F4B233); background: #fffaf0;
  box-shadow: 0 2px 8px rgba(244, 178, 51, 0.25); }
.badge-kaart.nog-niet { opacity: 0.65; filter: grayscale(0.5); }
.badge-kaart-emoji { font-size: 2rem; }

/* ---- Nakijk-banner (overstap naar geboortejaren) ---- */
.nakijk-banner { border: 2px solid var(--zon, #F4B233); background: #fffaf0; }

/* ---- Ontdek: filters in zijbalk (pc) / uitschuifpaneel (mobiel) ---- */
.ontdek-kop { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.filters-schakel { display: none; }
.ontdek-layout { display: grid; grid-template-columns: 230px 1fr; gap: 20px;
  align-items: start; }
.ontdek-zij { position: sticky; top: 12px; background: var(--wit, #fff);
  border: 1px solid var(--lijn, #eee); border-radius: 16px; padding: 14px; }
.zij-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.zij-kop strong { flex: 1; }
.zij-wis { font-size: 0.8rem; }
.zij-sluit { display: none; cursor: pointer; font-size: 1.1rem; padding: 4px 8px; }
.zij-groep { padding: 10px 0; border-top: 1px solid #f0ede6;
  display: flex; flex-wrap: wrap; gap: 6px; }
.zij-titel { display: block; width: 100%; font-size: 0.75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em; color: #77836f;
  margin-bottom: 2px; }
.zij-groep select { width: 100%; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--lijn, #ddd); background: #fff; }
.zij-toon { display: none; }
.filterknop { display: none; align-items: center; gap: 6px; cursor: pointer; }
.filter-teller { background: var(--oranje, #EE8035); color: #fff;
  border-radius: 999px; min-width: 20px; height: 20px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 0.75rem;
  font-weight: 800; padding: 0 5px; }

@media (max-width: 860px) {
  .ontdek-layout { grid-template-columns: 1fr; }
  .filterknop { display: inline-flex; }
  /* Paneel: standaard verborgen, via de schakel-checkbox als overlay erbij */
  .ontdek-zij { display: none; }
  .filters-schakel:checked ~ .ontdek-layout .ontdek-zij {
    display: block; position: fixed; inset: auto 0 0 0; top: 8vh; z-index: 60;
    border-radius: 20px 20px 0 0; overflow-y: auto; max-height: 92vh;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.25); }
  .filters-schakel:checked ~ .ontdek-layout::before {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.35);
    z-index: 50; }
  .zij-sluit { display: block; }
  .zij-toon { display: block; text-align: center; margin-top: 10px;
    position: sticky; bottom: 0; }
}

/* ---- Weergave-schakelaar Lijst/Kaart + kaartbalkje ---- */
.weergave-switch { display: inline-flex; border: 1.5px solid var(--gras, #4CA362);
  border-radius: 999px; overflow: hidden; margin-right: 4px; }
.weergave-switch a { padding: 6px 14px; text-decoration: none; font-size: 0.85rem;
  font-weight: 700; color: var(--gras, #4CA362); background: #fff; }
.weergave-switch a.aan { background: var(--gras, #4CA362); color: #fff; }
.kaart-balkje { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px; }
.ontdek-main #map { border-radius: 16px; }

/* ---- Dashboard-secties (uitstappen / feestje / gezin) ---- */
.dash-sectie { margin: 14px 0 18px; }
.dash-sectie-kop { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dash-sectie-kop h2 { margin: 0; }
.dash-feest { background: #fff5fa; border: 1.5px solid #f3cfe0;
  border-radius: 16px; padding: 12px 14px; }
.dash-feest .card { margin: 0; }


/* ---- Ontdek naast de zijbalk: compactere kaarten -> 3 kolommen op pc ---- */
.ontdek-layout .kaarten-raster { grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 12px; }

/* ---- Score-uitleg ---- */
.score-info { font-size: 0.75em; text-decoration: none; margin-left: 4px; }
.punten-tabel { width: 100%; border-collapse: collapse; }
.punten-tabel td { padding: 6px 4px; border-bottom: 1px solid #f0ede6; }
.punten-tabel td:last-child { text-align: right; font-weight: 800; color: var(--gras, #4CA362); }
.fiche-beeld { width: 100%; max-height: 340px; object-fit: cover;
  border-radius: 16px; margin: 10px 0; }

/* ---- Beloningenwinkel ---- */
.beloning-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px; margin: 12px 0; }
.beloning-kaart { display: flex; flex-direction: column; align-items: center;
  gap: 6px; text-align: center; margin: 0; }
.beloning-kaart.kan-niet { opacity: 0.72; }
.beloning-emoji { font-size: 2.4rem; }
.beloning-prijs { display: flex; flex-direction: column; gap: 2px; align-items: center; }

.verval-melding { background: #fff4dd; border: 1px solid var(--zon, #F4B233);
  border-radius: 10px; padding: 6px 10px; font-size: 0.85rem; display: inline-block; }

/* ---- Compacte, inklapbare filterzijbalk ---- */
.ontdek-zij { font-size: 0.86rem; }
.ontdek-zij details.zij-groep { margin: 0 0 4px; border-bottom: 1px solid #f0ede6; padding-bottom: 4px; }
.ontdek-zij summary.zij-titel { cursor: pointer; list-style: none; display: flex;
  align-items: center; gap: 6px; padding: 6px 2px; user-select: none; }
.ontdek-zij summary.zij-titel::-webkit-details-marker { display: none; }
.ontdek-zij summary.zij-titel::after { content: "▾"; margin-left: auto;
  font-size: 0.75em; color: #999; transition: transform 0.15s; }
.ontdek-zij details[open] summary.zij-titel::after { transform: rotate(180deg); }
.ontdek-zij summary.zij-titel b { color: var(--gras, #4CA362); font-size: 1.3em; line-height: 0; }
.ontdek-zij .filterchip { padding: 3px 9px; font-size: 0.82rem; margin: 2px 2px 2px 0; }
.ontdek-zij select { font-size: 0.85rem; padding: 5px 8px; max-width: 100%; }
@media (min-width: 900px) {
  .ontdek-zij { position: sticky; top: 12px; max-height: calc(100vh - 24px);
    overflow-y: auto; }
}

/* ---- Ravotpas-kaart op het dashboard ---- */
.pas-kop { display: flex; align-items: center; gap: 14px; text-decoration: none;
  color: inherit; border: 2px solid var(--zon, #F4B233); }
.pas-emoji { font-size: 2.2rem; }
.pas-tekst { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pas-balk { display: block; height: 8px; background: #f0ede6; border-radius: 6px;
  overflow: hidden; max-width: 260px; }
.pas-balk i { display: block; height: 100%; background: var(--gras, #4CA362); }
.pas-saldo { font-weight: 800; white-space: nowrap; }

.wissel-vouw summary { list-style: none; cursor: pointer; }
.wissel-vouw summary::-webkit-details-marker { display: none; }
.wissel-vouw form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.wissel-vouw textarea { width: 100%; font: inherit; padding: 6px 8px;
  border-radius: 8px; border: 1px solid #ddd6c8; }

.ai-balk { display: inline-block; width: 140px; height: 8px; background: #f0ede6;
  border-radius: 6px; overflow: hidden; vertical-align: middle; margin: 0 6px; }
.ai-balk i { display: block; height: 100%; background: var(--gras, #4CA362);
  transition: width 0.4s; }

.prik-kaart { height: 260px; border-radius: 14px; border: 1px solid #ddd6c8; }

/* ---- Nette, uitgelijnde footerlinks ---- */
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center;
  margin: 8px 0; }
.foot-links a { white-space: nowrap; }
.foot-intro { text-align: center; margin-bottom: 4px; }

/* ---- Uitlijning van filter- en actiebalken ---- */
.filterbalk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acties { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zoekbalk-admin { align-items: center; }
.zoekbalk-admin select, .zoekbalk-admin input { height: 38px; box-sizing: border-box; }
.btn-klein { display: inline-flex; align-items: center; gap: 4px; }

/* ---- Ravot-label (kwaliteitslabel, 3 niveaus) ---- */
.ravot-label { display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700; border-radius: 999px; padding: 2px 10px; font-size: .8rem;
  border: 1.5px solid currentColor; }
.ravot-label.label-brons  { color: #a06a2c; background: #f6ecdd; }
.ravot-label.label-zilver { color: #6b7280; background: #eef1f4; }
.ravot-label.label-goud   { color: #b8860b; background: #fbf3d5; }
h1 + .ravot-label { margin: 6px 0 0; font-size: .9rem; }

/* ---- Kampenmodule ---- */
.kamp-filter-rij { display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
  margin-bottom: 10px; }
.kamp-filter-rij label { display: flex; flex-direction: column; gap: 3px;
  font-size: .9rem; font-weight: 600; }
.kamp-prakt-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 10px 0; }
.kamp-prakt-filter .chip { display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid #d9dee5; border-radius: 999px; padding: 5px 12px;
  font-size: .85rem; font-weight: 600; cursor: pointer; background: #fff; }
.kamp-lijst { display: grid; gap: 14px; }
.kamp-kaart { display: flex; gap: 14px; align-items: flex-start; }
.kamp-thumb-link { flex: 0 0 auto; }
.kamp-thumb { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; }
.kamp-kaart-body { flex: 1 1 auto; min-width: 0; }
.kamp-kaart-body .meta { margin: 2px 0; }
.kamp-iconen { display: flex; gap: 8px; font-size: 1.1rem; margin: 6px 0; }
.kamp-info { margin: 14px 0; }
.kamp-info-rij { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 12px; }
.kamp-info-rij b { color: #4CA362; font-size: .85rem; }
.kamp-inbegrepen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.kamp-galerij { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px; margin: 14px 0; }
.kamp-galerij img { width: 100%; height: 120px; object-fit: cover; border-radius: 10px; }
.kamp-form h2 { font-size: 1.05rem; margin: 18px 0 8px; color: #4CA362; }
@media (max-width: 560px) {
  .kamp-kaart { flex-direction: column; }
  .kamp-thumb { width: 100%; height: 160px; }
}

/* ---- UiT-bronvermelding (publiq art. 5.4) ---- */
.uit-bron-overzicht, .uit-bron { font-size: .82rem; color: #77836f;
  text-align: center; margin: 10px 16px; }
.uit-bron-overzicht a, .uit-bron a { color: #4CA362; }

/* ---- Upload-hint (rechten) ---- */
.upload-hint { font-size: .82rem; color: #77836f; background: #f6f2e8;
  border-radius: 8px; padding: 7px 11px; margin: 0 0 8px; }
.foto-checklist { margin: 4px 0 14px; font-size: .9rem; }
.foto-checklist summary { cursor: pointer; font-weight: 600; color: #4CA362; }
.foto-checklist ul { margin: 8px 0; padding-left: 20px; }
.foto-checklist li { margin: 4px 0; }

/* ---- Betwisting van voorzieningen in review ---- */
.betwist-groep { margin-top: 14px; }
.tag-betwist span { color: #a03434; }
.tag-betwist input:checked + span { font-weight: 700; }

/* ---- Openingsuren: open/dicht-badge (3 kleuren) ---- */
.open-badge { font-weight: 700; border-radius: 999px; padding: 2px 10px;
  font-size: .8rem; display: inline-flex; align-items: center; gap: 4px; }
.open-badge.open-open  { color: #1f7a34; background: #e6f5ea; }
.open-badge.open-bijna { color: #9a6300; background: #fbf1dc; }
.open-badge.open-dicht { color: #a53434; background: #f9e7e7; }
h1 + .ravot-label + .open-badge, .ravot-label + .open-badge { margin-left: 6px; }
.openingsuren-blok { margin: 14px 0; }
.uren-tabel { width: 100%; max-width: 320px; border-collapse: collapse; }
.uren-tabel td { padding: 4px 8px; border-bottom: 1px solid #f0f0ec; }
.uren-dag { font-weight: 600; color: #4CA362; }
.uren-dicht { color: #a53434; }

/* ---- Partner-prijsblok (enkel jaarabonnement) ---- */
.partner-prijsblok { text-align: center; padding: 14px; background: #f2f9f4;
  border-radius: 10px; margin: 10px 0; }
.prijs-groot { font-size: 2rem; font-weight: 800; color: #4CA362; }
.prijs-per { font-size: 1rem; font-weight: 600; color: #77836f; }

/* ---- Uitbater-dashboard: statistieken + partner-upsell ---- */
.fiche-stats { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline;
  padding: 10px 0 4px; font-size: .9rem; color: #4a5568; }
.fiche-stats .stat-item strong { font-size: 1.15rem; color: #4CA362; }
.fiche-stats .stat-periode { font-size: .78rem; color: #99a; margin-left: auto; }
.partner-upsell { background: #f2f9f4; border-radius: 10px; padding: 12px 14px;
  margin-top: 8px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.partner-upsell .upsell-tekst { margin: 0; flex: 1; min-width: 220px; font-size: .9rem; }

/* ---- Partner-voordelen lijst ---- */
.partner-voordelen { list-style: none; padding: 0; margin: 8px 0; }
.partner-voordelen li { padding: 8px 0; border-bottom: 1px solid #f0f0ec;
  line-height: 1.5; }
.partner-voordelen li:last-child { border-bottom: none; }

/* ---- Beleven · Ravotten · Smullen filterbalk ---- */
.groepbalk { display: flex; gap: 8px; margin: 4px 0 16px; flex-wrap: wrap; }
.groep-knop { display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px; border: 2px solid #e3e6ea;
  background: #fff; color: #4a5568; font-weight: 600; font-size: .95rem;
  text-decoration: none; transition: all .12s; }
.groep-knop:hover { border-color: #c8cdd3; }
.groep-emoji { font-size: 1.1rem; }
.groep-knop.on { color: #fff; border-color: transparent; }
.groep-knop.on { background: #4CA362; }                 /* Alles = groen */
.groep-beleven.on { background: #8B5C9E; }              /* Beleven = paars */
.groep-ravotten.on { background: #4CA362; }             /* Ravotten = groen */
.groep-smullen.on { background: #EE8035; }              /* Smullen = oranje */
@media (max-width: 560px) {
  .groep-knop { padding: 8px 13px; font-size: .88rem; flex: 1; justify-content: center; }
}

/* ---- Uitgelicht partnerblok bovenaan de lijst ---- */
.partner-uitgelicht { background: #fff8f2; border: 2px solid var(--zon);
  border-radius: 14px; padding: 12px 14px 14px; margin-bottom: 18px; }
.partner-uitgelicht-kop { display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; flex-wrap: wrap; }
.partner-uitgelicht-sub { font-size: .82rem; color: #99857a; }
/* Partnerbadge (⭐): valt op in dezelfde gele huisstijl als het blok. */
.badge-partner { background: var(--zon); border-color: var(--zon);
  color: var(--gras-donker); font-weight: 700; }
/* Partnerblok op de gemeentepagina: zelfde uitstraling als .partner-uitgelicht. */
.card.partnerblok { background: #fff8f2; border: 2px solid var(--zon); }

/* ---- Voorzieningen-grid (admin bewerk): netjes leesbaar i.p.v. geknepen ---- */
.voorz-grid { display: grid; gap: 12px 16px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin: 8px 0; }
.voorz-item { display: flex; flex-direction: column; gap: 4px;
  font-size: .9rem; font-weight: 500; }
.voorz-item select { width: 100%; }

/* --- Compacte kop op gsm (patch 94) ------------------------------------
   De vandaag-pagina stapelde op mobiel drie banners plus de installatietip
   vóór de zoekbalk. Zelfde info, veel minder hoogte. */
@media (max-width: 640px) {
  .vakantie-banner { padding: 8px 12px; font-size: .88rem; margin: 2px 0 8px;
    border-radius: 12px; box-shadow: none; }
  .weer-bericht { padding: 7px 10px; margin: 4px 0 8px; font-size: .85rem; gap: 8px; }
  .weer-bericht .weer-emoji { font-size: 1.25rem; }
  .weer-bericht em { display: none; }   /* de knipoog mag op gsm weg */
  .weer-hint { padding: 8px 12px; font-size: .85rem; margin: 2px 0 8px; }
  .answer { padding: 9px 12px; font-size: .9rem; margin: 2px 0 8px; }
  .install-rij { margin: 2px 0 8px; }
  .install-rij .btn-klein { min-height: 38px; padding: 6px 12px; font-size: .88rem; }
}

/* Niet voor ons-overzicht op Mijn Ravot (patch 96) */
.weggeklikt-rij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin: 8px 0; }
.weggeklikt-rij a { font-weight: 700; flex: 1 1 auto; min-width: 160px; }
.weggeklikt-rij form { margin-left: auto; }

/* Gezinsleden-beheer op profiel (patch 97) */
.lid-rij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.lid-rij:last-of-type { border-bottom: none; }
.lid-rij span:first-child, .lid-rij strong { min-width: 0; overflow-wrap: anywhere; }
.lid-rij form { margin-left: auto; }
.lid-rij form + form { margin-left: 0; }
.lid-toevoegen { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.lid-toevoegen input[type=email] { flex: 1 1 220px; padding: 10px 14px;
  border: 1.5px solid var(--lijn); border-radius: 999px; font: inherit; }

/* Gemeente-bolletjes op de uitgezoomde kaart (patch 113) */
.gemeente-bol { background: none; border: 0; }
.gemeente-bol span { display: block; width: 46px; height: 46px; line-height: 46px;
  margin: 0 auto; border-radius: 50%; background: var(--oranje); color: #fff;
  font-weight: 800; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.25);
  border: 3px solid var(--zon); }
.gemeente-bol small { display: block; text-align: center; font-size: 11px;
  font-weight: 700; color: var(--donker); text-shadow: 0 1px 3px #FAF7F0,
  0 -1px 3px #FAF7F0, 1px 0 3px #FAF7F0, -1px 0 3px #FAF7F0; margin-top: 2px;
  white-space: nowrap; }

/* Uitnodiging om vrienden te koppelen (patch 115) */
.vrienden-uitnodiging { margin-top: 12px; background: #FDF0C8;
  border: 1.5px solid var(--zon); border-radius: 14px; padding: 12px 16px; }
.vrienden-uitnodiging p { margin: 0 0 10px; }
.zoek-hint { margin: 4px 0 10px; }

/* Personaliseer-banner: knoppen naast elkaar (patch 117) */
.personaliseer-banner .banner-acties { display: flex; gap: 8px; flex-shrink: 0; }

/* Zelf-curatie: help de fiche aanvullen (fase 1) — bescheiden & inklapbaar */
.help-aanvullen { margin: 16px 0; padding: 0 14px; background: #FBF6EA;
  border: 1px solid #E4D9BE; border-radius: 12px; }
.help-aanvullen > summary { list-style: none; cursor: pointer; padding: 12px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-weight: 600; }
.help-aanvullen > summary::-webkit-details-marker { display: none; }
.help-aanvullen > summary::after { content: "▾"; color: var(--gras);
  transition: transform .2s; }
.help-aanvullen[open] > summary::after { transform: rotate(180deg); }
.help-titel { flex: 1; }
.help-aantal { font-weight: 400; font-size: .82rem; color: #8A7C5C;
  background: #F0E7CF; border-radius: 999px; padding: 2px 9px; flex-shrink: 0; }
.help-aanvullen .hint { margin: 0 0 10px; }
.help-vragen { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.help-vraag { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 6px 0; border-top: 1px dashed #E4D9BE; }
.help-vraag:first-child { border-top: 0; }
.help-label { font-weight: 600; }
.help-knoppen { display: flex; gap: 6px; flex-shrink: 0; }
.help-knop { border: 1.5px solid var(--gras); background: #fff; color: var(--gras);
  border-radius: 999px; padding: 4px 14px; font-weight: 700; cursor: pointer;
  font-size: .95rem; }
.help-knop:hover { background: var(--gras); color: #fff; }
.help-knop.help-nee { border-color: #C0663B; color: #C0663B; }
.help-knop.help-nee:hover { background: #C0663B; color: #fff; }
.help-knop[aria-pressed="true"] { background: var(--gras); color: #fff; }
.help-knop.help-nee[aria-pressed="true"] { background: #C0663B; color: #fff; }
.help-knop:disabled { opacity: .5; cursor: default; }
.help-klaar { margin: 6px 0; color: var(--gras); font-weight: 700; }
/* herkomstbijschrift bij een voorziening */
.badge .bron-bij { font-weight: 400; opacity: .7; font-size: .85em; }

/* Fase 2: subkoppen en status in het aanvul-blok */
.help-subkop { margin: 10px 0 4px; font-weight: 700; font-size: .85rem;
  color: #8A7C5C; text-transform: uppercase; letter-spacing: .03em; }
.help-status { font-weight: 400; opacity: .7; font-size: .88em; }

/* ---- Opgeschoonde Vandaag-kop (punten 3-7) ---- */
/* Titel + weer-chip samen, weer rechts of eronder */
.vandaag-kop { display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 6px 12px; margin-bottom: 8px; }
.vandaag-kop h1 { margin: 0; }
.weer-chip { display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; color: #4a5850; background: #eef6ff; border-radius: 999px;
  padding: 4px 12px; white-space: nowrap; }
.weer-chip .weer-emoji { font-size: 1.15rem; }

/* Compacte personaliseer-strook: tekst links, knoppen rechts, op één regel */
.personaliseer-banner.compact { padding: 8px 14px; margin: 0 0 10px;
  border-radius: 999px; gap: 10px; }
.personaliseer-banner.compact .pers-tekst { font-size: .85rem; color: #4a5850;
  flex: 1 1 auto; min-width: 0; }
.personaliseer-banner .banner-acties { display: flex; gap: 6px; flex: 0 0 auto; }

/* Subtiele vakantie-lijn i.p.v. grote gele banner */
.vakantie-lijn { margin: 0 0 10px; font-size: .86rem; color: #7a6100;
  background: #fdf6e3; border-radius: 10px; padding: 6px 12px; }

/* Zoekveld met ingebouwde knop */
.zoekveld-wrap { position: relative; display: flex; align-items: center; }
.zoekveld-wrap .zoekveld { flex: 1; padding-right: 84px; }
.zoek-knop { position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  border: none; background: var(--gras); color: #fff; border-radius: 999px;
  padding: 8px 16px; font: 600 .9rem Nunito, sans-serif; cursor: pointer;
  min-height: 38px; }
.zoek-knop:hover { background: var(--gras-donker); }
.zoek-knop:focus-visible { outline: 3px solid var(--zon); }

/* Blogartikels */
.artikel-inhoud img { max-width: 100%; height: auto; border-radius: 10px; }
.artikel-inhoud h2 { margin-top: 22px; }

/* Fotogalerijen op de fiche ("De zaak", "Foto's van gezinnen"): raster met
   vaste hoogte i.p.v. beelden op volle 1600px-breedte. */
.foto-galerij { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px; }
.foto-galerij figure { margin: 0; }
.foto-galerij img { width: 100%; height: 160px; object-fit: cover;
  border-radius: 10px; display: block; }

/* Lightbox voor fichefoto's */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(20,25,20,.92);
  display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox .lb-houder { max-width: 92vw; max-height: 88vh; overflow: auto; }
.lightbox img { max-width: 92vw; max-height: 84vh; display: block; margin: auto;
  border-radius: 8px; cursor: zoom-in; }
.lightbox.lb-zoom .lb-houder { cursor: grab; }
.lightbox.lb-zoom img { max-width: none; max-height: none; width: 180vw; cursor: zoom-out; }
.lightbox button { position: absolute; background: rgba(255,255,255,.12); color: #fff;
  border: 0; font-size: 26px; border-radius: 50%; width: 44px; height: 44px;
  cursor: pointer; }
.lightbox .lb-sluit { top: 14px; right: 14px; }
.lightbox .lb-vorige { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-volgende { right: 10px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-hint { position: absolute; bottom: 10px; width: 100%;
  text-align: center; color: #cfd8cf; font-size: 13px; margin: 0; }
.foto-galerij img[data-lightbox] { cursor: zoom-in; }

/* Deelpaneel: kanaalknoppen onder de Deel-knop */
.deelpaneel { position: absolute; right: 0; z-index: 1200; background: #fff;
  border: 1px solid #e3e6ea; border-radius: 12px; padding: 8px;
  box-shadow: 0 6px 22px rgba(0,0,0,.14); display: flex;
  flex-direction: column; gap: 2px; min-width: 220px; }
.deelpaneel a, .deelpaneel button { display: block; width: 100%; text-align: left;
  padding: 9px 12px; border: 0; background: none; border-radius: 8px;
  font: inherit; color: #1F3A2A; text-decoration: none; cursor: pointer; }
.deelpaneel a:hover, .deelpaneel button:hover { background: #f2f7f3; }

/* Formulekiezer (patch 153) */
.formule-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px; margin: 12px 0; }
.formule-kaart { border: 2px solid #e3e6ea; border-radius: 14px; padding: 14px;
  cursor: pointer; display: block; background: #fff; }
.formule-kaart:has(input:checked) { border-color: #EE8035; box-shadow: 0 4px 14px rgba(238,128,53,.18); }
.formule-kaart input { margin-right: 6px; }
.formule-punten { margin: 8px 0 0; padding-left: 18px; font-size: 14px; }
.formule-vol { opacity: .55; cursor: not-allowed; }

/* Kaartfilters op de routepagina (patch 162) */
.kaart-filter.aan { background: #EE8035; color: #fff; border-color: #EE8035; }

/* Type-illustratie als fiche-hero (patch 165): iets lager en zachter dan een
   echte foto, zodat het eerlijk als illustratie leest. */
.fiche-beeld-illustratie { max-height: 220px; object-fit: contain;
  background: #FDF9F0; border-radius: 14px; }