/* ==========================================================================
   Passwort-Gate (Vorschau-Riegel)
   Dunkles Vollbild-Overlay mit der Logo-Einzeichnen-Animation aus dem Entwurf
   machinet-v4 (#load-overlay), darunter das Passwortfeld.

   Bewusst NICHT theme-abhaengig: der Grund ist immer dunkel, die Wortmarke
   immer hell — sonst verschwindet sie im hellen Theme.
   Eigene Keyframes (mm_gate_*), damit die Header-Animation unberuehrt bleibt.
   ========================================================================== */

.mm_gate {
  position: fixed;
  inset: 0;
  /* Hoch genug, um ueber allem zu liegen (Header 100, Assistenten-Knopf 9998).
     Zusaetzlich haengt das JS den Knoten an <body> — sonst begrenzt der
     Stacking-Context von #header (sticky, z-index 100) die Wirkung. */
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 38px;
  padding: 24px;
  background: #0d151d;
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility .45s ease;
}

.mm_gate.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* Seite hinter dem Overlay nicht scrollbar (setzt maschinen_markt_gate.js). */
html.mm_gate_on, html.mm_gate_on body { overflow: hidden !important; }

/* Solange der Riegel liegt: den schwebenden KI-Assistenten wegnehmen. Er sitzt
   in einem eigenen Stacking-Context und wuerde sonst durchs Overlay stechen. */
html.mm_gate_on .mm_ass_fab,
html.mm_gate_on .mm_ass_overlay { display: none !important; }

/* ---------- Logo ---------- */
.mm_gate_logo { width: clamp(260px, 46vw, 430px); height: auto; display: block; }

.mm_gate_logo .svg-elem-1, .mm_gate_logo .svg-elem-2, .mm_gate_logo .svg-elem-3,
.mm_gate_logo .svg-elem-4, .mm_gate_logo .svg-elem-5 { fill: #eef2f6; }
.mm_gate_logo .svg-elem-6,  .mm_gate_logo .svg-elem-7,  .mm_gate_logo .svg-elem-8,
.mm_gate_logo .svg-elem-9,  .mm_gate_logo .svg-elem-10, .mm_gate_logo .svg-elem-11,
.mm_gate_logo .svg-elem-12, .mm_gate_logo .svg-elem-13, .mm_gate_logo .svg-elem-14,
.mm_gate_logo .svg-elem-15 { fill: #e94e1b; }

@keyframes mm_gate_text   { from { fill: transparent; } to { fill: #eef2f6; } }
@keyframes mm_gate_accent { from { fill: transparent; } to { fill: #e94e1b; } }
@keyframes mm_gate_in     { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.mm_gate_logo path, .mm_gate_logo rect {
  animation-duration: .7s;
  animation-timing-function: cubic-bezier(.47, 0, .745, .715);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.mm_gate_logo .svg-elem-1  { animation-name: mm_gate_text;   animation-delay: .8s; }
.mm_gate_logo .svg-elem-2  { animation-name: mm_gate_text;   animation-delay: .9s; }
.mm_gate_logo .svg-elem-3  { animation-name: mm_gate_text;   animation-delay: 1s; }
.mm_gate_logo .svg-elem-4  { animation-name: mm_gate_text;   animation-delay: 1.1s; }
.mm_gate_logo .svg-elem-5  { animation-name: mm_gate_text;   animation-delay: 1.2s; }
.mm_gate_logo .svg-elem-6  { animation-name: mm_gate_accent; animation-delay: 1.3s; }
.mm_gate_logo .svg-elem-7  { animation-name: mm_gate_accent; animation-delay: 1.4s; }
.mm_gate_logo .svg-elem-8  { animation-name: mm_gate_accent; animation-delay: 1.5s; }
.mm_gate_logo .svg-elem-9  { animation-name: mm_gate_accent; animation-delay: 1.6s; }
.mm_gate_logo .svg-elem-10 { animation-name: mm_gate_accent; animation-delay: 1.7s; }
.mm_gate_logo .svg-elem-11 { animation-name: mm_gate_accent; animation-delay: 1.8s; }
.mm_gate_logo .svg-elem-12 { animation-name: mm_gate_accent; animation-delay: 1.9s; }
.mm_gate_logo .svg-elem-13 { animation-name: mm_gate_accent; animation-delay: 2s; }
.mm_gate_logo .svg-elem-14 { animation-name: mm_gate_accent; animation-delay: 2.1s; }
.mm_gate_logo .svg-elem-15 { animation-name: mm_gate_accent; animation-delay: 2.2s; }

/* ---------- Eingabe ---------- */
.mm_gate_box {
  width: 100%;
  max-width: 420px;
  text-align: center;
  animation: mm_gate_in .5s ease 2.6s both;
}

.mm_gate_hint {
  margin: 0 0 14px;
  font-family: var(--font-sans, 'Barlow Semi Condensed', Arial, sans-serif);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(238, 242, 246, .72);
}

.mm_gate_form { display: flex; gap: 10px; align-items: stretch; }

.mm_gate_input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #2a3947;
  border-radius: 10px;
  background: #16212d;
  color: #eef2f6;
  font-family: var(--font-sans, 'Barlow Semi Condensed', Arial, sans-serif);
  font-size: 16px;
  outline: none;
  box-shadow: none;
  transition: border-color .15s;
}
.mm_gate_input::placeholder { color: rgba(238, 242, 246, .4); }
.mm_gate_input:focus { border-color: #e94e1b; }

.mm_gate_btn {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: #e85d26;
  color: #fff;
  font-family: var(--font-sans, 'Barlow Semi Condensed', Arial, sans-serif);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s;
}
.mm_gate_btn:hover, .mm_gate_btn:focus-visible { background: #cf4d1c; color: #fff; }
.mm_gate_btn[disabled] { opacity: .6; cursor: default; }

.mm_gate_error {
  margin: 12px 0 0;
  min-height: 1.4em;
  font-family: var(--font-sans, 'Barlow Semi Condensed', Arial, sans-serif);
  font-size: 15px;
  color: #ff8a63;
}
.mm_gate_error[hidden] { display: none; }

/* Falsche Eingabe: kurzes Rütteln am Feld. */
@keyframes mm_gate_shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.mm_gate_form.is-wrong { animation: mm_gate_shake .32s ease; }

@media (max-width: 480px) {
  .mm_gate { gap: 28px; }
  .mm_gate_form { flex-direction: column; }
  .mm_gate_btn { width: 100%; }
}

/* Reduzierte Bewegung: alles sofort da, nichts zeichnet sich ein. */
@media (prefers-reduced-motion: reduce) {
  .mm_gate_logo path, .mm_gate_logo rect { animation: none; }
  .mm_gate_box { animation: none; }
  .mm_gate_form.is-wrong { animation: none; }
}