/* ============================================================
   style.css — opmaak voor de startpagina (index.php),
   de toolpagina's (st_*.php) en het menu (menu.php).
   1. Gedeeld      — alles wat op elke pagina hetzelfde is
   2. Startpagina  — alleen index.php      (body class="startpagina")
   3. Toolpagina   — alleen st_*.php       (body class="toolpagina")
   4. Menu         — knop met drie streepjes + inschuifmenu
   De kleuren van de 3D-stukken staan in scripts/scene.js (blok KLEUR).
   ============================================================ */


/* ============================================================
   1. GEDEELD
   ============================================================ */
/* Lettertypes van de eigen server (map fonts/), niet van Google; zie fonts/README.txt */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-latin.woff2') format('woff2');
}
/* De kleuren van de site. Pas je hier een kleur aan, dan verandert hij overal waar hij gebruikt wordt
   (ook de doorzichtige randjes en vlakjes die ervan zijn afgeleid). */
:root {
  --donker:     #34271a;  /* achtergrond van donkere panelen */
  --donker-2:   #251b11;  /* tweede kleur van het verloop in donkere panelen */
  --creme:      #f5eedf;  /* tekst op donker; achtergrond van lichte panelen */
  --beige:      #c8b89a;  /* minder belangrijke tekst op donker; randen op licht */
  --goud:       #b8924a;  /* kopjes, gouden deel van titels, knoppen, randen op donker */
  --donkergoud: #7d5c1f;  /* kopjes, knoppen en links op lichte panelen */
  --zwartbruin: #1a1209;  /* tekst op licht en op gouden knoppen; logo en menuknop */
  --bruin:      #5a4632;  /* minder belangrijke tekst op licht */
  --lichtbeige: #ede4cf;  /* vlakjes en lijntjes op lichte panelen */
  --rood:       #6b1414;  /* ZETWERK-label */
  --owly:       #306050;  /* Owly-label (groenblauw van de ogen van de uil) */
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--zwartbruin) url('../images/wood/dark.webp') repeat;  /* houten achtergrond; --bg alleen zolang het hout laadt */
  color: var(--creme);
  font-family: Montserrat, system-ui, sans-serif;
}

/* Bovenpaneel. Laag 1: het paneel. Laag 2: de 3D-scène. Laag 3: tekst en knoppen. */
.hero { position: relative; height: min(100vh, 56vw); }  /* niet hoger dan breedbeeld-verhouding */
.paneel {
  position: absolute; inset: 7vh 6vw 28px;  /* onder: gelijk aan de ruimte tussen de panelen */
  border-radius: 28px;
  background:
    url('../images/bg.png') no-repeat left top / auto 100%,  /* schaakbordmotief links */
    linear-gradient(135deg, var(--donker), var(--donker-2));
  border: 1px solid color-mix(in srgb, var(--beige) 18%, transparent);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .45);
}
canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.inhoud {
  position: absolute; inset: 7vh 6vw 28px; z-index: 2;
  padding: clamp(24px, 4vw, 56px);
  display: flex; flex-direction: column;
  pointer-events: none;
}
.inhoud a { pointer-events: auto; }

/* Logo */
.logo { display: inline-flex; align-items: center; align-self: flex-start; text-decoration: none; }
.logo-icoon {
  width: 52px; height: 52px; flex-shrink: 0;
  background: var(--zwartbruin) url('../images/logo-icon.png') no-repeat center / 55%;
  border: 2px solid var(--beige);
}
.logo-tekst { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; margin-left: 10px; }
.logo-hoofd {
  font-weight: 600; font-size: 1.25rem; font-variant-caps: all-small-caps;
  letter-spacing: .08em; white-space: nowrap; color: var(--creme);
}
.logo-sub { font-size: .9rem; font-variant-caps: all-small-caps; letter-spacing: .04em; white-space: nowrap; color: var(--beige); }  /* volledige naam onder de afkorting */

h1 { font-weight: 600; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.05; }
h1 span { color: var(--goud); }
/* Tekst alleen op een breed scherm of alleen op een telefoon (bv. een kortere titel) */
.alleen-telefoon { display: none; }
@media (max-width: 760px) {
  .alleen-breed { display: none; }
  .alleen-telefoon { display: inline; }
}
p { line-height: 1.6; margin-top: 20px; max-width: 26rem; }  /* kleur: die van het paneel (crème op donker, zwartbruin op licht) */
/* Minder belangrijke tekst: korte uitleg op de panelen van de startpagina, "sinds …", copyright */
.tool-tekst p, .klein, .onderaan-copy { color: var(--beige); }                               /* op donker */
.panelen .licht p, .licht .klein, .licht .onderaan-copy { color: var(--bruin); }             /* op licht */

/* Links linksonder in het bovenpaneel: Voorwaarden · Doneren (hero.php) */
.hero-links { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 24px; }
.hero-links a {
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--creme); text-decoration: none;
}
.hero-links a + a::before { content: '·'; margin: 0 14px; color: var(--beige); }
.hero-links a:hover, .hero-links a:focus-visible { color: var(--goud); outline: none; }

/* Knoppen */
.knoppen { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.knop {
  padding: 12px 22px; border-radius: 999px;
  font: 600 14px Montserrat, sans-serif; text-decoration: none;
}
/* Knoppen bovenaan een toolpagina: elke rij een eigen groepje ('nieuwe regel' in $hero_knoppen) */
.tekstblok .knoppen { flex-direction: column; align-items: flex-start; }
.knoppen-rij { display: flex; flex-wrap: wrap; gap: 12px; }
.knop.vol { background: var(--goud); color: var(--zwartbruin); }
.knop.rand { border: 1px solid color-mix(in srgb, var(--beige) 55%, transparent); background: color-mix(in srgb, var(--zwartbruin) 55%, transparent); color: var(--creme); }  /* duidelijk als knop, ook op het schaakbordmotief */
.knop.rand:hover, .knop.rand:focus-visible { border-color: var(--goud); outline: none; }

@media (max-width: 760px) {
  .hero { height: auto; display: flow-root; }  /* marges van de inhoud blijven binnen het paneel */
  .paneel { inset: 16px; }
  .inhoud { position: relative; inset: auto; margin: 16px; }
  canvas { display: none; }
}


/* ============================================================
   2. STARTPAGINA (index.php)
   ============================================================ */
html:has(> body.startpagina) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(> body.startpagina) { scroll-behavior: auto; } }
.startpagina .hero { height: min(100vh - 100px, 56vw); min-height: 640px; }  /* 100px lager: het eerste paneel (nieuws) staat direct in beeld */

/* Midden van het bovenpaneel: titel en tekst links (de rechterkolom is nu leeg) */
.hero-midden {
  margin: auto 0; display: grid; gap: 48px; align-items: center;
  grid-template-columns: 1fr minmax(280px, 500px);
}

.kop {
  font-size: 13px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--goud);
}

/* Knoppen op lichte panelen */
.licht .knop.vol { background: var(--donkergoud); color: var(--creme); }
.licht .knop.rand { border-color: var(--beige); background: none; color: var(--zwartbruin); }

/* Panelen onder het bovenpaneel: één per tool */
.panelen { padding: 0 6vw 6vh; display: grid; gap: 28px; }

/* Ronde keuzeknoppen (taalkeuze op voorwaarden.php, Kopieer op doneren.php) */
.filter {
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
  font: 600 14px Montserrat, sans-serif;
  background: none; border: 1px solid color-mix(in srgb, var(--beige) 18%, transparent); color: var(--creme);
}
.filter:hover, .filter:focus-visible { border-color: var(--goud); outline: none; }
.filter[aria-pressed="true"] { background: var(--goud); border-color: var(--goud); color: var(--zwartbruin); }
.tool-lijst { display: grid; gap: 28px; }
/* Informatiepanelen tussen de tools (Doneren, SWOP, Voorwaarden): smal, gecentreerd, gouden rand.
   SWOP kan ook als laatste vak in het raster van de overige tools staan (bij een oneven aantal tools). */
.tool-lijst > .info-paneel, .tool-raster > .info-paneel { width: 60%; justify-self: center; text-align: center; border: 4px solid var(--goud); }
.tool-lijst > .info-paneel p, .tool-raster > .info-paneel p { margin-left: auto; margin-right: auto; }
.tool-lijst > .info-paneel .knoppen, .tool-raster > .info-paneel .knoppen { justify-content: center; }

/* Overige tools: onder elkaar; vanaf 1024 breed twee naast elkaar (dit getal is de grens om bij te stellen) */
.tool-raster { display: grid; gap: 28px; }
@media (min-width: 1024px) {
  .tool-raster { grid-template-columns: 1fr 1fr; }
  /* Kaart: afbeelding boven, tekst eronder; kaarten in een rij even hoog, knoppen onderaan */
  .tool-raster > .tool-paneel { display: flex; flex-direction: column; align-items: stretch; }
  .tool-raster .tool-tekst { flex: 1; display: flex; flex-direction: column; }
  .tool-raster .tool-tekst .knoppen { margin-top: auto; padding-top: 28px; }
  /* SWOP in het lege vak: even breed en hoog als de kaart ernaast, letters 2×2 */
  .tool-raster > .info-paneel { width: auto; justify-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .tool-raster .swop-raster { grid-template-columns: 1fr 1fr; }
}

/* Magazine (index.php): alle edities als lijst naast de voorkant van de nieuwste */
.magazine-paneel .tool-beeld a { display: block; }
.edities-kop { display: block; margin-top: 28px; }
.edities { list-style: none; padding: 0; margin-top: 8px; }
.edities li { padding: 4px 0; color: var(--bruin); }
.edities li::before { content: '›'; color: var(--donkergoud); margin-right: 10px; }
.edities a { color: var(--zwartbruin); font-weight: 600; }
.edities a:hover, .edities a:focus-visible { color: var(--donkergoud); }

/* Nieuws bovenaan de startpagina: maximaal drie kleine panelen naast elkaar */
.nieuws { display: grid; grid-template-columns: 1fr; gap: 28px; }  /* vast raster: 1, 2+2 of 4 naast elkaar, nooit 3+1 */
@media (min-width: 761px) { .nieuws { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .nieuws { grid-template-columns: repeat(4, 1fr); } }
.nieuws-item {
  display: flex; flex-direction: column; text-align: center;
  border: 4px solid var(--goud); padding: 22px;
}
.nieuws .nieuws-item h2 { font-size: 20px; }
.nieuws-item p { margin: 8px auto 0; max-width: none; flex: 1; }
.nieuws-item .knoppen { justify-content: center; margin-top: 16px; }

/* Lijstje in een vast vak (Top 5, websites & boeken): naam links, aantal rechts */
.vak-lijst { list-style: none; padding: 0; margin: 14px 0 0; flex: 1; text-align: left; }
.vak-lijst li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--goud) 25%, transparent); }
.vak-lijst li:last-child { border-bottom: 0; }
.vak-lijst a { color: var(--creme); text-decoration: none; }
.vak-lijst a:hover, .vak-lijst a:focus-visible { color: var(--goud); outline: none; }
.vak-lijst span { color: var(--goud); font-weight: 600; white-space: nowrap; }
.top5 { counter-reset: plek; }
.top5 a::before { counter-increment: plek; content: counter(plek) '. '; color: var(--goud); }
/* Vier vakken naast elkaar: smallere zijmarge en kleinere letters, zodat elke tool in de Top 5 op één regel past */
@media (min-width: 1280px) {
  .nieuws.vast .nieuws-item { padding-left: 22px; padding-right: 22px; }
  .top5 { font-size: 14px; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .nieuws.vast .nieuws-item { padding-left: 18px; padding-right: 18px; }
  .top5 { font-size: 13px; }
}

/* Nieuws onder de vaste vakken: half zo hoog, alleen label, titel en knop */
.nieuws.kort .nieuws-item { padding: 16px 20px; }
.nieuws.kort .nieuws-item h2 { font-size: 18px; margin-top: 6px; flex: 1; }
.nieuws.kort .nieuws-item .knoppen { margin-top: 12px; }
.nieuws.kort .knop { padding: 8px 18px; }
/* Telefoon: compact lijstje, label en titel links, knop rechts */
@media (max-width: 760px) {
  .nieuws.kort { gap: 10px; }
  .nieuws.kort .nieuws-item {
    display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px;
    text-align: left; padding: 12px 16px; border-width: 2px; border-radius: 16px;
  }
  .nieuws.kort .kop { grid-column: 1; font-size: 11px; }
  .nieuws.kort .nieuws-item h2 { grid-column: 1; font-size: 16px; margin-top: 2px; }
  .nieuws.kort .nieuws-item .knoppen { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .nieuws.kort .knop { padding: 6px 14px; font-size: 13px; }
}

/* SWOP: vier letters naast elkaar */
.swop-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }  /* vier even brede kadertjes */
/* Elke letter een eigen kadertje */
.swop-raster > div {
  background: var(--lichtbeige); border: 1px solid var(--beige); padding: 14px 6px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.swop-letter { font-size: 36px; font-weight: 600; color: var(--donkergoud); line-height: 1; }
.swop-naam { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--zwartbruin); white-space: nowrap; }
.swop-raster p { margin-top: 0; font-size: 13px; line-height: 1.45; }
.tool-paneel, .info-paneel {
  border-radius: 24px; padding: clamp(22px, 3vw, 44px);
  scroll-margin-top: 24px;
}
/* Zachte schaduw onder alle panelen (lichter dan die van het grote bovenpaneel) */
.tool-paneel, .info-paneel, .vak { box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.donker {
  background: linear-gradient(135deg, var(--donker), var(--donker-2));
  border: 1px solid color-mix(in srgb, var(--goud) 45%, transparent);
}
.nieuws-item.donker { border: 4px solid var(--goud); }  /* Schaaktools in actie: zelfde gouden rand als de lichte nieuwsvakken */
.licht { background: var(--creme); color: var(--zwartbruin); }
.licht .kop { color: var(--donkergoud); }

/* Extra talen klein rechtsboven in een toolpaneel: "EN · DE" */
/* Naam en talen op één regel: naam links, talen helemaal rechts (bij weinig ruimte eronder, nog steeds rechts) */
.tool-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.tool-paneel .tool-kop h2 { margin-top: 0; }
.tool-talen { display: flex; gap: 6px; margin-left: auto; }
.tool-talen span {
  padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--goud) 45%, transparent); border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--creme);
}
.licht .tool-talen span { border-color: var(--beige); color: var(--zwartbruin); }

/* Teller rechts naast de knoppen: "82× gestart", klein eronder "sinds ..." */
.tool-starts { margin-left: auto; align-self: center; text-align: right; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--creme); }
.tool-starts small { display: block; font-size: 12px; font-weight: 400; color: var(--beige); }
.licht .tool-starts { color: var(--zwartbruin); }
.licht .tool-starts small { color: var(--bruin); }

/* Afbeelding links, tekst rechts */
.tool-paneel {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.tool-beeld img, .tool-beeld .geen-beeld {
  width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; display: block;
  border: 1px solid color-mix(in srgb, var(--goud) 45%, transparent); box-shadow: 0 16px 36px rgba(0, 0, 0, .4);
}
.licht .tool-beeld img, .licht .tool-beeld .geen-beeld { border-color: var(--beige); box-shadow: 0 16px 36px rgba(26, 18, 9, .25); }
.tool-beeld .geen-beeld { background: color-mix(in srgb, var(--creme) 5%, transparent); }
.licht .tool-beeld .geen-beeld { background: var(--lichtbeige); }
.tool-paneel h2 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; margin-top: 10px; line-height: 1.15; }
.tool-paneel p { font-size: 17px; max-width: 32rem; }

/* Doneren en info */
.info-paneel h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; margin-top: 10px; }
.info-paneel p { max-width: 44rem; margin-top: 12px; }
/* Paneel onderaan elke pagina (onderaan.php): links eigen pagina's, midden de review-link, rechts andere sites, copyright eronder */
.onderaan { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px 32px; }
.onderaan-review { align-self: center; text-align: center; font-size: 15px; font-weight: 600; color: var(--creme); text-decoration: none; }
.onderaan-review span { display: block; }  /* sterren, vraag en oproep elk op een eigen regel */
.onderaan-review .sterren { margin-bottom: 4px; font-size: 18px; letter-spacing: .15em; color: var(--goud); }
.licht .onderaan-review { color: var(--zwartbruin); }
.licht .onderaan-review .sterren { color: var(--donkergoud); }
.onderaan-review:hover, .onderaan-review:focus-visible { color: var(--goud); outline: none; }
.licht .onderaan-review:hover, .licht .onderaan-review:focus-visible { color: var(--donkergoud); }
.onderaan-links { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.onderaan-links.rechts { align-items: flex-end; }
.onderaan-links a { font-size: 15px; color: var(--creme); text-decoration: none; }
.licht .onderaan-links a { color: var(--bruin); }
.onderaan-links a:hover, .onderaan-links a:focus-visible { color: var(--goud); outline: none; }
.licht .onderaan-links a:hover, .licht .onderaan-links a:focus-visible { color: var(--donkergoud); }
.onderaan .onderaan-copy {
  grid-column: 1 / -1; max-width: none; margin: 0; padding-top: 18px; text-align: center;
  font-size: 14px; border-top: 1px solid color-mix(in srgb, var(--beige) 18%, transparent);
}
.licht .onderaan-copy { border-top-color: var(--lichtbeige); }
@media (max-width: 760px) {
  .onderaan { grid-template-columns: 1fr; }
  .onderaan-links.rechts { align-items: flex-start; }
  .onderaan-review { text-align: left; }
}

@media (max-width: 760px) {
  .startpagina .hero { min-height: 0; height: auto; }  /* telefoon: paneel groeit mee met de tekst */
  .tool-lijst > .info-paneel, .tool-raster > .info-paneel { width: 100%; }  /* telefoon: even breed als het scherm */
  .swop-raster { grid-template-columns: 1fr 1fr; }
  .tool-lijst, .tool-raster { gap: 20px; }
  .hero-midden { margin: 28px 0; grid-template-columns: 1fr; gap: 28px; }
  .panelen { padding: 4px 16px 32px; gap: 20px; }  /* boven: 16 (paneel) + 4 = 20, gelijk aan de ruimte tussen de panelen */
  .tool-paneel { grid-template-columns: 1fr; gap: 20px; }
}


/* ============================================================
   2b. INFORMATIEPAGINA'S (swop.php, voorwaarden.php)
       Laag bovenpaneel zonder zwevende stukken, daaronder één tekstpaneel
   ============================================================ */
.infopagina .hero { height: auto; display: flow-root; }
.infopagina .inhoud { position: relative; inset: auto; margin: 7vh 6vw 28px; }
.infopagina .hero-midden { display: block; margin: 36px 0 0; }

/* Tekstpaneel: licht, met gouden rand (zoals Doneren/SWOP/Voorwaarden op de startpagina), leesbare breedte */
.tekst { width: min(100%, 900px); justify-self: center; border: 4px solid var(--goud); }
.tekst h2 {
  font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--donkergoud); margin: 0 0 12px;
}
.tekst h2:not(:first-child) { margin-top: 30px; }
.tekst p { max-width: none; margin-top: 0; }
.tekst p + p { margin-top: 16px; }
.tekst p, .tekst li { line-height: 1.7; }
.tekst ul { list-style: none; padding: 0; margin: 10px 0; }
.tekst li { padding: 3px 0; }
.tekst li::before { content: '›'; color: var(--donkergoud); margin-right: 10px; }
.tekst a { color: var(--donkergoud); }
/* Taalknoppen op licht */
.taalkeuze { display: flex; gap: 10px; margin-bottom: 28px; }
.licht .filter { border-color: var(--beige); color: var(--zwartbruin); }
.licht .filter[aria-pressed="true"] { background: var(--donkergoud); border-color: var(--donkergoud); color: var(--creme); }

/* Doneren: bankgegevens, QR-code en boeken (doneren.php) */
/* Eén gedeelde labelkolom (subgrid) die meegroeit met het langste label, in elke taal */
.bank { margin: 6px 0 0; display: grid; grid-template-columns: minmax(9rem, auto) 1fr; column-gap: 16px; }
.bank > div {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--lichtbeige);
}
.bank dt { font-weight: 600; color: var(--bruin); }
.bank dd { margin: 0; color: var(--zwartbruin); }
.tekst .klein { margin-top: 14px !important; }
.kopieer { margin-left: 10px; padding: 4px 14px; font-size: 13px; }
.qr-indeling { display: grid; grid-template-columns: 1fr 200px; gap: 32px; align-items: center; }
.qr { width: 200px; height: 200px; display: block; border: 1px solid var(--beige); background: #fff; }
.stappen { padding-left: 1.3em; margin-top: 14px; }
.tekst .stappen li::before { content: none; }
.stappen li { padding: 3px 0; }
.boeken { display: grid; gap: 28px; margin-top: 24px; }
.boek { display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: start; padding-top: 24px; border-top: 1px solid var(--lichtbeige); }
.boek img { width: 140px; height: auto; display: block; box-shadow: 0 10px 24px rgba(26, 18, 9, .25); }
.boek h3 { font-size: 18px; font-weight: 600; color: var(--zwartbruin); }
.boek p { margin-top: 8px; }
.boek .knoppen { margin-top: 14px; }

/* Launcher & Widget (st_launcher.php): afbeelding op ware grootte, werkende widget, codeblokken met kopieerknop */
.launcher-beeld { margin: 28px 0 0; text-align: center; }
.launcher-beeld img { width: 500px; max-width: 100%; height: auto; display: block; margin: 0 auto; box-shadow: 0 16px 36px rgba(26, 18, 9, .25); }
.widget-voorbeeld { max-width: 500px; margin-top: 12px; }
.code-blok { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 16px; }
.code-blok pre {
  flex: 1; min-width: 0; margin: 0; padding: 14px 18px; border-radius: 12px;
  background: var(--lichtbeige); border: 1px solid var(--beige); color: var(--zwartbruin);
  font: 13px/1.6 'JetBrains Mono', Consolas, monospace; white-space: pre-wrap; word-break: break-all;
}
.code-blok .kopieer { margin-left: 0; }

@media (max-width: 760px) {
  .qr-indeling { grid-template-columns: 1fr; justify-items: center; }
  .boek { grid-template-columns: 96px 1fr; gap: 16px; }
  .boek img { width: 96px; }
  .bank { grid-template-columns: minmax(6rem, auto) 1fr; }
  .infopagina .inhoud { margin: 16px; }
  .infopagina .hero-midden { margin-top: 24px; }
}

/* ChessDeck Showcase (chessdeck_showcase.php): links wat je typt, rechts wat je krijgt */
.cds-uitleg p { max-width: none; margin-top: 10px; }
.cds-kolomkoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 18px; }
.cds-kolomkoppen span {
  font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--donkergoud);
}
.cds-slide-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.cds-slide-code {
  margin: 0; padding: 18px 20px; border-radius: 12px; overflow-x: auto;
  background: var(--lichtbeige); border: 1px solid var(--beige); color: var(--zwartbruin);
  font: 13px/1.6 'JetBrains Mono', Consolas, monospace; white-space: pre-wrap; word-break: break-word;
}
.cds-preview-wrap img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--beige); box-shadow: 0 12px 28px rgba(26, 18, 9, .25);
}
.cds-chapter {
  border-radius: 24px; padding: 18px clamp(22px, 3vw, 44px);
  background: linear-gradient(135deg, var(--donker), var(--donker-2));
  border: 1px solid color-mix(in srgb, var(--goud) 45%, transparent); box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--goud);
}
.cds-theme-switch { border: 0; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cds-theme-switch legend { font-size: 13px; font-weight: 600; color: var(--bruin); margin-bottom: 6px; }
.cds-theme-switch label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--zwartbruin); cursor: pointer; }
.cds-theme-switch input { accent-color: var(--donkergoud); }
.cds-afsluiter { text-align: center; }
.cds-afsluiter p { margin-left: auto; margin-right: auto; }
.cds-afsluiter .knoppen { justify-content: center; }
@media (max-width: 760px) {
  .cds-slide-row, .cds-kolomkoppen { grid-template-columns: 1fr; gap: 16px; }
  .cds-kolomkoppen span + span { display: none; }  /* telefoon: tekst en beeld staan onder elkaar */
}

/* Schaaktools in actie (articles.php): links het artikel, rechts donker de titels en daaronder de afbeeldingen */
.articles {
  display: grid; gap: 28px;  /* kolommen even hoog: het onderste kader rechts of het tekstkader rekt mee */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "tekst titels" "tekst beelden";
}
.articles .artikel { grid-area: tekst; width: auto; display: flex; flex-direction: column; }
.artikel-inhoud { flex: 1; }  /* duwt Vorige/Volgende naar de onderrand */
.articles:not(:has(.artikel-beelden)) .artikel-titels { grid-row: 1 / -1; }  /* geen afbeeldingen: titelkader tot onderaan */
.artikel h1 { font-size: clamp(24px, 2.4vw, 34px); color: var(--zwartbruin); margin-bottom: 16px; }
.artikel img { max-width: 100%; height: auto; }
.artikel-bladeren { display: flex; gap: 12px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--lichtbeige); }
.artikel-bladeren .volgende { margin-left: auto; }
.articles .artikel-titels { grid-area: titels; }
.artikel-titels h2.kop { font-size: 13px; margin-top: 0; }
.artikel-titels ul { list-style: none; padding: 0; margin-top: 12px; max-height: calc(8 * 2.9em); overflow-y: auto; }  /* 8 titels zichtbaar, meer = scrollen */
.artikel-titels li + li { border-top: 1px solid color-mix(in srgb, var(--beige) 18%, transparent); }
.artikel-titels a { display: block; padding: 8px 10px; border-radius: 8px; line-height: 1.4; color: var(--creme); text-decoration: none; }
.artikel-titels a:hover, .artikel-titels a:focus-visible { color: var(--goud); outline: none; }
.artikel-titels a[aria-current] { color: var(--goud); font-weight: 600; background: color-mix(in srgb, var(--creme) 7%, transparent); }
.artikel-beelden { grid-area: beelden; display: grid; gap: 20px; align-content: start; }  /* afbeeldingen bovenaan, lege ruimte onderin */
.artikel-beelden img {
  width: 100%; height: auto; display: block;
  border: 1px solid color-mix(in srgb, var(--goud) 45%, transparent); border-radius: 12px;
}
.artikel-beelden figure { margin: 0; }
.artikel-beelden figcaption { margin-top: 6px; font-size: 12px; color: var(--beige); text-align: center; }  /* "afbeelding 1" onder elke afbeelding */
@media (min-width: 761px) {  /* 4 of meer afbeeldingen: 2 kolommen; bij een oneven aantal de eerste over de volle breedte */
  .artikel-beelden:has(figure:nth-child(4)) { grid-template-columns: 1fr 1fr; }
  .artikel-beelden:has(figure:nth-child(4)) figure:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .articles { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "titels" "tekst" "beelden"; gap: 20px; }
}


/* ============================================================
   3. TOOLPAGINA (st_*.php)
   ============================================================ */
.toolpagina h1 { font-family: Montserrat, sans-serif; }
/* ZETWERK-label boven de naam van een ZETWERK-tool: eigen regel, ZETWERK-rood op crème */
.zw-label {
  display: table; margin-bottom: 14px; padding: 5px 12px 4px; border-radius: 4px;
  background: var(--creme); color: var(--rood);
  font-size: 14px; font-weight: 600; letter-spacing: .22em; line-height: 1.2;
}
.zw-label.owly { color: var(--owly); }
.toolpagina .knoppen { margin-top: 32px; }
.tekstblok { margin: auto 0; max-width: 30rem; }

/* Schermafbeelding als gewone afbeelding: alleen op een telefoon (breed staat hij in 3D) */
.scherm-mobiel { display: none; }

/* Informatie onder het bovenpaneel */
.info { padding: 0 6vw 10vh; display: grid; gap: 24px; }
.raster {
  display: grid; gap: 24px;
  grid-template-columns: 1fr 1.8fr;
}
.omschrijving { grid-column: 2; grid-row: 1 / span 3; }  /* naast de drie vakken Versie, Gestart, Talen */
.talen span {
  display: inline-block; margin: 0 6px 6px 0; padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--goud) 45%, transparent); border-radius: 999px;
  font-weight: 600; font-size: 14px; color: var(--creme);
}
.vak {
  background: linear-gradient(135deg, var(--donker), var(--donker-2));
  border: 1px solid color-mix(in srgb, var(--goud) 45%, transparent);
  border-radius: 20px;
  padding: clamp(22px, 3vw, 40px);
}
.vak h2 {
  font-size: 15px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--goud); margin-bottom: 14px;
}
.vak p { max-width: none; margin-top: 0; }
.vak p + p { margin-top: 16px; }
.omschrijving p { line-height: 1.75; font-size: 16px; }
.groot { font-size: 40px; font-weight: 600; color: var(--creme); line-height: 1.1; }
.klein { font-size: 14px; margin-top: 6px !important; }
.vak ul { list-style: none; padding: 0; }
.vak li { padding: 4px 0; color: var(--creme); }
.vak li::before { content: '›'; color: var(--goud); margin-right: 10px; }
.beelden { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.beelden img {
  width: 100%; height: auto; display: block;
  border: 1px solid color-mix(in srgb, var(--goud) 45%, transparent); border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
}

/* Lightbox (scripts/lightbox.js): klik op een schermafbeelding = groot tonen, klik of Esc = sluiten */
img.vergroot { cursor: zoom-in; pointer-events: auto; }  /* pointer-events: ook in het bovenpaneel klikbaar */
.lightbox {
  padding: 0; border: 0; background: none; max-width: none; max-height: none;
  width: 100vw; height: 100vh; display: none; place-items: center; cursor: zoom-out;
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: color-mix(in srgb, var(--zwartbruin) 88%, transparent); }
.lightbox img {
  max-width: calc(100vw - 32px); max-height: calc(100vh - 32px);
  border: 1px solid color-mix(in srgb, var(--goud) 45%, transparent); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}

/* Quotes van gebruikers (alleen als er quotes zijn ingevuld).
   Zelfde twee kolommen als het blok erboven: links kopje + naam, rechts de quote,
   precies even breed als de Omschrijving. De kolomafstand is zo berekend dat de quote
   links en rechts gelijk loopt met de tekst van de Omschrijving. */
.quote-rij {
  margin: 0; display: grid; grid-template-columns: 1fr 1.8fr;
  column-gap: calc((45.2px + 2 * clamp(22px, 3vw, 40px)) / 1.8);
}
.quote-rij + .quote-rij { border-top: 1px solid color-mix(in srgb, var(--beige) 18%, transparent); margin-top: 24px; padding-top: 24px; }
.quote-rij figcaption { font-size: 14px; font-weight: 600; letter-spacing: .08em; color: var(--beige); }
.quote-rij figcaption::before { content: '— '; }
.quote-rij blockquote { margin: 0; }
.quote-rij blockquote p { line-height: 1.75; font-size: 16px; }
.quote-rij blockquote p:first-child::before { content: '“'; color: var(--goud); }
.quote-rij blockquote p:last-child::after { content: '”'; color: var(--goud); }
@media (max-width: 760px) {
  .quote-rij { grid-template-columns: 1fr; row-gap: 12px; }
}

/* Updates: tabel met wisselende rijkleuren, nieuwste bovenaan */
.updates table { width: 100%; border-collapse: collapse; }
.updates th {
  text-align: left; font-size: 14px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--beige); padding: 10px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--goud) 45%, transparent);
}
.updates td { padding: 12px 16px; vertical-align: top; line-height: 1.5; }
.updates tbody tr:nth-child(even) { background: color-mix(in srgb, var(--creme) 5%, transparent); }
.updates td { color: var(--creme); }  /* hele rij één kleur: datum, versie en wijziging */
.updates td:nth-child(-n+2) { white-space: nowrap; }
.updates td:nth-child(2) { font-weight: 600; }

@media (max-width: 760px) {
  .tekstblok { margin: 24px 0 auto; }
  .info { padding: 4px 16px 48px; }
  .raster, .beelden { grid-template-columns: 1fr; }
  .omschrijving { grid-column: auto; grid-row: auto; order: -1; }
  .updates thead { display: none; }
  .updates tr { display: block; padding: 12px 8px; }
  .updates td { display: inline; padding: 0 8px 0 0; }
  .updates td:nth-child(3) { display: block; margin-top: 4px; }
  .scherm-mobiel {
    display: block; width: 100%; height: auto; margin-top: 28px;
    border: 1px solid color-mix(in srgb, var(--goud) 45%, transparent); border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
  }
}


/* ============================================================
   4. MENU (menu.php)
   ============================================================ */
/* Menuknop rechtsboven in het paneel */
.menu-knop {
  position: absolute; top: clamp(24px, 4vw, 56px); right: clamp(24px, 4vw, 56px);
  width: 52px; height: 52px; pointer-events: auto; cursor: pointer;
  display: grid; place-content: center; gap: 6px;
  background: var(--zwartbruin); border: 2px solid var(--beige);
}
.menu-knop span { display: block; width: 22px; height: 2px; background: var(--creme); }
.menu-knop:hover, .menu-knop:focus-visible { border-color: var(--goud); outline: none; }
/* Voorbij het bovenpaneel gescrold: knop vast in de hoek van het scherm */
.menu-knop.vast {
  position: fixed; top: 16px; right: 16px; z-index: 90;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  animation: menu-knop-in .25s ease;
}
@keyframes menu-knop-in { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .menu-knop.vast { animation: none; } }

/* Menu: paneel dat van rechts inschuift */
.menu { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: auto; }
.menu.open { visibility: visible; }
.menu-achter {
  position: absolute; inset: 0; background: color-mix(in srgb, var(--zwartbruin) 60%, transparent);
  opacity: 0; transition: opacity .25s;
}
.menu.open .menu-achter { opacity: 1; }
.menu-paneel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%);
  overflow-y: auto; padding: 28px;
  background: linear-gradient(160deg, var(--donker), var(--donker-2));
  border-left: 1px solid color-mix(in srgb, var(--goud) 45%, transparent);
  box-shadow: -30px 0 60px rgba(0, 0, 0, .5);
  transform: translateX(100%); transition: transform .3s ease;
}
.menu.open .menu-paneel { transform: none; }
@media (prefers-reduced-motion: reduce) { .menu-achter, .menu-paneel { transition: none; } }

.menu-sluit {
  display: block; margin: 0 0 16px auto; width: 40px; height: 40px; cursor: pointer;
  background: none; border: 1px solid color-mix(in srgb, var(--beige) 18%, transparent); border-radius: 50%;
  color: var(--creme); font-size: 22px; line-height: 1;
}
.menu-sluit:hover, .menu-sluit:focus-visible { border-color: var(--goud); outline: none; }
.menu-home { display: block; margin: 0 0 24px; padding: 0 10px; font-weight: 600; color: var(--creme); text-decoration: none; }
.menu-home:hover, .menu-home.is-hier { color: var(--goud); }
.menu .menu-kop {
  font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--goud); margin: 8px 0 4px;
}
.menu-groep + .menu-groep { margin-top: 28px; }
.menu ul { list-style: none; padding: 0; margin-top: 10px; }

/* ZETWERK: eigen kader met de uil */
.menu-zetwerk {
  border: 1px solid var(--goud); border-radius: 16px; padding: 18px 16px 8px;
  background: color-mix(in srgb, var(--goud) 8%, transparent);
}
.menu-zetwerk-kop { display: flex; align-items: center; gap: 12px; }
.menu-zetwerk-kop .logo-icoon { width: 40px; height: 40px; }
.menu-zetwerk-kop .menu-kop { margin: 0; }
.menu-zetwerk-kop p { margin: 2px 0 0; font-size: 13px; color: var(--beige); line-height: 1.4; max-width: none; }

.menu-tool {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 10px 10px; border-radius: 10px;
}
.menu-tool + .menu-tool { border-top: 1px solid color-mix(in srgb, var(--beige) 18%, transparent); }
.menu-tool.is-hier { background: color-mix(in srgb, var(--creme) 7%, transparent); }
.menu-naam { display: block; font-weight: 600; color: var(--creme); text-decoration: none; }
a.menu-naam:hover { color: var(--goud); }
.is-hier .menu-naam { color: var(--goud); }
.menu-uitleg { display: block; font-size: 13px; color: var(--beige); line-height: 1.45; margin-top: 2px; }
/* Twee knopjes onder elkaar: Meer info + Start */
.menu-knoppen { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.menu-info, .menu-start {
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; text-align: center;
  border-radius: 999px; padding: 4px 10px;
}
.menu-info { color: var(--creme); border: 1px solid color-mix(in srgb, var(--beige) 18%, transparent); }
.menu-info:hover { border-color: var(--goud); }
.menu-start { color: var(--zwartbruin); background: var(--goud); border: 1px solid var(--goud); }
.menu-start:hover { filter: brightness(1.1); }