:root {
  --bg: #f6f1e7;
  --kaart: #fffdf8;
  --tekst: #1b1714;
  --zacht: #6b6158;
  --lijn: #e3d9c8;
  --zwart: #14110f;
  --geel: #f2c230;
  --rood: #d6302b;
  --accent: #b3261e;
  --schaduw: 0 1px 2px rgba(20, 17, 15, .06), 0 4px 14px rgba(20, 17, 15, .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14110f;
    --kaart: #1f1b18;
    --tekst: #f3ede3;
    --zacht: #b0a597;
    --lijn: #3a332d;
    --accent: #f07a6c;
    --schaduw: none;
  }
}
:root[data-theme="dark"] {
  --bg: #14110f;
  --kaart: #1f1b18;
  --tekst: #f3ede3;
  --zacht: #b0a597;
  --lijn: #3a332d;
  --accent: #f07a6c;
  --schaduw: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font: 17px/1.55 Inter, system-ui, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

.vlag { display: flex; height: 6px; position: sticky; top: 0; z-index: 5; }
.vlag span { flex: 1; }
.vlag span:nth-child(1) { background: var(--zwart); }
.vlag span:nth-child(2) { background: var(--geel); }
.vlag span:nth-child(3) { background: var(--rood); }

main { max-width: 640px; margin: 0 auto; padding: 0 16px 48px; }

h1, h2, h3 { font-family: Fraunces, Georgia, serif; line-height: 1.15; margin: 0; }

/* ---------- hoofdpagina ---------- */
.held { padding: 40px 0 8px; }
.held__jaar {
  font-family: Fraunces, Georgia, serif;
  font-weight: 800;
  font-size: clamp(88px, 30vw, 150px);
  line-height: .9;
  letter-spacing: -.03em;
}
.held__ondertitel { font-size: 20px; margin: 12px 0 0; color: var(--zacht); }

.blok {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  box-shadow: var(--schaduw);
}
.blok h2 { font-size: 22px; margin-bottom: 10px; }
.blok p { margin: 0 0 10px; }
.blok p:last-child { margin-bottom: 0; }

.stappen { list-style: none; margin: 0; padding: 0; counter-reset: stap; }
.stappen li { position: relative; padding-left: 44px; margin: 0 0 16px; }
.stappen li:last-child { margin-bottom: 0; }
.stappen li::before {
  counter-increment: stap;
  content: counter(stap);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--zwart); color: var(--geel);
  font: 600 15px/30px Inter, sans-serif; text-align: center;
}
:root[data-theme="dark"] .stappen li::before { background: var(--geel); color: var(--zwart); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stappen li::before { background: var(--geel); color: var(--zwart); }
}
.stappen strong { display: block; }

.voorbeelden { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.voorbeelden span {
  border: 1px solid var(--lijn); border-radius: 999px;
  padding: 4px 12px; font-size: 14px; color: var(--zacht);
}

.let-op { font-size: 15px; color: var(--zacht); }
.let-op ul { margin: 6px 0 0; padding-left: 20px; }

.knop {
  display: block; width: 100%;
  margin-top: 24px; padding: 16px;
  border: 0; border-radius: 14px;
  background: var(--rood); color: #fff;
  font: 600 18px Inter, sans-serif; text-align: center; text-decoration: none;
  cursor: pointer;
}
.knop:active { transform: translateY(1px); }

/* ---------- lijst ---------- */
.kop { display: flex; align-items: center; gap: 12px; padding: 20px 0 4px; }
.kop h1 { font-size: 30px; }
.terug {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--lijn); background: var(--kaart); color: var(--tekst);
  text-decoration: none; font-size: 20px;
}
.uitleg { color: var(--zacht); margin: 4px 0 0; font-size: 15px; }

.gps {
  margin-top: 14px; padding: 10px 14px; border-radius: 12px;
  background: var(--kaart); border: 1px dashed var(--lijn);
  font-size: 14px; color: var(--zacht);
}
.gps button {
  margin-left: 6px; border: 0; background: none; padding: 0;
  color: var(--accent); font: 600 14px Inter, sans-serif; text-decoration: underline; cursor: pointer;
}

.lijst { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.lijst a {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 16px;
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: 16px;
  color: inherit; text-decoration: none; box-shadow: var(--schaduw);
}
.lijst a:active { background: var(--lijn); }
.nr {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--zwart); color: var(--geel);
  font: 800 20px Fraunces, Georgia, serif;
}
.lijst h2 { font-size: 19px; }
.lijst p { margin: 2px 0 0; font-size: 14px; color: var(--zacht); line-height: 1.35; }
.afstand { font-size: 14px; font-weight: 600; color: var(--accent); white-space: nowrap; text-align: right; }

/* ---------- detail ---------- */
.detail__nr {
  display: inline-block; margin-top: 8px;
  font: 600 13px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht);
}
.detail h1 { font-size: 34px; margin-top: 4px; }
.detail__adres { color: var(--zacht); margin: 4px 0 0; }

.meter {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding: 16px 18px; border-radius: 16px;
  background: var(--zwart); color: #f3ede3;
}
.meter__getal { font: 800 34px Fraunces, Georgia, serif; color: var(--geel); }
.meter__info { font-size: 14px; color: #c9bfb2; }

.context p { margin: 0 0 12px; }
.opdracht { border-left: 6px solid var(--rood); }
.opdracht h2 { display: flex; align-items: center; gap: 8px; }

.volgende { display: flex; gap: 12px; margin-top: 20px; }
.volgende a {
  flex: 1; padding: 14px; border-radius: 14px; text-align: center;
  border: 1px solid var(--lijn); background: var(--kaart); color: inherit; text-decoration: none;
  font-weight: 600; font-size: 15px;
}