/* =========================================================
   Licht thema (wens van de eigenaar): wit als basis, zwart als
   tweede kleur, goud alleen als subtiel accent.
   Laadt als laatste, na styles.css en admin.css.
   ========================================================= */
:root {
  --bg: #ffffff;
  --bg-2: #f7f5f0;
  --bg-3: #ece8df;
  --line: rgba(17, 17, 17, .14);
  --line-2: rgba(17, 17, 17, .08);
  --text: #141414;
  --muted: #5e5950;
  --gold: #8f6f33;
  --gold-2: #7a5c25;
  --gold-3: #b08d4c;
  --gold-grad: linear-gradient(115deg, #7a5c25 0%, #b8954f 48%, #94733a 100%);
  --ink: #111111;
  --ghost: rgba(17, 17, 17, .28);
  color-scheme: light;
}

/* zwarte blokken: lopende band, CTA, footer + lightbox, en de bewerkmodus/meldingen */
.marquee, .cta, .footer, .lightbox, .ed-bar, .ed-panel, .ed-photo, #toasts {
  --bg: #0d0d0d;
  --bg-2: #161616;
  --bg-3: #202020;
  --line: rgba(255, 255, 255, .14);
  --line-2: rgba(255, 255, 255, .08);
  --text: #f4f1ea;
  --muted: #a8a299;
  --gold: #c9a865;
  --gold-2: #e2c88f;
  --gold-grad: linear-gradient(115deg, #a8823f 0%, #e6cd94 40%, #c9a865 62%, #8f6c30 100%);
  --ghost: rgba(255, 255, 255, .3);
  color-scheme: dark;
  color: var(--text);
}

body::after { display: none; }                       /* geen filmkorrel op wit */
::selection { background: var(--ink); color: #fff; }

/* ---------- knoppen: zwart, goud alleen bij hover ---------- */
.btn--gold {
  background: var(--ink); color: #fff;
  box-shadow: 0 12px 28px -14px rgba(0,0,0,.45);
}
.btn--gold:hover { background: #000; box-shadow: 0 16px 34px -14px rgba(0,0,0,.55), inset 0 -2px 0 var(--gold-3); }
.btn--ghost { border-color: var(--ghost); color: var(--text); }
.btn--ghost:hover { border-color: var(--text); color: var(--text); }
/* in de zwarte blokken een witte hoofdknop */
.cta .btn--gold, .footer .btn--gold { background: #fff; color: var(--ink); }
.cta .btn--gold:hover, .footer .btn--gold:hover { background: #fff; box-shadow: inset 0 -2px 0 var(--gold); }
.btn:disabled { opacity: .55; }

/* ---------- logo: zwart op wit, goud in de zwarte footer ---------- */
.brand__logo { filter: none; }

/* ---------- nav & menu ---------- */
.nav.scrolled { background: rgba(255,255,255,.92); border-color: var(--line-2); box-shadow: 0 8px 30px -22px rgba(0,0,0,.35); }
.nav__links a { color: rgba(17,17,17,.68); }
.nav__links a:hover { color: var(--ink); }
.drawer { background: rgba(255,255,255,.98); }
.mbar { background: rgba(255,255,255,.94) !important; box-shadow: 0 14px 40px -18px rgba(0,0,0,.35); }
.mbar__call { color: var(--ink) !important; }

/* ---------- hero ---------- */
.hex { opacity: .09; }
.hex--faint { opacity: .05; }
.hero__glow { background: radial-gradient(circle, rgba(184,149,79,.10), transparent 62%); }
.card { box-shadow: 0 30px 60px -28px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.06); }
.card::after { background: linear-gradient(180deg, transparent 65%, rgba(0,0,0,.25)); }
.badge-open { background: rgba(255,255,255,.9); color: var(--ink); box-shadow: 0 12px 30px -16px rgba(0,0,0,.35); }
.rating { background: #fff; }
.rating:hover { border-color: var(--line); background: var(--bg-2); }
.rating__score { background: var(--ink); color: #fff; }
.scroll-hint { border-color: rgba(17,17,17,.25); }
.walkin { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 8px 22px -16px rgba(0,0,0,.3); }
.walkin::before { background: var(--ink); color: #fff; }

/* ---------- secties ---------- */
.about__media-sm { box-shadow: 0 26px 50px -24px rgba(0,0,0,.45); }
.menu__col { background: #fff; box-shadow: 0 20px 50px -40px rgba(0,0,0,.35); }
.menu__row i { border-bottom-color: rgba(17,17,17,.18); }
.menu__row b { color: var(--ink); }
.menu__featured .menu__row span { color: var(--ink); }
.tag { background: transparent; color: var(--gold); border: 1px solid rgba(143,111,51,.45); }
.gallery__item span { color: #fff; }
.gallery__item:hover span { color: #fff; }
.gallery__item::after { background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.7)); }
.quote { background: #fff; box-shadow: 0 18px 40px -34px rgba(0,0,0,.35); }
.avatar { background: var(--bg-2); color: var(--ink); }
.loc { background: #fff; box-shadow: 0 20px 50px -40px rgba(0,0,0,.35); }
.loc__map iframe { filter: grayscale(1) contrast(1.02); }
.checks li::before { color: var(--ink); }
.checks a { color: var(--ink); border-bottom-color: rgba(17,17,17,.35); }

/* ---------- boeken ---------- */
.book { background: #fff; box-shadow: 0 40px 80px -50px rgba(0,0,0,.4); }
.book__err { color: #b23a2a; }
.field input, .book select { background: #fff; border-color: var(--line); }
.field input::placeholder { color: #9b958b; }
.choice { background: #fff; border-color: var(--line); }
.choice:hover { border-color: var(--ink); }
.choice.is-active { border-color: var(--ink); background: var(--bg-2); }
.choice--row b, .bsum li.bsum__total strong { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); }
.days span, .slots span { border-color: var(--line); background: #fff; }
.days input:checked + span, .slots input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.days input:checked + span small, .days input:checked + span em { color: rgba(255,255,255,.75); }
.slots span:hover { border-color: var(--ink); }
.bstep__bar span { background: var(--ink); }
.bdone__ico { background: var(--ink); color: #fff; }
.bdone .bnote a { color: var(--ink); border-bottom-color: rgba(17,17,17,.35); }

/* ---------- zwarte blokken ---------- */
.marquee { background: var(--bg); border-color: var(--bg); }
.cta { background: var(--bg); }
.cta__bg::after { background: radial-gradient(ellipse at center, rgba(13,13,13,.72), rgba(13,13,13,.94) 70%); }
.footer { background: var(--bg); border-top: 0; }
.footer .brand__logo { filter: none; }
.lightbox { background: rgba(8,8,8,.95); }
.lightbox__nav:hover, .lightbox__close:hover { background: #fff; color: var(--ink); }

/* ---------- login & privacy ---------- */
.auth__card { background: #fff; box-shadow: 0 40px 90px -50px rgba(0,0,0,.4); }
.auth__demo { color: var(--gold-2); }
.pw__toggle { color: var(--ink); }
.legal p { color: #3a3732; }
.legal h2 { color: var(--ink); }
.legal a:not(.btn):not(.brand) { color: var(--ink); border-bottom-color: rgba(17,17,17,.35); }
.bnote--warn { color: #b23a2a; }
.auth__remember { margin-top: -4px; color: var(--muted); }
.auth__remember input { accent-color: var(--ink); }

/* =========================================================
   Agenda (beheer.html): wit, met zwart en een vleugje goud
   ========================================================= */
body.bh { background: var(--bg-2); }
body.bh .bh-top { background: rgba(255,255,255,.94); box-shadow: 0 8px 30px -24px rgba(0,0,0,.4); }
body.bh .bh-date input { color-scheme: light; }
body.bh .bh-icon:hover { border-color: var(--ink); color: var(--ink); }
body.bh .bh-icon.is-on { color: var(--gold); border-color: rgba(143,111,51,.45); }
body.bh .bh-live.is-off span { background: #c4462f; }
body.bh .bh-chip { color: var(--ink); border-color: var(--line); background: #fff; }
body.bh .bh-chip:hover { background: var(--bg-2); }
body.bh .bh-badge:not(:empty) { background: var(--ink); color: #fff; }
body.bh .bh-tabs button[aria-selected="true"]::after { background: var(--ink); }

body.bh .bh-wd { background: #fff; border-color: var(--line); }
body.bh .bh-wd.is-today { border-color: var(--ink); }
body.bh .bh-wd.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
body.bh .bh-wd.is-on small, body.bh .bh-wd.is-on em { color: rgba(255,255,255,.75); }
body.bh .bh-stats div { background: #fff; border-color: var(--line-2); box-shadow: 0 14px 30px -28px rgba(0,0,0,.4); }
body.bh .bh-closed { background: #fbeeea; color: #a2382a; }

body.bh .bh-timeline { background: #fff; border: 1px solid var(--line-2); border-radius: 16px; padding: 0 14px; }
body.bh .bh-row.is-outside { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(0,0,0,.025) 8px 16px); }
body.bh .bh-row.is-now::before { background: #c4462f; box-shadow: none; }
body.bh .bh-row.is-now .bh-row__time { color: #c4462f; }
body.bh .bh-free { color: rgba(94,89,80,.6); }
body.bh .bh-free:hover, body.bh .bh-free:focus-visible { color: var(--ink); border-color: var(--line); }

body.bh .bk { background: #fff; border-color: var(--line); border-left-color: var(--ink); box-shadow: 0 10px 24px -22px rgba(0,0,0,.5); }
body.bh .bk:hover { border-color: rgba(17,17,17,.3); border-left-color: var(--ink); }
body.bh .bk__time { color: var(--ink); }
body.bh .bk__note { color: var(--gold); }
body.bh .bk.s-done { border-left-color: #2f8a4a; background: linear-gradient(90deg, rgba(47,138,74,.07), #fff 60%); }
body.bh .bk.s-no { border-left-color: #c4462f; background: linear-gradient(90deg, rgba(196,70,47,.07), #fff 60%); }
body.bh .bk.s-x { border-left-color: #b9b4ab; background: #fff; }
body.bh .bk--block { border-left-color: #8a857c; background: repeating-linear-gradient(135deg, rgba(0,0,0,.035) 0 8px, #fff 8px 16px); }

body.bh .chip { border-color: var(--line); color: var(--muted); background: #fff; }
body.bh .chip.s-ok { border-color: rgba(17,17,17,.35); color: var(--ink); }
body.bh .chip.s-done { border-color: rgba(47,138,74,.45); color: #2f7a43; }
body.bh .chip.s-no { border-color: rgba(196,70,47,.45); color: #a2382a; }
body.bh .chip.s-x { color: #8a857c; }
body.bh .chip.s-block { color: #6d685f; }
body.bh .chip.s-web { border-color: rgba(143,111,51,.45); color: var(--gold); }
body.bh .t-no { color: #a2382a; }

body.bh .bh-search input { background: #fff; border-color: var(--line); }
body.bh .bh-group small, body.bh .bh-count { color: var(--muted); }
body.bh .cl { background: #fff; border-color: var(--line-2); }
body.bh .cl:hover { border-color: rgba(17,17,17,.3); }
body.bh .cl__av { background: var(--bg-2); color: var(--ink); }
body.bh .cl__stats b { color: var(--ink); }

body.bh .bh-fab__btn { background: var(--ink); color: #fff; box-shadow: 0 16px 34px -14px rgba(0,0,0,.5); }
body.bh .bh-fab__btn--ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 16px 34px -18px rgba(0,0,0,.35); }

body.bh .bh-modal { background: rgba(20,20,20,.45); }
body.bh .bh-modal__box { background: #fff; border-color: var(--line-2); box-shadow: 0 40px 90px -40px rgba(0,0,0,.55); }
body.bh .bh-dl a { color: var(--ink); border-bottom-color: rgba(17,17,17,.35); }
body.bh .bh-hist__row:hover { background: var(--bg-2); }
body.bh .bh-form input, body.bh .bh-form select { background: #fff; border-color: var(--line); color-scheme: light; }
body.bh .bh-form select option, body.bh .bh-form optgroup { background: #fff; color: var(--ink); }
body.bh .bh-link { color: var(--ink); }

body.bh .ed-btn--gold { background: var(--ink); color: #fff; }
body.bh .ed-btn--ghost { border-color: var(--ghost); color: var(--ink); }
body.bh .ed-btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
body.bh .ed-btn--ok { background: #eaf5ec; border-color: rgba(47,138,74,.45); color: #2f7a43; }
body.bh .ed-btn--danger { border-color: rgba(196,70,47,.45); color: #a2382a; }
body.bh .ed-btn--danger:hover { background: #fbeeea; }
body.bh .ed-check input { accent-color: var(--ink); }
body.bh .ed-x:hover { border-color: var(--ink); color: var(--ink); }