/* ============================================================================
   Naberion · Anmeldemaske. EIN Entwurf für alle drei Türen (ERP, Konsole,
   Marktplatz) — gleiche Maske, gleiche Maße, gleiche Farben. Wer hier etwas
   ändert, ändert es in allen dreien nach.

   Farbstand „Mitternacht" (Variante 35 aus der Farbprobe vom 16.09.2026):
   linker Verlauf #021f42 → #00081d, Glasfläche Weiß 20 %, Marke weiß,
   Knopf im Marken-Orange #eb5202. Maße sind Florians eingestellter Stand.
   Keine Fremdquellen: Bild und Schrift liegen im Projekt.
   ============================================================================ */

@font-face{
  font-family:'Exo 2 Naberion';
  src:url('exo2-300.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}

.nb-login{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,6vw,90px);
  overflow:hidden; background:#0b0d10;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:13px; color:#fff;
}
/* Der Rabe. Ausschnitt und Filter sind eingestellt, nicht geraten — bei anderen
   Werten rutscht der Kopf hinter die Karte. */
.nb-login-wall{
  position:absolute; inset:0;
  background:url('naberion-rabe.jpg') 49% 50%/cover no-repeat;
  transform:scale(1.04);
  filter:blur(.5px) brightness(.95) saturate(.98) contrast(1.16);
}
.nb-login-vig{
  position:absolute; inset:0; pointer-events:none; opacity:.74;
  background:radial-gradient(118% 88% at 50% 46%,transparent 38%,#000 100%);
}

.nb-login-card{
  position:relative;
  width:min(680px,100%); min-height:410px;
  display:grid; grid-template-columns:50% 1fr;
  border-radius:4px; overflow:hidden;
  -webkit-backdrop-filter:blur(17px) saturate(1.3);
  backdrop-filter:blur(17px) saturate(1.3);
  box-shadow:0 12px 47px rgba(0,0,0,.57);
}

/* ── linke Spalte ─────────────────────────────────────────────────────────── */
.nb-login-left{
  background:linear-gradient(155deg,rgba(2,31,66,.44),rgba(0,8,29,.87));
  display:flex; flex-direction:column; justify-content:space-between; min-width:0;
}
.nb-login-left-in{
  flex:1; padding:26px; display:flex; flex-direction:column; justify-content:center; gap:13px;
}
.nb-login-company{
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; opacity:.82;
}
.nb-login-title{
  margin:5px 0 4px;
  font-family:'Exo 2 Naberion','Exo 2',system-ui,sans-serif;
  font-size:34px; font-weight:300; letter-spacing:.06em; text-transform:uppercase;
  line-height:1.02;
}
.nb-login-claim{ margin:0; font-size:13px; font-weight:400; opacity:.9; line-height:1.3 }
.nb-login-text{ margin:0; font-size:12.5px; line-height:1.65; opacity:.9; white-space:pre-line }
.nb-login-info{
  margin-top:5px; padding:13px; border-radius:4px;
  font-size:11px; line-height:1.5; background:rgba(255,255,255,.22);
}
.nb-login-acts{ display:flex }
.nb-login-acts > *{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:13px 4px; font-size:11px; text-align:center;
  color:#fff; text-decoration:none; background:rgba(0,0,0,.12);
  transition:background .12s;
}
.nb-login-acts > *:hover{ background:rgba(0,0,0,.3); color:#fff; text-decoration:none }

/* ── rechte Spalte ────────────────────────────────────────────────────────── */
.nb-login-right{
  background:rgba(255,255,255,.2);
  padding:32px; display:flex; flex-direction:column; justify-content:center; gap:12px;
  min-width:0;
}
.nb-login-mark{ display:flex; justify-content:center; margin-bottom:8px }
.nb-login-mark svg{ height:74px; width:auto; fill:#fff }
/* Im ERP kommt die Marke aus Design::brandMark(['mark'=>'n']): die Grösse erbt dort von der
   Schriftgrösse des Behälters, die Farbe steht in typo.css auf var(--ink). Beides hier im
   Kontext gesetzt — ohne die zwei Zeilen wäre das N winzig und dunkelgrau. */
.nb-login-mark .cc-brand{ font-size:74px; line-height:0 }
.nb-login-mark .cc-brand-n{ fill:#fff }

.nb-login-field{ display:flex; flex-direction:column; gap:5px; margin:0 }
.nb-login-field > label,
.nb-login-field .mage-field-label{
  font-size:11.5px; font-weight:400; color:#fff; opacity:.92;
  text-align:left; margin:0; padding:0; display:block;
}
.nb-login-field input,
.nb-login-field .form-control{
  width:100%; height:36px; box-sizing:border-box;
  padding:0 12px; font:inherit; font-size:14px;
  color:#1f2937; background:#fff;
  border:1px solid #e5e7eb; border-radius:2px;
}
.nb-login-field input::placeholder{ color:#1f2937; opacity:.45 }
.nb-login-field input:focus{
  outline:none; border-color:#eb5202; box-shadow:0 0 0 2px rgba(235,82,2,.45);
}
.nb-login-check{
  display:flex; align-items:center; gap:8px; margin:0;
  font-size:12px; color:#fff; opacity:.88; cursor:pointer;
}
.nb-login-check input{ accent-color:#eb5202; width:13px; height:13px; margin:0 }
/* ERP: die Kern-Bausteine tragen eigene Abstände/Farben mit — im Kontext der Maske
   zurückgenommen, damit die Spalte ihren eigenen Rhythmus behält (gap statt margin). */
.nb-login-right .mage-field{ margin-bottom:0 }
.nb-login-right .mage-field-label{ font-size:11.5px; color:#fff; opacity:.92; margin:0 0 5px; text-align:left }
.nb-login-right .cc-check{ margin-top:0 }
.nb-login-right .mage-btn-add{ width:100%; justify-content:center; font-size:14.5px }
.nb-login-btn{
  width:100%; height:36px; margin-top:5px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:2px; background:#eb5202; color:#fff;
  font:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
  transition:background .12s;
}
.nb-login-btn:hover{ background:#cf4700; color:#fff }
.nb-login-err{
  font-size:12px; line-height:1.45; color:#fff;
  background:rgba(220,38,38,.55); border-radius:2px; padding:9px 11px;
  display:flex; align-items:flex-start; gap:8px;
}
.nb-login-err:empty{ display:none }
/* Ein eingebettetes Formular (z. B. der Abmelde-Knopf der Konsole) soll keine eigene Kiste
   aufmachen — seine Kinder reihen sich in die Spalte ein, sonst steht der Knopf schmal links. */
.nb-login-right > form{ display:contents }
.nb-login-foot{ margin-top:7px; font-size:11px; text-align:center; opacity:.5 }
.nb-login-foot a{ color:#fff; text-decoration:underline }

/* Schmal: die Erzählspalte tritt ab, das Formular bleibt. */
@media (max-width:720px){
  .nb-login{ padding:14px }
  .nb-login-card{ grid-template-columns:1fr; min-height:0 }
  .nb-login-left{ display:none }
  .nb-login-right{ padding:26px }
}