/* ============================================================
     RESET & BASE
  ============================================================ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --terracotta: #C1440E;
    --terracotta-light: #D4561E;
    --gold: #D4A017;
    --gold-light: #E8B82A;
    --oker: #C8923A;
    --darkblue: #1A2B4A;
    --darkblue-light: #243B63;
    --creme: #FAF6EF;
    --sand: #E8DCC8;
    --sand-light: #F2EAD8;
    --text-dark: #1E1A14;
    --text-mid: #3D3425;
    --text-light: #6B5F4A;
    --border-radius: 6px;
    --shadow-sm: 0 2px 6px rgba(26,43,74,0.10);
    --shadow-md: 0 4px 16px rgba(26,43,74,0.13);
    --transition: 0.2s ease;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 17px;
    line-height: 1.75;
    color: var(--text-dark);
    background: var(--creme);
  }

  h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
    line-height: 1.25;
  }

  /* ============================================================
     SITE HEADER / NAV BAR
  ============================================================ */
  .site-header {
    background: var(--darkblue);
    color: var(--gold);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 2.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  }

  .site-header .label {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.9;
    text-decoration: none;
    transition: opacity var(--transition);
  }

  .site-header .label:hover { opacity: 1; }
  .site-header .label-right { text-align: right; }

  /* ============================================================
     HERO
  ============================================================ */
  .course-hero {
    background-color: var(--darkblue);
    background-image:
      radial-gradient(circle at 1px 1px, rgba(212,160,23,0.18) 1px, transparent 0);
    background-size: 28px 28px;
    padding: 5.5rem 2.5rem 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .course-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--terracotta), var(--gold), var(--oker), var(--terracotta));
  }

  .course-hero .kicker {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.75;
    margin-bottom: 1.2rem;
  }

  .course-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 700;
    color: #FFFDF8;
    max-width: 820px;
    margin: 0 auto;
    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
  }

  .course-hero .subtitle {
    margin-top: 1.4rem;
    font-size: 1.05rem;
    color: rgba(250,246,239,0.65);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-meta {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2.2rem;
    flex-wrap: wrap;
  }

  .hero-meta-item {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.8;
    border: 1px solid rgba(212,160,23,0.3);
    border-radius: 3px;
    padding: 0.25rem 0.75rem;
  }

  /* ============================================================
     PAGE WRAPPER
  ============================================================ */
  .page-wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.5rem 6rem;
  }

  /* ============================================================
     DEEL SECTIONS
  ============================================================ */
  .deel-section {
    margin-top: 3.5rem;
  }

  .deel-section:first-of-type {
    margin-top: 3rem;
  }

  .deel-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--sand);
  }

  .deel-accent {
    width: 4px;
    height: 2.2rem;
    border-radius: 2px;
    flex-shrink: 0;
  }

  .deel-accent.terracotta { background: var(--terracotta); }
  .deel-accent.gold       { background: var(--gold); }
  .deel-accent.oker       { background: var(--oker); }
  .deel-accent.darkblue   { background: var(--darkblue); }

  .deel-label {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-light);
    display: block;
    margin-bottom: 0.15rem;
  }

  .deel-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--darkblue);
    line-height: 1.3;
  }

  /* ============================================================
     CHAPTER GRID
  ============================================================ */
  .chapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
  }

  .chapter-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--sand);
    border-radius: var(--border-radius);
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  }

  .chapter-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--oker);
  }

  .chapter-badge {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    line-height: 1;
    text-align: center;
  }

  .badge-darkblue { background: var(--darkblue); }
  .badge-terracotta { background: var(--terracotta); }

  .chapter-card-body {
    flex: 1;
    min-width: 0;
  }

  .chapter-card-num {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 0.15rem;
  }

  .chapter-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--darkblue);
    line-height: 1.35;
  }

  .chapter-card:hover .chapter-card-title {
    color: var(--terracotta);
  }

  /* Special cards: inleiding / nawoord — full-width, single card */
  .chapter-grid.single {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  /* ── VERRIJKING ─────────────────────────────────────────── */
  .verrijking-banner {
    margin-top: 3.5rem;
    border-radius: 8px;
    overflow: hidden;
    background: var(--darkblue);
    border-top: 4px solid var(--gold);
    box-shadow: 0 4px 20px rgba(26,43,74,0.15);
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem 2.5rem;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
  }

  .verrijking-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(26,43,74,0.22);
  }

  .verrijking-icon {
    font-size: 2.8rem;
    flex-shrink: 0;
    opacity: 0.85;
  }

  .verrijking-body { flex: 1; }

  .verrijking-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.35rem;
  }

  .verrijking-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    color: white;
    margin-bottom: 0.35rem;
    line-height: 1.3;
  }

  .verrijking-meta {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
  }

  .verrijking-cta {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(212,160,23,0.12);
    border: 1px solid rgba(212,160,23,0.35);
    border-radius: 4px;
    padding: 0.5rem 1.1rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
  }

  .verrijking-banner:hover .verrijking-cta {
    background: rgba(212,160,23,0.22);
    border-color: var(--gold);
  }

  @media (max-width: 600px) {
    .verrijking-banner { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .verrijking-cta { align-self: stretch; text-align: center; }
  }

  /* ============================================================
     FOOTER
  ============================================================ */
  .page-footer {
    margin-top: 5rem;
    padding: 1.5rem 2.5rem;
    background: var(--darkblue);
    text-align: center;
    color: rgba(250,246,239,0.45);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
  }

  /* ============================================================
     RESPONSIVE
  ============================================================ */
  @media (max-width: 600px) {
    .site-header { padding: 0.65rem 1.2rem; }
    .course-hero { padding: 3.5rem 1.2rem 3rem; }
    .page-wrapper { padding: 0 1rem 4rem; }
    .chapter-grid { grid-template-columns: 1fr; }
    .hero-meta { gap: 0.75rem; }
  }

  /* ============================================================
     === LEERPAD === (overzichtspagina)
  ============================================================ */
  .voortgangsbalk{max-width:820px;margin:2rem auto 0;padding:0 1.5rem;font-family:'Source Sans 3',sans-serif}
  .vb-track{height:12px;background:var(--sand);border-radius:6px;overflow:hidden}
  .vb-fill{height:100%;background:var(--gold);width:0;transition:width .3s}
  .vb-label{font-size:.85rem;color:var(--text-light);margin-top:.5rem;text-align:center}
  .deel-kop{font-family:'Playfair Display',serif;margin:2.2rem 0 .6rem;color:var(--darkblue);font-size:1.4rem}
  .les-kaart{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--sand);
    border-radius:var(--border-radius);padding:.9rem 1.1rem;margin:.6rem 0;box-shadow:var(--shadow-sm);
    text-decoration:none;color:inherit;transition:box-shadow .15s,transform .1s}
  .les-kaart:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
  .les-kaart .lk-num{flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--darkblue);
    color:var(--gold);font-family:'Playfair Display',serif;font-weight:700;display:flex;align-items:center;justify-content:center}
  .les-kaart .lk-body{flex:1}
  .les-kaart .lk-title{font-family:'Playfair Display',serif;font-weight:600;font-size:1.05rem}
  .les-kaart .lk-meta{font-size:.82rem;color:var(--text-light);margin-top:.15rem}
  .les-kaart .lk-check{flex:0 0 auto;width:1.6rem;height:1.6rem;border:2px solid var(--sand);border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem}
  .les-kaart.done .lk-check{background:#2e7d32;border-color:#2e7d32}
  .concordantie-link{display:inline-block;margin:1.5rem 0;font-weight:600;color:var(--terracotta)}

  /* ============================================================
     === CONCORDANTIE === (matrix-pagina)
  ============================================================ */
  .matrix-wrap{overflow-x:auto;margin:2rem 0}
  table.matrix{border-collapse:collapse;font-family:'Source Sans 3',sans-serif;font-size:.85rem;min-width:640px}
  table.matrix th,table.matrix td{border:1px solid var(--sand);padding:.45rem .6rem;text-align:center}
  table.matrix th.lesnaam,table.matrix td.lesnaam{text-align:left;position:sticky;left:0;background:var(--creme);
    white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}
  table.matrix thead th{background:var(--darkblue);color:var(--gold);position:sticky;top:0}
  table.matrix td.hit{background:rgba(212,160,23,.25);color:var(--terracotta);font-weight:700}
  .et-lijst{margin:2rem 0}
  .et-lijst h2{font-family:'Playfair Display',serif;color:var(--darkblue);margin-bottom:.5rem}
  .et-lijst .et-item{background:var(--sand-light);border-left:4px solid var(--oker);border-radius:var(--border-radius);
    padding:1rem 1.2rem;margin:.7rem 0}
  .et-lijst .et-item h3{font-family:'Source Sans 3',sans-serif;font-size:1rem;color:var(--terracotta)}
  .et-lijst .et-item .et-lessen{font-size:.85rem;color:var(--text-light);margin-top:.4rem}