/* ==========================================================
   Blocksy Child – Login / Konto Styles (Orange Variante)
   ========================================================== */

/* ---------- Grundlayout Formular ---------- */
.tips-login {
  max-width: 520px;
  margin: 1.2rem 0 3rem;
}
.tips-login-form p { margin: 0 0 16px; }
.tips-login-form label {
  display:block;
  font-size: 0.95rem;
  color:#e56a00; /* Orange statt Lila */
  margin:0 0 6px;
}

/* ---------- Floating Labels ---------- */
.form-group.floating-label {
  position: relative;
  margin-bottom: 18px;
}
.form-group.floating-label input {
  width: 100%;
  padding: 14px 14px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
  font-size: 1rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-group.floating-label label {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: #e56a00; /* Orange */
  font-size: 0.95rem;
  pointer-events: none;
  transition: all 0.2s ease;
}
/* Placeholder unsichtbar */
.form-group.floating-label input::placeholder { color: transparent; }

/* Label hochschieben */
.form-group.floating-label input:focus + label,
.form-group.floating-label input:not(:placeholder-shown) + label {
  top: -12px;
  left: 12px;
  font-size: 0.75rem;
  color: #f57c00; /* helleres Orange */
  background: #fff;
  padding: 0 4px;
  border-radius: 4px;
  transform: none;
}

.form-group.floating-label input:focus {
  border-color: #f57c00; 
  box-shadow: 0 0 0 3px rgba(245,124,0,0.25);
  outline: none;
}

/* ---------- Checkbox modern, rund ---------- */
#tips-login-form .forgetmenot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 20px;
}
#rememberme {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px; height: 20px;
  border: 2px solid #f57c00;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  background: #fff;
  transition: all 0.25s ease;
  position: relative;
}
#rememberme:hover {
  border-color: #e56a00;
  box-shadow: 0 0 0 4px rgba(245,124,0,0.15);
}
#rememberme:checked {
  background: #f57c00;
  border-color: #f57c00;
  box-shadow: 0 0 0 4px rgba(245,124,0,0.25);
}
#tips-login-form .forgetmenot label {
  font-size: 0.95rem;
  color: #444;
  cursor: pointer;
}

/* ==========================================================
   Buttons – einheitliche Basis & Varianten (Orange)
   ========================================================== */

.tips-login-form .button,
.account-buttons .button,
.submit-buttons .button,
#tips-login-submit {
  display:inline-block;
  padding: 12px 18px;
  border:0;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none !important;
  color:#fff !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  transition: transform .05s ease, box-shadow .2s ease, filter .2s ease;
}

.tips-login-form .button:hover,
.account-buttons .button:hover,
.submit-buttons .button:hover,
#tips-login-submit:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  filter: brightness(1.08);
}
.tips-login-form .button:active,
.account-buttons .button:active,
.submit-buttons .button:active,
#tips-login-submit:active {
  transform: translateY(1px);
}

/* ---- Primary (Einloggen) ---- */
#tips-login-submit {
  background-image: linear-gradient(180deg, #ff8f26, #f57c00);
  box-shadow: 0 6px 16px rgba(245,124,0,.25);
}

/* ---- Secondary (Passwort ändern etc.) ---- */
.button-secondary {
  background-image: linear-gradient(180deg, #ffb06c, #ff8f26);
  box-shadow: 0 6px 16px rgba(255,143,38,.25);
}

/* ---- Danger (Abmelden) ---- */
.button-danger {
  background-image: linear-gradient(180deg, #ff6b6b, #d94a4a);
  box-shadow: 0 6px 16px rgba(217,74,74,.25);
}

/* ---------- Button-Gruppen ---------- */
.submit-buttons,
.account-buttons {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  align-items: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  .submit-buttons,
  .account-buttons {
    flex-wrap: wrap;
  }
}

/* ---------- Registrierung Slide-Fade ---------- */
#reg-form { 
  display:none; 
  opacity:0; 
  transform: translateY(8px); 
  transition: opacity .25s ease, transform .25s ease; 
}
#reg-form.is-active { 
  display:block; 
  opacity:1; 
  transform: translateY(0); 
}

#reg-intro { opacity:1; transition: opacity .2s ease; }
#reg-intro.is-hidden { opacity:0; }