/* Gerätebindung + Face ID (Jeff/Piotr, 09.10.2026). Nur Klassen (CSP), Farben aus app.css. */

.geraet-schicht {
  position: fixed;
  inset: 0;
  z-index: 150;                       /* über der Anmeldung (100), unter der Schutzdecke (2000) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background:
    radial-gradient(70vw 70vw at 50% 18%, rgba(0, 145, 216, 0.20), transparent 62%),
    linear-gradient(180deg, var(--color-bg), var(--color-bg-deep));
}
.geraet-schicht.geraet-gesperrt {
  background:
    radial-gradient(70vw 70vw at 50% 18%, var(--rot-hauch), transparent 62%),
    linear-gradient(180deg, var(--color-bg), var(--color-bg-deep));
}

.geraet-karte {
  width: 100%;
  max-width: 360px;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.85rem;
  padding: 2rem 1.5rem 1.4rem;
  background: linear-gradient(165deg, var(--color-surface-2), var(--color-surface) 62%);
  border: 1px solid var(--color-surface-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: anmelden-auftritt var(--duration-slow) var(--ease-out-expo) both;
}

.geraet-zeichen {
  width: 64px;
  height: 64px;
  fill: none;
  stroke: var(--color-accent-bright);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 14px var(--accent-glow));
}
.geraet-gesperrt .geraet-zeichen { stroke: var(--rot); filter: none; }
.geraet-puls {
  fill: var(--accent-faint);
  transform-origin: 24px 21px;
  animation: geraet-puls 2.4s var(--ease-out-expo) infinite;
}
.geraet-gesperrt .geraet-puls { animation: none; fill: var(--rot-hauch); }
@keyframes geraet-puls {
  0%   { transform: scale(0.7); opacity: 0.4; }
  50%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.7); opacity: 0.4; }
}

.geraet-titel {
  margin: 0.2rem 0 0;
  font: 600 1.2rem/1.25 var(--font-display);
  letter-spacing: 0.01em;
  color: var(--color-text);
}
.geraet-text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Der Code ist das, was Piotr am Telefon vorliest: groß, Monoschrift, gesperrt. */
.geraet-code-zeile {
  margin: 0.35rem 0 0.1rem;
  display: grid;
  gap: 0.35rem;
  justify-items: center;
}
.geraet-code-titel {
  font: 500 0.66rem/1 var(--font-mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.geraet-code {
  font: 500 2.1rem/1 var(--font-mono);
  letter-spacing: 0.32em;
  padding: 0.55rem 0.4rem 0.55rem 0.72rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--accent-faint);
  color: var(--color-text);
  -webkit-user-select: all;
  user-select: all;
}
.geraet-hinweis {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-dim);
}
.geraet-karte .knopf-voll { margin-top: 0.4rem; }

/* Leiser Nebenknopf (Abmelden / Zurück / Später) - Glas statt Grau. */
.geraet-nebenknopf {
  margin-top: 0.3rem;
  min-height: 44px;
  padding: 0.5rem 1.4rem;
  font: 500 0.82rem/1 var(--font-body);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  background: rgba(238, 244, 251, 0.04);
  border: 1px solid var(--color-surface-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease,
              background var(--duration-fast, 150ms) ease;
}
.geraet-nebenknopf:hover,
.geraet-nebenknopf:focus-visible {
  color: var(--color-text);
  border-color: var(--accent-line);
  background: var(--accent-faint);
  outline: none;
}
.geraet-nebenknopf:active { transform: translateY(1px); }

/* Face-ID-Knopf auf der Anmeldekarte */
.passkey-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.passkey-zeichen {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.passkey-hinweis {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-text-dim);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .geraet-karte, .geraet-puls { animation: none; }
}