@font-face {
  font-family: Epilogue;
  src: url(../Epilogue-VariableFont_wght.ttf);
  font-display: swap;
  font-weight: 300 700
}
@font-face {
  font-family: Epilogue;
  src: url(../Epilogue-Italic-VariableFont_wght.ttf);
  font-display: swap;
  font-style: italic;
  font-weight: 300 700
}

/*** Kleuren ***/
html {
  --kdl-donkergroen:  #1f4e3a;
  --kdl-accentgroen:  #62a170;
  --kdl-merkgroen:    #6ecc86;
  --kdl-zachtgroen:   #b3e4b7;
  --kdl-lichtgroen:   #d8f4d9;
  --kdl-witgroen:     #edf7f0;
  
  --kdl-lichtblauw:   #d5e7fa;
  --kdl-zachtblauw:   #a7cbf1;
  --kdl-blauw:        #6b9ce0;
  --kdl-accentblauw:  #4976b3;
  
  --kdl-zachtwit:     #f7f7f7;
  --kdl-zachtzwart:   #1b1e1b;
}
.lichtgroen { background: #86d78a; color: var(--kdl-donkergroen); }
.blauw { background: #5a9ee4; color: #000000; }
.donkergroen { background: var(--kdl-donkergroen); color: #86d78a; }

.zwart { background: black; color: white; }
.wit { background: white; }

.turquoise { background: #2dd4bf; }
.paars { background: #a78bfa; }
.oranje { background: #38bdf8; }
.geel { background: #a3e635; }
.roze { background: #fb923c; }
.lichtblauw { background: #facc15; }
.limoen { background: #e082ba; }

.lg-dk { background: #86d78a !important; color: var(--kdl-donkergroen); }
.dg-lg { background: var(--kdl-donkergroen) !important; color: #86d78a; }
.o-z { background: #f9923b !important; color: #000000; }
.b-z { background: #5a9ee4 !important; color: #000000; }


/*** Rest ***/
html {
  font-size: 10px;
}
body {
  margin: 0;
  font-family: Epilogue, Helvetica, Arial, sans-serif;
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 300;
  background: gainsboro;
}
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 2em;
  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 > * {
  background: var(--kdl-donkergroen);
  color: white;
}
footer > * {
  background: #86d78a;
}
hgroup {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
header nav {
  display: none;
  padding-bottom: 3rem;
}
main > * {
  padding-top: 4rem;
  padding-bottom: 18rem;
}

h1 {
  font-weight: 700;
  margin: 0;
}
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 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);
}

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

code {
  font-family: consolas, monospace;
}

a {
  color: #3778B8;
}
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;
  }
}