/* =========================================
   HEADER
========================================= */

.header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 30px;

    background:transparent;
    box-shadow:none;

    transition:
        transform 0.35s ease,
        opacity 0.35s ease,
        padding 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;

    will-change:transform;
}

.header.smart-active{
    padding:12px 30px;
    background:rgba(255,255,255,0.72);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 8px 30px rgba(0,0,0,0.04);
}

.header.header-hidden{
    transform:translateY(-110%);
    opacity:0;
    pointer-events:none;
}

.header.no-transition{
    transition:none !important;
}


/* =========================================
   LOGO / BRAND
========================================= */

.brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.brand a{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
}

.logo{
    height:64px;
    transition:height 0.35s ease;
}

.logotype{
    height:26px;
    transition:height 0.35s ease;
}

.header.smart-active .logo{height:44px;}
.header.smart-active .logotype{height:18px;}


/* =========================================
   MENU
========================================= */

.menu-wrapper{position:relative;}

.menu-icon{
    height:28px;
    cursor:pointer;
    transform:translateY(2px);
    transition:height 0.35s;
}

.header.smart-active .menu-icon{
    height:24px;
}

.menu{
    position:absolute;
    top:100%;
    right:0;
    margin-top:8px;

    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    padding:20px;
    min-width:160px;

    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);

    opacity:0;
    pointer-events:none;
    transform:translateY(-5px);

    transition:opacity 0.25s ease, transform 0.25s ease;

    z-index:1010;
}

.menu.is-open{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
}

@media (hover:hover) and (pointer:fine){
    .menu-wrapper:hover .menu{
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
    }
}

.menu::before{
    content:"";
    position:absolute;
    top:-10px;
    left:0;
    width:100%;
    height:10px;
}

.menu a{
    display:block;
    margin-bottom:12px;
    text-decoration:none;
    color:var(--black);
    transition:color 0.2s ease, font-weight 0.2s ease;
}

.menu a:last-child{
    margin-bottom:0;
}

.menu a:hover{
    color:var(--red);
    font-weight:700;
}

/* Menü-Gruppenüberschrift, nicht klickbar */
.menu-label{
    display:block;
    margin:18px 0 7px;
    color:var(--black);
    font-size:0.78rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.035em;
    line-height:1.2;
}

.menu .menu-label:first-child{
    margin-top:4px;
}

/* Klickbarer Oberpunkt, z. B. Startseite / Teamseite */
.menu a.menu-parent{
    display:block;
    margin:18px 0 7px;
    color:var(--black);
    font-size:0.88rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.035em;
    line-height:1.2;
    text-decoration:none;
}

/* Erster klickbarer Oberpunkt ohne Abstand nach oben */
.menu a.menu-parent:first-child{
    margin-top:0;
}

/* Hover für klickbaren Oberpunkt */
.menu a.menu-parent:hover{
    color:var(--red);
    font-weight:700;
}

/* Unterpunkte im Menü */
.menu a.menu-subitem{
    padding-left:30px;
    position:relative;
    color:var(--gray-dark);
    font-size:0.95rem;
    font-weight:400;
    margin-bottom:5px;
}

/* Aufzählunszeichen vor Unterpunkten */
.menu a.menu-subitem::before{
    content:"";
    position:absolute;
    left:8px;
    top:50%;
    transform:translateY(-50%);

    width:12px;
    height:12px;

    background-image:url("/pictures/GLEISACHT_Aufzählungszeichen_kreis_freigestellt.png");
    background-size:contain;
    background-repeat:no-repeat;

    opacity:0.9;
    transition:transform 0.2s ease;
}

/* Hover für Aufzählunszeichen */
.menu a.menu-subitem:hover::before{
    transform:translateY(-50%) scale(1.2);
}


/* Hover für normale Unterpunkte */
.menu a.menu-subitem:hover{
    color:var(--red);
    font-weight:700;
}

/* Letzter Unterpunkt ohne Extra-Abstand */
.menu a.menu-subitem:last-child{
    margin-bottom:0;
}


/* =========================================
   MENÜ: GLEISACHT CI-SCHREIBWEISE
========================================= */

/* Link mit CI-Schreibweise */
.menu a.menu-ci-link{
    color:var(--gray-dark);
    font-weight:400;
}

/* Hover für CI-Link: "Warum" wird rot und fett */
.menu a.menu-ci-link:hover{
    color:var(--red);
    font-weight:700;
}

/* GLEIS im Menü */
.menu-gleis{
    color:var(--black);
    font-weight:400;
    letter-spacing:-0.5pt;
    transition:
        color 0.2s ease,
        font-weight 0.2s ease;
}

/* ACHT im Menü */
.menu-acht{
    color:var(--red);
    font-weight:700;
    letter-spacing:-0.5pt;
    text-transform:uppercase;
}

/* Hover: Nur GLEIS wird rot und fett */
.menu a.menu-ci-link:hover .menu-gleis{
    color:var(--red);
    font-weight:700;
}

/* ACHT bleibt auch beim Hover rot und fett */
.menu a.menu-ci-link:hover .menu-acht{
    color:var(--red);
    font-weight:700;
}


/* =========================================
   FLOATING ACTION BUTTONS
========================================= */

.floating-actions{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:990;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.floating-btn{
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--red);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    box-shadow:0 8px 20px rgba(0,0,0,0.18);
    opacity:0.95;
    transform:translateY(0);
    transition:
        background 0.25s ease,
        transform 0.2s ease,
        opacity 0.25s ease,
        box-shadow 0.2s ease;
}

.floating-btn svg{
    display:block;
    fill:currentColor;
}

.floating-btn:hover{
    background:#c40012;
    transform:translateY(-3px);
    opacity:1;
    box-shadow:0 12px 28px rgba(0,0,0,0.22);
}

.floating-mail {
    background: var(--red);
}

.floating-mail:hover {
    background: #c40012;
}

/* Kontaktbutton ist immer sichtbar */
.floating-contact{
    display:flex;
}

/* Zurück-nach-oben Button startet unsichtbar */
.floating-top{
    opacity:0;
    pointer-events:none;
    transform:translateY(0);
}

/* Sichtbar nach Scroll */
.floating-top.is-visible{
    opacity:0.95;
    pointer-events:auto;
}

/* Logo im Floating Button */
.logo-button img{
    width:28px;
    height:auto;
    display:block;
}

.logo-button{
    background:white;
}

.logo-button:hover{
    background:#f2f2f2;
}

/* Mobile */
@media(max-width:700px){
    .floating-actions{
        right:18px;
        bottom:18px;
        gap:10px;
    }

    .floating-btn{
        width:44px;
        height:44px;
    }

    .floating-btn svg{
        width:20px;
        height:20px;
    }
}


/* =========================================
   CTA BUTTONS
========================================= */

.cta{
    background:var(--red);
    color:white;
    padding:14px 28px;
    border-radius:6px;
    text-decoration:none;
    font-weight:700;
    display:inline-block;

    transform:translateY(0);
    will-change:transform;

    transition:
        background 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* EINHEITLICHER BUTTON-HOVER */
.back-btn,
.career-link,
.client-link,
.secondary-link{
    display:inline-block;
    transform:translateY(0);
    will-change:transform;

    transition:
        background 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.cta,
.back-btn,
.career-link,
.client-link,
.secondary-link,
.floating-btn{
    backface-visibility:hidden;
}

.cta:hover,
.back-btn:hover,
.career-link:hover,
.client-link:hover,
.secondary-link:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.cta:active,
.back-btn:active,
.career-link:active,
.client-link:active,
.secondary-link:active{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(0,0,0,0.12);
}


/* =========================================
   FOCUS / ACCESSIBILITY
========================================= */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.menu-icon:focus-visible,
.cta:focus-visible,
.back-btn:focus-visible,
.career-link:focus-visible,
.client-link:focus-visible,
.secondary-link:focus-visible,
.floating-btn:focus-visible{
    outline:2px solid var(--red);
    outline-offset:3px;
    border-radius:6px;
}


/* =========================================
   FOOTER
========================================= */

footer{
    margin-top:60px;
    padding:24px 18px;
    text-align:center;
    background:var(--light);
    color:var(--gray-dark);
    font-size:0.95rem;
    line-height:1.6;
}

footer a{
    color:var(--black);
    text-decoration:none;
    margin:0 4px;
    transition:color 0.2s ease, font-weight 0.2s ease;
}

footer a:hover{
    color:var(--red);
    font-weight:700;
}

.footer-brand{
    text-decoration:none;
}

.footer-brand:hover{
    color:var(--black);
}

.footer-brand:hover .gleis{
    color:var(--black);
}

.footer-brand:hover .acht{
    color:var(--red);
}


/* =========================================
   Fokus sichtbar machen
========================================= */

a:focus-visible,
button:focus-visible,
.menu-icon:focus-visible{
    outline:2px solid var(--red);
    outline-offset:3px;
}