:root {
  /* Rams-Redesign (2026-10-01): Aliase auf web/css/shared-tokens.css (einzige
     Quelle der Wahrheit) statt eigener kuehler Hex-Werte. */
  --login-bg: var(--op-bg, #f4f2ed);
  --login-card: var(--op-panel, #ffffff);
  --login-text: var(--op-text, #1b1a17);
  --login-muted: var(--op-muted, #736f65);
  --login-border: var(--op-line, #e3e0d8);
  --login-tint: var(--op-tint, #f7f5f0);
  --login-accent: var(--op-accent, #c6491f);
  --login-accent-hover: var(--op-accent-hover, #a83b18);
  --login-focus: rgba(198, 73, 31, 0.32);
  --login-button: var(--login-accent);
  --login-button-hover: var(--login-accent-hover);
  --login-button-text: #ffffff;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Manrope", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  color: var(--login-text);
  background: var(--login-bg);
}

.login-page {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 20px;
}

.login-card {
  width: min(460px, 96vw);
  border: 1px solid var(--login-border);
  border-radius: 14px;
  background: var(--login-card);
  box-shadow: 0 24px 56px rgba(27, 26, 23, 0.16);
  padding: 26px 22px 22px;
}

.login-logo {
  display: block;
  width: min(210px, 62%);
  height: auto;
  margin: 0 auto 12px;
}

h1 {
  margin: 0;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

p {
  margin: 8px 0 18px;
  text-align: center;
  color: var(--login-muted);
  font-size: 14px;
}

.login-form {
  display: grid;
  gap: 8px;
}

label {
  font-size: 13px;
  font-weight: 700;
  color: var(--login-muted);
}

input {
  width: 100%;
  border: 1px solid var(--login-border);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  background: var(--login-tint);
  color: var(--login-text);
}

input:focus {
  outline: 0;
  border-color: var(--login-accent);
  box-shadow: 0 0 0 3px var(--login-focus);
}

.password-row {
  position: relative;
}

.password-row input {
  padding-right: 100px;
}

.toggle-password-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  min-height: 32px;
  margin: 0;
  border: 1px solid var(--login-border);
  border-radius: 9px;
  background: var(--login-card);
  color: var(--login-text);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.toggle-password-btn:hover {
  background: var(--login-tint);
  box-shadow: none;
}

button {
  margin-top: 8px;
  min-height: 44px;
  border: 1px solid var(--login-button);
  border-radius: 12px;
  background: var(--login-button);
  color: var(--login-button-text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.06s ease, background 0.15s ease, box-shadow 0.15s ease;
}

button:hover {
  background: var(--login-button-hover);
  box-shadow: 0 10px 18px rgba(198, 73, 31, 0.25);
}

button:active {
  transform: translateY(1px);
}

#loginBtn:disabled {
  opacity: 0.88;
  cursor: wait;
}

#loginBtn.is-loading::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-top-color: #ffffff;
  animation: login-spin 0.8s linear infinite;
  vertical-align: -2px;
}

@keyframes login-spin {
  to {
    transform: rotate(360deg);
  }
}

#loginError {
  min-height: 20px;
  margin-top: 6px;
  font-size: 13px;
  color: #b91c1c;
}

/* ===== Saisonale Login-Themes (2026-10-14, erweitert 2026-10-14) =====
   data-season wird synchron per Inline-Script in login.html gesetzt (siehe
   dort), damit kein normales Theme kurz aufblitzt. Bewusst zurueckhaltend:
   Seiten-Hintergrund + Akzentfarbe + grosse, blasse Eck-Embleme + ein
   kleines Emoji vor der Ueberschrift - die Karte selbst bleibt hell/lesbar,
   das ist weiterhin die Anmeldeseite, kein Spielzeug. */
:root[data-season="halloween"] {
  --login-bg: radial-gradient(circle at 20% 20%, #3a2259 0%, #1c1030 55%, #120a1f 100%);
  --login-accent: #f97316;
  --login-accent-hover: #ea580c;
  --login-focus: rgba(249, 115, 22, 0.32);
}
:root[data-season="christmas"] {
  --login-bg: linear-gradient(135deg, #0b3d2e 0%, #123a2c 45%, #7a1f2b 100%);
  --login-accent: #b91c1c;
  --login-accent-hover: #991515;
  --login-focus: rgba(185, 28, 28, 0.32);
}
/* Tag der Deutschen Einheit (3.10.) - Flaggenfarben Schwarz-Rot-Gold als
   Verlauf in der echten Streifenreihenfolge der Flagge (oben->unten). */
:root[data-season="unity"] {
  --login-bg: linear-gradient(180deg, #151515 0%, #cc0000 50%, #ffce00 100%);
  --login-accent: #cc0000;
  --login-accent-hover: #a30000;
  --login-focus: rgba(204, 0, 0, 0.32);
}
/* Silvester (27.-31.12.) und Neujahr (1.-5.1.) teilen sich bewusst dieselbe
   Nachthimmel-Optik (durchgehender Bogen ueber den Jahreswechsel hinweg,
   kein harter Farbsprung genau um Mitternacht), unterscheiden sich nur in
   Emoji/Ueberschrift-Praefix. */
:root[data-season="silvester"],
:root[data-season="newyear"] {
  --login-bg: linear-gradient(135deg, #0f0c29 0%, #302b63 55%, #1b1836 100%);
  --login-accent: #f59e0b;
  --login-accent-hover: #d97706;
  --login-focus: rgba(245, 158, 11, 0.32);
}

:root[data-season="halloween"] .login-page,
:root[data-season="christmas"] .login-page,
:root[data-season="unity"] .login-page,
:root[data-season="silvester"] .login-page,
:root[data-season="newyear"] .login-page {
  position: relative;
  overflow: hidden;
}
:root[data-season="halloween"] .login-page::before,
:root[data-season="halloween"] .login-page::after,
:root[data-season="christmas"] .login-page::before,
:root[data-season="christmas"] .login-page::after,
:root[data-season="unity"] .login-page::before,
:root[data-season="unity"] .login-page::after,
:root[data-season="silvester"] .login-page::before,
:root[data-season="silvester"] .login-page::after,
:root[data-season="newyear"] .login-page::before,
:root[data-season="newyear"] .login-page::after {
  content: "";
  position: fixed;
  font-size: min(22vw, 220px);
  line-height: 1;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
/* Halloween-Embleme (Kuerbis/Gespenst) auf User-Wunsch ("größer") deutlich
   groesser als die anderen Saisons - gleiche Selektor-Spezifitaet wie oben,
   gewinnt per Reihenfolge im Dokument. */
:root[data-season="halloween"] .login-page::before,
:root[data-season="halloween"] .login-page::after {
  font-size: min(32vw, 360px);
  opacity: 0.2;
}
:root[data-season="halloween"] .login-page::before { content: "🎃"; top: -6%; left: -6%; }
:root[data-season="halloween"] .login-page::after { content: "👻"; bottom: -8%; right: -6%; }
:root[data-season="christmas"] .login-page::before { content: "🎄"; top: -4%; left: -4%; }
:root[data-season="christmas"] .login-page::after { content: "❄️"; bottom: -6%; right: -4%; }
:root[data-season="unity"] .login-page::before { content: "🇩🇪"; top: -4%; left: -4%; }
:root[data-season="silvester"] .login-page::before { content: "🎆"; top: -4%; left: -4%; }
:root[data-season="silvester"] .login-page::after { content: "🎇"; bottom: -6%; right: -4%; }
:root[data-season="newyear"] .login-page::before { content: "🎉"; top: -4%; left: -4%; }
:root[data-season="newyear"] .login-page::after { content: "🥂"; bottom: -6%; right: -4%; }

:root[data-season="halloween"] .login-card,
:root[data-season="christmas"] .login-card,
:root[data-season="unity"] .login-card,
:root[data-season="silvester"] .login-card,
:root[data-season="newyear"] .login-card {
  position: relative;
  z-index: 1;
}
/* Drittes Halloween-Element (User-Wunsch "vielleicht noch was anderes"):
   ein Spinnennetz, das ueber die obere rechte Kartenecke haengt - naeher
   an der Karte und deutlicher sichtbar als die beiden grossen, blassen
   Hintergrund-Embleme. */
:root[data-season="halloween"] .login-card::after {
  content: "🕸️";
  position: absolute;
  top: -20px;
  right: -16px;
  font-size: 46px;
  line-height: 1;
  opacity: 0.6;
  transform: rotate(8deg);
  pointer-events: none;
  z-index: 2;
}
:root[data-season="halloween"] h1::before { content: "🎃 "; }
:root[data-season="christmas"] h1::before { content: "🎄 "; }
:root[data-season="unity"] h1::before { content: "🇩🇪 "; }
:root[data-season="silvester"] h1::before { content: "🎆 "; }
:root[data-season="newyear"] h1::before { content: "🎉 "; }