:root{
  --js:#f7df1e;
  --js-deep:#d9b500;
  --sheet-ink:#101827;
  --sheet-muted:#596579;
  --sheet-line:#dce2ea;
  --sheet-blue:#2d6cdf;
  --sheet-green:#168a5b;
  --sheet-purple:#7650c7;
  --sheet-orange:#e97824;
  --sheet-red:#cf3e54;
}
.cheatsheet-page{background:#f2f4f8}
.visual-reference-hero{overflow:hidden;padding:82px 0;background:radial-gradient(circle at 86% 22%,rgb(247 223 30 / 26%),transparent 25%),var(--sheet-ink);color:#fff}
.visual-reference-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:60px}
.visual-reference-hero h1{max-width:780px;margin:0 0 20px;font:800 clamp(3.2rem,7vw,5.7rem)/.98 Poppins,Arial,sans-serif;letter-spacing:-.06em}
.visual-reference-hero p:not(.eyebrow){max-width:720px;color:#c6cfdd;font-size:1.08rem}
.visual-primary{background:var(--js);color:var(--sheet-ink)}
.visual-secondary{border:1px solid #4a566c;color:#fff}
.visual-hero-mark{position:relative;min-height:340px;display:grid;place-items:center;border:1px solid #3d485c;border-radius:36px;background:linear-gradient(145deg,#1c2639,#0d1422);box-shadow:0 28px 70px rgb(0 0 0 / 28%);transform:rotate(2deg)}
.visual-hero-mark span{display:grid;width:155px;height:155px;place-items:end end;padding:18px;border-radius:20px;background:var(--js);color:#111;font:800 4.4rem/1 Poppins,Arial,sans-serif;box-shadow:0 20px 50px rgb(0 0 0 / 35%)}
.visual-hero-mark code{position:absolute;right:24px;bottom:25px;left:24px;padding:13px;border:1px solid #3f4c62;border-radius:10px;background:#111a2a;color:#e7edf6;font:.75rem/1.5 'JetBrains Mono',Consolas,monospace;text-align:center}
.visual-index{position:sticky;top:82px;z-index:8;padding:30px 0 22px;border-bottom:1px solid var(--sheet-line);background:rgb(255 255 255 / 94%);backdrop-filter:blur(14px)}
.visual-index-head{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:18px}
.visual-index-head h2{margin:0;font-size:clamp(1.8rem,4vw,2.7rem)}
.visual-index-head>p{max-width:480px;margin:0;color:var(--sheet-muted);text-align:right}
.visual-index-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.visual-index-grid a{display:grid;min-height:60px;align-content:center;padding:9px 11px;border:1px solid var(--sheet-line);border-radius:10px;background:#fff;color:var(--sheet-ink);font:700 .73rem/1.25 Inter,Arial,sans-serif;text-decoration:none;transition:.18s}
.visual-index-grid a span{display:block;margin-bottom:2px;color:#967b00;font:800 .67rem Poppins,Arial,sans-serif}
.visual-index-grid a:is(:hover,.active){border-color:var(--js-deep);background:#fff9c7;translate:0 -2px}
.visual-sheet-section{padding:60px 0 100px}
.sheet-stack{display:grid;gap:65px}
.visual-sheet{scroll-margin-top:230px;overflow:hidden;border:1px solid #cad2df;border-radius:24px;background:#fff;box-shadow:0 22px 70px rgb(16 24 39 / 10%)}
.sheet-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:25px 30px;border-bottom:8px solid var(--js);background:linear-gradient(145deg,#fff,#fbfcff)}
.sheet-number{display:grid;width:66px;height:66px;place-items:center;border-radius:18px;background:var(--sheet-ink);color:#fff;font:800 1.05rem Poppins,Arial,sans-serif}
.sheet-title p{margin:0 0 5px;color:#8c7300;font:800 .7rem Poppins,Arial,sans-serif;letter-spacing:.11em}
.sheet-title h2{margin:0;font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-.05em}
.sheet-title small{display:block;margin-top:7px;color:var(--sheet-muted);font-size:.9rem}
.js-tile{display:grid;width:72px;height:72px;place-items:end end;padding:9px;border-radius:13px;background:var(--js);color:#111;font:800 2.15rem/1 Poppins,Arial,sans-serif}
.sheet-body{padding:28px 30px 32px}
.sheet-definition{display:grid;grid-template-columns:1fr auto;align-items:center;gap:25px;margin-bottom:22px;padding:18px 21px;border-left:6px solid var(--js-deep);border-radius:0 14px 14px 0;background:#fffbea}
.sheet-definition strong{font:700 1.16rem/1.45 Poppins,Arial,sans-serif}
.sheet-definition span{padding:7px 11px;border-radius:999px;background:var(--sheet-ink);color:#fff;font:750 .68rem Poppins,Arial,sans-serif;letter-spacing:.08em;white-space:nowrap}
.concept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:17px}
.concept-card{min-width:0;padding:17px;border:1px solid var(--sheet-line);border-top:5px solid var(--card-accent);border-radius:13px;background:#fff}
.concept-card:nth-child(1){--card-accent:var(--sheet-blue)}.concept-card:nth-child(2){--card-accent:var(--sheet-green)}.concept-card:nth-child(3){--card-accent:var(--sheet-purple)}
.concept-card span{display:grid;width:30px;height:30px;place-items:center;margin-bottom:12px;border-radius:8px;background:color-mix(in srgb,var(--card-accent) 13%,white);color:var(--card-accent);font:800 .75rem Poppins,Arial,sans-serif}
.concept-card h3{margin:0 0 6px;font:750 1rem Poppins,Arial,sans-serif}
.concept-card p{margin:0;color:var(--sheet-muted);font-size:.84rem;line-height:1.5}
.sheet-main-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:17px}
.code-panel{overflow:hidden;border-radius:14px;background:#101827;color:#e9eef6;box-shadow:inset 0 0 0 1px #2b374b}
.panel-label{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;border-bottom:1px solid #303d52;background:#172236;color:#c7d0df;font:750 .7rem Poppins,Arial,sans-serif;letter-spacing:.08em}
.panel-label button{padding:5px 9px;border:1px solid #45536a;border-radius:6px;background:#222f45;color:#fff;font:700 .68rem Inter,Arial,sans-serif;cursor:pointer}
.code-panel pre{min-height:250px;overflow:auto;margin:0;padding:19px;color:#edf2f8;font:500 .82rem/1.72 'JetBrains Mono',Consolas,monospace;white-space:pre-wrap;tab-size:2}
.code-panel .token-key{color:#ff79c6}.code-panel .token-value{color:#f7df1e}.code-panel .token-comment{color:#79c97b}.code-panel .token-fn{color:#7dcfff}
.sheet-side{display:grid;gap:12px}
.info-box{padding:15px 16px;border:1px solid var(--sheet-line);border-radius:12px;background:#fff}
.info-box h3{display:flex;align-items:center;gap:8px;margin:0 0 7px;font:750 .92rem Poppins,Arial,sans-serif}
.info-box h3 span{display:grid;width:26px;height:26px;place-items:center;border-radius:7px;color:#fff;font-size:.72rem}
.info-box p,.info-box ul{margin:0;color:var(--sheet-muted);font-size:.8rem;line-height:1.5}
.info-box ul{padding-left:18px}.info-box li+li{margin-top:4px}
.info-box.result h3 span{background:var(--sheet-green)}
.info-box.pitfall{border-color:#f2c5cc;background:#fff7f8}.info-box.pitfall h3 span{background:var(--sheet-red)}
.info-box.remember{border-color:#efdf89;background:#fffdf0}.info-box.remember h3 span{background:#a98700}
.sheet-check{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;margin-top:17px;padding:13px 16px;border-radius:11px;background:#edf4ff}
.sheet-check p{margin:0;color:#30415a;font-size:.82rem}.sheet-check strong{color:#1f5fc3}
.sheet-actions{display:flex;justify-content:flex-end;gap:9px;padding:0 30px 26px}
.sheet-actions button,.sheet-actions a{display:inline-flex;min-height:41px;align-items:center;padding:0 14px;border:1px solid var(--sheet-line);border-radius:9px;background:#fff;color:var(--sheet-ink);font:750 .78rem Inter,Arial,sans-serif;text-decoration:none;cursor:pointer}
.sheet-actions .print-sheet{border-color:var(--sheet-ink);background:var(--sheet-ink);color:#fff}
.copy-status{color:var(--sheet-green);font-weight:750}
@media(max-width:980px){.visual-reference-hero-grid{grid-template-columns:1fr}.visual-hero-mark{display:none}.visual-index{position:static}.visual-index-grid{grid-template-columns:repeat(4,1fr)}.visual-sheet{scroll-margin-top:90px}.sheet-main-grid{grid-template-columns:1fr}.sheet-side{grid-template-columns:repeat(3,1fr)}.code-panel pre{min-height:0}}
@media(max-width:700px){.visual-reference-hero{padding:55px 0}.visual-reference-hero h1{font-size:3.2rem}.visual-index-head{align-items:flex-start;flex-direction:column}.visual-index-head>p{text-align:left}.visual-index-grid{grid-template-columns:repeat(2,1fr)}.sheet-top{grid-template-columns:auto 1fr;padding:20px}.js-tile{display:none}.sheet-body{padding:20px}.concept-grid,.sheet-side{grid-template-columns:1fr}.sheet-definition{grid-template-columns:1fr}.sheet-definition span{justify-self:start}.sheet-actions{padding:0 20px 20px}.sheet-check{grid-template-columns:1fr}}
@media print{
  @page{size:A4 landscape;margin:8mm}
  body{background:#fff!important}
  .site-header,.visual-reference-hero,.visual-index,footer,.sheet-actions{display:none!important}
  .visual-sheet-section{padding:0}.sheet-stack{display:block}.visual-sheet{display:none!important}
  .visual-sheet.is-printing{display:block!important;border:0;border-radius:0;box-shadow:none;break-inside:avoid}
  .sheet-top{padding:12mm 10mm 7mm}.sheet-body{padding:7mm 10mm 5mm}.sheet-actions{display:none}
  .concept-card,.info-box,.sheet-definition{break-inside:avoid}
  .code-panel pre{min-height:54mm;font-size:8pt}.sheet-title h2{font-size:26pt}
}

/* Technologievarianten en centrale overzichtspagina */
.theme-html{--js:#e44d26;--js-deep:#b93819}.theme-css{--js:#2965f1;--js-deep:#174eb5}.theme-bootstrap{--js:#7952b3;--js-deep:#563d7c}.theme-php{--js:#777bb4;--js-deep:#4f5388}.theme-pdo{--js:#00758f;--js-deep:#005568}.theme-crud{--js:#39745b;--js-deep:#24523f}.theme-login{--js:#5b4bb7;--js-deep:#403486}.theme-security{--js:#d33f49;--js-deep:#9f2831}.theme-dashboard{--js:#00a6a6;--js-deep:#007474}
.theme-html .visual-reference-hero{background:radial-gradient(circle at 86% 22%,rgb(228 77 38 / 25%),transparent 25%),var(--sheet-ink)}
.theme-css .visual-reference-hero{background:radial-gradient(circle at 86% 22%,rgb(41 101 241 / 28%),transparent 25%),var(--sheet-ink)}
.theme-bootstrap .visual-reference-hero{background:radial-gradient(circle at 86% 22%,rgb(121 82 179 / 32%),transparent 25%),var(--sheet-ink)}
.theme-php .visual-reference-hero{background:radial-gradient(circle at 86% 22%,rgb(119 123 180 / 34%),transparent 25%),var(--sheet-ink)}
.theme-pdo .visual-reference-hero{background:radial-gradient(circle at 86% 22%,rgb(0 117 143 / 32%),transparent 25%),var(--sheet-ink)}
.theme-crud .visual-reference-hero{background:radial-gradient(circle at 86% 22%,rgb(57 116 91 / 34%),transparent 25%),var(--sheet-ink)}
.theme-login .visual-reference-hero{background:radial-gradient(circle at 86% 22%,rgb(91 75 183 / 34%),transparent 25%),var(--sheet-ink)}
.theme-security .visual-reference-hero{background:radial-gradient(circle at 86% 22%,rgb(211 63 73 / 32%),transparent 25%),var(--sheet-ink)}
.theme-dashboard .visual-reference-hero{background:radial-gradient(circle at 86% 22%,rgb(0 166 166 / 30%),transparent 25%),var(--sheet-ink)}
.theme-html .visual-index-grid a span{color:#b93819}.theme-css .visual-index-grid a span{color:#174eb5}
.theme-html .visual-index-grid a:is(:hover,.active){border-color:#e44d26;background:#fff0eb}
.theme-css .visual-index-grid a:is(:hover,.active){border-color:#2965f1;background:#edf3ff}
.theme-bootstrap .visual-index-grid a:is(:hover,.active){border-color:#7952b3;background:#f5f0fc}.theme-php .visual-index-grid a:is(:hover,.active){border-color:#777bb4;background:#f3f3fa}.theme-pdo .visual-index-grid a:is(:hover,.active){border-color:#00758f;background:#eaf8fa}.theme-crud .visual-index-grid a:is(:hover,.active){border-color:#39745b;background:#edf7f2}.theme-login .visual-index-grid a:is(:hover,.active){border-color:#5b4bb7;background:#f2f0fc}.theme-security .visual-index-grid a:is(:hover,.active){border-color:#d33f49;background:#fff0f1}.theme-dashboard .visual-index-grid a:is(:hover,.active){border-color:#00a6a6;background:#eafafa}
.theme-bootstrap .visual-index-grid a span,.theme-php .visual-index-grid a span,.theme-pdo .visual-index-grid a span,.theme-crud .visual-index-grid a span,.theme-login .visual-index-grid a span,.theme-security .visual-index-grid a span,.theme-dashboard .visual-index-grid a span{color:var(--js-deep)}
.theme-bootstrap .js-tile,.theme-php .js-tile,.theme-pdo .js-tile,.theme-crud .js-tile,.theme-login .js-tile,.theme-security .js-tile,.theme-dashboard .js-tile{place-items:center;color:#fff;font-size:1.25rem}
.theme-bootstrap .visual-hero-mark span,.theme-php .visual-hero-mark span,.theme-pdo .visual-hero-mark span,.theme-crud .visual-hero-mark span,.theme-login .visual-hero-mark span,.theme-security .visual-hero-mark span,.theme-dashboard .visual-hero-mark span{place-items:center;color:#fff;font-size:2.35rem}
.theme-bootstrap .sheet-definition,.theme-php .sheet-definition,.theme-pdo .sheet-definition,.theme-crud .sheet-definition,.theme-login .sheet-definition,.theme-security .sheet-definition,.theme-dashboard .sheet-definition{background:color-mix(in srgb,var(--js) 8%,white)}
.theme-html .sheet-definition,.theme-html .info-box.remember{background:#fff5f1}.theme-css .sheet-definition,.theme-css .info-box.remember{background:#f2f6ff}
.theme-html .js-tile{font-size:1.4rem;place-items:center}.theme-css .js-tile{font-size:1.85rem;place-items:center}
.theme-html .visual-hero-mark span{font-size:2.25rem;place-items:center}.theme-css .visual-hero-mark span{font-size:3rem;place-items:center;color:#fff}
.theme-css .js-tile,.theme-css .visual-hero-mark span{color:#fff}
.visual-hub-hero{padding-bottom:100px}.visual-hub-hero h1{max-width:950px;margin:0 0 22px;font:800 clamp(3.2rem,7vw,5.7rem)/.98 Poppins,Arial,sans-serif;letter-spacing:-.06em}.visual-hub-hero p:not(.eyebrow){max-width:780px;color:#c6cfdd;font-size:1.08rem}
.visual-track-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.visual-track{position:relative;display:flex;min-height:340px;flex-direction:column;padding:30px;border:1px solid var(--sheet-line);border-top:8px solid var(--track);border-radius:22px;background:#fff;box-shadow:0 15px 45px rgb(16 24 39 / 8%);color:var(--sheet-ink);text-decoration:none;transition:.2s}
.visual-track:hover{translate:0 -6px;box-shadow:0 24px 65px rgb(16 24 39 / 13%)}.visual-track span{color:var(--track);font:800 .72rem Poppins,Arial,sans-serif;letter-spacing:.1em}.visual-track strong{margin:35px 0 13px;color:var(--track);font:800 clamp(2.7rem,6vw,4.6rem)/1 Poppins,Arial,sans-serif;letter-spacing:-.06em}.visual-track p{margin:0;color:var(--sheet-muted)}.visual-track b{margin-top:auto;color:var(--track)}
.html-track{--track:#e44d26}.css-track{--track:#2965f1}.js-track{--track:#b99a00}.bootstrap-track{--track:#7952b3}.mvc-track{--track:#d6006d}.php-track{--track:#777bb4}.pdo-track{--track:#00758f}.crud-track{--track:#39745b}.login-track{--track:#5b4bb7}.security-track{--track:#d33f49}.dashboard-track{--track:#00a6a6}
@media(max-width:900px){.visual-track-grid{grid-template-columns:1fr}.visual-track{min-height:245px}}