/* Kwistig: /op-maat (pubquiz op maat voor bedrijven en verenigingen). Bouwt voort op maken.css en paginas.css
   (kopband, knoppen, stapnummers, voet); maten uit de mockup OpMaat (1440 breed). */

/* ------------------------------------------------------------------ kop */
.om-kop { min-height: 620px; }
.om-kop.kopband-laag h1 { font-size: 104px; max-width: 1000px; }
.om-kop .kopband-inhoud > p { max-width: 700px; margin-top: 20px; font-size: 22px; color: rgba(255, 241, 220, .9); }
.om-knoppen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.om-knop { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 18px 26px; border: 0; border-radius: 16px; cursor: pointer; text-decoration: none;
  font: 800 19px/1.1 var(--tekstletter); color: var(--on); background: var(--accent);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 0 0 2px var(--accent-2), 0 14px 30px rgba(0, 0, 0, .45); }
.om-knop-rand { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 16px 24px; border-radius: 16px; text-decoration: none;
  font: 700 18px/1.1 var(--tekstletter); color: var(--schuim); border: 2px solid rgba(255, 241, 220, .6); background: rgba(19, 13, 9, .35); }
.om-knop:hover, .om-knop-rand:hover { filter: brightness(1.1); }
.om-knop:disabled { cursor: progress; filter: saturate(.4) brightness(.85); }
.om-pillen { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; font-weight: 700; font-size: 15px; }
.om-pillen li { padding: 8px 14px; border-radius: 999px; border: 2px dashed rgba(255, 241, 220, .35); background: rgba(19, 13, 9, .35); }

/* ------------------------------------------------------------------ algemeen */
.om { position: relative; z-index: 2; display: grid; gap: 96px; max-width: 1440px; margin: 0 auto; padding: 56px 56px 96px; font-size: 18px; line-height: 1.55; }
.om section { min-width: 0; scroll-margin-top: 24px; }
.om h2 { scroll-margin-top: 24px; }
.om-sectiekop { max-width: 760px; }
.om-sectiekop h2 { font-size: 52px; line-height: 1.02; }
.om-sectiekop p { margin-top: 12px; font-size: 19px; color: rgba(255, 241, 220, .85); }
.om h3 { font: 800 26px/1.08 var(--kop); letter-spacing: -0.02em; margin: 0; }
.om-num { font-family: var(--kop); font-weight: 800; letter-spacing: -0.02em; }
.om-raster { display: grid; gap: 28px; margin-top: 30px; }
.om-raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.om-raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.om-raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.om-kaart { padding: 28px 30px; background: #1b130d; border: 2px solid #3a2f25; border-radius: 28px 12px 28px 12px; }
.om-kaart-b { border-radius: 12px 28px 12px 28px; }
.om-klein { font-size: 14px; color: rgba(255, 241, 220, .75); }
.om-hulp { font-size: 14px; color: rgba(255, 241, 220, .72); }
.om a:not([class]) { color: var(--accent-2); text-underline-offset: 3px; }

/* het briefje (schuim, zoals de bon) */
.om-briefje { padding: 28px 30px; color: var(--inkt); background: var(--schuim); border-radius: 18px 18px 8px 8px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.om-briefje h3 { line-height: 1; padding-bottom: 12px; border-bottom: 2px dashed rgba(14, 30, 63, .35); }
.om-briefje a:not([class]) { color: var(--inkt); }
.om-scheef-l { transform: rotate(-.8deg); }
.om-scheef-r { transform: rotate(.8deg); }
.om-scheef-1 { transform: rotate(-1deg); }
.om-lijst { list-style: none; margin: 0; padding: 0; }
.om-lijst li { padding: 11px 0; border-bottom: 2px dashed rgba(14, 30, 63, .2); font-weight: 700; }
.om-voorbeeldregel { margin-top: 14px; font-size: 15px; color: #4b4338; }

/* ------------------------------------------------------------------ velden */
.om-veld { display: grid; gap: 8px; min-width: 0; }
.om-veld > label, .om-groep legend { font-weight: 700; }
.om-veld input:not([type="file"]), .om-veld textarea { width: 100%; min-height: 52px; padding: 14px 16px; border-radius: 14px; border: 2px solid #5a4a3a; background: #0b0705; color: var(--schuim);
  font: 400 17px/1.3 var(--tekstletter); color-scheme: dark; }
.om-veld textarea { resize: vertical; line-height: 1.5; }
.om-veld input::placeholder, .om-veld textarea::placeholder { color: rgba(255, 241, 220, .45); }
.om-veld input:focus-visible, .om-veld textarea:focus-visible { border-color: var(--accent-2); }
.om-veld input[aria-invalid="true"] { border-color: #ff6b4a; }
.om-groep { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.om-groep legend { padding: 0; margin-bottom: 10px; }
.om-groep .om-hulp { margin-top: -14px; }
.om-melding { min-height: 20px; font-size: 14px; font-weight: 700; color: #ff9a7a; }

/* ------------------------------------------------------------------ live voorbeeld */
.om-voorbeeld { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 30px; }
.om-bediening { display: grid; gap: 22px; }
.om-stalen { display: flex; flex-wrap: wrap; gap: 10px; }
.om-staal { width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer; background: var(--staal, #FF4B0F); border: 4px solid transparent; box-shadow: 0 0 0 2px #3a2f25; }
.om-staal[aria-pressed="true"] { border-color: var(--schuim); box-shadow: 0 0 0 2px var(--staal, #FF4B0F); }
.om-hex { max-width: 220px; font-weight: 800 !important; letter-spacing: .12em; text-transform: uppercase; }

.om-schermen { --tb: #FF4B0F; --ton: #130D09; display: flex; gap: 24px; align-items: flex-end; min-width: 0; }
.om-tv-plek { flex: 1 1 0; min-width: 0; container-type: inline-size; }
.om-tel-plek { flex: 0 0 auto; }
.om-onderschrift { margin-top: 12px; font-size: 14px; color: rgba(255, 241, 220, .75); }
.om-tel-plek .om-onderschrift { text-align: center; }
.om-gloed { position: absolute; inset: 0; background: radial-gradient(ellipse at 100% 0%, var(--tb), transparent 55%); opacity: .38; transition: background .3s; }

/* quizscherm: alles in em, de lettermaat schaalt mee met de breedte (15.5px bij 656px breed, zoals de mockup) */
.om-tv { position: relative; overflow: hidden; aspect-ratio: 16 / 9; width: 100%; font-size: 15.5px; font-size: clamp(6px, 2.36cqi, 18px); line-height: 1.3; color: var(--schuim);
  background: #130D09; border-radius: 1.4em; border: .45em solid #2b2118; box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.om-tv-binnen { position: relative; height: 100%; padding: 1.5em 2em 1.3em; display: flex; flex-direction: column; justify-content: space-between; }
.om-tv-boven { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.om-wie { display: flex; align-items: center; gap: .7em; min-width: 0; }
.om-initialen { flex: 0 0 auto; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; font-size: 1em; background: var(--tb); color: var(--ton); }
.om-naam { min-width: 0; font-size: 1.35em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-ronde { font-weight: 700; font-size: .95em; color: rgba(255, 241, 220, .8); white-space: nowrap; }
.om-vraagpil { display: inline-block; padding: .15em .8em; border-radius: 999px; font-weight: 800; font-size: .95em; background: var(--tb); color: var(--ton); }
.om-tv-vraag { margin-top: .35em; font-size: 2.25em; line-height: 1.04; text-wrap: balance; }
.om-tv-antwoorden { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.om-antw { display: flex; align-items: center; gap: .6em; padding: .45em .7em; border-radius: .8em; border: 2px solid rgba(255, 241, 220, .25); background: rgba(0, 0, 0, .25); }
.om-antw > span:last-child { font-weight: 700; font-size: 1.25em; }
.om-letter { flex: 0 0 auto; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; font-size: 1.05em; background: var(--tb); color: var(--ton); }
.om-tv-onder { display: flex; align-items: center; gap: 1em; }
.om-balk { flex: 1; height: .55em; border-radius: 99px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.om-balk i { display: block; width: 62%; height: 100%; background: var(--tb); }
.om-tv-logo { display: block; width: 7.5em; height: auto; opacity: .9; }

/* telefoon */
.om-tel { position: relative; overflow: hidden; width: 240px; aspect-ratio: 9 / 16; font-size: 10.8px; line-height: 1.3; color: var(--schuim);
  background: #130D09; border-radius: 2.4em; border: .4em solid #2b2118; box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.om-tel .om-gloed { background: radial-gradient(ellipse at 100% 0%, var(--tb), transparent 50%); opacity: .3; }
.om-tel-binnen { position: relative; height: 100%; padding: 1.3em 1.1em 1.1em; display: flex; flex-direction: column; gap: .8em; }
.om-tel .om-initialen { width: 2em; height: 2em; }
.om-tel .om-wie { gap: .6em; }
.om-tel .om-naam { font-size: 1.1em; }
.om-tel-vraag { font-size: 1.3em; line-height: 1.1; }
.om-tel-antwoorden { display: grid; gap: .5em; margin-top: auto; }
.om-keuze { display: flex; gap: .5em; align-items: center; padding: .65em .8em; border-radius: .9em; font-weight: 700; border: 2px solid rgba(255, 241, 220, .25); background: rgba(0, 0, 0, .25); }
.om-keuze .om-num { width: 1.5em; }
.om-keuze.gekozen { border-color: var(--tb); background: var(--tb); color: var(--ton); }
.om-verstuur { padding: .7em; border-radius: .9em; text-align: center; font-weight: 800; background: var(--tb); color: var(--ton); }

/* ------------------------------------------------------------------ wat je kunt aanpassen */
.om-optie { display: grid; gap: 10px; align-content: start; }
.om-optie p { color: rgba(255, 241, 220, .85); }
.om-label { justify-self: start; padding: 3px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; border: 2px solid currentColor; }
.om-label-uiterlijk { color: #E3A63B; }
.om-label-inhoud { color: #FF4B0F; }
.om-label-avond { color: #7fb0ff; }

/* ------------------------------------------------------------------ zo gaat het */
.om-stappen { list-style: none; padding: 0; margin-bottom: 0; }
.om-stappen li { display: grid; gap: 8px; align-content: start; }
.om-stappen .stapnr { font-size: 84px; line-height: .8; }
.om-stappen p { color: rgba(255, 241, 220, .85); }

/* ------------------------------------------------------------------ niveaus */
.om-niveaus { align-items: start; }
.om-niveau h3 { padding-bottom: 0; border-bottom: 0; }
.om-onder { margin-top: 6px; font-size: 15px; color: #4b4338; }
.om-lijst-open { margin-top: 14px; border-top: 2px dashed rgba(14, 30, 63, .35); }
.om-lijst-open li { font-weight: 600; }
.om-prijs { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; }
.om-prijs span { font-weight: 700; font-size: 14px; color: #6b6258; }
.om-prijs b { font-size: 22px; white-space: nowrap; }
.om-prijsnoot { margin-top: 22px; font-size: 15px; color: rgba(255, 241, 220, .75); }

/* ------------------------------------------------------------------ aanvraag */
.om-aanvraag-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 30px; }
.om-formulier { position: relative; }
.om-formulier, .om-velden { display: grid; gap: 24px; min-width: 0; }
.om-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.om-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.om-chip { min-height: 44px; padding: 10px 16px; border-radius: 999px; cursor: pointer; font: 700 15px/1.2 var(--tekstletter); text-align: left;
  color: var(--schuim); background: transparent; border: 2px solid #5a4a3a; }
.om-chip:hover { border-color: rgba(255, 241, 220, .6); }
.om-chip[aria-checked="true"] { color: var(--on); background: var(--accent); border-color: var(--accent); }
.om-bestand { width: 100%; min-width: 0; max-width: 100%; color: var(--schuim); font: 400 15px var(--tekstletter); }
.om-bestand::file-selector-button { margin-right: 12px; padding: 10px 16px; border-radius: 12px; cursor: pointer; font: 700 15px var(--tekstletter); color: var(--schuim); background: #2b2118; border: 2px solid #5a4a3a; }
.om-honing { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.om-toestemming { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.om-toestemming input { flex: 0 0 auto; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); }
.om-fout { min-height: 22px; font-weight: 700; color: #ff9a7a; }
.om-fout:empty { min-height: 0; margin-top: -24px; }
.om-verzend { justify-self: stretch; }
.om-verstuurd { padding: 20px 22px; border-radius: 12px 28px 12px 28px; color: var(--inkt); background: var(--schuim); }
.om-verstuurd:focus { outline: none; }
.om-verstuurd:focus-visible { outline: 3px solid var(--messing-licht); outline-offset: 3px; }
.om-verstuurd-kop { font-size: 26px; line-height: 1.05; }
.om-verstuurd p { margin-top: 8px; }
.om-zij { display: grid; gap: 28px; align-content: start; min-width: 0; }
.om-zij .om-briefje { padding: 24px; }
.om-zij .om-briefje h3 { font-size: 24px; }
.om-handig { margin: 0; }
.om-handig > div { padding: 12px 0; border-bottom: 2px dashed rgba(14, 30, 63, .2); }
.om-handig dt { font-weight: 700; }
.om-handig dd { margin: 0; font-size: 14px; color: #4b4338; }
.om-proberen { padding: 18px 20px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 2px dashed rgba(255, 241, 220, .25); }
.om-proberen h3 { font-size: 22px; line-height: 1.1; }
.om-proberen p { margin-top: 8px; color: rgba(255, 241, 220, .85); }

/* ------------------------------------------------------------------ veelgestelde vragen */
.om-faq { display: grid; gap: 12px; max-width: 900px; margin-top: 30px; }
.om-faq-item { overflow: hidden; border-radius: 16px; background: #1b130d; border: 2px solid #3a2f25; }
.om-faq-item h3 { font: inherit; }
.om-faq-item button { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; min-height: 44px; padding: 18px 22px; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
  font: 700 18px/1.35 var(--tekstletter); color: var(--schuim); background: transparent; }
.om-faq-item button:focus-visible { outline-offset: -3px; }
.om-teken { flex: 0 0 auto; font: 800 26px/1 var(--kop); color: var(--accent-2); }
.om-teken::before { content: '+'; }
[aria-expanded="true"] > .om-teken::before { content: '\2013'; }
.om-faq-antw { padding: 0 22px 20px; color: rgba(255, 241, 220, .9); }

/* ------------------------------------------------------------------ kleiner */
@media (max-width: 1180px) {
  .om { padding-left: 32px; padding-right: 32px; }
  .om-voorbeeld { grid-template-columns: 1fr; }
  .om-raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .om { gap: 72px; }
  .om-kop.kopband-laag h1 { font-size: clamp(3rem, 12vw, 104px); }
  .om-raster-3, .om-aanvraag-raster { grid-template-columns: 1fr; }
  .om-raster-2 { grid-template-columns: 1fr; }
  .om-scheef-l, .om-scheef-r, .om-scheef-1 { transform: none; }
  .om-sectiekop h2 { font-size: clamp(34px, 7vw, 52px); }
}
@media (max-width: 700px) {
  .om-kop { min-height: 0; }
  .om-kop .kopband-inhoud > p { font-size: 18px; }
  .om-knoppen a { flex: 1 1 auto; }
  .om-knop { font-size: 18px; padding: 16px 20px; }
  .om-knop-rand { font-size: 17px; padding: 14px 20px; }
  .om-pillen { font-size: 14px; gap: 8px; }
  .om { gap: 64px; padding: 32px 16px 72px; font-size: 17px; }
  .om-sectiekop p { font-size: 17px; }
  .om h3 { font-size: 23px; }
  .om-kaart, .om-briefje { padding: 22px 18px; }
  .om-raster { gap: 18px; margin-top: 22px; }
  .om-raster-4 { grid-template-columns: 1fr; }
  .om-stappen li { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; }
  .om-stappen .stapnr { grid-row: span 2; font-size: 64px; }
  .om-schermen { flex-direction: column; align-items: stretch; gap: 28px; }
  .om-tel-plek { align-self: center; }
  .om-tel { width: 220px; font-size: 9.9px; }
  .om-twee { grid-template-columns: 1fr; }
  .om-faq-item button { padding: 16px 18px; font-size: 17px; }
  .om-faq-antw { padding: 0 18px 18px; }
  .om-hex { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .om-gloed { transition: none; } }

/* ------------------------------------------------------------------ bingoshow (accent --bingo uit tokens.css) */
.om-bingo { position: relative; padding: 40px 44px 44px; border-radius: 28px 12px 28px 12px; border: 2px solid rgba(var(--bingo-rgb), .45);
  background: radial-gradient(ellipse at 100% 0%, rgba(var(--bingo-rgb), .22), transparent 55%), #170e12; }
.om-bingo-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.om-bingo-pil { display: inline-block; margin: 0 0 12px !important; padding: 3px 14px; border-radius: 999px; font-weight: 800; font-size: 15px !important; color: #130D09 !important; background: var(--bingo); }
.om-label-bingo { color: var(--bingo); }
.om-bingo .om-kaart { background: #1f1318; }
.om-bingo-meer { margin-top: 24px; max-width: 760px; color: rgba(255, 241, 220, .85); }
.om-bingo a:not([class]) { color: var(--bingo); }
.om-bingo-ballen { position: relative; flex: 0 0 220px; height: 150px; }
.om-bal { --kl: var(--bingo); --d: 90px; position: absolute; display: grid; place-items: center; align-content: center; width: var(--d); height: var(--d); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .9) 0 7%, transparent 8%), radial-gradient(circle, #FFF8EE 0 46%, var(--kl) 47% 100%);
  box-shadow: inset calc(var(--d) * -.06) calc(var(--d) * -.08) calc(var(--d) * .16) rgba(0, 0, 0, .35), 0 calc(var(--d) * .1) calc(var(--d) * .25) rgba(0, 0, 0, .5);
  color: #130D09; font: 800 calc(var(--d) * .3)/1 var(--kop); letter-spacing: -0.02em; }
.om-bal b { display: block; font-size: .45em; opacity: .7; }
.om-bal-1 { --kl: var(--b-blauw); --d: 72px; left: 0; top: 40px; rotate: -10deg; }
.om-bal-2 { --d: 104px; left: 60px; top: 0; rotate: 6deg; }
.om-bal-3 { --kl: var(--a-oranje); --d: 68px; left: 150px; top: 72px; rotate: 12deg; }
@media (max-width: 700px) {
  .om-bingo { padding: 26px 18px; }
  .om-bingo-kop { flex-direction: column-reverse; }
  .om-bingo-ballen { flex-basis: auto; width: 220px; height: 120px; scale: .8; transform-origin: left top; }
}