/* ============================================================
   NEMESIS – Sprachumschaltung
   Auswahlfeld für Kopfleiste und Fußzeile + Entschlüsselungs-Animation
   ============================================================ */

/* --- Auswahlfeld ------------------------------------------------ */
.sprache{ position:relative; display:inline-block; }
.sprache__knopf{
  display:inline-flex; align-items:center; gap:0.45rem;
  min-height:44px; padding:0.45rem 0.75rem;
  font:600 0.68rem/1 var(--f-mono); letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ash); background:transparent; border:1px solid var(--line);
  cursor:pointer; transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.sprache__knopf:hover{ color:var(--bone); border-color:var(--ash-dim); }
.sprache__knopf:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.sprache__knopf[aria-expanded="true"]{ color:var(--bone); background:var(--panel); border-color:var(--ash-dim); }
.sprache__globus{ width:0.95rem; height:0.95rem; flex:none; color:var(--ember); }
.sprache__globus circle, .sprache__globus ellipse, .sprache__globus path{ fill:none; stroke:currentColor; stroke-width:1.6; }
.sprache__globus .sp-ring{ transform-origin:12px 12px; animation:spDreh 14s linear infinite; }
.sprache__pfeil{ width:0.55rem; height:0.55rem; flex:none; transition:transform .2s ease; }
.sprache__knopf[aria-expanded="true"] .sprache__pfeil{ transform:rotate(180deg); }

.sprache__liste{
  position:absolute; right:0; z-index:60; min-width:12.5rem; margin-top:0.35rem;
  list-style:none; padding:0.3rem; background:#0c0b0e; border:1px solid var(--line);
  box-shadow:0 18px 42px rgba(0,0,0,0.6);
}
.sprache--oben .sprache__liste{ top:auto; bottom:100%; margin:0 0 0.35rem; }
.sprache__liste[hidden]{ display:none; }
.sprache__eintrag{
  display:flex; align-items:center; gap:0.6rem; width:100%; min-height:44px;
  padding:0.5rem 0.65rem; text-align:left; background:transparent; border:0; cursor:pointer;
  font:500 0.85rem/1.2 var(--f-body); color:var(--ash);
  transition:color .15s ease, background .15s ease;
}
.sprache__eintrag:hover{ color:var(--bone); background:var(--panel); }
.sprache__eintrag:focus-visible{ outline:2px solid var(--ember); outline-offset:-2px; }
.sprache__eintrag[aria-current="true"]{ color:var(--bone); }
.sprache__eintrag[aria-current="true"]::after{ content:"●"; margin-left:auto; color:var(--blood); font-size:0.6rem; }
.sprache__kuerzel{
  flex:none; width:2.1rem; font:600 0.62rem/1 var(--f-mono); letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ash-dim);
}
.sprache__eintrag:hover .sprache__kuerzel, .sprache__eintrag[aria-current="true"] .sprache__kuerzel{ color:var(--ember); }

/* Platzierung in der Fußzeile */
.fuss-sprache{ margin-top:var(--sp-2); }

@keyframes spDreh{ to{ transform:rotate(360deg); } }

/* --- Entschlüsselungs-Animation --------------------------------- */
.entschluessel{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, rgba(10,9,12,0.86) 0%, rgba(5,5,6,0.97) 70%);
  opacity:0; transition:opacity .28s ease;
  display:flex; align-items:center; justify-content:center;
}
.entschluessel[hidden]{ display:none; }
.entschluessel.an{ opacity:1; }

/* Zeichenregen im Hintergrund */
.entschluessel__regen{ position:absolute; inset:0; overflow:hidden; opacity:0.5; }
.entschluessel__spalte{
  position:absolute; top:-14em; display:block; width:1ch;
  font:600 0.78rem/1.15 var(--f-mono); color:var(--term);
  text-shadow:0 0 8px rgba(75,224,138,0.55); white-space:pre;
  animation:regenFall linear infinite;
}
@keyframes regenFall{ from{ transform:translateY(-10%); } to{ transform:translateY(150vh); } }

/* Scanbalken */
.entschluessel__scan{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--ember) 18%, #ffd7cf 50%, var(--ember) 82%, transparent);
  box-shadow:0 0 26px 6px rgba(226,64,47,0.55);
  animation:scanLauf 1.55s cubic-bezier(.5,0,.5,1) infinite;
}
.entschluessel__scan::after{
  content:""; position:absolute; left:0; right:0; top:0; height:22vh;
  background:linear-gradient(180deg, rgba(226,64,47,0.16), transparent);
}
@keyframes scanLauf{ 0%{ top:-4%; } 100%{ top:104%; } }

/* Textkonsole in der Mitte */
.entschluessel__box{
  position:relative; z-index:2; width:min(30rem, calc(100vw - 2.5rem));
  padding:1.3rem 1.5rem 1.5rem;
  background:rgba(10,9,12,0.94); border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(226,64,47,0.16), 0 30px 70px rgba(0,0,0,0.65);
}
.entschluessel__kopf{
  display:flex; align-items:center; gap:0.5rem; margin-bottom:0.9rem;
  font:600 0.62rem/1 var(--f-mono); letter-spacing:0.18em; text-transform:uppercase; color:var(--ash-dim);
}
.entschluessel__punkt{ width:7px; height:7px; background:var(--blood); animation:punktBlink 0.9s steps(2) infinite; }
@keyframes punktBlink{ 50%{ opacity:0.25; } }
.entschluessel__ziel{ margin-left:auto; color:var(--ember); }
.entschluessel__zeilen{ margin:0; font:500 0.76rem/1.75 var(--f-mono); color:var(--term); white-space:pre-wrap; word-break:break-word; min-height:6.6rem; }
.entschluessel__zeilen b{ color:var(--bone); font-weight:600; }
.entschluessel__zeilen i{ color:var(--ash-dim); font-style:normal; }
.entschluessel__balken{
  position:relative; height:3px; margin-top:1rem; background:#1c1b20; overflow:hidden;
}
.entschluessel__balken span{ position:absolute; inset:0 100% 0 0; background:var(--ember); transition:right .2s linear; }
.entschluessel__prozent{ margin-top:0.5rem; font:600 0.62rem/1 var(--f-mono); letter-spacing:0.14em; color:var(--ash-dim); }

/* Zeichen, die sich gerade neu einrastern */
.i18n-wirbel{ color:var(--term) !important; text-shadow:0 0 6px rgba(75,224,138,0.5); }

/* Kopfzeile des Blatts und Schleier gibt es nur auf schmalen Bildschirmen.
   Diese beiden Grundregeln müssen vor dem Bereich unten stehen, sonst
   überstimmen sie ihn. */
.sprache__titel{ display:none; }
.sprache-schleier{ display:none; }

@media (max-width: 980px){
  /* Auf schmalen Bildschirmen klappt die Auswahl als Blatt von unten auf.
     Ein Klappmenü am Knopf würde je nach Platzierung aus dem Bild laufen. */
  .sprache__liste,
  .sprache--oben .sprache__liste{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    z-index:9998; min-width:0; margin:0; max-height:min(72vh, 34rem); overflow-y:auto;
    border-left:0; border-right:0; border-bottom:0; border-top:1px solid var(--line);
    padding:0.35rem 0.35rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -22px 60px rgba(0,0,0,0.75);
    animation:blattAuf .24s cubic-bezier(.2,.7,.3,1) both;
    -webkit-overflow-scrolling:touch;
  }
  .sprache__eintrag{ min-height:54px; padding:0.7rem 0.85rem; font-size:0.98rem; }
  .sprache__kuerzel{ width:2.6rem; font-size:0.68rem; }
  .sprache__titel{
    display:flex; align-items:center; justify-content:space-between;
    padding:0.85rem 0.85rem 0.7rem; border-bottom:1px solid var(--line); margin-bottom:0.25rem;
    font:600 0.66rem/1 var(--f-mono); letter-spacing:0.18em; text-transform:uppercase; color:var(--ash-dim);
  }
  .sprache__titel span:last-child{ color:var(--ember); }

  .sprache-schleier{ position:fixed; inset:0; z-index:9997; background:rgba(5,5,6,0.72); backdrop-filter:blur(2px); }
  .sprache-schleier[hidden]{ display:none; }

  .entschluessel__box{ padding:1.05rem 1.1rem 1.2rem; }
  .entschluessel__zeilen{ font-size:0.7rem; min-height:6rem; }
}

@keyframes blattAuf{ from{ transform:translateY(100%); } to{ transform:none; } }

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

@media (prefers-reduced-motion: reduce){
  .sprache__globus .sp-ring{ animation:none; }
  .entschluessel__regen{ display:none; }
  .entschluessel__scan{ animation:none; top:50%; }
  .entschluessel__punkt{ animation:none; }
  .i18n-wirbel{ text-shadow:none; }
}

/* --- Vorrang der deutschen Fassung ------------------------------
   Erscheint nur, wenn oben eine andere Sprache eingestellt ist.
   sprache.js setzt dazu das lang-Attribut auf <html>. */
.nur-fremdsprache{
  margin:var(--sp-2) 0 var(--sp-3); padding:0.75rem 0.9rem;
  border-left:3px solid var(--blood); background:var(--panel);
  font-size:0.86rem; line-height:1.5; color:var(--ash);
}
html[lang="de"] .nur-fremdsprache{ display:none; }