/* gate.css — Aussehen der Passwortsperre (siehe gate.js).
 *
 * DIESE DATEI GEHOERT DEM CORE und wird in den Webroot der Kundenseite kopiert.
 * Nicht im Kundenrepo aendern — die Aenderung waere beim naechsten Core-Update weg.
 *
 * FARBEN UND SCHRIFT KOMMEN AUS CSS-VARIABLEN. Jede Kundenseite setzt sie in ihrem eigenen
 * Stylesheet, zum Beispiel:
 *
 *     :root {
 *       --dyn-gate-akzent: #a0ba79;
 *       --dyn-gate-akzent-dunkel: #577810;
 *       --dyn-gate-schrift: "Roboto Condensed", sans-serif;
 *     }
 *
 * Die Vorgaben unten sind bewusst neutrale Grautoene: Eine Seite ohne eigene Werte sieht
 * schlicht aus, aber nie kaputt — und vor allem nie nach einem anderen Kunden.
 */

html.sps-locked body { overflow: hidden; }

#sps-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--dyn-gate-hintergrund, #f7f7f7);
  font-family: var(--dyn-gate-schrift, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  /* html steht waehrend der Sperre auf visibility:hidden (gegen das Aufblitzen des
     Inhalts); visibility vererbt sich, das Overlay muss sich ausdruecklich zurueckholen. */
  visibility: visible;
}

.sps-gate-card {
  width: 100%;
  max-width: 420px;
  text-align: center;
  background: var(--dyn-gate-karte, #ffffff);
  border: 1px solid var(--dyn-gate-linie, #e4e4e4);
  border-radius: var(--dyn-gate-radius, 4px);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .18);
  padding: 2.6rem 2.2rem;
}

.sps-gate-logo { display: block; margin: 0 auto 1rem; }
.sps-gate-logo svg { width: 52px; height: 52px; }

.sps-gate-eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dyn-gate-akzent, #8a8a8a);
  margin-bottom: .9rem;
}

#sps-gate h1 {
  font-size: 21px;
  line-height: 1.35;
  color: var(--dyn-gate-ueberschrift, #444);
  margin: 0 0 .8rem;
  font-weight: 400;
}

#sps-gate p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--dyn-gate-text, #6b6b6b);
  margin: 0 0 1.6rem;
}

#sps-gate-form {
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
}

#sps-gate-input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--dyn-gate-linie, #d8d8d8);
  border-radius: var(--dyn-gate-radius, 3px);
  font-size: 15px;
  font-family: inherit;
  color: var(--dyn-gate-text, #444);
  background: #fff;
}

#sps-gate-input:focus {
  outline: none;
  border-color: var(--dyn-gate-akzent, #8a8a8a);
  box-shadow: 0 0 0 3px var(--dyn-gate-fokus, rgba(0, 0, 0, .08));
}

#sps-gate-form button {
  padding: 10px 22px;
  border: 1px solid var(--dyn-gate-akzent, #6b6b6b);
  border-radius: var(--dyn-gate-radius, 3px);
  background: var(--dyn-gate-akzent, #6b6b6b);
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}

#sps-gate-form button:hover {
  background: var(--dyn-gate-akzent-dunkel, #4a4a4a);
  border-color: var(--dyn-gate-akzent-dunkel, #4a4a4a);
}

.sps-gate-error {
  margin: 1rem 0 0 !important;
  color: #b3261e;
  font-size: 13.5px;
}