/* ======================================================================
   Auth Screens (Login / Registrierung)
   Komplett neu; nutzt die Navbar-Höhe aus css.css via var(--nav-h, 4rem)
   ====================================================================== */

/* ---------------------------- Global Overrides ----------------------- */
body.auth-page{
  padding-top: 0 !important;
  min-height: 100dvh;
  color: #fff;
  background: radial-gradient(75rem 37.5rem at -10% 110%, #0d1322 0%, #0b0f1a 40%, #0a0f18 100%);
}
body.auth-page .site-header .navbar.shadow-sm{ box-shadow: none !important; }

/* ----------------------- Viewport + Split ---------------------------- */
.auth-split-viewport{
  min-height: 100dvh;
  padding-top: var(--nav-h, 4rem);
  display: grid;
}
.auth-split{
  min-height: calc(100dvh - var(--nav-h, 4rem));
  display: grid;
  position: relative;
}
.register-split{ grid-template-columns: 7fr 3fr; }
.login-split   { grid-template-columns: 3fr 7fr; }

.pane{
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 100%;
}
.pane-main{
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(.375rem);
  -webkit-backdrop-filter: blur(.375rem);
  z-index: 2;
}
.pane-side{
  background: linear-gradient(150deg, #d72638 0%, #ff9900 100%);
  color: #fff;
  z-index: 3;
}

/* Innenabstände / Maxbreiten */
.pane-inner{ width: min(61.25rem, 92%); }
.pane-side .pane-inner{ width: min(32.5rem, 92%); padding: 2rem 1rem; }
.pane-side--right .pane-inner{ padding-left: 4.5rem; }
.pane-side--left  .pane-inner{ padding-right: 4.5rem; }

.pane-title{ font-weight: 800; letter-spacing: -.01em; margin-bottom:.5rem; }
.pane-text{ opacity:.95; margin-bottom:1rem; }

/* ---------------------- Schräge Trennkanten -------------------------- */
.skew-right{ clip-path: polygon(0 0, calc(100% - 5vw) 0, 100% 100%, 0% 100%); }
.skew-left { clip-path: polygon(0 0, 100% 0, 100% 100%, 5vw 100%); }
.register-split .pane-main--left { grid-column: 1; }
.register-split .pane-side--right{ grid-column: 2; }
.login-split    .pane-side--left { grid-column: 1; }
.login-split    .pane-main--right{ grid-column: 2; }

/* ----------------------- Auth Card (Glas) ---------------------------- */
.auth-card{
  position: relative;
  background: rgba(0,0,0,.45);
  border: 0.0625rem solid rgba(255,255,255,.16);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 3.75rem rgba(0,0,0,.35), inset 0 0.0625rem 0 rgba(255,255,255,.06);
  color: #fff;
  padding: 2rem 1.75rem;
  animation: authCardSlideIn .55s ease-out both;
}
.auth-avatar{ display: grid; justify-content: center; margin-bottom: 1.25rem; }
.auth-avatar-circle{
  width: 5.25rem; height: 5.25rem;
  border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  border: 0.125rem solid rgba(255,255,255,.35);
  box-shadow: 0 0.375rem 1.125rem rgba(0,0,0,.35);
  background: linear-gradient(150deg, #d72638 0%, #ff9900 100%);
}
.auth-avatar-circle i{ font-size: 2rem; }

/* ------------------- Formular (Dark) --------------------------------- */
.auth-card .form-control{
  background-color: rgba(255,255,255,.06);
  border: 0.0625rem solid rgba(255,255,255,.25);
  color: #fff;
}
.auth-card .form-control:focus{
  background-color: rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.45);
  color: #fff;
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.12);
}
.auth-card .form-floating>label{ color: rgba(255,255,255,.85); }
.auth-card .form-control::placeholder{ color: transparent; }
.auth-card .form-check-label{ color: rgba(255,255,255,.9); }

/* Show/Hide-Button rechts */
.auth-card{ --addon-w: 2.75rem; }
.auth-card .input-group{
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--addon-w);
  align-items: stretch;
}
.auth-card .input-group .form-floating{ width:100%; min-width:0; position: relative; }
.auth-card .input-group .form-floating > .form-control{
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.auth-card .input-group .toggle-password-btn{
  grid-column: 2; width: var(--addon-w); min-width: var(--addon-w);
  display: grid; place-items: center;
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-top-right-radius: .5rem; border-bottom-right-radius: .5rem;
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.06);
}
.auth-card .toggle-password-btn:hover{ color:#fff; }

/* ------------------ Tooltips (werden auf Register now versteckt) ----- */
.auth-card .form-floating .valid-tooltip,
.auth-card .form-floating .invalid-tooltip{
  position: absolute !important;
  left: 0; right: 0;
  top: calc(100% + .25rem) !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 5;
  pointer-events: none;
}
.register-page .valid-tooltip,
.register-page .invalid-tooltip{
  display: none !important; /* Tooltips auf Registrierungsseite komplett ausblenden */
}

/* Platz-Reservierung via :has() (bleibt für Login nützlich) */
.auth-card .input-group .form-floating:has(.is-valid),
.auth-card .input-group .form-floating:has(.is-invalid){
  padding-bottom: 1.55rem;
}
.auth-card .form-check{ position: relative; }
.auth-card .form-check .invalid-tooltip{
  position: absolute !important;
  left: 0; right: 0;
  top: calc(100% + .25rem) !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 5;
  pointer-events: none;
}
.auth-card .form-check:has(.is-invalid){ padding-bottom: 1.55rem; }

.col-form .form-floating.mb-3{ margin-bottom: 1rem !important; }
.col-form .input-group.mb-3{  margin-bottom: 1rem !important; }
.col-form .input-group.mb-4{  margin-bottom: 1.25rem !important; }

/* ---------------------- Buttons & Links ------------------------------- */
.auth-card .btn-primary{
  background: linear-gradient(150deg, #d72638 0%, #ff9900 100%);
  border: none; color:#fff; border-radius:.6rem;
}
.auth-card .btn-primary:hover{ filter: brightness(.95); color:#fff; }
.pane-side .btn{
  border-radius:.6rem;
  background: rgba(0,0,0,.2);
  border: 0.0625rem solid rgba(255,255,255,.45);
  color:#fff;
}
.pane-side .btn:hover{ background: rgba(0,0,0,.3); color:#fff; }

/* --------------------- Passwort-Checkliste ---------------------------- */
.pw-req-list{ list-style:none; margin:.25rem 0 1.25rem 0; padding-left:0; }
.pw-req{
  display:flex; align-items:flex-start; gap:.6rem;
  line-height:1.25; color:rgba(255,255,255,.9);
  margin:.5rem 0;  /* MEHR Abstand */
}
.pw-req .icon{ width:1.25rem; display:inline-flex; justify-content:center; margin-top:.1rem; }
.pw-req.ok .icon{ color:#20c997; }
.pw-req.bad .icon{ color:#dc3545; }
.pw-req.small{ color:rgba(255,255,255,.75); margin-left:.25rem; }

/* ------------------ 70%-Pane (Register): 2 Spalten -------------------- */
.main-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
}
.col-checklist{ align-self:start; }
.col-form{ align-self:start; }

/* -------------------------- Responsive -------------------------------- */
@media (max-width: 62rem){
  .register-split, .login-split{ grid-template-columns: 1fr; }
  .skew-left, .skew-right{ clip-path: none; }
  .pane-side{ order: 2; padding: 2.5rem 0; }
  .pane-main{ order: 1; padding: 1.5rem 0; }
  .pane-inner{ width: min(47.5rem, 92%); }
  .pane-side--right .pane-inner,
  .pane-side--left  .pane-inner{ padding: 2rem 1rem; }
  .main-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 37.5rem){ .auth-card{ --addon-w: 2.5rem; } }
@media (max-width: 23.75rem){ .auth-card{ --addon-w: 2.25rem; } }

/* -------------------------- Animationen ------------------------------- */
@keyframes authCardSlideIn{
  0%{ opacity:0; transform: translateY(1.375rem) scale(.985); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){ .auth-card{ animation: none; } }
.auth-card h1{ margin-top:.5rem; }
a.link-light{ color:#fff; text-decoration: underline dotted; }
a.link-light:hover{ text-decoration: underline; }

/* ============================================================= */
/* Patch B: Login-Card <= 780px wirklich mittig                  */
/* – entfernt letzte Reste der linken Split-Spalte ausschließlich
   auf der Login-Seite und erzwingt Zentrierung                  */
/* ============================================================= */
@media (max-width: 48.75rem) { /* 780px */

  /* jede mögliche Side-Pane der Login-Seite ausblenden */
  .login-page .pane-side,
  .login-page .pane-side--left {
    display: none !important;
  }

  /* das Split-Grid auf 1 Spalte stellen & Schrägen weg */
  .login-page .login-split {
    grid-template-columns: 1fr !important;
  }
  .login-page .skew-left,
  .login-page .skew-right {
    clip-path: none !important;
  }

  /* horizontale Einrückungen restlos entfernen + dunkler Grund */
  .login-page .auth-split-viewport,
  .login-page .auth-split,
  .login-page .pane,
  .login-page .pane-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: #0e1115 !important;
  }

  /* harte Zentrierung des Inhalts */
  .login-page .pane-main {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  /* feste, mittige Innenbreite für die Card */
  .login-page .pane-inner {
    width: 92% !important;
    max-width: 30rem;              /* ~480px */
    margin-inline: auto !important;
  }

  /* Card ohne seitliche Eigen-Margins */
  .login-page .auth-card {
    margin-inline: 0 !important;
  }
}

/* Reset-Seiten: keine Tooltips unter Feldern (wie bei .register-page) */
.reset-page .valid-tooltip,
.reset-page .invalid-tooltip,
.reset-request-page .valid-tooltip,
.reset-request-page .invalid-tooltip{
  display: none !important;
}


#caps-hint {
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}
#caps-hint.active {
  opacity: 1;
  display: block !important;
}

/* ============================================================= */
/* XS-FIX (<= 36rem): restloses Reset + harte Zentrierung        */
/* (bleibt bestehen – deckt noch kleinere Screens ab)            */
/* ============================================================= */
@media (max-width: 36rem) {
  .pane-side,
  .login-page .pane-side--left,
  .register-page .pane-side--right { display: none !important; }

  .register-split, .login-split { grid-template-columns: 1fr !important; }
  .skew-left, .skew-right { clip-path: none !important; }

  .auth-split-viewport,
  .auth-split,
  .pane,
  .pane-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: #0e1115 !important;
  }

  .pane-main {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .pane-inner {
    width: 92% !important;
    max-width: 30rem;
    margin-inline: auto !important;
  }

  .auth-card {
    margin-inline: 0 !important;
    padding: 1.25rem 1rem;
    border-radius: .75rem;
  }
  .auth-switch-mobile { display: grid; place-items: center; gap: .75rem; margin-top: 1.5rem; text-align: center; }
  .auth-switch-divider { position: relative; width: 100%; text-align: center; color: rgba(255,255,255,.6); font-weight: 600; font-size: .9rem; letter-spacing: .05em; }
  .auth-switch-divider::before, .auth-switch-divider::after { content: ""; position: absolute; top: 50%; width: 45%; height: 1px; background: rgba(255,255,255,.2); }
  .auth-switch-divider::before { left: 0; } .auth-switch-divider::after { right: 0; }
}