/* Code-Eingabe mit Animation für den zweiten Faktor (js/code_eingabe.js, Sebastian 05.11.2026). Farben nur aus den Variablen von app.css,
   damit jede Marke (GMS, BG, Nexus, Marketing, Members) ihr eigenes Leuchten bekommt; hell und dunkel ohne eigene Regeln.
   Zustände an .code-eingabe[data-zustand]: leer, tippt, prueft (Welle + Drehen), richtig (grün, Haken), falsch (rot, Wackeln). */

.code-eingabe { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; margin: 4px 0 2px; }

/* Siegel: Glas-Quadrat mit Schloss; beim Prüfen dreht sich das Schloss wie eine Münze und ein Lichtring läuft herum */
.code-siegel { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; perspective: 240px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--hg-2) 88%, transparent), color-mix(in srgb, var(--hg-3) 70%, transparent));
  border: 1px solid var(--linie-stark); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: border-color 0.3s, box-shadow 0.3s; }
.code-siegel .ic { position: absolute; width: 26px; height: 26px; stroke-width: 1.9; transition: opacity 0.25s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.code-siegel .code-schloss { color: var(--akzent); }
.code-siegel .code-haken { color: var(--gruen); opacity: 0; transform: scale(0.4); stroke-width: 2.4; }
.code-ring { position: absolute; inset: -4px; border-radius: 21px; padding: 2px; opacity: 0; transition: opacity 0.3s;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--akzent) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* Kästchen; darüber liegt das echte Feld (unsichtbar, nimmt Tippen, Einfügen und Autofill an) */
.code-reihe { position: relative; width: 100%; max-width: 372px; }
.code-kaesten { display: flex; justify-content: center; gap: clamp(6px, 2vw, 10px); perspective: 600px; }
.code-kasten { position: relative; flex: 1 1 0; min-width: 0; max-width: 54px; aspect-ratio: 4 / 5; display: grid; place-items: center;
  border-radius: 14px; border: 1px solid var(--linie-stark);
  background: linear-gradient(170deg, color-mix(in srgb, var(--hg-2) 92%, transparent), color-mix(in srgb, var(--hg-3) 80%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(0, 0, 0, 0.06);
  font-size: clamp(20px, 6vw, 26px); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s, color 0.3s; }
.code-kasten.voll { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie-stark)); }
.code-kasten.aktiv { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hg-stark), 0 0 18px color-mix(in srgb, var(--akzent) 35%, transparent); }
/* Schreibmarke im aktiven, leeren Kästchen */
.code-kasten.aktiv:not(.voll)::after { content: ""; width: 2px; height: 42%; border-radius: 1px; background: var(--akzent); animation: code-marke 1.05s steps(1) infinite; }
.code-kasten.neu .code-ziffer { animation: code-ziffer 0.26s cubic-bezier(0.34, 1.56, 0.64, 1); }

.code-eingabe .code-echt { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; outline: none;
  background: transparent; box-shadow: none !important; color: transparent; caret-color: transparent; opacity: 0; cursor: text;
  font-size: 16px !important; letter-spacing: 0; text-indent: -9999px; }
.code-eingabe .code-echt::selection { background: transparent; }

/* Prüfen: die Kästchen drehen sich einmal als Welle, danach pulsieren sie leise; Schloss dreht sich, Ring läuft */
.code-eingabe[data-zustand="prueft"] .code-kasten { animation: code-welle 0.62s cubic-bezier(0.45, 0, 0.2, 1) calc(var(--i) * 40ms) both,
  code-puls 1.2s ease-in-out calc(0.62s + var(--i) * 40ms) infinite; border-color: var(--akzent); }
.code-eingabe[data-zustand="prueft"] .code-schloss { animation: code-muenze 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.code-eingabe[data-zustand="prueft"] .code-ring { opacity: 1; animation: drehen 0.9s linear infinite; }

/* Richtig: grün von links nach rechts, Schloss wird zum Haken */
.code-eingabe[data-zustand="richtig"] .code-kasten { border-color: var(--gruen); background: var(--gruen-hg); color: var(--gruen-text);
  transition-delay: calc(var(--i) * 40ms); animation: code-hupf 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 40ms) both; }
.code-eingabe[data-zustand="richtig"] .code-siegel { border-color: var(--gruen); box-shadow: 0 0 0 4px var(--gruen-hg), 0 6px 18px rgba(0, 0, 0, 0.12); }
.code-eingabe[data-zustand="richtig"] .code-schloss { opacity: 0; transform: scale(0.4) rotate(-20deg); }
.code-eingabe[data-zustand="richtig"] .code-haken { opacity: 1; transform: none; }

/* Falsch: rot und kurzes Wackeln (Feld wird danach geleert, der Fehlertext steht darunter) */
.code-eingabe[data-zustand="falsch"] .code-kasten { border-color: var(--rot); background: var(--rot-hg); color: var(--rot-text); }
.code-eingabe[data-zustand="falsch"] .code-kaesten,
.code-eingabe[data-zustand="falsch"] .code-siegel { animation: code-wackeln 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
.code-eingabe[data-zustand="falsch"] .code-siegel { border-color: var(--rot); }
.code-eingabe[data-zustand="falsch"] .code-schloss { color: var(--rot); }

@keyframes code-ziffer { from { transform: scale(0.6) translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes code-marke { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes code-welle { 0% { transform: rotateY(0) translateY(0); } 45% { transform: rotateY(180deg) translateY(-6px); } 100% { transform: rotateY(360deg) translateY(0); } }
@keyframes code-puls { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px var(--akzent-hg-stark); } }
@keyframes code-muenze { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes code-hupf { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes code-wackeln { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }

/* GMS Plattform (Lena für Sebastian 06.11.2026): Einblenden wie das Dashboard (backwards, damit spätere transforms greifen) und im
   dunklen Modus leuchtende Symbole nach der Designregel „Leuchtende Diagramme und Zahlen“ (Sebastian 05.11.2026, app.css) */
.code-eingabe { animation: code-ein 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.code-eingabe .code-kasten { animation: code-ein 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.1s + var(--i) * 45ms) backwards; }
@keyframes code-ein { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.feldgruppe .code-eingabe { align-items: flex-start; }
.feldgruppe .code-kaesten { justify-content: flex-start; }
:root[data-theme="dark"] .code-siegel .code-schloss { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--akzent) 70%, transparent)); }
:root[data-theme="dark"] .code-eingabe[data-zustand="richtig"] .code-haken { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gruen) 70%, transparent)); }
:root[data-theme="dark"] .code-eingabe[data-zustand="richtig"] .code-kasten { text-shadow: 0 0 12px color-mix(in srgb, var(--gruen) 55%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .code-siegel .code-schloss { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--akzent) 70%, transparent)); }
  :root:not([data-theme="light"]) .code-eingabe[data-zustand="richtig"] .code-haken { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gruen) 70%, transparent)); }
  :root:not([data-theme="light"]) .code-eingabe[data-zustand="richtig"] .code-kasten { text-shadow: 0 0 12px color-mix(in srgb, var(--gruen) 55%, transparent); }
}

/* Weniger Bewegung: dieselben Zustände, nur Farben */
@media (prefers-reduced-motion: reduce) {
  .code-eingabe, .code-eingabe *, .code-eingabe *::after { animation: none !important; transition: none !important; }
  .code-eingabe[data-zustand="prueft"] .code-ring { opacity: 1; background: var(--akzent); }
}