/* overflow-x:clip statt hidden — verhindert horizontales Scrollen ohne body zum Scroll-Container zu machen, was den sticky Header bricht */
body{overflow-x:clip;}
.site-header,.site-footer{--nav-bg:rgba(255,255,255,.96);--nav-ink:#14181f;--nav-ink-dim:#636c7a;--nav-line:#dfe3e9;}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .site-header,:root:not([data-theme="light"]) .site-footer{--nav-bg:rgba(18,20,26,.92);--nav-ink:#f2f4f7;--nav-ink-dim:rgba(242,244,247,.55);--nav-line:rgba(255,255,255,.14);}
}
:root[data-theme="dark"] .site-header,:root[data-theme="dark"] .site-footer{--nav-bg:rgba(18,20,26,.92);--nav-ink:#f2f4f7;--nav-ink-dim:rgba(242,244,247,.55);--nav-line:rgba(255,255,255,.14);}

.site-header{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--nav-line);padding:0 24px;height:52px;display:flex;align-items:center;gap:14px;}

/* Scroll-Fortschrittsbalken — von nav.js auf jeder Seite erzeugt, sitzt unter dem 52px hohen Header */
.progress-track{position:fixed;top:52px;left:0;right:0;height:3px;background:var(--line,rgba(0,0,0,.08));z-index:10;pointer-events:none;}

/* ══════════════════════════════════════════════════
   FOOTER — zweistufig: schmale Pflichtleiste (halbe Header-Höhe,
   immer sichtbar, auch auf vollflächigen Tool-Seiten) + ausklappbares
   Panel mit dem vollen Link-Footer.
   ══════════════════════════════════════════════════ */
.site-footer{position:fixed;left:0;right:0;bottom:0;z-index:100;height:26px;}
.footer-bar{
  height:26px;background:var(--nav-bg);backdrop-filter:blur(8px);
  border-top:1px solid var(--nav-line);
  display:flex;align-items:center;gap:14px;padding:0 24px;
}
.footer-copy{font-family:'IBM Plex Mono','Courier New',monospace;font-size:.58rem;color:var(--nav-ink-dim);white-space:nowrap;}
.footer-links-mini{display:flex;gap:14px;margin-left:auto;}
.footer-links-mini a{font-family:'IBM Plex Mono','Courier New',monospace;font-size:.58rem;color:var(--nav-ink-dim);text-decoration:none;transition:color .2s;white-space:nowrap;}
.footer-links-mini a:hover{color:var(--nav-ink);}
.footer-toggle{
  background:none;border:1px solid var(--nav-line);border-radius:4px;
  color:var(--nav-ink-dim);width:18px;height:18px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .25s cubic-bezier(.4,0,.2,1),color .2s,border-color .2s;
}
.footer-toggle:hover{color:var(--nav-ink);border-color:var(--nav-ink-dim);}
.footer-toggle.open{transform:rotate(180deg);}
.footer-toggle svg{width:10px;height:10px;}

.footer-panel{
  position:absolute;left:0;right:0;bottom:100%;
  background:var(--nav-bg);backdrop-filter:blur(10px);
  border-top:1px solid var(--nav-line);
  box-shadow:0 -8px 30px rgba(0,0,0,.25);
  padding:32px 24px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,200px));justify-content:start;gap:24px;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s,padding .3s;
  pointer-events:none;
}
.footer-panel.open{max-height:70vh;overflow-y:auto;opacity:1;pointer-events:auto;}
.footer-col-title{font-family:'IBM Plex Mono','Courier New',monospace;font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nav-ink-dim);margin-bottom:12px;}
.footer-col a{display:block;font-family:'IBM Plex Mono','Courier New',monospace;font-size:.68rem;color:var(--nav-ink);text-decoration:none;padding:5px 0;transition:color .2s;}
.footer-col a:hover{color:var(--nav-ink-dim);}

/* Ab Tablet (>=640px): Links direkt in der Leiste, kein Ausklapp-Element nötig */
@media(min-width:640px){
  .footer-toggle{display:none;}
  .footer-panel{display:none;}
}
@media(max-width:639px){
  .footer-links-mini{display:none;}
  .footer-panel{max-height:none;}
  .footer-panel.open{max-height:80vh;}
}
@media(max-width:480px){
  .footer-panel{padding:24px 20px;}
  .footer-copy{font-size:.52rem;}
}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#4d8aff,#ff5577,#00e06a,#ffb02e);transition:width .1s linear;}
.logo-link{display:flex;align-items:center;align-self:stretch;text-decoration:none;padding:0 6px;}
.logo-dots{display:flex;gap:4px;align-items:center;}
.logo-dot{width:9px;height:9px;border-radius:50%;animation:navpulse 2s ease-in-out infinite;}
.logo-dot:nth-child(1){background:#0047ff;animation-delay:0s;}
.logo-dot:nth-child(2){background:#ff2d55;animation-delay:.2s;}
.logo-dot:nth-child(3){background:#00d957;animation-delay:.4s;}
.logo-dot:nth-child(4){background:#ff9f00;animation-delay:.6s;}
@keyframes navpulse{0%,100%{transform:scale(1);opacity:.6;}50%{transform:scale(1.5);opacity:1;}}
.header-title{font-family:'IBM Plex Mono','Courier New',monospace;font-size:.82rem;font-weight:600;letter-spacing:-.01em;color:var(--nav-ink);white-space:nowrap;}
.header-title span{color:var(--nav-ink-dim);font-weight:400;}
.site-nav{margin-left:auto;display:flex;gap:6px;align-items:center;}
.flag-icon{width:16px;height:12px;flex-shrink:0;border-radius:2px;vertical-align:middle;margin-right:6px;box-shadow:0 0 0 1px rgba(0,0,0,.12) inset;}
.lang-group .nav-top{display:flex;align-items:center;}
.lang-submenu a{display:flex;align-items:center;}
/* Alle Menüpunkte (Hauptpunkte + Unterpunkte): einheitlich weißer
   Hintergrund, neutraler Text. Beim Hover wird nur die Schriftfarbe
   zur Akzentfarbe der jeweiligen Kategorie — Hintergrund bleibt weiß. */
.header-link{font-family:'IBM Plex Mono','Courier New',monospace;font-size:.7rem;font-weight:600;background:#fff;color:#636c7a;text-decoration:none;border:1px solid #dfe3e9;padding:4px 10px;border-radius:4px;transition:color .18s,border-color .18s;white-space:nowrap;}
.header-link.active{border-color:#a0a8b4;color:#14181f;font-weight:600;}
.header-reset{font-family:'IBM Plex Mono','Courier New',monospace;font-size:.66rem;color:var(--nav-ink-dim);background:none;border:none;cursor:pointer;padding:4px 8px;transition:color .2s;}
.header-reset:hover{color:#ff2d55;}
.nav-group{position:relative;}
.nav-top{cursor:pointer;}

.nav-submenu{display:none;position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid #dfe3e9;border-radius:4px;padding:6px;flex-direction:column;gap:4px;min-width:150px;box-shadow:0 4px 16px rgba(0,0,0,.08);z-index:200;}
.nav-submenu.open{display:flex;}

/* Hover: Schriftfarbe + Rand je Kategorie — gilt für Hauptpunkt UND alle
   Unterpunkte. Mit Fallback-Hex (zweiter var()-Parameter), da Seiten mit
   includeTheme={false} (z.B. die Startseite) theme.css nicht laden und
   --accent-* dort sonst undefiniert wäre. */
.nav-top--genetik:hover,
.nav-submenu:not(.nav-submenu--physics):not(.nav-submenu--chemie):not(.nav-submenu--kosmo):not(.lang-submenu) .header-link:hover{color:var(--accent-green,#00e06a);border-color:var(--accent-green,#00e06a);}
.header-link--physics:hover,
.nav-submenu--physics .header-link:hover{color:var(--accent-blue,#4d8aff);border-color:var(--accent-blue,#4d8aff);}
.header-link--chemie:hover,
.nav-submenu--chemie .header-link:hover{color:var(--accent-red,#ff5577);border-color:var(--accent-red,#ff5577);}
.header-link--kosmo:hover,
.nav-submenu--kosmo .header-link:hover{color:var(--accent-amber,#ffb02e);border-color:var(--accent-amber,#ffb02e);}
.lang-group .nav-top:hover,
.lang-submenu a:hover{color:var(--accent-purple,#a855f7);border-color:var(--accent-purple,#a855f7);}

/* Aktueller Bereich: Hauptpunkt-Text + Rand bleiben dauerhaft in der Akzentfarbe */
.nav-top--genetik-active{color:var(--accent-green,#00e06a)!important;border-color:var(--accent-green,#00e06a)!important;}
.nav-top--physics-active{color:var(--accent-blue,#4d8aff)!important;border-color:var(--accent-blue,#4d8aff)!important;}
.nav-top--chemie-active{color:var(--accent-red,#ff5577)!important;border-color:var(--accent-red,#ff5577)!important;}
.nav-top--kosmo-active{color:var(--accent-amber,#ffb02e)!important;border-color:var(--accent-amber,#ffb02e)!important;}

.nav-section-label{
  font-family:'IBM Plex Mono','Courier New',monospace;
  font-size:.42rem;letter-spacing:.18em;text-transform:uppercase;
  color:#636c7a;padding:5px 6px 3px;
  pointer-events:none;user-select:none;
}
.nav-section-label--divider{
  margin-top:3px;padding-top:10px;
  border-top:1px solid #dfe3e9;
}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:7px 4px;flex-shrink:0;}
.burger span{display:block;width:18px;height:1.5px;border-radius:1px;background:var(--nav-ink-dim);transition:transform .22s,opacity .22s;}
@media(max-width:849px){
  .burger{display:flex;margin-left:auto;}
  .site-nav{display:none;flex-direction:column;position:fixed;top:52px;left:0;right:0;background:var(--nav-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--nav-line);padding:12px 24px;gap:8px;z-index:99;}
  .site-nav.open{display:flex;}
  .header-title{flex:1;text-align:center;white-space:normal;}
  .header-title span{display:block;}
  .nav-group{width:100%;}
  .nav-top{display:block;width:100%;text-align:left;padding:9px 14px;font-size:.76rem;}
  .site-nav{gap:10px;padding-top:18px;padding-bottom:18px;}
  .site-nav .nav-group{padding:2px 0;}
  .nav-submenu{position:static;box-shadow:none;min-width:0;background:#fff;border-radius:6px;border:1px solid #dfe3e9;padding:5px 6px;margin-top:6px;}
}

/* ── Page transitions — View Transition morph ── */
@view-transition{navigation:auto;}

@keyframes vt-out{to{opacity:0;}}
@keyframes vt-in{from{opacity:0;translate:0 8px;}}

::view-transition-old(root){animation:160ms ease-in vt-out both;}
::view-transition-new(root){animation:380ms cubic-bezier(0.22,1,0.36,1) vt-in both;}
html.no-anim::view-transition-old(root),
html.no-anim::view-transition-new(root){animation:none;}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none;}
}

/* ══════════════════════════════════════════════════
   SCORE OVERLAY
   ══════════════════════════════════════════════════ */
/* ── Theme-Slider ── */
.fb-switch-wrap{display:flex;align-items:center;gap:9px;padding:10px 14px;cursor:pointer;user-select:none;}
.fb-switch-label{font-family:'IBM Plex Mono','Courier New',monospace;font-size:.62rem;letter-spacing:.03em;color:rgba(255,255,255,.3);transition:color .2s;white-space:nowrap;}
.fb-switch-label.active{color:rgba(255,255,255,.82);}
.fb-track{position:relative;width:38px;height:20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:10px;flex-shrink:0;transition:background .25s,border-color .25s;cursor:pointer;}
.fb-track.on{background:rgba(255,255,255,.85);border-color:rgba(255,255,255,.85);}
.fb-thumb{position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.4,0,.2,1),background .25s;pointer-events:none;}
.fb-track.on .fb-thumb{transform:translateX(18px);background:#14161c;}

/* ── Overlay ── */
.fb-overlay{
  position:absolute;bottom:calc(100% + 10px);right:0;min-width:220px;
  background:rgba(14,16,22,.97);border:1px solid rgba(255,255,255,.11);border-radius:10px;
  box-shadow:0 -4px 24px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.4);
  padding:16px 15px 14px;
  display:flex;flex-direction:column;gap:16px;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .2s ease,transform .2s cubic-bezier(.4,0,.2,1);
}
.fb-overlay.open{opacity:1;transform:translateY(0);pointer-events:auto;}
.fb-overlay-title{font-family:'IBM Plex Mono','Courier New',monospace;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.28);padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08);}
.fb-group{display:flex;flex-direction:column;gap:8px;}
.fb-group-label{font-family:'IBM Plex Mono','Courier New',monospace;font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.28);}

/* Schriftgröße-Buttons */
.fb-size-row{display:flex;gap:5px;}
.fb-size-btn{flex:1;padding:7px 4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:rgba(255,255,255,.42);font-family:'IBM Plex Mono','Courier New',monospace;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s,border-color .18s,color .18s;}
.fb-size-btn:hover{color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.3);}
.fb-size-btn.active{background:rgba(255,255,255,.85);border-color:rgba(255,255,255,.85);color:#14161c;}
.fb-size-btn[data-size="small"]{font-size:.62rem;}
.fb-size-btn[data-size="medium"]{font-size:.78rem;}
.fb-size-btn[data-size="large"]{font-size:.94rem;}

/* Toggle-Zeile (Animationen) */
.fb-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.fb-toggle-label{font-family:'IBM Plex Mono','Courier New',monospace;font-size:.62rem;color:rgba(255,255,255,.52);}

/* Fortschritt-Button im Begleiter-Menü */
.fb-progress-btn{
  width:100%;padding:9px 10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;
  color:rgba(255,255,255,.72);font-family:'IBM Plex Mono','Courier New',monospace;font-size:.66rem;letter-spacing:.02em;
  cursor:pointer;transition:background .18s,border-color .18s,color .18s;
}
.fb-progress-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff;}

/* ══════════════════════════════════════════════════
   STERNEN-BEGLEITER
   ══════════════════════════════════════════════════ */
#star-companion{position:fixed;bottom:46px;right:20px;z-index:200;}
.companion-btn{
  position:relative;width:132px;height:132px;background:none;border:none;padding:0;
  cursor:pointer;filter:drop-shadow(0 4px 22px rgba(0,0,0,.55));transition:filter .2s;
}
.companion-btn:hover{filter:drop-shadow(0 4px 28px rgba(255,77,94,.4)) drop-shadow(0 0 22px rgba(77,138,255,.3));}
.companion-btn.open{filter:drop-shadow(0 4px 30px rgba(255,77,94,.55)) drop-shadow(0 0 26px rgba(77,138,255,.4));}
.companion-btn:focus-visible{outline:2px solid #ff4d5e;outline-offset:3px;border-radius:50%;}
.star-svg{width:100%;height:100%;overflow:visible;}
.star-blob{transform-box:fill-box;transform-origin:50% 50%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));animation:star-pulse 3s ease-in-out infinite;}
.star-blob.star-pop{animation:star-pulse 3s ease-in-out infinite,star-pop-anim .5s cubic-bezier(.34,1.56,.64,1) 1;}
.orbit-guide{fill:none;stroke-width:2.2;}
.orbit-guide--green{stroke:rgba(0,224,106,.45);}
.orbit-guide--blue{stroke:rgba(77,138,255,.45);}
.orbit-tilt{transform-origin:50px 50px;}
.orbit-tilt--a{transform:rotate(-24deg) scale(1,.42);}
.orbit-tilt--b{transform:rotate(35deg) scale(1,.42) scaleX(-1);}
.electron-spin{transform-origin:50px 50px;}
.electron-spin--a{animation:electron-orbit 4.2s linear infinite;}
.electron-spin--b{animation:electron-orbit 5.6s linear infinite reverse;}
.electron{filter:drop-shadow(0 0 4px currentColor);}

.star-panel{
  position:absolute;bottom:calc(100% + 14px);right:0;min-width:230px;
  background:rgba(14,16,22,.97);border:1px solid rgba(255,255,255,.11);border-radius:12px;
  box-shadow:0 -4px 24px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.4);
  padding:16px 15px 14px;
  display:flex;flex-direction:column;gap:16px;
  opacity:0;transform:scale(.35) translateY(18px);transform-origin:bottom right;
  pointer-events:none;
  transition:opacity .25s ease,transform .4s cubic-bezier(.34,1.56,.64,1);
}
.star-panel.open{opacity:1;transform:scale(1) translateY(0);pointer-events:auto;}
.star-panel .fb-switch-wrap{padding:0;}

@keyframes star-pulse{
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.045);opacity:.94;}
}
@keyframes electron-orbit{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@keyframes star-pop-anim{
  0%{transform:scale(1,1);}
  30%{transform:scale(1.16,.74);}
  55%{transform:scale(.85,1.2);}
  75%{transform:scale(1.05,.92);}
  100%{transform:scale(1,1);}
}

/* Reduced motion */
html.no-anim *,html.no-anim *::before,html.no-anim *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}

#score-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(6,8,14,.93);backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;pointer-events:none;transition:opacity .25s;
}
#score-overlay.open{opacity:1;pointer-events:auto;}

.score-wrap{width:100%;max-width:860px;max-height:90vh;overflow-y:auto;position:relative;}
.score-top{display:flex;align-items:center;justify-content:center;margin-bottom:28px;position:relative;}
.score-title{font-family:'IBM Plex Mono','Courier New',monospace;font-size:1.05rem;font-weight:600;letter-spacing:-.02em;color:#fff;}
.score-title::before{content:'★ ';color:#ff9f00;}
.score-close{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  background:none;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.55);
  font-family:'IBM Plex Mono','Courier New',monospace;font-size:.9rem;
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color .15s,border-color .15s;
}
.score-close:hover{color:#fff;border-color:rgba(255,255,255,.5);}

/* ── Teilen-Button: farbiger Verlaufs-Rahmen (wie .progress-fill) ── */
.score-share{position:absolute;left:0;top:50%;transform:translateY(-50%);}
.score-share-btn{
  appearance:none;cursor:pointer;border-radius:8px;
  padding:6px 14px;border:2px solid transparent;
  background:
    linear-gradient(#12141c,#12141c) padding-box,
    linear-gradient(90deg,#4d8aff,#ff5577,#00e06a,#ffb02e) border-box;
  color:#fff;font-family:'IBM Plex Mono','Courier New',monospace;
  font-size:.68rem;letter-spacing:.04em;
  transition:opacity .15s,transform .15s;
}
.score-share-btn:hover{opacity:.85;}
.score-share-btn[aria-expanded="true"]{transform:translateY(-1px);}

.score-share-menu{
  position:absolute;left:0;top:calc(100% + 8px);z-index:1;
  display:flex;flex-direction:column;min-width:168px;
  background:#12141c;border:1px solid rgba(255,255,255,.14);border-radius:10px;
  padding:6px;box-shadow:0 12px 32px rgba(0,0,0,.5);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s,transform .18s;
}
.score-share-menu.open{opacity:1;transform:translateY(0);pointer-events:auto;}
.score-share-link{
  display:block;padding:8px 10px;border-radius:6px;
  font-family:'IBM Plex Mono','Courier New',monospace;font-size:.72rem;
  color:rgba(255,255,255,.75);text-decoration:none;
  transition:background .15s,color .15s;
}
.score-share-link:hover{background:rgba(255,255,255,.08);color:#fff;}

@media(max-width:600px){
  .score-share-btn{font-size:.6rem;padding:5px 10px;}
  .score-title{font-size:.85rem;}
}

.score-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}

/* ── Panels ── */
.score-panel{border-radius:12px;padding:20px;border:1px solid;}
.score-panel--genetik{background:rgba(0,224,106,.05);border-color:rgba(0,224,106,.22);}
.score-panel--physik{background:rgba(77,138,255,.05);border-color:rgba(77,138,255,.22);}
.score-panel--kosmo{background:rgba(255,176,46,.05);border-color:rgba(255,176,46,.22);}

.score-panel-head{
  font-family:'IBM Plex Mono','Courier New',monospace;font-size:.56rem;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;
  display:flex;align-items:center;gap:8px;
}
.score-panel-head::before,.score-panel-head::after{content:'';flex:1;height:1px;}
.score-panel--genetik .score-panel-head{color:#00e06a;}
.score-panel--genetik .score-panel-head::before,
.score-panel--genetik .score-panel-head::after{background:rgba(0,224,106,.25);}
.score-panel--physik .score-panel-head{color:#4d8aff;}
.score-panel--physik .score-panel-head::before,
.score-panel--physik .score-panel-head::after{background:rgba(77,138,255,.25);}
.score-panel--kosmo .score-panel-head{color:#ffb02e;}
.score-panel--kosmo .score-panel-head::before,
.score-panel--kosmo .score-panel-head::after{background:rgba(255,176,46,.22);}
.score-panel--chemie{background:rgba(255,85,119,.05);border-color:rgba(255,85,119,.22);}
.score-panel--chemie .score-panel-head{color:#ff5577;}
.score-panel--chemie .score-panel-head::before,
.score-panel--chemie .score-panel-head::after{background:rgba(255,85,119,.22);}

/* ── Kosmologie-Panel: Sternensystem-Speicherstand ── */
.score-sys-name{font-family:'IBM Plex Mono','Courier New',monospace;font-size:.88rem;font-weight:600;color:#fff;text-align:center;margin-bottom:6px;}
.score-sys-sub{font-family:'IBM Plex Mono','Courier New',monospace;font-size:.6rem;color:rgba(255,255,255,.4);text-align:center;margin-bottom:14px;}
.score-hab-badge{display:block;text-align:center;font-family:'IBM Plex Mono','Courier New',monospace;font-size:.6rem;padding:8px 10px;border-radius:8px;border:1px solid;margin-bottom:14px;}
.score-hab-badge.yes{background:rgba(0,224,106,.1);border-color:rgba(0,224,106,.35);color:#00e06a;}
.score-hab-badge.no{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.35);}

/* Kosmologie: Badges ausschließlich gelb, unabhängig vom yes/no-Status */
.score-panel--kosmo .score-hab-badge.yes,
.score-panel--kosmo .score-hab-badge.no{background:rgba(255,176,46,.1);border-color:rgba(255,176,46,.35);color:#ffb02e;}

/* Chemie: erreichter Status rot, nicht erreichter Status inaktiv/gedimmt */
.score-panel--chemie .score-hab-badge.yes{background:rgba(255,85,119,.1);border-color:rgba(255,85,119,.35);color:#ff5577;}

/* Chemie: Abstand zwischen Platzhalter-Kreis und Badges, damit die Kachel so hoch wie Kosmologie wird */
.score-panel--chemie .score-particle-ring{margin-bottom:15px;}

/* ── Kosmologie: Stern-Kreis ── */
.score-star-ring{width:80px;height:80px;border-radius:50%;margin:0 auto 8px;}

/* ── Stats grid ── */
.score-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px;}
.score-stat{background:rgba(255,255,255,.05);border-radius:7px;padding:9px 10px;text-align:center;}
.score-stat-val{font-family:'IBM Plex Mono','Courier New',monospace;font-size:1.5rem;font-weight:600;line-height:1;margin-bottom:3px;}
.score-stat-key{font-family:'IBM Plex Mono','Courier New',monospace;font-size:.46rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.33);}
.score-panel--genetik .score-stat-val{color:#00e06a;}
.score-panel--physik  .score-stat-val{color:#4d8aff;}

/* ── Tag lists ── */
.score-sub-label{font-family:'IBM Plex Mono','Courier New',monospace;font-size:.48rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:7px;}
.score-tags{display:flex;flex-wrap:wrap;gap:5px;}
.score-tag{font-family:'IBM Plex Mono','Courier New',monospace;font-size:.57rem;padding:3px 8px;border-radius:10px;border:1px solid;}
.score-tag.done {background:rgba(0,224,106,.1); border-color:rgba(0,224,106,.35);color:#00e06a;}
.score-tag.todo {background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.22);}
.score-tag.dna-a{background:rgba(0,217,87,.12); border-color:rgba(0,217,87,.42); color:#00d957;}
.score-tag.dna-t{background:rgba(255,45,85,.12); border-color:rgba(255,45,85,.42); color:#ff2d55;}
.score-tag.dna-g{background:rgba(255,159,0,.12); border-color:rgba(255,159,0,.42); color:#ff9f00;}
.score-tag.dna-c{background:rgba(0,71,255,.14);  border-color:rgba(0,71,255,.42);  color:#4d8aff;}

/* ── Particle ring in physik panel ── */
.score-particle-ring{
  width:80px;height:80px;border-radius:50%;border:2px solid;
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono','Courier New',monospace;font-size:1.8rem;font-weight:600;
  margin:0 auto 8px;transition:box-shadow .2s;
}
.score-particle-ring--empty{
  border-color:rgba(77,138,255,.18);color:rgba(77,138,255,.3);font-size:1.4rem;
}
.score-particle-name{
  font-family:'IBM Plex Mono','Courier New',monospace;font-size:.55rem;
  letter-spacing:.08em;text-align:center;color:rgba(255,255,255,.45);margin-bottom:14px;
}
.score-quiz-link{
  display:block;text-align:center;margin-bottom:14px;
  font-family:'IBM Plex Mono','Courier New',monospace;font-size:.62rem;letter-spacing:.04em;
  color:rgba(77,138,255,.35);text-decoration:none;
  padding:9px 12px;border:1px solid rgba(77,138,255,.18);border-radius:8px;
  transition:color .2s,border-color .2s;
}
.score-quiz-link:hover{color:#4d8aff;border-color:rgba(77,138,255,.45);}
.score-chimera-img{display:block;width:80px;height:80px;object-fit:cover;border-radius:50%;margin:0 auto 8px;border:2px solid rgba(0,224,106,.3);}
.score-particle-ring--genetik{border-color:rgba(0,224,106,.18);color:rgba(0,224,106,.3);}
.score-quiz-link--genetik{color:rgba(0,224,106,.35);border-color:rgba(0,224,106,.18);}
.score-quiz-link--genetik:hover{color:#00e06a;border-color:#00e06a;}
.score-quiz-link--kosmo{color:#ffb02e;border-color:rgba(255,176,46,.4);}
.score-quiz-link--kosmo:hover{color:#ffb02e;border-color:#ffb02e;background:rgba(255,176,46,.08);}
.score-quiz-link--chemie{color:#ff5577;border-color:rgba(255,85,119,.4);}
.score-quiz-link--chemie:hover{color:#ff5577;border-color:#ff5577;background:rgba(255,85,119,.08);}

@media(max-width:649px){
  .score-cols{grid-template-columns:1fr;}
}

/* Sternen-Begleiter — Tablet: verkleinerter Button, Panel bleibt am Button verankert */
@media(max-width:849px){
  .companion-btn{width:100px;height:100px;}
}

/* Sternen-Begleiter — Mobil: Panel löst sich vom Button und geht über die volle Breite */
@media(max-width:649px){
  #star-companion{bottom:40px;right:14px;}
  .companion-btn{width:78px;height:78px;}
  .star-panel{
    position:fixed;left:14px;right:14px;bottom:132px;
    width:auto;min-width:0;
    transform-origin:bottom center;
  }
}