/* ===========================================================================
 * style-bs5.css — Bootstrap 5 override-/theming-laag (Backoffice)
 * ---------------------------------------------------------------------------
 * Geladen NA bootstrap.min.css (BS5) en style.css. Doel: de bestaande
 * merk-identiteit herstellen bovenop Bootstrap 5 zonder Sass/build.
 *
 * FASE 1 (frame): merk-tokens + een paar veilige basis-overrides.
 * FASE 5 zal dit uitbreiden: knop-kleuren, badges, tabel-rij-kleuren per
 * alert-class, en de modal-backdrop z-index herzien.
 * ======================================================================== */

:root {
    /* Merk-tokens (bron: style.css) */
    --bw-geel: #f0b62a;     /* primair accent: actieve sidebar-border, highlights */
    --bw-cyaan: #71ceff;    /* navbar active underline */
    --bw-sidebar: #464646;  /* sidebar / pageHead donker */
    --bw-footer: #1a1a1a;
    --bw-body-bg: #FCFCFC;
    --bw-tekst: #7d7d7d;

    /* Koppeling aan Bootstrap 5 runtime-variabelen waar deze effect hebben */
    /* Primair = het oude BS3-blauw (knoppen/links/active waren blauw; het goud
     * #f0b62a is een ACCENT dat style.css direct gebruikt voor de sidebar). */
    --bs-primary: #337ab7;
    --bs-primary-rgb: 51, 122, 183;
    --bs-link-color: #337ab7;
    --bs-link-color-rgb: 51, 122, 183;
    --bs-link-hover-color: #23527c;
    --bs-body-bg: var(--bw-body-bg);
    --bs-body-color: var(--bw-tekst);
    --bs-body-font-family: "Open Sans", sans-serif;
    --bs-body-font-size: 14px;

    /* BS5 verdeelt tekstkleur over een FAMILIE tokens: alleen --bs-body-color
     * dekt de solide tekst, maar opacity-gebaseerde tekst (labels gebruiken
     * rgba(--bs-body-color-rgb,.65)) en emphasis (<strong>/<b>/<th> ->
     * --bs-emphasis-color = #000) bleven op BS5's bijna-zwart. Het oude design
     * was overal één grijstint; daarom de hele familie op het grijs verankeren. */
    --bs-body-color-rgb: 125, 125, 125;            /* #7d7d7d */
    --bs-emphasis-color: #5a5a5a;                  /* iets donkerder grijs i.p.v. zwart */
    --bs-emphasis-color-rgb: 90, 90, 90;
    --bs-secondary-color: rgba(125, 125, 125, 0.75);
    --bs-secondary-color-rgb: 125, 125, 125;
    --bs-tertiary-color: rgba(125, 125, 125, 0.5);
}

/* BS5 Reboot zet h1..h6 margins/gewicht anders; het custom frame (header h1,
 * pageHead h2) wordt al door style.css gestuurd. Hier alleen een vangnet zodat
 * de absolute-gepositioneerde layout niet door Reboot-marges verschuift. */
body {
    background-color: var(--bw-body-bg);
}

/* BS5 Reboot zet h1 margin-top:0; BS3 gaf 20px en daarmee stond de titel
 * verticaal gecentreerd in de 70px-header. style.css zet alleen margin-left,
 * dus herstel hier de top-marge. */
header h1 {
    margin-top: 20px;
    margin-bottom: 0;
}

/* --- Fase 3 (deel 2): compat-laag voor BS3 formulier-/input-group-classes ---
 * In plaats van ~960 risicovolle markup-renames (control-label/form-group/
 * help-block/has-error) houden we de BS3-classes en geven ze BS5-gedrag.
 * Native BS5-form-classes kunnen later als geverifieerd vervolg. */

/* form-group gaf in BS3 onderlinge afstand; BS5 kent de class niet meer */
.form-group {
    margin-bottom: 1rem;
}

/* In BS3 was een horizontaal-form .form-group ook een .row die zijn gefloate
 * label/veld-kolommen clearde. Met de float-grid-compat hierboven zweven die
 * kolommen weer, dus de form-group moet ze clearen - anders lopen labels en
 * velden van opeenvolgende rijen door elkaar (label rechts van het veld). */
.form-group::after {
    display: block;
    clear: both;
    content: "";
}

/* labels (style.css zet al font-weight:500) */
.control-label {
    margin-bottom: .25rem;
}

/* horizontale forms: label uitlijnen met het invoerveld i.p.v. afstand eronder */
.form-horizontal .control-label {
    margin-bottom: 0;
    padding-top: calc(.375rem + 1px);
}

/* Invoervelden: BS5 zet .form-control/.form-select/.input-group-text op
 * font-size:1rem (16px), terwijl de reguliere tekst --bs-body-font-size (14px)
 * is. Daardoor oogde invoertekst groter dan normale tekst. Terugbrengen naar de
 * body-tekstgrootte. De -sm/-lg-varianten uitgesloten zodat die hun eigen maat
 * houden (.form-control-sm wordt o.a. in enkele views gebruikt). */
.form-control:not(.form-control-sm):not(.form-control-lg),
.form-select:not(.form-select-sm):not(.form-select-lg),
.input-group-text {
    font-size: var(--bs-body-font-size);
}

/* help-block -> uiterlijk van BS5 .form-text */
.help-block {
    display: block;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--bs-secondary-color, #6c757d);
}

/* has-error -> BS5 validatie-kleuren (was BS3 form-group-state) */
.has-error .form-control {
    border-color: #dc3545;
}
.has-error .control-label,
.has-error .help-block,
.has-error label {
    color: #dc3545;
}

/* BS5 verwacht knoppen direct in .input-group; maak de oude wrapper
 * 'doorzichtig' zodat de knop een flex-kind van .input-group wordt */
.input-group-btn {
    display: contents;
}

/* Header-zoekvak: BS5 .input-group heeft flex-wrap:wrap, waardoor de "Zoek"-knop
 * op smalle (mobiele) schermen onder het veld valt. BS3 (display:table) wrapte
 * nooit; nowrap herstelt dat - het tekstveld (min-width:0) krimpt dan netjes. */
.search .input-group {
    flex-wrap: nowrap;
}

/* --- Fase 5: links, knop-kleur, paginator, float-grid compat --- */

/* BS3-achtige links: blauw, geen underline standaard, wel bij hover.
 * .btn uitgesloten zodat link-knoppen niet onderstreept worden. */
a {
    text-decoration: none;
}
a:not(.btn):hover {
    text-decoration: underline;
}

/* .btn-primary terug naar het oude BS3-blauw (BS5.3 gebruikt eigen --bs-btn-*
 * en luistert dus niet naar --bs-primary). */
.btn-primary {
    --bs-btn-bg: #337ab7;
    --bs-btn-border-color: #337ab7;
    --bs-btn-hover-bg: #2e6da4;
    --bs-btn-hover-border-color: #2b669a;
    --bs-btn-active-bg: #2b669a;
    --bs-btn-active-border-color: #2b669a;
    --bs-btn-disabled-bg: #337ab7;
    --bs-btn-disabled-border-color: #337ab7;
}

/* btn-light (= de oude btn-default) viel te veel weg op de lichte achtergrond.
 * Terug naar wit met een duidelijke grijze rand voor meer contrast.
 * Ook .btn-default zelf meenemen: 19 PHP Form-classes zetten nog 'btn btn-default'
 * (de codemod raakte alleen .phtml), en btn-default is ongestyled in BS5. */
.btn-light,
.btn-default {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #ccc;
    --bs-btn-color: #333;
    --bs-btn-hover-bg: #e6e6e6;
    --bs-btn-hover-border-color: #adadad;
    --bs-btn-hover-color: #333;
    --bs-btn-active-bg: #e6e6e6;
    --bs-btn-active-border-color: #adadad;
    --bs-btn-active-color: #333;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #ccc;
    --bs-btn-disabled-color: #333;
}

/* Antwoord-/status-knoppen (vragen, packages, aangepastemail): uniforme breedte
 * en het label altijd op 1 regel. Deze groepen herken je aan een eigen
 * style="width:..." (label + ?-icoonknop). Enkele actie-knoppen (Wijzigingen
 * opslaan, Antwoord mailen, ...) zijn ook role="group" maar zonder width-style;
 * die laten we met rust (houden hun eigen breedte). */
.btn-group[role="group"][style*="width"] {
    width: 170px !important;
}
.btn-group[role="group"][style*="width"] > .btn {
    width: auto !important;
    white-space: nowrap;
}
.btn-group[role="group"][style*="width"] > .btn:last-child {
    flex: 0 0 auto;
}
/* Engelse-antwoorden-modal: knoppen naast elkaar als raster i.p.v. 1 kolom */
#ENGmodal .btn-group[role="group"] {
    margin: .25rem;
}

/* Compacter packages-stap-2 formulier (alleen deze pagina): kleinere onderlinge
 * afstand, geen extra top-marge en lagere invoervelden -> minder hoog. */
form[name="addpackage"] .form-group {
    margin-bottom: .35rem;
}
form[name="addpackage"] .zevenpxtop {
    margin-top: 0;
}
form[name="addpackage"] .form-control,
form[name="addpackage"] .form-select {
    padding-top: .2rem;
    padding-bottom: .2rem;
}

/* bwdetails - Afwezigheidsmodus: vanaf/tot compact en naast elkaar */
.afwezigheid-periode {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}
.afwezigheid-periode .form-group {
    margin-bottom: .5rem;
}
.afwezigheid-periode input {
    width: 150px;
}

/* --- Paginator-compat ---
 * De ~35 paginator-partials gebruiken nog BS3-markup
 * (<ul class="pagination"><li [class=active|disabled]><a>) zonder de BS5-
 * classes .page-item/.page-link. Hieronder krijgt die markup het BS5-uiterlijk. */
.pagination > li > a,
.pagination > li > span {
    position: relative;
    display: block;
    padding: .375rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: var(--bs-link-color);
    background-color: #fff;
    border: 1px solid #dee2e6;
    text-decoration: none;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
    margin-left: 0;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.pagination > li > a:hover {
    background-color: #e9ecef;
    text-decoration: none;
}
.pagination > li.active > a,
.pagination > li.active > span {
    z-index: 1;
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.pagination > li.disabled > a,
.pagination > li.disabled > span {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

/* --- BS3 float-grid compat ---
 * Deze app nestte kolommen vaak direct in een col-md-12 zonder .row-wrapper en
 * leunde op de float van BS3-kolommen. BS5-kolommen zijn flex-items zonder
 * float -> die kolommen vielen onder elkaar. We zetten de float terug: in een
 * echte .row negeren flex-items de float (geen effect), 'losse' kolommen vallen
 * weer naast elkaar zoals voorheen. .sectie heeft overflow:auto (BFC) en bevat
 * dus de floats; geneste gefloate kolommen bevatten elkaar onderling. */
[class^="col-"],
[class*=" col-"] {
    float: left;
    /* BS3-kolommen hadden zelf horizontale padding (~15px); BS5 zet die padding
     * via .row op de kinderen, dus 'losse' kolommen (zonder .row) plakten tegen
     * elkaar. Hiermee krijgen ze weer tussenruimte. */
    padding-right: .75rem;
    padding-left: .75rem;
}
.row > [class^="col-"],
.row > [class*=" col-"] {
    float: none;
    /* in een echte .row de gutter respecteren zodat .g-0/.gx-* blijft werken */
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}
/* Kolom-classes worden soms op tabelcellen gebruikt (BS3-breedtehint). Die mogen
 * NIET floaten - anders vallen de <th>'s uit de tabel-layout en staan ze niet
 * boven de kolommen. Breedte-hint blijft; celpadding gelijk aan andere cellen. */
th[class^="col-"], th[class*=" col-"],
td[class^="col-"], td[class*=" col-"] {
    float: none;
    padding-right: .5rem;
    padding-left: .5rem;
}
/* Onder hun breakpoint hebben col-{sm,md,lg,xl}-* geen breedte (BS5); dan ook
 * niet floaten -> volle-breedte block dat netjes stapelt (zoals BS3 op mobiel).
 * Bare col-N (zonder breakpoint) houdt altijd zijn float/breedte. */
@media (max-width: 575.98px) {
    [class^="col-sm-"], [class*=" col-sm-"] { float: none; }
}
@media (max-width: 767.98px) {
    [class^="col-md-"], [class*=" col-md-"] { float: none; }
}
@media (max-width: 991.98px) {
    [class^="col-lg-"], [class*=" col-lg-"] { float: none; }
}
@media (max-width: 1199.98px) {
    [class^="col-xl-"], [class*=" col-xl-"] { float: none; }
}

/* --- BS3 .hidden/.hide utility (verwijderd in BS5) ---
 * BS5 kent .hidden/.hide niet meer, waardoor bewust-verborgen elementen
 * zichtbaar werden (o.a. <input class="hidden"> helpers en
 * <div class="form-group hidden"> conditionele formuliersecties in bwextraabo). */
.hidden,
.hide {
    display: none !important;
}

/* Kale icon-knoppen (<button class="fa ..."> zonder .btn) hadden de standaard
 * browser-knop-rand ("dikke border"); hier teruggebracht tot enkel het icoon. */
button.fa:not(.btn) {
    padding: 0 .25rem;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}
button.fa:not(.btn):hover {
    color: var(--bs-link-color);
}

/* Headings binnen de content terug naar de BS3-schaal: BS5 maakt ze groter en
 * zet margin-top:0, wat de hiërarchie rommelig maakte. Frame-headings
 * (.pageHead h2, header h1) blijven via style.css ongemoeid (hogere
 * specificiteit), dus dit raakt alleen de pagina-inhoud. */
.content h1 { font-size: 33px; }
.content h2 { font-size: 28px; }
.content h3 { font-size: 24px; }
.content h4 { font-size: 18px; }
.content h5 { font-size: 14px; }
.content h6 { font-size: 12px; }
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    margin-top: 1.25rem;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}

/* --- Tabel-rij-kleuren ---
 * BS5 schildert elke cel met var(--bs-table-bg) en overschrijft daarmee een
 * achtergrondkleur die op de <tr> staat. De BS3-contextklassen
 * (.info/.success/.danger/.warning/.active) bestaan niet meer, en de app-eigen
 * status-rijen (.betaald/.transactienummer uit style.css) verdwenen zo ook.
 * Door --bs-table-bg op de rij te zetten werkt de kleur weer mee met BS5
 * (inclusief table-hover). Kleuren = de oude BS3-/style.css-waarden. */
.table tr.info    { --bs-table-bg: #d9edf7; }
.table tr.success { --bs-table-bg: #dff0d8; }
.table tr.danger  { --bs-table-bg: #f2dede; }
.table tr.warning { --bs-table-bg: #fcf8e3; }
.table tr.active  { --bs-table-bg: #f5f5f5; }
.table tr.betaald          { --bs-table-bg: #FFCC33; }  /* style.css */
.table tr.transactienummer { --bs-table-bg: #FFE680; }  /* style.css */
/* index-checklist: rij groen (aangevinkt) / rood (niet). De <tr> krijgt
 * bg-success/bg-danger + inline color via checklist.js, maar BS5 schildert cel-
 * achtergrond EN -tekstkleur via .table>*>*. Daarom hier --bs-table-bg + -color
 * op de rij (lichte BS3-tinten zodat de tekst leesbaar blijft). */
.table tr.bg-success { --bs-table-bg: #dff0d8; --bs-table-color: green; }
.table tr.bg-danger  { --bs-table-bg: #f2dede; --bs-table-color: red; }
/* Gegevenscheck-balk (boekstra/wijzig): .greentd/.redtd staan op een lege <td>
 * en zetten in style.css alleen background-color, wat BS5 met var(--bs-table-bg)
 * overschrijft. Daarom hier dezelfde --bs-table-bg-aanpak op celniveau. */
.table td.greentd { --bs-table-bg: green; }
.table td.redtd   { --bs-table-bg: red; }

/* BS5 zet celtekstkleur via .table>:not(caption)>*>* (specificiteit 0,0,1,1) en
 * overschrijft daarmee custom kleur-classes die DIRECT op een <td>/<th> staan
 * (o.a. .bsfactuurdetailserror -> de "Numeriek splitsen met een *"-melding, en
 * .redtext). Binnen .table weer afdwingen met iets hogere specificiteit. */
.table .bsfactuurdetailserror { color: #c10800; }
.table .redtext    { color: red; }
.table .greentext  { color: green; }
.table .bluetext   { color: blue; }
.table .purpletext { color: purple; }

/* BS3 .table-condensed -> BS5 .table-sm (compacte celpadding) */
.table-condensed > :not(caption) > * > * {
    padding: .25rem;
}

/* --- Card/well-uiterlijk ---
 * BS3 .well was een grijs kader; in Fase 3 werd 'well' -> 'card card-body'
 * (beide classes op HETZELFDE element). Daarmee kunnen we de well-grijstint
 * gericht herstellen zonder echte cards te raken (waar .card-body een KIND is).
 * Inline background-styles in sommige views winnen en blijven dus intact.
 * Daarnaast onder-marge terug die BS3 panel/well wel had en BS5 .card niet. */
.card {
    margin-bottom: 1rem;
}
.card.card-body {
    /* Voormalige .well was een gewoon block; BS5 .card is flex/column, waardoor
     * inline-inhoud en gefloate col-grids erin stapelen. flow-root herstelt het
     * block-gedrag (en bevat de floats binnen de box). */
    display: flow-root;
    background-color: #f5f5f5;
}

/* bwoverzicht: de "X boekwinkeltjes gevonden"-box was een .well met margin-top
 * (style.css .bwoverzichtknoppen > .well). Na de well->card-migratie matchte die
 * regel niet meer -> ruimte boven de box / onder de btn-group viel weg. Hersteld
 * voor .card (geldt voor alle pageid-tabs: aangemeld/aangepast/aandacht/blokkade). */
.bwoverzichtknoppen > .card {
    margin-top: 30px;
}

/* .modal-backdrop: style.css forceert z-index 102 (BS3-era "fix"). Dit werkt in
 * BS5: .content/.sectie vormen geen stacking-context, dus de modal (z-index
 * 1055) komt boven de backdrop (102) en boven de pagina (<=101). Bewust NIET
 * gewijzigd om de werkende modals niet te breken. */

/* --- Fase 6: resterende BS3-only componenten (compat-shims) --- */

/* BS3 .caret-driehoekje. BS5 genereert zelf een caret via
 * .dropdown-toggle::after, dus binnen een toggle verbergen we de losse span
 * (anders dubbele caret); losse carets (bv. collapse-toggles) blijven zichtbaar. */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.dropdown-toggle .caret {
    display: none;
}

/* BS3 .thumbnail (omkaderde afbeelding) - verwijderd in BS5 */
.thumbnail {
    display: inline-block;
    padding: 4px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.thumbnail > img {
    max-width: 100%;
    height: auto;
}

/* BS3 .dl-horizontal - verwijderd in BS5 */
@media (min-width: 768px) {
    .dl-horizontal dt {
        float: left;
        width: 160px;
        clear: left;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dl-horizontal dd {
        margin-left: 180px;
    }
}

/* BS3 .btn-block (volle-breedte knop) - verwijderd in BS5 (daar: .d-grid/.w-100) */
.btn-block {
    display: block;
    width: 100%;
}
.btn-block + .btn-block {
    margin-top: 5px;
}

/* BS3 .checkbox/.radio wrappers - verwijderd in BS5 (daar: .form-check) */
.checkbox,
.radio {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}
.checkbox label,
.radio label {
    margin-bottom: 0;
    padding-left: 20px;
    font-weight: 400;
}
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
    position: absolute;
    margin-left: -20px;
}

/* BS3 gaf selectievakjes/radio's vaak class="form-control" (zo staan ze nog in
 * veel Form-classes, o.a. 'samengesteld' en 'status'). In BS5 maakt .form-control
 * er een block-veld van met width:100%, min-height, padding EN appearance:none -
 * daardoor verdwijnt het vinkje en lijkt het veld niet aanklikbaar. Voor deze
 * input-types de .form-control-opmaak terugdraaien naar een normaal vakje. */
input[type="checkbox"].form-control,
input[type="radio"].form-control {
    display: inline-block;
    width: auto;
    min-height: 0;
    padding: 0;
    vertical-align: middle;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

/* --- Mobiel offcanvas-menu (Fase 6) ---
 * Desktop-sidebar (.menuBar) blijft ongewijzigd; dit stuurt alleen de hamburger
 * en het offcanvas dat de bestaande submenu-partial hergebruikt (met geprefixte
 * ID's). De desktop-specifieke .sideSub-styling (fixed positionering, breedte-
 * reveal) wordt binnen #mobileMenu uitgeschakeld zodat het een verticale lijst is. */
.hamburger-mobile {
    float: left;
    height: 70px;
    padding: 0 .9rem;
    border: 0;
    background: none;
    color: var(--bw-sidebar);
    font-size: 1.5rem;
    line-height: 70px;
    cursor: pointer;
}

/* Zoekveld in het offcanvas: de header-.search is smal/float-right; hier vol */
#mobileMenu .search {
    float: none;
    width: auto;
    max-width: none;
    padding: 0;
    margin-bottom: 1rem;
}

#mobileMenu .mobileMenu-cats {
    margin: 0;
}
#mobileMenu .mobileMenu-cats > li > a {
    display: flex;
    align-items: center;
    gap: .6em;
    padding: .65rem .25rem;
    color: var(--bw-sidebar);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
#mobileMenu .mobileMenu-cats > li > a .fa {
    width: 1.4em;
    text-align: center;
}
#mobileMenu .mobileMenu-cats img {
    max-width: 20px;
    height: auto;
}

/* --- Drill-down gedrag mobiel menu ---
 * Niveau 1 = categorieën, niveau 2 = sub-items van de gekozen categorie met een
 * terug-knop. Standaard niveau 1; .drill schakelt naar niveau 2. */
#mobMenuBody {
    position: relative;
}
#mobMenuBody .mobmenu-level2 {
    display: none;
}
#mobMenuBody.drill .mobmenu-level1 {
    display: none;
}
#mobMenuBody.drill .mobmenu-level2 {
    display: block;
}
/* submenu-panelen: desktop fixed/width-reveal uit; alleen het actieve paneel tonen */
#mobileMenu #msubMenus {
    margin-left: 0;
}
#mobileMenu .sideSub {
    display: none;
    position: static;
    width: auto;
    opacity: 1;
}
#mobileMenu .sideSub.drill-active {
    display: block;
}
#mobileMenu .sideSub > ul {
    position: static;
    width: auto;
}
.mobmenu-back {
    display: block;
    width: 100%;
    padding: .5rem .25rem;
    margin-bottom: .5rem;
    text-align: left;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    background: none;
    font-weight: 600;
    color: var(--bw-sidebar);
    cursor: pointer;
}

/* Mobiel (< lg): de desktop-zijbalk is vervangen door het hamburger-offcanvas.
 * Verberg de zijbalk en haal de zijbalk-offset van content/pageHead weg, zodat
 * de pagina de volle breedte krijgt. Desktop (>= lg) blijft ongewijzigd. */
@media (max-width: 991.98px) {
    .menuBar {
        display: none;
    }
    .content {
        margin-left: 0;
    }
    .pageHead {
        left: 0;
    }
}