/* Basis-Schriftart aktivieren */
body,
.disko-landing-wrapper,
.disko-landing-wrapper * {
  font-family: "InterVariable", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

/* ============================================
   2) Design-Variablen (Farben)
   ============================================ */

:root {
  --disko-bg: #f3f7f6;
  --disko-card-bg: #ffffff;
  --disko-border: #d6dfdd;
  --disko-text-main: #3a4a44;
  --disko-green-ui: #2fa88f;
  --disko-green-ui-hover: #27927c;
  --disko-green-lmu: #00883a;
  --disko-green-soft: #dff3ee;
  --disko-icon-soft: #7bafa6;
}

/* ============================================
   3) Grundlayout Landing Page
   ============================================ */

/* Haupt-Layout der Landing Page innerhalb von JomSocial
   <div id="community-wrap">
       <div class="container disko-landing-wrapper"> ... */
#community-wrap .container.disko-landing-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start; /* nichts an die Ränder drücken */

  /*max-width: 980px;*/
  max-width: 1180px;
  margin: 4.5rem auto 5rem;
  padding: 0 2rem;

  column-gap: 4.5rem;
  row-gap: 2rem;
  background: transparent;
}

/* Linke Spalte: Illustration + Text */
.disko-left {
  /*flex: 0 0 52%;*/
  flex: 0 0 50%;
  padding-right: 0;
}

/* Rechte Spalte: Login-Box */
.disko-right {
  flex: 0 0 360px;
  display: flex;
  justify-content: center;
}

/* ============================================
   4) Illustration & Textblock
   ============================================ */

.disko-illustration img {
  max-width: 100%;
  /*max-height: 260px;*/
  max-height: 600px;
  height: auto;
  margin-bottom: 1.5rem;
  display: block;
  border-radius: 1.5rem;
}

/* Überschrift */
.disko-text h1 {
  font-size: 2rem;
  margin-bottom: 0.7rem;
  color: var(--disko-green-lmu);
  font-weight: 600;
}

/* Fließtext */
.disko-text p {
  font-size: 0.98rem;
  color: var(--disko-text-main);
  line-height: 1.7;
  max-width: 460px;
  margin: 0;
}

/* ============================================
   5) Login-Card & Formular
   ============================================ */

.disko-login-box {
  background: var(--disko-card-bg);
  padding: 2.1rem 2.3rem;
  border-radius: 1.2rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--disko-border);
  margin-top:12px;
}

/* Checkbox „Angemeldet bleiben“ in der Login-Box */
.disko-login-box .joms-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.disko-login-box .joms-checkbox input[type="checkbox"] {
  position: relative !important;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
}

.disko-login-box .joms-checkbox label {
  font-size: 0.9rem !important;
  color: #3a4a44 !important;
  line-height: 1.2 !important;
  position: relative;
  top: 3px; /* optische Feinjustierung */
}

/* Input-Wrapper mit Icon */
.joms-input--append {
  position: relative;
  margin-bottom: 1rem;
}

/* Icons links im Input */
.joms-input--append .joms-icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: var(--disko-icon-soft);
}

/* Textfelder */
.joms-input {
  width: 100%;
  padding: 0.75rem 0.75rem 0.75rem 2.4rem;
  border-radius: 0.55rem;
  border: 1px solid #c9d8d4;
  background: #fcfefd;
  font-size: 0.95rem;
  color: var(--disko-text-main);
  box-sizing: border-box;
}

/* Login-Button */
.joms-button--login {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 0.7rem;
  border: none;
  background: var(--disko-green-ui);
  color: #ffffff;
  font-size: 1.02rem;
  margin-top: 0.6rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.05s ease;
  font-weight: 500;
}

.joms-button--login:hover {
  background: var(--disko-green-ui-hover);
}

.joms-button--login:active {
  transform: translateY(1px);
}

/* Remember + Links (allgemein) */
.joms-checkbox {
  margin-bottom: 0.5rem;
}

.joms-checkbox label {
  font-size: 0.9rem;
  color: var(--disko-text-main);
}

/* Links unter dem Formular */
.disko-login-box a {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.86rem;
  color: var(--disko-green-lmu);
  text-decoration: none;
}

.disko-login-box a:hover {
  text-decoration: underline;
}

/* Registrierungshinweis */
.disko-register-hint {
  margin-top: 1.2rem;
  font-size: 0.95rem;
  color: #3a4a44;
  text-align: center;
}

.disko-register-hint a {
  color: #129b73;
  font-weight: 500;
  text-decoration: none;
}

.disko-register-hint a:hover {
  text-decoration: underline;
}

/* ============================================
   7) Responsive Anpassungen
   ============================================ */

@media (max-width: 980px) {
  #community-wrap .container.disko-landing-wrapper {
    flex-direction: column;
    padding: 2rem 1.5rem;
    row-gap: 2.5rem;
  }

  .disko-left {
    padding-right: 0;
    text-align: center;
  }

  .disko-text p {
    margin: 0 auto;
  }

  .disko-right {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .disko-login-box {
    padding: 1.6rem 1.7rem;
    border-radius: 1rem;
  }

  .disko-text h1 {
    font-size: 1.8rem;
  }

  .disko-text p {
    font-size: 0.98rem;
  }
}