/* ===========================================================================
   Visual builder -- frontend
   ---------------------------------------------------------------------------
   Alles staat onder .bs (builder section), los van het oude skel-grid uit
   style.css/skel.min.js. Zo kan deze stylesheet nooit bestaande pagina's raken.
   Zie docs/visual-builder.md.

   LET OP -- het grootste verschil met de Hanskloosterman-versie waar deze
   vandaan komt: die site is van zichzelf DONKER (witte tekst op #2b2d2f), deze
   is LICHT (donkergrijze tekst op #f0f0f0, inhoud op wit). Een sectie zonder
   eigen achtergrond krijgt hier dus `.bs--onlight` en niet `.bs--ondark`.
   Zie builder::isDark() -- die drie plekken horen bij elkaar.
   =========================================================================== */

:root {
	/* Palet -- overgenomen uit css/style.css, de huidige huisstijl. */
	--bs-gold:       #967c57;   /* primair accent: knoppen, links       */
	--bs-gold-light: #b98e51;   /* hover                                */
	--bs-coral:      #ed786a;   /* active, spaarzaam accent             */
	--bs-white:      #ffffff;
	--bs-sand:       #f7f7f7;   /* rustig achtergrondvlak               */
	--bs-light:      #f0f0f0;   /* de paginakleur zelf                  */
	--bs-border:     #e5e5e5;   /* lijnen en randen                     */
	--bs-grey:       #878787;   /* koppen                               */
	--bs-text:       #777777;   /* lopende tekst                        */
	--bs-dark:       #555555;   /* donkere tekst, nadruk                */

	/* Afstandsschaal tussen secties. */
	--bs-sp-none:   0rem;
	--bs-sp-small:  1.5rem;
	--bs-sp-normal: 3.5rem;
	--bs-sp-large:  5.5rem;
	--bs-sp-xlarge: 8rem;

	/* WhatsApp-icoon voor .bs__button--whatsapp, als masker zodat het de
	   kleur van de knop volgt. */
	--bs-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.12-.41-2.13-1.32-.79-.7-1.32-1.57-1.47-1.87-.15-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.21-.24-.58-.48-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.47 1.06 2.88 1.21 3.08.15.2 2.09 3.34 5.08 4.55.71.29 1.26.46 1.69.59.71.22 1.36.19 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.42-.07-.12-.27-.2-.57-.35zM12.05 21.8h-.01a9.75 9.75 0 0 1-4.96-1.36l-.36-.21-3.69.97.99-3.6-.23-.37a9.73 9.73 0 0 1-1.49-5.19c0-5.38 4.38-9.76 9.77-9.76a9.7 9.7 0 0 1 6.9 2.86 9.68 9.68 0 0 1 2.86 6.9c0 5.39-4.39 9.76-9.78 9.76zM12.05 0h-.01C5.4 0 0 5.4 0 12.04c0 2.12.55 4.2 1.6 6.03L0 24l6.09-1.6a12 12 0 0 0 5.95 1.56h.01c6.64 0 12.04-5.4 12.04-12.04A11.96 11.96 0 0 0 12.05 0z'/%3E%3C/svg%3E");

	/*  De site houdt zijn container op 1200px (skel, breedte-instelling in
	    js/config.js). De builder blijft daar net iets binnen, zodat een sectie
	    op volle breedte zichtbaar breder is dan een gewone. */
	--bs-container: 1160px;
	--bs-gap:       2.5rem;

	/*  Knoppen en kaarten volgen de ronding van `.button` in css/style.css. */
	--bs-radius:    4px;

	/*  Ruimte onder een kop. Bewust in rem en niet in em: css/style.css zet
	    koppen op `font-weight: 600` met `text-transform: uppercase` maar laat de
	    grootte grotendeels op 1em staan, dus valt een marge in em onverwacht
	    klein uit.

	    1rem is hier 16 px (de <html>-grootte); de lopende tekst staat op 13pt.
	    Onderstaande waarden komen neer op 32 px onder een sectietitel en 24 px
	    onder een kop in een tekstblok. */
	--bs-title-gap:   2rem;     /* onder een sectietitel        -> 32 px */
	--bs-heading-gap: 1.5rem;   /* onder een kop in een blok    -> 24 px */
	--bs-item-gap:    0.75rem;  /* onder een kopje in een kaart -> 12 px */

	/*  Letterafstand van koppen. css/style.css zet die op de site zelf per
	    breakpoint (2px op mobiel, 4px op desktop); hier één waarde, want de
	    builder heeft zijn eigen koppenschaal. */
	--bs-heading-track: 2px;
}

@media screen and (max-width: 736px) {
	:root {
		--bs-sp-small:  1rem;
		--bs-sp-normal: 2.25rem;
		--bs-sp-large:  3.25rem;
		--bs-sp-xlarge: 4.5rem;
		--bs-gap:       1.75rem;
	}
}


/* ---------------------------------------------------------------------------
   Terugzetten wat css/style.css op losse elementen zet
   ---------------------------------------------------------------------------
   Dit blok bestaat niet in de Hanskloosterman-versie waar deze stylesheet
   vandaan komt: die site laat elementen grotendeels met rust. css/style.css
   (Strongly Typed van HTML5 UP) doet dat wél, en die regels lekken zonder meer
   de secties in. Vier daarvan vielen meteen op:

     - `p { text-align: justify }`   -> alle tekst uitgevuld, ook in een smalle
                                        kolom, met rafelige woordafstanden;
     - `blockquote { ... }` plus `blockquote:before/after { content: open-quote }`
                                     -> een wit vlak en een tweede paar
                                        aanhalingstekens over die van
                                        `.bs__quote::before` heen;
     - `section, article { margin-bottom: 3em }`
                                     -> extra ruimte onder elke sectie én onder
                                        elke kaart, bovenop de eigen afstand;
     - `ol, ul { list-style: none }` uit de skel-reset
                                     -> opsommingen zonder bolletjes of cijfers.

   Alles hieronder is gescopeerd op `.bs`, dus buiten de builder verandert er
   niets. Zet een nieuwe regel hier neer zodra blijkt dat style.css nog iets
   anders van buitenaf oplegt.
   --------------------------------------------------------------------------- */

/*  Uitgevulde tekst is in een kolom van 300px onleesbaar; daar horen rafelige
    woordafstanden en soms een gat midden in een regel bij.

    Let op de waarde: `inherit` en niet `left`. Met `left` zou deze regel (0,2,0)
    ook winnen van een component dat zijn inhoud centreert -- `.bs__teammember`
    (0,1,0) bijvoorbeeld -- en stond de functie van een teamlid links terwijl de
    naam erboven gecentreerd staat. Met `inherit` doet de alinea gewoon wat zijn
    omgeving doet, precies zoals zonder de regel uit style.css het geval zou
    zijn. De uitlijning die de editor zelf op een element zet, staat in een
    `style`-attribuut en wint daar altijd van. */
.bs {
	text-align: left;
}

.bs p,
.bs li {
	text-align: inherit;
}

/*  De sectie en de kaarten regelen hun eigen afstand via bs--pb-* en de grid-
    gap. De marge van style.css komt daar bovenop en maakt de afstanden
    onvoorspelbaar. */
.bs section,
.bs article,
.bs figure,
section.bs {
	margin-bottom: 0;
}

/*  De opmaak van citaten komt volledig uit dit bestand: `.bs__quote` tekent het
    aanhalingsteken met ::before, en de blockquote zelf is alleen de tekst. Wat
    style.css eraan toevoegt -- een wit vlak, een streep links, een tweede paar
    aanhalingstekens en `display: inline` op de alinea's -- moet daarvoor weg. */
.bs blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	quotes: none;
}

.bs blockquote::before,
.bs blockquote::after {
	content: none;
}

.bs blockquote p {
	display: block;
}

/*  De skel-reset zet `ol, ul { list-style: none }`. In een tekstblok hoort een
    opsomming juist wél zijn bolletje of cijfer te hebben -- daar is het een
    opsomming en geen navigatie. */
.bs__rich ul { list-style: disc outside; }
.bs__rich ol { list-style: decimal outside; }
.bs__rich li { display: list-item; }

/*  Links in lopende tekst houden de onderstreping van de site (`a { border-bottom:
    solid 1px #ddd }`), maar krijgen wel de accentkleur van de builder. Links die
    een kaart of een knop zijn hebben hun eigen regels en zetten die rand zelf uit. */
.bs__rich a {
	color: var(--bs-gold);
}

.bs--ondark .bs__rich a {
	color: var(--bs-white);
	border-bottom-color: rgba(255, 255, 255, 0.45);
}

/* ---------------------------------------------------------------------------
   Sectie: de buitenkant
   --------------------------------------------------------------------------- */

/*  css/style-desktop.css zet `#main-wrapper { padding: 2em 0 3em 0 }`, en de
    `.container` eromheen knijpt de inhoud tot 1200px. Op een builder-pagina
    bepaalt elke sectie zelf zijn afstand en zijn breedte, dus die twee zitten
    hier alleen maar in de weg: je krijgt een witte strook tussen het menu en de
    eerste sectie, en een sectie op volle breedte is dat dan niet.

    Vandaar dat templates/visual-builder.php `#main-wrapper` en de container
    helemaal weglaat en alleen `<article id="main" class="builder-main">`
    overhoudt. De regels hieronder vangen af wat er dan nog van style.css
    overheen zou kunnen komen. */
/*  De achtergrond staat op deze regel en niet op een lichtere selector
    daaronder: `#main.builder-main` weegt (1,2,0) met `.builder-page` ervoor, en
    zou een los `.builder-page .builder-main { background: … }` (0,2,0) dus
    verslaan. Dat ging in een eerdere versie mis -- de secties zonder eigen
    achtergrond stonden toen op het grijs van de pagina in plaats van op wit.

    Wit is hier de juiste kleur: op elke andere pagina staat de inhoud in
    `#main-wrapper`, en die is in css/style.css ook wit. Het grijs (#f0f0f0) is
    alleen de kleur ómheen. */
.builder-page #main.builder-main {
	padding: 0;
	margin: 0;
	width: auto;
	max-width: none;
	background: var(--bs-white);
}

.builder-main {
	overflow-x: hidden;
}

/*  De header en de footer van de site staan in een `.container`. skel zet die
    op een vaste breedte -- 1200px op desktop, 960px tussen 481 en 1200 (zie
    js/config.js) -- en css/skel-noscript.css zet daarnaast `body { min-width:
    1200px }`. Dat werkt op de rest van de site omdat die met `viewport
    width=1040` toch al uitgezoomd wordt.

    Een builder-pagina gebruikt `viewport width=device-width` (zie
    templates/visual-builder.php), en dan zou een vaste container van 960px op
    een scherm van 700px buiten beeld lopen. Vandaar dat die breedtes hier
    meebuigend gemaakt worden. Alleen op builder-pagina's: de selector weegt
    (0,2,0) tegen de (0,1,0) van skel, dus hij wint zonder dat er iets van skel
    aangepast hoeft te worden -- en geen enkele bestaande pagina merkt er iets
    van. */
.builder-page .container {
	width: auto;
	max-width: 1200px;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.builder-page body,
body.builder-page {
	min-width: 0;
}

/*  Eigen box-model binnen de secties. Met JavaScript aan zet skel.min.js dit al
    globaal (`boxModel: 'border'` in js/config.js), en zonder JavaScript doet
    css/skel-noscript.css hetzelfde -- maar allebei van buitenaf. Door het hier
    zelf te zetten rekenen de componenten altijd hetzelfde, ook als er ooit aan
    die instelling gesleuteld wordt, en blijft het beperkt tot de builder. */
.bs,
.bs *,
.bs *::before,
.bs *::after {
	box-sizing: border-box;
}

.bs {
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/*  Ruimte bij het springen naar een anker.

    Anders dan bij Hanskloosterman staat het menu van deze site NIET op
    `position: fixed` -- er komt in css/style.css, style-desktop.css en
    style-mobile.css geen enkele `position: fixed` voor. Het menu scrollt dus
    gewoon mee en dekt niets af, waardoor de compensatie die daar nodig was hier
    niet nodig is.

    Wat blijft staan is een kleine marge, zodat een aangesprongen sectie niet
    kaal tegen de bovenkant van het venster plakt. Komt het menu ooit op fixed
    te staan, dan hoort hier de werkelijke hoogte van de balk te staan -- en
    hoort templates/visual-builder.php die hoogte op te meten, zoals de
    Hanskloosterman-versie doet. */
.bs,
.bs__signup {
	scroll-margin-top: 1.5rem;
}

/*  css/style.css zet `body { background: #f0f0f0 }` en
    `body,input,textarea,select { color: #777 }` -- zonder !important, anders
    dan bij Hanskloosterman. De site is dus van zichzelf LICHT met donkergrijze
    tekst. Een sectie krijgt serverside altijd één van deze twee klassen, nooit
    geen van beide:

      .bs--onlight  lichte eigen achtergrond, of geen achtergrond (dan schijnt
                    de lichte pagina erdoorheen)   -> donkere tekst
      .bs--ondark   donkere eigen achtergrond, een achtergrondfoto of -video
                                                   -> lichte tekst

    Let op dat dit precies andersom is dan in de Hanskloosterman-versie: daar is
    "geen achtergrond" donker. Zie builder::isDark(), applyLive() in
    admin/js/builder-ui.js en docs/visual-builder.md -- die drie horen bij
    elkaar en moeten samen aangepast worden.

    De tekstkleur wordt hier expliciet gezet en niet aan overerving overgelaten:
    een sectie kan op een eigen witte of zandkleurige achtergrond staan, en dan
    hoort de tekst dezelfde te zijn als op de rest van de site. */
.bs--onlight,
.bs--onlight .bs__rich {
	color: var(--bs-text);
}

.bs__inner {
	max-width: var(--bs-container);
	margin: 0 auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.bs--w-full > .bs__inner {
	max-width: none;
}

/* Afstand boven */
.bs--pt-none   { padding-top: var(--bs-sp-none); }
.bs--pt-small  { padding-top: var(--bs-sp-small); }
.bs--pt-normal { padding-top: var(--bs-sp-normal); }
.bs--pt-large  { padding-top: var(--bs-sp-large); }
.bs--pt-xlarge { padding-top: var(--bs-sp-xlarge); }

/* Afstand onder */
.bs--pb-none   { padding-bottom: var(--bs-sp-none); }
.bs--pb-small  { padding-bottom: var(--bs-sp-small); }
.bs--pb-normal { padding-bottom: var(--bs-sp-normal); }
.bs--pb-large  { padding-bottom: var(--bs-sp-large); }
.bs--pb-xlarge { padding-bottom: var(--bs-sp-xlarge); }

/* Donkere achtergrond: tekst wordt licht. Wordt serverside gezet op basis
   van de helderheid van de gekozen kleur, dus ook bij een eigen hex. */
.bs--ondark,
.bs--ondark .bs__title,
.bs--ondark .bs__herotitle,
.bs--ondark .bs__herosub,
.bs--ondark .bs__columntitle,
.bs--ondark .bs__eventname,
.bs--ondark .bs__quotename,
.bs--ondark .bs__faqquestion,
.bs--ondark .bs__rich,
.bs--ondark .bs__rich h1,
.bs--ondark .bs__rich h2,
.bs--ondark .bs__rich h3,
.bs--ondark .bs__rich h4,
.bs--ondark .bs__rich h5,
.bs--ondark .bs__rich h6 {
	color: var(--bs-white);
}

.bs--ondark .bs__faqitem {
	border-bottom-color: rgba(255, 255, 255, 0.25);
}

.bs--ondark .bs__event {
	border-color: rgba(255, 255, 255, 0.25);
}

.bs--ondark .bs__rich a {
	color: var(--bs-gold-light);
}

/* ---------------------------------------------------------------------------
   Achtergrondfoto en -video
   ---------------------------------------------------------------------------
   Een sectie met beeld erachter bestaat uit drie lagen: de video of foto
   onderop, daarover een verloop dat de tekst leesbaar houdt, en bovenop de
   inhoud. De sluier is een verloop en geen egale waas: onderaan donkerder,
   bovenin lichter, zodat je de foto nog ziet terwijl de tekst leesbaar blijft.
   --------------------------------------------------------------------------- */

.bs--media > .bs__inner {
	position: relative;
	z-index: 2;
}

.bs__bgvideo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

.bs__overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 1;
	pointer-events: none;
}

.bs__overlay--light {
	background: linear-gradient(to bottom, rgba(28, 32, 33, 0.15), rgba(28, 32, 33, 0.45));
}

.bs__overlay--medium {
	background: linear-gradient(to bottom, rgba(28, 32, 33, 0.35), rgba(28, 32, 33, 0.65));
}

.bs__overlay--strong {
	background: linear-gradient(to bottom, rgba(28, 32, 33, 0.6), rgba(28, 32, 33, 0.85));
}

/*  Geen bewegend beeld voor wie daar last van heeft. De poster blijft staan,
    dus de sectie ziet er nog hetzelfde uit. */
@media (prefers-reduced-motion: reduce) {
	.bs__bgvideo { display: none; }
}

/*  Op een telefoon geen video downloaden: dat kost al gauw enkele megabytes aan
    mobiele data voor iets dat puur decoratief is. De achtergrondfoto -- die ook
    de poster is -- neemt het over. */
@media screen and (max-width: 736px) {
	.bs__bgvideo { display: none; }
}


/* ---------------------------------------------------------------------------
   Kolommen-layout
   ---------------------------------------------------------------------------
   Een sectie die andere secties in kolommen zet. Eén niveau diep; zie
   builder::sanitizeColumns().

   De verhouding staat als klasse op de wikkel, niet als inline stijl, zodat de
   opmaak op één plek blijft en per breekpunt kan verschillen.
   --------------------------------------------------------------------------- */

.bs__layout {
	display: grid;
	gap: var(--bs-gap);
	align-items: start;
}

.bs__layout--6-6   { grid-template-columns: 1fr 1fr; }
.bs__layout--4-8   { grid-template-columns: 1fr 2fr; }
.bs__layout--8-4   { grid-template-columns: 2fr 1fr; }
.bs__layout--3-9   { grid-template-columns: 1fr 3fr; }
.bs__layout--9-3   { grid-template-columns: 3fr 1fr; }
.bs__layout--4-4-4 { grid-template-columns: repeat(3, 1fr); }

.bs__col {
	min-width: 0;   /* anders duwt een brede tabel of lange URL de kolom uit elkaar */
}

/*  Een sectie ín een kolom. De kolom bepaalt de breedte, dus deze mag geen
    eigen maximumbreedte of zijpadding meer opleggen -- dat zou de inhoud van
    binnenuit versmallen. Zie de toelichting bij bs--nested in
    admin/classes/builder.php. */
.bs--nested > .bs__inner {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/*  Binnen een kolom staan blokken dichter op elkaar dan hele secties op een
    pagina. "Normaal" is daar 3.5rem; tussen twee blokken in een kolom is dat
    veel te ruim. Deze schaal geldt alleen genest, en de instelling per blok
    blijft gewoon werken -- alleen wat elke stap betekent verschuift mee. */
.bs--nested {
	--bs-sp-small:  0.75rem;
	--bs-sp-normal: 1.5rem;
	--bs-sp-large:  2.5rem;
	--bs-sp-xlarge: 3.5rem;
}

/*  Een sectietitel staat op een hele pagina gecentreerd boven zijn lijst. In een
    kolom werkt dat niet: daar staat de kop naast een andere kolom die links
    uitlijnt, en dan hangt hij scheef. Genest dus links, net als de lopende
    tekst ernaast.

    De selector weegt (0,3,0) tegen de (0,1,0) van .bs__title--centered, dus dit
    wint zonder !important. */
.bs--nested .bs__title.bs__title--centered {
	text-align: left;
}

/*  Het eerste en het laatste blok in een kolom hoeven geen ruimte tegen de rand
    van de sectie aan: die ruimte regelt de sectie zelf al. */
.bs__col > .bs:first-child { padding-top: 0; }
.bs__col > .bs:last-child  { padding-bottom: 0; }

@media screen and (max-width: 980px) {
	/* Drie kolommen worden er twee; de derde valt eronder. */
	.bs__layout--4-4-4 { grid-template-columns: repeat(2, 1fr); }

	/* De extra smalle varianten worden gewone tweedeling: 25% is hier te krap. */
	.bs__layout--3-9 { grid-template-columns: 1fr 2fr; }
	.bs__layout--9-3 { grid-template-columns: 2fr 1fr; }
}

@media screen and (max-width: 736px) {
	.bs__layout,
	.bs__layout--6-6,
	.bs__layout--4-8,
	.bs__layout--8-4,
	.bs__layout--3-9,
	.bs__layout--9-3,
	.bs__layout--4-4-4 {
		grid-template-columns: 1fr;
	}

	/*  De enige plek in deze stylesheet waar `order` gebruikt wordt, en dat is
	    hier verantwoord: het gaat om een keuze die per sectie gemaakt wordt en
	    niet om een vaste regel.

	    Waarom het nodig is: onder elkaar volgen de kolommen de HTML-volgorde.
	    Bij "smal links" komt de smalle kolom dan bovenaan -- en staat daar een
	    vacaturelijst of een linklijst, dan moet de bezoeker daar eerst langs
	    voordat hij het verhaal ziet. Met de instelling "op mobiel eerst: brede
	    kolom" haalt de renderer die kolom naar voren.

	    Let op: dit verandert alleen de volgorde in beeld, niet die in de
	    tabvolgorde of voor een schermlezer. Dat is hier acceptabel omdat beide
	    kolommen zelfstandig leesbaar zijn -- het is geen doorlopend verhaal dat
	    door elkaar zou raken. */
	.bs__col--first { order: -1; }
}

/* ---------------------------------------------------------------------------
   Tekst
   --------------------------------------------------------------------------- */

/*  css/style.css zet alle koppen op `font-weight: 600`, `text-transform:
    uppercase` en `color: #888`, met een letterafstand die per breakpoint
    verschilt. Dat is de herkenbare vorm van deze site, dus die neemt de builder
    over -- alleen de grootte krijgt hier een eigen schaal, want op de site zelf
    staan h4 t/m h6 allemaal op 1em en loopt de hiërarchie dus niet op. */
.bs__title,
.bs__rich h1,
.bs__rich h2,
.bs__rich h3,
.bs__rich h4,
.bs__rich h5,
.bs__rich h6,
.bs__herotitle,
.bs__columntitle,
.bs__eventname,
.bs__teamname,
.bs__newstitle,
.bs__vacancytitle,
.bs__faqquestion {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--bs-heading-track);
	color: var(--bs-grey);
}

.bs__title {
	margin: 0 0 var(--bs-title-gap);
	font-size: 1.5em;
	line-height: 1.3;
}

.bs__rich {
	line-height: 1.65;
}

.bs__rich > *:first-child { margin-top: 0; }
.bs__rich > *:last-child  { margin-bottom: 0; }

.bs__rich h1,
.bs__rich h2,
.bs__rich h3,
.bs__rich h4,
.bs__rich h5,
.bs__rich h6 {
	margin: 1.75em 0 var(--bs-heading-gap);
	line-height: 1.25;
}

/*  Een h1 is bijna altijd het eerste in een tekstblok en heeft daar geen
    bovenmarge nodig; die zou boven op de sectie-afstand komen. */
.bs__rich > h1:first-child { margin-top: 0; }

/*  Eigen koppenschaal. css/style.css geeft h1 t/m h6 geen eigen grootte mee
    behalve op mobiel (waar ze allemaal 1.2em worden); op desktop staan ze dus
    allemaal op 1em en is een h3 even groot als een alinea. Deze schaal loopt
    weer op volgorde, en blijft dicht bij de ingetogen stijl van de site.

    De letterafstand loopt mee omlaag: 2px op een h2 is rustig, op een h6 zou
    dezelfde 2px de kop uit elkaar trekken. */
/*  h1 hoorde er niet bij, en viel daardoor terug op de 1em die style.css alle
    koppen geeft -- een paginatitel las dan als gewone tekst. Komt aan het licht
    zodra een pagina met de builder gebouwd wordt in plaats van met een template,
    want dáár stond de h1 vast in de opmaak. */
.bs__rich h1 { font-size: 1.9em; }
.bs__rich h2 { font-size: 1.5em; }
.bs__rich h3 { font-size: 1.25em; }
.bs__rich h4 { font-size: 1.1em;  letter-spacing: 1.5px; }
.bs__rich h5 { font-size: 1em;    letter-spacing: 1px; }
.bs__rich h6 { font-size: 0.9em;  letter-spacing: 1px; }

.bs__rich p {
	margin: 0 0 1.1em;
}

.bs__rich ul,
.bs__rich ol {
	margin: 0 0 1.1em;
	padding-left: 1.4em;
}

.bs__rich li {
	margin-bottom: 0.35em;
}

/* De editor wikkelt de inhoud van een lijstitem in een alinea. Die mag geen
   eigen ruimte innemen, anders staan lijsten veel te ruim. */
.bs__rich li > p {
	margin: 0;
}

.bs__rich a {
	color: var(--bs-gold);
	text-decoration: underline;
}

.bs__rich a:hover {
	color: var(--bs-gold-light);
}

.bs__rich blockquote {
	margin: 1.5em 0;
	padding: 0.25em 0 0.25em 1.25em;
	border-left: 3px solid var(--bs-gold);
	font-style: italic;
}

.bs__rich hr {
	margin: 2em 0;
	border: 0;
	border-top: 1px solid rgba(135, 135, 135, 0.35);
}

.bs__rich img {
	max-width: 100%;
	height: auto;
}

/* Tabellen. Op smalle schermen schuiven ze horizontaal in plaats van de
   layout op te rekken. */
.bs__rich table {
	width: 100%;
	margin: 0 0 1.5em;
	border-collapse: collapse;
	display: block;
	overflow-x: auto;
}

@media screen and (min-width: 737px) {
	.bs__rich table { display: table; }
}

.bs__rich th,
.bs__rich td {
	padding: 0.6em 0.85em;
	border: 1px solid rgba(135, 135, 135, 0.3);
	text-align: left;
	vertical-align: top;
}

.bs__rich th {
	background: rgba(240, 240, 240, 0.5);
	font-weight: 600;
}

.bs--ondark .bs__rich th {
	background: rgba(255, 255, 255, 0.08);
}

/* Kleine letter. Voor een disclaimer of een verantwoording onderaan een
   pagina: dezelfde tekst, kleiner en rustiger, in een eigen kader. */
.bs--text.bs--v-small .bs__rich {
	max-width: 62rem;
	margin: 0 auto;
	padding: 1.5rem 1.75rem;
	border: 1px solid rgba(135, 135, 135, 0.35);
	border-radius: var(--bs-radius);
	color: var(--bs-grey);
	font-size: 0.88em;
	line-height: 1.6;
}

.bs--text.bs--v-small .bs__rich h2,
.bs--text.bs--v-small .bs__rich h3 {
	margin-top: 1.25em;
	font-size: 1.05em;
	color: var(--bs-dark);
}

/* De kleine-letterregels hierboven zijn zwaarder dan `.bs--ondark .bs__rich`,
   dus op een donkere sectie moeten ze een eigen tegenhanger krijgen. Anders
   staat er grijs op donker en donker op donker. */
.bs--ondark.bs--text.bs--v-small .bs__rich {
	color: rgba(255, 255, 255, 0.75);
}

.bs--ondark.bs--text.bs--v-small .bs__rich h2,
.bs--ondark.bs--text.bs--v-small .bs__rich h3 {
	color: var(--bs-white);
}

.bs--text.bs--v-small .bs__rich > *:first-child { margin-top: 0; }

.bs--ondark.bs--v-small .bs__rich {
	border-color: rgba(255, 255, 255, 0.25);
	color: rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------------------
   Knoppen
   --------------------------------------------------------------------------- */

.bs__buttons {
	margin: 1.5em 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/*  Zelfde vorm als `.button` in css/style.css, zodat een knop uit de builder
    niet uit de toon valt naast de knoppen op de rest van de site. Overgenomen
    waarden uit die stylesheet: background #967c57, color #fff, uppercase,
    border-radius 4px, font-size 1em, font-weight 600, en de kenmerkende zachte
    slagschaduw `0.125em 0.175em 0 0 rgba(0,0,0,0.125)`.

    Twee verschillen met de Hanskloosterman-versie waar dit vandaan komt: daar
    zijn de knoppen hoekig (border-radius 0), zwaarder gezet (font-weight 900)
    en met veel letterafstand (2px). Deze site is daarin een stuk zachter. */
.bs__button {
	display: inline-block;
	min-width: 10em;
	padding: 0.7em 1.4em;
	border: 1px solid var(--bs-gold);
	border-radius: var(--bs-radius);
	box-shadow: 0.125em 0.175em 0 0 rgba(0, 0, 0, 0.125);

	/*  font-family en cursor staan hier voor de verzendknop van het formulier.
	    Die is een <button>, en zo'n element erft van zichzelf geen lettertype:
	    het pakt dat van de browser. css/style.css zet het lettertype op
	    `body, input, textarea, select` -- button staat daar niet bij, dus zonder
	    deze regel staat de knop in een ander font dan alle <a>-knoppen. */
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;

	/*  De site zet `a { border-bottom: solid 1px #ddd }`. Zonder deze regel
	    krijgt elke knop -- die is immers een <a> -- daar een streep onder. */
	border-bottom-width: 1px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out, border-color 0.25s ease-in-out;
}

.bs__button--solid {
	background: var(--bs-gold);
	color: var(--bs-white);
}

.bs__button--solid:hover {
	background: var(--bs-gold-light);
	border-color: var(--bs-gold-light);
	color: var(--bs-white);
}

.bs__button--solid:active {
	background: var(--bs-coral);
	border-color: var(--bs-coral);
}

/*  De omlijnde knop. Op een lichte sectie mogen de letters goud blijven: op wit
    haalt #967c57 4,6:1 en dat is ruim genoeg -- anders dan bij Hanskloosterman,
    waar het goud lichter is (#cc9966) en op zand maar 1,8:1 haalde.

    Op een zandkleurige of lichtgrijze achtergrond zakt het naar 4,4:1; nog
    steeds leesbaar, en de rand maakt de vorm herkenbaar. */
.bs__button--outline {
	background: transparent;
	color: var(--bs-gold);
	box-shadow: none;
}

.bs__button--outline:hover,
.bs--onlight .bs__button--outline:hover,
.bs--ondark .bs__button--outline:hover {
	background: var(--bs-gold);
	color: var(--bs-white);
}

/*  Op een donkere sectie is het goud van de site te donker om te lezen (#967c57
    op #555 haalt 1,5:1). Daar wordt de omlijnde knop dus wit -- rand en letters
    allebei, wat op een foto of een donker vlak sowieso het duidelijkst is. */
.bs--ondark .bs__button--outline {
	border-color: var(--bs-white);
	color: var(--bs-white);
}

/* WhatsApp-knop. Herkenbaar groen in plaats van het goud van het palet, want
   die kleur is nu juist waar mensen op klikken. Het icoon zit als SVG in de
   CSS, zodat er geen extra bestand mee hoeft. */
.bs__button--whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	background: #25d366;
	border-color: #25d366;
	color: #ffffff;
}

.bs__button--whatsapp::before {
	content: '';
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	background: currentColor;
	-webkit-mask: var(--bs-whatsapp) center / contain no-repeat;
	mask: var(--bs-whatsapp) center / contain no-repeat;
}

.bs__button--whatsapp:hover {
	background: #1ebe5b;
	border-color: #1ebe5b;
	color: #ffffff;
}

.bs--ondark .bs__button--whatsapp {
	color: #ffffff;
}

/*  Een <button> erft van zichzelf geen lettertype; dat wordt in .bs__button
    hierboven met `font-family: inherit` geregeld, samen met cursor en appearance.

    Zet hier nooit `font: inherit` neer. Die shorthand neemt óók grootte, gewicht
    en regelhoogte mee, en omdat `button.bs__button` zwaarder weegt (0,1,1) dan
    `.bs__button` (0,1,0) wist dat de hele knopopmaak uit: de verzendknop van het
    formulier stond daardoor in de grootte en het gewicht van de lopende tekst.
    text-transform en letter-spacing horen niet bij die shorthand -- vandaar dat
    zo'n knop wél in kapitalen stond en tóch uit de toon viel. */

button.bs__button[disabled] {
	cursor: default;
	opacity: 0.65;
}

/* ---------------------------------------------------------------------------
   Tekst + afbeelding
   --------------------------------------------------------------------------- */

.bs__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bs-gap);
	align-items: center;
}

.bs__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bs-radius);
}

/*  De variant `right` wordt niet meer met `order` omgedraaid: de renderer zet de
    kolommen al in de juiste volgorde in de HTML. Daardoor klopt de volgorde op
    een smal scherm vanzelf -- staat de afbeelding op desktop rechts, dan komt de
    tekst er op mobiel boven -- en loopt de tabvolgorde gelijk met wat je ziet. */

/* Zonder afbeelding neemt de tekst de volle breedte. De serverside renderer
   laat de mediakolom dan helemaal weg, zodat hier geen :has() nodig is. */
.bs__split--single {
	grid-template-columns: 1fr;
}

@media screen and (max-width: 736px) {
	.bs__split {
		grid-template-columns: 1fr;
	}
}

/*  Een SVG staat in de pagina zelf en is dus geen <img>. Hij moet daarom apart
    dezelfde maat krijgen als een afbeelding op die plek, anders valt hij terug
    op de eigen afmeting uit het bestand. Kleur komt via `currentColor` uit de
    sectie -- daarom staat hij ín de pagina en niet in een <img>. */
.bs__svg {
	display: block;
	width: 100%;
	height: auto;
	color: inherit;
}

.bs__quotephoto .bs__svg {
	width: 52px;
	height: 52px;
}

/*  Een icoon in een kolom is geen foto: op volle kolombreedte wordt hij enorm.
    Alleen hier begrensd, zodat een SVG die als losse afbeelding gebruikt wordt
    -- een illustratie of schema -- wél groot mag blijven. */
.bs__columnmedia .bs__svg {
	max-width: 80px;
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.bs__hero {
	max-width: 44rem;
}

.bs--v-center .bs__hero {
	max-width: 46rem;
	margin: 0 auto;
	text-align: center;
}

.bs--v-center .bs__buttons {
	justify-content: center;
}

.bs__herotitle {
	margin: 0 0 0.5em;
	font-size: 2.6em;
	line-height: 1.1;
}

.bs__herosub {
	margin: 0;
	font-size: 1.2em;
	line-height: 1.5;
}

@media screen and (max-width: 736px) {
	.bs__herotitle { font-size: 1.9em; }
	.bs__herosub   { font-size: 1.05em; }
}

/* ---------------------------------------------------------------------------
   Afbeelding en video
   --------------------------------------------------------------------------- */

.bs__figure {
	margin: 0;
}

.bs__figuremedia {
	display: block;
}

.bs__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bs-radius);
}

.bs--w-full .bs__figure img {
	border-radius: 0;
}

.bs__caption {
	margin-top: var(--bs-item-gap);
	color: var(--bs-grey);
	font-size: 0.9em;
}

.bs--ondark .bs__caption {
	color: rgba(255, 255, 255, 0.7);
}

.bs__video {
	position: relative;
	padding-top: 56.25%;          /* 16:9 */
	border-radius: var(--bs-radius);
	overflow: hidden;
	background: var(--bs-dark);
}

.bs__video iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------------------------------------------------------------------------
   CTA-balk
   --------------------------------------------------------------------------- */

.bs__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bs-gap);
}

.bs__ctatext { flex: 1 1 20rem; }

.bs__ctatext .bs__title { margin-bottom: var(--bs-title-gap); }

.bs__ctabuttons { flex: 0 0 auto; }

.bs__ctabuttons .bs__buttons { margin: 0; }

.bs--v-center .bs__cta {
	flex-direction: column;
	text-align: center;
}

/* In een kolom werkt de flex-basis van .bs__ctatext als hóógte, niet als
   breedte. Zonder deze regel staat er 20rem lucht tussen de tekst en de
   knoppen. */
.bs--v-center .bs__ctatext {
	flex: 0 1 auto;
	max-width: 46rem;
}

.bs--v-center .bs__cta > * {
	width: 100%;
}

.bs--v-center .bs__cta .bs__buttons { justify-content: center; }

/* ---------------------------------------------------------------------------
   Kolommen / USP's
   --------------------------------------------------------------------------- */

.bs__title--centered {
	margin-bottom: calc(var(--bs-title-gap) * 1.25);
	text-align: center;
}

.bs__columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bs-gap);
}

.bs--v-2 .bs__columns { grid-template-columns: repeat(2, 1fr); }
.bs--v-4 .bs__columns { grid-template-columns: repeat(4, 1fr); }

.bs__columnmedia {
	margin-bottom: 1em;
}

.bs__columnmedia img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bs-radius);
}

.bs__columntitle {
	margin: 0 0 var(--bs-item-gap);
	font-size: 1.15em;
	line-height: 1.3;
}

@media screen and (max-width: 980px) {
	.bs__columns,
	.bs--v-4 .bs__columns { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 620px) {
	.bs__columns,
	.bs--v-2 .bs__columns,
	.bs--v-4 .bs__columns { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Ervaringen / quotes
   --------------------------------------------------------------------------- */

.bs__quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--bs-gap);
}

/*  Een ervaring leest als een citaat, niet als een kaartje met tekst: een groot
    aanhalingsteken erboven, het citaat cursief, en onderaan een ondertekening
    met foto, naam en rol -- gescheiden door een dun lijntje. */
.bs__quote {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 3.25rem 1.75rem 1.75rem;
	border: 1px solid rgba(135, 135, 135, 0.22);
	border-radius: var(--bs-radius);
	background: rgba(240, 240, 240, 0.45);
}

.bs__quote::before {
	content: '\201C';                 /* het openende aanhalingsteken */
	position: absolute;
	top: 0.5rem;
	left: 1.4rem;
	color: var(--bs-gold);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4.5rem;
	line-height: 1;
	opacity: 0.45;
	pointer-events: none;
}

.bs--ondark .bs__quote {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.07);
}

.bs__quote blockquote {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	border: 0;
	font-style: italic;
}

/* De ondertekening: foto naast de naam, met een scheidingslijntje erboven. */
.bs__quotefoot {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(135, 135, 135, 0.25);
}

.bs--ondark .bs__quotefoot {
	border-top-color: rgba(255, 255, 255, 0.18);
}

.bs__quotephoto {
	flex: 0 0 auto;
}

.bs__quotephoto img {
	display: block;
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 50%;
}

.bs__quotewho {
	min-width: 0;
	line-height: 1.35;
}

.bs__quotename {
	display: block;
	font-weight: 600;
}

.bs__quoterole {
	display: block;
	color: var(--bs-grey);
	font-size: 0.88em;
}

.bs__quoterole:empty { display: none; }

.bs--ondark .bs__quoterole { color: rgba(255, 255, 255, 0.7); }

/* ---------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------- */

.bs__faq {
	max-width: 48rem;
	margin: 0 auto;
}

.bs__faqitem {
	border-bottom: 1px solid rgba(135, 135, 135, 0.3);
}

.bs__faqquestion {
	position: relative;
	padding: 1em 2em 1em 0;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.bs__faqquestion::-webkit-details-marker { display: none; }

.bs__faqquestion::after {
	content: '+';
	position: absolute;
	right: 0.25em;
	top: 50%;
	transform: translateY(-50%);
	color: var(--bs-gold);
	font-size: 1.3em;
	line-height: 1;
}

.bs__faqitem[open] > .bs__faqquestion::after { content: '\2212'; }

.bs__faqanswer {
	padding: 0 0 1.25em;
}

/* ---------------------------------------------------------------------------
   Slideshow en agenda
   --------------------------------------------------------------------------- */

.bs__slideshow img { max-width: 100%; height: auto; }

.bs__events {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--bs-gap);
}

.bs__event {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border: 1px solid rgba(135, 135, 135, 0.25);
	border-radius: var(--bs-radius);
}

.bs__eventdate {
	margin: 0 0 0.35em;
	color: var(--bs-gold);
	font-size: 0.9em;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.bs__eventname {
	margin: 0 0 var(--bs-item-gap);
	font-size: 1.15em;
	line-height: 1.3;
}

.bs__eventlocation {
	margin: 0 0 0.6em;
	color: var(--bs-grey);
	font-size: 0.92em;
}

.bs--ondark .bs__eventlocation { color: rgba(255, 255, 255, 0.7); }

.bs__eventtext {
	margin: 0 0 0.5em;
}

.bs__event .bs__buttons {
	margin-top: auto;
	padding-top: 1em;
}

/* ---------------------------------------------------------------------------
   Aanmeldformulier
   --------------------------------------------------------------------------- */

.bs__signup {
	max-width: 46rem;
	margin: 0 auto;
	text-align: center;
}

.bs__signup .bs__rich {
	text-align: left;
}

.bs__form {
	margin: 2rem 0 0;
	padding: 1.75rem;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(135, 135, 135, 0.3);
	border-radius: var(--bs-radius);
	text-align: left;
}

.bs--ondark .bs__form {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.25);
}

.bs__formrow {
	margin-bottom: 1.1rem;
}

.bs__formlabel {
	display: block;
	margin-bottom: 0.35em;
	font-size: 0.92em;
	font-weight: 600;
}

.bs--ondark .bs__formlabel {
	color: var(--bs-white);
}

/* Eigen opmaak in plaats van die uit het oude skel-formulier, zodat deze
   velden niet meeveranderen met style.css. */
.bs__forminput {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.7em 0.85em;
	background: var(--bs-white);
	border: 1px solid rgba(135, 135, 135, 0.55);
	border-radius: var(--bs-radius);
	font: inherit;
	color: var(--bs-dark);
	line-height: 1.3;
}

.bs__forminput:focus {
	outline: 0;
	border-color: var(--bs-gold);
	box-shadow: 0 0 0 3px rgba(150, 124, 87, 0.25);
}

/*  De keuzelijst in het ervaringenformulier: zelfde kader als de invoervelden,
    met een eigen pijltje omdat de browser er anders zijn eigen stijl op legt. */
.bs__formselect {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.4em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23878787' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9em center;
	cursor: pointer;
}

.bs__formtextarea {
	min-height: 7rem;
	resize: vertical;
}

.bs__formcheckbox {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin: 0 0 1.2rem;
	font-size: 0.92em;
	line-height: 1.5;
}

.bs__formcheckbox input {
	flex: 0 0 auto;
	margin: 0.2em 0 0;
}

.bs--ondark .bs__formcheckbox {
	color: var(--bs-white);
}

.bs__formcheck {
	margin-bottom: 1.2rem;
}

.bs__form .bs__buttons {
	margin: 0;
}

/* Het honeypot-veld. Uit beeld met positionering in plaats van display:none,
   want dat laatste zien bots juist en vullen ze dan niet in. */
.bs__formtrap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bs__formnote {
	margin-top: 1rem;
	color: var(--bs-grey);
	font-size: 0.86em;
	text-align: left;
}

.bs--ondark .bs__formnote {
	color: rgba(255, 255, 255, 0.75);
}

/* Terugkoppeling na het versturen. Een dekkende achtergrond en een randje,
   zodat de melding ook opvalt op een sectie die zelf al zandkleurig is. */
.bs__formmessage {
	margin: 1.5rem 0 0;
	padding: 1em 1.2em;
	border: 1px solid rgba(150, 124, 87, 0.55);
	border-left: 4px solid var(--bs-gold);
	border-radius: var(--bs-radius);
	background: var(--bs-white);
	color: var(--bs-dark);
	font-size: 1.05em;
	text-align: left;
}

.bs__formmessage--fout {
	border-color: rgba(179, 38, 30, 0.45);
	border-left-color: #b3261e;
	background: #fdf5f4;
}


/* ===========================================================================
   Componenten uit de eigen modules van deze site
   ---------------------------------------------------------------------------
   Vacatures, consultants, ervaringen en nieuws. De inhoud komt uit de database,
   dus deze blokken hebben geen inline-bewerkbare velden behalve de sectietitel.

   Alle vier eindigen op .bs__listfoot: de knop naar het volledige overzicht.
   =========================================================================== */

/* De knoppenrij onder een dynamische lijst. */
.bs__listfoot {
	margin-top: var(--bs-gap);
	text-align: center;
}

.bs__listfoot .bs__buttons {
	justify-content: center;
}

/* ---------------------------------------------------------------------------
   Vacatures
   ---------------------------------------------------------------------------
   Twee vormen. De kaartweergave volgt wat er nu op de homepage staat: de foto
   als achtergrond met de titel eroverheen, in wit met een schaduw eronder.
   Dat werkt daar omdat er altijd een foto is; ontbreekt die, dan valt de kaart
   hier terug op een gouden vlak in plaats van op onleesbaar wit-op-wit.
   --------------------------------------------------------------------------- */

.bs__vacancies {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bs-gap);
}

.bs__vacancy {
	margin: 0;
}

.bs__vacancylink {
	position: relative;
	display: block;
	min-height: 300px;
	overflow: hidden;
	border-radius: var(--bs-radius);

	/*  De site zet `a { border-bottom: solid 1px #ddd }`; zonder deze regel
	    krijgt elke kaart een streep onderlangs. */
	border-bottom: 0;
	background: var(--bs-gold);
	text-decoration: none;
}

.bs__vacancyphoto {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;

	/*  Een verloop over de foto, donkerder naar onderen: daar staat de tekst.
	    Zonder dit is een titel op een lichte foto niet te lezen -- de homepage
	    lost dat nu op met een text-shadow, wat op een witte foto nog steeds
	    tekort schiet. */
	transition: transform 0.4s ease;
}

.bs__vacancyphoto::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.72) 100%);
}

.bs__vacancylink:hover .bs__vacancyphoto {
	transform: scale(1.04);
}

.bs__vacancybody {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 300px;
	padding: 1.5rem;
	color: var(--bs-white);
}

/*  De titel op een kaart is wit, ook op een lichte sectie: hij ligt immers op
    de foto en niet op de achtergrond van de sectie. Vandaar dat deze regel
    zwaarder weegt dan de algemene koptekstkleur hierboven. */
.bs__vacancies .bs__vacancytitle {
	display: block;
	margin: 0 0 0.35rem;
	color: var(--bs-white);
	font-size: 1.15em;
	line-height: 1.3;
}

.bs__vacancyplace,
.bs__vacancysector {
	display: block;
	color: var(--bs-white);
	line-height: 1.4;
}

.bs__vacancyplace {
	font-weight: 600;
}

.bs__vacancysector {
	margin-top: 0.2rem;
	font-size: 0.85em;
	opacity: 0.8;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/*  Lijstweergave: een rij per vacature met een kleine foto ernaast, zoals op de
    vacatureoverzichtpagina. Hier ligt de tekst niet op de foto, dus volgt hij
    gewoon de kleuren van de sectie. */
.bs__vacancies--list {
	display: block;
}

.bs__vacancies--list .bs__vacancylink {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-height: 0;
	padding: 1rem 0;
	border-radius: 0;
	border-bottom: 1px solid rgba(135, 135, 135, 0.25);
	background: none;
}

.bs--ondark .bs__vacancies--list .bs__vacancylink {
	border-bottom-color: rgba(255, 255, 255, 0.22);
}

.bs__vacancies--list .bs__vacancyphoto {
	position: relative;
	flex: 0 0 auto;
	width: 96px;
	height: 72px;
	border-radius: var(--bs-radius);
}

.bs__vacancies--list .bs__vacancyphoto::after {
	content: none;
}

.bs__vacancies--list .bs__vacancybody {
	min-height: 0;
	padding: 0;
	color: inherit;
}

.bs__vacancies--list .bs__vacancytitle {
	color: var(--bs-grey);
}

.bs--ondark .bs__vacancies--list .bs__vacancytitle,
.bs--ondark .bs__vacancies--list .bs__vacancyplace,
.bs--ondark .bs__vacancies--list .bs__vacancysector {
	color: var(--bs-white);
}

.bs__vacancies--list .bs__vacancyplace,
.bs__vacancies--list .bs__vacancysector {
	color: var(--bs-text);
}

@media screen and (max-width: 980px) {
	.bs__vacancies { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 620px) {
	.bs__vacancies { grid-template-columns: 1fr; }
	.bs__vacancylink,
	.bs__vacancybody { min-height: 220px; }
}

/* ---------------------------------------------------------------------------
   Consultants / team
   ---------------------------------------------------------------------------
   Portret met de naam eronder, zoals op /nl/onze-consultants/ -- daar staat het
   in een 3u-grid uit skel. Hier vier kolommen als standaard, drie als variant.
   --------------------------------------------------------------------------- */

.bs__team {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--bs-gap);
}

.bs__team--three {
	grid-template-columns: repeat(3, 1fr);
}

.bs__teammember {
	margin: 0;
	text-align: center;
}

.bs__teamlink {
	display: block;
	border-bottom: 0;
	color: inherit;
	text-decoration: none;
}

/*  Vaste verhouding voor de portretten. Zonder dit bepaalt elke foto zijn eigen
    hoogte, en dan staan de namen in een rij niet op één lijn -- het teamlid
    zonder foto begint dan bovenaan terwijl de rest halverwege staat. De
    beheerder hoeft zo ook niet elke foto op maat aan te leveren.

    `object-fit: cover` snijdt bij in plaats van uit te rekken. 4:5 is staand,
    wat bij een portretfoto hoort; bij een liggende foto verdwijnen links en
    rechts wat marge, en dat is bij een pasfoto het minst erg. */
.bs__teamphoto {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	margin-bottom: 1em;
	border-radius: var(--bs-radius);
}

/*  De kaart begint bovenaan zijn cel, zodat een teamlid zonder foto niet in het
    midden gaat zweven. Bij een gelijke fotohoogte staan de namen dan vanzelf op
    één lijn. */
.bs__team {
	align-items: start;
}

.bs__teamname {
	margin: 0 0 var(--bs-item-gap);
	font-size: 1.05em;
	line-height: 1.3;
}

.bs__teamlink:hover .bs__teamname {
	color: var(--bs-gold);
}

.bs--ondark .bs__teamlink:hover .bs__teamname {
	color: var(--bs-gold-light);
}

.bs__teamrole {
	margin: 0;
	font-size: 0.95em;
	line-height: 1.4;
}

@media screen and (max-width: 980px) {
	.bs__team,
	.bs__team--three { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 480px) {
	.bs__team,
	.bs__team--three { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Nieuws / blog
   ---------------------------------------------------------------------------
   Kaarten met foto, titel, datum en een korte samenvatting. Vervangt de twee
   `article.is-post.4u`-blokken die nu op de homepage staan.
   --------------------------------------------------------------------------- */

.bs__news {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bs-gap);
}

.bs__newsitem {
	margin: 0;
}

.bs__newslink {
	display: block;
	height: 100%;
	padding-bottom: 0.25rem;
	border-bottom: 0;
	color: inherit;
	text-decoration: none;
}

/*  Zelfde reden als bij de teamfoto's: gelijke hoogte, anders staan de titels in
    een rij niet op één lijn. 3:2 is liggend, wat bij een blogafbeelding past. */
.bs__newsphoto {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin-bottom: 1em;
	border-radius: var(--bs-radius);
}

.bs__news {
	align-items: start;
}

.bs__newstitle {
	margin: 0 0 var(--bs-item-gap);
	font-size: 1.1em;
	line-height: 1.3;
}

.bs__newslink:hover .bs__newstitle {
	color: var(--bs-gold);
}

.bs--ondark .bs__newstitle,
.bs--ondark .bs__newsdate,
.bs--ondark .bs__newsintro {
	color: var(--bs-white);
}

.bs--ondark .bs__newslink:hover .bs__newstitle {
	color: var(--bs-gold-light);
}

.bs__newsdate {
	margin: 0 0 0.5em;
	font-size: 0.85em;
	letter-spacing: 1px;
	text-transform: uppercase;
	opacity: 0.75;
}

.bs__newsintro {
	margin: 0;
	line-height: 1.6;
}

@media screen and (max-width: 980px) {
	.bs__news { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 620px) {
	.bs__news { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Ervaringen uit het CMS
   ---------------------------------------------------------------------------
   Dit component hergebruikt de opmaak van `quotes` hierboven -- .bs__quotes,
   .bs__quote, .bs__quotefoot en .bs__quotename staan daar al. Wat hier bijkomt
   is alleen het verschil dat deze variant geen foto en geen rol kent: de naam
   staat er alleen, en dan hoeft de ondertekening niet als flexrij te staan.
   --------------------------------------------------------------------------- */

.bs--experiences .bs__quotefoot {
	display: block;
}

/*  De inhoud komt als rich text uit de admin, dus er kunnen alinea's in staan.
    De laatste mag geen ruimte onderlangs innemen, anders staat de streep boven
    de ondertekening te ver weg. */
.bs__quotetext > *:first-child { margin-top: 0; }
.bs__quotetext > *:last-child  { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   De beheerbalk
   ---------------------------------------------------------------------------
   `.admin-bar` heeft in deze site helemaal geen opmaak: het is een gewone div
   met een `.button` erin, die bovenaan in de flow meeloopt. Er is dus geen
   `position: fixed` en geen z-index-probleem zoals bij Hanskloosterman, en er
   hoeft onderaan geen ruimte vrijgehouden te worden.

   Wat wél nodig is: hem netjes binnen de pagina houden op een builder-pagina,
   waar geen `.container` omheen staat. Zonder dit plakt de knop tegen de
   linkerrand van het venster.
   --------------------------------------------------------------------------- */

.builder-page .admin-bar {
	position: relative;
	z-index: 100;
	max-width: var(--bs-container);
	margin: 0 auto;
	padding: 1rem 1.5rem;
}

.builder-page .admin-bar .button + .button {
	margin-left: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Alleen zichtbaar in de builder
   --------------------------------------------------------------------------- */

.bs__todo {
	margin: 0;
	padding: 1.5rem;
	border: 1px dashed var(--bs-grey);
	border-radius: var(--bs-radius);
	color: var(--bs-grey);
	text-align: center;
}

.bs--hidden {
	opacity: 0.4;
}

/* ---------------------------------------------------------------------------
   Lijst met iconen
   ---------------------------------------------------------------------------
   Adres, telefoon, e-mail, social. Vervangt `ul.icons li.fa.fa-home` uit
   css/style.css, dat nu in de contactpagina en in elke footer staat.

   Het icoon zelf komt uit de FontAwesome-set die style.css al laadt; hier staat
   alleen hoe de regel eruitziet. `.fa` levert het lettertype en het teken.
   --------------------------------------------------------------------------- */

.bs__iconlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs__iconrow {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	margin: 0 0 1.1rem;
	padding: 0;
}

.bs__iconrow:last-child { margin-bottom: 0; }

/*  Een vaste cirkel, zodat de teksten uitlijnen ongeacht de breedte van het
    icoon -- een telefoontje is smaller dan een huisje. */
.bs__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2em;
	height: 2.2em;
	border-radius: 50%;
	background: var(--bs-gold);
	color: var(--bs-white);
	font-size: 0.9em;
	line-height: 1;
}

.bs--ondark .bs__icon {
	background: rgba(255, 255, 255, 0.15);
	color: var(--bs-white);
}

.bs__iconbody {
	min-width: 0;   /* anders duwt een lang e-mailadres de regel uit elkaar */
	line-height: 1.5;
}

.bs__icontitle {
	display: block;
	font-weight: 600;
}

.bs__icontext {
	display: block;
}

/*  De rich text binnen een regel is één alinea; die hoeft geen eigen ruimte.
    Zonder dit staat er onder elke regel een gat van 1.1em uit .bs__rich p. */
.bs__icontext p { margin: 0; }
.bs__icontext p + p { margin-top: 0.4em; }

/*  Een lege titel valt weg, behalve in de builder -- daar moet je erin kunnen
    klikken om hem te vullen. Zie css/builder-frontend.css, dat dit terugdraait,
    net als bij de ondertekening van een citaat. */
.bs__icontitle:empty { display: none; }

/* ---------------------------------------------------------------------------
   Vacature-overzicht: het filterformulier
   --------------------------------------------------------------------------- */

.bs__vacancyfilter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1rem;
	align-items: end;
	margin-bottom: var(--bs-gap);
	padding: 1.25rem;
	border: 1px solid rgba(135, 135, 135, 0.25);
	border-radius: var(--bs-radius);
	background: var(--bs-sand);
}

.bs--ondark .bs__vacancyfilter {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.07);
}

.bs__filterfield { min-width: 0; }

.bs__filterlabel {
	display: block;
	margin-bottom: 0.35em;
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bs-grey);
}

.bs--ondark .bs__filterlabel { color: var(--bs-white); }

/*  Eigen opmaak in plaats van die uit het oude skel-formulier, zodat deze velden
    niet meeveranderen met style.css. Zelfde aanpak als bij het aanmeldformulier. */
.bs__filterinput,
.bs__filterselect {
	width: 100%;
	padding: 0.6em 0.7em;
	border: 1px solid rgba(135, 135, 135, 0.45);
	border-radius: var(--bs-radius);
	background: var(--bs-white);
	color: var(--bs-text);
	font-family: inherit;
	font-size: 1em;
	line-height: 1.3;
}

.bs__filterinput:focus,
.bs__filterselect:focus {
	outline: 0;
	border-color: var(--bs-gold);
	box-shadow: 0 0 0 3px rgba(150, 124, 87, 0.25);
}

/*  De knop staat op dezelfde regel als de velden en moet dus even hoog zijn.
    min-width eraf: in een smalle kolom van het raster past 10em niet. */
.bs__filterfield--go .bs__button {
	width: 100%;
	min-width: 0;
}

/*  Geen resultaten. Geen `bs__todo` -- dat is de gele melding die alleen in de
    builder hoort; dit ziet een bezoeker. */
.bs__empty {
	margin: 0;
	padding: 1.5rem;
	border: 1px dashed rgba(135, 135, 135, 0.4);
	border-radius: var(--bs-radius);
	text-align: center;
}

/* ---------------------------------------------------------------------------
   Vacature en blogbericht: de detailweergave
   --------------------------------------------------------------------------- */

.bs__vacancymeta {
	margin: 0 0 var(--bs-heading-gap);
	font-size: 0.9em;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bs-gold);
}

.bs--ondark .bs__vacancymeta { color: var(--bs-white); }

.bs__vacancydetail .bs__buttons,
.bs__newsdetail .bs__buttons,
.bs__teamdetail .bs__buttons {
	margin-top: var(--bs-gap);
}

/*  Een vacature of bericht dat er niet meer is. Bewust geen kale 404: iemand
    komt hier via Google of een oude link, en die verdient een weg terug. */
.bs__vacancygone {
	padding: 2rem;
	border: 1px solid rgba(135, 135, 135, 0.25);
	border-radius: var(--bs-radius);
	background: var(--bs-sand);
	text-align: center;
}

.bs__vacancygone .bs__title { margin-bottom: var(--bs-heading-gap); }

.bs__newsdetailphoto {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: var(--bs-gap);
	border-radius: var(--bs-radius);
}

/*  De gouden "Aanmelden"-knop in het menu. style.css geeft de knop zelf witte
    tekst (met !important), maar de tekst zit in een <span>, en voor dat span
    geldt `#nav > ul > li:hover > a > span { color: goud }` -- goud op goud,
    dus de tekst verdween zodra je eroverheen ging. Op een gewone menulink is
    dat precies de bedoeling (grijs wordt goud), alleen op de knop niet. */
#nav > ul > li:hover > a.fa-check > span,
#nav > ul > li > a.fa-check:hover > span,
#nav > ul > li.active > a.fa-check > span {
	color: #fff;
}

#nav > ul > li > a.fa-check:hover {
	background: #b98e51;
}

/*  Eén teamlid: foto links, tekst rechts. De foto houdt dezelfde staande
    verhouding als in het teamoverzicht, zodat iemand er na het doorklikken
    hetzelfde uitziet. Onder de 736px komt de foto boven de tekst, en dan niet
    schermbreed: een portret van 375px hoog duwt alles onder de vouw. */
.bs__teamdetail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: var(--bs-gap);
	align-items: start;
}

.bs__teamdetail--nophoto { grid-template-columns: minmax(0, 1fr); }

.bs__teamdetailphoto img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--bs-radius);
}

.bs__teamcontact {
	margin: 0 0 var(--bs-gap);
	padding: 0;
	list-style: none;
}

.bs__teamcontact li {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 0.4em;
}

.bs__teamcontact .fa {
	width: 1.2em;
	text-align: center;
	color: var(--bs-gold);
}

.bs--ondark .bs__teamcontact .fa { color: var(--bs-white); }

@media screen and (max-width: 736px) {
	.bs__teamdetail { grid-template-columns: minmax(0, 1fr); }
	.bs__teamdetailphoto { max-width: 260px; }
}

/*  De lijstweergave van de blog: geen kaarten maar regels onder elkaar, voor
    een overzichtspagina met tientallen berichten. */
.bs__news--list {
	display: block;
}

.bs__news--list .bs__newsitem {
	padding: 1.25rem 0;
	border-bottom: 1px solid rgba(135, 135, 135, 0.25);
}

.bs--ondark .bs__news--list .bs__newsitem { border-bottom-color: rgba(255, 255, 255, 0.22); }

.bs__news--list .bs__newslink {
	display: grid;
	grid-template-columns: 12rem 1fr;
	gap: 1.5rem;
	align-items: start;
}

.bs__news--list .bs__newsphoto { margin-bottom: 0; }

/*  Zonder foto mag de tekst de volle breedte pakken in plaats van een gat te
    laten waar de foto had gestaan. */
.bs__news--list .bs__newslink:not(:has(.bs__newsphoto)) {
	grid-template-columns: 1fr;
}

@media screen and (max-width: 620px) {
	.bs__news--list .bs__newslink { grid-template-columns: 1fr; }
	.bs__news--list .bs__newsphoto { margin-bottom: 1em; }
}

/* ---------------------------------------------------------------------------
   Het aanmeldformulier voor kandidaten
   ---------------------------------------------------------------------------
   De opmaak van de velden komt uit css/style.css: dit formulier stond eerst in
   templates/subscribe-new.php en gebruikt het oude skel-formulier. Dat is
   bewust zo gelaten -- het formulier is uitgenomen en niet nagebouwd, dus de
   opmaak hoort ook hetzelfde te blijven.

   Wat hier staat is alleen de ruimte eromheen, en de melding die in de
   bewerkomgeving in plaats van het formulier komt.
   --------------------------------------------------------------------------- */

.bs__candidateform .row { margin-bottom: 0; }

/*  In het bewerkscherm wordt het formulier niet ingeladen: het heeft een upload
    en een `action`, het iframe herlaadt voortdurend, en er valt niets aan te
    bewerken omdat de velden vastliggen. Deze melding legt dat uit in plaats van
    een leeg vlak achter te laten. */
.bs__formplaceholder {
	padding: 1.75rem;
	border: 2px dashed rgba(150, 124, 87, 0.5);
	border-radius: var(--bs-radius);
	background: var(--bs-sand);
}

.bs__formplaceholder p { margin: 0 0 0.75em; }
.bs__formplaceholder p:last-child { margin-bottom: 0; }

.bs--ondark .bs__formplaceholder {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.07);
}

/*  Een sectie die alleen op het overzicht of alleen op een detailpagina staat.
    Alleen zichtbaar in de builder: daar blijft zo'n sectie altijd staan, anders
    kun je hem nooit bewerken. Het randje maakt duidelijk dat een bezoeker hem
    niet overal ziet. */
.bs--conditional {
	outline: 2px dashed rgba(150, 124, 87, 0.45);
	outline-offset: -4px;
}

/*  Een gedeeld blok in het bewerkscherm. Alleen daar zichtbaar: een bezoeker
    ziet een gewone sectie. De rand maakt duidelijk dat een wijziging hier verder
    reikt dan deze pagina. */
.bs--shared {
	outline: 2px solid rgba(150, 124, 87, 0.55);
	outline-offset: -3px;
}