/* ============================================================
   CODEDEX-THEME  -  FISI Lernplattform
   Tiefschwarz + Neon Rot/Blau, Pixel-Headings, Mono-Code
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700;800&family=Pixelify+Sans:wght@400;500;600;700&family=VT323&display=swap');

:root {
  /* --- Grundflaechen --- */
  --bg-void:      #050507;   /* tiefster Hintergrund */
  --bg-deep:      #0a0a0f;   /* Karten-Backdrop */
  --bg-panel:     #101019;   /* Panels / Karten */
  --bg-panel-2:   #15151f;   /* erhoehte Panels */
  --bg-inset:     #08080d;   /* Eingabefelder / Terminal */

  /* --- Linien --- */
  --line:         #1f1f2e;
  --line-soft:    #181824;

  /* --- Text --- */
  --txt:          #e8e8f0;
  --txt-dim:      #a0a0b4;
  --txt-faint:    #62626f;

  /* --- Akzente (Neon) --- */
  --red:          #ff3b5c;
  --red-deep:     #c81e3c;
  --red-glow:     rgba(255, 59, 92, 0.55);
  --blue:         #3da9ff;
  --blue-deep:    #1c6fd6;
  --blue-glow:    rgba(61, 169, 255, 0.55);

  /* --- Status --- */
  --green:        #3ddc84;
  --green-glow:   rgba(61, 220, 132, 0.45);
  --amber:        #ffb347;
  --xp:           #ffd23f;

  /* --- Fonts --- */
  --f-pixel: 'Press Start 2P', monospace;
  --f-mono:  'JetBrains Mono', monospace;
  --f-body:  'Inter', system-ui, sans-serif;
  --f-head:  'Pixelify Sans', 'Inter', system-ui, sans-serif;

  /* --- Radius / Schatten --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-card: 0 8px 30px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg-void);
  color: var(--txt);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

/* Ambient-Glow im Hintergrund: rot links oben, blau rechts unten */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(820px 520px at 12% -8%, rgba(255,59,92,0.10), transparent 60%),
    radial-gradient(900px 620px at 92% 108%, rgba(61,169,255,0.10), transparent 60%);
}

/* dezentes Pixel-Raster */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(120,120,160,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,120,160,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
}

#app, .layer { position: relative; z-index: 1; }

h1, h2, h3 { font-family: var(--f-head); font-weight: 700; letter-spacing: 0.01em; }

.pixel { font-family: var(--f-pixel); line-height: 1.5; letter-spacing: 0; }

code, kbd, pre, .mono { font-family: var(--f-mono); }

a { color: var(--blue); text-decoration: none; }
a:hover { color: #7cc4ff; }

::selection { background: var(--red); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: #25253a; border-radius: 8px; border: 2px solid var(--bg-void); }
::-webkit-scrollbar-thumb:hover { background: #34344f; }

/* Fokus-Sichtbarkeit (Barrierefreiheit) */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}