:root{
  --bg:#070A12;
  --panel:#0E1426;
  --text:#EAF0FF;
  --muted:#A9B4D0;
  --line: rgba(255,255,255,.12);
  --shadow: 0 12px 28px rgba(0,0,0,.45);
  --radius: 16px;
  /* Background gradient colors (so light/dark actually changes the background) */
  --bg-grad-1:#111a39;
  --bg-grad-2: var(--bg);
  --bg-grad-3:#050712;
}
*{ box-sizing:border-box; }
html,body{background:var(--bg);color:var(--text); margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 20% 0%, var(--bg-grad-1) 0%, var(--bg-grad-2) 55%, var(--bg-grad-3) 100%);
  color: var(--text);
  line-height: 1.55;
}
.container{ width:min(1100px, 92vw); margin: 0 auto; padding: 26px 0 46px; }
header{
  display:flex; gap:16px; align-items:flex-end; justify-content:space-between;
  padding: 10px 0 18px;
  border-bottom: 1px solid var(--line);
}
.brand h1{ margin:0; font-size: clamp(22px, 3.4vw, 34px); letter-spacing:.2px; }
.brand p{ margin:6px 0 0; color: var(--muted); }
.badge{
  font-size: 12px; color: var(--muted);
  padding: 8px 10px; border:1px solid var(--line);
  border-radius: 999px; background: rgba(255,255,255,.04);
}
.nav{
  display:flex; gap:10px; flex-wrap:wrap;
  padding: 14px 0 0;
}
.nav a{
  color: var(--text); text-decoration:none;
  padding: 8px 10px; border:1px solid var(--line);
  border-radius: 999px; background: rgba(255,255,255,.04);
  font-size: 13px;
}
.nav a:hover{ background: rgba(255,255,255,.06); }
h2{ margin: 24px 0 12px; font-size: 18px; }
.grid{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(170px, 1fr) );
  gap: 14px;
}
.card{
  display:flex; flex-direction:column; gap:10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  text-decoration:none;
  color: var(--text);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.card img{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 12px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.25);
}
.card .title{ font-weight: 700; }
.card .meta{ color: var(--muted); font-size: 12px; }
.page{
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  padding: 16px;
  box-shadow: var(--shadow);
}
.page img{
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 12px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.25);
}
.small{ color: var(--muted); font-size: 12px; }
.footer{
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

/* --- Toegankelijkheid (WCAG) aanvullingen --- */
.skip-link{
  position:absolute; left:-9999px; top:12px;
  padding:10px 14px; border-radius:999px;
  background:#ffffff; color:#000000; z-index:9999;
  border:2px solid #000;
}
.skip-link:focus{ left:12px; }

:focus-visible{
  outline: 3px solid #5aa9ff;
  outline-offset: 3px;
}

/* Links altijd herkenbaar */
a{ text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nav a, .card{ text-decoration: none; }
.nav a:hover, .nav a:focus-visible{ text-decoration: underline; }
.card:hover .title, .card:focus-visible .title{ text-decoration: underline; }

/* Minder beweging als gebruiker dat wil */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .card{ transition:none !important; }
}

/* Visueel verborgen, maar wel voor screenreaders */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* Knoppen voor a11y */
.a11y-tools{
  display:flex; gap:8px; flex-wrap:wrap;
  justify-content:flex-end; align-items:center;
}
.a11y-tools button{
  font: inherit;
  color: var(--text);
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 10px;
  cursor:pointer;
}
.a11y-tools button:hover{ background: rgba(255,255,255,.06); }
.a11y-tools button:focus-visible{ outline: 3px solid #5aa9ff; outline-offset: 3px; }

/* Thema's */
html.theme-light{
  --bg:#ffffff;
  --panel:#f5f7ff;
  --text:#0b1220;
  --muted:#33415e;
  --line: rgba(0,0,0,.14);
  --shadow: 0 12px 28px rgba(0,0,0,.12);
  --bg-grad-1:#ffffff;
  --bg-grad-2:#eef3ff;
  --bg-grad-3:#ffffff;
}

html.theme-light .card img,
html.theme-light .page img{ background: rgba(255,255,255,.92); }
html.high-contrast{
  --bg:#000000;
  --panel:#000000;
  --text:#ffffff;
  --muted:#ffffff;
  --line: rgba(255,255,255,.8);
  --shadow:none;
  --bg-grad-1:#000000;
  --bg-grad-2:#000000;
  --bg-grad-3:#000000;
}
html.high-contrast a{ text-decoration: underline; }

/* Zorg dat main focusbaar is (skip-link) */
main:focus{ outline:none; }


/* --- Accessibility helpers --- */
:root { --font-scale: 1; }
html { font-size: calc(16px * var(--font-scale)); }

.skip-link{
  position:absolute; left:-9999px; top:0;
  padding:10px 12px; z-index:9999;
  background:#000; color:#fff; border-radius:10px;
}
.skip-link:focus{ left:12px; top:12px; }

/* Themes */
html[data-theme="dark"] body{ background:#0b0f14; color:#e7eef7; }
html[data-theme="dark"] a{ color:#8ab4ff; }
html[data-theme="light"] body{ background:#ffffff; color:#111; }
html[data-theme="light"] a{ color:#0b57d0; }

/* High contrast */
html[data-contrast="high"] body{ background:#000 !important; color:#fff !important; }
html[data-contrast="high"] a{ color:#00e5ff !important; }
html[data-contrast="high"] *{ box-shadow:none !important; }

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}



/* === Toegankelijkheid 4.1.2: betere leesbaarheid & contrast === */
body{
  font-size: calc(18px * var(--font-scale));
  line-height: 1.7;
  letter-spacing: 0.2px;
}

a:focus-visible, button:focus-visible{
  outline: 3px solid #5aa9ff;
  outline-offset: 3px;
}

/* Zorg dat de knoppen rechtsboven altijd bovenop liggen */
header.site-header, .a11y-tools{
  position: relative;
  z-index: 9999;
}

/* Beter contrast voor knoppen in lichte modus */
html.theme-light .a11y-tools button{
  background: rgba(0,0,0,.08);
  border: 2px solid var(--line);
}
html.theme-light .a11y-tools button:hover{
  background: rgba(0,0,0,.12);
}

/* Maak knoppen iets groter en duidelijker */
.a11y-tools button{
  padding: 10px 12px;
  font-weight: 600;
}

/* Link-contrast verbeteren */
a{ text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Verminder "drukke" animaties als iemand dat wil */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

/* Link als knop */
a.btn-link{
  display:inline-block;
  padding:10px 14px;
  border-radius: 12px;
  background: var(--panel);
  border: 2px solid var(--line);
}
a.btn-link:hover{ filter: brightness(1.05); }


/* --- 4.2.x / 4.3: extra kaarten & a11y --- */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.card-link{ text-decoration:none; color: inherit; display:block; }
.card{
  border:1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.04);
}
.card img{
  width:100%;
  height:auto;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,0.12);
}
.card h3{ margin: 10px 0 6px; }
.card p{ margin: 0; }

/* High contrast mode (toggle) */
body.contrast{
  background:#000 !important;
  color:#fff !important;
}
body.contrast a{ color:#7ff !important; }
body.contrast .card{
  background:#000 !important;
  border-color:#fff !important;
}
body.contrast .nav a, body.contrast .btn{
  border-color:#fff !important;
}

.version{opacity:0.8; font-size:0.95em;}


/* === Fixed accessibility toolbar (matches VisiblePokemon style) === */
.a11y-toolbar{
  position:fixed;
  top:0; left:0; right:0;
  margin:0;
  padding:10px 12px;
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.a11y-toolbar button{
  font: inherit;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  padding: 8px 10px;
}
.a11y-toolbar button:hover{ background: rgba(255,255,255,.10); }
.a11y-toolbar button:focus-visible{ outline: 3px solid #5aa9ff; outline-offset: 3px; }

html.theme-light .a11y-toolbar{
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid rgba(0,0,0,.12);
}
html.theme-light .a11y-toolbar button{
  color:#0b1220;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.18);
}
html.theme-light .a11y-toolbar button:hover{ background: rgba(0,0,0,.06); }

/* Give room for the fixed toolbar */
body{ padding-top: 72px; }


/* Cleanup 2026-02-26 */
.container{max-width:1100px;margin:0 auto;padding:16px;}
header{margin-bottom:18px;}
.brand p{max-width:75ch;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.card{border-radius:14px;overflow:hidden;}
.card img{display:block;width:100%;height:auto;}
.card .content{padding:12px 12px 14px;}
.card .content p{margin:.4rem 0;}
footer{margin-top:22px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;padding:10px 12px;border-radius:10px;z-index:100000;}
.a11y-toolbar{gap:8px;flex-wrap:wrap}
.a11y-toolbar button{border-radius:12px}

/* Anchor offset for fixed toolbar */
#planeten, #manen, #overig { scroll-margin-top: 90px; }

.card-text{color:#eaeaea;margin-top:8px;font-size:0.95rem;line-height:1.5}

/* Footer */
.site-footer{margin-top:24px;padding:18px 0;border-top:1px solid var(--line);background:rgba(0,0,0,.15);}
.site-footer a{color:inherit;text-decoration:underline;}
.footer-small{font-size:.92rem;opacity:.9;max-width:950px;}
.muted{opacity:.85;}


/* === Live uitbreiding 2026-03-08 === */
.site-shell{display:block}
.topnav{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(10px);
  background:rgba(7,10,18,.92);
  border-bottom:1px solid var(--line);
}
.topnav .inner{
  width:min(1100px,92vw);margin:0 auto;padding:14px 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.site-brand{
  text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:4px;max-width:780px;
}
.site-brand__title{font-weight:900;font-size:clamp(22px,3vw,30px);line-height:1.1}
.site-brand__tag{color:var(--muted);font-size:.98rem}
.site-brand__mini{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.site-chip{
  display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:999px;
  padding:7px 10px;background:rgba(255,255,255,.04);font-size:12px;color:var(--muted);
}
.topnav__links,.subnav__links{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.topnav__links a,.subnav__links a{
  color:var(--text);text-decoration:none;
  padding:10px 12px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.04);font-size:14px;
}
.topnav__links a:hover,.subnav__links a:hover{background:rgba(255,255,255,.08)}
.subnav{
  width:min(1100px,92vw);margin:12px auto 0 auto;
  display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.breadcrumbs{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0 0;
  color:var(--muted);font-size:13px;
}
.breadcrumbs a{color:var(--accent2);text-decoration:none}
.hero-large{
  display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:stretch;
  margin-top:20px;
}
.panel{
  border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.04);
  box-shadow:var(--shadow);padding:18px;
}
.hero-large h1{margin:0 0 10px;font-size:clamp(30px,5vw,48px);line-height:1.05}
.hero-large p{max-width:70ch}
.quick-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;
}
.topic-card h3{margin:8px 0 6px}
.topic-card p{margin:0}
.section-intro{color:var(--muted);max-width:72ch}
.topic-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.topic-strip a{
  text-decoration:none;color:var(--text);padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
}
.gallery-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;
}
.gallery-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.notice{
  border-left:4px solid #6db8ff;background:rgba(109,184,255,.10);
  padding:14px;border-radius:14px;margin-top:14px;
}
.related-links{
  margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;
}
.related-links a{
  text-decoration:none;color:var(--text);padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
}
.learn-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.learn-list .card h3{margin-top:0}
.site-footer{
  border-top:1px solid var(--line);
  margin-top:24px;padding-top:18px;
}
.footer-small{color:var(--muted);font-size:13px}
.content-wrap{margin-top:18px}
.ad-space{
  margin:16px 0;padding:14px;border-radius:14px;
  border:1px dashed rgba(255,255,255,.18);color:var(--muted);font-size:13px;
  background:rgba(255,255,255,.03);
}
.micro-kop{
  margin:0 0 8px;
  color:var(--muted);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
@media (max-width: 900px){
  .hero-large{grid-template-columns:1fr}
}


.page-lead{max-width:76ch;color:var(--muted)}
.section-split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.section-split{grid-template-columns:1fr}}
.gallery-card h2{font-size:1.25rem}
.gallery-card h3{margin:14px 0 6px;font-size:1rem}
.gallery-card p{margin:0 0 10px}
.hero-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.hero-buttons a{text-decoration:none;color:var(--text);padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.list-points{padding-left:20px}
.list-points li{margin-bottom:8px}


/* === Nettere layout update 2026-03-08 === */
body{ padding-top: 0 !important; }

.topnav{
  position: sticky;
  top: 0;
  z-index: 60;
}

.a11y-toolbar{
  position: sticky !important;
  top: 74px !important;
  left: auto !important;
  right: auto !important;
  margin: 0 auto !important;
  width: min(1100px, 92vw) !important;
  padding: 8px 0 10px !important;
  background: transparent !important;
  border-bottom: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 45 !important;
  display: flex !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.a11y-toolbar button{
  color: var(--text) !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
}
html.theme-light .a11y-toolbar,
html[data-theme="light"] .a11y-toolbar{
  background: transparent !important;
}
html.theme-light .a11y-toolbar button,
html[data-theme="light"] .a11y-toolbar button{
  color: var(--text) !important;
  background: rgba(0,0,0,.04) !important;
  border: 1px solid var(--line) !important;
}
.container{ padding-top: 18px; }

.hero-large .panel:first-child{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
.topic-card{
  min-height: 124px;
}
.topic-card .title,
.quick-grid .title{
  font-size: 1.05rem;
}
.section-intro{
  font-size: 1.02rem;
}
.page,
.panel,
.card{
  border-radius: 18px;
}

header{
  border-bottom: 0;
  padding-bottom: 8px;
  margin-bottom: 6px;
}
header .badge{
  align-self: flex-start;
}

.nav{
  padding-top: 8px;
  margin-bottom: 10px;
}
.nav a{
  font-size: 14px;
  padding: 9px 12px;
}

.page h2:first-child{
  margin-top: 0;
}

.related-links a,
.topic-strip a,
.topnav__links a{
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.related-links a:hover,
.topic-strip a:hover,
.topnav__links a:hover{
  transform: translateY(-1px);
}

.notice strong{
  display: inline-block;
  margin-bottom: 4px;
}

@media (max-width: 900px){
  .a11y-toolbar{
    top: 110px !important;
  }
}


/* --- Sterrenbeelden overlay --- */
.stb-tool-page{ margin-top: 22px; }
.stb-columns{
  display:grid;
  grid-template-columns: 1.3fr .9fr;
  gap: 16px;
  align-items:start;
}
.stb-sidepanel{ padding: 16px; }
.stb-form{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:end;
  margin: 14px 0 8px;
}
.stb-form label{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width: 150px;
}
.stb-form select{
  appearance:none;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
}
.stb-button, .stb-linkcard{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius: 12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  text-decoration:none;
  box-shadow: var(--shadow);
  cursor:pointer;
  font-weight:700;
}
.stb-button:hover, .stb-linkcard:hover{ background: rgba(255,255,255,.09); }
.stb-list{
  margin:0;
  padding-left: 18px;
}
.stb-result{
  margin-top: 18px;
  display:grid;
  gap: 16px;
}
.stb-result__header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  padding:16px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}
.stb-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.stb-tab{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
}
.stb-tab.is-active{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}
.stb-card img{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 12px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.25);
}
.stb-hero-image{
  width:100%;
  max-height:420px;
  object-fit:contain;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.25);
  display:block;
  margin:0 0 18px 0;
}
.stb-detail{ display:grid; gap:18px; }
.stb-highlight{ padding:16px; }
@media (max-width: 860px){
  .stb-columns{ grid-template-columns: 1fr; }
  .stb-result__header{ flex-direction:column; }
  .stb-form label{ min-width: unset; width:100%; }
  .stb-button{ width:100%; }
}



/* --- Sterrenbeelden home + stronger visibility --- */
.stb-home-feature{
  margin-top:24px;
  border:1px solid rgba(109,184,255,.22);
  background:
    radial-gradient(circle at top right, rgba(109,184,255,.14), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
.stb-home-feature__grid{
  display:grid;
  grid-template-columns: 1.1fr .95fr;
  gap:18px;
  align-items:start;
}
.stb-home-feature__tool{
  border:1px solid rgba(109,184,255,.28);
  background: rgba(109,184,255,.08);
}
.stb-home-feature__intro .notice{ margin-top:18px; }

.stb-form-help{
  color: var(--muted);
  margin: 0 0 10px;
}
.stb-form--hero{
  gap:14px;
}
.stb-form--hero label span{
  font-weight:700;
}
.stb-form--hero select{
  min-height: 52px;
  font-size: 16px;
  border-color: rgba(109,184,255,.28);
  background: rgba(0,0,0,.18);
}
.stb-button--primary{
  background: linear-gradient(180deg, rgba(109,184,255,.22), rgba(109,184,255,.12));
  border-color: rgba(109,184,255,.36);
}
.stb-button--primary:hover{
  background: linear-gradient(180deg, rgba(109,184,255,.30), rgba(109,184,255,.16));
}

.stb-home-result{
  margin-top:16px;
  padding:16px;
  border-radius: 18px;
  border:1px solid rgba(109,184,255,.28);
  background: rgba(0,0,0,.18);
  display:grid;
  gap:12px;
}
.stb-home-result__meta{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  gap:10px;
  font-size: 14px;
}
.stb-home-result__meta span,
.stb-home-result__mission{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
}
.stb-home-result__return{
  margin:0;
  padding:12px 14px;
  border-left:4px solid #6db8ff;
  border-radius: 12px;
  background: rgba(109,184,255,.10);
}

.stb-tool-page--featured{
  border:1px solid rgba(109,184,255,.22);
  background:
    radial-gradient(circle at top right, rgba(109,184,255,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
.stb-tool-header{
  margin-bottom:18px;
}
.stb-form-card{
  padding:18px;
  border:1px solid rgba(109,184,255,.26);
  border-radius:18px;
  background: rgba(109,184,255,.08);
  box-shadow: var(--shadow);
}
.stb-sidepanel--feature{
  border:1px solid rgba(109,184,255,.22);
}
.stb-result{
  scroll-margin-top: 110px;
}

@media (max-width: 960px){
  .stb-home-feature__grid{
    grid-template-columns: 1fr;
  }
}


/* === Kometen + mobiel menu overlay 2026-03-09 === */
.topnav__toggle{display:none;appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);border-radius:999px;padding:10px 14px;font:inherit;font-weight:700;cursor:pointer;}
.topnav__toggle:hover{background:rgba(255,255,255,.1);}
@media (max-width:920px){.topnav .inner{align-items:flex-start;}.topnav__toggle{display:inline-flex;align-items:center;justify-content:center;}.topnav__links{width:100%;display:none;flex-direction:column;align-items:stretch;gap:8px;margin-top:6px;}.topnav__links a{border-radius:16px;display:block;}.topnav.is-open .topnav__links{display:flex;}.site-brand{max-width:none;}.site-brand__tag{font-size:.94rem;}.site-brand__mini{display:none;}}
.comet-home-feature{border:1px solid rgba(109,184,255,.22);background:radial-gradient(circle at top right, rgba(109,184,255,.14), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));}
.comet-home-feature .card p{margin-bottom:14px;}
.comet-hero-grid,.fact-grid,.faq-grid,.news-grid,.image-grid,.hero-chip-row{display:grid;gap:14px;}
.comet-hero-grid{grid-template-columns:1.15fr .85fr;align-items:start;}
.fact-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.faq-grid,.news-grid,.image-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.hero-chip-row{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:14px;}
.fact-chip,.news-card,.faq-card,.mini-card{border:1px solid var(--line);border-radius:16px;padding:14px;background:rgba(255,255,255,.04);}
.fact-chip strong,.mini-card strong{display:block;font-size:1.05rem;margin-bottom:4px;}
.article-image{width:100%;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03);padding:8px;}
.callout-strong{border-left:4px solid #6db8ff;background:rgba(109,184,255,.10);padding:16px;border-radius:16px;}
.comet-source-list{padding-left:20px;}
.comet-source-list li{margin-bottom:8px;}
.ad-space strong{display:block;margin-bottom:6px;color:var(--text);}
.page .ad-space{margin-top:18px;}
@media (max-width:920px){.comet-hero-grid{grid-template-columns:1fr;}}


/* === 3I/ATLAS beelden + feiten/fantasie uitbreiding 2026-03-09 === */
.comet-feature-hero{border:1px solid rgba(109,184,255,.22);background:radial-gradient(circle at top right, rgba(109,184,255,.16), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));}
.comet-hero-grid--wide{grid-template-columns:1.1fr .9fr;align-items:start;}
.feature-figure,.gallery-figure{margin:0;}
.feature-figure figcaption,.gallery-figure figcaption,.image-note{color:var(--muted);font-size:.95rem;line-height:1.6;margin-top:8px;}
.image-gallery-3i{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.myth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.myth-card{border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:16px;background:rgba(255,255,255,.04);}
.myth-card--fact{border-color:rgba(109,184,255,.28);background:rgba(109,184,255,.10);}
.myth-card h3{margin-top:0;font-size:1.05rem;}
@media (max-width:920px){.comet-hero-grid--wide{grid-template-columns:1fr;}}


/* Live test cleanup */
.site-chip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);}
.topnav__links a{white-space:nowrap;}
.card img{background:#070b16;}


/* === Groei-layout voor uitbreidbare informatiesite 2026-03-12 === */
.expansion-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px;}
.expansion-card{border:1px solid var(--line);border-radius:18px;padding:16px;background:rgba(255,255,255,.04);box-shadow:var(--shadow);}
.expansion-card h3{margin-top:0;margin-bottom:8px;}
.expansion-card p{margin:.25rem 0 0;}
.chapter-list{display:grid;gap:12px;margin-top:16px;}
.chapter-item{border-left:4px solid #6db8ff;padding:14px 16px;border-radius:16px;background:rgba(109,184,255,.10);}
.chapter-item h3{margin:0 0 6px;}
.chapter-item p{margin:0;}
.image-text-block{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center;margin:20px 0;}
.image-text-block img{width:100%;max-height:320px;object-fit:cover;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.04);}
.image-text-block__content{border:1px solid var(--line);border-radius:18px;padding:18px;background:rgba(255,255,255,.04);box-shadow:var(--shadow);}
.image-text-block__content h3{margin-top:0;}
.info-band{margin-top:18px;padding:16px 18px;border-radius:18px;border:1px solid rgba(109,184,255,.24);background:radial-gradient(circle at top right, rgba(109,184,255,.12), transparent 36%), rgba(255,255,255,.04);}
.info-band h2,.info-band h3{margin-top:0;}
.step-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.step-links a{text-decoration:none;color:var(--text);padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);}
.mini-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:14px;}
.mini-facts .fact{border:1px solid var(--line);border-radius:16px;padding:14px;background:rgba(255,255,255,.04);}
.mini-facts .fact strong{display:block;margin-bottom:6px;}
@media (max-width:900px){.image-text-block{grid-template-columns:1fr;}}

/* === Live fix 2026-03-14: open/dicht voor beide balken === */
.a11y-toolbar__group{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.a11y-toolbar.is-hidden{
  display:none !important;
}
.a11y-open-button,
.topnav-open-button{
  position:fixed;
  right:16px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:12px 16px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  z-index:12000;
}
.a11y-open-button{
  bottom:16px;
  color:var(--text);
  background:rgba(7,10,18,.94);
}
.topnav-open-button{
  top:16px;
  color:var(--text);
  background:rgba(7,10,18,.94);
}
html.theme-light .a11y-open-button,
html.theme-light .topnav-open-button,
html[data-theme="light"] .a11y-open-button,
html[data-theme="light"] .topnav-open-button{
  background:rgba(255,255,255,.97);
  color:#0b1220;
  border-color:rgba(0,0,0,.16);
}
.a11y-open-button:hover,
.topnav-open-button:hover{
  transform:translateY(-1px);
}
.topnav__hide{
  margin-left:auto;
  appearance:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:999px;
  padding:10px 14px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.topnav__hide:hover{
  background:rgba(255,255,255,.1);
}
.topnav--hidden{
  display:none !important;
}
.topnav-hidden .a11y-toolbar{
  top:8px !important;
}
@media (max-width:920px){
  .topnav__hide{
    display:none !important;
  }
  .topnav-open-button{
    top:12px;
    right:12px;
  }
  .a11y-open-button{
    right:12px;
    bottom:12px;
    max-width:calc(100vw - 24px);
  }
}


/* === Beeldgalerij + print update 2026-03-15 === */
.visual-page-intro{margin-bottom:18px;}
.visual-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin:18px 0 22px;
}
.visual-card{
  appearance:none;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  text-align:left;
  padding:12px;
  box-shadow:var(--shadow);
  cursor:pointer;
}
.visual-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.07);}
.visual-card img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.25);
  display:block;
}
.visual-card__body{display:block;padding-top:10px;}
.visual-card__body .title{display:block;font-weight:800;font-size:1.05rem;margin-bottom:4px;}
.visual-card__body .meta{display:block;color:var(--muted);font-size:.96rem;}
.visual-card__cta{display:block;margin-top:10px;font-size:.92rem;color:var(--text);opacity:.92;}
.visual-help-card{margin-bottom:28px;}
.image-modal[hidden]{display:none !important;}
.image-modal{
  position:fixed;
  inset:0;
  z-index:9999;
}
.image-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}
.image-modal__dialog{
  position:relative;
  width:min(1120px,94vw);
  max-height:90vh;
  margin:4vh auto;
  overflow:auto;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  gap:18px;
  padding:18px;
  border-radius:24px;
  border:1px solid var(--line);
  background:var(--bg);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.image-modal__media-wrap{display:flex;align-items:center;justify-content:center;}
.image-modal__img{
  width:100%;
  max-height:72vh;
  object-fit:contain;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
}
.image-modal__content{padding-right:10px;}
.image-modal__eyebrow{margin:0 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:800;}
.image-modal__subtitle{color:var(--muted);margin-top:0;}
.image-modal__facts{padding-left:18px;}
.image-modal__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.image-modal__actions .btn,
.image-modal__actions a.btn,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  font:inherit;
  font-weight:700;
}
.image-modal__actions .btn:hover,.btn:hover{background:rgba(255,255,255,.12);}
.image-modal__close{
  position:absolute;
  top:12px;
  right:12px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  color:var(--text);
  font-size:24px;
  cursor:pointer;
}
body.modal-open{overflow:hidden;}
@media (max-width: 860px){
  .image-modal__dialog{grid-template-columns:1fr;max-height:92vh;}
  .image-modal__img{max-height:46vh;}
}
@media print{
  .topnav,.a11y-toolbar,.nav,.site-footer,.image-modal,.topnav-open-button{display:none !important;}
  .container{width:100% !important;max-width:none !important;}
  .visual-grid{grid-template-columns:1fr 1fr;}
  .visual-card{break-inside:avoid;box-shadow:none;background:#fff;color:#000;border:1px solid #ccc;}
}


/* === Verborgen advertentie-infra update 2026-03-15 === */
.ad-stealth,
.ad-stealth-inline{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}
.ad-stealth ins,
.ad-stealth-inline ins{
  display:block !important;
  width:1px !important;
  height:1px !important;
}

/* === Verhaal + detailpagina's update 2026-03-15 v2 === */
.story-band{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin:18px 0 26px;
}
.story-card,
.fact-panel,
.detail-panel{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.05);
  box-shadow:var(--shadow);
  padding:16px;
}
.story-card h3,.fact-panel h3,.detail-panel h3{margin-top:0;}
.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  font-weight:700;
  font-size:.9rem;
}
.visual-section-title{margin:28px 0 10px;}
.detail-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  gap:22px;
  align-items:start;
}
.detail-hero__image{
  width:100%;
  border-radius:22px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.28);
  box-shadow:var(--shadow);
}
.detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.detail-facts{margin:0;padding-left:18px;}
.detail-facts li{margin-bottom:8px;}
.detail-columns{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
  margin-top:20px;
}
.detail-columns .detail-panel p:last-child{margin-bottom:0;}
.gallery-link-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
@media (max-width: 900px){
  .detail-hero,.detail-columns{grid-template-columns:1fr;}
}
@media print{
  .ad-stealth,.ad-stealth-inline,.detail-actions,.gallery-link-row,.topnav,.site-footer,.a11y-toolbar,.topnav-open-button{display:none !important;}
  .detail-hero{grid-template-columns:1fr !important;}
  .detail-hero__image{max-height:72vh;object-fit:contain;}
}


/* === Grote beelden + toegankelijke uitleg update 2026-03-15 v3 === */
.visual-card{
  min-height:100%;
}
.visual-card__cta{
  font-weight:700;
}
.js-image-clickable,
.js-image-info-card,
.detail-hero__image{
  cursor:zoom-in;
}
.image-tap-note{margin-top:10px;}
.image-modal__dialog{
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  align-items:start;
}
.image-modal__media-wrap{display:flex;flex-direction:column;gap:10px;}
.image-modal__img{
  width:100%;
  max-height:75vh;
}
.image-modal__zoom-note{
  margin:0;
  color:var(--muted);
  font-size:.94rem;
}
.image-modal__content{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.image-modal__info-block{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:rgba(255,255,255,.04);
}
.image-modal__info-block h3{
  margin:0 0 8px;
  font-size:1rem;
}
.image-modal__see,
.image-modal__text,
.image-modal__facts{font-size:1rem;}
.detail-hero__image{
  max-height:70vh;
  object-fit:contain;
}
.notice{
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
  background:rgba(255,255,255,.04);
}
.visual-summary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin:16px 0 24px;
}
.visual-summary-card{
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  background:rgba(255,255,255,.04);
}
.visual-summary-card h3{margin-top:0;}
@media (max-width:860px){
  .image-modal__dialog{grid-template-columns:1fr;}
}


/* 2026-03-15 reader-oriented expansion */
.reader-flow,.soft-expansion,.reader-intro{
  margin: 28px 0;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.reader-flow h2,.soft-expansion h2,.reader-intro h2{margin-top:0;}
.reader-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:16px;
}
.reader-card{
  padding:16px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
}
.reader-card h3{margin:0 0 8px 0;}
.soft-note{
  margin-top:14px;
  padding:14px 16px;
  border-left:4px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.035);
  border-radius:12px;
}
.flow-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.flow-links a{
  text-decoration:none;
}
.section-kicker.soft-kicker{
  display:inline-block;
  margin-bottom:8px;
}


.reader-flow-v3{
  margin: 30px 0;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
}
.reader-flow-v3 p{
  max-width: 78ch;
}
.reader-flow-v3 .reader-grid{
  margin-top: 18px;
}
.reader-flow-v3 .reader-card{
  background: rgba(255,255,255,.04);
}


/* === Zonnestelsel uitbreiding 2026-03-18 v6 === */
.story-section{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(280px,420px);
  gap:24px;
  align-items:start;
  margin:28px 0;
}
.story-section--reverse{
  grid-template-columns:minmax(280px,420px) minmax(0,1.08fr);
}
.story-copy{
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  box-shadow:var(--shadow);
  padding:18px;
}
.story-copy h2,.story-copy h3{margin-top:0;}
.story-media,
.story-media-grid img,
.story-poster,
.story-inline-image{
  width:100%;
  display:block;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow);
  background:rgba(0,0,0,.24);
}
.story-media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}
.story-poster-wrap{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-top:18px;
}
.story-poster-card{
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  padding:14px;
}
.story-poster-card h3{margin:12px 0 8px;}
.story-bullets{margin:14px 0 0;padding-left:18px;}
.story-bullets li{margin-bottom:8px;}
.story-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.story-links a{text-decoration:none;}
.story-section + .reader-flow-v3{margin-top:10px;}
@media (max-width: 900px){
  .story-section,.story-section--reverse{grid-template-columns:1fr;}
}


/* 2026-03-18 story expansion v7 */
.story-section{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.92fr);
  gap:22px;
  align-items:start;
  margin:28px 0;
}
.story-section--reverse{
  grid-template-columns:minmax(320px,.92fr) minmax(0,1fr);
}
.story-copy{
  padding:4px 0;
}
.story-copy h2,
.story-copy h3{
  margin-top:0;
}
.story-copy p,
.explain-text p,
.explain-card p{
  max-width:78ch;
}
.story-media,
.story-poster,
.explain-media,
.explain-media-grid img{
  width:100%;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow);
}
.story-media-grid,
.explain-media-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.story-links,
.explain-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.story-poster-wrap,
.explain-poster-wrap{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:18px;
}
.story-poster-card,
.explain-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:16px;
  background:rgba(255,255,255,.04);
  box-shadow:var(--shadow);
}
.explain-section{
  margin:30px 0;
  padding:22px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
}
.explain-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  gap:22px;
  align-items:start;
}
.explain-aside{
  display:grid;
  gap:14px;
}
.explain-box{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:15px 16px;
  background:rgba(255,255,255,.04);
}
.explain-box h3{
  margin:0 0 8px;
  font-size:1rem;
}
.explain-box ul{
  margin:0;
  padding-left:18px;
}
.explain-box li{
  margin-bottom:8px;
}
.explain-note{
  margin-top:12px;
  color:var(--muted);
  font-size:.95rem;
}
.visual-teaser-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:18px;
}
.visual-teaser-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:14px;
  background:rgba(255,255,255,.04);
}
.visual-teaser-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  margin-bottom:10px;
}
@media (max-width: 900px){
  .story-section,
  .story-section--reverse,
  .explain-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 680px){
  .story-media-grid,
  .explain-media-grid{
    grid-template-columns:1fr;
  }
}


/* === Live schoonmaak overlay 2026-03-22 === */
.live-cleaned-hidden,
.test-banner,
.env-banner,
.beta-banner,
.preview-banner,
[class*="test-banner"],
[class*="preview-banner"]{
  display:none !important;
}
.section-kicker{
  letter-spacing:.08em;
}


/* === Overlay maanmissies 2026-04-03 === */
.moon-home-feature,
.moon-mission-page{
  margin:28px 0;
  padding:22px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
}
.moon-home-feature h2,
.moon-mission-page h2,
.moon-mission-page h3{margin-top:0;}
.moon-home-feature__meta,
.moon-kicker-row,
.moon-inline-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:12px 0 16px;
}
.moon-update-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:.95rem;
}
.moon-mission-grid,
.moon-visual-grid,
.moon-faq-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:16px;
}
.moon-mission-card,
.moon-visual-card,
.moon-faq-item,
.moon-day-box{
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  background:rgba(255,255,255,.04);
}
.moon-mission-card p:last-child,
.moon-visual-card p:last-child,
.moon-faq-item p:last-child,
.moon-day-box p:last-child{margin-bottom:0;}
.moon-day-box time{
  display:inline-block;
  margin-bottom:8px;
  color:var(--muted);
  font-weight:700;
}
.moon-update-list{
  margin:0;
  padding-left:18px;
}
.moon-update-list li{margin-bottom:10px;}
.moon-feature-figure{
  margin:0;
}
.moon-feature-figure img{
  width:100%;
}
.moon-inline-links a{text-decoration:none;}
.moon-ad-label{
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}



/* === Live maanmissies + ruimtebeelden 2026-04-03 === */
.space-hero,
.space-panel{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(109,184,255,.22);
  background:
    linear-gradient(180deg, rgba(8,13,25,.88), rgba(8,13,25,.94)),
    radial-gradient(circle at top right, rgba(109,184,255,.16), transparent 36%);
}
.space-hero::before,
.space-panel::before,
.ad-space--image::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--bg-image);
  background-size:cover;
  background-position:center;
  opacity:.22;
  pointer-events:none;
}
.space-hero > *,
.space-panel > *,
.ad-space--image > *{ position:relative; z-index:1; }

.space-hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
  align-items:stretch;
}
.space-hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
}
.space-hero-figure,
.space-side-figure{
  margin:0;
}
.space-hero-figure img,
.space-side-figure img,
.route-figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
}
.space-hero-figure img{
  min-height:320px;
}
.mission-pill-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:8px 0 2px;
}
.mission-pill{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(109,184,255,.26);
  border-radius:999px;
  padding:8px 12px;
  background:rgba(109,184,255,.10);
  color:var(--text);
  font-size:13px;
}
.mission-status-grid,
.image-usage-grid,
.tomorrow-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.status-card,
.usage-card,
.tomorrow-card,
.route-mini-card,
.feed-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  padding:16px;
  box-shadow:var(--shadow);
}
.status-card h3,
.usage-card h3,
.tomorrow-card h3,
.route-mini-card h3,
.feed-card h3{
  margin-top:0;
}
.route-layout{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
  align-items:start;
}
.route-figure{ margin:0; }
.route-mini-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.route-mini-card time,
.feed-card time,
.moon-day-box time{
  display:block;
  color:var(--muted);
  font-size:.92rem;
  margin-bottom:8px;
}
.mission-feed{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.feed-card.compact p{ margin-bottom:0; }
.ad-space--image{
  position:relative;
  overflow:hidden;
  border:1px dashed rgba(109,184,255,.28);
  background:
    linear-gradient(135deg, rgba(7,10,18,.78), rgba(7,10,18,.92));
}
.ad-space--image .moon-ad-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  color:var(--muted);
}
.ad-space--image strong{
  display:block;
  margin:8px 0 6px;
  font-size:1.08rem;
}
.ad-space--image p{ max-width:72ch; }
.gallery-page-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
.gallery-page-card{
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.gallery-page-card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
}
.gallery-page-card__body{
  padding:14px 14px 16px;
}
.gallery-page-card__body h3{
  margin:0 0 8px;
  font-size:1.05rem;
}
.gallery-page-card__meta{
  color:var(--muted);
  font-size:.92rem;
  margin-bottom:10px;
}
.gallery-page-card__body p{
  margin:0 0 12px;
}
.split-callout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:center;
}
.split-callout__image{
  margin:0;
}
.split-callout__image img{
  width:100%;
  border-radius:18px;
  border:1px solid var(--line);
  display:block;
}
.highlight-rule{
  border-left:4px solid #6db8ff;
  padding:16px;
  border-radius:18px;
  background:rgba(109,184,255,.10);
}
.hero-note{
  color:var(--muted);
  font-size:.96rem;
}
.section-kicker.soft-glow{
  color:#8fd0ff;
}
.mission-progress-line{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.mission-progress-line span{
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
  background:rgba(255,255,255,.04);
}
.mission-progress-line span.is-active{
  border-color:rgba(109,184,255,.38);
  background:rgba(109,184,255,.12);
}
.index-live-block{
  margin-top:20px;
}
.article-image.is-cover{
  padding:0;
  aspect-ratio:16/9;
  object-fit:cover;
}
.visual-caption{
  color:var(--muted);
  font-size:.92rem;
  margin-top:8px;
}
@media (max-width: 960px){
  .space-hero-grid,
  .route-layout,
  .split-callout{
    grid-template-columns:1fr;
  }
}


/* === Live menu inklapbaar overlay 2026-04-07 === */
.topnav__actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
  flex-wrap:wrap;
}
.topnav__toggle,
.topnav__collapse,
.topnav-open-button{
  appearance:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:999px;
  padding:10px 14px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.topnav__toggle:hover,
.topnav__collapse:hover,
.topnav-open-button:hover{
  background:rgba(255,255,255,.10);
}
.topnav__collapse{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
.topnav-open-button{
  display:none;
  align-items:center;
  justify-content:center;
  top:16px;
  right:16px;
  position:fixed;
  z-index:12000;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.topnav-open-button.is-visible{
  display:inline-flex;
}
.topnav--hidden{
  display:none !important;
}
.topnav-hidden .a11y-toolbar{
  top:8px !important;
}
html.theme-light .topnav__collapse,
html.theme-light .topnav-open-button,
html[data-theme="light"] .topnav__collapse,
html[data-theme="light"] .topnav-open-button{
  background:rgba(255,255,255,.97);
  color:#0b1220;
  border-color:rgba(0,0,0,.16);
}
.round-ad-note{
  color:var(--muted);
  font-size:.92rem;
}
@media (max-width: 920px){
  .topnav .inner{
    align-items:flex-start;
  }
  .topnav__actions{
    width:100%;
    justify-content:space-between;
    margin-left:0;
  }
  .topnav__toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .topnav__collapse{
    display:inline-flex;
  }
  .topnav__links{
    width:100%;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    margin-top:6px;
  }
  .topnav__links a{
    border-radius:16px;
    display:block;
  }
  .topnav.is-open .topnav__links{
    display:flex;
  }
}
@media (min-width: 921px){
  .topnav__toggle{
    display:none !important;
  }
  .topnav .inner{
    align-items:flex-start;
  }
}


/* === Overlay laatste live beelden 2026-04-07 === */
.ad-space--image::before{
  opacity:0 !important;
  background-image:none !important;
}
.ad-space,
.ad-space--image,
.ad-space--clean{
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
}
.ad-space--clean strong{
  display:block;
  margin:8px 0 10px;
  font-size:1.06rem;
}
.icon-ad-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(74px,1fr));
  gap:14px;
  margin-top:14px;
}
.icon-ad-strip img{
  width:74px;
  height:74px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}
.live-image-grid,
.topic-showcase-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}
.topic-showcase-card,
.live-image-card,
.moon-topic-card,
.fact-card,
.link-card{
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.04);
  padding:16px;
  box-shadow:var(--shadow);
}
.topic-showcase-card img,
.live-image-card img,
.moon-topic-card img,
.link-card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  display:block;
  margin-bottom:12px;
}
.fact-grid,
.link-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
}
.topic-showcase-card h3,
.live-image-card h3,
.moon-topic-card h3,
.fact-card h3,
.link-card h3{
  margin-top:0;
}
.page-intro-box{
  border-left:4px solid #6db8ff;
  background:rgba(109,184,255,.10);
  padding:16px;
  border-radius:18px;
  margin:16px 0 20px;
}
.moon-route-links,
.link-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.link-chip-row a,
.moon-route-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:9px 13px;
  text-decoration:none;
  background:rgba(255,255,255,.04);
}
.notice-list{
  margin:0;
  padding-left:18px;
}
.notice-list li{margin-bottom:8px;}
.compact-meta{color:var(--muted);font-size:.94rem;}
@media (max-width:680px){
  .icon-ad-strip{grid-template-columns:repeat(4,1fr);}
  .icon-ad-strip img{width:64px;height:64px;}
}


/* === Publieke route april 2026 === */
.gallery-page-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}
.gallery-page-card{
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.gallery-page-card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
}
.gallery-page-card__body{ padding:14px 16px 16px; }
.route-layout{
  display:grid;
  grid-template-columns:minmax(260px,1.15fr) minmax(260px,1fr);
  gap:18px;
  align-items:start;
}
.route-figure img,
.space-hero-figure img{
  width:100%;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
}
.route-mini-grid,
.mission-status-grid,
.reader-grid,
.quick-grid,
.menu-section-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}
.route-mini-card,
.status-card,
.reader-card,
.menu-card,
.topic-card{
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.04);
  padding:16px;
  box-shadow:var(--shadow);
}
.menu-link-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;
}
.menu-link-grid a,
.related-links a,
.hero-buttons a,
.flow-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--text);
  text-decoration:none;
}
.menu-link-grid a:hover,
.related-links a:hover,
.hero-buttons a:hover,
.flow-links a:hover,
.link-chip-row a:hover,
.moon-route-links a:hover{ background:rgba(255,255,255,.08); }
.related-links,
.flow-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.mission-progress-line{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
}
.mission-progress-line span{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05);
}
.mission-progress-line .is-active{ background:rgba(109,184,255,.18); border-color:rgba(109,184,255,.38); }
@media (max-width: 860px){
  .route-layout{ grid-template-columns:1fr; }
}

/* =========================================================
   Regenboog-navigatie voor hoofdonderdelen
   Sterrenstelsels, Animatie sterrenstelsels en Nevels vallen extra op.
   ========================================================= */
:root{
  --rainbow-space: linear-gradient(90deg,#ff5f6d 0%,#ffc371 16%,#ffe66d 32%,#6ee7b7 50%,#60a5fa 68%,#a78bfa 84%,#f472b6 100%);
}
.topnav__links a[href$="/sterrenstelsels.html"],
.topnav__links a[href="/sterrenstelsels.html"],
.topnav__links a[href$="/animatie-sterrenstelsels.html"],
.topnav__links a[href="/animatie-sterrenstelsels.html"],
.topnav__links a[href$="/nevels.html"],
.topnav__links a[href="/nevels.html"],
.hero-buttons a[href$="/sterrenstelsels.html"],
.hero-buttons a[href="/sterrenstelsels.html"],
.hero-buttons a[href$="/animatie-sterrenstelsels.html"],
.hero-buttons a[href="/animatie-sterrenstelsels.html"],
.hero-buttons a[href$="/nevels.html"],
.hero-buttons a[href="/nevels.html"],
.quick-grid a[href$="/sterrenstelsels.html"],
.quick-grid a[href="/sterrenstelsels.html"],
.quick-grid a[href$="/animatie-sterrenstelsels.html"],
.quick-grid a[href="/animatie-sterrenstelsels.html"],
.quick-grid a[href$="/nevels.html"],
.quick-grid a[href="/nevels.html"],
.menu-link-grid a[href$="/sterrenstelsels.html"],
.menu-link-grid a[href="/sterrenstelsels.html"],
.menu-link-grid a[href$="/animatie-sterrenstelsels.html"],
.menu-link-grid a[href="/animatie-sterrenstelsels.html"],
.menu-link-grid a[href$="/nevels.html"],
.menu-link-grid a[href="/nevels.html"]{
  position:relative;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.28)!important;
  background:
    linear-gradient(#111523,#111523) padding-box,
    var(--rainbow-space) border-box!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 22px rgba(112,154,255,.18);
  color:#fff!important;
  font-weight:800;
}
.topnav__links a[href$="/sterrenstelsels.html"]::before,
.topnav__links a[href="/sterrenstelsels.html"]::before,
.topnav__links a[href$="/animatie-sterrenstelsels.html"]::before,
.topnav__links a[href="/animatie-sterrenstelsels.html"]::before,
.topnav__links a[href$="/nevels.html"]::before,
.topnav__links a[href="/nevels.html"]::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:var(--rainbow-space);
  opacity:.18;
  z-index:-1;
}
.topnav__links a[href$="/sterrenstelsels.html"]:hover,
.topnav__links a[href="/sterrenstelsels.html"]:hover,
.topnav__links a[href$="/animatie-sterrenstelsels.html"]:hover,
.topnav__links a[href="/animatie-sterrenstelsels.html"]:hover,
.topnav__links a[href$="/nevels.html"]:hover,
.topnav__links a[href="/nevels.html"]:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 30px rgba(255,217,102,.24),0 0 34px rgba(96,165,250,.16);
}
.card.topic-card[href$="/sterrenstelsels.html"],
.card.topic-card[href="/sterrenstelsels.html"],
.card.topic-card[href$="/animatie-sterrenstelsels.html"],
.card.topic-card[href="/animatie-sterrenstelsels.html"],
.card.topic-card[href$="/nevels.html"],
.card.topic-card[href="/nevels.html"],
.menu-card:has(a[href$="/animatie-sterrenstelsels.html"]),
.menu-card:has(a[href$="/nevels.html"]),
.galaxy-live-ready{
  border:1px solid transparent!important;
  background:
    linear-gradient(#151927,#151927) padding-box,
    var(--rainbow-space) border-box!important;
  box-shadow:0 18px 55px rgba(0,0,0,.28),0 0 34px rgba(96,165,250,.12);
}
.card.topic-card[href$="/sterrenstelsels.html"] .title,
.card.topic-card[href="/sterrenstelsels.html"] .title,
.card.topic-card[href$="/animatie-sterrenstelsels.html"] .title,
.card.topic-card[href="/animatie-sterrenstelsels.html"] .title,
.card.topic-card[href$="/nevels.html"] .title,
.card.topic-card[href="/nevels.html"] .title,
.galaxy-live-ready h2,
.galaxy-live-ready .badge,
.menu-card:has(a[href$="/animatie-sterrenstelsels.html"]) h2,
.menu-card:has(a[href$="/nevels.html"]) h2{
  background:var(--rainbow-space);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  -webkit-text-fill-color:transparent;
  font-weight:900;
}
@supports not selector(:has(*)){
  .menu-card{border-color:rgba(255,255,255,.14)}
}
@media (max-width:700px){
  .topnav__links a[href$="/sterrenstelsels.html"],
  .topnav__links a[href="/sterrenstelsels.html"],
  .topnav__links a[href$="/animatie-sterrenstelsels.html"],
  .topnav__links a[href="/animatie-sterrenstelsels.html"],
  .topnav__links a[href$="/nevels.html"],
  .topnav__links a[href="/nevels.html"]{box-shadow:0 0 18px rgba(96,165,250,.16)}
}


/* === Sterrenstelsels.nl veilige navigatie-update 2026-06-22 ===
   Doel: menu duidelijk zichtbaar houden zonder advertentiecode of pagina-opbouw te slopen. */
.topnav{position:sticky;top:0;z-index:9999;}
.topnav.topnav--hidden{transform:none!important;opacity:1!important;pointer-events:auto!important;}
.topnav-open-button,.topnav__hide,.topnav__collapse{display:none!important;}
@media (min-width:921px){
  .topnav__links{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px;}
  .topnav__toggle{display:none!important;}
}
@media (max-width:920px){
  .topnav .inner{align-items:flex-start;}
  .topnav__links{display:flex!important;flex-direction:row;align-items:center;gap:8px;overflow-x:auto;width:100%;padding-bottom:6px;scrollbar-width:thin;}
  .topnav__links a{white-space:nowrap;}
  .topnav__toggle{display:none!important;}
}
.content-refresh-v1{border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:clamp(18px,3vw,28px);margin:clamp(20px,3vw,36px) 0;background:linear-gradient(180deg,rgba(20,32,58,.76),rgba(8,13,28,.68));box-shadow:0 18px 60px rgba(0,0,0,.22);}
.content-refresh-v1 h2{margin-top:0;}
.content-refresh-v1 p{line-height:1.75;}