/* ========== Reset & Basis ========== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: system-ui, sans-serif;
  background: #0a0a0a url('hintergrund.jpg') center/cover no-repeat;
  color: white;
  overflow: hidden;
}

/* ========== Hintergrund-Overlay ========== */
.overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

/* ========== Layout-Zentrierung (als Referenzrahmen für absolute Positionierung) ========== */
.inhalt {
  position: relative; /* WICHTIG: Referenzpunkt für absolute Positionierung */
  z-index: 10;
  display: block;
  height: 100%;
  width: 100%; /* Sicherstellen, dass .inhalt den gesamten Platz einnimmt */
}

#passkeyInput {
  pointer-events: auto;
  line-height: 1.2;
  vertical-align: middle;
  width: 90vw;
  max-width: 360px;
  padding: 1rem 1.2rem;
  font-size: 1rem;
  border: none;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: white;
  caret-color: white;
  outline: none;
  box-shadow:
    -30px 30px 60px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);

  /* ABSOLUTE ZENTRIERUNG FÜR INPUT */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Kombinierte Transitions für #passkeyInput */
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.4s cubic-bezier(.55,.06,.68,.19),
    visibility 0.4s cubic-bezier(.55,.06,.68,.19);
}

#passkeyInput:focus {
  background-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.15),
    0 0 12px rgba(255, 255, 255, 0.2),
    0 0 24px rgba(255, 255, 255, 0.25);
  outline: none;
}

/* Placeholder */
#passkeyInput::placeholder {
  color: #ccc;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

/* ========== Fehleranzeige ========== */
.error {
  color: red;
  font-size: 0.95rem;
  text-align: center;

  /* ABSOLUTE POSITIONIERUNG FÜR FEHLERMELDUNG */
  position: absolute;
  top: calc(50% + 75px); /* 50% der Höhe + halbe Höhe des 150px Status-Containers (75px) + etwas Abstand */
  left: 50%;
  transform: translateX(-50%); /* Nur horizontal zentrieren */
  width: 90vw; /* Damit der Text umbricht */
  max-width: 360px; /* Gleiche maximale Breite wie Input */

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.error.show {
  opacity: 1;
  visibility: visible;
}

.error.hide {
  opacity: 0;
  visibility: hidden;
}


/* ========== Begrüßungs-Overlay ========== */
#welcomeOverlay {
  position: fixed;
  inset: 0;
  background: #111;
  color: white;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 999;
  padding: 2rem;
  pointer-events: none;
}

#welcomeOverlay.active {
  opacity: 1;
  visibility: visible;
}

/* ========== CSS Loader und Status Container ========== */
.status-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px; /* Größe des Containers für Loader/Haken/Kreuz */
  height: 150px; /* Größe des Containers */

  /* ABSOLUTE ZENTRIERUNG FÜR STATUS CONTAINER */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  opacity: 0; /* Standardmäßig unsichtbar */
  visibility: hidden; /* Standardmäßig unsichtbar */
  transition:
    opacity 0.4s cubic-bezier(.55,.06,.68,.19),
    visibility 0.4s cubic-bezier(.55,.06,.68,.19); /* Animation für Ein-/Ausblenden */

  /* Font-Größe für Emojis im Status-Container */
  font-size: 100px;
  color: white; /* Standardfarbe für Loader und Häkchentext (falls kein Icon) */
  line-height: 1; /* WICHTIG: Stellt sicher, dass das Emoji vertikal zentriert ist */
}

/* Spezifische Farbe für das Fehler-Kreuz-Emoji */
.status-container.error-emoji {
  color: red; /* Macht das X-Emoji rot */
}
/* Spezifische Farbe für das Erfolg-Häkchen-Emoji */
.status-container.success-emoji {
  color: #4CAF50; /* Grüne Farbe für das Häkchen-Emoji */
}

/* ========== Klassen zum Ein-/Ausblenden ========== */
#passkeyInput.hide,
.status-container.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#passkeyInput.show,
.status-container.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* NEU: Animation für das smoothere Erscheinen der Emojis */
@keyframes emojiFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.8); /* Startet etwas kleiner */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* Endet bei voller Größe */
  }
}

/* NEU: Wende die Animation auf den Inhalt an, wenn der Container sichtbar ist */
.status-container.show > .emoji-content { /* Eine neue Klasse für den Emoji-Wrapper im JS */
  animation: emojiFadeIn 0.3s ease-out forwards; /* Kurze, schnelle Animation */
}


/* ========== CSS Loader Animation (Spinner) ========== */
.loader {
  width: 80px;
  height: 80px;
  border: 8px solid rgba(255, 255, 255, 0.2);
  border-top: 8px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Die alten .success CSS-Regeln wurden entfernt, da wir jetzt das Emoji direkt stylen */