:root {
  --login-bg: #ffffff;
  --login-muted: #f5f7fb;
  --text-dark: #0c2a43;
  --login-border: #d9e3ee; 
}

/* Hilfsklasse für Screenreader-Text */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Trigger/Icon --- */
.mod_user {
  position: relative;
}

.mod_user .ce_user_label,
.mod_user .close-btn{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: transparent;
  border: 1.5px solid var(--company-primary-color);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
  padding: 0;   
}
/* Icon-Farbe/Größe */
.mod_user .ce_user_label i,
.mod_user .close-btn i{
  font-size: 18px;
  color: var(--company-primary-color);
}

.mod_user .ce_user_label:hover {
  transform: translateY(-1px);
}
.mod_user .close-btn:hover{ transform: translateY(-1px); }
.mod_user .ce_user_label:focus,
.mod_user .close-btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(5,154,212,.2);
}
.mod_user.open .ce_user_label,
.mod_user.open .close-btn{
  background: rgba(5,154,212,.05);
}
/* Sichtbarkeit umschalten: standard = nur User anzeigen */
.mod_user .close-btn{ display: none; }
.mod_user.open .ce_user_label{ display: none; }
.mod_user.open .close-btn{ display: inline-flex; }
/* Falls der Header overflow verbirgt: aufheben, damit das Panel nicht abgeschnitten wird */
#header,
#stickyheader {
  overflow: visible;
}

/* --- Dropdown-Panel --- */
.mod_user .login_small {
  position: absolute;
  right: 0.6rem;
  top: 5rem;
  width: 360px;
  max-width: 85vw;
  background: white;
  background-color: white;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  padding: 18px 18px 16px;
  z-index: 10000;
}
.mod_user .login_small {
  display: none;
}
.mod_user.open .login_small {
  display: block;
}
.mod_user .login_small::before {
  content: "";
  position: absolute;
  right: 14px;
  top: -8px;
  width: 14px;
  height: 17px;
  background: var(--login-bg);
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.06);
}

/* Öffnen via Hover/Focus und via .open (JS/Mobile) */
#header .mod_user:hover .login_small,
#stickyheader .mod_user:hover .login_small,
.mod_user:focus-within .login_small,
.mod_user.open .login_small {
  display: block;
  animation: menuFade 0.12s ease-out;
}
@keyframes menuFade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* --- Mini-Login Look (überschreibt das Login-Template im Dropdown) --- */
.mod_user .login_small .login_news {
  background-color: white;
  box-shadow: none;
  padding: 0;
}
.mod_user .login_small .login_news h1,
.mod_user .login_small .login_news h2,
.mod_user .login_small .login_news h3 {
  margin: 0 0 0.5rem;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dark);
}
.mod_user .login_small .login_news .formbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Felder */
.mod_user .login_small input[type="text"],
.mod_user .login_small input[type="email"],
.mod_user .login_small input[type="password"] {
  width: 100%;
  padding: 9px 14px !important;
  border: 1px solid var(--login-border) !important;
  background: var(--login-muted);
  font-size: 16px;
  outline: none;
  transition: border 0.15s ease, box-shadow 0.15s ease;
}
.mod_user .login_small input[type="text"]::placeholder,
.mod_user .login_small input[type="email"]::placeholder,
.mod_user .login_small input[type="password"]::placeholder {
  color: #9aa7b6;
}
.mod_user .login_small input[type="text"]:focus,
.mod_user .login_small input[type="email"]:focus,
.mod_user .login_small input[type="password"]:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}


.mod_user .login_small .autologin_container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;         
  line-height: 1.2;
  border: 1px solid var(--login-border); 
  background-color: var(--login-muted);
}
.mod_user .login_small .autologin_container input[type="checkbox"] {
  margin: 0;   
  accent-color: var(--company-primary-color);
}
.mod_user .login_small .autologin_container label {
  cursor: pointer;
}

/* Button */
.mod_user .login_small .submit_button {
  margin-top: 4px;
  display: flex;
}
.mod_user .login_small .submit_button .submit {
  width: 100%;
  padding: 10px 16px;
  cursor: pointer;
  border: 1.5px solid var(--company-primary-color);
  background: var(--company-primary-color);
  color: #fff; 
  font-weight: 700;
  font-size: 18px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease;
}
.mod_user .login_small .submit_button .submit:hover {
  background: var(--company-primary-color);
  color: #fff;
}
.mod_user .login_small .submit_button .submit:active {
  transform: translateY(1px);
}


.mod_user .login_small .link_reset_pwd,
.mod_user .login_small .link_register,
.mod_user .login_small .link_personal_data {
  margin-top: 1px;
}

.mod_user .login_small .link_reset_pwd a,
.mod_user .login_small .link_register a,
.mod_user .login_small .link_personal_data a {
  padding:  0;
  font-size: 15px;
  font-weight: 600;
  color: var(--company-primary-color);
  text-decoration: none;
  line-height: 1.25;
}
.mod_user .login_small .link_reset_pwd a:hover,
.mod_user .login_small .link_register a:hover,
.mod_user .login_small .link_personal_data a:hover {
  text-decoration: underline;
}

/* Hinweis-Text (wenn eingeloggt) */
.mod_user .login_small .login_info {
  font-size: 14px;
  line-height: 1.45;
  color: #4b5a6a;
  background: var(--login-muted);
  border: 1px solid var(--login-border);
  border-radius: 6px;
  padding: 10px 12px;
}


.mod_user .login_small .login_news .submit_button,
.mod_user .login_small .login_news .link_reset_pwd,
.mod_user .login_small .login_news .link_register,
.mod_user .login_small .login_news .link_personal_data {
  margin-left: 0;
}


@media (max-width: 600px){
  .mod_user { position: relative; }
  .mod_user .login_small{
    position: absolute;     
    top: var(--header-height, 64px);
    right: -6.22rem;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 18px 20px;        
    box-sizing: border-box;    
    border-radius: 0;         
    box-shadow: 0 12px 30px rgba(0,0,0,.14);
    z-index: 10000;
  }

  .mod_user .login_small::before{ content: none; }
}