/* LaPruik Clubhuis — dezelfde avondlijke, redactionele merkwereld als de website. */

.clubhuis-body {
  --clubhuis-content: 760px;
  --clubhuis-wide: 1040px;
  --clubhuis-chalk: #f7f5f0;
  --clubhuis-slate: #687277;
  --clubhuis-shadow: 0 26px 70px rgba(9, 24, 32, .12);
  min-width: 320px;
  background: var(--navy);
}
.clubhuis-body .site-header { position: absolute; background: var(--navy); -webkit-backdrop-filter: none; backdrop-filter: none; }
.clubhuis-header { gap: 24px; }
.clubhuis-header .brand { flex-shrink: 0; }
.clubhuis-brand-copy { display: flex; flex-direction: column; justify-content: center; line-height: 1; }
.clubhuis-brand-label { margin-top: 5px; color: var(--gold-light); font-family: var(--sans); font-size: .55rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, .55); }
.clubhuis-header nav { gap: clamp(14px, 1.5vw, 26px); padding-right: 8px; font-size: .7rem; }
.clubhuis-header nav > a[aria-current="page"] { color: var(--gold-light); }
.clubhuis-header nav > a[aria-current="page"]::after { content: ""; display: block; width: 100%; height: 1px; margin-top: 3px; background: currentColor; }
.clubhuis-nav-meta { display: flex; align-items: center; gap: 14px; margin-left: 2px; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .16); }
.clubhuis-site-link { display: none; }
.clubhuis-site-link svg { width: 15px; height: 15px; flex: 0 0 auto; }
.nav-speler { color: rgba(255, 255, 255, .62); font-size: .68rem; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
.nav-speler strong { color: #fff; font-weight: 700; }
.clubhuis-header .nav-cta { padding: 8px 13px; }
.clubhuis-header .clubhuis-push-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .82); cursor: pointer; font-family: var(--sans); font-size: .68rem; font-weight: 700; white-space: nowrap; }
.clubhuis-header .clubhuis-push-toggle svg { flex: 0 0 auto; color: var(--gold-light); }
.clubhuis-header .clubhuis-push-toggle[data-status="aan"] { border-color: var(--gold); color: var(--gold-light); }

.clubhuis-main { position: relative; min-height: 100svh; padding-top: 92px; overflow: hidden; background: radial-gradient(circle at 78% 40px, rgba(196, 122, 44, .13), transparent 25rem), var(--cream); }
.clubhuis-main::before { content: ""; position: absolute; inset: 0 0 auto; height: 320px; background: linear-gradient(90deg, rgba(5, 14, 19, .96) 0%, rgba(5, 14, 19, .83) 32%, rgba(5, 14, 19, .38) 68%, rgba(5, 14, 19, .2) 100%), linear-gradient(180deg, rgba(9, 24, 32, .42) 0%, rgba(9, 24, 32, .05) 48%, rgba(9, 24, 32, .9) 100%), url("../lapruik-clan-verhaal.jpg") center 53% / cover no-repeat; }
.clubhuis-main::after { content: ""; position: absolute; z-index: 0; top: 218px; left: clamp(20px, 7vw, 110px); width: 76px; height: 1px; background: var(--gold); box-shadow: 82px 0 0 rgba(196, 122, 44, .25); }
.clubhuis-page-index .clubhuis-main::before { height: calc(92px + clamp(68px, 8vw, 96px) + 337px + 11px); border-radius: 0; background: linear-gradient(90deg, rgba(5, 14, 19, .48) 0%, rgba(5, 14, 19, .2) 34%, rgba(5, 14, 19, .03) 72%, transparent 100%), linear-gradient(180deg, rgba(9, 24, 32, .04) 0%, transparent 62%, rgba(9, 24, 32, .65) 100%), url("../lapruik-clan-verhaal-clean.jpg") center 52% / 105% auto no-repeat, var(--navy); }
.clubhuis-page-index .clubhuis-main::after { display: none; }

/* Zes onderwerp-pagina's (Agenda, Wie betaalt wat, Album, Voetbalpool,
   Nummers, Proefkast) tonen een compacte navy kop — titel + icoon, eventueel
   een introregel of terug-link — die precies om de tekst past: de kop stopt
   maximaal 20px na de tekst, en de kaart met de eigenlijke inhoud begint
   20px daarna. Geen vaste pixelhoogtes meer, dus geen kans dat tekst over de
   kaart-overgang heen loopt. */
.clubhuis-page-agenda .clubhuis-main::before, .clubhuis-page-agenda .clubhuis-main::after,
.clubhuis-page-wie-betaalt-wat .clubhuis-main::before, .clubhuis-page-wie-betaalt-wat .clubhuis-main::after,
.clubhuis-page-album .clubhuis-main::before, .clubhuis-page-album .clubhuis-main::after,
.clubhuis-page-voetbal .clubhuis-main::before, .clubhuis-page-voetbal .clubhuis-main::after,
.clubhuis-page-nummers .clubhuis-main::before, .clubhuis-page-nummers .clubhuis-main::after,
.clubhuis-page-proefkast .clubhuis-main::before, .clubhuis-page-proefkast .clubhuis-main::after { display: none; }
.clubhuis-page-agenda .clubhuis-main > section,
.clubhuis-page-wie-betaalt-wat .clubhuis-main > section,
.clubhuis-page-album .clubhuis-main > section,
.clubhuis-page-voetbal .clubhuis-main > section,
.clubhuis-page-nummers .clubhuis-main > section,
.clubhuis-page-proefkast .clubhuis-main > section { padding-top: 20px; }
.clubhuis-kop { position: relative; isolation: isolate; width: min(calc(100% - clamp(32px, 7vw, 112px)), var(--clubhuis-content)); margin: 0 auto; padding: clamp(28px, 5vw, 44px) 0 20px; color: white; }
.clubhuis-kop::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: var(--navy); }
.clubhuis-page-album .clubhuis-kop, .clubhuis-page-proefkast .clubhuis-kop { width: min(calc(100% - clamp(32px, 7vw, 112px)), var(--clubhuis-wide)); }
.clubhuis-page-proefkast .clubhuis-kop::before { background: linear-gradient(90deg, rgba(5, 14, 19, .96), rgba(5, 14, 19, .68) 50%, rgba(5, 14, 19, .32)), linear-gradient(180deg, transparent 44%, rgba(9, 24, 32, .94)), url("../lapruik-cask-hero.png") center 48% / cover no-repeat; }
.clubhuis-page-agenda .clubhuis-titel,
.clubhuis-page-wie-betaalt-wat .clubhuis-titel,
.clubhuis-page-album .clubhuis-titel,
.clubhuis-page-voetbal .clubhuis-titel,
.clubhuis-page-nummers .clubhuis-titel { font-size: clamp(2.3rem, 4.2vw, 3.6rem); }
.clubhuis-page-agenda .clubhuis-titel,
.clubhuis-page-wie-betaalt-wat .clubhuis-titel,
.clubhuis-page-album .clubhuis-titel,
.clubhuis-page-voetbal .clubhuis-titel,
.clubhuis-page-nummers .clubhuis-titel,
.clubhuis-page-proefkast .clubhuis-titel { min-height: 0; }
.clubhuis-page-agenda .clubhuis-nieuw-evenement,
.clubhuis-page-album .clubhuis-nieuw-evenement { margin-top: 28px; }
.clubhuis-page-agenda .clubhuis-onderwerp-beeld,
.clubhuis-page-wie-betaalt-wat .clubhuis-onderwerp-beeld,
.clubhuis-page-album .clubhuis-onderwerp-beeld,
.clubhuis-page-voetbal .clubhuis-onderwerp-beeld,
.clubhuis-page-nummers .clubhuis-onderwerp-beeld { top: 20px; width: 76px; height: 76px; }
.clubhuis-agenda-section::after, .clubhuis-kosten-section::after, .clubhuis-album-section::after, .clubhuis-voetbal-section::after, .clubhuis-nummers-section::after { border-top-color: transparent; }

.clubhuis-main > section { position: relative; z-index: 1; width: min(calc(100% - clamp(32px, 7vw, 112px)), var(--clubhuis-content)); margin: 0 auto; padding: clamp(68px, 8vw, 96px) 0 clamp(90px, 10vw, 140px); }
.clubhuis-main > .clubhuis-album-section, .clubhuis-main > .clubhuis-proefkast-section { width: min(calc(100% - clamp(32px, 7vw, 112px)), var(--clubhuis-wide)); }
.clubhuis-main > section > .section-kicker, .clubhuis-main > .clubhuis-kop > .section-kicker { margin-bottom: 13px; color: var(--gold-light); }
.clubhuis-main > section > .section-kicker::before, .clubhuis-main > .clubhuis-kop > .section-kicker::before { content: "Binnen bij / "; color: rgba(255, 255, 255, .42); }
.clubhuis-titel, .clubhuis-login h1 { margin: 0; color: var(--cream); font-family: var(--display); font-size: clamp(3.55rem, 7vw, 5.8rem); font-weight: 500; letter-spacing: -.055em; line-height: .9; }
.clubhuis-titel { min-height: 137px; max-width: calc(100% - 150px); }
.clubhuis-onderwerp-beeld { position: absolute; z-index: -1; top: 62px; right: 4px; display: grid; width: 122px; height: 122px; place-items: center; color: var(--gold-light); opacity: .5; }
.clubhuis-onderwerp-beeld::before, .clubhuis-onderwerp-beeld::after { content: ""; position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%; opacity: .3; }
.clubhuis-onderwerp-beeld::after { inset: 10px; border-style: dashed; opacity: .22; transform: rotate(14deg); }
.clubhuis-onderwerp-beeld svg { width: 56%; height: 56%; }

.clubhuis-chat-section, .clubhuis-agenda-section, .clubhuis-nummers-section, .clubhuis-album-section, .clubhuis-voetbal-section, .clubhuis-proefkast-section { isolation: isolate; }
.clubhuis-main > .clubhuis-chat-section { width: min(calc(100% - clamp(32px, 7vw, 112px)), var(--clubhuis-wide)); }
.clubhuis-page-index .clubhuis-main > .clubhuis-chat-section { padding-bottom: 0; }
.clubhuis-page-index .clubhuis-chat-section::after { top: calc(clamp(68px, 8vw, 96px) + 337px + 11px); bottom: 0; border-top: 0; background: var(--cream); }
.clubhuis-page-index .clubhuis-chat-section::before { display: none; }
.clubhuis-page-index .clubhuis-hero-intro { position: relative; min-height: 337px; }
.clubhuis-page-index .clubhuis-onderwerp-beeld { display: none; }
.clubhuis-hero-streep { position: absolute; z-index: 2; top: 22px; left: 0; width: 56px; height: 2px; background: var(--gold); box-shadow: 60px 0 0 rgba(196, 122, 44, .25); }
.clubhuis-hero-vat { position: absolute; z-index: 3; top: 12px; left: 12px; }
.clubhuis-hero-vat .vat-widget { width: min(360px, 80vw); min-height: 0; margin: 0; padding: 11px 18px; border: 1px solid rgba(255, 255, 255, .17); border-left: 2px solid var(--gold); background: rgba(7, 20, 29, .78); box-shadow: 0 14px 34px rgba(0, 0, 0, .2); color: white; text-align: left; -webkit-backdrop-filter: blur(8px) saturate(.82); backdrop-filter: blur(8px) saturate(.82); }
.clubhuis-hero-vat .vat-tekst { gap: 2px; }
.clubhuis-hero-vat .vat-tekst::before { content: "Volgende avond"; color: var(--gold-light); font-size: .54rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.clubhuis-hero-vat .vat-uitleg { color: var(--cream); font-size: .96rem; line-height: 1.05; }
.clubhuis-hero-vat .vat-avond { display: -webkit-box; overflow: hidden; color: rgba(255, 255, 255, .62); font-size: .65rem; line-height: 1.3; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.clubhuis-page-index .clubhuis-hero-vat .vat-widget { border-color: rgba(217, 155, 84, .42); border-left-width: 3px; background: rgba(7, 20, 29, .9); box-shadow: 0 16px 38px rgba(0, 0, 0, .3); }
.clubhuis-page-index .clubhuis-hero-vat .vat-avond { color: rgba(255, 255, 255, .78); }
.clubhuis-hero-groet { position: absolute; z-index: 2; right: 0; bottom: 26px; left: auto; margin: 0; max-width: calc(100% - 8px); color: rgba(255, 255, 255, .95); font-family: var(--display); font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 500; letter-spacing: -.025em; text-align: right; text-shadow: 0 2px 9px rgba(0, 0, 0, .8); white-space: nowrap; }
.clubhuis-hero-groet strong { display: inline-block; margin-left: .1em; color: var(--gold-light); font-family: var(--display); font-style: italic; font-size: 1.5em; font-weight: 500; line-height: 1; letter-spacing: -.01em; -webkit-text-stroke: .4px rgba(255, 255, 255, .55); text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.clubhuis-chat-section::after, .clubhuis-agenda-section::after, .clubhuis-nummers-section::after, .clubhuis-album-section::after, .clubhuis-voetbal-section::after, .clubhuis-proefkast-section::after { content: ""; position: absolute; z-index: -1; top: 0; right: clamp(-42px, -4vw, -24px); bottom: clamp(52px, 7vw, 86px); left: clamp(-42px, -4vw, -24px); background: linear-gradient(145deg, rgba(247, 245, 240, .96), rgba(237, 230, 217, .88)); border-top: 1px solid rgba(255, 255, 255, .8); box-shadow: var(--clubhuis-shadow); }
.clubhuis-chat-section::before, .clubhuis-agenda-section::before, .clubhuis-nummers-section::before, .clubhuis-album-section::before, .clubhuis-voetbal-section::before, .clubhuis-proefkast-section::before { content: ""; position: absolute; z-index: 2; top: 0; left: clamp(-42px, -4vw, -24px); width: 7px; height: 7px; background: var(--copper); transform: translateY(-3px) rotate(45deg); }
.clubhuis-page-agenda .clubhuis-agenda-section::after,
.clubhuis-page-wie-betaalt-wat .clubhuis-kosten-section::after,
.clubhuis-page-album .clubhuis-album-section::after,
.clubhuis-page-voetbal .clubhuis-voetbal-section::after,
.clubhuis-page-nummers .clubhuis-nummers-section::after,
.clubhuis-page-proefkast .clubhuis-proefkast-section::after { box-shadow: none; }
.nummers-uitleg, .voetbal-uitleg { margin: 0 0 28px; color: var(--clubhuis-slate); font-size: .94rem; line-height: 1.7; }

/* De tafel — geen zware hero: de berichten komen direct in beeld. */
.clubhuis-page-tafel .clubhuis-main::before, .clubhuis-page-tafel .clubhuis-main::after { display: none; }
.clubhuis-page-tafel .clubhuis-main > .clubhuis-chat-section { padding: clamp(28px, 4vw, 40px) 0 clamp(56px, 7vw, 84px); }
.clubhuis-page-tafel .clubhuis-chat-section::before, .clubhuis-page-tafel .clubhuis-chat-section::after { display: none; }
.clubhuis-page-tafel .clubhuis-tafel-kop { margin: 0 0 18px; padding-top: 0; border-top: 0; }

/* Beginscherm — de centrale hal van het clubhuis. */
.clubhuis-overzicht { margin-bottom: 38px; }
.clubhuis-page-index .clubhuis-overzicht { position: relative; z-index: 2; margin: -7px 0 0; }
.clubhuis-label { margin: 0 0 8px; color: var(--copper); font-size: .65rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.clubhuis-label-extra { color: var(--clubhuis-slate); font-weight: 500; letter-spacing: normal; text-transform: none; }
.clubhuis-tafel-kop h2 { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.clubhuis-tegels { position: static; inset: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 1px; width: auto; max-height: none; overflow: visible; padding: 1px; border: 0; border-top: 1px solid rgba(217, 155, 84, .4); border-radius: 0; background: rgba(158, 84, 44, .25); box-shadow: none; font-size: 1rem; letter-spacing: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.clubhuis-tegel { --tegel-beeld: none; position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 182px; padding: 22px; overflow: hidden; background-color: var(--navy); background-image: linear-gradient(180deg, rgba(9, 24, 32, .34), rgba(9, 24, 32, .82)), linear-gradient(90deg, rgba(9, 24, 32, .9) 0%, rgba(9, 24, 32, .6) 50%, rgba(9, 24, 32, .24) 100%), var(--tegel-beeld); background-position: center, center, 72% center; background-size: cover; color: white; text-decoration: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .46); transition: transform .25s; }
.clubhuis-tegel > * { position: relative; z-index: 2; }
.clubhuis-tegel::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(196, 122, 44, .16), transparent 42%, rgba(255, 255, 255, .05)); opacity: .32; transition: opacity .25s; }
.clubhuis-tegel::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(243, 239, 230, .08); transition: box-shadow .25s; }
.clubhuis-tegel:hover, .clubhuis-tegel:focus-visible { z-index: 1; color: white; transform: translateY(-3px); }
.clubhuis-tegel:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.clubhuis-tegel:hover::before, .clubhuis-tegel:focus-visible::before { opacity: .12; }
.clubhuis-tegel:hover::after, .clubhuis-tegel:focus-visible::after { box-shadow: inset 0 0 0 1px rgba(217, 155, 84, .54); }
.clubhuis-tegel-chat { --tegel-beeld: url("tiles/chat.webp"); }
.clubhuis-tegel-agenda { --tegel-beeld: url("tiles/agenda.webp"); }
.clubhuis-tegel-proefkast { --tegel-beeld: url("tiles/proefkast.webp"); }
.clubhuis-tegel-voetbal { --tegel-beeld: url("tiles/voetbal.webp"); }
.clubhuis-tegel-album { --tegel-beeld: url("tiles/album.webp"); }
.clubhuis-tegel-nummers { --tegel-beeld: url("tiles/nummers.webp"); }
.clubhuis-tegel-kosten { --tegel-beeld: url("tiles/kosten.webp"); }
.clubhuis-tegel-binnenkort { --tegel-beeld: url("tiles/binnenkort.webp"); cursor: default; }
.clubhuis-tegel-binnenkort:hover { transform: none; }
.clubhuis-tegel-icoon { display: grid; width: 47px; height: 47px; margin-bottom: auto; place-items: center; border: 1px solid rgba(217, 155, 84, .42); border-radius: 50%; background: rgba(9, 24, 32, .28); color: var(--gold-light); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.clubhuis-tegel-chat .clubhuis-tegel-icoon, .clubhuis-tegel:hover .clubhuis-tegel-icoon, .clubhuis-tegel:focus-visible .clubhuis-tegel-icoon { border-color: rgba(217, 155, 84, .62); color: var(--gold-light); }
.clubhuis-tegel-icoon svg { width: 25px; height: 25px; }
.clubhuis-tegel-copy { display: flex; flex-direction: column; gap: 3px; margin-top: 18px; }
.clubhuis-tegel-copy strong { font-family: var(--display); font-size: 1.28rem; font-weight: 600; line-height: 1.05; }
.clubhuis-tegel-copy small { color: var(--mist); font-size: .69rem; font-weight: 500; line-height: 1.35; }
.clubhuis-tegel-chat .clubhuis-tegel-copy small, .clubhuis-tegel:hover .clubhuis-tegel-copy small, .clubhuis-tegel:focus-visible .clubhuis-tegel-copy small { color: var(--mist); }
.clubhuis-tegel-pijl { position: absolute; top: 20px; right: 20px; color: var(--gold-light); filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .45)); font-size: 1rem; transition: transform .25s; }
.clubhuis-tegel-pijl svg { display: block; width: 18px; height: 18px; }
.clubhuis-tegel:hover .clubhuis-tegel-pijl, .clubhuis-tegel:focus-visible .clubhuis-tegel-pijl { color: var(--gold-light); transform: translate(2px, -2px); }
.clubhuis-page-index .clubhuis-tegels { border-top: 1px solid rgba(158, 84, 44, .34); background: rgba(158, 84, 44, .34); }
.clubhuis-page-index .clubhuis-tegel { background-image: linear-gradient(180deg, rgba(9, 24, 32, .04) 0%, rgba(9, 24, 32, .09) 43%, rgba(5, 14, 19, .82) 100%), linear-gradient(90deg, rgba(9, 24, 32, .36) 0%, rgba(9, 24, 32, .12) 58%, transparent 100%), var(--tegel-beeld); text-shadow: 0 2px 10px rgba(0, 0, 0, .78); }
.clubhuis-page-index .clubhuis-tegel-icoon { border-color: rgba(232, 166, 91, .78); background: rgba(7, 20, 29, .52); color: #eda75c; box-shadow: 0 4px 18px rgba(0, 0, 0, .16); }
.clubhuis-page-index .clubhuis-tegel-copy strong { color: #fffaf2; }
.clubhuis-page-index .clubhuis-tegel-copy small { color: #d9e0df; }
.clubhuis-page-index .clubhuis-tegel-pijl { color: #f0ad61; }
.clubhuis-kosten-section { isolation: isolate; }
.clubhuis-kosten-section::after { content: ""; position: absolute; z-index: -1; top: 0; right: clamp(-42px, -4vw, -24px); bottom: 60px; left: clamp(-42px, -4vw, -24px); background: linear-gradient(145deg, rgba(247, 245, 240, .96), rgba(237, 230, 217, .88)); box-shadow: var(--clubhuis-shadow); }
.clubhuis-kosten-section::before { content: ""; position: absolute; z-index: 2; top: 0; left: clamp(-42px, -4vw, -24px); width: 7px; height: 7px; background: var(--copper); transform: rotate(45deg); }
.kosten-uitleg { margin: 0 0 8px; max-width: 46ch; color: rgba(243, 239, 230, .78); font-size: 1.02rem; line-height: 1.55; }
.kosten-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 0 30px; color: rgba(255, 255, 255, .62); font-size: .78rem; }
.kosten-stats strong { color: var(--cream); font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
.kosten-stats span { color: rgba(217, 155, 84, .5); }
.kosten-terug { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 26px; color: var(--copper); font-weight: 700; text-decoration: none; }
.kosten-terug svg { width: 17px; height: 17px; flex: 0 0 auto; }
.kosten-terug:hover, .kosten-terug:focus-visible { text-decoration: underline; }
.kosten-invoer, .kosten-blok { margin: 0 0 26px; padding: clamp(20px, 3vw, 30px); border: 1px solid rgba(158, 84, 44, .19); background: rgba(255, 255, 255, .58); }
.kosten-invoer h2, .kosten-invoer h3, .kosten-blok h2, .kosten-blok h3, .kosten-sessie-kop h2 { margin: 0 0 12px; color: var(--ink); font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 500; line-height: 1.1; }
.kosten-invoer p, .kosten-blok > p, .kosten-deelnemers { color: var(--clubhuis-slate); font-size: .91rem; line-height: 1.55; }
.kosten-form { max-width: none; margin-bottom: 0; }
.kosten-form .clubhuis-form-rij label { min-width: 0; }
.kosten-form select { min-height: 48px; padding: 10px 14px; border: 1px solid rgba(16, 24, 32, .2); border-radius: 0; background: white; color: var(--ink); font: inherit; font-size: 1rem; }
.kosten-form select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.kosten-meebetalers { margin: 0; padding: 0; border: 0; }
.kosten-meebetalers legend { margin-bottom: 10px; color: #465158; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.kosten-meebetalers-acties { display: flex; gap: 14px; margin-bottom: 10px; }
.kosten-meebetalers-acties button { padding: 0; border: 0; background: transparent; color: var(--copper); cursor: pointer; font: inherit; font-size: .72rem; font-weight: 700; text-decoration: underline; }
.kosten-meebetalers-acties button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.kosten-meebetalers > div { display: flex; flex-wrap: wrap; gap: 8px; }
.clubhuis-form .kosten-meebetalers label { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; min-height: 44px; padding: 9px 12px; border: 1px solid rgba(158, 84, 44, .25); background: #fff; color: var(--ink); cursor: pointer; font-size: .83rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.clubhuis-form .kosten-meebetalers input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--copper); box-shadow: none; }
.kosten-meebetalers small { display: block; margin-top: 10px; color: var(--clubhuis-slate); font-size: .72rem; line-height: 1.5; }
.kosten-sessie-kop { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin: 0 0 12px; padding-bottom: 22px; border-bottom: 1px solid rgba(158, 84, 44, .28); }
.kosten-sessie-kop h2 { margin: 7px 0; }
.kosten-sessie-kop p { margin: 0; color: var(--clubhuis-slate); font-size: .8rem; }
.kosten-status { color: var(--copper); font-size: .65rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.kosten-sessie-kop > strong { color: var(--ink); font-family: var(--display); font-size: 1.7rem; font-weight: 600; white-space: nowrap; }
.kosten-sessie-kop > strong small { display: block; color: var(--clubhuis-slate); font-family: var(--sans); font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-align: right; text-transform: uppercase; }
.kosten-deelnemers { margin: 0 0 26px; }
.kosten-posten, .kosten-transfers { margin: 0; padding: 0; list-style: none; }
.kosten-posten li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid rgba(158, 84, 44, .16); }
.kosten-posten strong, .kosten-posten small { display: block; }
.kosten-posten strong { color: var(--ink); }
.kosten-posten small { margin-top: 3px; color: var(--clubhuis-slate); font-size: .7rem; }
.kosten-posten b { color: var(--ink); white-space: nowrap; }
.kosten-post-acties { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.kosten-post-acties a, .kosten-post-acties button { padding: 2px 0; border: 0; background: transparent; color: var(--copper); cursor: pointer; font: inherit; font-size: .7rem; text-decoration: underline; }
.kosten-post-acties a:focus-visible, .kosten-post-acties button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.kosten-saldi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(158, 84, 44, .18); }
.kosten-saldi > div { display: flex; flex-direction: column; gap: 4px; padding: 17px; background: #f8f5ee; }
.kosten-saldi > div.is-jij { position: relative; padding-left: 14px; background: #f3ede1; box-shadow: inset 3px 0 0 var(--copper); }
.kosten-saldi strong { color: var(--ink); font-family: var(--display); font-size: 1.2rem; }
.kosten-jij-label { color: var(--copper); font-family: var(--sans); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.kosten-saldi span { color: var(--clubhuis-slate); font-size: .72rem; }
.kosten-saldi b { font-size: .86rem; }
.kosten-positief { color: #2f6b3f; }
.kosten-negatief { color: #943c2b; }
.kosten-afrekening h4 { margin: 25px 0 10px; color: var(--ink); font-family: var(--display); font-size: 1.25rem; font-weight: 500; }
.kosten-transfers li { padding: 12px 0; border-top: 1px solid rgba(158, 84, 44, .18); color: var(--ink); }
.kosten-sluiten { margin-top: 28px; }
.kosten-gevarenzone { margin-top: 28px; padding: 18px 20px; border: 1px solid rgba(148, 60, 43, .35); background: rgba(148, 60, 43, .06); }
.kosten-gevarenzone h4 { margin: 0 0 6px; color: #943c2b; font-family: var(--display); font-size: 1rem; font-weight: 700; }
.kosten-gevarenzone p { margin: 0 0 14px; color: var(--clubhuis-slate); font-size: .82rem; line-height: 1.5; }
.button-danger { background: #943c2b; color: #fff; }
.button-danger:hover { background: #7a3122; }
.kosten-sessies a { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 15px 0; border-top: 1px solid rgba(158, 84, 44, .18); color: var(--ink); text-decoration: none; }
.kosten-sessies a:hover, .kosten-sessies a:focus-visible { color: var(--copper); }
.kosten-sessies a.is-open { position: relative; padding-left: 14px; background: rgba(196, 122, 44, .07); box-shadow: inset 3px 0 0 var(--copper); }
.kosten-sessies a.is-open small { color: var(--copper); }
.kosten-sessies small, .kosten-sessies strong { display: block; }
.kosten-sessies small { margin-bottom: 3px; color: var(--clubhuis-slate); font-size: .67rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.kosten-sessies strong { font-family: var(--display); font-size: 1.15rem; font-weight: 500; }
.kosten-sessies-bedragen { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.kosten-sessies-bedragen b { white-space: nowrap; }
.kosten-sessies-bedragen small { margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.kosten-nieuw { margin: 0 0 26px; border: 1px dashed rgba(158, 84, 44, .35); background: rgba(255, 255, 255, .4); }
.kosten-nieuw summary { display: flex; align-items: center; gap: 10px; padding: 18px clamp(20px, 3vw, 30px); color: var(--copper); font-family: var(--display); font-size: 1.05rem; font-weight: 600; line-height: 1.1; cursor: pointer; list-style: none; }
.kosten-nieuw summary::-webkit-details-marker { display: none; }
.kosten-nieuw summary::before { content: "+"; flex: 0 0 auto; font-size: 1.3rem; line-height: 1; transition: transform .15s ease; }
.kosten-nieuw[open] summary::before { transform: rotate(45deg); }
.kosten-nieuw[open] summary { border-bottom: 1px solid rgba(158, 84, 44, .19); }
.kosten-nieuw summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.kosten-nieuw-inhoud { padding: 20px clamp(20px, 3vw, 30px) clamp(20px, 3vw, 30px); }
.kosten-nieuw-inhoud p { margin: 0 0 16px; color: var(--clubhuis-slate); font-size: .91rem; line-height: 1.55; }
.kosten-nieuw-inhoud .kosten-form { margin: 0; }
@media (max-width: 600px) { .kosten-sessie-kop { flex-direction: column; } .kosten-sessie-kop > strong small { text-align: left; } .kosten-saldi { grid-template-columns: 1fr; } }
.clubhuis-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: 18px; margin: 0 0 54px; }
.clubhuis-highlights:empty { display: none; }
.clubhuis-highlights .vat-widget { height: 100%; min-height: 210px; margin: 0; }
.clubhuis-highlights .vat-widget { flex-direction: column; justify-content: center; text-align: center; }
.clubhuis-highlights .vat-svg { width: 118px; }
.clubhuis-tafel-kop { scroll-margin-top: 24px; margin: 0 0 22px; padding-top: 38px; border-top: 1px solid rgba(158, 84, 44, .28); }

.clubhuis-form, .clubhuis-login-form { display: flex; flex-direction: column; gap: 18px; max-width: 520px; margin: 22px 0 34px; }
.clubhuis-form label, .clubhuis-login-form label { display: flex; flex-direction: column; gap: 8px; color: #465158; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.clubhuis-form .optioneel { color: #7a8285; font-weight: 500; letter-spacing: 0; text-transform: none; }
.clubhuis-form input, .clubhuis-form textarea, .clubhuis-login-form input, .chat-form textarea, .voetbal-voorspel-form input[type="number"] { min-height: 48px; padding: 12px 14px; border: 1px solid rgba(16, 24, 32, .2); border-radius: 0; background: rgba(255, 255, 255, .78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.4; transition: border-color .2s, box-shadow .2s, background .2s; }
.clubhuis-form textarea, .chat-form textarea { resize: vertical; }
.clubhuis-form input:hover, .clubhuis-form textarea:hover, .clubhuis-login-form input:hover, .chat-form textarea:hover { border-color: rgba(158, 84, 44, .48); background: #fff; }
.clubhuis-form input:focus-visible, .clubhuis-form textarea:focus-visible, .clubhuis-login-form input:focus-visible, .chat-form textarea:focus-visible, .voetbal-voorspel-form input[type="number"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); background: #fff; }
.clubhuis-form-rij { display: flex; gap: 14px; }
.clubhuis-form-rij label { flex: 1; }
.clubhuis-form button, .clubhuis-login-form button { align-self: flex-start; }
.clubhuis-body .button { min-height: 50px; cursor: pointer; border: 0; }
.clubhuis-body .button svg { width: 18px; height: 18px; flex: 0 0 auto; }
.clubhuis-body button:disabled { cursor: wait; opacity: .55; }
.clubhuis-fout { margin: 0 0 22px; padding: 15px 18px; border-left: 3px solid var(--copper); background: rgba(158, 84, 44, .1); color: #73391f; font-size: .9rem; }
.clubhuis-ok { margin: 0 0 22px; padding: 15px 18px; border-left: 3px solid #2f6b3f; background: rgba(47, 107, 63, .1); color: #234b2b; font-size: .9rem; }
.clubhuis-leeg { margin: 0; padding: 22px 0; color: var(--clubhuis-slate); font-family: var(--display); font-size: 1.08rem; font-style: italic; }

.clubhuis-body-login .clubhuis-main { display: grid; min-height: calc(100svh - 1px); place-items: center; padding: 110px 24px 70px; background: var(--navy); }
.clubhuis-body-login .clubhuis-main::before { height: 100%; background: radial-gradient(circle at 75% 30%, rgba(196, 122, 44, .15), transparent 32rem), linear-gradient(135deg, #07151d, var(--navy) 62%, #102832); }
.clubhuis-body-login .clubhuis-main::after { top: 18%; right: 8%; left: auto; width: 18vw; opacity: .45; }
.clubhuis-main > .clubhuis-login { width: min(100%, 920px); padding: clamp(36px, 6vw, 72px); border: 1px solid rgba(255, 255, 255, .14); background: rgba(20, 38, 46, .66); box-shadow: 0 35px 90px rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.clubhuis-login .section-kicker { color: var(--gold-light); }
.clubhuis-login h1 { max-width: 630px; margin: 0 0 20px; font-size: clamp(3.2rem, 7vw, 6rem); }
.clubhuis-login .page-banner-intro { max-width: 560px; margin-bottom: 30px; color: var(--mist); }
.clubhuis-login-form { margin-bottom: 0; }
.clubhuis-login-form label { color: #d7dfdf; }
.clubhuis-login-form input { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: white; }
.clubhuis-login-form input:hover, .clubhuis-login-form input:focus-visible { background: rgba(255, 255, 255, .13); }
.flashback-popup { width: min(540px, calc(100% - 44px)); max-width: none; max-height: calc(100svh - 44px); margin: auto; padding: 0; overflow: visible; border: 0; background: transparent; color: var(--ink); opacity: 0; transform: translateY(18px) rotate(-1deg) scale(.96); transition: opacity .24s ease, transform .34s cubic-bezier(.2, .75, .25, 1); }
.flashback-popup[open].is-zichtbaar { opacity: 1; transform: translateY(0) rotate(-.4deg) scale(1); }
.flashback-popup::backdrop { background: rgba(3, 11, 15, .54); -webkit-backdrop-filter: blur(2px) saturate(.8); backdrop-filter: blur(2px) saturate(.8); }
.flashback-lijst { position: relative; padding: 12px; background: linear-gradient(135deg, #6f351e 0%, #c17a45 18%, #71371f 43%, #aa6036 72%, #542817 100%); box-shadow: 0 28px 90px rgba(2, 8, 11, .58), 0 0 0 1px rgba(217, 155, 84, .5), inset 0 0 0 2px rgba(255, 221, 177, .2), inset 0 0 18px rgba(28, 11, 4, .72); }
.flashback-lijst::before, .flashback-lijst::after { content: ""; position: absolute; z-index: 2; width: 38px; height: 38px; pointer-events: none; }
.flashback-lijst::before { top: 4px; left: 4px; border-top: 1px solid rgba(255, 222, 173, .62); border-left: 1px solid rgba(255, 222, 173, .62); }
.flashback-lijst::after { right: 4px; bottom: 4px; border-right: 1px solid rgba(255, 222, 173, .44); border-bottom: 1px solid rgba(255, 222, 173, .44); }
.flashback-kop { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 21px 24px 20px; overflow: hidden; border: 1px solid rgba(217, 155, 84, .22); border-bottom: 0; background: radial-gradient(circle at 88% 20%, rgba(196, 122, 44, .2), transparent 34%), var(--navy); color: white; }
.flashback-kop::after { content: ""; position: absolute; right: -42px; bottom: -63px; width: 150px; height: 150px; border: 1px solid rgba(217, 155, 84, .16); border-radius: 50%; box-shadow: 0 0 0 21px rgba(217, 155, 84, .035), 0 0 0 42px rgba(217, 155, 84, .025); }
.flashback-kop > span { position: relative; z-index: 1; color: var(--gold-light); font-size: .57rem; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.flashback-kop h2 { position: relative; z-index: 1; margin: 0; color: var(--cream); font-family: var(--display); font-size: clamp(2.65rem, 8vw, 4.15rem); font-weight: 500; letter-spacing: -.065em; line-height: .78; text-transform: uppercase; }
.flashback-kop h2 em { color: var(--gold-light); font-weight: 500; }
.flashback-foto { margin: 0; padding: clamp(10px, 2.6vw, 18px); background: #eee5d5; box-shadow: inset 0 0 24px rgba(77, 52, 31, .16), 0 0 0 1px rgba(22, 12, 7, .72); }
.flashback-beeld { display: grid; min-height: 180px; max-height: min(54svh, 480px); overflow: hidden; place-items: center; background: #07151d; box-shadow: 0 0 0 1px rgba(9, 24, 32, .32), inset 0 0 28px rgba(0, 0, 0, .38); }
.flashback-beeld img { display: block; width: 100%; max-height: min(54svh, 480px); object-fit: contain; }
.flashback-foto figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 17px 5px 3px; }
.flashback-label { color: var(--copper); font-size: .62rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.flashback-bijschrift { color: var(--ink); font-family: var(--display); font-size: clamp(1.35rem, 4vw, 1.85rem); font-weight: 600; line-height: 1.08; }
.flashback-albumlink { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; margin-top: 6px; color: var(--copper); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.flashback-albumlink svg { width: 17px; height: 17px; transition: transform .2s; }
.flashback-albumlink:hover svg, .flashback-albumlink:focus-visible svg { transform: translate(2px, -2px); }
.flashback-albumlink:focus-visible, .flashback-sluiten:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.flashback-sluiten { position: absolute; z-index: 4; top: -17px; right: -17px; display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 1px solid rgba(217, 155, 84, .7); border-radius: 50%; background: var(--navy); color: var(--cream); cursor: pointer; box-shadow: 0 8px 24px rgba(2, 8, 11, .48); font-family: var(--sans); font-size: 1.55rem; font-weight: 300; line-height: 1; }
.flashback-sluiten span { transform: translateY(-1px); }
.vat-widget { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; padding: 18px 22px; border: 1px solid rgba(158, 84, 44, .22); background: rgba(255, 255, 255, .55); }
.vat-svg { width: 104px; height: auto; flex: 0 0 auto; }
.vat-tekst { display: flex; flex-direction: column; gap: 4px; }
.vat-uitleg { margin: 0; color: var(--ink); font-family: var(--display); font-size: 1.08rem; font-weight: 600; }
.vat-avond { margin: 0; color: var(--clubhuis-slate); font-size: .76rem; }
.vat-golf { animation: vat-deinen 3.4s ease-in-out infinite; transform-origin: center; }
@keyframes vat-deinen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.chat-berichten { display: flex; flex-direction: column; gap: 12px; min-height: 340px; max-height: 58vh; overflow-y: auto; padding: 22px; border-top: 1px solid rgba(158, 84, 44, .32); border-bottom: 1px solid var(--rule); background: rgba(255, 255, 255, .52); scrollbar-color: var(--copper) transparent; }
.chat-berichten em { color: var(--clubhuis-slate); }
.chat-bericht { align-self: flex-start; max-width: 84%; padding: 11px 15px 12px; border-radius: 2px 14px 14px; background: #e8dfd0; color: var(--ink); }
.chat-bericht-eigen { align-self: flex-end; border-radius: 14px 2px 14px 14px; background: var(--navy); color: white; }
.chat-kop { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.chat-afzender { color: var(--copper); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.chat-bericht-eigen .chat-afzender { color: var(--gold-light); }
.chat-tijd { color: var(--clubhuis-slate); font-size: .62rem; font-variant-numeric: tabular-nums; }
.chat-bericht-eigen .chat-tijd { color: rgba(255, 255, 255, .57); }
.chat-bericht p { margin: 0; white-space: pre-line; }
.chat-form { display: flex; align-items: flex-end; gap: 12px; margin-top: 16px; }
.chat-form textarea { flex: 1; }

.clubhuis-nieuw-evenement { margin: 0 0 34px; }
.clubhuis-nieuw-evenement summary { width: fit-content; list-style: none; cursor: pointer; }
.clubhuis-nieuw-evenement summary::-webkit-details-marker { display: none; }
.clubhuis-nieuw-evenement[open] summary { margin-bottom: 8px; }
.clubhuis-nieuw-evenement[open] summary span { transform: rotate(45deg); }
.clubhuis-evenementen-lijst, .nummers-lijst, .voetbal-wedstrijden { display: flex; flex-direction: column; gap: 15px; }
.evenement-kaart, .wedstrijd-kaart { display: grid; grid-template-columns: 68px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--rule); }
.evenement-kaart:last-child, .wedstrijd-kaart:last-child { border-bottom: 1px solid var(--rule); }
.evenement-verleden { opacity: .55; }
.evenement-datum, .wedstrijd-datum { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: start; min-height: 68px; padding: 8px; border: 1px solid rgba(158, 84, 44, .3); color: var(--copper); text-align: center; }
.evenement-datum strong, .wedstrijd-datum strong { font-family: var(--display); font-size: 1.75rem; font-weight: 500; line-height: .9; }
.evenement-datum span, .wedstrijd-datum span { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.evenement-inhoud h3, .wedstrijd-inhoud h3 { margin: 0 0 5px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--ink); font-family: var(--display); font-size: 1.45rem; font-weight: 600; line-height: 1.15; }
.evenement-meta, .wedstrijd-meta { margin: 0 0 10px; color: var(--clubhuis-slate); font-size: .76rem; }
.evenement-status-badge { padding: 3px 11px; border-radius: 999px; font-family: var(--sans); font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.evenement-status-concept { border: 1px solid rgba(158, 84, 44, .4); background: rgba(158, 84, 44, .1); color: var(--copper); }
.evenement-status-officieel { border: 1px solid rgba(196, 122, 44, .5); background: var(--gold); color: var(--navy); }
.evenement-verwijder-form { margin: 0 0 0 auto; }
.evenement-verwijder { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--clubhuis-slate); font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.evenement-verwijder:hover, .evenement-verwijder:focus-visible { background: rgba(158, 84, 44, .12); color: var(--copper); }
.evenement-concept { opacity: .88; }
.evenement-beschrijving { margin: 0 0 14px; }
.evenement-rsvp { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 13px; }
.rsvp-knop { min-height: 42px; padding: 8px 15px; border: 1px solid var(--rule); border-radius: 999px; background: rgba(255, 255, 255, .65); color: var(--ink); cursor: pointer; font: inherit; font-size: .76rem; font-weight: 700; }
.rsvp-knop:hover { border-color: var(--gold); }
.rsvp-knop.rsvp-komt.actief { border-color: var(--gold); background: var(--gold); color: var(--navy); }
.rsvp-knop.rsvp-komt-niet.actief { border-color: var(--navy); background: var(--navy); color: white; }
.evenement-aanmeldingen p { margin: 2px 0; font-size: .8rem; }
.aanmeldingen-afwezig { color: var(--clubhuis-slate); }
.album-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 28px; }
.album-foto { position: relative; grid-column: span 4; margin: 0; background: var(--clubhuis-chalk); box-shadow: 0 12px 32px rgba(9, 24, 32, .09); }
.album-foto:nth-child(5n + 1), .album-foto:nth-child(5n + 4) { grid-column: span 7; }
.album-foto:nth-child(5n + 2), .album-foto:nth-child(5n + 5) { grid-column: span 5; }
.album-foto img { display: block; width: 100%; height: clamp(220px, 30vw, 360px); object-fit: cover; filter: saturate(.88) contrast(1.03); transition: filter .3s; }
.album-foto:hover img { filter: saturate(1); }
.album-verwijder-form { position: absolute; top: 10px; right: 10px; z-index: 1; margin: 0; }
.album-verwijder { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(9, 24, 32, .55); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .2s, background .2s; }
.album-verwijder:hover { background: rgba(9, 24, 32, .82); }
.album-foto:hover .album-verwijder, .album-verwijder:focus-visible { opacity: 1; }
.album-foto figcaption { display: flex; flex-direction: column; gap: 3px; min-height: 68px; padding: 13px 16px; border-top: 1px solid rgba(158, 84, 44, .18); }
.album-bijschrift { font-family: var(--display); font-size: 1rem; font-weight: 600; }
.album-meta { color: var(--clubhuis-slate); font-size: .67rem; }
.nummer-kaart { overflow: hidden; border: 1px solid var(--rule); background: rgba(255, 255, 255, .58); }
.nummer-embed { line-height: 0; background: var(--navy); }
.nummer-embed iframe { display: block; width: 100%; border: 0; }
.nummer-embed-youtube { aspect-ratio: 16 / 9; }
.nummer-embed-youtube iframe { height: 100%; }
.nummer-info { padding: 16px 20px; }
.nummer-toelichting { margin: 0 0 7px; color: var(--ink); font-family: var(--display); font-size: 1.08rem; font-style: italic; }
.nummer-meta { margin: 0; color: var(--clubhuis-slate); font-size: .7rem; }

/* De Proefkast — een door de clan opgebouwde flessenkaart. */
.clubhuis-page-proefkast .clubhuis-main::before { background: linear-gradient(90deg, rgba(5, 14, 19, .96), rgba(5, 14, 19, .68) 50%, rgba(5, 14, 19, .32)), linear-gradient(180deg, transparent 44%, rgba(9, 24, 32, .94)), url("../lapruik-cask-hero.png") center 48% / cover no-repeat; }
.clubhuis-proefkast-section::after { background: linear-gradient(90deg, rgba(158, 84, 44, .03) 1px, transparent 1px) 0 0 / 104px 100%, linear-gradient(145deg, rgba(247, 245, 240, .99), rgba(237, 230, 217, .96)); }
.proefkast-intro { margin: 0 0 18px; padding: 14px 0 16px; border-bottom: 1px solid rgba(158, 84, 44, .25); color: var(--clubhuis-slate); }
.proefkast-intro p { margin: 0; font-size: .88rem; line-height: 1.5; }
.proefkast-succes { margin: 0 0 22px; padding: 14px 18px; border-left: 3px solid var(--gold); background: rgba(196, 122, 44, .12); color: #4d4b29; font-size: .88rem; }
.proefkast-toevoegen { margin-bottom: 30px; }
.proefkast-toevoegen summary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 0 18px; color: var(--navy); font-size: .76rem; }
.proefkast-toevoegen summary span { display: inline-block; }
.proefkast-toevoegen[open] { padding: 20px clamp(18px, 4vw, 36px) 30px; border-top: 3px solid var(--gold); background: rgba(255, 255, 255, .7); box-shadow: 0 18px 44px rgba(9, 24, 32, .1); }
.proefkast-toevoegen[open] summary { margin: -1px 0 22px; }
.proefkast-toevoegen .clubhuis-form { max-width: none; margin: 0; }
.proefkast-form-kop { padding-bottom: 15px; border-bottom: 1px solid rgba(158, 84, 44, .2); }
.proefkast-form-kop .clubhuis-label { margin-bottom: 5px; }
.proefkast-form-kop h2, .proefkast-ranglijst-kop h2, .proefkast-leeg h2 { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.55rem); font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.proefkast-form-kop p:last-child { margin: 8px 0 0; color: var(--clubhuis-slate); font-size: .78rem; }
.proefkast-score-invoer { display: flex; align-items: center; gap: 10px; }
.clubhuis-form .proefkast-score-invoer input, .proefkast-score-form .proefkast-score-invoer input { width: 112px; min-height: 52px; padding: 9px 12px; border: 1px solid rgba(16, 24, 32, .2); border-radius: 0; background: white; color: var(--ink); font-family: var(--display); font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.proefkast-score-invoer > span { color: var(--clubhuis-slate); font-size: .8rem; font-weight: 800; }
.proefkast-score-invoer input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); }
.proefkast-aanwezigen { margin: 0; padding: 0; border: 0; }
.proefkast-aanwezigen legend { margin: 0 0 8px; padding: 0; color: #465158; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.proefkast-aanwezigen > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.proefkast-aanwezigen label { position: relative; }
.proefkast-aanwezigen input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.proefkast-aanwezigen label span { display: grid; min-height: 48px; padding: 10px 12px; place-items: center; border: 1px solid rgba(16, 24, 32, .18); background: rgba(255, 255, 255, .65); color: var(--ink); font-size: .78rem; font-weight: 700; text-transform: none; }
.proefkast-aanwezigen input:checked + span { border-color: var(--gold); background: rgba(196, 122, 44, .16); color: #703a20; }
.proefkast-aanwezigen input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.proefkast-ranglijst-kop { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 15px; }
.proefkast-ranglijst-kop .clubhuis-label { margin-bottom: 6px; }
.proefkast-aantal { flex: 0 0 auto; padding-bottom: 3px; color: var(--copper); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.proefkast-aantal strong { font-variant-numeric: tabular-nums; }
.proefkast-filters { position: static; inset: auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; width: auto; max-height: none; margin: 0 0 12px; padding: 2px 0 6px; overflow-x: auto; overflow-y: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 1rem; letter-spacing: 0; -webkit-backdrop-filter: none; backdrop-filter: none; scrollbar-width: thin; }
.proefkast-filters a { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 38px; padding: 8px 18px; border: 1px solid rgba(158, 84, 44, .3); border-radius: 999px; background: rgba(255, 255, 255, .55); color: var(--clubhuis-slate); font-family: var(--sans); font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; line-height: 1; text-decoration: none; text-shadow: none; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.proefkast-filters a:hover, .proefkast-filters a:focus-visible { border-color: var(--gold); background: rgba(255, 255, 255, .9); color: var(--copper); transform: translateY(-1px); }
.proefkast-filters a:focus-visible { z-index: 1; outline: 2px solid var(--gold); outline-offset: 2px; }
.proefkast-filters a[aria-current="page"] { border-color: var(--navy); background: var(--navy); color: var(--gold-light); box-shadow: 0 8px 20px rgba(9, 24, 32, .18); transform: translateY(-1px); }
.proefkast-filters a[aria-current="page"]:hover { color: var(--gold-light); }
.proefkast-filters-uitleg { margin: 0 0 22px; color: var(--clubhuis-slate); font-size: .74rem; font-style: italic; }
.proefkast-lijst { display: flex; flex-direction: column; gap: 22px; }
.proefkast-kaart { display: grid; grid-template-columns: minmax(210px, 31%) minmax(0, 1fr); scroll-margin-top: 24px; overflow: hidden; border: 1px solid rgba(158, 84, 44, .24); background: rgba(255, 255, 255, .78); box-shadow: 0 16px 40px rgba(9, 24, 32, .09); }
.proefkast-flesbeeld { position: relative; min-height: 430px; overflow: hidden; background: radial-gradient(circle at 50% 38%, rgba(196, 122, 44, .2), transparent 45%), var(--navy); }
.proefkast-flesbeeld::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset -24px 0 50px rgba(0, 0, 0, .22), inset 0 -50px 70px rgba(0, 0, 0, .2); }
.proefkast-flesbeeld img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.03); }
.proefkast-positie { position: absolute; z-index: 1; top: 16px; left: 16px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(217, 155, 84, .7); border-radius: 50%; background: rgba(7, 20, 29, .84); color: var(--gold-light); font-family: var(--display); font-size: 1.2rem; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.proefkast-acties { position: absolute; top: 16px; right: 16px; z-index: 1; display: flex; gap: 8px; }
.proefkast-roteer-form, .proefkast-verwijder-form { margin: 0; }
.proefkast-roteer, .proefkast-verwijder { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(9, 24, 32, .55); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .2s, background .2s; }
.proefkast-roteer:hover, .proefkast-verwijder:hover { background: rgba(9, 24, 32, .82); }
.proefkast-flesbeeld:hover .proefkast-roteer, .proefkast-flesbeeld:hover .proefkast-verwijder, .proefkast-roteer:focus-visible, .proefkast-verwijder:focus-visible { opacity: 1; }
.proefkast-kaart-inhoud { min-width: 0; padding: clamp(21px, 3vw, 32px); }
.proefkast-kaart-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 21px; border-bottom: 1px solid rgba(158, 84, 44, .2); }
.proefkast-herkomst { margin: 0 0 7px; color: var(--copper); font-size: .61rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.proefkast-kaart-kop h2 { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(1.7rem, 3.8vw, 2.6rem); font-weight: 500; letter-spacing: -.04em; line-height: .98; }
.proefkast-distilleerderij { margin: 8px 0 0; color: var(--clubhuis-slate); font-size: .78rem; }
.proefkast-zegel { display: grid; flex: 0 0 94px; width: 94px; height: 94px; place-content: center; border: 1px solid var(--gold); border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 5px rgba(196, 122, 44, .1); color: white; text-align: center; }
.proefkast-zegel strong { color: var(--gold-light); font-family: var(--display); font-size: 2.05rem; font-weight: 500; line-height: .8; }
.proefkast-zegel span { margin-top: 7px; font-size: .48rem; font-weight: 900; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.proefkast-feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0; margin: 0; border-bottom: 1px solid rgba(158, 84, 44, .16); }
.proefkast-feiten div { padding: 15px 15px 15px 0; }
.proefkast-feiten dt { margin-bottom: 4px; color: var(--clubhuis-slate); font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.proefkast-feiten dd { margin: 0; color: var(--ink); font-size: .76rem; font-weight: 700; line-height: 1.45; }
.proefkast-scores { padding: 18px 0; }
.proefkast-scores-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.proefkast-scores h3 { margin: 0; color: var(--ink); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.proefkast-scores-kop > span { color: var(--clubhuis-slate); font-size: .62rem; font-weight: 700; }
.proefkast-scores ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 1px; background: rgba(158, 84, 44, .15); list-style: none; }
.proefkast-scores li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 8px 12px; background: rgba(247, 245, 240, .94); color: var(--clubhuis-slate); font-size: .72rem; }
.proefkast-scores li strong { color: var(--copper); font-family: var(--display); font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.proefkast-scores > p { margin: 0; color: var(--clubhuis-slate); font-size: .75rem; font-style: italic; }
.proefkast-score-form { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto; align-items: end; gap: 12px; padding-top: 17px; border-top: 1px solid rgba(158, 84, 44, .18); }
.proefkast-score-form > label { align-self: center; color: #465158; font-size: .65rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.proefkast-score-form .button { min-height: 52px; white-space: nowrap; }
.proefkast-leeg { display: grid; min-height: 300px; padding: 48px 28px; place-items: center; border: 1px dashed rgba(158, 84, 44, .35); background: rgba(255, 255, 255, .5); text-align: center; }
.proefkast-leeg svg { width: 58px; height: 58px; color: var(--copper); }
.proefkast-leeg h2 { margin-top: 10px; }
.proefkast-leeg p { max-width: 470px; margin: 0; color: var(--clubhuis-slate); line-height: 1.6; }
.clubhuis-voetbal-section::after { background: linear-gradient(90deg, rgba(158, 84, 44, .028) 1px, transparent 1px) 0 0 / 96px 100%, linear-gradient(145deg, rgba(247, 245, 240, .99), rgba(237, 230, 217, .96)); }
.clubhuis-voetbal-section h2 { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 2.55rem); font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.voetbal-uitleg { max-width: 680px; margin: 0 0 24px; padding-left: 16px; border-left: 2px solid var(--copper); }
.voetbal-samenvatting { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 38px; border: 1px solid rgba(158, 84, 44, .23); background: rgba(255, 255, 255, .58); box-shadow: 0 10px 28px rgba(9, 24, 32, .055); }
.voetbal-samenvatting > div { min-width: 0; padding: 17px 20px 18px; border-right: 1px solid rgba(158, 84, 44, .18); }
.voetbal-samenvatting > div:last-child { border-right: 0; }
.voetbal-samenvatting span, .voetbal-samenvatting small { display: block; color: var(--clubhuis-slate); font-size: .62rem; font-weight: 800; letter-spacing: .1em; line-height: 1.25; text-transform: uppercase; }
.voetbal-samenvatting strong { display: block; margin: 7px 0 3px; overflow: hidden; color: var(--ink); font-family: var(--display); font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: 600; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.voetbal-sectie-kop { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin: 42px 0 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(158, 84, 44, .28); }
.voetbal-sectie-kop p { order: -1; margin: 0; color: var(--copper); font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.voetbal-sectie-kop-ranglijst, .voetbal-sectie-kop-uitslagen { margin-top: 54px; }
.voetbal-sectie-kop-eerst { margin-top: 0; }
.voetbal-sectie-kop-eerst + .voetbal-ranglijst { margin-bottom: 34px; }
.voetbal-ranglijst { position: relative; overflow: hidden; padding: 20px 24px; border-top: 3px solid var(--gold); background: var(--navy); color: white; box-shadow: 0 18px 42px rgba(9, 24, 32, .18); }
.voetbal-ranglijst::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 210px; height: 210px; border: 1px solid rgba(217, 155, 84, .13); border-radius: 50%; box-shadow: 0 0 0 30px rgba(217, 155, 84, .035), 0 0 0 60px rgba(217, 155, 84, .025); }
.voetbal-ranglijst ol { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }
.ranglijst-leeg { position: relative; z-index: 1; max-width: 540px; margin: 0; color: rgba(255, 255, 255, .72); font-size: .88rem; line-height: 1.6; }
.voetbal-ranglijst li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.voetbal-ranglijst li:last-child { border-bottom: 0; }
.voetbal-ranglijst li.ranglijst-eigen { color: var(--gold-light); font-weight: 800; }
.voetbal-ranglijst-enkel { padding-top: 14px; padding-bottom: 14px; }
.voetbal-ranglijst-enkel::after { display: none; }
.voetbal-ranglijst-enkel li { padding: 6px 0; }
.voetbal-ranglijst-enkel .ranglijst-info { gap: 0; }
.voetbal-ranglijst-enkel .ranglijst-naam-rij { align-items: center; }
.ranglijst-positie { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; color: var(--mist); font-family: var(--display); font-size: 1rem; text-align: center; }
.ranglijst-positie-1 { border-color: var(--gold); background: var(--gold); color: var(--navy); }
.ranglijst-eigen .ranglijst-positie { box-shadow: 0 0 0 3px rgba(217, 155, 84, .16); color: var(--gold-light); }
.ranglijst-eigen .ranglijst-positie-1 { color: var(--navy); }
.ranglijst-info { display: flex; flex: 1; flex-direction: column; gap: 7px; min-width: 0; }
.ranglijst-naam-rij { display: flex; align-items: baseline; gap: 9px; }
.ranglijst-naam { flex: 1; }
.ranglijst-streak { color: var(--gold-light); font-size: .65rem; font-weight: 800; white-space: nowrap; }
.ranglijst-punten { font-weight: 800; font-variant-numeric: tabular-nums; }
.ranglijst-balk { display: block; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.ranglijst-balk-vulling { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--copper), var(--gold-light)); transition: width .5s ease; }
.clubhuis-voetbal-section .voetbal-wedstrijden { gap: 16px; }
.clubhuis-voetbal-section .wedstrijd-kaart { display: block; overflow: hidden; scroll-margin-top: 18px; padding: 0; border: 1px solid rgba(158, 84, 44, .26); background: rgba(255, 255, 255, .78); box-shadow: 0 12px 30px rgba(9, 24, 32, .075); }
.clubhuis-voetbal-section .wedstrijd-kaart:last-child { border-bottom: 1px solid rgba(158, 84, 44, .24); }
.wedstrijd-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 11px 20px; border-bottom: 1px solid rgba(158, 84, 44, .17); background: linear-gradient(90deg, rgba(9, 24, 32, .045), transparent); }
.wedstrijd-moment { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.wedstrijd-moment span { color: var(--copper); font-size: .63rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.wedstrijd-moment strong { font-family: var(--display); font-size: 1.28rem; font-weight: 600; line-height: 1; text-transform: lowercase; }
.wedstrijd-kop .wedstrijd-meta { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink); font-size: .75rem; font-variant-numeric: tabular-nums; }
.wedstrijd-kop .wedstrijd-meta span { padding: 5px 8px; background: var(--navy); color: var(--gold-light); font-size: .56rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.wedstrijd-kop .wedstrijd-meta strong { font-weight: 800; white-space: nowrap; }
.clubhuis-voetbal-section .wedstrijd-inhoud { padding: 18px 20px 17px; }
.voetbal-voorspel-form { display: block; margin: 0; }
.wedstrijd-scorevelden { margin: 0; padding: 0; border: 0; }
.wedstrijd-score-rij { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 66px; padding: 9px 12px; border: 1px solid rgba(158, 84, 44, .16); background: rgba(247, 245, 240, .72); cursor: text; }
.wedstrijd-clublogo { display: grid; width: 42px; height: 47px; place-items: center; border: 1px solid rgba(158, 84, 44, .38); background: linear-gradient(160deg, #fff, #e9dfce); clip-path: polygon(50% 0, 92% 15%, 84% 76%, 50% 100%, 16% 76%, 8% 15%); color: var(--copper); font-family: var(--sans); font-size: .58rem; font-weight: 900; letter-spacing: .04em; }
.voorspel-team { min-width: 0; color: var(--ink); font-family: var(--display); font-size: 1.07rem; font-weight: 600; line-height: 1.12; }
.wedstrijd-score-invoer { display: flex; align-items: center; gap: 9px; }
.wedstrijd-score-invoer > span { color: var(--clubhuis-slate); font-size: .56rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.voetbal-voorspel-form input[type="number"] { width: 54px; min-height: 50px; padding: 5px; border-color: rgba(9, 24, 32, .2); background: #fff; color: var(--ink); font-family: var(--display); font-size: 1.5rem; font-weight: 600; text-align: center; }
.voetbal-voorspel-form input[type="number"]::placeholder { color: rgba(104, 114, 119, .58); opacity: 1; }
.wedstrijd-tegen { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px; height: 26px; color: var(--clubhuis-slate); font-size: .52rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.wedstrijd-tegen::before, .wedstrijd-tegen::after { content: ""; height: 1px; background: rgba(158, 84, 44, .14); }
.voetbal-voorspel-form .button { width: 100%; min-height: 50px; margin-top: 14px; justify-content: center; border-radius: 2px; }
.voetbal-status, .voetbal-al-voorspeld { margin: 13px 0 0; color: var(--clubhuis-slate); font-size: .74rem; line-height: 1.5; }
.voetbal-status { padding: 11px 13px; border-left: 2px solid var(--copper); background: rgba(158, 84, 44, .07); }
.voetbal-bevestiging { margin: 12px 0 0; padding: 10px 12px; border-left: 2px solid var(--gold); background: rgba(196, 122, 44, .1); color: #5d351d; font-size: .76rem; font-weight: 800; }
.voetbal-al-voorspeld { padding-top: 12px; border-top: 1px solid rgba(158, 84, 44, .13); }
.voetbal-al-voorspeld > span { display: inline-grid; min-width: 21px; height: 21px; margin-right: 4px; place-items: center; border-radius: 50%; background: var(--navy); color: var(--gold-light); font-weight: 900; }
.voetbal-leegblok { padding: 20px; border: 1px solid rgba(158, 84, 44, .2); background: rgba(255, 255, 255, .62); }
.voetbal-wachtlijst { margin-top: 18px; border-top: 1px solid rgba(158, 84, 44, .26); border-bottom: 1px solid rgba(158, 84, 44, .26); }
.voetbal-wachtlijst summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 2px; color: var(--ink); cursor: pointer; font-size: .78rem; font-weight: 800; list-style-position: inside; }
.voetbal-wachtlijst summary::marker { color: var(--copper); }
.voetbal-wachtlijst summary strong { display: grid; width: 26px; height: 26px; margin-left: auto; place-items: center; border-radius: 50%; background: var(--navy); color: var(--gold-light); font-size: .68rem; }
.voetbal-wachtlijst[open] { padding-bottom: 16px; }
.voetbal-wachtlijst[open] summary { margin-bottom: 14px; }
.wedstrijd-gesloten { box-shadow: none !important; }
.wedstrijd-gesloten .wedstrijd-kop .wedstrijd-meta span { background: var(--copper); color: white; }
.wedstrijd-gesloten-teams { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; gap: 8px; }
.wedstrijd-gesloten-teams > div { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
.wedstrijd-gesloten-teams > div strong { color: var(--ink); font-family: var(--display); font-size: .95rem; font-weight: 600; line-height: 1.12; }
.wedstrijd-gesloten-teams > span { color: var(--copper); font-family: var(--display); font-size: 1.4rem; text-align: center; }
.wedstrijd-afgelopen { opacity: 1; }
.wedstrijd-afgelopen .wedstrijd-kop .wedstrijd-meta span { background: var(--copper); color: white; }
.wedstrijd-scorebord { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.wedstrijd-uitslag-team { display: grid; grid-template-columns: 44px minmax(0, 1fr) 40px; align-items: center; gap: 12px; min-height: 58px; padding: 6px 10px; background: rgba(247, 245, 240, .72); }
.wedstrijd-uitslag-team > strong { color: var(--ink); font-family: var(--display); font-size: 1.8rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
.voetbal-uitslag-lijst { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; border-top: 1px solid rgba(158, 84, 44, .16); list-style: none; }
.voetbal-uitslag-lijst li { display: flex; align-items: center; gap: 10px; min-height: 38px; border-bottom: 1px solid rgba(158, 84, 44, .1); font-size: .78rem; }
.voetbal-uitslag-lijst li:last-child { border-bottom: 0; }
.uitslag-naam { flex: 1; font-weight: 700; }
.uitslag-gok { color: var(--clubhuis-slate); font-variant-numeric: tabular-nums; }
.uitslag-punten { min-width: 48px; padding: 3px 9px; border-radius: 2px; background: var(--paper); text-align: center; font-size: .7rem; font-weight: 800; }
.uitslag-punten-3 { background: var(--gold); color: var(--navy); }
.uitslag-punten-0 { background: transparent; color: var(--clubhuis-slate); }

.clubhuis-footer { padding: 36px clamp(24px, 7vw, 110px); border-top: 1px solid rgba(255, 255, 255, .1); background: var(--navy); color: white; }
.clubhuis-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; width: min(100%, 1200px); margin: 0 auto; }
.clubhuis-footer-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.clubhuis-footer-brand img { width: 34px; height: 46px; object-fit: contain; filter: brightness(0) invert(1); }
.clubhuis-footer-brand span { display: flex; flex-direction: column; line-height: 1.1; }
.clubhuis-footer-brand strong { color: white; font-family: var(--display); font-size: 1.08rem; }
.clubhuis-footer-brand small { margin-top: 5px; color: var(--gold-light); font-size: .55rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.clubhuis-footer p { color: #80949b; font-size: .68rem; letter-spacing: .04em; }
.clubhuis-footer p span { margin: 0 5px; color: var(--copper); }
.clubhuis-footer-legal { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.clubhuis-footer-legal a { color: inherit; border-bottom: 1px solid rgba(255,255,255,.25); transition: color .2s, border-color .2s; }
.clubhuis-footer-legal a:hover { color: var(--gold-light); border-color: var(--gold-light); }
.clubhuis-snelnav { display: none; }

@media (max-width: 1180px) {
  .clubhuis-header nav { gap: 13px; }
  .clubhuis-header .nav-speler { display: none; }
  .clubhuis-nav-meta { padding-left: 13px; }
}
@media (max-width: 900px) {
  .clubhuis-header nav { font-size: .64rem; }
  .clubhuis-header nav > a:nth-child(6), .clubhuis-header nav > a:nth-child(7) { display: none; }
  .clubhuis-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .clubhuis-body:not(.clubhuis-body-login) { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  nav.clubhuis-snelnav { position: fixed; z-index: 100; right: 0; bottom: 0; left: 0; top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; width: auto; max-height: none; min-height: calc(64px + env(safe-area-inset-bottom)); padding: 6px 8px calc(16px + env(safe-area-inset-bottom)); overflow: visible; background: rgba(7, 20, 29, .97); border: 0; border-top: 1px solid rgba(255, 255, 255, .16); border-radius: 0; box-shadow: 0 -10px 32px rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(16px) saturate(.9); backdrop-filter: blur(16px) saturate(.9); }
  .clubhuis-snelnav a, .clubhuis-snelnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 52px; padding: 5px 4px; border: 0; border-radius: 12px; background: transparent; color: rgba(255, 255, 255, .7); cursor: pointer; font: inherit; font-size: .6rem; font-weight: 700; line-height: 1.1; letter-spacing: .015em; text-align: center; text-decoration: none; text-shadow: none; }
  .clubhuis-snelnav svg { width: 21px; height: 21px; flex: 0 0 auto; }
  .clubhuis-snelnav a[aria-current="page"] { background: rgba(196, 122, 44, .16); color: var(--gold-light); }
  .clubhuis-page-index .clubhuis-snelnav a[aria-current="page"] { background: rgba(196, 122, 44, .27); color: #f0ad61; box-shadow: inset 0 0 0 1px rgba(217, 155, 84, .28); }
  .clubhuis-snelnav a:focus-visible, .clubhuis-snelnav button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -2px; }
  .clubhuis-snelnav a:active, .clubhuis-snelnav button:active { background: rgba(255, 255, 255, .1); color: white; }
  .clubhuis-main { padding-top: 72px; }
  .clubhuis-main::before { height: 280px; }
  .clubhuis-main::after { top: 185px; left: 20px; width: 44px; }
  .clubhuis-page-index .clubhuis-main::before { height: 380px; background: linear-gradient(180deg, rgba(9, 24, 32, .02) 0, transparent 72%, rgba(9, 24, 32, .61) 100%), linear-gradient(90deg, rgba(5, 14, 19, .1), transparent 72%), url("../lapruik-clan-verhaal-clean.jpg") 48% 56px / 116% auto no-repeat, var(--navy); }
  .clubhuis-main > section { width: calc(100% - 40px); padding-top: 50px; padding-bottom: 92px; }
  .clubhuis-main > .clubhuis-album-section, .clubhuis-main > .clubhuis-chat-section, .clubhuis-main > .clubhuis-proefkast-section { width: calc(100% - 40px); }
  .clubhuis-main > .clubhuis-kop { width: calc(100% - 40px); }
  .clubhuis-titel { min-height: 124px; max-width: 100%; font-size: clamp(3.25rem, 16vw, 4.8rem); }
  .clubhuis-onderwerp-beeld { top: 60px; right: -5px; width: 82px; height: 82px; opacity: .18; }
  .clubhuis-chat-section::after, .clubhuis-agenda-section::after, .clubhuis-nummers-section::after, .clubhuis-album-section::after, .clubhuis-voetbal-section::after, .clubhuis-proefkast-section::after { top: 0; right: -12px; bottom: 55px; left: -12px; }
  .clubhuis-chat-section::before, .clubhuis-agenda-section::before, .clubhuis-nummers-section::before, .clubhuis-album-section::before, .clubhuis-voetbal-section::before, .clubhuis-proefkast-section::before { top: 0; left: -12px; }
  .clubhuis-page-index .clubhuis-chat-section::after { top: 308px; background: var(--cream); }

  /* Navy kop, mobiele variant: iets minder ruimte boven de tekst. */
  .clubhuis-kop { padding-top: 22px; }
  .clubhuis-page-agenda .clubhuis-titel,
  .clubhuis-page-wie-betaalt-wat .clubhuis-titel,
  .clubhuis-page-album .clubhuis-titel,
  .clubhuis-page-voetbal .clubhuis-titel,
  .clubhuis-page-nummers .clubhuis-titel { font-size: clamp(2.3rem, 11vw, 3rem); }
  .clubhuis-page-agenda .clubhuis-titel,
  .clubhuis-page-wie-betaalt-wat .clubhuis-titel,
  .clubhuis-page-album .clubhuis-titel,
  .clubhuis-page-voetbal .clubhuis-titel,
  .clubhuis-page-nummers .clubhuis-titel,
  .clubhuis-page-proefkast .clubhuis-titel { min-height: 0; }
  .clubhuis-page-agenda .clubhuis-onderwerp-beeld,
  .clubhuis-page-wie-betaalt-wat .clubhuis-onderwerp-beeld,
  .clubhuis-page-album .clubhuis-onderwerp-beeld,
  .clubhuis-page-voetbal .clubhuis-onderwerp-beeld,
  .clubhuis-page-nummers .clubhuis-onderwerp-beeld { top: 16px; width: 64px; height: 64px; }
  .clubhuis-page-index .clubhuis-hero-intro { min-height: 248px; }
  .clubhuis-hero-vat { left: -4px; }
  .clubhuis-hero-vat .vat-widget { width: min(268px, 80vw); padding: 8px 12px; background: rgba(7, 20, 29, .74); }
  .clubhuis-page-index .clubhuis-hero-vat .vat-widget { background: rgba(7, 20, 29, .9); }
  .clubhuis-hero-vat .vat-tekst::before { font-size: .47rem; }
  .clubhuis-hero-vat .vat-uitleg { font-size: .76rem; line-height: 1.08; }
  .clubhuis-hero-vat .vat-avond { font-size: .56rem; }
  .clubhuis-hero-groet { bottom: 18px; font-size: 1.125rem; line-height: 1.2; }
  .clubhuis-header nav { top: 72px; max-height: calc(100svh - 72px); overflow-y: auto; gap: 0; padding: 18px 24px 30px; background: rgba(7, 20, 29, .985); font-size: .8rem; }
  .clubhuis-header nav > a, .clubhuis-header nav > a:nth-child(5), .clubhuis-header nav > a:nth-child(6), .clubhuis-header nav > a:nth-child(7) { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .clubhuis-header nav > a[aria-current="page"]::after { width: 7px; height: 7px; margin: 0 2px 0 0; transform: rotate(45deg); }
  .clubhuis-nav-meta { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 12px; margin: 18px 0 0; padding: 0; border: 0; }
  .clubhuis-site-link { display: flex; }
  .clubhuis-nav-meta .nav-speler { display: block; }
  .clubhuis-header .nav-cta { justify-content: center; width: auto; min-height: 44px; padding: 8px 18px; border: 1px solid rgba(255, 255, 255, .65); }
  .clubhuis-form-rij { flex-direction: column; }
  .clubhuis-tegels { grid-template-columns: 1fr 1fr; }
  .clubhuis-page-index .clubhuis-overzicht { margin: -8px -20px 0; }
  .clubhuis-page-index .clubhuis-tegels { width: 100%; margin-left: 0; }
  .clubhuis-tegel { min-height: 156px; padding: 17px; }
  .clubhuis-tegel-icoon { width: 42px; height: 42px; }
  .clubhuis-tegel-copy strong { font-size: 1.08rem; }
  .clubhuis-tegel-copy small { font-size: .63rem; }
  .clubhuis-tegel-pijl { top: 15px; right: 15px; }
  .clubhuis-highlights { margin-bottom: 42px; }
  .clubhuis-highlights .vat-widget { min-height: 230px; }
  .flashback-popup { width: calc(100% - 34px); max-height: calc(100svh - 34px); }
  .flashback-lijst { padding: 8px; }
  .flashback-kop { gap: 7px; padding: 18px 17px 17px; }
  .flashback-kop h2 { font-size: clamp(2.4rem, 13vw, 3.2rem); }
  .flashback-foto { padding: 10px; }
  .flashback-foto figcaption { padding: 14px 3px 2px; }
  .flashback-sluiten { top: -14px; right: -14px; }
  .chat-form { flex-direction: column; align-items: stretch; }
  .chat-form .button { align-self: flex-end; }
  .chat-berichten { max-height: 62svh; padding: 16px 12px; }
  .chat-bericht { max-width: 90%; }
  .evenement-kaart, .wedstrijd-kaart { grid-template-columns: 1fr; gap: 14px; }
  .evenement-datum, .wedstrijd-datum { flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 44px; width: fit-content; padding: 7px 11px; }
  .evenement-datum strong, .wedstrijd-datum strong { font-size: 1.3rem; }
  .album-grid { display: flex; flex-direction: column; gap: 20px; }
  .album-foto img { height: min(74vw, 360px); }
  .album-verwijder { opacity: 1; }
  .proefkast-roteer, .proefkast-verwijder { opacity: 1; }
  .proefkast-intro { margin-bottom: 16px; padding-top: 14px; }
  .proefkast-toevoegen { margin-bottom: 28px; }
  .proefkast-toevoegen[open] { margin-right: -8px; margin-left: -8px; padding: 17px 14px 24px; }
  .proefkast-aanwezigen > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proefkast-ranglijst-kop h2 { font-size: 1.65rem; }
  .proefkast-filters { margin-right: -20px; padding-right: 20px; }
  .proefkast-filters a { min-height: 42px; padding: 9px 14px; }
  .proefkast-kaart { grid-template-columns: 1fr; }
  .proefkast-flesbeeld { min-height: 0; aspect-ratio: 4 / 3; }
  .proefkast-flesbeeld::after { box-shadow: inset 0 -50px 70px rgba(0, 0, 0, .24); }
  .proefkast-kaart-inhoud { padding: 19px 16px 20px; }
  .proefkast-kaart-kop { gap: 14px; }
  .proefkast-zegel { flex-basis: 78px; width: 78px; height: 78px; }
  .proefkast-zegel strong { font-size: 1.72rem; }
  .proefkast-zegel span { margin-top: 5px; font-size: .42rem; }
  .proefkast-feiten { grid-template-columns: 1fr; }
  .proefkast-feiten div { padding: 11px 0; border-bottom: 1px solid rgba(158, 84, 44, .1); }
  .proefkast-feiten div:last-child { border-bottom: 0; }
  .proefkast-score-form { grid-template-columns: 1fr auto; }
  .proefkast-score-form > label { grid-column: 1 / -1; }
  .proefkast-score-form .proefkast-score-invoer input { width: 94px; }
  .proefkast-score-form .button { padding-right: 15px; padding-left: 15px; }
  .clubhuis-main > .clubhuis-voetbal-section { width: calc(100% - 32px); }
  .clubhuis-main > .clubhuis-voetbal-section { padding-top: 42px; }
  .clubhuis-voetbal-section > .section-kicker { margin-bottom: 16px; }
  .clubhuis-voetbal-section > .clubhuis-titel { min-height: 138px; font-size: clamp(2.7rem, 12.5vw, 3.65rem); line-height: 1; letter-spacing: -.045em; }
  .clubhuis-voetbal-section > .clubhuis-onderwerp-beeld { display: none; }
  .clubhuis-voetbal-section::after { top: 0; }
  .clubhuis-voetbal-section::before { top: 0; }
  .voetbal-uitleg { max-width: 38rem; margin-bottom: 20px; padding-left: 12px; font-size: .91rem; line-height: 1.55; }
  .voetbal-samenvatting { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 28px; }
  .voetbal-samenvatting > div { display: flex; flex-direction: column; justify-content: center; min-height: 92px; padding: 14px 15px; }
  .voetbal-samenvatting > div:nth-child(2) { border-right: 0; }
  .voetbal-samenvatting > div:last-child { grid-column: 1 / -1; min-height: 76px; border-top: 1px solid rgba(158, 84, 44, .18); }
  .voetbal-samenvatting span, .voetbal-samenvatting small { font-size: .7rem; letter-spacing: .07em; }
  .voetbal-samenvatting strong { margin: 7px 0 4px; font-size: 1.55rem; }
  .voetbal-samenvatting > div:last-child strong { font-size: 1.35rem; white-space: normal; }
  .voetbal-sectie-kop { margin: 34px 0 13px; padding-bottom: 11px; }
  .voetbal-sectie-kop-ranglijst, .voetbal-sectie-kop-uitslagen { margin-top: 44px; }
  .voetbal-sectie-kop-eerst { margin-top: 0; }
  .voetbal-sectie-kop-eerst + .voetbal-ranglijst { margin-bottom: 28px; }
  .voetbal-ranglijst { padding: 18px 16px; }
  .voetbal-ranglijst-enkel { padding-top: 14px; padding-bottom: 14px; }
  .ranglijst-naam-rij { gap: 7px; }
  .ranglijst-streak { font-size: .59rem; }
  .clubhuis-voetbal-section .wedstrijd-inhoud { padding: 15px 13px 14px; }
  .wedstrijd-kop { min-height: 58px; padding: 9px 13px; }
  .wedstrijd-moment { flex-direction: column; align-items: flex-start; gap: 3px; }
  .wedstrijd-moment span { font-size: .58rem; }
  .wedstrijd-moment strong { font-size: 1.12rem; }
  .wedstrijd-kop .wedstrijd-meta { gap: 8px; font-size: .72rem; }
  .wedstrijd-kop .wedstrijd-meta span { padding: 4px 6px; font-size: .51rem; }
  .wedstrijd-score-rij { grid-template-columns: 42px minmax(0, 1fr) 54px; gap: 10px; min-height: 62px; padding: 8px 9px; }
  .wedstrijd-clublogo { width: 39px; height: 44px; font-size: .54rem; }
  .voorspel-team { font-size: .98rem; }
  .wedstrijd-score-invoer > span { display: none; }
  .voetbal-voorspel-form input[type="number"] { width: 52px; min-height: 48px; font-size: 1.4rem; }
  .clubhuis-voetbal-section .voetbal-voorspel-form .button { margin-top: 13px; }
  .voetbal-al-voorspeld { font-size: .72rem; }
  .wedstrijd-gesloten-teams { gap: 5px; }
  .wedstrijd-gesloten-teams > div strong { font-size: .88rem; }
  .wedstrijd-uitslag-team { grid-template-columns: 40px minmax(0, 1fr) 36px; gap: 10px; min-height: 54px; padding: 5px 8px; }
  .wedstrijd-uitslag-team > strong { font-size: 1.6rem; }
  .clubhuis-footer { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
  .clubhuis-footer-inner { flex-direction: column; align-items: flex-start; }
  .clubhuis-footer-legal { align-items: flex-start; text-align: left; }
  .clubhuis-body-login .clubhuis-main { padding: 94px 14px 42px; }
  .clubhuis-main > .clubhuis-login { padding: 30px 22px 34px; }
}
@media (min-width: 560px) and (max-width: 720px) {
  .proefkast-kaart { grid-template-columns: 190px minmax(0, 1fr); }
  .proefkast-flesbeeld { min-height: 500px; aspect-ratio: auto; }
  .proefkast-flesbeeld::after { box-shadow: inset -24px 0 50px rgba(0, 0, 0, .2), inset 0 -50px 70px rgba(0, 0, 0, .2); }
  .proefkast-kaart-inhoud { padding: 18px 15px 20px; }
  .proefkast-scores ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .vat-golf { animation: none; }
  .flashback-popup { transition: none; }
}