/* =========================================================================
DE TREFFERS - DDC DESIGNTAAL (Lerry · feat/de-treffers-mockup · v2)
Bron van waarheid: _design/designtaal.md + _design/sample.html
Eigen vormtaal: 1919-sjerp (58deg) · zelf-getekende schild-iconen ·
stencil-condensed all-caps (Anton) · embossed wapen-zegel · warm papier.
Vanilla, geen libraries. Gedeeld door alle pagina's.
========================================================================= */
:root{
--dt-red:#e3001b; --dt-red-ink:#b00014; --dt-red-deep:#8d0010;
--dt-black:#0a0a0a; --dt-coal:#15151a; --dt-coal-2:#1f1f26;
/* v3: achtergrond WITTER (was #f4f1ea). Pixel's definitieve waarden (note-v3.md), contrast-gemeten. */
--dt-bone:#faf8f4; --dt-bone-2:#ece7dc; --dt-bone-3:#ddd7c9;
--dt-bone-warm:#f4f1ea; /* warme programmaboekje-toon waar nog gewenst */
--dt-ash:#6f6a60; --dt-gold:#c8a04a;
--display:"Anton","Oswald",system-ui,sans-serif;
--sans:"Inter",system-ui,-apple-system,sans-serif;
--sash:58deg;
--maxw:1200px; --gutter:clamp(18px,4vw,40px);
--ease:cubic-bezier(.22,.61,.36,1);
--hdr-h:68px;
--check:url("data:image/svg+xml;utf8,");
/* --- WOW-redesign gedeelde tokens (concept-doc sectie 0) --- */
/* premium easing-familie (1 taal over alle motion, sluit aan op intro-veeg) */
--ease-out: cubic-bezier(.16,.84,.44,1); /* binnenkomst: zacht uitlopend, cinematic */
--ease-inout: cubic-bezier(.65,0,.35,1); /* sjerp-wipes en symmetrische bewegingen */
--ease-soft: cubic-bezier(.22,.61,.36,1); /* = bestaande --ease, micro-interacties */
/* premium timings */
--t-micro: 180ms; /* hover-kleur, icon-shift */
--t-lift: 320ms; /* card-lift, CTA-lift */
--t-reveal: 720ms; /* scroll-reveal, hero-tekst-binnenkomst */
--t-xfade: 1100ms; /* hero cross-fade tussen nieuwsitems */
--t-ken: 8000ms; /* Ken Burns-inzoom-duur terwijl item in beeld staat */
/* premium schaduwen (warm, niet blauw-grijs) */
--shadow-lift: 0 18px 50px -12px rgba(10,10,10,.34);
--shadow-red: 0 14px 34px -10px rgba(227,0,27,.42);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);background:var(--dt-bone);color:var(--dt-black);
line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;line-height:.92;
letter-spacing:.006em;text-transform:uppercase}
button{font-family:inherit}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.tnum{font-feature-settings:"tnum"}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
:focus-visible{outline:3px solid var(--dt-red);outline-offset:2px}
/* eyebrow met mini-sjerp (geen lijn) */
.kicker{display:inline-flex;align-items:center;gap:11px;font:700 12px/1 var(--sans);
letter-spacing:.22em;text-transform:uppercase;color:var(--dt-red-ink)}
.kicker::before{content:"";width:30px;height:9px;background:var(--dt-red);
clip-path:polygon(18% 0,100% 0,82% 100%,0 100%)}
.on-dark .kicker,.section--dark .kicker,.section--coal .kicker,.hero .kicker,.bc-hero__intro .kicker{color:#ff5066}
.on-dark .kicker::before,.section--dark .kicker::before,.section--coal .kicker::before,.hero .kicker::before,.bc-hero__intro .kicker::before{background:var(--dt-red)}
/* =========================================================================
EIGEN SCHILD-ICONEN (sprite onderaan elke pagina-body)
========================================================================= */
/* v3 (S15): Pixel's verfijnde set - dunnere 1.5-streek voor een lichtere, crispere
stempel op nav-maat (was 2). Knoppen/SVG die zwaarder moeten blijven, zetten
zelf een eigen stroke-width (bv .btn .dt-ico = 2.4). */
.dt-ico{width:1.4em;height:1.4em;display:inline-block;vertical-align:middle;
fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:miter;stroke-linecap:butt}
.ico-badge{width:58px;height:64px}
.ico-badge .shield-fill{fill:var(--dt-black);stroke:none}
.ico-badge .glyph{stroke:#fff;stroke-width:2.2;fill:none}
.ico-badge .sash{stroke:var(--dt-red);stroke-width:5;fill:none}
/* =========================================================================
INTRO - doek-veeg die DIRECT de site onthult. Geen zwart tussenscherm:
twee doek-panelen die meteen wegvegen onder de sjerp-hoek. <1.5s totaal.
========================================================================= */
.intro{position:fixed;inset:0;z-index:120;pointer-events:none}
.intro__panel{position:absolute;top:0;bottom:0;width:52%;background:var(--dt-red);
display:flex;align-items:center;will-change:transform}
.intro__panel--l{left:0;justify-content:flex-end;
clip-path:polygon(0 0,100% 0,calc(100% - 60px) 100%,0 100%)}
.intro__panel--r{right:0;background:var(--dt-black);justify-content:flex-start;
clip-path:polygon(60px 0,100% 0,100% 100%,0 100%)}
.intro__crest{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:14px;z-index:2;color:#fff;text-align:center}
.intro__crest img{width:128px;height:128px;object-fit:contain;
filter:drop-shadow(0 10px 30px rgba(0,0,0,.5))}
.intro__crest .yr{font-family:var(--display);font-size:2.4rem;color:#fff;letter-spacing:.05em}
.intro__crest .tl{font:700 .78rem/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--dt-gold)}
.intro.run .intro__panel--l{animation:wipeL .8s var(--ease) .35s forwards}
.intro.run .intro__panel--r{animation:wipeR .8s var(--ease) .35s forwards}
.intro.run .intro__crest{animation:crestOut .4s var(--ease) .35s forwards}
@keyframes wipeL{to{transform:translateX(-102%)}}
@keyframes wipeR{to{transform:translateX(102%)}}
@keyframes crestOut{to{opacity:0;transform:scale(.86)}}
.intro.done{display:none}
@media (prefers-reduced-motion:reduce){.intro{display:none}}
/* =========================================================================
HEADER / NAV (WOW S1) - sticky shell met utility-strip + hoofdbalk die
transparant->solid wisselt over de hero. Het rode 1px-hairline-merksignaal
vervangt de generieke box-shadow. Iconen op de 1.5-familie-streek.
========================================================================= */
.site-shell{position:sticky;top:0;z-index:60}
/* op pagina's met een full-bleed hero overlapt de shell de hero (transparante
balk OVER het beeld). De hero begint dan op y=0 ONDER de balk; overige content
stroomt normaal. Primair via :has() (geen FOUC/jump), met de JS-class
.site-shell--overlay als fallback voor engines zonder :has(). */
.site-shell--overlay,
body:has(.hslider) .site-shell,
body:has([data-hero]) .site-shell{position:fixed;left:0;right:0;top:0}
/* utility-strip (dun, boven de hoofdbalk; schuift weg op scroll) */
.utility-strip{background:var(--dt-black);color:rgba(250,248,244,.72);
height:34px;overflow:hidden;
transition:height var(--t-lift) var(--ease-soft),transform var(--t-lift) var(--ease-soft)}
.utility-strip .wrap{display:flex;align-items:center;justify-content:space-between;height:34px;gap:14px}
.utility-strip__l,.utility-strip__r{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);
font:600 .76rem/1 var(--sans);letter-spacing:.04em}
.utility-strip__sep{opacity:.3}
.utility-strip a{color:rgba(250,248,244,.72);transition:color var(--t-micro) var(--ease-soft)}
.utility-strip a:hover{color:#fff}
.utility-strip .yr{color:var(--dt-gold)}
/* Compacte 'Word lid'-conversielink in de utility-strip: ALLEEN zichtbaar als de
nav-knop .btn-join verbergt (<=1320px) en de strip zelf nog toont (>920px).
Zo is de primaire CTA altijd 1 klik weg. Subtiel gouden accent = premium, niet
schreeuwerig. */
.utility-strip__join{display:none;align-items:center;gap:6px;color:var(--dt-gold);font-weight:700;letter-spacing:.06em}
.utility-strip__join:hover{color:#fff}
.utility-strip__join .dt-ico{width:1.05em;height:1.05em}
.utility-strip__sep--join{display:none}
@media(max-width:1320px){
.utility-strip__join{display:inline-flex}
.utility-strip__sep--join{display:inline}
}
.utility-strip .lang{display:inline-flex;gap:5px;align-items:center}
.utility-strip .lang b{color:#fff;font-weight:700}
.utility-strip .lang span{opacity:.4}
/* op scroll: strip schuift weg, alleen de hoofdbalk blijft sticky */
.site-shell.scrolled .utility-strip{height:0;transform:translateY(-100%)}
@media(max-width:920px){.utility-strip{display:none}}
.site-header{background:transparent;color:#fff;
transition:background var(--t-lift) var(--ease-soft),height var(--t-lift) var(--ease-soft)}
/* solid-staat: zwarte balk + rode hairline (geen box-shadow) */
.site-header.solid{background:var(--dt-black);border-bottom:1px solid var(--dt-red)}
.site-shell.scrolled .site-header{--hdr-h:60px}
.nav{display:flex;align-items:center;gap:clamp(8px,1vw,16px);min-height:var(--hdr-h);
transition:min-height var(--t-lift) var(--ease-soft)}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.brand-text{font-family:var(--display);font-size:1.18rem;letter-spacing:.04em;line-height:.95;color:#fff}
.brand-text small{display:block;font:600 9px/1.5 var(--sans);letter-spacing:.26em;
color:var(--dt-gold);text-transform:uppercase}
/* nowrap op desktop: de balk blijft 1 rij (geen wrap-rommel). De item-padding
krimpt mee op smallere desktops zodat alle 8 items + acties binnen de wrap
passen (geen overflow voorbij de viewport). */
/* EVEN RITME (feedback-r1 v2, 1920px-geverifieerd): EEN uniforme flex-gap
scheidt alle nav-items. De chevron zit gewoon binnen zijn eigen itembox
(label + chevron), dus chevron-items zijn iets BREDER, maar de TUSSENRUIMTE
tussen elk paar items is exact gelijk = --nav-gap + symmetrische nav-pad aan
beide kanten. Geen per-item-marges die de gap verstoren (v1 gebruikte een
negatieve-marge-hack die de chevron in de tussenruimte liet schilderen ->
oogde ongelijk). v2 is ruimer EN visueel gelijk rond chevron- en gewone
items. */
.nav-list{display:flex;align-items:center;gap:var(--nav-gap);list-style:none;margin:0 auto 0 clamp(6px,.8vw,12px);padding:0;flex-wrap:nowrap;--nav-pad:clamp(7px,.66vw,11px);--nav-gap:clamp(12px,1.15vw,14px)}
.nav-list>li>a,.nav-trigger{display:inline-flex;align-items:center;gap:6px;padding:9px var(--nav-pad);
font:700 .73rem/1 var(--sans);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
color:rgba(255,255,255,.82);background:none;border:0;cursor:pointer;border-radius:2px;
transition:color var(--t-micro) var(--ease-soft),background-color var(--t-micro) var(--ease-soft)}
.nav-list>li>a:hover,.nav-trigger:hover,.nav-list>li.is-active>a{color:#fff;background:rgba(255,255,255,.10)}
.nav-list>li.is-active>a{box-shadow:inset 0 -3px 0 var(--dt-red)}
/* chevron = gewoon onderdeel van zijn knop (feedback-r1 v2): de chevron staat
inline naast het label, binnen de itembox, met een kleine vaste label->
chevron-gap (de knop heeft gap:6px). Geen negatieve marges meer -> de chevron
verstoort de uniforme nav-gap niet en oogt visueel gelijk met gewone items.
Het hover-/klik-vlak van de chevron blijft volledig intact. */
.chev{display:inline-flex}
.chev svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7}
/* visueel gescheiden utility-zone rechts: meer witruimte vóór de acties */
.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;padding-left:clamp(4px,1vw,14px)}
/* zoek-icoon (los) */
.nav-search button{display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
color:#fff;cursor:pointer;border-radius:2px;transition:background-color var(--t-micro) var(--ease-soft)}
.nav-search button:hover{background:rgba(255,255,255,.16)}
.nav-search button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
/* "Word lid" = secundair, outline-stijl. feedback-r1: premium hover in DDC-taal -
een sjerp-fill (zelfde skew/translate als .btn--sash) veegt rood in, tekst wit,
subtiele lift + zachte rode gloed. Geen transition-all; reduced-motion-safe. */
.btn-join{position:relative;overflow:hidden;z-index:0;display:inline-flex;align-items:center;gap:7px;padding:10px 16px;
background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42);
font:700 .78rem/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;border-radius:2px;
transition:border-color var(--t-micro) var(--ease-soft),color var(--t-micro) var(--ease-soft),transform var(--t-lift) var(--ease-soft),box-shadow var(--t-lift) var(--ease-soft)}
.btn-join::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--dt-red);
transform:translateX(-101%) skewX(-32deg);transform-origin:left;
transition:transform var(--t-lift) var(--ease-inout)}
.btn-join:hover,.btn-join:focus-visible{border-color:var(--dt-red);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-red)}
.btn-join:hover::before,.btn-join:focus-visible::before{transform:translateX(0) skewX(-32deg)}
.btn-join svg{width:1.05em;height:1.05em}
/* "Word lid" wijkt op smallere desktops zodat de nav-balk 1 rij blijft zonder
botsing. Blijft bereikbaar via de quick-actions, de hero en de mobiele drawer. */
@media(max-width:1320px){.btn-join{display:none}}
/* tickets-knop rechtsboven: vol rood, wit, hoog contrast, sjerp-clip.
feedback-r1: premium hover - een diepere rode sjerp-fill veegt over de knop
(zelfde skew-taal als .btn--sash), met lift + zachte rode gloed. De clip-path
houdt de sjerp-vorm; overflow:hidden clipt de veeg. Reduced-motion-safe. */
.btn-tickets{position:relative;overflow:hidden;z-index:0;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;
background:var(--dt-red);color:#fff;font:700 .8rem/1 var(--sans);letter-spacing:.04em;
text-transform:uppercase;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);
transition:transform var(--t-lift) var(--ease-soft),box-shadow var(--t-lift) var(--ease-soft)}
.btn-tickets::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--dt-red-deep);
transform:translateX(-101%) skewX(-32deg);transform-origin:left;
transition:transform var(--t-lift) var(--ease-inout)}
.btn-tickets:hover,.btn-tickets:focus-visible{transform:translateY(-1px);box-shadow:var(--shadow-red)}
.btn-tickets:hover::before,.btn-tickets:focus-visible::before{transform:translateX(0) skewX(-32deg)}
.btn-tickets svg{width:1.05em;height:1.05em}
.nav-toggle{display:none;width:42px;height:42px;background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.16);color:#fff;cursor:pointer;border-radius:2px;
position:relative;z-index:96}
.nav-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
/* hamburger->kruis: bij open blijft de knop bovenop het vol-scherm overlay (z 96)
liggen zodat sluiten exact op de openplek zit; rode rand markeert de open-staat.
De icon-swap (#i-menu -> #i-close) doet app.js op de