.auth-wrap { 
  min-height: calc(100vh - var(--header-h-mobile));
  display: grid; place-items: center;
  padding: 2rem 1rem;
  background: var(--auth-bg);
}

@media (min-width: 992px){
  .auth-wrap{
    min-height: calc(100vh - var(--header-h-desktop));    
  }
}

.auth-card.shake {
  animation: horizontal-shaking 0.5s;
}

@keyframes horizontal-shaking {
  0% { transform: translateX(20) }
  25% { transform: translateX(-20px) }
  50% { transform: translateX(20px) }
  75% { transform: translateX(-20px) }
  100% { transform: translateX(0) }
}

/* Card/Spacing */
.auth-card {
  width: 100%;
  max-width: 440px;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--auth-border);
  background: var(--auth-card-bg);
  box-shadow: var(--auth-shadow);
  backdrop-filter: blur(10px);
}

.auth-header {
  padding: 1.25rem 1.25rem 0.75rem 1.25rem;
  background: var(--auth-header-bg);
  border-bottom: 1px solid var(--auth-border);
}

.auth-body {
  padding: 1.25rem;
}

.auth-footer {
  padding: 0 1.25rem 1.25rem 1.25rem;
  color: var(--auth-muted);
}

/* Inputs optisch feiner (nur im Auth) */
.form-control,
.input-group-text {
  border-color: var(--auth-border);
}

.form-control:focus {
  border-color: var(--auth-focus);
  box-shadow: 0 0 0 .25rem var(--auth-focus-ring);
}

/* ---------- AUTH PALETTE: LIGHT ---------- */
html[data-bs-theme="light"] .auth-wrap {

  
  --auth-muted: rgba(33, 37, 41, .65);

  --auth-card-bg: rgba(255, 255, 255, 0.264);
  --auth-header-bg: rgba(209, 210, 210, 0.25);
  --auth-border: rgba(0, 0, 0, .20);

  --auth-shadow: 0 18px 50px rgba(0,0,0,.10);

  --auth-focus: #0d6efd;
  --auth-focus-ring: rgba(13,110,253,.18);

  /* Hintergrund mit “weichen Lichtern” */
  
}

/* ---------- AUTH PALETTE: DARK (FEIN) ---------- */
html[data-bs-theme="dark"] .auth-wrap {
  
  --auth-muted: rgba(248, 249, 250, .65);

  /* “Feines” Dark: nicht pechschwarz, sondern mit Ebenen */
  --auth-card-bg: rgba(18, 22, 30, .30);
  --auth-header-bg: rgba(18, 22, 30, .60);
  --auth-border: rgba(255, 255, 255, .20);

  /* weicher Shadow + leichter “Glow” */
  --auth-shadow:
    0 18px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.04) inset;

  /* Fokus-Farbe etwas “weicher” */
  --auth-focus: #7bb1ff;
  --auth-focus-ring: rgba(123,177,255,.16);

  /* Background: dunkle Gradients mit subtilen Farbakzenten */
 

}
    

    .brand {
      display: flex;
      align-items: center;
      gap: .75rem;
    }

    .brand-badge {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      /*background: rgba(6, 173, 75, 0.8);
      border: 1px solid rgba(13,110,253,.25);*/
    }

    
    .auth-body { padding: 1.25rem; }
    .auth-footer { padding: 0 1.25rem 1.25rem 1.25rem; }

    .btn-icon {
      width: 40px;
      height: 40px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      border-radius: .9rem;
    }



.chooser { margin-bottom: 14px; }
.tiles { display:grid; grid-template-columns: 1fr; gap:10px; }
.tile { padding:12px; border-radius:16px; border: 1px solid var(--auth-border); cursor:pointer; }
.tile-info { display:flex; align-items:center; gap:12px;  }
.tile:hover { border-color:var(--auth-focus); }
.avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; overflow:hidden; color:  rgba(0, 0, 0, 1); background: rgba(134, 197, 255, 1); }
.avatar img { width:100%; height:100%; object-fit:cover; }
.info { flex:1; min-width:0; }
.name { font-weight:700; }
.email { color:#666; font-size: 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

[data-bs-theme="light"] .avatar { background: rgba(134, 197, 255, 1);   }