/* ==========================================================================
   Öffentliche Seiten (Start, Login, Registrierung): Logo, Begrüßung, Fleisch-Foto im Hintergrund
   ========================================================================== */

.brand-login {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Foto im Hintergrund: leicht unscharf, abgedunkelt, halbtransparent.
   Der Rahmen .auth-bg ist exakt bildschirmgroß und schneidet ab – so ragt nichts über den
   Rand (wichtig für iOS/Safari, sonst wird die Seite breiter als das Fenster). */
.auth-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: #0c0d10;
}
.auth-bg::before {
  content: "";
  position: absolute;
  inset: -24px;
  background: url("../meat4us.jpg") center / cover no-repeat;
  filter: blur(3px) saturate(1.1);
  opacity: .55;
  transform: scale(1.04);
}
.auth-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(214, 74, 36, .18), transparent 60%),
    linear-gradient(180deg, rgba(17, 19, 23, .55) 0%, rgba(17, 19, 23, .85) 100%);
}

/* Login-Box im Glas-Look */
.brand-login .auth-panel {
  background: rgba(26, 29, 35, .72);
  border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  border-radius: 20px;
}

/* Logo und Begrüßung */
.login-brand {
  text-align: center;
  margin: 4px 0 26px;
}
.login-brand .logo {
  width: 76px;
  height: 76px;
  margin: 0 auto 14px;
  filter: drop-shadow(0 10px 22px rgba(214, 74, 36, .45));
}
.login-brand .wordmark {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e9d9cf;
  margin-bottom: 6px;
}
.login-brand .wordmark b { color: var(--primary-h); }
.login-brand h1 {
  font-size: clamp(24px, 6vw, 30px);
  margin: 0;
}

.brand-login .auth-box h2 { font-size: 20px; margin: 0 0 6px; }
.brand-login .login-brand + h1 { font-size: 22px; text-align: center; margin: -8px 0 6px; }
.brand-login .login-brand + h1 + .lead { text-align: center; }
.brand-login .auth-box .lead { margin-bottom: 20px; }

@media (prefers-reduced-transparency: reduce) {
  .brand-login .auth-panel { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}