@charset "UTF-8";

/* Document */
:root {
  --kleur-primair: #c32122;
  --kleur-secundair: #27995a;
  --kleur-kop-achter: #fff;
  --kleur-kop-tekst: #212121;
  --kleur-navigatie1: #840d9c;
  --kleur-navigatie2: #ec3737;
  --kleur-voet-achter: #e9e4f0;
  --kleur-voet-achter2: #cac6cf;
  --kleur-voet-link: #333;
  --kleur-voet-details: #aaa;
  --kleur-voet-tekst: #777;
  --kleur-pagina: #f5f6fa;
  --kleur-accent1: #86afab;
  --kleur-accent2: #bf9890;
  --kleur-accent3: #ccaf94;
  --kleur-accent4: #a7b4c5;
  --maxbreedte: 1280px;
  --kophoogte: 60px;
  --voethoogte: 240px;
  --vinger: 48px;
  --transitie-snel: 200ms;
  --transitie-normaal: 400ms;
  --transitie-langzaam: 600ms;
}

@font-face {
  font-family: brush;
  src: url(brush.woff);
}

html, body, div, .hoofdmenu ul, .hoofdmenu li {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
body {
  position: relative;
  font-family: "Noto Sans", Arial, sans-serif;
  font-weight: 400;
  padding-top: var(--kophoogte);
}

header {
  position: fixed;
  z-index: 255;
  top: 0;
  --schaduw-doortrekken: 1em;
  left: calc(0px - var(--schaduw-doortrekken));
  right: calc(0px - var(--schaduw-doortrekken));
  background-color: var(--kleur-kop-achter);
  box-shadow: 0 3px 3px rgba(0,0,0,.1);
  margin-left: var(--schaduw-doortrekken);
  margin-right: var(--schaduw-doortrekken);
}

/* Breedte */
.beperk,
.artikel {
  max-width: min(1140px, calc(100% - var(--vinger)));
  padding: 0 max(50% - 1140px / 2, var(--vinger) / 2);
}

/* Kop */
.kop {
  height: var(--kophoogte);
  line-height: var(--kophoogte);
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  font-size: 20px;
}
.kop .signature { text-decoration: none; }
.kop .signature .logo {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Hoofdmenu */
#menu-schakelaar { display: none; }
#menu-aan,
#menu-uit {
  float: right;
  cursor: pointer;
  display: none;
}
.hoofdmenu .link {
  transition:
    color var(--transitie-langzaam) ease,
    box-shadow var(--transitie-langzaam) ease;
}
.hoofdmenu .link:hover {
  transition:
    color var(--transitie-snel) ease,
    box-shadow var(--transitie-snel) ease;
}

@media (min-width: 1050px) {
  .hoofdmenu .menu { display: inline-block; }
  .hoofdmenu .item { float: left; }
  .hoofdmenu .item .link {
    font-size: 18px;
    display: block;
    padding: 0 1em;
    color: var(--kleur-kop-tekst);
    text-decoration: none;
  }
  .hoofdmenu .item .link:hover {
    color: var(--kleur-primair);
    box-shadow: inset 0 -4px 0 var(--kleur-secundair);
  }
}
@media (max-width: 1050px) {
  label #menu-aan,
  label #menu-uit {
    font-size: 0;
    height: var(--kophoogte);
    width: var(--kophoogte);
    padding: 0 24px;
    position: relative;
  }
  label #menu-aan:before,
  label #menu-uit:before {
    position: absolute;
    display: block;
    top: 0; left: 0; right: 0;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    transition: color var(--transitie-normaal) ease;
  }
  label #menu-aan:before { content: "☰"; }
  label #menu-uit:before { content: "✕"; }
  label #menu-aan:hover,
  label #menu-uit:hover {
    color: var(--kleur-primair);
  }
  label #menu-aan { display: block; }
  #menu-schakelaar:checked ~ label #menu-aan { display: none; }
  #menu-schakelaar:checked ~ label #menu-uit { display: block; }
  #menu-schakelaar:checked ~ .menu {
    transform: translateX(0);
    opacity: 1;
  }
  .hoofdmenu .menu {
    position: fixed;
    top: var(--kophoogte);
    left: 0; right: 0;
    height: calc(100vh - var(--kophoogte));
    height: calc(100dvh - var(--kophoogte));
    background-color: var(--kleur-kop-achter);
    transform: translateX(-100%);
    text-indent: 2em;
    line-height: var(--kophoogte);
    opacity: 0;
    z-index: 128;
    background-color: #0007;
    overflow: auto;
  }
  .hoofdmenu .item {
    height: var(--vinger);
    line-height: var(--vinger);
    background-color: var(--kleur-kop-achter);
    box-shadow: inset 0 1px 0 #7773;
  }
  .hoofdmenu .item:last-child {
    box-shadow: inset 0 1px 0 #7773, 0 8px 8px rgba(0,0,0,.15);
  }
  .hoofdmenu .item .link {
    display: block;
    text-decoration: none;
    color: var(--kleur-kop-tekst);
    box-shadow: inset 0 0 0 var(--kleur-secundair);
  }
  .hoofdmenu .item .link:hover {
    color: var(--kleur-primair);
    box-shadow: inset 4px 0 0 var(--kleur-secundair);
  }
}

/* Sfeerbeeld */
.sfeer {
  position: relative;
  --hoogte: calc(100vh - calc(var(--kophoogte) * 5));
  height: var(--hoogte);
  max-height: 400px;
  text-align: center;
  z-index: 1;
  background-color: #777;
}
.sfeerschild {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #0000;
  z-index: 3;
}
.slide {
  appearance: none;
  margin: 1em;
  font-size: calc(var(--vinger) / 2);
}
.slide::before {
  content: attr(data-text);
  position: absolute;
  display: block;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  transition: opacity 1s linear;
  opacity: 0;
  color: white;
  font-size: 10vh;
  font-weight: bold;
  text-align: center;
  padding-top: calc(var(--hoogte) / 6);
  padding-left: calc(100vw / 20);
  padding-right: calc(100vw / 20);
  --tekstrand: 2px;
  --tekstrandmin: calc(0px - var(--tekstrand));
  --tekstrandkleur: #0007;
  text-shadow:
    var(--tekstrandmin) var(--tekstrandmin) 0 var(--tekstrandkleur),
    var(--tekstrandmin) var(--tekstrand) 0 var(--tekstrandkleur),
    var(--tekstrand) var(--tekstrand) 0 var(--tekstrandkleur),
    var(--tekstrand) var(--tekstrandmin) 0 var(--tekstrandkleur),
    5px 8px 10px #0007;
  overflow: hidden;
  background-image: var(--sfeer);
  background-size: cover;
  background-position: center;
}
@media (max-width: 768px) { .slide::before { font-size: 5vh; } }
@media (min-width: 768px) { .slide::before { font-size: 6vh; } }
@media (min-width: 1050px) { .slide::before { font-size: 7vh; } }
.slide:checked::before { opacity: 1; }
.slide::after {
  content: "";
  position: absolute;
  display: block;
  width: 1.25em;
  height: 1.25em;
  bottom: 1em;
  border: 3px solid white;
  border-radius: 50px;
  background-color: #0007;
  z-index: 4;
  cursor: pointer;
  box-shadow: 5px 8px 10px #0007;
}
.slide:checked::after { background-color: white; }

/* Pagina */

.pagina {
  min-height: calc(calc(calc(100vh - var(--kophoogte))
    - var(--voethoogte))
    - var(--vinger));
  background-color: #f5f6fa;
}

.artikel {
  padding-top: 2em;
  line-height: 1.6em;
  min-height: 10em;
  color: #424242;
  overflow: hidden;
  font-size: 18px;
}
.artikel.accent1 {
  background-image: linear-gradient(45deg,
    var(--kleur-accent1) 0%, var(--kleur-pagina) 100%);
}
.artikel.accent2 {
  background-image: linear-gradient(-45deg,
    var(--kleur-accent2) 0%, var(--kleur-pagina) 100%);
}
.artikel.accent3 {
  background-image: linear-gradient(225deg,
    var(--kleur-accent3) 0%, var(--kleur-pagina) 100%);
}
.artikel.accent4 {
  background-image: linear-gradient(-225deg,
    var(--kleur-accent4) 0%, var(--kleur-pagina) 100%);
}
.artikel .titel {
  display: inline-block;
  font-size: 40px;
  font-family: brush;
  text-indent: 0.05em;
  letter-spacing: 0.03em;
  line-height: 1.15em;
  margin-top: 0;
  margin-bottom: 0;
  border-bottom: 3px solid #041d3133;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  background-image: linear-gradient(to right, #041d31 0%, #041d31aa 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rij {
  margin: 2em 0;
  display: flex;
  flex-wrap: wrap;
  align-items: top;
  justify-content: space-evenly;
  gap: 2em;
}
.rij div img {
  box-shadow: 2px 3px 5px #0003;
}

.navigeer {
  clear: both;
  margin-top: 2em;
  margin-bottom: 2em;
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: space-around;
}
.navigeer .link {
  position: relative;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kleur-kop-tekst);
  transition: all var(--transitie-langzaam) ease;
  background: linear-gradient(to right,
    var(--kleur-navigatie1), var(--kleur-navigatie2));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-left: 20px;
  padding-right: 48px;
  height: 40px;
  line-height: 40px;
  box-shadow: inset 0 0 0 #fff1, 0 0 0 #0003;
}
.navigeer .link:hover {
  box-shadow: inset 0 40px 0 #fff2, 2px 3px 5px #0003;
  color: var(--kleur-navigatie2);
  transition: all var(--transitie-snel) ease;
}
.navigeer .link::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(to right, var(--kleur-navigatie1), var(--kleur-navigatie2)),
    linear-gradient(to right, var(--kleur-navigatie1), var(--kleur-navigatie1)),
    linear-gradient(to right, var(--kleur-navigatie2), var(--kleur-navigatie2)),
    linear-gradient(to right, var(--kleur-navigatie1), var(--kleur-navigatie2));
  background-size: 100% 2px, 2px 100%, 2px 100%, 100% 2px;
  background-position: top left, left, right, bottom left;
  background-repeat: no-repeat;
}
.navigeer .link::after {
  content: "";
  position: absolute;
  display: block;
  height: 6px;
  width: 6px;
  right: 24px;
  top: calc(50% - 4px);
  border-top: 3px solid var(--kleur-navigatie2);
  border-right: 3px solid var(--kleur-navigatie2);
  transform: rotateZ(45deg);
  transition: all var(--transitie-langzaam) ease;
}
.artikel .navigeer .link:hover:after {
  border-top: 3px solid var(--kleur-navigatie1);
  border-right: 3px solid var(--kleur-navigatie1);
  transform: rotateZ(45deg) skew(-10deg, -10deg);
  transition: all var(--transitie-snel) ease;
  right: 18px;
}
.kaart {
  width: 100%;
  min-height: 350px;
  border: 1px solid grey;
}

.afbeelding {
  max-width: 50%;
  padding: 6px;
  background: #fafafa;
  border-radius: 3px;
  box-shadow: 2px 3px 5px #0002;
}
.rechts {
  float: right;
  margin: 1.5em .5em 2em 1.5em;
  transform: rotateZ(2deg);
}
.links {
  float: left;
  margin: 1.5em 1.5em 2em .5em;
  transform: rotateZ(-2deg);
}
.clear { clear: both; }

.voet {
  min-height: var(--voethoogte);
  background-color: var(--kleur-voet-achter);
  color: var(--kleur-voet-tekst);
  display: flex;
  gap: calc(var(--vinger) / 2);
  padding: calc(var(--vinger) / 2);;
  flex-direction: column;
  justify-content: space-evenly;
  background-image: url("img/voet.png"),
    linear-gradient(20deg,
    var(--kleur-voet-achter) 0%,
    var(--kleur-voet-achter2) 100%);
  background-position: center, center;
  background-size: cover, cover;
  box-shadow: inset 0 3px 3px rgba(0,0,0,.067);
}
.voet .kolommen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: calc(var(--vinger) / 2);;
  align-items: top;
}
.voet .kolom {
  flex-shrink: 0;
  line-height: 1.6em;
}
.voet .tekst {
  text-align: center;
  color: var(--kleur-voet-details);
  margin: 0;
}
.voet .link {
  display: inline-block;
  color: var(--kleur-voet-link);
  text-decoration: none;
  border-bottom: 1px solid var(--kleur-voet-details);
  height: 1.3em;
  transition: border-bottom var(--transitie-langzaam) ease;
}
.voet .link:hover {
  border-bottom: 1px solid var(--kleur-voet-link);
  transition: border-bottom var(--transitie-snel) ease;
}
.voet .link[target=_blank] { position: relative; }
.voet .link[target=_blank]:after {
  content: "🡒";
  position: absolute;
  display: block;
  color: var(--kleur-voet-details);
  border: 1px solid var(--kleur-voet-details);
  border-right: 0;
  font-size: smaller;
  width: 8px;
  height: 9px;
  line-height: 7px;
  text-indent: 3px;
  top: 6px;
  right: -1em;
  transition: all var(--transitie-langzaam) ease;
}
.voet .link[target=_blank]:hover:after {
  color: var(--kleur-voet-link);
  border: 1px solid var(--kleur-voet-link);
  border-right: 0;
  transition: all var(--transitie-snel) ease;
}