/* Compile Academy Boot – Liquid-Glass-Übergang von der Website zur Lernplattform.
   Dieselbe Datei wird auf der Website verlinkt und beim Build in /lernen/index.html eingebettet,
   damit beide Seiten Bild für Bild dieselbe Ladeoberfläche zeigen. Nur transform/opacity werden
   dauerhaft animiert; „Bewegung reduzieren“ schaltet alle Schleifen ab. */

@property --nxb-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.nxb {
  --nxb-base: #0a0b1e;
  --nxb-w1: #7c5cffcc;
  --nxb-w2: #22d3eeb3;
  --nxb-w3: #ff5fa2ad;
  --nxb-w4: #ffb54799;
  --nxb-ink: #f6f6ff;
  --nxb-mist: #b9bde0;
  --nxb-faint: rgba(255, 255, 255, 0.1);
  --nxb-panel: rgba(20, 22, 52, 0.46);
  --nxb-rim: rgba(255, 255, 255, 0.62);
  --nxb-rim-low: rgba(255, 255, 255, 0.14);
  --nxb-drop: rgba(2, 3, 18, 0.62);
  --nxb-accent: #8b74ff;
  --nxb-accent-ink: #fff;
  --nxb-streak: rgba(255, 255, 255, 0.95);
  --nxb-streak-2: rgba(170, 225, 255, 0.75);
  --nxb-size: 144px;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  overflow: hidden;
  isolation: isolate;
  background: var(--nxb-base);
  color: var(--nxb-ink);
  font:
    500 15px/1.5 'Lexend',
    -apple-system,
    'SF Pro Text',
    'Segoe UI Variable Text',
    'Segoe UI',
    system-ui,
    sans-serif;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  cursor: progress;
}
.nxb *,
.nxb *::before,
.nxb *::after {
  box-sizing: border-box;
}
.nxb[data-scheme='light'] {
  --nxb-base: #eef1ff;
  --nxb-w1: #7c5cffb3;
  --nxb-w2: #22d3eea6;
  --nxb-w3: #ff5fa299;
  --nxb-w4: #ffb5478c;
  --nxb-ink: #171a38;
  --nxb-mist: #4b5178;
  --nxb-faint: rgba(23, 26, 56, 0.1);
  --nxb-panel: rgba(255, 255, 255, 0.58);
  --nxb-rim: rgba(255, 255, 255, 0.98);
  --nxb-rim-low: rgba(255, 255, 255, 0.5);
  --nxb-drop: rgba(40, 44, 110, 0.28);
  --nxb-accent: #6a4cf0;
  --nxb-streak: rgba(124, 92, 255, 0.95);
  --nxb-streak-2: rgba(34, 190, 238, 0.8);
}
@media (max-width: 520px) {
  .nxb {
    --nxb-size: 116px;
  }
}

/* ---------- Hintergrund: Aurora, Raster, Vignette ---------- */
.nxb-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.nxb-sky i {
  position: absolute;
  width: 72vmax;
  height: 72vmax;
  border-radius: 50%;
  opacity: 0.9;
  will-change: transform;
}
.nxb-sky i:nth-child(1) {
  left: -22vmax;
  top: -30vmax;
  background: radial-gradient(closest-side, var(--nxb-w1), transparent 72%);
  animation: nxb-drift-a 16s ease-in-out infinite alternate;
}
.nxb-sky i:nth-child(2) {
  right: -26vmax;
  top: -10vmax;
  background: radial-gradient(closest-side, var(--nxb-w2), transparent 70%);
  animation: nxb-drift-b 19s ease-in-out infinite alternate;
}
.nxb-sky i:nth-child(3) {
  left: 4vmax;
  bottom: -40vmax;
  background: radial-gradient(closest-side, var(--nxb-w3), transparent 70%);
  animation: nxb-drift-c 21s ease-in-out infinite alternate;
}
.nxb-sky i:nth-child(4) {
  right: -12vmax;
  bottom: -44vmax;
  width: 56vmax;
  height: 56vmax;
  background: radial-gradient(closest-side, var(--nxb-w4), transparent 70%);
  animation: nxb-drift-a 23s ease-in-out infinite alternate-reverse;
}
.nxb-sky::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--nxb-faint) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 48%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 48%, #000 10%, transparent 75%);
}
.nxb-sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 75% at 50% 46%, transparent 45%, rgba(0, 0, 0, 0.42));
}
.nxb[data-scheme='light'] .nxb-sky::after {
  background: radial-gradient(ellipse 85% 75% at 50% 46%, transparent 50%, rgba(120, 130, 200, 0.14));
}

/* ---------- Bühne ---------- */
.nxb-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(380px, 100%);
}
.nxb-lens {
  position: relative;
  isolation: isolate;
  width: var(--nxb-size);
  height: var(--nxb-size);
  margin-bottom: 30px;
}
.nxb-lens::before {
  content: '';
  position: absolute;
  inset: -46%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 92, 255, 0.5), rgba(34, 211, 238, 0.14) 55%, transparent 72%);
  animation: nxb-breathe 3.4s ease-in-out infinite;
}
.nxb-orbit {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  animation: nxb-spin 16s linear infinite;
}
.nxb[data-scheme='light'] .nxb-orbit {
  border-color: rgba(70, 60, 160, 0.22);
}
.nxb-orbit::before {
  content: '';
  position: absolute;
  top: -3.5px;
  left: calc(50% - 3.5px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 10px 2px rgba(34, 211, 238, 0.9),
    0 0 22px 6px rgba(124, 92, 255, 0.45);
}

/* Das Glas: Frost, gebündelte Lichtkante oben links, feinere Reflexe unten rechts,
   dezente Farbaufspaltung nur am Rand. */
.nxb-glass {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 32%;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) 52%, rgba(255, 255, 255, 0.12));
  -webkit-backdrop-filter: blur(14px) saturate(185%) brightness(1.05);
  backdrop-filter: blur(14px) saturate(185%) brightness(1.05);
  box-shadow:
    inset 0 1px 0.5px var(--nxb-rim),
    inset 0 -1px 1px var(--nxb-rim-low),
    inset 1.5px 0 0 rgba(255, 105, 170, 0.22),
    inset -1.5px 0 0 rgba(80, 200, 255, 0.26),
    inset -1px -3px 4px rgba(255, 255, 255, 0.16),
    inset 4px 5px 6px rgba(255, 255, 255, 0.12),
    inset 0 0 28px rgba(255, 255, 255, 0.1),
    0 8px 13px rgba(0, 0, 0, 0.16),
    0 30px 60px -22px var(--nxb-drop),
    0 12px 30px -14px rgba(124, 92, 255, 0.6);
}
.nxb-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background:
    radial-gradient(120% 68% at 24% -4%, rgba(255, 255, 255, 0.5), transparent 52%), linear-gradient(331deg, rgba(255, 255, 255, 0.2), transparent 30%);
  pointer-events: none;
}
.nxb-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1.6px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--nxb-a),
    transparent 0 58%,
    rgba(255, 255, 255, 0.05) 62%,
    var(--nxb-streak) 71%,
    var(--nxb-streak-2) 75%,
    rgba(255, 160, 210, 0.35) 79%,
    transparent 86%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: nxb-rim 2.6s linear infinite;
  pointer-events: none;
}
/* Zweite, feinere Spiegelung innen – wie bei dickem Glas */
.nxb-inner {
  position: absolute;
  inset: 8px;
  z-index: 2;
  border-radius: 27%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
/* Lichtstrahlen hinter der Linse */
.nxb-rays {
  position: absolute;
  inset: -150%;
  z-index: -2;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(160, 140, 255, 0.13) 0 4deg, transparent 4deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 70%);
  mask-image: radial-gradient(closest-side, #000 18%, transparent 70%);
  animation: nxb-spin 48s linear infinite;
}
.nxb[data-scheme='light'] .nxb-rays {
  background: repeating-conic-gradient(from 0deg, rgba(110, 80, 240, 0.09) 0 4deg, transparent 4deg 18deg);
}
/* Funken steigen langsam auf */
.nxb-sparks {
  position: absolute;
  inset: -60px;
  z-index: -1;
  pointer-events: none;
}
.nxb-sparks i {
  position: absolute;
  bottom: 20%;
  left: var(--x);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px var(--c, rgba(124, 92, 255, 0.8));
  opacity: 0;
  animation: nxb-spark var(--d, 4.2s) ease-in var(--delay, 0s) infinite;
}
.nxb-sparks i:nth-child(1) {
  --x: 12%;
  --delay: 0.2s;
}
.nxb-sparks i:nth-child(2) {
  --x: 26%;
  --delay: 1.6s;
  --c: rgba(34, 211, 238, 0.85);
  --d: 5s;
}
.nxb-sparks i:nth-child(3) {
  --x: 44%;
  --delay: 2.9s;
  --c: rgba(255, 95, 162, 0.8);
}
.nxb-sparks i:nth-child(4) {
  --x: 61%;
  --delay: 0.9s;
  --d: 4.6s;
}
.nxb-sparks i:nth-child(5) {
  --x: 78%;
  --delay: 2.2s;
  --c: rgba(34, 211, 238, 0.85);
}
.nxb-sparks i:nth-child(6) {
  --x: 90%;
  --delay: 3.4s;
  --c: rgba(255, 181, 71, 0.85);
  --d: 5.4s;
}
.nxb-logo {
  position: relative;
  z-index: 1;
  width: 64%;
  height: 64%;
  filter: drop-shadow(0 8px 14px rgba(20, 12, 80, 0.45));
  animation: nxb-float 3.4s ease-in-out infinite;
}
.nxb-glint {
  position: absolute;
  inset: -20%;
  z-index: 2;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.42) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: nxb-glint 3.2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s infinite;
  pointer-events: none;
}

.nxb-word {
  margin: 0 0 6px;
  padding-left: 0.34em;
  /* „COMPILE ACADEMY“ ist doppelt so lang wie früher „NEXCODE“: auf schmalen Handys zweizeilig, mittig. */
  max-width: 92vw;
  text-transform: uppercase;
  text-align: center;
  font:
    700 clamp(20px, 5.2vw, 25px) / 1.1 'Unbounded',
    'SF Pro Display',
    'Segoe UI Variable Display',
    'Segoe UI',
    system-ui,
    sans-serif;
  letter-spacing: 0.34em;
  background: linear-gradient(100deg, var(--nxb-ink) 0 38%, #b8a6ff 47%, #8fe8ff 53%, var(--nxb-ink) 62% 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: nxb-shine 3.8s ease-in-out infinite;
}
.nxb[data-scheme='light'] .nxb-word {
  background-image: linear-gradient(100deg, var(--nxb-ink) 0 38%, #6a4cf0 47%, #0e9fbe 53%, var(--nxb-ink) 62% 100%);
}
.nxb-status {
  min-height: 1.5em;
  margin: 0 0 16px;
  color: var(--nxb-mist);
  font-size: 14px;
  letter-spacing: 0.01em;
}

/* Vier echte Phasen statt einer erfundenen Prozentzahl */
.nxb-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: min(232px, 72vw);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nxb-track li {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--nxb-faint);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.18);
}
.nxb-track li::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c5cff, #22d3ee);
  box-shadow: 0 0 10px rgba(124, 92, 255, 0.7);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nxb-track li[data-state='done']::after {
  transform: scaleX(1);
}
.nxb-track li[data-state='active']::after {
  transform: scaleX(1);
  background: linear-gradient(90deg, transparent, #9c86ff 30%, #7ae9ff 60%, transparent);
  box-shadow: none;
  animation: nxb-flow 1.25s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
.nxb-hint {
  max-width: 300px;
  margin: 16px 0 0;
  color: var(--nxb-mist);
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.nxb-hint.on {
  opacity: 0.92;
}

/* ---------- Fehlerkarte ---------- */
.nxb-error {
  width: min(420px, 100%);
  margin-top: 4px;
  padding: 22px 22px 20px;
  border-radius: 26px;
  background: var(--nxb-panel);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  box-shadow:
    inset 0 1px 0.5px var(--nxb-rim),
    inset 0 -1px 1px var(--nxb-rim-low),
    inset 0 0 0 1px var(--nxb-rim-low),
    0 24px 50px -24px var(--nxb-drop);
  cursor: auto;
  animation: nxb-rise 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.nxb-error[hidden] {
  display: none;
}
.nxb-error h2 {
  margin: 0 0 8px;
  color: var(--nxb-ink);
  font:
    700 18px/1.3 'Lexend',
    -apple-system,
    'Segoe UI',
    system-ui,
    sans-serif;
}
.nxb-error p {
  margin: 0 0 18px;
  color: var(--nxb-mist);
  font-size: 14px;
}
.nxb-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.nxb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(180deg, #9a84ff, var(--nxb-accent));
  color: var(--nxb-accent-ink);
  font:
    600 15px/1.2 'Lexend',
    -apple-system,
    'Segoe UI',
    system-ui,
    sans-serif;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -2px 6px rgba(0, 0, 0, 0.18),
    0 12px 26px -12px rgba(124, 92, 255, 0.85);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.nxb-btn:hover {
  transform: translateY(-1px);
}
.nxb-btn:active {
  transform: scale(0.97);
}
.nxb-btn:focus-visible {
  outline: 3px solid #22d3ee;
  outline-offset: 3px;
}
.nxb-btn--ghost {
  background: transparent;
  color: var(--nxb-ink);
  box-shadow: inset 0 0 0 1px var(--nxb-rim-low);
}
.nxb-code {
  display: block;
  margin-top: 14px;
  color: var(--nxb-mist);
  font-size: 11px;
  opacity: 0.7;
}
.nxb--failed {
  cursor: auto;
}
.nxb--failed .nxb-track,
.nxb--failed .nxb-status,
.nxb--failed .nxb-hint {
  display: none;
}
.nxb--failed .nxb-glass::after,
.nxb--failed .nxb-orbit,
.nxb--failed .nxb-glint,
.nxb--failed .nxb-rays {
  animation-play-state: paused;
  opacity: 0.35;
}
.nxb--failed .nxb-sparks {
  display: none;
}
.nxb--failed .nxb-lens {
  margin-bottom: 22px;
  filter: saturate(0.6);
}

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

/* ---------- Auftritt (nur bei direktem Aufruf, nicht nach dem Website-Übergang) ---------- */
.nxb--enter .nxb-lens {
  animation: nxb-lens-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.nxb--enter .nxb-word,
.nxb--enter .nxb-status,
.nxb--enter .nxb-track {
  animation: nxb-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.nxb--enter .nxb-word {
  animation-delay: 0.12s;
}
.nxb--enter .nxb-status {
  animation-delay: 0.2s;
}
.nxb--enter .nxb-track {
  animation-delay: 0.26s;
}

/* ---------- Website: die angeklickte Glas-Pille wird zur Ladefläche ---------- */
.nxb--morph {
  clip-path: inset(var(--nxb-t, 50%) var(--nxb-r, 50%) var(--nxb-b, 50%) var(--nxb-l, 50%) round var(--nxb-round, 99px));
  transition: clip-path 0.56s cubic-bezier(0.72, 0, 0.18, 1);
}
.nxb--morph.nxb--open {
  clip-path: inset(0 0 0 0 round 0);
}
.nxb--morph .nxb-stage {
  opacity: 0;
  transform: scale(0.9);
  filter: blur(8px);
  transition:
    opacity 0.42s ease 0.16s,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
    filter 0.5s ease 0.14s;
}
.nxb--morph.nxb--open .nxb-stage {
  opacity: 1;
  transform: none;
  filter: none;
}
.nxb-flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--nxb-fx, 50%) var(--nxb-fy, 50%), rgba(255, 255, 255, 0.55), transparent 40%);
}
.nxb--morph.nxb--open .nxb-flash {
  animation: nxb-flash 0.7s ease-out both;
}

/* ---------- Abgang: Glas löst sich auf, die Plattform erscheint ---------- */
.nxb--out {
  pointer-events: none;
  animation: nxb-fade 0.52s cubic-bezier(0.4, 0, 0.2, 1) 0.08s forwards;
}
.nxb--out .nxb-stage {
  animation: nxb-dissolve 0.56s cubic-bezier(0.3, 0, 0.2, 1) forwards;
}
.nxb--out .nxb-sky {
  animation: nxb-sky-out 0.6s ease forwards;
}

@keyframes nxb-rim {
  to {
    --nxb-a: 360deg;
  }
}
@keyframes nxb-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes nxb-spark {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }
  20% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(-150px) scale(0.2);
  }
}
@keyframes nxb-breathe {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}
@keyframes nxb-float {
  0%,
  100% {
    transform: translateY(1.5px) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.03);
  }
}
@keyframes nxb-glint {
  0% {
    transform: translateX(-120%);
  }
  45%,
  100% {
    transform: translateX(120%);
  }
}
@keyframes nxb-shine {
  0%,
  15% {
    background-position: 100% 0;
  }
  85%,
  100% {
    background-position: 0 0;
  }
}
@keyframes nxb-flow {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes nxb-drift-a {
  to {
    transform: translate3d(9vmax, 7vmax, 0) scale(1.12);
  }
}
@keyframes nxb-drift-b {
  to {
    transform: translate3d(-11vmax, 9vmax, 0) scale(0.92);
  }
}
@keyframes nxb-drift-c {
  to {
    transform: translate3d(8vmax, -9vmax, 0) scale(1.08);
  }
}
@keyframes nxb-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes nxb-lens-in {
  from {
    opacity: 0;
    transform: scale(0.82);
    filter: blur(10px);
  }
}
@keyframes nxb-flash {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes nxb-fade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes nxb-dissolve {
  to {
    opacity: 0;
    transform: scale(1.14);
    filter: blur(10px);
  }
}
@keyframes nxb-sky-out {
  to {
    opacity: 0;
    transform: scale(1.06);
  }
}

/* ---------- Bewegung reduzieren: nur noch kurze Überblendungen ---------- */
.nxb[data-motion='reduce'] *,
.nxb[data-motion='reduce'] *::before,
.nxb[data-motion='reduce'] *::after {
  animation: none !important;
  transition: none !important;
}
.nxb[data-motion='reduce'] .nxb-track li[data-state='active']::after {
  transform: scaleX(1);
  opacity: 0.6;
  background: linear-gradient(90deg, #7c5cff, #22d3ee);
}
.nxb[data-motion='reduce'].nxb--morph {
  clip-path: none;
  opacity: 0;
  transition: opacity 0.16s ease !important;
}
.nxb[data-motion='reduce'].nxb--morph.nxb--open {
  opacity: 1;
}
.nxb[data-motion='reduce'].nxb--morph .nxb-stage {
  opacity: 1;
  transform: none;
  filter: none;
}
.nxb[data-motion='reduce'].nxb--out {
  animation: nxb-fade 0.18s linear forwards !important;
}
@media (prefers-reduced-motion: reduce) {
  .nxb *,
  .nxb *::before,
  .nxb *::after {
    animation-iteration-count: 1 !important;
  }
}

/* Weniger Transparenz bzw. erzwungene Farben: klare, ruhige Flächen */
@media (prefers-reduced-transparency: reduce) {
  .nxb-glass,
  .nxb-error {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--nxb-panel);
  }
}
@media (forced-colors: active) {
  .nxb-glass,
  .nxb-error,
  .nxb-btn {
    border: 1px solid CanvasText;
  }
  .nxb-word {
    color: CanvasText;
    background: none;
  }
}