@import url('/_font-awesome/all.min.css');

/** ISO in CSS
  \0020   = space
  \00a0   = non-breaking space
  \00bb   = »
  \a7     = §
  \b7     = ·
  •       = •
  \02197  = arrow from left bottom to top right
  \2013   = n dash
  \2014   = m dash
  \2237   = proportion = 4 dots in square
  \2261   = identical to = 3 dashes hamburger style
  \22EF   = horizontaal ellipsis middle
  \2026   = horizontaal ellipsis bottom
  \2508   = light quadruple dash
  \2716   = heavy multiplication x


/** Named colors (light to dark)  --full list @ https://en.wikipedia.org/wiki/Web_colors#X11_color_names
  __WHITE / gray__          __YELLOW__                          __purple / dark blue__      __red__
  white         #ffffff     ivory                 #fffff0       lavender        #e6e6fa     crimson    #dc143c
  whitesmoke    #f5f5f5     lightyellow           #ffffe0       mediumpurple    #9370db     firebrick  #b22222
  gainsboro     #dcdcdc     lightgoldenrodyellow  #fafad2       cornflowerblue  #6495ed     darkred    #8b0000
  lightgray     #d3d3d3     palegoldenrod         #eee8aa       indigo          #4b0082
  silver        #c0c0c0     yellow                #ffff00       darkslateblue   #483d8b
  darkgray      #a9a9a9     gold                  #ffd700       midnightblue    #191970
  gray          #808080     olive                 #808000       mediumblue      #0000cd
  dimgray       #696969                                         navy            #000080
  darkslategray #2f4f4f


/** Sans-serif
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;

/** Serif
font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

/** Mono
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
*/


:root {
  --achtergrondkleur:         whitesmoke;
  --achtergrondkleurcontent:  white;
  --achtergrondkleurveilig:   var(--achtergrondkleur);
  --kaderkleur:               gainsboro;
  --tekstkleur:               black;
  --koppelingBlauw:           rgba(0, 0, 255, 1);
}

:target {
  padding-top: 5em;
}

*, *::before, *::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
* {
  max-width: 34em;
}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
  font-size: 10px;
}
html,
body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  background-color: var(--achtergrondkleur);
  color: var(--tekstkleur);
}
body {
  container-name: body;
  container-type: inline-size;
}
body,
body * {
  position: relative;
  font-size: 1.8rem;
}

body > *,
footer nav {
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;
}
body > * {
  background-color: var(--achtergrondkleurcontent);
}
body > div {
  display: block;
  /*flex-wrap: wrap;
  gap: 8.1rem;*/
}

#top {
  position: fixed;
  top: 4em;
  right: calc( (100vw - 36.7em) / 2 );
  padding: 1rem 2rem;
  font-size: 120%;
  text-decoration: none;
  z-index: 99;
}
@media only screen and (width < 780px) {
  #top {
    bottom: 1rem;
    top: initial;
    right: 1rem;
    padding: .2rem 1rem .7rem;
    font-size: 160%;
  }
  a#top {
    background-color: var(--koppelingBlauw);
    color: white;
  }
}

nav.intern {
  z-index: 2;
  margin-top: -4rem;
  padding: 0 0 3.4rem;
}
.intern details[open] {
  padding: 0 2rem 2em;
  background-color: var(--achtergrondkleurveilig);
  border: solid 0 var(--kaderkleur);
  border-width: 0 1px;
}
.intern details summary::before {
  line-height: 2;
  font-size: 2rem;
}
.intern details[open] summary::before {
  --fa: "\58";
  color: firebrick;
}
.intern details summary {
  display: block;
  float: right;
  margin-top: -2.5em;
  padding-right: 2rem;
}
.intern details[open] summary {
  padding-right: 0;
}
.intern h2 {
  margin-top: 0;
  padding-top: 1em;
}
.intern ul {
  margin-top: 0;
  margin-bottom: 2em;
}
.intern li {
  margin: 0;
}
.intern li::before {
  content: '\b7\00a0';  /* punt verticaal midden + nbsp */
}
.intern a {
  font-weight: 400;
}

main {
  padding-bottom: 5rem;
  z-index: 2;
  container-name: lichaam;
  container-type: inline-size;
}
footer {
  position: fixed;
  width: 100%;
  max-width: 100%;
  bottom: 0;
  padding: 0;
  background-color: var(--achtergrondkleur);
  z-index: 999;
}
footer > nav {
  border-top: solid 1px var(--achtergrondkleur);
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color: var(--achtergrondkleurcontent);
}

hgroup {
  padding-top: 1em;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  margin: 1em 0 .5em;
}
h1,
h1 * {
  font-weight: 400 !important;
  font-size: 3rem;
  margin: 0;
}
h3,
.top-h3 {
  margin-top: 2em;
}
hr + h3 {
  margin-top: 1em;
}
#de-testjes h1 {
  font-size: 2.9rem;
  margin-bottom: .5em;
}
#de-testjes h2 {
  font-size: 4.3rem;
  margin-top: 0;
}
h2, h2 * {
  font-size: 2rem;
}
h3,
h3 *,
.top-h3,
footer h2 {
  font-size: 1.4rem;
}
h4 {
  font-size: 1rem;
  font-style: italic;
}
h5, h6 {
  color: crimson;
  text-decoration: line-through;
}
h5::after, h6::after {
  content: ' [niemand wil een tekststructuur zo diep]';
}

figure,
figcaption,
p {
  margin: .5em 0 1em;
}
li {
  margin: .3em 0;
}
main li {
  margin: 1em 0;
}
main li li {
  margin: .3em 0;
}

body > header {
  z-index: 2;
  container-name: stektitel;
  container-type: inline-size;
  padding-bottom: 4rem;
}
@media only screen and (width < 44ch) {
  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 2.2rem;
  }
}
body > header details {
  z-index: 2;
}
body > header details[open] {
  margin-bottom: 3em;
}
body > header details summary {
  color: rgba(0, 0, 0, .5);
  text-align: right;
  margin-right: -1.7rem;
}
body > header details[open] summary {
  z-index: 2;
  margin-top: .5em;
  margin-right: 0;
}
body > header details summary::marker {
  position: absolute;
  color: transparent;
}
body > header details summary::before {
  content: 'Jij op het Web';
}
body > header details[open] summary::before {
  content: '';
}
body > header details[open] summary::after {
  content: '\2716';
  color: firebrick;
  font-weight: bold;
}
body > header img {
  float: right;
  height: auto;
  max-width: 200px;
}

ul, ol,
dl, dd {
  margin-top: 0;
  margin-bottom: 1em;
}
ul {
  padding-inline-start: 20px;
  list-style-type: none;
}
ul li::before {
  content: '–\00a0';  /* ndash + nbsp */
  margin-left: -14px;
}
ul ul li::before {
  content: '-\00a0';  /* koppelteken + nbsp */
  margin-left: -12px;
}
ul ul ul li::before {
  content: '\b7\00a0\00a0';  /* punt verticaal midden + nbsp */
  margin-left: -15px;
  font-weight: 700;
}
ul ul ul ul li::before {
  content: '-\00a0';  /* koppelteken +  + nbsp */
  margin-left: -15px;
  font-weight: 700;
}
dt {
  margin-bottom: .3em;
}
.ul-extra > li {
  margin-bottom: 1em;
}
ol {
  counter-reset: item;
  padding-left: 1em;
}
#testjes ol {
  padding-left: 2em;
}
ol li {
  display: block;
  text-indent: -.8em;
}
ol li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
}
ul.nadruk {
  background-color: var(--achtergrondkleurveilig);
  margin-left: -2rem;
  margin-right: -2rem;
  border: solid 0 var(--kaderkleur);
  border-width: 0 1px;
  padding: 2rem 2rem 3rem calc(2rem + 20px);
}
ul.nadruk > em:first-child + ul {
  margin-top: 1em;
}
ul + p {
  padding-left: 20px;
}
.extra-witregel {
  margin-top: 2em;
}
li li.extra-witregel {
  margin-top: 1em;
}

em {
  font-style: normal;
  font-weight: 600;
}
strong {
  font-weight: 600;
  color: firebrick;
}
small,
small a {
  font-size: 90%;
}
small * {
  font-size: inherit;
}
h4 small,
p small {
  font-size: 90%;
}
u {
  text-decoration: none !important;
  font-size: smaller;
  color: dimgray;
}
.nadruk u {
  color: darkgray;
}
b {
  font-style: italic;
  font-weight: inherit;
}
i {
  font-size: inherit;
}
i[lang], i[title] {
  font-style: normal;
}
i.schuin {
  font-style: italic;
}
i.onderstreep {
  font-style: normal;
  text-decoration: underline;
}
del {
  text-decoration: line-through;
  opacity: .25;
}
del[title] {
  cursor: help;
}
ins {
  border-bottom: dotted 1px;
  text-decoration: none;
}
ins[onclick] {
  cursor: pointer;
}
kbd,
code {
  font-family: consolas, monospace;
}
kbd {
  background-color: lavender;
  padding: 0 .2em;
}
code {
  color: purple;
  font-weight: 600;
}
main pre {
  background-color: whitesmoke;
  border: solid 1px;
  border-color: lightgray silver silver lightgray;
  border-radius: 4px;
  line-height: 1.2;
  margin: 2.7rem 0;
  padding: 1.8rem;
  max-width: calc(100vw - 4rem);
  overflow: auto;
  white-space: nowrap;
}
main pre ul {
  list-style-type: circle;
  padding-left: 1em;
}
main pre kbd {
  color: teal;
}
main pre span {
  color: blue;
}
dfn,
address,
var {
  font-style: normal;
}
var {
  font-family: consolas, monospace;
}


.responsieve-tabel {
  overflow: auto;
}
.responsieve-tabel:focus {
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
  outline: 0.1em solid rgba(0, 0, 0, 0.1);
}
.responsieve-tabel > table {
  border: none;
}
table {
  border: solid 1px silver;
  border-collapse: collapse;
}
caption {
  caption-side: bottom;
  padding: .3em .5em;
}
th, td {
  border: solid 1px silver;
  padding: .3em .5em;
  vertical-align: top;
  text-align: left;
}
tbody th {
  font-weight: normal;
  font-style: italic;
}
th span,
td span {
  display: block;
}
td > .volle-breedte { /* Geef td colspan voor alle kolommen */
  max-inline-size: calc(100vw - 4rem - 2px - 1em);
  position: sticky;
  left: 0;
}


hr {
  border: none;
  border-top: solid 1px;
  opacity: .5;
  text-align: center;
}
hr.links {
  text-align: left;
  margin-inline: 0;
}
hr.witruimte {
  margin: 2em 0 1.5em;
}
hr.halve-breedte {
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}
/*
cite::before {
  content: '“';
}
cite::after {
  content: '”';
}
*/
blockquote {
  /*border-left: solid .2em rgba(0, 0, 0, .5);*/
  margin-left: 0;
  padding: 2rem 0 0 5rem;
}
blockquote:not(.normale-lettergrootte),
blockquote:not(.normale-lettergrootte) * {
  font-size: 120%;
}
blockquote::before {
  content: '“';
  font-size: 200%;
  position: absolute;
  top: 0;
  left: 2rem;
}
blockquote .source {
  text-align: right;
  font-style: italic;
  font-size: 80%;
}
blockquote .source, 
blockquote .source a {
  color: gray;
}
blockquote:hover .source,
blockquote:hover .source a {
  color: inherit;
}

figure.caption-rechts {
  display: flex;
  justify-content: flex-start;
  gap: 1em;
}
figure.caption-rechts figcaption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
}
figure img {
  height: auto;
  max-width: 100%;
}
.flex {
  display: flex;
  flex-direction: row;
}
.flex > * {
  display: inline-block;
}
.flex.helft > * {
  width: 100%;
}
@media only screen and (width < 21em) {
  .flex.helft {
    flex-direction: column;
  }
}
img.icoon {
  width: auto;
  height: 1em;
}
img.icoon.midden {
  vertical-align: middle;
}
img.sub {
  vertical-align: sub;
}
.rechts {
  float: right;
  height: auto;
  margin: 0 0 1em 2em;
}
.rechts img {
  height: auto;
}
figure.rechts {
  margin-top: .3em;
  z-index: 99;
}
.w15 {
  max-width: 15%;
}
.w25 {
  max-width: 25%;
}
@media only screen and (width < 21em) {
  figure.rechts {
    float: none;
    margin: 3em auto 1em;
  }
  figure.w15,
  figure.w25 {
    max-width: 100%;
  }
  figure.rechts + h3 {
    margin-top: 0;
  }
}

iframe {
  min-width: 50rem;
  max-width: 100%;
  height:539px;
  border:none;
}

form {
  margin-bottom: 3em;
}
form div {
  margin-bottom: 1em;
}
form label {
  display: block;
  margin: 1em 0;
}
label:focus-within {
  font-weight: 600;
}
label > input {
  margin-top: .3em;
}
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
textarea {
  border: none;
  padding: .75em 1em;
  width: 100%;
  font: inherit;
  background-color: lavender;
}
input.inlinefield {
  display: inline;
  width: initial;
}
input.em4 {
  width: 4em;
  text-align: center;
}
textarea {
  min-height: 10em;
}
input[type=submit],
button,
.button {
  padding: .5em 1.5em;
  border: none;
  font: inherit;
  letter-spacing: .03em;
  background-color: green;
  color: white;
  cursor: pointer;
}
a.button {
  text-decoration: none;
}
input[type=submit]:hover,
input[type=submit]:active,
button:hover,
button:active,
.button:hover,
.button:active {
  background-color: goldenrod;
  color: black;
}
.required {
  z-index: 1;
}
.required::after {
  content: '*';
  position: absolute;
  top: .9em;
  right: .3em;
  color: crimson;
  z-index: 2;
  transition: top 1s, left .5s, background 1.5s, z-index 1.5s;
}
.required:hover::after {
  content: 'verplicht veld';
  top: -.8em;
  right: 0;
}
.required.en:hover::after {
  content: 'required field';
}
.moving-label label {
  position: absolute;
  top: .7em;
  left: 1em;
  background: transparent;
  color: dimgray;
  z-index: 99;
  transition: top 1s, left .5s, font 2s, background 1.5s, z-index 1.5s;
}
.moving-label.focus label {
  top: -.8em;
  left: 0;
  font-weight: 600;
  color: black;
}
.moving-label input,
.moving-label textarea {
  padding-left: 6em;
  transition: padding 1s;
}
.moving-label.focus input,
.moving-label.focus textarea {
  padding-left: 1em;
}

:not(li) > article,
:not(li)  > section,
h2:not(article) + article {
  margin: 4rem 0;
}
li > article,
li  > section {
  margin: 1rem 0;
}
aside {
  padding: 1rem 2rem 1.5rem;
  margin: 0 -2rem;
  background-color: white;
}
@container body (width > 137rem) {
  aside {
    max-width: 20em;
    float: right;
    margin: 2em calc(-21em - 2rem) 0 0;
    background-color: var(--achtergrondkleurcontent);
  }
}
/*
aside[aria-labelledby=additional-resources] {
  float: right;
  margin-bottom: 3.2em;
}
aside {
  padding: 1em 0;
}
aside ul {
  list-style-position: inside;
  padding: 0;
}
aside li {
  padding: 0 1em 0 2em;
  text-indent: -.9em;
}
aside li.scheiding {
  margin-top: 1em;
  border-top: dotted 1px;
  padding-top: 1em;
}
*/
nav.horizontaal ul {
  list-style: none;
  padding: 0;
}
nav.horizontaal li {
  display: inline-block;
}
nav.horizontaal li::before {
  content: '\22ef\00a0'; /* horizontaal ellipsis middle + nbsp */
}
nav.horizontaal li:first-child::before {
  content: '';
}

.binnen-de-regel {
  display: inline-block;
}
details[open].binnen-de-regel {
  display: block;
}
details[open]:not(:last-of-type) {
  margin-bottom: 1.3em;
}
details[open] summary {
  font-weight: 600;
}
summary {
  cursor: pointer;
}
details[open] summary:last-child {
  margin-bottom: .5em;
}

a {
  color: var(--koppelingBlauw);
  font-weight: 400;
  text-decoration: none;
}
a:hover {
  color: firebrick;
}
a[href^="http"]:not(.niet-extern)::after {
  content: "\00a0\02197";
  font-weight: normal;
  font-size: inherit;
  vertical-align: top;
}
a.info {
  display: inline-block;
  font-weight: 700 !important;
  padding: 0 0.53em;
  border-radius: calc(infinity * 1px);
  background-color: var(--koppelingBlauw);
  color: white;
}
h1 a.info {
  font-size: 40%;
}

:not(summary)[title] {
  text-decoration: dotted underline;
}
:not(summary, a)[title] {
  cursor: help;
}

:first-child {
  margin-top: 0;
}
:last-child {
  margin-bottom: 0;
}

.clear-left { clear: left }
.clear-right { clear: right }

.samenhouden {
  word-break: keep-all;
  white-space: nowrap;
}

.alinea-inspringen {
  margin-left: 2em;
}

.niet-visueel {
  display: none !important;
}
.onzichtbaar,
.onzichtbaar * {
  color: transparent;
}


#viewport .fa::before {
	display: inline-block;
	text-align: center;
	width: 1.1em;
}


/* Voetnoten */
label:not(.form-field) {
  cursor: pointer;
  vertical-align: super;
  line-height: 1;
  font-size: 1.4rem;
  padding-left: .1em;
  color: rgba(0, 0, 0, .5);
}
label.prominent:not(.form-field) {
  vertical-align: initial;
  font-size: inherit;
}
label:not(.form-field):hover {
  background-color: yellow;
  color: rgba(0, 0, 0, 1);
}
label:not(.form-field):before {
  content: "<";
}
label:not(.form-field):after {
content: ">";
}
label:not(.form-field) + input,
label:not(.form-field) + input + small {
  display: none;
  font-size: 1.8rem;
}
label:not(.form-field) + input:checked + small {
  display: block;
  padding: .8em 0 1em 2.5vw;
}




/******* Ongeldige HTML-elementen en -attributen VISUEEL markeren *******/

html:not([lang]),  
html[lang=""],

a:not([href])  
a[href="#"],  
a[href=""],  
a[href*="javascript:void(0)"],
button:empty,  
a:empty,

img:not([alt]),
img[alt=""],

form:not([name]):not([id]),
label:not([for])
button:not([type]),
input:not([id]),  
input:not([name]),  
select:not([id]),  
select:not([name]),  
textarea:not([id]),
textarea:not([name]),
{
  border: 5px solid red;
  content: 'O nee!';
}
/******* *******/