/* ==========================================================================
   LETTERTYPEN (self-hosted, licentie in fonts/OFL.txt)
   Dezelfde bestanden en unicode-ranges als Google Fonts levert, maar vanaf
   ons eigen domein: bezoekers sturen hun IP-adres niet naar Google en de
   pagina wacht niet op een extra server. 'latin' dekt het Nederlands;
   'latin-ext' laadt pas als er bijvoorbeeld een ł of ő op de pagina staat.
   ========================================================================== */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('fonts/montserrat-900-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('fonts/montserrat-900-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url('fonts/montserrat-italic-900-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url('fonts/montserrat-italic-900-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans is een variabel lettertype: één bestand bevat alle
   gewichten van 400 tot en met 700. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/plus-jakarta-sans-variable-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/plus-jakarta-sans-variable-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   HUISSTIJL & VARIABELEN
   ========================================================================== */
:root {
    /* Navy blijft de kleur van alle donkere vlakken. */
    --color-brand-blue: #1E3A6E;
    /* Het oranje van het logo: vlakken, knoppen, highlight-randen, iconen,
       grote tekst en oranje op navy (3,6:1). */
    --color-brand-orange: #F66406;
    --color-brand-orange-rgb: 246, 100, 6;
    /* Kleine oranje tekst op een lichte achtergrond. #F66406 haalt daar maar
       2,9:1; deze diepere tint haalt de 4,5:1 van WCAG AA. */
    --color-brand-orange-deep: #C44C00;
    /* Rand van de omlijnde highlight-woorden. Op de crème vlakken is alleen
       die rand zichtbaar; met #F66406 is dat 2,9:1, deze tint haalt 3,1:1
       (genoeg voor grote tekst) en is met het oog niet te onderscheiden. */
    --color-brand-orange-stroke: #F06006;
    /* Kleine oranje tekst op navy, zoals de footer-koppen: 4,7:1. */
    --color-brand-orange-light: #FB8A42;
    /* Alleen voor het logo. Nooit als tekstkleur op navy (1,1:1). */
    --color-brand-indigo: #333398;
    /* Tekst op oranje knoppen. Wil het bestuur ooit donkere knopteksten,
       dan geeft #111111 hier 6:1 in plaats van 3,1:1. */
    --color-on-orange: #FFFFFF;
    --color-base-white: #F9F8F6;
    --color-ink: #111111;
    --color-pure-white: #FFFFFF;
    /* Grijs voor kleine tekst: 5,4:1 op de crème achtergrond. #888 en #999
       haalden de 4,5:1 van WCAG AA daar niet. */
    --color-text-muted: #666666;

    --font-display: 'Montserrat', sans-serif;
    --font-highlight: 'Montserrat', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;

    --ease-loeihard: cubic-bezier(0.19, 1, 0.22, 1);
    --header-height: 90px;
}

/* ==========================================================================
   RESET & BASIS
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* iOS Safari vergroot tekst zelf als je de telefoon kantelt ('text
   inflation'). 100% (niet 'none') houdt zoomen en grotere systeemtekst intact. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Pijltjes (↗) altijd als tekst tekenen, niet als kleurige emoji (iOS/Android). */
body { font-variant-emoji: text; }

/* iPhone met notch: de pagina loopt (viewport-fit=cover) tot in de hoeken
   door, zonder crème balken naast de navy navbar en footer. Wat buiten de
   pagina valt (iOS-rubberband boven en onder) is navy, zoals navbar en
   footer; de pagina zelf blijft crème. Tekst blijft via de safe-area-marges
   (env(safe-area-inset-*), 0 op andere toestellen) buiten de notch. */
html { background-color: var(--color-brand-blue); }

/* Elk anker-doel komt onder de vaste navbar uit in plaats van erachter
   (zelfde afstand als de Lenis-offset in script.js). */
[id] { scroll-margin-top: calc(var(--header-height) + 1rem); }

body {
    font-family: var(--font-body);
    color: var(--color-ink);
    background-color: var(--color-base-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, .display {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.highlight {
    font-family: var(--font-highlight);
    -webkit-text-stroke: 3px var(--color-brand-orange-stroke);
    font-style: italic;
    font-weight: 900;
    padding-right: 0.05em;
    letter-spacing: 0.04em;
    paint-order: stroke fill;
}

.hero .highlight { color: #162C4E; }
.page-hero .highlight { color: #142a52; }

.manifest-section .highlight,
.sponsors-section .highlight,
.recap-section .highlight,
.board-section .highlight,
.features-section .highlight,
.timeline-section .highlight,
.benefits-section .highlight,
.contact-section .highlight,
.faq-section .highlight,
.events-section .highlight,
.news-section .highlight,
.news-teaser-section .highlight,
.events-slideshow-section .highlight,
.notfound-section .highlight {
    color: var(--color-base-white);
}

.vriendje-wrapper .highlight,
.steps-section .highlight,
.final-cta .highlight {
    color: var(--color-brand-blue);
}

/* Witte wrapper binnen lichte sectie — fill matcht de witte wrapper-bg
   zodat overlappende strokes binnen elke letter "weggewist" worden */
.become-sponsor .highlight {
    color: var(--color-pure-white);
}

@media (max-width: 768px) {
    .highlight {
        -webkit-text-stroke: 2.5px var(--color-brand-orange-stroke);
        letter-spacing: 0.03em;
    }
}

p { line-height: 1.6; font-size: 1.125rem; color: #333; }
a { text-decoration: none; color: inherit; }

/* Utility Classes */
.container {
    width: 90%;
    width: min(90%, 100% - 2 * max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) - 2rem);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.divider {
    width: 100%;
    height: 1px;
    background-color: var(--color-ink);
    opacity: 0.15;
    margin: 4rem 0;
}

.text-white { color: var(--color-pure-white); }
.bg-blue { background-color: var(--color-brand-blue); color: var(--color-pure-white); }

/* ==========================================================================
   TOEGANKELIJKHEID: SKIPLINK EN FOCUS
   ========================================================================== */
/* Eerste focusbare element van elke pagina, zodat toetsenbordgebruikers in
   één keer over het menu heen springen. Onzichtbaar tot hij focus krijgt. */
.skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1000;
    padding: 0.85rem 1.4rem;
    border-radius: 999px;
    background: var(--color-pure-white);
    color: var(--color-brand-blue);
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    transform: translateY(-200%);
    transition: transform 0.2s ease;
}
.skip-link:focus { transform: none; }

/* Focusring alleen bij toetsenbordgebruik, niet na een muisklik. Diep oranje
   op lichte vlakken en fel oranje op navy: zo haalt de ring overal 3:1. */
:focus-visible {
    outline: 3px solid var(--color-brand-orange-deep);
    outline-offset: 3px;
}
.skip-link:focus-visible,
.navbar :focus-visible,
.mobile-menu :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.bg-blue :focus-visible,
.vriendje-wrapper :focus-visible,
.steps-section :focus-visible,
.footer :focus-visible {
    outline-color: var(--color-brand-orange);
}
/* <main> krijgt focus via de skiplink; een ring om de hele pagina zegt niets. */
main:focus { outline: none; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 2.5rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.4s var(--ease-loeihard);
    position: relative;
    overflow: hidden;
    border: none;
    z-index: 1;
}

/* Wit op het logo-oranje is 3,1:1; vette letters (700) houden het label goed
   leesbaar. Voor volledige WCAG AA: --color-on-orange op #111111 zetten. */
.btn-orange {
    background-color: var(--color-brand-orange);
    color: var(--color-on-orange);
    font-weight: 700;
}
/* Bij hover schuift er een donkere vulling in; wit blijft dan leesbaar, ook
   als --color-on-orange ooit donker wordt. */
.btn-orange:hover { color: var(--color-pure-white); }

.btn-orange::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--color-ink);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-loeihard);
}
.btn-orange:hover::before { transform: scaleX(1); }

/* Grotere variant voor de belangrijkste knop van een pagina. */
.btn-lg { font-size: 1.05rem; padding: 1.25rem 2.75rem; }

.btn-outline {
    background-color: transparent;
    color: var(--color-pure-white);
    border: 1px solid rgba(255,255,255,0.4);
}
.btn-outline:hover {
    background-color: var(--color-pure-white);
    color: var(--color-brand-blue);
    border-color: var(--color-pure-white);
}

.btn-outline-dark {
    background-color: transparent;
    color: var(--color-ink);
    border: 1px solid rgba(0,0,0,0.15);
}
.btn-outline-dark:hover {
    background-color: var(--color-ink);
    color: var(--color-pure-white);
    border-color: var(--color-ink);
}

.btn-link {
    color: var(--color-brand-orange-deep);
    font-weight: 600;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-link::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; width: 100%; height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s var(--ease-loeihard);
}
.btn-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}
/* Op touchscreens een tikvlak van zo'n 45px hoog zonder dat er iets
   verschuift; ::after blijft de onderstreping. */
@media (pointer: coarse) {
    .btn-link::before { content: ''; position: absolute; inset: -12px -8px; }
}

/* ==========================================================================
   LOGO
   Navbar: het volledige logo met 'Fontys Real Estate Association', zoals de
   vereniging het aanlevert. Op 66px houdt het in de balk van 90px ruim 12px
   lucht boven en onder; bij het scrollen krimpt het mee met de balk (75px).
   ========================================================================== */
.logo-img { height: 66px; width: auto; display: block; transition: height 0.4s ease; }
.navbar.scrolled .logo-img { height: 56px; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0; left: 0; width: 100%;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Op brede schermen lijnen logo en knop uit met de inhoudskolom (75rem =
       1200px); daaronder 5% zoals voorheen. */
    padding: 0 max(5%, calc((100% - 75rem) / 2));
    padding-left: max(5%, calc((100% - 75rem) / 2), calc(env(safe-area-inset-left, 0px) + 1rem));
    padding-right: max(5%, calc((100% - 75rem) / 2), calc(env(safe-area-inset-right, 0px) + 1rem));
    z-index: 100;
    background-color: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.0);
    transition: background-color 0.4s ease, border-bottom 0.4s ease, height 0.4s ease;
    color: var(--color-pure-white);
}

.navbar.scrolled {
    background-color: var(--color-brand-blue);
    height: 75px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.nav-links { display: flex; gap: 1.75rem; align-items: center; }
.navbar > .btn { flex-shrink: 0; white-space: nowrap; }
/* Open mobiel menu: de balk wordt navy, zodat de links bij het scrollen
   niet zichtbaar onder logo en kruisje door schuiven (script.js zet de klasse). */
.menu-open .navbar { background-color: var(--color-brand-blue); }

.nav-link {
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    position: relative;
    transition: opacity 0.3s ease, color 0.3s ease;
}
.nav-link:hover { opacity: 0.6; }

.nav-link.active { color: var(--color-brand-orange); opacity: 1 !important; }
.nav-link.active::before {
    content: '';
    position: absolute;
    bottom: -8px; left: 0;
    width: 100%; height: 2px;
    background-color: var(--color-brand-orange);
}

/* Een echte <button>: knopopmaak van de browser eraf. 44x44 is de minimale
   tikgrootte; de negatieve marge houdt de streepjes op dezelfde plek als
   toen de knop nog 30px breed was. */
.hamburger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    margin-right: -7px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 8px;
    color: inherit;
    cursor: pointer;
    z-index: 101;
}
/* Een rand in plaats van een achtergrondkleur: in Windows Hoog contrast
   worden achtergronden weggehaald en verdween de menuknop. */
.hamburger span {
    display: block; width: 30px; height: 0;
    border-top: 2px solid currentColor;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Open menu: de drie streepjes worden een kruisje. */
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile Menu
   Dicht = visibility hidden (en inert via script.js): onzichtbaar, niet te
   focussen en niet voorgelezen. De visibility-overgang wacht tot het menu
   is weggeschoven, anders verdwijnt het abrupt. */
.mobile-menu {
    position: fixed;
    inset: 0;
    background-color: var(--color-brand-blue);
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: calc(var(--header-height) + 1rem) 6vw 2rem;
    transform: translateY(-100%);
    visibility: hidden;
    overscroll-behavior: contain;
    transition: transform 0.6s var(--ease-loeihard), visibility 0s linear 0.6s;
}
.mobile-menu.active {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.6s var(--ease-loeihard), visibility 0s linear 0s;
}
/* Auto-marges centreren de links als ze passen; passen ze niet (laag scherm,
   liggend), dan begint de lijst onder de navbar en scrolt het menu. Met
   justify-content: center liep de lijst dan boven door het logo heen. */
.mobile-menu > * { flex-shrink: 0; }
.mobile-menu > :first-child { margin-top: auto; }
.mobile-menu > :last-child { margin-bottom: auto; }
/* 11vw: ook 'SPONSOREN' en 'VERENIGING' passen dan op een smalle telefoon. */
.mobile-menu .nav-link {
    font-size: clamp(2rem, min(11vw, 6.2vh), 3.5rem);
    font-size: clamp(2rem, min(11vw, 6.2svh), 3.5rem);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 1rem;
    color: var(--color-pure-white);
}

/* Met 7 links past de balk niet meer tot 1024px; het hamburgermenu moet
   daarom eerder inspringen dan voorheen. In em (75em = 1200px), zodat het
   ook klopt als iemand in de browser een grotere standaardletter heeft. */
@media (max-width: 75em) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .navbar .btn-orange { display: none; }
}

/* Past het menu niet op een laag scherm (of liggend), dan scrolt het zelf
   (data-lenis-prevent laat Lenis daarvan af). */
.mobile-menu { overflow-y: auto; }
@media (max-height: 760px) {
    .mobile-menu .nav-link { font-size: min(2.4rem, 11vw); margin-bottom: 0.5rem; }
}

/* Telefoon liggend: de balk is meteen 75px met het logo op 56px, zoals na het
   scrollen. 90px was een kwart van het scherm. */
@media (orientation: landscape) and (max-height: 500px) {
    :root { --header-height: 75px; }
    .logo-img { height: 56px; }
}

/* ==========================================================================
   HERO (homepage)
   min-height in plaats van height: is de inhoud hoger dan het scherm (kleine
   telefoon, telefoon liggend), dan groeit de hero mee. Met height: 100vh en
   overflow: hidden vielen de knoppen daar weg en schoof de kop onder de
   navbar. 100vh is de terugval; 100svh is de hoogte mét de balken van de
   mobiele browser in beeld, zodat op iOS niets achter de werkbalk valt.
   Let op: zet svh nooit in een regel met var() (zoals padding-top): kent een
   oudere browser svh niet, dan vervalt die regel naar 0 in plaats van naar
   de vh-terugval erboven. Voor de kleine marges is vh nauwkeurig genoeg.
   ========================================================================== */
.hero {
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    display: flex;
    align-items: center;
    padding-top: calc(var(--header-height) + clamp(0.5rem, 3vh, 3rem));
    padding-bottom: clamp(1rem, 4vh, 3rem);
    overflow: hidden;
    background-color: #0d1a30;
}

.hero-video-wrapper {
    position: absolute;
    top: -10%; left: 0; width: 100%; height: 120%;
    z-index: 0;
    background-color: var(--color-brand-blue);
}
.hero-video {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.6;
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(30, 58, 110, 0.85) 0%, rgba(13, 26, 48, 0.75) 100%);
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    color: var(--color-pure-white);
    text-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* De drie zinnen staan elk op een eigen regel. De langste, 'Bouwen aan
   vriendschap.', is 16,7em breed: met 5.25vw past hij in de container (90%
   van het scherm) en met 4.4rem in de 1200px daarvan. 10svh houdt de kop op
   lage schermen (telefoon liggend) zo klein dat ook de knoppen in beeld
   blijven. De <br>'s in de HTML blijven staan voor als de CSS niet laadt. */
.hero h1 {
    font-size: clamp(1.5rem, min(5.25vw, 10vh), 4.4rem);
    font-size: clamp(1.5rem, min(5.25vw, 10svh), 4.4rem);
    line-height: 1.12;
    margin-bottom: clamp(1rem, 4vh, 2rem);
}
.hero-title br { display: none; }
.hero-line { display: block; white-space: nowrap; }
/* De oranje rand groeit mee met de letters: 2,5px op telefoons, 3px (zoals
   voorheen op desktop) vanaf zo'n 55px letterhoogte. Kent een browser dit
   niet, dan geldt gewoon de rand van .highlight bovenaan. */
.hero .highlight {
    -webkit-text-stroke-width: clamp(2.5px, 0.055em, 3px);
}
.hero-sub {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 400;
    max-width: 550px;
    margin-bottom: clamp(1.25rem, 5vh, 3rem);
    color: var(--color-pure-white);
    text-wrap: pretty;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
/* Beginstand van de intro-animatie; zie REVEAL onderaan voor waarom dit
   alleen onder .js geldt. */
.js .hero h1 { opacity: 0; transform: translateY(30px); }
.js .hero-sub,
.js .hero-ctas { opacity: 0; }

/* Telefoon staand: elke zin is een blok, met 'Bouwen aan' boven het
   omlijnde woord en wat extra lucht tussen de zinnen. Het breedste woord,
   'VRIENDSCHAP.', is 8,6em: met 10vw vult het 95% van de container, met
   letters van 32px op 320px tot 60px op 600px. 7.5svh begrenst lage
   vensters. */
@media (max-width: 600px) and (orientation: portrait) {
    .hero h1 {
        font-size: clamp(1.5rem, min(10vw, 7.5vh), 3.75rem);
        font-size: clamp(1.5rem, min(10vw, 7.5svh), 3.75rem);
        line-height: 0.95;
    }
    .hero-line ~ .hero-line { margin-top: 0.24em; }
    .hero-line .highlight { display: block; }
    .hero-ctas { flex-direction: column; }
    .hero-ctas .btn { width: 100%; padding-inline: 1rem; }
}

/* Telefoon liggend (en andere lage vensters): compactere ondertitel en
   knoppen, zodat kop, tekst en knoppen samen in het eerste scherm passen. */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-sub { font-size: 1rem; }
    .hero-ctas .btn { padding: 0.85rem 1.75rem; }
}

/* ==========================================================================
   PAGE HERO (subpages)
   ========================================================================== */
/* Hooguit 36rem: op een staande tablet of groot scherm stond er anders een
   lege navy vlakte van een half scherm boven de titel. */
.page-hero {
    min-height: 60vh;
    min-height: min(60svh, 36rem);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: calc(var(--header-height) + 3rem) 0 5rem;
    background: var(--color-brand-blue);
    background-image:
        radial-gradient(circle at 15% 30%, rgba(var(--color-brand-orange-rgb), 0.18) 0%, transparent 55%),
        radial-gradient(circle at 90% 80%, rgba(var(--color-brand-orange-rgb), 0.08) 0%, transparent 50%),
        linear-gradient(135deg, #1E3A6E 0%, #0d1a30 100%);
    color: var(--color-pure-white);
    overflow: hidden;
}

.page-hero .container { position: relative; z-index: 2; }

.page-hero .breadcrumb {
    color: rgba(255,255,255,0.75);
    font-size: 0.85rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 500;
}
.page-hero .breadcrumb a { transition: color 0.3s; }
.breadcrumb .nowrap { white-space: nowrap; }
.page-hero .breadcrumb a:hover { color: var(--color-brand-orange); }

.page-hero h1 {
    font-size: clamp(2.8rem, 7vw, 6rem);
    color: var(--color-pure-white);
    margin-bottom: 1.5rem;
    line-height: 1.05;
}

.page-hero .subtitle {
    color: rgba(255,255,255,0.85);
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    max-width: 650px;
    line-height: 1.5;
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee-section {
    background-color: var(--color-brand-blue);
    color: var(--color-pure-white);
    padding: 1.5rem 0;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.05);
}
/* 80s voor 28 woorden: dezelfde snelheid als 40s voor de 14 van eerst. */
.marquee-content { display: flex; animation: scroll-marquee 80s linear infinite; }
.marquee-item {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-right: 2rem;
}
.marquee-star { color: var(--color-brand-orange); font-family: sans-serif; font-size: 1rem; font-weight: 400; font-style: normal; }
@keyframes scroll-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ==========================================================================
   MANIFEST
   ========================================================================== */
.manifest-section { padding: 5rem 0 3rem; }
.manifest-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: center;
}
.manifest-grid h2 { font-size: clamp(2rem, 3.6vw, 3.5rem); }
.manifest-grid h2 .nowrap { white-space: nowrap; }
.manifest-body p { font-size: 1.2rem; margin-bottom: 2.5rem; color: #444; }

@media (max-width: 1024px) { .manifest-grid { grid-template-columns: 1fr; gap: 3rem; } }
@media (max-width: 640px) { .manifest-grid h2 .nowrap { white-space: normal; } }

/* ==========================================================================
   VRIENDJE CTA
   ========================================================================== */
.vriendje-section { padding: 2rem 0 3rem; }
.vriendje-wrapper {
    background-color: var(--color-brand-blue);
    color: var(--color-pure-white);
    padding: 5rem 4rem;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.vriendje-wrapper h2 { font-size: clamp(2.5rem, 5vw, 5rem); margin-bottom: 1.5rem; }
.vriendje-wrapper p {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto 3rem;
    opacity: 0.85;
    color: var(--color-pure-white);
}
@media (max-width: 768px) { .vriendje-wrapper { padding: 4rem 2rem; } }
@media (max-width: 480px) {
    .vriendje-wrapper { padding: 3rem 1.25rem; }
    .vriendje-wrapper p { font-size: 1.1rem; margin-bottom: 2rem; }
    .vriendje-wrapper .btn { width: 100%; padding-left: 1rem; padding-right: 1rem; }
}

/* ==========================================================================
   SPONSOREN
   ========================================================================== */
.sponsors-section { padding: 5rem 0 2rem; }
.sponsors-header { margin-bottom: 2.5rem; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem; }
.sponsors-header h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.sponsors-header p { font-size: 1.125rem; color: #555; margin-top: 1rem; max-width: 500px; }
.sponsors-header .btn-link { white-space: nowrap; }

.sponsors-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 2.5rem 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Continuous-scroll sponsor-marquee (zelfde patroon als VASTGOED ✦ NETWERK marquee) */
.sponsors-marquee {
    overflow: hidden;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 2.5rem 0;
    display: flex;
    white-space: nowrap;
    align-items: center;
}
.sponsors-marquee-track {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    animation: scroll-sponsors 35s linear infinite;
    width: max-content;
    will-change: transform;
}
/* Stilzetten bij hover met een muis, en als een toetsenbordgebruiker naar een
   logo tabt: anders schuift de focus uit beeld. Niet op touch: daar blijft
   'hover' na een aanraking hangen en stond de band stil. */
@media (hover: hover) {
    .sponsors-marquee:hover .sponsors-marquee-track { animation-play-state: paused; }
}
.sponsors-marquee:has(:focus-visible) .sponsors-marquee-track {
    animation-play-state: paused;
}
.sponsors-marquee-track > .sponsor-tile {
    flex: 0 0 180px;
    height: 90px;
    background: transparent;
    border: none;
    padding: 1rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.sponsors-marquee-track > .sponsor-tile:hover {
    background: transparent;
    box-shadow: none;
}
.sponsors-marquee-track > .sponsor-tile .sponsor-logo {
    max-width: 100%;
    max-height: 65px;
    width: auto;
    height: auto;
    object-fit: contain;
}
@keyframes scroll-sponsors {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (max-width: 1024px) {
    .sponsors-marquee-track > .sponsor-tile { flex: 0 0 150px; }
}
@media (max-width: 640px) {
    .sponsors-marquee-track > .sponsor-tile { flex: 0 0 130px; height: 80px; }
}

.sponsor-tile {
    background: transparent;
    aspect-ratio: auto;
    border: none;
    border-radius: 0;
    padding: 1rem 0.5rem;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.4s var(--ease-loeihard);
    text-decoration: none;
    color: inherit;
}
.sponsor-tile:hover {
    transform: translateY(-4px);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.sponsor-logo {
    max-width: 100%;
    max-height: 65px;
    width: auto; height: auto;
    object-fit: contain;
    transition: transform 0.4s var(--ease-loeihard);
}

@media (max-width: 1024px) {
    .sponsors-grid { grid-template-columns: repeat(4, 1fr); padding: 2rem 0; row-gap: 2rem; }
}
@media (max-width: 640px) {
    .sponsors-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .sponsor-tile { height: 80px; }
}

/* ==========================================================================
   RECAP
   ========================================================================== */
.recap-section { padding: 4rem 0 5rem; overflow: hidden; }
.recap-header {
    margin-bottom: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 2rem;
}
.recap-header h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.recap-header p { font-size: 1.05rem; color: #555; margin-top: 0.75rem; max-width: 500px; }
.recap-header .btn-link { white-space: nowrap; }
.recap-track-wrapper { width: 100%; }
.recap-track {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 3rem;
    scrollbar-width: none;
}
.recap-track::-webkit-scrollbar { display: none; }

.recap-card { flex: 0 0 100%; scroll-snap-align: start; text-decoration: none; color: inherit; display: block; }
@media (min-width: 768px) { .recap-card { flex: 0 0 calc(50% - 1rem); } }
@media (min-width: 1200px) { .recap-card { flex: 0 0 calc(33.333% - 1.33rem); } }

.recap-media {
    width: 100%; aspect-ratio: 4/5;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background-color: #EFECE5;
}
.recap-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-loeihard);
}
.recap-card:hover .recap-media img { transform: scale(1.04); }

.recap-date {
    font-weight: 600;
    color: var(--color-brand-orange-deep);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    display: block;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.recap-caption {
    font-size: 1.5rem;
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1.2;
}

/* ==========================================================================
   BESTUUR (teaser + full grid)
   ========================================================================== */
.board-section { padding: 5rem 0; text-align: center; }
.board-section h2 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 4rem; }

.board-avatars {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 3rem; margin-bottom: 4rem;
}
/* Tablet: hooguit drie per rij, dus zes leden als 3 + 3 in plaats van 5 + 1. */
@media (max-width: 1024px) {
    .board-avatars { max-width: 34rem; margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
    .board-section .btn { width: 100%; padding-left: 1rem; padding-right: 1rem; }
}
.avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.avatar {
    width: 110px; height: 110px;
    border-radius: 50%;
    background-color: #EFECE5;
    background-size: cover; background-position: center;
}
.avatar-name { font-weight: 600; font-size: 1.1rem; color: var(--color-ink);}
.avatar-role { font-size: 0.9rem; color: var(--color-text-muted); }

/* Full bestuur bio cards */
.bio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    text-align: left;
}
.bio-card {
    background: var(--color-pure-white);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.4s var(--ease-loeihard), box-shadow 0.4s var(--ease-loeihard);
}
.bio-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); }
.bio-image {
    width: 100%; aspect-ratio: 4/5;
    background-size: cover;
    background-position: center;
    background-color: #EFECE5;
}
.bio-content { padding: 1.75rem; }
.bio-name {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}
.bio-role { color: var(--color-brand-orange-deep); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 1rem; }
.bio-quote { color: #555; font-size: 1rem; font-style: italic; line-height: 1.5; }

/* LinkedIn per bestuurslid — verschijnt alleen als de URL is ingevuld */
.bio-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* 44px tikvlak; de negatieve marges houden de kaart even hoog */
    min-height: 44px;
    margin-top: calc(1.25rem - 13px);
    margin-bottom: -13px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-brand-blue);
    transition: color 0.3s ease;
}
.bio-linkedin:hover { color: var(--color-brand-orange-deep); }
.bio-linkedin svg { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; }

.past-board-avatar-linkedin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44 x 44 tikvlak rond het icoon van 16px, zonder dat de rij verschuift */
    min-width: 44px;
    min-height: 44px;
    margin: calc(0.35rem - 14px) 0 -14px;
    color: var(--color-brand-blue);
    transition: color 0.3s ease;
}
.past-board-avatar-linkedin:hover { color: var(--color-brand-orange-deep); }
.past-board-avatar-linkedin svg { width: 16px; height: 16px; fill: currentColor; }

/* ==========================================================================
   FEATURES GRID (vereniging "wat we doen")
   ========================================================================== */
.features-section { padding: 6rem 0; }
.section-header { margin-bottom: 3rem; }
.section-header h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); margin-bottom: 1rem; }
/* 'Bestuur 2026-2027.': het jaar niet bij het streepje afbreken. */
#boardSectionTitle .highlight { white-space: nowrap; }
.section-header p { font-size: 1.2rem; color: #555; max-width: 600px; }

/* auto-fit: het bestuur beheert deze blokken zelf, dus het aantal ligt niet
   vast. Bij precies vier kaarten (zoals nu) nooit 3 + 1: twee bij twee, en
   pas vanaf 1300px vier naast elkaar, waar 'BEDRIJFSBEZOEKEN' in de kaart past. */
.features-grid,
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem;
}
.features-grid:has(> :nth-child(4):last-child),
.benefits-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1300px) {
    .features-grid:has(> :nth-child(4):last-child),
    .benefits-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .feature-card h3 { min-height: 2.4em; }
    .benefit-card h3 { min-height: 2.2em; }
}
@media (max-width: 640px) {
    .features-grid, .benefits-grid,
    .features-grid:has(> :nth-child(4):last-child),
    .benefits-grid:has(> :nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); }
}
.feature-card h3, .benefit-card h3 { text-wrap: balance; }
.feature-card {
    background: var(--color-pure-white);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.4s var(--ease-loeihard), box-shadow 0.4s var(--ease-loeihard);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); }
.feature-icon {
    width: 52px; height: 52px;
    background-color: var(--color-brand-orange);
    color: var(--color-pure-white);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 900;
    font-family: var(--font-display);
    font-style: italic;
}
.feature-card h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    line-height: 1.2;
}
.feature-card p { font-size: 0.95rem; color: #555; }

/* ==========================================================================
   TIMELINE (vereniging geschiedenis)
   ========================================================================== */
.timeline-section { padding: 5rem 0 6rem; background-color: var(--color-base-white); }
.timeline {
    max-width: 820px;
    margin: 0 auto;
    position: relative;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 105px; top: 8px; bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--color-brand-orange) 0%, rgba(var(--color-brand-orange-rgb), 0.2) 100%);
}
.timeline-item {
    position: relative;
    padding-left: 145px;
    padding-bottom: 2.5rem;
    min-height: 60px;
}
.timeline-item:last-child { padding-bottom: 0; }

.timeline-year {
    position: absolute;
    left: 0; top: -4px;
    width: 88px;
    text-align: right;
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    color: var(--color-brand-orange-deep);
    font-size: 1.4rem;
    letter-spacing: -0.02em;
}
.timeline-dot {
    position: absolute;
    left: 98px; top: 6px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--color-brand-orange);
    border: 4px solid var(--color-base-white);
    z-index: 2;
}
.timeline-item h4 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    line-height: 1.2;
}
.timeline-item p { font-size: 0.98rem; color: #555; line-height: 1.6; }

@media (max-width: 640px) {
    .timeline::before { left: 8px; top: 30px; }
    .timeline-dot { left: 1px; top: 28px; }
    .timeline-item { padding-left: 40px; padding-top: 0; padding-bottom: 2rem; }
    .timeline-year {
        position: relative;
        top: 0; left: 0;
        width: auto;
        text-align: left;
        margin-bottom: 0.5rem;
        font-size: 1.2rem;
    }
}

/* ===== DOCUMENTEN (statuten & reglementen) ===== */
.documents-section { padding: 5rem 0; }

.document-card {
    background: var(--color-pure-white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 20px;
    padding: 2.5rem 3rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2.5rem;
    align-items: center;
    transition: transform 0.4s var(--ease-loeihard), box-shadow 0.4s var(--ease-loeihard);
}
.document-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}

/* Tint van 5%: daarop haalt het diep-oranje 'PDF' nog net 4,5:1. */
.document-icon {
    width: 72px;
    height: 90px;
    background: rgba(var(--color-brand-orange-rgb), 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}
.document-icon::after {
    content: 'PDF';
    position: absolute;
    bottom: 0.4rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-brand-orange-deep);
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: 0.65rem;
    letter-spacing: 2px;
}
.document-icon svg { width: 36px; height: 36px; }

.document-content .sponsor-detail-tagline { margin-bottom: 0.5rem; }
.document-content h3 {
    font-size: 1.6rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    line-height: 1.15;
}
.document-content p {
    font-size: 0.95rem;
    color: #555;
    max-width: 520px;
    margin: 0;
}

.document-card .btn { white-space: nowrap; }

@media (max-width: 900px) {
    .document-card {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2rem;
        text-align: center;
    }
    .document-icon { margin: 0 auto; }
    .document-content p { margin: 0 auto; }
    .document-card .btn { width: 100%; }
}

/* ==========================================================================
   BENEFITS (vriendje voordelen)
   ========================================================================== */
.benefits-section { padding: 5rem 0; }
.benefit-card {
    background: var(--color-pure-white);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.05);
}
.benefit-card .feature-icon { background-color: var(--color-brand-blue); }
.benefit-card h3 { font-size: 1.25rem; margin-bottom: 0.75rem; text-transform: uppercase; }
.benefit-card p { font-size: 0.95rem; color: #555; }

/* ==========================================================================
   STEPS (vriendje how-to)
   ========================================================================== */
.steps-section { padding: 5rem 0; background-color: var(--color-brand-blue); color: var(--color-pure-white); }
.steps-section .section-header h2 { color: var(--color-pure-white); }
.steps-section .section-header p { color: rgba(255,255,255,0.75); }
/* Drie stappen: naast elkaar vanaf 900px, anders onder elkaar (met auto-fit
   werd het op tablets 2 + 1). */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}
.step-card {
    background: rgba(255,255,255,0.05);
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
}
.step-number {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: 3rem;
    color: var(--color-brand-orange);
    margin-bottom: 1rem;
    line-height: 1;
}
.step-card h3 { font-size: 1.4rem; margin-bottom: 1rem; text-transform: uppercase; color: var(--color-pure-white); text-wrap: balance; min-height: 2.2em; }
.step-card p { color: rgba(255,255,255,0.75); font-size: 1rem; }
/* Tussen 900 en 1200px kan een titel drie regels hebben: tekst gelijk laten beginnen. */
@media (min-width: 900px) and (max-width: 1199px) {
    .step-card h3 { min-height: 3.3em; }
}
@media (max-width: 899px) {
    .steps-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .step-card h3 { min-height: 0; }
}
/* Liggende telefoon en staande tablet: onder elkaar, met het grote nummer
   links van de tekst. */
@media (min-width: 641px) and (max-width: 899px), (orientation: landscape) and (max-height: 500px) {
    .steps-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .step-card { display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
    .step-number { grid-row: 1 / span 2; margin-bottom: 0; }
    .step-card h3 { min-height: 0; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-section { padding: 5rem 0 6rem; }
.faq-section .section-header { text-align: center; }
.faq-section .section-header p { margin-left: auto; margin-right: auto; }
.faq-list { max-width: 800px; margin: 0 auto; }
/* De ruimte zit in de knop zelf, niet om het item heen: zo is de hele rij
   aan te tikken in plaats van alleen de tekstregel. */
.faq-item {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
/* De vraag is een <button> (bedienbaar met Tab, Enter en spatie); de
   knopopmaak van de browser gaat eraf zodat hij oogt als een kop. */
.faq-question {
    width: 100%;
    padding: 1.5rem 0;
    background: none;
    border: 0;
    color: var(--color-ink);
    text-align: left;
    font: inherit;
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
/* Het plusje is decoratie: met '/ ""' leest een schermlezer het niet mee in
   de naam van de knop (aria-expanded vertelt al of het antwoord open is).
   Browsers die die notatie niet kennen, houden de eerste regel. */
.faq-question::after {
    content: '+';
    content: '+' / '';
    font-size: 2rem;
    font-weight: 300;
    color: var(--color-brand-orange-deep);
    transition: transform 0.3s ease;
}
.faq-item.active .faq-question::after { content: '−'; content: '−' / ''; }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--ease-loeihard);
}
.faq-answer p { padding-top: 1rem; font-size: 1rem; color: #555; }
.faq-item.active .faq-question { padding-bottom: 1rem; }
.faq-answer > :first-child { padding-top: 0; }
.faq-answer > :last-child { padding-bottom: 1.5rem; }
/* Ruim genomen: op een telefoon past er in 300px maar zo'n 11 regels, waarna
   een langer antwoord zonder scrollbar werd afgekapt. */
.faq-item.active .faq-answer { max-height: 1200px; }
/* Zonder JavaScript gaat de accordeon niet open; dan staan alle antwoorden
   er meteen. */
.no-js .faq-answer { max-height: none; }
.no-js .faq-question { cursor: default; }
.no-js .faq-question::after { display: none; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-section { padding: 5rem 0 6rem; }
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 5rem;
    align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; } }

.contact-info h2 { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: 2rem; }
.contact-block { margin-bottom: 2rem; }
.contact-block h4 {
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-brand-orange-deep);
    margin-bottom: 0.5rem;
}
.contact-block p, .contact-block a {
    font-size: 1.05rem;
    color: var(--color-ink);
    line-height: 1.7;
}
.contact-block a:hover { color: var(--color-brand-orange-deep); }
/* Mail- en sociale links: 44px tikhoogte; de negatieve marge houdt de
   regelafstand gelijk. */
.contact-block > a,
.social-inline a {
    display: inline-block;
    padding-block: 0.5rem;
    margin-block: -0.5rem;
}

/* Form */
.form-wrapper {
    background: var(--color-pure-white);
    border-radius: 16px;
    padding: 3rem;
    border: 1px solid rgba(0,0,0,0.05);
    container-type: inline-size;
}
.form-wrapper h3 {
    text-wrap: balance;
    font-size: 1.75rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
}
.form-group { margin-bottom: 1.25rem; }
.form-group label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #555;
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 1rem;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    background: var(--color-base-white);
    transition: border-color 0.3s, background 0.3s;
}
/* De oranje rand plus een zachte gloed is hier de focusindicator; een dunne
   rand alleen viel nauwelijks op. */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-brand-orange);
    box-shadow: 0 0 0 3px rgba(var(--color-brand-orange-rgb), 0.2);
    background: var(--color-pure-white);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-wrapper .btn { width: 100%; margin-top: 1rem; }

@media (max-width: 768px) { .form-wrapper { padding: 2rem; } }

/* ==========================================================================
   BECOME SPONSOR (sponsoren pagina)
   ========================================================================== */
.become-sponsor {
    padding: 5rem 0;
    background-color: var(--color-base-white);
}
.become-sponsor-wrapper {
    background: var(--color-pure-white);
    border-radius: 24px;
    padding: 5rem;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.05);
}
.become-sponsor h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: 1.5rem;
}
/* Geen los woord op de laatste regel. Niet op telefoons: daar zou 'balance'
   witte en omlijnde woorden door elkaar op één regel zetten. */
@media (min-width: 601px) { .become-sponsor h2 { text-wrap: balance; } }
.become-sponsor p {
    max-width: 600px;
    margin: 0 auto 2.5rem;
    font-size: 1.15rem;
    color: #555;
}
.become-sponsor-wrapper > :last-child { margin-bottom: 0; }
@media (max-width: 768px) { .become-sponsor-wrapper { padding: 3rem 1.5rem; } }
/* Telefoon: de knop over de volle breedte, zodat het label op één regel past. */
@media (max-width: 480px) {
    .become-sponsor-wrapper { padding: 2.5rem 1.25rem; }
    .become-sponsor-wrapper .btn { width: 100%; padding-left: 1rem; padding-right: 1rem; line-height: 1.35; text-wrap: balance; }
    .btn-lg { font-size: 1rem; }
}

/* ==========================================================================
   EIND CTA
   ========================================================================== */
.final-cta {
    padding: 6rem 0;
    text-align: center;
}
.final-cta h2 { font-size: clamp(3rem, 6vw, 6rem); margin-bottom: 3rem; }
/* Het omlijnde deel ('erbij te horen?') blijft bij elkaar: past de zin niet op
   één regel, dan gaat het als geheel naar de tweede regel in plaats van één
   los woord. Op een telefoon breekt het binnen zichzelf, zoals voorheen. */
.final-cta .highlight { display: inline-block; }
.final-cta-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 480px) {
    .final-cta-buttons .btn { width: 100%; padding-left: 1rem; padding-right: 1rem; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
    background-color: var(--color-brand-blue);
    color: var(--color-pure-white);
    padding: 5rem 0 2rem;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    position: relative;
}
.footer-grid {
    display: grid;
    /* max-content: 'Tickets via Weeztix ↗' breekt niet af met de pijl alleen. */
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(max-content, 1fr));
    gap: 4rem;
    margin-bottom: 3.5rem;
}
.footer-col h4 {
    font-family: var(--font-body);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    color: var(--color-brand-orange-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-style: normal;
    font-weight: 700;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.75rem; color: rgba(255,255,255,0.8); }
/* Witregel tussen adres en mailadres (was een lege <li> met een <br>). */
.footer-col .footer-mail { margin-top: 2rem; }
.footer-col a { transition: color 0.3s; }
.footer-col a:hover { color: var(--color-brand-orange); }

/* Volledige lockup mét ondertitel: op 100px hoog is die ondertitel 9px. */
.footer-logo-img { height: 100px; width: auto; margin-bottom: 1.75rem; display: block; }
.footer-tagline {
    color: var(--color-pure-white);
    opacity: 0.8;
    font-size: 1rem;
    max-width: 300px;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
    flex-wrap: wrap;
    gap: 1rem;
}
.footer-legal { display: flex; gap: 1rem; }
.footer-legal a { transition: color 0.3s; }
.footer-legal a:hover { color: var(--color-brand-orange); }
/* ===== POWERED BY (footer credit) =====
   Hele zin is één link, rustig maar leesbaar (7:1 op navy). Bij hover
   wordt-ie wit en krijgt de onderstreping. Zelfde body-font als de rest
   van de footer.
*/
.powered-by {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    line-height: 1.4;
}
.powered-by-link {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    transition: color 0.2s ease;
}
.powered-by-link:hover {
    color: var(--color-pure-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* Telefoon: logo en navigatie over de hele breedte, contact en socials
   naast elkaar. Onder elkaar was de footer bijna twee schermen lang. */
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem 1rem; }
    .footer-grid > .footer-col:nth-child(-n+2) { grid-column: 1 / -1; }
    .footer-logo-img { height: 88px; }
}

/* ==========================================================================
   SPONSOR DETAIL SECTIES (per sponsor op sponsoren.html)
   ========================================================================== */
.sponsor-details { padding: 0; }

.sponsor-detail {
    padding: 4rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.sponsor-detail:first-of-type { padding-top: 2.5rem; }
.sponsor-detail:last-of-type { border-bottom: none; }

.sponsor-detail-header {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 4rem;
    align-items: start;
    margin-bottom: 3.5rem;
}
/* Sponsor zonder vacatures: geen extra lege ruimte voor de scheidingslijn. */
.sponsor-detail-header:last-child { margin-bottom: 0; }

/* ==========================================================================
   BOARD INTRO (groepsfoto + woordje bestuur op bestuur.html)
   ========================================================================== */
.board-intro-section {
    padding: 4rem 0 6rem;
}
.board-intro-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 4rem;
    align-items: start;
}
/* De tekst is vaak twee keer zo hoog als de foto: de foto blijft bij het
   lezen in beeld (75px = ingeklapte navbar). */
@media (min-width: 801px) {
    .board-intro-photo { position: sticky; top: calc(75px + 1.5rem); }
}
.board-intro-photo {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: #EFECE5;
    border-radius: 20px;
}
.board-intro-photo--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(17,17,17,0.65);
    font-style: italic;
}
.board-intro-content h2 {
    font-size: clamp(1.5rem, 0.6rem + 2vw, 2.5rem);
    margin-bottom: 1.5rem;
}
.board-intro-body p {
    line-height: 1.7;
    margin-bottom: 1rem;
    color: #333;
    font-size: 1.05rem;
}
.board-intro-body p:last-child { margin-bottom: 0; }
@media (max-width: 800px) {
    .board-intro-section { padding: 2rem 0 4rem; }
    .board-intro-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.sponsor-detail-logo-box {
    aspect-ratio: 1;
    background: #EFECE5;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem;
    width: 100%;
}
.sponsor-detail-logo-box svg,
.sponsor-detail-logo-box img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
/* Logo's met een witte achtergrond (geen transparant bestand) lossen zo op
   in het beige vlak in plaats van als wit stickertje te ogen. */
.sponsor-detail-logo-box img { mix-blend-mode: multiply; }

.sponsor-detail-content { padding-top: 0.5rem; }

.sponsor-detail-tagline {
    color: var(--color-brand-orange-deep);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.sponsor-detail-content h2 {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    margin-bottom: 1.75rem;
}

.sponsor-detail-body p {
    font-size: 1.05rem;
    color: #444;
    margin-bottom: 1.25rem;
    line-height: 1.7;
}

.sponsor-detail-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* Tablet en liggende telefoon: logo klein naast de tekst, zoals op desktop.
   Telefoon: een lage beige band met het logo erin. Voorheen begon elke
   sponsor met een vierkant van 280px, op een liggende telefoon een heel scherm. */
@media (max-width: 900px) {
    .sponsor-detail-header {
        grid-template-columns: clamp(180px, 28vw, 250px) minmax(0, 1fr);
        gap: 2rem;
    }
    .sponsor-detail-logo-box {
        max-width: none;
        padding: 1.25rem;
    }
}
@media (max-width: 640px) {
    .sponsor-detail-header {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
        margin-bottom: 2.5rem;
    }
    .sponsor-detail-logo-box {
        aspect-ratio: auto;
        height: clamp(130px, 40vw, 170px);
        padding: 1.5rem 2rem;
    }
    .sponsor-detail-logo-box img { max-width: min(100%, 220px); }
}

/* VACANCY CARDS */
.vacancies-title {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--color-ink);
}
.vacancies-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: rgba(0,0,0,0.1);
}

/* Altijd twee kolommen (één op een telefoon): een enkele vacature werd
   anders 1200px breed, met regels van 160 tekens. */
.vacancies-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 640px) { .vacancies-grid { grid-template-columns: minmax(0, 1fr); } }

.vacancy-card {
    background: var(--color-pure-white);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.4s var(--ease-loeihard);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.vacancy-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-brand-orange);
    box-shadow: 0 12px 30px rgba(0,0,0,0.05);
}

.vacancy-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Tint van 5%: daarop haalt diep-oranje tekst op een witte kaart 4,5:1
   (bij 8% of meer zakt dat eronder). */
.vacancy-meta-pill {
    background: rgba(var(--color-brand-orange-rgb), 0.05);
    color: var(--color-brand-orange-deep);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.vacancy-meta-loc {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.vacancy-card h4 {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    font-style: italic;
    line-height: 1.3;
    color: var(--color-ink);
}

.vacancy-desc {
    font-size: 0.9rem !important;
    color: #666 !important;
    line-height: 1.5 !important;
    margin-bottom: 1.25rem !important;
    flex: 1;
}

.vacancy-arrow {
    color: var(--color-brand-orange-deep);
    font-weight: 600;
    font-size: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: auto;
}

/* ==========================================================================
   EVENTS PAGINA — AGENDA + SLIDESHOW
   ========================================================================== */
.events-section { padding: 5rem 0; }
.events-slideshow-section { padding: 5rem 0 6rem; overflow: hidden; }

/* === AGENDA (aankomende events) === */
.agenda-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.agenda-item {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: 2.5rem;
    padding: 1.75rem 2rem;
    background: var(--color-pure-white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    align-items: center;
    transition: transform 0.4s var(--ease-loeihard), border-color 0.4s ease, box-shadow 0.4s ease;
    text-decoration: none;
    color: inherit;
}
/* Alleen met een muis: op touch bleef de kaart na een tik verschoven staan. */
@media (hover: hover) {
    .agenda-item:hover {
        transform: translateX(6px);
        border-color: var(--color-brand-orange);
        box-shadow: 0 12px 30px rgba(0,0,0,0.05);
    }
}

.agenda-date {
    text-align: center;
    border-right: 1px solid rgba(0,0,0,0.08);
    padding-right: 1.5rem;
    line-height: 1;
}
.agenda-date-day {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 900;
    font-style: italic;
    color: var(--color-ink);
    letter-spacing: -0.02em;
}
.agenda-date-month {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    color: var(--color-brand-orange-deep);
    font-weight: 700;
    margin-top: 0.5rem;
}
.agenda-date-year {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
    letter-spacing: 1px;
}

.agenda-info h3 {
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    color: var(--color-ink);
    line-height: 1.2;
    text-wrap: balance;
}
.agenda-info-meta {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    display: flex;
    gap: 0.5rem 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}
/* Zelfde 5%-tint als .vacancy-meta-pill, om dezelfde reden. */
.agenda-info-meta .pill {
    background: rgba(var(--color-brand-orange-rgb), 0.05);
    color: var(--color-brand-orange-deep);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.agenda-cta {
    color: var(--color-ink);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
}
.agenda-cta .arrow {
    width: 36px; height: 36px;
    background: var(--color-brand-orange);
    color: var(--color-on-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s var(--ease-loeihard);
    font-size: 1rem;
    font-weight: 700;
}
@media (hover: hover) {
    .agenda-item:hover .agenda-cta .arrow { transform: translateX(5px); }
}

@media (max-width: 768px) {
    .agenda-item {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.5rem;
    }
    .agenda-date {
        border-right: none;
        padding-right: 0;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        text-align: left;
        display: flex;
        align-items: baseline;
        gap: 0.75rem;
    }
    .agenda-date-day { font-size: 2rem; }
    .agenda-date-month, .agenda-date-year { margin-top: 0; }
    .agenda-cta { justify-content: space-between; }
}

/* === SLIDESHOW (hoe het was) === */
.events-slideshow { position: relative; }

.slideshow-track-wrapper {
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.06);
    background: var(--color-pure-white);
}

.slideshow-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.slideshow-track::-webkit-scrollbar { display: none; }

.slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 460px;
}

.slide-image {
    background-size: cover;
    background-position: center;
    background-color: #EFECE5;
    position: relative;
}

/* Multi-photo cycler binnen een slide */
.slide-image[data-photos] { cursor: pointer; }
.slide-image[data-photos]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.25) 0%, transparent 30%);
    pointer-events: none;
    transition: opacity 0.3s;
}
.slide-image-counter {
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-ink);
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.slide-image-counter::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-brand-orange);
}
/* Foto-navigatie pijlen binnen een slide */
.slide-photo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-ink);
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease;
    z-index: 3;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    padding: 0;
}
.slide-photo-nav.prev { left: 1rem; }
.slide-photo-nav.next { right: 1rem; }
.slide-photo-nav:focus-visible { opacity: 1; }
.slide-photo-nav:active {
    background: var(--color-brand-orange);
    color: var(--color-on-orange);
}
@media (hover: hover) {
    .slide-photo-nav:hover {
        background: var(--color-brand-orange);
        color: var(--color-on-orange);
    }
}
/* Met een muis verschijnen de pijlen pas als je over de foto gaat (of bij
   toetsenbordfocus). Op touchscreens bestaat geen hover: daar staan ze altijd
   in beeld, anders zag je op een tablet niet dat er meer foto's zijn. */
@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
    .slide-photo-nav { opacity: 0; }
    .slide-image[data-photos]:hover .slide-photo-nav,
    .slide-photo-nav:focus-visible { opacity: 1; }
}
.slide-photo-nav svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
}
@media (max-width: 640px) {
    .slide-photo-nav.prev { left: 0.5rem; }
    .slide-photo-nav.next { right: 0.5rem; }
}

.slide-content {
    padding: 3.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slide-date {
    color: var(--color-brand-orange-deep);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.slide-content h3 {
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    line-height: 1.05;
    margin-bottom: 1.25rem;
    color: var(--color-ink);
    text-wrap: balance;
}

.slide-meta {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.slide-content p {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* minmax(0, 1fr) + min-width: 0: zonder die twee rekt de foto (aspect-ratio)
   de kolom breder op dan de slide, waardoor tekst op telefoons rechts
   buiten de kaart viel. */
@media (max-width: 900px) {
    .slide { grid-template-columns: minmax(0, 1fr); min-height: auto; }
    .slide > * { min-width: 0; }
    .slide-image { aspect-ratio: 4/3; }
    .slide-content { padding: 2rem; }
}
/* Telefoon liggend: foto en tekst naast elkaar, zodat een slide in één scherm
   past. Alleen de slideshow op de homepage; de kaarten op /events hebben een
   eigen regel. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
    .events-slideshow .slide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 0; }
    .events-slideshow .slide-image { aspect-ratio: auto; }
    .events-slideshow .slide-content { padding: 1.5rem 1.75rem; }
    .events-slideshow .slide-date { margin-bottom: 0.5rem; }
    .events-slideshow .slide-content h3 { font-size: clamp(1.15rem, 2.6vw, 1.6rem); margin-bottom: 0.75rem; }
    .events-slideshow .slide-meta { margin-bottom: 0.75rem; }
    .events-slideshow .slide-content p { font-size: 0.95rem; line-height: 1.55; }
}

.slideshow-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.slideshow-btn {
    background: var(--color-pure-white);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 999px;
    width: 52px;
    height: 52px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    transition: all 0.4s var(--ease-loeihard);
    color: var(--color-ink);
    padding: 0;
    flex-shrink: 0;
}
.slideshow-btn:active {
    background: var(--color-brand-orange);
    color: var(--color-on-orange);
    border-color: var(--color-brand-orange);
}
@media (hover: hover) {
    .slideshow-btn:hover {
        background: var(--color-brand-orange);
        color: var(--color-on-orange);
        border-color: var(--color-brand-orange);
        transform: translateY(-2px);
    }
}

.slideshow-dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.slideshow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0,0,0,0.2);
    /* Doorzichtige rand: onzichtbaar, maar in Windows Hoog contrast blijft de stip zo zichtbaar. */
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}
.slideshow-dot.active {
    background: var(--color-brand-orange);
    width: 28px;
    border-radius: 999px;
}

.slideshow-counter {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-left: 1rem;
    white-space: nowrap;
}
.slideshow-counter .curr { color: var(--color-ink); }
/* Op 320-360px paste de rij niet: de ronde knoppen werden ovaal. */
@media (max-width: 400px) {
    .slideshow-nav { gap: 0.75rem; }
}
/* Telefoon: de oranje stip laat al zien waar je bent. */
@media (max-width: 480px) {
    .slideshow-counter { display: none; }
}
/* Touchscreens: een groter (onzichtbaar) tikvlak rond de stippen van 8px. */
@media (pointer: coarse) {
    .slideshow-dots { gap: 1rem; }
    .slideshow-dot { position: relative; }
    .slideshow-dot::after { content: ''; position: absolute; inset: -12px -8px; }
}

/* ==========================================================================
   EVENT RECAP LIST (op events.html — scrollbare lijst, geen slideshow)
   ========================================================================== */
.event-recap-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.event-recap-item {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: var(--color-pure-white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 20px;
    overflow: hidden;
    min-height: 420px;
    transition: transform 0.4s var(--ease-loeihard), box-shadow 0.4s var(--ease-loeihard);
}
@media (hover: hover) {
    .event-recap-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    }
}

.event-recap-item .slide-image {
    min-height: 420px;
}

.event-recap-item .slide-content {
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* De min-height van 280px gaf de foto via aspect-ratio een minimale breedte
   van 373px, breder dan een telefoon: de kaart knipte dan de rechterkant (met
   de volgende-pijl en de teller) eraf. width: 100% houdt de foto in de kaart. */
@media (max-width: 900px) {
    .event-recap-item { grid-template-columns: minmax(0, 1fr); min-height: auto; }
    .event-recap-item > * { min-width: 0; }
    .event-recap-item .slide-image { width: 100%; aspect-ratio: 4/3; min-height: 280px; }
    .event-recap-item .slide-content { padding: 2rem; }
}
@media (max-width: 480px) {
    .event-recap-item .slide-content { padding: 1.75rem 1.5rem; }
}
/* Telefoon liggend: foto en tekst naast elkaar, zodat een hele poster en de
   titel samen in één scherm passen. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
    /* clip in plaats van hidden: dan werkt sticky voor de foto, die zo naast
       een lange tekst in beeld blijft. */
    .event-recap-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; overflow: clip; }
    .event-recap-item .slide-image { width: 100%; min-height: 0; aspect-ratio: 4 / 3; align-self: start; position: sticky; top: calc(var(--header-height) + 1rem); }
    .event-recap-item .slide-content { padding: 1.5rem 1.75rem; }
    /* De tekstkolom is hier smal: lange woorden als 'SPONSOREVENEMENT' moeten passen. */
    .event-recap-item .slide-content h3 { font-size: clamp(1.2rem, 2.8vw, 1.6rem); overflow-wrap: break-word; }
}

/* ==========================================================================
   EERDERE EVENTS PAGINA (archief — pure data per bestuursjaar)
   ========================================================================== */
.events-archive { padding: 4rem 0 6rem; }

.archive-year-group {
    padding: 2.5rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.archive-year-group:first-of-type { padding-top: 0; }
.archive-year-group:last-of-type { border-bottom: none; }

.archive-year-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.archive-year-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.15rem;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 999px;
    background: var(--color-pure-white);
    color: var(--color-ink);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: border-color 0.3s, color 0.3s;
}
@media (hover: hover) {
    .archive-year-nav a:hover { border-color: var(--color-brand-orange); color: var(--color-brand-orange-deep); }
}

.archive-year-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    /* Groter dan de eventtitels erin, zodat een nieuw jaar ook als nieuw jaar oogt. */
    font-size: clamp(1.75rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
    color: var(--color-ink);
    letter-spacing: -0.01em;
}

.archive-event-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 2rem;
    padding: 1.1rem 0;
    align-items: baseline;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.archive-event-row:last-child { border-bottom: none; }

.archive-event-date {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--color-brand-orange-deep);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.archive-event-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-ink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.archive-event-meta {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .archive-event-row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
        padding: 1rem 0;
    }
    .archive-event-meta { white-space: normal; }
}

/* ==========================================================================
   PAST BOARDS LINK (op bestuur.html — subtiel)
   ========================================================================== */
.past-boards-link {
    padding: 0.5rem 0 4rem;
    text-align: center;
}

/* ==========================================================================
   VORIGE BESTUREN PAGINA (archief — pure data, geen marketing)
   ========================================================================== */
.past-boards { padding: 4rem 0 6rem; }

.past-board-item {
    padding: 2.5rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.past-board-item:first-child { padding-top: 0; }
.past-board-item:last-child { border-bottom: none; }

.past-board-year {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.6rem;
    color: var(--color-ink);
    margin-bottom: 2rem;
    letter-spacing: -0.01em;
}

/* Flex in plaats van grid: een onvolledige laatste rij (een bestuur van 7)
   staat dan in het midden in plaats van één persoon links. */
.past-board-avatars {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 1rem;
}
.past-board-avatar { flex: 0 0 calc((100% - 5 * 1rem) / 6); min-width: 0; text-align: center; }
@media (max-width: 900px) {
    .past-board-avatar { flex-basis: calc((100% - 2 * 1rem) / 3); }
}
@media (max-width: 480px) {
    .past-board-avatar { flex-basis: calc((100% - 1rem) / 2); }
}
.past-board-avatar .avatar {
    width: 88px;
    height: 88px;
    margin: 0 auto 0.75rem;
}
.past-board-avatar-name {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.2;
    margin-bottom: 0.25rem;
    color: var(--color-ink);
}
.past-board-avatar-role {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow-wrap: anywhere;
}

/* Socials op contact.html — losse spans, zodat een niet-ingestelde social
   verdwijnt zonder een zwevend scheidingsteken achter te laten. */
.socials-inline-list { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* Links midden in lopende tekst: onderstreept, want alleen kleur valt niet
   op voor wie kleuren slecht onderscheidt. */
.inline-link {
    color: var(--color-brand-orange-deep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.inline-link:hover { text-decoration-thickness: 2px; }

/* De naam van de stamkroeg ('t Lempke) niet over twee regels verdelen. Als
   inline-block: een (later ingevulde) lange naam breekt dan nog wel binnen zichzelf. */
[data-setting='stamkroeg_naam'] { display: inline-block; }

/* ==========================================================================
   NIEUWS (nieuws.html + teaser op de homepage)
   ========================================================================== */
.news-section { padding: 4rem 0 6rem; }

/* Nieuwspagina: hele berichten, dus één leeskolom in plaats van een raster. */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 860px;
}

/* Homepage-teaser: korte samenvattingen naast elkaar. */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
@media (max-width: 1024px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .news-grid { grid-template-columns: 1fr; } }
/* Eén bericht: een brede kaart met de foto ernaast, in plaats van één smalle
   kaart naast een lege halve rij. */
@media (min-width: 641px) {
    .news-grid > .news-card:only-child { grid-column: 1 / -1; flex-direction: row; }
    .news-grid > .news-card:only-child .news-card-media { flex: 0 0 50%; width: 50%; height: auto; align-self: stretch; }
    .news-grid > .news-card:only-child .news-card-body { justify-content: center; padding: clamp(1.75rem, 4vw, 3rem); }
    .news-grid > .news-card:only-child .news-card-title { font-size: clamp(1.4rem, 2.4vw, 2rem); }
}

.news-card {
    display: flex;
    flex-direction: column;
    background: var(--color-pure-white);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.4s var(--ease-loeihard), box-shadow 0.4s var(--ease-loeihard);
}
.news-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); }

.news-card-media {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #EFECE5;
    background-size: cover;
    background-position: center;
}

.news-card-body { padding: 1.75rem; display: flex; flex-direction: column; flex: 1; }

.news-date {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-brand-orange-deep);
    margin-bottom: 0.75rem;
}

.news-card-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.4rem;
    line-height: 1.15;
    margin-bottom: 0.85rem;
    color: var(--color-ink);
    text-wrap: balance;
}

.news-card-summary { color: #555; font-size: 0.98rem; line-height: 1.6; }
/* Artikeltekst: 16px op een smalle telefoon, 18px vanaf een tablet. De p's
   erven dat (de algemene p-regel zette ze anders altijd op 18px). */
.news-card-body-text { margin-top: 1rem; color: #555; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); line-height: 1.7; }
.news-card-body-text p { font-size: inherit; line-height: inherit; }
/* De intro staat tussen titel en tekst in: iets groter en steviger dan de tekst. */
.news-list .news-card-summary { font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.1875rem); line-height: 1.5; font-weight: 500; }
.news-card-body-text p + p { margin-top: 0.85rem; }

.news-card-link {
    margin-top: 1.5rem;
    align-self: flex-start;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-brand-orange-deep);
    border-bottom: 2px solid var(--color-brand-orange-deep);
    padding-bottom: 2px;
}

.news-empty { text-align: center; padding: 3rem; color: var(--color-text-muted); }

/* Teaser op de homepage */
.news-teaser-section { padding: 2rem 0 5rem; }
/* Zelfde koptypografie als de sponsoren-sectie ernaast, anders valt dit blok
   visueel uit de toon op de homepage. */
.news-teaser-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2.5rem;
}
.news-teaser-header h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.news-teaser-header p { font-size: 1.125rem; color: #555; margin-top: 1rem; max-width: 500px; }
.news-teaser-header .btn-link { white-space: nowrap; }
@media (max-width: 640px) {
    .news-card-body { padding: 1.5rem; }
}
@media (max-width: 480px) {
    .news-list .news-card-body { padding: 1.5rem 1.25rem; }
}
/* Telefoon liggend: de nieuwsfoto past in één scherm (75px = navbar). */
@media (orientation: landscape) and (max-height: 500px) {
    .news-list img.news-card-media {
        max-height: calc(100vh - 75px - 2rem);
        max-height: calc(100svh - 75px - 2rem);
    }
}

/* ==========================================================================
   SMALLE SCHERMEN (telefoons)
   Montserrat 900 in hoofdletters is breed. Lange Nederlandse woorden als
   'GASTCOLLEGES.' of 'VASTGOEDWERELD.' pasten op een telefoon niet in hun
   vak: ze werden afgeknipt, of maakten de hele pagina breder dan het
   scherm (dan zoomt de browser uit). Onder 640px schalen de koppen daarom
   mee met de schermbreedte, zodat het breedste woord ook op 320px past.
   Het maximum is steeds de grootte die er boven 640px al stond.
   overflow-wrap is het vangnet voor titels uit de database: een woord dat
   zelfs dan niet past, breekt af in plaats van buiten beeld te lopen.
   ========================================================================== */
@media (max-width: 640px) {
    h1, h2, h3, h4,
    .faq-question,
    .bio-name,
    .news-card-title,
    .notfound-link-title { overflow-wrap: anywhere; }

    .page-hero h1 { font-size: clamp(1.75rem, 9.5vw, 2.8rem); }
    .section-header h2,
    .sponsors-header h2,
    .news-teaser-header h2,
    .recap-header h2,
    .board-section h2 { font-size: clamp(1.75rem, 10vw, 2.5rem); }
    .vriendje-wrapper h2 { font-size: clamp(1.6rem, 8.5vw, 2.5rem); }
    .manifest-grid h2 { font-size: clamp(1.4rem, 7.8vw, 2rem); }
    .final-cta h2 { font-size: clamp(2rem, 13vw, 3rem); }
    .slide-content h3 { font-size: clamp(1.15rem, 5.9vw, 1.6rem); }

    /* De desktopmarges tussen secties gaven op een telefoon lege banden van
       een kwart scherm. */
    .features-section { padding: 4rem 0; }
    .timeline-section { padding: 3.5rem 0 4rem; }
    .benefits-section, .steps-section, .become-sponsor { padding: 3.5rem 0; }
    .faq-section { padding: 3.5rem 0 4rem; }
    .final-cta { padding: 4.5rem 0; }
    .section-header { margin-bottom: 2rem; }

    /* Homepage */
    .manifest-section { padding: 3.5rem 0 2.5rem; }
    .news-teaser-section { padding-bottom: 3rem; }
    .news-teaser-section + .sponsors-section { padding-top: 3rem; }
    .home-agenda { padding-top: 3.5rem; }
    .events-slideshow-section { padding: 4rem 0 3.5rem; }
    .board-section { padding: 3.5rem 0; }
    /* 9,4vw: 'BESTUUR VAN 6.' past dan op één regel (geen los '6.') */
    .board-section h2 { font-size: clamp(1.75rem, 9.4vw, 2.5rem); margin-bottom: 2.5rem; }
    .board-avatars { gap: 2rem 3rem; margin-bottom: 2.5rem; }
}

/* Telefoon liggend: kop en intro van een subpagina samen in het eerste scherm.
   De kop schaalt hier met de schermhoogte in plaats van de breedte. */
@media (orientation: landscape) and (max-height: 500px) {
    .page-hero { min-height: 0; padding: calc(var(--header-height) + 1.5rem) 0 2.5rem; }
    .page-hero .breadcrumb { margin-bottom: 1rem; }
    .page-hero h1 { font-size: clamp(1.9rem, 10vh, 2.8rem); margin-bottom: 1rem; }
    .page-hero .subtitle { font-size: 1.05rem; }
    .page-hero .highlight { display: inline-block; }

    /* Ook tussen de secties: de desktopmarges waren hier een half scherm. */
    .features-section { padding: 3rem 0; }
    .timeline-section { padding: 2.5rem 0 3rem; }
    .benefits-section, .steps-section, .become-sponsor { padding: 2.5rem 0; }
    .faq-section { padding: 2.5rem 0 3rem; }
    .final-cta { padding: 3.5rem 0; }
    .section-header { margin-bottom: 2rem; }
}

/* ==========================================================================
   404 (pagina niet gevonden)
   ========================================================================== */
.notfound-section { padding: 4rem 0 6rem; }
.notfound-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
/* Altijd vier kaarten: 4 naast elkaar, anders 2 x 2, op een telefoon onder
   elkaar. Met auto-fit werd het op tablets 3 + 1. */
@media (max-width: 1200px) { .notfound-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .notfound-links { grid-template-columns: minmax(0, 1fr); } }
.notfound-link {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.75rem;
    background: var(--color-pure-white);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 16px;
    transition: transform 0.4s var(--ease-loeihard), border-color 0.4s ease, box-shadow 0.4s ease;
}
.notfound-link:hover {
    transform: translateY(-4px);
    border-color: var(--color-brand-orange);
    box-shadow: 0 12px 30px rgba(0,0,0,0.05);
}
.notfound-link-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.3rem;
    line-height: 1.15;
    color: var(--color-ink);
}
.notfound-link-text { font-size: 0.95rem; line-height: 1.5; color: #555; }
.notfound-link-cta {
    margin-top: auto;
    padding-top: 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-brand-orange-deep);
}

/* ==========================================================================
   PRIVACYVERKLARING (lange lopende tekst)
   ========================================================================== */
.legal-section { padding: 4rem 0 6rem; }
.legal-layout {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
}
/* Inhoudsopgave blijft naast de tekst staan; 75px = ingeklapte navbar. */
.legal-toc {
    position: sticky;
    top: calc(75px + 1.5rem);
    padding: 1.5rem;
    background: var(--color-pure-white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
}
.legal-toc-title {
    margin-bottom: 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-brand-orange-deep);
}
.legal-toc ol { list-style: none; display: grid; gap: 0.65rem; }
.legal-toc a { font-size: 0.95rem; font-weight: 600; line-height: 1.35; color: var(--color-ink); }
.legal-toc a:hover { color: var(--color-brand-orange-deep); text-decoration: underline; }

/* Leesbare regellengte voor een lange tekst: ±70 tekens per regel. (68ch was
   ±100 tekens: 'ch' is de breedte van een '0', en die is in dit lettertype breed.) */
.prose { max-width: 36rem; }
.prose section + section { margin-top: 3.5rem; }
.prose h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin-bottom: 1.25rem; text-wrap: balance; }
.prose h3 {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.15rem;
    margin: 2rem 0 0.6rem;
}
.prose p, .prose li { font-size: 1.05rem; line-height: 1.7; color: #333; }
.prose p + p, .prose ul + p, .prose address + p { margin-top: 1rem; }
.prose ul { margin-top: 0.75rem; padding-left: 1.25rem; }
.prose li + li { margin-top: 0.5rem; }
.prose li::marker { color: var(--color-brand-orange); }
.prose address {
    margin: 1.25rem 0;
    padding: 1.25rem 1.5rem;
    font-style: normal;
    font-size: 1.05rem;
    line-height: 1.7;
    background: var(--color-pure-white);
    border-left: 3px solid var(--color-brand-orange);
    border-radius: 0 12px 12px 0;
}
.prose a {
    color: var(--color-brand-orange-deep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    overflow-wrap: anywhere;
}
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { color: var(--color-ink); }
.prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
}
.legal-updated {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.08);
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

/* Eén kolom op smalle schermen én op lage (telefoon liggend): daar is de
   vastgezette inhoudsopgave hoger dan het scherm. */
@media (max-width: 900px), (max-height: 500px) {
    .legal-section { padding: 3rem 0 5rem; }
    .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .legal-toc { position: static; max-width: 36rem; }
}

/* ==========================================================================
   REVEAL ANIMATIE START STATES
   Alleen onder .js, die klasse zet het eerste scriptje in <head>. Zonder
   JavaScript blijft alles dus gewoon zichtbaar. script.js zet daarnaast
   'no-anim' op <html> als GSAP ontbreekt of als de bezoeker 'minder
   beweging' heeft ingesteld: dan staat alles meteen in de eindstand.
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(30px); }

.no-anim .reveal,
.no-anim .hero h1,
.no-anim .hero-sub,
.no-anim .hero-ctas {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   MINDER BEWEGING
   Voor wie dat in het besturingssysteem heeft ingesteld: geen lopende
   banden en geen overgangsanimaties. Smooth scroll, parallax en de
   fade-ins zet script.js zelf uit.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .marquee-content,
    .sponsors-marquee-track { animation: none; }
    /* De sponsorband staat stil; zelf scrollen houdt alle logo's bereikbaar. */
    .sponsors-marquee { overflow-x: auto; }
}

/* ==========================================================================
   HOOG CONTRAST (Windows)
   Het witte logo staat op een achtergrond die Windows door de systeemkleur
   vervangt: in een licht thema verdween de tekst. Een eigen navy vlak houdt
   het leesbaar. Knoppen krijgen een rand, anders verdween hun vorm.
   ========================================================================== */
@media (forced-colors: active) {
    .logo-img,
    .footer-logo-img {
        forced-color-adjust: none;
        background-color: var(--color-brand-blue);
        border-radius: 8px;
        padding: 4px;
    }
    .btn { border: 1px solid; }
}

/* ==========================================================================
   FOTO'S ALS <img>
   Event-, bestuurs- en nieuwsfoto's waren CSS-achtergronden: die laden
   allemaal meteen (43 stuks op /eerdere-events) en hebben geen alt-tekst.
   Als <img loading="lazy"> met object-fit: cover is de uitsnede dezelfde.
   ========================================================================== */
.slide-image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
img.avatar,
img.bio-image,
img.board-intro-photo,
img.news-card-media {
    display: block;
    object-fit: cover;
}
/* De hoogte volgt uit de aspect-ratio van de klasse. Zonder height: auto
   zou het height-attribuut winnen (dat staat er alleen voor de verhouding
   tijdens het laden). */
img.bio-image,
img.board-intro-photo,
img.news-card-media {
    width: 100%;
    height: auto;
}
/* Telefoon liggend: de hele groepsfoto in één scherm. */
@media (orientation: landscape) and (max-height: 500px) {
    img.board-intro-photo {
        width: auto;
        max-width: 100%;
        max-height: calc(100vh - 75px - 2rem);
        max-height: calc(100svh - 75px - 2rem);
        margin-inline: auto;
    }
}

/* Melding bij een lege lijst ('Geen sponsoren toegevoegd.'). */
.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   AGENDA OP DE HOMEPAGE ('Binnenkort bij FOREAS') + LINKLOZE KAARTEN
   ========================================================================== */
/* Kop met de link ernaast ('Naar de agenda →'), zoals bij de sponsoren. */
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 2rem;
}
.section-header-row .btn-link { white-space: nowrap; }
/* 'Hoe het was' volgt direct en heeft zelf al ruimte erboven. */
.home-agenda { padding-bottom: 0; }

/* Een agenda-item of vacature zonder link is geen link: dan ook geen
   hover-effect dat suggereert dat je erop kunt klikken. */
.agenda-item--no-link:hover {
    transform: none;
    border-color: rgba(0,0,0,0.06);
    box-shadow: none;
}
.vacancy-card--no-link:hover {
    transform: none;
    border-color: rgba(0,0,0,0.08);
    box-shadow: none;
}
/* Een heel nieuwsartikel is geen link: niet optillen bij hover. */
.news-list .news-card:hover { transform: none; box-shadow: none; }

/* ==========================================================================
   CONTACTFORMULIER: spamcontrole, meldingen en bevestiging
   ========================================================================== */
/* Honeypot: buiten beeld in plaats van display: none, want dat herkennen
   sommige bots en dan vullen ze het veld juist niet in. */
.form-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Ruimte voor de Turnstile-widget, zodat de knop niet verspringt als die laadt. */
.form-turnstile { margin-top: 1.5rem; min-height: 65px; }
/* Onder 300px tekent contact.html de compacte widget (140px hoog): houd die
   ruimte meteen vrij, zodat de knop niet verspringt als hij verschijnt. */
@container (max-width: 299.98px) {
    .form-turnstile { min-height: 140px; }
}
.form-turnstile-help {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Lege meldingen nemen geen ruimte in, maar staan wel in de DOM: een
   live-regio die er al staat, lezen schermlezers betrouwbaar voor. */
.form-turnstile-help:empty,
.form-status:empty,
.field-error:empty { display: none; }

.form-status {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border-left: 3px solid #B42318;
    border-radius: 0 10px 10px 0;
    background: #FEF3F2;
    color: #7A271A;
    font-size: 0.95rem;
    line-height: 1.55;
}
/* Diep-oranje haalt op deze roze achtergrond net geen 4,5:1; onderstreept
   in de tekstkleur valt de link genoeg op. */
.form-status .inline-link { color: inherit; }

.form-privacy {
    margin-top: 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* Afgekeurd veld (de server noemt welke): rode rand plus uitleg eronder. */
.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"],
.form-group select[aria-invalid="true"] {
    border-color: #B42318;
    background: #FFFBFA;
}
.field-error {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #B42318;
}

/* Bevestiging die het formulier vervangt. Het vinkje is decoratie, dus
   leest een schermlezer het niet mee (zie ook .faq-question::after). */
.form-success::before {
    content: '✓';
    content: '✓' / '';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    background: var(--color-brand-orange);
    color: var(--color-on-orange);
    font-size: 1.5rem;
    font-weight: 700;
}
.form-wrapper.form-success h3 { margin-bottom: 1rem; }
/* De kop krijgt de focus zodat schermlezers erop uitkomen; een focusrand
   op een kop die je niet zelf hebt aangeklikt, verwart alleen. */
.form-success h3:focus { outline: none; }
/* 'anywhere': een lang e-mailadres breekt af in plaats van de kaart (en op
   een telefoon de hele pagina) breder te maken. */
.form-success p { margin-bottom: 1.75rem; overflow-wrap: anywhere; }
.form-wrapper.form-success .btn { width: auto; max-width: 100%; margin-top: 0; }

/* Op een smalle telefoon past de brede Turnstile-widget (min. 300px) zo
   nog naast de rand; daaronder kiest contact.html de compacte variant. */
@media (max-width: 480px) {
    .form-wrapper { padding: 1.75rem 1rem; }
    .form-wrapper.form-success .btn { padding-inline: 1.5rem; }
}