/* De website ovlnl-academy.nl: stijl merkblauw (keuze gebruiker 09-11-2026).
   Kleuren uit het brandingboek van OVLNL Academy; oranje alleen voor knoppen. */
:root {
  --blauw: #061BA1; --diep: #003755; --nacht: #03106b; --oranje: #F77916; --grijs: #4E4E4E;
  --s2: #0E55ED; --s3: #0E7EED; --s4: #4E91ED; --licht: #f3f5fa; --lijn: #e3e7f0;
  /* Voor de inhoud van de trainingspagina (includes/trainingsblok_weergave.php). */
  --tb-kop: Ubuntu, sans-serif; --tb-knop-rond: 5px;
}
* { box-sizing: border-box; }
/* Ruimte voor de schuifbalk altijd vrijhouden, zodat een korte pagina niet verspringt. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; font-family: 'Open Sans', sans-serif; font-size: 16px; color: var(--grijs); background: #fff; line-height: 1.6; }
h1, h2, h3 { font-family: Ubuntu, sans-serif; margin: 0; color: var(--diep); }
a { color: var(--blauw); }
img { display: block; max-width: 100%; height: auto; }
.naar-inhoud { position: absolute; left: -9999px; top: 0; }
/* Alleen voor schermlezers: een kopje dat de opbouw klopend maakt zonder zichtbaar te zijn. */
.voorlezer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.naar-inhoud:focus { left: 16px; top: 12px; z-index: 10; background: #fff; padding: 8px 12px; border-radius: 5px; }
:focus-visible { outline: 3px solid var(--s4); outline-offset: 2px; }

.binnen { max-width: 1200px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.sectie { padding-top: 52px; padding-bottom: 52px; }
.sectie > h2 { text-transform: uppercase; font-size: 24px; margin-bottom: 22px; }

/* Knoppen: hoekradius 5px, Ubuntu Medium in hoofdletters. */
.knop { display: inline-block; font-family: Ubuntu, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
        font-size: 14px; padding: 12px 22px; border-radius: 5px; line-height: 1.2; text-decoration: none; margin: 0 8px 8px 0; }
.knop-o { background: var(--oranje); color: #fff; }
.knop-o:hover { background: #E06A0C; }
.knop-w { border: 2px solid #fff; color: #fff; padding: 10px 20px; }
.knop-w:hover { background: rgba(255,255,255,.12); }
.knop-l { border: 2px solid var(--blauw); color: var(--blauw); padding: 10px 20px; }
.knop-l:hover { background: var(--licht); }

/* Menu */
/* Zelfde zijmarge als .binnen, zodat logo en inhoud recht onder elkaar staan. */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px max(40px, calc((100% - 1120px) / 2)); }
.nav img { height: 44px; width: auto; }
.nav nav { display: flex; gap: 26px; font-family: Ubuntu, sans-serif; font-weight: 500; font-size: 15px; align-items: center; }
.nav nav a { text-decoration: none; }
.nav nav a.actief { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav nav .mijn { font-size: 13px; padding: 7px 14px; border-radius: 5px; text-transform: uppercase; letter-spacing: .04em; }
.op-blauw nav a { color: #fff; }
.op-blauw .mijn { border: 2px solid rgba(255,255,255,.7); }
header.op-wit { border-bottom: 1px solid var(--lijn); }
.op-wit nav a { color: var(--diep); }
.op-wit .mijn { border: 2px solid var(--blauw); color: var(--blauw) !important; }
.menuknop { display: none; font-family: Ubuntu, sans-serif; font-weight: 500; font-size: 14px; text-transform: uppercase;
            background: transparent; border-radius: 5px; padding: 8px 14px; cursor: pointer; }
.op-blauw .menuknop { color: #fff; border: 2px solid rgba(255,255,255,.7); }
.op-wit .menuknop { color: var(--blauw); border: 2px solid var(--blauw); }

/* 1. Het blauwe deel van de homepagina: foto onder een blauwe laag (variant A). */
.held { position: relative; color: #fff; background: var(--blauw); overflow: hidden; }
/* De wisselende plaat: de foto's liggen op elkaar, alleen die met .aan is te zien. */
.held .foto { position: absolute; inset: 0; background-position: center 30%; background-size: cover; opacity: 0; transition: opacity 2s ease-in-out; }
.held .foto.aan { opacity: 1; }
.held .laag { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,27,161,.97) 0%, rgba(6,27,161,.88) 42%, rgba(14,85,237,.35) 100%); }
.held > .nav, .held > .binnen { position: relative; z-index: 1; }
.held .inhoud { max-width: 600px; padding: 64px 0 96px; }
.held h1 { color: #fff; font-size: 48px; line-height: 1.08; text-transform: uppercase; margin: 0 0 18px; }
.held p { font-size: 18px; margin: 0 0 28px; }

/* 2. De donkerblauwe strook direct eronder. */
.donker { background: var(--nacht); color: #dfe6ff; }
.donker .punten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 22px 0; }
.donker .punten div { padding-left: 16px; border-left: 4px solid var(--s3); }
.donker .punten b { display: block; font-family: Ubuntu, sans-serif; font-size: 19px; color: #fff; }

/* 3. Eerstvolgende trainingen. */
.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kaart { display: block; border-radius: 10px; padding: 22px; background: #fff; border: 1px solid rgba(6,27,161,.06); color: var(--grijs); text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,30,80,.06), 0 8px 24px rgba(0,30,80,.10); transition: box-shadow .15s, border-color .15s; }
.kaart:hover { box-shadow: 0 2px 4px rgba(0,30,80,.08), 0 14px 36px rgba(0,30,80,.16); }
.kaart .kop { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.kaart .kop img { width: 54px; height: 54px; border-radius: 8px; }
.kaart h3 { font-size: 19px; color: var(--blauw); }
.kaart .soort { font-size: 13px; }
.feit { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 6px 0; border-top: 1px solid rgba(0,0,0,.08); }
.feit span:first-child { opacity: .75; }
.feit b { font-weight: 600; text-align: right; }
.kaart .meer { display: block; margin-top: 12px; font-family: Ubuntu, sans-serif; font-weight: 500; color: var(--blauw); font-size: 14px; }
.alle { text-align: center; margin-top: 26px; }

/* 4. Kernwaarden. */
.waarden { background: var(--licht); }
.waarden .rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; }
.waarden img { width: 84px; height: 84px; object-fit: contain; margin: 0 auto 10px; }
.waarden h3 { font-size: 19px; text-transform: uppercase; margin-bottom: 4px; }
.waarden p { margin: 0 auto; max-width: 300px; font-size: 15px; }

/* Voet */
.voet { background: var(--diep); color: #cfe0ea; font-size: 14px; }
.voet .binnen { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; padding-top: 34px; padding-bottom: 34px; }
.voet h2 { color: #fff; font-size: 15px; text-transform: uppercase; margin-bottom: 8px; }
.voet p { margin: 0; }
.voet a { color: #cfe0ea; }
.voet a:hover { color: #fff; }

/* Vervolgpagina: compacte blauwe band (variant C). */
.band { background: var(--blauw); color: #fff; padding: 16px 0 18px; border-bottom: 4px solid var(--s3); }
.band .rij { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.band .links { display: flex; align-items: center; gap: 14px; }
.band img { width: 48px; height: 48px; border-radius: 8px; background: #fff; padding: 2px; }
.band h1 { color: #fff; font-size: 26px; text-transform: uppercase; line-height: 1.2; }
.band a { color: #fff; }
.band .terug { font-family: Ubuntu, sans-serif; font-weight: 500; font-size: 14px; white-space: nowrap; opacity: .9; text-decoration: none; }
.band .terug:hover { opacity: 1; text-decoration: underline; }
.kruimel { font-size: 13px; opacity: .85; }
.kruimel a { text-decoration: none; }
.kruimel a:hover { text-decoration: underline; }
.kruimel b { font-weight: 600; }
.sectie-training { padding-top: 34px; padding-bottom: 40px; }
/* Diepte op de trainingspagina (verzoek gebruiker 10-11-2026): de feitenrij en de
   kaarten zweven met een zachte schaduw boven de pagina. Alleen op de website;
   in Mijn Academy blijven ze vlak. */
.tb-inhoud .tb-feit, .tb-inhoud .tb-kaart {
  background: #fff; border: 1px solid rgba(6,27,161,.06); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,30,80,.06), 0 8px 24px rgba(0,30,80,.10);
}
.tb-inhoud .tb-kaart-zacht { background: var(--licht); }
.tb-inhoud .tb-kaart { margin-bottom: 22px; }

/* Lopende tekst uit Mijn Academy (Verkoop, Website, Teksten). */
.tekst p { margin: 0 0 14px; }
.tekst h2 { font-size: 21px; text-transform: none; margin: 26px 0 10px; }
.tekst h2:first-child { margin-top: 0; }
.tekst ul { margin: 0 0 14px; padding: 0; list-style: none; }
.tekst li { position: relative; padding-left: 26px; margin-bottom: 7px; }
.tekst li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 10px; height: 6px;
  border-left: 2px solid var(--oranje); border-bottom: 2px solid var(--oranje); transform: rotate(-45deg); }
/* Alle pagina's even breed (verzoek gebruiker 11-11-2026): geen smallere tekstkolom meer. */
.leestekst { max-width: none; }
.intro { max-width: none; margin-bottom: 26px; font-size: 17px; }
.klein { font-size: 14px; }
.blok-zacht { background: var(--licht); border-radius: 10px; padding: 24px 26px 12px; }
.twee-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; padding-top: 0; }
.twee-kolom h2 { text-transform: uppercase; font-size: 22px; }
.waarden .meer { display: inline-block; margin-top: 6px; font-family: Ubuntu, sans-serif; font-weight: 500; font-size: 14px; text-decoration: none; }
.kaart-tekst { font-size: 14px; margin: 0 0 10px; }

/* Gratis studieadvies: blauwe strook met een knop. */
.advies { background: var(--blauw); color: #fff; }
.advies .advies-rij { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 34px 0; }
.advies h2 { color: #fff; text-transform: uppercase; font-size: 22px; margin-bottom: 6px; }
.advies .tekst p { margin: 0; }
.advies .tekst a { color: #fff; }
.advies .knop { flex: none; margin: 0; }

/* Planning */
.planning-lijst { display: grid; gap: 16px; }
.pl-item { display: grid; grid-template-columns: 170px 1fr auto; gap: 22px; align-items: start; background: #fff;
  border: 1px solid rgba(6,27,161,.06); border-radius: 10px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(0,30,80,.06), 0 8px 24px rgba(0,30,80,.10); }
.pl-datum { font-family: Ubuntu, sans-serif; font-weight: 700; color: var(--blauw); font-size: 18px; line-height: 1.3; }
.pl-datum span { display: block; font-weight: 400; font-size: 14px; color: var(--grijs); }
.pl-inhoud h2 { font-size: 20px; text-transform: none; margin: 0 0 4px; }
.pl-inhoud h2 a { text-decoration: none; }
.pl-regel { margin: 0 0 8px; font-size: 15px; }
.label { display: inline-block; margin-left: 6px; padding: 1px 8px; font-size: 12px; font-weight: 700; border-radius: 3px; background: #FFF0C2; color: #7A4B00; }
.pl-programma summary { cursor: pointer; color: var(--blauw); font-family: Ubuntu, sans-serif; font-weight: 500; font-size: 14px; }
.pl-dag { margin: 10px 0 0; font-size: 14px; }
.pl-dag ul { margin: 4px 0 0; padding-left: 0; list-style: none; }
.pl-dag li { margin: 2px 0; }
.pl-tijd { display: inline-block; min-width: 100px; color: var(--grijs); }
.pl-wie { color: #6B7090; }
.pl-knop { margin: 0; white-space: nowrap; }
.pl-kop { margin-top: 40px; text-transform: uppercase; font-size: 22px; }
.pl-rol { padding-left: 20px; }
/* De Academy (11-11-2026): kernwaarden als rij met stempel, om en om. */
main h2.academy-belofte { color: var(--oranje, #F77916); text-transform: none; font-size: 26px; margin: 34px 0 6px; }
.academy-rij { display: grid; grid-template-columns: 220px 1fr; gap: 34px; align-items: center; padding: 26px 0; }
.academy-rij.om { grid-template-columns: 1fr 220px; }
.academy-rij.om .academy-stempel { order: 2; }
.academy-stempel { text-align: center; }
.academy-stempel img { width: 150px; height: 150px; object-fit: contain; display: block; margin: 0 auto 8px; }
main .academy-stempel h3 { font-size: 24px; color: var(--blauw); text-transform: none; margin: 0; }
.academy-rij .tekst p:last-child { margin-bottom: 0; }
@media (max-width: 680px) { .academy-rij, .academy-rij.om { grid-template-columns: 1fr; gap: 12px; padding: 18px 0; } .academy-rij.om .academy-stempel { order: 0; } .academy-stempel img { width: 110px; height: 110px; } }
/* Filter en status op de planning (11-11-2026). */
.pl-filter { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; margin: 0 0 14px; }
.pl-filter label { display: flex; flex-direction: column; gap: 4px; font: 500 13px Ubuntu, sans-serif; color: var(--blauw); }
.pl-filter select { min-width: 220px; padding: 9px 10px; border: 1px solid var(--lijn); border-radius: 6px; font: 15px "Open Sans", sans-serif; color: var(--grijs); background: #fff; }
.pl-wissen { font-size: 14px; padding-bottom: 10px; }
.pl-legenda { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; }
.pl-aantal { font-size: 14px; margin: 0 0 14px; }
.status { display: inline-block; padding: 2px 9px; border-radius: 3px; font: 700 12px Ubuntu, sans-serif; letter-spacing: .02em; }
.pl-inhoud .status { margin-bottom: 6px; }
.status-definitief { background: #E3F4EA; color: #1F6B3E; }
.status-gepland { background: #FFF0C2; color: #7A4B00; }
.status-concept { background: #E6EEFC; color: #0E3FA8; }
@media (max-width: 680px) { .pl-filter select { min-width: 0; width: 100%; } .pl-filter label { width: 100%; } }

/* Docenten */
.docenten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.docent-kaart { display: block; text-align: center; padding: 26px 22px 22px; border-radius: 10px; background: #fff; color: var(--grijs);
  text-decoration: none; border: 1px solid rgba(6,27,161,.06); box-shadow: 0 1px 2px rgba(0,30,80,.06), 0 8px 24px rgba(0,30,80,.10); transition: box-shadow .15s; }
.docent-kaart:hover { box-shadow: 0 2px 4px rgba(0,30,80,.08), 0 14px 36px rgba(0,30,80,.16); }
.docent-kaart h3 { font-size: 19px; color: var(--blauw); margin: 12px 0 4px; }
.docent-fotos { display: flex; justify-content: center; gap: 10px; }
.docent-fotos img, .docent-geen-foto { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.docent-geen-foto { display: flex; align-items: center; justify-content: center; background: var(--licht); color: var(--blauw);
  font: 700 28px Ubuntu, sans-serif; }
.docent-fotos.groot { justify-content: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.docent-fotos.groot img { width: 180px; height: 180px; }
.docent-functie { font-size: 14px; margin: 0 0 8px; }
.docent-trainingen { font-size: 13px; color: #6B7090; margin: 0 0 8px; }
.docent-kaart .meer { font-family: Ubuntu, sans-serif; font-weight: 500; color: var(--blauw); font-size: 14px; }
.docent-pagina { display: grid; grid-template-columns: 260px 1fr; gap: 44px; align-items: start; }
.docent-zij .docent-functie { font-size: 15px; }
.docent-trainingslijst { display: grid; gap: 10px; }
.docent-trainingslijst a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--lijn); border-radius: 8px;
  text-decoration: none; font-family: Ubuntu, sans-serif; font-weight: 500; }
.docent-trainingslijst a:hover { border-color: var(--s4); }
.docent-trainingslijst img { width: 40px; height: 40px; border-radius: 6px; }

/* Contact */
.contact { display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: start; }
.formulier { display: grid; gap: 16px; max-width: 760px; }
.formulier label { display: grid; gap: 5px; font-family: Ubuntu, sans-serif; font-weight: 500; font-size: 14px; color: var(--diep); }
.formulier input[type=text], .formulier input[type=email], .formulier input[type=tel], .formulier select, .formulier textarea {
  font: 16px 'Open Sans', sans-serif; color: var(--grijs); padding: 10px 12px; border: 1px solid #c9cfdf; border-radius: 5px; width: 100%; background: #fff; }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { outline: 3px solid rgba(78,145,237,.35); border-color: var(--s4); }
.formulier .velden { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.formulier .breed { grid-column: 1 / -1; }
.formulier .keuzes { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.formulier .keuzes legend { font-family: Ubuntu, sans-serif; font-weight: 500; color: var(--diep); margin-bottom: 8px; }
.formulier .keuzes label { display: flex; gap: 10px; align-items: center; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 16px; color: var(--grijs); }
.formulier .knop { justify-self: start; border: 0; cursor: pointer; }
.formulier .incompany, .formulier .alleen-incompany { display: none; }
.formulier.is-incompany .incompany { display: grid; }
.formulier.is-incompany .alleen-incompany { display: inline; }
.formulier.is-incompany .niet-incompany { display: none; }
.verborgen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.melding-goed { background: #E7F6EE; border-left: 4px solid #1F9254; border-radius: 6px; padding: 18px 22px; }
.melding-goed h2 { text-transform: none; font-size: 21px; margin-bottom: 6px; }
.melding-fout { background: #FBE9EB; border-left: 4px solid #D64550; border-radius: 6px; padding: 12px 18px; margin-bottom: 18px; }

/* Voorwaarden */
.vw-balk { display: flex; justify-content: flex-end; margin: 22px 0 4px; }
.vw-alles { margin: 0; cursor: pointer; background: transparent; }
.vw-deel { border-bottom: 1px solid var(--lijn); }
.vw-deel:first-of-type { border-top: 1px solid var(--lijn); }
.vw-deel summary { list-style: none; cursor: pointer; padding: 14px 34px 14px 0; position: relative;
  font: 500 19px Ubuntu, sans-serif; color: var(--blauw); }
.vw-deel summary::-webkit-details-marker { display: none; }
.vw-deel summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font: 500 24px Ubuntu, sans-serif; color: var(--oranje); }
.vw-deel[open] summary::after { content: "\2212"; }

@media (max-width: 860px) {
  .twee-kolom { grid-template-columns: 1fr; gap: 24px; }
  .advies .advies-rij { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pl-item { grid-template-columns: 1fr; gap: 8px; }
  .pl-knop { justify-self: start; }
  .docenten { grid-template-columns: 1fr; }
  .docent-pagina { grid-template-columns: 1fr; gap: 20px; }
  .docent-fotos.groot img { width: 140px; height: 140px; }
  .contact { grid-template-columns: 1fr; gap: 26px; }
  .formulier .velden { grid-template-columns: 1fr; }
  .nav { padding: 12px 16px; flex-wrap: wrap; }
  .nav img { height: 38px; }
  .menuknop { display: inline-block; }
  .nav nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 14px; padding: 8px 0 6px; }
  .nav nav.open { display: flex; }
  .binnen { padding-left: 16px; padding-right: 16px; }
  .held .inhoud { padding: 30px 0 50px; }
  .held h1 { font-size: 30px; }
  .donker .punten, .kaarten, .waarden .rij { grid-template-columns: 1fr; }
  .donker .punten { gap: 12px; }
  .voet .binnen { grid-template-columns: 1fr; gap: 16px; }
  .band h1 { font-size: 23px; }
  .band .terug { display: none; }
  .sectie { padding-top: 36px; padding-bottom: 36px; }
}

/* Het jasje: pagina's van Mijn Academy (aanmelden e.d.) in de opmaak van de website (11-11-2026). */
body.jasje { background: #fff; }
.jasje-inhoud { max-width: none; }
.jasje-inhoud h2.jasje-kop { font-size: 24px; text-transform: none; color: var(--blauw); margin: 0 0 14px; }
.jasje-inhoud .kaart { box-shadow: 0 1px 2px rgba(0,30,80,.06), 0 8px 24px rgba(0,30,80,.10); border: 1px solid rgba(6,27,161,.06); }