/* Huisstijl video.eijrond.nl — laadt ná style.css en overschrijft alleen uiterlijk (kleuren, lettertypen, vormen).
   Bron van de stijl: www.eijrond.nl: donkerteal (#054358), camouflage in drie tinten teal, cyaan "plakbandlabel" met typemachine-letters (Trixie),
   plus stencil-letters (Allerta Stencil) voor al het "cargo"-werk: knoppen, labels, tabs, stempels. Publieke pagina's zijn donker; beheerpagina's
   (body.adm) houden lichte vlakken voor de formulieren en tabellen, met dezelfde kop, voet en letters. */

@font-face{font-family:'Trixie';font-display:swap;src:url('/static/merk/trixieguido-webfont.woff2') format('woff2'),url('/static/merk/trixieguido-webfont.woff') format('woff')}
@font-face{font-family:'Trixie Cameo';font-display:swap;src:url('/static/merk/trixie-cameo-webfont.woff2') format('woff2')}
@font-face{font-family:'Allerta Stencil';font-display:swap;src:url('/static/merk/AllertaStencil-400.woff2') format('woff2')}

:root{
  --cyaan:#00daff; --cyaan-d:#00b8d2; --cyaan-l:#7df0ff; --licht:#e9fbff;
  --teal-0:#032e3d; --teal-1:#054358; --teal-2:#00445a; --teal-3:#006a8c;
  --f-trixie:'Trixie',Verdana,'Courier New',serif;
  --f-cameo:'Trixie Cameo','Trixie',Verdana,serif;
  --f-stencil:'Allerta Stencil','Arial Narrow',Impact,sans-serif;
}
html{background:#17191b}

/* ---------- publiek: donker ---------- */
body{
  --oranje:var(--cyaan); --oranje-donker:var(--cyaan-d); --geel:#ffd84a;
  --inkt:#dcdcdc; --diep:#101214; --papier:#17191b; --vlak:#1f2326; --lijn:#3a4349; --zacht:#a9b4ba; --grijs:#7d888e;
  --r:3px; --pil:3px;
  background:#17191b url('/static/merk/camo-grijs.png') center top/640px; color:var(--inkt);
}
/* beheer: lichte vlakken */
body.adm{
  --oranje:#007c9a; --oranje-donker:#00607a;
  --inkt:#0d2a33; --diep:var(--teal-0); --papier:#f6fafb; --vlak:#e7f0f3; --lijn:#cbdde3; --zacht:#557480; --grijs:#7a97a2;
  background:#eef1f2; color:var(--inkt);
}
body.embed,body.embed.adm{background:#000}

h1,h2,h3{font-family:var(--f-trixie);font-weight:400;letter-spacing:0}
h1{font-size:clamp(1.8rem,4.2vw,2.7rem)}
::selection{background:var(--cyaan);color:var(--teal-0)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--cyaan);outline-offset:3px}

/* ---------- kop: blauwe camouflageband ---------- */
/* style.css maakt van .kop een doorzichtige, plakkende houder en van .kop .wrap de zichtbare balk die bij het scrollen krimpt (--kop-h): het thema zit dus op .wrap */
:root{--kop-h:84px}
@media (max-width:900px){:root{--kop-h:74px}}
@media (max-width:640px){:root{--kop-h:66px}}
.kop,.kop .wrap{height:var(--kop-h)}
.kop{border-bottom:0}
body.adm .kop{position:relative}
.kop .wrap{
  position:relative;padding:0 32px;gap:22px;
  background:linear-gradient(90deg,rgba(3,46,61,.66),rgba(3,46,61,.2) 55%,rgba(3,46,61,.5)),var(--teal-2) url('/static/merk/camo-teal.png') left center/560px;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 2px 0 var(--teal-0);
}
.kop.klein .wrap:not(:hover):not(:focus-within):not(:has(details[open])){box-shadow:0 2px 0 var(--teal-0)}
.merk{font-family:var(--f-cameo);font-weight:400;font-size:34px;line-height:1.1;letter-spacing:0;color:var(--cyaan);gap:14px}
.merk img{height:58px;width:auto;filter:drop-shadow(0 2px 0 rgba(3,46,61,.6))}
.merk b{color:var(--licht);font-weight:400}
.merk .app{font:400 .42em var(--f-stencil);letter-spacing:.2em;text-transform:uppercase;color:var(--licht);margin-left:.7em;font-style:normal}
.kop nav{gap:30px;font-size:15px;font-weight:400;text-transform:uppercase}
.kop nav a,.kop nav summary{color:var(--licht);font-family:var(--f-stencil);font-weight:400;letter-spacing:.16em}
.kop nav a:hover,details.menu[open]>summary,.kop nav a.actief{color:var(--cyaan)}
.kop nav a.actief:not(.adminlink){box-shadow:0 3px 0 var(--cyaan)}
.kop nav .adminlink{background:transparent;color:var(--cyaan);border:2px solid var(--cyaan);border-radius:2px;padding:8px 14px;transform:rotate(-2deg)}
.kop nav .adminlink:hover{background:var(--cyaan);color:var(--teal-0)}
details.menu>summary::after{color:var(--cyaan)}
.menu-lijst,.adm-kaart{background:var(--teal-0);border:2px solid var(--cyaan);border-radius:2px;box-shadow:6px 6px 0 rgba(0,0,0,.35);padding:6px}
.menu-lijst a,.adm-kaart a{color:var(--licht);font-family:var(--f-stencil);font-weight:400;text-transform:uppercase;letter-spacing:.12em;font-size:.88rem;border-radius:2px}
.menu-lijst a:hover,.adm-kaart a:hover{background:var(--teal-1);color:var(--cyaan)}
.menu-lijst a.actief,.adm-kaart a.actief{color:var(--cyaan)}
/* het tandwielmenu: style.css zet daar `.kop nav .adm-kaart a{color:var(--inkt)}` en --inkt is op beheerpagina's (body.adm) donker, dus donkere tekst op donkerteal. Zelfde specificiteit, later geladen. */
.kop nav .adm-kaart a{color:var(--licht);font-family:var(--f-stencil);font-weight:400;text-transform:uppercase;letter-spacing:.12em;font-size:.88rem;border-radius:2px}
.kop nav .adm-kaart a:hover,.kop nav .adm-kaart a:focus-visible{background:var(--teal-1);color:var(--cyaan)}
.kop nav .adm-kaart a.actief{color:var(--cyaan);box-shadow:none}   /* geen streepje onder het actieve onderdeel: de kleur is de markering */
@media (max-width:900px){.kop .wrap{padding:0 20px}.merk{font-size:26px}.merk img{height:48px}}
@media (max-width:640px){.kop .wrap{padding:0 14px}.merk{font-size:20px;gap:8px}.merk img{height:42px}}

/* ---------- voet ---------- */
.voet{
  position:relative;margin-top:auto;padding:34px 0 28px;border-top:0;color:var(--licht);
  background:linear-gradient(0deg,rgba(3,46,61,.55),rgba(3,46,61,.3)),var(--teal-2) url('/static/merk/camo-teal.png') right bottom/560px;
}
.voet .wrap{font-family:var(--f-stencil);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;line-height:1.9;text-align:center}
.voet a,.voet-link{color:var(--cyaan);text-decoration:none}
.voet a:hover{color:var(--cyaan-l);text-decoration:underline}

/* ---------- hero (showreel op de standaardvoorpagina) ---------- */
.hero{background:#101214;color:var(--licht);border-bottom:2px solid var(--lijn)}
.hero p{color:var(--cyaan)}

/* ---------- onderdelen die op de publieke pagina's wit waren ---------- */
body:not(.adm) input[type=text],body:not(.adm) input[type=search],body:not(.adm) input[type=password],body:not(.adm) input[type=email],body:not(.adm) input[type=date],body:not(.adm) input[type=number],
body:not(.adm) select,body:not(.adm) textarea{background:#111315;color:var(--inkt);border:1.5px solid var(--lijn);border-radius:2px}
body:not(.adm) ::placeholder{color:var(--zacht);opacity:.85}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cyaan);outline-offset:1px}
body.adm input:focus,body.adm select:focus,body.adm textarea:focus{outline-color:var(--oranje)}

.kruimel{font-family:var(--f-stencil);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;font-weight:400}
.kruimel a{color:var(--zacht)}.kruimel a.nu,.kruimel span.nu{color:var(--licht)}.kruimel span{color:var(--lijn)}
.mappen{gap:14px}
.map,.chip{background:#1d2124;color:var(--licht)}
.map{border:2px solid var(--lijn);border-left:7px solid var(--cyaan);border-radius:2px;font-family:var(--f-stencil);font-weight:400;text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;box-shadow:4px 4px 0 rgba(0,0,0,.25)}
.map svg{color:var(--cyaan)}.map em{font-family:var(--f-stencil);color:var(--cyaan);letter-spacing:.06em}
.map:hover{border-color:var(--cyaan);background:#101214;transform:translate(-1px,-1px);box-shadow:5px 5px 0 rgba(0,0,0,.35)}
.chip{border:1.5px dashed var(--lijn);border-radius:2px;font-family:var(--f-stencil);font-weight:400;text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;padding:6px 12px}
.chip:hover{border-color:var(--cyaan);color:var(--cyaan)}
.chip.aan{background:var(--cyaan);border:1.5px solid var(--cyaan);color:var(--teal-0)}
body.adm .map,body.adm .chip{background:#fff;color:var(--inkt)}
body.adm .map{border-left-color:var(--oranje);box-shadow:none}
body.adm .chip.aan{background:var(--oranje);border-color:var(--oranje);color:#fff}

/* kaarten */
.kaart .beeld{border-radius:2px;background:#101214;box-shadow:0 0 0 2px #0c0e0f,4px 4px 0 rgba(0,0,0,.35)}
.kaart:hover .beeld{box-shadow:0 0 0 2px var(--cyaan),6px 6px 0 rgba(0,0,0,.35)}
.kaart img{transition:transform .35s,filter .35s}
.kaart:hover img{transform:scale(1.03)}
.kaart .duur{background:var(--cyaan);color:var(--teal-0);font:400 .78rem var(--f-stencil);letter-spacing:.08em;padding:3px 8px;border-radius:2px;right:8px;bottom:8px}
.kaart h3{font-family:var(--f-trixie);font-weight:400;font-size:1.02rem;color:var(--inkt);margin:.8em 0 .15em;line-height:1.25}   /* --inkt: een sharecase met eigen kleuren zet hier zijn tekstkleur */
.kaart:hover h3{color:var(--cyaan)}
.kaart .meta{font-family:var(--f-stencil);text-transform:uppercase;letter-spacing:.13em;font-size:.7rem;color:var(--zacht)}
body.adm .kaart h3{color:var(--inkt)}

/* knoppen: stencil-etiketten */
.knop{background:var(--cyaan);color:var(--teal-0);font:400 .9rem var(--f-stencil);letter-spacing:.1em;text-transform:uppercase;border-radius:2px;padding:10px 22px;box-shadow:3px 3px 0 rgba(0,0,0,.6);transition:transform .08s,box-shadow .08s,background .15s}
.knop:hover{background:var(--cyaan-l);transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(0,0,0,.6)}
.knop:active{transform:translate(3px,3px);box-shadow:none}
.knop.licht{background:transparent;color:var(--cyaan);border:2px solid var(--cyaan);padding:8px 20px}
.knop.licht:hover{background:var(--cyaan);color:var(--teal-0)}
body.adm .knop{background:var(--teal-1);color:var(--cyaan);box-shadow:3px 3px 0 rgba(3,46,61,.35)}
body.adm .knop:hover{background:var(--teal-0);color:var(--cyaan-l)}
body.adm .knop.licht{background:#fff;color:var(--teal-1);border:2px solid var(--teal-1)}
body.adm .knop.licht:hover{background:var(--teal-1);color:var(--cyaan)}

/* toegang als stempel */
.badge,.tg,.pill{font-family:var(--f-stencil);font-weight:400;letter-spacing:.12em;text-transform:uppercase;border-radius:2px}
.badge{border:2px solid currentColor;background:transparent!important;padding:1px 8px;font-size:.7rem;transform:rotate(-2deg);display:inline-block}
.badge.public{color:#0b7a8f}.badge.unlisted{color:#8a5200}.badge.private{color:#8a1c1c}
body:not(.adm) .badge.public{color:var(--cyaan)}body:not(.adm) .badge.unlisted{color:#ffd84a}body:not(.adm) .badge.private{color:#ff8a80}

/* tabs in het beheer */
.atabs a{font-family:var(--f-stencil);font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:.86rem}
.atabs a.actief,.atabs>a.actief{border-bottom-color:var(--teal-3);color:var(--teal-1)}
.atabs-wrap{border-bottom-color:var(--teal-1)}

/* pagina's van sharecases */
.vp-kop h1{font-size:clamp(1.9rem,4.4vw,2.8rem)}
.vp-sechead{border-bottom:2px solid var(--lijn);padding-bottom:10px}
.vp-sechead h2{font-size:1.35rem}
.vp-meer{font-family:var(--f-stencil);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;font-weight:400}
.vp .vp-meer,.vp .vp-kop a{color:var(--caccent,var(--cyaan))}
.vp .kaart:hover h3,.vp .vp-tekst h2 a:hover{color:var(--caccent,var(--cyaan))}
.vp-tekst h2 a:hover{color:var(--cyaan)}
.vp.heeft-stijl .kop-stempel{display:none}

/* afspeelknop in de speler: stencil-cirkel */
.speler .play .cirkel{fill:var(--cyaan)}
.speler .play:hover .cirkel{fill:var(--cyaan-l)}

/* losse pagina's (inloggen, wachtwoord, 404, privacy) */
.midden{background:#1d2124;border:2px solid var(--lijn);border-radius:2px;padding:30px 26px 34px;box-shadow:8px 8px 0 rgba(0,0,0,.28)}
.tekstpagina{background:#1d2124;border:2px solid var(--lijn);border-radius:2px;padding:28px 34px 34px;box-shadow:8px 8px 0 rgba(0,0,0,.25)}
.tekstpagina h2{font-family:var(--f-stencil);font-weight:400;text-transform:uppercase;letter-spacing:.14em;color:var(--cyaan);font-size:1rem}
body.adm .midden,body.adm .tekstpagina{background:#fff;box-shadow:none}
.fout{color:#ff8a80}
.midden::before{content:"";display:block;width:150px;height:150px;margin:-4px auto 8px;background:url('/static/merk/stempel.svg') center/contain no-repeat;transform:rotate(-6deg)}
body.embed .midden::before{display:none}

/* 404 en onderhoud: donkergrijs met de stempel als watermerk, de titel als cyaan plakbandlabel */
body.nietgevonden{background:#101214;color:var(--licht)}
.nf-achtergrond{position:fixed;inset:0;z-index:0;background:#101214 url('/static/merk/camo-grijs.png') center/640px}
.nf-achtergrond::before{content:"";position:absolute;left:50%;top:52%;width:min(92vmin,760px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(-12deg);background:url('/static/merk/stempel.svg') center/contain no-repeat;opacity:.2}
.nf-laag{background:none}
.nf-laag .nf-code{font:400 clamp(6rem,24vw,15rem)/.9 var(--f-stencil);letter-spacing:.03em;color:var(--cyaan);text-shadow:none;margin:0 0 .1em}
.nf-laag .nf-code.klein{font-size:clamp(2.2rem,8vw,5rem);letter-spacing:.08em;text-transform:uppercase}
.nf-laag h1{display:inline-block;background:var(--cyaan);color:var(--teal-0);text-shadow:none;padding:.12em .55em .16em;transform:rotate(-1.2deg);font-size:clamp(1.3rem,3.4vw,2rem)}
.nf-laag .nf-uitleg,.nf-laag .nf-detail{color:#cfd6da;text-shadow:none}
.nf-laag .knop.licht{background:transparent;border:2px solid var(--cyaan);color:var(--cyaan)}
.nf-laag .knop.licht:hover{background:var(--cyaan);color:var(--teal-0)}

/* ---------- onderdelen die in het origineel wit waren: reactiepaneel, menu's, de beheerbalk op een sharecase ---------- */
.reacties,.splitmenu,.versie-menu .vm-lijst{background:#1d2124;color:var(--inkt);border-color:var(--lijn)}
.reacties h2{font-family:var(--f-stencil);font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:.95rem;color:var(--cyaan)}
.rform textarea,.rveld input{background:#111315;color:var(--inkt)}
.rchip,.versie-menu summary{background:#111315;color:var(--inkt)}
.rchip.vast,.rr.nu{background:#0f3340}
.rr:hover{background:#252a2e}.rr.nu:hover{background:#0f3340}
.splitmenu a,.versie-menu .vm-lijst a{color:var(--inkt)}
.splitmenu a:hover,.splitmenu a:focus-visible,.versie-menu .vm-lijst a:hover,.versie-menu .vm-lijst a:focus-visible{background:#252a2e;color:var(--cyaan)}
.case-balk{background:#101214;color:var(--inkt);--zacht:#a9b4ba;--lijn:#3a4349;--inkt:#dcdcdc;border-bottom:2px solid var(--lijn)}
.case-balk-tekst{color:var(--zacht)}
body.adm .reacties{background:#fff;color:var(--inkt)}

@media (prefers-reduced-motion:reduce){.knop,.map,.kaart img{transition:none}}