/* ==========================================================================
   Luxe secties voor alle pagina's (kaarten, overlappende foto's, panelen)
   Selectoren herhalen de pagina-klasse zodat ze de paginastijl altijd winnen.
   ========================================================================== */
:root { --lx-gold: #d6a95a; --lx-ease: cubic-bezier(.2, .7, .2, 1); }

.bp-about.bp-about .abo-moments__list > li {
    position: relative; background: #fffaf2; border: 1px solid rgba(63, 45, 34, .1);
    box-shadow: 0 34px 60px -40px rgba(40, 24, 14, .5);
    transition: translate .6s var(--lx-ease), box-shadow .6s var(--lx-ease);
}
.bp-about.bp-about .abo-moments__list > li::before {
    content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 56px;
    background: var(--lx-gold); transition: width .8s var(--lx-ease); pointer-events: none;
}
.bp-about.bp-about .abo-moments__list > li:hover { translate: 0 -6px; box-shadow: 0 46px 70px -38px rgba(40, 24, 14, .6); }
.bp-about.bp-about .abo-moments__list > li:hover::before { width: 100%; }
.bp-mtc.bp-mtc .mtc-facts > .mtc-fact {
    position: relative; background: #fffaf2; border: 1px solid rgba(63, 45, 34, .1);
    box-shadow: 0 34px 60px -40px rgba(40, 24, 14, .5);
    transition: translate .6s var(--lx-ease), box-shadow .6s var(--lx-ease);
}
.bp-mtc.bp-mtc .mtc-facts > .mtc-fact::before {
    content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 56px;
    background: var(--lx-gold); transition: width .8s var(--lx-ease); pointer-events: none;
}
.bp-mtc.bp-mtc .mtc-facts > .mtc-fact:hover { translate: 0 -6px; box-shadow: 0 46px 70px -38px rgba(40, 24, 14, .6); }
.bp-mtc.bp-mtc .mtc-facts > .mtc-fact:hover::before { width: 100%; }
.bp-party.bp-party .party-approach__steps > .party-step {
    position: relative; background: #fffaf2; border: 1px solid rgba(63, 45, 34, .1);
    box-shadow: 0 34px 60px -40px rgba(40, 24, 14, .5);
    transition: translate .6s var(--lx-ease), box-shadow .6s var(--lx-ease);
}
.bp-party.bp-party .party-approach__steps > .party-step::before {
    content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 56px;
    background: var(--lx-gold); transition: width .8s var(--lx-ease); pointer-events: none;
}
.bp-party.bp-party .party-approach__steps > .party-step:hover { translate: 0 -6px; box-shadow: 0 46px 70px -38px rgba(40, 24, 14, .6); }
.bp-party.bp-party .party-approach__steps > .party-step:hover::before { width: 100%; }
.bp-party.bp-party .party-occasions__list > .party-occasion {
    position: relative; background: #fffaf2; border: 1px solid rgba(63, 45, 34, .1);
    box-shadow: 0 34px 60px -40px rgba(40, 24, 14, .5);
    transition: translate .6s var(--lx-ease), box-shadow .6s var(--lx-ease);
}
.bp-party.bp-party .party-occasions__list > .party-occasion::before {
    content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 56px;
    background: var(--lx-gold); transition: width .8s var(--lx-ease); pointer-events: none;
}
.bp-party.bp-party .party-occasions__list > .party-occasion:hover { translate: 0 -6px; box-shadow: 0 46px 70px -38px rgba(40, 24, 14, .6); }
.bp-party.bp-party .party-occasions__list > .party-occasion:hover::before { width: 100%; }
.bp-fotos.bp-fotos .fg-notes__rows > .fg-note {
    position: relative; background: #fffaf2; border: 1px solid rgba(63, 45, 34, .1);
    box-shadow: 0 34px 60px -40px rgba(40, 24, 14, .5);
    transition: translate .6s var(--lx-ease), box-shadow .6s var(--lx-ease);
}
.bp-fotos.bp-fotos .fg-notes__rows > .fg-note::before {
    content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 56px;
    background: var(--lx-gold); transition: width .8s var(--lx-ease); pointer-events: none;
}
.bp-fotos.bp-fotos .fg-notes__rows > .fg-note:hover { translate: 0 -6px; box-shadow: 0 46px 70px -38px rgba(40, 24, 14, .6); }
.bp-fotos.bp-fotos .fg-notes__rows > .fg-note:hover::before { width: 100%; }
.bp-bil.bp-bil .bp-open__card {
    position: relative; background: #fffaf2; border: 1px solid rgba(63, 45, 34, .1);
    box-shadow: 0 34px 60px -40px rgba(40, 24, 14, .5);
    transition: translate .6s var(--lx-ease), box-shadow .6s var(--lx-ease);
}
.bp-bil.bp-bil .bp-open__card::before {
    content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 56px;
    background: var(--lx-gold); transition: width .8s var(--lx-ease); pointer-events: none;
}
.bp-bil.bp-bil .bp-open__card:hover { translate: 0 -6px; box-shadow: 0 46px 70px -38px rgba(40, 24, 14, .6); }
.bp-bil.bp-bil .bp-open__card:hover::before { width: 100%; }

/* Lijsten met kaarten krijgen een trapsgewijze verspringing */
.bp-about.bp-about .abo-moments__list { display: grid; gap: 24px; }
.bp-about.bp-about .abo-moments__list > li { padding: 32px 38px; }
.bp-about.bp-about .abo-moments__list > li:nth-child(2) { margin-left: clamp(0px, 3vw, 48px); }
.bp-about.bp-about .abo-moments__list > li:nth-child(3) { margin-left: clamp(0px, 6vw, 96px); }
.bp-mtc.bp-mtc .mtc-facts > .mtc-fact { padding: 30px 32px; }
.bp-mtc.bp-mtc .mtc-facts > .mtc-fact:nth-child(2) { margin-top: 34px; }
.bp-fotos.bp-fotos .fg-notes__rows > .fg-note { padding: 30px 34px; }
.bp-party.bp-party .party-approach__steps > .party-step { padding: 34px 32px; }
.bp-party.bp-party .party-approach__steps > .party-step:nth-child(2) { margin-top: 36px; }
.bp-party.bp-party .party-occasions__list > .party-occasion { padding-left: 30px; padding-right: 30px; }

.bp-vd.bp-vd .vd-moment__panel { box-shadow: 0 60px 100px -50px rgba(24, 14, 9, .55), 0 0 0 1px rgba(216, 170, 94, .32); }
.bp-vh.bp-vh .vh-moments__panel { box-shadow: 0 60px 100px -50px rgba(24, 14, 9, .55), 0 0 0 1px rgba(216, 170, 94, .32); }
.bp-vb.bp-vb .vb-moments__panel { box-shadow: 0 60px 100px -50px rgba(24, 14, 9, .55), 0 0 0 1px rgba(216, 170, 94, .32); }
.bp-c.bp-c .bp-c-formpanel { box-shadow: 0 60px 100px -50px rgba(24, 14, 9, .55), 0 0 0 1px rgba(216, 170, 94, .32); }
.bp-c.bp-c .bp-c-details { box-shadow: 0 60px 100px -50px rgba(24, 14, 9, .55), 0 0 0 1px rgba(216, 170, 94, .32); }
.bp-agenda.bp-agenda .ag-empty { box-shadow: 0 60px 100px -50px rgba(24, 14, 9, .55), 0 0 0 1px rgba(216, 170, 94, .32); }
.bp-mtc.bp-mtc .mtc-court-wrap { box-shadow: 0 60px 100px -50px rgba(24, 14, 9, .55), 0 0 0 1px rgba(216, 170, 94, .32); }
.bp-bil.bp-bil .bil-scoreboard { box-shadow: 0 60px 100px -50px rgba(24, 14, 9, .55), 0 0 0 1px rgba(216, 170, 94, .32); }
.bp-party.bp-party .party-faq__items > details { box-shadow: 0 60px 100px -50px rgba(24, 14, 9, .55), 0 0 0 1px rgba(216, 170, 94, .32); }

.bp-party.bp-party .party-faq__items > details { background: #fffaf2; padding: 0 28px; margin-bottom: 14px; transition: box-shadow .5s var(--lx-ease); }

/* Foto's: diepe schaduw en gouden binnenkader (outline blijft binnen de foto) */
.bp-about.bp-about .abo-photos__item img { box-shadow: 0 50px 80px -44px rgba(30, 16, 8, .6); outline: 1px solid rgba(255, 240, 215, .5); outline-offset: -14px; }
.bp-about.bp-about .abo-story__picture img { box-shadow: 0 50px 80px -44px rgba(30, 16, 8, .6); outline: 1px solid rgba(255, 240, 215, .5); outline-offset: -14px; }
.bp-about.bp-about .abo-gallery figure img { box-shadow: 0 50px 80px -44px rgba(30, 16, 8, .6); outline: 1px solid rgba(255, 240, 215, .5); outline-offset: -14px; }
.bp-bil.bp-bil .bil-story__photos figure img { box-shadow: 0 50px 80px -44px rgba(30, 16, 8, .6); outline: 1px solid rgba(255, 240, 215, .5); outline-offset: -14px; }
.bp-party.bp-party figure img { box-shadow: 0 50px 80px -44px rgba(30, 16, 8, .6); outline: 1px solid rgba(255, 240, 215, .5); outline-offset: -14px; }
.bp-fotos.bp-fotos .fg-gallery img { box-shadow: 0 50px 80px -44px rgba(30, 16, 8, .6); outline: 1px solid rgba(255, 240, 215, .5); outline-offset: -14px; }

/* Overlappende foto's */
.bp-about.bp-about .abo-photos__item { position: relative; }
.bp-about.bp-about .abo-photos__item:first-child { z-index: 1; }
.bp-about.bp-about .abo-photos__item:nth-child(2) { z-index: 2; margin-left: clamp(-120px, -7vw, -50px); }
.bp-bil.bp-bil .bil-story__photos figure { position: relative; }
.bp-bil.bp-bil .bil-story__photos figure:nth-child(2) { z-index: 2; margin-left: clamp(-110px, -6vw, -40px); }

@media (max-width: 1000px) {
    .bp-about.bp-about .abo-photos__item:nth-child(2),
    .bp-bil.bp-bil .bil-story__photos figure:nth-child(2),
    .bp-about.bp-about .abo-moments__list > li:nth-child(n),
    .bp-mtc.bp-mtc .mtc-facts > .mtc-fact:nth-child(n),
    .bp-party.bp-party .party-approach__steps > .party-step:nth-child(n) { margin-left: 0; margin-top: 0; }
}

/* Bijschriften blijven leesbaar naast een overlappende foto */
.bp-about.bp-about .abo-photos__item:first-child figcaption { padding-right: clamp(60px, 8vw, 130px); }
.bp-bil.bp-bil .bil-story__photos figure:first-child figcaption { padding-right: clamp(50px, 7vw, 120px); }

/* Stappen op de rode sectie: glazen kaarten met lichte tekst */
.bp-party.bp-party .party-approach__steps > .party-step {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(216, 170, 94, .38);
    box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .6);
}


/* ==========================================================================
   KLEUR EN DIEPTE: espresso, oxblood, ivoor en goud met verloop (klassen via motion.js)
   ========================================================================== */
:root {
    --lx-espresso: #1d1613;
    --lx-oxblood: #5e1d22;
    --lx-ivory: #f7f0e4;
    --lx-sand: #e6d6bd;
}

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

/* Fijne filmkorrel over de hele pagina: haalt het vlakke, digitale uit de kleuren */
body::after {
    content: ''; position: fixed; inset: 0; z-index: 1200; pointer-events: none; opacity: .045;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Rood wordt diep oxblood met een zachte lichtval */
html body .fx-oxblood.fx-oxblood {
    background-image:
        radial-gradient(90% 120% at 12% 0%, rgba(160, 52, 52, .55) 0%, rgba(160, 52, 52, 0) 60%),
        radial-gradient(70% 90% at 100% 100%, rgba(20, 5, 7, .55) 0%, rgba(20, 5, 7, 0) 70%),
        linear-gradient(180deg, #5a1e22 0%, #4b161b 100%);
}
/* Donker bruin krijgt een gouden gloed en een warme schaduw */
html body .fx-espresso.fx-espresso {
    background-image:
        radial-gradient(70% 90% at 88% 0%, rgba(216, 170, 94, .13) 0%, rgba(216, 170, 94, 0) 62%),
        radial-gradient(60% 80% at 0% 100%, rgba(120, 38, 30, .22) 0%, rgba(120, 38, 30, 0) 65%);
}
/* Lichte vlakken: ivoor met een vleugje goud, zand met diepte */
html body .fx-ivory.fx-ivory {
    background-image:
        radial-gradient(60% 55% at 0% 0%, rgba(216, 170, 94, .11) 0%, rgba(216, 170, 94, 0) 70%),
        linear-gradient(180deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, 0) 55%);
}
html body .fx-sand.fx-sand {
    background-image:
        radial-gradient(70% 60% at 100% 0%, rgba(255, 249, 238, .55) 0%, rgba(255, 249, 238, 0) 65%),
        linear-gradient(180deg, #ecdec8 0%, #dcc8a8 100%);
}

/* Gouden accent in koppen: gepolijst metaal in plaats van vlak geel */
.fx-gold {
    background-image: linear-gradient(100deg, #f7deA2 0%, #e0b468 36%, #b98a3e 68%, #ecc983 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Gevulde knoppen: lichte glans bovenin, diepte onderin */
body a.fx-btn.fx-btn {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, .18) 100%);
}

/* Gestapelde panelen: afdekken en smooth scroll */
.fx-cover { position: fixed; inset: 0; background: #0e0806; opacity: 0; pointer-events: none; z-index: 3; }
.fx-stack .fx-layer { box-shadow: 0 -50px 80px -40px rgba(10, 5, 3, .55); }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Typografische afwerking */
main h1, main h2 { text-wrap: balance; }
main p { text-wrap: pretty; }

/* Donkergroen (sportpagina's): alleen een gouden gloed, geen rode */
html body .fx-forest.fx-forest {
    background-image:
        radial-gradient(70% 90% at 88% 0%, rgba(216, 170, 94, .12) 0%, rgba(216, 170, 94, 0) 62%),
        linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .14));
}

/* Cursief accent in koppen: ruimte rechts zodat het verloop de laatste letter niet afsnijdt */
main h1 em, main h2 em, main h3 em { padding-right: .08em; }


/* ==========================================================================
   MOBIEL: sticky balk met Bel, Route en openingsstatus
   ========================================================================== */
.bp-mobilebar { display: none; }
@media (max-width: 900px) {
    body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .bp-mobilebar {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(31, 23, 19, .96);
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        border-top: 1px solid var(--bp-t-line-gold, rgba(214, 169, 90, .34));
    }
    .bp-mobilebar__status { margin: 0 0 8px; text-align: center; font: 600 13px/1.3 'DM Sans', Arial, sans-serif; color: #cdbfae; }
    .bp-mobilebar__status.is-open { color: var(--bp-t-brass, #d6a95a); }
    .bp-mobilebar__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .bp-mobilebar__actions a {
        display: flex; align-items: center; justify-content: center; min-height: 48px;
        font: 600 16px/1 'DM Sans', Arial, sans-serif; text-decoration: none;
        border: 1px solid var(--bp-t-brass, #d6a95a); color: var(--bp-t-brass, #d6a95a);
    }
    .bp-mobilebar__actions .bp-mobilebar__call { background: var(--bp-t-bordeaux, #7b2a2e); border-color: var(--bp-t-bordeaux, #7b2a2e); color: #fbf3e6; }
    .bp-mobilebar__actions a:active { transform: translateY(1px); }
}

/* Logo op een crème plaat: de rode logotekst is anders onleesbaar op de donkere balk */
.site-header.bp-site-header .bp-brand img {
    background: var(--bp-t-ivory, #f6efe3); border-radius: 50%; padding: 4px;
    width: 54px; height: 54px; object-fit: contain;
}


/* ==========================================================================
   FOTO'S: één gradering voor alle beelden (warm, iets minder verzadigd) en een zacht vignet
   ========================================================================== */
main img {
    filter: saturate(.88) contrast(1.04) sepia(.07) brightness(.99);
}
main img.fx-pre { filter: saturate(.88) contrast(1.04) sepia(.07) brightness(.99); }
.fx-frame::before {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(120% 100% at 50% 42%, rgba(18, 10, 6, 0) 52%, rgba(18, 10, 6, .4) 100%);
}


/* ==========================================================================
   CONTRAST: gedempte teksten verdiept tot minimaal 4,5:1 (gemeten per element)
   ========================================================================== */
html body .bp-mood__choice-text.bp-mood__choice-text.bp-mood__choice-text small { color: #6d574a; }
html body .bp-story__caption.bp-story__caption.bp-story__caption span { color: #615040; }
html body .bp-rules__index.bp-rules__index.bp-rules__index { color: #896c39; }
html body .abo-intro__aside.abo-intro__aside.abo-intro__aside { color: #756355; }
html body .abo-statement__top.abo-statement__top.abo-statement__top .abo-kicker.abo-kicker.abo-kicker { color: #dbb36d; }
html body .ag-preface__label.ag-preface__label.ag-preface__label { color: #695647; }
html body .ag-events__caption.ag-events__caption.ag-events__caption span { color: #766354; }
html body .fg-gallery__foot.fg-gallery__foot.fg-gallery__foot { color: #77675b; }
html body .bp-c-shortcut.bp-c-shortcut.bp-c-shortcut small { color: #6f6055; }
html body .bp-c-address__row.bp-c-address__row.bp-c-address__row dt { color: #68544a; }
html body .bp-c-formpanel__heading.bp-c-formpanel__heading.bp-c-formpanel__heading small { color: #7d6c5f; }
html body .bp-c-field.bp-c-field.bp-c-field span { color: #7f6f66; }
html body .bp-c-form__fineprint.bp-c-form__fineprint.bp-c-form__fineprint { color: #7c6d61; }
html body .bil-score__note.bil-score__note.bil-score__note { color: #695b51; }
html body .sport-extra-num.sport-extra-num.sport-extra-num { color: #7a6849; }
html body .logo-fixtures__eyebrow.logo-fixtures__eyebrow.logo-fixtures__eyebrow { color: #7b6645; }
html body .logo-fixtures__note.logo-fixtures__note.logo-fixtures__note { color: #616963; }
html body .bp-open__eyebrow.bp-open__eyebrow.bp-open__eyebrow { color: #7b623d; }
html body .bp-open__card.bp-open__card.bp-open__card small { color: #846c47; }
html body .mtc-note.mtc-note.mtc-note small { color: #74655a; }
html body .mtc-source.mtc-source.mtc-source { color: #655a51; }
html body .mtc-score__disclaimer.mtc-score__disclaimer.mtc-score__disclaimer { color: #766458; }
html body .vd-aside.vd-aside.vd-aside small { color: #7a6b60; }
html body .vd-moment__note.vd-moment__note.vd-moment__note span { color: #67584f; }
html body .vd-end__link.vd-end__link.vd-end__link small { color: #78695e; }
html body .vh-pullquote.vh-pullquote.vh-pullquote span { color: #79685d; }
html body .vh-moments__footer.vh-moments__footer.vh-moments__footer span { color: #67584f; }
html body .vh-closing__link.vh-closing__link.vh-closing__link small { color: #79685b; }
html body .vb-quote.vb-quote.vb-quote span { color: #78695b; }
html body .vb-moments__foot.vb-moments__foot.vb-moments__foot span { color: #68584d; }
html body .vb-close__link.vb-close__link.vb-close__link small { color: #79685b; }
html body .party-photo-caption.party-photo-caption.party-photo-caption span { color: #75675d; }
html body .party-approach__top.party-approach__top.party-approach__top .party-kicker.party-kicker.party-kicker { color: #dbb36d; }
html body .party-contact-meta__label.party-contact-meta__label.party-contact-meta__label { color: #726860; }
html body .party-form__header.party-form__header.party-form__header small { color: #6d5e53; }
html body .party-field.party-field.party-field span { color: #6a5f54; }
html body .fg-index-row.fg-index-row span { color: #6a5a4d; }
html body .fg-end.fg-end .fg-kicker.fg-kicker { color: #e2bd78; }
html body .bp-c-note.bp-c-note .bp-c-kicker.bp-c-kicker { color: #e2bd78; }


/* ==========================================================================
   HERO-LEESBAARHEID: donker verloop achter de tekst (element via motion.js)
   en een intro-animatie die nooit onder 60% dekking begint
   ========================================================================== */
.fx-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(120% 95% at 0% 55%, rgba(18, 11, 8, .8) 0%, rgba(18, 11, 8, .58) 40%, rgba(18, 11, 8, 0) 74%),
        linear-gradient(0deg, rgba(18, 11, 8, .55) 0%, rgba(18, 11, 8, 0) 38%);
}
.fx-scrim--soft {
    background:
        radial-gradient(110% 90% at 0% 55%, rgba(18, 11, 8, .5) 0%, rgba(18, 11, 8, .32) 40%, rgba(18, 11, 8, 0) 72%),
        linear-gradient(0deg, rgba(18, 11, 8, .45) 0%, rgba(18, 11, 8, 0) 34%);
}
@media (max-width: 900px) {
    .fx-scrim {
        /* Zwaarst achter het tekstblok (midden), lichter boven en onder zodat de foto zichtbaar blijft */
        background: linear-gradient(180deg, rgba(18, 11, 8, .22) 0%, rgba(18, 11, 8, .5) 28%, rgba(18, 11, 8, .56) 55%, rgba(18, 11, 8, .5) 80%, rgba(18, 11, 8, .55) 100%);
    }
    .fx-scrim--soft {
        /* Startpagina: de eigen mobiele overlay zorgt al voor contrast, hier alleen wat diepte onderaan */
        background: linear-gradient(0deg, rgba(18, 11, 8, .4) 0%, rgba(18, 11, 8, 0) 55%);
    }
}

@keyframes fx-copy-in {
    from { opacity: .6; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
.bp-agenda.bp-agenda .ag-hero__copy,
.bp-fotos.bp-fotos .fg-hero__copy,
.bp-party.bp-party .party-hero__content,
.bp-about.bp-about .abo-hero__content,
.bp-bil.bp-bil .bil-hero__copy,
.bp-home.bp-home .bp-hero__copy { animation-name: fx-copy-in; }


/* ==========================================================================
   TICKER: nooit horizontaal scrollen. De wrapper knipt af, zonder JS of bij
   "minder beweging" staat de band gewoon op meerdere regels.
   ========================================================================== */
.ticker { overflow: hidden; overflow: clip; max-width: 100%; contain: paint; }
.ticker .ticker-inner { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 6px; }
.ticker .ticker-inner.is-marquee {
    flex-wrap: nowrap; justify-content: flex-start; width: max-content;
    column-gap: 28px; padding-left: 0; padding-right: 28px;
    animation: fx-ticker 32s linear infinite; will-change: transform;
}
.ticker:hover .ticker-inner.is-marquee,
.ticker:focus-within .ticker-inner.is-marquee { animation-play-state: paused; }
@keyframes fx-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .ticker .ticker-inner.is-marquee { animation: none !important; transform: none; }
}

/* Oude browsers zonder overflow: clip (o.a. Safari < 16): horizontaal scrollen blokkeren */
@supports not (overflow: clip) {
    html, body { overflow-x: hidden; }
}


/* Foto-onthulling: de overgang moet altijd gelden, ook als een pagina een eigen transition op de afbeelding zet */
main img.fx-pre,
main img.fx-pre.fx-in {
    transition: opacity 1.1s var(--ease, cubic-bezier(.2, .7, .2, 1)), scale 1.4s var(--ease, cubic-bezier(.2, .7, .2, 1)) !important;
}


/* ==========================================================================
   ACCENT: koper is de enige accentkleur voor details, knoppen en cijfers.
   Bordeaux blijft voor vlakken en diepte. Op lichte vlakken een donkerder
   koper zodat het contrast boven 4,5:1 blijft (#8f5d22 op ivoor = 5,0:1).
   ========================================================================== */
:root {
    --bp-t-copper: #c9954a;
    --bp-t-copper-hover: #dba95a;
    --bp-t-copper-ink: #8f5d22;      /* groot: koppen en cijfers (>= 3:1 op zand) */
    --bp-t-copper-text: #74481a;     /* klein: labels en links (>= 4,5:1 op ivoor en zand) */
}

/* Op lichte secties vervangen we het bordeaux-accent via de bestaande variabelen */
.fx-ivory, .fx-sand {
    --bp-red: var(--bp-t-copper-text); --red: var(--bp-t-copper-text);
    --ag-red: var(--bp-t-copper-text); --abo-red: var(--bp-t-copper-text);
    --fg-red: var(--bp-t-copper-text); --mtc-red: var(--bp-t-copper-text);
    --p-red: var(--bp-t-copper-text); --vb-red: var(--bp-t-copper-text);
    --vd-burgundy: var(--bp-t-copper-text); --vh-red: var(--bp-t-copper-text);
    --nf-red: var(--bp-t-copper-text);
}

/* Grote accenten (cursief woord in koppen) mogen het lichtere koper houden */
html body .fx-ivory :is(h1, h2, h3) em,
html body .fx-sand :is(h1, h2, h3) em { color: var(--bp-t-copper-ink); }

/* Gevulde knoppen: koper met donkere tekst (hover iets lichter) */
body a.fx-btn.fx-btn,
body button.fx-btn.fx-btn {
    background-color: var(--bp-t-copper);
    border-color: var(--bp-t-copper);
    color: #1f1713 !important; /* main.css zet .button op wit met !important */
}
body a.fx-btn.fx-btn:hover,
body button.fx-btn.fx-btn:hover {
    background-color: var(--bp-t-copper-hover);
    border-color: var(--bp-t-copper-hover);
    color: #1f1713 !important;
}
body a.fx-btn.fx-btn *, body button.fx-btn.fx-btn * { color: inherit; }


/* ==========================================================================
   RONDE 2: uren, agenda en lijsten op dunne lijnen met grote cijfers
   ========================================================================== */
/* Contact: openingstijden als grote rustige regels, statuspunt en tijd rechts */
.bp-c.bp-c .bp-c-hours__status { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 15px/1.3 'DM Sans', Arial, sans-serif; color: #cdbfae; }
.bp-c.bp-c .bp-c-hours__status i { width: 9px; height: 9px; border-radius: 50%; background: #8d7f70; }
.bp-c.bp-c .bp-c-hours__status.is-open { color: #9bd49b; }
.bp-c.bp-c .bp-c-hours__status.is-open i { background: #5cb35c; box-shadow: 0 0 0 4px rgba(92, 179, 92, .22); }
.bp-c.bp-c .bp-c-hours__row { padding-block: 18px; align-items: baseline; }
.bp-c.bp-c .bp-c-hours__row span:first-child { font: 400 clamp(26px, 2.4vw, 36px)/1.1 'Fraunces', Georgia, serif; letter-spacing: -.01em; }
.bp-c.bp-c .bp-c-hours__row span:last-child { font-size: 17px; font-variant-numeric: tabular-nums; }
.bp-c.bp-c .bp-c-hours__row.is-today span:first-child::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 12px; border-radius: 50%; background: var(--bp-t-copper, #c9954a); vertical-align: .12em; }
.bp-c.bp-c .bp-c-hours__row.is-today.is-open span:first-child::before { background: #5cb35c; box-shadow: 0 0 0 4px rgba(92, 179, 92, .22); }

/* Agenda: label met statuspunt links, tijd rechts */
.bp-agenda.bp-agenda .ag-event__meta { justify-content: space-between; align-items: center; gap: 16px; }
.bp-agenda.bp-agenda .ag-event__meta span:first-child::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--bp-t-copper, #c9954a); vertical-align: .1em; }
.bp-agenda.bp-agenda .ag-event__meta span:last-child:not(:first-child) { font-variant-numeric: tabular-nums; }

/* Over-ons: "Het zijn de kleine dingen" als reuzencijfers op dunne lijnen */
.bp-about.bp-about .abo-moments__list { gap: 0; border-top: 1px solid rgba(42, 32, 27, .22); }
.bp-about.bp-about .abo-moments__list > li,
.bp-about.bp-about .abo-moments__list > li:nth-child(n) {
    margin: 0; padding: clamp(26px, 3vw, 40px) 0; grid-template-columns: clamp(110px, 12vw, 180px) minmax(0, 1fr);
    background: transparent; border: 0; border-bottom: 1px solid rgba(42, 32, 27, .22); box-shadow: none; translate: 0 0;
}
.bp-about.bp-about .abo-moments__list > li::before { display: none; }
.bp-about.bp-about .abo-moments__list > li:hover { translate: 0 0; box-shadow: none; }
.bp-about.bp-about .abo-moments__index { font: 400 clamp(64px, 8vw, 120px)/.9 'Fraunces', Georgia, serif; letter-spacing: -.02em; color: var(--bp-t-copper-ink, #8f5d22); }
.bp-about.bp-about .abo-moments__list h3 { font-size: clamp(28px, 3vw, 44px); }

/* Overlap: kaarten van "De kleine dingen" schuiven over de vastgezette foto-sectie;  */
@media (min-width: 1000px) {
    .bp-home .bp-rules .bp-rules__list { margin-top: -270px; position: relative; z-index: 3; }
}

/* Mobiele balk: ook hier koper als accent (bordeaux blijft voor vlakken) */
@media (max-width: 900px) {
    .bp-mobilebar__actions .bp-mobilebar__call { background: var(--bp-t-copper, #c9954a); border-color: var(--bp-t-copper, #c9954a); color: #1f1713; }
}

/* Gedempte alinea op voetbal-dames (4,2:1 -> >= 4,5:1) */
html body .vd-moment.vd-moment .vd-body { color: #66574c; }

/* Slop-ronde: contact-snelkoppelingen als vlakke regels op haarlijnen, zonder dozen en schaduw */
html body .bp-c .bp-c-shortcuts { margin-top: 0; padding: 12px 0 0; background: transparent; }
html body .bp-c .bp-c-shortcuts__inner { background: transparent; box-shadow: none; gap: clamp(24px, 4vw, 64px); }
html body .bp-c .bp-c-shortcut { min-height: 0; padding: 26px 0 28px; border-top: 1px solid rgba(43, 32, 27, .28); border-left: 0; gap: 22px; }
html body .bp-c .bp-c-shortcut + .bp-c-shortcut { border-left: 0; }
html body .bp-c .bp-c-shortcut:hover { background: transparent; }
html body .bp-c .bp-c-shortcut:hover strong { color: var(--bp-t-copper-ink, #8f5d22); }
html body .bp-c .bp-c-shortcut strong { transition: color .3s ease; }
html body .bp-c .bp-c-hero__micro { color: #e8dccb; }