*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --rood:   #ce2b27;
  --goud:   #e9a93b;
  --donker: #211c16;
  --creme:  #f6eedd;
  --creme2: #f0e8d4;
  --wit:    #ffffff;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Archivo', sans-serif;
  background: var(--creme);
  color: var(--donker);
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}

sup { font-size: .6em; }

/* ─── NAV ─── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--creme);
  border-bottom: 1px solid rgba(33,28,22,.1);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1180px;
  margin: 0 auto;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--donker);
}

.rt-logo {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: conic-gradient(#ce2b27 0 25%, #e9a93b 0 50%, #2c74b8 0 75%, #3a9d5d 0 100%);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.rt-logo.klein { width: 28px; height: 28px; }

.rt-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--creme);
  display: block;
}
.rt-logo.klein .rt-dot { width: 10px; height: 10px; }

.nav-logo-tekst { line-height: 1; }
.nav-naam { display: block; font-weight: 900; font-size: 13px; letter-spacing: .16em; }
.nav-sub  { display: block; font-weight: 600; font-size: 10px; letter-spacing: .34em; color: #8a6a2f; margin-top: 3px; }

.rt-logo-img { height: 40px; width: auto; display: block; }
.rt-logo-img--klein { height: 32px; filter: brightness(0) invert(1); }

.nav-links {
  display: none;
  align-items: center;
  gap: 28px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nav-links a { text-decoration: none; color: var(--donker); }
.nav-links a:not(.nav-cta):hover { color: var(--rood); }

.nav-cta {
  background: var(--rood);
  color: var(--wit) !important;
  padding: 11px 20px;
  border-radius: 4px;
}
.nav-cta:hover { filter: brightness(1.1); }

.hamburger {
  background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--donker); line-height: 1;
}

.nav-mobiel {
  display: none;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(33,28,22,.1);
}
.nav-mobiel.open { display: flex; }
.nav-mobiel a {
  padding: 14px 24px;
  font-weight: 700; font-size: 14px;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--donker);
  border-bottom: 1px solid rgba(33,28,22,.07);
}
.nav-cta-m {
  background: var(--rood);
  color: var(--wit) !important;
  text-align: center;
}

/* ─── HERO ─── */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 60px;
}

.hero-foto {
  position: absolute;
  inset: 0;
  background: url('img/195bcaef-ee43-448b-adcb-e86241e33df4.png') center 42% / cover no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20,15,10,.50) 0%,
    rgba(20,15,10,.18) 38%,
    rgba(20,15,10,.82) 100%
  );
}

.hero-driehoeken {
  position: absolute;
  top: 60px; left: 0; right: 0;
  height: 16px;
  display: flex;
  overflow: hidden;
  z-index: 1;
}

.hero-driehoeken span {
  flex: 1;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 16px solid var(--rood);
}
.hero-driehoeken span:nth-child(4n+2) { border-top-color: var(--goud); }
.hero-driehoeken span:nth-child(4n+3) { border-top-color: #2c74b8; }
.hero-driehoeken span:nth-child(4n+4) { border-top-color: var(--creme); }

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 22px 40px;
  color: var(--wit);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.badge-editie {
  background: var(--goud);
  color: var(--donker);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 3px;
}

.badge-sub {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
}

h1 {
  font-family: 'Anton', sans-serif;
  font-size: clamp(72px, 20vw, 152px);
  line-height: .86;
  text-transform: uppercase;
  letter-spacing: .005em;
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
  margin-bottom: 18px;
}

.goud { color: var(--goud); }
.rood { color: var(--rood); }
.wit  { color: var(--wit); }

.hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: clamp(13px, 3.5vw, 19px);
  margin-bottom: 24px;
  opacity: .95;
}

.hero-datum { font-weight: 800; }

.meta-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--goud);
  flex: none;
}

.hero-knoppen {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-rood {
  display: inline-block;
  background: var(--rood);
  color: var(--wit);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 28px;
  border-radius: 5px;
  box-shadow: 0 10px 26px rgba(206,43,39,.45);
  transition: filter .2s;
}
.btn-rood:hover { filter: brightness(1.1); }

.btn-dashed {
  border: 2px dashed rgba(255,255,255,.7);
  color: var(--wit);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: 5px;
}

/* ─── STATS ─── */
.stats-strip {
  background: var(--rood);
  color: var(--wit);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.stat {
  padding: 22px 16px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.stat:nth-child(2n) { border-right: none; }
.stat:nth-last-child(-n+2) { border-bottom: none; }

.stat-nr {
  font-family: 'Anton', sans-serif;
  font-size: clamp(34px, 8vw, 52px);
  line-height: 1;
}

.stat-label {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* ─── OVER ─── */
#over {
  padding: 64px 0;
}

.over-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.sectie-kop {
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rood);
  margin-bottom: 14px;
}

h2 {
  font-family: 'Anton', sans-serif;
  font-size: clamp(34px, 8vw, 56px);
  line-height: .98;
  text-transform: uppercase;
  margin-bottom: 20px;
}

#over p {
  font-size: 16px;
  line-height: 1.65;
  color: #3a352d;
  margin-bottom: 14px;
  max-width: 600px;
}

.over-fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.over-groot {
  grid-row: span 2;
}

.over-fotos img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.over-groot {
  height: 310px !important;
}

/* ─── PRAKTISCH ─── */
#info {
  background: var(--donker);
  color: var(--creme);
  padding: 64px 0;
}

#info .sectie-kop { color: var(--goud); }
#info h2 { color: var(--creme); margin-bottom: 32px; }

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(246,238,221,.16);
  border: 1px solid rgba(246,238,221,.16);
  border-radius: 8px;
  overflow: hidden;
}

.info-cel {
  background: var(--donker);
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.info-label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9a948a;
  flex: none;
}

.info-waarde {
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  text-align: right;
}

/* ─── GOEDE DOELEN ─── */
#doel {
  padding: 64px 0;
}

#doel .sectie-kop { color: var(--rood); }

.doel-intro {
  font-size: 16px;
  line-height: 1.6;
  color: #3a352d;
  margin-bottom: 32px;
  max-width: 600px;
}

.doel-kaarten {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.doel-kaart {
  background: var(--wit);
  border: 1px solid #e3dcca;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.doel-logo-wrap {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--wit);
  border: 1px solid #eee4cf;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}

.doel-logo-wrap img {
  width: 60px; height: 60px;
  object-fit: contain;
}

.doel-naam {
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.doel-omschrijving {
  font-size: 14px;
  color: #56534d;
  line-height: 1.5;
}

/* ─── GALERIJ ─── */
#galerij {
  padding: 0 0 64px;
}

#galerij h2 { margin-bottom: 20px; }

.galerij-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.galerij-grid img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* ─── CTA AANMELDEN ─── */
#aanmelden {
  background: var(--rood);
  color: var(--wit);
  padding: 60px 0;
  text-align: center;
}

.cta-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 22px;
}

#aanmelden h2 {
  font-size: clamp(44px, 12vw, 74px);
  line-height: .92;
  margin-bottom: 12px;
}

#aanmelden p {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .03em;
  margin-bottom: 28px;
  opacity: .95;
}

.btn-donker {
  display: inline-block;
  background: var(--donker);
  color: var(--wit);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 36px;
  border-radius: 5px;
  transition: filter .2s;
}
.btn-donker:hover { filter: brightness(1.3); }

.cta-footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.25);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ─── DESKTOP (min 900px) ─── */
@media (min-width: 900px) {
  .hamburger { display: none; }
  .nav-links  { display: flex; }
  .nav-mobiel { display: none !important; }

  #hero { padding-bottom: 52px; }
  .hero-content { padding: 0 48px 52px; }
  .hero-driehoeken { top: 62px; height: 24px; }
  .hero-driehoeken span { border-left-width: 13px; border-right-width: 13px; border-top-width: 24px; }

  .stats-strip {
    grid-template-columns: repeat(4, 1fr);
  }
  .stat { border-bottom: none; }
  .stat:not(:last-child) { border-right: 1px solid rgba(255,255,255,.18); }

  .over-inner { flex-direction: row; gap: 56px; align-items: center; }
  .over-tekst { flex: 1.05; }
  .over-fotos { flex: .95; grid-template-columns: 1fr 1fr; }
  .over-fotos img { height: 143px; }
  .over-groot { height: 300px !important; }

  .info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
  }
  .info-cel { padding: 28px 26px; display: block; }
  .info-waarde { font-size: 26px; text-align: left; margin-top: 8px; }

  .doel-kaarten { flex-direction: row; gap: 24px; }
  .doel-kaart { flex: 1; padding: 34px; }
  .doel-logo-wrap { width: 96px; height: 96px; }
  .doel-logo-wrap img { width: 84px; height: 84px; }
  .doel-naam { font-size: 27px; }

  #galerij { padding: 0 0 84px; }
  .galerij-grid { grid-template-columns: repeat(4, 1fr); }
  .galerij-grid img { height: 230px; }

  #over { padding: 84px 0; }
  #info  { padding: 80px 0; }
  #doel  { padding: 84px 0; }
}