/* ============================================
   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;
    color: var(--salie);
    font-weight: 700;
}

.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;
    display: flex;
    flex-direction: column;
}

.accom-card .accom-img {
    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: 140px;
    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,80 C200,95 400,60 700,45 C1000,30 1200,40 1440,55 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;
}