:root {
    --kleur-primair: #1a5c38;
    --kleur-primair-donker: #12432a;
    --kleur-accent: #f2a900;
    --kleur-tekst: #1a1a1a;
    --kleur-rand: #ddd;
    --kleur-achtergrond: #f7f7f5;
    --kleur-bezet: #f0c4c0;
    --kleur-in-afwachting: #fde6b8;
    --kleur-beschikbaar: #e4f2e9;
    --kleur-geselecteerd: var(--kleur-primair);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--kleur-tekst);
    background: var(--kleur-achtergrond);
    line-height: 1.5;
}

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero {
    background: var(--kleur-primair);
    color: #fff;
    padding: 0 0 28px;
}

.hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
    flex-shrink: 0;
}

.logo-badge {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: block;
}
.logo-badge img {
    width: 100%;
    height: 100%;
    display: block;
}

.logo-tekst {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.logo-naam {
    font-family: 'Oswald', -apple-system, sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.3px;
}
.logo-tagline {
    font-size: 0.68rem;
    color: #cfe3d6;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-top: 2px;
}

.hoofdmenu {
    display: flex;
    align-items: center;
    gap: 22px;
}
.hoofdmenu a {
    color: #fff;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
}
.hoofdmenu a:hover { color: var(--kleur-accent); }
.hoofdmenu a.actief { color: var(--kleur-accent); }
.hoofdmenu .knop-boek-nu {
    background: var(--kleur-accent);
    color: var(--kleur-primair-donker);
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 6px;
}
.hoofdmenu .knop-boek-nu:hover {
    background: #ffcf5c;
    color: var(--kleur-primair-donker);
}

/* Hamburger-knop: alleen zichtbaar op kleine schermen (zie media query
   hieronder), waar hij het uitklapbare .menu-mobiel-paneel bedient met de
   extra paginalinks (Tarieven / De trailer / Klantfoto's) die daar geen
   losse plek meer hebben naast Contact en Boek nu. */
.menu-hamburger {
    display: none;
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.menu-hamburger:hover { background: rgba(255, 255, 255, 0.22); }

/* Uitklapbaar mobiel menu-paneel onder de header-balk. Let op: de
   [hidden]-regel hieronder is nodig omdat "display: flex" anders wint van
   de standaard [hidden] { display: none } van de browser (gelijke
   CSS-specificiteit, maar deze staat later in het stijlblad) — zonder deze
   regel zou het paneel altijd zichtbaar blijven, ook als het dicht hoort. */
.menu-mobiel {
    display: flex;
    flex-direction: column;
    padding: 4px 0 14px;
}
.menu-mobiel[hidden] { display: none; }
.menu-mobiel a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 10px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.menu-mobiel a.actief { color: var(--kleur-accent); }

@media (max-width: 560px) {
    .hero-top {
        padding-left: 28px;
        padding-right: 26px;
        gap: 8px;
    }
    .hoofdmenu a:not(.knop-boek-nu):not(.knop-contact) { display: none; }
    .hoofdmenu { gap: 6px; }
    .menu-hamburger { display: inline-flex; }
    .knop-contact {
        border: 1.5px solid rgba(255, 255, 255, 0.55);
        border-radius: 6px;
        padding: 7px 10px !important;
        font-size: 0.76rem !important;
        white-space: nowrap;
    }
    .hoofdmenu .knop-boek-nu {
        padding: 7px 12px;
        font-size: 0.76rem;
        white-space: nowrap;
    }
    .logo-tagline { display: none; }
    .logo-naam { font-size: 1.05rem; }
    .logo-badge { width: 40px; height: 40px; }
    .logo { gap: 8px; }
    .hero-sub {
        padding-left: 28px;
        padding-right: 26px;
    }
    .menu-mobiel {
        padding-left: 28px;
        padding-right: 26px;
    }
}

@media (max-width: 340px) {
    .hero-top {
        padding-left: 18px;
        padding-right: 16px;
        gap: 6px;
    }
    .hero-sub {
        padding-left: 18px;
        padding-right: 16px;
    }
    .hoofdmenu { gap: 4px; }
    .knop-contact {
        padding: 6px 8px !important;
        font-size: 0.68rem !important;
    }
    .hoofdmenu .knop-boek-nu {
        padding: 6px 10px;
        font-size: 0.68rem;
    }
    .logo-naam { font-size: 0.92rem; }
    .logo-badge { width: 34px; height: 34px; }
    .logo { gap: 6px; }
}

.subtitel { margin: 0; opacity: 0.9; }

main.container { padding-top: 40px; padding-bottom: 60px; }

.kaart {
    background: #fff;
    border: 1px solid var(--kleur-rand);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 24px;
}

.kaart h2 { margin-top: 0; }

.tarieven-tabel {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}
.tarieven-tabel td {
    padding: 10px 4px;
    border-bottom: 1px solid var(--kleur-rand);
}
.tarieven-tabel .prijs {
    text-align: right;
    font-weight: 600;
}

.specificaties-tabel { width: 100%; border-collapse: collapse; }
.specificaties-tabel td { padding: 10px 4px; border-bottom: 1px solid var(--kleur-rand); vertical-align: top; }
.specificaties-tabel tr:last-child td { border-bottom: none; }
.specificaties-tabel .specificatie-label { color: #666; width: 45%; padding-right: 12px; }
.specificatie-noot { font-size: 0.85rem; color: #666; margin-top: 16px; }
.specificatie-noot a { color: var(--kleur-primair); }

.specificaties-subkop { margin: 20px 0 10px; font-size: 1rem; }
.voorzieningen-lijst { margin: 0; padding-left: 20px; }
.voorzieningen-lijst li { margin-bottom: 6px; line-height: 1.45; }

.fotos-leeg { color: #666; }

.foto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.foto-grid-item {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--kleur-rand);
}
.foto-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.klantfoto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.klantfoto-item {
    margin: 0;
    border: 1px solid var(--kleur-rand);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.klantfoto-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.klantfoto-item figcaption {
    padding: 10px 12px;
    font-size: 0.85rem;
    color: #444;
}

/* Knop rond de grid-thumbnail: onzichtbaar als knop, alleen om de foto
   klikbaar/toetsenbord-bedienbaar te maken voor de lightbox hieronder. */
.klantfoto-open {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}

/* Lightbox: toont de klantfoto op groot formaat over de hele pagina heen.
   Let op: de [hidden]-regel hieronder is nodig omdat "display: flex" anders
   wint van de standaard [hidden] { display: none } van de browser (gelijke
   CSS-specificiteit, maar deze staat later in het stijlblad) — zonder deze
   regel zou de lightbox altijd zichtbaar blijven, ook als hij dicht hoort. */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 100;
}
.lightbox[hidden] { display: none; }
.lightbox img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 6px;
    display: block;
    /* Zonder min-width: 0 kan een flex-item nooit kleiner worden dan de
       eigen (grote) natuurlijke breedte van de foto, waardoor max-width:
       100% genegeerd wordt en de foto over de rand van het scherm heen
       kan steken — vooral zichtbaar op smalle (mobiele) schermen. */
    min-width: 0;
}
.lightbox-tekst {
    color: #fff;
    margin: 14px 0 0;
    text-align: center;
    max-width: 640px;
}
.lightbox-sluiten {
    position: absolute;
    top: 18px;
    right: 22px;
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.lightbox-sluiten:hover { background: rgba(255, 255, 255, 0.22); }

/* Vorige/volgende-knoppen in de lightbox, links en rechts verticaal
   gecentreerd. Op mobiel kan je in plaats daarvan (of ernaast) ook swipen. */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-vorige { left: 14px; }
.lightbox-volgende { right: 14px; }
@media (max-width: 560px) {
    .lightbox-nav { width: 38px; height: 38px; font-size: 1.1rem; }
    .lightbox-vorige { left: 6px; }
    .lightbox-volgende { right: 6px; }
}

.borg-melding {
    background: #fff7e6;
    border: 1px solid #f2d38a;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 0.92rem;
}

.veld-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
@media (max-width: 560px) {
    .veld-grid { grid-template-columns: 1fr; }
}

label { display: flex; flex-direction: column; font-size: 0.9rem; gap: 4px; font-weight: 500; }

input, textarea, select {
    font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--kleur-rand);
    border-radius: 6px;
    width: 100%;
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--kleur-primair);
    outline-offset: 1px;
}

.opmerking-label { margin-bottom: 16px; }

/* Honeypot-veld: onzichtbaar en onbereikbaar voor mensen, bots vullen
   verborgen velden vaak toch in. */
.niet-invullen {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cf-turnstile { margin-bottom: 16px; }

.knop-primair, .knop-secundair {
    font: inherit;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}
.knop-primair {
    background: var(--kleur-primair);
    color: #fff;
}
.knop-primair:hover { background: var(--kleur-primair-donker); }
.knop-primair:disabled { background: #aaa; cursor: not-allowed; }

.knop-secundair {
    background: #fff;
    color: var(--kleur-primair);
    border: 1px solid var(--kleur-primair);
}

.melding {
    padding: 12px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 0.92rem;
}
.melding.fout { background: #fdecea; border: 1px solid #f5b7b1; color: #a1362b; }
.melding.succes { background: #e9f7ef; border: 1px solid #a9dfbf; color: #1e7e42; }

.tarief-keuze {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
@media (max-width: 560px) {
    .tarief-keuze { grid-template-columns: 1fr; }
}
.tarief-optie {
    border: 2px solid var(--kleur-rand);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    display: block;
}
.tarief-optie input { display: none; }
.tarief-optie .naam { font-weight: 600; display: block; }
.tarief-optie .prijs { color: var(--kleur-primair); font-weight: 700; }
.tarief-optie .omschrijving { font-size: 0.82rem; color: #666; display: block; margin-top: 2px; }
.tarief-optie.actief {
    border-color: var(--kleur-primair);
    background: var(--kleur-beschikbaar);
}

.flexibel-dagen-keuze {
    display: block;
    margin-top: 10px;
}
.flexibel-dagen-keuze label {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--kleur-tekst);
}
.flexibel-dagen-keuze select {
    width: auto;
    padding: 6px 10px;
    cursor: pointer;
}

.kalender-blok { margin-top: 8px; }
.kalender-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 600;
}
.kalender-header button {
    background: none;
    border: 1px solid var(--kleur-rand);
    border-radius: 6px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 1rem;
}
.kalender-weekdagen, .kalender-dagen {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}
.kalender-weekdagen span { font-size: 0.78rem; color: #888; padding: 4px 0; }

.kalender-dagen .leeg { visibility: hidden; }

.kalender-dagen button {
    aspect-ratio: 1;
    border: 1px solid var(--kleur-rand);
    background: var(--kleur-beschikbaar);
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
}
.kalender-dagen button.bezet {
    background: var(--kleur-bezet);
    color: #99433c;
    cursor: not-allowed;
    border-color: transparent;
}
.kalender-dagen button.in-afwachting {
    background: var(--kleur-in-afwachting);
    color: #8a6300;
    cursor: not-allowed;
    border-color: transparent;
}
.kalender-dagen button.buiten-bereik {
    background: #f0f0f0;
    color: #bbb;
    cursor: not-allowed;
    border-color: transparent;
}
.kalender-dagen button.geselecteerd,
.kalender-dagen button.in-bereik {
    background: var(--kleur-geselecteerd);
    color: #fff;
    border-color: var(--kleur-geselecteerd);
}

.kalender-legenda {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #666;
}
.stip {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.stip.beschikbaar { background: var(--kleur-beschikbaar); border: 1px solid var(--kleur-rand); }
.stip.geselecteerd { background: var(--kleur-geselecteerd); }
.stip.in-afwachting { background: var(--kleur-in-afwachting); }
.stip.bezet { background: var(--kleur-bezet); }

.prijs-overzicht {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--kleur-rand);
}
.prijs-bedrag { font-size: 1.3rem; font-weight: 700; color: var(--kleur-primair); }

.voettekst {
    padding: 24px 0;
    text-align: center;
    color: #666;
    font-size: 0.85rem;
}
.voettekst a {
    color: #666;
    text-decoration: underline;
}
.voettekst a:hover { color: var(--kleur-primair); }