/* Uitlegfilms (inc/film.php). Kleuren uit nieuw/wow/wow.css; eigen klassen (bf-) zodat de pagina's er niet aan komen. */
.bf-film {
  --bf-or: #FF6A1A; --bf-or-d: #B4430A; --bf-tq: #12B5B0; --bf-tq-d: #08716C; --bf-inkt: #14181A; --bf-diep: #0A2F2E;
  background: var(--bf-diep); color: #fff; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;
  font-family: "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif; max-width: 100%;
}
.bf-film button { font: inherit; }
.bf-kopregel { display: flex; gap: 12px; align-items: baseline; padding: 12px 16px 10px; font-size: .92rem; color: #B9D3D0; min-width: 0; }
.bf-kopregel .bf-nr { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bf-kopregel .bf-titel { color: #fff; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* het beeld */
.bf-beeld { position: relative; background: #fff; aspect-ratio: 8 / 5; }
.bf-scene { position: absolute; inset: 0; transition: background-color .6s ease; }
.bf-scene.bf-donker { background: var(--bf-diep); }
.bf-svg { display: block; width: 100%; height: 100%; }
.bf-svg .l { fill: none; stroke: var(--bf-inkt); stroke-width: var(--w, 2.6px); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bf-svg .l.a1 { stroke: var(--bf-or); }
.bf-svg .l.a2 { stroke: var(--bf-tq); }
.bf-svg .l.dik { stroke-width: var(--wd, 6.5px); }
.bf-svg .l.vul { fill: #fff; }
.bf-svg .l.stip { stroke-dasharray: .015 .02; stroke-dashoffset: 0; opacity: 0; }
.bf-svg .vl { stroke: none; opacity: 0; }
.bf-svg .v1 { fill: #FFE7D9; }
.bf-svg .v2 { fill: #DDF4F2; }
.bf-donker .bf-svg .l { stroke: #F2F4F3; }
.bf-donker .bf-svg .l.a1 { stroke: var(--bf-or); }
.bf-donker .bf-svg .l.a2 { stroke: var(--bf-tq); }
.bf-donker .bf-svg .l.vul { fill: var(--bf-diep); }
.bf-donker .bf-svg .v1 { fill: rgba(255,106,26,.18); }
.bf-donker .bf-svg .v2 { fill: rgba(18,181,176,.18); }
.bf-kabel { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; stroke-dasharray: 1 7; }
.bf-kabel.bf-or { stroke: var(--bf-or); }
.bf-kabel.bf-tq { stroke: var(--bf-tq); }
.bf-kabel.bf-ink { stroke: var(--bf-inkt); stroke-dasharray: none; stroke-width: 2.6; }
.bf-donker .bf-kabel.bf-ink { stroke: #F2F4F3; }
.bf-puls { opacity: 0; }
.bf-puls.bf-or { fill: var(--bf-or); }
.bf-puls.bf-tq { fill: var(--bf-tq); }
.bf-label { font: 700 16px "Jakarta", system-ui, sans-serif; fill: var(--bf-inkt); opacity: 0; paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.bf-donker .bf-label { fill: #fff; stroke: var(--bf-diep); }

/* afspelen en einde */
.bf-start { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px;
  border: 0; background: rgba(255,255,255,.9); color: var(--bf-inkt); cursor: pointer; text-align: left; }
.bf-start-rond { flex: none; width: 76px; height: 76px; border-radius: 50%; background: var(--bf-or-d); display: grid; place-items: center; transition: background-color .2s, transform .25s; }
.bf-start-rond svg { width: 34px; height: 34px; fill: #fff; margin-left: 4px; }
.bf-start:hover .bf-start-rond { background: #8F3407; transform: scale(1.04); }
.bf-start:focus-visible { outline: 3px solid var(--bf-or-d); outline-offset: -6px; }
.bf-start-tekst { display: grid; gap: 4px; font-weight: 800; font-size: clamp(1.15rem, 3.2vw, 1.6rem); letter-spacing: -.02em; line-height: 1.15; }
.bf-start-tekst small { font-weight: 500; font-size: .95rem; letter-spacing: 0; color: #2B3134; }
.bf-eind { position: absolute; inset: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; padding: 16px; background: rgba(255,255,255,.88); }
.bf-eind[hidden], .bf-start[hidden] { display: none; }

/* ondertitel: altijd zichtbaar, ook zonder geluid */
.bf-ondertitel { margin: 0; padding: 12px 16px; min-height: calc(3 * 1.4em + 24px); font-size: clamp(1.02rem, 2.6vw, 1.22rem); line-height: 1.4; font-weight: 600; color: #fff;
  background: var(--bf-inkt); display: flex; align-items: center; }

/* voortgang en knoppen */
.bf-balk { display: flex; gap: 3px; padding: 12px 16px 4px; }
.bf-stuk { flex: 1 1 0; min-width: 0; height: 22px; padding: 8px 0; border: 0; background: none; cursor: pointer; position: relative; }
.bf-stuk::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); }
.bf-stuk i { position: absolute; left: 0; top: 8px; height: 6px; border-radius: 3px; background: var(--bf-or); width: 0; }
.bf-stuk:hover::before { background: rgba(255,255,255,.4); }
.bf-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 8px 10px; }
.bf-k { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; background: none; color: #fff; cursor: pointer; }
.bf-k:hover { background: rgba(255,255,255,.1); }
.bf-k svg { width: 24px; height: 24px; fill: currentColor; }
.bf-k-groot { width: 52px; height: 52px; border-radius: 50%; background: var(--bf-or-d); }
.bf-k-groot:hover { background: #8F3407; }
.bf-k .bf-i-pauze, .bf-speelt .bf-k .bf-i-speel { display: none; }
.bf-speelt .bf-k .bf-i-pauze { display: block; }
.bf-k .bf-i-uit, .bf-stil .bf-k .bf-i-aan { display: none; }
.bf-stil .bf-k .bf-i-uit { display: block; }
.bf-k:focus-visible, .bf-stuk:focus-visible { outline: 3px solid var(--bf-or); outline-offset: 1px; }
.bf-tijd { margin-left: auto; margin-right: 4px; font-variant-numeric: tabular-nums; font-size: .9rem; color: #B9D3D0; white-space: nowrap; }
.bf-k[data-bf-geluid] { margin-left: 0; }

@media (max-width: 420px) {
  .bf-knoppen { gap: 0; padding-inline: 4px; }
  .bf-k { width: 44px; height: 44px; }
  .bf-tijd { font-size: .82rem; }
  .bf-start { flex-direction: column; text-align: center; gap: 10px; }
  .bf-start-rond { width: 64px; height: 64px; }
}

/* volledig scherm (echt, of als laag waar de browser dat niet kan) */
.bf-film:fullscreen, .bf-film.bf-vol { border-radius: 0; width: 100%; height: 100%; }
.bf-film.bf-vol { position: fixed; inset: 0; z-index: 2147483100; }
.bf-film:-webkit-full-screen { border-radius: 0; width: 100%; height: 100%; }
.bf-film:fullscreen .bf-beeld, .bf-film.bf-vol .bf-beeld { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.bf-film:-webkit-full-screen .bf-beeld { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
html.bf-vol-aan, html.bf-vol-aan body { overflow: hidden; }

/* de tekst onder de film */
.bf-uitgeschreven { margin-top: 26px; }
.bf-uitgeschreven h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 0 0 6px; }
.bf-uitgeschreven ol { list-style: none; margin: 0; padding: 0; display: grid; }
.bf-uitgeschreven li { padding: 14px 0; border-top: 1px solid var(--lijn, #E4E0DA); display: grid; gap: 4px; }
.bf-naar { justify-self: start; background: none; border: 0; padding: 0; cursor: pointer; font-weight: 800; font-size: 1.08rem; color: var(--inkt, #14181A); text-align: left; text-decoration: underline; text-decoration-color: var(--bf-or, #FF6A1A); text-underline-offset: 4px; }
.bf-naar:hover { color: #B4430A; }
.bf-uitgeschreven p { margin: 0; max-width: 64ch; }

/* als laag over de pagina */
.bf-laag { position: fixed; inset: 0; z-index: 2147483050; background: rgba(20,24,26,.62); display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.bf-laag[hidden] { display: none; }
.bf-laag-binnen { width: min(920px, 100%); background: #fff; border-radius: 22px; padding: 14px; display: grid; gap: 12px; }
.bf-laag-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bf-laag-kop b { color: var(--inkt, #14181A); font-size: 1.05rem; }
.bf-laag-kop .knop { min-height: 44px; padding: 0 16px; }
html.bf-laag-open, html.bf-laag-open body { overflow: hidden; }
@media (max-width: 640px) {
  .bf-laag { padding: 0; align-items: stretch; }
  .bf-laag-binnen { border-radius: 0; min-height: 100%; align-content: start; padding: 12px; }
}

/* alleen voor schermlezers */
.bf-hulp { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }

/* na een klik op de filmkaart */
.bf-kaart-film { display: block; }

/* ── samen met de leeshulp (nieuw/wow/leeshulp.js) ─────────────────────────
   Grotere tekst: de leeshulp zoomt de hele pagina, de ondertitel is gewone tekst en groeit mee; de knoppenrij
   loopt door naar een tweede regel in plaats van buiten beeld te vallen. */
.bf-ondertitel { overflow-wrap: anywhere; }
.bf-kopregel { flex-wrap: wrap; }
.bf-kopregel .bf-titel { white-space: normal; }

/* Hoog contrast: zwart met wit, gele focus, oranje en turquoise donkerder zodat ze genoeg afsteken op wit. */
html.lh-contrast .bf-film, html.lh-contrast .bf-film .bf-kopregel, html.lh-contrast .bf-film .bf-balk, html.lh-contrast .bf-film .bf-knoppen { background: #000 !important; color: #fff !important; }
html.lh-contrast .bf-film .bf-kopregel, html.lh-contrast .bf-film .bf-titel, html.lh-contrast .bf-film .bf-nr, html.lh-contrast .bf-film .bf-tijd { color: #fff !important; }
html.lh-contrast .bf-film .bf-ondertitel { background: #000 !important; color: #fff !important; border-top: 2px solid #fff; border-bottom: 2px solid #fff; font-weight: 700; }
html.lh-contrast .bf-film .bf-k { color: #fff !important; background: #000 !important; outline: 2px solid #fff !important; }
html.lh-contrast .bf-film .bf-k-groot { background: #fff !important; color: #000 !important; }
html.lh-contrast .bf-film .bf-stuk::before { background: #777 !important; }
html.lh-contrast .bf-film .bf-stuk i { background: #FFD400 !important; }
html.lh-contrast .bf-film .bf-beeld, html.lh-contrast .bf-film .bf-scene:not(.bf-donker) { background: #fff !important; }
html.lh-contrast .bf-film { --bf-or: #9A3A08; --bf-tq: #04605C; --bf-inkt: #000; }
html.lh-contrast .bf-film .bf-label { fill: #000; stroke: #fff; }
html.lh-contrast .bf-film .bf-donker .bf-label { fill: #fff; stroke: #000; }
html.lh-contrast .bf-film .bf-start, html.lh-contrast .bf-film .bf-eind { background: rgba(255,255,255,.96) !important; color: #000 !important; }
html.lh-contrast .bf-film .bf-start-tekst, html.lh-contrast .bf-film .bf-start-tekst small { color: #000 !important; }
html.lh-contrast .bf-film .bf-start-rond { background: #000 !important; }
html.lh-contrast .bf-film :focus-visible { outline: 4px solid #FFD400 !important; outline-offset: 2px !important; }
html.lh-contrast .bf-kaart-rond { background: #000 !important; }

/* Donker scherm: de leeshulp keert de hele pagina om. De film is al donker; die zetten we terug, en het witte beeld
   keren we wel om (zoals de nachtscène), zodat er geen fel wit vlak in een donkere pagina staat. */
html.lh-donker .bf-film { filter: invert(1) hue-rotate(180deg); }
html.lh-donker .bf-film .bf-beeld { filter: invert(1) hue-rotate(180deg) brightness(.92); }
html.lh-donker .bf-film .bf-start-rond, html.lh-donker .bf-film .bf-eind .knop { filter: invert(1) hue-rotate(180deg); }

/* Leesbare letter: ook voor de ondertitel, de knoppen en de woorden in de tekening. */
html.lh-letter .bf-film, html.lh-letter .bf-film * , html.lh-letter .bf-film .bf-label { font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important; }
html.lh-letter .bf-film .bf-label { font-size: 15px; }

/* Meer ruimte: wat lucht in de ondertitel, maar de rest van de speler blijft compact. */
html.lh-ruimte .bf-film .bf-knoppen *, html.lh-ruimte .bf-film .bf-balk * { line-height: 1 !important; letter-spacing: normal !important; }

/* Leesliniaal en grote muis werken vanzelf. Beweging uit: film.js bouwt de scènes dan direct op. */
@media (prefers-reduced-motion: reduce) {
  .bf-scene { transition: none; }
  .bf-start-rond, .bf-kaart-rond { transition: none; }
}

/* ingeklapte tekst onder de film (/batterij/uitleg) */
.bf-dicht-tekst { margin-top: 16px; }
.bf-dicht-tekst summary { cursor: pointer; font-weight: 800; color: var(--inkt, #14181A); text-decoration: underline; text-decoration-color: var(--bf-or, #FF6A1A); text-underline-offset: 4px; padding: 6px 0; }
.bf-dicht-tekst[open] summary { margin-bottom: 4px; }
.bo-uitleg-film { margin-bottom: 8px; }

/* echte foto in de film (introfilm): rond, en bij het donkere scherm van de leeshulp niet omgekeerd */
.bf-svg .bf-foto { opacity: 0; }
html.lh-donker .bf-film .bf-beeld .bf-foto { filter: invert(1) hue-rotate(180deg); }