/* Copyright by SyncroOPS GbR, Marcus Hinz */
/*
 * FCSP SyncroOPS 2.0.4
 * Bildbasiertes Branding im Hauptheader.
 */
#syncroops-main-header,
#syncroops-main-header *{box-sizing:border-box}

#syncroops-main-header{
 position:sticky;top:0;z-index:50;
 display:grid;
 grid-template-columns:auto 1px minmax(0,1fr) auto;
 align-items:center;gap:16px;
 min-height:102px;padding:12px 18px;
 color:#fff;
 background:
 linear-gradient(90deg,rgba(4,7,11,.97),rgba(5,8,13,.91) 58%,rgba(4,7,11,.97)),
 url("syncroops-header-bg.jpg") center 64%/cover no-repeat;
 border-bottom:1px solid rgba(255,255,255,.12);
 box-shadow:0 8px 28px rgba(0,0,0,.34)
}

.sops-header-brand{
 display:flex;align-items:center;gap:14px;
 min-width:430px
}
.sops-header-logo{
 width:70px;height:70px;flex:0 0 70px;
 object-fit:contain;
 filter:drop-shadow(0 5px 12px rgba(0,0,0,.35))
}
.sops-header-wordmark-image{
 display:block;
 width:270px;
 max-width:28vw;
 height:auto;
 object-fit:contain
}
.sops-header-version{
 align-self:flex-end;
 padding-bottom:8px;
 color:#d9dce0;
 font-size:.7rem;
 font-weight:700;
 white-space:nowrap
}
.sops-header-divider{
 width:1px;height:58px;
 background:rgba(255,255,255,.28)
}
.sops-header-nav{
 display:flex;align-items:center;flex-wrap:nowrap;
 gap:7px;min-width:0
}
.sops-nav-link{
 display:inline-flex;align-items:center;justify-content:center;
 min-height:44px;padding:10px 12px;
 border:1px solid transparent;border-radius:10px;
 color:#fff;background:transparent;
 font-size:.93rem;font-weight:850;
 text-decoration:none;white-space:nowrap
}
.sops-nav-link:hover,.sops-nav-link:focus-visible{
 border-color:rgba(255,255,255,.16);
 outline:none;background:rgba(255,255,255,.09)
}
.sops-nav-link.is-active{
 border-color:rgba(239,43,50,.58);
 background:rgba(226,27,35,.20);
 box-shadow:inset 0 -2px 0 #ef2b32
}
.sops-header-account{
 display:flex;align-items:center;justify-content:flex-end;
 gap:8px;white-space:nowrap
}
.sops-user-card{
 display:flex;align-items:center;gap:9px;
 max-width:225px;padding:7px 10px;
 border:1px solid rgba(255,255,255,.16);
 border-radius:13px;background:rgba(255,255,255,.08)
}
.sops-user-avatar{
 display:grid;place-items:center;
 width:40px;height:40px;flex:0 0 40px;
 border-radius:50%;background:#e52a31;
 color:#fff;font-weight:900
}
.sops-user-copy{min-width:0}
.sops-user-copy strong,.sops-user-copy small{
 display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.sops-user-copy strong{font-size:.92rem}
.sops-user-copy small{
 max-width:155px;margin-top:2px;
 color:#cfd2d6;font-size:.67rem
}
.sops-sound-button,.sops-logout-button{
 display:inline-flex;align-items:center;justify-content:center;
 min-height:43px;border-radius:10px;
 font-weight:900;cursor:pointer;white-space:nowrap
}
.sops-sound-button{
 gap:5px;padding:8px 11px;
 border:1px solid rgba(255,255,255,.17);
 background:rgba(255,255,255,.07);color:#fff
}
.sops-logout-button{
 padding:9px 14px;border:0;
 background:linear-gradient(135deg,#e3262e,#bd2d2d);
 color:#fff
}
.sops-sound-label{display:none}

@media(max-width:1700px){
 #syncroops-main-header{gap:10px;padding-inline:12px}
 .sops-header-brand{min-width:365px}
 .sops-header-wordmark-image{width:230px}
 .sops-header-nav{gap:4px}
 .sops-nav-link{padding-inline:8px;font-size:.87rem}
 .sops-user-copy small{display:none}
}
@media(max-width:1320px){
 #syncroops-main-header{
  grid-template-columns:auto 1px minmax(0,1fr);
  grid-template-areas:"brand divider account" "nav nav nav";
  row-gap:9px
 }
 .sops-header-brand{grid-area:brand}
 .sops-header-divider{grid-area:divider}
 .sops-header-nav{grid-area:nav;flex-wrap:wrap}
 .sops-header-account{grid-area:account}
}
@media(max-width:760px){
 #syncroops-main-header{
  position:static;
  grid-template-columns:1fr;
  grid-template-areas:"brand" "nav" "account"
 }
 .sops-header-divider{display:none}
 .sops-header-brand{min-width:0}
 .sops-header-wordmark-image{width:210px;max-width:55vw}
 .sops-nav-link{flex:1 1 135px}
 .sops-user-card{display:none}
 .sops-sound-button,.sops-logout-button{flex:1 1 auto}
 .sops-sound-label{display:inline}
}

/* SyncroOPS 2.0.5 – finaler Branding-Feinschliff */
#syncroops-main-header{
    min-height:112px;
    padding-top:16px;
    padding-bottom:16px;
}

.sops-header-brand{
    gap:18px;
    min-width:455px;
}

.sops-header-brand-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
}

.sops-header-logo{
    width:76px;
    height:76px;
    flex-basis:76px;
}

.sops-header-wordmark-image{
    width:292px;
    max-width:30vw;
}

.sops-header-version{
    align-self:flex-start;
    margin-top:7px;
    padding:0;
    color:#d9dce0;
    font-size:.72rem;
    font-weight:700;
    line-height:1;
    text-align:left;
}

.sops-header-nav,
.sops-header-account{
    align-self:center;
}

@media(max-width:1700px){
    .sops-header-brand{
        min-width:390px;
        gap:15px;
    }

    .sops-header-logo{
        width:68px;
        height:68px;
        flex-basis:68px;
    }

    .sops-header-wordmark-image{
        width:245px;
    }
}

@media(max-width:760px){
    .sops-header-brand{
        min-width:0;
        gap:12px;
    }

    .sops-header-wordmark-image{
        width:220px;
        max-width:58vw;
    }
}