:root { --bf-blue: #00e6ff; --bf-orange: #ff4d00; --glass: rgba(5, 5, 8, 0.9); }
body { background: #000; color: #eee; font-family: 'Exo 2', sans-serif; margin: 0; overflow-x: hidden; }

/* Flackernder Glitch-Titel */
.glitch-title { position: relative; font-family: 'Aldrich', sans-serif; animation: flicker 4s infinite; }
.glitch-title::before { content: attr(data-text); position: absolute; left: -2px; text-shadow: 2px 0 var(--bf-blue); clip: rect(44px, 450px, 56px, 0); animation: glitch-move 2s infinite linear alternate-reverse; }
@keyframes flicker { 0%, 90%, 100% { opacity: 1; } 92% { opacity: 0.3; } 96% { opacity: 0.7; } }
@keyframes glitch-move { 0% { clip: rect(10px, 9999px, 25px, 0); } 100% { clip: rect(45px, 9999px, 60px, 0); } }

/* Ticker & Slider */
.top-ticker { background: var(--bf-blue); color: #000; padding: 5px; font-weight: bold; overflow: hidden; }
.ticker-move { display: inline-block; white-space: nowrap; animation: tick 20s linear infinite; }
@keyframes tick { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

.hype-slider { width: 100%; height: 420px; overflow: hidden; border-bottom: 2px solid var(--bf-blue); }
.slider-track { display: flex; width: 200%; height: 100%; transition: transform 1.2s ease-in-out; }
.slide { width: 50%; height: 100%; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.slide1 { background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('images/bg1.jpg'); }
.slide2 { background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('images/bg2.jpg'); }

/* Boxen (Scharf & Transparent) */
[id^="box-"], .glass-content { 
    background: var(--glass); backdrop-filter: blur(10px); 
    border: 1px solid rgba(0, 230, 255, 0.15); padding: 20px; margin-bottom: 20px;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 96% 100%, 0 100%); transition: 0.3s;
}
[id^="box-"]:hover { border-color: var(--bf-blue); box-shadow: 0 0 15px var(--bf-blue); }

/* Buttons & Navigation */
.btn-bf { background: var(--bf-blue); color: #000; padding: 12px 25px; text-decoration: none; font-weight: bold; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); transition: 0.3s; display: inline-block; }
.btn-bf:hover { background: var(--bf-orange); color: #fff; transform: scale(1.05); }

.sidenav { height: 100%; width: 0; position: fixed; z-index: 2000; top: 0; left: 0; background: rgba(0,0,0,0.95); transition: 0.5s; border-right: 2px solid var(--bf-blue); padding-top: 60px; }
.footer-s20 { background: #000; padding: 50px 0 20px; border-top: 2px solid var(--bf-blue); }
.rocket-up { position: fixed; bottom: 25px; right: 25px; background: var(--bf-orange); padding: 15px; border-radius: 5px; cursor: pointer; transition: 0.3s; }


/* Der Scanner-Effekt (Animierte Linie) */
[id^="box-"]::after, .glass-content::after, .member-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--bf-blue), transparent);
    opacity: 0.3;
    z-index: 5;
    pointer-events: none;
    animation: scanner-loop 4s linear infinite;
}

/* Statisches Scanline-Muster (feine Streifen) */
[id^="box-"]::before, .glass-content::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 230, 255, 0.05) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0));
    background-size: 100% 4px, 3px 100%;
    pointer-events: none;
    z-index: 2;
}

@keyframes scanner-loop {
    0% { top: 0%; }
    100% { top: 100%; }
}

/* Zusätzlicher digitaler "Noise" Effekt beim Hover */
[id^="box-"]:hover::after {
    opacity: 0.8;
    height: 4px;
    background: var(--bf-blue);
    box-shadow: 0 0 15px var(--bf-blue);
}