/* =========================================
   Login Banner: Bild oben, Login/Button darunter
   ========================================= */

/* Section-Hintergrundbild deaktivieren */
html body .login-banner.et_pb_section,
html body div.et_pb_section.login-banner {
  background-image: none !important;
  background-size: auto !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  aspect-ratio: auto !important;
  min-height: 0 !important;

  padding: 0 0 24px 0 !important;
  margin: 0 !important;

  background-color: #ffffff !important;
}

/* Bild als eigener Block */
html body .login-banner::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 2000 / 600;

  background-image: url("/assets/q/quadra/4691730a-9f2f-4f8c-afdd-5f1d379374c0/wp-content/uploads/2026/02/AirConso_Header_2000x600px_20260225_V3.jpg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;

  background-color: #ffffff;
}

/* Divi-Rows unter das Bild setzen + Verschiebung neutralisieren */
html body .login-banner .et_pb_row {
  position: relative !important;

  left: auto !important;
  right: auto !important;
  transform: none !important;

  width: 100% !important;
  max-width: 100% !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Erste Row mit Login/Logout */
html body .login-banner .et_pb_row_0 {
  padding-top: 18px !important;
}

/* Leere zweite Row ausblenden */
html body .login-banner .et_pb_row_1 {
  display: none !important;
}

/* Struktur unter dem Banner auf volle Breite setzen */
html body .login-banner .et_pb_row_0 .et_pb_column,
html body .login-banner .et_pb_row_0 .et_pb_code,
html body .login-banner .et_pb_row_0 .et_pb_code_inner,
html body .login-banner .et_pb_button_module_wrapper {
  width: 100% !important;
  max-width: 100% !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding: 0 !important;
  text-align: center !important;
}

/* Login-/Logout-Bereich */
html body .login-banner .airconso-user-logged-in {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  width: 100% !important;
  max-width: 100% !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding: 0 !important;
  text-align: center !important;
}

/* Willkommen-Text */
html body .login-banner .airconso-welcome-text {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

html body .login-banner .airconso-welcome-text,
html body .login-banner .airconso-welcome-text strong {
  color: #4a4a4a !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}

/* Button */
html body .login-banner .et_pb_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 160px !important;
  max-width: 100% !important;

  margin-left: auto !important;
  margin-right: auto !important;

  background: #dcab6b !important;
  color: #4a4a4a !important;

  border: 0 !important;
  border-radius: 0 !important;

  padding: 10px 22px !important;

  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}


/* =========================================
   Mobil
   ========================================= */

@media (max-width: 980px) {

  html body .login-banner.et_pb_section,
  html body div.et_pb_section.login-banner {
    padding-bottom: 20px !important;
  }

  html body .login-banner::before {
    aspect-ratio: 2000 / 600;
    background-size: contain;
    background-position: center center;
  }

  html body .login-banner .et_pb_row {
    left: auto !important;
    right: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 100% !important;

    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  html body .login-banner .et_pb_row_0 {
    padding-top: 14px !important;
  }

  html body .login-banner .airconso-user-logged-in {
    flex-direction: column !important;
    gap: 10px !important;
  }

  html body .login-banner .airconso-welcome-text,
  html body .login-banner .airconso-welcome-text strong {
    font-size: 15px !important;
  }

  html body .login-banner .et_pb_button {
    min-width: 160px !important;
  }
}


/* =========================================
   Kleine Smartphones
   ========================================= */

@media (max-width: 480px) {

  html body .login-banner::before {
    aspect-ratio: 2000 / 600;
  }

  html body .login-banner .et_pb_row {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  html body .login-banner .et_pb_button {
    width: 100% !important;
    max-width: 220px !important;
  }
}