/* ============================================================
   DorpsAgenda - styling
   ============================================================ */
:root{
    --prim:#2e6f40;
    --prim-d:#1f4d2c;
    --prim-l:#e9f3ec;
    --tekst:#23272e;
    --grijs:#5b6470;
    --licht:#f4f6f4;
    --rand:#dde3dc;
    --gevaar:#b3261e;
    --waarschuw:#b7791f;
    --ok:#2e6f40;
    --schaduw:0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.05);
    --r:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,
                "Noto Sans",sans-serif;
    color:var(--tekst);
    background:var(--licht);
    line-height:1.55;
}
a{color:var(--prim-d);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}

/* ---------- kopbalk ---------- */
.top{
    background:var(--prim);
    color:#fff;
    box-shadow:var(--schaduw);
    position:sticky;top:0;z-index:20;
}
.top .wrap{display:flex;align-items:center;gap:18px;padding-top:10px;padding-bottom:10px}
.logo{color:#fff;font-size:1.18rem;font-weight:700;display:flex;align-items:center;gap:8px}
.logo:hover{text-decoration:none}
.logo small{display:block;font-size:.72rem;font-weight:400;opacity:.85;line-height:1}
.logo-ico{font-size:1.4rem}
.menu{margin-left:auto;display:flex;align-items:center;gap:6px}
.menu a,.menu .user{
    color:#fff;padding:8px 12px;border-radius:8px;font-size:.95rem;
}
.menu a:hover{background:rgba(255,255,255,.15);text-decoration:none}
.menu a.actief{background:rgba(255,255,255,.22);font-weight:600}
.menu .uit{background:rgba(0,0,0,.18)}
.menu .user{font-style:italic;opacity:.9}
.menu-knop{display:none;cursor:pointer;font-size:1.4rem;color:#fff;padding:4px 8px}
.menu-toggle{display:none}

/* ---------- flash ---------- */
.flash{padding:12px 18px;border-radius:0 0 var(--r) var(--r);margin:0 auto;max-width:1080px;font-size:.95rem}
.flash-ok{background:#e3f4e8;color:#1f4d2c;border-left:4px solid var(--prim)}
.flash-fout{background:#fbe3e1;color:var(--gevaar);border-left:4px solid var(--gevaar)}
.flash-waarschuw{background:#fdf3df;color:var(--waarschuw);border-left:4px solid var(--waarschuw)}

/* ---------- algemeen ---------- */
main{padding:24px 18px;min-height:60vh}
h1{margin:.2em 0 .6em;font-size:1.7rem;color:var(--prim-d)}
h2{margin:.4em 0 .4em;font-size:1.2rem}
.kop{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.sub{color:var(--grijs);margin:.2em 0 1.4em}
.small{font-size:.82rem;color:var(--grijs)}

/* ---------- knoppen ---------- */
.btn{
    display:inline-block;border:1px solid var(--prim);background:var(--prim);
    color:#fff;padding:9px 16px;border-radius:8px;font-size:.95rem;cursor:pointer;
    text-decoration:none;font-weight:600;
}
.btn:hover{background:var(--prim-d);border-color:var(--prim-d);text-decoration:none}
.btn.sec{background:#fff;color:var(--prim-d)}
.btn.sec:hover{background:var(--prim-l)}
.btn.gevaar{background:var(--gevaar);border-color:var(--gevaar)}
.btn.gevaar:hover{background:#8e1d18}
.btn.klein{padding:6px 10px;font-size:.85rem}
.btn-lijn{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- kaartenraster ---------- */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.kaart{
    background:#fff;border:1px solid var(--rand);border-radius:var(--r);
    overflow:hidden;box-shadow:var(--schaduw);display:flex;flex-direction:column;
    transition:transform .12s ease, box-shadow .12s ease;
}
.kaart:hover{transform:translateY(-2px);box-shadow:0 4px 18px rgba(0,0,0,.1)}
.kaart .foto{height:160px;background:var(--prim-l) center/cover no-repeat;display:block}
.kaart .foto.leeg{
    background:var(--prim-l);display:flex;align-items:center;justify-content:center;
    font-size:2.4rem;color:var(--prim);
}
.kaart .inhoud{padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.kaart .datum{
    color:var(--prim);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;
}
.kaart h3{margin:0;font-size:1.08rem}
.kaart .vereniging{color:var(--grijs);font-size:.85rem}
.kaart .locatie{font-size:.85rem;color:var(--grijs)}
.kaart .bekijk{margin-top:auto;padding-top:8px}

/* ---------- detailpagina ---------- */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:26px;background:#fff;
    border:1px solid var(--rand);border-radius:var(--r);padding:24px;box-shadow:var(--schaduw)}
.detail .foto-groot{border-radius:8px;background:var(--prim-l) center/cover no-repeat;
    min-height:260px;display:flex;align-items:center;justify-content:center;color:var(--prim);font-size:4rem}
.detail .geen-foto{font-size:4rem}
.meta-rij{display:flex;gap:10px;align-items:flex-start;margin:.4em 0}
.meta-rij .lab{min-width:90px;color:var(--grijs);font-size:.9rem}
.beschrijving{margin-top:1em;line-height:1.6}

/* ---------- bijlagenlijst ---------- */
.bijlagen{margin-top:18px}
.bijlage{display:flex;align-items:center;gap:10px;padding:10px 12px;
    border:1px solid var(--rand);border-radius:8px;background:#fff;margin-bottom:8px}
.bijlage .ico{font-size:1.4rem}
.bijlage .naam{flex:1}
.bijlage .grootte{color:var(--grijs);font-size:.82rem}

/* ---------- formulieren ---------- */
.form{background:#fff;border:1px solid var(--rand);border-radius:var(--r);
     padding:22px;box-shadow:var(--schaduw);max-width:760px}
.veld{margin-bottom:16px}
.veld label{display:block;font-weight:600;margin-bottom:5px;font-size:.92rem}
.veld .hint{font-size:.82rem;color:var(--grijs);margin-top:4px}
.veld input[type=text],.veld input[type=password],.veld input[type=email],
.veld input[type=datetime-local],.veld input[type=url],.veld textarea,.veld select{
    width:100%;padding:10px 12px;border:1px solid var(--rand);border-radius:8px;
    font:inherit;background:#fff;color:var(--tekst);
}
.veld input:focus,.veld textarea:focus,.veld select:focus{
    outline:none;border-color:var(--prim);box-shadow:0 0 0 3px rgba(46,111,64,.18)
}
.veld textarea{min-height:130px;resize:vertical}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.checkbox{display:flex;align-items:center;gap:8px}
.checkbox input{width:auto}
.foutmelding{color:var(--gevaar);font-size:.9rem;background:#fbe3e1;
    padding:10px 14px;border-radius:8px;margin-bottom:14px}

/* ---------- tabel ---------- */
.tabel{width:100%;border-collapse:collapse;background:#fff;
    border:1px solid var(--rand);border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw)}
.tabel th,.tabel td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--rand)}
.tabel th{background:var(--prim-l);font-size:.85rem;color:var(--prim-d)}
.tabel tr:last-child td{border-bottom:none}
.tabel .acties{white-space:nowrap;display:flex;gap:8px}
.badge{font-size:.72rem;padding:2px 8px;border-radius:999px;font-weight:600}
.badge-aan{background:#e3f4e8;color:#1f4d2c}
.badge-uit{background:#f0f0f0;color:var(--grijs)}

/* ---------- leeg/kaal ---------- */
.kaal{text-align:center;padding:48px 18px;color:var(--grijs)}
.kaal .ico{font-size:3rem;display:block;margin-bottom:8px}

/* ---------- raster detail responsive ---------- */
@media (max-width:760px){
    .detail{grid-template-columns:1fr}
    .rij{grid-template-columns:1fr}
    .menu-knop{display:block}
    .menu{
        position:absolute;top:54px;right:0;left:0;background:var(--prim-d);
        flex-direction:column;align-items:stretch;gap:0;padding:6px 12px;
        max-height:0;overflow:hidden;transition:max-height .2s ease;
    }
    .menu-toggle:checked ~ .menu{max-height:340px}
    .menu a,.menu .user{border-radius:0;padding:12px 8px}
    .menu .uit{margin-bottom:6px}
}

/* ---------- zoekbalk ---------- */
.zoekveld{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;align-items:center}
.zoekveld input,.zoekveld select{
    padding:9px 12px;border:1px solid var(--rand);border-radius:8px;font:inherit;background:#fff}
.zoekveld input{flex:1;min-width:200px}

/* weergave tabs (komend / geschiedenis) */
.weergave-tabs{display:flex;gap:0;margin-bottom:18px}
.weergave-tabs a{
    padding:9px 18px;border:1px solid var(--rand);background:#fff;color:var(--grijs);
    text-decoration:none;font-weight:600;font-size:.95rem;
}
.weergave-tabs a:first-child{border-radius:8px 0 0 8px}
.weergave-tabs a:last-child{border-radius:0 8px 8px 0;border-left:none}
.weergave-tabs a.actief{background:var(--prim);color:#fff;border-color:var(--prim)}
.weergave-tabs a:hover:not(.actief){background:var(--prim-l);color:var(--prim-d)}

/* stat-blokje */
.stat{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.stat .blok{flex:1;min-width:140px;background:#fff;border:1px solid var(--rand);
    border-radius:var(--r);padding:14px 16px;box-shadow:var(--schaduw)}
.stat .blok .n{font-size:1.7rem;font-weight:700;color:var(--prim-d)}
.stat .blok .l{font-size:.82rem;color:var(--grijs)}

/* ---------- A-Z links pagina ---------- */
.az-spring{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.az-letter{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:8px;background:var(--prim);color:#fff;
    font-weight:700;text-decoration:none;font-size:1rem;
}
.az-letter:hover{background:var(--prim-d);text-decoration:none}
.az-sectie{margin-bottom:26px;scroll-margin-top:70px}
.az-kop{
    font-size:1.6rem;color:var(--prim-d);border-bottom:2px solid var(--prim);
    padding-bottom:6px;margin-bottom:14px;
}
.az-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.az-item{
    background:#fff;border:1px solid var(--rand);border-radius:8px;
    padding:12px 14px;display:flex;flex-direction:column;gap:4px;
}
.az-naam{font-weight:600;color:var(--prim-d)}
.az-naam:visited{color:var(--prim-d)}
a.az-naam:hover{color:var(--prim);text-decoration:underline}
.az-beschrijving{font-size:.85rem;color:var(--grijs)}

/* ---------- teller (over X dagen) ---------- */
.teller{
    display:inline-block;background:var(--prim-l);color:var(--prim-d);
    font-size:.82rem;font-weight:600;padding:2px 8px;border-radius:999px;
    margin-bottom:6px;
}
.teller-detail{
    display:inline-block;background:var(--prim-l);color:var(--prim-d);
    font-size:.9rem;font-weight:600;padding:4px 12px;border-radius:999px;
    margin:8px 0 4px;
}
.bezoek-teller{
    display:inline-block;margin-left:10px;font-size:.82rem;font-weight:400;
    color:var(--grijs);
}

/* ---------- video embed ---------- */
.video-wrap{
    position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;
    border-radius:8px;background:#000;
}
.video-wrap iframe,.video-wrap video{
    position:absolute;top:0;left:0;width:100%;height:100%;border:0;
}