/* ==========================================================================
   Zugangs-Gate – eigenständige, kleine Seite. Nutzt die Tokens, Schriften
   und Buttons aus main.css, fügt nur das gate-spezifische Layout hinzu.
   Kein Video hier (die Seite muss augenblicklich da sein), stattdessen
   das Hero-Posterbild als ruhiger, dunkel abgeblendeter Hintergrund.
   ========================================================================== */

html:has(.gate-body) { background: var(--graphit); }
.gate-body { background: var(--graphit); }

.gate {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.5rem, 5vw, 3rem);
}

.gate__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.gate__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.gate__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 19, 21, 0.86) 0%, rgba(18, 19, 21, 0.72) 55%, rgba(18, 19, 21, 0.88) 100%);
}

.gate__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 440px;
}

.gate__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: clamp(2rem, 5vw, 2.75rem);
  text-decoration: none;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--weiss);
  cursor: default;
}
.gate__brand small {
  font-family: var(--font-text);
  font-size: 0.78rem;
  font-weight: 540;
  letter-spacing: 0.01em;
  color: rgba(252, 252, 251, 0.7);
}

.gate__card {
  width: 100%;
  background: var(--weiss);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-media);
  padding: clamp(2rem, 5vw, 2.75rem) clamp(1.75rem, 5vw, 2.5rem);
  text-align: center;
}

.gate__lock {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.85rem;
  margin: 0 auto 1.4rem;
  border-radius: 999px;
  background: var(--kupfer-wash);
  color: var(--kupfer-tief);
}

.gate__card h1 {
  font-size: var(--fs-600);
  max-width: 24ch;
  margin: 0 auto 0.6rem;
}

.gate__sub {
  font-size: var(--fs-300);
  color: var(--text-2);
  line-height: 1.6;
  max-width: 34ch;
  margin: 0 auto clamp(1.75rem, 4vw, 2.25rem);
}

.gate__form { text-align: left; }

.gate__field { position: relative; }

.gate__label {
  display: block;
  font-size: var(--fs-300);
  font-weight: 640;
  margin-bottom: 0.55rem;
}

.gate__input-wrap { position: relative; }

.gate__input-wrap input {
  width: 100%;
  padding: 0.85em 2.9em 0.85em 1em;
  border-radius: var(--radius-s);
  border: 1px solid var(--linie);
  background: var(--stein);
  font-family: var(--font-text);
  font-size: var(--fs-400);
  letter-spacing: 0.04em;
  color: var(--text);
  transition: border-color var(--dur-1) ease;
}
.gate__input-wrap input::placeholder { color: var(--text-2); opacity: 0.7; letter-spacing: normal; }
.gate__input-wrap input:focus { outline: none; border-color: var(--kupfer); }

.gate__toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2.9em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-2);
  cursor: pointer;
}
.gate__toggle:hover { color: var(--text); }
.gate__eye { width: 1.15rem; height: 1.15rem; }
.gate__eye--slash { display: none; }
.gate__toggle[aria-pressed="true"] .gate__eye:not(.gate__eye--slash) { display: none; }
.gate__toggle[aria-pressed="true"] .gate__eye--slash { display: block; }

.gate__error {
  display: none;
  margin-top: 0.6rem;
  font-size: var(--fs-200);
  color: var(--rot);
}
.gate__field.has-error input { border-color: var(--rot); }
.gate__field.has-error .gate__error { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .gate__field.has-error .gate__input-wrap {
    animation: gate-shake 420ms ease;
  }
  @keyframes gate-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
  }
}

.gate__submit {
  width: 100%;
  justify-content: center;
  margin-top: 1.6rem;
}

@media (prefers-reduced-motion: no-preference) {
  .gate__panel > * {
    opacity: 0;
    transform: translateY(18px);
    animation: gate-in 750ms var(--ease-out) forwards;
  }
  .gate__panel > *:nth-child(1) { animation-delay: 80ms; }
  .gate__panel > *:nth-child(2) { animation-delay: 200ms; }
  @keyframes gate-in {
    to { opacity: 1; transform: none; }
  }
}