/* =====================================================================
   SPT-LOGIN v1 — die gemeinsame Anmeldekarte der internen Auftritte
   Swiss Prime Taste AG · Stand 15.10.2026

   Steht auf:  admin.spoti.ch/login · akquise.spoti.ch/login.php ·
               sourcing.spoti.ch/?p=login · taragona.org/admin.html

   Kanonische Quelle: ~/Desktop/PROJEKTE/SPT-LOGIN/spt-login/
   HIER NICHT ÄNDERN. Dort ändern und mit
       bash ~/Desktop/PROJEKTE/SPT-LOGIN/verteilen.sh
   in alle vier Auftritte kopieren. Sonst laufen die Seiten wieder
   auseinander — genau so, wie der Fussbereich vor SPT-FOOTER.

   Grundlage: Skill «spt-design-system», Abschnitt 4 «Login- und
   Einstiegsseiten» (29.09.2026). Vorbild ist das Sales Cockpit.

   Die Komponente gilt nur innerhalb von .spt-login. Sie bringt Farben
   und Schriften selbst mit und setzt jede sichtbare Eigenschaft
   ausdrücklich — die Regeln der Seite darum herum für label, input,
   h1, p und .btn wirken deshalb nicht hinein, und umgekehrt.
   ===================================================================== */

/* Schriften liegen neben dieser Datei. Eigene Familiennamen, damit sie
   nie mit einer gleichnamigen Schrift der Seite (Google Fonts auf
   sourcing) um dieselben Zeichen konkurrieren. SIL Open Font License,
   Lizenztexte in fonts/. */
@font-face {
  font-family: 'SPT Jakarta';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'SPT Jakarta';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'SPT Jakarta';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'SPT Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'SPT Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}

/* ------------------------------------------------------------- Seite */

.spt-login {
  --spl-bg:             #0E0D0B;
  --spl-surface:        #16150F;
  --spl-border:         #262521;
  --spl-gold:           #D9B44A;
  --spl-gold-hover:     #C79E33;
  --spl-gold-light:     #E3CD86;
  --spl-text:           #FDFBF7;
  --spl-text-secondary: #C2BBAD;
  --spl-text-muted:     #9A948A;
  --spl-error:          #D9584E;
  --spl-sans: 'SPT Jakarta', 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --spl-mono: 'SPT Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --spl-motion: 150ms cubic-bezier(.2, 0, 0, 1);

  display: flex;
  flex-direction: column;
  align-items: center;
  /* min-height, nicht height: Ist der Inhalt höher als das Fenster,
     scrollt die Seite — oben wird nie abgeschnitten. */
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: clamp(40px, 9vh, 104px) 16px 0;
  background: var(--spl-bg);
  color: var(--spl-text);
  font-family: var(--spl-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Seiten, die die Anmeldung per Skript ausblenden (TARAGONA Admin:
   .hide), sollen das weiterhin können. */
.spt-login.hide,
.spt-login[hidden] {
  display: none;
}

.spt-login *,
.spt-login *::before,
.spt-login *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------- Karte */

.spt-login__karte {
  flex: none;
  width: 100%;
  max-width: 460px;
  margin: 0;
  padding: 48px 44px 44px;
  background: var(--spl-surface);
  border: 1px solid var(--spl-border);
  border-radius: 2px;
  box-shadow: none;
}

.spt-login__marke {
  display: block;
  width: auto;
  max-width: 100%;
  height: 68px;
  margin: 0 0 36px;
  border: 0;
}

.spt-login__label {
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--spl-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--spl-gold);
}

.spt-login__titel {
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--spl-sans);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--spl-text);
}
/* Genau ein Wort der Überschrift in Hellgold. */
.spt-login__titel span {
  color: var(--spl-gold-light);
}

.spt-login__text {
  margin: 0 0 32px;
  padding: 0;
  font-family: var(--spl-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--spl-text-muted);
}

/* Rückmeldung über dem Formular. Neutral, weil manche Seiten hier auch
   «Prüfe…» zeigen; ein Fehler bekommt den roten Rahmen. */
.spt-login__meldung {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--spl-border);
  border-radius: 2px;
  background: transparent;
  font-family: var(--spl-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--spl-text-secondary);
}
.spt-login__meldung--fehler {
  border-color: var(--spl-error);
  color: var(--spl-text);
}
.spt-login__meldung:empty {
  display: none;
}

/* ------------------------------------------------------------ Formular */

.spt-login__form {
  display: block;
  margin: 0;
  padding: 0;
}

.spt-login__feld {
  display: block;
  margin: 0 0 20px;
  padding: 0;
  font-family: var(--spl-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: var(--spl-text-secondary);
}

.spt-login__feld input {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 8px 0 0;
  padding: 12px 14px;
  background: var(--spl-bg);
  border: 1px solid var(--spl-border);
  border-radius: 2px;
  box-shadow: none;
  font-family: var(--spl-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: var(--spl-text);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--spl-motion);
}
.spt-login__feld input::placeholder {
  color: var(--spl-text-muted);
  opacity: 1;
}
.spt-login__feld input:hover {
  border-color: #3A3830;
}
.spt-login__feld input:focus {
  outline: 2px solid var(--spl-gold);
  outline-offset: 2px;
  border-color: var(--spl-gold);
}

/* Vom Browser ausgefüllte Felder färbt Chrome hellblau ein. Genau das
   liess die Anmeldungen auf admin.spoti.ch und sourcing.spoti.ch anders
   aussehen als das Sales Cockpit. Der eingesetzte innere Rahmen ist
   kein Schatten, sondern der einzige Weg, die Füllfarbe zu überschreiben. */
.spt-login__feld input:-webkit-autofill,
.spt-login__feld input:-webkit-autofill:hover,
.spt-login__feld input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--spl-text);
  caret-color: var(--spl-text);
  -webkit-box-shadow: 0 0 0 1000px var(--spl-bg) inset;
  box-shadow: 0 0 0 1000px var(--spl-bg) inset;
  transition: background-color 9999s ease-out 0s;
}

.spt-login__knopf {
  display: block;
  width: 100%;
  min-height: 50px;
  margin: 12px 0 0;
  padding: 0 20px;
  background: var(--spl-gold);
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  font-family: var(--spl-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--spl-bg);
  cursor: pointer;
  transition: background-color var(--spl-motion);
}
.spt-login__knopf:hover,
.spt-login__knopf:active {
  background: var(--spl-gold-hover);
}
.spt-login__knopf:focus-visible {
  outline: 2px solid var(--spl-gold);
  outline-offset: 2px;
}

.spt-login__fuss {
  margin: 24px 0 0;
  padding: 0;
  font-family: var(--spl-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--spl-text-secondary);
}
.spt-login__fuss a {
  color: var(--spl-gold);
  text-decoration: none;
  transition: color var(--spl-motion);
}
.spt-login__fuss a:hover {
  color: var(--spl-gold-hover);
}

/* ------------------------------------------------------------ Fusszeile */

/* Die Karte klebt nie am Fuss: Abstand nach Designsystem. Auf der
   Anmeldung trägt der Fuss weder Fläche noch Trennlinie — die Wortmarke
   steht schon in der Karte, der Fuss nennt die Firma nur noch in Schrift. */
.spt-login > footer {
  align-self: stretch;
  margin-top: clamp(64px, 12vh, 136px);
  background: transparent;
  border-top: 0;
}

/* Der gemeinsame Fuss (SPT-FOOTER v1) nimmt seine Schriften aus eigenen
   Variablen. Auf der Anmeldung zeigen sie auf die Schriften, die diese
   Komponente mitbringt — sonst steht die Karte in Plus Jakarta Sans und der
   Fuss darunter in Helvetica, wo die Seite selbst keine Schrift lädt. */
.spt-login > .spt-footer {
  --sptf-body: var(--spl-sans);
  --sptf-mono: var(--spl-mono);
}

/* Firmenname in Schrift statt Wortmarke — im Fuss der Anmeldung, weil die
   Wortmarke schon in der Karte steht. Gleich gesetzt wie im Sales Cockpit
   (.lockup--footer): Mono, Versalien, weit gesperrt. */
.spt-login__lockup {
  display: inline-block;
  font-family: var(--spl-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--spl-text);
}

/* --------------------------------------------------------------- Handy */

@media (max-width: 520px) {
  .spt-login__karte {
    padding: 36px 24px 32px;
  }
  .spt-login__marke {
    height: 54px;
    margin-bottom: 28px;
  }
  .spt-login__titel {
    font-size: 28px;
  }
}