/* NEURA — Auth-Design (Anmeldung und Bestätigung/zweiter Faktor).
   Verbindlich für alle NEURA-Apps. Diese Datei wird NICHT je App verändert:
   sie enthält alle Farben und Maße selbst und ist deshalb unabhängig von der
   style.css der jeweiligen App. Unterschiedlich ist einzig die Logodatei,
   die das Template einbindet.
   Grundlage: Bootstrap 5.3.x mit data-bs-theme="dark". */

/* ------------------------------------------------------------ Design-Tokens */
:root {
  --bg-primary:#222C35;   --bg-secondary:#2a3640;  --bg-card:#303d4a;
  --accent:#2B54F7;       --accent-hover:#53AAFB;  --accent-light:#5989C4;
  --text-primary:#E9EAED; --text-muted:#A4A6AF;    --border-color:#3a4a5a;
  --success:#60E6A5;      --danger:#FF006A;        --warning:#EFE800;
}

/* ------------------------------------------------------------- Seitengerüst */
html, body { height:100%; }
/* Scrollbalkenspur immer reservieren — sonst springt der zentrierte Block
   um die Balkenbreite, sobald eine Meldung die Seite länger macht. */
html { scrollbar-gutter:stable; overflow-x:hidden; overflow-y:scroll; }
body {
  display:flex; align-items:center; justify-content:center;
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  color:var(--text-primary);
  background-color:#222C35;
  background-image:
    radial-gradient(ellipse 900px 700px at 50% 40%, rgba(43,84,247,.18) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at 0% 100%, rgba(83,170,251,.12) 0%, transparent 55%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(139,92,246,.12) 0%, transparent 55%),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:auto, auto, auto, 40px 40px, 40px 40px;
  background-attachment:fixed;
}
/* Signatur unten rechts — Hausstandard, auf jeder Seite gleich. */
body::after {
  content:"Developed by Pascal Burger";
  position:fixed; bottom:3px; right:8px; font-size:9px;
  color:rgba(255,255,255,.25); font-style:italic; letter-spacing:0.3px;
  pointer-events:none; z-index:9999;
}
@media print { body::after { display:none; } }

/* Der gesamte Block wird um 20 % vergrößert — ohne ihn wirkt die Maske auf
   großen Bildschirmen verloren. Gilt für Anmeldung und Bestätigung gleich. */
.login-zoom { zoom:1.2; }

/* --------------------------------------------------------------- Wortmarke */
.nc-wordmark-login {
  width:420px; max-width:95%; display:block; margin:0 auto;
  /* Macht jedes Logo rein weiß — egal ob die Quelldatei farbig, schwarz oder
     weiß ist. Deshalb in allen Apps identisch anwendbar. */
  filter:brightness(0) invert(1);
}
.login-subtitle {
  font-size:.9rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--accent-light);
}

/* -------------------------------------------------------------------- Karte */
.card.bg-card {
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%), var(--bg-card);
  border:1px solid var(--border-color); position:relative;
  transition:box-shadow .18s, transform .18s;
}
.card.bg-card::before {
  content:""; position:absolute; top:0; left:12px; right:12px; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0; transition:opacity .18s;
}
.card.bg-card:hover::before { opacity:1; }
.card.bg-card:hover { box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(43,84,247,.18); }

/* ------------------------------------------------------------ Kopfzone Karte */
.name-zone {
  border:2px dashed var(--bs-secondary, #6c757d); border-radius:1rem;
  padding:2.5rem 2rem; cursor:pointer; text-align:center;
  transition:border-color .2s, background .2s;
}
.name-zone:hover, .name-zone.active {
  border-color:var(--accent); background:rgba(43,84,247,.05);
}
.name-icon { font-size:3.5rem; color:var(--accent); }

/* ------------------------------------------------------------ Eingabefelder */
.form-control {
  background-color:var(--bg-secondary); border-color:var(--border-color);
  color:var(--text-primary);
}
.form-control::placeholder { color:var(--text-muted); opacity:1; }
.form-control:focus {
  background-color:var(--bg-secondary); color:var(--text-primary);
  border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(43,84,247,.25);
}
/* Codefeld der Bestätigung — nur hier, nicht bei der Anmeldung. */
#codeInput { font-size:1.6rem; letter-spacing:.45rem; text-align:center; }

/* ------------------------------------------------------------------ Buttons */
.btn-accent { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-accent:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; }

/* ------------------------------------------------------------------- Meldung */
.alert-danger  { background:rgba(255,0,106,.15); border:1px solid rgba(255,0,106,.3); color:#ffb3d1; }
.alert-success { background:rgba(96,230,165,.15); border:1px solid rgba(96,230,165,.3); color:#bff5dd; }
.alert-warning { background:rgba(239,232,0,.15);  border:1px solid rgba(239,232,0,.3);  color:#f4f0a3; }

/* ---------------------------------------------------------------- Fußbereich */
.powered-by { letter-spacing:1px; }
.powered-by-logo { height:32px; }