:root {
    color-scheme: light;
    --site-bg: #f4f2ec;
    --site-panel: #ffffff;
    --site-panel-raised: #e9eee9;
    --site-border: #d8ddd6;
    --site-text: #26332d;
    --site-muted: #5e6a62;
    --site-accent: #b28b58;
}

html {
    background: var(--site-bg);
}

body {
    background: var(--site-bg) !important;
    color: var(--site-text) !important;
    font-family: 'Poppins', Arial, sans-serif;
    line-height: 1.6;
}

body h1,
body h2,
body h3 {
    color: var(--site-text) !important;
}

body p,
body li,
body label {
    color: var(--site-muted);
}

header {
    background: #000000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
}

.logo-link {
    height: 5.5rem !important;
    left: 0 !important;
    width: 16.5rem !important;
    background: transparent !important;
    overflow: visible !important;
}

.logo {
    width: 16.5rem !important;
    height: 5.5rem !important;
    object-fit: fill !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.navigatie a,
.navigatie ul a,
body > a {
    color: #f5f6f2;
    transition: color 0.2s ease;
}

.navigatie a:hover,
.footer a:hover {
    color: var(--site-accent) !important;
}

.navigatie a {
    color: #f5f6f2 !important;
}

@media (min-width: 1101px) {
    .navigatie {
        padding-left: 17rem !important;
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .logo-link,
    .logo {
        width: 13rem !important;
    }

    .navigatie {
        padding-left: 14rem !important;
    }
}

.line1 {
    background-color: var(--site-border) !important;
}

.menu-knop {
    background: #34483c !important;
    box-shadow: none !important;
}

.header-actions .button1,
.header-actions .button-offerte,
.header-actions .button-samenstellen,
.button2,
.held a,
.actie a,
.volgende-knop,
.contact-formulier button,
.cta-button {
    background: #34483c !important;
    border: 1px solid #63766a !important;
    color: #f6f6f3 !important;
    box-shadow: none !important;
}

.header-actions .button-offerte,
.volgende-knop,
.contact-formulier button,
.cta-button {
    background: #b28b58 !important;
    border-color: #b28b58 !important;
    color: #17231c !important;
}

.header-actions a:hover,
.button2:hover,
.held a:hover,
.actie a:hover,
.contact-formulier button:hover,
.cta-button:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.footer {
    background: #080a09 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--site-muted) !important;
}

.footer-heading,
.footer-title {
    color: #f1f3ee !important;
}

.footer a,
.footer p,
.footer-copy {
    color: var(--site-muted) !important;
}

.logo-footer {
    width: 12rem !important;
    height: 4rem !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.tekst1,
.tekst2,
.tekst3,
.tekst4,
.tekst,
.kaart,
.werkwijze,
.stappen div,
.product,
.popup-inhoud,
.contact-gegevens,
.contact-formulier,
.info-box,
.offerte-formulier,
.prijs-kaart,
.afstapplan div,
.visual-panel,
.keuze-panel,
.keuze,
.eindkaart,
.galerij-kaart {
    background-color: var(--site-panel) !important;
    border-color: var(--site-border) !important;
    color: var(--site-text);
    box-shadow: 0 8px 24px rgba(24, 37, 29, 0.09) !important;
}

.tekst1,
.tekst2,
.tekst3,
.tekst4,
.tekst,
.kaart,
.werkwijze,
.product,
.contact-gegevens,
.contact-formulier,
.info-box,
.offerte-formulier,
.prijs-kaart,
.visual-panel,
.keuze-panel {
    border-radius: 12px;
}

.header-actions .button1,
.header-actions .button-offerte,
.header-actions .button-samenstellen,
.button2,
.held a,
.actie a,
.volgende-knop,
.contact-formulier button,
.cta-button {
    border-radius: 8px !important;
    font-weight: 600;
}

.product:hover,
.galerij-kaart:hover {
    transform: translateY(-3px) !important;
}

.cta-inspiratie,
.cta-content,
.galerij-intro,
.actie,
.kopstuk,
.samensteller,
.informatie,
.formulier-section {
    background-color: var(--site-bg) !important;
    color: var(--site-text) !important;
}

.tekst1 h2,
.tekst2 h2,
.tekst3 h2,
.tekst4 h2,
.tekst h2,
.kaart h2,
.werkwijze h2,
.product h2,
.contact-gegevens h2,
.contact-formulier h2,
.info-box h2,
.form-header h2,
.prijs-top h2,
.stap h2,
.keuze strong,
.eindkaart strong {
    color: var(--site-text) !important;
}

.tekst1 p,
.tekst2 li,
.tekst3 p,
.tekst4 p,
.tekst p,
.kaart p,
.werkwijze p,
.product p,
.contact-gegevens p,
.contact-regel span,
.info-box p,
.form-header p,
.prijs-top p,
.stap p,
.keuze span,
.eindkaart p {
    color: var(--site-muted) !important;
}

.offerte-formulier input,
.offerte-formulier select,
.offerte-formulier textarea,
.contact-formulier input,
.contact-formulier select,
.contact-formulier textarea,
.checkbox-grid label {
    background: #ffffff !important;
    border-color: var(--site-border) !important;
    color: var(--site-text) !important;
}

.banner::after,
.held::before {
    opacity: 1;
}

.banner::after {
    background: linear-gradient(110deg, rgba(23, 76, 52, 0.52), rgba(23, 76, 52, 0.12) 52%, rgba(189, 156, 112, 0.22)) !important;
    mix-blend-mode: normal !important;
}

.banner img,
.banner-beeld {
    filter: saturate(1.28) contrast(1.05);
}

.banner-text,
.banner-text h1,
.banner-tekst,
.banner-tekst h1,
.kopstuk-tekst h1,
.kopstuk-tekst p,
.held h1,
.held p {
    color: #ffffff !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.38);
}

.banner-subtext {
    color: var(--site-text) !important;
}

.galerij-kaart img {
    filter: saturate(1.16) contrast(1.04);
}

.galerij-kaart::before,
section.galerij .galerij-kaart::after {
    background: linear-gradient(180deg, transparent 35%, rgba(20, 65, 45, 0.82)) !important;
}

.galerij {
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: 220px;
}

.galerij-kaart {
    min-height: 220px !important;
    aspect-ratio: auto;
    border-radius: 10px !important;
    overflow: hidden;
}

.galerij-kaart img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    object-fit: cover;
}

.galerij-kaart.breed,
.galerij-kaart.hoog {
    min-height: 0 !important;
}

.galerij-kaart.breed {
    grid-column: span 2;
}

.galerij-kaart.hoog {
    grid-row: span 2;
}

@media (max-width: 900px) {
    .logo-link {
        left: 0 !important;
    }

    .logo {
        width: 16.5rem !important;
        height: 5.5rem !important;
    }

    .navigatie {
        background: #000000 !important;
        border: 1px solid var(--site-border);
    }

    .navigatie a {
        color: #f5f6f2 !important;
    }
}

@media (max-width: 640px) {
    .logo-link,
    .logo {
        width: 14.5rem !important;
    }

    .galerij-kaart.breed {
        grid-column: span 1;
    }

    .galerij-kaart.hoog {
        grid-row: span 1;
    }
}