/* Gedeelde stijl voor de tekstpagina's die er voor Google staan.

   Afwijking van de huisregel dat elk bestand zijn eigen CSS bevat, en met
   reden: de voorpagina, de app en het beheerpaneel zijn elk een ander soort
   scherm, maar deze pagina's zijn allemaal hetzelfde. Bij vier kopieen van
   dezelfde honderd regels repareer je een fout drie keer niet. De voorpagina
   houdt zijn eigen CSS, want die heeft opmaak die hier niet voorkomt.

   Zelfde palet als de voorpagina en het beheerpaneel: zwart, rood, oranje. */

:root{
  --grond:#0a0809; --vlak:#151012; --vlak2:#1c1618;
  --lijn:#2a1f23; --lijn2:#3b2c31;
  --ink:#f4edeb; --ink2:#b9a9ab; --ink3:#867679;
  --rood:#e11d2e; --rood-diep:#b1121f; --rood-licht:#3a0f15; --rood-rand:#6a1a24;
  --oranje:#ff8a3a; --oranje-licht:#3b2010;
  --disp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
[hidden]{display:none !important;}
*{box-sizing:border-box}
body{margin:0;background:var(--grond);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}

/* ═══ kop en voet ═══ */
header{border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:5;
  background:rgba(10,8,9,.88);backdrop-filter:blur(10px)}
header .wrap{max-width:1080px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-top:14px;padding-bottom:14px}
.merk{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;
  font-size:19px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.merkicoon{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--rood),var(--rood-diep))}
.merkicoon svg{width:16px;height:16px;fill:#fff}
header nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
header nav a{color:var(--ink3);text-decoration:none;font-size:15px;padding:7px 10px;border-radius:8px}
header nav a:hover{color:var(--ink)}
footer{border-top:1px solid var(--lijn);margin-top:64px;padding:26px 0 40px;
  color:var(--ink3);font-size:14.5px}
footer .wrap{max-width:1080px;display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center}
footer a{color:var(--ink3)}

/* ═══ tekst ═══ */
main{padding:44px 0 0}
h1{font-family:var(--disp);font-size:clamp(30px,5.2vw,44px);font-weight:800;
  letter-spacing:-.03em;line-height:1.1;margin:0 0 16px}
h2{font-family:var(--disp);font-size:clamp(22px,3.4vw,28px);font-weight:700;
  letter-spacing:-.02em;margin:44px 0 12px;scroll-margin-top:80px}
h3{font-family:var(--disp);font-size:19px;font-weight:650;margin:28px 0 8px}
p{margin:0 0 16px;color:var(--ink2)}
.inleiding{font-size:19.5px;line-height:1.6;color:var(--ink)}
a{color:var(--oranje)}
a:hover{color:var(--ink)}
strong,b{color:var(--ink);font-weight:650}
ul,ol{margin:0 0 18px;padding-left:22px;color:var(--ink2)}
li{margin-bottom:7px}
.kruimel{font-size:14px;color:var(--ink3);margin:0 0 18px}
.kruimel a{color:var(--ink3)}
hr{border:0;border-top:1px solid var(--lijn);margin:40px 0}

/* ═══ tabel ═══ */
.tabelbak{overflow-x:auto;margin:0 0 20px;border:1px solid var(--lijn);border-radius:14px}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:480px}
th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--lijn);color:var(--ink2)}
th{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink3);background:var(--vlak2)}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--ink)}

/* ═══ blokken ═══ */
.kader{background:var(--vlak);border:1px solid var(--lijn);border-radius:16px;
  padding:20px 22px;margin:0 0 22px}
.kader p:last-child{margin-bottom:0}
.kader .kop{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--ink);margin:0 0 8px}
.let{background:linear-gradient(135deg,var(--oranje-licht),var(--vlak) 62%);
  border:1px solid var(--lijn2);border-radius:16px;padding:18px 20px;margin:0 0 22px}
.let p:last-child{margin-bottom:0}

/* ═══ gesprek ═══ */
.gesprek{border:1px solid var(--lijn);border-radius:16px;padding:8px 6px;margin:0 0 22px;
  background:var(--vlak)}
.beurt{display:flex;gap:11px;padding:8px 12px}
.wie{flex:none;width:58px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3);padding-top:4px}
.zegt{margin:0;color:var(--ink2);font-size:15.5px;line-height:1.55}
.beurt.s .zegt{color:var(--ink)}

/* ═══ oproep tot actie ═══ */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:12px;border:1px solid var(--lijn2);cursor:pointer;
  font-family:var(--body);font-size:16px;font-weight:650;text-decoration:none;
  color:var(--ink);background:linear-gradient(180deg,var(--vlak2),var(--vlak))}
.knop.primair{background:linear-gradient(135deg,var(--rood),var(--rood-diep));
  color:#fff;border-color:transparent}
.knop:hover{transform:translateY(-1px)}
.slot{background:linear-gradient(135deg,var(--rood-licht),var(--vlak) 62%);
  border:1px solid var(--rood-rand);border-radius:20px;padding:26px 28px;margin:46px 0 0}
.slot h2{margin:0 0 10px}
.slot p{margin-bottom:18px}
.slot .knoppen{display:flex;gap:10px;flex-wrap:wrap}
.nummer{font-family:var(--mono);color:var(--oranje);text-decoration:none;font-weight:700;
  white-space:nowrap}

/* ═══ rekenmachine ═══ */
.reken{background:var(--vlak);border:1px solid var(--lijn);border-radius:20px;
  padding:24px;margin:0 0 26px}
.schuif{margin:0 0 20px}
.schuif label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:15.5px;color:var(--ink2);margin:0 0 8px}
.schuif label b{font-family:var(--mono);font-size:16px;color:var(--oranje)}
.schuif input[type=range]{width:100%;accent-color:var(--rood);height:26px}
.uitkomst{border-top:1px solid var(--lijn);padding-top:20px;margin-top:4px}
.uitkomst .groot{font-family:var(--disp);font-size:clamp(34px,7vw,52px);font-weight:800;
  letter-spacing:-.035em;line-height:1;color:var(--ink);margin:0 0 6px}
.uitkomst .onder{font-size:15.5px;color:var(--ink3);margin:0}
.uitkomst .regel{display:flex;justify-content:space-between;gap:14px;font-size:15.5px;
  padding:7px 0;border-bottom:1px solid var(--lijn);color:var(--ink2)}
.uitkomst .regel:last-of-type{border-bottom:0}
.uitkomst .regel b{color:var(--ink);font-family:var(--mono);font-size:15px}

@media (max-width:620px){
  body{font-size:16.5px}
  main{padding-top:30px}
  header nav a:not(.knop){display:none}
  .wie{width:48px;font-size:10px}
}