/* alpha_desktop_web/static/style.css - Erscheinungsbild der "echten Shell"
   (Navigation A/B/C/D + Avatar + verschiebbarer Workspace, siehe Master-
   Spezifikation Abschnitt 4). Bewusst schlicht: kein Framework, kein
   Build-Schritt - direkt vom Browser geladen, siehe server.py::
   _STATISCHE_DATEIEN. */

:root {
  color-scheme: light dark;
  --bg: #16171d;
  --flaeche: #1f212a;
  --flaeche-hell: #272a35;
  --text: #eef0f4;
  --text-schwach: #9a9fb0;
  --akzent: #7c9fff;
  --fehler: #ff7c7c;
  --ok: #6fd58f;
  --rand: #34364066;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* BUGFIX (Nicos Meldung "die Seiten Ansicht dumm das oben Anmeldung ist
   und man runter scrollt zum Arbeitsplatz"): #asset-overlay, #neu-overlay
   und #app setzen weiter unten alle explizit "display: flex"/"display:
   block" auf ihrer ID - eine ID-Regel ist SPEZIFISCHER als die
   eingebaute Browser-Regel "[hidden] { display: none }" und gewinnt
   deshalb, obwohl app.js in alleVerstecken()/zeigeApp() ganz korrekt das
   hidden-Attribut setzt. Ergebnis: Login-Bildschirm UND Arbeitsplatz
   standen gleichzeitig im Dokumentfluss untereinander, statt dass einer
   verschwindet, sobald der andere erscheint - das war das "runterscrollen
   zum Arbeitsplatz". Diese eine Regel ist bewusst allgemein (nicht nur
   fuer die drei Overlays einzeln) und mit !important, damit das
   hidden-Attribut ab jetzt IMMER gewinnt, egal welche ID-Regel ein
   Element sonst noch hat - betrifft auch alle anderen Stellen, die
   *.hidden = true/false setzen (z.B. Avatar-Platzhalter, Genesis-Welt-
   "Ort verlassen"-Knopf). */
[hidden] {
  display: none !important;
}

#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.fehlertext {
  color: var(--fehler);
  font-size: 0.85rem;
  margin: 0;
}

/* ---------- ERWEITERUNG (Runde "Anmeldung 1:1 uebernehmen statt
   nachgebaut"): Splash/Start-Auswahl/Soulkey/Soulkey-Passwort sind keine
   eigenen HTML-Formulare mehr, sondern echte Bilder + prozentual
   positionierte, unsichtbare Ueberlagerungen - siehe app.js::
   zeigeAssetBildschirm() und desktop/asset_bildschirm.py (das Vorbild
   am PC). ---------- */

#asset-overlay {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  /* 25.10.2026 (Nico: "Handy angenehmer, weicher"): sanfter Lila-Schimmer statt grauem Rand */
  background: radial-gradient(120% 80% at 50% 30%, #2a1446 0%, #140a24 55%, #0b0614 100%);
  padding: 1.5rem 1rem;
}

#asset-bildschirm-bereich {
  width: min(92vw, 24rem);
}

/* .asset-bildschirm: die Huelle bekommt ihr Seitenverhaeltnis dynamisch
   von app.js aus den echten Bildmassen (naturalWidth/naturalHeight) -
   dadurch wird das Bild nie verzerrt, egal wie breit der Browser ist. */
.asset-bildschirm {
  position: relative;
  width: 100%;
  border-radius: 1.4rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(190, 150, 255, 0.18), 0 10px 50px rgba(150, 90, 255, 0.28);
}
@media (max-width: 520px) {
  #asset-overlay { padding: 0.6rem 0.5rem; }
  #asset-bildschirm-bereich { width: min(97vw, 26rem); }
}

.asset-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* .asset-taste/.asset-eingabe: UNSICHTBAR (kein eigener Hintergrund/
   Rahmen) - das im Bild bereits fertig gestaltete Design bleibt
   vollstaendig sichtbar, genau wie am PC (siehe desktop/
   asset_bildschirm.py-Docstring). Positionen kommen 1:1 als Prozentwerte
   aus regions.json, siehe app.js::zeigeAssetBildschirm(). */
.asset-taste,
.asset-eingabe {
  position: absolute;
  border: none;
  background: transparent;
  margin: 0;
  padding: 0;
}

.asset-taste {
  cursor: pointer;
}

.asset-eingabe {
  color: var(--text);
  font-size: 1rem;
  text-align: center;
  outline: none;
}

/* ERWEITERUNG (Runde "Genesis als Mehrbenutzer-Server"): existiert im
   echten Desktop-System nicht (dort laeuft nur EIN Nexling lokal) -
   bleibt auf dem Mehrbenutzer-Server als eigener Bereich UNTER dem
   echten Start-Bildschirm erhalten, siehe index.html. */
#start-online-bereich {
  width: min(92vw, 24rem);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 0.7rem;
  padding: 1rem 1.2rem;
}

/* ---------- "Neuer Nexling" (Genesis-Resonanz-Test), bewusst "einfache
   Optik" statt der Tkinter-Ei-Animationen (Nicos ausdrueckliche Wahl,
   siehe app.js-Datei-Kopf) ---------- */

#neu-overlay {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  overflow-y: auto;
}

#neu-karte {
  width: min(92vw, 26rem);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 0.7rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.neu-schritt h1 {
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
}

/* ERWEITERUNG (Runde "Genesis als Mehrbenutzer-Server"): #start-avatar-*
   ersetzt durch eine Liste (#start-nexlinge-liste, siehe index.html) -
   jeder Eintrag ist eine .nexling-eintrag-Zeile, dieselbe Optik wie
   vorher, jetzt aber pro laufendem Nexling wiederholbar. */
#start-nexlinge-liste {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.nexling-eintrag {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.nexling-eintrag img,
.nexling-eintrag .nexling-platzhalter {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--flaeche-hell);
  border: 1px solid var(--rand);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-schwach);
  font-weight: 700;
}

.nexling-eintrag-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nexling-eintrag-name {
  font-weight: 600;
}

.neu-schritt button {
  width: 100%;
  padding: 0.6rem 0;
  border-radius: 0.4rem;
  border: none;
  background: var(--akzent);
  color: #10131f;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.6rem;
}

button.sekundaer {
  background: transparent;
  border: 1px solid var(--rand);
  color: var(--text);
  font-weight: 500;
}

.neu-schritt {
  display: none;
}

.neu-schritt.aktiv {
  display: block;
}

.neu-schritt label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}

.neu-schritt input[type="text"],
.neu-schritt textarea {
  padding: 0.5rem 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid var(--rand);
  background: var(--flaeche-hell);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}

.neu-langtext {
  white-space: pre-wrap;
  max-height: 55vh;
  overflow-y: auto;
}

.neu-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.4rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.neu-option:hover {
  background: var(--flaeche-hell);
}

.neu-regler-zeile {
  margin-bottom: 1rem;
}

.neu-regler-beschriftung {
  font-size: 0.85rem;
  color: var(--text-schwach);
  margin-bottom: 0.3rem;
}

.neu-regler-zeile input[type="range"] {
  width: 100%;
}

#neu-frage-knopfzeile {
  display: flex;
  gap: 0.6rem;
}

#neu-frage-knopfzeile button {
  flex: 1;
}

#neu-reveal-schluessel-karte {
  background: var(--flaeche-hell);
  border: 1px solid var(--akzent);
  border-radius: 0.5rem;
  padding: 0.8rem;
  margin: 0.8rem 0;
}

#neu-reveal-schluessel-zeile {
  display: flex;
  gap: 0.4rem;
}

#neu-reveal-schluessel-feld {
  flex: 1;
  padding: 0.5rem 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--text);
  font-family: Consolas, monospace;
}

#neu-reveal-schluessel-kopieren-knopf {
  width: auto;
  padding: 0 0.9rem;
  margin-top: 0;
}

#abmelden-knopf {
  background: transparent;
  border: 1px solid var(--rand);
  color: var(--text-schwach);
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.8rem;
}

/* ---------- Kopfzeile: Avatar + Name/Status + Hauptnavigation ---------- */

#kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid var(--rand);
  flex-wrap: wrap;
}

#marke {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

#avatar-bild,
#avatar-platzhalter {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--flaeche-hell);
  border: 1px solid var(--rand);
}

#avatar-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text-schwach);
}

#marke-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

#nexling-name {
  font-weight: 600;
}

#statuszeile {
  font-size: 0.8rem;
  color: var(--text-schwach);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

#statuspunkt {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--text-schwach);
  display: inline-block;
}

#statuspunkt.online {
  background: var(--ok);
}

#statuspunkt.offline {
  background: var(--fehler);
}

#hauptnav {
  display: flex;
  gap: 0.4rem;
}

.nav-knopf {
  background: transparent;
  border: 1px solid var(--rand);
  color: var(--text-schwach);
  padding: 0.45rem 0.9rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
}

a.nav-knopf { text-decoration: none; display: inline-flex; align-items: center; }

.nav-knopf.aktiv {
  background: var(--akzent);
  color: #10131f;
  border-color: var(--akzent);
  font-weight: 600;
}

/* ---------- Ansichten (nur die aktive ist sichtbar) ---------- */

#inhalt {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.ansicht {
  display: none;
  height: 100%;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

.ansicht.aktiv {
  display: block;
}

.ansicht-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.ansicht-kopf h2 {
  margin: 0;
  font-size: 1.05rem;
}

.hinweistext {
  color: var(--text-schwach);
  line-height: 1.5;
  max-width: 46rem;
}

/* ---------- A Arbeitsplatz: verschiebbare Modul-Karten ---------- */

#werkbank {
  position: relative;
  height: 100%;
  min-height: 30rem;
}

.modul-karte {
  position: absolute;
  width: 320px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 0.6rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.modul-titelzeile {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rand);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: move;
  user-select: none;
  background: var(--flaeche-hell);
  border-radius: 0.6rem 0.6rem 0 0;
}

.modul-inhalt {
  padding: 0.75rem;
  overflow: auto;
}

/* Nexling-Chat-Modul */

#modul-chat .modul-inhalt {
  display: flex;
  flex-direction: column;
  height: 320px;
  padding: 0;
}

#chat-verlauf {
  flex: 1;
  overflow-y: auto;
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nachricht {
  max-width: 85%;
  padding: 0.45rem 0.65rem;
  border-radius: 0.6rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.9rem;
}

.nachricht.nutzer {
  align-self: flex-end;
  background: var(--akzent);
  color: #10131f;
}

.nachricht.nexling {
  align-self: flex-start;
  background: var(--flaeche-hell);
}

.nachricht.system {
  align-self: center;
  background: transparent;
  color: var(--text-schwach);
  font-size: 0.8rem;
  font-style: italic;
}

.nachricht.system.fehler {
  color: var(--fehler);
}

#chat-eingabezeile {
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  border-top: 1px solid var(--rand);
}

#chat-eingabe {
  flex: 1;
  padding: 0.45rem 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid var(--rand);
  background: var(--flaeche-hell);
  color: var(--text);
  font-size: 0.9rem;
  resize: none;
}

#chat-senden {
  padding: 0 0.9rem;
  border-radius: 0.4rem;
  border: none;
  background: var(--akzent);
  color: #10131f;
  font-weight: 600;
  cursor: pointer;
}

#chat-senden:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Status-Modul */

.status-zeile {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--rand);
  font-size: 0.85rem;
}

.status-zeile:last-child {
  border-bottom: none;
}

/* Uhrzeit-Modul */

#modul-uhr .modul-inhalt {
  text-align: center;
}

#uhrzeit-anzeige {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ---------- B Verlauf ---------- */

.verlauf-eintrag {
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  margin-bottom: 0.4rem;
  max-width: 46rem;
  white-space: pre-wrap;
  line-height: 1.4;
}

.verlauf-eintrag.user {
  background: var(--flaeche-hell);
}

.verlauf-eintrag.assistant {
  background: var(--flaeche);
  border: 1px solid var(--rand);
}

.verlauf-eintrag .rolle {
  display: block;
  font-size: 0.75rem;
  color: var(--text-schwach);
  margin-bottom: 0.2rem;
}

#verlauf-aktualisieren {
  background: transparent;
  border: 1px solid var(--rand);
  color: var(--text);
  padding: 0.4rem 0.8rem;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.85rem;
}

/* ---------- C Genesis-Welt: geteilte Orte ---------- */

#welt-aktualisieren {
  background: transparent;
  border: 1px solid var(--rand);
  color: var(--text);
  padding: 0.4rem 0.8rem;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.85rem;
}

#welt-standort-zeile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
  color: var(--text-schwach);
}

#welt-verlassen-knopf {
  background: transparent;
  border: 1px solid var(--rand);
  color: var(--text);
  padding: 0.3rem 0.7rem;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.8rem;
}

#welt-orte-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.welt-ort-karte {
  display: flex;
  flex-direction: column;
  width: 220px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 0.6rem;
  overflow: hidden;
}

/* ERWEITERUNG (Runde "Bilder fuer die Orte", 29.08.2026, sechzehnter
   Teil): das Bild sitzt OBEN in der Karte, fest im 16:9-Format (die
   Konzeptbilder selbst sind 16:9) - object-fit: cover statt Verzerrung,
   falls doch mal ein Bild mit anderem Seitenverhaeltnis dazukommt. Ohne
   Bild (ort.bild_url === null) faellt dieser Teil der Karte einfach weg,
   siehe app.js. */
.welt-ort-bild {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.welt-ort-inhalt {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem;
  flex: 1;
}

.welt-ort-karte button {
  margin-top: auto;
  padding: 0.4rem 0;
  border-radius: 0.4rem;
  border: none;
  background: var(--akzent);
  color: #10131f;
  font-weight: 600;
  cursor: pointer;
}

.welt-ort-karte button:disabled {
  background: var(--flaeche-hell);
  color: var(--text-schwach);
  cursor: default;
}

#welt-hier-bereich {
  max-width: 30rem;
  padding: 0.75rem 0.9rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 0.6rem;
}

#welt-hier-titel {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

#welt-hier-liste {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-schwach);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ERWEITERUNG (Runde "Gespraech am selben Ort: Chatraum pro Ort",
   siebzehnter Teil): GENAU dasselbe Grundgeruest wie #modul-chat/
   #chat-verlauf/#chat-eingabezeile im Arbeitsplatz-Chat-Modul, nur als
   eigener Block innerhalb der Genesis-Ansicht statt einer verschiebbaren
   Modul-Karte - die .nachricht-Klassen selbst sind bereits generisch
   (siehe oben) und werden 1:1 wiederverwendet. */
#welt-chat-bereich {
  max-width: 30rem;
  margin-top: 0.75rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 0.6rem;
  overflow: hidden;
}

#welt-chat-bereich h3 {
  margin: 0;
  padding: 0.75rem 0.9rem 0.5rem;
  font-size: 0.9rem;
}

#welt-chat-verlauf {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 16rem;
  overflow-y: auto;
  padding: 0 0.9rem 0.75rem;
}

.welt-chat-name {
  display: block;
  font-size: 0.75rem;
  color: var(--text-schwach);
  margin-bottom: 0.2rem;
}

#welt-chat-eingabezeile {
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  border-top: 1px solid var(--rand);
}

#welt-chat-eingabe {
  flex: 1;
  padding: 0.45rem 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid var(--rand);
  background: var(--flaeche-hell);
  color: var(--text);
  font-size: 0.9rem;
}

#welt-chat-senden-knopf {
  padding: 0 0.9rem;
  border-radius: 0.4rem;
  border: none;
  background: var(--akzent);
  color: #10131f;
  font-weight: 600;
  cursor: pointer;
}

/* SANIERUNG 14.10.2026: Login-Effekte (desktop/login_effekte.py -> /assets/ui/effekte.json) */
.login-effekte { position: absolute; inset: 0; overflow: hidden; pointer-events: none; container-type: size; z-index: 1; }
.login-effekte i { position: absolute; display: block; pointer-events: none; }
.effekt-glut, .effekt-flackern {
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--farbe) 0%, color-mix(in srgb, var(--farbe) 45%, transparent) 40%, transparent 100%);
  mix-blend-mode: screen;
  opacity: calc(var(--staerke) * 0.6);
}
.effekt-glut { animation: login-glut 3s ease-in-out infinite; }
.effekt-flackern { animation: login-flackern 1.9s steps(1) infinite; }
@keyframes login-glut {
  0%, 100% { opacity: calc(var(--staerke) * 0.35); transform: translate(-50%, -50%) scale(0.96); }
  50% { opacity: var(--staerke); transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes login-flackern {
  0% { opacity: calc(var(--staerke) * 0.9); } 13% { opacity: calc(var(--staerke) * 0.6); }
  27% { opacity: var(--staerke); } 41% { opacity: calc(var(--staerke) * 0.7); }
  56% { opacity: calc(var(--staerke) * 0.95); } 70% { opacity: calc(var(--staerke) * 0.55); }
  84% { opacity: calc(var(--staerke) * 0.85); }
}
.effekt-funke {
  width: 0.9%; aspect-ratio: 1; margin-left: -0.45%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--farbe) 35%, transparent 70%);
  mix-blend-mode: screen;
  animation: login-funke 8s linear infinite;
}
@keyframes login-funke {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  50% { transform: translate(6px, calc(var(--hoehe) * -0.5)) scale(1); opacity: 0.8; }
  85% { opacity: 0.9; }
  100% { transform: translate(-4px, calc(var(--hoehe) * -1)) scale(0.5); opacity: 0; }
}
.asset-taste, .asset-eingabe { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .login-effekte i { animation: none; } }

/* Login-Musik: an/aus + Lautstaerke, oben rechts */
#login-musik {
  position: fixed; top: 10px; right: 10px; z-index: 50;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px; border-radius: 999px;
  background: rgba(26, 15, 46, 0.78); border: 1px solid rgba(185, 140, 255, 0.35);
  backdrop-filter: blur(6px);
}
#login-musik button { background: none; border: 0; color: #d9b8ff; font-size: 17px; cursor: pointer; width: 28px; padding: 0; }
#login-musik input { width: 86px; accent-color: #b98cff; }
#login-musik.aus input { opacity: 0.4; }

/* SANIERUNG 14.10.2026: Ei + Schluepfen im Genesis-Resonanz-Reveal
   (Bilder: tools/nexlinge_ausschneiden.py -> /bilder/ei/<element>.png,
   /bilder/<art>/<element>.png) */
.ei-buehne {
  --aura: #b98cff;
  position: relative; height: 15rem; margin: -0.5rem auto 0.6rem;
  display: flex; align-items: flex-end; justify-content: center;
}
.ei-buehne[data-element="feuer"] { --aura: #ff6a2b; }
.ei-buehne[data-element="wasser"] { --aura: #7cc8ff; }
.ei-buehne[data-element="wind"] { --aura: #5ff0d0; }
.ei-buehne[data-element="blitz"] { --aura: #ffd84a; }
.ei-buehne[data-element="erde"] { --aura: #9fd06a; }
.schluepf-ei, .schluepf-nexling { position: absolute; bottom: 0; max-height: 100%; pointer-events: none; }
.schluepf-ei { height: 92%; filter: drop-shadow(0 0 14px var(--aura)); animation: ei-puls 2.2s ease-in-out infinite; transform-origin: 50% 85%; }
.schluepf-nexling, .schluepf-blitz, .schluepf-aura { opacity: 0; }
.schluepf-aura {
  position: absolute; left: 50%; bottom: 8%; width: 15rem; height: 11rem; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--aura), transparent); filter: blur(6px); mix-blend-mode: screen;
}
.schluepf-blitz {
  position: absolute; left: 50%; top: 45%; width: 1rem; height: 1rem; border-radius: 50%;
  transform: translate(-50%, -50%); background: radial-gradient(circle, #fff, var(--aura) 40%, transparent 70%);
}
@keyframes ei-puls {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px var(--aura)) brightness(1); }
  50% { transform: scale(1.035); filter: drop-shadow(0 0 22px var(--aura)) brightness(1.15); }
}
@keyframes ei-wackeln {
  0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 40% { transform: rotate(5deg); }
  60% { transform: rotate(-3deg); } 80% { transform: rotate(3deg); }
}
.phase-wackeln .schluepf-ei { animation: ei-wackeln 0.5s ease-in-out infinite, ei-puls 1s ease-in-out infinite; filter: drop-shadow(0 0 26px var(--aura)) brightness(1.25); }
.phase-schluepfen .schluepf-ei { animation: none; transition: opacity 0.5s, transform 0.5s; opacity: 0; transform: scale(1.25); }
.phase-schluepfen .schluepf-blitz { animation: schluepf-blitz 0.9s ease-out forwards; }
@keyframes schluepf-blitz {
  0% { opacity: 1; width: 1rem; height: 1rem; }
  60% { opacity: 0.9; width: 24rem; height: 24rem; }
  100% { opacity: 0; width: 28rem; height: 28rem; }
}
.phase-schluepfen .schluepf-nexling { animation: nexling-erscheint 0.9s 0.25s cubic-bezier(.2,1.4,.4,1) forwards; }
.phase-da .schluepf-ei { display: none; }
.phase-da .schluepf-nexling { opacity: 1; animation: nexling-schwebt 3.2s ease-in-out infinite; filter: drop-shadow(0 0 12px var(--aura)); }
.phase-da .schluepf-aura { animation: aura-puls 3.2s ease-in-out infinite; }
@keyframes nexling-erscheint { 0% { opacity: 0; transform: scale(0.3) translateY(20%); } 100% { opacity: 1; transform: scale(1); } }
@keyframes nexling-schwebt { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
@keyframes aura-puls { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.75; } }
#neu-schritt-reveal > :not(.ei-buehne) { transition: opacity 0.6s; }
#neu-schritt-reveal:not(.text-da) > :not(.ei-buehne) { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ei-buehne * { animation: none !important; } }

/* 25.10.2026: Alpha-Zeile unter dem Startschirm */
#alpha-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; width: min(97vw, 26rem);
  padding: 10px 12px; border-radius: 18px; background: rgba(28, 14, 52, 0.85); border: 1px solid rgba(255, 143, 189, 0.35);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4); font-size: 0.92rem; color: #eee6ff; }
@media (max-width: 520px) {
  #asset-overlay { justify-content: flex-start; padding-top: 3.7rem; gap: 0.6rem; }
  #alpha-zeile { flex-wrap: nowrap; justify-content: space-between; padding: 6px 6px 6px 12px; gap: 6px; font-size: 0.8rem; border-radius: 999px; }
  .az-knopf { min-height: 34px; padding: 0.25rem 0.75rem; white-space: nowrap; }
}
.az-text { white-space: nowrap; }
.az-knopf { display: inline-flex; align-items: center; min-height: 40px; padding: 0.4rem 0.95rem; border-radius: 999px; text-decoration: none;
  color: #eee6ff; background: rgba(199, 168, 255, 0.16); border: 1px solid rgba(199, 168, 255, 0.35); font-weight: 600; }
.az-knopf.rosa { color: #2a0f1f; background: linear-gradient(180deg, #ffc2da, #ff8fbd); border-color: #ffd6e7; }