/* ==========================================
   RESET
========================================== */
:root {
  /* ==========================================
       Grijswaarden (0 = wit, 100 = zwart)
       ========================================== */
  --kleur-0: #ffffff;
  --kleur-5: #f2f2f2;
  --kleur-10: #e6e6e6;
  --kleur-15: #d9d9d9;
  --kleur-20: #cccccc;
  --kleur-25: #bfbfbf;
  --kleur-30: #b3b3b3;
  --kleur-35: #a6a6a6;
  --kleur-40: #999999;
  --kleur-45: #8c8c8c;
  --kleur-50: #808080;
  --kleur-55: #737373;
  --kleur-60: #666666;
  --kleur-65: #595959;
  --kleur-70: #4d4d4d;
  --kleur-75: #404040;
  --kleur-80: #333333;
  --kleur-85: #262626;
  --kleur-90: #1a1a1a;
  --kleur-95: #0d0d0d;
  --kleur-100: #000000;
}

.theme1 {
  --body-bg: var(--kleur-20);
  --body-c: var(--kleur-70);

  --a: var(--kleur-80);
  --a-visited: var(--kleur-90);
  --a-hover: var(--kleur-65);
  --a-active: var(--kleur-90);
  --a-focus: var(--kleur-90);

  --hr: var(--kleur-0);
  --website-bg: var(--kleur-0);
  --website-shadow: var(--kleur-50);
  --content-bg: var(--kleur-0);
  
  --data-bg: var(--kleur-10);
  --dataregelkop-bg: var(--kleur-90);
  --dataregelkop-c: var(--kleur-0);
  --dataregel-top: var(--kleur-0);
  --dataregel-bottom: var(--kleur-30);
  --dataregel-odd: var(--kleur-5);
  --dataregel-even: var(--kleur-10);
  --dataregel-hover: var(--kleur-15);
  
  --header-bg: var(--kleur-50);
  --header-c: var(--kleur-90);
  --header-border-bottom: var(--kleur-0);

  --agenda-bar-bg: var(--kleur-45);
  --agenda-bar-c: var(--kleur-0);
  --agenda-bar-c-hover: var(--kleur-10);
  
  --nav-topbar-bg: var(--kleur-70);
  --nav-topbar-c: var(--kleur-20);
  --nav-topbar-button-bg: var(--kleur-70);
  --nav-topbar-button-c: var(--kleur-0);
  --nav-topbar-button-bg: var(--kleur-70);
  --nav-sidebar-bg: var(--kleur-80);
  --nav-sidebar-c: var(--kleur-0);
  --nav-group-title-bg: var(--kleur-70);
  --nav-sidebar-a-c: var(--kleur-30);
  --nav-sidebar-a-hover-bg: var(--kleur-70);
  --nav-sidebar-a-hover-c: var(--kleur-0);
  --nav-sidebar-a-active-bg: var(--kleur-80);
  --nav-sidebar-a-activec:  var(--kleur-30);

  --button-bg: var(--kleur-50);
  --button-c: var(--kleur-0);
  --button-border: var(--kleur-80);
  --button-bg-hover: var(--kleur-70);
  --input-textarea-select-border:var(--kleur-80);
}

/* ==========================================
   THEME 2 (donker)
   ========================================== */
.theme2 {
  /* ==========================================
       Groenwaarden (0 = wit, 100 = zwart)
       ========================================== */
	   
--kleur-0:   #f7faf7; /* paper wit met groen tint */
--kleur-5:   #eef4ee;
--kleur-10:  #e3ece3;
--kleur-15:  #d7e1d7;
--kleur-20:  #c8d3c8;
--kleur-25:  #b6c4b6;
--kleur-30:  #a3b3a3;
--kleur-35:  #8fa18f;
--kleur-40:  #7b8f7b;
--kleur-45:  #687d68;
--kleur-50:  #566a56;

--kleur-55:  #4a5e4a;
--kleur-60:  #3e523e;
--kleur-65:  #334633;
--kleur-70:  #283a28;
--kleur-75:  #1e2e1e;
--kleur-80:  #162216;
--kleur-85:  #0f170f;
--kleur-90:  #0a100a;
--kleur-95:  #050805;
--kleur-100: #000000; /* zwart */

   --body-bg: var(--kleur-20);
  --body-c: var(--kleur-70);

  --a: var(--kleur-80);
  --a-visited: var(--kleur-90);
  --a-hover: var(--kleur-65);
  --a-active: var(--kleur-90);
  --a-focus: var(--kleur-90);

  --hr: var(--kleur-0);
  --website-bg: var(--kleur-0);
  --website-shadow: var(--kleur-50);
  --content-bg: var(--kleur-0);
  
  --data-bg: var(--kleur-10);
  --dataregelkop-bg: var(--kleur-90);
  --dataregelkop-c: var(--kleur-0);
  --dataregel-top: var(--kleur-0);
  --dataregel-bottom: var(--kleur-30);
  --dataregel-odd: var(--kleur-5);
  --dataregel-even: var(--kleur-10);
  --dataregel-hover: var(--kleur-15);
  
  --header-bg: var(--kleur-50);
  --header-c: var(--kleur-90);
  --header-border-bottom: var(--kleur-0);

  --agenda-bar-bg: var(--kleur-45);
  --agenda-bar-c: var(--kleur-0);
  --agenda-bar-c-hover: var(--kleur-10);
  
  --nav-topbar-bg: var(--kleur-70);
  --nav-topbar-c: var(--kleur-20);
  --nav-topbar-button-bg: var(--kleur-70);
  --nav-topbar-button-c: var(--kleur-0);
  --nav-topbar-button-bg: var(--kleur-70);
  --nav-sidebar-bg: var(--kleur-80);
  --nav-sidebar-c: var(--kleur-0);
  --nav-group-title-bg: var(--kleur-70);
  --nav-sidebar-a-c: var(--kleur-30);
  --nav-sidebar-a-hover-bg: var(--kleur-70);
  --nav-sidebar-a-hover-c: var(--kleur-0);
  --nav-sidebar-a-active-bg: var(--kleur-80);
  --nav-sidebar-a-activec:  var(--kleur-30);

  --button-bg: var(--kleur-50);
  --button-c: var(--kleur-0);
  --button-border: var(--kleur-80);
  --button-bg-hover: var(--kleur-70);
  --input-textarea-select-border:var(--kleur-80);
}

/* ==========================================
   THEME 3 (blauw / accent)
   ========================================== */
.theme3 {
  --body-bg: var(--grijs-10);
  --body-c: #0a2a4a;

  --a: #0077cc;
  --a-visited: #005fa3;
  --a-hover: #0094ff;
  --a-active: #004f88;
  --a-focus: #004f88;

  --hr: #cfe6ff;
  --website-bg: #ffffff;
  --website-shadow: rgba(0, 0, 0, 0.15);

  --data-bg: #f5faff;
  --dataregelkop-bg: #0077cc;
  --dataregelkop-c: #ffffff;

  --dataregel-top: #ffffff;
  --dataregel-bottom: #cfe6ff;
  --dataregel-odd: #f0f8ff;
  --dataregel-even: #e6f3ff;
  --dataregel-hover: #d6ecff;
}

body.theme2::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;

  /* duidelijkere scanlines */
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 0, 0.06) 0px,
    rgba(0, 255, 0, 0.06) 1px,
    transparent 1px,
    transparent 4px
  );

  /* beter zichtbaar op lichte/donkere vlakken */
  mix-blend-mode: multiply;
}

.theme2 img {
  filter: grayscale(1) contrast(1.6) brightness(0.8) sepia(0.6) hue-rotate(60deg);
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  vertical-align: top;
}

/* ==========================================
   BASIS
========================================== */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--body-bg);
  color: var(--body-c);
  font-size: 16px;
  line-height: 1.8;
}

a {
  text-decoration: none;
  color: var(--a);
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* Bezochte link */
a:visited {
  color: var(--a-visited);
}

/* Hover (muis erboven) */
a:hover {
  color: var(--a-hover);
  text-decoration: underline;
}

/* Actieve link (tijdens klikken) */
a:active {
  color: var(--a-active);
}

/* Keyboard focus (toegankelijkheid) */
a:focus {
  outline: 1px solid var(--a-focus);
  outline-offset: 2px;
}
.alt_uitgebreid {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
hr {
  border: 0;
  border-top: 1px solid var(--hr);
  margin: 0 0 10px 0;
}

/* debug (mag later weg) */
/* div { box-shadow: inset 0 0 0 2px orange; } */
div { vertical-align: top; /* heeft geen effect op een gewone div */ }
/* ==========================================
   CONTAINER
========================================== */
.website {
  width: 1800px;
    max-width: 100%;
    margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--website-bg);
  box-shadow: 0 0 20px var(--website-shadow);
}

/* ==========================================
   HOOFD LAYOUT
========================================== */
.webmaster,
.content,
header,
footer,
main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start; /* optioneel */
}

/* ==========================================
   CONTENT AREA
========================================== */
.content {
  flex: 1;
  #display: flex;
  #flex-wrap: wrap;
  padding: 20px;
  background-color: var(--content-bg);
}

button,
.button,
.button:link,
.button:visited {
  background-color: var(--button-bg);
  color: var(--button-c);
  padding: 5px 10px;
  border: solid 1px var(--button-border);
  border-radius: 5px;
}
.button:hover,
.button:focus,
.button:active {
  background-color: var(--button-bg-hover);
}
input,
textarea,
select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid var(--input-textarea-select-border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
}
/* ==========================================
   BLOKKEN (DEFAULT DESKTOP)
========================================== */
.blok100,
.blok90,
.blok80,
.blok70,
.blok60,
.blok50,
.blok40,
.blok33,
.blok30,
.blok25,
.blok20,
.blok10,
.blok5 {
  padding: 0 20px 20px 20px;
  box-sizing: border-box;
}

.blok100 {
  flex: 0 0 100%;
}
.blok90 {
  flex: 0 0 90%;
}
.blok80 {
  flex: 0 0 80%;
}
.blok70 {
  flex: 0 0 70%;
}
.blok60 {
  flex: 0 0 60%;
}
.blok50 {
  flex: 0 0 50%;
}
.blok40 {
  flex: 0 0 40%;
}
.blok33 {
  flex: 0 0 33.3333%;
}
.blok30 {
  flex: 0 0 30%;
}
.blok25 {
  flex: 0 0 25%;
}
.blok20 {
  flex: 0 0 20%;
}
.blok10 {
  flex: 0 0 10%;
}
.blok5 {
  flex: 0 0 5%;
}

/* desktop defaults */
.data {
  background-color: var(--data-bg);
  padding: 20px;
  border-radius: 10px;
}
.dataregelkop {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--dataregelkop-bg);
  color: var(--dataregelkop-c);
  width:100%;
  box-sizing: border-box;
}

.dataregel {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0 10px 0;
  border-top: solid 1px var(--dataregel-top);
  border-bottom: solid 1px var(--dataregel-bottom);
  width:100%;
  box-sizing: border-box;
}

/* oneven rijen */
.dataregel:nth-child(odd) {
  background-color: var(--dataregel-odd);
}

/* even rijen */
.dataregel:nth-child(even) {
  background-color: var(--dataregel-even);
}

/* optionele hover */
.dataregel:hover {
  background-color: var(--dataregel-hover);
}

.dataregelblok100,
.dataregelblok90,
.dataregelblok80,
.dataregelblok70,
.dataregelblok60,
.dataregelblok50,
.dataregelblok40,
.dataregelblok33,
.dataregelblok30,
.dataregelblok25,
.dataregelblok20,
.dataregelblok10,
.dataregelblok5 {
  float: left;
  padding: 0 10px;
}

.dataregelblok100 { flex: 0 0 100%; }
.dataregelblok90  { flex: 0 0 90%; }
.dataregelblok80  { flex: 0 0 80%; }
.dataregelblok70  { flex: 0 0 70%; }
.dataregelblok60  { flex: 0 0 60%; }
.dataregelblok50  { flex: 0 0 50%; }
.dataregelblok40  { flex: 0 0 40%; }
.dataregelblok33  { flex: 0 0 33.3333%; }
.dataregelblok30  { flex: 0 0 30%; }
.dataregelblok25  { flex: 0 0 25%; }
.dataregelblok20  { flex: 0 0 20%; }
.dataregelblok10  { flex: 0 0 10%; }
.dataregelblok5   { flex: 0 0 5%; }

.fa-solid,
.fa-regular,
.fa-brands {
  display: inline-block;
  width: 20px;
  margin-right: 6px;
  text-align: center;
  vertical-align: baseline;
}

/* ==========================================
   MEDIA QUERY 900px (tablet)
========================================== */
@media screen and (max-width: 900px) {
  /* alles wordt overzichtelijker */
  .blok50 {
    flex: 0 0 100%;
  }

  .blok33,
  .blok25,
  .blok20 {
    flex: 0 0 50%;
  }
  .content {
    padding: 10px;
  }
}

/* ==========================================
   MEDIA QUERY 600px (mobiel)
========================================== */
@media screen and (max-width: 600px) {
  .blok100,
  .blok50,
  .blok33,
  .blok25,
  .blok20 {
    flex: 0 0 100%;
  }
  .content {
    padding: 5px;
  }
}

/* ==========================================
   CONTENT TYPOGRAFIE
========================================== */
.content h2 {
  xxxxcolor: #003366;
  margin-bottom: 20px;
}

.content p {
  margin-bottom: 15px;
}

/* ==========================================
   IMAGE
========================================== */
img,
.img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}