/* ============================================================
   ProzessWerk — Baustellen-/Passwort-Vorschaltseite
   Blauer Verlauf + animierter orangener Schimmer.
   Lädt zusätzlich zu styles.css (Tokens/Buttons werden wiederverwendet).
   ============================================================ */

/* Sichtbarkeit: standardmäßig gesperrt; .gate-off (von gate.js / Anti-FOUC-Script) schaltet frei */
#gate { display: flex; }
.gate-off #gate { display: none; }
/* Hintergrund-Scroll sperren, solange die Seite gesperrt ist */
html:not(.gate-off) body { overflow: hidden; }

#gate {
  position: fixed; inset: 0; z-index: 9999;
  align-items: center; justify-content: center;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #243457 0%, transparent 55%),
    linear-gradient(160deg, #1c2a4d 0%, #15203b 60%, #111a30 100%);
  color: #fff;
  font-family: var(--font-body, system-ui, sans-serif);
  transition: opacity 0.5s ease;
}
#gate.is-unlocking { opacity: 0; }

/* animierter orangener Schimmer */
.gate__shimmer { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.gate__shimmer::before,
.gate__shimmer::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: 0.55;
}
.gate__shimmer::before {
  width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  top: -10%; left: 50%; transform: translateX(-55%);
  background: radial-gradient(circle, rgba(230, 83, 29, 0.55), transparent 65%);
}
.gate__shimmer::after {
  width: 45vw; height: 45vw; max-width: 540px; max-height: 540px;
  bottom: -12%; right: 8%;
  background: radial-gradient(circle, rgba(230, 83, 29, 0.30), rgba(36, 52, 87, 0) 65%);
}
@media (prefers-reduced-motion: no-preference) {
  .gate__shimmer::before { animation: gateDrift1 11s ease-in-out infinite alternate; }
  .gate__shimmer::after  { animation: gateDrift2 14s ease-in-out infinite alternate; }
}
@keyframes gateDrift1 {
  from { transform: translateX(-55%) translateY(0) scale(1); opacity: 0.45; }
  to   { transform: translateX(-42%) translateY(6%) scale(1.12); opacity: 0.6; }
}
@keyframes gateDrift2 {
  from { transform: translate(0, 0) scale(1); opacity: 0.28; }
  to   { transform: translate(-8%, -6%) scale(1.18); opacity: 0.42; }
}

.gate__inner {
  position: relative; z-index: 1;
  width: min(100%, 30rem);
  animation: gateIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes gateIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Marke (nutzt .brand/.brand__icon/.brand__text aus styles.css) — eigener, zentrierter Block unter dem Badge */
.gate__brand { display: flex; justify-content: center; align-items: center; gap: 0.6rem; margin: 0 0 2rem; }
.gate__brand .brand__text { color: #fff; }
.gate__brand .brand__text small { color: var(--taupe-soft, #c9c2ba); }

.gate__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange-soft, #f06a38);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.4em 0.9em; border-radius: 999px; margin-bottom: 1.4rem;
}
.gate__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange, #e6531d); }
@media (prefers-reduced-motion: no-preference) {
  .gate__badge .dot { animation: gatePulse 1.8s ease-in-out infinite; }
}
@keyframes gatePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.gate__title {
  font-family: var(--font-display, 'Inter Tight', sans-serif);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
  color: #fff; margin-bottom: 1rem; text-wrap: balance;
}
.gate__text {
  font-size: 1.05rem; line-height: 1.55; color: rgba(255, 255, 255, 0.72);
  margin-bottom: 2rem; text-wrap: pretty;
}

.gate__form { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
.gate__form input {
  flex: 1 1 12rem; min-height: 52px;
  font: inherit; font-size: 1rem; color: #fff;
  padding: 0.85em 1.1em;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.gate__form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.gate__form input:focus {
  outline: none; border-color: var(--orange, #e6531d);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 4px rgba(230, 83, 29, 0.18);
}
.gate__form .btn { min-height: 52px; flex: 0 0 auto; }

#gate.is-error .gate__form input { border-color: #ff6b6b; }
@media (prefers-reduced-motion: no-preference) {
  #gate.is-error .gate__form { animation: gateShake 0.4s ease; }
}
@keyframes gateShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

.gate__error { margin-top: 1rem; font-size: 0.9rem; color: #ff9b9b; min-height: 1.2em; }
.gate__footer { margin-top: 2.5rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); }

@media (max-width: 420px) {
  .gate__form .btn { flex: 1 1 100%; }
}