/* ============================================================
   STIL C3 · GLAS & GLOW
   Tiefschwarzer Grund mit winzigen Lichtinseln. Kaestchen als
   Milchglas mit farbigen Glow-Auren und Gradient-Akzenten.
   ============================================================ */

body { background: #050506; }
#bgwelt { display: none; }
.services-buehne .liquid-canvas { opacity: 0.3; }

#hero { --ak: var(--c-peach); }
#leistungen { --ak: var(--c-blau); }
#maschine { --ak: var(--c-cyan); }
#cases { --ak: var(--c-peach); }
#galerie { --ak: var(--c-pink); }
#team { --ak: var(--c-cyan); }
#merch { --ak: var(--c-pink); }
#kontakt { --ak: var(--c-blau); }

.section {
  background:
    radial-gradient(45% 30% at 75% 12%, color-mix(in srgb, var(--ak) 10%, transparent), transparent 70%),
    radial-gradient(35% 25% at 12% 80%, color-mix(in srgb, var(--ak) 6%, transparent), transparent 70%);
}

/* Kicker mit Glow-Punkt */
.kicker { color: var(--c-text-hell); }
.kicker::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ak);
  box-shadow: 0 0 12px var(--ak);
  margin-right: 0.6em;
  vertical-align: 1px;
}

/* Milchglas-Kaestchen mit farbiger Aura */
.bento-karte, .format-item, .case-bild, .maschine-knoten,
.team-portraet .team-foto, .team-thumb, .merch-bild {
  border-radius: 20px;
  border: 1px solid rgba(245, 245, 243, 0.13);
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--ak, var(--c-blau)) 20%, transparent);
}
.bento-karte { box-shadow: 0 24px 70px color-mix(in srgb, var(--service-farbe) 22%, transparent); }
.bento-karte:hover {
  border-color: color-mix(in srgb, var(--service-farbe) 70%, transparent);
  box-shadow: 0 28px 90px color-mix(in srgb, var(--service-farbe) 40%, transparent);
  background: rgba(255, 255, 255, 0.08);
}
.bento-nummer {
  background: var(--gradient-spektrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.format-item { border-radius: 14px; }
.format-item::after { color: var(--c-text-hell); text-shadow: 0 0 12px var(--ak); }

.maschine-knoten { background-color: rgba(255, 255, 255, 0.05); }
.maschine-knoten.mensch { background-color: var(--c-hell); }
.maschine-knoten.empfaengt {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ak) 80%, transparent), 0 0 34px color-mix(in srgb, var(--ak) 55%, transparent);
}
.maschine-ticker::before { color: var(--ak); }

.scanlinie {
  background: linear-gradient(to bottom, transparent, var(--ak), transparent);
  box-shadow: 0 0 26px var(--ak), 0 0 60px color-mix(in srgb, var(--ak) 60%, transparent);
}
.case-bild::before { background: var(--gradient-spektrum); }
.case-slot:hover .case-bild { box-shadow: 0 24px 80px color-mix(in srgb, var(--ak) 42%, transparent); }

.team-portraet-spalte::before {
  background:
    radial-gradient(ellipse 50% 40% at 30% 30%, color-mix(in srgb, var(--ak) 30%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 40% at 75% 75%, color-mix(in srgb, var(--c-pink) 18%, transparent), transparent 70%);
}
.team-liste li.aktiv h3 {
  text-shadow: 0 0 24px var(--ak);
}
.team-pfeil { box-shadow: 0 0 0 1px rgba(245, 245, 243, 0.1); }
.team-pfeil:hover { box-shadow: 0 0 24px color-mix(in srgb, var(--ak) 50%, transparent); }

.merch-panel {
  background: rgba(10, 10, 12, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.merch-karte:hover .merch-bild { box-shadow: 0 28px 90px color-mix(in srgb, var(--ak) 40%, transparent); }

.kontakt-mail {
  background: var(--gradient-spektrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kontakt-mail:hover { text-shadow: none; filter: drop-shadow(0 0 26px color-mix(in srgb, var(--ak) 60%, transparent)); }

.logoleiste { border-color: rgba(245, 245, 243, 0.07); }