/* Login-Seite im neuen Stil (17.10.2026, Vorlage loginpage.png).
   Nur Darstellung: Formulare, IDs und Klassen bleiben, weil js/login.js (Platzhalter, Pruefung),
   includes/footer.php (AJAX-Login/-Registrierung) und der Client (Leiste #so-logins in #login)
   darauf bauen. Laedt als letztes Stylesheet und ueberstimmt index.css/foot.css/mission.css. */

@font-face { font-family: 'logofont'; src: url('/public/fonts/pinkgalaxy.ttf'); }
@font-face { font-family: 'Rajdhani'; font-weight: 600; font-display: swap; src: url('/public/fonts/rajdhani/rajdhani-600.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-weight: 700; font-display: swap; src: url('/public/fonts/rajdhani/rajdhani-700.woff2') format('woff2'); }

:root {
  --sl-cyan: #00ccff;
  --sl-tuerkis: #00a5a4;
  --sl-rahmen: rgba(0, 204, 255, .85);
  --sl-feld: #2a2f36;
  --sl-feld-rand: rgba(255, 255, 255, .08);
  --sl-text: #e4edf6;
}

/* ---- Hintergrund: Nebel + Planet unten rechts ------------------------------------- */
html, body { min-height: 100%; }
html { scrollbar-width: thin; scrollbar-color: rgba(0, 165, 164, .7) #02050a; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #02050a; }
::-webkit-scrollbar-thumb { background: rgba(0, 165, 164, .7); border-radius: 4px; }
body { margin: 0 !important; background: #02050a url('/img/login-bg.jpg?v=2') center top / cover no-repeat fixed !important;
  display: flex !important; flex-direction: column; align-items: center; overflow-x: hidden;
  font-family: 'Exo', 'Open Sans', Arial, sans-serif; color: var(--sl-text); }
body > img[src*="backgroundnew"] { display: none !important; }
/* Logo und Planet stecken im Hintergrundbild (Vorlage bg.png) -- kein CSS-Planet, kein Text-Logo. */
body > br { display: none !important; }

/* ---- Reihenfolge: Logo, Login, Registrierung, Status ---------------------------- */
#bpLogo { order: 1; position: static !important; width: 1px !important; height: 13vh !important; margin: 0 !important; padding: 0 !important; background: none !important; }   /* Platzhalter unter dem Logo im Bild */
#bpLogo #PartnerCobrandLogo { display: none !important; }
#bpLogo .so-login-logo { display: none !important; font-family: 'logofont', 'Rajdhani', sans-serif; font-size: 68px; line-height: 1; letter-spacing: 3px; white-space: nowrap; user-select: none; }
#bpLogo .so-login-logo b { font-weight: normal; }
#bpLogo .so-login-logo b:first-child { color: #fff; text-shadow: 0 0 18px rgba(0, 165, 165, .95), 0 0 2px #fff; }
#bpLogo .so-login-logo b:last-child { color: var(--sl-cyan); text-shadow: 0 0 16px rgba(0, 217, 255, .95); }

#login { order: 2; position: relative !important; transform: none !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
  width: 580px !important; height: auto !important; margin: 9vh 0 0 !important; padding: 14px 16px 12px !important; box-sizing: border-box;
  background: rgba(3, 8, 14, .78) !important; border: 1px solid var(--sl-rahmen) !important; border-radius: 4px !important;
  box-shadow: 0 0 18px rgba(0, 204, 255, .35), inset 0 0 18px rgba(0, 204, 255, .06) !important; }
#reg { order: 3; position: relative !important; transform: none !important; margin-left: 0 !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
  width: 350px !important; height: auto !important; margin: 6vh 0 0 !important; padding: 16px 22px 18px !important; box-sizing: border-box;
  background: rgba(3, 8, 14, .78) !important; border: 1px solid var(--sl-rahmen) !important; border-radius: 4px !important;
  box-shadow: 0 0 18px rgba(0, 204, 255, .35), inset 0 0 18px rgba(0, 204, 255, .06) !important; }
#footer { order: 4; display: block !important; position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
#footer > .container { display: none !important; }   /* alter Status -- ersetzt durch #soLoginStatus (steht im Markup in #footer) */
#soLoginStatus { order: 4; margin: 18px 0 30px; font: 600 17px/1.2 'Rajdhani', 'Exo', sans-serif; letter-spacing: .5px; color: var(--sl-cyan); text-align: center; white-space: nowrap; }
#soLoginStatus .an { color: #2fd47a; }
#soLoginStatus .aus { color: #ff5a6a; }
#footer-alt { order: 4; position: static !important; width: auto !important; height: auto !important; margin: 18px 0 30px !important; background: none !important; border: 0 !important; }
#footer .container { width: auto !important; padding: 0 !important; margin: 0 !important; }
#status { position: static !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; background: none !important;
  font: 600 17px/1.2 'Rajdhani', 'Exo', sans-serif !important; letter-spacing: .5px; color: var(--sl-cyan) !important; text-align: center; }
#status { white-space: nowrap; }
#status b, #status font { font-weight: 600 !important; }
#status font[color="green"] { color: #2fd47a !important; }
#status font[color="red"] { color: #ff5a6a !important; }
body > a.footer { display: none !important; }   /* Nutzungsbedingungen stehen am Haken der Registrierung */

/* ---- Felder und Knoepfe (gemeinsam) -------------------------------------------- */
#login input[type="text"], #login input[type="password"],
#reg input[type="text"], #reg input[type="password"], #reg input[type="email"] {
  width: 100% !important; height: 40px !important; box-sizing: border-box; margin: 0 !important; padding: 0 12px !important;
  background: var(--sl-feld) !important; border: 1px solid var(--sl-feld-rand) !important; border-radius: 3px !important;
  color: #fff !important; font: 400 16px/40px 'Exo', 'Open Sans', Arial, sans-serif !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45) !important; outline: none; }
#login input::placeholder, #reg input::placeholder { color: #c9d3dc; opacity: 1; }
#login input:focus, #reg input:focus { border-color: var(--sl-cyan) !important; box-shadow: 0 0 0 1px rgba(0, 204, 255, .35), inset 0 1px 3px rgba(0, 0, 0, .45) !important; }
#login input.bgcdw_errors, #reg input.bgcdw_errors { border-color: #ff5a6a !important; }
#login .bgcdw_login_form_login label, #reg .bgc_signup_form_signup label { display: none !important; }   /* Platzhalter statt Beschriftung */
#login .bgc, #reg .bgc, #login .bgcdw_login_container_form, #reg .bgc_signup_container_form,
#login fieldset, #reg fieldset, #login form, #reg form, #reg h1, #reg #bgc_signup_short_container {
  position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important; float: none !important; }
#reg h1 { display: none !important; }

/* ---- Login: eine Reihe Benutzername | Passwort | Login --------------------------- */
#login form#login-form { display: grid !important; grid-template-columns: 1fr 1fr 126px; gap: 12px; align-items: center; }
#login fieldset.bgcdw_login_form_login { display: contents !important; }   /* NUR die Feldgruppe -- der Knopf traegt dieselbe Klasse */
#login fieldset.bgcdw_login_form_login > div { margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; position: static !important; }
#login .bgcdw_login_form_buttons { margin: 0 !important; }
#login #loginsubmit, #reg .bgc_signup_form_buttons button[type="submit"], #reg .bgc_signup_form_submit {
  width: 100% !important; height: 40px !important; margin: 0 !important; padding: 0 !important; cursor: pointer;
  background: var(--sl-cyan) !important; color: #00121a !important; border: 0 !important; border-radius: 3px !important;
  font: 700 19px/40px 'Exo', 'Open Sans', Arial, sans-serif !important; text-shadow: none !important; box-shadow: 0 0 12px rgba(0, 204, 255, .35) !important; }
#login #loginsubmit:hover, #reg .bgc_signup_form_buttons button:hover { filter: brightness(1.08); box-shadow: 0 0 18px rgba(0, 204, 255, .6) !important; }
#login #autoLogin { display: none !important; }

/* Leiste des Clients (src/preload-seite.js, Inline-Stile): als zweite Reihe IM Kasten. */
#login #so-logins { position: static !important; width: auto !important; margin: 12px 0 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important; gap: 14px !important;
  font: 600 16px/1 'Rajdhani', 'Exo', sans-serif !important; color: var(--sl-text) !important; }
#login #so-logins > div { padding-right: 14px !important; gap: 10px !important; border-right: 1px solid rgba(0, 204, 255, .55) !important; }
#login #so-logins span { color: var(--sl-text) !important; }
#login #so-logins select { height: 32px !important; min-width: 118px; max-width: 170px !important; padding: 0 8px !important; border: 1px solid rgba(0, 204, 255, .6) !important;
  border-radius: 3px !important; background: #0b1520 !important; color: #fff !important; font: 500 14px 'Exo', Arial, sans-serif !important; }
#login #so-logins button { height: 32px !important; border-radius: 3px !important; font: 700 14px 'Exo', Arial, sans-serif !important; }
#login #so-logins button:first-of-type { padding: 0 28px !important; }
#login #so-logins button:last-of-type { width: 32px !important; color: var(--sl-cyan) !important; border: 1px solid rgba(0, 204, 255, .6) !important; font-size: 16px !important; }
#login #so-logins label input { width: 20px !important; height: 20px !important; }

/* ---- Registrierung: gestapelt, Haken, Register ---------------------------------- */
#reg .bgc_signup_form_signup { display: flex !important; flex-direction: column; gap: 10px; }
#reg .bgc_signup_form_signup > div { margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; position: static !important; }
#reg .bgc_signup_form_legal { display: flex !important; align-items: center; height: auto !important; margin: 14px 0 12px !important;
  padding-top: 39px !important; }   /* das Feld traegt inline margin-top:-25px !important -- per Innenabstand ausgeglichen */
#reg .bgc_signup_form_legal .bgc_input_checkbox { display: flex !important; align-items: center; gap: 12px; margin: 0 !important; padding: 0 !important; width: auto !important; }
#reg #r-terms { width: 22px !important; height: 22px !important; margin: 0 !important; accent-color: var(--sl-cyan); cursor: pointer; }
#reg #label_termsAndConditions { display: inline !important; position: static !important; margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important;
  font: 500 17px/1.2 'Exo', 'Open Sans', Arial, sans-serif !important; color: var(--sl-cyan) !important; }
#reg #label_termsAndConditions a { color: var(--sl-cyan) !important; text-decoration: none; }
#reg #label_termsAndConditions a:hover { text-decoration: underline; }
#reg .bgc_signup_form_buttons { display: block !important; }
#reg .bgc_signup_form_back { display: none !important; }   /* "Volver" fuehrte auf /lp/main -- gibt es nicht */
#reg .bgc_signup_form_buttons button[type="submit"], #reg .bgc_signup_form_submit { height: 46px !important; font-size: 21px !important; line-height: 46px !important; }
#reg #resultAll { margin: 10px 0 0 !important; border: 1px solid #ff5a6a !important; border-radius: 3px; color: #ffd0d5; background: rgba(255, 90, 106, .1); }

/* ---- Kleine Fenster ---------------------------------------------------------------- */
@media (max-height: 820px) {
  #login { margin-top: 5vh !important; }
  #reg { margin-top: 4vh !important; }
}
@media (max-width: 640px) {
  #login { width: calc(100vw - 32px) !important; }
  #login form#login-form { grid-template-columns: 1fr; }
  #bpLogo .so-login-logo { font-size: 42px; }
}
#login .bgc_fbConnect_container_link, #reg .bgc_fbConnect_container_link { display: none !important; }   /* leerer Facebook-Platzhalter */