@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@800&family=Nunito:wght@600;700;800&display=swap');

:root {
  --bg: #FFF8EC;
  --kaart: #FFFFFF;
  --inkt: #12204A;
  --zacht: #5B6585;
  --lijn: #EADFC9;
  --oranje: #F07A12;
  --oranje-diep: #B85A08;
  --cobalt: #1E4DB3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1730;
    --kaart: #18234A;
    --inkt: #F3F5FB;
    --zacht: #A9B3D1;
    --lijn: #2A3666;
    --cobalt: #7FA4FF;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--inkt);
  font: 600 17px/1.6 'Nunito', system-ui, sans-serif;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 32px 16px 56px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 40px; }
.merk { font: 800 26px/1 'Baloo 2', sans-serif; color: var(--inkt); text-decoration: none; }
.merk span { color: var(--oranje); }
nav a { color: var(--zacht); font-weight: 800; text-decoration: none; margin-left: 16px; font-size: 15px; }
nav a:hover { color: var(--cobalt); }
h1, h2 { font-family: 'Baloo 2', sans-serif; font-weight: 800; line-height: 1.15; }
h1 { font-size: clamp(34px, 7vw, 48px); margin: 0 0 12px; }
h2 { font-size: 26px; margin: 40px 0 8px; }
h3 { font-size: 18px; font-weight: 800; margin: 24px 0 4px; }
p, li { color: var(--inkt); }
.zacht { color: var(--zacht); }
a { color: var(--cobalt); }
.kaart {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-bottom-width: 5px;
  border-radius: 22px;
  padding: 24px;
  margin: 24px 0;
}
.app { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.app img { width: 96px; height: 96px; border-radius: 22px; }
.app div { flex: 1; min-width: 220px; }
.knop {
  display: inline-block;
  background: var(--oranje);
  color: #fff;
  border-bottom: 4px solid var(--oranje-diep);
  border-radius: 14px;
  padding: 10px 18px;
  font-weight: 800;
  text-decoration: none;
  margin-top: 8px;
}
.tegels { display: flex; gap: 6px; margin: 4px 0 20px; }
.tegels span {
  width: 40px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font: 800 24px/1 'Baloo 2', sans-serif; color: #fff;
  background: var(--oranje); border-bottom: 4px solid var(--oranje-diep);
}
.tegels span:nth-child(2n) { background: var(--cobalt); border-bottom-color: #12337D; }
footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--lijn); font-size: 14px; color: var(--zacht); }
footer a { color: var(--zacht); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { font-weight: 800; }
.tabel { overflow-x: auto; }