/* Wijnproeverij Duchenne — gedeelde stijl voor de portal en het zaalscherm.
   Palet en typografie volgen de flyer: warm lichtgrijs, één diep wijnrood,
   zware smalle kapitalen, en het vierpuntige sterretje als motief. */

:root {
  --ground:     #D9D3D1;
  --card:       #EAE6E4;
  --card-2:     #DFD9D7;
  --sunken:     #CEC7C5;
  --line:       #C3BAB8;
  --line-soft:  #D0C8C6;
  --wit:        #F6F3F2;
  --ink:        #221C1D;
  --ink-2:      #4C4345;
  --ink-muted:  #625759;
  --wine:       #96131E;
  --wine-lit:   #B31A26;
  --good:       #2F6B4A;
  --warn:       #84490C;

  --poster: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Medium Cond", "Arial Narrow", sans-serif;
  --sans: "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r-sm: 3px;
  --r-md: 7px;
  --r-lg: 12px;

  --veilig-onder: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

button, input, textarea { font-family: inherit; }

.sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@keyframes pulse   { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
/* korte flits als het bedrag verandert: iemand die toevallig opkijkt ziet dat er
   iets gebeurde, ook als hij de animatie zelf net gemist heeft */
@keyframes oplichten {
  0%   { transform: scale(1);    filter: none; }
  22%  { transform: scale(1.035); filter: brightness(1.18); }
  100% { transform: scale(1);    filter: none; }
}
@keyframes opkomen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Gedeelde onderdelen
   ========================================================================== */

.btn {
  font-size: 15px; font-weight: 700; border: 0; border-radius: var(--r-md);
  padding: 13px 18px; background: var(--wine); color: #FBF6F5;
  cursor: pointer; transition: background 140ms ease;
}
.btn:hover { background: var(--wine-lit); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn:disabled { background: var(--sunken); color: var(--ink-muted); cursor: not-allowed; }

.btn-licht {
  background: var(--wit); color: var(--wine); border: 1px solid var(--wine);
  font-weight: 700; font-size: 14px; padding: 11px 16px;
  border-radius: var(--r-md); cursor: pointer;
}
.btn-licht:hover { background: rgba(150,19,30,0.08); }
.btn-licht:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

input[type="text"], input[type="number"], textarea {
  width: 100%; background: var(--wit); border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--ink); font-size: 16px; padding: 12px 14px;
}
input::placeholder, textarea::placeholder { color: #6E6465; }
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--wine); outline-offset: 1px; border-color: transparent;
}
textarea { resize: vertical; min-height: 62px; font-size: 15px; }

.stip { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* ==========================================================================
   Portal — index.html
   ========================================================================== */

/* naamscherm */

.gate[hidden] { display: none; }
.gate {
  min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  gap: 15px; padding: 26px 22px calc(26px + var(--veilig-onder));
  max-width: 460px; margin: 0 auto;
}
.gate-logo { display: flex; align-items: center; gap: 8px; }
.gate-logo svg { width: 13px; height: 13px; fill: var(--wine); }
.gate-logo span {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wine); font-weight: 700;
}
.gate h1 {
  font-family: var(--poster); font-weight: 400; text-transform: uppercase;
  font-size: clamp(38px, 12vw, 52px); line-height: 0.92; letter-spacing: 0.005em;
  color: var(--wine); margin: 6px 0 0;
}
.gate-when { font-size: 13px; color: var(--ink-muted); line-height: 1.5; }
.gate p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.gate-fields { display: flex; flex-direction: column; gap: 9px; }
.privacy { font-size: 12px; color: var(--ink-muted); line-height: 1.5; }

/* kop */

.app[hidden] { display: none; }
.app-wrap { max-width: 560px; margin: 0 auto; }

.app-head {
  position: sticky; top: 0; z-index: 5;
  background: var(--ground);
  border-bottom: 1px solid var(--line); padding: 11px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.app-head-titel { display: flex; flex-direction: column; align-items: flex-start; }
.app-head-titel small {
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--wine); font-weight: 700;
}
.naam-knop {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--poster); font-size: 19px; text-transform: uppercase;
  color: var(--ink); line-height: 1.05;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.naam-knop svg { width: 11px; height: 11px; fill: var(--ink-muted); }
.naam-knop:hover { color: var(--wine); }
.naam-knop:hover svg { fill: var(--wine); }
.naam-knop:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

.bewaard { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.bewaard .stip { background: var(--good); }
.bewaard[data-state="bezig"] .stip { background: var(--warn); animation: pulse 1s ease-in-out infinite; }
.bewaard[data-state="fout"] .stip { background: var(--wine-lit); }
.bewaard[data-state="fout"] { color: var(--wine); }

.naam-edit { padding: 14px 18px 0; display: flex; flex-direction: column; gap: 8px; }
.naam-edit-rij { display: flex; gap: 8px; }
.naam-edit-rij input { flex: 1; }

/* melding en lijstkop */

.info {
  display: flex; gap: 9px; margin: 14px 18px 0; padding: 11px 13px;
  border: 1px solid var(--line); background: var(--wit); border-radius: var(--r-md);
  font-size: 13.5px; color: var(--ink-2); line-height: 1.45;
}
.info b { color: var(--ink); font-weight: 700; }
.info svg { width: 12px; height: 12px; fill: var(--wine); flex: none; margin-top: 4px; }

.dicht {
  margin: 14px 18px 0; padding: 12px 14px;
  border: 1px solid var(--wine); background: rgba(150,19,30,0.08);
  border-radius: var(--r-md); font-size: 14px; color: var(--ink);
}
.dicht b { font-weight: 700; }

.lijst-kop { padding: 15px 18px 4px; }
.lijst-kop span {
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 600;
}

/* wijnkaart */

.wijnen { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 18px; }

.wijn { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; }
.wijn[data-gekozen="true"] { border-color: var(--wine); box-shadow: inset 3px 0 0 var(--wine); }

.wijn-boven { display: grid; grid-template-columns: 78px minmax(0,1fr); gap: 14px; padding: 14px; }
.shot { height: 132px; display: flex; align-items: center; justify-content: center; position: relative; }
.shot img { max-height: 132px; max-width: 100%; }
.shot svg.fles { height: 132px; }
.nr {
  position: absolute; top: -3px; left: -5px;
  font-family: var(--poster); font-size: 15px; line-height: 1;
  color: #FBF6F5; background: var(--wine); border-radius: 50%;
  width: 25px; height: 25px; display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}

.wijn-naam { font-weight: 700; font-size: 16.5px; line-height: 1.2; margin: 0 0 3px; color: var(--ink); }
.wijn-meta { font-size: 12.5px; color: var(--ink-muted); margin: 0 0 9px; }

.sterren { display: flex; gap: 2px; margin-bottom: 9px; }
.sterren button { background: none; border: 0; padding: 3px; cursor: pointer; line-height: 0; color: var(--sunken); }
.sterren button[data-aan="true"] { color: var(--wine); }
.sterren button:hover { color: var(--wine-lit); }
.sterren button:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; border-radius: 2px; }
.sterren svg { width: 19px; height: 19px; fill: currentColor; }

.prijskop { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.prijs-groot { font-family: var(--poster); font-size: 26px; color: var(--wine); font-variant-numeric: tabular-nums; }
.prijs-bij { font-size: 12px; color: var(--ink-2); }
.prijs-los { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.prijs-los b { color: var(--ink-2); font-weight: 700; }
.voordeel {
  display: inline-block; margin-top: 7px; padding: 3px 8px;
  background: var(--wine); color: #FBF6F5; border-radius: var(--r-sm);
  font-size: 11.5px; font-weight: 700;
}

.wijn-onder {
  border-top: 1px solid var(--line-soft); padding: 11px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.gekozen { font-size: 13.5px; font-weight: 700; color: var(--wine); font-variant-numeric: tabular-nums; }
.gekozen small { display: block; font-weight: 400; color: var(--ink-muted); font-size: 12px; }
.niet-gekozen { font-size: 13.5px; color: var(--ink-muted); }

/* keuzepaneel */

.kiezer {
  border-top: 1px solid var(--line-soft); padding: 13px 14px;
  background: var(--card-2); animation: opkomen 200ms ease-out;
}
.kiezer-kop {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 700; margin: 0 0 9px;
}
/* vier kolommen: scheelt een hele rij, dus de kaart past vaker in één keer
   binnen het zichtbare deel tussen de kop en de balk */
.staffels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 9px; }
.staffel {
  background: var(--wit); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 9px 2px; cursor: pointer; text-align: center; color: var(--ink); line-height: 1.25;
}
.staffel b { display: block; font-size: 13.5px; font-weight: 700; }
.staffel span { font-size: 10px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.staffel[aria-pressed="true"] { border-color: var(--wine); box-shadow: inset 0 0 0 1px var(--wine); }
.staffel[aria-pressed="true"] span { color: var(--wine); }
.staffel:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.vrij { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.vrij label { font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; }
.vrij input { width: 84px; padding: 9px 10px; }

.kiezer-som { font-size: 13px; color: var(--ink-2); margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.kiezer-som b { color: var(--ink); font-weight: 700; }
.kiezer-acties { display: flex; gap: 8px; }
.kiezer-acties .btn { flex: 1; }

/* uitvouwers */

.uitvouw { border-top: 1px solid var(--line-soft); }
.uitvouw summary {
  padding: 11px 14px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 700; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between;
}
.uitvouw summary::-webkit-details-marker { display: none; }
.uitvouw summary::after { content: "+"; color: var(--wine); font-size: 14px; }
.uitvouw[open] summary::after { content: "–"; }
.uitvouw summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.paneel { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 9px; }
.feit { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 10px; font-size: 13px; margin: 0; }
.feit dt { color: var(--ink-muted); }
.feit dd { margin: 0; color: var(--ink-2); }
.prijzen-awards { font-size: 12.5px; color: var(--wine); margin: 0; font-weight: 600; }
.verhaal { font-size: 13px; color: var(--ink-2); margin: 0; }

.prijstabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.prijstabel caption {
  text-align: left; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 700; padding-bottom: 5px;
}
.prijstabel th, .prijstabel td { text-align: left; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.prijstabel td:last-child, .prijstabel th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.prijstabel th { font-weight: 400; color: var(--ink-muted); }
.prijstabel tr.actief td { color: var(--wine); font-weight: 700; }
.prijstabel tr.retail td { color: var(--ink-muted); }

/* sponsors in de portal */

.portal-sponsors { padding: 4px 18px 0; }
.portal-sponsors p {
  margin: 0 0 9px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 700;
}
.sponsor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.sponsor-tegel {
  background: var(--wit); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  height: 58px; display: flex; align-items: center; justify-content: center;
  padding: 7px 9px; text-decoration: none; overflow: hidden;
}
.sponsor-tegel img { max-width: 100%; max-height: 42px; width: auto; height: auto; }
.sponsor-tegel span {
  font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); text-align: center; line-height: 1.2;
}
.sponsor-tegel[data-donker] { background: #17110F; border-color: #17110F; }
.sponsor-tegel:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

/* balk onderin */

.balk-ruimte { height: 168px; }

.balk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  /* GEEN backdrop-filter: op iOS Safari kan een fixed element met backdrop-filter
     op de verkeerde plek terechtkomen in plaats van tegen de onderrand. Een dichte
     achtergrond is hier net zo goed en veel voorspelbaarder. */
  background: var(--ground);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 20px -12px rgba(58,44,46,0.35);
  padding: 11px 18px calc(14px + var(--veilig-onder));
  display: flex; flex-direction: column; gap: 9px;
}
.balk-binnen { max-width: 560px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 9px; }

#toast:empty { display: none; }
.toast {
  display: flex; gap: 8px; padding: 10px 12px;
  border: 1px solid rgba(47,107,74,0.4); background: rgba(47,107,74,0.12);
  border-radius: var(--r-md); font-size: 13px; color: var(--ink-2); line-height: 1.45;
  animation: opkomen 220ms ease-out;
}
.toast b { color: var(--ink); font-weight: 700; }
#toast-extra { display: block; margin-top: 3px; }
.toast-wacht { color: var(--ink-muted); font-style: italic; }
.toast span:first-child { color: var(--good); }

#mandje:empty { display: none; }
.mandje { display: flex; flex-direction: column; gap: 7px; animation: opkomen 200ms ease-out; }
.mandje-regel { display: grid; grid-template-columns: 20px minmax(0,1fr) auto auto; gap: 8px; align-items: center; font-size: 13px; }
.mandje-regel .m-nr { font-family: var(--poster); font-size: 12px; color: var(--wine); }
.mandje-regel .m-naam { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mandje-regel .m-aantal { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.mandje-regel .m-bedrag { font-weight: 700; font-variant-numeric: tabular-nums; }
.mandje-leeg { font-size: 13px; color: var(--ink-muted); margin: 0; }
.mandje-besparing { font-size: 12.5px; color: var(--wine); font-weight: 700; padding-top: 6px; border-top: 1px solid var(--line); margin: 0; }

.samenvatting {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  background: none; border: 0; padding: 0; width: 100%; cursor: pointer;
  text-align: left; color: var(--ink);
}
.samenvatting:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
.balk-totaal { font-family: var(--poster); font-size: 27px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.balk-totaal small {
  font-family: var(--sans); font-size: 11.5px; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--ink-muted);
}
.balk-open { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); font-weight: 700; white-space: nowrap; }

.balk-status { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; line-height: 1.4; }
.balk-status .stip { margin-top: 5px; }
.balk-status[data-state="open"] { color: var(--warn); }
.balk-status[data-state="open"] .stip { background: var(--warn); }
.balk-status[data-state="door"] { color: var(--good); }
.balk-status[data-state="door"] .stip { background: var(--good); }
.balk-status[data-state="gewijzigd"] { color: var(--warn); }
.balk-status[data-state="gewijzigd"] .stip { background: var(--warn); }

#doorgeef { display: flex; }
#doorgeef .btn { width: 100%; }
.door-chip {
  flex: 1; justify-content: center; display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 16px; border: 1px solid rgba(47,107,74,0.5); border-radius: var(--r-md);
  font-size: 14px; font-weight: 700; color: var(--good); white-space: nowrap;
}

/* ==========================================================================
   Zaalscherm — scherm.html
   ========================================================================== */

body.zaal { overflow: hidden; }

.board {
  min-height: 100dvh; padding: clamp(20px, 2.6vw, 44px);
  display: grid; grid-template-rows: auto 1fr auto auto; gap: clamp(12px, 1.6vw, 26px);
  position: relative; overflow: hidden;
}
.sparkle { position: absolute; fill: var(--wine); pointer-events: none; }
.sparkle.s1 { width: 3.4vw; height: 3.4vw; top: 27%; right: 7%; opacity: 0.85; }
.sparkle.s2 { width: 2vw;   height: 2vw;   top: 47%; right: 15%; opacity: 0.55; }
.sparkle.s3 { width: 2.6vw; height: 2.6vw; top: 15%; right: 20%; opacity: 0.35; }

.board-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; position: relative; z-index: 1; }
.board-merk { display: flex; flex-direction: column; gap: 3px; }
.board-merk .kicker {
  font-size: clamp(10px, 0.85vw, 15px); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--wine); font-weight: 700;
}
.board-titel {
  font-family: var(--poster); font-weight: 400; text-transform: uppercase;
  font-size: clamp(24px, 2.9vw, 54px); line-height: 0.95; color: var(--wine); margin: 0;
}
.board-wanneer { font-size: clamp(11px, 1vw, 18px); color: var(--ink-muted); }

.board-live { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(11px, 0.95vw, 16px); color: var(--ink-muted); white-space: nowrap; }
.board-live .stip { background: var(--good); }
.board-live[data-state="oud"] .stip { background: var(--warn); }
.board-live[data-state="oud"] { color: var(--warn); }

.hero { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.hero-label {
  font-size: clamp(11px, 1.15vw, 22px); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 700;
}
.hero-getal {
  font-family: var(--poster); font-weight: 400;
  font-size: clamp(72px, 15vw, 300px); line-height: 0.86;
  color: var(--wine); font-variant-numeric: tabular-nums; letter-spacing: 0.005em;
  transform-origin: left center;
}
.hero-getal.oplicht { animation: oplichten 900ms ease-out; }
.hero-onder { font-size: clamp(13px, 1.5vw, 30px); color: var(--ink-2); margin-top: 6px; }
.hero-onder b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.top-kop {
  font-size: clamp(10px, 0.85vw, 15px); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 700; margin: 0 0 clamp(6px, 0.7vw, 12px);
  position: relative; z-index: 1;
}
.top3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1vw, 18px); position: relative; z-index: 1; }
.top3-kaart {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  padding: clamp(9px, 0.9vw, 18px) clamp(11px, 1vw, 20px);
  display: grid; grid-template-columns: auto auto minmax(0,1fr); gap: clamp(8px, 0.8vw, 16px); align-items: center;
}
.top3-kaart:first-child { border-color: var(--wine); box-shadow: inset 3px 0 0 var(--wine); }
.top3-rang { font-family: var(--poster); font-size: clamp(20px, 2.1vw, 44px); color: var(--wine); line-height: 1; }
.top3-shot { position: relative; display: flex; align-items: center; justify-content: center; }
.top3-shot img, .top3-shot svg.fles { height: clamp(38px, 3.6vw, 74px); }
.top3-shot .nr {
  top: -3px; left: -8px;
  width: clamp(17px, 1.5vw, 30px); height: clamp(17px, 1.5vw, 30px);
  font-size: clamp(10px, 0.85vw, 17px);
  background: var(--card); color: var(--ink-muted);
  border: 1px solid var(--line); font-family: var(--sans); font-weight: 700;
}
.top3-naam { font-weight: 700; font-size: clamp(12px, 1.15vw, 24px); line-height: 1.15; color: var(--ink); }
.top3-aantal { font-family: var(--poster); font-size: clamp(14px, 1.4vw, 30px); color: var(--wine); font-variant-numeric: tabular-nums; }
.top3-leeg { color: var(--ink-muted); font-size: clamp(12px, 1vw, 20px); grid-column: 2 / -1; }

.board-voet {
  border-top: 1px solid var(--line); padding-top: clamp(10px, 1.1vw, 20px);
  display: flex; align-items: center; justify-content: space-between; gap: clamp(14px, 1.6vw, 30px);
  position: relative; z-index: 1;
}
.board-sponsors {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: clamp(5px, 0.7vw, 14px); flex: 1; min-width: 0;
}
.sponsor-board {
  background: var(--wit); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  height: clamp(42px, 4.4vw, 88px); display: flex; align-items: center; justify-content: center;
  padding: clamp(4px, 0.5vw, 11px) clamp(5px, 0.6vw, 14px); min-width: 0; overflow: hidden;
}
.sponsor-board img { max-width: 100%; max-height: clamp(30px, 3.2vw, 64px); width: auto; height: auto; }
.sponsor-board span {
  font-size: clamp(8px, 0.6vw, 12px); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted); text-align: center; line-height: 1.2;
}
.sponsor-board[data-donker] { background: #17110F; border-color: #17110F; }

/* Het label boven de QR in plaats van ernaast, en over twee regels zodat het blok
   niet breder wordt dan de QR zelf. Zo staat het laatste sponsorlogo er direct
   naast, zonder tekst of lege ruimte ertussen. */
.scan { display: flex; flex-direction: column; align-items: center; gap: clamp(3px, 0.4vw, 8px); flex: none; }
.scan-tekst {
  font-size: clamp(9px, 0.75vw, 14px); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 700; text-align: center; line-height: 1.3;
}
.qr {
  width: clamp(52px, 5.2vw, 110px); height: clamp(52px, 5.2vw, 110px);
  border-radius: 3px; flex: none; background: var(--wit);
}
@media (max-width: 700px) {
  .board { min-height: 0; grid-template-rows: none; }
  .top3 { grid-template-columns: 1fr; }
  .board-voet { flex-direction: column; align-items: flex-start; }
  .sparkle.s2, .sparkle.s3 { display: none; }
  body.zaal { overflow: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}