/* ============================================================
   Geutjes.com — gedeeld stylesheet
   Gebruikt door index.html en alle pagina's in /blog/.
   Bevat: basisreset, kleuren, achtergrond, navigatiebalk,
   post-opmaak (meta, callout-boxes, code, foto's, video's).

   Pagina-specifieke opmaak (bv. hero, tools-sectie, blog-grid,
   Apple-widget op de homepage, of een top-10 accordeon in een
   los blogartikel) hoort NIET hier, maar in de <style> van de
   pagina zelf.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0a0e14;
  --panel:#121821;
  --panel-2:#0d131b;
  --line:#1f2a38;
  --line-soft:#16202c;
  --ink:#e6edf3;
  --muted:#7d8da1;
  --fire:#ff6b2c;
  --fire-soft:#ff8c52;
  --steel:#3da9fc;
  --green:#3fb950;
  --code-bg:#070b10;
  --shadow:0 20px 60px rgba(0,0,0,.55);
}

/* ---------- Achtergrond ----------
   Rustige, statische overloop van donker naar donkergroen en
   donkeroranje. Geen animatie en geen foto: dat houdt tekst op
   elke pagina, ook lange blogposts, goed leesbaar. */
html{
  scroll-behavior:smooth;
  scroll-padding-top:90px;
  background:
    radial-gradient(1600px 1100px at 6% 118%, rgba(63,185,80,.17), transparent 78%),
    radial-gradient(1600px 1100px at 94% 118%, rgba(255,107,44,.17), transparent 78%),
    linear-gradient(180deg, #0a0e14 0%, #0a0e14 42%, #0b110e 100%);
  background-attachment:fixed;
  overflow-anchor:none;
}

body{
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Navigatiebalk ---------- */
nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(12px);
  background:rgba(10,14,20,.72);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1000px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{
  position:relative;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:15px;
  display:flex;align-items:center;gap:9px;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;cursor:pointer;
}
.brand-logo{
  display:block;width:134px;height:24px;background-color:var(--ink);
  -webkit-mask:url('data:image/png;base64,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') center/contain no-repeat;
  mask:url('data:image/png;base64,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') center/contain no-repeat;
  transition:background-color .18s, filter .18s, transform .18s;
}
.brand:hover .brand-logo{
  background-color:var(--steel);
  filter:drop-shadow(0 0 7px rgba(61,169,252,.75));
  transform:translateY(-1px);
}
.brand .cur{color:var(--fire);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* Jubileum-lint "Anno 2004": normaal onzichtbaar, klapt bij hover/focus van het
   logo uit rechts naast het logo. Absoluut gepositioneerd, dus de menu-layout
   verschuift niet. Op touch (geen hover) blijft het rustig verborgen. */
.brand-anno{
  position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:9px;
  display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;
  max-width:0;opacity:0;padding:4px 0;pointer-events:none;
  background:linear-gradient(90deg,var(--fire),var(--fire-soft));color:#0a0e14;
  border-radius:6px;font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  transition:max-width .45s ease,opacity .35s ease,padding .45s ease;
}
.brand-anno svg{width:11px;height:11px;flex:none}
.brand:hover .brand-anno,.brand:focus-visible .brand-anno{max-width:170px;opacity:1;padding:4px 10px}
@media (prefers-reduced-motion:reduce){.brand-anno{transition:opacity .2s ease}}
/* Alleen op desktop (hover mogelijk). Op touch/mobiel blijft de lint verborgen
   omdat er dan geen hover is; dat houdt de kleine schermen rustig. */
.nav-right{display:flex;align-items:center;gap:16px}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{
  color:var(--muted);text-decoration:none;font-size:13px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;transition:.15s;white-space:nowrap;
}
.nav-links a:hover{color:var(--fire-soft)}
.nav-yt{display:inline-flex;align-items:center;gap:7px}
.yt-logo{width:22px;height:auto;display:block;flex:none}
.lang{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  cursor:pointer;padding:6px 9px;transition:.15s;display:inline-flex;align-items:center;line-height:0;
}
.lang:hover{border-color:var(--steel);transform:translateY(-1px)}
.flag{display:block;width:22px;height:15px;border-radius:3px;overflow:hidden;line-height:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.flag svg{display:block;width:100%;height:100%}
.flag[hidden]{display:none}
.nav-toggle{
  display:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);cursor:pointer;width:38px;height:34px;align-items:center;justify-content:center;transition:.15s;
}
.nav-toggle svg{width:22px;height:22px;display:block}
.nav-toggle:hover{border-color:var(--steel)}
@media(max-width:860px){
  .nav-toggle{display:flex}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:2px;
    background:rgba(10,14,20,.97);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);padding:10px 20px 16px;display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:10px 0;font-size:14px;width:100%}
}

/* ---------- Scroll-voortgangsindicator (alleen desktop, rechterrand) ---------- */
.scroll-progress{position:fixed;right:0;top:0;bottom:0;width:5px;z-index:60;background:var(--line-soft)}
.scroll-progress-fill{width:100%;height:0%;background:linear-gradient(180deg,var(--fire),var(--steel));border-radius:3px 0 0 3px;transition:height .08s linear}
.scroll-top{position:fixed;right:16px;bottom:18px;z-index:61;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:46px;height:46px;border-radius:50%;background:var(--panel);border:1px solid var(--line);color:var(--muted);cursor:pointer;padding:0;font-family:'JetBrains Mono',monospace;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s,border-color .15s,color .15s}
.scroll-top.visible{opacity:1;pointer-events:auto;transform:none}
.scroll-top:hover{border-color:var(--steel);color:var(--steel);transform:translateY(-2px)}
.scroll-top svg{width:15px;height:15px;display:block}
.scroll-top .scroll-top-pct{font-size:9px;font-weight:700;line-height:1}
@media(max-width:860px){.scroll-progress,.scroll-top{display:none}}

/* ---------- Terug-link (bovenaan blogposts) ---------- */
.backlink{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--steel);text-decoration:none;margin-bottom:26px}
.backlink:hover{text-decoration:underline}

/* ---------- Post-meta (tags, auteur, datum, leestijd) ---------- */
.post-meta{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.post-tag{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fire);background:rgba(255,107,44,.10);border:1px solid rgba(255,107,44,.30);padding:3px 9px;border-radius:999px}
.post-author{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.post-author svg,.post-date svg{opacity:.55;flex-shrink:0}
.post-date{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}

/* ---------- Titel en lopende tekst ---------- */
h1{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.18;margin-bottom:16px}
.post-lead{font-size:18px;color:var(--ink);line-height:1.6;margin-bottom:8px}
article p{color:#c4cdd9;font-size:16.5px;line-height:1.78;margin:0 0 18px}
article h2{font-size:22px;font-weight:700;color:var(--ink);margin:38px 0 12px;letter-spacing:-.01em}
article h3{font-size:17px;font-weight:700;color:var(--ink);margin:28px 0 10px;letter-spacing:-.01em}
article ul{color:#c4cdd9;font-size:16.5px;line-height:1.78;margin:0 0 18px;padding-left:22px}
article li{margin-bottom:5px}
article b{color:var(--ink)}
article a{color:var(--steel);text-decoration:none;border-bottom:1px solid rgba(61,169,252,.35)}
article a:hover{border-bottom-color:var(--steel)}

/* ---------- Callout-boxes ---------- */
.tldr{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--fire);border-radius:10px;padding:16px 20px;margin:22px 0 8px;color:var(--muted);font-size:15.5px;line-height:1.65}
.tldr b{color:var(--ink)}
.tldr ol{margin:10px 0 0 20px;color:var(--muted)}
.tldr ol li{margin-bottom:4px}
.tip{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:10px;padding:16px 20px;margin:18px 0 8px;color:var(--muted);font-size:15.5px;line-height:1.65;position:relative}
.tip b{color:var(--ink)}
/* Gele tip-ballon met gloeiend lampje, net rechts buiten het kader */
.tip::before{content:"";position:absolute;right:-54px;top:50%;transform:translateY(-50%);width:40px;height:46px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2046%27%3E%3Cpath%20fill%3D%27%23f5c518%27%20d%3D%27M20%201a19%2019%200%201%200%200%2038%2019%2019%200%200%200%200-38z%27%2F%3E%3Cpath%20fill%3D%27%23f5c518%27%20d%3D%27M11%2033%204%2045l16-9z%27%2F%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23241a00%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%3E%3Cline%20x1%3D%2720%27%20y1%3D%274.6%27%20x2%3D%2720%27%20y2%3D%277.2%27%2F%3E%3Cline%20x1%3D%279.4%27%20y1%3D%278.4%27%20x2%3D%2711.2%27%20y2%3D%2710.2%27%2F%3E%3Cline%20x1%3D%2730.6%27%20y1%3D%278.4%27%20x2%3D%2728.8%27%20y2%3D%2710.2%27%2F%3E%3Cline%20x1%3D%276.2%27%20y1%3D%2719%27%20x2%3D%278.8%27%20y2%3D%2719%27%2F%3E%3Cline%20x1%3D%2733.8%27%20y1%3D%2719%27%20x2%3D%2731.2%27%20y2%3D%2719%27%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%27%23241a00%27%20d%3D%27M20%208.6a6.6%206.6%200%200%200-3.9%2011.9c.7.5%201.1%201.3%201.2%202.2h5.4c.1-.9.5-1.7%201.2-2.2A6.6%206.6%200%200%200%2020%208.6z%27%2F%3E%3Crect%20x%3D%2716.4%27%20y%3D%2723.6%27%20width%3D%277.2%27%20height%3D%272%27%20rx%3D%271%27%20fill%3D%27%23241a00%27%2F%3E%3Crect%20x%3D%2717.2%27%20y%3D%2726.2%27%20width%3D%275.6%27%20height%3D%271.9%27%20rx%3D%27.95%27%20fill%3D%27%23241a00%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;filter:drop-shadow(0 0 3px rgba(245,197,24,.5));animation:tipGlow 2s ease-in-out infinite;pointer-events:none;z-index:2}
@keyframes tipGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(245,197,24,.45))}50%{filter:drop-shadow(0 0 11px rgba(245,197,24,.95))}}
@media(max-width:900px){.tip::before{right:-8px;top:-24px;transform:none}}
.warn{background:var(--panel);border:1px solid var(--line);border-left:3px solid #e3b341;border-radius:10px;padding:16px 20px;margin:18px 0 8px;color:var(--muted);font-size:15.5px;line-height:1.65}
.warn b{color:var(--ink)}
.update-box{background:var(--panel);border:1px solid rgba(61,169,252,.35);border-left:3px solid var(--steel);border-radius:10px;padding:20px 22px;margin:28px 0 24px;color:var(--muted);font-size:15.5px;line-height:1.72}
.update-box .update-header{display:flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--steel);margin-bottom:12px}
.update-box .update-header svg{flex-shrink:0}
.update-box b{color:var(--ink)}
.update-box ul{margin:10px 0 10px 18px;color:var(--muted)}
.update-box ul li{margin-bottom:4px}
.update-box p{margin:0 0 10px;color:var(--muted);font-size:15.5px;line-height:1.72}
.update-box p:last-child{margin-bottom:0}

/* ---------- Codeblokken met kopieerknop ---------- */
.code-block{position:relative;margin:14px 0 20px}
.code-block pre{background:var(--code-bg);border:1px solid var(--line);border-radius:10px;padding:16px 20px;padding-right:110px;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:13.5px;line-height:1.65;color:#a8d8ff;white-space:pre}
.code-block .lang-label{position:absolute;top:11px;left:16px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);pointer-events:none;user-select:none}
.copy-btn{position:absolute;top:9px;right:10px;background:var(--panel);border:1px solid var(--line);border-radius:7px;color:var(--muted);cursor:pointer;padding:5px 10px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;display:flex;align-items:center;gap:5px;transition:border-color .15s,color .15s;white-space:nowrap}
.copy-btn:hover{border-color:var(--steel);color:var(--steel)}
.copy-btn.copied{border-color:var(--green);color:var(--green)}
.copy-btn svg{width:13px;height:13px;flex-shrink:0}
@media(max-width:560px){.code-block pre{padding-right:20px}.copy-btn{position:static;margin-top:10px}}

/* ---------- Foto's, fotogalerij en lightbox ---------- */
.shot{margin:28px 0}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;cursor:zoom-in}
.shot figcaption{margin-top:9px;font-size:13px;color:var(--muted);line-height:1.5;text-align:center}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:28px 0}
.gallery .shot{margin:0}
.gallery .shot img{height:100%;object-fit:cover;aspect-ratio:4/3}
@media(max-width:560px){.gallery{grid-template-columns:1fr}}
.lb{position:fixed;inset:0;z-index:200;background:rgba(5,8,12,.93);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;backdrop-filter:blur(4px)}
.lb[hidden]{display:none}
.lb-img{max-width:96vw;max-height:84vh;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.65);cursor:default}
.lb-cap{color:var(--ink);font-size:14px;margin-top:14px;text-align:center;max-width:70ch;line-height:1.5}
.lb-hint{color:var(--muted);font-size:12px;margin-top:4px}
.lb-close{position:absolute;top:18px;right:22px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-close:hover{border-color:var(--steel)}

/* ---------- Video's: afspelen bij scrollen in beeld of bij hover ----------
   Met een muis (desktop): afspelen bij hover, pauzeren + terugspoelen bij
   weggaan. Zonder muis (telefoon/tablet): afspelen zodra de video in beeld
   scrolt, pauzeren zodra hij uit beeld verdwijnt. Start altijd zonder
   geluid (verplicht voor autoplay), met een knopje om geluid aan te zetten. */
.vid-shot{margin:28px 0}
.vid-frame{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#000}
.vid-frame video{display:block;width:100%;height:auto;max-height:560px;object-fit:cover}
.vid-sound{position:absolute;bottom:12px;left:12px;width:38px;height:38px;border-radius:50%;background:rgba(10,14,20,.78);border:1px solid var(--line);color:var(--ink);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.vid-sound:hover{background:rgba(10,14,20,.92);border-color:var(--steel)}
.vid-sound svg{width:18px;height:18px}
.vid-sound .snd-on{display:none}
.vid-sound.is-unmuted .snd-on{display:block}
.vid-sound.is-unmuted .snd-off{display:none}
.vid-shot figcaption{margin-top:9px;font-size:13px;color:var(--muted);line-height:1.5;text-align:center}

/* ---------- Placeholder als een foto of video nog niet geplaatst is ---------- */
.shot.media-missing img,.vid-shot.media-missing .vid-frame{display:none}
.shot.media-missing::before,.vid-frame-ph{
  content:'';display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:190px;border:1px dashed var(--line);border-radius:12px;background:var(--panel);
  color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.6;padding:24px;
}
.shot.media-missing::before{content:attr(data-placeholder)}
.vid-frame-ph{display:none}
.vid-shot.media-missing .vid-frame-ph{display:flex}

/* ---------- Productkaarten en disclosure ---------- */
.product-card{border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin:20px 0;background:var(--panel-2)}
.product-card + .product-card{margin-top:14px}
.product-logo{display:block;height:38px;width:auto;margin:0 0 14px}
.product-card p{margin:0;color:#c4cdd9;font-size:15.5px;line-height:1.7}
.product-card b{color:var(--ink)}
.disclosure{font-size:13.5px;color:var(--muted);font-style:italic;margin:14px 0 22px}

/* ---------- Deel-balk onder een blogpost (transparante frosted balk) ---------- */
.share{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:44px 0 8px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(18,24,33,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.share-label{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:6px}
.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;min-width:38px;padding:0 10px;border-radius:9px;background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer;text-decoration:none;transition:color .15s,background .15s,transform .12s;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600}
.share-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.05)}
.share-btn svg{width:18px;height:18px;flex-shrink:0}
.share-wa:hover{color:#25D366;border-color:#25D366}
.share-fb:hover{color:#1877F2;border-color:#1877F2}
.share-bs:hover{color:#1185FE;border-color:#1185FE}
.share-li:hover{color:#0A66C2;border-color:#0A66C2}
.share-mail:hover{color:var(--steel);border-color:var(--steel)}
.share-copy{margin-left:auto}
.share-copy:hover{color:var(--green);border-color:var(--green)}
.share-copy.copied{color:var(--green);border-color:var(--green)}
.share-copy-text{white-space:nowrap}
@media(max-width:560px){.share-copy-text{display:none}.share{gap:2px;padding:9px 10px}.share-copy{margin-left:0}}

/* ---------- Voettekst / copyright onderaan elke pagina ---------- */
.site-footer{margin-top:48px;padding:22px 0 44px;text-align:center}
.site-copyright{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;font-family:'JetBrains Mono',monospace;font-size:13.5px;color:#d6dee6;letter-spacing:.02em;line-height:1.5;padding:11px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(18,24,33,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-align:center;max-width:100%}
.site-copyright b{color:var(--ink);font-weight:700}
.cc-sep{color:#4a5768}
/* Disclaimer-knop onder de voettekst (stijl zoals de videolabels) */
.footer-btns{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:12px}
.disclaimer-btn{display:inline-block;width:auto;margin:0;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#d3dae2;background:rgba(125,141,161,.18);border:1px solid rgba(160,173,188,.45);padding:5px 13px;border-radius:999px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.disclaimer-btn:hover{color:#fff;border-color:#a9b4c1;background:rgba(125,141,161,.28)}
/* Disclaimer pop-up */
.disc-modal{position:fixed;inset:0;z-index:400;background:rgba(5,8,12,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:22px}
.disc-modal[hidden]{display:none}
.disc-inner{background:var(--panel);border:1px solid var(--line);border-radius:16px;max-width:620px;width:100%;max-height:86vh;overflow:auto;padding:26px;position:relative;text-align:left}
.disc-title{font-size:19px;font-weight:700;color:var(--ink);margin:0 0 14px;padding-right:44px}
.disc-close{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);color:var(--muted);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.disc-close:hover{border-color:var(--fire);color:var(--ink)}
.disc-body p{color:#c4cdd9;font-size:15px;line-height:1.7;margin:0 0 13px}
.disc-body p:last-child{margin-bottom:0}
.disc-body .disc-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft);font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.65;color:var(--muted)}
.disc-body a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.disc-body a:hover{border-bottom-color:currentColor}
/* Licht logo op de achtergrond van de Disclaimer-pop-up (los van de Privacy-pop-up) */
#disclaimerModal .disc-inner{
  background-color:var(--panel);
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGcgZmlsbD0iJTIzZTZlZGYzIiBmaWxsLW9wYWNpdHk9IjAuMiI+PHBhdGggZD0iTTI1NiAwYzcwLjY4NiAwIDEzNC42OSAyOC42NTggMTgxLjAxNiA3NC45ODRDNDgzLjM0MiAxMjEuMzEgNTEyIDE4NS4zMTQgNTEyIDI1NmMwIDcwLjY4Ni0yOC42NTggMTM0LjY5LTc0Ljk4NCAxODEuMDE2QzM5MC42OSA0ODMuMzQyIDMyNi42ODYgNTEyIDI1NiA1MTJjLTcwLjY4NiAwLTEzNC42OS0yOC42NTgtMTgxLjAxNi03NC45ODRDMjguNjU4IDM5MC42OSAwIDMyNi42ODYgMCAyNTZjMC03MC42ODYgMjguNjU4LTEzNC42OSA3NC45ODQtMTgxLjAxNkMxMjEuMzEgMjguNjU4IDE4NS4zMTQgMCAyNTYgMHptMTkuNTQ2IDMwMi4yODFjLS44OCAyMi4wNjMtMzguMjQ2IDIyLjA5Mi0zOS4wOTktLjAwNy0zLjc3OS0zNy44MDQtMTMuNDQ0LTEyNy41NTMtMTMuMTM2LTE2My4wNzQuMzEyLTEwLjk0NiA5LjM4My0xNy40MjYgMjAuOTktMTkuODk4IDMuNTc4LS43NjUgNy41MTItMS4xMzYgMTEuNDc2LTEuMTMyIDMuOTg3LjAwNyA3LjkzMi40IDExLjUxNCAxLjE2NSAxMS45ODkgMi41NTQgMjEuNDAyIDkuMzAxIDIxLjM5OCAyMC40NDRsLS4wNDQgMS4xMTctMTMuMDk5IDE2MS4zODV6TTI1NiAzNDEuNDkyYzE0LjQ1MyAwIDI2LjE2OCAxMS43MTcgMjYuMTY4IDI2LjE3MSAwIDE0LjQ1My0xMS43MTUgMjYuMTY3LTI2LjE2OCAyNi4xNjdzLTI2LjE3MS0xMS43MTQtMjYuMTcxLTI2LjE2N2MwLTE0LjQ1NCAxMS43MTgtMjYuMTcxIDI2LjE3MS0yNi4xNzF6bTAtMzEyLjAyOGMxMjUuMTE0IDAgMjI2LjUzNiAxMDEuNDIyIDIyNi41MzYgMjI2LjUzNlMzODEuMTE0IDQ4Mi41MzYgMjU2IDQ4Mi41MzYgMjkuNDY0IDM4MS4xMTQgMjkuNDY0IDI1NiAxMzAuODg2IDI5LjQ2NCAyNTYgMjkuNDY0eiIvPjwvZz48L3N2Zz4=");
  background-repeat:no-repeat;
  background-position:bottom -14px right -14px;
  background-size:230px auto;
}
/* Licht logo op de achtergrond van de privacy-pop-up (los van de Disclaimer-pop-up) */
#privacyModal .disc-inner{
  background-color:var(--panel);
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiB2aWV3Qm94PSIwIDAgNDU3IDUxMS42OCI+PGcgZmlsbD0iJTIzZTZlZGYzIiBmaWxsLW9wYWNpdHk9IjAuMiI+PHBhdGggZD0iTTIyNy43MiAwYzg1LjIgNTQuMDEgMTYyLjE5IDc5LjU3IDIyOC4yNSA3My41MiA1LjIgMTA1LjI4LTkuNDkgMTkxLjExLTQxLjE5IDI1OC45YTExNC4zNjggMTE0LjM2OCAwIDAgMC0yNi43OS0xNi4zOGMyNS42MS01Ni43NyAzNy4zOS0xMjguMTUgMzMuMDgtMjE1LjI3LTU1LjkzIDUuMTEtMTIxLjEtMTYuNTItMTkzLjI0LTYyLjI1QzE2NS40MiA4Ny4wMSAxMDEgMTAxLjIxIDM1LjM0IDk3Ljc3Yy0yLjkxIDExMC45IDE2LjU4IDE5NC4zOSA1NC4yMiAyNTUuMTMgMjcuODMtMjMuMjcgNzUuMjMtMTkuNzUgOTcuNjctNTAuNjEgMS42MS0yLjM5IDIuMzYtMy42NyAyLjM1LTQuNzMtLjAyLS41NC0yNC4zNi0zMC4zOS0yNi41NC0zMy44Ny01Ljc0LTkuMTItMTYuNDgtMjEuNS0xNi40OC0zMi4xOSAwLTYuMDMgNC43Ni0xMy45IDExLjU3LTE1LjY1LS41My05LjA0LS44OS0xOC4yMS0uODktMjcuMjkgMC01LjM3LjExLTEwLjguMy0xNi4xMi4zLTMuMzcuOTItNC44NiAxLjgxLTguMTFhNTcuNDU3IDU3LjQ1NyAwIDAgMSAyNS42Mi0zMi41NGM0LjM1LTIuNzUgOS4wOC00Ljg4IDEzLjkyLTYuNjMgOC43OS0zLjIxIDQuNTMtMTcuMSAxNC4xOC0xNy4zMSAyMi41NC0uNTggNTkuNjMgMTkuMTMgNzQuMDggMzQuNzggOS4yMSAxMC4xOSAxNC40NiAyMS41MSAxNC43OCAzNS4yM2wtLjkyIDM5LjQ5YzQgLjk4IDguNDkgNC4xMiA5LjQ3IDguMTIgMy4wOSAxMi40Ny05Ljg1IDI3Ljk5LTE1Ljg2IDM3Ljg5LTUuNTQgOS4xNS0yNi43MyAzNC4xMi0yNi43NSAzNC4zMi0uMSAxLjA4LjQ1IDIuNDIgMS45IDQuNjEgNS40NiA3LjQ5IDEyLjM4IDEyLjk1IDIwLjEzIDE3LjI3YTExNC43ODMgMTE0Ljc4MyAwIDAgMC0yNy44NSAyMC40N2MtMjAuNjIgMjAuNjItMzMuMzggNDkuMTMtMzMuMzggODAuNjEgMCAyNi44OSA5LjM2IDUxLjYzIDI0Ljk5IDcxLjE0LTguMTQgMy43NC0xNi40OSA3LjI0LTI1LjA2IDEwLjQ2QzgxLjExIDQ0OC40LTYuMTMgMzE2LjUxLjM0IDY5Ljk4IDc3Ljg5IDc0LjA1IDE1My45OSA1Ny4yOCAyMjcuNzIgMHoiLz48cGF0aCBkPSJNMzQyLjY3IDMyOS42YzUwLjI3IDAgOTEuMDMgNDAuNzYgOTEuMDMgOTEuMDQgMCA1MC4yOC00MC43NiA5MS4wNC05MS4wMyA5MS4wNC01MC4yOCAwLTkxLjA0LTQwLjc2LTkxLjA0LTkxLjA0IDAtNTAuMjggNDAuNzYtOTEuMDQgOTEuMDQtOTEuMDR6bS0yMi4zIDk0LjMxYTgzLjE0IDgzLjE0IDAgMCAxIDcuODIgNy41N2M3LjY1LTEyLjMxIDE1LjgxLTIzLjYyIDI0LjQzLTM0LjAyIDI0LjM2LTI5LjQyIDEzLjMyLTIzLjc1IDQ3LjExLTIzLjc1bC00LjcgNS4yMmMtMTQuNDIgMTYuMDMtMTkuMjkgMjQuMzctMzEuMTIgNDEuNDZhNDg2LjExMyA0ODYuMTEzIDAgMCAwLTMxLjgxIDUyLjkybC0yLjkyIDUuNjUtMi43LTUuNzZjLTQuOTUtMTAuNjUtMTAuOS0yMC40Mi0xNy45OS0yOS4xNi03LjA4LTguNzMtMTMuMjgtMTQuNDMtMjIuODktMjEuMDMgNC40MS0xNC40NiAyNS4zNy03LjA2IDM0Ljc3Ljl6Ii8+PC9nPjwvc3ZnPg==");
  background-repeat:no-repeat;
  background-position:bottom -14px right -14px;
  background-size:230px auto;
}
@media(max-width:560px){.site-copyright{font-size:12px;gap:5px 8px;padding:10px 14px}.disc-inner{padding:20px}}
.cc-claude-link{display:inline-flex;text-decoration:none;border-bottom:0;line-height:0;opacity:.9;filter:drop-shadow(0 0 0 rgba(217,119,87,0));transition:opacity .25s ease,filter .25s ease}
.cc-claude-link:hover,.cc-claude-link:focus-visible{opacity:1;filter:drop-shadow(0 0 7px rgba(217,119,87,.85)) drop-shadow(0 0 16px rgba(217,119,87,.45))}
.cc-claude-logo{flex-shrink:0;height:15px;width:auto;display:block}
@media(max-width:560px){.site-copyright{font-size:12.5px;gap:10px;padding:10px 14px}.cc-claude-logo{height:14px}}

/* ---------- Reacties onder een blogpost ---------- */
.comments{margin-top:44px;padding-top:26px;border-top:1px solid var(--line-soft)}
.comments-title{font-size:20px;font-weight:700;color:var(--ink);margin:0 0 18px;letter-spacing:-.01em}
.comments-count{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--muted);font-weight:500}
.comments-empty{color:var(--muted);font-size:15px;font-style:italic;margin:0 0 18px}
.comments-list{margin-bottom:30px}
.comment{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--steel);border-radius:10px;padding:13px 16px;margin:0 0 12px}
.comment-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.comment-name{font-weight:700;color:var(--ink);font-size:15px}
.comment-date{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted)}
.comment-body{color:#c4cdd9;font-size:15px;line-height:1.65;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}

.comment-form{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:20px}
.cform-title{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 14px}
.cform-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.cform-row label{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.cform-row input,.cform-row textarea{background:var(--code-bg);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-family:inherit;font-size:15px;padding:10px 12px;width:100%;box-sizing:border-box;transition:border-color .15s}
.cform-row input:focus,.cform-row textarea:focus{outline:none;border-color:var(--steel)}
.cform-row textarea{resize:vertical;min-height:90px;line-height:1.6}
.cform-challenge{max-width:230px}
.cform-challenge label b{color:var(--ink)}
.cform-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cform-btn{background:var(--fire);color:#0a0e14;border:0;border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;letter-spacing:.03em;padding:10px 22px;cursor:pointer;transition:background .15s,transform .12s}
.cform-btn:hover{background:var(--fire-soft)}
.cform-btn:active{transform:translateY(1px)}
.cform-btn:disabled{opacity:.55;cursor:default}
.cform-status{font-size:13.5px;line-height:1.4}
.cform-status.ok{color:var(--green)}
.cform-status.err{color:#e5484d}
.cform-note{color:var(--muted);font-size:12.5px;line-height:1.55;margin:12px 0 0}

@media(max-width:560px){h1{font-size:27px}article p{font-size:16px}}