/* Login-Seite admin.tappr.ch — "Leitstand".
 *
 * Eigene Handschrift, bewusst anders als das Backoffice-Login (app.tappr.ch):
 * dunkel, monospace-getaktet, harte Kanten, ein einziger Glut-Akzent.
 *
 * WICHTIG — Theme:
 * Diese Seite steht FEST auf dunkel (data-theme="dark" hart im HTML, kein
 * theme.js, kein localStorage-Bootstrap). Die Hell/Dunkel-Wahl, die jemand
 * im Admin oder Backoffice trifft, darf die Eingangstuer nicht umfaerben.
 * Deshalb sind die Flaechen hier zusaetzlich als feste Hex-Werte gesetzt und
 * nicht ueber --tappr-bg-* — siehe Memory "Inverse Surfaces dark-safe".
 */

:root {
  --lg-void: #0C0C0D;
  --lg-panel: #111112;
  --lg-line: #232325;
  --lg-ink: #F2EFE9;
  --lg-ink-2: #A8A29A;
  /* Nicht dunkler: 10px-Monoschrift auf Schwarz braucht Kontrast — #8A837B
     liegt bei ~5:1, alles darunter faellt unter die Lesbarkeitsgrenze. */
  --lg-mute: #8A837B;
  --lg-ember: #FF6A47;
  --lg-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

body {
  background: var(--lg-void) !important;
  color: var(--lg-ink);
  min-height: 100vh;
}

/* ─────────────── Buehne ─────────────── */

.lg-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.lg-form-col {
  grid-column: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 5vw, 72px);
  background:
    radial-gradient(110% 70% at 0% 100%, rgba(255, 106, 71, 0.07) 0%, transparent 60%),
    var(--lg-void);
}

.lg-form {
  width: 100%;
  max-width: 396px;
}

/* ─────────────── Bild-Seite ─────────────── */

/* Das Bild liegt ueber die Mitte hinaus und wird per SVG-Kurve
   zurueckgeschnitten (Vorbild Fresha). Die Kurve steckt als <clipPath> im
   HTML, in objectBoundingBox-Einheiten — sie skaliert dadurch mit dem
   Element, statt auf feste Pixel festgenagelt zu sein.
   Sichtbare Kante liegt bei ~50% der Breite, unten schwingt sie nach rechts. */
.lg-stage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
  overflow: hidden;
  background: #0A0A0B;
  clip-path: url(#lg-curve);
}

.lg-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Langsames Heranfahren beim Laden — einmalig, dezent. */
  animation: lg-stage-in 1400ms var(--lg-ease) both;
}

@keyframes lg-stage-in {
  from { transform: scale(1.05); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Kein Verlauf mehr an der Schnittkante — die Kurve soll scharf stehen.
   Unten bleibt die Abdunklung, damit die Zeile traegt. */
.lg-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(8, 8, 9, 0.72) 100%);
  pointer-events: none;
}

.lg-stage-caption {
  position: absolute;
  /* rechts von der Schnittkante bleiben — unten schwingt die Kurve am
     weitesten nach rechts (22,5% der Bildbreite). */
  left: 34%;
  right: clamp(28px, 4vw, 56px);
  bottom: clamp(28px, 4vw, 56px);
  z-index: 1;
  animation: lg-rise 640ms var(--lg-ease) 420ms both;
}

.lg-stage-caption p {
  margin: 0;
  max-width: 30ch;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(242, 239, 233, 0.82);
}

.lg-stage-caption .lg-kicker {
  margin-bottom: 10px;
}

/* ─────────────── Typo-Bausteine ─────────────── */

.lg-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lg-mute);
}

.lg-kicker::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--lg-ember);
}

.lg-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(28px, 6vh, 52px);
}

.lg-brand .lg-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--lg-ember);
  color: #17110F;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.5px;
}

.lg-brand .lg-wordmark {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--lg-ink);
}

.lg-brand .lg-scope {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lg-mute);
  border: 1px solid var(--lg-line);
  border-radius: 4px;
  padding: 3px 7px;
}

.lg-title {
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--lg-ink);
  margin: 0 0 8px;
}

.lg-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--lg-ink-2);
  margin: 0 0 clamp(20px, 4vh, 30px);
}

.lg-sub code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--lg-ink);
}

.lg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--lg-line);
  font-size: 13px;
}

.lg-foot a {
  color: var(--lg-ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms var(--lg-ease), border-color 160ms var(--lg-ease);
}

.lg-foot a:hover { color: var(--lg-ink); border-bottom-color: var(--lg-ember); }

.lg-foot .lg-version {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lg-mute);
}

.lg-note {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lg-mute);
}

/* ─────────────── Formular ─────────────── */

.tappr-form-error {
  margin: 0 0 18px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 106, 71, 0.35);
  border-left-width: 2px;
  border-radius: 6px;
  background: rgba(255, 106, 71, 0.09);
  color: #FFC0AE;
  font-size: 13px;
  line-height: 1.45;
  display: none;
}
.tappr-form-error.is-visible {
  display: block;
  animation: lg-rise 240ms var(--lg-ease) both;
}

.lg-form .label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lg-ink-2);
}

.lg-form .input,
.lg-form .otp-input {
  background: var(--lg-panel);
  border: 1px solid var(--lg-line);
  border-radius: 6px;
  color: var(--lg-ink);
}

.lg-form .input:focus,
.lg-form .otp-input:focus {
  outline: none;
  border-color: rgba(255, 106, 71, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 106, 71, 0.14);
}

.lg-form .input::placeholder { color: var(--lg-mute); }

/* Autofill faerbt Chrome sonst hellblau ein. */
.lg-form .input:-webkit-autofill,
.lg-form .input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--lg-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--lg-panel) inset;
  caret-color: var(--lg-ink);
}

.input-with-icon { position: relative; }
.input-with-icon .icon-left {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lg-mute);
  pointer-events: none;
}
.input-with-icon .input { padding-left: 36px; }

.input-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lg-mute);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: color 160ms var(--lg-ease), background-color 160ms var(--lg-ease);
}
.input-toggle:hover { color: var(--lg-ink); background: rgba(255, 255, 255, 0.05); }

.lg-form .tappr-btn--primary {
  background: var(--lg-ember);
  border-color: var(--lg-ember);
  color: #17110F;
  border-radius: 7px;
  font-weight: 600;
  transition: transform 140ms var(--lg-ease), background-color 140ms ease,
              color 140ms ease, border-color 140ms ease;
}

/* Zeigen: der Knopf kippt auf weiss — brightness(1.06) auf Orange sah
   niemand. Schrift bleibt dunkel (auf Weiss braucht sie Kontrast), der
   orange Rand haelt die Marke. Nur mit echtem Zeiger, sonst klebt der
   Zustand auf dem Handy nach dem Antippen fest. */
@media (hover: hover) and (pointer: fine) {
  .lg-form .tappr-btn--primary:hover {
    background: #FFFFFF;
    color: #17110F;
    border-color: var(--lg-ember);
  }
}

.lg-form .tappr-btn--primary:active { transform: scale(0.97); }

.lg-form .tappr-btn--primary:focus-visible {
  outline: 2px solid var(--lg-ember);
  outline-offset: 2px;
}

/* Waehrend der Pruefung: Kreisel plus Text statt nur ausgegraut — sonst
   sieht ein gesperrter Knopf nach kaputt aus statt nach beschaeftigt. */
.lg-form .tappr-btn--primary.is-loading[disabled] {
  opacity: 1;
  cursor: progress;
}
.lg-form .tappr-btn--primary.is-loading::before {
  content: "";
  width: 15px;
  height: 15px;
  border: 2px solid rgba(23, 17, 15, 0.35);
  border-top-color: #17110F;
  border-radius: 50%;
  animation: lg-spin 620ms linear infinite;
}
@keyframes lg-spin { to { transform: rotate(360deg); } }

/* Zweite Stufe: Einmal-Code */

.step-2fa { display: none; }
.tappr-form-root[data-step="2fa"] .step-password { display: none; }
.tappr-form-root[data-step="2fa"] .step-2fa {
  display: block;
  animation: lg-rise 260ms var(--lg-ease) both;
}

.otp-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.otp-input {
  min-width: 0;
  width: 100%;
  height: 52px;
  padding: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 500;
  transition: border-color 160ms var(--lg-ease), box-shadow 160ms var(--lg-ease);
}

.step-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lg-mute);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 18px;
  transition: color 160ms var(--lg-ease);
}
.step-back:hover { color: var(--lg-ink); }

/* ─────────────── Auftritt ─────────────── */

@keyframes lg-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lg-form > * { animation: lg-rise 460ms var(--lg-ease) both; }
.lg-form > *:nth-child(1) { animation-delay: 40ms; }
.lg-form > *:nth-child(2) { animation-delay: 100ms; }
.lg-form > *:nth-child(3) { animation-delay: 150ms; }
.lg-form > *:nth-child(4) { animation-delay: 195ms; }
.lg-form > *:nth-child(5) { animation-delay: 235ms; }

/* ─────────────── Schmale Fenster ─────────────── */

@media (max-width: 900px) {
  .lg-shell { grid-template-columns: 1fr; }
  /* Hochkant liegt das Bild oben quer — dieselbe Kurve, nur um 90 Grad
     gedreht als eigene Pfad-Variante (#lg-curve-h). */
  /* relative, NICHT static: das Bild liegt absolut IM Buehnenkasten. Mit
   * static verliert der Kasten seine Ankerfunktion, das Bild rechnet gegen
   * die ganze Seite — es wurde 880px hoch statt 290 und zeigte damit einen
   * zufaelligen Ausschnitt eines hochkant gestreckten Fotos (dunkle Decke
   * statt Motiv). Gemessen am 04.08.2026. */
  .lg-stage {
    position: relative;
    width: auto;
    min-height: 32vh;
    order: -1;
    clip-path: url(#lg-curve-h);
  }
  .lg-form-col { grid-column: 1; }
  .lg-stage::after {
    background:
      linear-gradient(180deg, transparent 30%, rgba(12, 12, 13, 0.9) 100%);
  }
  .lg-stage-caption { display: none; }
  .lg-form-col { padding: clamp(24px, 7vw, 44px) clamp(20px, 6vw, 40px) 44px; }
}

/* ─────────────── Handy ───────────────
 *
 * Kein Foto (Owner-Entscheid 04.08.2026): auf dem Handy war es ein 290px
 * hoher Streifen ohne erkennbares Motiv und schob den Rest unter die
 * Kante. Die Schrift traegt den Auftritt, alles steht ohne Scrollen da.
 * Der Desktop bleibt unangetastet. */
@media (max-width: 767px) {
  .lg-stage { display: none; }

  .lg-form-col {
    align-items: flex-start;
    padding: 28px 20px 32px;
  }

  .lg-brand { margin-bottom: 20px; }
  .lg-title { font-size: 25px; }
  .lg-sub { margin-bottom: 16px; }
  .lg-form .tappr-form-error { margin-bottom: 12px; }
  .lg-foot { margin-top: 16px; }
  .lg-note { margin-top: 14px; }

  /* Tippziele auf 44px (CLAUDE.md): das Auge im Passwortfeld war 32px,
     der Fuss-Link 21px hoch. */
  .input-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  .lg-foot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  .otp-input { height: 46px; font-size: 18px; }
  .otp-row { gap: 6px; }
  .lg-title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-stage img,
  .lg-stage-caption,
  .lg-form > *,
  .tappr-form-error.is-visible,
  .tappr-form-root[data-step="2fa"] .step-2fa {
    animation: none;
  }
  .lg-form .tappr-btn--primary:active { transform: none; }
}