/* ============================================================
   CAMPUSLICHTER · GAMESHOW — gemeinsames Fundament
   (Design-Tokens, Lichter-Hintergrund, Noise, Reset, Buttons)
   Stil 1:1 aus der Website übernommen, KEIN Hotlinking:
   alle Fonts/Logos liegen lokal unter /assets.
   ⚠ Diese Datei gehört zum GAMESHOW-Tool (nicht zur Website).
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  --bg:        #2e0f5a;
  --bg-deep:   #220a45;
  --accent:    #ff473d;   /* Haupt-Akzent (Rot) */
  --light-blue:#629ab7;
  --light-orng:#e94e1b;
  --light-pink:#cc808d;
  --light-grn: #7ed27b;

  --white:     #ffffff;
  --ink:       #2e0f5a;
  --muted:     rgba(255,255,255,.86);
  --muted-2:   rgba(255,255,255,.66);
  --hairline:  rgba(255,255,255,.16);

  /* Frosted Glass — einheitlich für ALLE Boxen */
  --card:      rgba(26,8,54,.62);
  --card-brd:  rgba(255,255,255,.16);
  --glass-blur: blur(22px) saturate(1.2);
  --tint: linear-gradient(135deg, rgba(255,71,61,.20), rgba(233,78,27,.12) 70%, rgba(204,128,141,.12));

  /* Antwort-„Lichter" — feste Zuordnung Buchstabe → Farbe (auch auf dem Beamer identisch) */
  --opt-a: #ff473d;   /* A — Rot   */
  --opt-b: #629ab7;   /* B — Blau  */
  --opt-c: #7ed27b;   /* C — Grün  */
  --opt-d: #cc808d;   /* D — Rosa  */

  --maxw: 1180px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --radius: 22px;
  --radius-pill: 999px;
  --shadow-pill: 0 10px 30px -12px rgba(0,0,0,.55);

  --ff-body: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-display: "FatFrank", "Outfit", sans-serif;
  --ff-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  --noise-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--ff-body);
  font-weight: 400;
  color: var(--white);
  background: var(--bg);
  line-height: 1.55;
  min-height: 100svh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; color: inherit; background: none; border: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: #fff; }
[hidden] { display: none !important; }

/* ============================================================
   HINTERGRUND: diffuse Lichter + Rauschen (kein Video → schlank)
   ============================================================ */
.bg {
  position: fixed; inset: 0; z-index: -4; overflow: hidden;
  background:
    radial-gradient(40vw 40vw at 14% 6%,  rgba(255,71,61,.62) 0%, transparent 60%),
    radial-gradient(44vw 44vw at 86% 8%,  rgba(233,78,27,.42) 0%, transparent 62%),
    radial-gradient(40vw 40vw at 70% 28%, rgba(255,71,61,.36) 0%, transparent 60%),
    radial-gradient(38vw 38vw at 24% 44%, rgba(233,78,27,.32) 0%, transparent 60%),
    radial-gradient(46vw 46vw at 92% 60%, rgba(98,154,183,.34) 0%, transparent 62%),
    radial-gradient(42vw 42vw at 10% 70%, rgba(255,71,61,.34) 0%, transparent 60%),
    radial-gradient(40vw 40vw at 58% 86%, rgba(204,128,141,.20) 0%, transparent 60%),
    radial-gradient(130% 100% at 50% 0%, #3a1268 0%, var(--bg) 48%, var(--bg-deep) 100%);
}
.bg__light {
  position: absolute; border-radius: 50%; filter: blur(120px);
  will-change: transform; mix-blend-mode: screen;
}
.bg__light.l1 { width: 56vw; height: 56vw; left: -16vw; top: -12vw;  background: var(--accent);     opacity: .38; animation: drift1 30s ease-in-out infinite; }
.bg__light.l2 { width: 50vw; height: 50vw; right:-18vw; top: -6vw;   background: var(--light-orng); opacity: .30; animation: drift2 36s ease-in-out infinite; }
.bg__light.l3 { width: 46vw; height: 46vw; left: 10vw;  top: 34vh;   background: var(--accent);     opacity: .26; animation: drift3 34s ease-in-out infinite; }
.bg__light.l4 { width: 48vw; height: 48vw; right:-10vw; top: 54vh;   background: var(--light-blue); opacity: .30; animation: drift1 40s ease-in-out infinite reverse; }
.bg__light.l5 { width: 40vw; height: 40vw; left: 30vw;  top: 84vh;   background: var(--light-orng); opacity: .22; animation: drift2 38s ease-in-out infinite; }
.bg__light.l6 { width: 50vw; height: 50vw; left: -12vw; top:118vh;   background: var(--accent);     opacity: .28; animation: drift3 32s ease-in-out infinite reverse; }
.bg__light.l7 { width: 44vw; height: 44vw; right:-8vw;  top:146vh;   background: var(--light-blue); opacity: .26; animation: drift1 37s ease-in-out infinite; }
.bg__light.l8 { width: 42vw; height: 42vw; left: 24vw;  top:176vh;   background: var(--accent);     opacity: .22; animation: drift2 35s ease-in-out infinite reverse; }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(5vw,6vh) scale(1.14)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-6vw,5vh) scale(1.10)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4vw,-5vh) scale(1.16)} }

/* dezente Abdunklung über den Lichtern → mehr Kontrast/Lesbarkeit für den Inhalt
   (liegt zwischen Lichter-Hintergrund und Inhalt) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(12,5,30,.52) 0%, rgba(12,5,30,.36) 38%, rgba(12,5,30,.32) 62%, rgba(12,5,30,.52) 100%);
}

.noise {
  position: fixed; inset: -50%; width: 200%; height: 200%; z-index: -1;
  pointer-events: none; opacity: .42; mix-blend-mode: overlay;
  background-image: var(--noise-url); background-size: 200px 200px;
  animation: grain .6s steps(3) infinite;
}
@keyframes grain {
  0%{transform:translate(0,0)} 33%{transform:translate(-4%,3%)} 66%{transform:translate(3%,-2%)} 100%{transform:translate(0,0)}
}

/* ---------- Display-Headlines ---------- */
.h-display {
  font-family: var(--ff-display); font-weight: 400; line-height: .92;
  letter-spacing: .005em; text-transform: uppercase;
}

/* ---------- Buttons (Auszug aus der Website) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-weight: 700; font-size: 1rem; padding: .85em 1.5em; border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 12px 30px -10px rgba(255,71,61,.7); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -10px rgba(255,71,61,.85); }
.btn--ghost { background: rgba(26,8,54,.5); color: #fff; border-color: var(--card-brd); backdrop-filter: var(--glass-blur); }
.btn--ghost:hover { background: rgba(26,8,54,.72); transform: translateY(-2px); }