/* =====================================================
   TFZ LIVE FIX
   ===================================================== */

/* --- LOGO: optisch freistellen und größer --- */

.brand img,
.footer-brand img,
.hero-logo,
.partner-card img{
    mix-blend-mode: screen;
    background: transparent !important;
}

.brand img{
    width: 88px;
    height: 58px;
    object-fit: contain;
    filter:
        brightness(1.18)
        contrast(1.15)
        drop-shadow(0 0 8px rgba(237,16,28,.25))
        drop-shadow(0 0 10px #000);
}

.hero-logo{
    width: 520px !important;
    height: 300px !important;
    margin-bottom: -8px !important;
    opacity: .98;
    filter:
        brightness(1.18)
        contrast(1.12)
        drop-shadow(0 8px 12px #000)
        drop-shadow(0 0 20px rgba(237,16,28,.30));
    animation:
        logoFloatLive 5.8s ease-in-out infinite,
        logoPulseLive 7s ease-in-out infinite;
}

/* --- Header / Hero mehr Leben --- */

.hero{
    height: 540px;
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 41%,
            rgba(237,16,28,.14) 48%,
            transparent 55%,
            transparent 100%
        );
    animation: heroSweepLive 8s ease-in-out infinite;
}

.hero-red-splatter{
    width: 420px;
    opacity: .72;
    background:
        linear-gradient(125deg,transparent 10%,rgba(140,0,11,.28) 24%,transparent 29%),
        linear-gradient(111deg,transparent 29%,rgba(239,16,28,.82) 49%,transparent 53%),
        linear-gradient(72deg,transparent 42%,rgba(120,0,9,.22) 63%,transparent 67%),
        linear-gradient(88deg,transparent 46%,rgba(255,30,30,.16) 52%,transparent 56%);
    animation: redPulseLive 6s ease-in-out infinite alternate;
}

.hero-scum{
    animation: scumMoveLive 16s ease-in-out infinite alternate !important;
}

.hero-wows{
    animation: wowsMoveLive 18s ease-in-out infinite alternate !important;
}

.hero-game-label{
    top: 182px;
}

.hero-game-label strong{
    text-shadow:
        0 6px 18px #000,
        0 0 10px rgba(0,0,0,.35);
}

.hero-game-left strong{
    font-size: 66px;
}

.hero-game-right strong{
    font-size: 45px;
}

.hero-center h1 span{
    font-size: 47px;
}

.hero-center h1 b{
    font-size: 43px;
}

.hero-center p{
    font-size: 13px;
    letter-spacing: .28em;
}

.hero-buttons .button{
    min-height: 46px;
    font-size: 10px;
    padding: 0 34px;
}

.button.red{
    box-shadow:
        0 0 16px rgba(237,16,28,.45),
        inset 0 0 20px rgba(255,255,255,.06);
}

.button.red:hover{
    box-shadow:
        0 0 18px rgba(237,16,28,.68),
        0 0 36px rgba(237,16,28,.35);
}

.button.dark{
    background: rgba(6,7,9,.78);
    box-shadow: inset 0 0 18px rgba(255,255,255,.03);
}

/* --- Stats etwas kräftiger --- */

.stats-strip{
    box-shadow:
        0 10px 28px rgba(0,0,0,.55),
        inset 0 0 30px rgba(0,0,0,.60);
}

.stats-strip strong{
    font-size: 25px;
}

/* --- Karten lebendiger --- */

.server-box,
.event-box,
.news-card,
.member-card,
.gallery-card,
.partner-card,
.about-section,
.discord-banner{
    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.server-box:hover,
.event-box:hover,
.news-card:hover,
.member-card:hover,
.gallery-card:hover,
.partner-card:hover{
    transform: translateY(-3px);
    border-color: rgba(237,16,28,.48);
    box-shadow:
        0 12px 28px rgba(0,0,0,.42),
        0 0 18px rgba(237,16,28,.10);
}

.gallery-card{
    height: 215px;
}

.gallery-card figcaption{
    font-size: 12px;
    letter-spacing: .04em;
}

.news-card h3{
    font-size: 12px;
}

.news-card p{
    font-size: 9px;
}

.discord-banner{
    min-height: 110px;
}

.about-section p{
    font-size: 13px;
}

/* --- Mobile --- */

@media(max-width:900px){

    .hero{
        height: 560px;
    }

    .hero-logo{
        width: 300px !important;
        height: 200px !important;
    }

    .hero-center h1 span{
        font-size: 34px;
    }

    .hero-center h1 b{
        font-size: 29px;
    }

    .hero-game-left strong{
        font-size: 34px;
    }

    .hero-game-right strong{
        font-size: 26px;
    }
}

@media(max-width:560px){

    .hero{
        height: 510px;
    }

    .hero-logo{
        width: 245px !important;
        height: 160px !important;
    }

    .hero-center h1 span{
        font-size: 29px;
    }

    .hero-center h1 b{
        font-size: 23px;
    }

    .hero-game-left strong,
    .hero-game-right strong{
        font-size: 21px;
    }
}

@keyframes logoFloatLive{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-7px);
    }
}

@keyframes logoPulseLive{
    0%,100%{
        filter:
            brightness(1.16)
            contrast(1.10)
            drop-shadow(0 8px 12px #000)
            drop-shadow(0 0 15px rgba(237,16,28,.24));
    }
    50%{
        filter:
            brightness(1.22)
            contrast(1.16)
            drop-shadow(0 8px 12px #000)
            drop-shadow(0 0 26px rgba(237,16,28,.42));
    }
}

@keyframes heroSweepLive{
    0%{
        opacity:.18;
        transform:translateX(-3%);
    }
    50%{
        opacity:.60;
        transform:translateX(2%);
    }
    100%{
        opacity:.18;
        transform:translateX(-2%);
    }
}

@keyframes redPulseLive{
    from{
        opacity:.45;
        transform:translateX(-50%) skewX(-8deg) scale(1);
    }
    to{
        opacity:.82;
        transform:translateX(-50%) skewX(-8deg) scale(1.04);
    }
}

@keyframes scumMoveLive{
    from{
        transform:scale(1.03);
        background-position:46% 50%;
        filter:brightness(.82) contrast(1.02);
    }
    to{
        transform:scale(1.10);
        background-position:54% 47%;
        filter:brightness(.98) contrast(1.08);
    }
}

@keyframes wowsMoveLive{
    from{
        transform:scale(1.03);
        background-position:47% 50%;
        filter:brightness(.86) contrast(1.02);
    }
    to{
        transform:scale(1.10);
        background-position:54% 49%;
        filter:brightness(1.00) contrast(1.08);
    }
}

body.motion-off .hero::after,
body.motion-off .hero-red-splatter{
    animation:none !important;
}

/* =====================================================
   TFZ LOGO TRANSPARENT / GROSS
   ===================================================== */

.brand img{
    width: 98px !important;
    height: 64px !important;
    object-fit: contain !important;
    background: transparent !important;
    mix-blend-mode: normal !important;
    filter:
        brightness(1.08)
        contrast(1.10)
        drop-shadow(0 0 10px rgba(0,0,0,.55))
        drop-shadow(0 0 10px rgba(237,16,28,.18)) !important;
}

.hero-logo{
    width: 610px !important;
    height: 340px !important;
    object-fit: contain !important;
    background: transparent !important;
    mix-blend-mode: normal !important;
    margin-bottom: -10px !important;
    filter:
        brightness(1.08)
        contrast(1.12)
        drop-shadow(0 8px 14px rgba(0,0,0,.72))
        drop-shadow(0 0 16px rgba(237,16,28,.18)) !important;
}

.footer-brand img{
    width: 82px !important;
    height: 60px !important;
    object-fit: contain !important;
    background: transparent !important;
    mix-blend-mode: normal !important;
}

@media(max-width:900px){
    .hero-logo{
        width: 360px !important;
        height: 220px !important;
    }
}

@media(max-width:560px){
    .hero-logo{
        width: 270px !important;
        height: 170px !important;
    }
}