/* Compact spinner with app mark filling the inner circle. */
.noqe-loader__ring {
  --noqe-loader-size: 96px;
  --noqe-loader-inset: 11px;
  --noqe-loader-track: rgba(255, 255, 255, 0.07);
  --noqe-loader-accent: var(--noqe-loader-accent-custom, rgba(16, 185, 129, 0.52));
  --noqe-loader-accent-soft: rgba(16, 185, 129, 0.18);

  position: relative;
  width: var(--noqe-loader-size);
  height: var(--noqe-loader-size);
  margin: 0 auto 22px;
}
.noqe-loader__ring::before,
.noqe-loader__ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  z-index: 0;
  pointer-events: none;
}
.noqe-loader__ring::before {
  border: 2.5px solid var(--noqe-loader-track);
}
.noqe-loader__ring::after {
  border: 2.5px solid transparent;
  border-top-color: var(--noqe-loader-accent);
  border-right-color: var(--noqe-loader-accent-soft);
  animation: noqeLoaderSpin 1.15s linear infinite;
}
.noqe-loader__mark {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: calc(var(--noqe-loader-size) - var(--noqe-loader-inset) * 2);
  height: calc(var(--noqe-loader-size) - var(--noqe-loader-inset) * 2);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  background-color: #0a1220;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.noqe-loader__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}
@keyframes noqeLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Shared loading screen ─────────────────────────────────────────────────────────
   One look for every wait in the app (Training, Formation, Gegneranalyse, Leistungen …):
   ring + logo, a title and an optional sub line. Markup: templates/_noqe_loading.html.
   Overlay variant stays hidden until `.is-open` is added; `--page` is a full page. */
.noqe-loading {
  --nl-bg: var(--bg, #0E1116);
  --nl-text: rgba(238, 242, 255, 0.9);
  --nl-muted: rgba(238, 242, 255, 0.56);
  --nl-safe-top: env(safe-area-inset-top, 0px);
  --nl-safe-bot: env(safe-area-inset-bottom, 0px);
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: calc(28px + var(--nl-safe-top)) 24px calc(28px + var(--nl-safe-bot));
  overflow: hidden;
  font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--nl-text);
  text-align: center;
  background:
    radial-gradient(circle at 50% 36%, rgba(16, 185, 129, 0.05), transparent 48%),
    var(--nl-bg);
}
.noqe-loading.is-open,
.noqe-loading--page {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.noqe-loading::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.03), transparent 70%);
  transform: translateY(-6px);
  pointer-events: none;
}
.noqe-loading__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 360px);
  text-align: center;
}
.noqe-loading__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--nl-text);
}
.noqe-loading__sub {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--nl-muted);
}