@charset "UTF-8";

/* ==========================================================================
   Brouwerij De Logt — stylesheet
   Inhoud: 1. variabelen  2. basis  3. header & menu  4. knoppen
           5. bouwstenen (secties, split, kaarten)  6. startpagina
           7. bierpagina's  8. fietsterras  9. contact  10. footer
           11. lightbox  12. kleine schermen
   ========================================================================== */

/* 1. VARIABELEN ----------------------------------------------------------- */
:root {
    /* Kleuren: goud uit het logo, zand en dennengroen uit Bosland */
    --gold: #c5a028;
    --gold-tekst: #775c0c;      /* goud dat leesbaar blijft op een lichte achtergrond */
    --gold-licht: #e3c766;      /* goud op een donkere achtergrond */
    --gold-waas: rgba(197, 160, 40, 0.14);
    --cream: #fbf9f4;
    --cream-bg: #f5f2eb;
    --zand: #ebe5d6;
    --black: #0f0f11;
    --charcoal: #222226;
    --gray: #5d5a52;
    --den: #1f2c23;
    --den-diep: #17211a;
    --nacht: #121212;
    --white: #ffffff;
    --lijn: rgba(15, 15, 17, 0.12);
    --lijn-licht: rgba(255, 255, 255, 0.16);

    /* Lettertypes (ongewijzigd) */
    --font-heading: 'Rockwell', Georgia, serif;
    --font-body: 'Baskerville', 'Times New Roman', serif;
    --font-ui: 'Avenir', 'Helvetica Neue', sans-serif;

    --breedte: 1200px;
    --radius: 10px;
    --header-hoogte: 76px;
    --schaduw: 0 18px 40px rgba(23, 33, 26, 0.12);
}

/* Accentkleur per bier (zegel, kader en details op de bierpagina).
   --accent: vlakkleur, --accent-op: tekst op dat vlak,
   --accent-lijn: kaders en strepen, --accent-tekst: gekleurde tekst op licht. */
:root {
    --accent: var(--gold);
    --accent-op: var(--black);
    --accent-lijn: var(--gold);
    --accent-tekst: var(--gold-tekst);
}

.pagina-naya {            /* goud op zwart, zoals het etiket */
    --accent: #1a1814;
    --accent-op: #f2c230;
    --accent-lijn: #e0ae1a;
    --accent-tekst: #7a5a00;
}

.pagina-torentrapper {    /* het hemelsblauw van het etiket */
    --accent: #1f73ad;
    --accent-op: #ffffff;
    --accent-lijn: #2f9be0;
    --accent-tekst: #1a628f;
}

.pagina-beauvillard {     /* diepbruin, zoals het bier */
    --accent: #5a2a1b;
    --accent-op: #f3dfc0;
    --accent-lijn: #8a4b2f;
    --accent-tekst: #6b2f1a;
}

.pagina-small-batch {     /* dennengroen van het terras */
    --accent: #1f2c23;
    --accent-op: #e3c766;
    --accent-lijn: #3d5a45;
    --accent-tekst: #2c4633;
}

/* 2. BASIS ---------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-hoogte) + 50px);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--black);
    background-color: var(--cream-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.35rem; }

p { text-wrap: pretty; }

a {
    color: var(--gold-tekst);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color 0.2s ease;
}

a:hover { color: var(--black); }

::selection {
    background-color: var(--gold);
    color: var(--black);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
}

.container {
    width: 100%;
    max-width: var(--breedte);
    margin: 0 auto;
    padding: 0 24px;
}

.text-center { text-align: center; }
.text-right { text-align: right; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 2000;
    background: var(--black);
    color: var(--white);
    padding: 10px 16px;
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: 14px;
}

.skip-link:focus { top: 12px; color: var(--white); }

/* 3. HEADER & MENU -------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--cream);
    border-bottom: 1px solid rgba(197, 160, 40, 0.45);
}

/* Opstijgende bierbubbels in de menubalk */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(197, 160, 40, 0.35) 2px, transparent 3px),
        radial-gradient(circle, rgba(230, 202, 101, 0.3) 1.5px, transparent 2.5px),
        radial-gradient(circle, rgba(197, 160, 40, 0.25) 3px, transparent 4px),
        radial-gradient(circle, rgba(255, 255, 255, 0.6) 1px, transparent 2px);
    background-size: 140px 140px, 90px 90px, 200px 200px, 60px 60px;
    background-position: 10px 100px, 40px 80px, 70px 120px, 20px 50px;
    animation: riseBubbles 8s linear infinite;
}

@keyframes riseBubbles {
    0% { background-position: 10px 100px, 40px 80px, 70px 120px, 20px 50px; }
    100% { background-position: 10px -40px, 40px -60px, 70px -80px, 20px -30px; }
}

.header-inner {
    position: relative;
    z-index: 1;
    max-width: var(--breedte);
    height: var(--header-hoogte);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 34px;
}

.site-nav { display: contents; }

.nav-list {
    display: flex;
    align-items: center;
    gap: 34px;
    list-style: none;
}

.nav-list--links { grid-column: 1; grid-row: 1; justify-content: flex-end; }
.nav-list--rechts { grid-column: 3; grid-row: 1; justify-content: flex-start; }

.nav-list > li > a,
.dropdown-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 2px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--charcoal);
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.nav-list > li > a::after,
.dropdown-toggle::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.nav-list > li > a:hover,
.dropdown-toggle:hover,
.nav-list > li > a[aria-current="page"],
.has-dropdown.is-current > .dropdown-toggle {
    color: var(--gold-tekst);
}

.nav-list > li > a:hover::after,
.dropdown-toggle:hover::after,
.nav-list > li > a[aria-current="page"]::after,
.has-dropdown.is-current > .dropdown-toggle::after {
    transform: scaleX(1);
}

/* Logo: hangt als een schildje onder de menubalk */
.brand {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    position: relative;
    z-index: 2;
    display: block;
    padding: 6px 10px 8px;
    background: var(--cream);
    border: 1px solid rgba(197, 160, 40, 0.45);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 10px 22px rgba(23, 33, 26, 0.1);
}

.logo {
    height: 108px;
    width: auto;
    transition: transform 0.3s ease;
}

.brand:hover .logo { transform: scale(1.04); }

.is-gescrold .logo { height: 86px; }

.menu-toggle { display: none; }

/* Submenu */
.has-dropdown { position: relative; }

.dropdown-toggle svg { transition: transform 0.2s ease; }

.dropdown {
    position: absolute;
    top: 100%;
    left: -18px;
    min-width: 230px;
    padding: 8px;
    list-style: none;
    background: var(--cream);
    border: 1px solid rgba(197, 160, 40, 0.45);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* onzichtbare brug zodat het menu open blijft tussen knop en lijst */
.dropdown::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-open .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(12px);
}

.has-dropdown:hover .dropdown-toggle svg,
.has-dropdown.is-open .dropdown-toggle svg { transform: rotate(180deg); }

.dropdown a {
    display: block;
    padding: 10px 14px;
    border-radius: 6px;
    color: var(--charcoal);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.dropdown a:hover,
.dropdown a[aria-current="page"] {
    background: var(--gold-waas);
    color: var(--gold-tekst);
}

/* 4. KNOPPEN -------------------------------------------------------------- */
.btn,
.feature-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--gold);
    color: var(--black);
    border: 2px solid var(--gold);
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn:hover,
.feature-btn:hover {
    background: var(--black);
    border-color: var(--black);
    color: var(--gold-licht);
    transform: translateY(-2px);
}

.btn--lijn {
    background: transparent;
    color: var(--black);
    border-color: var(--black);
}

.btn--lijn:hover { background: var(--black); color: var(--cream); }

.op-donker .btn:hover {
    background: var(--cream);
    border-color: var(--cream);
    color: var(--black);
}

.op-donker .btn--lijn {
    color: var(--cream);
    border-color: rgba(255, 255, 255, 0.55);
}

.op-donker .btn--lijn:hover {
    background: var(--cream);
    border-color: var(--cream);
    color: var(--black);
}

.knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

/* Glans die over een knop schuift bij hover */
.btn,
.feature-btn {
    position: relative;
    overflow: hidden;
}

.btn::after,
.feature-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-18deg);
    transition: left 0.65s ease;
    pointer-events: none;
}

.btn:hover::after,
.feature-btn:hover::after,
.bier-kaart a:hover .btn::after { left: 130%; }

/* Verschijnen bij scrollen (klassen worden door script.js gezet) */
.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--vertraging, 0ms);
}

/* kaarten verschijnen alleen zacht, zonder te schuiven */
.js .reveal--zacht {
    transform: none;
    transition: opacity 0.9s ease;
}

.js .reveal--links,
.js .reveal--rechts { transform: translateY(26px); }

.js .reveal.is-zichtbaar {
    opacity: 1;
    transform: none;
}

/* Menubalk wordt compacter zodra je scrolt */
.site-header { transition: box-shadow 0.3s ease; }
.is-gescrold .site-header { box-shadow: 0 8px 26px rgba(23, 33, 26, 0.12); }
.logo { transition: height 0.3s ease, transform 0.3s ease; }

/* 5. BOUWSTENEN ----------------------------------------------------------- */
.section { padding: clamp(60px, 9vw, 110px) 0; }
.section--krap { padding: clamp(44px, 6vw, 70px) 0; }
.section--zand { background: var(--zand); }
.section--wit { background: var(--cream); }

.op-donker { color: #e9e6dc; }
.op-donker h1,
.op-donker h2,
.op-donker h3 { color: var(--cream); }
.op-donker a:not(.btn) { color: var(--gold-licht); }
.op-donker a:not(.btn):hover { color: var(--white); }

.section--nacht { background: var(--nacht); }
.section--den { background: var(--den); }

.sectiekop {
    max-width: 46rem;
    margin-bottom: clamp(32px, 5vw, 56px);
}

.sectiekop h2 + p { margin-top: 14px; }

.lead {
    font-size: 1.3rem;
    line-height: 1.55;
    color: var(--charcoal);
}

.prose { max-width: 44rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.8em; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }

/* Paginakop van de vervolgpagina's */
.paginakop {
    padding: clamp(86px, 10vw, 130px) 0 clamp(30px, 5vw, 56px);
}

.paginakop h1 { max-width: 20ch; }

.paginakop .lead {
    max-width: 44rem;
    margin-top: 20px;
}

/* Beeld naast tekst */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 84px);
    align-items: center;
}

.split + .split { margin-top: clamp(56px, 8vw, 104px); }

.split--omgekeerd .split__beeld { order: 2; }

.split__beeld {
    position: relative;
    min-width: 0;
}

.split > * { min-width: 0; }

.split__beeld > img,
.foto {
    width: 100%;
    border-radius: var(--radius);
    object-fit: cover;
}

.split__beeld > img { aspect-ratio: 4 / 3; }

.split--boven { align-items: start; }
.split__beeld > img.foto--staand { aspect-ratio: 3 / 4; }
.split__beeld > img.foto--breed { aspect-ratio: 3 / 2; }

.split__tekst > * + * { margin-top: 16px; }
.split__tekst .btn { margin-top: 12px; }

/* Rond alpacaportret dat over de terrasfoto hangt */
.split__beeld > img.alpaca-rond {
    position: absolute;
    right: -22px;
    bottom: -34px;
    width: clamp(110px, 15vw, 168px);
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 22%;
    border: 6px solid var(--cream-bg);
    box-shadow: var(--schaduw);
}

/* Drie foto's op een rij */
.foto-rij {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.foto-rij img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
}

.foto-rij + .foto-rij { margin-top: 20px; }

/* 6. STARTPAGINA ---------------------------------------------------------- */
.hero {
    background: linear-gradient(180deg, var(--cream-bg) 0%, var(--zand) 100%);
}

.hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
    padding-top: clamp(84px, 9vw, 120px);
    padding-bottom: clamp(48px, 6vw, 76px);
}

.hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.3rem); }

.hero__tekst {
    margin-top: 18px;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--charcoal);
}

/* Foto met gouden kader erachter, zoals op de bierpagina's */
.hero__foto {
    position: relative;
    margin: 0 16px 16px 0;
}

.hero__foto::before {
    content: '';
    position: absolute;
    inset: 16px -16px -16px 16px;
    border: 2px solid var(--gold);
    border-radius: 16px;
}

.hero__foto img {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 58% 50%;
    border-radius: 16px;
    box-shadow: 0 20px 44px rgba(23, 33, 26, 0.16);
    animation: fotoIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fotoIn {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

/* Praktische feiten onder de hero */
.feiten {
    background: var(--cream);
    border-bottom: 1px solid var(--lijn);
}

.feiten__lijst {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
}

.feiten__lijst li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 28px 28px 28px 0;
}

.feiten__lijst li + li {
    padding-left: 28px;
    border-left: 1px solid var(--lijn);
}

.feiten__lijst svg {
    flex-shrink: 0;
    margin-top: 4px;
    color: var(--gold-tekst);
}

.feiten__lijst strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.25;
}

.feiten__lijst span {
    display: block;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--gray);
}

/* Bierkaarten: drie bovenaan, twee bredere eronder */
.bier-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
    list-style: none;
}

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

.bier-kaart a {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--cream);
    border: 1px solid rgba(197, 160, 40, 0.35);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.3s ease;
}

.bier-kaart a:hover { border-color: var(--gold); }

.bier-kaart__beeld {
    overflow: hidden;
    background: #000;
}

.bier-kaart img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 50% 62%;
    transition: transform 0.45s ease;
}

.bier-kaart a:hover img { transform: scale(1.04); }

/* staande foto: glas en fles in beeld houden */
.bier-kaart:not(.bier-kaart--breed) img[src*="beauvillard"] { object-position: 50% 68%; }

/* Brede kaarten: foto links, tekst rechts (staande foto's blijven heel) */
.bier-kaart--breed a { flex-direction: row; }

.bier-kaart--breed .bier-kaart__beeld {
    flex: 0 0 44%;
    min-height: 320px;
}

.bier-kaart--breed img {
    height: 100%;
    aspect-ratio: auto;
    object-position: 50% 50%;
}

.bier-kaart--breed .bier-kaart__tekst { justify-content: center; }
.bier-grid .bier-kaart--breed .btn { margin-top: 0; }

.bier-kaart__tekst {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
    padding: 24px 26px 28px;
}

.bier-kaart__kop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    width: 100%;
}

.bier-kaart h3 { font-size: 1.6rem; }

.bier-kaart__kop b {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--gold-tekst);
    white-space: nowrap;
}

.bier-soort {
    margin-top: 2px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gray);
}

.bier-kaart__tekst > p:not(.bier-soort) {
    margin: 12px 0 22px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--charcoal);
}

.bier-kaart .btn {
    margin-top: auto;
    padding: 11px 20px;
    font-size: 12.5px;
}

.bier-kaart a:hover .btn {
    background: var(--black);
    border-color: var(--black);
    color: var(--gold-licht);
}

/* Veelgestelde vragen */
.faq { max-width: 50rem; }

.faq details { border-top: 1px solid var(--lijn); }
.faq details:last-child { border-bottom: 1px solid var(--lijn); }

.faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
    content: '+';
    flex-shrink: 0;
    font-family: var(--font-ui);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--gold-tekst);
    transition: transform 0.2s ease;
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq details p {
    max-width: 44rem;
    padding: 0 0 22px;
    color: var(--charcoal);
}

/* Afsluitende oproep */
.oproep {
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Opstijgende bubbels, zoals in de menubalk */
.oproep::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(227, 199, 102, 0.28) 2px, transparent 3px),
        radial-gradient(circle, rgba(227, 199, 102, 0.2) 1.5px, transparent 2.5px),
        radial-gradient(circle, rgba(227, 199, 102, 0.16) 3px, transparent 4px);
    background-size: 140px 140px, 90px 90px, 200px 200px;
    animation: bubbelsOmhoog 14s linear infinite;
}

@keyframes bubbelsOmhoog {
    from { background-position: 10px 0, 40px 0, 70px 0; }
    to { background-position: 10px -1260px, 40px -1260px, 70px -1800px; }
}

.oproep .container { position: relative; }
.oproep h2 { color: var(--gold-licht); }

.oproep p {
    max-width: 38rem;
    margin: 16px auto 0;
}

.oproep .knoppen { justify-content: center; }

/* Zachte hover-effecten */
.split__beeld > img:not(.alpaca-rond),
.foto-rij img,
.feature-images img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

.split__beeld > img:not(.alpaca-rond):hover,
.foto-rij img:hover,
.feature-images img:hover {
    transform: scale(1.025);
    box-shadow: var(--schaduw);
}

.split__beeld > img.alpaca-rond { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.split__beeld:hover > img.alpaca-rond { transform: scale(1.1) rotate(-6deg); }

.feiten__lijst svg { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.feiten__lijst li:hover svg { transform: scale(1.2) rotate(-8deg); }

/* Kaarten: bij aanwijzen loopt onderaan een gouden streep vol, zoals een glas */
.bier-kaart a,
.tijdlijn__kaart,
.verkooppunten li,
.steekkaart div {
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.bier-kaart a::after,
.tijdlijn__kaart::after,
.verkooppunten li::after,
.steekkaart div::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--accent-lijn);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.bier-kaart a:hover::after,
.tijdlijn__kaart:hover::after,
.verkooppunten li:hover::after,
.steekkaart div:hover::after { transform: scaleX(1); }

.verkooppunten li:hover,
.steekkaart div:hover,
.tijdlijn__kaart:hover { border-color: var(--accent-lijn); }

.faq summary { transition: color 0.2s ease; }
.faq summary:hover { color: var(--gold-tekst); }
.faq details[open] p { animation: faqOpen 0.35s ease both; }

@keyframes faqOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* 7. BIERPAGINA'S --------------------------------------------------------- */
/* Zandkleurige band bovenaan waar de foto half overheen valt */
.bierpagina {
    background: linear-gradient(var(--zand), var(--zand)) top / 100% 400px no-repeat;
}

.bier-detail {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(36px, 7vw, 96px);
    align-items: start;
    padding-top: clamp(86px, 10vw, 130px);
}

.bier-detail h1 { font-size: clamp(2.8rem, 6.5vw, 4.8rem); }

.bier-detail__kenmerk {
    margin-top: 14px;
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    line-height: 1.3;
    color: var(--accent-tekst);
}

/* Steekkaart: kerngegevens als tegels met icoon */
.steekkaart {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 30px 0 34px;
}

.steekkaart div {
    position: relative;
    padding: 16px 18px 16px 58px;
    background: var(--cream);
    border: 1px solid rgba(197, 160, 40, 0.4);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(23, 33, 26, 0.05);
}

.steekkaart svg {
    position: absolute;
    left: 14px;
    top: 16px;
    width: 32px;
    height: 32px;
    padding: 6px;
    background: color-mix(in srgb, var(--accent-lijn) 16%, transparent);
    border-radius: 8px;
    color: var(--accent-tekst);
}

.steekkaart dt {
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gray);
}

.steekkaart dd {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}

/* Inleiding van het verhaal: gouden streep ervoor */
.bier-detail .lead {
    padding-left: 20px;
    border-left: 4px solid var(--accent-lijn);
    font-family: var(--font-heading);
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--black);
}

/* Eerste letter van het verhaal als sierletter */
.bier-detail .lead + p::first-letter {
    float: left;
    margin: 6px 10px 0 0;
    font-family: var(--font-heading);
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 0.8;
    color: var(--accent-tekst);
}

/* Foto met gouden kader erachter en een zegel met het alcoholpercentage */
.bier-detail__beeld {
    position: sticky;
    top: calc(var(--header-hoogte) + 56px);
    margin: 0 18px 18px 0;
}

.bier-detail__beeld::before {
    content: '';
    position: absolute;
    inset: 18px -18px -18px 18px;
    border: 2px solid var(--accent-lijn);
    border-radius: 16px;
}

.bier-detail__beeld img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 16px;
    background: #000;
    box-shadow: 0 24px 50px rgba(23, 33, 26, 0.22);
}

.bier-zegel {
    position: absolute;
    z-index: 2;
    top: -26px;
    left: -26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 5px var(--cream), 0 0 0 7px var(--accent-lijn), 0 12px 24px rgba(23, 33, 26, 0.25);
    color: var(--accent-op);
    line-height: 1;
    transform: rotate(-9deg);
}

.bier-detail__beeld img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.bier-detail__beeld::before { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.bier-detail__beeld:hover img { transform: translate(-5px, -5px); }
.bier-detail__beeld:hover::before { transform: translate(6px, 6px); }

.bier-zegel { animation: zegelIn 0.9s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

@keyframes zegelIn {
    from { opacity: 0; transform: rotate(-40deg) scale(0.4); }
    to { opacity: 1; transform: rotate(-9deg) scale(1); }
}

.bier-zegel b {
    font-family: var(--font-heading);
    font-size: 1.9rem;
}

.bier-zegel span {
    margin-top: 5px;
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.bier-detail__beeld--vierkant img { aspect-ratio: 1; }

/* "Ontdek ook": vier kaarten op een rij */
.bier-grid--rij { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.bier-grid--rij .bier-kaart { grid-column: auto; }
.bier-grid--rij .bier-kaart__tekst { padding: 18px 20px 20px; }
.bier-grid--rij .bier-kaart h3 { font-size: 1.3rem; }
.bier-grid--rij .bier-kaart__kop b { font-size: 1.1rem; }

/* Het verhaal achter het etiket */
.etiket {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    padding: clamp(28px, 4vw, 48px);
    background: var(--cream);
    border: 1px solid var(--lijn);
    border-left: 6px solid var(--accent-lijn);
    border-radius: 16px;
}

.etiket__beeld {
    position: relative;
    width: clamp(170px, 22vw, 250px);
    margin: 6px 14px 14px 6px;
    transform: rotate(-4deg);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.etiket:hover .etiket__beeld { transform: rotate(0deg) scale(1.04); }

.etiket__beeld::before {
    content: '';
    position: absolute;
    inset: 12px -12px -12px 12px;
    border: 2px solid var(--accent-lijn);
    border-radius: 14px;
}

.etiket__beeld img {
    position: relative;
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(23, 33, 26, 0.22);
}

.etiket__tekst { max-width: 40rem; }
.etiket__tekst h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); color: var(--accent-tekst); }
.etiket__tekst p { margin-top: 12px; }

/* Verkooppunten */
.verkoop h2 { max-width: 24ch; }
.verkoop h2 + p { margin-top: 12px; color: var(--charcoal); }

.verkooppunten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
    list-style: none;
}

.verkooppunten li,
.location-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 22px;
    background: var(--cream);
    border: 1px solid rgba(197, 160, 40, 0.35);
    border-radius: var(--radius);
}

.verkooppunten svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--gold-tekst);
}

.verkooppunten strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.3;
}

.verkooppunten span {
    display: block;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--gray);
}

/* Tijdlijn (brouwerijpagina) */
.tijdlijn {
    position: relative;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 72px;
}

/* de lijn in het midden */
.tijdlijn::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(var(--gold), rgba(197, 160, 40, 0.25));
}

.tijdlijn li {
    position: relative;
    grid-column: 1;
    margin-bottom: -40px;
}

.tijdlijn li:nth-child(even) {
    grid-column: 2;
    margin-top: 90px;
}

.tijdlijn li:last-child { margin-bottom: 0; }

/* het bolletje op de lijn */
.tijdlijn li::before {
    content: '';
    position: absolute;
    top: 30px;
    right: -45px;
    width: 18px;
    height: 18px;
    background: var(--gold);
    border: 4px solid var(--zand);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--gold);
}

.tijdlijn li:nth-child(even)::before { right: auto; left: -45px; }

.tijdlijn__kaart {
    overflow: hidden;
    background: var(--cream);
    border: 1px solid rgba(197, 160, 40, 0.35);
    border-radius: 14px;
    padding: 0 26px 26px;
}

.tijdlijn__kaart img {
    width: calc(100% + 52px);
    max-width: none;
    margin: 0 -26px;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: 50% 60%;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.tijdlijn__kaart:hover img { transform: scale(1.03); }

.tijdlijn__datum {
    display: inline-block;
    margin-top: 22px;
    padding: 5px 12px;
    background: var(--gold);
    border-radius: 6px;
    color: var(--black);
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tijdlijn h3 { margin-top: 12px; font-size: 1.45rem; }
.tijdlijn h3 + p { margin-top: 8px; color: var(--charcoal); }

/* Getekende omgevingskaart */
.kaart-blok {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.kaart-blok__tekst > * + * { margin-top: 16px; }

.afstanden { list-style: none; }

.afstanden li {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--lijn);
}

.afstanden b {
    min-width: 74px;
    font-family: var(--font-heading);
    color: var(--gold-tekst);
}

.kaart svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: var(--schaduw);
}

.kaart .kaart__smal { display: none; }
.kaart__smal .kaart__klein { font-size: 15.5px; }
.kaart__smal .kaart__natuur--groot { font-size: 24px; letter-spacing: 2px; }

.kaart figcaption {
    margin-top: 10px;
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--gray);
}

.kaart__grond { fill: #efe8d6; }
.kaart__bos { fill: #cdd9bd; }
.kaart__boom { fill: #86a078; }
.kaart__zand { fill: #ead7a2; }
.kaart__stip { fill: #c9a94f; }
.kaart__weg { fill: none; stroke: #ffffff; stroke-width: 9; stroke-linecap: round; }
.kaart__weg--klein { stroke-width: 5; }
.kaart__fietsroute { fill: none; stroke: var(--gold-tekst); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 11; animation: fietsroute 1.6s linear infinite; }
.kaart__dorp { fill: #b9ae97; }
.kaart__plaats { font-family: var(--font-heading); font-size: 23px; font-weight: 700; fill: var(--charcoal); }
.kaart__natuur { font-family: var(--font-body); font-size: 19px; font-style: italic; fill: #4d6642; }
.kaart__natuur--groot { font-size: 30px; letter-spacing: 3px; fill: #6d8760; }
.kaart__label { font-family: var(--font-heading); font-size: 20px; font-weight: 700; fill: var(--black); }
.kaart__hoofd { font-family: var(--font-heading); font-size: 21px; font-weight: 700; fill: var(--black); }
.kaart__klein { font-family: var(--font-ui); font-size: 14.5px; font-weight: 600; fill: var(--charcoal); }
.kaart__etiket { fill: var(--cream); stroke: rgba(15, 15, 17, 0.14); }
.kaart__etiket--hoofd { stroke: var(--gold); stroke-width: 2; }
.kaart__ring-vlak { fill: var(--cream); stroke: #86a078; stroke-width: 2; }
.kaart__ring { fill: none; stroke: #6f6a5c; stroke-width: 5; }
.kaart__kapel { fill: var(--cream); stroke: var(--charcoal); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kaart__speld { fill: var(--gold); stroke: var(--black); stroke-width: 2.5; stroke-linejoin: round; }
.kaart__glas { fill: none; stroke: var(--black); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.kaart__puls { fill: var(--gold); opacity: 0.3; transform-box: fill-box; transform-origin: center; animation: kaartPuls 2.4s ease-out infinite; }
.kaart__knoop { fill: #ffffff; stroke: #2e7d4f; stroke-width: 4; }
.kaart__knoop-nr { font-family: var(--font-ui); font-size: 16px; font-weight: 800; fill: #1f5c39; }
.kaart__richting { fill: none; stroke: var(--charcoal); stroke-width: 2.5; stroke-linecap: round; }
.kaart__noord { fill: var(--black); }
.kaart__zuid { fill: #b9ae97; }

@keyframes kaartPuls {
    from { transform: scale(0.5); opacity: 0.45; }
    to { transform: scale(1.5); opacity: 0; }
}

@keyframes fietsroute {
    to { stroke-dashoffset: -26; }
}

/* 8. FIETSTERRAS ---------------------------------------------------------- */
.terras-intro {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(32px, 6vw, 84px);
    align-items: start;
}

.tip {
    margin: 26px 0;
    padding: 18px 22px;
    background: var(--cream);
    border-left: 4px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.praktisch {
    padding: 30px;
    background: var(--den);
    border-radius: var(--radius);
    font-size: 1.02rem;
}

.praktisch h2 { font-size: 1.5rem; }

.praktisch dl { margin-top: 8px; }

.praktisch dl div {
    padding: 16px 0;
    border-bottom: 1px solid var(--lijn-licht);
}

.praktisch dt {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold-licht);
}

.praktisch dd { line-height: 1.5; }
.praktisch .btn { margin-top: 22px; width: 100%; }

/* "Kom nagenieten"-blok */
.feature-banner {
    padding: clamp(28px, 4vw, 48px);
    background: var(--cream);
    border: 1px solid var(--lijn);
    border-radius: 16px;
}

.feature-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(28px, 4vw, 50px);
    align-items: center;
}

.feature-title { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }

.feature-text {
    margin: 18px 0 28px;
    color: var(--charcoal);
}

/* Drie foto's: één grote links, twee kleinere rechts. De rijen en kolommen
   liggen vast en het blok knipt alles af wat erbuiten zou vallen, zodat een
   foto op geen enkel toestel uit het kader kan steken. */
.feature-images {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    height: 400px;
    overflow: hidden;
    border-radius: var(--radius);
}

.image-stacked { display: contents; }

.feature-images img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    object-fit: cover;
    border-radius: var(--radius);
}

.feature-images > img { grid-column: 1; grid-row: 1 / span 2; }
.image-stacked img:first-child { grid-column: 2; grid-row: 1; }
.image-stacked img:last-child { grid-column: 2; grid-row: 2; }

/* Agenda */
.agenda {
    list-style: none;
    max-width: 46rem;
    border-top: 2px solid var(--black);
}

.agenda li {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 22px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--lijn);
}

.agenda__datum {
    font-family: var(--font-heading);
    line-height: 1.05;
    text-align: center;
}

.agenda__datum b {
    display: block;
    font-size: 2.1rem;
}

.agenda__datum span {
    font-family: var(--font-ui);
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--gray);
}

.agenda__titel {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.agenda__tijd {
    font-size: 1rem;
    color: var(--gray);
}

.agenda__locatie {
    font-size: 0.95rem;
    color: var(--gray);
}

.agenda-leeg { color: var(--charcoal); }

/* Agenda op de startpagina: activiteiten naast elkaar */
.agenda-home {
    background: var(--cream-bg);
    border-bottom: 1px solid var(--lijn);
}

.agenda-home__kop {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px 24px;
    margin-bottom: 22px;
}

.agenda-home__kop h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }

.agenda-home__kop a {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.agenda--rij {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    max-width: none;
    border-top: 0;
}

.agenda--rij li {
    grid-template-columns: 78px 1fr;
    gap: 16px;
    padding: 16px 18px 16px 0;
    background: var(--cream);
    border: 1px solid rgba(197, 160, 40, 0.4);
    border-radius: 12px;
    overflow: hidden;
}

.agenda--rij .agenda__datum {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: -16px 0;
    padding: 12px 6px;
    background: var(--gold);
    color: var(--black);
}

.agenda--rij .agenda__datum b { font-size: 1.9rem; }
.agenda--rij .agenda__datum span { color: var(--black); font-size: 11.5px; font-weight: 600; }
.agenda--rij .agenda__titel { font-size: 1.15rem; }

/* Fotogalerij */
.galerij {
    column-count: 3;
    column-gap: 18px;
}

.galerij a {
    display: block;
    margin-bottom: 18px;
    break-inside: avoid;
    overflow: hidden;
    border-radius: var(--radius);
    cursor: zoom-in;
}

.galerij img {
    width: 100%;
    transition: transform 0.4s ease;
}

.galerij a:hover img { transform: scale(1.03); }

.galerij--smal { column-count: 4; }

/* 9. CONTACT -------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(32px, 6vw, 84px);
    align-items: start;
}

.contact-form-box {
    padding: clamp(26px, 4vw, 44px);
    background: var(--cream);
    border: 1px solid rgba(197, 160, 40, 0.35);
    border-radius: 16px;
}

.contact-form-box h2 { font-size: 1.7rem; margin-bottom: 22px; scroll-margin-top: 120px; }

.contact-form-box h2 + .contact-intro { margin: -10px 0 24px; color: var(--charcoal); }

.form-group { margin-bottom: 20px; }

.form-group label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--charcoal);
}

.form-control {
    width: 100%;
    padding: 13px 16px;
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--black);
    background: var(--white);
    border: 1.5px solid rgba(15, 15, 17, 0.25);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--gold-tekst);
    box-shadow: 0 0 0 4px var(--gold-waas);
}

textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

.form-val { position: absolute; left: -9999px; }

.melding {
    margin-bottom: 20px;
    padding: 13px 16px;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.5;
}

.melding--success { background: #e3f1e4; color: #17481f; border: 1px solid #b9dabd; }
.melding--danger { background: #f9e3e1; color: #7a1c14; border: 1px solid #ecc0bb; }

.contact-info > * + * { margin-top: 30px; }
.contact-info h2 { font-size: 1.5rem; margin-bottom: 8px; }
.contact-info address { font-style: normal; }
.contact-info img { border-radius: var(--radius); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

.uren { list-style: none; }

.uren li {
    padding: 12px 0;
    border-bottom: 1px solid var(--lijn);
    line-height: 1.5;
}

.uren strong { display: block; font-family: var(--font-heading); }

/* Privacybeleid */
.tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

.tabel th,
.tabel td {
    padding: 10px 12px 10px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--lijn);
}

.tabel th { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.4px; }

/* 10. FOOTER -------------------------------------------------------------- */
.site-footer {
    background: var(--den-diep);
    color: #c9cdc6;
    border-top: 3px solid var(--gold);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.7;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 48px;
    padding-top: 64px;
    padding-bottom: 48px;
}

.footer-logo {
    width: 92px;
    height: auto;
    margin-bottom: 18px;
}

.footer-merk p { max-width: 20rem; }

.footer-titel {
    margin-bottom: 14px;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--cream);
}

.site-footer ul { list-style: none; }
.site-footer address { font-style: normal; margin-bottom: 12px; }

.site-footer a {
    color: #e9e6dc;
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--gold-licht);
    text-decoration: underline;
}

.footer-socials {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(227, 199, 102, 0.5);
    border-radius: 50%;
    color: var(--gold-licht);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.footer-socials a:hover {
    background: var(--gold);
    color: var(--black);
}

.footer-onder {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 28px;
    padding-top: 22px;
    padding-bottom: 26px;
    border-top: 1px solid var(--lijn-licht);
    font-size: 13.5px;
    color: #a3a89f;
}

.hartje { color: #e25555; }

/* 11. LIGHTBOX ------------------------------------------------------------ */
.lightbox {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    background: rgba(12, 14, 12, 0.94);
}

.lightbox::backdrop { background: rgba(12, 14, 12, 0.94); }

.lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox img {
    max-width: calc(100vw - 120px);
    max-height: calc(100vh - 60px);
    width: auto;
    height: auto;
    border-radius: 6px;
}

.lightbox button {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.lightbox button:hover { background: var(--gold); color: var(--black); }
.lightbox__sluit { top: 16px; right: 16px; }
.lightbox__vorige { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__volgende { right: 12px; top: 50%; transform: translateY(-50%); }

/* 12. KLEINE SCHERMEN ----------------------------------------------------- */
@media (max-width: 1180px) {
    .header-inner { column-gap: 22px; }
    .nav-list { gap: 20px; }
    .nav-list > li > a,
    .dropdown-toggle { font-size: 11.5px; letter-spacing: 1.2px; }
}

@media (max-width: 1040px) {
    :root { --header-hoogte: 68px; }

    html { scroll-padding-top: calc(var(--header-hoogte) + 20px); }

    .header-inner {
        grid-template-columns: 48px 1fr 48px;
        column-gap: 0;
    }

    .menu-toggle {
        grid-column: 1;
        grid-row: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: -8px;
        background: none;
        border: 0;
        color: var(--black);
        cursor: pointer;
    }

    .menu-toggle__close,
    .menu-open .menu-toggle__open { display: none; }
    .menu-open .menu-toggle__close { display: block; }

    .brand {
        justify-self: center;
        align-self: center;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .logo,
    .is-gescrold .logo { height: 56px; }

    .site-nav {
        display: none;
        position: fixed;
        top: var(--header-hoogte);
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        padding: 18px 24px 60px;
        background: var(--cream);
        border-top: 1px solid rgba(197, 160, 40, 0.45);
    }

    .menu-open .site-nav { display: block; }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-list > li { border-bottom: 1px solid var(--lijn); }

    .nav-list > li > a,
    .dropdown-toggle {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 18px 2px;
        font-size: 14px;
        letter-spacing: 1.5px;
    }

    .nav-list > li > a::after,
    .dropdown-toggle::after { display: none; }

    .dropdown,
    .has-dropdown:hover .dropdown,
    .has-dropdown:focus-within .dropdown {
        position: static;
        display: none;
        min-width: 0;
        padding: 0 0 12px 14px;
        background: none;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .has-dropdown.is-open .dropdown { display: block; transform: none; }
    .has-dropdown:hover .dropdown-toggle svg { transform: none; }
    .has-dropdown.is-open .dropdown-toggle svg { transform: rotate(180deg); }

    .dropdown a { padding: 11px 8px; font-size: 15px; }

    .paginakop,
    .bier-detail { padding-top: clamp(40px, 8vw, 70px); }

    .hero__grid { padding-top: clamp(40px, 8vw, 70px); }

    .bier-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .bier-kaart,
    .bier-kaart--breed { grid-column: auto; }
    .bier-grid:not(.bier-grid--rij) .bier-kaart:last-child { grid-column: 1 / -1; }
    .bier-kaart--breed:not(:last-child) a { flex-direction: column; }
    .bier-kaart--breed:not(:last-child) .bier-kaart__beeld { flex: none; min-height: 0; }
    .bier-kaart--breed:not(:last-child) img { height: auto; aspect-ratio: 3 / 2; object-position: 50% 78%; }
    .bier-kaart--breed:not(:last-child) .btn { margin-top: auto; }
    .galerij--smal { column-count: 3; }
}

@media (max-width: 820px) {
    body { font-size: 1.0625rem; }

    .split,
    .kaart-blok,
    .hero__grid,
    .bier-detail,
    .terras-intro,
    .contact-grid,
    .feature-grid { grid-template-columns: 1fr; }

    .split--omgekeerd .split__beeld { order: 0; }
    .split__beeld > img.alpaca-rond { right: 12px; bottom: -28px; }
    .split__beeld:has(.alpaca-rond) { margin-bottom: 20px; }

    /* foto's lijnen links en rechts uit met de tekst; het kader valt in de marge */
    .bier-detail__beeld { position: relative; top: auto; order: -1; margin: 0 0 12px; }
    .bier-detail__beeld::before { inset: 10px -8px -10px 8px; }
    .hero__foto { margin: 0 0 12px; }
    .hero__foto::before { inset: 10px -8px -10px 8px; }
    .bier-detail__beeld img { aspect-ratio: 4 / 3; }
    .bier-zegel { top: -18px; left: -8px; width: 88px; height: 88px; }
    .bier-zegel b { font-size: 1.5rem; }
    .bierpagina { background-size: 100% 300px; }
    .bier-grid--rij { grid-template-columns: 1fr 1fr; }

    .kaart .kaart__breed { display: none; }
    .kaart .kaart__smal { display: block; }

    .etiket { grid-template-columns: 1fr; }
    .etiket__beeld { width: 180px; }

    .tijdlijn { grid-template-columns: minmax(0, 1fr); padding-left: 34px; }
    .tijdlijn::before { left: 8px; }
    .tijdlijn li,
    .tijdlijn li:nth-child(even) { grid-column: 1; margin: 0 0 26px; }
    .tijdlijn li::before,
    .tijdlijn li:nth-child(even)::before { left: -35px; right: auto; }

    .feiten__lijst { grid-template-columns: 1fr; }
    .feiten__lijst li { padding: 18px 0; }
    .feiten__lijst li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--lijn); }

    .verkooppunten { grid-template-columns: 1fr; }
    .foto-rij { grid-template-columns: 1fr 1fr; gap: 12px; }
    .foto-rij + .foto-rij { margin-top: 12px; }
    .galerij,
    .galerij--smal { column-count: 2; column-gap: 12px; }
    .galerij a { margin-bottom: 12px; }
    .feature-images { height: 320px; }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .footer-merk { grid-column: 1 / -1; }


    .lightbox img { max-width: 100vw; max-height: calc(100vh - 140px); border-radius: 0; }
    .lightbox__vorige,
    .lightbox__volgende { top: auto; bottom: 16px; transform: none; }
}

@media (max-width: 520px) {
    /* alleen links/rechts aanpassen: de korte schrijfwijze zou ook de
       boven- en ondermarge van blokken als de hero en de footer wissen */
    .container,
    .header-inner { padding-left: 18px; padding-right: 18px; }

    /* lange woorden mogen op een smal scherm afgebroken worden */
    h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
    .bier-grid { grid-template-columns: 1fr; }
    .bier-grid--rij { grid-template-columns: 1fr 1fr; gap: 12px; }
    .bier-grid--rij .bier-kaart__tekst { padding: 14px 14px 16px; }
    .bier-grid--rij .bier-kaart__kop { flex-direction: column; gap: 2px; }
    .bier-grid--rij .bier-kaart h3 { font-size: 1.1rem; }
    .bier-grid--rij .bier-kaart__kop b { font-size: 1rem; }
    .bier-grid--rij .bier-soort { font-size: 11px; letter-spacing: 0.8px; }
    .bier-grid:not(.bier-grid--rij) .bier-kaart:last-child { grid-column: auto; }
    .bier-kaart--breed:last-child a { flex-direction: column; }
    .bier-kaart--breed:last-child .bier-kaart__beeld { flex: none; min-height: 0; }
    .bier-kaart--breed:last-child img { height: auto; aspect-ratio: 1; }
    .bier-kaart--breed:last-child .btn { margin-top: auto; }
    .steekkaart { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-onder { flex-direction: column; }
    .knoppen .btn { width: 100%; }
    .agenda:not(.agenda--rij) li { grid-template-columns: 70px 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .site-header::before { animation: none; }
    .oproep::before { animation: none; }
    .kaart__puls,
    .kaart__fietsroute { animation: none; }
    .js .reveal { opacity: 1; transform: none; }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Aanraakschermen: geen hover-vergroting van foto's (die blijft anders
   "hangen" na een tik en steekt dan buiten het kader) */
@media (hover: none) {
    .split__beeld > img:not(.alpaca-rond):hover,
    .foto-rij img:hover,
    .feature-images img:hover,
    .galerij a:hover img,
    .bier-kaart a:hover img,
    .tijdlijn__kaart:hover img {
        transform: none;
        box-shadow: none;
    }

    .split__beeld:hover > img.alpaca-rond { transform: none; }
    .etiket:hover .etiket__beeld { transform: rotate(-4deg); }
}

/* Afdrukken: alles tonen, geen vaste balk of bubbels */
@media print {
    .js .reveal { opacity: 1; transform: none; }
    .site-header { position: static; }
    .site-header::before,
    .lang-selector-wrapper,
    .cookie-banner-overlay,
    .age-modal-overlay { display: none !important; }
}