/* =========================================================
   De Pleats — nieuw ontwerp (testpagina.php)
   Mobile first · Bootstrap 5.3 · prefix dp-
   Structuur: 1 tokens · 2 basis · 3 topbar+header · 4 hero · 5 secties
              6 kaarten · 7 subpagina · 8 footer · 9 reserveerknop/-widget-finetuning
   ========================================================= */

/* 1 — tokens */
:root {
    --dp-gold: #baa368;
    --dp-gold-dark: #957d4a;
    --dp-gold-soft: #f6f2e8;
    --dp-ink: #26231d;
    --dp-muted: #6f6a5d;
    --dp-line: #e8e2d2;
    --dp-radius: 14px;
    --dp-shadow: 0 6px 22px rgba(38, 35, 29, .08);
    --dp-header-h: 60px;
    --bs-body-font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-color: var(--dp-ink);
    --bs-link-color: var(--dp-gold-dark);
    --bs-link-hover-color: var(--dp-ink);
}

/* 2 — basis */
html { scroll-padding-top: calc(var(--dp-header-h) + 12px); }
body.dp { font-size: 16px; line-height: 1.6; background: #fff; color: var(--dp-ink); padding-top: var(--dp-header-h); -webkit-font-smoothing: antialiased; }
body.dp h1, body.dp h2, body.dp h3, body.dp h4, body.dp h5, body.dp h6 { font-family: 'Montserrat', sans-serif; color: var(--dp-ink); letter-spacing: 0; line-height: 1.25; text-transform: none; }
.dp-section { padding: 2.25rem 0; }
.dp-section--tint { background: var(--dp-gold-soft); }
.dp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.dp-section-head h2 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.dp-eyebrow { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dp-gold-dark); margin-bottom: .2rem; }
.dp-more { color: var(--dp-gold-dark) !important; font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.dp-more:hover { text-decoration: underline; }
.dp .btn { border-radius: 999px; font-weight: 600; padding: .55rem 1.2rem; font-size: .95rem; }
.dp .btn-gold { --bs-btn-bg: var(--dp-gold); --bs-btn-border-color: var(--dp-gold); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--dp-gold-dark); --bs-btn-hover-border-color: var(--dp-gold-dark); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--dp-gold-dark); --bs-btn-active-border-color: var(--dp-gold-dark); --bs-btn-active-color: #fff; }
.dp .btn-outline-gold { --bs-btn-color: var(--dp-gold-dark); --bs-btn-border-color: var(--dp-gold); --bs-btn-hover-bg: var(--dp-gold); --bs-btn-hover-border-color: var(--dp-gold); --bs-btn-hover-color: #fff; }
.dp .btn-white { background: #fff; border-color: #fff; color: var(--dp-ink); }
.dp .btn-white:hover { background: var(--dp-gold-soft); border-color: var(--dp-gold-soft); }
.hidden { display: none !important; } /* widget-JS gebruikt .hidden */

/* 3 — topbar + header */
.dp-topbar { height: 32px; line-height: 22px; background: var(--dp-gold-dark); color: #fff; font-size: .8rem; text-align: center; padding: .35rem 1rem; line-height: 1.3; }
.dp-topbar a { color: #fff; text-decoration: none; font-weight: 500; }
.dp-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--dp-line); }
.dp-header .dp-bar { height: 60px; display: flex; align-items: center; gap: .6rem; }
.dp-logo img { height: 36px; width: auto; display: block; }
.dp-bar .dp-spacer { flex: 1; }
.dp-iconbtn { border: 0; background: transparent; color: var(--dp-ink); width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; text-decoration: none; }
.dp-iconbtn:hover { background: var(--dp-gold-soft); color: var(--dp-ink); }
.dp-lang > a { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--dp-ink); text-decoration: none; padding: .35rem .6rem; border-radius: 999px; }
.dp-lang > a:hover { background: var(--dp-gold-soft); }
.dp-lang .dropdown-menu { --bs-dropdown-min-width: 9rem; font-size: .9rem; border-color: var(--dp-line); border-radius: 12px; }
.dp-lang .dropdown-item.active, .dp-lang .dropdown-item:active { background: var(--dp-gold); }
.dp-desktop-nav { display: none; }
.dp-desktop-nav > ul { list-style: none; display: flex; gap: .15rem; margin: 0; padding: 0; }
.dp-desktop-nav a { display: block; padding: .5rem .7rem; color: var(--dp-ink); text-decoration: none; font-size: .88rem; font-weight: 500; border-radius: 8px; white-space: nowrap; }
.dp-desktop-nav a:hover, .dp-desktop-nav li.active > a { background: var(--dp-gold-soft); color: var(--dp-gold-dark); }
.dp-desktop-nav .dropdown-menu { border-color: var(--dp-line); border-radius: 12px; padding: .4rem; box-shadow: var(--dp-shadow); }
.dp-desktop-nav .dropdown-menu a { font-size: .88rem; }
.dp-book { padding: .45rem 1rem !important; font-size: .85rem !important; }
@media (min-width: 1200px) { .dp-desktop-nav { display: block; } .dp-burger { display: none !important; } }

/* offcanvas-menu (mobiel/tablet) */
.dp-offcanvas { --bs-offcanvas-width: min(88vw, 360px); }
.dp-offcanvas .offcanvas-header { border-bottom: 1px solid var(--dp-line); padding: .75rem 1rem; }
.dp-offcanvas .offcanvas-header img { height: 32px; }
.dp-offcanvas .offcanvas-body { padding: .5rem 0 1.5rem; }
.dp-mnav, .dp-mnav ul { list-style: none; margin: 0; padding: 0; }
.dp-mnav > li > a, .dp-mnav .dp-mnav-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .8rem 1.25rem; color: var(--dp-ink); text-decoration: none; font-weight: 600; font-size: 1rem; background: none; border: 0; text-align: left; }
.dp-mnav > li.active > a { color: var(--dp-gold-dark); }
.dp-mnav ul { background: var(--dp-gold-soft); padding: .25rem 0; }
.dp-mnav ul a { display: block; padding: .55rem 1.25rem .55rem 2rem; color: var(--dp-ink); text-decoration: none; font-size: .95rem; }
.dp-mnav .dp-mnav-toggle i { transition: transform .2s; font-size: .75rem; }
.dp-mnav .dp-mnav-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.dp-offcanvas-foot { padding: 1rem 1.25rem; border-top: 1px solid var(--dp-line); margin-top: .75rem; font-size: .9rem; color: var(--dp-muted); }

/* 4 — hero (compact, geen schermvulling) */
.dp-hero { position: relative; background: #1d1b17; }
.dp-hero .swiper { width: 100%; height: clamp(240px, 52vw, 460px); }
.dp-slide { position: relative; display: flex; align-items: flex-end; background-size: cover; background-position: center; color: #fff; }
.dp-slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 18, 14, .82) 0%, rgba(20, 18, 14, .35) 55%, rgba(20, 18, 14, .08) 100%); }
.dp-slide .dp-slide-body { position: relative; padding-top: 1.25rem; padding-bottom: 2.6rem; width: 100%; }
.dp-slide h2 { color: #fff; font-size: clamp(1.25rem, 4.6vw, 2.2rem); font-weight: 700; margin: 0 0 .35rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.dp-slide p { color: rgba(255, 255, 255, .92); font-size: .95rem; margin: 0 0 .85rem; max-width: 34rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dp-slide .btn { padding: .45rem 1rem; font-size: .88rem; }
.dp-hero .swiper-pagination-bullet { background: #fff; opacity: .6; }
.dp-hero .swiper-pagination-bullet-active { opacity: 1; background: var(--dp-gold); }
.dp-hero .swiper-pagination { bottom: .7rem !important; }

/* snelkoppelingen: horizontaal scrollbare chips */
.dp-chips { background: #fff; border-bottom: 1px solid var(--dp-line); }
.dp-chips-row { display: flex; gap: .5rem; overflow-x: auto; padding: .7rem 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dp-chips-row::-webkit-scrollbar { display: none; }
.dp-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; border: 1px solid var(--dp-line); border-radius: 999px; color: var(--dp-ink); background: #fff; font-size: .85rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.dp-chip:hover { border-color: var(--dp-gold); color: var(--dp-gold-dark); background: var(--dp-gold-soft); }
.dp-chip i { color: var(--dp-gold); font-size: .8rem; }
@media (min-width: 992px) { .dp-chips-row { justify-content: center; flex-wrap: wrap; } }

/* 5 — secties */
.dp-intro { display: grid; gap: 1.25rem; align-items: center; }
.dp-intro-img { aspect-ratio: 16 / 10; border-radius: var(--dp-radius); background-size: cover; background-position: center; }
.dp-intro h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: .6rem; }
.dp-intro-text { color: var(--dp-muted); }
.dp-intro-text p:last-child { margin-bottom: 0; }
@media (min-width: 768px) { .dp-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; } .dp-intro-img { aspect-ratio: 4 / 3; } .dp-section { padding: 3rem 0; } }

.dp-usps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.dp-usp { background: #fff; border: 1px solid var(--dp-line); border-radius: var(--dp-radius); padding: .9rem; display: flex; gap: .65rem; align-items: flex-start; font-size: .88rem; line-height: 1.4; }
.dp-usp i { color: var(--dp-gold); font-size: 1.05rem; margin-top: .15rem; }
.dp-usp p { margin: 0; }
@media (min-width: 992px) { .dp-usps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dp-usp { font-size: .95rem; } }

.dp-gallery { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
.dp-gallery a { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 1; }
.dp-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.dp-gallery a:hover img { transform: scale(1.05); }
@media (min-width: 768px) { .dp-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.dp-ta { text-align: center; }
.dp-ta h2 { font-size: 1rem; font-weight: 600; margin-bottom: .6rem; }

/* 6 — kaarten */
.dp-cards { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .dp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .dp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.dp-card { background: #fff; border: 1px solid var(--dp-line); border-radius: var(--dp-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--dp-shadow); }
.dp-card-img { aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--dp-gold-soft); }
.dp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-card-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.dp-card-tag { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dp-gold-dark); }
.dp-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.dp-card-text { font-size: .92rem; color: var(--dp-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dp-card-price { font-weight: 600; color: var(--dp-ink); font-size: .92rem; }
.dp-card .btn { margin-top: auto; align-self: flex-start; padding: .4rem .95rem; font-size: .85rem; }
.dp-card-body .dp-spacer { flex: 1; }
.modal-content { border-radius: var(--dp-radius); border: 0; }
.modal-title { font-size: 1.15rem; font-weight: 700; }

/* 7 — subpagina */
.dp-page-head { background: var(--dp-gold-soft); border-bottom: 1px solid var(--dp-line); padding: 1.4rem 0; }
.dp-page-head h1 { font-size: 1.6rem; font-weight: 700; margin: 0; }
.dp-crumb { font-size: .8rem; color: var(--dp-muted); margin-bottom: .25rem; }
.dp-crumb a { color: var(--dp-muted); text-decoration: none; }
.dp-page { display: grid; gap: 1.5rem; padding: 1.75rem 0; }
.dp-page-img { border-radius: var(--dp-radius); overflow: hidden; }
.dp-page-img img { width: 100%; display: block; }
.dp-page-img.is-cover { aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.dp-prose { font-size: 1rem; }
.dp-prose img { max-width: 100%; height: auto; border-radius: 10px; }
.dp-prose h2, .dp-prose h3 { margin-top: 1.4rem; font-size: 1.2rem; }
.dp-prose table { max-width: 100%; }
@media (min-width: 992px) { .dp-page.has-image { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: start; } .dp-page-head h1 { font-size: 2rem; } .dp-page-img { position: sticky; top: calc(var(--dp-header-h) + 20px); } }
.dp-resbtns { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.legacy { padding-bottom: 2rem; }
.legacy h4, .legacy h5, .legacy h6 { margin-top: 1.25rem; }
.legacy img { max-width: 100%; height: auto; }
.legacy .btn-green, .legacy .btn-rounded { background: var(--dp-gold); border-color: var(--dp-gold); color: #fff; border-radius: 999px; }
.legacy input[type=text], .legacy input[type=email], .legacy input[type=tel], .legacy input[type=number], .legacy select, .legacy textarea { max-width: 100%; }

/* 8 — footer */
.dp-footer { background: #2a261e; color: rgba(255, 255, 255, .82); font-size: .92rem; }
.dp-footer a { color: #fff; text-decoration: none; }
.dp-footer a:hover { color: var(--dp-gold); }
.dp-footer-main { padding: 2.25rem 0 1.25rem; display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .dp-footer-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 992px) { .dp-footer-main { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
.dp-footer h3 { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dp-gold); margin-bottom: .75rem; font-weight: 700; }
.dp-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.dp-footer img.dp-flogo { height: 38px; margin-bottom: .9rem; }
.dp-social { display: flex; gap: .5rem; margin-top: .9rem; }
.dp-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); display: inline-flex; align-items: center; justify-content: center; }
.dp-social a:hover { background: var(--dp-gold); border-color: var(--dp-gold); color: #fff; }
.dp-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 1rem 0 5.5rem; font-size: .8rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }

/* 9 — vaste knoppen (reserveren / kadobon) en widget-finetuning */
.fixed-reservation-btn { z-index: 1040; }
.dp-gift, .dp-gift:visited { color: var(--dp-ink) !important; } .dp-gift { position: fixed; z-index: 1035; left: 12px; bottom: 16px; background: #fff; color: var(--dp-ink); border: 1px solid var(--dp-line); box-shadow: var(--dp-shadow); border-radius: 999px; padding: .5rem .9rem; font-size: .85rem; font-weight: 600; text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; }
.dp-gift:hover { color: var(--dp-gold-dark); }
.dp-gift i { color: var(--dp-gold); }
.reservation-panel .form-control, .reservation-panel .form-select { display: block; width: 100%; }
.offcanvas:not(.show) { box-shadow: none; visibility: hidden; }
.dp-slide h2, .dp-slide p { color: #fff !important; }
.dp-slide h2 { text-transform: none; }
.panel-header h3 { color: #fff !important; }

/* 10 — overzichtspagina's (arrangementen, groepen) */
.dp-overview { padding: .5rem 0 2.5rem; }
.dp-filter { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 1rem; margin-bottom: .25rem; scrollbar-width: none; position: sticky; top: var(--dp-header-h); background: #fff; z-index: 5; }
.dp-filter::-webkit-scrollbar { display: none; }
.dp-filter .dp-chip { cursor: pointer; font-family: inherit; }
.dp-filter .dp-chip.is-on { background: var(--dp-gold); border-color: var(--dp-gold); color: #fff; }
.dp-group { padding-top: 1.5rem; }
.dp-group-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 .9rem; padding-bottom: .5rem; border-bottom: 2px solid var(--dp-gold); display: inline-block; }
.dp-card--text .dp-card-body { padding: 1.1rem 1.2rem 1.2rem; border-top: 3px solid var(--dp-gold); }
.dp-overview .dp-cards { gap: 1rem; }
@media (min-width: 992px) { .dp-overview .dp-cards { gap: 1.25rem; } }
@media (max-width: 991.98px) { .dp-page-img.is-cover { aspect-ratio: 21 / 9; } .dp-page-img img { max-height: 220px; width: 100%; object-fit: cover; } }

/* 11 — lees-meer-venster (modal): bottom sheet op mobiel, gecentreerde kaart op desktop */
.dp-modal .modal-dialog { margin: 0 auto; max-width: 620px; }
.dp-modal .modal-content { border: 0; border-radius: 22px; box-shadow: 0 24px 60px rgba(20, 18, 14, .28); overflow: hidden; }
.dp-modal .dp-modal-close { position: absolute; top: .75rem; right: .75rem; z-index: 3; width: 36px; height: 36px; padding: 0; border-radius: 50%; background-color: rgba(255, 255, 255, .92); background-size: .8rem; opacity: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.dp-modal .dp-modal-img { aspect-ratio: 16 / 9; background: var(--dp-gold-soft); }
.dp-modal .dp-modal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-modal .modal-body { padding: 1.35rem 1.35rem .5rem; }
.dp-modal .modal-title { font-size: 1.35rem; font-weight: 700; margin: 0 0 .75rem; padding-right: 2.5rem; }
.dp-modal .dp-prose { font-size: 1rem; line-height: 1.65; }
.dp-modal .modal-footer { border: 0; padding: .5rem 1.35rem 1.35rem; gap: .5rem; justify-content: flex-start; flex-wrap: wrap; }
.dp-modal .modal-footer .btn { margin: 0; }
.dp-modal .modal-footer .btn-light { background: transparent; border-color: var(--dp-line); color: var(--dp-muted); }
.modal-backdrop.show { opacity: .5; backdrop-filter: blur(3px); }
@media (max-width: 575.98px) {
    .dp-modal .modal-dialog { position: fixed; left: 0; right: 0; bottom: 0; max-width: none; margin: 0; min-height: 0; align-items: flex-end; max-height: 92vh; }
    .dp-modal .modal-content { border-radius: 22px 22px 0 0; max-height: 92vh; }
    .dp-modal.fade .modal-dialog { transform: translateY(100%); transition: transform .3s ease-out; }
    .dp-modal.show .modal-dialog { transform: none; }
    .dp-modal .modal-content::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(120, 112, 96, .45); z-index: 4; }
    .dp-modal .modal-footer .btn-gold, .dp-modal .modal-footer .btn-outline-gold { flex: 1 1 100%; }
}

/* 12 — leesbaarheid */
.dp-prose { line-height: 1.7; font-size: 1.02rem; color: #38342b; overflow-wrap: anywhere; }
.dp-prose p { margin-bottom: .9em; }
.dp-prose p:empty { display: none; }
.dp-prose br + br { display: block; content: ''; margin-top: .4em; }
.dp-prose a { color: var(--dp-gold-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.dp-prose a:hover { color: var(--dp-ink); }
.dp-prose a.btn { text-decoration: none; }
.dp-prose ul, .dp-prose ol { padding-left: 1.2rem; }
.dp-prose li { margin-bottom: .3rem; }
.dp-prose strong, .dp-prose b { color: var(--dp-ink); }
.dp-prose h2, .dp-prose h3, .dp-prose h4, .dp-prose h5, .dp-prose h6 { margin: 1.4em 0 .5em; }
.dp-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1rem 0; }
.dp-prose td, .dp-prose th { padding: .5rem .4rem; border-bottom: 1px solid var(--dp-line); vertical-align: top; }
.dp-page .dp-prose { max-width: 46rem; }
.dp-page.has-image .dp-prose { max-width: none; }
.dp-page { padding: 1.25rem 0 1.5rem; gap: 1.1rem; }
.dp-page-head { padding: 1rem 0; }
.dp-page-head h1 { font-size: 1.5rem; }
/* inhoudsblokken van legacy-pagina's */
.legacy { max-width: none; width: 100%; }
.legacy .container { padding: 0; }
.dp-group-title { font-size: 1.15rem; }
.dp-overview .dp-group:first-of-type { padding-top: .25rem; }

/* 13 — agenda */
.dp-agenda { display: grid; gap: 1rem; }
.dp-event { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); background: #fff; border: 1px solid var(--dp-line); border-radius: var(--dp-radius); overflow: hidden; box-shadow: var(--dp-shadow); }
.dp-event-img { display: block; aspect-ratio: 16 / 9; background: var(--dp-gold-soft); }
.dp-event-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-event-date { position: absolute; top: .7rem; left: .7rem; z-index: 2; background: #fff; border-radius: 12px; min-width: 52px; padding: .3rem .5rem; text-align: center; box-shadow: var(--dp-shadow); line-height: 1; }
.dp-event-date .d { display: block; font: 700 1.35rem 'Montserrat', sans-serif; color: var(--dp-ink); }
.dp-event-date .m { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--dp-gold-dark); margin-top: .15rem; }
.dp-event-body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .4rem; }
.dp-event-body h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.dp-event-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.dp-event-actions .btn { padding: .4rem .95rem; font-size: .85rem; }
@media (min-width: 768px) {
    .dp-event { grid-template-columns: 260px minmax(0, 1fr); }
    .dp-event-img { aspect-ratio: auto; min-height: 100%; }
    .dp-event-body { padding: 1.1rem 1.4rem; justify-content: center; }
}

/* 14 — accordeon (FAQ), lijsten, routes, galerij */
.dp-accordion { --bs-accordion-border-color: var(--dp-line); --bs-accordion-border-radius: 14px; --bs-accordion-inner-border-radius: 13px; --bs-accordion-active-bg: var(--dp-gold-soft); --bs-accordion-active-color: var(--dp-ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(186, 163, 104, .3); margin-bottom: 1.5rem; }
.dp-accordion .accordion-item { margin-bottom: .5rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--dp-line); }
.dp-accordion .accordion-button { font-size: .98rem; font-weight: 600; padding: .9rem 1rem; line-height: 1.35; }
.dp-accordion .accordion-body { padding: .25rem 1rem 1rem; }
.dp-linklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.dp-linklist a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .75rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--dp-line); border-radius: 14px; color: var(--dp-ink); text-decoration: none; background: #fff; }
.dp-linklist a:hover { border-color: var(--dp-gold); background: var(--dp-gold-soft); }
.dp-linklist span { grid-column: 1; font-size: .88rem; color: var(--dp-muted); }
.dp-linklist i { grid-row: 1 / span 2; grid-column: 2; color: var(--dp-gold); }
.dp-route { text-decoration: none; color: inherit; }
.dp-route:hover { border-color: var(--dp-gold); }
.dp-gallery--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .dp-gallery--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .dp-gallery--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dp-card-img img { transition: transform .4s; }
.dp-card:hover .dp-card-img img { transform: scale(1.04); }
a.dp-card:hover { transform: translateY(-2px); transition: transform .2s; }

/* 15 — formulieren (contact, kadobon, reserveren) */
.legacy .form-control, .legacy .form-select, .legacy select, .legacy input[type=text], .legacy input[type=email], .legacy input[type=tel], .legacy input[type=number], .legacy textarea { border: 1px solid var(--dp-line); border-radius: 12px; padding: .65rem .85rem; font-size: 1rem; width: 100%; background: #fff; }
.legacy .form-control:focus, .legacy select:focus, .legacy input:focus, .legacy textarea:focus { border-color: var(--dp-gold); box-shadow: 0 0 0 .2rem rgba(186, 163, 104, .25); outline: 0; }
.legacy label { font-size: .85rem; font-weight: 600; color: var(--dp-muted); margin-bottom: .25rem; }
.legacy button[type=submit], .legacy input[type=submit], .legacy .btn-green { border-radius: 999px; padding: .65rem 1.4rem; background: var(--dp-gold); border: 0; color: #fff; font-weight: 600; }

/* 16 — navbar (verbeterd) */
.dp-header { transition: transform .28s ease, box-shadow .2s; }
.dp-header.is-hidden { transform: translateY(-110%); }
.dp-header.is-scrolled { box-shadow: 0 4px 18px rgba(38, 35, 29, .08); }
.dp-desktop-nav a { position: relative; }
.dp-desktop-nav > ul > li > a::after { content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .25rem; height: 2px; background: var(--dp-gold); transform: scaleX(0); transition: transform .2s; }
.dp-desktop-nav > ul > li > a:hover::after, .dp-desktop-nav > ul > li.active > a::after { transform: scaleX(1); }
.dp-desktop-nav a:hover, .dp-desktop-nav li.active > a { background: transparent; color: var(--dp-gold-dark); }
@media (min-width: 1200px) { .dp-desktop-nav li.dropdown:hover > .dropdown-menu { display: block; margin-top: 0; } }
.dp-desktop-nav .dropdown-menu { min-width: 14rem; margin-top: .25rem; }
.dp-desktop-nav .dropdown-item { border-radius: 8px; white-space: normal; }
.dp-desktop-nav .dropdown-item:hover { background: var(--dp-gold-soft); color: var(--dp-gold-dark); }
.dp-offcanvas { border-left: 0; border-radius: 22px 0 0 22px; }
.dp-offcanvas .offcanvas-header { border: 0; padding: 1rem 1.25rem .5rem; }
.dp-mnav > li { border-bottom: 1px solid var(--dp-line); }
.dp-mnav > li > a, .dp-mnav .dp-mnav-toggle { padding: 1rem 1.25rem; font-size: 1.02rem; font-family: 'Montserrat', sans-serif; }
.dp-mnav > li.active > a { background: var(--dp-gold-soft); box-shadow: inset 3px 0 0 var(--dp-gold); }
.dp-mnav ul a { padding: .7rem 1.25rem .7rem 2.1rem; }
.dp-offcanvas-cta { padding: 1rem 1.25rem 0; display: grid; gap: .5rem; }
.dp-offcanvas-cta .btn { width: 100%; }
.dp-offcanvas-foot a { color: var(--dp-gold-dark); text-decoration: none; font-weight: 600; }
.dp-offcanvas-lang { display: flex; gap: .4rem; flex-wrap: wrap; padding: .75rem 1.25rem 0; }
.dp-offcanvas-lang a { padding: .3rem .8rem; border: 1px solid var(--dp-line); border-radius: 999px; font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--dp-ink); }
.dp-offcanvas-lang a.on { background: var(--dp-gold); border-color: var(--dp-gold); color: #fff; }

/* 11b — lees-meer-venster: compacter en rustiger (overschrijft 11) */
.dp-modal .modal-dialog { max-width: 500px; }
.dp-modal .modal-content { border-radius: 18px; }
.dp-modal .dp-modal-close { position: absolute; top: .6rem; right: .6rem; z-index: 5; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--dp-ink); font-size: 1.3rem; line-height: 1; box-shadow: 0 1px 6px rgba(0, 0, 0, .2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dp-modal .dp-modal-img { height: 150px; aspect-ratio: auto; overflow: hidden; }
.dp-modal .dp-modal-img img { width: 100%; height: 150px !important; max-width: none; object-fit: cover; }
.dp-modal .modal-body { padding: 1rem 1.15rem .25rem; }
.dp-modal .modal-title { font-size: 1.1rem; margin: .1rem 0 .5rem; padding-right: 2rem; line-height: 1.3; }
.dp-modal .dp-eyebrow { font-size: .68rem; }
.dp-modal .dp-prose { font-size: .94rem; line-height: 1.6; }
.dp-modal .dp-prose p { margin-bottom: .7em; }
.dp-modal .dp-prose img { max-height: 180px; width: auto; }
.dp-modal .modal-footer { padding: .4rem 1.15rem 1.1rem; }
.dp-modal .modal-footer .btn { font-size: .88rem; padding: .45rem 1.1rem; }
.dp-modal .dp-card-price { font-weight: 600; }
/* algemeen iets kleiner/rustiger */
.dp-section { padding: 1.75rem 0; }
.dp-section-head h2 { font-size: 1.15rem; }
.dp-card-body { padding: .85rem 1rem 1rem; }
.dp-card h3 { font-size: 1rem; }
.dp-card-text { font-size: .88rem; -webkit-line-clamp: 2; }
.dp-card-img { aspect-ratio: 16 / 8; }
.dp .btn { font-size: .88rem; padding: .45rem 1.05rem; }
.dp-hero .swiper { height: clamp(200px, 44vw, 380px); }
.dp-page-head h1 { font-size: 1.35rem; }
@media (max-width: 575.98px) { .dp-modal .modal-dialog { max-height: 85vh; } .dp-modal .modal-content { max-height: 85vh; border-radius: 18px 18px 0 0; } }

/* 17 — menukaart */
.dp-menu { display: grid; gap: 1rem; }
.dp-menu-sec { background: #fff; border: 1px solid var(--dp-line); border-radius: var(--dp-radius); padding: 1rem 1rem .6rem; box-shadow: var(--dp-shadow); }
.dp-menu-h { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-size: 1.02rem; font-weight: 700; letter-spacing: .01em; margin: 0 0 .6rem; padding-bottom: .55rem; border-bottom: 2px solid var(--dp-gold); }
.dp-menu-h em { font-style: normal; font-size: .9rem; font-weight: 700; color: var(--dp-gold-dark); white-space: nowrap; }
.dp-dishes { list-style: none; margin: 0 0 .4rem; padding: 0; }
.dp-dish { padding: .6rem 0; border-bottom: 1px solid var(--dp-line); }
.dp-dish:last-child { border-bottom: 0; }
.dp-dish-row { display: flex; align-items: baseline; gap: .6rem; }
.dp-dish .n { flex: 1; font-weight: 600; font-size: .96rem; line-height: 1.35; color: var(--dp-ink); }
.dp-dish .p { font-weight: 700; font-size: .92rem; color: var(--dp-gold-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dp-dish .dd { margin: .2rem 0 0; font-size: .85rem; line-height: 1.45; color: var(--dp-muted); }
.dp-dish--opt { padding: .35rem 0 .35rem 1rem; position: relative; border: 0; }
.dp-dish--opt::before { content: ''; position: absolute; left: .2rem; top: .95em; width: 5px; height: 5px; border-radius: 50%; background: var(--dp-gold); }
.dp-dish--opt .n { font-weight: 400; font-size: .93rem; }
.dp-menu-note { font-size: .82rem; color: var(--dp-muted); margin: .4rem 0 .6rem; padding: .55rem .75rem; background: var(--dp-gold-soft); border-radius: 10px; line-height: 1.5; }
.dp-menu-note.is-strong { font-weight: 600; background: transparent; padding: .3rem 0; color: var(--dp-ink); }
.dp-menu-link { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border: 1px solid var(--dp-gold); border-radius: 999px; font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--dp-gold-dark); background: #fff; }
.dp-menu-link:hover { background: var(--dp-gold); color: #fff; }
.dp-page--menu .dp-prose { max-width: none; }
@media (min-width: 768px) { .dp-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.1rem; } .dp-menu-sec:first-child:not(:has(.dp-menu-h)) { grid-column: 1 / -1; } .dp-menu-sec { padding: 1.1rem 1.25rem .7rem; } }
.dp-prose ul:not(.dp-dishes) { list-style: none; padding-left: 0; }
.dp-prose ul:not(.dp-dishes) li { position: relative; padding-left: 1.3rem; }
.dp-prose ul:not(.dp-dishes) li::before { content: '\f00c'; font-family: 'Font Awesome 6 Pro', 'Font Awesome 5 Pro'; font-weight: 900; position: absolute; left: 0; top: .05em; font-size: .75rem; color: var(--dp-gold); }
.dp-menu .dp-menu-h { margin-top: 0; }
.dp-prose .dp-dishes { padding-left: 0; }
.dp-prose .dp-dishes .dp-dish { padding-left: 0; }
.dp-prose .dp-dishes .dp-dish::before { content: none; }
.dp-prose .dp-dishes .dp-dish--opt { padding-left: 1rem; }
.dp-prose .dp-dishes .dp-dish--opt::before { content: ''; }
@media (min-width: 768px) {
    .dp-menu { display: block; column-count: 2; column-gap: 1.1rem; }
    .dp-menu-sec { break-inside: avoid; margin-bottom: 1.1rem; display: block; }
}
@media (min-width: 1400px) { .dp-page--menu:not(.has-image) .dp-menu { column-count: 3; } }

/* 18 — paginabanner: afbeelding achter de titel */
.dp-page-head.has-bg { position: relative; background-size: cover; background-position: center; border: 0; padding: 4.2rem 0 1.1rem; color: #fff; min-height: 150px; display: flex; align-items: flex-end; }
.dp-page-head.has-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 18, 14, .78), rgba(20, 18, 14, .22) 70%, rgba(20, 18, 14, .1)); }
.dp-page-head.has-bg .container { position: relative; }
.dp-page-head.has-bg h1, .dp-page-head.has-bg .dp-crumb, .dp-page-head.has-bg .dp-crumb a { color: #fff !important; }
.dp-page-head.has-bg h1 { text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.dp-page-head.has-bg .dp-crumb { opacity: .85; }
@media (min-width: 992px) { .dp-page-head.has-bg { min-height: 220px; padding-top: 6rem; padding-bottom: 1.6rem; } }
@media (min-width: 768px) { .dp-event-img { padding: .75rem; background: var(--dp-gold-soft); } .dp-event-img img { object-fit: contain; border-radius: 8px; } }

/* 17b — menukaart: één doorlopende lijst, gelijk verdeeld over de breedte (overschrijft 17) */
.dp-menu-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.dp-menu { display: block; column-count: 1; column-gap: 3rem; }
.dp-menu-sec { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 1.5rem; break-inside: auto; display: block; }
.dp-menu-h { break-after: avoid; margin: 0 0 .25rem; font-size: 1.05rem; letter-spacing: .02em; }
.dp-dishes { margin: 0; }
.dp-dish { break-inside: avoid; }
.dp-menu-note { break-inside: avoid; }
@media (min-width: 768px) {
    .dp-menu { column-count: 2; column-gap: 3rem; column-rule: 1px solid var(--dp-line); }
    .dp-menu-sec { padding: 0; margin-bottom: 1.75rem; }
}
@media (min-width: 1400px) { .dp-page--menu:not(.has-image) .dp-menu { column-count: 2; } }

/* 19 — knoppen: goed leesbaar (contrast >= 4.5:1) */
:root { --dp-gold-dark: #7a642d; --dp-btn: #8a7235; --dp-btn-hover: #6f5a28; }
.dp .btn-gold, .dp-prose a.btn-gold, .legacy a.btn-gold, .dp-modal .modal-footer .btn-gold { --bs-btn-bg: var(--dp-btn); --bs-btn-border-color: var(--dp-btn); --bs-btn-hover-bg: var(--dp-btn-hover); --bs-btn-hover-border-color: var(--dp-btn-hover); --bs-btn-active-bg: var(--dp-btn-hover); --bs-btn-active-border-color: var(--dp-btn-hover); background-color: var(--dp-btn); border-color: var(--dp-btn); color: #fff !important; text-shadow: none; opacity: 1; }
.dp .btn-gold:hover, .dp-prose a.btn-gold:hover, .legacy a.btn-gold:hover { background-color: var(--dp-btn-hover); border-color: var(--dp-btn-hover); color: #fff !important; }
.dp .btn-outline-gold { --bs-btn-color: var(--dp-gold-dark); --bs-btn-border-color: var(--dp-btn); --bs-btn-hover-bg: var(--dp-btn); --bs-btn-hover-border-color: var(--dp-btn); --bs-btn-hover-color: #fff; color: var(--dp-gold-dark); border-color: var(--dp-btn); background: #fff; }
.dp .btn-outline-gold:hover { background: var(--dp-btn); color: #fff !important; }
.dp-prose a.btn, .legacy a.btn { text-decoration: none; }
.legacy .btn-green, .legacy .btn-rounded, .legacy button[type=submit], .legacy input[type=submit], .legacy .btn-default.btn-green { background: var(--dp-btn) !important; border-color: var(--dp-btn) !important; color: #fff !important; opacity: 1; }
.legacy .btn-green:hover, .legacy button[type=submit]:hover, .legacy input[type=submit]:hover { background: var(--dp-btn-hover) !important; color: #fff !important; }
.dp-filter .dp-chip.is-on { background: var(--dp-btn); border-color: var(--dp-btn); color: #fff; }
.dp-menu-link { color: var(--dp-gold-dark); border-color: var(--dp-btn); }
.dp-menu-link:hover { background: var(--dp-btn); color: #fff; }
.fixed-reservation-btn, .btn-submit-modern, .panel-header { background: var(--dp-btn) !important; color: #fff !important; }
.fixed-reservation-btn *, .btn-submit-modern * { color: #fff !important; }
.dp-header .dp-book { color: #fff !important; }
.dp .btn-white { color: var(--dp-ink) !important; }
.dp-slide .btn-gold { box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.dp-topbar, .dp-topbar a { color: #fff; }
.dp-topbar { background: #6f5a28; }

/* 17c — koppen blijven bij hun gerechten */
.dp-menu-sec.is-short { break-inside: avoid; page-break-inside: avoid; }
.dp-menu-sec:not(.is-short) .dp-menu-h { break-after: avoid; page-break-after: avoid; }
.dp-menu-sec:not(.is-short) .dp-dishes > li:first-child { break-before: avoid; }
.dp-menu-note.is-strong { break-after: avoid; }
.dp-menu-note.is-label { background: transparent; padding: .35rem 0 .1rem; margin: .5rem 0 .1rem; font-weight: 600; font-style: italic; color: var(--dp-ink); break-after: avoid; }

/* 17d — korte menu's (keuzemenu, kindermenu): rijke kaarten */
.dp-menu--cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; column-count: auto; column-rule: 0; max-width: 62rem; margin-inline: auto; }
.dp-menu--cards .dp-menu-sec { background: linear-gradient(180deg, var(--dp-gold-soft), #fff 70%); border: 1px solid var(--dp-line); border-top: 4px solid var(--dp-gold); border-radius: 18px; padding: 1.25rem 1.25rem .75rem; margin: 0; box-shadow: var(--dp-shadow); }
.dp-menu--cards .dp-menu-h { border: 0; padding: 0; margin: 0 0 .75rem; flex-direction: column; align-items: flex-start; gap: .5rem; font-size: 1.2rem; }
.dp-menu--cards .dp-menu-h em { background: var(--dp-btn); color: #fff; padding: .25rem .8rem; border-radius: 999px; font-size: .95rem; letter-spacing: .02em; }
.dp-menu--cards .dp-dish--opt { padding: .5rem 0 .5rem 1.4rem; border-bottom: 1px dashed var(--dp-line); }
.dp-menu--cards .dp-dish--opt:last-child { border-bottom: 0; }
.dp-menu--cards .dp-dish--opt::before { top: 1.05em; left: .25rem; width: 7px; height: 7px; }
.dp-menu--cards .dp-menu-note.is-label { margin-top: .75rem; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-style: normal; color: var(--dp-gold-dark); }
@media (min-width: 768px) { .dp-menu--cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.dp-menu--cards:has(> .dp-menu-sec:only-child) { max-width: 34rem; margin-inline: 0; }

/* 20 — zijpaneel op desktop: benut de breedte bij korte pagina's */
.dp-aside { border: 1px solid var(--dp-line); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--dp-shadow); }
.dp-aside-photo { aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.dp-aside-body { padding: 1.1rem 1.25rem 1.25rem; }
.dp-aside-body h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 .3rem; }
.dp-aside-body p { font-size: .9rem; color: var(--dp-muted); margin-bottom: .9rem; }
@media (min-width: 992px) {
    .dp-page--aside { grid-template-columns: minmax(0, 1fr) 360px; gap: 3rem; align-items: start; padding: 2rem 0 2.5rem; }
    .dp-page--aside .dp-aside { position: sticky; top: calc(var(--dp-header-h) + 20px); }
    .dp-page--aside .dp-menu--cards:has(> .dp-menu-sec:only-child) { max-width: none; }
    .dp-page--aside .dp-prose { max-width: 48rem; }
}
.dp-menu--cards { align-items: stretch !important; } .dp-menu--cards .dp-menu-sec { height: 100%; }

/* 21 — lightbox */
body.dp-lb-open { overflow: hidden; }
.dp-lb { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(14, 12, 9, .96); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.dp-lb.is-open { opacity: 1; visibility: visible; }
.dp-lb-stage { margin: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 56px 12px 104px; position: relative; }
.dp-lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); transform: scale(.97); opacity: 0; transition: opacity .3s, transform .3s; }
.dp-lb.is-open:not(.is-loading) .dp-lb-stage img { opacity: 1; transform: none; }
.dp-lb-spin { position: absolute; width: 38px; height: 38px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--dp-gold); border-radius: 50%; animation: dp-spin .8s linear infinite; opacity: 0; }
.dp-lb.is-loading .dp-lb-spin { opacity: 1; }
@keyframes dp-spin { to { transform: rotate(360deg); } }
.dp-lb-btn { position: absolute; z-index: 3; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); cursor: pointer; transition: background .2s; }
.dp-lb-btn:hover, .dp-lb-btn:focus-visible { background: rgba(255, 255, 255, .28); outline: 0; }
.dp-lb-close { top: 12px; right: 12px; font-size: 1.7rem; line-height: 1; }
.dp-lb-prev, .dp-lb-next { top: 50%; margin-top: -23px; }
.dp-lb-prev { left: 12px; }
.dp-lb-next { right: 12px; }
.dp-lb-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem 1rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; background: linear-gradient(to top, rgba(14, 12, 9, .9), transparent); }
.dp-lb-count { color: rgba(255, 255, 255, .85); font-size: .8rem; font-weight: 600; letter-spacing: .08em; }
.dp-lb-strip { display: flex; gap: .4rem; max-width: 100%; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.dp-lb-strip::-webkit-scrollbar { display: none; }
.dp-lb-strip button { flex: 0 0 auto; width: 52px; height: 38px; border: 2px solid transparent; border-radius: 8px; padding: 0; background-size: cover; background-position: center; opacity: .55; cursor: pointer; transition: opacity .2s, border-color .2s; }
.dp-lb-strip button.on { opacity: 1; border-color: var(--dp-gold); }
@media (max-width: 575.98px) { .dp-lb-prev, .dp-lb-next { top: auto; bottom: 74px; margin: 0; } .dp-lb-stage { padding: 56px 8px 120px; } .dp-lb-strip button { width: 44px; height: 32px; } }

/* 22 — uniforme afbeeldingen: vaste verhouding, scherpe fill; staande afbeeldingen 'contain' op een vervaagde achtergrond */
.dp-card-img { position: relative; overflow: hidden; aspect-ratio: 16 / 9; }
.dp-card-img > img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }
.dp-modal .dp-modal-img, .dp-event-img { position: relative; overflow: hidden; background: var(--dp-gold-soft); }
.dp-modal .dp-modal-img::before, .dp-event-img::before { content: ''; position: absolute; inset: -24px; background: var(--bg) center / cover; filter: blur(22px) saturate(1.1); transform: scale(1.1); opacity: .9; }
.dp-modal .dp-modal-img img, .dp-event-img img { position: relative; z-index: 1; width: 100%; height: 100% !important; object-fit: cover; display: block; padding: 0; border-radius: 0; }
.dp-modal .dp-modal-img img.is-tall, .dp-event-img img.is-tall { object-fit: contain; }
.dp-modal .dp-modal-img { height: 190px; }
.dp-modal .dp-modal-img img { max-height: none; }
.dp-event-img { aspect-ratio: 16 / 9; padding: 0; background: var(--dp-gold-soft); }
@media (min-width: 768px) { .dp-event-img { padding: 0; } .dp-event-img img { border-radius: 0; } }

/* agenda: 1 kolom (mobiel), horizontale kaart (tablet), 2 kolommen verticale kaarten (desktop) */
@media (min-width: 992px) {
    .dp-agenda { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
    .dp-event { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .dp-event-img { aspect-ratio: auto; height: 210px; min-height: 0; }
    .dp-event-body { padding: 1rem 1.2rem 1.2rem; justify-content: flex-start; }
    .dp-event-actions { margin-top: auto; padding-top: .5rem; }
    .dp-event-body .dp-card-text { -webkit-line-clamp: 3; }
}
@media (min-width: 768px) and (max-width: 991.98px) { .dp-event { grid-template-columns: 280px minmax(0, 1fr); } .dp-event-img { aspect-ratio: auto; height: 100%; min-height: 190px; } }
.dp-route-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 768px) { .dp-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dp-cards--news { margin-top: .5rem; } @media (min-width: 992px) { .dp-cards--news { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 23 — contactpagina */
.dp-contact { display: grid; gap: 1.25rem; padding: 1.5rem 0 2rem; }
.dp-contact-info { display: grid; gap: .85rem; align-content: start; }
.dp-contact-card { background: #fff; border: 1px solid var(--dp-line); border-radius: var(--dp-radius); padding: 1rem 1.15rem; box-shadow: var(--dp-shadow); }
.dp-contact-card:first-child { background: linear-gradient(160deg, var(--dp-btn), #5f4c1e); border: 0; color: #fff; }
.dp-contact-card:first-child h2, .dp-contact-card:first-child a { color: #fff; }
.dp-contact-card:first-child .dp-fine { color: rgba(255, 255, 255, .75); border-color: rgba(255, 255, 255, .25); }
.dp-contact-card h2 { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; }
.dp-contact-card h2 i { width: 34px; height: 34px; border-radius: 50%; background: var(--dp-gold-soft); color: var(--dp-gold-dark); display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }
.dp-contact-card:first-child h2 i { background: rgba(255, 255, 255, .18); color: #fff; }
.dp-contact-card p { margin: 0; font-size: .95rem; line-height: 1.6; }
.dp-contact-card a { color: var(--dp-gold-dark); font-weight: 600; text-decoration: none; }
.dp-contact-card a:hover { text-decoration: underline; }
.dp-fine { margin-top: .6rem !important; padding-top: .55rem; border-top: 1px solid var(--dp-line); font-size: .78rem !important; color: var(--dp-muted); }
.dp-contact-side { display: grid; gap: 1rem; align-content: start; }
.dp-contact-form { background: var(--dp-gold-soft); border: 1px solid var(--dp-line); border-radius: 18px; padding: 1.25rem; }
.dp-contact-form h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .75rem; }
.dp-contact-form .legacy { padding: 0; }
.dp-contact-form .legacy .col-md-12 > p:first-child { display: none; }
.dp-contact-form .legacy .row { margin: 0; }
.dp-contact-form .legacy [class*="col-md-"] { width: 100%; margin: 0; padding: 0; }
.dp-contact-form .legacy .control-label { display: block; text-align: left; margin: .6rem 0 .25rem; padding: 0; }
.dp-contact-form .legacy label.control-label:empty { display: none; }
.dp-contact-form .legacy textarea { min-height: 110px; }
.dp-contact-form .legacy .btn { width: 100%; margin-top: .5rem; }
.dp-contact-map { border-radius: 18px; overflow: hidden; border: 1px solid var(--dp-line); aspect-ratio: 16 / 10; background: var(--dp-gold-soft); }
.dp-contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 768px) { .dp-contact-info { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dp-contact-card.is-wide { grid-column: 1 / -1; } .dp-contact-card:first-child { grid-column: 1 / -1; } }
@media (min-width: 992px) {
    .dp-contact { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; padding: 2rem 0 2.5rem; }
    .dp-contact-side { position: sticky; top: calc(var(--dp-header-h) + 20px); }
}
.dp-card-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .35rem; } .dp-card-actions .btn { margin: 0 !important; font-size: .8rem; padding: .4rem .85rem; }

/* 21b — lightbox: vervaagde achtergrond en opgeschaalde foto (bronbestanden zijn klein) */
.dp-lb::before { content: ''; position: absolute; inset: -60px; background: var(--lb-bg, none) center / cover; filter: blur(38px) brightness(.42) saturate(1.2); transition: background-image .3s; }
.dp-lb-stage img { max-width: none !important; max-height: none !important; image-rendering: auto; -ms-interpolation-mode: bicubic; }

/* 24 — reserveerknoppen: één nette rij */
.dp-card-actions--stack { flex-direction: column; align-items: stretch; gap: .6rem; margin-top: auto; padding-top: .5rem; }
.dp-readmore { align-self: flex-start; border: 0; background: none; padding: 0; font-weight: 600; font-size: .9rem; color: var(--dp-gold-dark); cursor: pointer; }
.dp-readmore:hover { text-decoration: underline; text-underline-offset: 3px; }
.dp-readmore i { font-size: .7rem; margin-left: .15rem; }
.dp-res-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; padding-top: .7rem; border-top: 1px solid var(--dp-line); }
.dp-res-label { grid-column: 1 / -1; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dp-muted); }
.dp-res-row .btn { width: 100%; padding: .5rem .4rem; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; }
.dp-resbtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; max-width: 30rem; margin: 1rem 0; }
.dp-resbtns .btn { width: 100%; }

/* 25 — agenda: foto links (vaak staand), tekst rechts; op alle schermformaten */
.dp-agenda { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; }
.dp-event { display: grid !important; grid-template-columns: 118px minmax(0, 1fr) !important; grid-template-rows: auto !important; align-items: stretch; }
.dp-event-img { aspect-ratio: auto !important; height: auto !important; min-height: 100% !important; min-width: 0; padding: 0 !important; }
.dp-event-img img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.dp-event-img img.is-tall { object-fit: contain; }
.dp-event-body { padding: .8rem .9rem .9rem !important; justify-content: flex-start !important; min-width: 0; }
.dp-event-body h3 { font-size: 1rem; }
.dp-event-body .dp-card-text { -webkit-line-clamp: 3; font-size: .86rem; }
.dp-event-actions { margin-top: auto; padding-top: .4rem; }
.dp-event-date { top: .5rem; left: .5rem; min-width: 44px; padding: .22rem .4rem; border-radius: 10px; }
.dp-event-date .d { font-size: 1.1rem; }
@media (min-width: 576px) { .dp-event { grid-template-columns: 170px minmax(0, 1fr) !important; } .dp-event-body { padding: 1rem 1.15rem 1.1rem !important; } }
@media (min-width: 992px) {
    .dp-agenda { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
    .dp-event { grid-template-columns: 180px minmax(0, 1fr) !important; min-height: 250px; }
    .dp-event-img { height: auto !important; }
}

/* 26 — TripAdvisor-band: titel en badge netjes gecentreerd naast elkaar */
.dp-ta { padding: 1.1rem 0; }
.dp-ta .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.5rem; }
.dp-ta h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.dp-ta .TA_restaurantWidgetGreen, .dp-ta [id^="TA_restaurantWidgetGreen"] { display: flex; justify-content: center; margin: 0; min-height: 62px; }
.dp-ta .TA_restaurantWidgetGreen *, .dp-ta [id^="TA_restaurantWidgetGreen"] * { float: none !important; margin-left: auto; margin-right: auto; }
.dp-ta .TA_restaurantWidgetGreen ul { list-style: none; padding: 0; margin: 0; }

/* 27 — kadobonformulier (#signupForm): kaart, gestapelde velden, 2 kolommen; markup en betaalstroom ongewijzigd */
#signupForm { background: #fff; border: 1px solid var(--dp-line); border-radius: 20px; box-shadow: var(--dp-shadow); padding: 1.1rem 1.1rem 1.25rem; max-width: 46rem; margin: .5rem auto 1rem; }
#signupForm fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem 1rem; }
#signupForm .form-group { margin: 0; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
#signupForm .form-group > [class*="col-"] { width: 100%; max-width: none; margin: 0; padding: 0; float: none; }
#signupForm .control-label { width: 100%; text-align: left; padding: 0; margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .03em; color: var(--dp-muted); text-transform: uppercase; float: none; }
#signupForm .control-label br { display: none; }
#signupForm .control-label:empty { display: none; }
#signupForm legend { width: 100%; max-width: none; margin: .6rem 0 .1rem; padding: 0 0 .5rem; float: none; border-bottom: 2px solid var(--dp-gold); font-family: 'Montserrat', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--dp-ink); grid-column: 1 / -1; display: block; }
#signupForm legend[class*="col-"] { width: 100%; margin-left: 0; padding-left: 0; padding-right: 0; }
#signupForm .form-control, #signupForm select, #signupForm input[type=text], #signupForm input[type=email] { width: 100%; height: auto; min-height: 46px; border: 1px solid var(--dp-line); border-radius: 12px; padding: .6rem .85rem; font-size: 1rem; background-color: #fff; }
#signupForm .form-control:focus { border-color: var(--dp-gold); box-shadow: 0 0 0 .2rem rgba(186, 163, 104, .25); outline: 0; }
#signupForm .help-block { display: block; margin-top: .35rem; padding: .35rem .65rem; border-radius: 8px; background: var(--dp-gold-soft); color: var(--dp-muted); font-size: .8rem !important; }
#signupForm .form-group:has(#kind), #signupForm .form-group:has(#date), #signupForm [id^="kind"], #signupForm #receiveraddress_details, #signupForm .required-control { grid-column: 1 / -1; }
#signupForm .form-group:has(#receiveraddress) { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: .9rem; padding: .85rem 1rem; background: var(--dp-gold-soft); border-radius: 14px; }
#signupForm .form-group:has(#receiveraddress) .control-label { flex: 1; text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--dp-ink); order: 1; }
#signupForm .form-group:has(#receiveraddress) > [class*="col-"] { width: auto; order: 2; }
#signupForm .checkbox { margin: 0; }
#signupForm .checkbox label { padding: 0; min-height: 0; }
#signupForm input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--dp-btn); cursor: pointer; margin: 0; position: static; }
#signupForm #receiveraddress_details { background: #fff; border: 1px dashed var(--dp-line); border-radius: 14px; padding: 1rem; }
#signupForm .form-group:has(#submit) { grid-column: 1 / -1; margin-top: .4rem; }
#signupForm #submit { width: 100%; min-height: 52px; border: 0; border-radius: 999px; background: var(--dp-btn) !important; color: #fff !important; font-size: 1rem; font-weight: 700; letter-spacing: .02em; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; box-shadow: 0 6px 16px rgba(138, 114, 53, .3); }
#signupForm #submit:hover { background: var(--dp-btn-hover) !important; }
@media (min-width: 576px) {
    #signupForm { padding: 1.5rem 1.75rem 1.75rem; }
    #signupForm fieldset { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    #signupForm .form-group:has(#city), #signupForm .form-group:has(#city_receiver) { grid-column: auto; }
    #signupForm .form-group:has(#name), #signupForm .form-group:has(#address), #signupForm .form-group:has(#name_receiver), #signupForm .form-group:has(#address_receiver) { grid-column: 1 / -1; }
}

/* 28 — subtiele interactie: knoppen, kaarten, links (CSS; geen beweging bij "minder beweging") */
html { scroll-behavior: smooth; }
.dp .btn { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; will-change: transform; }
.dp .btn-gold { box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.dp .btn-gold:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .2); transform: translateY(-2px); }
.dp .btn-outline-gold:hover, .dp .btn-white:hover { transform: translateY(-2px); }
.dp .btn:active { transform: translateY(0) scale(.97); box-shadow: none; transition-duration: .08s; }
.dp .btn i { transition: transform .25s ease; }
.dp .btn:hover i.fa-chevron-right, .dp .btn:hover i.fa-calendar-check { transform: translateX(3px); }
.dp-card, .dp-event, .dp-usp, .dp-linklist a, .dp-chip { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease; }
.dp-card:hover, .dp-event:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(38, 35, 29, .13); }
.dp-usp:hover { transform: translateY(-2px); border-color: var(--dp-gold); }
.dp-usp i { transition: transform .3s ease; }
.dp-usp:hover i { transform: rotate(90deg) scale(1.15); }
.dp-chip:hover { transform: translateY(-2px); }
.dp-prose a, .dp-more { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s ease; text-decoration: none; }
.dp-prose a:hover, .dp-more:hover { background-size: 100% 1px; text-decoration: none; }
.dp-prose a.btn { background-image: none; }
.dp-menu-sec .dp-dish { transition: background-color .2s ease, padding-left .2s ease; }
.dp-dish:hover { background: var(--dp-gold-soft); padding-left: .4rem; }
.dp-gallery a { transition: transform .3s ease, box-shadow .3s ease; }
.dp-gallery a:hover { transform: scale(1.02); box-shadow: 0 10px 26px rgba(0, 0, 0, .2); }
.dp-logo img { transition: transform .3s ease; }
.dp-logo:hover img { transform: scale(1.04) rotate(-1deg); }
/* reserveerknop rechtsonder: rustige 'ademhaling' zolang het paneel dicht is */
.fixed-reservation-btn:not(.hidden-button) { animation: dp-breathe 4.5s ease-in-out infinite; }
@keyframes dp-breathe { 0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, .25), 0 0 0 0 rgba(138, 114, 53, .45); } 50% { box-shadow: 0 6px 18px rgba(0, 0, 0, .25), 0 0 0 12px rgba(138, 114, 53, 0); } }
:focus-visible { outline: 2px solid var(--dp-btn); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .dp .btn, .dp-card, .dp-event, .dp-usp, .dp-chip, .dp-gallery a, .dp-logo img { transition: none !important; }
    .dp-card:hover, .dp-event:hover, .dp .btn-gold:hover, .dp-gallery a:hover { transform: none; }
    .fixed-reservation-btn { animation: none !important; }
}

/* 29 — reserveringspagina: uitnodigend en gericht op actie */
.dp-reserve { display: grid; gap: 1.25rem; padding: 1.5rem 0 2.25rem; }
.dp-reserve-card { position: relative; background: #fff; border: 1px solid var(--dp-line); border-radius: 22px; box-shadow: 0 18px 44px rgba(38, 35, 29, .1); padding: 1.35rem 1.15rem 1.25rem; overflow: hidden; }
.dp-reserve-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--dp-btn), var(--dp-gold), var(--dp-btn)); }
.dp-reserve-head h2 { font-size: 1.5rem; font-weight: 700; margin: .15rem 0 .3rem; }
.dp-reserve-head p { color: var(--dp-muted); margin: 0 0 1rem; font-size: .95rem; }
.dp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; list-style: none; margin: 0 0 1.1rem; padding: 0; }
.dp-steps li { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; font-size: .72rem; font-weight: 600; color: var(--dp-muted); position: relative; }
.dp-steps li b { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--dp-gold-soft); color: var(--dp-muted); font-size: .85rem; transition: background .3s, color .3s, transform .3s; z-index: 1; }
.dp-steps li::before { content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--dp-line); }
.dp-steps li:first-child::before { display: none; }
.dp-steps li.done b { background: var(--dp-btn); color: #fff; }
.dp-steps li.done::before, .dp-steps li.on::before { background: var(--dp-btn); }
.dp-steps li.on { color: var(--dp-ink); }
.dp-steps li.on b { background: var(--dp-btn); color: #fff; transform: scale(1.15); box-shadow: 0 4px 12px rgba(138, 114, 53, .4); }
.dp-reserve-card .legacy { padding-bottom: 0; }
.dp-reserve-card .legacy > .row { margin: 0 !important; }
.dp-reserve-card .legacy [class*="col-"] { padding: 0; }
/* formulierelementen */
#reserverenFORM { background: none; border: 0; box-shadow: none; padding: 0; max-width: none; }
#reserverenFORM fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#reserverenFORM .reservation-header { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; margin-bottom: .9rem; }
#reserverenFORM .reservation-header-datum-tijd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#reserverenFORM .header-group { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
#reserverenFORM .header-label, #reserverenFORM .form-section-title { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dp-muted); margin: 0; }
#reserverenFORM .form-section-title { margin: 1rem 0 .5rem; padding-top: .8rem; border-top: 1px dashed var(--dp-line); }
#reserverenFORM .form-section-title:empty { display: none; }
#reserverenFORM .form-control, #reserverenFORM select, #reserverenFORM input[type=text], #reserverenFORM input[type=tel], #reserverenFORM input[type=email], #reserverenFORM textarea { width: 100%; min-height: 50px; border: 1.5px solid var(--dp-line); border-radius: 14px; padding: .65rem .9rem; font-size: 1rem; background-color: #fff; transition: border-color .2s, box-shadow .2s; }
#reserverenFORM .form-control:focus, #reserverenFORM select:focus, #reserverenFORM textarea:focus { border-color: var(--dp-btn); box-shadow: 0 0 0 .22rem rgba(138, 114, 53, .18); outline: 0; }
#reserverenFORM .datepicker { cursor: pointer; background-image: none; }
#reserverenFORM .form-row { display: grid; gap: .75rem; margin-bottom: .75rem; }
#reserverenFORM .form-row.two-columns { grid-template-columns: minmax(0, 1fr); }
#reserverenFORM .time-slots-title { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dp-muted); margin: 0 0 .5rem; }
#reserverenFORM .reservation-timeSlots { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: .5rem; }
#reserverenFORM .time-slot { border: 1.5px solid var(--dp-line); border-radius: 999px; background: #fff; padding: .55rem .4rem; font-weight: 600; font-size: .95rem; color: var(--dp-ink); text-align: center; cursor: pointer; transition: transform .15s, border-color .2s, background .2s, color .2s; }
#reserverenFORM .time-slot:hover { border-color: var(--dp-btn); transform: translateY(-2px); }
#reserverenFORM .time-slot.selected { background: var(--dp-btn); border-color: var(--dp-btn); color: #fff; box-shadow: 0 6px 16px rgba(138, 114, 53, .35); }
#reserverenFORM .reservation-summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; margin-bottom: 1rem; background: var(--dp-gold-soft); border: 1px dashed var(--dp-btn); border-radius: 16px; }
#reserverenFORM .summary-content { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; font-size: .92rem; }
#reserverenFORM .summary-label { flex-basis: 100%; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dp-muted); }
#reserverenFORM .btn-aanpassen { border: 0; background: none; color: var(--dp-gold-dark); font-weight: 700; font-size: .85rem; cursor: pointer; white-space: nowrap; }
#reserverenFORM .btn-aanpassen:hover { text-decoration: underline; }
#reserverenFORM .btn-submit-modern, #reserverenFORM #submit { width: 100%; min-height: 56px; border: 0; border-radius: 999px; background: var(--dp-btn) !important; color: #fff !important; font-weight: 700; font-size: 1.02rem; letter-spacing: .03em; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; box-shadow: 0 10px 24px rgba(138, 114, 53, .35); transition: transform .2s, box-shadow .2s, background .2s; cursor: pointer; }
#reserverenFORM .btn-submit-modern:hover { background: var(--dp-btn-hover) !important; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(138, 114, 53, .42); }
#reserverenFORM .btn-submit-modern::after { content: '\2192'; transition: transform .2s; }
#reserverenFORM .btn-submit-modern:hover::after { transform: translateX(5px); }
.dp-reserve-usps { list-style: none; margin: 1.1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--dp-line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem .75rem; font-size: .82rem; color: var(--dp-muted); }
.dp-reserve-usps li { display: flex; gap: .45rem; align-items: flex-start; line-height: 1.35; }
.dp-reserve-usps i { color: var(--dp-btn); margin-top: .15rem; }
/* zijkant */
.dp-reserve-side { display: grid; gap: 1rem; align-content: start; }
.dp-reserve-photo { position: relative; min-height: 170px; border-radius: 22px; background-size: cover; background-position: center; overflow: hidden; display: flex; align-items: flex-end; }
.dp-reserve-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 18, 14, .75), rgba(20, 18, 14, .05) 70%); }
.dp-reserve-photo span { position: relative; color: #fff; font: 700 1.15rem 'Montserrat', sans-serif; padding: 1rem 1.15rem; }
.dp-reserve-photo span i { color: #ffb3d1; margin-right: .3rem; }
.dp-reserve-info { background: var(--dp-gold-soft); border: 1px solid var(--dp-line); border-radius: 20px; padding: 1.1rem 1.2rem; }
.dp-reserve-info h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .6rem; display: flex; align-items: center; gap: .5rem; }
.dp-reserve-info h3 i { color: var(--dp-btn); }
.dp-reserve-info .dp-prose { font-size: .92rem; line-height: 1.6; }
.dp-reserve-info .dp-resbtns { margin: .8rem 0 0; max-width: none; }
.dp-reserve-call { background: linear-gradient(150deg, var(--dp-btn), #4c3d17); border-radius: 20px; padding: 1.15rem 1.2rem; color: #fff; display: grid; gap: .55rem; }
.dp-reserve-call .dp-eyebrow { color: rgba(255, 255, 255, .8); margin: 0; }
.dp-reserve-call a { display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; background-image: none; }
.dp-reserve-call a:hover { text-decoration: underline; }
.dp-reserve-call a:last-child { font-size: .95rem; font-weight: 500; opacity: .9; }
@media (min-width: 576px) { #reserverenFORM .reservation-personen-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } #reserverenFORM .form-row.two-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dp-reserve-card { padding: 1.75rem 1.75rem 1.5rem; } .dp-reserve-usps { grid-template-columns: repeat(4, auto); justify-content: space-between; } }
@media (min-width: 992px) { .dp-reserve { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2rem; align-items: start; padding: 2.25rem 0 3rem; } .dp-reserve-side { position: sticky; top: calc(var(--dp-header-h) + 20px); } .dp-reserve-photo { min-height: 200px; } }
@media (prefers-reduced-motion: reduce) { .dp-steps li b, #reserverenFORM .time-slot, #reserverenFORM .btn-submit-modern { transition: none; } }

/* 30 — reserveringswidget (uitschuifpaneel) in de nieuwe stijl */
/* formulierelementen */
#reserverenWidgetFORM { background: none; border: 0; box-shadow: none; padding: 0; max-width: none; }
#reserverenWidgetFORM fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#reserverenWidgetFORM .reservation-header { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; margin-bottom: .9rem; }
#reserverenWidgetFORM .reservation-header-datum-tijd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#reserverenWidgetFORM .header-group { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
#reserverenWidgetFORM .header-label, #reserverenWidgetFORM .form-section-title { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dp-muted); margin: 0; }
#reserverenWidgetFORM .form-section-title { margin: 1rem 0 .5rem; padding-top: .8rem; border-top: 1px dashed var(--dp-line); }
#reserverenWidgetFORM .form-section-title:empty { display: none; }
#reserverenWidgetFORM .form-control, #reserverenWidgetFORM select, #reserverenWidgetFORM input[type=text], #reserverenWidgetFORM input[type=tel], #reserverenWidgetFORM input[type=email], #reserverenWidgetFORM textarea { width: 100%; min-height: 50px; border: 1.5px solid var(--dp-line); border-radius: 14px; padding: .65rem .9rem; font-size: 1rem; background-color: #fff; transition: border-color .2s, box-shadow .2s; }
#reserverenWidgetFORM .form-control:focus, #reserverenWidgetFORM select:focus, #reserverenWidgetFORM textarea:focus { border-color: var(--dp-btn); box-shadow: 0 0 0 .22rem rgba(138, 114, 53, .18); outline: 0; }
#reserverenWidgetFORM .datepicker { cursor: pointer; background-image: none; }
#reserverenWidgetFORM .form-row { display: grid; gap: .75rem; margin-bottom: .75rem; }
#reserverenWidgetFORM .form-row.two-columns { grid-template-columns: minmax(0, 1fr); }
#reserverenWidgetFORM .time-slots-title { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dp-muted); margin: 0 0 .5rem; }
#reserverenWidgetFORM .reservation-timeSlots { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: .5rem; }
#reserverenWidgetFORM .time-slot { border: 1.5px solid var(--dp-line); border-radius: 999px; background: #fff; padding: .55rem .4rem; font-weight: 600; font-size: .95rem; color: var(--dp-ink); text-align: center; cursor: pointer; transition: transform .15s, border-color .2s, background .2s, color .2s; }
#reserverenWidgetFORM .time-slot:hover { border-color: var(--dp-btn); transform: translateY(-2px); }
#reserverenWidgetFORM .time-slot.selected { background: var(--dp-btn); border-color: var(--dp-btn); color: #fff; box-shadow: 0 6px 16px rgba(138, 114, 53, .35); }
#reserverenWidgetFORM .reservation-summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; margin-bottom: 1rem; background: var(--dp-gold-soft); border: 1px dashed var(--dp-btn); border-radius: 16px; }
#reserverenWidgetFORM .summary-content { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; font-size: .92rem; }
#reserverenWidgetFORM .summary-label { flex-basis: 100%; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dp-muted); }
#reserverenWidgetFORM .btn-aanpassen { border: 0; background: none; color: var(--dp-gold-dark); font-weight: 700; font-size: .85rem; cursor: pointer; white-space: nowrap; }
#reserverenWidgetFORM .btn-aanpassen:hover { text-decoration: underline; }
#reserverenWidgetFORM .btn-submit-modern, #reserverenWidgetFORM #submit { width: 100%; min-height: 56px; border: 0; border-radius: 999px; background: var(--dp-btn) !important; color: #fff !important; font-weight: 700; font-size: 1.02rem; letter-spacing: .03em; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; box-shadow: 0 10px 24px rgba(138, 114, 53, .35); transition: transform .2s, box-shadow .2s, background .2s; cursor: pointer; }
#reserverenWidgetFORM .btn-submit-modern:hover { background: var(--dp-btn-hover) !important; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(138, 114, 53, .42); }
#reserverenWidgetFORM .btn-submit-modern::after { content: '\2192'; transition: transform .2s; }
#reserverenWidgetFORM .btn-submit-modern:hover::after { transform: translateX(5px); }
.dp-reserve-usps { list-style: none; margin: 1.1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--dp-line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem .75rem; font-size: .82rem; color: var(--dp-muted); }
.dp-reserve-usps li { display: flex; gap: .45rem; align-items: flex-start; line-height: 1.35; }
.dp-reserve-usps i { color: var(--dp-btn); margin-top: .15rem; }

.reservation-panel { border-radius: 24px 0 0 24px !important; box-shadow: -16px 0 50px rgba(20, 18, 14, .3) !important; background: #fff !important; font-family: 'Roboto', sans-serif; }
.reservation-panel .panel-header { background: linear-gradient(135deg, var(--dp-btn), #4c3d17) !important; padding: 1.15rem 1.25rem !important; position: sticky; top: 0; z-index: 3; border-radius: 24px 0 0 0; }
.reservation-panel .panel-header h3 { font-family: 'Montserrat', sans-serif !important; font-size: 1.15rem !important; font-weight: 700 !important; letter-spacing: .01em; text-transform: none !important; color: #fff !important; margin: 0; }
.reservation-panel .panel-close-btn { width: 36px; height: 36px; border-radius: 50% !important; background: rgba(255, 255, 255, .2) !important; border: 0 !important; color: #fff !important; transition: transform .2s, background .2s; display: inline-flex; align-items: center; justify-content: center; }
.reservation-panel .panel-close-btn:hover { background: rgba(255, 255, 255, .35) !important; transform: rotate(90deg); }
.reservation-panel .panel-content { padding: 1.1rem 1.25rem 1.5rem !important; }
.dp-widget-intro { margin: 0 0 1rem; color: var(--dp-muted); font-size: .92rem; padding-bottom: .85rem; border-bottom: 1px dashed var(--dp-line); }
.fixed-reservation-btn { border-radius: 999px !important; background: linear-gradient(135deg, var(--dp-btn), #5f4c1e) !important; border: 0 !important; box-shadow: 0 10px 28px rgba(0, 0, 0, .3) !important; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .04em; padding: .8rem 1.3rem !important; transition: transform .2s, box-shadow .2s; }
.fixed-reservation-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 34px rgba(0, 0, 0, .35) !important; }
.reservation-panel-overlay.active { backdrop-filter: blur(3px); background: rgba(20, 18, 14, .5) !important; }
@media (max-width: 575.98px) { .reservation-panel { border-radius: 24px 24px 0 0 !important; } .reservation-panel .panel-header { border-radius: 24px 24px 0 0; } }

/* geen zijwaarts scrollen: grid-items en tekst mogen krimpen tot de beschikbare breedte */
.dp-page, .dp-reserve, .dp-contact, .dp-intro, .dp-trouw-grid, .dp-cards, .dp-menu { min-width: 0; }
.dp-page > *, .dp-reserve > *, .dp-contact > *, .dp-intro > *, .dp-trouw-grid > *, .dp-cards > *, .dp-prose, .dp-menu-sec, .dp-dish { min-width: 0; }
.dp-prose, .dp-menu-note, .dp-dish .dd, .dp-dish .n { overflow-wrap: anywhere; }
html, body.dp { overflow-x: clip; }
.dp-steps--widget { margin: 0 0 1rem; }
.dp-steps--widget li { font-size: .68rem; }
.reservation-panel .dp-widget-intro { margin-bottom: .85rem; }

/* 31 — kadobonpagina in twee kolommen (formulier links, uitleg rechts) */
.dp-kado .dp-reserve-card #signupForm { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; max-width: none; border-radius: 0; }
.dp-kado .dp-reserve-card .legacy .row { margin: 0; }
.dp-kado .dp-reserve-info .dp-prose { font-size: .95rem; }
.dp-kado .dp-reserve-info .dp-prose p, .dp-kado .dp-reserve-info .dp-prose strong { font-size: inherit; }
.dp-kado-steps { list-style: none; margin: 0; padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--dp-line); border-radius: 20px; display: grid; gap: .8rem; counter-reset: kado; box-shadow: var(--dp-shadow); }
.dp-kado-steps li { display: flex; gap: .8rem; align-items: center; font-size: .92rem; font-weight: 500; }
.dp-kado-steps b { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--dp-btn); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; box-shadow: 0 4px 10px rgba(138, 114, 53, .35); }

/* Bootstrap 3-klasse .hide (oude formulier-JS verbergt er o.a. het ontvangersadres mee); bestaat niet meer in Bootstrap 5 */
.hide { display: none !important; }

/* reCAPTCHA-melding onder de formulieren: leesbare links, gelijkmatig afgebroken tekst */
.dp-captcha-note { margin: 1rem 0 0; font-size: .72rem; line-height: 1.5; color: var(--dp-muted); text-align: center; text-wrap: balance; }
.dp-captcha-note a { color: var(--dp-gold-dark) !important; text-decoration: underline; text-underline-offset: 2px; }
.dp-captcha-note a:hover { color: var(--dp-ink) !important; }