/* ============================================
   RECREATIEPARK DE MEIBEEK — MAIN STYLESHEET
   Design DNA: Rustiek & Natuur — Achterhoeks Erfgoed
   All styles combined into one file
   ============================================ */

/* ============================================
   BASE — Variables, Reset, Typography, Buttons
   Huisstijlkleur: #437d9e
   ============================================ */

:root {
    /* === PRIMAIR (huisstijl) === */
    --primair:        #437e9e;
    --primair-licht:  #5691b2;
    --primair-donker: #35637e;
    --primair-90:     rgba(67,125,158,0.9);

    /* === WARM / AARDE === */
    --hout:           #8B6F4E;
    --hout-licht:     #A6895E;
    --hout-donker:    #6B5438;
    --honing:         #EADEC4;
    --honing-zacht:   #E8C96A;
    --terracotta:     #C17B52;

    /* === NEUTRAAL === */
    --room:           #F5F0E8;
    --room-warm:      #EDE5D8;
    --linnen:         #DDD5C6;
    --houtskool:      #2A2520;
    --wit:            #FFFFFF;

    /* === GROEN === */
    --bosgroen:       #2C4A2E;
    --bosgroen-licht: #3D6340;

    /* === ACCENT === */
    --salie:          #7EA68C;
    --salie-licht:    #9CB8A5;
    --beek:           #5A8FA0;

    /* === FONTS === */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'Outfit', system-ui, sans-serif;
    --font-accent:  var(--font-display);

    /* === LAYOUT === */
    --nav-height: 80px;
    --max-width:  1200px;
    --radius:     1rem;
    --radius-sm:  0.75rem;
}

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
}

body {
    background: var(--room);
    color: var(--houtskool);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ============================================
   UTILITIES
   ============================================ */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ============================================
   SECTION HELPERS
   ============================================ */
.section-label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--primair);
    margin-bottom: 0.75rem;
    display: block;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 600;
    color: var(--houtskool);
    line-height: 1.2;
    margin-top: 0.5rem;
}

.section-subtitle {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--hout);
    margin-top: 0.5rem;
}

.section-desc {
    font-size: 1rem;
    color: var(--hout-donker);
    line-height: 1.7;
    margin-top: 1rem;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.9rem 2rem;
    border-radius: 100px;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    letter-spacing: 0.02em;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--honing);
    color: var(--houtskool);
    font-weight: 600;
}

.btn-primary:hover {
    background: var(--honing-zacht);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212,168,71,0.35);
}

.btn-blauw {
    background: var(--primair);
    color: var(--wit);
}

.btn-blauw:hover {
    background: var(--primair-licht);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(67,125,158,0.3);
}

.btn-outline {
    background: transparent;
    color: var(--room);
    border: 1.5px solid rgba(245,240,232,0.3);
}

.btn-outline:hover {
    border-color: var(--room);
    background: rgba(245,240,232,0.08);
}

.btn-ghost {
    background: transparent;
    color: var(--hout);
    padding-left: 0;
    padding-right: 0;
    gap: 0.75rem;
}

.btn-ghost .arrow { transition: transform 0.3s; }
.btn-ghost:hover { color: var(--primair); }
.btn-ghost:hover .arrow { transform: translateX(4px); }

/* ============================================
   SCROLL REVEAL
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-0 { transition-delay: 0s; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
    50% { opacity: 1; transform: scaleY(1); }
}

/* ============================================
   PAGE CONTENT (fallback)
   ============================================ */
.page-content {
    padding: calc(var(--nav-height) + 3rem) 2rem 5rem;
}

.page-content .container { max-width: 800px; }

.page-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: var(--houtskool);
    margin-bottom: 2rem;
}

.page-body p {
    margin-bottom: 1.25rem;
    line-height: 1.8;
}

/* ============================================
   HEADER / NAVIGATIE
   ============================================ */
.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--nav-height);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.header--transparent { background: transparent; }
body.home .header--transparent .header-logo { opacity: 0; pointer-events: none; transition: opacity 0.3s; }

.header--solid {
    background: rgba(67, 125, 158, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(42,37,32,0.15);
}

.header--solid .header-logo { opacity: 1; pointer-events: auto; }

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.header-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.header-logo-img {
    height: 50px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Fallback als er geen logo is */
.header-logo .logo-fallback {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--room);
}

/* WP custom-logo override */
.header-logo .custom-logo-link {
    display: flex;
    align-items: center;
}

.header-logo .custom-logo-link img {
    height: 50px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Nav */
.header-nav .nav-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.header-nav .nav-list li a {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(245,240,232,0.8);
    letter-spacing: 0.02em;
    transition: color 0.3s;
    padding: 0.5rem 0.75rem;
    display: block;
    position: relative;
}

.header-nav .nav-list li a:hover,
.header-nav .nav-list li.current-menu-item > a,
.header-nav .nav-list li.current_page_item > a {
    color: var(--room);
}

.header-nav .nav-list li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.75rem; right: 0.75rem;
    height: 1.5px;
    background: var(--honing);
    transform: scaleX(0);
    transition: transform 0.3s;
    transform-origin: left;
}

.header-nav .nav-list li a:hover::after,
.header-nav .nav-list li.current-menu-item > a::after,
.header-nav .nav-list li.current_page_item > a::after {
    transform: scaleX(1);
}

/* Sub-menu dropdown */
.header-nav .nav-list li { position: relative; }

/* Dropdown arrow for parent items */
.header-nav .nav-list li.menu-item-has-children > a {
    padding-right: 1.4rem;
}

.header-nav .nav-list li.menu-item-has-children > a::before {
    content: '';
    position: absolute;
    right: 0.35rem;
    top: 50%;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid rgba(245,240,232,0.6);
    border-bottom: 1.5px solid rgba(245,240,232,0.6);
    transform: translateY(-60%) rotate(45deg);
    transition: all 0.3s;
}

.header-nav .nav-list li.menu-item-has-children:hover > a::before {
    border-color: var(--room);
    transform: translateY(-40%) rotate(225deg);
}

.header-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--primair-donker);
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.3s;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    border: 1px solid rgba(245,240,232,0.08);
}

.header-nav .nav-list li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-nav .sub-menu li a {
    padding: 0.55rem 1.25rem;
    font-size: 0.82rem;
    white-space: nowrap;
}

.header-nav .sub-menu li a:hover {
    background: rgba(245,240,232,0.06);
}

.header-nav .sub-menu li a::after {
    display: none;
}

/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-phone {
    font-size: 0.8rem;
    color: rgba(245,240,232,0.7);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.3s;
}

.header-phone:hover { color: var(--room); }
.header-phone svg { flex-shrink: 0; }

.btn-book {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: 0.6rem 1.5rem;
    background: var(--honing);
    color: var(--houtskool);
    border-radius: 100px;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    display: inline-block;
}

.btn-book:hover {
    background: var(--honing-zacht);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(212,168,71,0.35);
}

/* Hamburger */
.mobile-toggle {
    display: none;
    color: var(--room);
    padding: 0.5rem;
    z-index: 1001;
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
}

.hamburger span {
    display: block;
    height: 2px;
    background: var(--room);
    border-radius: 2px;
    transition: all 0.3s;
}

.mobile-toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.mobile-toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
    opacity: 0;
}
.mobile-toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile menu */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--primair-donker);
    z-index: 999;
    padding: calc(var(--nav-height) + 2rem) 2rem 2rem;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
}

.mobile-menu[aria-hidden="false"] {
    transform: translateX(0);
}

.mobile-nav-list li a {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--room);
    padding: 1rem 0;
    border-bottom: 1px solid rgba(245,240,232,0.1);
    transition: color 0.2s, padding-left 0.3s;
}

.mobile-nav-list li a:hover {
    color: var(--honing);
    padding-left: 0.5rem;
}

.mobile-book-btn {
    margin-top: 2rem;
    width: 100%;
    justify-content: center;
}

/* ============================================
   STICKY ICONS (rechtsboven)
   ============================================ */
.header-nav,
.header-actions,
.mobile-toggle { display: none !important; }

.sticky-icons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.sticky-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(42,37,32,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--room);
    border: 1px solid rgba(245,240,232,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.sticky-icon:hover {
    background: var(--primair);
    color: var(--wit);
    border-color: var(--primair);
}

.sticky-icon--menu {
    border-radius: 22px;
    width: auto;
    padding: 0 1rem;
    gap: 0.5rem;
}

.sticky-icon--menu .hamburger {
    width: 18px;
    height: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.sticky-icon--menu .hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 1px;
    transition: all 0.3s;
}

.sticky-icon-label {
    font-family: var(--font-display);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Hamburger → X animatie */
.sticky-icon--menu[aria-expanded="true"] .hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}
.sticky-icon--menu[aria-expanded="true"] .hamburger span:nth-child(2) {
    opacity: 0;
}
.sticky-icon--menu[aria-expanded="true"] .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* Header solid → sticky icons darker bg */
.header--solid ~ .sticky-icons,
.header--solid .sticky-icons {
    /* icons already fixed, bg stays same */
}

/* ============================================
   OVERLAY MENU (fullscreen)
   ============================================ */
.overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.overlay-menu[aria-hidden="false"] {
    max-height: 100vh;
    overflow-y: auto;
}

.overlay-menu-bg {
    position: absolute;
    inset: 0;
    background: rgba(42,37,32,0.97);
}

.overlay-menu-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.5rem 2rem 2.5rem;
}

.overlay-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3rem;
}

.overlay-menu-logo .custom-logo-link img,
.overlay-menu-logo img {
    max-height: 60px;
    width: auto;
}

.overlay-close {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(245,240,232,0.1);
    border: none;
    color: var(--room);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.overlay-close:hover {
    background: var(--primair);
    color: var(--wit);
}

/* Nav columns — like Kriemelberg */
.overlay-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 4rem;
    flex: 1;
}

.overlay-nav-list > li {
    min-width: 160px;
}

.overlay-nav-list > li > a {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--honing);
    margin-bottom: 0.75rem;
    transition: color 0.2s;
}

.overlay-nav-list > li > a:hover {
    color: var(--room);
}

.overlay-nav-list > li.current-menu-item > a,
.overlay-nav-list > li.current_page_item > a {
    color: var(--room);
}

/* Sub-menu items */
.overlay-nav-list .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.overlay-nav-list .sub-menu li a {
    display: block;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(245,240,232,0.7);
    padding: 0.25rem 0;
    transition: color 0.2s, padding-left 0.3s;
}

.overlay-nav-list .sub-menu li a:hover {
    color: var(--room);
    padding-left: 0.35rem;
}

/* Footer in overlay */
.overlay-menu-footer {
    margin-top: auto;
    padding-top: 2rem;
    border-top: 1px solid rgba(245,240,232,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.overlay-contact-icons {
    display: flex;
    gap: 1rem;
}

.overlay-contact-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(245,240,232,0.2);
    color: var(--room);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.overlay-contact-icon:hover {
    background: var(--primair);
    border-color: var(--primair);
    color: var(--wit);
}

.overlay-book-btn {
    font-size: 1rem;
}

/* Body lock when menu is open */
body.overlay-open {
    overflow: hidden;
}

/* Responsive overlay */
@media (max-width: 768px) {
    .overlay-menu-inner { padding: 1.25rem 1.5rem 1.5rem; }
    .overlay-nav-list { flex-direction: column; gap: 1.5rem; }
    .overlay-menu-footer { flex-direction: column; align-items: flex-start; }
    .sticky-icon-label { display: none; }
    .sticky-icon--menu { width: 44px; padding: 0; }
}

/* ============================================
   HERO
   ============================================ */
.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: #dbd7cc;
}

/* Gradient top: zorgt dat header altijd leesbaar is over de foto */
.hero-gradient-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom, rgba(42,37,32,0.6) 0%, rgba(42,37,32,0.2) 60%, transparent 100%);
    z-index: 6;
    pointer-events: none;
}

.hero-overlay {
    position: absolute;
    inset: 0; z-index: 2;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(212,168,71,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(67,125,158,0.08) 0%, transparent 40%);
    pointer-events: none;
}

.hero-grain {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 200px;
    z-index: 3;
    pointer-events: none;
}

.hero-photo-area {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 55%;
    z-index: 2;
    overflow: hidden;
}

/* Organische boog links over de foto */
.hero-photo-area::before {
    content: '';
    position: absolute;
    top: -5%;
    bottom: -5%;
    left: -80px;
    width: 180px;
    background: #dbd7cc;
    border-radius: 0 50% 50% 0;
    z-index: 1;
}

.hero-photo-area img,
.hero-photo-img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.hero-content {
    position: relative;
    z-index: 5;
    width: 45%;
    padding: 0 3rem;
    padding-top: calc(var(--nav-height) + 4rem);
    padding-bottom: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-text { max-width: 100%; }

/* Groot logo in hero */
.hero-logo {
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeSlideUp 1s 0.3s forwards;
}

.hero-logo .custom-logo-link img,
.hero-logo img {
    max-height: 200px;
    width: auto;
}

.hero-logo-fallback {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hero-logo-name {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 300;
    color: var(--room);
    line-height: 1.15;
}

.hero-logo-name em {
    font-weight: 700;
    font-style: italic;
    color: var(--honing);
}

.hero-tagline {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--hout-donker);
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeSlideUp 0.8s 0.5s forwards;
}

/* Keurmerken badges op hero foto */
.hero-badges {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    z-index: 5;
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

.hero-badge {
    background: rgba(255,255,255,0.9);
    border-radius: 8px;
    padding: 0.4rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.hero-badge img {
    display: block;
    width: auto;
    max-width: 100px;
    height: auto;
    max-height: 65px;
    object-fit: contain;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5.5vw, 4.2rem);
    font-weight: 300;
    color: var(--room);
    line-height: 1.12;
    opacity: 0;
    animation: fadeSlideUp 1s 0.5s forwards;
}

.hero h1 em {
    font-weight: 700;
    font-style: italic;
    color: var(--honing);
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 300;
    color: var(--salie-licht);
    margin-top: 1.5rem;
    line-height: 1.7;
    max-width: 440px;
    opacity: 0;
    animation: fadeSlideUp 0.8s 0.8s forwards;
}

.hero-ctas {
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeSlideUp 0.8s 1s forwards;
}

.hero-usps {
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    opacity: 0;
    animation: fadeSlideUp 0.8s 1.2s forwards;
}

.hero-usp {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--salie-licht);
    padding: 0.4rem 1rem;
    background: rgba(156,184,165,0.1);
    border: 1px solid rgba(156,184,165,0.15);
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hero-usp .usp-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--salie);
    flex-shrink: 0;
}

.hero-scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(156,184,165,0.5);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hero-scroll-line {
    width: 1px;
    height: 32px;
    background: linear-gradient(to bottom, rgba(156,184,165,0.4), transparent);
    animation: scrollPulse 2.5s infinite;
}

/* ============================================
   USP STRIP
   ============================================ */
.usp-strip {
    background: var(--primair-donker);
    position: relative;
    overflow: visible;
    padding-bottom: 3rem;
}

.usp-wave {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    z-index: 2;
    color: var(--room-warm);
    line-height: 0;
}

.usp-wave svg {
    display: block;
    width: 100%;
    height: 100px;
}

.usp-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px, transparent 4px,
            rgba(255,255,255,0.15) 4px, rgba(255,255,255,0.15) 5px,
            transparent 5px, transparent 24px
        );
    pointer-events: none;
}

.usp-strip-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: relative;
    z-index: 1;
    padding-top: 5rem;
}

.usp-item {
    padding: 2.25rem 1.5rem;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.usp-item:last-child { border-right: none; }

.usp-item:hover {
    background: rgba(255,255,255,0.05);
}

.usp-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    margin-bottom: 0.5rem;
    color: var(--honing);
    transition: all 0.3s;
}

.usp-icon svg {
    stroke: var(--honing);
}

.usp-item:hover .usp-icon {
    background: rgba(212,168,71,0.15);
    transform: translateY(-2px);
}

.usp-label {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--room);
    letter-spacing: 0.02em;
    display: block;
}

.usp-sub {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--honing-zacht);
    display: block;
}

/* USP Responsive */
@media (max-width: 1024px) {
    .usp-strip-inner { grid-template-columns: repeat(3, 1fr); }
    .usp-item:nth-child(3) { border-right: none; }
    .usp-item:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,0.08); }
}

@media (max-width: 600px) {
    .usp-strip-inner { grid-template-columns: repeat(2, 1fr); }
    .usp-item:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.08); }
    .usp-item:nth-child(2n) { border-right: none; }
    .usp-item { padding: 1.5rem 1rem; }
    .usp-icon { width: 40px; height: 40px; }
    .usp-icon svg { width: 22px; height: 22px; }
}

/* ============================================
   SPREUK DIVIDER
   ============================================ */
.spreuk-divider {
    padding: 5rem 2rem;
    position: relative;
    overflow: hidden;
}

.spreuk-divider--blauw { background: var(--primair); }
.spreuk-divider--room  { background: var(--room-warm); }
.spreuk-divider--hout  { background: var(--primair-donker); }
.spreuk-divider--dark  { background: var(--houtskool); }

.spreuk-quote {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 700;
    font-style: normal;
    line-height: 1.2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

.spreuk-divider--blauw .spreuk-quote { color: var(--room); }
.spreuk-divider--hout .spreuk-quote { color: var(--room); }
.spreuk-divider--dark .spreuk-quote { color: var(--room); }
.spreuk-divider--room .spreuk-quote { color: var(--primair-donker); }

.spreuk-quote em {
    color: var(--primair);
    font-style: italic;
    font-weight: 600;
}

.spreuk-line { display: none; }

.spreuk-bg-text { display: none; }

/* ============================================
   CTA RESERVEER
   ============================================ */
.cta-section {
    position: relative;
    background: var(--primair-donker);
    overflow: visible;
}

/* Achtergrond textuur */
.cta-bg {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0px, transparent 12px,
            rgba(255,255,255,0.15) 12px, rgba(255,255,255,0.15) 13px
        );
    pointer-events: none;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--honing), var(--terracotta), var(--honing));
}

/* Split layout */
.cta-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Linker kolom */
.cta-left {
    display: flex;
    flex-direction: column;
}

.cta-label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--honing);
}

.cta-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 300;
    color: var(--room);
    line-height: 1.2;
    margin-top: 1rem;
}

.cta-title em {
    display: block;
    font-weight: 700;
    font-style: italic;
    color: var(--honing);
}

.cta-spreuk {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--salie-licht);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(245,240,232,0.1);
}

.cta-image {
    margin-top: 2rem;
    border-radius: 1rem;
    overflow: hidden;
    max-width: 360px;
}

.cta-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1rem;
}

/* Rechter kolom: card */
.cta-right-card {
    background: rgba(245,240,232,0.06);
    border: 1px solid rgba(245,240,232,0.1);
    border-radius: 1.25rem;
    padding: 2.5rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cta-text {
    font-size: 1.05rem;
    color: var(--salie-licht);
    line-height: 1.7;
}

.cta-features {
    margin-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cta-feat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    background: rgba(245,240,232,0.06);
    border-radius: 0.6rem;
    transition: background 0.3s;
}

.cta-feat:hover {
    background: rgba(245,240,232,0.1);
}

.cta-feat-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.cta-feat-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--room);
}

.cta-buttons {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Ghost button lichte variant voor donkere achtergrond */
.btn-ghost--light {
    color: var(--salie-licht);
}

.btn-ghost--light:hover {
    color: var(--room);
}

/* CTA Responsive */
@media (max-width: 768px) {
    .cta-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 4rem 1.5rem;
    }

    .cta-right-card {
        padding: 2rem;
    }

    .cta-image {
        max-width: 100%;
    }
}

/* ============================================
   FACILITEITEN
   ============================================ */
.faciliteiten {
    padding: 6rem 2rem 5rem;
    background: var(--room);
    position: relative;
}

.faciliteiten-inner { max-width: 1200px; margin: 0 auto; }

.faciliteiten-header {
    max-width: 640px;
    margin: 0 0 3.5rem;
}

/* Bento grid: 3 kolommen, eerste item featured */
.faciliteiten-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 1.25rem;
}

.faciliteit-card--featured {
    grid-row: span 2;
}

/* Card base */
.faciliteit-card {
    background: var(--wit);
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid rgba(42,37,32,0.04);
}

.faciliteit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(42,37,32,0.08);
}

/* Afbeelding */
.faciliteit-img {
    height: 180px;
    position: relative;
    overflow: hidden;
}

.faciliteit-card--featured .faciliteit-img { height: 260px; }

.faciliteit-img img,
.faciliteit-img-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s;
}

.faciliteit-card:hover .faciliteit-img img,
.faciliteit-card:hover .faciliteit-img-el {
    transform: scale(1.05);
}

.faciliteit-img::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 20px;
    background: var(--wit);
    border-radius: 50% 50% 0 0;
}

/* Visueel blok zonder foto */
.faciliteit-visual {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.faciliteit-card--featured .faciliteit-visual { height: 100%; min-height: 320px; }

/* Elke kaart een unieke gradient */
.faciliteit-card:nth-child(1) .faciliteit-visual {
    background: linear-gradient(145deg, #4a8db7 0%, #35637e 40%, #2a5069 100%);
}
.faciliteit-card:nth-child(2) .faciliteit-visual {
    background: linear-gradient(145deg, #7ea68c 0%, #5d8a6e 40%, #4a7359 100%);
}
.faciliteit-card:nth-child(3) .faciliteit-visual {
    background: linear-gradient(145deg, #c17b52 0%, #a66840 40%, #8d5835 100%);
}
.faciliteit-card:nth-child(4) .faciliteit-visual {
    background: linear-gradient(145deg, #eadec4 0%, #b8923d 40%, #9a7a33 100%);
}
.faciliteit-card:nth-child(5) .faciliteit-visual {
    background: linear-gradient(145deg, #6b8f9c 0%, #537a87 40%, #436572 100%);
}
.faciliteit-card:nth-child(6) .faciliteit-visual {
    background: linear-gradient(145deg, #8B6F4E 0%, #735c40 40%, #5f4c35 100%);
}

/* Subtiele textuurlaag */
.faciliteit-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background:
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.3), transparent 60%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2), transparent 50%);
    pointer-events: none;
}

/* Organische curve onderaan */
.faciliteit-visual::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 24px;
    background: var(--wit);
    border-radius: 50% 50% 0 0;
}

.faciliteit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: rgba(255,255,255,0.9);
    transition: all 0.4s;
    position: relative;
    z-index: 1;
}

.faciliteit-card--featured .faciliteit-icon {
    width: 96px;
    height: 96px;
}

.faciliteit-icon svg {
    stroke: rgba(255,255,255,0.9);
    width: 36px;
    height: 36px;
}

.faciliteit-card--featured .faciliteit-icon svg {
    width: 44px;
    height: 44px;
}

.faciliteit-card:hover .faciliteit-icon {
    transform: scale(1.1);
    background: rgba(255,255,255,0.22);
}

/* Card body */
.faciliteit-body {
    padding: 1.25rem 1.5rem 1.75rem;
}

.faciliteit-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--houtskool);
}

.faciliteit-desc {
    font-size: 0.88rem;
    color: var(--hout-donker);
    margin-top: 0.5rem;
    line-height: 1.6;
}

.faciliteit-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--primair);
    margin-top: 0.75rem;
    transition: gap 0.3s;
}

.faciliteit-link:hover { gap: 0.85rem; }

.faciliteiten-cta { margin-top: 3rem; }

/* Faciliteiten responsive */
@media (max-width: 1024px) {
    .faciliteiten-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .faciliteit-card--featured { grid-row: span 1; }
}

@media (max-width: 600px) {
    .faciliteiten-grid {
        grid-template-columns: 1fr;
    }
    .faciliteiten { padding: 4rem 1.5rem 3.5rem; }
}

/* ============================================
   ACCOMMODATIES
   ============================================ */
.accommodaties { padding: 6rem 2rem; background: var(--room); }

.accommodaties-inner { max-width: 1200px; margin: 0 auto; }

.accommodaties-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem;
    gap: 2rem;
    flex-wrap: wrap;
}

.accommodaties-header .section-desc { margin-top: 0.75rem; max-width: 500px; }

.accom-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.accom-card {
    background: var(--wit);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(42,37,32,0.05);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.accom-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(42,37,32,0.12);
}

.accom-img {
    height: 240px;
    position: relative;
    overflow: hidden;
}

.accom-img img,
.accom-img-inner {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s;
}

.accom-card:hover .accom-img img { transform: scale(1.05); }

.accom-img::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 30px;
    background: var(--wit);
    clip-path: ellipse(55% 100% at 50% 100%);
}

.accom-placeholder {
    width: 100%; height: 100%;
}

.accom-placeholder--1 { background: linear-gradient(145deg, #4a8db7, #35637e); }
.accom-placeholder--2 { background: linear-gradient(145deg, #7ea68c, #4a7359); }
.accom-placeholder--3 { background: linear-gradient(145deg, #c17b52, #8d5835); }
.accom-placeholder--4 { background: linear-gradient(145deg, #eadec4, #9a7a33); }

.accom-desc {
    font-size: 0.88rem;
    color: var(--hout-donker);
    line-height: 1.6;
    margin-top: 0.5rem;
}

.accom-badge {
    position: absolute;
    top: 1rem; left: 1rem;
    background: var(--honing);
    color: var(--houtskool);
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    border-radius: 100px;
    z-index: 1;
}

.accom-body { padding: 1.25rem 1.5rem 1.75rem; }

.accom-type {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--primair);
}

.accom-name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--houtskool);
    margin-top: 0.3rem;
    line-height: 1.25;
}

.accom-features {
    margin-top: 0.75rem;
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.accom-feat {
    font-size: 0.8rem;
    color: var(--hout);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.accom-bottom {
    margin-top: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--linnen);
}

.accom-price { display: flex; align-items: baseline; gap: 0.2rem; }
.accom-price-from { font-size: 0.75rem; color: var(--hout); }

.accom-price-amount {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--primair-donker);
}

.accom-price-unit { font-size: 0.75rem; color: var(--hout); }

.accom-link {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--primair);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: gap 0.3s;
}

.accom-link:hover { gap: 0.6rem; }

.accommodaties-cta { margin-top: 3rem; }

/* ============================================
   VAKANTIEKIEKJES
   ============================================ */
.kiekjes { padding: 6rem 2rem; background: var(--wit); overflow: hidden; }

.kiekjes-inner { max-width: 1200px; margin: 0 auto; }

.kiekjes-header {
    max-width: 600px;
    margin: 0 0 3rem;
}

.kiekjes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 200px 200px;
    gap: 1rem;
}

.kiekje {
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    transition: transform 0.4s;
}

.kiekje:first-child { grid-column: span 2; grid-row: span 2; }

.kiekje:hover { transform: scale(1.02); }

.kiekje img,
.kiekje-img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder kleuren */
.kiekje-placeholder:nth-child(1) { background: linear-gradient(135deg, var(--primair-licht), var(--primair-donker)); }
.kiekje-placeholder:nth-child(2) { background: linear-gradient(135deg, var(--beek), #4a6e78); }
.kiekje-placeholder:nth-child(3) { background: linear-gradient(135deg, var(--honing), var(--terracotta)); }
.kiekje-placeholder:nth-child(4) { background: linear-gradient(135deg, var(--hout-licht), var(--hout)); }
.kiekje-placeholder:nth-child(5) { background: linear-gradient(135deg, var(--salie), var(--primair)); }

.kiekje-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1.25rem;
    background: linear-gradient(to top, rgba(42,37,32,0.6), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.kiekje:hover .kiekje-overlay { opacity: 1; }

.kiekje-overlay span {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--room);
}

.kiekjes-cta { margin-top: 2.5rem; }

/* ============================================
   REVIEWS
   ============================================ */
.reviews { padding: 6rem 2rem; background: var(--room); }

.reviews-inner { max-width: 1200px; margin: 0 auto; }

.reviews-header {
    max-width: 600px;
    margin: 0 0 3rem;
}

.reviews-grid {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.4s ease;
}

.reviews-grid .review-card {
    min-width: calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
}

/* Slider */
.reviews-slider {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.reviews-track {
    flex: 1;
    overflow: hidden;
}

.reviews-arrow {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--primair);
    background: var(--wit);
    color: var(--primair);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.reviews-arrow:hover {
    background: var(--primair);
    color: var(--wit);
}

.reviews-arrow:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.review-card {
    background: var(--wit);
    border-radius: var(--radius);
    padding: 2.5rem;
    box-shadow: 0 2px 12px rgba(42,37,32,0.04);
    position: relative;
    transition: transform 0.3s;
}

.review-card:hover { transform: translateY(-4px); }

.review-card::before {
    content: '\201E';
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--primair);
    opacity: 0.15;
    position: absolute;
    top: 0.75rem; left: 1.25rem;
    line-height: 1;
}

.review-stars { display: flex; gap: 0.15rem; margin-bottom: 1rem; }

.review-star { color: var(--honing); font-size: 0.9rem; }

.review-text {
    font-size: 1.05rem;
    color: var(--hout-donker);
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

.review-author {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--linnen);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.review-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--primair);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--wit);
    flex-shrink: 0;
}

.review-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--houtskool);
}

/* Badges */
.badges-row {
    margin-top: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
    padding-top: 2.5rem;
    border-top: 1px solid var(--linnen);
}

.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.badge-img {
    width: 72px;
    height: 72px;
    border-radius: 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
}

.badge-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.badge-icon {
    width: 70px; height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-display);
}

.badge-anwb { background: var(--honing); color: var(--houtskool); }
.badge-zoover { background: var(--primair); color: var(--wit); }

.badge-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hout);
}

.badge-sub { font-size: 0.75rem; color: var(--hout-licht); }

/* ============================================
   CONTACT STRIP
   ============================================ */
.contact-strip {
    background: var(--primair);
    padding: 4rem 2rem;
    position: relative;
    overflow: visible;
}

.contact-strip-inner {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.contact-strip h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 400;
    color: var(--room);
    line-height: 1.3;
}

.contact-strip h2 em {
    font-weight: 700;
    font-style: italic;
    color: var(--honing);
}

.contact-methods {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--room);
    padding: 0.85rem 1.75rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 100px;
    transition: all 0.3s;
    font-size: 0.9rem;
}

.contact-method:hover {
    background: rgba(255,255,255,0.18);
    transform: translateY(-2px);
}

.contact-method svg { flex-shrink: 0; }


/* ============================================
   FOOTER CTA BAND
   ============================================ */
.footer-cta {
    position: relative;
    padding: 4rem 2rem;
    background: var(--primair-donker);
    overflow: hidden;
}

.footer-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background:
        radial-gradient(circle at 10% 50%, rgba(255,255,255,0.2), transparent 50%),
        radial-gradient(circle at 90% 50%, rgba(212,168,71,0.15), transparent 40%);
    pointer-events: none;
}

.footer-cta-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    position: relative;
    z-index: 1;
}

.footer-cta-label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--honing);
    display: block;
    margin-bottom: 0.5rem;
}

.footer-cta-text h3 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 300;
    color: var(--room);
    line-height: 1.3;
}

.footer-cta-text h3 em {
    font-weight: 700;
    font-style: italic;
    color: var(--honing);
}

.footer-cta-actions {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-outline {
    background: transparent;
    border: 1.5px solid rgba(245,240,232,0.25);
    color: var(--room);
    padding: 1rem 1.75rem;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
    cursor: pointer;
    text-decoration: none;
}

.btn-outline:hover {
    background: rgba(245,240,232,0.08);
    border-color: rgba(245,240,232,0.4);
    color: var(--room);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: var(--room-warm);
    position: relative;
    overflow: hidden;
    color: var(--houtskool);
}

.footer-wave { margin-top: -1px; }
.footer-wave svg { display: block; width: 100%; height: 60px; }

.footer-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem 2.5rem;
    display: grid;
    grid-template-columns: 1.4fr 2fr 0.8fr;
    gap: 3rem;
    position: relative;
    z-index: 1;
}

.footer-logo { margin-bottom: 1.25rem; }
.footer-logo img { max-height: 80px; width: auto; }
.footer-logo a { display: block; }

.footer-brand-name {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--primair-donker);
    margin-bottom: 1.25rem;
    line-height: 1.3;
}

.footer-route-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 2px solid var(--houtskool);
    color: var(--houtskool);
    background: transparent;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    text-decoration: none;
    margin-bottom: 1.25rem;
    transition: all 0.3s;
}

.footer-route-btn:hover {
    background: var(--houtskool);
    color: var(--room);
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--hout-donker);
}

.footer-contact-item svg { flex-shrink: 0; margin-top: 2px; color: var(--primair); }
.footer-contact-item a { color: var(--hout-donker); transition: color 0.2s; text-decoration: none; }
.footer-contact-item a:hover { color: var(--primair); }

/* Snel naar kolommen */
.footer-links-wrap h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--houtskool);
    margin-bottom: 1rem;
    font-style: italic;
}

.footer-links-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2.5rem;
}

.footer-links { list-style: none; padding: 0; margin: 0; }

.footer-links li a {
    display: block;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-style: italic;
    color: var(--primair);
    padding: 0.2rem 0;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links li a:hover { color: var(--primair-donker); }

.footer-social-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--hout-donker);
}

.footer-social {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primair);
    color: var(--wit);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.footer-social:hover { background: var(--primair-donker); }
.footer-social svg { stroke: currentColor; fill: none; }
.footer-social svg[fill="currentColor"] { fill: currentColor; stroke: none; }

/* Keurmerken */
.footer-keurmerken {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}

.keurmerk-item img { max-width: 120px; height: auto; }

.keurmerk-placeholder {
    background: var(--linnen);
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hout-donker);
    text-align: center;
}

/* Bottom bar */
.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--linnen);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.footer-copy { font-size: 0.78rem; color: var(--hout); text-align: center; }
.footer-copy a { color: var(--hout-donker); transition: color 0.2s; text-decoration: none; }
.footer-copy a:hover { color: var(--primair); }

/* Footer responsive */
@media (max-width: 1024px) {
    .footer-main { grid-template-columns: 1fr 1fr; }
    .footer-keurmerken { grid-column: span 2; flex-direction: row; justify-content: center; }
    .footer-cta-inner { flex-direction: column; text-align: center; }
    .footer-cta-actions { justify-content: center; }
}

@media (max-width: 600px) {
    .footer-main { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem 2rem; }
    .footer-keurmerken { grid-column: span 1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
    .footer-links-columns { grid-template-columns: 1fr; }
    .footer-cta { padding: 3rem 1.5rem; }
    .footer-cta-actions { flex-direction: column; width: 100%; }
    .footer-cta-actions .btn { width: 100%; justify-content: center; }
    .footer-bottom { flex-direction: column; text-align: center; }
}


/* ============================================
   HERO — FULLSCREEN VARIANT
   ============================================ */
.hero--fullscreen .hero-bg::after {
    display: none;
}

.hero-bg-fullscreen {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease;
}

.hero-bg-fullscreen.hero-slide--active { opacity: 1; }

/* Split mode slides */
.hero-photo-area .hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
}

.hero-photo-area .hero-slide--active { opacity: 1; }

.hero-photo-area .hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero--fullscreen .hero-overlay {
    background:
        linear-gradient(135deg, rgba(42,37,32,0.7) 0%, rgba(53,99,126,0.5) 50%, rgba(42,37,32,0.3) 100%),
        radial-gradient(ellipse at 30% 20%, rgba(212,168,71,0.06) 0%, transparent 50%);
}

.hero--fullscreen .hero-photo-area {
    display: none;
}

.hero--fullscreen .hero-text {
    max-width: 650px;
}

.hero--fullscreen .hero-content {
    padding-bottom: 3rem;
}

/* ============================================
   HERO — BOOKING WIDGET
   ============================================ */
.hero-booking {
    position: relative;
    max-width: 560px;
    margin-top: 1.5rem;
    z-index: 10;
    opacity: 0;
    animation: fadeSlideUp 0.8s 1.4s forwards;
}

.booking-tabs {
    display: flex;
    gap: 0;
}

.booking-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    border-radius: 0.75rem 0.75rem 0 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--hout);
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.booking-tab svg { opacity: 0.6; }

.booking-tab--active {
    background: var(--wit);
    color: var(--primair-donker);
    box-shadow: 0 -2px 8px rgba(42,37,32,0.06);
}

.booking-tab--active svg { opacity: 1; color: var(--primair-donker); }

.booking-tab--active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2.5px;
    background: var(--primair-donker);
}

.booking-tab:not(.booking-tab--active):hover {
    background: rgba(255,255,255,0.85);
    color: var(--houtskool);
}

.booking-form {
    background: var(--wit);
    border-radius: 0 0.75rem 0.75rem 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(42,37,32,0.1), 0 2px 8px rgba(42,37,32,0.05);
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.booking-fields { flex: 1; display: flex; gap: 1.25rem; }
.booking-group { flex: 1; }
.booking-group--dates { flex: 1.6; }

.booking-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--hout);
    margin-bottom: 0.5rem;
}

.booking-date-row { display: flex; gap: 0.5rem; }

.booking-input {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: var(--room);
    border: 1.5px solid transparent;
    border-radius: 0.6rem;
    transition: all 0.25s;
    flex: 1;
    min-width: 0;
}

.booking-input:hover { border-color: var(--linnen); }

.booking-input:focus-within {
    border-color: var(--primair-donker);
    background: var(--wit);
    box-shadow: 0 0 0 3px rgba(53,99,126,0.08);
}

.booking-input svg { color: var(--hout-licht); flex-shrink: 0; }

.booking-input input,
.booking-input select {
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--houtskool);
    outline: none;
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.booking-input input::placeholder { color: var(--hout-licht); }

.booking-submit {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 2rem;
    background: var(--primair-donker);
    color: var(--wit);
    border: none;
    border-radius: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
}

.booking-submit:hover {
    background: var(--primair-licht);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(53,99,126,0.3);
    color: var(--wit);
}

/* --- Booking Responsive --- */
@media (max-width: 768px) {
    .booking-form {
        flex-direction: column;
        border-radius: 0 0.75rem 0.75rem 0.75rem;
    }
    .booking-fields { flex-direction: column; width: 100%; }
    .booking-submit { width: 100%; justify-content: center; padding: 1rem; }
}

@media (max-width: 480px) {
    .booking-date-row { flex-direction: column; }
    .booking-form { padding: 1rem; }
}

/* ============================================
   GLOBAL RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .hero-photo-area { width: 45%; }
}

@media (max-width: 768px) {
    .hero-photo-area { display: none; }
    .hero-content { padding-top: var(--nav-height); }
    .header-nav { display: none; }
    .header-actions .header-phone { display: none; }
    .mobile-toggle { display: flex; }
    .faciliteiten-grid, .accom-grid { grid-template-columns: 1fr; }
    .reviews-grid { flex-wrap: nowrap; }
    .reviews-grid .review-card { min-width: 100%; max-width: 100%; }
    .usp-strip-inner { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
    .usp-strip-inner { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   PAGE HERO (herbruikbaar voor alle pagina's)
   ============================================ */
.page-hero {
    position: relative;
    background: var(--room);
    padding: calc(var(--nav-height) + 3rem) 2rem 3rem;
}

.page-hero-bg,
.page-hero-bg--gradient,
.page-hero-overlay {
    display: none;
}

.page-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

.page-hero-label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--primair);
    display: block;
    margin-bottom: 0.75rem;
}

.page-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    color: var(--houtskool);
    line-height: 1.2;
    max-width: 700px;
}

.page-hero-title em {
    font-weight: 700;
    font-style: italic;
    color: var(--primair);
}

.page-hero-subtitle {
    color: var(--hout-donker);
    margin-top: 1rem;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ============================================
   OVER ONS — PAGE STYLES
   ============================================ */

/* Intro */
.overons-intro {
    padding: 3rem 2rem;
    background: var(--room);
}

.overons-intro-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.overons-intro-text {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.5vw, 1.4rem);
    font-weight: 300;
    font-style: italic;
    color: var(--hout-donker);
    line-height: 1.8;
}

/* Content blocks — alternating layout */
.overons-block {
    padding: 5rem 2rem;
}

.overons-block--room { background: var(--room); }
.overons-block--white { background: var(--wit); }

.overons-block-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.overons-block--reverse .overons-block-inner {
    direction: rtl;
}

.overons-block--reverse .overons-block-inner > * {
    direction: ltr;
}

.overons-heading {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--houtskool);
    line-height: 1.25;
    margin-top: 0.5rem;
}

.overons-prose {
    margin-top: 1.25rem;
}

.overons-prose p {
    font-size: 1rem;
    color: var(--hout-donker);
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

.overons-prose p:last-child { margin-bottom: 0; }

/* Media / images */
.overons-img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    display: block;
}

.overons-img-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 1rem;
}

.overons-img-placeholder--1 {
    background: linear-gradient(145deg, #4a8db7, #35637e);
}

.overons-img-placeholder--2 {
    background: linear-gradient(145deg, #c17b52, #8d5835);
}

.overons-img-placeholder--3 {
    background: linear-gradient(145deg, #7ea68c, #4a7359);
}

/* Quote divider */
.overons-quote {
    padding: 4rem 2rem;
    background: var(--primair-donker);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.overons-quote::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.3), transparent 60%);
    pointer-events: none;
}

.overons-quote-inner {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.overons-quote blockquote {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    font-weight: 300;
    font-style: italic;
    color: var(--room);
    line-height: 1.4;
    margin: 0;
}

/* Closing */
.overons-closing {
    padding: 5rem 2rem;
    background: var(--room);
    text-align: center;
}

.overons-closing-inner {
    max-width: 640px;
    margin: 0 auto;
}

.overons-closing-text {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 300;
    font-style: italic;
    color: var(--hout-donker);
    line-height: 1.8;
}

.overons-closing-sign {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--primair);
    margin-top: 1.5rem;
}

.overons-closing .btn {
    margin-top: 2rem;
}

/* Over ons responsive */
@media (max-width: 768px) {
    .overons-block-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .overons-block--reverse .overons-block-inner {
        direction: ltr;
    }


}

/* ============================================
   CONTENT INTRO (herbruikbaar)
   ============================================ */
.content-intro {
    padding: 3rem 2rem;
    background: var(--room);
}

.content-intro-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.content-intro-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--houtskool);
    line-height: 1.3;
}

.content-intro-text {
    font-size: 1.05rem;
    color: var(--hout-donker);
    line-height: 1.8;
    margin-top: 1rem;
}

/* ============================================
   KAMPEERPLAATSEN GRID
   ============================================ */
.kampeer-velden {
    padding: 5rem 2rem;
    background: var(--room);
}

.kampeer-velden-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.kampeer-velden-header {
    text-align: center;
    margin-bottom: 3rem;
}

.kampeer-velden-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

.kampeer-veld {
    background: var(--wit);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(42,37,32,0.04);
    transition: transform 0.3s, box-shadow 0.3s;
}

.kampeer-veld:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(42,37,32,0.08);
}

.kampeer-veld-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.kampeer-veld-placeholder {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kampeer-veld-placeholder svg { color: rgba(255,255,255,0.4); }

.kampeer-veld-placeholder--1 { background: linear-gradient(145deg, #7ea68c, #5a8a6a); }
.kampeer-veld-placeholder--2 { background: linear-gradient(145deg, #4a8db7, #35637e); }
.kampeer-veld-placeholder--3 { background: linear-gradient(145deg, #c4a052, #a08038); }
.kampeer-veld-placeholder--4 { background: linear-gradient(145deg, #8B6F4E, #6d5539); }

.kampeer-veld-info {
    padding: 1.25rem 1.5rem;
}

.kampeer-veld-info h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--houtskool);
}

.kampeer-veld-info p {
    font-size: 0.85rem;
    color: var(--hout);
    margin-top: 0.25rem;
}

/* Voorzieningen grid */
.voorzieningen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.voorziening-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    background: rgba(67,125,158,0.06);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: var(--hout-donker);
}

.voorziening-icoon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Kampeer CTA */
.kampeer-cta {
    padding: 4rem 2rem;
    background: var(--room);
}

.kampeer-cta-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    padding: 3rem;
    background: var(--wit);
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(42,37,32,0.06);
}

.kampeer-cta-info h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--houtskool);
    margin-top: 0.5rem;
}

.kampeer-cta-info p {
    font-size: 0.95rem;
    color: var(--hout-donker);
    margin-top: 0.5rem;
}

.kampeer-cta-small {
    font-size: 0.82rem !important;
    color: var(--hout) !important;
    font-style: italic;
}

.kampeer-cta-action {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .kampeer-velden-grid { grid-template-columns: repeat(2, 1fr); }
    .voorzieningen-grid { grid-template-columns: 1fr; }
    .kampeer-cta-inner { flex-direction: column; text-align: center; padding: 2rem; }
    .kampeer-cta-action { flex-direction: column; width: 100%; }
    .kampeer-cta-action .btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .kampeer-velden-grid { grid-template-columns: 1fr; }
}

/* ============================================
   ACCOMMODATIES DETAIL LIJST
   ============================================ */
.accom-lijst {
    padding: 3rem 2rem 5rem;
    background: var(--room);
}

.accom-lijst-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.accom-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    background: var(--wit);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(42,37,32,0.06);
    transition: box-shadow 0.3s;
}

.accom-detail:hover {
    box-shadow: 0 8px 32px rgba(42,37,32,0.1);
}

.accom-detail--reverse {
    direction: rtl;
}

.accom-detail--reverse > * {
    direction: ltr;
}

/* Media */
.accom-detail-media {
    position: relative;
    min-height: 380px;
}

.accom-detail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
}

.accom-detail-placeholder {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accom-detail-placeholder svg { color: rgba(255,255,255,0.3); }

.accom-detail-placeholder--1 { background: linear-gradient(145deg, #4a8db7, #35637e); }
.accom-detail-placeholder--2 { background: linear-gradient(145deg, #7ea68c, #5a8a6a); }
.accom-detail-placeholder--3 { background: linear-gradient(145deg, #c4a052, #a08038); }
.accom-detail-placeholder--4 { background: linear-gradient(145deg, #8B6F4E, #6d5539); }

.accom-detail-badge {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    background: var(--honing);
    color: var(--wit);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
    border-radius: 100px;
}

.accom-detail--reverse .accom-detail-badge {
    left: auto;
    right: 1.25rem;
}

/* Content */
.accom-detail-content {
    padding: 2.5rem 2.5rem 2.5rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.accom-detail--reverse .accom-detail-content {
    padding: 2.5rem 0 2.5rem 2.5rem;
}

.accom-detail-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--houtskool);
    margin-top: 0.35rem;
}

.accom-detail-meta {
    margin-top: 0.5rem;
}

.accom-detail-personen {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--primair);
    font-weight: 500;
}

.accom-detail-desc {
    font-size: 0.95rem;
    color: var(--hout-donker);
    line-height: 1.75;
    margin-top: 1rem;
}

.accom-kenmerken {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.accom-kenmerk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--hout-donker);
    padding: 0.5rem 0.65rem;
    background: var(--room);
    border-radius: 0.4rem;
}

.accom-kenmerk-icoon {
    font-size: 1rem;
    flex-shrink: 0;
}

.accom-detail-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .accom-detail {
        grid-template-columns: 1fr;
    }

    .accom-detail--reverse {
        direction: ltr;
    }

    .accom-detail-media {
        min-height: 240px;
    }

    .accom-detail-content {
        padding: 0 2rem 2rem !important;
    }

    .accom-detail--reverse .accom-detail-badge {
        left: 1.25rem;
        right: auto;
    }

    .accom-kenmerken {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   ARRANGEMENTEN
   ============================================ */
.arr-tip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding: 0.85rem 1.5rem;
    background: rgba(212,168,71,0.08);
    border: 1px solid rgba(212,168,71,0.2);
    border-radius: 100px;
    font-size: 0.88rem;
    color: var(--hout-donker);
}

.arr-tip-icon { font-size: 1.1rem; }

.arr-grid-section {
    padding: 2rem 2rem 5rem;
    background: var(--wit);
}

.arr-grid-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.arr-card {
    background: var(--wit);
    border-radius: 1rem;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(42,37,32,0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
}

.arr-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
}

.arr-card--groen::before { background: var(--salie); }
.arr-card--hout::before  { background: var(--hout); }
.arr-card--blauw::before { background: var(--primair); }
.arr-card--goud::before  { background: var(--honing); }

.arr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(42,37,32,0.1);
}

.arr-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.arr-card-icoon {
    font-size: 2.2rem;
    flex-shrink: 0;
    line-height: 1;
}

.arr-card-naam {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--houtskool);
    line-height: 1.25;
}

.arr-card-periode {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primair);
    background: rgba(67,125,158,0.08);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-top: 0.4rem;
}

.arr-card-img-wrap {
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.arr-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.arr-card-desc {
    font-size: 0.95rem;
    color: var(--hout-donker);
    line-height: 1.75;
    flex: 1;
}

.arr-card-extras {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.arr-card-extras li {
    font-size: 0.88rem;
    color: var(--hout-donker);
    padding-left: 1.5rem;
    position: relative;
}

.arr-card-extras li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,<svg class=%22lucide lucide-check%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%237EA68C%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 > <path d=%22M20 6 9 17l-5-5%22 /> </svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.arr-card-footer {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--linnen);
}

@media (max-width: 768px) {
    .arr-grid-inner { grid-template-columns: 1fr; }
    .arr-card { padding: 2rem; }
}

.page-arrangementen .content-intro {
    padding-bottom: 1.5rem;
}

/* ============================================
   FACILITEITEN PAGINA
   ============================================ */
.fac-lijst {
    padding: 0 2rem 5rem;
    background: var(--wit);
}

.fac-lijst-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.page-faciliteiten .content-intro {
    padding-bottom: 2.5rem;
}

.fac-item {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 0;
    background: var(--room);
    border-radius: 1rem;
    overflow: hidden;
    transition: box-shadow 0.3s;
}

.fac-item:hover {
    box-shadow: 0 8px 32px rgba(42,37,32,0.08);
}

.fac-item--reverse {
    direction: rtl;
}

.fac-item--reverse > * {
    direction: ltr;
}

.fac-item-media {
    position: relative;
    min-height: 280px;
}

.fac-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
}

.fac-item-placeholder {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fac-item-emoji {
    font-size: 4rem;
    opacity: 0.7;
    filter: grayscale(0.1);
}

.fac-item-placeholder--1 { background: linear-gradient(145deg, #4a8db7, #35637e); }
.fac-item-placeholder--2 { background: linear-gradient(145deg, #7ea68c, #5a8a6a); }
.fac-item-placeholder--3 { background: linear-gradient(145deg, #c4a052, #a08038); }
.fac-item-placeholder--4 { background: linear-gradient(145deg, #8B6F4E, #6d5539); }

.fac-item-content {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fac-item-naam {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--houtskool);
}

.fac-item-desc {
    font-size: 0.95rem;
    color: var(--hout-donker);
    line-height: 1.75;
    margin-top: 0.75rem;
}

.fac-item-link {
    margin-top: 1.25rem;
    align-self: flex-start;
}

@media (max-width: 768px) {
    .fac-item {
        grid-template-columns: 1fr;
    }
    .fac-item--reverse { direction: ltr; }
    .fac-item-media { min-height: 200px; }
    .fac-item-content { padding: 2rem; }
}

/* ============================================
   OMGEVING PAGINA
   ============================================ */
.omg-section {
    padding: 5rem 2rem;
    background: var(--wit);
}

.omg-section-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.page-omgeving .content-intro {
    padding-bottom: 2.5rem;
}

.omg-cat {
    background: var(--room);
    border-radius: 1rem;
    padding: 2.5rem;
}

.omg-cat-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.omg-cat-icoon {
    font-size: 2rem;
    flex-shrink: 0;
}

.omg-cat-naam {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--houtskool);
}

.omg-cat-desc {
    font-size: 0.95rem;
    color: var(--hout-donker);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.omg-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.omg-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--wit);
    border-radius: 0.65rem;
    text-decoration: none;
    transition: all 0.25s;
    border: 1px solid transparent;
}

.omg-link:hover {
    border-color: var(--primair);
    box-shadow: 0 4px 16px rgba(67,125,158,0.08);
    transform: translateX(4px);
}

.omg-link-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.omg-link-titel {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--houtskool);
}

.omg-link:hover .omg-link-titel {
    color: var(--primair-donker);
}

.omg-link-desc {
    font-size: 0.82rem;
    color: var(--hout);
}

.omg-link-arrow {
    color: var(--hout-licht);
    flex-shrink: 0;
    transition: all 0.25s;
}

.omg-link:hover .omg-link-arrow {
    color: var(--primair);
    transform: translate(2px, -2px);
}

@media (max-width: 768px) {
    .omg-cat { padding: 1.75rem; }
}

/* ============================================
   OMGEVING — HIGHLIGHTS STRIP
   ============================================ */
.omg-highlights {
    padding: 0 2rem 3rem;
    background: var(--wit);
}

.omg-highlights-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.omg-hl {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--room);
    border-radius: 0.75rem;
    transition: transform 0.3s;
}

.omg-hl:hover { transform: translateY(-3px); }

.omg-hl-icoon { font-size: 1.8rem; margin-bottom: 0.5rem; }

.omg-hl strong {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--houtskool);
}

.omg-hl-tekst {
    font-size: 0.78rem;
    color: var(--hout);
    margin-top: 0.2rem;
    line-height: 1.4;
}

/* ============================================
   OMGEVING — FOTOGALERIJ
   ============================================ */
.omg-galerij {
    padding: 5rem 2rem;
    background: var(--room);
}

.omg-galerij-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.omg-galerij-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.omg-foto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 1rem;
}

.omg-foto {
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
}

.omg-foto:nth-child(1),
.omg-foto:nth-child(4) {
    grid-column: span 2;
}

.omg-foto-img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

.omg-foto:hover .omg-foto-img {
    transform: scale(1.03);
}

.omg-foto-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 2rem 1.25rem 1rem;
    background: linear-gradient(to top, rgba(42,37,32,0.7), transparent);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--room);
}

/* Placeholders */
.omg-foto-placeholder {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.omg-foto-placeholder-text {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
}

.omg-section-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

@media (max-width: 1024px) {
    .omg-highlights-inner { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .omg-highlights-inner { grid-template-columns: repeat(2, 1fr); }
    .omg-foto-grid { grid-template-columns: 1fr 1fr; }
    .omg-foto:nth-child(1),
    .omg-foto:nth-child(4) { grid-column: span 2; }
}

@media (max-width: 480px) {
    .omg-foto-grid { grid-template-columns: 1fr; }
    .omg-foto:nth-child(1),
    .omg-foto:nth-child(4) { grid-column: span 1; }
}

/* ============================================
   BROODJESSERVICE
   ============================================ */

/* Stappen */
.brood-hoe {
    padding: 4rem 2rem;
    background: var(--wit);
}

.brood-hoe-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.page-broodjesservice .content-intro {
    padding-bottom: 2rem;
}

.brood-stappen {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.brood-stap {
    text-align: center;
    flex: 1;
    max-width: 220px;
}

.brood-stap-nr {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--primair);
    color: var(--wit);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
}

.brood-stap h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--houtskool);
}

.brood-stap p {
    font-size: 0.85rem;
    color: var(--hout);
    line-height: 1.6;
    margin-top: 0.3rem;
}

.brood-stap-arrow {
    font-size: 1.5rem;
    color: var(--honing);
    margin-top: 0.8rem;
    flex-shrink: 0;
}

.brood-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.brood-info-card {
    background: var(--room);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.brood-info-icoon { font-size: 1.5rem; flex-shrink: 0; }

.brood-info-card p {
    font-size: 0.9rem;
    color: var(--hout-donker);
    line-height: 1.65;
}

/* Producten grid */
.brood-producten {
    padding: 5rem 2rem;
    background: var(--room);
}

.brood-producten-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.brood-producten-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.brood-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1.25rem;
}

.brood-card {
    background: var(--wit);
    border-radius: var(--radius);
    overflow: hidden;
    text-align: center;
    box-shadow: 0 2px 12px rgba(42,37,32,0.04);
    transition: transform 0.3s, box-shadow 0.3s;
}

.brood-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(42,37,32,0.08);
}

.brood-card-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.brood-card-placeholder {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

.brood-card-placeholder--1 { background: linear-gradient(145deg, #eadec4, #c4982f); }
.brood-card-placeholder--2 { background: linear-gradient(145deg, #c4a052, #a08038); }
.brood-card-placeholder--3 { background: linear-gradient(145deg, #8B6F4E, #6d5539); }

.brood-card-info {
    padding: 1rem;
}

.brood-card-info h3 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--houtskool);
}

.brood-card-prijs {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primair);
    margin-top: 0.25rem;
}

/* Bestelformulier */
.brood-bestel {
    padding: 5rem 2rem;
    background: var(--primair);
}

.brood-bestel-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.brood-bestel-header {
    margin-bottom: 2.5rem;
}

.brood-bestel-header .section-label,
.brood-bestel-header .section-title,
.brood-bestel-header .section-desc {
    color: var(--room);
}

.brood-form-wrap {
    background: rgba(245,240,232,0.95);
    border-radius: 1rem;
    padding: 2.5rem;
}

.brood-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.brood-form-group label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hout);
    margin-bottom: 0.4rem;
}

.brood-form-group input,
.brood-form-group textarea,
.brood-form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--linnen);
    border-radius: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--houtskool);
    background: var(--wit);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.brood-form-group input:focus,
.brood-form-group textarea:focus {
    outline: none;
    border-color: var(--primair);
    box-shadow: 0 0 0 3px rgba(67,125,158,0.08);
}

.brood-form-producten {
    margin-top: 1.5rem;
}

.brood-form-producten > label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hout);
    margin-bottom: 0.75rem;
}

.brood-bestel-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.brood-bestel-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--wit);
    border-radius: 0.5rem;
    border: 1.5px solid var(--linnen);
}

.brood-bestel-naam {
    flex: 1;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--houtskool);
}

.brood-bestel-prijs {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primair);
    min-width: 60px;
    text-align: right;
}

.brood-qty-input {
    width: 60px !important;
    text-align: center;
    padding: 0.5rem !important;
    border: 1.5px solid var(--linnen) !important;
    border-radius: 0.4rem !important;
}

.brood-form-full {
    margin-top: 1.5rem;
}

.brood-submit {
    margin-top: 1.5rem;
    width: 100%;
    justify-content: center;
}

@media (max-width: 768px) {
    .brood-stappen { flex-direction: column; align-items: center; }
    .brood-stap-arrow { transform: rotate(90deg); }
    .brood-info-row { grid-template-columns: 1fr; }
    .brood-form-grid { grid-template-columns: 1fr; }
    .brood-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   PRAKTISCHE INFORMATIE
   ============================================ */
.pi-blokken {
    padding: 0 2rem 5rem;
    background: var(--wit);
}

.page-praktisch .content-intro { padding-bottom: 2.5rem; }

.pi-blokken-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.pi-blok {
    background: var(--room);
    border-radius: 0.75rem;
    padding: 1.75rem;
    transition: transform 0.3s;
}

.pi-blok:hover { transform: translateY(-3px); }

.pi-blok-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.pi-blok-icoon { font-size: 1.5rem; flex-shrink: 0; }

.pi-blok-header h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--houtskool);
}

.pi-blok p {
    font-size: 0.88rem;
    color: var(--hout-donker);
    line-height: 1.7;
}

/* Vertrek checklist */
.pi-checklist-section {
    padding: 5rem 2rem;
    background: var(--room);
}

.pi-checklist-inner {
    max-width: 700px;
    margin: 0 auto;
    background: var(--wit);
    border-radius: 1rem;
    padding: 3rem;
    box-shadow: 0 4px 20px rgba(42,37,32,0.06);
}

.pi-checklist-header {
    text-align: center;
    margin-bottom: 2rem;
}

.pi-checklist-header p {
    font-size: 0.95rem;
    color: var(--hout-donker);
    margin-top: 0.75rem;
}

.pi-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pi-check-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--room);
    border-radius: 0.5rem;
    font-size: 0.9rem;
    color: var(--hout-donker);
}

.pi-check-item svg {
    color: var(--salie);
    flex-shrink: 0;
}

/* Telefoonlijst */
.pi-telefoon {
    padding: 5rem 2rem;
    background: var(--wit);
}

.pi-telefoon-inner {
    max-width: 800px;
    margin: 0 auto;
}

.pi-telefoon-header {
    text-align: center;
    margin-bottom: 2rem;
}

.pi-tel-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pi-tel-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--room);
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.pi-tel-item:hover {
    border-color: var(--primair);
    background: var(--wit);
}

.pi-tel-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.pi-tel-info strong {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--houtskool);
}

.pi-tel-extra {
    font-size: 0.78rem;
    color: var(--hout);
}

.pi-tel-nummer {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primair);
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .pi-blokken-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .pi-blokken-inner { grid-template-columns: 1fr; }
    .pi-checklist-inner { padding: 2rem; }
}

/* ============================================
   VAKANTIEKIEKJES GALERIJ PAGINA
   ============================================ */
.vk-galerij {
    padding: 0 2rem 5rem;
    background: var(--wit);
}

.page-vakantiekiekjes .content-intro { padding-bottom: 2.5rem; }

.vk-galerij-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.vk-masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.vk-foto {
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
}

.vk-foto--wide {
    grid-column: span 2;
}

.vk-foto-link {
    display: block;
    position: relative;
}

.vk-foto-img {
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

.vk-foto--normal .vk-foto-img { min-height: 220px; }
.vk-foto--wide .vk-foto-img { min-height: 280px; }

.vk-foto-overlay {
    position: absolute;
    inset: 0;
    background: rgba(42,37,32,0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.vk-foto-overlay svg {
    color: var(--wit);
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s;
}

.vk-foto-link:hover .vk-foto-img {
    transform: scale(1.04);
}

.vk-foto-link:hover .vk-foto-overlay {
    background: rgba(42,37,32,0.3);
}

.vk-foto-link:hover .vk-foto-overlay svg {
    opacity: 1;
    transform: scale(1);
}

.vk-foto-caption {
    font-size: 0.82rem;
    color: var(--hout);
    padding: 0.5rem 0.25rem;
    font-style: italic;
}

/* Placeholders */
.vk-foto-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

.vk-foto--wide.vk-foto-placeholder { min-height: 280px; }

.vk-placeholder-text {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
}

@media (max-width: 768px) {
    .vk-masonry { grid-template-columns: 1fr 1fr; }
    .vk-foto--wide { grid-column: span 2; }
    .vk-foto-img, .vk-foto--normal .vk-foto-img { min-height: 180px; }
    .vk-foto--wide .vk-foto-img, .vk-foto--wide.vk-foto-placeholder { min-height: 220px; }
}

@media (max-width: 480px) {
    .vk-masonry { grid-template-columns: 1fr; }
    .vk-foto--wide { grid-column: span 1; }
}

/* ============================================
   CONTACT PAGINA
   ============================================ */
.ct-section {
    padding: 5rem 2rem;
    background: var(--wit);
}

.ct-section-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.ct-info-titel,
.ct-form-titel {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--houtskool);
    margin-bottom: 1.5rem;
}

.ct-info-items {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ct-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--room);
    border-radius: 0.65rem;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}

a.ct-info-item:hover {
    border-color: var(--primair);
    background: var(--wit);
    transform: translateX(4px);
}

.ct-info-item--whatsapp:hover {
    border-color: #25d366 !important;
}

.ct-info-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(67,125,158,0.08);
    color: var(--primair);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ct-info-item--whatsapp .ct-info-icon {
    background: rgba(37,211,102,0.08);
    color: #25d366;
}

.ct-info-item strong {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--houtskool);
    display: block;
}

.ct-info-item span {
    font-size: 0.85rem;
    color: var(--hout-donker);
    line-height: 1.5;
}

.ct-route-btn {
    margin-top: 1.5rem;
}

.ct-form-desc {
    font-size: 0.92rem;
    color: var(--hout-donker);
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.ct-form-wrap {
    background: var(--room);
    border-radius: 1rem;
    padding: 2.5rem;
}

.ct-form select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--linnen);
    border-radius: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--houtskool);
    background: var(--wit);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238B6F4E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.ct-map {
    line-height: 0;
}

.ct-map iframe {
    width: 100%;
    display: block;
}

@media (max-width: 768px) {
    .ct-section-inner { grid-template-columns: 1fr; }
    .ct-form-wrap { padding: 2rem; }
}

/* ============================================
   TE KOOP PAGINA
   ============================================ */
.page-te-koop .content-intro { padding-bottom: 2rem; }

.tk-usps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.tk-usp {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--room);
    padding: 0.5rem 1rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--hout-donker);
}

.tk-info {
    padding: 0 2rem 4rem;
    background: var(--wit);
}

.tk-info-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.tk-info-card {
    background: var(--room);
    border-radius: 0.75rem;
    padding: 2rem;
}

.tk-info-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--houtskool);
    margin-bottom: 0.75rem;
}

.tk-info-card p {
    font-size: 0.9rem;
    color: var(--hout-donker);
    line-height: 1.7;
}

/* Objecten */
.tk-objecten {
    padding: 5rem 2rem;
    background: var(--room);
}

.tk-objecten-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.tk-objecten-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.tk-object {
    background: var(--wit);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(42,37,32,0.06);
    margin-bottom: 2.5rem;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
}

.tk-object-media {
    position: relative;
    min-height: 400px;
}

.tk-object-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
}

.tk-object-placeholder {
    width: 100%; height: 100%;
    position: absolute; inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #7ea68c, #5a8a6a);
}

.tk-object-placeholder svg { color: rgba(255,255,255,0.3); }

.tk-object-status {
    position: absolute;
    top: 1.25rem; left: 1.25rem;
    padding: 0.4rem 1.25rem;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tk-object-status--te-koop {
    background: var(--salie);
    color: var(--wit);
}

.tk-object-status--verkocht {
    background: var(--terracotta);
    color: var(--wit);
}

.tk-object-status--in-optie {
    background: var(--honing);
    color: var(--wit);
}

.tk-object-content {
    padding: 2.5rem;
}

.tk-object-titel {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--houtskool);
}

.tk-object-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.tk-meta-item {
    font-size: 0.82rem;
    color: var(--hout);
    background: var(--room);
    padding: 0.3rem 0.7rem;
    border-radius: 100px;
}

.tk-object-prijs {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primair);
    margin-top: 1rem;
}

.tk-object-desc {
    font-size: 0.92rem;
    color: var(--hout-donker);
    line-height: 1.75;
    margin-top: 1rem;
}

.tk-kenmerken {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linnen);
}

.tk-kenmerk {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0;
    font-size: 0.82rem;
}

.tk-kenmerk-label {
    color: var(--hout);
}

.tk-kenmerk-waarde {
    font-weight: 600;
    color: var(--houtskool);
    text-align: right;
}

.tk-object-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* Voorwaarden */
.tk-voorwaarden {
    padding: 4rem 2rem;
    background: var(--wit);
}

.tk-voorwaarden-inner {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(212,168,71,0.06);
    border: 1px solid rgba(212,168,71,0.15);
    border-radius: 0.75rem;
    padding: 2rem;
}

.tk-voorwaarden-inner h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--houtskool);
    margin-bottom: 1rem;
}

.tk-voorwaarden-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tk-vw-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.88rem;
    color: var(--hout-donker);
    line-height: 1.5;
}

.tk-vw-item svg {
    color: var(--honing);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

@media (max-width: 768px) {
    .tk-info-inner { grid-template-columns: 1fr; }
    .tk-object { grid-template-columns: 1fr; }
    .tk-object-media { min-height: 250px; }
    .tk-object-content { padding: 2rem; }
    .tk-kenmerken { grid-template-columns: 1fr; }
}

/* ============================================
   VACATURES PAGINA
   ============================================ */
.vac-lijst {
    padding: 0 2rem 5rem;
    background: var(--wit);
}

.page-vacatures .content-intro { padding-bottom: 2.5rem; }

.vac-lijst-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.vac-card {
    background: var(--room);
    border-radius: 1rem;
    padding: 2.5rem;
    transition: box-shadow 0.3s;
}

.vac-card:hover {
    box-shadow: 0 8px 32px rgba(42,37,32,0.08);
}

.vac-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.vac-card-titel {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--houtskool);
}

.vac-card-type {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primair);
    background: rgba(67,125,158,0.08);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-top: 0.35rem;
}

.vac-card-badge {
    background: var(--salie);
    color: var(--wit);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    border-radius: 100px;
    flex-shrink: 0;
}

.vac-card-desc {
    font-size: 0.95rem;
    color: var(--hout-donker);
    line-height: 1.75;
}

.vac-card-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linnen);
}

.vac-detail-col h4 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--houtskool);
    margin-bottom: 0.75rem;
}

.vac-check-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.vac-check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--hout-donker);
    line-height: 1.5;
}

.vac-check-item svg {
    color: var(--salie);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.vac-card-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linnen);
}

/* Empty state */
.vac-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--room);
    border-radius: 1rem;
}

.vac-empty-icon { font-size: 3rem; margin-bottom: 1rem; }

.vac-empty p {
    font-size: 0.95rem;
    color: var(--hout-donker);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}

/* Open sollicitatie */
.vac-open {
    padding: 5rem 2rem;
    background: var(--room);
}

.vac-open-inner {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.vac-open-inner p {
    font-size: 0.95rem;
    color: var(--hout-donker);
    line-height: 1.7;
    margin: 1rem 0 1.75rem;
}

@media (max-width: 768px) {
    .vac-card { padding: 2rem; }
    .vac-card-details { grid-template-columns: 1fr; gap: 1.5rem; }
    .vac-card-header { flex-direction: column; }
}

/* ============================================
   REVIEWS PAGINA
   ============================================ */
.rev-badges {
    padding: 0 2rem 4rem;
    background: var(--wit);
}

.page-reviews .content-intro { padding-bottom: 2.5rem; }

.rev-badges-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.rev-badge {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    background: var(--room);
    border-radius: 1rem;
    padding: 2rem;
    border: 2px solid rgba(212,168,71,0.15);
}

.rev-badge-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.rev-badge-img {
    width: 80px;
    height: auto;
    flex-shrink: 0;
    object-fit: contain;
}

.rev-badge-content h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--houtskool);
}

.rev-badge-score {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--honing);
    background: rgba(212,168,71,0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-top: 0.35rem;
}

.rev-badge-content p {
    font-size: 0.85rem;
    color: var(--hout-donker);
    line-height: 1.65;
    margin-top: 0.65rem;
}

/* Reviews grid */
.rev-lijst {
    padding: 5rem 2rem;
    background: var(--room);
}

.rev-lijst-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.rev-lijst-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.rev-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.rev-card {
    background: var(--wit);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(42,37,32,0.04);
    transition: transform 0.3s, box-shadow 0.3s;
    margin: 0;
    border: none;
}

.rev-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(42,37,32,0.08);
}

.rev-card-stars {
    display: flex;
    gap: 0.15rem;
    color: var(--honing);
    margin-bottom: 1rem;
}

.rev-card-tekst {
    font-size: 0.92rem;
    color: var(--hout-donker);
    line-height: 1.75;
    font-style: italic;
    flex: 1;
}

.rev-card-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--linnen);
}

.rev-card-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--primair);
    color: var(--wit);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.rev-card-naam {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 600;
    font-style: normal;
    color: var(--houtskool);
}

/* Eerste review breed */
.rev-grid .rev-card:first-child {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .rev-badges-inner { grid-template-columns: 1fr; }
    .rev-grid { grid-template-columns: 1fr; }
    .rev-grid .rev-card:first-child { grid-column: span 1; }
}

/* ============================================
   MOBILE SUB-MENU
   ============================================ */
.mobile-nav-list .sub-menu {
    padding-left: 1.25rem;
}

.mobile-nav-list .sub-menu li a {
    font-size: 1.1rem;
    color: rgba(245,240,232,0.7);
    padding: 0.65rem 0;
}

.mobile-nav-list .sub-menu li a:hover {
    color: var(--room);
}

.mobile-nav-list li.menu-item-has-children > a::after {
    content: ' ▾';
    font-size: 0.7em;
    opacity: 0.5;
}

/* ============================================
   DECORATIEVE GOLVEN TUSSEN SECTIES
   ============================================ */

/* Golf onderaan USP strip (blauw → licht) */
.usp-strip::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 2;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,100 L0,60 C200,100 400,20 700,50 C1000,80 1200,10 1440,40 L1440,100 Z' fill='%23F5F0E8'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: 100% 100%;
    pointer-events: none;
}

/* Golf boven CTA sectie (licht → donkerblauw) */
.cta-section::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 3;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 L0,50 C300,0 600,90 900,40 C1100,10 1300,70 1440,30 L1440,0 Z' fill='%23F5F0E8'/%3E%3C/svg%3E") no-repeat top center;
    background-size: 100% 100%;
    pointer-events: none;
}

/* Golf onder CTA sectie (donkerblauw → licht) */
.cta-section::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 3;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,100 L0,40 C250,90 500,10 750,50 C1000,90 1250,20 1440,60 L1440,100 Z' fill='%23F5F0E8'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: 100% 100%;
    pointer-events: none;
}

/* Golf boven contact strip (licht → blauw) */
.contact-strip::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 2;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 L0,60 C240,20 480,90 720,50 C960,10 1200,70 1440,30 L1440,0 Z' fill='%23F5F0E8'/%3E%3C/svg%3E") no-repeat top center;
    background-size: 100% 100%;
    pointer-events: none;
}

/* Extra padding voor golven */
.cta-section { padding-top: 6rem; padding-bottom: 6rem; }
.contact-strip { padding-top: 6rem; }

/* ============================================
   SIMPLIFIED CARDS — IMAGE TILES + TITLE
   ============================================ */

/* Accom cards as image tiles */
a.accom-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
}

a.accom-card .accom-img {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius);
}

a.accom-card .accom-img img,
a.accom-card .accom-img-inner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

a.accom-card:hover .accom-img img,
a.accom-card:hover .accom-img-inner {
    transform: scale(1.05);
}

a.accom-card .accom-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--houtskool);
    margin: 0;
    padding: 0.75rem 1rem;
}

a.accom-card:hover .accom-name {
    color: var(--primair);
}

/* Faciliteit cards as image tiles */
a.faciliteit-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
}

a.faciliteit-card .faciliteit-img {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius);
}

a.faciliteit-card .faciliteit-img img,
a.faciliteit-card .faciliteit-img-inner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

a.faciliteit-card:hover .faciliteit-img img,
a.faciliteit-card:hover .faciliteit-img-inner {
    transform: scale(1.05);
}

.faciliteit-placeholder {
    background: var(--linnen);
    width: 100%;
    height: 100%;
}

a.faciliteit-card .faciliteit-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--houtskool);
    margin: 0;
    padding: 0.75rem 1rem;
}

a.faciliteit-card:hover .faciliteit-name {
    color: var(--primair);
}

/* ============================================
   BROODJESSERVICE — RESTYLED
   ============================================ */

/* Intro zonder hero */
.brood-intro {
    background: var(--room);
    padding: calc(var(--nav-height) + 4rem) 2rem 4rem;
}

.brood-intro-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.brood-intro h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--houtskool);
    margin: 0.5rem 0 1rem;
}

.brood-intro p {
    font-size: 1.05rem;
    color: var(--hout-donker);
    line-height: 1.7;
}

/* Hoe werkt het — blauw */
.brood-hoe--blauw {
    background: var(--primair-donker);
}

.brood-hoe--blauw .brood-stap h3,
.brood-hoe--blauw .brood-stap p,
.brood-hoe--blauw .brood-stap-arrow {
    color: var(--room);
}

.brood-hoe--blauw .brood-stap-nr {
    background: rgba(245,240,232,0.15);
    color: var(--room);
}

.brood-hoe--blauw .brood-info-card {
    background: rgba(245,240,232,0.08);
    border-color: rgba(245,240,232,0.12);
}

.brood-hoe--blauw .brood-info-card p {
    color: rgba(245,240,232,0.85);
}

/* Formulier broodje afbeeldingen */
.brood-bestel-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.brood-bestel-img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.brood-bestel-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brood-bestel-img--placeholder {
    background: var(--linnen);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* Geen beige golf als bestel-sectie (blauw) direct boven contact-strip (blauw) zit */
.page-broodjesservice .contact-strip::before { display: none; }

/* ============================================
   REVIEWS PAGE SLIDER
   ============================================ */
.rev-slider {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.rev-track {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.rev-track .rev-card {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.rev-track .rev-card--active {
    display: block;
    opacity: 1;
}

.rev-track .rev-card {
    background: var(--wit);
    border-radius: var(--radius);
    padding: 2.5rem;
    box-shadow: 0 2px 12px rgba(42,37,32,0.04);
    margin: 0;
}

.rev-track .rev-card-stars {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 1.25rem;
    color: var(--honing);
}

.rev-track .rev-card-tekst {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--hout-donker);
    font-style: italic;
    margin-bottom: 1.5rem;
}

.rev-track .rev-card-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--linnen);
}

.rev-track .rev-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primair);
    color: var(--wit);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
}

.rev-track .rev-card-naam {
    font-style: normal;
    font-weight: 600;
    color: var(--houtskool);
}

/* Arrows */
.rev-arrow {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--primair);
    background: var(--wit);
    color: var(--primair);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.rev-arrow:hover {
    background: var(--primair);
    color: var(--wit);
}

/* Dots */
.rev-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.rev-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--primair);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s;
}

.rev-dot--active,
.rev-dot:hover {
    background: var(--primair);
}

@media (max-width: 600px) {
    .rev-slider { gap: 0.75rem; }
    .rev-arrow { width: 40px; height: 40px; }
    .rev-track .rev-card { padding: 1.5rem; }
}

/* ============================================
   ALTERNATING SECTIONS — FOTO LINKS/RECHTS
   ============================================ */
.content-section {
    padding: 4rem 2rem;
}

.content-section:nth-child(even) {
    background: var(--room);
}

.content-section-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

/* Wissel foto links/rechts */
.content-section:nth-child(even) .content-section-inner {
    direction: rtl;
}

.content-section:nth-child(even) .content-section-inner > * {
    direction: ltr;
}

.content-section-img {
    border-radius: var(--radius);
    overflow: hidden;
}

.content-section-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
}

.content-section-text h2,
.content-section-text h3 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--houtskool);
    margin-bottom: 1rem;
}

.content-section-text p {
    font-size: 1rem;
    color: var(--hout-donker);
    line-height: 1.7;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .content-section-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .content-section:nth-child(even) .content-section-inner {
        direction: ltr;
    }
}

/* Logo in kleur op niet-home pagina's (lichte achtergrond) */
.header-logo--light { display: inline-block; }
.header-logo--dark { display: none; }

/* Niet-home pagina's: donker logo */
body:not(.home) .header--transparent .header-logo--light { display: none; }
body:not(.home) .header--transparent .header-logo--dark { display: inline-block; }

/* Bij scrollen (solid header): altijd licht logo */
.header--solid .header-logo--light { display: inline-block !important; }
.header--solid .header-logo--dark { display: none !important; }

.header-logo--dark img {
    max-height: 44px;
    width: auto;
}

body:not(.home) .header--transparent .sticky-icon {
    background: rgba(42,37,32,0.08);
    color: var(--houtskool);
    border-color: rgba(42,37,32,0.15);
}

body:not(.home) .header--transparent .sticky-icon:hover {
    background: var(--primair);
    color: var(--wit);
    border-color: var(--primair);
}

body:not(.home) .header--transparent .sticky-icon-label {
    color: var(--houtskool);
}

/* ============================================
   GLOBAL FIX: CONTAINERS + PADDING
   Alle secties op 1200px container, 
   consistent padding, niet gecentreerd
   ============================================ */

/* Alle inner containers → 1200px */
.pi-blokken-inner,
.fac-lijst-inner,
.omg-section-inner,
.omg-highlights-inner,
.omg-galerij-inner,
.rev-badges-inner,
.rev-lijst-inner,
.overons-quote-inner,
.overons-closing-inner,
.overons-intro-inner,
.overons-block-inner,
.content-intro-inner,
.kampeer-velden-inner,
.kampeer-cta-inner,
.accom-lijst-inner,
.arr-grid-inner,
.contact-strip-inner,
.brood-hoe-inner,
.brood-bestel-inner,
.brood-intro-inner,
.page-hero-content {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Alle secties: minimaal 3rem top + bottom padding */
.pi-blokken,
.fac-lijst,
.rev-badges,
.omg-highlights,
.accom-lijst {
    padding-top: 3rem;
}

/* Geen tekst centreren */
.overons-quote,
.overons-closing,
.overons-closing-inner {
    text-align: left;
}

/* Overons quote lichte tekst op donker */
.overons-quote-inner {
    padding: 0 2rem;
}


/* ============================================
   GLOBAL FIX v2: PAGE LAYOUT
   ============================================ */

/* Page hero: eerste sectie met titel */
.page-hero {
    padding-bottom: 0 !important;
}

/* Content-intro: sluit naadloos aan op page-hero */
.content-intro {
    padding-top: 1.5rem !important;
    padding-bottom: 3rem !important;
    background: var(--room) !important;
}

/* Wanneer content-intro direct na page-hero komt: geen dubbele ruimte */
.page-hero + .content-intro {
    padding-top: 0 !important;
}

/* Content-intro titel verbergen als page-hero er al is */
.page-hero + .content-intro .content-intro-title {
    display: none;
}

/* Pagina's zonder page-hero: content-intro wordt de header */
.page-broodjesservice .brood-intro {
    padding-top: calc(var(--nav-height) + 3rem) !important;
}

/* Alle page secties: consistent padding */
.pi-blokken,
.fac-lijst,
.rev-badges,
.omg-highlights,
.accom-lijst,
.kampeer-velden,
.arr-grid,
.omg-section,
.omg-galerij,
.overons-block,
.overons-quote,
.overons-closing,
.rev-lijst,
.tekoop-info,
.tekoop-grid,
.vac-lijst,
.contact-form-section,
.contact-info-section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

/* Rev-lijst header niet centreren */
.rev-lijst-header {
    text-align: left !important;
    max-width: none !important;
    margin: 0 0 2rem !important;
}

/* ============================================
   HERO — NIEUWE DESIGN v2
   ============================================ */

/* Mobile: stack hero, show photo */
@media (max-width: 768px) {
    .hero--split {
        display: flex !important;
        flex-direction: column-reverse;
    }
    .hero-photo-area {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 300px;
    }
    .hero-content {
        padding-top: calc(var(--nav-height) + 2rem) !important;
        padding-bottom: 2rem !important;
    }
    .hero-badges {
        bottom: 1rem !important;
        right: 1rem !important;
    }
    .hero-badge img {
        max-height: 45px !important;
        max-width: 80px !important;
    }
}

/* Booking submit button blue */
.booking-submit {
    background: #437e9e !important;
}
.booking-submit:hover {
    background: #35647e !important;
}

/* Override: verberg gradient, overlay, grain */
.hero-gradient-top,
.hero-overlay,
.hero-grain { display: none !important; }

/* Override: verberg organische boog */
.hero-photo-area::before { display: none !important; }

/* ============================================
   HEADER — NIEUW DESIGN
   ============================================ */

/* Zoek & Boek button */
.sticky-boek {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    background: #dbd7cc;
    color: #3a3530;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    border: 2px solid #b5b0a5;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s;
    letter-spacing: 0.02em;
}

.sticky-boek:hover {
    background: #437e9e;
    color: #fff;
    border-color: #437e9e;
}

/* Icons: solid blue circles */
.sticky-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #437e9e !important;
    color: #fff !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: all 0.3s;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.sticky-icon:hover {
    background: #35647e !important;
    color: #fff !important;
}

/* Menu button: dark blue pill */
.sticky-icon--menu {
    border-radius: 20px !important;
    width: auto !important;
    padding: 0 1rem !important;
    gap: 0.5rem !important;
    background: #437e9e !important;
}

.sticky-icon--menu .hamburger span {
    background: #fff !important;
}

.sticky-icon-label {
    color: #fff !important;
    font-family: var(--font-display) !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* Bij scrollen: behoud blauwe stijl */
.header--solid .sticky-icon {
    background: #437e9e !important;
    color: #fff !important;
}

.header--solid .sticky-boek {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}

/* Niet-home pagina's: zelfde blauwe stijl */
body:not(.home) .header--transparent .sticky-icon {
    background: #437e9e !important;
    color: #fff !important;
    border: none !important;
}

body:not(.home) .header--transparent .sticky-icon:hover {
    background: #35647e !important;
}

body:not(.home) .header--transparent .sticky-icon-label {
    color: #fff !important;
}

body:not(.home) .header--transparent .sticky-boek {
    background: #dbd7cc;
    color: #3a3530;
    border-color: #b5b0a5;
}

/* Mobile: hide Zoek & Boek text, smaller icons */
@media (max-width: 768px) {
    .sticky-boek { display: none; }
}

/* ============================================
   HEADER — RECHTS UITGELIJND (exact als design)
   ============================================ */
.sticky-icons {
    position: fixed !important;
    top: 1.25rem !important;
    right: 1.5rem !important;
    z-index: 1001 !important;
}

/* Header zelf onzichtbaar op homepage (alleen icons tellen) */
body.home .header {
    pointer-events: none;
}
body.home .header .sticky-icons {
    pointer-events: auto;
}

/* ============================================
   USP STRIP — NIEUW DESIGN
   ============================================ */
.usp-strip {
    background: #437e9e !important;
    position: relative;
    overflow: visible;
    padding-bottom: 3rem !important;
}

.usp-wave {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    z-index: 2;
    color: #dbd7cc;
    line-height: 0;
}

.usp-wave svg {
    display: block;
    width: 100%;
    height: 80px;
}

.usp-strip-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr) !important;
    padding-top: 5rem !important;
    padding-bottom: 1rem !important;
    gap: 0 !important;
}

.usp-strip::before { display: none !important; }

.usp-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.5rem !important;
    padding: 1.5rem 1rem !important;
    border-right: 1px solid rgba(255,255,255,0.12) !important;
}

.usp-item:last-child {
    border-right: none !important;
}

.usp-icon {
    width: 52px;
    height: 52px;
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.usp-icon svg {
    width: 24px !important;
    height: 24px !important;
    stroke: #fff;
}

.usp-label {
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.9) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.usp-sub {
    display: none !important;
}

/* Mobile USP */
@media (max-width: 768px) {
    .usp-strip-inner {
        grid-template-columns: repeat(5, 1fr) !important;
    }
    .usp-item {
        padding: 1rem 0.5rem !important;
    }
    .usp-icon {
        width: 40px;
        height: 40px;
    }
    .usp-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
    .usp-label {
        font-size: 0.65rem !important;
    }
}

@media (max-width: 480px) {
    .usp-strip-inner {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* FIX: USP icons groot zonder cirkels */
.usp-icon {
    width: auto !important;
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
}

.usp-icon svg {
    width: 40px !important;
    height: 40px !important;
}

/* FIX: geen golf onderaan USP */
.usp-strip::after { display: none !important; }
.usp-strip { overflow: hidden !important; }

/* ============================================
   RESERVEER PROMO SECTIE
   ============================================ */
.reserveer-promo {
    background: #dbd7cc;
    padding: 4rem 2rem;
    border-top: 4px solid #437e9e;
}

.reserveer-promo-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.reserveer-promo-titel {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: #3a3530;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.reserveer-promo-titel em {
    color: #437e9e;
    font-style: italic;
}

.reserveer-promo-tekst {
    font-size: 0.85rem;
    color: #5a5247;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.reserveer-promo-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.5rem;
    background: #437e9e;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s;
}

.reserveer-promo-btn:hover {
    background: #35647e;
}

.reserveer-promo-quote {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 300;
    font-style: italic;
    color: #3a3530;
    line-height: 1.3;
}

.reserveer-promo-quote em {
    color: #437e9e;
    font-weight: 700;
}

@media (max-width: 768px) {
    .reserveer-promo-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ============================================
   FACILITEITEN — NIEUW DESIGN
   ============================================ */
.faciliteiten {
    background: #437e9e !important;
    padding: 4rem 2rem !important;
}

.faciliteiten-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.faciliteiten-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 2.5rem !important;
    gap: 2rem;
    max-width: none !important;
    text-align: left !important;
}

.faciliteiten-header-text {
    max-width: 500px;
}

.faciliteiten-titel {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.faciliteiten-titel em {
    font-style: italic;
}

.faciliteiten-tekst {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
}

.faciliteiten-alle-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.5rem;
    border: 2px solid rgba(255,255,255,0.6);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s;
    flex-shrink: 0;
    margin-top: 0.5rem;
}

.faciliteiten-alle-btn:hover {
    background: #fff;
    color: #437e9e;
    border-color: #fff;
}

.faciliteiten-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
}

a.faciliteit-card {
    display: flex !important;
    flex-direction: column !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: transform 0.3s, background 0.3s !important;
}

a.faciliteit-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.18) !important;
}

a.faciliteit-card .faciliteit-img {
    aspect-ratio: 4/3 !important;
    overflow: hidden !important;
    border-radius: 12px 12px 0 0 !important;
}

a.faciliteit-card .faciliteit-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s !important;
}

a.faciliteit-card:hover .faciliteit-img img {
    transform: scale(1.05) !important;
}

.faciliteit-card-body {
    padding: 1rem 1.25rem 1.25rem;
}

a.faciliteit-card .faciliteit-name {
    font-family: var(--font-display) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 0.25rem !important;
    padding: 0 !important;
}

.faciliteit-meer {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    font-style: italic;
}

a.faciliteit-card:hover .faciliteit-meer {
    color: rgba(255,255,255,0.9);
}

.faciliteiten-cta { display: none !important; }

@media (max-width: 768px) {
    .faciliteiten-header {
        flex-direction: column !important;
    }
    .faciliteiten-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .faciliteiten-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   ACCOMMODATIES — NIEUW DESIGN
   ============================================ */
.accommodaties {
    background: #dbd7cc !important;
    padding: 4rem 2rem 0 !important;
    position: relative;
}

.accommodaties-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.accommodaties-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 2.5rem !important;
    gap: 2rem;
}

.accommodaties-header-text {
    max-width: 600px;
}

.accommodaties-titel {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: #3a3530;
    line-height: 1.25;
    font-style: italic;
}

.accommodaties-titel em.blue {
    color: #437e9e;
}

.accommodaties-alle-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.5rem;
    border: 2px solid #3a3530;
    color: #3a3530;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s;
    flex-shrink: 0;
    margin-top: 0.5rem;
}

.accommodaties-alle-btn:hover {
    background: #437e9e;
    color: #fff;
    border-color: #437e9e;
}

.accom-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
}

.accom-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.accom-card .accom-img-OLD-DISABLED {
    aspect-ratio: 16/10;
    overflow: hidden;
}

.accom-card .accom-img img,
.accom-card .accom-img-inner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.accom-card:hover .accom-img img,
.accom-card:hover .accom-img-inner {
    transform: scale(1.05);
}

.accom-card-body {
    padding: 1.25rem 1.5rem;
}

.accom-card .accom-name {
    font-family: var(--font-display) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #3a3530 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Featured card (Kamperen) */
.accom-card--featured .accom-card-desc {
    font-size: 0.82rem;
    color: #5a5247;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    white-space: pre-line;
}

.accom-card-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.accom-card-actions .btn-sm {
    font-size: 0.78rem;
    padding: 0.4rem 1rem;
    border-radius: 4px;
}

.accom-card-actions .btn-primary {
    background: #437e9e;
    color: #fff;
    border: none;
    text-decoration: none;
}

.accom-card-actions .btn-outline {
    background: transparent;
    color: #437e9e;
    border: 1.5px solid #437e9e;
    text-decoration: none;
}

/* Golf onderaan naar blauw */
.accom-wave {
    margin-top: 3rem;
    line-height: 0;
}

.accom-wave svg {
    display: block;
    width: 100%;
    height: 80px;
}

/* Hide old CTA */
.accommodaties-cta { display: none !important; }

@media (max-width: 768px) {
    .accommodaties-header {
        flex-direction: column !important;
    }
    .accom-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Homepage: geen footer-cta */
body.home .footer-cta { display: none; }

/* ============================================
   HOMEPAGE REVIEWS — NIEUW DESIGN
   ============================================ */
.hp-reviews {
    background: #dbd7cc;
    padding: 5rem 2rem;
}

.hp-reviews-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.hp-reviews-titel {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: #3a3530;
    margin-bottom: 2rem;
    letter-spacing: 0.02em;
}

/* Slider */
.hp-reviews-slider {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.hp-rev-track {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-rev-slide {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.hp-rev-slide--active {
    display: flex;
}

/* Stars */
.hp-rev-stars {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: #437e9e;
}

/* Review text */
.hp-rev-tekst {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #5a5247;
    line-height: 1.8;
    max-width: 650px;
    margin: 0 auto 1.25rem;
}

/* Author */
.hp-rev-auteur {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: #3a3530;
    font-style: italic;
}

/* Arrows */
.hp-rev-arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(58, 53, 48, 0.08);
    color: #5a5247;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.hp-rev-arrow:hover {
    background: #437e9e;
    color: #fff;
}

/* Dots */
.hp-rev-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.hp-rev-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(58, 53, 48, 0.2);
    cursor: pointer;
    padding: 0;
    transition: all 0.3s;
}

.hp-rev-dot--active,
.hp-rev-dot:hover {
    background: #437e9e;
}

/* Link */
.hp-rev-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: #437e9e;
    text-decoration: none;
    transition: color 0.3s;
}

.hp-rev-link:hover {
    color: #35647e;
}

.hp-rev-link svg {
    color: #437e9e;
}

/* Hide old reviews section on homepage */
body.home .reviews { display: none; }

@media (max-width: 600px) {
    .hp-reviews-slider { gap: 0.75rem; }
    .hp-rev-arrow { width: 36px; height: 36px; }
    .hp-rev-tekst { font-size: 0.9rem; }
}

/* ============================================
   HOMEPAGE VAKANTIEKIEKJES — NIEUW DESIGN
   ============================================ */
.hp-kiekjes {
    background: #437e9e;
    position: relative;
    padding: 0 2rem 5rem;
}

.hp-kiekjes-wave {
    line-height: 0;
    margin-bottom: 2rem;
}

.hp-kiekjes-wave svg {
    display: block;
    width: 100%;
    height: 80px;
}

.hp-kiekjes-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 3rem;
    align-items: center;
}

.hp-kiekjes-content {
    padding-right: 1rem;
}

.hp-kiekjes-titel {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.hp-kiekjes-titel em {
    font-style: italic;
}

.hp-kiekjes-tekst {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.hp-kiekjes-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.5rem;
    border: 2px solid rgba(255,255,255,0.6);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s;
    margin-top: 0.5rem;
}

.hp-kiekjes-btn:hover {
    background: #fff;
    color: #437e9e;
    border-color: #fff;
}

.hp-kiekjes-foto {
    border-radius: 12px;
    overflow: hidden;
}

.hp-kiekjes-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.hp-kiekjes-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
}

/* Hide old kiekjes section */
body.home .kiekjes { display: none; }

@media (max-width: 768px) {
    .hp-kiekjes-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .hp-kiekjes {
        padding-bottom: 3rem;
    }
}

/* Fix: accommodaties padding zonder wave */
.accommodaties {
    padding-bottom: 4rem !important;
}

/* Fix: accom-wave verwijderd */
.accom-wave { display: none; }

/* Fix: kiekjes foto uit container naar rechterrand */
.hp-kiekjes-inner {
    max-width: none !important;
    padding-left: calc((100% - 1200px) / 2);
    padding-right: 0 !important;
}

.hp-kiekjes-foto {
    border-radius: 12px 0 0 12px !important;
    overflow: hidden;
}

.hp-kiekjes-img {
    border-radius: 0 !important;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1248px) {
    .hp-kiekjes-inner {
        padding-left: 2rem;
    }
}

@media (max-width: 768px) {
    .hp-kiekjes-inner {
        padding-left: 2rem;
        padding-right: 0 !important;
    }
    .hp-kiekjes-foto {
        border-radius: 12px 0 0 12px !important;
    }
}

/* Fix: kiekjes full-width, geen blokken aan zijkanten */
.hp-kiekjes {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.hp-kiekjes-content {
    padding-left: 2rem;
}

/* ============================================
   FOOTER — NIEUW DESIGN
   ============================================ */
.footer {
    background: #dbd7cc !important;
    color: #3a3530 !important;
    position: relative;
}

.footer-wave-top {
    line-height: 0;
}

.footer-wave-top svg {
    display: block;
    width: 100%;
    height: 80px;
}

.footer-wave { display: none !important; }
.footer-cta { display: none !important; }

.footer-main {
    max-width: 1200px !important;
    margin: 0 auto;
    padding: 3rem 2rem 2rem !important;
    display: grid !important;
    grid-template-columns: 1.2fr 1fr 0.8fr !important;
    gap: 3rem !important;
}

/* Logo */
.footer-logo { margin-bottom: 1.25rem; }
.footer-logo img { max-height: 70px !important; width: auto; }
.footer-logo a { display: block; }

/* Route button */
.footer-route-btn {
    display: inline-block;
    padding: 0.45rem 1.2rem;
    border: 2px solid #3a3530;
    color: #3a3530;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    margin-bottom: 1.25rem;
    transition: all 0.3s;
}

.footer-route-btn:hover {
    background: #437e9e;
    color: #fff;
    border-color: #437e9e;
}

/* Contact items */
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
    color: #5a5247;
}

.footer-contact-item svg { flex-shrink: 0; margin-top: 2px; color: #437e9e; }
.footer-contact-item a { color: #5a5247; text-decoration: none; transition: color 0.2s; }
.footer-contact-item a:hover { color: #437e9e; }

/* Snel naar */
.footer-links-wrap h4 {
    font-family: var(--font-display) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #437e9e !important;
    font-style: italic !important;
    margin-bottom: 0.75rem !important;
}

.footer-links { list-style: none !important; padding: 0 !important; margin: 0 !important; }

.footer-links li a {
    display: block !important;
    font-family: var(--font-display) !important;
    font-size: 0.88rem !important;
    font-style: italic !important;
    color: #437e9e !important;
    padding: 0.15rem 0 !important;
    text-decoration: none !important;
    transition: color 0.2s;
}

.footer-links li a:hover { color: #35647e !important; }

/* Social */
.footer-social-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: #5a5247;
    font-style: italic;
}

.footer-social {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #437e9e !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.3s;
}

.footer-social:hover { background: #35647e !important; }
.footer-social svg { width: 16px; height: 16px; stroke: #fff; fill: none; }
.footer-social svg[fill="currentColor"] { fill: #fff; stroke: none; }

/* Keurmerken */
.footer-keurmerken {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0.75rem !important;
}

.keurmerk-item img { max-width: 110px; height: auto; }

/* Bottom bar */
.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem 2rem !important;
    border-top: 1px solid rgba(58,53,48,0.12) !important;
    display: flex;
    justify-content: center;
}

.footer-copy {
    font-size: 0.72rem !important;
    color: #8a8279 !important;
    text-align: center;
}

.footer-copy a { color: #8a8279; text-decoration: none; transition: color 0.2s; }
.footer-copy a:hover { color: #437e9e; }

@media (max-width: 768px) {
    .footer-main {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .footer-keurmerken {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap;
    }
}

/* ============================================
   HERO — FINAL FIX MATCHING DESIGN
   ============================================ */
.hero {
    min-height: 90vh !important;
}

.hero-content {
    padding-top: calc(var(--nav-height) + 2rem) !important;
    padding-bottom: 2rem !important;
    justify-content: center !important;
}

.hero-logo img {
    max-height: 160px !important;
}

.hero-tagline {
    margin-bottom: 1.5rem !important;
}

.hero-booking {
    margin-top: 1rem !important;
}

/* Fix: minder ruimte boven in hero */
.hero {
    min-height: 80vh !important;
}

.hero-content {
    padding-top: var(--nav-height) !important;
}

/* Fix: content dichter naar de foto */
.hero-content {
    padding-left: calc((100% - 1200px) / 2 + 2rem) !important;
}

@media (max-width: 1248px) {
    .hero-content {
        padding-left: 3rem !important;
    }
}

/* Fix: hero content positie reset */
.hero-content {
    padding-left: 5% !important;
    padding-right: 2rem !important;
}

@media (min-width: 1400px) {
    .hero-content {
        padding-left: 8% !important;
    }
}

/* Fix: faciliteiten cards WIT met donkere tekst */
a.faciliteit-card {
    background: #fff !important;
}

a.faciliteit-card:hover {
    background: #fff !important;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

a.faciliteit-card .faciliteit-name {
    color: #3a3530 !important;
}

.faciliteit-meer {
    color: rgba(67,126,158,0.7) !important;
    font-style: italic !important;
}

a.faciliteit-card:hover .faciliteit-meer {
    color: #437e9e !important;
}

/* Golf boven faciliteiten */
.faciliteiten {
    padding-top: 0 !important;
}

.faciliteiten-wave {
    line-height: 0;
}

.faciliteiten-wave svg {
    display: block;
    width: 100%;
    height: 80px;
}

.faciliteiten-inner {
    padding-top: 2rem;
}

/* Fix: faciliteiten full-width, geen blokken */
.faciliteiten {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.faciliteiten-inner {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Fix: alle golven hoger */
.usp-wave svg,
.faciliteiten-wave svg,
.hp-kiekjes-wave svg,
.footer-wave-top svg {
    height: 140px !important;
}

/* ============================================
   ACCOMMODATIES — EXACTE DESIGN FIX
   ============================================ */

/* Eerste card featured styling */
.accom-card:first-child {
    grid-row: span 1;
}

.accom-card--featured .accom-card-body {
    padding: 1rem 1.5rem 1.5rem !important;
}

.accom-card--featured .accom-card-desc {
    font-size: 0.78rem !important;
    color: #5a5247 !important;
    line-height: 1.5 !important;
    margin-bottom: 0.5rem !important;
}

.accom-card--featured .accom-name {
    font-size: 1.2rem !important;
    margin-bottom: 0 !important;
}

/* Blauwe achtergrond onderaan de grid via gradient */
.accommodaties {
    background: linear-gradient(to bottom, #dbd7cc 40%, #437e9e 40%) !important;
    padding-bottom: 0 !important;
}

.accommodaties-inner {
    padding-bottom: 4rem;
}

/* Witte ruimte onder accom sectie voor reviews */
.accommodaties::after {
    content: '';
    display: block;
    height: 0;
}

/* Cards op blauwe achtergrond: zelfde witte stijl */
.accom-card {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

/* Alle cards klikbaar */
.accom-card {
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s !important;
}

.accom-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* Button styling in featured card */
.accom-card-actions .btn-primary {
    background: #437e9e !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    padding: 0.4rem 0.9rem !important;
}

.accom-card-actions .btn-outline {
    border-color: #437e9e !important;
    color: #437e9e !important;
    font-size: 0.75rem !important;
    padding: 0.4rem 0.9rem !important;
}

/* Link cards styling */
a.accom-card {
    text-decoration: none !important;
    color: inherit !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Fix: golf ipv rechte lijn halverwege accommodaties */
.accommodaties {
    background: #dbd7cc !important;
    position: relative !important;
}

/* Blauw vlak onderaan via pseudo-element met golf */
.accommodaties::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: #437e9e;
    z-index: 0;
}

.accommodaties::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    height: 180px;
    z-index: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 L0,48 C180,28 380,28 650,48 C920,68 1160,54 1440,30 L1440,0 Z' fill='%23dbd7cc'/%3E%3C/svg%3E") no-repeat top center;
    background-size: 100% 100%;
}

.accommodaties-inner,
.accommodaties-header {
    position: relative;
    z-index: 1;
}

.accom-grid {
    position: relative;
    z-index: 1;
}

/* Rechtopstaand logo in hero */
.hero-logo img {
    max-height: 560px !important;
    width: auto;
    max-width: 100%;
}

@media (max-width: 768px) {
    .hero-logo img {
        max-height: 200px !important;
    }
}

/* Booking widget: schaduw eronder + overlap over foto */
.hero-content {
    overflow: visible !important;
}

.hero-booking {
    max-width: none !important;
    width: auto !important;
    margin-right: -140px !important;
    position: relative;
    z-index: 20 !important;
}

.booking-form {
    box-shadow: 0 16px 40px rgba(42,37,32,0.22), 0 4px 12px rgba(42,37,32,0.12) !important;
}

@media (max-width: 768px) {
    .hero-booking {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
    }
}

/* ============================================
   GEEN meescrollende balk — alleen icons rechtsboven
   ============================================ */
.header--solid,
.header--transparent,
.header {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Header zelf neemt geen ruimte/interactie, alleen de icons */
.header {
    pointer-events: none !important;
}

.header .sticky-icons {
    pointer-events: auto !important;
}

/* Logo balk in header verbergen op homepage (logo zit daar al in hero) */
body.home .header-logo {
    display: none !important;
}

/* Op subpagina's: logo wel tonen */
body:not(.home) .header-logo {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.header-inner {
    background: transparent !important;
    box-shadow: none !important;
    justify-content: flex-end !important;
}

/* Zoek & Boek altijd goed zichtbaar */
.sticky-boek {
    background: #fff !important;
    color: #3a3530 !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
}

.sticky-boek:hover {
    background: #437e9e !important;
    color: #fff !important;
    border-color: #437e9e !important;
}

/* Keurmerken: allemaal even groot */
.hero-badge,
.keurmerk-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hero-badge img,
.hero-badge-img {
    height: 60px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
}

.keurmerk-item img,
.keurmerk-img {
    height: 55px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
}

@media (max-width: 768px) {
    .hero-badge img,
    .hero-badge-img {
        height: 45px !important;
    }
}

/* Eigen geüploade USP iconen */
.usp-icon-img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    /* Wit maken indien gekleurd icoon (optioneel) */
}

/* Geen achtergrond achter USP iconen */
.usp-icon {
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
}

.usp-item:hover .usp-icon {
    background: transparent !important;
}

.usp-icon-img {
    background: transparent !important;
    mix-blend-mode: normal;
}

/* USP strip minder hoog - minder blauw onderaan */
.usp-strip-inner {
    padding-top: 5rem !important;
    padding-bottom: 2.5rem !important;
}

.usp-strip {
    padding-bottom: 0 !important;
}

/* USP iconen grootte + spacing exact als design */
.usp-icon svg,
.usp-icon-img {
    width: 44px !important;
    height: 44px !important;
}

.usp-strip-inner {
    padding-top: 4.5rem !important;
    padding-bottom: 2.5rem !important;
}

.usp-item {
    gap: 0.85rem !important;
}

.usp-label {
    font-size: 0.85rem !important;
}

/* Alle golven hoger (180px) */
.usp-wave svg,
.faciliteiten-wave svg,
.hp-kiekjes-wave svg,
.footer-wave-top svg {
    height: 180px !important;
}

/* Extra padding zodat content onder de hogere golf valt */
.usp-strip-inner {
    padding-top: 5.5rem !important;
}

.usp-strip-inner {
    padding-top: 8.5rem !important;
}

.usp-icon svg,
.usp-icon-img {
    width: 80px !important;
    height: 80px !important;
}

/* ============================================
   FACILITEIT CARDS — schaduw + dynamische knoppen
   ============================================ */
a.faciliteit-card {
    box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important;
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s !important;
}

a.faciliteit-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.28) !important;
}

/* Dynamische "Ontdek meer" knop */
.faciliteit-meer {
    display: inline-block !important;
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), color 0.3s !important;
}

a.faciliteit-card:hover .faciliteit-meer {
    transform: translateX(6px);
    color: #437e9e !important;
}

/* Bekijk alle overnachtingen knop: blauw, wit, groter */
.accommodaties-alle-btn {
    background: #437e9e !important;
    color: #fff !important;
    border: 2px solid #437e9e !important;
    font-size: 0.95rem !important;
    padding: 0.85rem 2rem !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(67,126,158,0.3) !important;
}

.accommodaties-alle-btn:hover {
    background: #35647e !important;
    border-color: #35647e !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(67,126,158,0.4) !important;
}

/* Accommodaties: afwerken met dikke witte lijn onderaan (geen golf) */
.accommodaties {
    border-bottom: 8px solid #fff !important;
}

/* ============================================
   ALLE KOPPEN: vetgedrukt, NIET cursief
   Kleuren binnen 1 zin blijven behouden
   ============================================ */
.hp-kiekjes-titel,
.hp-kiekjes-titel em,
.faciliteiten-titel,
.faciliteiten-titel em,
.accommodaties-titel,
.accommodaties-titel em,
.accommodaties-titel em.blue,
.reserveer-promo-titel,
.reserveer-promo-titel em,
.reserveer-promo-quote,
.reserveer-promo-quote em,
.section-title,
.section-title em,
.page-hero-title,
.page-hero-title em,
.hp-reviews-titel,
.content-intro-title,
.content-intro-title em {
    font-style: normal !important;
    font-weight: 700 !important;
}

/* ============================================
   KOPPEN: meerdere kleuren in 1 zin
   ============================================ */

/* Vakantiekiekjes (blauwe achtergrond): Vakantie beige, kiekjes wit */
.hp-kiekjes-titel { color: #fff !important; }
.hp-kiekjes-titel em {
    color: #dbd7cc !important;
    font-style: normal !important;
    font-weight: 700 !important;
}

/* Faciliteiten (blauwe achtergrond): em beige */
.faciliteiten-titel { color: #fff !important; }
.faciliteiten-titel em {
    color: #dbd7cc !important;
}

/* Accommodaties (beige achtergrond): em blauw */
.accommodaties-titel { color: #3a3530 !important; }
.accommodaties-titel em,
.accommodaties-titel em.blue {
    color: #437e9e !important;
}

/* Reserveer promo (beige): em blauw */
.reserveer-promo-titel em,
.reserveer-promo-quote em {
    color: #437e9e !important;
}

/* Vakantie kiekjes knop: wit, zwarte tekst, groter */
.hp-kiekjes-btn {
    background: #fff !important;
    color: #3a3530 !important;
    border: 2px solid #fff !important;
    font-size: 0.95rem !important;
    padding: 0.85rem 2rem !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
}

.hp-kiekjes-btn:hover {
    background: #3a3530 !important;
    color: #fff !important;
    border-color: #3a3530 !important;
    transform: translateY(-2px);
}

/* ============================================
   OVER ONS — ÉÉN PAGINA, 2 KOLOMS
   ============================================ */
.overons-single {
    background: #dbd7cc;
    padding: calc(var(--nav-height) + 3rem) 2rem 4rem;
}

.overons-single-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.overons-single-titel {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #3a3530;
    margin-bottom: 2.5rem;
}

.overons-single-titel em {
    color: #437e9e;
    font-style: normal;
}

.overons-single-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 3rem;
    align-items: start;
}

.overons-single-fotos {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.overons-single-foto img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.overons-single-tekst {
    font-size: 0.95rem;
    color: #3a3530;
    line-height: 1.75;
}

.overons-single-tekst p {
    margin-bottom: 1.1rem;
}

.overons-single-groet {
    margin-top: 1.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    color: #437e9e;
}

@media (max-width: 900px) {
    .overons-single-grid {
        grid-template-columns: 1fr;
    }
    .overons-single-fotos {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .overons-single-foto {
        flex: 1 1 45%;
    }
}

/* Subpagina header: logo links, icons rechts */
body:not(.home) .header-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    padding: 0 2rem;
}

body:not(.home) .header-logo img {
    max-height: 70px !important;
    width: auto;
}

/* Over ons foto's klikbaar */
.overons-single-foto {
    cursor: pointer;
    overflow: hidden;
    border-radius: 10px;
}

.overons-single-foto img {
    transition: transform 0.4s ease;
}

.overons-single-foto:hover img {
    transform: scale(1.04);
}

/* ============================================
   FOTO'S RONDE HOEKEN (behalve aflopende kant)
   ============================================ */

/* Algemene ronde hoeken voor losse foto's/cards */
.accom-card,
.accom-card .accom-img,
a.faciliteit-card,
a.faciliteit-card .faciliteit-img,
.overons-single-foto,
.overons-single-foto img,
.fac-item-media,
.accom-detail-media,
.omg-galerij-item,
.omg-galerij-item img {
    border-radius: 14px !important;
    overflow: hidden;
}

/* Card afbeeldingen: alleen bovenhoeken rond (titel eronder) */
.accom-card .accom-img {
    border-radius: 14px 14px 0 0 !important;
}
a.faciliteit-card .faciliteit-img {
    border-radius: 14px 14px 0 0 !important;
}

/* UITZONDERING 1: Hero foto loopt door tot rechterrand → rechts recht */
.hero-photo-area,
.hero-photo-area img {
    border-radius: 14px 0 0 14px !important;
}

/* UITZONDERING 2: Vakantiekiekjes foto breekt uit naar rechterrand → rechts recht */
.hp-kiekjes-foto,
.hp-kiekjes-img {
    border-radius: 14px 0 0 14px !important;
}

@media (max-width: 768px) {
    /* Op mobiel: hero foto boven, alle hoeken normaal */
    .hero-photo-area,
    .hero-photo-area img {
        border-radius: 0 !important;
    }
    .hp-kiekjes-foto,
    .hp-kiekjes-img {
        border-radius: 14px !important;
    }
}

/* Bereken route knop: blauw, wit, groter */
.footer-route-btn {
    background: #437e9e !important;
    color: #fff !important;
    border: 2px solid #437e9e !important;
    font-size: 0.95rem !important;
    padding: 0.7rem 1.75rem !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 12px rgba(67,126,158,0.3) !important;
}

.footer-route-btn:hover {
    background: #35647e !important;
    border-color: #35647e !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* ============================================
   FOOTER "SNEL NAAR" — als design
   ============================================ */
.footer-links-wrap h4 {
    font-style: normal !important;
    font-weight: 700 !important;
    color: #3a3530 !important;
    margin-bottom: 0.5rem !important;
}

.footer-links li a {
    font-style: normal !important;
    font-weight: 700 !important;
    color: #3a3530 !important;
    padding: 0.1rem 0 !important;
    font-size: 0.9rem !important;
}

.footer-links li a:hover {
    color: #437e9e !important;
}

.footer-social-row {
    margin-top: 0.85rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    color: #3a3530 !important;
}

/* Footer Snel naar: blauwe tekst */
.footer-links-wrap h4 {
    color: #437e9e !important;
}

.footer-links li a {
    color: #437e9e !important;
}

.footer-links li a:hover {
    color: #35647e !important;
}

.footer-social-row {
    color: #437e9e !important;
}

/* ============================================
   MOBIEL: BOOKING WIDGET FIX
   ============================================ */
@media (max-width: 768px) {
    .hero-content {
        width: 100% !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .hero-booking {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .booking-tabs {
        width: 100%;
    }

    .booking-tab {
        flex: 1;
    }

    .booking-form {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        padding: 1.25rem !important;
        gap: 1rem !important;
    }

    .booking-fields {
        flex-direction: column !important;
        width: 100% !important;
        gap: 1rem !important;
    }

    .booking-group {
        width: 100% !important;
    }

    .booking-date-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
    }

    .booking-input {
        flex: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .booking-input input,
    .booking-input select {
        width: 100% !important;
        min-width: 0 !important;
    }

    .booking-submit {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Mobiel: keurmerken op foto kleiner */
@media (max-width: 768px) {
    .hero-badges {
        flex-wrap: wrap;
        gap: 0.4rem !important;
    }
    .hero-badge img,
    .hero-badge-img {
        height: 38px !important;
    }
}

@media (max-width: 480px) {
    .hero-badge img,
    .hero-badge-img {
        height: 32px !important;
    }
}

/* Mobiel: USP strip schoner (geen hokjes-lijnen) */
@media (max-width: 768px) {
    .usp-strip-inner {
        grid-template-columns: repeat(3, 1fr) !important;
        padding-top: 7rem !important;
        padding-bottom: 2rem !important;
        gap: 1.5rem 0.5rem !important;
    }
    .usp-item {
        border-right: none !important;
        border-bottom: none !important;
        padding: 0.5rem !important;
    }
    .usp-icon svg,
    .usp-icon-img {
        width: 56px !important;
        height: 56px !important;
    }
    .usp-label {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    .usp-icon svg,
    .usp-icon-img {
        width: 48px !important;
        height: 48px !important;
    }
    .usp-label {
        font-size: 0.72rem !important;
    }
}

/* Faciliteiten titel: basis beige, highlight wit */
.faciliteiten-titel {
    color: #dbd7cc !important;
}

.faciliteiten-titel em {
    color: #fff !important;
    font-style: normal !important;
    font-weight: 700 !important;
}

/* Accommodaties titel: basis donker, highlight blauw */
.accommodaties-titel {
    color: #3a3530 !important;
}

.accommodaties-titel em {
    color: #437e9e !important;
    font-style: normal !important;
    font-weight: 700 !important;
}

/* ============================================
   ACCOMMODATIE CARDS — HOVER REVEAL
   ============================================ */
.accom-card {
    position: relative;
    height: 380px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transition: box-shadow 0.35s, transform 0.35s;
}

.accom-card:hover {
    box-shadow: 0 14px 36px rgba(0,0,0,0.22);
    transform: translateY(-4px);
}

/* Afbeelding vult de hele kaart */
.accom-card .accom-img {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 14px;
}

.accom-card .accom-img img,
.accom-card .accom-img-inner,
.accom-card .accom-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.accom-card:hover .accom-img img,
.accom-card:hover .accom-img-inner {
    transform: scale(1.05);
}

/* Badge */
.accom-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 3;
    background: #d4a847;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
}

/* Wit paneel onderaan: schuift omhoog op hover */
.accom-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: #fff;
    border-radius: 16px 16px 14px 14px;
    transform: translateY(calc(100% - 70px));
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}

.accom-card:hover .accom-panel {
    transform: translateY(0);
}

.accom-panel-top {
    padding: 1.1rem 1.5rem 0.5rem;
}

.accom-card .accom-name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: #437e9e;
    margin: 0 0 0.5rem;
    padding: 0;
}

/* Bullets */
.accom-card-desc {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.accom-card-desc li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.4rem;
    font-size: 0.84rem;
    color: #5a5247;
    line-height: 1.4;
}

.accom-card-desc li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #437e9e;
}

/* Twee knoppen onderaan */
.accom-card-actions {
    display: flex;
}

.accom-btn {
    flex: 1;
    text-align: center;
    padding: 0.85rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s;
}

.accom-btn--ontdek {
    background: #437e9e;
    color: #fff;
}

.accom-btn--ontdek:hover {
    background: #35647e;
}

.accom-btn--boek {
    background: #5a93ad;
    color: #fff;
}

.accom-btn--boek:hover {
    background: #4a83a0;
}

/* Touch/mobiel: paneel altijd open */
@media (hover: none) {
    .accom-panel {
        transform: translateY(0);
    }
}

/* ============================================
   ACCOMMODATIE CARDS — DEFINITIEVE VERSIE
   (overschrijft alle oudere regels)
   ============================================ */
.accommodaties .accom-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
}

.accommodaties .accom-card {
    position: relative !important;
    height: 420px !important;
    background: #fff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: block !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12) !important;
    transition: box-shadow 0.35s, transform 0.35s !important;
}

.accommodaties .accom-card:hover {
    box-shadow: 0 16px 40px rgba(0,0,0,0.25) !important;
    transform: translateY(-4px) !important;
}

/* Afbeelding vult de hele kaart */
.accommodaties .accom-card .accom-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    z-index: 0 !important;
}

.accommodaties .accom-card .accom-img img,
.accommodaties .accom-card .accom-img-inner,
.accommodaties .accom-card .accom-placeholder {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s !important;
}

.accommodaties .accom-card .accom-img::after { display: none !important; }

.accommodaties .accom-card:hover .accom-img img,
.accommodaties .accom-card:hover .accom-img-inner {
    transform: scale(1.05) !important;
}

/* Badge */
.accommodaties .accom-badge {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    z-index: 4 !important;
    background: #d4a847 !important;
    color: #fff !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.35rem 0.9rem !important;
    border-radius: 20px !important;
}

/* Wit paneel: schuift omhoog op hover */
.accommodaties .accom-panel {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    background: #fff !important;
    padding-top: 0 !important;
    transform: translateY(calc(100% - 72px)) !important;
    transition: transform 0.45s cubic-bezier(0.22,1,0.36,1) !important;
}

/* Titelbalk: vaste hoogte, altijd zichtbaar in rust */
.accommodaties .accom-panel-title {
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 1.5rem !important;
}

.accommodaties .accom-panel-extra {
    padding: 0 0 0 0 !important;
}

/* Concave golf bovenaan het paneel */
.accommodaties .accom-panel::before {
    content: '' !important;
    position: absolute !important;
    top: -38px !important;
    left: 0 !important;
    right: 0 !important;
    height: 40px !important;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 40' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,40 L0,38 C100,18 300,18 400,38 L400,40 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat bottom center !important;
    background-size: 100% 100% !important;
}

.accommodaties .accom-card:hover .accom-panel {
    transform: translateY(0) !important;
}

.accommodaties .accom-card .accom-name {
    font-family: var(--font-display) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #437e9e !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Bullets */
.accommodaties .accom-card-desc {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 1.5rem 0.75rem !important;
}

.accommodaties .accom-card-desc li {
    position: relative !important;
    padding-left: 1rem !important;
    margin-bottom: 0.4rem !important;
    font-size: 0.84rem !important;
    color: #5a5247 !important;
    line-height: 1.4 !important;
}

.accommodaties .accom-card-desc li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.5rem !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #437e9e !important;
}

/* Twee knoppen onderaan */
.accommodaties .accom-card-actions {
    display: flex !important;
}

.accommodaties .accom-btn {
    flex: 1 !important;
    text-align: center !important;
    padding: 0.9rem 0.5rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.3s !important;
}

.accommodaties .accom-btn--ontdek {
    background: #437e9e !important;
    color: #fff !important;
}
.accommodaties .accom-btn--ontdek:hover {
    background: #35647e !important;
}
.accommodaties .accom-btn--boek {
    background: #5a93ad !important;
    color: #fff !important;
}
.accommodaties .accom-btn--boek:hover {
    background: #4a83a0 !important;
}

/* Touch/mobiel: paneel altijd open */
@media (hover: none) {
    .accommodaties .accom-panel {
        transform: translateY(0) !important;
    }
}

@media (max-width: 768px) {
    .accommodaties .accom-grid {
        grid-template-columns: 1fr !important;
    }
}

.accommodaties .accom-panel-title {
    background: #fff !important;
}

/* Vakantie kiekjes knop: wit, gelijke vorm als andere knoppen */
.hp-kiekjes-btn {
    background: #fff !important;
    color: #3a3530 !important;
    border: 2px solid #fff !important;
    border-radius: 4px !important;
    padding: 0.85rem 2rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    font-family: var(--font-body) !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
    transition: background 0.3s, color 0.3s, transform 0.3s !important;
}

.hp-kiekjes-btn:hover {
    background: #3a3530 !important;
    color: #fff !important;
    border-color: #3a3530 !important;
    transform: translateY(-2px) !important;
}

/* Footer social icons: originele merkkleuren */
.footer-social--instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
    border: none !important;
}

.footer-social--instagram:hover {
    filter: brightness(1.08);
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
}

.footer-social--instagram svg {
    stroke: #fff !important;
}

.footer-social--facebook {
    background: #1877f2 !important;
    border: none !important;
}

.footer-social--facebook:hover {
    background: #166fe0 !important;
}

.footer-social--facebook svg {
    fill: #fff !important;
    stroke: none !important;
}

/* "Snel naar" kop en "Volg ons" tekst: zwart */
.footer-links-wrap h4 {
    color: #1a1a1a !important;
}

.footer-social-row {
    color: #1a1a1a !important;
}

.footer-social-row > span {
    color: #1a1a1a !important;
}

/* ============================================
   OVERLAY MENU — grote koppen, blauw (Molenhoek/Kriemelberg stijl)
   ============================================ */

/* Blauw openslaand paneel */
.overlay-menu-bg {
    background: #437e9e !important;
}

/* Nav als nette verticale lijst met grote koppen */
.overlay-nav-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.4rem !important;
    text-align: center !important;
    margin: 2rem auto !important;
}

.overlay-nav-list > li {
    min-width: 0 !important;
    width: auto !important;
}

/* Grote, duidelijke koppen */
.overlay-nav-list > li > a {
    font-family: var(--font-display) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #ffffff !important;
    margin-bottom: 0.2rem !important;
    line-height: 1.2 !important;
    transition: color 0.25s !important;
}

/* Kleurverandering bij hover */
.overlay-nav-list > li > a:hover {
    color: #dbd7cc !important;
}

.overlay-nav-list > li.current-menu-item > a,
.overlay-nav-list > li.current_page_item > a {
    color: #dbd7cc !important;
}

/* Submenu's: gecentreerd, iets kleiner, maar goed leesbaar */
.overlay-nav-list .sub-menu {
    align-items: center !important;
    gap: 0.3rem !important;
    margin-top: 0.3rem !important;
    margin-bottom: 0.8rem !important;
}

.overlay-nav-list .sub-menu li a {
    font-family: var(--font-body) !important;
    font-size: 1.05rem !important;
    color: rgba(255,255,255,0.85) !important;
    text-align: center !important;
}

.overlay-nav-list .sub-menu li a:hover {
    color: #dbd7cc !important;
    padding-left: 0 !important;
}

/* Sluitknop en footer passend op blauw */
.overlay-close {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}
.overlay-close:hover {
    background: rgba(255,255,255,0.28) !important;
    color: #fff !important;
}

.overlay-menu-footer {
    border-top-color: rgba(255,255,255,0.2) !important;
}

/* Mobiel: nog steeds groot en gestapeld (zoals Kriemelberg mobiel) */
@media (max-width: 768px) {
    .overlay-nav-list {
        gap: 0.3rem !important;
    }
    .overlay-nav-list > li > a {
        font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
    }
}


/* ============================================
   OVERLAY MENU MOBIEL, Kriemelberg stijl in Meibeek kleuren
   (beige paneel, links uitgelijnde vette koppen, accordion submenu's,
   blauwe sluitknop links, boek-blok rechts, decor plus contact onderaan)
   Desktop overlay blijft het blauwe paneel met grote gecentreerde koppen.
   ============================================ */

/* Elementen die alleen op mobiel bestaan */
.overlay-boek-top,
.overlay-address,
.overlay-menu-decor,
.overlay-sub-toggle,
.overlay-logo-dark {
    display: none;
}

@media (max-width: 768px) {

    /* Beige paneel */
    .overlay-menu-bg {
        background: #dbd7cc !important;
    }

    .overlay-menu-inner {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 1rem 1.25rem 1.75rem !important;
    }

    /* Decor onderaan: heuvels, bomen, vogels in donkerder beige */
    .overlay-menu-decor {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        pointer-events: none;
        line-height: 0;
    }
    .overlay-menu-decor svg {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Header: sluitknop links, logo midden, boek-blok rechts */
    .overlay-menu-header {
        position: relative;
        z-index: 1;
        align-items: flex-start !important;
        gap: 0.75rem;
        margin-bottom: 1.75rem !important;
    }

    .overlay-close {
        order: -1;
        width: 52px !important;
        height: 52px !important;
        border-radius: 10px !important;
        background: #437e9e !important;
        color: #ffffff !important;
        flex-shrink: 0;
    }
    .overlay-close:hover {
        background: #35647e !important;
        color: #ffffff !important;
    }

    .overlay-menu-logo {
        order: 0;
        flex: 1;
        display: flex;
        justify-content: center;
    }
    .overlay-logo-light {
        display: none !important;
    }
    .overlay-logo-dark {
        display: block !important;
    }
    .overlay-logo-dark img {
        max-height: 68px;
        width: auto;
    }
    /* Fallback: geen donker logo ingesteld, toon dan alsnog het lichte logo */
    .overlay-menu-logo:not(:has(.overlay-logo-dark)) .overlay-logo-light {
        display: block !important;
    }

    .overlay-boek-top {
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 62px;
        min-height: 52px;
        padding: 0.45rem 0.6rem;
        background: #437e9e;
        color: #ffffff;
        border-radius: 10px;
        font-family: var(--font-body);
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        text-align: center;
        line-height: 1.25;
        flex-shrink: 0;
        transition: background 0.25s;
    }
    .overlay-boek-top:hover {
        background: #35647e;
        color: #ffffff;
    }
    .overlay-boek-top svg {
        width: 18px;
        height: 18px;
    }

    /* Nav: links uitgelijnd, uppercase, vet, donker */
    .overlay-nav {
        position: relative;
        z-index: 1;
    }
    .overlay-nav-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 0 !important;
        margin: 0 0 2rem 0 !important;
        width: 100%;
    }
    .overlay-nav-list > li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        min-width: 0 !important;
    }
    .overlay-nav-list > li > a {
        display: inline-flex !important;
        align-items: center;
        font-size: 1.4rem !important;
        font-weight: 700 !important;
        font-family: var(--font-display) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        color: #3a3530 !important;
        padding: 0.8rem 0 !important;
        margin: 0 !important;
        line-height: 1.15 !important;
    }
    .overlay-nav-list > li > a:hover {
        color: #437e9e !important;
    }
    .overlay-nav-list > li.current-menu-item > a,
    .overlay-nav-list > li.current_page_item > a,
    .overlay-nav-list > li.current-menu-ancestor > a {
        color: #437e9e !important;
    }

    /* Caret toggle voor items met submenu */
    .overlay-sub-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        margin-left: 0.1rem;
        background: transparent;
        border: none;
        color: #3a3530;
        cursor: pointer;
        transition: transform 0.25s, color 0.25s;
    }
    .overlay-nav-list > li.submenu-open > .overlay-sub-toggle {
        transform: rotate(180deg);
        color: #437e9e;
    }
    .overlay-nav-list > li.current-menu-item > .overlay-sub-toggle,
    .overlay-nav-list > li.current-menu-ancestor > .overlay-sub-toggle {
        color: #437e9e;
    }

    /* Submenu's: ingeklapt, via caret openklappen */
    .overlay-nav-list .sub-menu {
        display: none !important;
        flex-basis: 100%;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 0.15rem !important;
        margin: 0 0 0.6rem 0 !important;
        padding: 0 0 0 1.1rem !important;
    }
    .overlay-nav-list li.submenu-open > .sub-menu {
        display: flex !important;
    }
    .overlay-nav-list .sub-menu li a {
        font-family: var(--font-body) !important;
        font-size: 1.02rem !important;
        font-weight: 500 !important;
        color: #5a5247 !important;
        text-align: left !important;
        padding: 0.3rem 0 !important;
    }
    .overlay-nav-list .sub-menu li a:hover {
        color: #437e9e !important;
        padding-left: 0 !important;
    }

    /* Footer: witte vierkante iconen gecentreerd plus adres, boven het decor */
    .overlay-menu-footer {
        position: relative;
        z-index: 1;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
        border-top: none !important;
        padding-top: 1rem !important;
        margin-top: auto !important;
    }
    .overlay-contact-icons {
        justify-content: center;
        gap: 0.75rem !important;
    }
    .overlay-contact-icon {
        width: 56px !important;
        height: 56px !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        border: none !important;
        color: #3a3530 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .overlay-contact-icon:hover {
        background: #437e9e !important;
        color: #ffffff !important;
    }
    .overlay-address {
        display: block;
        font-family: var(--font-body);
        font-size: 0.95rem;
        color: #5a5247;
        text-align: center;
    }
    /* Boek-knop zit op mobiel rechtsboven, dus onderin verbergen */
    .overlay-book-btn {
        display: none !important;
    }
}


/* ============================================
   OVERLAY MENU DESKTOP, Kriemelberg stijl in Meibeek kleuren
   Beige paneel op alle formaten. Desktop: X-blok links tegen de rand,
   logo links, boek-blok rechts tegen de rand, menukolommen met
   submenu's altijd zichtbaar, decor onderaan, contact-iconen plus adres.
   ============================================ */

/* Beige paneel en gedeelde elementen nu op alle formaten */
.overlay-menu-bg {
    background: #dbd7cc !important;
}

.overlay-menu-inner {
    min-height: 100vh;
    min-height: 100dvh;
}

.overlay-menu-decor {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    line-height: 0;
}
.overlay-menu-decor svg {
    width: 100%;
    display: block;
}

.overlay-boek-top { display: flex; }
.overlay-address { display: block; }

/* Gekleurd logo in het overlay, licht logo verbergen */
.overlay-logo-light { display: none; }
.overlay-logo-dark { display: block; }
.overlay-menu-logo:not(:has(.overlay-logo-dark)) .overlay-logo-light { display: block; }

/* Overlay logo ook op de homepage tonen (header-logo is daar verborgen) */
body.home .overlay-menu .header-logo {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Boek-knop onderin overal weg, boek-blok zit rechtsboven */
.overlay-book-btn { display: none !important; }

/* Footer stijl geldt nu op alle formaten */
.overlay-menu-footer {
    position: relative;
    z-index: 1;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    border-top: none !important;
    padding-top: 1rem !important;
    margin-top: auto !important;
}
.overlay-contact-icons {
    justify-content: center;
    gap: 0.8rem !important;
}
.overlay-contact-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: none !important;
    color: #3a3530 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.overlay-contact-icon:hover {
    background: #437e9e !important;
    color: #ffffff !important;
}
.overlay-address {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #5a5247;
    text-align: center;
}

@media (min-width: 769px) {

    .overlay-menu-inner {
        max-width: none !important;
        padding: 2.25rem 0 2rem !important;
    }

    /* Header: X-blok links tegen de schermrand, logo ernaast, boek-blok rechts */
    .overlay-menu-header {
        display: block !important;
        position: relative;
        z-index: 2;
        min-height: 104px;
        margin-bottom: 3rem !important;
    }

    .overlay-close {
        position: absolute;
        left: 0;
        top: 12px;
        width: 78px !important;
        height: 78px !important;
        border-radius: 0 10px 10px 0 !important;
        background: #437e9e !important;
        color: #ffffff !important;
    }
    .overlay-close:hover {
        background: #35647e !important;
        color: #ffffff !important;
    }

    .overlay-menu-logo {
        margin-left: 100px;
        display: inline-flex;
        align-items: center;
    }
    body .overlay-menu .overlay-logo-dark img {
        max-height: 96px !important;
        width: auto;
    }

    .overlay-boek-top {
        position: absolute;
        right: 0;
        top: 12px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 84px;
        min-height: 78px;
        padding: 0.6rem 0.8rem;
        background: #437e9e;
        color: #ffffff;
        border-radius: 10px 0 0 10px;
        font-family: var(--font-body);
        font-size: 0.66rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        text-align: center;
        line-height: 1.25;
        transition: background 0.25s;
    }
    .overlay-boek-top:hover {
        background: #35647e;
        color: #ffffff;
    }
    .overlay-boek-top svg {
        width: 22px;
        height: 22px;
    }

    /* Nav: kolommen naast elkaar, koppen uppercase vet donker */
    .overlay-nav {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 2rem;
    }
    .overlay-nav-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: center !important;
        text-align: left !important;
        gap: 2.2rem 3rem !important;
        margin: 0 0 3rem 0 !important;
        width: 100%;
    }
    .overlay-nav-list > li {
        display: block !important;
        width: auto !important;
        min-width: 140px !important;
    }
    .overlay-nav-list > li > a {
        display: block !important;
        font-family: var(--font-display) !important;
        font-size: 1.08rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: #3a3530 !important;
        margin: 0 0 0.9rem 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        transition: color 0.25s !important;
    }
    .overlay-nav-list > li > a:hover {
        color: #437e9e !important;
    }
    .overlay-nav-list > li.current-menu-item > a,
    .overlay-nav-list > li.current_page_item > a,
    .overlay-nav-list > li.current-menu-ancestor > a {
        color: #437e9e !important;
    }

    /* Geen carets op desktop, submenu's staan altijd open */
    .overlay-sub-toggle {
        display: none !important;
    }
    .overlay-nav-list .sub-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 0.5rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .overlay-nav-list .sub-menu li a {
        font-family: var(--font-body) !important;
        font-size: 0.98rem !important;
        font-weight: 500 !important;
        color: #3a3530 !important;
        text-align: left !important;
        padding: 0.1rem 0 !important;
        transition: color 0.2s !important;
    }
    .overlay-nav-list .sub-menu li a:hover {
        color: #437e9e !important;
        padding-left: 0 !important;
    }

    /* Decor op desktop: schaalt natuurlijk mee op breedte */
    .overlay-menu-decor svg {
        height: auto;
    }
}


/* ============================================================
   FEEDBACKRONDE (klantlijst), cumulatief, wint op eerdere regels
   ============================================================ */

/* --- Punt 5: "Zorgeloos genieten" quote + alle koppen zelfde grootte --- */
.reserveer-promo-quote {
    font-size: clamp(2rem, 3.2vw, 2.6rem) !important;
}
.reserveer-promo-titel,
.faciliteiten-titel,
.accommodaties-titel,
.hp-kiekjes-titel,
.hp-reviews-titel {
    font-size: clamp(2.1rem, 3.6vw, 2.9rem) !important;
    line-height: 1.2 !important;
}

/* --- Punt 6 + 8: body-tekst en titels in secties groter --- */
.reserveer-promo-tekst,
.faciliteiten-tekst,
.hp-kiekjes-tekst,
.accom-card-desc li,
.hp-rev-tekst {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
}

/* --- Punt 7: alle buttons afgeronde hoek linksonder (Molenhoek-stijl) --- */
.faciliteiten-alle-btn,
.accommodaties-alle-btn,
.hp-kiekjes-btn,
.reserveer-promo-btn,
.accom-btn,
.footer-route-btn,
.booking-submit,
.btn,
.btn-primary {
    border-radius: 4px 4px 4px 16px !important;
}

/* Punt 7: hover beige op de twee "bekijk alle" buttons */
.faciliteiten-alle-btn:hover,
.hp-kiekjes-btn:hover {
    background: #dbd7cc !important;
    color: #3a3530 !important;
    border-color: #dbd7cc !important;
}

/* --- Punt 9: USP-strip ("eten, slapen...") witte outline (cirkels) weg --- */
.usp-icon {
    border: none !important;
    width: auto !important;
    height: auto !important;
}

/* --- Punt 15: faciliteiten <-> accommodaties (kleur volgt sectie mee) --- */
/* Accommodaties is nu de BLAUWE sectie (staat op plek 4, onder beige reserveer-promo) */
.accommodaties {
    background: #437e9e !important;
    border-bottom: none !important;
    padding: 4rem 2rem !important;
}
.accommodaties::before,
.accommodaties::after {
    display: none !important;
    content: none !important;
}
.accommodaties-titel {
    color: #fff !important;
}
.accommodaties-titel em,
.accommodaties-titel em.blue {
    color: #dbd7cc !important;
}
.accommodaties-alle-btn {
    background: #fff !important;
    color: #437e9e !important;
    border: 2px solid #fff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
}
.accommodaties-alle-btn:hover {
    background: #dbd7cc !important;
    color: #3a3530 !important;
    border-color: #dbd7cc !important;
}

/* Faciliteiten is nu de BEIGE sectie (staat op plek 5, onder blauwe accommodaties) */
.faciliteiten {
    background: #dbd7cc !important;
}
.faciliteiten-titel {
    color: #3a3530 !important;
}
.faciliteiten-titel em {
    color: #437e9e !important;
}
.faciliteiten-tekst {
    color: #5a5247 !important;
}
.faciliteiten-alle-btn {
    border: 2px solid #437e9e !important;
    color: #437e9e !important;
}
a.faciliteit-card {
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}
a.faciliteit-card .faciliteit-name {
    color: #3a3530 !important;
}

/* --- Punt 16: alle beige secties een golf aan de bovenzijde --- */
/* Accommodaties is nu blauw en heeft al de USP-cascade erboven.
   De beige secties reserveer-promo, faciliteiten (nu beige) en reviews
   krijgen een golf bovenaan. */
.reserveer-promo,
.faciliteiten,
.hp-reviews {
    position: relative;
}
.reserveer-promo::before,
.hp-reviews::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 180px;
    z-index: 0;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 L0,48 C180,28 380,28 650,48 C920,68 1160,54 1440,30 L1440,0 Z' fill='%23dbd7cc'/%3E%3C/svg%3E") no-repeat top center;
    background-size: 100% 100%;
}
.reserveer-promo-inner,
.hp-reviews-inner {
    position: relative;
    z-index: 1;
    padding-top: 3rem;
}

/* Faciliteiten (beige) golf bovenaan: de sectie erboven (accommodaties) is
   blauw, dus de golf boven de beige faciliteiten toont blauw. */
.faciliteiten-wave svg path {
    fill: #437e9e !important;
}

/* --- Punt 17: witte lijn boven de reviews weghalen --- */
/* De witte lijn kwam van accommodaties border-bottom; die is bij punt 15
   al op none gezet. Extra safeguard: geen border boven reviews. */
.hp-reviews {
    border-top: none !important;
}

/* --- Kiekjes-foto: volledig vierkant, geen radius, geen beige streep --- */
.hp-kiekjes-foto,
.hp-kiekjes-img {
    border-radius: 0 !important;
    border-top: none !important;
}
@media (max-width: 768px) {
    .hp-kiekjes-foto,
    .hp-kiekjes-img {
        border-radius: 0 !important;
    }
}

/* --- Punt 12: mega menu (desktop) font-size gelijk aan mobiel (1.4rem) --- */
@media (min-width: 769px) {
    .overlay-nav-list > li > a {
        font-size: 1.4rem !important;
    }
}

/* --- Punt 13: mega menu illustraties (decor-heuvels) weg, blauwe golf ipv --- */
.overlay-menu-decor {
    display: none !important;
}
.overlay-menu-inner {
    position: relative;
}
.overlay-menu-inner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 160px;
    z-index: 0;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,100 L0,52 C180,72 380,72 650,52 C920,32 1160,46 1440,70 L1440,100 Z' fill='%23437e9e'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: 100% 100%;
}
.overlay-nav,
.overlay-menu-footer {
    position: relative;
    z-index: 1;
}


/* ============================================================
   FEEDBACKRONDE, HEADER (punten 2, 3, 14)
   ============================================================ */

/* --- Punt 14 + 2: "Zoek & Boek" terug op mobiel EN sticky --- */
/* .sticky-icons is al position:fixed, dus de knop erin is automatisch sticky. */
@media (max-width: 768px) {
    .sticky-boek {
        display: inline-flex !important;
        align-items: center;
        padding: 0.5rem 0.9rem !important;
        font-size: 0.8rem !important;
        border-radius: 4px 4px 4px 12px !important;
        background: #fff !important;
        color: #3a3530 !important;
        border: 2px solid #fff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
        white-space: nowrap;
    }
    /* Iconenbalk compact zodat de knop past naast de andere icons */
    .sticky-icons {
        gap: 0.35rem !important;
        top: 1rem !important;
        right: 1rem !important;
    }
}

/* --- Punt 3: op mobiel het logo centreren (subpagina's; op home zit het in hero) --- */
@media (max-width: 768px) {
    body:not(.home) .header-inner {
        justify-content: center !important;
        position: relative;
    }
    body:not(.home) .header-logo {
        margin: 0 auto !important;
        justify-content: center !important;
    }
    /* sticky-icons blijven rechtsboven zweven (fixed), logo staat gecentreerd eronder/erachter */
}


/* ============================================================
   FEEDBACKRONDE 2, hero-logo centreren op mobiel + logo-teksten
   ============================================================ */

/* Punt: op mobiel hero-logo, tagline en booking gecentreerd */
@media (max-width: 768px) {
    .hero-content {
        align-items: center !important;
        text-align: center !important;
    }
    .hero-logo {
        display: flex !important;
        justify-content: center !important;
        width: 100%;
    }
    .hero-logo img {
        margin: 0 auto !important;
    }
    .hero-tagline {
        text-align: center !important;
        width: 100%;
    }
    /* Fallback logo-teksten (naam + tagline) ook gecentreerd */
    .hero-logo-fallback {
        align-items: center !important;
        text-align: center !important;
    }
    .hero-logo-name {
        text-align: center !important;
    }
}

/* Punt: "Logo teksten centreren onder beeldmerk en ook Ontdek de mooie
   achterhoek", geldt ook op desktop wanneer het fallback-tekstlogo
   gebruikt wordt (naam onder het beeldmerk). */
.hero-logo-fallback {
    align-items: center;
    text-align: center;
}
.hero-logo-name {
    text-align: center;
}


/* ============================================================
   FEEDBACKRONDE 3, footer groter + mobiel gecentreerd
   ============================================================ */

/* Logo groter */
.footer-logo img {
    max-height: 110px !important;
}

/* Adres en contactgegevens groter */
.footer-contact-item {
    font-size: 0.95rem !important;
    margin-bottom: 0.55rem !important;
}
.footer-contact-item svg {
    width: 17px;
    height: 17px;
}

/* "Snel naar" kop en links groter */
.footer-links-wrap h4 {
    font-size: 1.15rem !important;
}
.footer-links li a {
    font-size: 1.02rem !important;
    padding: 0.22rem 0 !important;
}

/* "Volg ons" en social-iconen groter */
.footer-social-row {
    font-size: 1rem !important;
    gap: 0.7rem !important;
}
.footer-social {
    width: 44px !important;
    height: 44px !important;
}
.footer-social svg {
    width: 22px !important;
    height: 22px !important;
}
.footer-social--instagram svg,
.footer-social--facebook svg {
    width: 22px !important;
    height: 22px !important;
}

/* Route-knop iets groter mee */
.footer-route-btn {
    font-size: 0.92rem !important;
    padding: 0.55rem 1.4rem !important;
}

/* --- Op mobiel de footer centreren --- */
@media (max-width: 768px) {
    .footer-main {
        text-align: center !important;
        justify-items: center !important;
    }
    .footer-brand,
    .footer-links-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100%;
    }
    .footer-brand-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .footer-contact-group {
        align-items: center !important;
    }
    .footer-contact-item {
        justify-content: center !important;
        text-align: center;
    }
    .footer-links {
        text-align: center !important;
    }
    .footer-links li a {
        text-align: center !important;
    }
    .footer-social-row {
        justify-content: center !important;
    }
    .footer-keurmerken {
        justify-content: center !important;
    }
}


/* ============================================================
   FEEDBACKRONDE 4, hero-slider dots (autoplay + dots)
   ============================================================ */
.hero-dots {
    position: absolute;
    bottom: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.55rem;
    z-index: 6;
}
.hero-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(255,255,255,0.35);
    padding: 0;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.hero-dot:hover {
    background: rgba(255,255,255,0.7);
}
.hero-dot--active {
    background: #437e9e;
    border-color: #fff;
    transform: scale(1.15);
}

@media (max-width: 768px) {
    .hero-dots {
        bottom: 0.8rem;
    }
    .hero-dot {
        width: 10px;
        height: 10px;
    }
}


/* ============================================================
   BOOKING WIDGET, inline variant (o.a. kamperen-pagina)
   ============================================================ */
.kamperen-booking-sectie {
    background: #dbd7cc;
    padding: 4rem 2rem;
}
.kamperen-booking-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0.5rem;
}

/* Reset de hero-specifieke opmaak voor de inline-variant */
.booking-widget--inline {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    margin-right: auto !important;
    margin-left: auto !important;
    margin-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    opacity: 1 !important;
    animation: none !important;
}
.booking-widget--inline .booking-form {
    box-shadow: 0 8px 28px rgba(42,37,32,0.14), 0 3px 10px rgba(42,37,32,0.08) !important;
    padding: 1.75rem !important;
    gap: 1.5rem !important;
}
.booking-widget--inline .booking-fields {
    gap: 1.5rem !important;
}

@media (max-width: 768px) {
    .kamperen-booking-sectie {
        padding: 1.75rem 1.25rem 2.25rem;
    }
    .booking-widget--inline {
        max-width: 100% !important;
    }
}


/* ============================================================
   KAMPEREN page-hero: meer ruimte onder subtitle (Caravan Tent Camper)
   ============================================================ */
.page-kamperen .page-hero {
    padding-bottom: 3rem !important;
}
.page-kamperen .page-hero-subtitle {
    margin-bottom: 0.5rem;
}


/* ============================================================
   FIX: geen meescrollende balk, logo blijft donker op subpaginas
   ============================================================ */
/* Op subpaginas altijd het donkere logo, ook na scroll (solid state).
   De header is transparant (geen blauwe balk), dus een wit logo zou
   onleesbaar over de content vallen. */

/* Als er een donker logo is: toon dat, verberg het lichte (altijd). */
body:not(.home) .header-logo:has(.header-logo--dark) .header-logo--light {
    display: none !important;
}
body:not(.home) .header-logo .header-logo--dark {
    display: inline-block !important;
}

/* Fallback: geen donker logo ingesteld -> toon het lichte logo maar
   maak het leesbaar op de lichte header (geen wit-op-beige). */
body:not(.home) .header-logo:not(:has(.header-logo--dark)) .header-logo--light {
    display: inline-block !important;
}
/* (Zonder donker logo blijft het originele logo staan; stel logo_donker
   in via Meibeek Instellingen voor een donkere variant op subpaginas.) */

/* Geen meescrollende navigatie of extra menu-knop in de header */
.header-nav,
.header-actions,
.mobile-toggle {
    display: none !important;
}

/* Home: logo blijft verborgen in de header (zit in de hero), ook na scroll */
body.home .header-logo,
body.home .header--solid .header-logo {
    display: none !important;
}


/* ============================================================
   FIX: reserveer-promo rechterkolom (quote) bovenaan uitlijnen
   ============================================================ */
.reserveer-promo-inner {
    align-items: start !important;
}
/* Quote lijnt met de bovenkant van de titel links; corrigeer de
   optische top zodat de eerste regel gelijk loopt met de titel. */
.reserveer-promo-right {
    align-self: start !important;
}
.reserveer-promo-quote {
    margin-top: 0 !important;
}


/* ============================================================
   Hero-foto: ruimte bovenaan (foto plakt niet meer tegen de bovenrand)
   ============================================================ */
@media (min-width: 769px) {
    .hero-photo-area {
        top: 6rem !important;
    }
}


/* ============================================================
   Faciliteit-cards: witte golf onder foto weg + 1px border bij foto
   ============================================================ */
/* Witte golvende overgang onderaan de foto verwijderen */
.faciliteit-img::after {
    display: none !important;
    content: none !important;
}
/* Geen border op de faciliteit-foto (klant wil geen lijn) */
a.faciliteit-card .faciliteit-img {
    border: none !important;
}

/* ============================================================
   Kiekjes-foto: border-radius links weer terug (rechts blijft recht)
   ============================================================ */
.hp-kiekjes-foto,
.hp-kiekjes-img {
    border-radius: 14px 0 0 14px !important;
    border-top: none !important;
}
@media (max-width: 768px) {
    .hp-kiekjes-foto,
    .hp-kiekjes-img {
        border-radius: 14px !important;
    }
}


/* ============================================================
   Faciliteit-cards: ALLE witte overgangen/lijnen onder de foto weg
   ============================================================ */
.faciliteit-img::after,
.faciliteit-visual::after {
    display: none !important;
    content: none !important;
}
/* Foto sluit strak aan op het witte kaartvlak, geen border/outline */
a.faciliteit-card .faciliteit-img,
.faciliteit-card .faciliteit-img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
/* line-height 0 + block image elimineert de klassieke inline-gap lijn */
a.faciliteit-card .faciliteit-img {
    line-height: 0 !important;
    font-size: 0 !important;
}
a.faciliteit-card .faciliteit-img img,
a.faciliteit-card .faciliteit-img-inner {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    vertical-align: bottom !important;
}


/* ============================================================
   Faciliteit-card border weg + accom-card hover-knoppen vierkant
   ============================================================ */
/* Card-container zelf: geen border */
a.faciliteit-card,
.faciliteit-card {
    border: none !important;
}

/* Hover-knoppen op de accommodatie-cards vierkant maken */
.accom-btn,
.accom-btn--ontdek,
.accom-btn--boek {
    border-radius: 0 !important;
}


/* ============================================================
   Punt 2: sticky-icons (incl. Zoek & Boek) echt sticky op mobiel
   ============================================================ */
@media (max-width: 768px) {
    .sticky-icons {
        position: fixed !important;
        top: 1rem !important;
        right: 1rem !important;
        z-index: 1200 !important;
    }
}


/* ============================================================
   STICKY-ICONS als EEN samenhangend blok (exact als design)
   Wit "Zoek & Boek" links, naadloos in blauw icoon-blok rechts,
   alles in een afgeronde pill, geen losse icoontjes.
   ============================================================ */
.sticky-icons {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: #4a7f9c !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Wit "Zoek & Boek" deel links */
.sticky-boek {
    display: inline-flex !important;
    align-items: center !important;
    background: #fff !important;
    color: #2a3b45 !important;
    font-family: var(--font-display) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 1.4rem !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* Icoontjes: vierkant, blauw, strak naast elkaar, geen ronde vorm */
.sticky-icon {
    width: 54px !important;
    height: auto !important;
    min-height: 52px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}
.sticky-icon:hover {
    background: rgba(0,0,0,0.12) !important;
    color: #fff !important;
}

/* Menu-knop: tekst "Menu" met hamburger, zelfde blok, iets breder */
.sticky-icon--menu {
    width: auto !important;
    padding: 0 1.1rem !important;
    gap: 0.5rem !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.sticky-icon--menu .hamburger span {
    background: #fff !important;
}
.sticky-icon-label {
    color: #fff !important;
    font-family: var(--font-display) !important;
    font-size: 0.9rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
}

/* Vlag netjes in het blok, rechthoekig met kleine radius */
.sticky-icon .flag-nl,
.sticky-icon svg[viewBox="0 0 22 16"] {
    border-radius: 2px;
    display: block;
}

/* Solid/transparent varianten niet meer los inkleuren, blok blijft gelijk */
.header--solid .sticky-icon,
body:not(.home) .header--transparent .sticky-icon {
    background: transparent !important;
    color: #fff !important;
    border: none !important;
}
.header--solid .sticky-boek,
body:not(.home) .header--transparent .sticky-boek {
    background: #fff !important;
    color: #2a3b45 !important;
    border: none !important;
}

@media (max-width: 768px) {
    .sticky-icon {
        width: 46px !important;
        min-height: 46px !important;
    }
    .sticky-boek {
        padding: 0 1rem !important;
        font-size: 0.85rem !important;
    }
}


/* ============================================================
   Sticky-blok: strak bovenaan + inhoud verticaal gecentreerd
   ============================================================ */
.sticky-icons {
    top: 0.85rem !important;
    align-items: stretch !important;
}
/* Alles binnen het blok verticaal gecentreerd, gelijke hoogte */
.sticky-boek,
.sticky-icon,
.sticky-icon--menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 52px !important;
    line-height: 1 !important;
}
.sticky-icon-label {
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}
@media (max-width: 768px) {
    .sticky-icons {
        top: 0.75rem !important;
    }
    .sticky-boek,
    .sticky-icon,
    .sticky-icon--menu {
        min-height: 46px !important;
    }
}


/* ============================================================
   Sticky-blok DEFINITIEF: tegen rechterbovenhoek, beide onderhoeken
   afgerond. Radius op container EN op de buitenste kinderen, zodat
   de afronding zichtbaar is ongeacht overflow-gedrag.
   ============================================================ */
.sticky-icons {
    top: 0 !important;
    right: 0 !important;
    border-radius: 0 0 0 14px !important;
    overflow: visible !important;
    background: #fff !important;
}
/* Wit deel: eigen linksonder ronding (hangt als losse tab) */
.sticky-icons .sticky-boek {
    border-radius: 0 0 0 14px !important;
    position: relative !important;
    z-index: 2 !important;
}
/* Blauw deel als aparte tab: alle icoon-knoppen krijgen de blauwe
   achtergrond, en de eerste (mail) rondt linksonder af. */
.sticky-icons .sticky-icon {
    background: #4a7f9c !important;
}
.sticky-icons .sticky-boek + .sticky-icon {
    border-bottom-left-radius: 14px !important;
}
/* Menu-knop: GEEN afronding op het blok. Wel een eigen rechthoekig
   kader rond hamburger + "Menu" tekst (zie design). */
.sticky-icons .sticky-icon--menu {
    border-radius: 0 !important;
}
.sticky-icon--menu {
    position: relative !important;
}
.sticky-icon--menu .sticky-icon-label {
    border: 1.5px solid rgba(255,255,255,0.85) !important;
    padding: 0.35rem 0.7rem !important;
    border-radius: 2px !important;
    line-height: 1 !important;
}


/* ============================================================
   Punt: Reserveer-promo golf boven EN beneden
   ============================================================ */
.reserveer-promo {
    position: relative;
    overflow: hidden;
}
/* Golf onderaan de reserveer-promo (beige golft naar beneden in de
   blauwe sectie eronder). Gespiegelde vorm van de bovengolf. */
.reserveer-promo::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    z-index: 0;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,100 L0,52 C180,72 380,72 650,52 C920,32 1160,46 1440,70 L1440,100 Z' fill='%23437e9e'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: 100% 100%;
}
/* Inhoud boven de golven houden */
.reserveer-promo-inner {
    position: relative;
    z-index: 1;
    padding-bottom: 3rem;
}


/* ============================================================
   Punt: "Bekijk alle faciliteiten" blauw + witte tekst,
   hover wit + zwarte tekst
   ============================================================ */
.faciliteiten-alle-btn {
    background: #437e9e !important;
    color: #fff !important;
    border: 2px solid #437e9e !important;
}
.faciliteiten-alle-btn:hover {
    background: #fff !important;
    color: #1a1a1a !important;
    border-color: #fff !important;
}


/* ============================================================
   Punt 5: body teksten 1.20rem, Punt 6: footer button + footer body
   ============================================================ */
/* Sectie body-teksten */
.reserveer-promo-tekst,
.faciliteiten-tekst,
.hp-kiekjes-tekst,
.hp-rev-tekst,
.accom-card-desc li,
.content-intro p,
.overons-single-tekst p {
    font-size: 1.20rem !important;
    line-height: 1.7 !important;
}

/* Punt 6: footer button + footer body-teksten groter */
.footer-route-btn {
    font-size: 1.20rem !important;
    padding: 0.7rem 1.6rem !important;
}
.footer-contact-item,
.footer-links li a,
.footer-social-row {
    font-size: 1.20rem !important;
}


/* ============================================================
   Reserveer-promo BOVENgolf blauw (USP-sectie erboven is blauw,
   dus de golf toont blauw tegen de beige reserveer-sectie).
   ============================================================ */
.reserveer-promo::before {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1440,0 L1440,48 C1260,28 1060,28 790,48 C520,68 280,54 0,30 L0,0 Z' fill='%23437e9e'/%3E%3C/svg%3E") no-repeat top center !important;
    background-size: 100% 100% !important;
}


/* ============================================================
   Reserveer-promo: meer padding (content verder van de golven)
   ============================================================ */
.reserveer-promo {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}
.reserveer-promo-inner {
    padding-top: 11rem !important;
    padding-bottom: 11rem !important;
}
@media (max-width: 768px) {
    .reserveer-promo-inner {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
}


/* ============================================================
   Feedbackronde: opsomming, comfort-knoppen, kruisje, menu-adres
   ============================================================ */

/* Punt 1: "Waarom wachten vakantiepret" opsomming (bullets) groter */
.accommodaties .accom-card-desc li {
    font-size: 1.20rem !important;
    line-height: 1.6 !important;
}

/* Punt 2: comfort kampeerplaats knoppen beige in normale staat
   (onder de hover). Hover behoudt de blauwe accentkleur. */
.accommodaties .accom-btn--ontdek,
.accommodaties .accom-btn--boek,
.accom-btn--ontdek,
.accom-btn--boek {
    background: #dbd7cc !important;
    color: #3a3530 !important;
}
.accommodaties .accom-btn--ontdek:hover,
.accom-btn--ontdek:hover {
    background: #437e9e !important;
    color: #fff !important;
}
.accommodaties .accom-btn--boek:hover,
.accom-btn--boek:hover {
    background: #437e9e !important;
    color: #fff !important;
}

/* Punt 3: kruisje (menu sluiten) iets kleiner */
@media (min-width: 769px) {
    .overlay-close {
        width: 60px !important;
        height: 60px !important;
    }
    .overlay-close svg {
        width: 22px !important;
        height: 22px !important;
    }
}
@media (max-width: 768px) {
    .overlay-close {
        width: 42px !important;
        height: 42px !important;
    }
}

/* Punt 4: menu-adres (Branderveenweg 4, 7261 RE Ruurlo) wit */
.overlay-address {
    color: #ffffff !important;
}


/* ============================================================
   Punt: faciliteit-card titels blauw + groter, "Ontdek meer" groter
   ============================================================ */
a.faciliteit-card .faciliteit-name,
.faciliteit-name {
    color: #437e9e !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
}
a.faciliteit-card:hover .faciliteit-name {
    color: #35647e !important;
}
.faciliteit-link {
    font-size: 1rem !important;
}


/* ============================================================
   Reserveer-promo foto (vervangt de quote als er een foto is ingesteld)
   ============================================================ */
.reserveer-promo-foto {
    display: block;
    width: 100%;
    height: auto;
    max-height: 340px;
    object-fit: cover;
    border-radius: 12px;
}
@media (max-width: 768px) {
    .reserveer-promo-foto {
        max-height: 240px;
    }
}


/* ============================================================
   FEEDBACKRONDE: knopteksten groter, USP dynamisch, footer-adres vet
   ============================================================ */

/* --- Punt 1: lettertype in de knoppen/zoekbalk fors groter --- */
.faciliteiten-alle-btn,
.accommodaties-alle-btn,
.hp-kiekjes-btn,
.reserveer-promo-btn,
.hp-rev-link,
.btn-primary,
.btn-ghost,
.btn-lg,
.btn-outline,
.overlay-book-btn {
    font-size: 1.20rem !important;
    padding: 0.8rem 1.9rem !important;
    line-height: 1.3 !important;
}

/* Zoek & Boek in de sticky balk */
.sticky-boek {
    font-size: 1.15rem !important;
    padding: 0 1.6rem !important;
}

/* Zoekbalk (boekingswidget) in de hero */
.booking-tab {
    font-size: 1.05rem !important;
}
.booking-label {
    font-size: 0.9rem !important;
}
.booking-input input,
.booking-input select {
    font-size: 1.1rem !important;
}
.booking-input {
    padding: 0.85rem 1.1rem !important;
}
.booking-submit {
    font-size: 1.2rem !important;
    padding: 1rem 2.2rem !important;
}

/* Knoppen op de accommodatiekaarten mee omhoog */
.accommodaties .accom-btn,
.accom-btn,
.accom-btn--ontdek,
.accom-btn--boek {
    font-size: 1.05rem !important;
    padding: 0.65rem 1.3rem !important;
}

@media (max-width: 768px) {
    .faciliteiten-alle-btn,
    .accommodaties-alle-btn,
    .hp-kiekjes-btn,
    .reserveer-promo-btn,
    .hp-rev-link,
    .btn-primary,
    .btn-ghost,
    .btn-lg,
    .btn-outline,
    .overlay-book-btn {
        font-size: 1.05rem !important;
        padding: 0.7rem 1.4rem !important;
    }
    .sticky-boek {
        font-size: 1rem !important;
        padding: 0 1.1rem !important;
    }
    .booking-submit {
        font-size: 1.1rem !important;
    }
}

/* --- Punt 2: USP strip volgt het aantal pictogrammen (niet vast op 5) --- */
.usp-strip-inner {
    grid-template-columns: repeat(var(--usp-count, 5), 1fr) !important;
}

@media (max-width: 900px) {
    .usp-strip-inner {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .usp-strip-inner {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* --- Punt 3: adresgegevens in de footer vet --- */
.footer-contact-item,
.footer-contact-item span,
.footer-contact-item a {
    font-weight: 700 !important;
}


/* ============================================================
   TOMM. boekingswidgets in de Meibeek huisstijl
   De widget gebruikt het voorvoegsel .t3- en zet zijn kleuren via
   CSS variabelen als losse RGB-waarden.
   ============================================================ */

.t3-widget-root {
    --t3-primary: 67, 126, 158;
    --t3-primary-hover: 53, 100, 126;
    --t3-secondary: 67, 126, 158;
    --t3-secondary-hover: 53, 100, 126;
    --t3-box-border: 232, 224, 212;
    --t3-box-border-active: 67, 126, 158;
    --t3-text-default: 58, 53, 48;
    --t3-text-subtext: 139, 111, 78;
    --t3-steps-bg: 246, 244, 239;
    --t3-results-background: 255, 255, 255;
    --t3-box-bg-hover: 247, 241, 232;
    --t3-border-radius: 12px;
}

.t3-widget-root,
.t3-widget-root p,
.t3-widget-root li {
    font-weight: 400;
}

.t3-widget-root h1,
.t3-widget-root h2,
.t3-widget-root h3,
.t3-widget-root h4,
.t3-widget-root .t3-heading {
    font-family: var(--font-display);
    font-weight: 700;
    color: #3a3530;
}

/* ---------- Secties rond de widgets ---------- */

/* Zelfde beige als de page-hero erboven, anders zie je een naad tussen de
   twee bijna gelijke tinten. */
.tommy-section {
    background: var(--room);
    padding: 3rem 2rem 5rem;
}

/* De page-hero staat globaal op padding-bottom 0, waardoor de subtitel tegen
   de rand plakt. Op de TOMM-pagina's wel ruimte eronder. */
.page-reserveren .page-hero,
.page-zoek-en-boek .page-hero {
    padding-bottom: 2.5rem !important;
}

.tommy-section-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.tommy-widget {
    width: 100%;
}

.tommy-notice {
    max-width: 720px;
    margin: 2rem auto;
    padding: 1.25rem 1.5rem;
    background: #fff5d6;
    border-radius: 8px;
    color: #5a4a1f;
    font-size: 1rem;
}

/* ---------- Zoekbalk, zowel in de hero als boven de resultaten ---------- */

.booking-widget--tommy,
.tommy-widget--searchpage .t3-search-bar,
.tommy-widget--matrix .t3-search-bar {
    background: #fff;
    border-radius: 18px;
    padding: 1.4rem 1.6rem;
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

.booking-widget--tommy {
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
    max-width: 1000px;
}

.tommy-widget--searchpage .t3-search-bar,
.tommy-widget--matrix .t3-search-bar {
    max-width: 100%;
    margin: 0 0 2rem;
    padding: 0.9rem;
}

.t3-widget-root .t3-search-bar {
    gap: 0.75rem;
    justify-content: stretch;
    align-items: stretch;
}

/* De kolommen staan bij TOMM vast op 300px, waardoor de balk in het midden
   blijft hangen. Ze mogen de volle breedte verdelen. */
.t3-widget-root .t3-search-bar .t3-search-column {
    padding: 0;
    flex: 1 1 0;
    max-width: none;
}

.t3-widget-root .t3-search-bar .t3-search-bar-area {
    background: #f7f1e8;
    border: none;
    border-radius: 12px;
    padding: 0.85rem 1.2rem;
    justify-content: center;
    transition: background 0.25s, box-shadow 0.25s;
}

.t3-widget-root .t3-search-bar .t3-search-bar-area:hover {
    background: #f1e8da;
}

.t3-widget-root .t3-search-bar .t3-search-bar-area.t3-area-active {
    background: #fff;
    border: none;
    box-shadow: 0 0 0 2px rgba(67,126,158,0.35);
}

.t3-widget-root .t3-search-bar .t3-search-bar-area > label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8b6f4e;
    margin-bottom: 0.25rem;
}

.t3-widget-root .t3-search-bar .t3-search-bar-area .t3-placeholder {
    font-size: 1.05rem;
    color: #3a3530;
}

.t3-widget-root .t3-search-bar .t3-search-bar-area .t3-anchor {
    color: #8b6f4e;
}

.t3-widget-root .t3-search-bar .t3-search-bar-area.t3-confirm {
    background: none;
    box-shadow: none;
    padding: 0;
}

.t3-widget-root .t3-search-bar .t3-search-bar-area.t3-confirm button {
    background-color: #437e9e;
    border: 1px solid #437e9e;
    color: #fff;
    border-radius: 12px;
    padding: 1rem 2.4rem;
    font-size: 1.05rem;
    font-weight: 600;
    height: 100%;
    transition: background-color 0.25s;
}

.t3-widget-root .t3-search-bar .t3-search-bar-area.t3-confirm button:hover {
    background-color: #35647e;
    border-color: #35647e;
}

.t3-widget-root .t3-search-bar .t3-popover {
    border-radius: 14px;
    z-index: 60;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

/* ---------- Resultaten ---------- */

.tommy-widget--searchpage h2,
.tommy-widget--searchpage h3.t3-heading:not(.t3-card .t3-heading) {
    font-size: 2rem;
}

.tommy-widget--searchpage .t3-card {
    background-color: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.09);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s;
}

.tommy-widget--searchpage .t3-card {
    cursor: pointer;
}

.tommy-widget--searchpage .t3-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0,0,0,0.16);
}

.tommy-widget--searchpage .t3-card:not(:last-child) {
    margin-bottom: 1rem !important;
}

/* Beeldkolom. Zolang er geen foto in TOMM hangt vervalt de kolom, zodat de
   kaart niet onnodig hoog wordt en de tekst niet halverwege begint. */
.tommy-widget--searchpage .t3-card .t3-card-image {
    overflow: hidden;
    margin-bottom: 0;
}

.tommy-widget--searchpage .t3-card .t3-card-image:not(:has(img[src])) {
    display: none;
}

.tommy-widget--searchpage .t3-card .t3-card-image picture,
.tommy-widget--searchpage .t3-card .t3-card-image img {
    height: 100%;
    max-height: 190px;
    object-fit: cover;
}

.tommy-widget--searchpage .t3-card .t3-card-content {
    padding: 1.15rem 1.5rem;
    gap: 0.25rem;
}

.tommy-widget--searchpage .t3-card .t3-heading {
    font-size: 1.3rem;
    margin: 0 0 0.25rem;
    line-height: 1.25;
}

.tommy-widget--searchpage .t3-card .t3-card-desc {
    color: #5a5247;
    font-size: 1.02rem;
    line-height: 1.6;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.tommy-widget--searchpage .t3-card .t3-icon-list .t3-list-item {
    background: #f7f1e8;
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-size: 0.9rem;
    color: #5a5247;
}

.tommy-widget--searchpage .t3-card .t3-card-footer {
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
    padding-top: 0.6rem;
}

.tommy-widget--searchpage .t3-card .t3-card-price {
    align-self: center;
    align-items: baseline;
}

.tommy-widget--searchpage .t3-card .t3-price .sale,
.tommy-widget--searchpage .t3-card .t3-subtotal {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: #437e9e;
}

.tommy-widget--searchpage .t3-card .t3-price .regular {
    color: #8b6f4e;
}

/* Knoppen */
.t3-widget-root .t3-btn {
    border-radius: 12px;
    font-size: 1.02rem;
}

.t3-widget-root .t3-btn-primary,
.t3-widget-root .t3-btn-secondary {
    background-color: #437e9e;
    border-color: #437e9e;
    color: #fff;
    padding: 0.75rem 1.7rem;
}

.t3-widget-root .t3-btn-primary:hover,
.t3-widget-root .t3-btn-secondary:hover {
    background-color: #35647e;
    border-color: #35647e;
}

.tommy-widget--searchpage .t3-card .t3-card-link .t3-btn {
    background-color: #437e9e;
    border: 1px solid #437e9e;
    color: #fff;
    padding: 0.55rem 1.3rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 0;
}

.tommy-widget--searchpage .t3-card .t3-card-link .t3-btn:hover {
    background-color: #35647e;
    border-color: #35647e;
    color: #fff;
}

/* Filterkolom */
.t3-widget-root .t3-filter-holder {
    background: #fff !important;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
    padding: 1.5rem;
}

.t3-widget-root .t3-filter-holder .t3-filter:not(:last-child) {
    border-bottom: 1px solid #efe8dc;
}

/* Stappenbalk in het boekingsproces */
.t3-widget-root .t3-breadcrumbs ul li.t3-step-active i {
    background: #437e9e;
}

.t3-widget-root.t3-widget-booking .t3-summary-holder,
.t3-widget-root .t3-form {
    background: #fff !important;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

/* Schakelaars bij de extra's. TOMM zet ze op 92 bij 32 pixels, dat is fors
   naast de tellers ernaast. */
.t3-widget-root .t3-switch {
    width: 52px;
    height: 28px;
}

.t3-widget-root .t3-switch:after {
    width: 20px;
    height: 20px;
    left: 4px;
}

.t3-widget-root .t3-switch:checked:after {
    left: calc(100% - 24px);
}

.t3-widget-root .t3-switcher,
.t3-widget-root .t3-arrangement-switcher,
.t3-widget-root .t3-includer,
.t3-widget-root .t3-counter {
    max-width: 420px;
}

/* ---------- Hero laat de kalender niet meer afkappen ---------- */

.hero,
.hero-content,
.hero-booking,
.booking-widget--tommy,
.booking-widget--tommy .t3-widget-root,
.booking-widget--tommy .t3-search-bar,
.booking-widget--tommy .t3-search-column,
.booking-widget--tommy .t3-search-bar-area,
.booking-widget--tommy .t3-popover-parent {
    overflow: visible !important;
}

.hero {
    z-index: 5;
}

.hero-booking,
.booking-widget--tommy {
    position: relative;
    z-index: 40;
}

/* ---------- Mobiel ---------- */

@media (max-width: 991px) {
    .t3-widget-root .t3-search-bar .t3-search-column {
        max-width: 100%;
        flex: 1 1 100%;
    }
    .t3-widget-root .t3-search-bar .t3-search-bar-area.t3-confirm button {
        padding: 0.9rem 1.5rem;
    }
    .tommy-widget--searchpage .t3-card .t3-card-image picture,
    .tommy-widget--searchpage .t3-card .t3-card-image img {
        max-height: 170px;
    }
    .tommy-widget--searchpage .t3-card .t3-card-content {
        padding: 1rem 1.25rem 1.25rem;
    }
}

@media (max-width: 768px) {
    .tommy-section {
        padding: 2rem 1rem 3rem;
    }
    .page-reserveren .page-hero,
    .page-zoek-en-boek .page-hero {
        padding-bottom: 1.5rem !important;
    }
    .booking-widget--tommy,
    .tommy-widget--searchpage .t3-search-bar {
        padding: 1rem;
        border-radius: 14px;
    }
    .tommy-widget--searchpage .t3-card .t3-heading {
        font-size: 1.35rem;
    }
}

/* ============================================================
   ICONEN (Lucide)
   De emoji-placeholders zijn vervangen door echte iconen. Ze nemen
   de kleur van hun omgeving over via currentColor, en de maat volgt
   de font-size die op het omhullende element stond.
   ============================================================ */

.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon--fill {
    fill: currentColor;
    stroke: none;
}

.icon--lg {
    stroke-width: 1.5;
}

/* Kleine iconen naast een tekstregel */
.accom-kenmerk-icoon,
.voorziening-icoon,
.cta-feat-icon,
.arr-tip-icon,
.brood-info-icoon {
    display: inline-flex;
    align-items: center;
    color: var(--primair);
}

.tk-usp .icon,
.tk-meta-item .icon {
    color: var(--primair);
    margin-right: 0.35rem;
    width: 1.05em;
    height: 1.05em;
}

/* Grote iconen die eerst een emoji-vlak waren: iets fijnere lijn en de
   kleur van het thema in plaats van de bonte emoji */
.fac-item-emoji,
.omg-cat-icoon,
.omg-hl-icoon,
.arr-card-icoon,
.vac-empty-icon,
.rev-badge-icon,
.brood-bestel-img--placeholder {
    color: var(--primair);
    line-height: 1;
}

.fac-item-emoji .icon,
.vac-empty-icon .icon,
.rev-badge-icon .icon,
.brood-bestel-img--placeholder .icon,
.arr-card-icoon .icon,
.omg-cat-icoon .icon,
.omg-hl-icoon .icon {
    stroke-width: 1.35;
}

.fac-item-emoji {
    font-size: 2.6rem;
}

.vac-empty-icon {
    font-size: 2.6rem;
    color: var(--hout);
}

/* Sterren bij reviews */
.review-star .icon {
    color: var(--honing);
    width: 1.05em;
    height: 1.05em;
    stroke: none;
}

/* Pijlen in knoppen en links */
.faciliteit-meer .icon,
.accom-btn .icon,
.btn .icon,
.icon.arrow {
    width: 1.1em;
    height: 1.1em;
    margin-left: 0.4rem;
    vertical-align: -0.2em;
    transition: transform 0.25s;
}

a:hover .faciliteit-meer .icon,
.accom-btn:hover .icon,
.btn:hover .icon,
.btn:hover .icon.arrow {
    transform: translateX(4px);
}

/* Blaadje naast het woordmerk in de header */
.logo-icon .icon {
    width: 1.2em;
    height: 1.2em;
}

/* ============================================================
   HEADER OP SUBPAGINA'S GELIJK AAN DE HOMEPAGE
   Twee dingen liepen mis. Het logo werd op subpagina's alsnog in het
   midden van de header getoond, en de body:not(.home) regels voor het
   sticky-blok stonden eerder in dit bestand maar zijn specifieker,
   waardoor de blauwe iconenbalk daar wit werd.
   ============================================================ */

body:not(.home) .header-logo,
body:not(.home) .header-logo--dark,
body:not(.home) .header-logo--light,
body:not(.home) .header--solid .header-logo {
    display: none !important;
}

body:not(.home) .header-inner {
    justify-content: flex-end !important;
    padding: 0 !important;
}

/* Het blok rechtsboven overal identiek: witte tab plus blauwe iconen */
.sticky-icons,
.header--solid .sticky-icons,
body:not(.home) .header--transparent .sticky-icons {
    background: #fff !important;
}

.sticky-icons .sticky-boek,
.header--solid .sticky-boek,
body:not(.home) .header--transparent .sticky-boek {
    background: #fff !important;
    color: #2a3b45 !important;
    border: none !important;
}

.sticky-icons .sticky-boek:hover,
.header--solid .sticky-boek:hover,
body:not(.home) .header--transparent .sticky-boek:hover {
    background: #437e9e !important;
    color: #fff !important;
}

.sticky-icons .sticky-icon,
.header--solid .sticky-icon,
body:not(.home) .header--transparent .sticky-icon {
    background: #4a7f9c !important;
    color: #fff !important;
    border: none !important;
}

.sticky-icons .sticky-icon:hover,
.header--solid .sticky-icon:hover,
body:not(.home) .header--transparent .sticky-icon:hover {
    background: #3d6c86 !important;
    color: #fff !important;
}

.sticky-icon-label,
.header--solid .sticky-icon-label,
body:not(.home) .header--transparent .sticky-icon-label {
    color: #fff !important;
}

.sticky-icon--menu .sticky-icon-label,
body:not(.home) .header--transparent .sticky-icon--menu .sticky-icon-label {
    border-color: rgba(255,255,255,0.85) !important;
}

/* ============================================================
   BODY-TEKST GELIJK OP ALLE PAGINA'S
   Op de homepage staat de sectietekst op 1.20rem / 1.7. Die regel
   gold alleen voor de homepage-classes, waardoor de subpagina's
   tussen 0.78 en 1.05rem bleven hangen. Hieronder dezelfde maat voor
   de lopende tekst op de overige pagina's.
   ============================================================ */

.section-desc,
.content-intro-text,
.content-section-text p,
.overons-prose p,
.overons-single-tekst,
.overons-closing-text,
.cta-text,
.cta-feat-text,
.faciliteit-desc,
.accom-desc,
.accom-detail-desc,
.accom-card-desc li,
.accom-card--featured .accom-card-desc,
.kampeer-veld-info p,
.kampeer-cta-info p,
.arr-card-desc,
.arr-card-extras li,
.fac-item-desc,
.omg-cat-desc,
.omg-link-desc,
.brood-stap p,
.brood-info-card p,
.brood-intro p,
.pi-blok p,
.pi-checklist-header p,
.pi-checklist li,
.ct-form-desc,
.tk-info-card p,
.tk-object-desc,
.vac-card-desc,
.vac-empty p,
.vac-open-inner p,
.rev-badge-content p,
.rev-card-tekst,
.rev-track .rev-card-tekst,
.review-text {
    font-size: 1.20rem !important;
    line-height: 1.7 !important;
}

/* Het vinkje voor de arrangementen-items meeschalen met de tekst */
.arr-card-extras li {
    padding-left: 1.9rem;
}

.arr-card-extras li::before {
    top: 0.4rem;
    width: 1.15rem;
    height: 1.15rem;
}

/* ============================================================
   BODY-TEKST 1.20rem, TWEEDE RONDE
   De lijst- en kaartitems hebben hun eigen classes en vielen buiten
   de vorige selectie. Iconen in deze rijen schalen mee, want die
   staan op 1em.
   ============================================================ */

/* Contactpagina: gegevensblokken */
.ct-info-item strong,
.ct-info-item span,
.contact-method {
    font-size: 1.20rem !important;
    line-height: 1.7 !important;
}

/* Vacatures: taken en profiel */
.vac-check-item {
    font-size: 1.20rem !important;
    line-height: 1.7 !important;
}

/* Praktische informatie: vertrek checklist en telefoonlijst */
.pi-check-item,
.pi-tel-info strong,
.pi-tel-nummer {
    font-size: 1.20rem !important;
    line-height: 1.7 !important;
}

/* Kamperen: voorzieningen */
.voorziening-item,
.kampeer-veld-info p,
.kampeer-cta-small {
    font-size: 1.20rem !important;
    line-height: 1.7 !important;
}

/* Accommodaties: kenmerken */
.accom-kenmerk,
.accom-detail-personen {
    font-size: 1.20rem !important;
    line-height: 1.7 !important;
}

/* Stacaravan te koop: kenmerken en voorwaarden */
.tk-vw-item,
.tk-vw-item span,
.tk-kenmerk,
.tk-usp {
    font-size: 1.20rem !important;
    line-height: 1.7 !important;
}

/* Broodjesservice: producten */
.brood-bestel-naam,
.brood-card-info h3 {
    font-size: 1.20rem !important;
    line-height: 1.7 !important;
}

/* Menu-overlay: adres */
.overlay-address {
    font-size: 1.20rem !important;
}

/* De losse icoonspans hadden een eigen maat, die mag met de tekst mee */
.voorziening-icoon,
.accom-kenmerk-icoon {
    font-size: 1.20rem !important;
}

/* De vaste SVG's in deze rijen (nog niet uit de iconenset) meeschalen */
.tk-vw-item > svg,
.ct-info-item .ct-info-icon svg {
    flex-shrink: 0;
}

/* ============================================================
   FEEDBACKRONDE: kaarten, galerij, badges, labels en formulier
   ============================================================ */

/* 1. Arrangementen: gekleurde lijn boven de kaart weg */
.arr-card::before {
    display: none !important;
}

/* 2. Stacaravan te koop: geen ruimte boven de drie infokaarten */
.tk-info {
    padding-top: 0 !important;
}

/* 3. Broodjesservice: de twee infokaarten zonder icoon, tekst vult de kaart */
.brood-info-card {
    display: block !important;
}

/* 4. Vakantiekiekjes galerij: een gelijkmatig raster in plaats van
      brede vlakken die het rooster scheeftrekken */
.vk-masonry {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 1fr;
    gap: 1.25rem !important;
}

.vk-foto--wide {
    grid-column: span 1 !important;
}

.vk-foto,
.vk-foto-link,
.vk-foto-placeholder {
    height: 100% !important;
}

.vk-foto-img,
.vk-foto--normal .vk-foto-img,
.vk-foto--wide .vk-foto-img,
.vk-foto-placeholder,
.vk-foto--wide.vk-foto-placeholder {
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
    height: 100% !important;
    object-fit: cover;
}

.vk-placeholder-text {
    color: rgba(255,255,255,0.85) !important;
    font-size: 1.20rem !important;
}

/* 5. Reviews: score-label was honing op honing, nu leesbaar */
.rev-badge-score {
    background: var(--honing) !important;
    color: #2a2520 !important;
    font-size: 1.05rem !important;
    padding: 0.3rem 0.9rem !important;
}

/* 6. Omgeving: highlights groter, minder kolommen zodat het past */
.omg-highlights-inner {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    gap: 1.25rem !important;
}

.omg-hl strong {
    font-size: 1.20rem !important;
}

.omg-hl-tekst {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
}

.omg-hl {
    padding: 1.75rem 1.25rem !important;
}

/* 7. Contactformulier: velden en placeholders op leesmaat */
.ct-form input,
.ct-form select,
.ct-form textarea {
    font-size: 1.20rem !important;
    padding: 0.85rem 1.1rem !important;
}

.ct-form input::placeholder,
.ct-form textarea::placeholder {
    font-size: 1.20rem !important;
    opacity: 1;
}

.ct-form label,
.ct-form-label {
    font-size: 0.95rem !important;
}

/* ============================================================
   PAGE HERO: ruimte onder de subtitel
   Er stond globaal padding-bottom: 0 !important op .page-hero,
   waardoor de subtitel op elke subpagina tegen de onderrand plakte.
   ============================================================ */
.page-hero {
    padding-bottom: 3rem !important;
}

/* Sluit content-intro er direct op aan, dan telt de ruimte dubbel */
.page-hero:has(+ .content-intro) {
    padding-bottom: 2rem !important;
}

@media (max-width: 768px) {
    .page-hero {
        padding-bottom: 2rem !important;
    }
    .page-hero:has(+ .content-intro) {
        padding-bottom: 1.25rem !important;
    }
}

/* ============================================================
   STACARAVAN TE KOOP: infokaarten
   De witte sectie blijft, maar krijgt ruimte boven en onder zodat
   het een bewuste band is en niet een strookje dat tegen de kaarten
   aan plakt. De binnencontainer loopt gelijk met de intro erboven.
   ============================================================ */
.tk-info {
    background: var(--wit) !important;
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

.tk-info-inner {
    max-width: 1200px !important;
}

.tk-info-card {
    background: var(--room) !important;
}

@media (max-width: 768px) {
    .tk-info {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

/* ============================================================
   STACARAVAN TE KOOP: specificaties uitklapbaar
   De kenmerken stonden als vrij lopend raster onder elkaar, waarbij
   lange waarden over twee regels braken en de kolommen niet meer
   uitlijnden. Nu een dichtgeklapt blok met een nette twee-koloms
   definitielijst.
   ============================================================ */

.tk-specs {
    margin: 1.5rem 0 0;
    background: var(--room);
    border-radius: 0.75rem;
    overflow: hidden;
}

.tk-specs-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: 1.20rem;
    font-weight: 700;
    color: var(--houtskool);
    transition: background 0.25s;
}

.tk-specs-toggle::-webkit-details-marker {
    display: none;
}

.tk-specs-toggle:hover {
    background: rgba(42,37,32,0.04);
}

.tk-specs-aantal {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primair);
    background: rgba(67,126,158,0.12);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    line-height: 1.6;
}

.tk-specs-chevron {
    margin-left: auto;
    width: 1.2em;
    height: 1.2em;
    color: var(--hout);
    transition: transform 0.25s;
}

.tk-specs[open] .tk-specs-chevron {
    transform: rotate(180deg);
}

.tk-specs .tk-kenmerken {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
    margin: 0;
    padding: 0 1.25rem 1.25rem;
}

.tk-specs .tk-kenmerk {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
}

/* Scheiding tussen de regels zonder lijnen langs de kaart */
.tk-specs .tk-kenmerk + .tk-kenmerk {
    box-shadow: inset 0 1px 0 rgba(42,37,32,0.07);
}

.tk-specs .tk-kenmerk-label {
    font-size: 1.05rem;
    color: var(--hout);
    margin: 0;
    flex-shrink: 0;
}

.tk-specs .tk-kenmerk-waarde {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--houtskool);
    margin: 0;
    text-align: right;
}

@media (max-width: 768px) {
    .tk-specs .tk-kenmerken {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .tk-specs-toggle {
        font-size: 1.05rem;
    }
}

/* ============================================================
   VAKANTIEKIEKJES GALERIJ: witte band met ruimte
   Zelfde probleem als bij de te-koop pagina: de sectie stond op wit
   zonder ruimte boven, direct tegen de beige sectie erboven aan.
   ============================================================ */
.vk-galerij {
    background: var(--wit) !important;
    padding-top: 4rem !important;
    padding-bottom: 5rem !important;
}

.vk-galerij-inner {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 768px) {
    .vk-galerij {
        padding-top: 2.5rem !important;
        padding-bottom: 3rem !important;
    }
    .vk-masonry {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 520px) {
    .vk-masonry {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   ZOEKBALK MET TABJES (kamperen / huren)
   Elk tabje toont een eigen TOMM-zoekbalk die filtert op de
   accommodatiegroep: 1 = Kamperen, 2 = Huren.
   ============================================================ */

.booking-widget--tommy {
    background: none;
    box-shadow: none;
    padding: 0;
    max-width: 1000px;
}

.booking-widget--tommy .booking-tabs {
    display: flex;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
}

.booking-widget--tommy .booking-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.6rem;
    background: rgba(245,240,232,0.75);
    color: var(--hout-donker);
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    border: none;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
}

.booking-widget--tommy .booking-tab .icon {
    width: 1.15em;
    height: 1.15em;
}

.booking-widget--tommy .booking-tab:hover {
    background: rgba(255,255,255,0.9);
}

.booking-widget--tommy .booking-tab--active {
    background: #fff;
    color: var(--primair);
}

.booking-widget--tommy .booking-panels {
    background: #fff;
    border-radius: 0 18px 18px 18px;
    padding: 1.4rem 1.6rem;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.booking-widget--tommy .booking-panel {
    display: none;
}

.booking-widget--tommy .booking-panel--active {
    display: block;
}

@media (max-width: 768px) {
    .booking-widget--tommy .booking-tab {
        flex: 1 1 0;
        justify-content: center;
        padding: 0.7rem 0.9rem;
        font-size: 1rem;
    }
    .booking-widget--tommy .booking-panels {
        padding: 1rem;
        border-radius: 0 14px 14px 14px;
    }
}

/* Titel op de overzichtspagina is nu een link */
.accom-detail-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s;
}

.accom-detail-title a:hover {
    color: var(--primair);
}

@media (max-width: 900px) {
    .acc-single-galerij,
    .acc-andere-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .acc-single-galerij,
    .acc-andere-grid {
        grid-template-columns: 1fr;
    }
    .acc-single,
    .acc-boeken,
    .acc-andere {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ============================================================
   KALENDER VAN DE ZOEKBALK BOVEN DE SECTIE ERONDER
   Het uitklappaneel hangt buiten de zoekbalk. Zonder eigen
   stapelvolgorde schuiven de kaarten van de volgende sectie eroverheen,
   en zonder overflow visible wordt het paneel afgekapt.
   ============================================================ */

.acc-boeken,
.tommy-section {
    position: relative;
    z-index: 30;
    overflow: visible !important;
}

.acc-boeken-inner,
.tommy-section-inner,
.booking-widget--acc,
.booking-widget--acc .booking-panels,
.booking-widget--tommy .booking-panels,
.tommy-widget,
.tommy-widget .t3-widget-root,
.tommy-widget .t3-search-bar,
.tommy-widget .t3-search-column,
.tommy-widget .t3-search-bar-area,
.tommy-widget .t3-popover-parent {
    overflow: visible !important;
}

/* Secties die na een zoekbalk komen blijven eronder */
.acc-andere,
.accd-boeken,
.tommy-section + section {
    position: relative;
    z-index: 1;
}

.tommy-widget .t3-search-bar .t3-popover {
    z-index: 80 !important;
}

/* ============================================================
   KAMPEERVELDEN: kaarten zijn nu links
   ============================================================ */
a.kampeer-veld {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s;
}

a.kampeer-veld:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(42,37,32,0.14);
}

a.kampeer-veld:hover .kampeer-veld-info h3 {
    color: var(--primair);
}

.kampeer-veld-info h3 {
    transition: color 0.25s;
}

/* ============================================================
   GOLVEN ROND DE CONTACTSTRIP GELIJKGETROKKEN

   De bovengolf stond op 80px met een dubbele slinger, terwijl de
   footergolf eronder op 180px staat met een rustige zwaai. Daardoor
   klopte de onder- en bovenkant van de blauwe strip niet met elkaar.

   De bovengolf is nu de gespiegelde versie van de footergolf, even
   hoog, en blauw in plaats van beige. Hij hangt boven de strip in de
   sectie erboven, dus de achtergrondkleur daarvan maakt niet meer uit:
   op wit, beige of room ziet het er hetzelfde uit.
   ============================================================ */

.contact-strip::before {
    top: auto !important;
    bottom: 100% !important;
    height: 180px !important;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,100 L0,52 C180,72 380,72 650,52 C920,32 1160,46 1440,70 L1440,100 Z' fill='%23437e9e'/%3E%3C/svg%3E") no-repeat bottom center !important;
    background-size: 100% 100% !important;
    z-index: 1 !important;
    transform: scaleX(-1);
}

.contact-strip {
    padding-top: 4rem !important;
    overflow: visible !important;
}

/* De ruimte voor de golf komt van de sectie erboven, niet van een marge
   op de strip zelf. Anders zie je daar de body-achtergrond doorschijnen
   als de sectie erboven een andere kleur heeft, bijvoorbeeld wit. */
*:has(+ .contact-strip) {
    padding-bottom: 190px !important;
}

/* Op de homepage staat de blauwe vakantiekiekjes-sectie er direct
   boven, dus daar is geen overgang nodig. */
body.home .contact-strip::before {
    display: none !important;
}

body.home *:has(+ .contact-strip) {
    padding-bottom: 0 !important;
}

.page-broodjesservice *:has(+ .contact-strip) {
    padding-bottom: 0 !important;
}

@media (max-width: 768px) {
    .contact-strip::before {
        height: 110px !important;
    }
    *:has(+ .contact-strip) {
        padding-bottom: 110px !important;
    }
}

/* Contactknoppen links uitlijnen, gelijk met de titel erboven */
.contact-methods {
    justify-content: flex-start;
}

@media (max-width: 600px) {
    .contact-methods {
        justify-content: center;
    }
}


/* ============================================================
   GROOT LOGO LINKSBOVEN OP SUBPAGINA'S

   Staat in de flow van de pagina, niet absoluut gepositioneerd. Dat
   scheelt per pagina ruimte reserveren in de eerste sectie: de
   broodjesservice en over ons beginnen namelijk niet met een page-hero.
   Het logo hoort bij de pagina en niet bij de vaste header, dus het
   scrollt gewoon mee weg. Op de homepage staat het al in de hero.
   ============================================================ */

.page-logo {
    padding: calc(var(--nav-height) + 3.5rem) 0 2.5rem;
    line-height: 0;
}

.page-logo-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.page-logo a {
    display: inline-block;
}

.page-logo img {
    height: auto;
    max-height: 320px;
    width: auto;
    max-width: 560px;
}

/* De eerste sectie hoeft geen ruimte meer vrij te houden voor de vaste
   header, want het logoblok erboven doet dat al. */
body:not(.home) .page-hero,
.page-broodjesservice .brood-intro,
.page-over-ons .overons-single {
    padding-top: 2.5rem !important;
}

@media (max-width: 991px) {
    .page-logo {
        padding: calc(var(--nav-height) + 2rem) 0 1.5rem;
    }
    .page-logo-inner {
        padding: 0 1.5rem;
    }
    .page-logo img {
        max-height: 190px;
        max-width: 340px;
    }
}

@media (max-width: 600px) {
    .page-logo {
        padding: calc(var(--nav-height) + 1.5rem) 0 1rem;
    }
    .page-logo-inner {
        padding: 0 1rem;
    }
    .page-logo img {
        max-height: 120px;
        max-width: 230px;
    }
}


/* ============================================================
   ZOEK & BOEK: resultaatkaarten

   Opbouw van TOMM:
     .t3-card > .t3-row > .t3-col-5   beeldkolom
                        > .t3-col-7   tekstkolom
     .t3-col-5 > .t3-card-image > .t3-slider > .t3-slide > picture > img

   TOMM geeft .t3-slider zijn hoogte met height: 0 plus padding-top: 75%.
   Dat leverde een beeldbalk op die niet klopte met de hoogte van de
   kaart. Hieronder wordt die constructie uitgezet en krijgt de
   beeldkolom een eigen vaste hoogte, met de slider absoluut daarover.
   Zo hangt er niets meer af van percentages die ergens in de keten
   doodlopen.
   ============================================================ */

.tommy-widget--searchpage .t3-card {
    overflow: hidden !important;
}

.tommy-widget--searchpage .t3-card > .t3-row {
    align-items: stretch !important;
    margin: 0 !important;
}

.tommy-widget--searchpage .t3-card .t3-col-5,
.tommy-widget--searchpage .t3-card .t3-col-7 {
    padding: 0 !important;
    margin: 0 !important;
}

/* Geen foto: de lege kolom vervalt en de tekst neemt de volle breedte */
.tommy-widget--searchpage .t3-card .t3-col-5:not(:has(.t3-card-image)) {
    display: none !important;
}

.tommy-widget--searchpage .t3-card .t3-col-5:not(:has(.t3-card-image)) + .t3-col-7 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* De kolom zelf is de maat: die rekt mee met de kaart en is minimaal
   260px hoog. Het beeld hangt daar absoluut in, zodat er geen hoogte
   in procenten meer doorgegeven hoeft te worden. */
.tommy-widget--searchpage .t3-card .t3-col-5 {
    position: relative !important;
    align-self: stretch !important;
    min-height: 190px !important;
    overflow: hidden !important;
}

.tommy-widget--searchpage .t3-card .t3-card-image {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* De verhoudingstruc van TOMM uitzetten en de slider de kolom laten vullen */
.tommy-widget--searchpage .t3-card .t3-card-image .t3-slider {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.tommy-widget--searchpage .t3-card .t3-card-image .t3-slide {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
    margin: 0 !important;
}

.tommy-widget--searchpage .t3-card .t3-card-image picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.tommy-widget--searchpage .t3-card .t3-card-image img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* Pijlen en bolletjes van de slider houden hun eigen formaat */
.tommy-widget--searchpage .t3-card .t3-slider-nav,
.tommy-widget--searchpage .t3-card .t3-slider-nav button,
.tommy-widget--searchpage .t3-card .t3-slider-dots {
    height: auto !important;
    z-index: 2;
}

/* Tekstkolom */
.tommy-widget--searchpage .t3-card .t3-card-content {
    padding: 1.5rem 1.75rem !important;
    justify-content: center;
    gap: 0.35rem;
}

.tommy-widget--searchpage .t3-card .t3-card-desc:empty {
    display: none;
}

.tommy-widget--searchpage .t3-card .t3-card-footer:not(:has(a, button, .t3-price, .t3-subtotal)) {
    display: none;
}

@media (max-width: 991px) {
    .tommy-widget--searchpage .t3-card .t3-col-5 {
        min-height: 160px !important;
    }
    .tommy-widget--searchpage .t3-card .t3-card-content {
        padding: 1.25rem 1.5rem !important;
    }
}

/* ============================================================
   GOLVEN TUSSEN DE SECTIES

   Elke sectie krijgt onderaan een golf in zijn eigen kleur, die over
   de sectie eronder heen valt. Zo eindigt geen sectie met een rechte
   lijn. Volgen twee secties met dezelfde kleur elkaar op, dan valt de
   golf weg tegen de achtergrond en zie je niets.

   De vorm zit als masker in het pseudo-element, dus de kleur kan per
   sectie met een variabele worden gezet en er is één vorm voor de hele
   site.

   Niet op de homepage: die heeft zijn eigen golven tussen de usp-strip,
   faciliteiten en vakantiekiekjes, en die zouden hier dubbel komen.
   Ook niet boven de contactstrip, want die heeft zijn eigen golf.
   ============================================================ */

:root {
    --golf-hoogte: 90px;
}

body:not(.home) .page-hero,
body:not(.home) .content-intro,
body:not(.home) .accommodaties,
body:not(.home) .faciliteiten,
body:not(.home) .kampeer-cta,
body:not(.home) .kampeer-velden,
body:not(.home) .omg-galerij,
body:not(.home) .pi-checklist-section,
body:not(.home) .rev-lijst,
body:not(.home) .tk-objecten,
body:not(.home) .vac-open,
body:not(.home) .tommy-section,
body:not(.home) .pg-kaart-sectie,
body:not(.home) .pg-legenda-sectie,
body:not(.home) .pg-adres,
body:not(.home) .matrix-cta,
body:not(.home) .acc-andere,
body:not(.home) .accd-hero,
body:not(.home) .accd-info,
body:not(.home) .accd-boeken,
body:not(.home) .accd-schema,
body:not(.home) .acc-single,
body:not(.home) .accom-lijst,
body:not(.home) .ct-map,
body:not(.home) .brood-intro,
body:not(.home) .page-logo,
body:not(.home) .overons-block--room,
body:not(.home) .acc-boeken,
body:not(.home) .brood-hoe,
body:not(.home) .ct-section,
body:not(.home) .fac-lijst,
body:not(.home) .omg-highlights,
body:not(.home) .omg-section,
body:not(.home) .pi-blokken,
body:not(.home) .pi-telefoon,
body:not(.home) .rev-badges,
body:not(.home) .tk-voorwaarden,
body:not(.home) .vac-lijst,
body:not(.home) .vk-galerij,
body:not(.home) .arr-grid-section,
body:not(.home) .tk-info,
body:not(.home) .overons-block--white,
body:not(.home) .hp-reviews,
body:not(.home) .overons-single,
body:not(.home) .reserveer-promo,
body:not(.home) .kamperen-booking-sectie,
body:not(.home) .overons-block,
body:not(.home) .brood-bestel,
body:not(.home) .overons-quote,
body:not(.home) .cta-section {
    position: relative;
    overflow: visible !important;
}

body:not(.home) .page-hero:not(:has(+ .contact-strip))::after,
body:not(.home) .content-intro:not(:has(+ .contact-strip))::after,
body:not(.home) .accommodaties:not(:has(+ .contact-strip))::after,
body:not(.home) .faciliteiten:not(:has(+ .contact-strip))::after,
body:not(.home) .kampeer-cta:not(:has(+ .contact-strip))::after,
body:not(.home) .kampeer-velden:not(:has(+ .contact-strip))::after,
body:not(.home) .omg-galerij:not(:has(+ .contact-strip))::after,
body:not(.home) .pi-checklist-section:not(:has(+ .contact-strip))::after,
body:not(.home) .rev-lijst:not(:has(+ .contact-strip))::after,
body:not(.home) .tk-objecten:not(:has(+ .contact-strip))::after,
body:not(.home) .vac-open:not(:has(+ .contact-strip))::after,
body:not(.home) .tommy-section:not(:has(+ .contact-strip))::after,
body:not(.home) .pg-kaart-sectie:not(:has(+ .contact-strip))::after,
body:not(.home) .pg-legenda-sectie:not(:has(+ .contact-strip))::after,
body:not(.home) .pg-adres:not(:has(+ .contact-strip))::after,
body:not(.home) .matrix-cta:not(:has(+ .contact-strip))::after,
body:not(.home) .acc-andere:not(:has(+ .contact-strip))::after,
body:not(.home) .accd-hero:not(:has(+ .contact-strip))::after,
body:not(.home) .accd-info:not(:has(+ .contact-strip))::after,
body:not(.home) .accd-boeken:not(:has(+ .contact-strip))::after,
body:not(.home) .accd-schema:not(:has(+ .contact-strip))::after,
body:not(.home) .acc-single:not(:has(+ .contact-strip))::after,
body:not(.home) .accom-lijst:not(:has(+ .contact-strip))::after,
body:not(.home) .ct-map:not(:has(+ .contact-strip))::after,
body:not(.home) .brood-intro:not(:has(+ .contact-strip))::after,
body:not(.home) .page-logo:not(:has(+ .contact-strip))::after,
body:not(.home) .overons-block--room:not(:has(+ .contact-strip))::after,
body:not(.home) .acc-boeken:not(:has(+ .contact-strip))::after,
body:not(.home) .brood-hoe:not(:has(+ .contact-strip))::after,
body:not(.home) .ct-section:not(:has(+ .contact-strip))::after,
body:not(.home) .fac-lijst:not(:has(+ .contact-strip))::after,
body:not(.home) .omg-highlights:not(:has(+ .contact-strip))::after,
body:not(.home) .omg-section:not(:has(+ .contact-strip))::after,
body:not(.home) .pi-blokken:not(:has(+ .contact-strip))::after,
body:not(.home) .pi-telefoon:not(:has(+ .contact-strip))::after,
body:not(.home) .rev-badges:not(:has(+ .contact-strip))::after,
body:not(.home) .tk-voorwaarden:not(:has(+ .contact-strip))::after,
body:not(.home) .vac-lijst:not(:has(+ .contact-strip))::after,
body:not(.home) .vk-galerij:not(:has(+ .contact-strip))::after,
body:not(.home) .arr-grid-section:not(:has(+ .contact-strip))::after,
body:not(.home) .tk-info:not(:has(+ .contact-strip))::after,
body:not(.home) .overons-block--white:not(:has(+ .contact-strip))::after,
body:not(.home) .hp-reviews:not(:has(+ .contact-strip))::after,
body:not(.home) .overons-single:not(:has(+ .contact-strip))::after,
body:not(.home) .reserveer-promo:not(:has(+ .contact-strip))::after,
body:not(.home) .kamperen-booking-sectie:not(:has(+ .contact-strip))::after,
body:not(.home) .overons-block:not(:has(+ .contact-strip))::after,
body:not(.home) .brood-bestel:not(:has(+ .contact-strip))::after,
body:not(.home) .overons-quote:not(:has(+ .contact-strip))::after,
body:not(.home) .cta-section:not(:has(+ .contact-strip))::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--golf-hoogte);
    background-color: var(--golf-kleur, var(--room));
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0%2C0 L1440%2C0 L1440%2C18 C1180%2C72 900%2C96 640%2C62 C380%2C28 180%2C26 0%2C56 Z' fill='%2523fff'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0%2C0 L1440%2C0 L1440%2C18 C1180%2C72 900%2C96 640%2C62 C380%2C28 180%2C26 0%2C56 Z' fill='%2523fff'/></svg>");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
    z-index: 4;
}

/* De sectie eronder houdt ruimte vrij zodat de golf niet over de
   inhoud valt */
body:not(.home) .page-hero:not(:has(+ .contact-strip)) + *,
body:not(.home) .content-intro:not(:has(+ .contact-strip)) + *,
body:not(.home) .accommodaties:not(:has(+ .contact-strip)) + *,
body:not(.home) .faciliteiten:not(:has(+ .contact-strip)) + *,
body:not(.home) .kampeer-cta:not(:has(+ .contact-strip)) + *,
body:not(.home) .kampeer-velden:not(:has(+ .contact-strip)) + *,
body:not(.home) .omg-galerij:not(:has(+ .contact-strip)) + *,
body:not(.home) .pi-checklist-section:not(:has(+ .contact-strip)) + *,
body:not(.home) .rev-lijst:not(:has(+ .contact-strip)) + *,
body:not(.home) .tk-objecten:not(:has(+ .contact-strip)) + *,
body:not(.home) .vac-open:not(:has(+ .contact-strip)) + *,
body:not(.home) .tommy-section:not(:has(+ .contact-strip)) + *,
body:not(.home) .pg-kaart-sectie:not(:has(+ .contact-strip)) + *,
body:not(.home) .pg-legenda-sectie:not(:has(+ .contact-strip)) + *,
body:not(.home) .pg-adres:not(:has(+ .contact-strip)) + *,
body:not(.home) .matrix-cta:not(:has(+ .contact-strip)) + *,
body:not(.home) .acc-andere:not(:has(+ .contact-strip)) + *,
body:not(.home) .accd-hero:not(:has(+ .contact-strip)) + *,
body:not(.home) .accd-info:not(:has(+ .contact-strip)) + *,
body:not(.home) .accd-boeken:not(:has(+ .contact-strip)) + *,
body:not(.home) .accd-schema:not(:has(+ .contact-strip)) + *,
body:not(.home) .acc-single:not(:has(+ .contact-strip)) + *,
body:not(.home) .accom-lijst:not(:has(+ .contact-strip)) + *,
body:not(.home) .ct-map:not(:has(+ .contact-strip)) + *,
body:not(.home) .brood-intro:not(:has(+ .contact-strip)) + *,
body:not(.home) .page-logo:not(:has(+ .contact-strip)) + *,
body:not(.home) .overons-block--room:not(:has(+ .contact-strip)) + *,
body:not(.home) .acc-boeken:not(:has(+ .contact-strip)) + *,
body:not(.home) .brood-hoe:not(:has(+ .contact-strip)) + *,
body:not(.home) .ct-section:not(:has(+ .contact-strip)) + *,
body:not(.home) .fac-lijst:not(:has(+ .contact-strip)) + *,
body:not(.home) .omg-highlights:not(:has(+ .contact-strip)) + *,
body:not(.home) .omg-section:not(:has(+ .contact-strip)) + *,
body:not(.home) .pi-blokken:not(:has(+ .contact-strip)) + *,
body:not(.home) .pi-telefoon:not(:has(+ .contact-strip)) + *,
body:not(.home) .rev-badges:not(:has(+ .contact-strip)) + *,
body:not(.home) .tk-voorwaarden:not(:has(+ .contact-strip)) + *,
body:not(.home) .vac-lijst:not(:has(+ .contact-strip)) + *,
body:not(.home) .vk-galerij:not(:has(+ .contact-strip)) + *,
body:not(.home) .arr-grid-section:not(:has(+ .contact-strip)) + *,
body:not(.home) .tk-info:not(:has(+ .contact-strip)) + *,
body:not(.home) .overons-block--white:not(:has(+ .contact-strip)) + *,
body:not(.home) .hp-reviews:not(:has(+ .contact-strip)) + *,
body:not(.home) .overons-single:not(:has(+ .contact-strip)) + *,
body:not(.home) .reserveer-promo:not(:has(+ .contact-strip)) + *,
body:not(.home) .kamperen-booking-sectie:not(:has(+ .contact-strip)) + *,
body:not(.home) .overons-block:not(:has(+ .contact-strip)) + *,
body:not(.home) .brood-bestel:not(:has(+ .contact-strip)) + *,
body:not(.home) .overons-quote:not(:has(+ .contact-strip)) + *,
body:not(.home) .cta-section:not(:has(+ .contact-strip)) + * {
    padding-top: calc(var(--golf-hoogte) + 1.5rem) !important;
}

body:not(.home) .page-logo + .site-main > *:first-child,
body:not(.home) .page-logo + main > *:first-child {
    padding-top: calc(var(--golf-hoogte) + 1.5rem) !important;
}

/* Kleur per sectie */
.page-hero,
.content-intro,
.accommodaties,
.faciliteiten,
.kampeer-cta,
.kampeer-velden,
.omg-galerij,
.pi-checklist-section,
.rev-lijst,
.tk-objecten,
.vac-open,
.tommy-section,
.acc-andere,
.accd-boeken,
.accom-lijst,
.ct-map,
.pg-kaart-sectie,
.pg-adres,
.brood-intro,
.page-logo,
.overons-block--room {
    --golf-kleur: var(--room);
}

.acc-boeken,
.brood-hoe,
.ct-section,
.fac-lijst,
.omg-highlights,
.omg-section,
.pi-blokken,
.pi-telefoon,
.rev-badges,
.tk-voorwaarden,
.vac-lijst,
.vk-galerij,
.arr-grid-section,
.tk-info,
.matrix-cta,
.pg-legenda-sectie,
.accd-schema,
.overons-block--white {
    --golf-kleur: var(--wit);
}

.hp-reviews,
.overons-single,
.reserveer-promo,
.kamperen-booking-sectie,
.overons-block {
    --golf-kleur: #dbd7cc;
}

.brood-bestel {
    --golf-kleur: var(--primair);
}

.overons-quote,
.cta-section {
    --golf-kleur: var(--primair-donker);
}

/* Blokken met twee classes: de variant wint van de basis */
.overons-block.overons-block--room {
    --golf-kleur: var(--room);
}

.overons-block.overons-block--white {
    --golf-kleur: var(--wit);
}

/* Een golf hangt buiten zijn blok. Staat dat in een sectie die zijn
   inhoud afknipt, dan verdwijnt hij. */
body:not(.home) .site-main,
body:not(.home) .site-main > section,
body:not(.home) .site-main > div,
body:not(.home) .overons-single,
body:not(.home) .kampeer-velden,
body:not(.home) .omg-section,
body:not(.home) .accom-lijst {
    overflow: visible !important;
}

/* De reveal eindigt op een transform, en ook een transform van nul
   maakt een eigen stapelcontext waardoor de golf achter de volgende
   sectie valt. Deze blokken zijn omhulsels; hun inhoud heeft een eigen
   reveal, dus er gaat geen animatie verloren. */
.reveal.visible {
    transform: none;
}

.page-hero.reveal,
.content-intro.reveal,
.accommodaties.reveal,
.faciliteiten.reveal,
.kampeer-cta.reveal,
.kampeer-velden.reveal,
.omg-galerij.reveal,
.pi-checklist-section.reveal,
.rev-lijst.reveal,
.tk-objecten.reveal,
.vac-open.reveal,
.tommy-section.reveal,
.acc-andere.reveal,
.acc-single.reveal,
.accom-lijst.reveal,
.ct-map.reveal,
.brood-intro.reveal,
.page-logo.reveal,
.overons-block--room.reveal,
.acc-boeken.reveal,
.brood-hoe.reveal,
.ct-section.reveal,
.fac-lijst.reveal,
.omg-highlights.reveal,
.omg-section.reveal,
.pi-blokken.reveal,
.pi-telefoon.reveal,
.rev-badges.reveal,
.tk-voorwaarden.reveal,
.vac-lijst.reveal,
.vk-galerij.reveal,
.arr-grid-section.reveal,
.tk-info.reveal,
.overons-block--white.reveal,
.hp-reviews.reveal,
.overons-single.reveal,
.reserveer-promo.reveal,
.kamperen-booking-sectie.reveal,
.overons-block.reveal,
.brood-bestel.reveal,
.overons-quote.reveal,
.cta-section.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

@media (max-width: 768px) {
    :root {
        --golf-hoogte: 48px;
    }
}

/* De sectie brood-hoe heeft een variant met een donkerblauwe
   achtergrond. De golf moet die kleur volgen, niet het wit van de
   basisvariant. */
.brood-hoe.brood-hoe--blauw {
    --golf-kleur: var(--primair-donker);
}

/* ============================================================
   TAALVLAGGEN EN GOOGLE TRANSLATE
   ============================================================ */

.taalkeuze {
    display: flex;
    align-items: stretch;
}

.taalknop {
    cursor: pointer;
    transition: background-color 0.25s;
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
}

/* De taal waar de site nu op staat hoeft niet als keuze te blijven
   staan; er zijn alleen nog de talen waar je naartoe kunt. */
.taalknop--actief {
    display: none !important;
}

.taalknop svg {
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
}

/* De widget van Google zelf blijft verborgen, alleen de vlaggen
   bedienen hem */
#google_translate_element,
.skiptranslate,
.goog-te-banner-frame,
.goog-te-gadget {
    display: none !important;
}

body {
    top: 0 !important;
}

.goog-tooltip,
.goog-text-highlight {
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

@media (max-width: 600px) {
    .taalknop {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }
    .taalknop svg {
        width: 18px;
        height: 13px;
    }
}

/* ============================================================
   USP-STRIP: eigen iconen wit maken
   De aangeleverde PNG's zijn zwarte lijntekeningen en staan op een
   blauwe achtergrond. Een filter maakt ze wit zonder dat de bestanden
   opnieuw aangeleverd hoeven te worden.
   ============================================================ */
.usp-icon-img {
    filter: brightness(0) invert(1);
}

.usp-icon svg {
    color: #fff;
}

/* ============================================================
   BESCHIKBAARHEIDSMATRIX

   De matrix van TOMM is een brede tabel: per accommodatie een rij, per
   dag een kolom. Op een smal scherm past dat niet, dus hij schuift
   horizontaal binnen zijn eigen kader in plaats van de pagina breed te
   maken.
   ============================================================ */

.matrix-section {
    padding-top: 2rem;
}

.matrix-uitleg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.matrix-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.matrix-legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    color: var(--hout-donker);
}

.matrix-bolletje {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    display: inline-block;
}

.matrix-bolletje--vrij {
    background: var(--salie);
}

.matrix-bolletje--bezet {
    background: #dbd7cc;
}

.matrix-hint {
    font-size: 0.95rem;
    color: var(--hout);
}

/* Het kader met de tabel.

   De matrix maakt zijn raster precies zo breed als de container en zet
   de twee navigatiepijlen daarbuiten. Hij is dus altijd de
   containerbreedte plus twee pijlen breed, ongeacht hoe breed ik die
   container maak. Elke poging om hem te verkleinen of juist te
   verbreden verschoof alleen welke pijl buiten beeld viel.

   De oplossing is ruimte naast het raster: het kader krijgt links en
   rechts extra binnenmarge, precies waar die pijlen terechtkomen. Het
   raster krimpt daarmee mee en de pijlen staan binnen het kader. */
.matrix-scroll {
    background: var(--wit);
    border-radius: 16px;
    padding: 1.25rem 3.5rem;
    box-shadow: 0 6px 24px rgba(42,37,32,0.08);
    overflow: hidden;
}

/* De pijlen mogen niet meekrimpen als de rest breed wordt */
.tommy-widget--matrix [class*="prev"],
.tommy-widget--matrix [class*="next"],
.tommy-widget--matrix button {
    flex-shrink: 0;
}

/* Op smallere schermen past het raster zelf niet meer, dan schuiven */
@media (max-width: 900px) {
    .matrix-scroll {
        padding: 1rem 2.5rem;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }
}

/* Doorverwijzing onderaan */
.matrix-cta {
    background: var(--wit);
    padding: 4rem 2rem;
    text-align: center;
}

.matrix-cta-inner {
    max-width: 720px;
    margin: 0 auto;
}

.matrix-cta-titel {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--houtskool);
    margin-bottom: 0.75rem;
}

.matrix-cta-tekst {
    font-size: 1.20rem;
    line-height: 1.7;
    color: var(--hout-donker);
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .matrix-scroll {
        padding: 0.75rem;
        border-radius: 12px;
    }
    .matrix-cta {
        padding: 2.5rem 1rem;
    }
    .matrix-uitleg {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ============================================================
   PLATTEGROND
   ============================================================ */

.pg-kaart-sectie {
    background: var(--room);
    padding: 3rem 2rem 4rem;
}

.pg-kaart-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Bediening boven de kaart */
.pg-bediening {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.pg-knoppen {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pg-knop {
    background: var(--wit);
    color: var(--houtskool);
    border: none;
    border-radius: 10px;
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(42,37,32,0.08);
    transition: background 0.25s, color 0.25s, transform 0.2s;
}

.pg-knop:hover {
    background: var(--primair);
    color: #fff;
    transform: translateY(-2px);
}

.pg-knop--tekst {
    width: auto;
    padding: 0 1.1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
}

.pg-zoomwaarde {
    min-width: 3.5rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--hout-donker);
}

.pg-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primair);
    text-decoration: none;
}

.pg-download:hover {
    color: var(--primair-donker);
    text-decoration: underline;
}

/* De viewer */
.pg-viewer {
    position: relative;
    background: #e8ecdf;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(42,37,32,0.12);
    aspect-ratio: 1414 / 1000;
    cursor: zoom-in;
    touch-action: none;
    outline: none;
}

.pg-viewer--gezoomd {
    cursor: grab;
}

.pg-viewer--sleept {
    cursor: grabbing;
}

.pg-viewer:focus-visible {
    box-shadow: 0 0 0 3px rgba(67,126,158,0.45);
}

.pg-kaart {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transform-origin: center center;
    transition: transform 0.18s ease-out;
    user-select: none;
    -webkit-user-drag: none;
}

.pg-viewer--sleept .pg-kaart {
    transition: none;
}

.pg-hint {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    background: rgba(42,37,32,0.75);
    color: #fff;
    font-size: 0.95rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    pointer-events: none;
    transition: opacity 0.4s;
}

.pg-hint--weg {
    opacity: 0;
}

/* In volledig scherm vult de kaart het beeld */
.pg-viewer:fullscreen {
    aspect-ratio: auto;
    border-radius: 0;
    background: var(--houtskool);
}

/* Legenda */
.pg-legenda-sectie {
    background: var(--wit);
    padding: 4rem 2rem;
}

.pg-legenda-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.pg-legenda-kop {
    margin-bottom: 2.5rem;
}

.pg-legenda-titel {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--houtskool);
    margin: 0.35rem 0 0;
}

.pg-legenda-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
}

.pg-legenda-groep h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--houtskool);
    margin: 0 0 1rem;
}

.pg-legenda-groep ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.pg-legenda-groep li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1.20rem;
    line-height: 1.5;
    color: var(--hout-donker);
}

.pg-legenda-groep li .icon {
    color: var(--primair);
    width: 1.3em;
    height: 1.3em;
    margin-top: 0.15em;
}

/* Velden */
.pg-velden {
    margin-top: 3rem;
}

.pg-velden h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--houtskool);
    margin: 0 0 1rem;
}

.pg-velden-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.pg-veld {
    background: var(--room);
    border-radius: 999px;
    padding: 0.5rem 1.2rem;
    font-size: 1.05rem;
    color: var(--hout-donker);
}

/* Adres en doorverwijzing */
.pg-adres {
    background: var(--room);
    padding: 4rem 2rem;
}

.pg-adres-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
    align-items: center;
}

.pg-adres-blok h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--houtskool);
    margin: 0 0 0.5rem;
}

.pg-adres-blok p {
    font-size: 1.20rem;
    line-height: 1.7;
    color: var(--hout-donker);
    margin: 0;
}

.pg-adres-blok--cta {
    text-align: right;
}

@media (max-width: 768px) {
    .pg-kaart-sectie,
    .pg-legenda-sectie,
    .pg-adres {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .pg-viewer {
        aspect-ratio: 4 / 3;
    }

    .pg-bediening {
        flex-direction: column;
        align-items: flex-start;
    }

    .pg-adres-blok--cta {
        text-align: left;
    }
}

/* ============================================================
   ACCOMMODATIEPAGINA

   Opbouw volgens het ontwerp: blauwe band met de titel en de foto's,
   daaronder een beige blok met de kenmerken, daarna reserveren.
   ============================================================ */

/* ---- Blauwe band met de foto's ---- */

.accd-hero {
    background: var(--primair);
    padding: 3rem 2rem 4rem;
}

.accd-hero-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.accd-titel {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 700;
    color: #23414f;
    margin: 0 0 1.75rem;
    line-height: 1.15;
}

.accd-titel em {
    font-style: normal;
    color: var(--room);
}

.accd-hoofdfoto {
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(0,0,0,0.08);
    aspect-ratio: 16 / 10;
}

.accd-hoofdfoto-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.25s;
}

.accd-hoofdfoto-img--wissel {
    opacity: 0.35;
}

.accd-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.accd-thumb {
    position: relative;
    padding: 0;
    border: none;
    background: rgba(255,255,255,0.35);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4 / 3;
    transition: transform 0.25s, box-shadow 0.25s;
}

.accd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.25s;
}

.accd-thumb:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
}

.accd-thumb--actief img {
    opacity: 0.55;
}

.accd-thumb:focus-visible {
    outline: 3px solid var(--room);
    outline-offset: 2px;
}

/* ---- Alles over ---- */

.accd-info {
    background: #dbd7cc;
    padding: 4rem 2rem;
}

.accd-info-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.accd-info-titel {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 700;
    color: var(--houtskool);
    margin: 0 0 2rem;
}

.accd-info-titel em {
    font-style: normal;
    color: var(--primair);
}

.accd-info-tekst p {
    font-size: 1.20rem;
    line-height: 1.7;
    color: var(--hout-donker);
    margin: 0 auto 2rem;
    max-width: 720px;
}

.accd-kenmerken {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 640px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.accd-kenmerken li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-size: 1.20rem;
    line-height: 1.5;
    color: var(--houtskool);
}

.accd-vink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--primair);
}

.accd-vink .icon {
    width: 1.4em;
    height: 1.4em;
    stroke-width: 2.5;
}

.accd-praktisch {
    margin-top: 2.5rem;
    text-align: left;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.accd-praktisch h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--houtskool);
    margin: 0 0 0.75rem;
}

.accd-praktisch p {
    font-size: 1.20rem;
    line-height: 1.7;
    color: var(--hout-donker);
}

/* ---- Reserveren ---- */

.accd-boeken {
    background: var(--room);
    padding: 4rem 2rem;
}

.accd-boeken-inner,
.accd-schema-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.accd-boeken-kop,
.accd-schema-kop {
    margin-bottom: 2rem;
}

.accd-boeken-titel,
.accd-schema-titel {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--houtskool);
    margin: 0.35rem 0 0.5rem;
}

.accd-boeken-tekst,
.accd-schema-tekst {
    font-size: 1.20rem;
    line-height: 1.7;
    color: var(--hout-donker);
    margin: 0;
}

.accd-schema {
    background: var(--wit);
    padding: 4rem 2rem;
}

/* ---- Ook interessant ---- */

.acc-andere {
    background: var(--room);
    padding: 4rem 2rem;
}

.acc-andere-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.acc-andere-titel {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--houtskool);
    margin-bottom: 2rem;
}

.acc-andere-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.acc-andere-kaart {
    display: block;
    background: var(--wit);
    border-radius: 1rem;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(42,37,32,0.06);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s;
}

.acc-andere-kaart:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(42,37,32,0.12);
}

.acc-andere-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.acc-andere-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.acc-andere-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(140deg, #dfd7c8 0%, #b9c8cf 100%);
}

.acc-andere-content {
    padding: 1.25rem 1.5rem 1.5rem;
}

.acc-andere-content h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--houtskool);
    margin: 0 0 0.5rem;
}

.acc-andere-personen {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    color: var(--hout);
}

.acc-andere-personen .icon {
    color: var(--primair);
}

@media (max-width: 900px) {
    .accd-thumbs {
        grid-template-columns: repeat(4, 1fr);
    }
    .acc-andere-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .accd-hero,
    .accd-info,
    .accd-boeken,
    .accd-schema,
    .acc-andere {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .accd-thumbs {
        grid-template-columns: repeat(3, 1fr);
    }
    .acc-andere-grid {
        grid-template-columns: 1fr;
    }
    .accd-kenmerken li {
        font-size: 1.1rem;
    }
}

/* Golfkleuren van de accommodatiepagina */
.accd-hero {
    --golf-kleur: var(--primair);
}

.accd-info {
    --golf-kleur: #dbd7cc;
}

/* ============================================================
   STICKY BALK OP MOBIEL

   Zoek & Boek, mail, telefoon, twee vlaggen en het menu passen samen
   niet op een telefoonscherm; de menuknop viel er rechts af. Mail en
   telefoon staan ook in de contactstrip en in de footer, dus die kunnen
   hier weg.
   ============================================================ */

@media (max-width: 900px) {
    .sticky-icons {
        max-width: calc(100vw - 1rem);
    }

    .sticky-icons a.sticky-icon[href^="mailto"],
    .sticky-icons a.sticky-icon[href^="tel"] {
        display: none !important;
    }

    .sticky-boek {
        font-size: 1rem !important;
        padding: 0 1rem !important;
    }

    .taalknop {
        padding-left: 0.45rem !important;
        padding-right: 0.45rem !important;
    }

    .sticky-icon--menu {
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    .sticky-boek {
        font-size: 0.95rem !important;
        padding: 0 0.8rem !important;
    }

    .sticky-icon--menu .sticky-icon-label {
        display: none !important;
    }

    .taalknop svg {
        width: 17px;
        height: 12px;
    }
}

/* Faciliteit zonder foto's: het icoon groot in de blauwe band */
.fac-detail-icoon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
    aspect-ratio: 16 / 6;
    color: var(--room);
}

.fac-detail-icoon .icon {
    width: 5rem;
    height: 5rem;
    stroke-width: 1.2;
}

/* Kaart zonder foto in "Meer op het park" */
.acc-andere-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.85);
}

.acc-andere-placeholder .icon {
    width: 3rem;
    height: 3rem;
    stroke-width: 1.2;
}

/* Icoon in de faciliteit-groepskaart zonder eigen foto */
.faciliteit-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.faciliteit-placeholder-icoon {
    color: var(--primair);
    opacity: 0.55;
}

.faciliteit-placeholder-icoon svg {
    width: 44px;
    height: 44px;
}

/* Groepskop op de faciliteitenpagina */
.fac-groep-kop {
    text-align: center;
    margin: 3.5rem 0 1.5rem;
}

.fac-groep-kop:first-child {
    margin-top: 0;
}

.fac-groep-kop .section-label {
    font-size: 1.5rem;
}

/* ============================================================
   RONDE 9 SEPTEMBER
   ============================================================ */

/* Beschikbaarheid: de hover in de matrix gebruikt de secundaire kleur
   van TOMM. Die zetten ze per account als inline stijl, waardoor onze
   variabelen niet doorkwamen en de hover geel bleef. */
.t3-widget-root {
    --t3-secondary: 67, 126, 158 !important;
    --t3-secondary-hover: 53, 100, 126 !important;
    --t3-secondary-disabled: 232, 224, 212 !important;
}

.t3-widget-root .t3-matrix-body .t3-matrix-row .t3-stay-days .t3-stay-day:not(.disabled):hover {
    background-color: var(--primair) !important;
}

.t3-widget-root .t3-matrix-body .t3-matrix-row .t3-stay-days .t3-stay-day:not(.disabled):hover .regular-price,
.t3-widget-root .t3-matrix-body .t3-matrix-row .t3-stay-days .t3-stay-day:not(.disabled):hover .sale-price {
    color: var(--wit) !important;
}

.t3-widget-root .t3-matrix-body .t3-matrix-row .t3-stay-days .t3-stay-day:not(.disabled):hover .regular-price:has(+ .sale-price) {
    color: rgba(253, 252, 250, 0.7) !important;
}

/* Zoekbalk onder de golf: een sectie met een zoekbalk ligt boven de
   secties eronder, maar onder de golf van de sectie erboven (die staat op
   4). Binnen de sectie ligt de zoekbalk boven zijn eigen golf, zodat de
   uitklappanelen er niet meer onder schuiven. */
body:not(.home) main > section:has(.tommy-widget--searchbar),
body:not(.home) .site-main > section:has(.tommy-widget--searchbar) {
    position: relative;
    z-index: 3 !important;
}

.kamperen-booking-sectie .booking-widget--inline,
.accd-boeken .booking-widget--tommy {
    z-index: 10 !important;
}

/* Boek direct springt naar de zoekbalk, niet onder de vaste menubalk */
#boeken {
    scroll-margin-top: calc(var(--nav-height) + 1rem);
}

/* Golf van het logoblok over de titel: tussen het logoblok en de pagina
   staat de vaste header, waardoor de regel ".page-logo + main" nooit
   raakte. Bij een eerste sectie met een eigen kleur (de blauwe band op
   accommodatie- en faciliteitpagina's, de beige band op over ons) viel de
   roomkleurige golf zo over de titel. */
body:not(.home) .page-logo ~ main > .accd-hero:first-child,
body:not(.home) .page-logo ~ main > .overons-single:first-child {
    padding-top: calc(var(--golf-hoogte) + 2rem) !important;
}

/* ============================================================
   RONDE 8 OKTOBER: MINDER RUIMTE
   ============================================================ */

/* Logo op subpagina's hoger */
.page-logo {
    padding-top: calc(var(--nav-height) + 1.25rem);
    padding-bottom: 1.75rem;
}

@media (max-width: 991px) {
    .page-logo {
        padding-top: calc(var(--nav-height) + 0.75rem);
        padding-bottom: 1.25rem;
    }
}

@media (max-width: 600px) {
    .page-logo {
        padding-top: calc(var(--nav-height) + 0.5rem);
        padding-bottom: 0.75rem;
    }
}

/* Minder ruimte onder elke golf */
body:not(.home) .page-hero:not(:has(+ .contact-strip)) + *,
body:not(.home) .content-intro:not(:has(+ .contact-strip)) + *,
body:not(.home) .accommodaties:not(:has(+ .contact-strip)) + *,
body:not(.home) .faciliteiten:not(:has(+ .contact-strip)) + *,
body:not(.home) .kampeer-cta:not(:has(+ .contact-strip)) + *,
body:not(.home) .kampeer-velden:not(:has(+ .contact-strip)) + *,
body:not(.home) .omg-galerij:not(:has(+ .contact-strip)) + *,
body:not(.home) .pi-checklist-section:not(:has(+ .contact-strip)) + *,
body:not(.home) .rev-lijst:not(:has(+ .contact-strip)) + *,
body:not(.home) .tk-objecten:not(:has(+ .contact-strip)) + *,
body:not(.home) .vac-open:not(:has(+ .contact-strip)) + *,
body:not(.home) .tommy-section:not(:has(+ .contact-strip)) + *,
body:not(.home) .pg-kaart-sectie:not(:has(+ .contact-strip)) + *,
body:not(.home) .pg-legenda-sectie:not(:has(+ .contact-strip)) + *,
body:not(.home) .pg-adres:not(:has(+ .contact-strip)) + *,
body:not(.home) .matrix-cta:not(:has(+ .contact-strip)) + *,
body:not(.home) .acc-andere:not(:has(+ .contact-strip)) + *,
body:not(.home) .accd-hero:not(:has(+ .contact-strip)) + *,
body:not(.home) .accd-info:not(:has(+ .contact-strip)) + *,
body:not(.home) .accd-boeken:not(:has(+ .contact-strip)) + *,
body:not(.home) .accd-schema:not(:has(+ .contact-strip)) + *,
body:not(.home) .acc-single:not(:has(+ .contact-strip)) + *,
body:not(.home) .accom-lijst:not(:has(+ .contact-strip)) + *,
body:not(.home) .ct-map:not(:has(+ .contact-strip)) + *,
body:not(.home) .brood-intro:not(:has(+ .contact-strip)) + *,
body:not(.home) .overons-block--room:not(:has(+ .contact-strip)) + *,
body:not(.home) .acc-boeken:not(:has(+ .contact-strip)) + *,
body:not(.home) .brood-hoe:not(:has(+ .contact-strip)) + *,
body:not(.home) .ct-section:not(:has(+ .contact-strip)) + *,
body:not(.home) .fac-lijst:not(:has(+ .contact-strip)) + *,
body:not(.home) .omg-highlights:not(:has(+ .contact-strip)) + *,
body:not(.home) .omg-section:not(:has(+ .contact-strip)) + *,
body:not(.home) .pi-blokken:not(:has(+ .contact-strip)) + *,
body:not(.home) .pi-telefoon:not(:has(+ .contact-strip)) + *,
body:not(.home) .rev-badges:not(:has(+ .contact-strip)) + *,
body:not(.home) .tk-voorwaarden:not(:has(+ .contact-strip)) + *,
body:not(.home) .vac-lijst:not(:has(+ .contact-strip)) + *,
body:not(.home) .vk-galerij:not(:has(+ .contact-strip)) + *,
body:not(.home) .arr-grid-section:not(:has(+ .contact-strip)) + *,
body:not(.home) .tk-info:not(:has(+ .contact-strip)) + *,
body:not(.home) .overons-block--white:not(:has(+ .contact-strip)) + *,
body:not(.home) .hp-reviews:not(:has(+ .contact-strip)) + *,
body:not(.home) .overons-single:not(:has(+ .contact-strip)) + *,
body:not(.home) .reserveer-promo:not(:has(+ .contact-strip)) + *,
body:not(.home) .kamperen-booking-sectie:not(:has(+ .contact-strip)) + *,
body:not(.home) .overons-block:not(:has(+ .contact-strip)) + *,
body:not(.home) .brood-bestel:not(:has(+ .contact-strip)) + *,
body:not(.home) .overons-quote:not(:has(+ .contact-strip)) + *,
body:not(.home) .cta-section:not(:has(+ .contact-strip)) + * {
    padding-top: calc(var(--golf-hoogte) + 0.5rem) !important;
}

/* Twee blokken in dezelfde kleur: de golf is daar onzichtbaar, maar hield
   wel de volle ruimte vrij. Daar vervalt de golf nu. */
body:not(.home) .page-hero:has(+ .content-intro)::after,
body:not(.home) .page-hero:has(+ .tommy-section)::after,
body:not(.home) .page-hero:has(+ .pg-kaart-sectie)::after,
body:not(.home) .content-intro:has(+ .accom-lijst)::after,
body:not(.home) .content-intro:has(+ .kampeer-velden)::after,
body:not(.home) .content-intro:has(+ .tommy-section)::after,
body:not(.home) .kampeer-velden:has(+ .overons-block--room)::after,
body:not(.home) .accom-lijst:has(+ .kampeer-cta)::after,
body:not(.home) .rev-lijst:has(+ .kampeer-cta)::after {
    display: none !important;
}

body:not(.home) .page-hero:has(+ .content-intro),
body:not(.home) .content-intro:has(+ .accom-lijst),
body:not(.home) .content-intro:has(+ .kampeer-velden),
body:not(.home) .content-intro:has(+ .tommy-section) {
    padding-bottom: 1rem !important;
}

body:not(.home) .page-hero + .content-intro {
    padding-top: 0 !important;
}

body:not(.home) .page-hero + .tommy-section,
body:not(.home) .page-hero + .pg-kaart-sectie,
body:not(.home) .content-intro + .accom-lijst,
body:not(.home) .content-intro + .kampeer-velden,
body:not(.home) .content-intro + .tommy-section,
body:not(.home) .kampeer-velden + .overons-block--room,
body:not(.home) .accom-lijst + .kampeer-cta,
body:not(.home) .rev-lijst + .kampeer-cta {
    padding-top: 1.5rem !important;
}

@media (max-width: 768px) {
    body:not(.home) .page-hero:has(+ .content-intro) {
        padding-bottom: 0.75rem !important;
    }
}

/* Kampeervelden in dezelfde opzet als de keuzepagina's van de
   accommodaties: brede rijen met foto en tekst om en om */
.kampeer-velden-lijst .accom-detail-placeholder .icon {
    width: 56px;
    height: 56px;
}

/* Reserveerblok homepage: vrij tekstvak met eigen alinea's */
.reserveer-promo-tekst p,
.reserveer-promo-tekst ul,
.reserveer-promo-tekst ol {
    font: inherit;
    color: inherit;
    margin: 0 0 0.9rem;
}

.reserveer-promo-tekst > :last-child {
    margin-bottom: 0;
}

.reserveer-promo-tekst ul,
.reserveer-promo-tekst ol {
    padding-left: 1.25rem;
}

.reserveer-promo-tekst a:not(.btn) {
    color: var(--primair);
    text-decoration: underline;
}

/* Accommodatiekaarten op mobiel: tekst en knoppen bleven buiten de kaart
   hangen. Knoppen mogen nu onder elkaar, lange woorden breken af en de
   kaart zelf neemt meer van de schermbreedte. */
.accom-detail > *,
.accom-detail-content,
.accom-kenmerk {
    min-width: 0;
}

.accom-detail-title,
.accom-detail-desc,
.accom-kenmerk span {
    overflow-wrap: break-word;
    hyphens: auto;
}

.accom-detail-actions {
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    body:not(.home) .accom-lijst {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .accom-detail {
        gap: 1.5rem;
    }

    .accom-detail-content,
    .accom-detail--reverse .accom-detail-content {
        padding: 0 1.25rem 1.5rem !important;
    }

    .accom-detail-title {
        font-size: 1.35rem;
    }
}

@media (max-width: 480px) {
    .accom-detail-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Arrangementen: melding als alles op uit staat */
.arr-leeg {
    font-size: 1.20rem;
    line-height: 1.7;
    color: var(--hout-donker);
    text-align: center;
    margin: 0 auto;
    max-width: 640px;
}