/* Anmeldeseite im Bild des Landesjugendring Saar (28.10.2026).
   Eingehaengt von /docker-entrypoint.d/40-ljr.sh, Bewegung in ljr.js.
   Gilt nur fuer die Anmeldeseite im hellen Thema, Sitzungen und dunkles
   Thema bleiben wie OpenSlides sie liefert. */

/* ── Flaeche und Schwarm ─────────────────────────────── */
.openslides-light-theme os-login-wrapper .main-login-wrapper {
  position: relative;
  overflow: hidden;
  background-color: #f7f6f2 !important;
}
.openslides-light-theme os-login-wrapper .content-wrapper {
  position: relative;
  z-index: 1;
}
.ljr-schwarm {
  --px: 0;
  --py: 0;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.openslides-dark-theme .ljr-schwarm {
  display: none;
}
.ljr-lage {
  position: absolute;
  display: block;
  transform: translate3d(calc(var(--px) * var(--t) * 1.4vmin), calc(var(--py) * var(--t) * 1.4vmin), 0);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ljr-kreis {
  display: block;
  border-radius: 50%;
  animation: ljr-schaukeln var(--dauer) ease-in-out var(--verzug) infinite;
  will-change: transform;
}
@keyframes ljr-schaukeln {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  22% { transform: translate3d(var(--dx), calc(var(--dy) * -0.5), 0) scale(1.05); }
  51% { transform: translate3d(calc(var(--dx) * 0.4), var(--dy), 0) scale(0.97); }
  78% { transform: translate3d(calc(var(--dx) * -0.9), calc(var(--dy) * 0.5), 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .ljr-kreis { animation: none; }
  .ljr-lage { transition: none; }
}

/* ── Kopf mit LJR-Logo ───────────────────────────────── */
.openslides-light-theme os-login-wrapper .login-logo-bar {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e3db;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.openslides-light-theme os-login-wrapper .login-logo-bar a {
  /* OpenSlides laesst den Kopf beim Scrollen von 200 auf 80 px schrumpfen;
     das Logo waechst und schrumpft mit. */
  display: block;
  height: calc(100% - 16px);
  max-height: 104px;
  aspect-ratio: 456 / 240;
  background: url("/ljr/ljr-logo.png") center / contain no-repeat;
}
.openslides-light-theme os-login-wrapper .login-logo-bar a img {
  visibility: hidden;
}

/* ── Karte: alles Lesbare liegt auf Weiss, die Kreise dahinter ── */
.openslides-light-theme os-login-mask .form-wrapper {
  box-sizing: border-box;
  max-width: 480px;
  margin: 32px auto 24px;
  padding: 28px 28px 20px;
  background: #ffffff;
  border: 1px solid #e5e3db;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(40, 37, 29, 0.10);
}
.openslides-light-theme os-login-mask .header-name h1 {
  margin-top: 0;
}
.openslides-light-theme os-login-mask .login-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.openslides-light-theme os-login-mask .login-container > mat-card {
  box-shadow: none !important;
  background: transparent !important;
  text-align: center;
  font-size: 15px;
}
/* Hauptweg: Zugangsdaten zuerst. */
.openslides-light-theme os-login-mask .login-container > mat-expansion-panel {
  order: -1;
  margin-top: 0 !important;
  border: 1px solid #e5e3db;
  box-shadow: none !important;
}
/* Nebenweg: Anmeldung ueber das Portal als schlichter Link darunter. */
.openslides-light-theme os-login-mask .login-container > button.login-button {
  order: 1;
  margin-top: 4px;
  background: transparent !important;
  box-shadow: none !important;
  color: #6b6860 !important;
  font-weight: 400;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.openslides-light-theme os-login-mask .login-container > button.login-button:hover {
  color: #c41532 !important;
}
/* Fusszeile lesbar ueber dem Schwarm. */
.openslides-light-theme os-login-wrapper .footer {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
}

@media (max-width: 600px) {
  .openslides-light-theme os-login-wrapper .login-logo-bar a {
    max-height: 72px;
  }
  .openslides-light-theme os-login-mask .form-wrapper {
    margin: 20px 16px;
    padding: 22px 18px 14px;
  }
}

/* Abstaende in der Karte enger als im Original (dort stehen Titel, Text und
   Formular frei auf der Flaeche). */
.openslides-light-theme os-login-mask .header-name h1 {
  margin-bottom: 4px;
}
.openslides-light-theme os-login-mask .login-container {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}
.openslides-light-theme os-login-mask .header-name {
  padding-top: 8px !important;
}
.openslides-light-theme os-login-mask .login-container {
  padding-top: 8px !important;
}