/* Letzte Cleaning Prüfung: 23.09.2026
   Letztes Cleaning: 26.08.2026 */

.factory-account-menu{
  position:fixed;
  z-index:120;
  width:min(198px,calc(100vw - 24px));
  min-width:0; /* upgrade.css setzt min-width:220px und wuerde die Breite sonst aufhalten */
  padding:8px;
  border:1px solid #2a2e3a;
  border-radius:14px;
  background:#171a23;
  color:#f5f6fa;
  box-shadow:0 20px 55px rgba(0,0,0,.48),0 0 0 1px rgba(255,48,79,.06);
  font-family:'DM Sans',Arial,sans-serif;
}
.factory-account-menu[hidden]{display:none}
.factory-account-menu-section{display:grid;gap:2px;padding-bottom:7px;margin-bottom:7px;border-bottom:1px solid #292d38}
.factory-account-menu-section:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.factory-account-menu button,.factory-account-menu a{width:100%;display:flex;align-items:center;gap:10px;min-height:35px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:#e6e8ed;text-align:left;font:600 12px/1.2 inherit;cursor:pointer;text-decoration:none;box-sizing:border-box}
.factory-account-menu button:hover,.factory-account-menu a:hover{background:#202430;color:#fff}
.factory-account-menu button i,.factory-account-menu a i{width:16px;flex:none;color:#939aaa;text-align:center;font-size:15px}
.factory-account-menu button:hover i,.factory-account-menu a:hover i{color:#ff3656}
.factory-account-menu .factory-account-menu-primary{background:#202430}
.factory-account-menu .factory-account-menu-primary i{color:#ff3656}
.factory-account-menu .factory-account-menu-danger{color:#ff9aaa}
.factory-account-menu .factory-account-menu-danger i{color:#ff4966}
.factory-account-menu .factory-account-menu-row{justify-content:space-between}
.factory-account-menu .factory-account-menu-row>span{display:flex;align-items:center;gap:10px}
.factory-account-menu .factory-account-menu-arrow{margin-left:auto;color:#777f91;font-size:12px}
.factory-account-menu .factory-account-toggle{position:relative;width:20px;height:12px;padding:0;border-radius:10px;background:#424957}
.factory-account-menu .factory-account-toggle::after{content:'';position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:#dce0e8;transition:transform .16s ease}
.factory-account-menu .factory-account-toggle.is-on{background:#287cff}
.factory-account-menu .factory-account-toggle.is-on::after{transform:translateX(8px)}
.factory-account-menu-label{padding:6px 10px 4px;color:#81899a;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.factory-account-menu-user{display:flex;align-items:center;gap:9px;padding:6px 7px;border-radius:9px;background:#202430}
.factory-account-menu-avatar{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#20a6e0;color:#fff;font-size:12px;font-weight:800}
.factory-account-menu-user-copy{min-width:0;display:grid;gap:2px}
.factory-account-menu-user-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.factory-account-menu-user-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8e96a8;font-size:10px}
.factory-account-menu-add{width:auto!important;min-height:27px!important;margin-left:auto;padding:5px 8px!important;border-radius:13px!important;background:#287cff!important;color:#fff!important;font-size:10px!important}
.factory-account-menu-add i{width:auto!important;color:#fff!important;font-size:12px!important}
#factory-profile{position:relative;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}
#factory-profile:hover,#factory-profile:focus-visible{border-color:#ff3656;background:#242936;transform:translateY(-1px);outline:none}
@media(max-width:520px){.factory-account-menu{right:12px!important;left:12px;width:auto}.factory-account-menu-user{min-height:39px}}

/* === Mobil: Menue unter dem Profilknopf, 28.08.2026 ======================
   Der 520px-Block oben setzt left:12px und zog das Menue an den linken
   Rand, waehrend der ausloesende Profilknopf rechts sitzt. Rechtsbuendig
   unter dem Knopf wirkt es wieder zugehoerig. */
/* control-center.css erzwingt per ID-Selektor width:236px - diese spaeter
   geladene Regel mit gleicher Spezifitaet stellt die schmale Breite her. */
#factory-account-menu.factory-account-menu{width:min(198px,calc(100vw - 24px))}
@media (max-width:520px) {
  .factory-account-menu{left:auto!important;right:12px!important;width:min(160px,calc(100vw - 24px))!important;padding:6px!important}
  .factory-account-menu button,.factory-account-menu a{min-height:34px;font-size:11px;gap:8px;padding:7px 9px}
  .factory-account-menu .factory-account-menu-user{min-height:36px}
}