/* 320 FM HEADER INTERACTIONS V1 */

.fm-header-search,
.fm-account-menu{
    position:relative;
}


.fm-search-trigger{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    padding:0;
    cursor:pointer;
}


.fm-search-trigger > span{
    position:relative;
    display:block;
    width:12px;
    height:12px;
    border:1.7px solid #d7e0e5;
    border-radius:50%;
}


.fm-search-trigger > span::after{
    content:"";
    position:absolute;
    right:-5px;
    bottom:-3px;
    width:6px;
    height:1.7px;
    border-radius:2px;
    background:#d7e0e5;
    transform:rotate(45deg);
    transform-origin:left center;
}


.fm-search-panel,
.fm-account-panel{
    position:absolute;
    top:calc(100% + 15px);
    z-index:120;
    border:1px solid #26343d;
    background:
        linear-gradient(
            180deg,
            #10181d,
            #0b1115
        );
    box-shadow:
        0 22px 55px rgba(0,0,0,.48);
}


.fm-search-panel{
    right:-50px;
    width:min(460px,calc(100vw - 30px));
    border-radius:12px;
    overflow:hidden;
}


.fm-search-panel::before,
.fm-account-panel::before{
    content:"";
    position:absolute;
    top:-7px;
    width:12px;
    height:12px;
    border-top:1px solid #26343d;
    border-left:1px solid #26343d;
    background:#10181d;
    transform:rotate(45deg);
}


.fm-search-panel::before{
    right:58px;
}


.fm-account-panel::before{
    right:32px;
}


.fm-search-input-wrap{
    display:grid;
    grid-template-columns:28px 1fr 30px;
    align-items:center;
    gap:7px;
    padding:11px 12px;
    border-bottom:1px solid #202c33;
}


.fm-search-input-icon{
    position:relative;
    width:12px;
    height:12px;
    margin-left:4px;
    border:1.6px solid #6e818d;
    border-radius:50%;
}


.fm-search-input-icon::after{
    content:"";
    position:absolute;
    right:-5px;
    bottom:-3px;
    width:6px;
    height:1.6px;
    background:#6e818d;
    transform:rotate(45deg);
}


.fm-search-input-wrap input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:#f2f6f8;
    font:inherit;
    font-size:13px;
}


.fm-search-input-wrap input::placeholder{
    color:#667983;
}


.fm-search-close{
    width:28px;
    height:28px;
    padding:0;
    color:#71828c !important;
    cursor:pointer;
}


.fm-search-results{
    max-height:min(520px,65vh);
    overflow:auto;
    padding:7px;
    scrollbar-width:thin;
    scrollbar-color:#33434c transparent;
}


.fm-search-empty,
.fm-search-loading{
    padding:18px 14px;
    color:#758690;
    font-size:11px;
    line-height:1.5;
}


.fm-search-group{
    padding:5px 0 8px;
}


.fm-search-group + .fm-search-group{
    border-top:1px solid #1d282e;
}


.fm-search-group__label{
    display:block;
    padding:7px 9px 5px;
    color:#4cccf3;
    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
}


.fm-search-result{
    display:grid;
    gap:2px;
    padding:9px 10px;
    border-radius:7px;
    text-decoration:none;
    transition:
        background .14s ease,
        transform .14s ease;
}


.fm-search-result:hover,
.fm-search-result:focus-visible{
    background:#172229;
    transform:translateX(2px);
}


.fm-search-result strong{
    overflow:hidden;
    color:#e8eef1;
    font-size:11px;
    font-weight:750;
    text-overflow:ellipsis;
    white-space:nowrap;
}


.fm-search-result small{
    overflow:hidden;
    color:#758690;
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
}


/* Account trigger */

.fm-account-trigger{
    min-height:32px;
    padding:0 4px;
}


.fm-account-status-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#55c8ef;
    box-shadow:
        0 0 0 3px rgba(85,200,239,.08);
}


.fm-account-trigger i{
    width:6px;
    height:6px;
    margin-left:1px;
    border-right:1px solid #667985;
    border-bottom:1px solid #667985;
    transform:
        translateY(-2px)
        rotate(45deg);
    transition:transform .16s ease;
}


.fm-account-menu:hover
.fm-account-trigger i,
.fm-account-menu.is-open
.fm-account-trigger i{
    transform:
        translateY(2px)
        rotate(225deg);
}


/* Account panel */

.fm-account-panel{
    right:0;
    width:292px;
    padding:13px;
    border-radius:12px;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transform:translateY(-5px);
    transition:
        opacity .15s ease,
        transform .15s ease,
        visibility .15s ease;
}


.fm-account-menu:hover
.fm-account-panel,
.fm-account-menu:focus-within
.fm-account-panel,
.fm-account-menu.is-open
.fm-account-panel{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:none;
}


.fm-account-panel__head{
    display:flex;
    align-items:center;
    gap:11px;
    padding:4px 3px 12px;
}


.fm-account-avatar{
    display:flex;
    flex:0 0 39px;
    align-items:center;
    justify-content:center;
    width:39px;
    height:39px;
    border-radius:12px;
    background:
        linear-gradient(
            145deg,
            #d42c8b,
            #3b97c9
        );
    color:#fff;
    font-size:12px;
    font-weight:900;
}


.fm-account-panel__head > div{
    display:grid;
    min-width:0;
    gap:2px;
}


.fm-account-panel__head small{
    color:#60737f;
    font-size:7px;
    font-weight:900;
    letter-spacing:.1em;
}


.fm-account-panel__head strong{
    color:#f0f4f6;
    font-size:12px;
}


.fm-account-panel__head span:not(.fm-account-avatar){
    overflow:hidden;
    color:#71838e;
    font-size:8px;
    text-overflow:ellipsis;
    white-space:nowrap;
}


.fm-account-roles{
    display:flex;
    gap:5px;
    padding:0 3px 11px;
}


.fm-account-roles span{
    display:inline-flex;
    align-items:center;
    min-height:19px;
    padding:0 7px;
    border-radius:999px;
    font-size:7px;
    font-weight:900;
    letter-spacing:.06em;
}


.fm-account-roles .is-resident{
    border:1px solid rgba(56,196,139,.32);
    background:rgba(56,196,139,.08);
    color:#70d7ad;
}


.fm-account-roles .is-editor{
    border:1px solid rgba(77,148,226,.32);
    background:rgba(77,148,226,.08);
    color:#8eb8ed;
}


.fm-account-meta{
    padding:10px 10px;
    border:1px solid #202d34;
    border-radius:8px;
    background:#0c1317;
}


.fm-account-meta > div{
    display:grid;
    gap:2px;
}


.fm-account-meta span{
    color:#5f727d;
    font-size:7px;
    font-weight:850;
    letter-spacing:.09em;
}


.fm-account-meta strong{
    color:#aebbc3;
    font-size:9px;
}


.fm-account-links{
    display:grid;
    padding:8px 0 3px;
}


.fm-account-links a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:34px;
    padding:0 8px;
    border-radius:7px;
    color:#c3cdd2;
    font-size:10px;
    font-weight:700;
    text-decoration:none;
}


.fm-account-links a:hover{
    background:#172229;
    color:#fff;
}


.fm-account-links b{
    color:#526873;
    font-size:11px;
    font-weight:500;
}


.fm-account-signout{
    padding-top:9px;
    border-top:1px solid #202b31;
}


.fm-account-signout button{
    width:100%;
    min-height:33px;
    border:1px solid #29373f !important;
    border-radius:7px;
    background:#121b20 !important;
    color:#9daab1 !important;
    font-size:9px !important;
    font-weight:800;
    cursor:pointer;
}


.fm-account-signout button:hover{
    border-color:#40515b !important;
    color:#fff !important;
}


@media(max-width:760px){

    .fm-search-panel,
    .fm-account-panel{
        display:none;
    }
}

/* HEADER INTERACTIONS READABILITY + STABLE HOVER V2 */


/*
 * Unsichtbare Fläche zwischen Trigger und Panel.
 * Damit verliert die Maus beim Wechsel ins Menü
 * nicht kurzzeitig den Hover-Bereich.
 */

.fm-account-menu::after{
    content:"";
    position:absolute;
    z-index:118;
    top:100%;
    right:-12px;
    width:330px;
    height:18px;
    background:transparent;
}


/* Panel etwas näher an den Trigger */

.fm-account-panel{
    top:calc(100% + 9px);
}


/* Account Trigger */

.fm-account-trigger{
    font-size:13px !important;
    font-weight:700;
}


/* Account Popup */

.fm-account-panel{
    width:310px;
    padding:15px;
}


.fm-account-panel__head{
    gap:12px;
    padding-bottom:13px;
}


.fm-account-avatar{
    flex-basis:43px;
    width:43px;
    height:43px;
    font-size:14px;
}


.fm-account-panel__head small{
    font-size:8px;
}


.fm-account-panel__head strong{
    font-size:13px;
}


.fm-account-panel__head span:not(.fm-account-avatar){
    font-size:9px;
}


.fm-account-roles span{
    min-height:21px;
    padding:0 8px;
    font-size:8px;
}


.fm-account-meta{
    padding:11px;
}


.fm-account-meta span{
    font-size:8px;
}


.fm-account-meta strong{
    font-size:10px;
}


.fm-account-links a{
    min-height:38px;
    padding:0 9px;
    font-size:11px;
}


.fm-account-links b{
    font-size:13px;
}


.fm-account-signout button{
    min-height:36px;
    font-size:10px !important;
}


/* Suche */

.fm-search-panel{
    width:min(
        500px,
        calc(100vw - 30px)
    );
}


.fm-search-input-wrap{
    padding:13px 14px;
}


.fm-search-input-wrap input{
    font-size:14px;
}


.fm-search-group__label{
    padding:9px 10px 6px;
    font-size:9px;
}


.fm-search-result{
    gap:3px;
    padding:11px 12px;
}


.fm-search-result strong{
    font-size:12px;
}


.fm-search-result small{
    font-size:10px;
    line-height:1.45;
}


.fm-search-empty,
.fm-search-loading{
    padding:20px 15px;
    font-size:12px;
}


/*
 * Während die JavaScript-Klasse gesetzt ist,
 * bleibt das Panel unabhängig vom Hover offen.
 */

.fm-account-menu.is-open
.fm-account-panel{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:none !important;
}