/* Werknaam-site pubquiz, zelfde basis als kleurboek/receptenboek: bewust zwart-wit tot er een gekozen huisstijl is. */
[hidden] { display:none !important; } /* anders wint display:flex van .show/.stand van het hidden-attribuut */
:root { --papier:#fff; --inkt:#111; --grijs:#6b6b6b; --lijn:#d9d9d9; --vlak:#f4f4f4; --rond:14px; --max:1080px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--papier); color:var(--inkt); font:18px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 16px; }
.concept { background:var(--inkt); color:#fff; text-align:center; font-size:14px; padding:6px 16px; }
header { border-bottom:1px solid var(--lijn); position:sticky; top:0; background:var(--papier); z-index:10; }
header .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; gap:12px; }
.merk { font-weight:800; font-size:20px; text-decoration:none; color:inherit; }
.merk small { font-weight:400; font-size:13px; color:var(--grijs); }
nav a { text-decoration:none; margin-left:20px; font-size:16px; color:var(--grijs); }
nav a.knop { color:#fff; }
@media (max-width:640px){ nav a:not(.knop){ display:none; } }
.knop { display:inline-block; background:var(--inkt); color:#fff; border:2px solid var(--inkt); border-radius:999px; padding:10px 22px; font:inherit; font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; margin:4px 4px 4px 0; }
.knop.licht { background:var(--papier); color:var(--inkt); }
.knop.klein { padding:6px 14px; font-size:14px; }
.knop:disabled { opacity:.4; cursor:not-allowed; }
.held { padding:48px 16px 24px; }
.held h1 { font-size:clamp(30px,5vw,48px); line-height:1.1; margin:0 0 12px; letter-spacing:-.02em; max-width:18ch; }
.sub { color:var(--grijs); margin-top:0; }
.pakket { padding-left:20px; }
.stappen { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; padding-top:16px; padding-bottom:16px; }
.stappen div { background:var(--vlak); border-radius:var(--rond); padding:16px 20px; }
.stappen span { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--inkt); color:#fff; font-weight:700; }
.stappen h3 { margin:8px 0 4px; } .stappen p { margin:0; font-size:16px; }
h2 { margin:40px 0 8px; }
.raster { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px 16px; }
.veld label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
input, select, textarea { width:100%; font:inherit; font-size:16px; padding:10px 12px; border:1px solid var(--lijn); border-radius:10px; background:#fff; color:inherit; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 16px; }
.chip { border:1px solid var(--inkt); background:#fff; border-radius:999px; padding:6px 14px; font:inherit; font-size:15px; cursor:pointer; }
.chip:hover { background:var(--vlak); }
.ronde { border:1px solid var(--lijn); border-radius:var(--rond); margin:12px 0; overflow:hidden; }
.ronde-kop { display:flex; align-items:center; gap:8px; background:var(--vlak); padding:8px 12px; flex-wrap:wrap; }
.ronde-kop input { flex:1; min-width:160px; font-weight:700; background:transparent; border-color:transparent; }
.ronde-kop input:focus { background:#fff; border-color:var(--lijn); }
.ikoon { border:1px solid var(--lijn); background:#fff; border-radius:8px; padding:4px 10px; font:inherit; font-size:14px; cursor:pointer; }
.vraag { display:grid; grid-template-columns:28px 1fr 1fr auto; gap:8px; align-items:start; padding:8px 12px; border-top:1px solid var(--lijn); }
.vraag .nr { font-weight:700; padding-top:10px; }
.vraag textarea { resize:vertical; min-height:44px; }
.vraag .acties { display:flex; gap:4px; padding-top:6px; }
@media (max-width:720px){ .vraag { grid-template-columns:28px 1fr; } .vraag .antw, .vraag .acties { grid-column:2; } }
.ronde-voet { padding:8px 12px; border-top:1px solid var(--lijn); }
.leeg { color:var(--grijs); font-style:italic; }
.downloads { display:flex; flex-wrap:wrap; }
.klein { font-size:14px; } .grijs { color:var(--grijs); }
footer { border-top:1px solid var(--lijn); margin-top:48px; padding:16px 0 32px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.schift { margin-top:12px; }
.rij { display:flex; gap:6px; align-items:center; }
.vink { display:flex; gap:8px; align-items:center; font-weight:600; font-size:15px; margin-top:28px; }
.vink input { width:auto; }
#deel-link { flex:1; }
h3 { margin:28px 0 4px; }
.vraag .extra { grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.vraag .extra img { max-height:90px; width:auto; border-radius:8px; border:1px solid var(--lijn); }
.vraag .extra .keuzes { flex:1; min-width:200px; }
label.ikoon { display:inline-block; }
.tabel-wrap { overflow-x:auto; }
.scores { border-collapse:collapse; min-width:100%; font-size:15px; }
.scores th, .scores td { border:1px solid var(--lijn); padding:4px 6px; text-align:center; }
.scores th:first-child, .scores td:first-child { text-align:left; min-width:140px; }
.scores input, .scores select { width:64px; padding:6px; font-size:15px; text-align:center; }
.scores .tot { font-weight:800; }
.stand { position:fixed; inset:0; background:#111; color:#fff; z-index:50; padding:4vh 6vw; overflow:auto; }
.stand h2 { font-size:clamp(28px,5vw,64px); margin:0 0 3vh; }
.stand ol { list-style:none; padding:0; margin:0; font-size:clamp(20px,3.4vw,44px); }
.stand li { display:flex; gap:.6em; padding:.25em 0; border-bottom:1px solid #333; }
.stand li .pl { width:2em; opacity:.6; } .stand li .nm { flex:1; } .stand li .pt { font-weight:800; }
.stand-dicht { position:absolute; top:16px; right:16px; }
.show { position:fixed; inset:0; background:#111; color:#fff; z-index:60; display:flex; flex-direction:column; }
.show:focus { outline:none; }
.show-dia { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:4vh 6vw; gap:2.5vh; cursor:pointer; user-select:none; }
.show-dia .label { position:absolute; top:3vh; left:4vw; font-size:clamp(14px,1.6vw,22px); opacity:.75; }
.show-dia h1 { font-size:clamp(32px,6vw,88px); line-height:1.1; margin:0; }
.show-dia h2 { font-size:clamp(26px,4.4vw,64px); line-height:1.15; margin:0; }
.show-dia .klein { font-size:clamp(18px,2.4vw,34px); opacity:.85; }
.show-dia .antw { font-size:clamp(30px,5.4vw,80px); font-weight:800; }
.show-dia img { max-height:50vh; max-width:80vw; border-radius:12px; }
.show-dia ol.kz { list-style:none; padding:0; margin:0; font-size:clamp(20px,3vw,44px); }
.show-dia ol.stand-l { list-style:none; padding:0; margin:0; width:min(900px,90vw); font-size:clamp(20px,3vw,42px); text-align:left; }
.show-dia ol.stand-l li { display:flex; gap:.6em; border-bottom:1px solid #333; padding:.2em 0; }
.show-dia ol.stand-l .nm { flex:1; } .show-dia ol.stand-l b { font-weight:800; }
.show-balk { display:flex; gap:8px; align-items:center; justify-content:center; padding:10px; background:#000; font-size:14px; }
.show-balk .ikoon { background:#222; color:#fff; border-color:#444; }
.show-balk #show-teller { min-width:70px; text-align:center; opacity:.7; }
.show-tijd { position:absolute; top:3vh; right:4vw; font-size:clamp(28px,4vw,60px); font-weight:800; font-variant-numeric:tabular-nums; }
.show-tijd.op { color:#ff6b6b; }
.undo { position:fixed; left:50%; bottom:16px; transform:translateX(-50%); background:var(--inkt); color:#fff; border-radius:999px; padding:8px 10px 8px 18px; z-index:40; display:flex; gap:10px; align-items:center; font-size:15px; max-width:calc(100% - 32px); }
.undo .ikoon { background:#fff; color:var(--inkt); }
.waarschuwing { color:#9a3412; font-weight:600; }
.show-dia h2.lang { font-size:clamp(22px,3.2vw,46px); }
.show-dia h2.heel-lang { font-size:clamp(18px,2.3vw,32px); }
ol.stand-l.veel, .stand ol.veel { columns:2; column-gap:4vw; font-size:clamp(16px,2vw,28px); }
.stand ol.veel li, ol.stand-l.veel li { break-inside:avoid; }
input[type=checkbox] { width:20px; height:20px; accent-color:var(--inkt); }
.voordelen { font-weight:600; max-width:60ch; }
.concept a { color:#fff; }
nav a.knop { margin-left:20px; }
.ronde-sam { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 12px; cursor:pointer; list-style:none; }
.ronde-sam::-webkit-details-marker { display:none; }
.ronde-sam .open-tekst { margin-left:auto; font-size:14px; text-decoration:underline; }
details[open] > .ronde-sam .open-tekst { display:none; }
details[open] > .ronde-sam { border-bottom:1px solid var(--lijn); }
.ronde-kop input { border-color:var(--lijn); background:#fff; }
.printhulp { background:var(--vlak); border-radius:var(--rond); padding:12px 16px; margin:8px 0 12px; font-size:16px; }
.printhulp ul { margin:6px 0; padding-left:20px; } .printhulp p { margin:6px 0 0; }
.draaiboek { padding-left:22px; } .draaiboek li { margin:4px 0; }
.tekst { max-width:760px; padding-bottom:24px; } .tekst h2 { margin-top:28px; font-size:22px; }
@media (max-width:720px) { .ikoon { min-height:44px; min-width:44px; } .vraag .acties { gap:8px; } }
h2[id] { scroll-margin-top:80px; }
@media (max-width:720px) { .chip, nav a.knop { min-height:44px; } .undo { top:72px; bottom:auto; } }
/* stand: altijd één regel per team, bovenkant nooit buiten beeld */
.show-dia { justify-content:safe center; }
.stand ol li, ol.stand-l li { white-space:nowrap; }
.stand ol li .nm, ol.stand-l li .nm { overflow:hidden; text-overflow:ellipsis; min-width:0; }
@media (max-width:720px) { .scores input, .scores select { min-height:44px; } }
.stand ol li .nm, ol.stand-l li .nm { text-overflow:clip; }
.stand ol li .pl, ol.stand-l li .pl { min-width:2.4em; text-align:right; opacity:.7; flex:none; }
.stand ol li, ol.stand-l li { padding-right:.8em; }
.stand ol li .pt, ol.stand-l li b { margin-left:.5em; flex:none; }
.stand-dicht { font-size:18px; padding:10px 18px; }
.vink.vink-dicht { margin-top:8px; }
@media (max-width:600px) { #stand-titel { padding-right:150px; } }
.geluid { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.geluid input[type=number] { width:70px; padding:6px; }
.show-speel { background:#fff; color:#111; border-color:#fff; font-size:clamp(18px,2.2vw,30px); padding:.5em 1.2em; }
.vraag .extra > .ikoon, .vraag .extra > label.ikoon { margin:0; line-height:1.2; display:inline-flex; align-items:center; }

/* Powered by 020ict.nl (opdracht David 18-10-2026) */
.powered { margin: 0 0 8px; font-weight: 600; letter-spacing: .01em; }
.powered a { font-weight: 700; }