@font-face {
  font-family: Epilogue;
  src: url(/Epilogue-VariableFont_wght.ttf);
  font-display: swap;
  font-weight: 400 800
}
@font-face {
  font-family: Epilogue;
  src: url(/Epilogue-Italic-VariableFont_wght.ttf);
  font-display: swap;
  font-style: italic;
  font-weight: 400 800
}
@font-face {
  font-family: Epilogue Fallback;
  src: local(Arial);
  ascent-override:71.15%;descent-override:21.16%;line-gap-override:0.0%;size-adjust:107%
}

/*** Kleuren ***/
html {
  --kdl-donkergroen:      #1f4e3a;
  --kdl-accentgroen:      #62a170;
  --kdl-merkgroen:        #6ecc86;
  --kdl-zachtgroen:       #b3e4b7;
  --kdl-lichtgroen:       #d8f4d9;
  --kdl-witgroen:         #eef8f0;
  
  --kdl-lichtblauw:       #d5e7fa;
  --kdl-zachtblauw:       #a7cbf1;
  --kdl-blauw:            #6b9ce0;
  --kdl-linkblauw:        #3864a0;
  --kdl-linkdonkerblauw:  #3864a0;
  --kdl-accentblauw:      #4976b3;
  
  --kdl-actieoranje:      #fb923c;
  
  --kdl-zachtzwart:       #1b1e1b;
  --kdl-zachtwit:         #f7f7f7;
  --kdl-zachtwitdonker:   #eff1ef;
}
.lichtgroen  { background: var(----kdl-lichtgroen);  color: var(--kdl-zachtzwart); }
.blauw       { background: var(--kdl-blauw);         color: var(--kdl-zachtzwart); }
.donkergroen { background: var(--kdl-donkergroen);   color: var(--kdl-zachtwit); }
.zwart       { background: var(--kdl-zachtzwart);    color: var(--kdl-zachtwit); }
.wit         { background: var(--kdl-zachtwit);      color: var(--kdl-zachtzwart); }

.mintgroen       { background: #2ed4bf; color: var(--kdl-zachtzwart); }
.geel            { background: #facc14; color: var(--kdl-zachtzwart); }
.paars           { background: #a68cfa; color: var(--kdl-zachtzwart); }
.roze            { background: #e082ba; color: var(--kdl-zachtzwart); }
.frisgroen       { background: #a3e536; color: var(--kdl-zachtzwart); }
.koraalrood      { background: #f16357; color: var(--kdl-zachtzwart); }
.frisblauw       { background: #38bdf7; color: var(--kdl-zachtzwart); }
.lichtmintgroen  { background: #91e8de; color: var(--kdl-zachtzwart); }
.lichtgeel       { background: #fce385; color: var(--kdl-zachtzwart); }
.lichtpaars      { background: #d1c2fc; color: var(--kdl-zachtzwart); }
.lichtroze       { background: #f0bfdb; color: var(--kdl-zachtzwart); }
.lichtfrisgroen  { background: #d9f2ab; color: var(--kdl-zachtzwart); }
.lichtkoraalrood { background: #f2b1b1; color: var(--kdl-zachtzwart); }
.lichtfrisblauw  { background: #b0def7; color: var(--kdl-zachtzwart); }

.knop        { background: var(--kdl-merkgroen);     color: var(--kdl-zachtzwart); }
.knophover   { background: var(--kdl-accentgroen);   color: var(--kdl-zachtzwart); }

.lg-dg  { background: var(--kdl-lichtgroen) !important;   color: var(--kdl-donkergroen); }
.dg-lg  { background: var(--kdl-donkergroen) !important;  color: var(--kdl-lichtgroen); }
.o-z    { background: var(--kdl-actieoranje) !important;  color: var(--kdl-zachtzwart); }
.b-z    { background: var(--kdl-blauw) !important;        color: var(--kdl-zachtzwart); }


/*** Rest ***/
html {
  font-size: 10px;
}
body {
  margin: 0;
  font-family: Epilogue, "Epilogue Fallback";
  letter-spacing: 0px; /* letter-spacing: 1px; */
  font-size: 1.6rem;
  line-height: 1.65;
  font-weight: 400;
  background: var(--kdl-zachtwit);
}
footer {
  width: 100%;
  z-index: 99;
}
header,
main > *,
footer > * {
  max-width: 40em;
  height: 100%;
  margin: 0 auto;
  padding: 0 2.5em;
  background: white;
}
main.volle-breedte > * {
  max-width: 100%;
}
body.volle-breedte header > *,
body.volle-breedte main > *,
body.volle-breedte footer > * {
  width: 100%;
}
header,
header > * {
  background: var(--kdl-donkergroen);
  color: white;
}
header hgroup + p {
  margin-bottom: 0;
  padding-bottom: 1em;
}
footer > * {
  background: var(--kdl-zachtwitdonker);
}
footer .kdl-logo_tussenfase {
  width: auto;
  max-height: 79px;
  max-width: 100%;
  display: block;
  margin-inline: auto;
  padding: .5em;
}
hgroup {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
header nav {
  display: none;
  padding-bottom: 3rem;
}
main > * {
  padding-top: 4rem;
  padding-bottom: 18rem;
}

#site-titel {
  font-size: 1.8em;
  font-weight: 800;
  margin: 0;
  margin-block-start: .6em;
}
h1 {
  font-weight: 800;
  margin: 0 0 1em;
}
h1 small {
  font-size: 50%;
  font-weight: normal;
}
h2 {
  font-weight: 500;
}
main h2 {
  margin-block-start: 1.5em;
  margin-block-end: .3em;
}
h3 {
  font-weight: 400;
  margin-top: 2em;
}
h4, h5, h6 {
  font-weight: normal;
  text-decoration: line-through;
}
hgroup img {
  height: auto;
  width: 100%;
  max-width: 80px;
  margin-right: 22px;
  float: left;
}
hgroup h2 {
  margin-top: 1em;
}
hgroup h2 > * {
  display: inline-block;
  border-radius: calc(infinity * 1px);
  padding: .8em 1.5em .6em;
  font-size: .7em;
  font-weight: 500;
  background: grey;
  transform: rotate(-3deg);
}
hgroup #site-titel + p {
  clear: both;
  margin-block-start: 2em;
}

p, ul, ol, iframe {
  margin: 0 0 1em;
}
p:last-child,
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

code {
  font-family: consolas, monospace;
}

a {
  color: var(--kdl-linkblauw);
}
header nav a {
  color: yellow;
}
button[popovertarget] {
  anchor-name: --tooltip;
  display: inline;
  position: relative;
  width: 1.2em;
  height: 1.2em;
  border-radius: calc(infinity * 1px);
  border-width: 0;
  margin-left: .2em;
  padding: .05em 0 0 .05em;
  vertical-align: middle;
  text-align: center;
  background: var(--kdl-merkgroen);
  cursor: pointer;
}
button[popovertarget]:hover {
  background: var(--kdl-donkergroen);
  color: white;
}
[popover] {
  position-anchor: --tooltip;
  margin: 0;
  top: anchor(--tooltip 120%);
  left: calc(50% - 20em);
  right: 2.5em;
  width: unset;
  max-width: 30em;
  border: solid .2em var(--kdl-donkergroen);
  border-radius: 2rem;
  padding: 4rem;
  background-color: var(--kdl-lichtgroen);
  font-size: .66em;
  font-weight: 300;
}
@media screen and (width < 810px) {
  [popover] { left: 2.5em; }
}
@media screen and (width < 500px) {
  [popover] { left: 1em; right: 1em; }
}

.nadruk { /* Alleen voor block */
  margin-right: -2.5em;
  margin-left: -2.5em;
  padding: .5em 2.5em;
  background-color: var(--kdl-witgroen);
}

.afbreken-zonder-koppelteken {
  overflow-wrap: break-word;
}

.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;
}

.fleks {
  display: flex;
  flex-direction: row;
  gap: 1em;
  flex-wrap: wrap;
}
.tab-grid {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: 1px;
}
.tab-grid details {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1 / span 2;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.tab-grid summary {
  grid-column: var(--n) / span 1;
  grid-row: 1;
  display: grid;
  padding: 1rem;
  background-color: silver;
  color: black;
  border-radius: 1em 1em 0 0;
  border-bottom: 2px solid var(--kdl-donkergroen);
  cursor: pointer;
  z-index: 3;
}

.tab-grid details[open] :is(summary, .summary) {
  font-weight: bold;
  background-color: var(--kdl-donkergroen);
  color: white;
}
.tab-grid details[open], details[open] * {
  z-index: 2;
}
.tab-grid details::details-content {
  grid-row: 2;
  grid-column: 1 / -1;
  padding: 1rem;
  border-bottom: 2px solid var(--kdl-donkergroen);
}

.tab-grid details:not([open])::details-content {
  display: none;
}

@media screen and (width < 500px) {
  h1 { font-size: 1.6em; }
  h2 { font-size: 1.3em; }
  header > *,
  main > *,
  footer > * {
    padding-right: 1em;
    padding-left: 1em;
  }
  [popover] {
    padding: 2rem;
  }
}
@media screen and (width < 40em) {
  .tab-grid {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    column-gap: .5rem;
  }

  .tab-grid summary,
  details::details-content {
    padding: .5rem;
  }
}