:root {
    --night:#1E2A32; --surface:#26333C; --line:#3A4750; --line-soft:#33404A;
    --ivory:#F2EDE4; --muted:#B9C4CB; --dim:#9AA8B1; --brass:#C89B4E;
    --brass-ink:#7A5520; --cream:#F2EDE4; --sand:#E9E2D5;
    --ink:#1E2A32; --body:#45535B; --body-soft:#5A666E; --hair:#DCD2C2;
  }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--night); color:var(--ivory);
         font-family:Jost,"Helvetica Neue",Helvetica,sans-serif; }
  .serif { font-family:'Libre Caslon Display',Georgia,serif; }
  .wrap { max-width:1440px; margin:0 auto; padding:0 72px; }
  .eyebrow { font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--brass); }
  .h2 { font-family:'Libre Caslon Display',Georgia,serif; font-size:44px; line-height:1.15; margin:0; }
  .btn { font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
         padding:18px 30px; display:inline-block; cursor:pointer; border:1px solid transparent; }
  .btn-primary { background:var(--brass); color:var(--night); }
  .btn-ghost { border-color:#4A5761; color:var(--ivory); }
  .rule { width:72px; height:1px; background:var(--brass); }
  .lang { cursor:pointer; padding:8px 4px; color:var(--dim); }
  .lang.on { color:var(--ivory); }
  a { color:var(--brass); text-decoration:none; }

  /* taalbalk */
  #bar { background:var(--surface); border-bottom:1px solid var(--line-soft); }
  #bar .wrap { display:flex; align-items:center; gap:24px; padding-top:13px; padding-bottom:13px; }
  #bar .ask { font-size:14px; font-weight:300; flex-grow:1; }
  #bar .act { font-size:12px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }

  nav .wrap { display:flex; align-items:center; gap:40px; padding-top:24px; padding-bottom:24px; }
  /* De balk blijft boven in beeld staan, de pagina schuift eronderdoor. */
  nav { border-bottom:1px solid var(--line-soft); position:sticky; top:0; z-index:60;
        background:var(--night); }
  .navlinks { display:flex; gap:28px; font-size:14px; color:var(--muted);
              flex-grow:1; letter-spacing:.06em; font-weight:300; }
  .navright { display:flex; align-items:center; gap:20px; }

  .hero { display:grid; grid-template-columns:1.2fr 1fr; gap:72px; align-items:center;
          padding-top:88px; padding-bottom:92px; }
  .hero h1 { font-size:54px; line-height:1.12; margin:0; white-space:pre-line; }
  .bullets { display:flex; flex-direction:column; gap:13px; max-width:540px; }
  .bullets li { display:flex; gap:16px; align-items:flex-start; list-style:none; }
  .bullets ul { margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
  .dot { width:5px; height:5px; background:var(--brass); flex-shrink:0; margin-top:11px; }
  .bullets span { font-size:17px; line-height:1.6; color:var(--muted); font-weight:300; }
  .heroimg { position:relative; height:500px; }
  .heroimg .frame { position:absolute; inset:0; border:1px solid var(--line);
                    background:var(--surface); overflow:hidden; }
  .heroimg .frame img { width:100%; height:100%; object-fit:cover; display:block; }
  .heroimg .book { position:absolute; left:-32px; bottom:44px; width:152px;
                   border:1px solid var(--brass); padding:10px; background:var(--night); }
  .heroimg .book img { width:100%; display:block; }
  .heroimg .book div { font-size:10px; color:var(--brass); padding-top:8px;
                       letter-spacing:.16em; text-transform:uppercase; }

  .trust { border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
  .trust .wrap { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0; }
  .trust .cell { padding:30px 40px; border-right:1px solid var(--line-soft); }
  .trust .cell:last-child { border-right:0; }
  .trust .n { font-family:'Libre Caslon Display',Georgia,serif; font-size:30px; color:var(--brass); }
  .trust .l { font-size:13px; color:var(--muted); font-weight:300; padding-top:4px; }

  .section { padding-top:88px; padding-bottom:88px; }
  .cards { display:grid; gap:24px; }
  .langcard { border:1px solid var(--line); background:var(--surface); padding:34px;
              display:flex; flex-direction:column; gap:22px; }
  .langcard .top { display:flex; align-items:flex-start; gap:12px; }
  .langcard .name { font-family:'Libre Caslon Display',Georgia,serif; font-size:34px; flex-grow:1; }
  .langcard .desc { font-size:15px; line-height:1.7; color:var(--muted); font-weight:300; flex-grow:1; }
  .levels { display:flex; gap:6px; flex-wrap:wrap; }
  .levels span { border:1px solid var(--line); color:var(--muted); font-size:11px;
                 letter-spacing:.1em; padding:6px 10px; }
  .tag { border:1px solid var(--brass); font-size:10px; letter-spacing:.14em;
         text-transform:uppercase; padding:7px 10px; white-space:nowrap; }
  .tag.solid { background:var(--brass); color:var(--night); }
  .tag.hollow { color:var(--brass-ink); }
  .cardlink { font-size:12px; letter-spacing:.14em; text-transform:uppercase; }

  .method { background:var(--cream); color:var(--ink); }
  .method .cols { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:72px; align-items:start; }
  .method h2 { font-family:'Libre Caslon Display',Georgia,serif; font-size:52px;
               line-height:1.12; margin:0; white-space:pre-line; }
  .method .body { font-size:17px; line-height:1.8; color:var(--body); font-weight:300; max-width:480px; }
  .step { display:flex; align-items:baseline; gap:20px; padding:18px 0; border-bottom:1px solid var(--hair); }
  .step:last-child { border-bottom:0; }
  .step .n { font-size:11px; letter-spacing:.16em; color:var(--brass-ink); width:28px; }
  .step .t { font-family:'Libre Caslon Display',Georgia,serif; font-size:24px; width:150px; }
  .step .d { font-size:15px; color:var(--body-soft); font-weight:300; flex-grow:1; }

  .coursecard { background:var(--cream); color:var(--ink); padding:28px;
                display:flex; flex-direction:column; gap:20px; }
  .coursecard .title { font-family:'Libre Caslon Display',Georgia,serif; font-size:28px; line-height:1.15; }
  .coursecard .sub { font-size:14px; color:var(--body-soft); padding-top:5px; font-weight:300; }
  .hr { height:1px; background:var(--hair); }
  .facts { display:flex; flex-direction:column; gap:11px; font-size:14px; color:var(--body); font-weight:300; }
  .facts div { display:flex; gap:12px; }
  .facts .k { width:92px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-ink); }
  .buy { display:flex; align-items:center; gap:12px; }
  .price { font-family:'Libre Caslon Display',Georgia,serif; font-size:24px; }
  .per { font-size:12px; color:var(--body-soft); font-weight:300; }
  .enroll { background:var(--night); color:var(--ivory); font-size:12px; letter-spacing:.12em;
            text-transform:uppercase; padding:15px 22px; cursor:pointer; }

  .band { border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
          background:var(--surface); }
  .band .wrap { display:flex; align-items:center; gap:40px; padding-top:56px; padding-bottom:56px; }

  .empty { border:1px solid var(--line); background:var(--surface); padding:56px;
           display:flex; align-items:center; gap:48px; }
  .field { border:1px solid #4A5761; color:var(--dim); font-size:14px; font-weight:300;
           padding:17px 24px; white-space:nowrap; }

  .andrea { display:grid; grid-template-columns:460px minmax(0,1fr); gap:64px; align-items:center; }
  .andrea .photo { height:560px; border:1px solid var(--line); background:var(--surface); overflow:hidden; }
  .andrea .photo img { width:100%; height:100%; object-fit:cover; display:block; }
  .creds { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
           background:var(--line); border:1px solid var(--line); max-width:620px; margin-top:8px; }
  .creds div { background:var(--night); padding:18px 20px; font-size:13px; color:var(--muted); font-weight:300; }

  .pricing { background:var(--cream); color:var(--ink); }
  .plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
  .plan { border:1px solid var(--hair); padding:36px; display:flex; flex-direction:column; gap:20px; position:relative; }
  .plan.best { border-color:var(--brass); background:var(--sand); }
  .plan .amount { font-family:'Libre Caslon Display',Georgia,serif; font-size:54px; line-height:1; }
  .plan .cta { font-size:12px; letter-spacing:.12em; text-transform:uppercase;
               padding:16px; text-align:center; margin-top:6px; cursor:pointer; }
  .plan .cta.outline { border:1px solid var(--ink); color:var(--ink); }
  .plan .cta.solid { background:var(--night); color:var(--ivory); }
  .ribbon { position:absolute; top:-1px; right:28px; background:var(--brass); color:var(--night);
            font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:7px 12px; }

  .quote { border:1px solid var(--line); padding:32px; display:flex; flex-direction:column; gap:22px; }
  .quote .q { font-family:'Libre Caslon Display',Georgia,serif; font-size:22px; line-height:1.5; }
  .avatar { width:44px; height:44px; border:1px solid var(--line); background:var(--surface); }

  footer { border-top:1px solid var(--line-soft); }
  .fcols { display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:40px; }
  .fcols h4 { font-size:11px; letter-spacing:.18em; text-transform:uppercase;
              color:var(--brass); margin:0 0 4px 0; font-weight:400; }
  .fcols div div { font-size:14px; color:var(--muted); font-weight:300; padding:6px 0; }
  .legal { display:flex; gap:24px; border-top:1px solid var(--line-soft); margin-top:26px;
           padding-top:18px; font-size:12px; color:var(--dim); font-weight:300; }

  @media (max-width:1100px) {
    .wrap { padding:0 24px; }
    .hero, .method .cols, .andrea, .plans { grid-template-columns:1fr; gap:36px; }
    .hero h1 { font-size:40px; }
    .method h2 { font-size:36px; }
    .h2 { font-size:32px; }
    .andrea .photo { height:420px; }
    .trust .wrap { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .trust .cell:nth-child(2) { border-right:0; }
    .navlinks { display:none; }
    .empty, .band .wrap { flex-direction:column; align-items:flex-start; gap:24px; }
    .section { padding-top:56px; padding-bottom:56px; }
  }

/* ---------- Navigatie als echte links ---------- */
.navlinks a, .fcols a { color: inherit; text-decoration: none; }
.navlinks a:hover, .fcols a:hover { color: var(--ivory); }
.brand { display: inline-block; }

/* ---------- Pagina: Over Chatter ---------- */
.pagehero { padding-top: 80px; padding-bottom: 24px; }
.pagehero h1 { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 52px;
               line-height: 1.14; margin: 18px 0 0 0; max-width: 900px; }
.prose { max-width: 720px; display: flex; flex-direction: column; gap: 24px;
         padding-top: 36px; padding-bottom: 24px; }
.prose p { margin: 0; font-size: 18px; line-height: 1.85; color: var(--muted); font-weight: 300; }
.prose strong { color: var(--ivory); font-weight: 400; }

.doors { background: var(--cream); color: var(--ink);
          padding-top: 30px; padding-bottom: 30px; }
.doors h2 { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 40px;
            line-height: 1.15; margin: 8px 0 0 0; }
/* geen max-width: de kolommen moeten breed genoeg zijn om elke deur op één regel te houden */
.doorlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0 56px; padding: 14px 0 0 0; }
.doorlist div { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 24px;
                line-height: 1.4; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.doors .close { font-size: 18px; line-height: 1.85; color: var(--body); font-weight: 300;
                max-width: 820px; padding-top: 16px; }

.founder { display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: 64px; align-items: start; }
.founder .photo { border: 1px solid var(--line); background: var(--surface);
                  overflow: hidden; aspect-ratio: 46 / 56; }
.founder .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder .role { font-size: 17px; color: var(--brass); font-weight: 300; }
.founder p { margin: 0; font-size: 17px; line-height: 1.85; color: var(--muted);
             font-weight: 300; max-width: 620px; }

@media (max-width: 1100px) {
  .pagehero h1 { font-size: 34px; }
  .doors h2 { font-size: 28px; }
  .doorlist { grid-template-columns: 1fr; gap: 0; }
  .doorlist div { font-size: 20px; }
  .founder { grid-template-columns: 1fr; gap: 32px; }
  .prose p { font-size: 16px; }
}

/* ---------- Pagina: De Chatter-methode ---------- */
.cycle { background: var(--cream); color: var(--ink); padding: 40px 0; }
.cycle .label { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--brass-ink); }
.chain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding-top: 14px; }
.chain span { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 30px; line-height: 1.3; }
.chain i { color: var(--brass); font-style: normal; font-size: 20px; }

.principle { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 28px;
             padding: 36px 0; border-top: 1px solid var(--line-soft); }
.principle .num { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 32px;
                  color: var(--brass); line-height: 1.1; }
.principle h3 { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 30px;
                line-height: 1.2; margin: 0 0 16px 0; font-weight: 400; }
.principle p { margin: 0 0 14px 0; font-size: 17px; line-height: 1.85;
               color: var(--muted); font-weight: 300; max-width: 760px; }
.principle p:last-child { margin-bottom: 0; }
.principle .pull { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 22px;
                   line-height: 1.5; color: var(--ivory); max-width: 760px; padding-top: 6px; }

.thisis { background: var(--cream); color: var(--ink); padding: 56px 0; }
.thisis h2 { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 40px;
             line-height: 1.15; margin: 14px 0 0 0; }
.thisis .seq { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 20px; }
.thisis .seq span { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 24px; }
.thisis .seq i { color: var(--brass-ink); font-style: normal; font-size: 18px; }
.thisis p { margin: 0; font-size: 18px; line-height: 1.85; color: var(--body);
            font-weight: 300; max-width: 760px; padding-top: 24px; }
.thisis .kicker { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 28px;
                  color: var(--ink); padding-top: 24px; }
.thisis .kicker span { color: var(--brass-ink); }

@media (max-width: 1100px) {
  .chain span { font-size: 22px; }
  .principle { grid-template-columns: 1fr; gap: 8px; padding: 26px 0; }
  .principle h3 { font-size: 24px; }
  .principle p { font-size: 16px; }
  .thisis h2 { font-size: 28px; }
  .thisis .seq span { font-size: 20px; }
}

/* ---------- Pagina: Contact ---------- */
.contactgrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
               gap: 64px; align-items: start; padding-top: 44px; padding-bottom: 88px; }

.form { display: flex; flex-direction: column; gap: 22px; max-width: 640px; }
.form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.veldje { display: flex; flex-direction: column; gap: 9px; }
.veldje label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.veldje label em { font-style: normal; color: var(--dim); letter-spacing: .12em; }
.veldje input, .veldje select, .veldje textarea {
  font-family: Jost, "Helvetica Neue", Helvetica, sans-serif; font-size: 16px; font-weight: 300;
  color: var(--ivory); background: var(--surface); border: 1px solid var(--line);
  padding: 15px 18px; width: 100%; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.veldje textarea { min-height: 160px; resize: vertical; line-height: 1.65; }
.veldje select { background-image:
  linear-gradient(45deg, transparent 50%, var(--brass) 50%),
  linear-gradient(135deg, var(--brass) 50%, transparent 50%);
  background-position: calc(100% - 21px) 24px, calc(100% - 15px) 24px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; cursor: pointer; }
.veldje input:focus, .veldje select:focus, .veldje textarea:focus {
  outline: none; border-color: var(--brass); }
.veldje input::placeholder, .veldje textarea::placeholder { color: #6E7C85; }
.form button.btn { font-family: Jost, "Helvetica Neue", Helvetica, sans-serif; border: 0; }
.form .foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.form .note { font-size: 13px; color: var(--dim); font-weight: 300; max-width: 320px; line-height: 1.6; }
.melding { display: none; font-size: 15px; line-height: 1.7; font-weight: 300;
           border-left: 2px solid var(--brass); padding: 14px 18px; background: var(--surface); color: var(--ivory); }
.melding.aan { display: block; }
.melding.mis { border-left-color: #C8654E; }

.infocard { border: 1px solid var(--line); background: var(--surface); padding: 34px; }
.infocard .naam { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 30px;
                  line-height: 1.2; padding-top: 10px; }
.inforij { border-top: 1px solid var(--line-soft); padding: 18px 0 0 0; margin-top: 18px; }
.inforij .k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.inforij .v { font-size: 17px; font-weight: 300; color: var(--ivory); padding-top: 7px; line-height: 1.5; }
.inforij .v a { color: var(--ivory); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.inforij .v a:hover { color: var(--brass); border-bottom-color: var(--brass); }
.inforij .sub { font-size: 14px; color: var(--dim); font-weight: 300; padding-top: 6px; line-height: 1.6; }
.snel { display: flex; flex-direction: column; gap: 12px; padding-top: 26px; }
.snel a { display: block; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .12em;
          text-transform: uppercase; padding: 17px 20px; }
.snel a.mail { background: var(--brass); color: var(--night); }
.snel a.wa { border: 1px solid #4A5761; color: var(--ivory); }
.snel a.wa:hover { border-color: var(--brass); color: var(--brass); }

@media (max-width: 1100px) {
  .contactgrid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 56px; }
  .form .row { grid-template-columns: 1fr; }
}

/* ---------- Voetnoot op een telefoon ---------- */
@media (max-width: 760px) {
  .fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .fcols div div { overflow-wrap: anywhere; }
  .legal { flex-wrap: wrap; gap: 8px 20px; }
  .legal div:first-child { flex-basis: 100%; }
}

/* ---------- Instagram en TikTok ---------- */
.fcols .social { display: flex; gap: 14px; padding: 12px 0 0 0; }
.fcols .social a { display: block; color: var(--dim); }
.fcols .social a:hover { color: var(--brass); }
.social svg { width: 19px; height: 19px; display: block; }

.kanalen { display: flex; flex-direction: column; gap: 10px; }
.kanalen a { display: flex; align-items: center; gap: 10px; color: var(--ivory);
             border-bottom: 0; font-size: 16px; }
.kanalen a:hover { color: var(--brass); }
.kanalen svg { width: 18px; height: 18px; flex-shrink: 0; }
.kanalen span { border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.kanalen a:hover span { border-bottom-color: var(--brass); }

/* ---------- Pagina: Cursussen ---------- */
.cursusbalk { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
              background: var(--surface); }
.cursusbalk .wrap { padding-top: 26px; padding-bottom: 26px;
                    display: flex; flex-direction: column; gap: 16px; }
.filterrij { display: flex; align-items: baseline; gap: 20px; }
.filterkop { font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
             color: var(--brass); width: 92px; flex-shrink: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 300;
        letter-spacing: .04em; padding: 9px 16px; cursor: pointer; user-select: none; }
.chip:hover { border-color: var(--brass); color: var(--ivory); }
.chip.aan { background: var(--brass); border-color: var(--brass); color: var(--night); }

.cursusmeta { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
              padding-bottom: 28px; }
.cursusmeta .teller { font-size: 14px; color: var(--dim); font-weight: 300; flex-grow: 1; }
.cursusmeta .wissen { font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
                      color: var(--brass); cursor: pointer; }
.cursusnote { font-size: 14px; line-height: 1.7; color: var(--dim); font-weight: 300;
              max-width: 720px; border-top: 1px solid var(--line-soft);
              margin-top: 40px; padding-top: 22px; }
.geenmatch { border: 1px solid var(--line); background: var(--surface); padding: 44px; }
.geenmatch .kop { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 30px; line-height: 1.2; }
.geenmatch .body { font-size: 16px; color: var(--muted); font-weight: 300;
                   line-height: 1.7; max-width: 620px; padding-top: 12px; }

@media (max-width: 1100px) {
  .filterrij { flex-direction: column; gap: 10px; }
  .filterkop { width: auto; }
  .geenmatch { padding: 28px; }
  .geenmatch .kop { font-size: 24px; }
}


/* ---------- Pagina: Chatter Academy ---------- */
.pagehero h1.binnenkort { white-space: pre-line; }


/* ---------- Pagina: niveaucheck ---------- */
.checkvak { border: 1px solid var(--line); background: var(--surface); padding: 48px;
            margin-top: 40px; }
.checkmeta { display: flex; align-items: baseline; gap: 16px; font-size: 12px;
             letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.checkmeta .niveau { color: var(--brass); margin-left: auto; }
.checkbalk { height: 2px; background: var(--line); margin: 14px 0 34px 0; }
.checkbalk .vul { height: 2px; background: var(--brass); transition: width .2s; }
.checkvraag { font-size: 30px; line-height: 1.35; color: var(--ivory); padding-bottom: 28px; }
.checkopties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.checkoptie { border: 1px solid var(--line); padding: 18px 22px; font-size: 17px;
              font-weight: 300; color: var(--ivory); cursor: pointer; background: var(--night); }
.checkoptie:hover { border-color: var(--brass); color: var(--brass); }
.checkuitslag { font-size: 40px; line-height: 1.2; padding: 14px 0 0 0; }
.checkadvies { font-size: 17px; line-height: 1.8; color: var(--muted); font-weight: 300;
               max-width: 640px; padding-top: 12px; }
.checkkop { font-size: 22px; padding: 36px 0 18px 0; }
.checkknoppen { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 32px; }
.checkvoet { font-size: 13px; line-height: 1.7; color: var(--dim); font-weight: 300;
             border-top: 1px solid var(--line-soft); margin-top: 32px; padding-top: 18px;
             max-width: 640px; }

@media (max-width: 1100px) {
  .checkvak { padding: 26px; }
  .checkvraag { font-size: 22px; }
  .checkopties { grid-template-columns: 1fr; }
  .checkuitslag { font-size: 30px; }
}


/* ---------- Uitklapmenu onder Cursussen ---------- */
/*
  De navigatiebalk heeft ruimte onder de tekst. Zonder die ruimte mee te nemen valt de muis
  tussen de knop en het menu, en klapt het menu dicht. Daarom loopt het item zelf door tot
  onder de balk, met een negatieve marge zodat er visueel niets verschuift.
*/
.navitem { position: relative; padding-bottom: 26px; margin-bottom: -26px; }
.submenu { position: absolute; top: 100%; left: -20px; min-width: 230px; padding: 14px 0;
           margin-top: 0; background: var(--surface); border: 1px solid var(--line);
           display: none; z-index: 20; }
.navitem:hover .submenu, .navitem.open .submenu { display: block; }
.submenu a { display: block; padding: 10px 22px; font-size: 15px; font-weight: 300;
             color: var(--muted); white-space: nowrap; }
.submenu a:hover { color: var(--ivory); background: var(--night); }
.submenu .streep { height: 1px; background: var(--line-soft); margin: 10px 22px; }

/* ---------- Pagina: Cursussen, het overzicht ---------- */
.vormen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vorm { border: 1px solid var(--line); background: var(--surface); padding: 34px;
        display: flex; flex-direction: column; gap: 16px; }
.vorm h3 { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 28px;
           line-height: 1.2; margin: 0; font-weight: 400; }
.vorm .body { font-size: 15px; line-height: 1.7; color: var(--muted); font-weight: 300; flex-grow: 1; }
.vorm .prijs { font-size: 14px; color: var(--brass); border-top: 1px solid var(--line-soft);
               padding-top: 16px; }

.taalblok { padding-top: 56px; }
.taalkop { display: flex; align-items: baseline; gap: 16px; padding-bottom: 22px; }
.taalkop h3 { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 34px;
              margin: 0; font-weight: 400; }
.taalkop .sub { font-size: 14px; color: var(--dim); font-weight: 300; }
.niveaus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.niveaukaart { border: 1px solid var(--line); background: var(--surface); padding: 26px;
               display: flex; flex-direction: column; gap: 12px; }
.niveaukaart .nr { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 26px; }
.niveaukaart .cefr { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.niveaukaart .body { font-size: 14px; line-height: 1.7; color: var(--muted); font-weight: 300; flex-grow: 1; }
.niveaukaart .link { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.niveaukaart .link.stil { color: var(--dim); }

/* ---------- Pagina: één cursus ---------- */
.cursuskop .label { font-size: 15px; color: var(--brass); font-weight: 300; padding-top: 14px; }
.lijst { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.lijst div { display: flex; gap: 14px; align-items: flex-start; font-size: 17px;
             line-height: 1.7; color: var(--muted); font-weight: 300; }
.lijst .stip { width: 5px; height: 5px; background: var(--brass); flex-shrink: 0; margin-top: 11px; }
.kolomkop { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 28px;
            padding: 0 0 20px 0; }
.tweekolom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }

@media (max-width: 1100px) {
  .vormen, .tweekolom { grid-template-columns: 1fr; }
  .niveaus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .navitem { padding-bottom: 0; margin-bottom: 0; }
  .submenu { position: static; margin: 8px 0 0 0; left: 0; }
}

.submenu a.nadruk { color: var(--brass); }
.submenu a.nadruk:hover { color: var(--ivory); }

a.vorm { text-decoration: none; }
a.vorm:hover { border-color: var(--brass); }
.vorm .meer { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }

.vormen.groot .vorm { padding: 40px; gap: 20px; }
.vormen.groot .vorm h3 { font-size: 32px; }
.vorm .wie { font-size: 14px; line-height: 1.7; color: var(--dim); font-weight: 300; }
.vorm .wie .k { display: block; font-size: 11px; letter-spacing: .18em;
                text-transform: uppercase; color: var(--brass); padding-bottom: 6px; }

/* ---------- Cursuspagina: de twee blokken ---------- */
.blokkaart { border: 1px solid var(--line); background: var(--surface); padding: 32px; }
.blokkop { font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
           color: var(--brass); padding-bottom: 16px; }
.bloktekst { font-size: 17px; line-height: 1.85; color: var(--muted); font-weight: 300; }

/* ---------- Prijzen: vier kaarten naast elkaar ---------- */
.plans.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.plans.vier .plan { padding: 28px; gap: 16px; }
.plans.vier .amount { font-size: 40px; }
.plan .planlabel { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--body-soft); }
/* Vier naast elkaar: labels even hoog houden, zodat de bedragen op een lijn staan. */
.plans.vier .planlabel { min-height: 16px; line-height: 1.4; letter-spacing: .12em; }
.plans.vier .plan.best .ribbon { top: -12px; right: 18px; }
.plan .planprijs { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan .planprijs .per { font-size: 14px; color: var(--body-soft); font-weight: 300; }
.plan .planbody { font-size: 15px; line-height: 1.75; color: var(--body); font-weight: 300; flex-grow: 1; }
.plan .planlink { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); }
a.plan { text-decoration: none; }
a.plan:hover { border-color: var(--brass); }

@media (max-width: 1100px) {
  .plans.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .plans.vier { grid-template-columns: 1fr; }
}

/* De privacyverklaring en de voorwaarden: koppen tussen de alinea's door. */
.juridischkop { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 26px;
                line-height: 1.3; color: var(--ivory); font-weight: 400;
                margin: 42px 0 14px; }
.prose .juridischkop:first-child { margin-top: 0; }

/* Fotostrook onder de deuren op Over Chatter. */
.deurfotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
             margin: 40px 0 8px; }
.deurfotos figure { margin: 0; aspect-ratio: 19 / 14; overflow: hidden;
                    border: 1px solid rgba(31, 42, 55, .12); }
.deurfotos img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Een brede foto tussen twee secties door. */
.fotoband { margin: 0; }
.fotoband img { width: 100%; height: 340px; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .deurfotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fotoband img { height: 220px; }
}
@media (max-width: 520px) {
  .deurfotos { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fotoband img { height: 180px; }
}