@charset "UTF-8";
@font-face {
  font-family: Verdana, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Verdana, sans-serif;
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Verdana, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Verdana, sans-serif;
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Verdana, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Verdana, sans-serif;
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
:root {
  --rem-font-size: clamp(1.0rem, 2.3vw, 1.5rem);
  --h1-font-size: 1.7rem;
  --menu-font-size: 1.3rem;
  font-family: Verdana, sans-serif;
  overflow-wrap: break-word;
  --orange: #f8a039;
  --purple: #460ad9;
  --color-text: black;
  --color-background: white;
  color: var(--color-text);
  background: var(--color-background);
  --link-underline-size: 0.2em;
  font-size: var(--rem-font-size);
  --page-x-padding: 1rem;
  --logo-nav-space: 2rem;
}
@media (min-width: 576px) {
  :root {
    --page-x-padding: 2rem;
  }
}

hr {
  border-color: var(--white-green);
}

*:focus {
  outline: var(--green) solid 3px;
}

*, ::before, ::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

[hidden] {
  display: none;
}

h1, .page-title {
  font-size: var(--h1-font-size);
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.17rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 0.83rem;
}

h6 {
  font-size: 0.67rem;
}

h1, .page-title {
  margin: 0.67em 0;
}

pre {
  white-space: pre-wrap;
}

hr {
  border-style: solid;
  border-width: 1px 0 0;
  color: inherit;
  height: 0;
  overflow: visible;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}

audio:not([controls]) {
  display: none;
}

picture {
  display: contents;
}

source {
  display: none;
}

img, svg, video, canvas {
  height: auto;
}

audio {
  width: 100%;
}

html {
  line-height: 1.5;
}

h1, .page-title, h2, h3, h4, h5, h6 {
  line-height: 1.25;
}

caption, figcaption, label, legend {
  line-height: 1.375;
}

:root:lang(en), :not(:lang(en)) > :lang(en) {
  quotes: "“" "”" "‘" "’";
} /* “ ” ‘ ’ */
:root:lang(nl), :not(:lang(nl)) > :lang(nl) {
  quotes: "‘" "’" "“" "”";
} /* ‘ ’ “ ” */
img {
  border-style: none;
}

svg {
  overflow: hidden;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
}

textarea {
  overflow: auto;
}

form > ul > li > * {
  display: block;
}

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header" "main" "footer";
  grid-template-columns: var(--page-columns, 100%);
}
@media (min-width: 576px) {
  body {
    grid-template-areas: "header header" "main main" "footer footer";
    --page-columns: 50vw 1fr;
  }
}
@media (min-width: 992px) {
  body {
    --page-columns: 20vw 1fr;
  }
}

header, footer {
  padding: 1rem var(--page-x-padding);
}

header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  align-items: start;
}
header > a.logo-link {
  margin-bottom: 1rem;
}
header > .header-links {
  width: 100%;
}
@media (min-width: 576px) {
  header {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-columns: var(--page-columns, 100%);
  }
  header > a.logo-link {
    grid-column: 1/2;
    display: flex;
    align-items: start;
    margin-bottom: 0;
  }
  header > .header-links {
    grid-column: 2/3;
    width: initial;
    align-self: center;
    margin-left: var(--logo-nav-space);
  }
}

.header-links {
  display: flex;
  align-items: start;
  gap: 1rem;
}
.header-links > .social-media-links {
  margin-left: auto;
}
.header-links > .language-switcher {
  writing-mode: vertical-rl;
}
@media (min-width: 992px) {
  .header-links {
    align-items: center;
  }
  .header-links > .social-media-links {
    margin-left: 0;
  }
  .header-links > .language-switcher {
    writing-mode: initial;
    margin-left: auto;
  }
}

.main-navigation > ul {
  line-height: 1.5;
  padding-inline-start: 0;
  list-style-type: none;
  margin: 0;
}
.main-navigation > ul > li:before {
  content: "​";
  position: absolute;
}
@media (min-width: 576px) {
  .main-navigation > ul {
    line-height: 1.75;
    padding-inline-start: 0;
    list-style-type: none;
    margin: 0;
  }
  .main-navigation > ul > li:before {
    content: "​";
    position: absolute;
  }
  .main-navigation > ul > li {
    line-height: 1;
    display: inline-block;
  }
  .main-navigation > ul > li:not(:last-child) {
    margin-right: 0.5em;
  }
}

.language-switcher {
  padding-inline-start: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 0.8em;
}
.language-switcher > li:before {
  content: "​";
  position: absolute;
}
.language-switcher a {
  text-transform: lowercase;
}
.language-switcher a ::first-letter {
  text-transform: uppercase;
}

.social-media-links > ul {
  line-height: 1;
  margin: 0;
  padding: 0;
  padding-inline-start: 0;
  list-style-type: none;
}
.social-media-links > ul > li:before {
  content: "​";
  position: absolute;
}
.social-media-links > ul > li {
  margin-bottom: 0.25em;
}
@media (min-width: 1200px) {
  .social-media-links > ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25em;
  }
  .social-media-links > ul > li {
    margin-bottom: 0;
  }
}

main {
  grid-area: main;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-columns: var(--page-columns, 100%);
}

.markdown-container {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-columns: var(--page-columns, 100%);
  grid-column: 1/-1;
}

.markdown-content {
  grid-column: 1/3;
  padding: 0 var(--page-x-padding);
}
@media (min-width: 992px) {
  .markdown-content {
    grid-column: 2/3;
    padding: 0;
    max-width: 70ch;
    margin: 0 var(--logo-nav-space);
  }
}

footer {
  grid-area: footer;
  display: flex;
}
@media (max-width: 576px) {
  footer {
    flex-direction: column;
  }
  footer > *:last-child {
    margin-top: 1rem;
  }
}
@media (min-width: 576px) {
  footer {
    flex-direction: row;
    justify-content: space-between;
  }
}
footer p {
  margin: 0;
}

ul {
  padding-left: 1rem;
}
@media (min-width: 768px) {
  ul {
    padding-left: 0;
  }
}

ul.horizontal-list {
  padding-inline-start: 0;
  list-style-type: none;
  margin: 0;
}
ul.horizontal-list > li:before {
  content: "​";
  position: absolute;
}
ul.horizontal-list > li {
  line-height: 1;
  display: inline-block;
}
ul.horizontal-list > li:not(:last-child) {
  margin-right: 0.5em;
}

.icon-wrap {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

:root {
  color-scheme: light;
}

body {
  background: white;
  color: var(--color-text);
}

header {
  background: white;
  color: var(--color-text);
}

footer {
  background: white;
}

h1, .page-title, h2 {
  font-weight: 600;
}

.header-link-font.active-link, a:hover, a:focus {
  text-decoration-color: var(--purple);
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

a {
  color: var(--color-text);
  text-decoration-color: var(--orange);
  text-decoration-thickness: var(--link-underline-size);
  text-decoration-skip-ink: none;
}
.header-link-font {
  font-size: var(--menu-font-size);
  text-transform: uppercase;
}
.strong-link, section.summary a, strong > a {
  text-decoration-thickness: var(--link-underline-size);
  text-underline-offset: calc(var(--link-underline-size) / 2);
  font-weight: 600;
}

ul.collection-list {
  padding-inline-start: 0;
  list-style-type: none;
}
ul.collection-list > li:before {
  content: "​";
  position: absolute;
}
@media (min-width: 576px) {
  ul.collection-list {
    --border-left-space: var(--logo-nav-space);
  }
}
@media (min-width: 576px) and (max-width: 992px) {
  ul.collection-list {
    --border-left-space: calc(var(--logo-nav-space) / 2);
  }
}
@media (min-width: 576px) {
  ul.collection-list > li {
    padding-left: var(--border-left-space);
    margin-left: calc(0rem - var(--border-left-space));
    border-width: 0.2em;
    border-color: var(--green);
    border-style: none none none solid;
  }
}

.icon-svg {
  display: inline-block;
  background-color: var(--icon-color, var(--color-text, black));
  --icon-size: 1em;
  width: var(--icon-size);
  height: var(--icon-size);
  -webkit-mask-image: var(--svg-icon-url, url(""));
  mask-image: var(--svg-icon-url, url(""));
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.social-media-links a {
  font-size: var(--menu-font-size);
}

.icon-wrap:is(:hover, :focus, :active) > .icon-svg {
  background-color: var(--orange);
}

svg {
  display: block;
}

.logo {
  aspect-ratio: 1920/260;
  width: 100%;
  height: auto;
  fill: var(--color-text);
}

.email-link:after {
  content: attr(data-naam) "@" attr(data-domein) "." attr(data-ext);
}

.phone-link:after {
  content: attr(data-a) "-" attr(data-b);
}

li > p {
  margin: 0;
}

.index {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-columns: var(--page-columns, 100%);
  grid-column: 1/-1;
}

@media (min-width: 576px) {
  section.summary ul {
    padding-inline-start: 0;
    list-style-type: none;
  }
  section.summary ul > li:before {
    content: "​";
    position: absolute;
  }
}
section.about {
  grid-column: 1/-1;
  display: grid;
  height: fit-content;
  grid-template-rows: 1fr max-content 1fr;
  grid-template-columns: var(--page-x-padding) 1fr 2fr;
}
section.about img {
  width: 100%;
  height: auto;
  grid-row: 1/-1;
  grid-column: 1/-1;
}
section.about > p {
  margin: 0;
  grid-row: 2/span 1;
  grid-column: 2/span 1;
  padding: 1em;
  line-height: 1.75;
  background: white;
  border-width: 0.2em;
  border-color: var(--green);
  border-style: none none none solid;
}
section.about > p > a {
  display: block;
}
@media (max-width: 576px) {
  section.about {
    grid-template-rows: 1fr repeat(2, max-content);
    grid-template-columns: 100%;
  }
  section.about img {
    object-fit: cover;
    height: 50vh;
    grid-row: 1/span 2;
  }
  section.about > p {
    grid-row: 2/span 2;
    grid-column: 1/span 1;
    margin: 0 var(--page-x-padding);
    box-shadow: 0 10px 6px -6px #777;
    margin-bottom: 1rem;
  }
}

.email-link:after {
  content: attr(data-naam) "@" attr(data-domein) "." attr(data-ext);
}

.phone-link:after {
  content: attr(data-a) "-" attr(data-b);
}

li > p {
  margin: 0;
}