/* all in media Webmail: Pink statt Blau, ruhige Flächen, hell und dunkel, lebendig animiert (14.11.2026) */
:root{--aim:#E5225A;--aim-dunkel:#c41a4b;--aim-weich:rgba(229,34,90,.12);--aim-gelb:#FFD166;--sanft:cubic-bezier(.22,1,.36,1)}

/* ---------- Farben im ganzen Webmail */
a,a:hover,.link,.formlinks a,#layout-sidebar .header a.button,.listing li a .unreadcount{color:var(--aim)}
.btn-primary,.btn-primary:focus,.btn-primary:active,.btn-primary:not(:disabled):not(.disabled):active,
#login-form .btn.submit,.ui-dialog .btn.mainaction,.btn.mainaction,button.mainaction{background-color:var(--aim)!important;border-color:var(--aim)!important;color:#fff!important}
.btn-primary:hover,.btn.mainaction:hover,#login-form .btn.submit:hover{background-color:var(--aim-dunkel)!important;border-color:var(--aim-dunkel)!important}
#layout-menu{background:#1a1420}
#layout-menu a.selected,#layout-menu .selected,#layout-menu a:hover{color:#fff!important;background-color:var(--aim)!important}
#layout-menu a.selected:before{color:#fff!important}
.listing li.selected,.listing tr.selected td,table.records-table tr.selected td,.listing li.selected>a,.treelist li.selected>a{background-color:var(--aim-weich)!important;color:inherit}
.listing li.selected>a,.treelist li.selected>a{border-left-color:var(--aim)!important}
table.messagelist tr.selected td,table.messagelist tr.focused td{background-color:rgba(229,34,90,.10)!important}
.unreadcount,.listing li .unreadcount,#layout-sidebar .treelist li a .unreadcount{background:var(--aim)!important;color:#fff!important}
.custom-control-input:checked~.custom-control-label:before,input[type=checkbox].form-check-input:checked,.custom-switch .custom-control-input:checked~.custom-control-label:before{background-color:var(--aim)!important;border-color:var(--aim)!important}
.form-control:focus,.custom-select:focus,input:focus,textarea:focus,select:focus{border-color:var(--aim)!important;box-shadow:0 0 0 .22rem rgba(229,34,90,.18)!important}
.toolbar a.button:hover{color:var(--aim)}
.ui-datepicker .ui-state-active,.ui-datepicker .ui-state-highlight{background:var(--aim)!important;border-color:var(--aim)!important;color:#fff!important}
.progress-bar,.quota-widget .bar .value{background-color:var(--aim)!important}
html.dark-mode #layout-menu{background:#0f0c11}

/* ---------- Bewegung im Webmail: weich, kurz, nie störend */
#layout-menu a,.toolbar a.button,.listing li a,table.messagelist tr td,.btn,.form-control,.custom-select,.unreadcount{transition:background-color .22s var(--sanft),color .22s var(--sanft),border-color .22s var(--sanft),box-shadow .22s var(--sanft),transform .22s var(--sanft)}
#layout-menu a:hover:before{animation:aim-wipp .45s var(--sanft)}
.toolbar a.button:hover:before{transform:translateY(-2px)}
.toolbar a.button:before{display:inline-block;transition:transform .22s var(--sanft)}
.listing li a:hover{background-color:rgba(229,34,90,.06)}
table.messagelist tbody tr{animation:aim-rein .35s var(--sanft) both}
table.messagelist tbody tr:nth-child(1){animation-delay:.02s}table.messagelist tbody tr:nth-child(2){animation-delay:.04s}
table.messagelist tbody tr:nth-child(3){animation-delay:.06s}table.messagelist tbody tr:nth-child(4){animation-delay:.08s}
table.messagelist tbody tr:nth-child(5){animation-delay:.1s}table.messagelist tbody tr:nth-child(6){animation-delay:.12s}
table.messagelist tbody tr:nth-child(7){animation-delay:.14s}table.messagelist tbody tr:nth-child(8){animation-delay:.16s}
table.messagelist tbody tr:nth-child(n+9){animation-delay:.18s}
.unreadcount{animation:aim-pop .4s var(--sanft) both}
.btn.mainaction:hover,.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(229,34,90,.7)}
.btn.mainaction:active,.btn-primary:active{transform:translateY(0) scale(.98)}
.popover,.ui-dialog,.popupmenu{animation:aim-auf .22s var(--sanft) both}
#messagestack div{animation:aim-auf .3s var(--sanft) both;border-radius:12px}

/* ---------- Anmeldung */
html body.task-login{background:#faf7f9!important;overflow-x:hidden}
html.dark-mode body.task-login{background:#141016!important}
body.task-login:before,body.task-login:after{content:"";position:fixed;z-index:0;pointer-events:none;border-radius:50%;filter:blur(60px);opacity:.55}
body.task-login:before{width:560px;height:560px;right:-160px;top:-200px;background:radial-gradient(circle,rgba(229,34,90,.55),transparent 65%);animation:aim-schweb1 18s ease-in-out infinite alternate}
body.task-login:after{width:520px;height:520px;left:-180px;bottom:-200px;background:radial-gradient(circle,rgba(140,90,255,.45),transparent 65%);animation:aim-schweb2 22s ease-in-out infinite alternate}
html.dark-mode body.task-login:before{opacity:.45}html.dark-mode body.task-login:after{opacity:.35}
body.task-login #layout,body.task-login #layout-content{background:transparent!important;position:relative;z-index:1}
#logo{max-width:min(320px,82vw)!important;height:auto!important;max-height:72px;animation:aim-logo .9s var(--sanft) both}
html.dark-mode #logo{filter:none!important;opacity:1!important}
#login-form{position:relative;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(229,34,90,.10);border-radius:20px;box-shadow:0 24px 60px -28px rgba(30,10,40,.40);padding:28px 26px 22px;max-width:420px;margin:0 auto;animation:aim-karte .8s .15s var(--sanft) both}
html.dark-mode #login-form{background:rgba(31,25,34,.82);border-color:rgba(255,255,255,.06);box-shadow:0 24px 60px -28px rgba(0,0,0,.85)}
#login-form table tr,#login-form .input-group{animation:aim-rein .6s var(--sanft) both}
#login-form tr:nth-child(1),#login-form .input-group:nth-of-type(1){animation-delay:.35s}
#login-form tr:nth-child(2),#login-form .input-group:nth-of-type(2){animation-delay:.45s}
#login-form input.form-control{border-radius:10px;padding:.65rem .8rem;height:auto}
#login-form input.form-control:focus{transform:translateY(-1px)}
#login-form .formbuttons{animation:aim-rein .6s .55s var(--sanft) both}
#login-form .btn.submit{position:relative;overflow:hidden;border-radius:12px;padding:.75rem;font-weight:700;width:100%;letter-spacing:.04em;transition:transform .2s var(--sanft),box-shadow .25s var(--sanft),background-color .2s}
#login-form .btn.submit:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:aim-glanz 4.5s 1.4s ease-in-out infinite}
#login-form .btn.submit:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(229,34,90,.8)}
#login-form .btn.submit:active{transform:translateY(0) scale(.985)}
.aim-hinweis{font-size:.82rem;color:#6b6070;margin:16px 0 0;line-height:1.5;text-align:center;animation:aim-rein .6s .7s var(--sanft) both}
html.dark-mode .aim-hinweis,html.dark-mode #login-footer{color:#a99fad}
#login-footer{color:#8a7f8e;animation:aim-rein .6s .8s var(--sanft) both}
#login-form .boxerror,#messagestack .error{animation:aim-schuettel .45s var(--sanft) both}

@keyframes aim-logo{0%{opacity:0;transform:translateY(-14px) scale(.86)}60%{opacity:1;transform:translateY(2px) scale(1.03)}100%{opacity:1;transform:none}}
@keyframes aim-karte{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes aim-rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes aim-auf{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes aim-pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
@keyframes aim-wipp{0%,100%{transform:none}40%{transform:translateY(-3px) rotate(-6deg)}70%{transform:translateY(1px) rotate(3deg)}}
@keyframes aim-glanz{0%{left:-60%}35%,100%{left:130%}}
@keyframes aim-schuettel{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@keyframes aim-schweb1{from{transform:translate(0,0) scale(1)}to{transform:translate(-120px,80px) scale(1.15)}}
@keyframes aim-schweb2{from{transform:translate(0,0) scale(1)}to{transform:translate(140px,-60px) scale(1.1)}}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}