/* ===== Isle of Light Login V11 (2026-08-20) ===== */

#login {
  background-color: #101722 !important;
  background-image:
    url('/WebInterface/images/loginbg_iol.jpg'),
    linear-gradient(165deg, #0c1118 0%, #1a2634 55%, #33475c 100%) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

#page-columns .bg-accentSecondary,
#page-columns .auth-banner-container { display: none !important; }

body.login-page .auth-section .auth-form-section,
#page-columns > div.p-4,
#page-columns > div.auth-form-section {
  flex: 1 1 100% !important;
  width: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  justify-content: flex-start !important;
  padding-left: clamp(24px, 10vw, 220px) !important;
}

/* Karte: Querformat, Milchglas, dezent */
#authFormContainer {
  max-width: 530px !important;
  width: 100%;
  background: rgba(255,255,255,0.62) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 16px;
  padding: 30px 32px 28px 32px;
  box-shadow: none !important;
}

/* Zwei Spalten: links Marke, rechts Formular */
#loginFormCard {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 34px;
  height: auto !important;
}
#loginFormCard > div:first-of-type {
  flex: 0 0 36%;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  margin-bottom: 0 !important;
}
#loginFormCard w-image.logo { width: 132px !important; max-width: 132px !important; display: block; }
#loginFormCard img.logo { width: 100% !important; max-width: 132px !important; height: auto !important; }
#loginFormCard > div:first-of-type::after {
  content: "To bring your story to life.";
  display: block;
  margin-top: 11px;
  max-width: 160px;
  font-size: 11.5px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(17,17,17,0.72);
}
#loginForm { flex: 1 1 auto; min-width: 0; }

/* Formular */
#loginForm label { font-size: 11.5px !important; color: rgba(17,17,17,0.62) !important; }
#usernameRow, #passwordRow { margin-bottom: 14px !important; }

#loginForm .input {
  border-radius: 9px;
  border: 1px solid rgba(17,17,17,0.14);
  background: rgba(255,255,255,0.75);
  height: 38px !important;
  font-size: 13.5px;
}
#loginForm .input:focus {
  border-color: rgba(17,17,17,0.7) !important;
  box-shadow: none !important;
  background: rgba(255,255,255,0.93);
}

/* nur der echte Submit-Button, nicht der Passwort-Link */
#loginForm button.primary-button:not(.forgot-link):not(.is-bg-none),
#loginForm input[type="submit"] {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
  border-radius: 9px;
  height: 40px !important;
  margin-top: 18px !important;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  box-shadow: none !important;
}
#loginForm button.primary-button:not(.forgot-link):not(.is-bg-none):hover { background: #2e2e2e !important; }

#loginForm button.forgot-link,
#login .lostpassword button, #login .lostpassword .primary-button {
  background: transparent !important;
  border: none !important;
  color: rgba(17,17,17,0.6) !important;
  text-decoration: none;
  font-size: 11.5px;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 18px !important;
  align-items: center !important;
}
#loginForm button.forgot-link:hover { text-decoration: underline; }

#forgotPasswordRow { height: auto !important; margin: 0 !important; }
#rememberPanel { margin: 0 !important; }
#rememberPanel label { font-size: 11.5px !important; color: rgba(17,17,17,0.7) !important; }

#login a, #login .text-accentMain { color: rgba(17,17,17,0.7) !important; }

w-theme, .multi-theme-icon-container { opacity: 0.4; }

#acceptCookieNotification { display: none !important; }

/* Schmale Fenster und iPhone: untereinander */
@media (max-width: 720px) {
  #login { background-attachment: scroll !important; }
  #authFormContainer {
    max-width: 340px !important;
    padding: 26px 24px 24px 24px !important;
    border-radius: 14px;
  }
  #loginFormCard { flex-direction: column !important; gap: 0 !important; }
  #loginFormCard > div:first-of-type {
    flex: 0 0 auto !important;
    margin-bottom: 22px !important;
    justify-content: flex-start !important;
  }
  #loginFormCard w-image.logo { width: 128px !important; }
  #loginFormCard img.logo { max-width: 128px !important; }
  #loginFormCard > div:first-of-type::after { max-width: none; }
  #page-columns > div.p-4,
  #page-columns > div.auth-form-section {
    justify-content: center !important;
    padding: 18px !important;
  }
}

/* ===== Passwort-vergessen-Seite (new-ui/reset.html) ===== */
section.reset-section {
  background-color: #101722 !important;
  background-image:
    url('/WebInterface/images/loginbg_iol.jpg'),
    linear-gradient(165deg, #0c1118 0%, #1a2634 55%, #33475c 100%) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
#page-columns > div.reset-form-section {
  flex: 1 1 100% !important;
  width: 100% !important;
  background: transparent !important;
  justify-content: flex-start !important;
  padding-left: clamp(24px, 10vw, 220px) !important;
}
#resetFormContainer {
  max-width: 560px !important;
  width: 100%;
  background: rgba(255,255,255,0.62) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 16px;
  padding: 30px 32px 28px 32px;
  box-shadow: none !important;
}
#resetFormCard.is-hidden { display: none !important; }
/* In-Page-Variante auf der Login-Seite: Vorhaengeschloss raus, Logo rein */
#resetFormCard > div.text-accentMain {
  background-image: url('/WebInterface/images/iollogo.png');
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 132px auto;
  padding-top: 18px !important;
}
#resetFormCard > div.text-accentMain > * { display: none !important; }
#resetFormCard:not(.is-hidden) {
  display: grid !important;
  grid-template-columns: 34% 1fr;
  grid-template-rows: auto auto;
  column-gap: 34px;
  height: auto !important;
}
#resetFormCard > div:first-of-type {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  margin-bottom: 0 !important;
}
#resetFormCard > div:first-of-type::after {
  content: "To bring your story to life.";
  display: block;
  margin-top: 11px;
  max-width: 160px;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(17,17,17,0.72);
}
#resetFormCard img.logo { width: 132px !important; max-width: 132px !important; height: auto !important; }
#resetFormCard > div.mb-4 { grid-column: 2; grid-row: 1; margin-bottom: 14px !important; }
#resetFormCard > form { grid-column: 2; grid-row: 2; }
.forgot-password-title { text-align: left !important; font-size: 17px !important; margin-bottom: 2px !important; }
.reset-password-label { text-align: left !important; font-size: 11.5px !important; color: rgba(17,17,17,0.62) !important; }
#resetForm label { font-size: 11.5px !important; color: rgba(17,17,17,0.62) !important; }
#resetForm .input {
  height: 38px !important;
  font-size: 13.5px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(17,17,17,0.14) !important;
  background: rgba(255,255,255,0.75) !important;
}
#resetFormCard button.primary-button:not(.is-bg-none):not(.is-bordered) {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
  border-radius: 9px !important;
  height: 40px !important;
  font-size: 13.5px !important;
  box-shadow: none !important;
}
#resetFormCard a.primary-button.is-bordered {
  border-radius: 9px !important;
  height: 40px !important;
  font-size: 13.5px !important;
  border: 1px solid rgba(17,17,17,0.25) !important;
  color: rgba(17,17,17,0.8) !important;
  background: transparent !important;
}
#backToLogin { color: rgba(17,17,17,0.6) !important; font-size: 11.5px !important; background: transparent !important; }

@media (max-width: 720px) {
  section.reset-section { background-attachment: scroll !important; }
  #resetFormContainer { max-width: 340px !important; padding: 26px 24px 24px 24px !important; }
  #resetFormCard { grid-template-columns: 1fr !important; }
  #resetFormCard > div:first-of-type { grid-column: 1; grid-row: auto; margin-bottom: 22px !important; }
  #resetFormCard > div.mb-4, #resetFormCard > form { grid-column: 1; grid-row: auto; }
  #page-columns > div.reset-form-section { justify-content: center !important; padding: 18px !important; }
}