/* BotBB 2027 — binnenkort-pagina (04-11-2026). Zelfde merk als de site (r6 "het schema"): petrolnacht, ijs voor tekst,
   signaalgeel alleen voor actie en het eindpunt, één letter (Mona Sans), alles haaks. Eén idee: Cover en Tribute komen
   samen in Breda 2027 en die lijn loopt door naar jouw startvak, het formulier. Alles werkt zonder JavaScript. */

@font-face { font-family: 'Mona Sans'; src: url('/fonts/mona-sans.woff2') format('woff2-variations'), url('/fonts/mona-sans.woff2') format('woff2'); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; }

:root {
  --nacht: #061010; --diep: #0b1d1d; --inkt: #003131; --staal: #24403f; --lijn: rgba(232, 240, 238, .13);
  --mist: #9db4b1; --ijs: #e8f0ee; --geel: #ffd21f; --fout: #ff9a8a;
  --font: 'Mona Sans', 'Helvetica Neue', Arial, sans-serif;
  --breed: 125%; --half: 112%;
  --rand: 20px; --max: 1312px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --foto: min(62svh, 580px);
}
@media (min-width: 700px) { :root { --rand: 40px; } }
@media (min-width: 1100px) { :root { --rand: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--nacht); }
body { margin: 0; background: var(--nacht); color: var(--ijs); font: 400 1.0625rem/1.6 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a, button, label { touch-action: manipulation; -webkit-tap-highlight-color: rgba(255, 210, 31, .2); }
p, h1, h2, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--geel); color: var(--nacht); }
:focus-visible { outline: 3px solid var(--geel); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--rand); top: -60px; z-index: 50; background: var(--geel); color: var(--nacht); padding: 12px 16px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.w { width: min(100% - 2 * var(--rand), var(--max)); margin-inline: auto; }

/* ── kop: merk + taal, over de foto ───────────────────── */
.bk-kop { position: absolute; inset: 0 0 auto 0; z-index: 5; }
.bk-kop-rij { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.bk-merk { display: flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; font-stretch: var(--breed); font-weight: 860; font-size: 1.0625rem; text-transform: uppercase; }
.bk-merk img { width: 44px; height: 44px; }
.bk-merk b { color: var(--mist); font-weight: 860; }
.bk-taal { display: flex; gap: 4px; }
.bk-taal a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; text-decoration: none; font-stretch: var(--half); font-weight: 650; font-size: .9375rem; color: var(--mist); letter-spacing: .04em; }
.bk-taal a[aria-current] { color: var(--ijs); box-shadow: inset 0 -2px 0 var(--geel); }
@media (hover: hover) and (pointer: fine) { .bk-taal a:hover { color: var(--ijs); } }

/* ── foto: drietoon uit het embleem, verdonkerd waar tekst staat ───── */
.bk { position: relative; isolation: isolate; }
.bk-foto { position: absolute; inset: 0 0 auto 0; height: var(--foto); z-index: -1; }
.bk-foto picture { display: block; height: 100%; }
.bk-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.bk-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 16, 16, .82) 0, rgba(6, 16, 16, 0) 28%, rgba(6, 16, 16, .25) 52%, var(--nacht) 100%); }

/* ── raster: één linkerlijn ──────────────────────────── */
.bk-raster { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "titel" "lead" "haak" "vak" "meer"; padding-top: calc(var(--foto) - clamp(150px, 39vw, 210px)); padding-bottom: 64px; }
.bk-titel { grid-area: titel; }
.bk-kicker { display: inline-flex; align-items: center; gap: 10px; font-stretch: var(--half); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .8125rem; color: var(--ijs); margin-bottom: 12px; }
.bk-kicker .i-knoop { color: var(--ijs); }
h1 { font-stretch: var(--breed); font-weight: 860; text-transform: uppercase; letter-spacing: -.015em; line-height: .9; font-size: clamp(2.875rem, 14.6vw, 8rem); text-wrap: balance; }
.bk-nw { white-space: nowrap; }

/* het schema: Cover + Tribute → Breda 2027 → (lijn naar het startvak) */
.bk-haak { grid-area: haak; display: grid; grid-template-columns: auto auto 1fr; align-items: center; margin-top: 26px; font-stretch: var(--half); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(.75rem, 3.2vw, .9375rem); line-height: 1; color: var(--ijs); }
.bk-haak-twee { grid-column: 1; grid-row: 1; display: grid; gap: clamp(16px, 4.4vw, 24px); padding-right: 10px; }
.i-haak { grid-column: 2; grid-row: 1; width: 40px; height: auto; align-self: stretch; flex: none; color: var(--ijs); }
.bk-haak-een { grid-column: 3; grid-row: 1; padding-left: 12px; font-stretch: var(--breed); font-weight: 860; letter-spacing: -.005em; font-size: clamp(1.5rem, 7.4vw, 2.75rem); white-space: nowrap; }
/* de lijn: op smal omlaag van Breda 2027 naar de bovenrand van het startvak, op breed opzij naar de linkerrand.
   Het eindpunt (18 px) ligt bewust midden óp de 2 px-rand van het startvak. */
.bk-lijn { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; height: 40px; margin-left: 12px; }
.bk-lijn i { flex: 1; width: 2px; background: var(--ijs); transform-origin: center top; }
.bk-lijn b { flex: none; width: 18px; height: 18px; margin: 0 0 -10px -8px; position: relative; z-index: 3; background: var(--nacht); border: 2px solid var(--ijs); transition: background-color 200ms var(--ease), border-color 200ms var(--ease); }
.bk:has(.bk-vak.klaar) .bk-lijn b, .bk:has(#bedankt:target) .bk-lijn b { background: var(--geel); border-color: var(--geel); }

.bk-lead { grid-area: lead; margin-top: 20px; max-width: 34ch; font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.45; text-wrap: pretty; }
.bk-meer { grid-area: meer; margin-top: 40px; }
.bk-straks { font-stretch: var(--half); font-weight: 650; text-transform: uppercase; letter-spacing: .12em; font-size: .8125rem; color: var(--mist); }
.bk-lijst { margin-top: 14px; display: grid; gap: 10px; }
.bk-lijst li { display: flex; align-items: baseline; gap: 12px; font-size: 1.0625rem; line-height: 1.45; }
.bk-lijst .i-knoop { flex: none; color: var(--mist); transform: translateY(-2px); }

/* ── het startvak: formulier ─────────────────────────── */
.bk-vak { grid-area: vak; position: relative; margin-top: 0; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--diep); border: 2px solid var(--staal); }
.bk-strook { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--inkt); border-bottom: 2px solid var(--staal); font-stretch: var(--breed); font-weight: 860; text-transform: uppercase; font-size: .8125rem; line-height: 1.1; letter-spacing: .02em; }
.bk-strook > span { display: flex; gap: .35em; }
.bk-strook img { width: 32px; height: 32px; }
.bk-lijf { padding: 22px 18px 24px; }
.bk-vak h2 { font-stretch: var(--breed); font-weight: 860; text-transform: uppercase; letter-spacing: -.01em; line-height: .98; font-size: clamp(1.625rem, 6.6vw, 2.25rem); text-wrap: balance; }
.bk-vak h2:focus { outline: none; }
.bk-sub { margin-top: 10px; color: var(--mist); font-size: 1rem; line-height: 1.5; }
.bk-stempel { position: absolute; top: -20px; right: 18px; z-index: 2; padding: 9px 14px 7px; background: var(--geel); color: var(--nacht); font-stretch: var(--breed); font-weight: 860; text-transform: uppercase; font-size: 1rem; letter-spacing: .02em; line-height: 1; visibility: hidden; }

.veld { margin-top: 18px; }
.veld label { display: block; font-stretch: var(--half); font-weight: 650; font-size: .9375rem; margin-bottom: 6px; }
.opt { color: var(--mist); font-weight: 400; }
.veld input { display: block; width: 100%; min-height: 52px; padding: 12px 14px; background: var(--nacht); border: 2px solid var(--staal); border-radius: 0; font-size: 1.0625rem; transition: border-color 140ms var(--ease); }
.veld input:focus { border-color: var(--mist); outline: none; }
.veld input:focus-visible { outline: 3px solid var(--geel); outline-offset: 2px; }
.veld input[aria-invalid="true"] { border-color: var(--fout); }
.veld input[aria-invalid="true"]:focus-visible { outline-color: var(--fout); }
.veld-fout { margin-top: 6px; color: var(--fout); font-size: .9375rem; }

.vink { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 16px; min-height: 48px; cursor: pointer; font-size: 1rem; line-height: 1.35; }
.vink input { position: absolute; left: 0; top: 50%; width: 26px; height: 26px; margin: -13px 0 0; opacity: 0; cursor: pointer; }
.vink-vak { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--mist); background: var(--nacht); color: transparent; transition: background-color 140ms var(--ease), border-color 140ms var(--ease); }
.vink input:checked + .vink-vak { background: var(--geel); border-color: var(--geel); color: var(--nacht); }
.vink input:focus-visible + .vink-vak { outline: 3px solid var(--geel); outline-offset: 3px; }

.bk-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk-akkoord { margin-top: 14px; color: var(--mist); font-size: .875rem; line-height: 1.5; }
.bk-melding { display: none; margin-top: 14px; padding: 10px 12px; border-left: 3px solid var(--fout); background: rgba(255, 154, 138, .08); color: var(--ijs); font-size: .9375rem; line-height: 1.45; }
.bk-melding:target, .bk-melding.toon { display: block; }

.knop { display: flex; width: 100%; align-items: center; justify-content: center; gap: 14px; min-height: 56px; margin-top: 18px; padding: 0 22px; border: 0; border-radius: 0; cursor: pointer; background: var(--geel); color: var(--nacht); font-stretch: var(--half); font-weight: 760; font-size: 1.125rem; letter-spacing: .01em; line-height: 1; transition: transform 140ms var(--ease), background-color 160ms var(--ease); }
.knop:active { transform: scale(.97); }
.knop .i-pijl { flex: none; transition: transform 220ms var(--ease); }
.knop[aria-busy="true"] { cursor: progress; background: #e6bd1c; }
@media (hover: hover) and (pointer: fine) { .knop:hover { background: #ffe066; } .knop:hover .i-pijl { transform: translateX(4px); } }

/* bedankt: zonder JS via #bedankt (:target), met JS via .klaar */
.bk-bedankt { display: none; }
.bk-bedankt p { margin-top: 12px; color: var(--mist); font-size: 1.0625rem; line-height: 1.5; }
.bk-bedankt a { color: var(--ijs); }
.bk-nog { font-size: .9375rem !important; margin-top: 18px !important; }
.bk-vak.klaar .bk-form, .bk-vak:has(#bedankt:target) .bk-form { display: none; }
.bk-vak.klaar .bk-bedankt, .bk-bedankt:target { display: block; }
.bk-vak.klaar .bk-stempel, .bk-vak:has(#bedankt:target) .bk-stempel { visibility: visible; }
.bk-vak.klaar { border-color: var(--geel); }

/* ── voet ────────────────────────────────────────────── */
.bk-voet { border-top: 1px solid var(--lijn); padding: 28px 0 36px; color: var(--mist); font-size: .9375rem; }
.bk-voet-rij { display: flex; flex-wrap: wrap; gap: 10px 32px; align-items: center; }
.bk-voet b { color: var(--ijs); font-weight: 700; }
.bk-voet a { color: var(--ijs); }
.bk-ig { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.bk-ig:hover span:first-of-type { text-decoration: underline; }
.klein { font-size: .8125rem; flex-basis: 100%; }

/* ── tablet+: strook links aan het startvak ───────────── */
@media (min-width: 560px) {
  .bk-vak { grid-template-columns: 76px minmax(0, 1fr); }
  .bk-strook { flex-direction: column; justify-content: center; gap: 10px; padding: 16px 8px; border-bottom: 0; border-right: 2px solid var(--staal); text-align: center; font-size: .875rem; }
  .bk-strook > span { flex-direction: column; gap: 2px; }
  .bk-strook img { width: 44px; height: 44px; }
  .bk-lijf { padding: 28px 28px 30px; }
}

/* ── breed: foto over de hele hoogte, startvak rechts, de lijn loopt erheen ─── */
@media (min-width: 1000px) and (min-aspect-ratio: 4/5) {
  :root { --foto: 100%; }
  .bk { min-height: max(100svh, 760px); display: flex; flex-direction: column; justify-content: flex-end; }
  .bk-foto { height: 100%; }
  .bk-foto img { object-position: 50% 30%; }
  .bk-foto::after { background: linear-gradient(90deg, rgba(6, 16, 16, .86) 0, rgba(6, 16, 16, .55) 48%, rgba(6, 16, 16, .12) 72%), linear-gradient(180deg, rgba(6, 16, 16, .6) 0, rgba(6, 16, 16, 0) 18%, rgba(6, 16, 16, 0) 42%, rgba(6, 16, 16, .88) 100%); }
  .bk-raster { grid-template-columns: minmax(0, 1fr) minmax(400px, 456px); grid-template-rows: auto auto auto 1fr; grid-template-areas: "titel vak" "haak vak" "lead vak" "meer vak"; column-gap: 0; padding-top: 120px; padding-bottom: 56px; }
  .bk-titel { padding-right: 32px; }
  h1 { font-size: clamp(4rem, 6.9vw, 7.25rem); }
  .bk-haak { display: flex; margin-top: 22px; }
  .bk-lijn { flex-direction: row; align-items: center; flex: 1; height: auto; min-width: 40px; margin-left: 20px; }
  .bk-lijn i { flex: 1; width: auto; height: 2px; transform-origin: left center; }
  .bk-lijn b { margin: 0 -10px 0 0; }
  .bk-vak { align-self: start; }
  /* formulier en bedankt in dezelfde cel: de kaart houdt zijn hoogte, de lijn blijft op de rand uitkomen */
  .bk-lijf { display: grid; }
  .bk-form, .bk-bedankt { grid-area: 1 / 1; }
  .bk-bedankt { display: block; visibility: hidden; align-self: center; }
  .bk-vak.klaar .bk-form, .bk-vak:has(#bedankt:target) .bk-form { display: block; visibility: hidden; }
  .bk-vak.klaar .bk-bedankt, .bk-bedankt:target { visibility: visible; }
  .bk-lead { margin-top: 26px; padding-right: 48px; }
  .bk-meer { margin-top: 36px; padding-right: 48px; }
  /* de haakregel hangt op de hoogte van de kop van het startvak */
  .bk-haak { align-self: start; min-height: 96px; }
}

/* ── beweging: de lijn tekent zich, het eindpunt licht op (alleen met JS en zonder reduced-motion) ── */
@media (prefers-reduced-motion: no-preference) {
  .js .bk-lijn i { animation: bk-groei-v 420ms var(--ease) 200ms both; }
  @media (min-width: 1000px) and (min-aspect-ratio: 4/5) { .js .bk-lijn i { animation-name: bk-groei; animation-duration: 520ms; } }
  .js .bk-vak.klaar .bk-stempel { animation: bk-stempel 380ms var(--ease) both; }
  .js .bk:has(.bk-vak.klaar) .bk-lijn b { animation: bk-punt 420ms var(--ease) both; }
  .js .bk-vak.klaar .bk-bedankt { animation: bk-in 320ms var(--ease) both; }
}
@keyframes bk-groei { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bk-groei-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bk-stempel { from { transform: scale(1.25); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bk-punt { from { transform: scale(1.4); } to { transform: scale(1); } }
@keyframes bk-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }