/* Cinematic Glass – Basis, Aurora, Glas, Buttons, Modals, Toasts, Login */
:root {
  --bg: #0b0620;
  --card: rgba(255, 255, 255, 0.06);
  --text: #e2e8f0;
  --muted: #94a3b8;
  --accent: #38bdf8;
  --ok: #22c55e;
  --off: #64748b;
  --busy: #f59e0b;
  --warn: #f97316;
  --crit: #ef4444;
  --radius: 24px;
  --gap: 20px;

  --violet: #a78bfa;
  --teal: #2dd4bf;
  --pink: #f472b6;
  --tile-glow: rgba(255, 255, 255, 0.03);
  --ease-tilt: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p { margin: 0; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85em; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Aurora (Animation 1: Aurora-Drift) --------------------------------------- */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 15% 10%, #2a0e4a 0%, transparent 70%),
    radial-gradient(ellipse 70% 60% at 90% 85%, #0d2a4a 0%, transparent 70%),
    radial-gradient(circle at 50% 50%, #0b0620 0%, #0b0620 100%);
}
.aurora span {
  position: absolute;
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .5;
  will-change: transform;
}
.aurora .b1 { background: #7c3aed; top: -20vmax; left: -15vmax; animation: aurora-drift-1 52s ease-in-out infinite alternate; }
.aurora .b2 { background: #db2777; top: 30vh; right: -25vmax; animation: aurora-drift-2 44s ease-in-out infinite alternate; }
.aurora .b3 { background: #0d9488; bottom: -30vmax; left: 15vw; animation: aurora-drift-3 58s ease-in-out infinite alternate; }
@keyframes aurora-drift-1 { to { transform: translate(30vw, 25vh) scale(1.15); } }
@keyframes aurora-drift-2 { to { transform: translate(-35vw, -20vh) scale(.9); } }
@keyframes aurora-drift-3 { to { transform: translate(25vw, -30vh) scale(1.1); } }

/* --- Glaskarte ------------------------------------------------------------------ */
.glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 80px var(--tile-glow) inset;
}

/* --- Buttons & Formulare (min. 44 px, :active-Feedback ohne Bewegung) -------------- */
.btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.btn:hover { background: rgba(255, 255, 255, 0.12); }
.btn:active { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: rgba(56, 189, 248, 0.22); border-color: rgba(56, 189, 248, 0.5); }
.btn-primary:hover { background: rgba(56, 189, 248, 0.32); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); font-weight: 500; }
.btn-ghost:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.btn-danger { color: #fca5a5; }
.btn-danger.btn-primary { background: rgba(239, 68, 68, 0.22); border-color: rgba(239, 68, 68, 0.55); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

label { display: grid; gap: 6px; font-size: .9rem; color: var(--muted); }
input, textarea {
  min-height: 44px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font: inherit;
}
input[type="color"] { padding: 4px; cursor: pointer; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); }
input:read-only { opacity: .6; }
textarea { resize: vertical; min-height: 80px; }

/* --- Modals (native <dialog>) ------------------------------------------------------ */
dialog.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 28px;
  color: var(--text);
  overflow-y: auto;
  background: linear-gradient(135deg, rgba(40, 24, 72, 0.92), rgba(16, 12, 40, 0.92));
}
dialog.modal[open] { animation: card-in 300ms ease-out; }
dialog.modal::backdrop { background: rgba(5, 3, 16, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal h2 { font-size: 1.35rem; margin-bottom: 18px; }
.modal form { display: grid; gap: 14px; }
.modal .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.modal .form-error { color: #fca5a5; min-height: 1.5em; font-size: .9rem; }
.modal p { color: var(--muted); }

/* --- Toasts ------------------------------------------------------------------------ */
.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
}
.toast {
  padding: 14px 18px;
  border-radius: 16px;
  border-left: 4px solid var(--ok);
  animation: card-in 300ms ease-out;
}
.toast.error { border-left-color: var(--crit); }

/* --- Login -------------------------------------------------------------------------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login {
  width: min(420px, 100%);
  padding: 36px 32px;
  display: grid;
  gap: 18px;
  animation: card-in 300ms ease-out;
}
.login h1 { font-size: 1.6rem; }
.login .form-error { color: #fca5a5; min-height: 1.5em; font-size: .9rem; }

/* --- 2FA-Einrichtung --------------------------------------------------------------- */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.tfa { width: min(480px, 100%); }
.tfa section, .tfa form { display: grid; gap: 14px; }
.tfa-qr { width: 240px; height: 240px; justify-self: center; background: #fff; border-radius: 16px; padding: 8px; }
.tfa code { overflow-wrap: anywhere; }
.tfa-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin: 0; padding-left: 1.4em; font-variant-numeric: tabular-nums; }

/* --- Animationen 4 + 5 (Status-Puls, Einblenden) ------------------------------------ */
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulse, var(--ok)) 55%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pulse, var(--ok)) 0%, transparent); }
}
@keyframes crit-glow {
  0%, 100% { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(239, 68, 68, 0.35) inset, 0 0 24px rgba(239, 68, 68, 0.15); }
  50% { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(239, 68, 68, 0.7) inset, 0 0 42px rgba(239, 68, 68, 0.35); }
}
@keyframes card-in {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 767px) {
  dialog.modal { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: auto 0 0; border-radius: var(--radius) var(--radius) 0 0; padding: 22px 16px; }
  .modal .row { grid-template-columns: 1fr; }
  .toasts { right: 16px; bottom: 16px; }
}