/* ==========================================================================
   NRG-TEC Golden Ticket — stijlblad

   Eén object in het licht, daarna drie regels groot gezet. Geen kaartjes,
   geen glas, geen labeltjes. Donker antraciet met goud, zoals het campagneplan
   voorschrijft. Lettertypen komen van deze server (assets/fonts, SIL OFL).
   ========================================================================== */

@font-face {
    font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/assets/fonts/archivo-black-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/assets/fonts/archivo-black-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --zwart: #04070F;
    --navy: #0A1633;
    --wit: #F6F3EC;
    --grijs: rgba(246, 243, 236, .54);
    --grijs-zacht: rgba(246, 243, 236, .32);
    --lijn: rgba(232, 185, 59, .26);
    --goud: #E8B93B;
    --goud-licht: #F5D77A;
    --fout: #FF7B72;
    --folie: linear-gradient(103deg, #8A5B10 0%, #C9922B 14%, #FBE9A8 32%, #FFF8DC 42%,
             #F2CB55 52%, #C08A1E 68%, #FBE9A8 84%, #A9741A 100%);
    --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --display: "Archivo Black", "Archivo", -apple-system, "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--zwart); color: var(--wit); font: 17px/1.6 var(--font); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--goud); }
h1, h2, h3 { margin: 0 0 .5em; font-family: var(--display); font-weight: 400; line-height: 1.05; letter-spacing: -.035em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--goud); outline-offset: 3px; }

.omhulsel { width: min(100% - 48px, 1280px); margin-inline: auto; }
.omhulsel--smal { width: min(100% - 48px, 760px); margin-inline: auto; }
.verborgen-visueel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.overslaan { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--goud); color: #2A1A00; padding: 12px 20px; font-weight: 700; }
.overslaan:focus { left: 0; }

.ontwerpbalk {
    background: var(--goud); color: #2A1A00;
    font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    text-align: center; padding: 8px 20px;
}

/* Hoofding: stil ---------------------------------------------------------- */
.hoofding { position: relative; z-index: 5; padding: 22px 0; }
.hoofding__rij { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hoofding__logo img { height: 34px; width: auto; }
.telefoonknop {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--wit); text-decoration: none; font-weight: 700; font-size: .9rem; letter-spacing: .03em;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 9px 16px; white-space: nowrap;
    transition: border-color .15s;
}
.telefoonknop:hover { border-color: var(--goud); }
.telefoonknop svg { width: 15px; height: 15px; fill: var(--goud); }

/* ==========================================================================
   De opening — alleen het ticket
   ========================================================================== */
.opening {
    position: relative; min-height: calc(100svh - 80px);
    display: grid; place-items: center; align-content: center;
    padding: clamp(24px, 5vh, 56px) 24px clamp(48px, 7vh, 80px); overflow: hidden;
    background:
        radial-gradient(52% 40% at 50% 40%, rgba(255, 208, 120, .28) 0%, rgba(255, 190, 90, .06) 55%, transparent 76%),
        radial-gradient(90% 60% at 50% 100%, #0D1E48 0%, transparent 70%),
        var(--zwart);
}
.opening::before {
    content: ""; position: absolute; left: 50%; top: -14%;
    width: 44vw; height: 120%; transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(255, 225, 170, .10), rgba(255, 225, 170, .025) 55%, transparent);
    clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
    filter: blur(22px);
    pointer-events: none;
}
.opening__eyebrow {
    margin: 0 0 clamp(26px, 4vh, 44px);
    font-size: .72rem; font-weight: 700; letter-spacing: .38em; text-transform: uppercase; color: var(--goud);
    animation: op .9s ease-out .2s both;
}
.podium { position: relative; width: min(84vw, 940px); margin: 0; perspective: 1600px; }
/* Gloed achter het ticket en slagschaduw eronder: platte lagen, dus geen
   filter op het gedraaide beeld zelf — dat gaf een hard, verschoven silhouet. */
.podium::before {
    content: ""; position: absolute; left: 8%; right: 8%; top: 4%; bottom: 4%;
    background: radial-gradient(ellipse at center, rgba(255, 196, 96, .28), transparent 70%);
    filter: blur(26px); z-index: 0; pointer-events: none;
    animation: op 1.6s ease-out .5s both;
}
.podium::after {
    content: ""; position: absolute; left: 6%; right: 6%; bottom: -9%; height: 30%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .78), rgba(0, 0, 0, .35) 45%, transparent 72%);
    filter: blur(18px); z-index: 1; pointer-events: none;
    animation: op 1.6s ease-out .5s both;
}
.podium__kaart {
    position: relative; z-index: 2;
    transform: rotateX(8deg) rotate(-2.5deg);
    animation: ticket-in 1.6s cubic-bezier(.2, .8, .2, 1) both;
}
.podium__ticket { display: block; width: 100%; height: auto; }

/* Goudglans die traag over het ticket strijkt. Geen blend-modus en geen eigen
   transform: die combinatie met een masker gaf in Chrome een grijs silhouet
   naast het ticket. Buiten het glijmoment staat de laag op opacity 0. */
.podium__glans {
    position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, .22) 47%,
                rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .22) 53%, transparent 62%);
    background-size: 240% 100%; background-repeat: no-repeat;
    -webkit-mask: url("/assets/img/golden-ticket-2026.webp") center / 100% 100% no-repeat;
    mask: url("/assets/img/golden-ticket-2026.webp") center / 100% 100% no-repeat;
    animation: glans 6s ease-in-out 1.9s infinite;
}
@keyframes ticket-in {
    0%   { opacity: 0; transform: translateY(90px) rotateX(38deg) rotate(-8deg) scale(.82); }
    55%  { opacity: 1; }
    100% { transform: rotateX(8deg) rotate(-2.5deg) scale(1); }
}
@keyframes glans {
    0%   { background-position: 170% 0; opacity: 0; }
    2%   { opacity: 1; }
    24%  { opacity: 1; }
    26%  { background-position: -70% 0; opacity: 0; }
    100% { background-position: -70% 0; opacity: 0; }
}
@keyframes op { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Ticketnummer intikken, recht onder het ticket: de eerste handeling op de pagina. */
.opening__snel {
    display: flex; width: min(92vw, 560px);
    margin: clamp(30px, 5vh, 52px) auto 0;
    border: 1px solid rgba(232, 185, 59, .5); border-radius: 999px;
    background: rgba(255, 255, 255, .045); overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
    transition: border-color .15s, box-shadow .15s;
    animation: op .9s ease-out 1.9s both;
}
.opening__snel:focus-within { border-color: var(--goud); box-shadow: 0 0 0 4px rgba(232, 185, 59, .16), 0 18px 50px rgba(0, 0, 0, .5); }
.opening__snel input {
    flex: 1 1 auto; min-width: 0; font: inherit; font-size: 1.02rem;
    padding: 18px 24px; border: 0; background: transparent; color: var(--wit);
}
.opening__snel input::placeholder { color: var(--grijs-zacht); }
.opening__snel input:focus { outline: none; }
.opening__snel button {
    font: 700 .88rem var(--font); letter-spacing: .08em; text-transform: uppercase;
    padding: 0 28px; border: 0; cursor: pointer;
    background: var(--folie); color: #2A1A00;
}
.opening__snel button:hover { filter: brightness(1.06); }
.opening__hint {
    margin: 12px 0 0; text-align: center;
    font-size: .8rem; color: var(--grijs-zacht); letter-spacing: .02em;
    animation: op .9s ease-out 2.1s both;
}

.opening__lijn {
    margin: clamp(34px, 5vh, 56px) 0 8px; text-align: center;
    font-family: var(--display); font-size: clamp(1.25rem, 2.6vw, 2rem); letter-spacing: -.02em; line-height: 1.15;
    max-width: 22em;
    animation: op .9s ease-out 1.5s both;
}
.opening__lijn sup { font-size: .5em; vertical-align: .9em; margin-left: .04em; color: var(--goud); }
.opening__klein { margin: 0; text-align: center; font-size: .82rem; letter-spacing: .06em; color: var(--grijs); animation: op .9s ease-out 1.7s both; }
.opening__klein a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(232, 185, 59, .35); }
.opening__klein a:hover { color: var(--goud); border-color: var(--goud); }

/* ==========================================================================
   De data — drie regels, groot
   ========================================================================== */
.data { padding: clamp(70px, 10vw, 140px) 0 clamp(50px, 7vw, 100px); }
.data__kop {
    width: min(100% - 48px, 1280px); margin: 0 auto clamp(36px, 5vw, 64px);
    font-size: .72rem; font-weight: 700; letter-spacing: .38em; text-transform: uppercase; color: var(--goud);
}
.data ol { list-style: none; margin: 0; padding: 0; }
.datum {
    width: min(100% - 48px, 1280px); margin: auto;
    padding: clamp(32px, 5vw, 58px) 0;
    border-top: 1px solid var(--lijn);
    display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 32px; row-gap: 12px;
}
.datum:last-child { border-bottom: 1px solid var(--lijn); }
.datum__maand {
    grid-column: 1; font-family: var(--display);
    font-size: clamp(2.6rem, 8.6vw, 7.4rem); line-height: .9; letter-spacing: -.045em;
    transform: translateX(-40px); opacity: 0; transition: transform 1s cubic-bezier(.2, .8, .2, 1), opacity 1s;
}
.datum__prijs {
    grid-column: 2; grid-row: 1 / span 2; align-self: center;
    font-family: var(--display); font-size: clamp(3rem, 10vw, 8.6rem); line-height: .86; letter-spacing: -.06em;
    background: var(--folie); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 6px 24px rgba(232, 185, 59, .22));
    font-variant-numeric: tabular-nums;
    transform: translateX(40px); opacity: 0; transition: transform 1s cubic-bezier(.2, .8, .2, 1) .1s, opacity 1s .1s;
}
.datum__prijs small { font-size: .42em; vertical-align: .55em; letter-spacing: -.02em; }
.datum__prijs i { font-style: normal; font-size: .55em; vertical-align: .6em; margin-left: .06em; opacity: .75; }
.datum__onder {
    grid-column: 1; display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: baseline;
    opacity: 0; transition: opacity 1s .35s;
}
.datum__kansen { font-family: var(--display); font-size: clamp(1rem, 1.8vw, 1.35rem); color: var(--wit); }
.datum__detail { font-size: .92rem; color: var(--grijs); }
.datum__detail b { color: var(--wit); font-weight: 600; }
.datum.zichtbaar .datum__maand, .datum.zichtbaar .datum__prijs { transform: none; opacity: 1; }
.datum.zichtbaar .datum__onder { opacity: 1; }
.datum--nu .datum__maand::after {
    content: "loopt nu"; display: inline-block; vertical-align: super; margin-left: 14px;
    font: 700 .16em/1 var(--font); letter-spacing: .3em; text-transform: uppercase; color: var(--goud);
}
.datum--voorbij { opacity: .38; }
.datum--voorbij .datum__prijs { background: none; color: rgba(246, 243, 236, .5); text-decoration: line-through; filter: none; }
.data__uitleg {
    width: min(100% - 48px, 1280px); margin: clamp(28px, 4vw, 44px) auto 0;
    max-width: 44em; color: var(--grijs); font-size: 1rem;
}
.data__voetnoot {
    width: min(100% - 48px, 1280px); margin: 14px auto 0;
    max-width: 44em; color: var(--grijs-zacht); font-size: .82rem;
}

/* ==========================================================================
   Secties (formulier, winnaars, vragen)
   ========================================================================== */
.sectie { padding: clamp(70px, 10vw, 140px) 0; position: relative; }
.sectie + .sectie { padding-top: 0; }
.sectie__kop { max-width: 36em; margin-bottom: clamp(32px, 4vw, 52px); }
.sectie__kop h2 { font-size: clamp(2rem, 5vw, 3.6rem); }
.sectie__kop p { color: var(--grijs); margin: 0; }
.sectie__hoe { color: var(--wit) !important; margin-bottom: 14px !important; }
.sectie__hoe--herzien {
    color: var(--grijs) !important; font-size: .95rem;
    padding: 12px 16px; border-left: 2px solid var(--goud);
}
.sectie__hoe--herzien b { color: var(--wit); }
.opschrift {
    display: block; margin-bottom: 18px;
    font-size: .72rem; font-weight: 700; letter-spacing: .38em; text-transform: uppercase; color: var(--goud);
}

/* Formulier ---------------------------------------------------------------- */
.formulierkaart {
    border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn);
    padding: clamp(30px, 4vw, 48px) 0;
}
.veldrij { display: grid; gap: 0 18px; }
@media (min-width: 560px) { .veldrij { grid-template-columns: 1fr 1fr; } }
.veld { margin-bottom: 28px; }
.veld:last-child { margin-bottom: 0; }
.veld > label, .veldgroep__vraag {
    display: block; font-family: var(--display); font-size: 1.08rem; letter-spacing: -.01em;
    margin-bottom: 8px; color: var(--wit);
}
.veld__hulp { font-size: .9rem; color: var(--grijs); margin: 0 0 12px; }
.veld input[type="text"], .veld input[type="email"], .veld input[type="number"],
.veld input[type="tel"], .veld select {
    width: 100%; font: inherit; font-size: 1.05rem; padding: 17px 20px;
    border: 1px solid rgba(232, 185, 59, .34); border-radius: 4px;
    background: rgba(255, 255, 255, .035); color: var(--wit);
    -moz-appearance: textfield; transition: border-color .15s, box-shadow .15s;
}
.veld input::-webkit-outer-spin-button, .veld input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.veld input::placeholder { color: var(--grijs-zacht); }
.veld input:focus, .veld select:focus { outline: none; border-color: var(--goud); box-shadow: 0 0 0 4px rgba(232, 185, 59, .14); }
.veld input[aria-invalid="true"] { border-color: var(--fout); }
.veld__fout { display: block; margin-top: 8px; color: var(--fout); font-size: .9rem; font-weight: 600; }

.veldgroep { border: 0; padding: 0; margin: 0 0 28px; }
.keuzes { display: grid; gap: 10px; }
@media (min-width: 560px) { .keuzes { grid-template-columns: repeat(3, 1fr); } }
.keuze {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    border: 1px solid rgba(232, 185, 59, .3); border-radius: 4px; padding: 16px 18px;
    font-weight: 700; color: var(--wit); background: rgba(255, 255, 255, .03);
    transition: border-color .15s, background .15s;
}
.keuze:hover { border-color: var(--goud); }
.keuze input { width: 18px; height: 18px; accent-color: var(--goud); margin: 0; flex-shrink: 0; }
.keuze:has(input:checked) { border-color: var(--goud); background: rgba(232, 185, 59, .12); }

.akkoord {
    display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
    padding: 18px 0 0; border-top: 1px solid rgba(232, 185, 59, .18);
    font-size: .95rem; line-height: 1.55; color: var(--grijs);
}
.akkoord input { width: 18px; height: 18px; accent-color: var(--goud); margin: 3px 0 0; flex-shrink: 0; }
.honing { position: absolute; left: -9999px; opacity: 0; height: 0; }

.melding { border-left: 2px solid var(--goud); padding: 14px 18px; margin-bottom: 28px; font-size: .95rem; color: var(--goud-licht); }
.melding--fout { border-color: var(--fout); color: var(--fout); }
.melding p:last-child { margin: 0; }

.knop {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font: 700 1rem var(--font); letter-spacing: .02em;
    padding: 19px 34px; border: 0; border-radius: 4px; cursor: pointer; text-decoration: none;
    transition: transform .12s, box-shadow .15s;
}
.knop:active { transform: translateY(1px); }
.knop--goud { background: var(--folie); color: #2A1A00; box-shadow: 0 10px 30px rgba(232, 185, 59, .22); }
.knop--goud:hover { box-shadow: 0 14px 36px rgba(232, 185, 59, .34); }
.knop--navy { background: transparent; color: var(--wit); border: 1px solid rgba(255, 255, 255, .25); }
.knop--navy:hover { border-color: var(--goud); }
.knop--vol { width: 100%; }
.knoprij { display: flex; flex-wrap: wrap; gap: 14px; }

.gesloten { border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: 40px 0; }
.gesloten h3 { font-size: 1.5rem; margin-bottom: .4em; }
.gesloten p { color: var(--grijs); margin: 0; }

/* Winnaars ----------------------------------------------------------------- */
.winnaars { display: grid; gap: 0; border-top: 1px solid var(--lijn); }
.winnaar { padding: 28px 0; border-bottom: 1px solid var(--lijn); display: grid; grid-template-columns: auto 1fr; gap: 6px 28px; align-items: baseline; }
.winnaar__ronde { font-size: .72rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--goud); }
.winnaar__naam { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: -.03em; }
.winnaar__bedrag { grid-column: 2; margin: 0; color: var(--grijs); }

/* Vragen ------------------------------------------------------------------- */
.vragen { border-top: 1px solid var(--lijn); }
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag summary {
    cursor: pointer; list-style: none; padding: 22px 48px 22px 0; position: relative;
    font-family: var(--display); font-size: 1.08rem; letter-spacing: -.01em;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
    content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    font: 400 1.6rem/1 var(--font); color: var(--goud); transition: transform .2s;
}
.vraag[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.vraag__antwoord { padding: 0 0 24px; color: var(--grijs); max-width: 60ch; }
.vraag__antwoord p:last-child { margin: 0; }
.vraag__antwoord ul { margin: 0 0 16px; padding-left: 1.2em; }
.vraag__antwoord li { margin: 0 0 4px; }

/* Voettekst ---------------------------------------------------------------- */
.voet { padding: clamp(50px, 7vw, 80px) 0 40px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .9rem; color: var(--grijs); }
.voet__rij { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: flex-start; }
.voet img { height: 30px; width: auto; margin-bottom: 12px; }
.voet__contact { margin-bottom: 10px; }
.voet a { color: var(--wit); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.voet a:hover { color: var(--goud); border-color: var(--goud); }
.voet__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.voet__fijn { margin: 34px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .82rem; color: var(--grijs-zacht); max-width: 64em; }

/* Bedanktpagina ------------------------------------------------------------ */
.bedankt { text-align: center; padding: clamp(70px, 10vw, 130px) 0; }
.bedankt__vink { width: 78px; height: 78px; border-radius: 50%; background: var(--folie); display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; }
.bedankt__vink svg { width: 36px; height: 36px; stroke: #2A1A00; stroke-width: 3; fill: none; }
.bedankt h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.bedankt__ticket { display: inline-block; margin: 6px 0 24px; font-family: var(--display); font-size: 1.4rem; letter-spacing: .06em; background: var(--folie); -webkit-background-clip: text; background-clip: text; color: transparent; }
.samenvatting { text-align: left; margin: 32px auto 36px; max-width: 480px; border-top: 1px solid var(--lijn); }
.samenvatting dl { margin: 0; }
.samenvatting div { display: flex; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--lijn); }
.samenvatting dt { color: var(--grijs); margin: 0; }
.samenvatting dd { margin: 0; font-weight: 700; text-align: right; }

/* Smal --------------------------------------------------------------------- */
@media (max-width: 720px) {
    .datum { grid-template-columns: 1fr; }
    .datum__prijs { grid-column: 1; grid-row: auto; justify-self: start; }
    .datum--nu .datum__maand::after { display: block; margin: 10px 0 0; vertical-align: baseline; }
    .podium { width: 94vw; }
    .opening { min-height: auto; padding-bottom: 72px; }
    .winnaar { grid-template-columns: 1fr; }
    .winnaar__bedrag { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
    .datum__maand, .datum__prijs, .datum__onder { transform: none; opacity: 1; }
}

/* Standpagina --------------------------------------------------------------
   Eén ticket, één scherm: schatting per ronde en, na de onthulling, de plaats. */
.stand { padding: clamp(60px, 9vw, 110px) 0; }
.stand h1 { font-size: clamp(1.8rem, 4.4vw, 2.9rem); margin: 0 0 6px; }
.stand__eyebrow {
    font-size: .74rem; letter-spacing: .3em; text-transform: uppercase;
    color: var(--goud); margin: 0 0 14px; font-weight: 700;
}
.stand__intro { color: var(--grijs); max-width: 34em; margin: 0 0 30px; }
.stand__ticket {
    display: inline-block; margin: 2px 0 34px; font-family: var(--display);
    font-size: 1.35rem; letter-spacing: .06em;
    background: var(--folie); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stand__fout {
    border-left: 3px solid var(--fout); background: rgba(255, 123, 114, .09);
    padding: 14px 18px; margin: 0 0 24px; color: var(--wit); font-size: .95rem;
}
.stand__formulier { max-width: 430px; }

.stand__ronde { border-top: 1px solid var(--lijn); padding: 26px 0; }
.stand__ronde:last-of-type { border-bottom: 1px solid var(--lijn); }
.stand__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.stand__kop h2 { font-size: 1.45rem; margin: 0; }
.stand__periode { font-size: .86rem; color: var(--grijs); }

.stand__plaats { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 4px; }
.stand__rang {
    font-family: var(--display); font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1;
    background: var(--folie); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stand__rang sup { font-size: .34em; top: -1.4em; }
.stand__vanaantal { color: var(--grijs); font-size: 1rem; }

.stand__cijfers { margin: 18px 0 0; }
.stand__cijfers div {
    display: flex; justify-content: space-between; gap: 18px;
    padding: 12px 0; border-bottom: 1px solid rgba(232, 185, 59, .14);
}
.stand__cijfers div:last-child { border-bottom: 0; }
.stand__cijfers dt { color: var(--grijs); margin: 0; }
.stand__cijfers dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.stand__wacht, .stand__winnaar, .stand__mis { color: var(--grijs); font-size: .95rem; margin: 16px 0 0; }
.stand__wacht strong, .stand__winnaar strong, .stand__mis strong { color: var(--wit); }
.stand__winst {
    margin: 18px 0 0; padding: 16px 20px; border-radius: 6px;
    background: rgba(232, 185, 59, .12); border: 1px solid var(--lijn);
    color: var(--wit); font-weight: 700;
}

.stand__actie { margin: 40px 0 0; }
.stand__actie h2 { font-size: 1.35rem; margin: 0 0 8px; }
.stand__actie p { color: var(--grijs); max-width: 38em; margin: 0 0 20px; }
.stand__hulp { margin: 34px 0 0; font-size: .92rem; color: var(--grijs); }

.knoprij--midden { justify-content: center; margin-top: 34px; }

/* Kleine hulpklassen voor de bedanktpagina (inline stijlen mogen niet van de CSP) */
.bedankt__tekst { max-width: 34em; margin-inline: auto; color: var(--grijs); }
.bedankt__fijn { max-width: 34em; margin-inline: auto; color: var(--grijs); font-size: .95rem; }


/* Aftelklok naar de cut-off ------------------------------------------------
   Enkel de tijd die nog rest. Geen teller, geen tussenstand: dat zou het
   antwoord op de schattingsvraag verklappen. */
.aftellen {
    padding: clamp(28px, 4vw, 44px) 0;
    border-top: 1px solid rgba(255, 255, 255, .10);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.aftellen__rij { text-align: center; }
.aftellen__label {
    margin: 0 0 10px; color: var(--goud-400);
    font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.aftellen__klok {
    display: flex; gap: clamp(18px, 4vw, 40px);
    align-items: flex-start; justify-content: center; flex-wrap: wrap;
}
.aftellen__vak { min-width: 4.5ch; }
.aftellen__klok span {
    font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 800; line-height: 1;
    color: var(--wit); font-variant-numeric: tabular-nums;
}
.aftellen__klok small {
    display: block; margin-top: 6px; color: var(--grijs);
    font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
.aftellen__datum { margin: 14px 0 0; color: var(--grijs); font-size: .92rem; }


/* Cookiebanner ------------------------------------------------------------
   Verschijnt enkel als er een pixel ingesteld staat. Weigeren is even
   zichtbaar als aanvaarden; zonder keuze laadt er niets van derden. */
.cookies {
    position: fixed; inset: auto 0 0 0; z-index: 90;
    background: #0B1327; border-top: 1px solid rgba(255, 255, 255, .14);
    padding: 18px 0;
}
.cookies[hidden] { display: none; }
.cookies__rij {
    width: min(100% - 48px, 1100px); margin-inline: auto;
    display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.cookies__tekst { margin: 0; max-width: 62ch; color: var(--grijs); font-size: .9rem; line-height: 1.6; }
.cookies__knoppen { display: flex; gap: 10px; flex-shrink: 0; }
.cookies__knop {
    font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
    padding: 11px 20px; border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .26); background: transparent; color: var(--wit);
}
.cookies__knop:hover { border-color: var(--goud); }
.cookies__knop--ja { background: var(--goud); border-color: var(--goud); color: #0A1633; }