/* Compile Academy Liquid – das feste Website-Design.
   Violetter Flüssigglas-Look. Der Hintergrund und die Glaslinsen kommen aus dem eigenen
   WebGL-Shader (assets/liquid-glass.js). Ohne WebGL greift derselbe Look als reines CSS. */

:root,
:root[data-theme],
:root[data-scheme] {
  --bg: #0c0620;
  --bg-2: #140a33;
  --ink: #f8f5ff;
  --mist: #d9d0f7;
  --haze: #b0a6d8;
  --violet: #8b5cff;
  --violet-ink: #d2c2ff;
  --cyan: #8fe6ff;
  --pink: #ff7ac6;
  --glass: rgba(255, 255, 255, 0.075);
  --glass-strong: rgba(28, 14, 66, 0.72);
  --rim: rgba(255, 255, 255, 0.55);
  --rim-low: rgba(255, 255, 255, 0.12);
  --drop: rgba(6, 2, 22, 0.62);
  --code-bg: rgba(12, 6, 32, 0.82);
  --lq-fill: rgba(40, 20, 92, 0.34);
  --lq-fill-strong: rgba(26, 12, 62, 0.74);
  --lq-edge: rgba(255, 255, 255, 0.2);
  --lq-sheen: rgba(255, 255, 255, 0.12);
  /* Bewegung nach Apple-Vorbild: weiches Auslaufen bzw. echte Feder mit ≈2 % Nachschwingen statt Wackeln. */
  --nx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nx-spring: linear(
    0,
    0.0383,
    0.1305,
    0.2501,
    0.3784,
    0.5029,
    0.6163,
    0.7146,
    0.7966,
    0.8624,
    0.9134,
    0.9516,
    0.9789,
    0.9976,
    1.0094,
    1.0162,
    1.0193,
    1.0199,
    1.0188,
    1.0168,
    1.0144,
    1.0118,
    1.0094,
    1.0072,
    1.0053,
    1.0037,
    1.0025,
    1.0015,
    1.0008,
    1.0003,
    1
  );
  color-scheme: dark;
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root {
    --nx-spring: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

html {
  background: #0c0620;
}
body {
  background:
    radial-gradient(70vmax 55vmax at 12% 8%, rgba(110, 66, 250, 0.55), transparent 62%),
    radial-gradient(60vmax 50vmax at 92% 22%, rgba(168, 52, 236, 0.45), transparent 60%),
    radial-gradient(70vmax 60vmax at 50% 105%, rgba(82, 30, 180, 0.6), transparent 62%),
    radial-gradient(40vmax 34vmax at 30% 70%, rgba(242, 77, 168, 0.22), transparent 60%), linear-gradient(180deg, #0d0624, #170a3a 60%, #0b0520);
  background-attachment: fixed;
  color: var(--ink);
}
html.lg-ready body {
  background: transparent;
}

/* ---------- WebGL-Flächen ---------- */
.lg-bg {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
}
.lg-lens {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}
html.lg-ready .wall,
html.lg-ready .bokeh {
  display: none;
}
.wall {
  background: transparent;
}
.wall .b1 {
  background: radial-gradient(circle, rgba(124, 82, 255, 0.8), transparent 62%);
}
.wall .b2 {
  background: radial-gradient(circle, rgba(178, 64, 240, 0.6), transparent 60%);
}
.wall .b3 {
  background: radial-gradient(circle, rgba(255, 92, 176, 0.45), transparent 60%);
}
.wall .b4 {
  background: radial-gradient(circle, rgba(96, 52, 220, 0.55), transparent 62%);
}

/* ---------- Glas (CSS – für alle Flächen ohne Linse und als Rückfall) ---------- */
:root:root .glass {
  background: linear-gradient(140deg, var(--lq-sheen), transparent 42%), var(--lq-fill);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 22px 48px -26px var(--drop),
    0 6px 16px -10px var(--drop);
}
:root:root .glass.strong {
  background: var(--lq-fill-strong);
}
:root:root .glass::after {
  opacity: 0.7;
}

/* Elemente mit eigener Shader-Linse: das Glas zeichnet der Shader, CSS liefert nur Kante und Schatten. */
html:root .lg-on.lg-on {
  background: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 26px 54px -28px rgba(6, 2, 22, 0.75),
    0 8px 18px -12px rgba(6, 2, 22, 0.6) !important;
}
html:root .lg-on.lg-bar {
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
}
/* Echte Kantenbrechung des Seiteninhalts (Chromium, Prisma: shared/glass/prisma/lens-runtime.ts): Frost und gebogene Kante stecken im
   SVG-Filter --lg-lens, der Shader legt nur Tönung und Licht darüber. Die Rückfälle unten gehen vor. */
html:root .lg-on.lg-bar[data-lg-lens='svg'] {
  -webkit-backdrop-filter: var(--lg-lens) saturate(150%) brightness(1.04) !important;
  backdrop-filter: var(--lg-lens) saturate(150%) brightness(1.04) !important;
}
html:root .lg-on::before {
  opacity: 0.25;
}
html:root .lg-on::after {
  opacity: 0.55;
}

/* ---------- Typografie ---------- */
.grad,
:root .grad {
  background: linear-gradient(100deg, #ffffff 0%, #d7c6ff 30%, #ff9ad6 66%, #9fe8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow {
  color: var(--violet-ink);
}
.lead,
.muted,
.prose p,
.prose li {
  color: var(--mist);
}

/* ---------- Buttons ---------- */
:root:root .btn:not(.ghost) {
  --tint: 139, 92, 255;
  color: #fff;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.28), transparent 52%), linear-gradient(180deg, #9a6dff, #6d3df2);
  text-shadow: 0 1px 2px rgba(20, 6, 60, 0.45);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -2px 6px rgba(30, 6, 90, 0.35),
    0 16px 34px -14px rgba(139, 92, 255, 0.85),
    0 4px 12px -6px rgba(139, 92, 255, 0.6);
}
:root:root .btn.lg-on:not(.ghost) {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 16px 34px -14px rgba(139, 92, 255, 0.85),
    0 4px 12px -6px rgba(139, 92, 255, 0.55) !important;
}
:root:root .btn.ghost {
  color: var(--ink);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), transparent 60%), rgba(48, 24, 104, 0.34);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 12px 26px -16px var(--drop);
}

/* ---------- Navigation ---------- */
:root:root .nav.glass {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.12), transparent 50%), rgba(26, 12, 64, 0.48);
}
.nav-links a {
  color: var(--mist);
}
.nav-links a:hover,
.nav-links a[aria-current='page'] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
@media (max-width: 860px) {
  .nav-links {
    background: rgba(22, 10, 54, 0.9);
  }
}
.menu-toggle {
  background: rgba(255, 255, 255, 0.1);
}

/* ---------- Flächen ---------- */
.lang-chip.glass {
  background: rgba(40, 20, 92, 0.42);
}
.learning-preview .screen {
  background: linear-gradient(170deg, rgba(30, 14, 70, 0.92), rgba(16, 8, 40, 0.94));
}
:root:root .learning-preview .mini-card.glass {
  background: rgba(20, 10, 48, 0.85) !important;
}
.platform {
  background: rgba(255, 255, 255, 0.05);
}
.platform.active {
  background: rgba(139, 92, 255, 0.16);
}
.demo textarea,
.demo iframe {
  background: rgba(10, 5, 28, 0.86);
}
.feature .icon {
  background: linear-gradient(150deg, rgba(171, 140, 255, 0.35), rgba(110, 60, 240, 0.2));
  color: #efe8ff;
}
footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, transparent, rgba(8, 3, 22, 0.55));
}
.copyright {
  color: var(--haze);
}
:root:root .legal-page .prose {
  background: rgba(20, 10, 48, 0.9) !important;
}

/* ---------- Barrierefreiheit ---------- */
/* Transparenz reduzieren: dichteres Glas; Hintergrund und Lichtkanten bleiben erhalten. */
@media (prefers-reduced-transparency: reduce) {
  :root:root .glass,
  :root:root .btn.ghost {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.1), transparent 45%), rgba(30, 15, 72, 0.88);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html:root .lg-on.lg-bar,
  html:root .lg-on.lg-bar[data-lg-lens='svg'] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
/* Sparmodus für schwache Geräte (data-perf="lite", assets/perf.js): Statt WebGL zeigt die fest stehende Farbfläche (.wall)
   den violetten Hintergrund – ohne Bewegung und ohne Neuzeichnen beim Scrollen. Ohne Echtzeit-Unschärfe hält dichteres
   Glas den Text lesbar. */
:root[data-perf='lite'] body {
  background: transparent;
}
:root[data-perf='lite'] :is(.glass, .btn.ghost) {
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.1), transparent 45%), rgba(30, 15, 72, 0.9);
}
:root[data-perf='lite'] .nav.glass {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), transparent 50%), rgba(22, 10, 54, 0.94);
}
@media (prefers-contrast: more) {
  :root:root .glass,
  :root:root .btn.ghost {
    background: #1a0e3e !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@media (forced-colors: active) {
  .lg-bg,
  .lg-lens {
    display: none !important;
  }
}

/* Wartungshinweis aus Compile Academy Command */
.nx-notice {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: min(640px, calc(100vw - 24px));
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 201, 92, 0.45);
  background: rgba(40, 18, 92, 0.94);
  color: #fff7e6;
  font-size: 14px;
  box-shadow: 0 16px 40px -16px #000;
}

/* „Lern-App in Entwicklung“ (Eigentümer 20.10.2026): Glas-Hinweis unter der Navigation, solange die Lernplattform aus ist */
.nx-dev-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: min(760px, calc(100% - 24px));
  margin: 12px auto 0;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 194, 107, 0.45);
  background: linear-gradient(100deg, rgba(255, 194, 107, 0.16), rgba(123, 91, 255, 0.16));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    0 12px 30px -18px #000;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  color: #fff7e6;
  font-size: 14px;
  line-height: 1.35;
  position: relative;
  z-index: 40;
}
.nx-dev-notice i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffc26b;
  box-shadow: 0 0 0 0 rgba(255, 194, 107, 0.6);
  animation: nx-dev-pulse 1.8s ease-out infinite;
}
.nx-dev-notice b {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffc26b;
}
@keyframes nx-dev-pulse {
  to {
    box-shadow: 0 0 0 9px rgba(255, 194, 107, 0);
  }
}
@media (max-width: 560px) {
  .nx-dev-notice {
    border-radius: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .nx-dev-notice i {
    margin-top: 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nx-dev-notice i {
    animation: none;
  }
}