* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
           font-family: 'Arial', sans-serif;
			background-color: #000;
			color: #fff;
			overflow-x: hidden;
    /* Wichtig: Padding für den fixed Header */
			padding-top: 80px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

        /* Header Styles */
.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    padding: 15px 50px;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 32px;
    font-weight: bold;
    color: #ff0000; /* Rot */
}

.logo-img {
    height: 40px;
    width: auto;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
}


.nav-list {
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav-link {
    color: #ff0000; /* Rot */
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.shop-btn {
    background: #ff0000;
    color: #fff;
    padding: 10px 20px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.nav-link:hover,
.nav-link.active {
    color: #ff0000;
}



.shop-button {
    flex-shrink: 0;
}

.shop-link {
    background: #ff0000;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}

.shop-btn:hover {
    background-color: #fff;
    color: #000;
}

        /* Hero Section */
        .hero {
            height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)), 
                        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" fill="%23333"><rect width="100%" height="100%"/></svg>');
            background-size: cover;
            background-position: center;
        }

        .hero-content {
            text-align: center;
            z-index: 2;
        }

        .hero-title {
            font-size: 5rem;
            font-weight: 900;
            letter-spacing: 5px;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.8);
            margin-top: 80px;
        }

        /* Mission Text Section */
        .mission-text {
            padding: 120px 0;
            background-color: #000;
        }

        .mission-content {
            max-width: 900px;
            margin: 0 auto;
            text-align: left;
            padding: 0 40px;
        }

        .mission-paragraph {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 40px;
            font-weight: 400;
            letter-spacing: 1px;
            color: #ffffff;
        }

        .mission-highlight {
            font-size: 18px;
            font-weight: 600;
            margin: 50px 0;
            letter-spacing: 2px;
            text-align: center;
        }

        .mission-final {
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 2px;
            text-align: center;
            margin-top: 50px;
        }

        /* Join Section */
        .join-section {
            padding: 0;
            background-color: #000;
        }

        .join-container {
            display: flex;
            min-height: 600px;
        }

        .join-left {
            background-color: #ff0000;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 80px 60px;
        }

        .join-title {
            font-size: 4.5rem;
            font-weight: 900;
            color: #fff;
            line-height: 0.9;
            margin-bottom: 60px;
            letter-spacing: 3px;
        }

        .social-icons {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .social-icon {
            width: 60px;
            height: 60px;
            background-color: #fff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
            text-decoration: none;
            font-size: 24px;
            color: #ff0000;
            font-weight: bold;
        }

        .social-icon:hover {
            transform: translateY(-5px);
        }

        .join-right {
            flex: 1;
            position: relative;
            background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), 
                        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" fill="%23444"><rect width="100%" height="100%"/></svg>');
            background-size: cover;
            background-position: center;
        }

        .join-image {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .join-image::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgba(255,0,0,0.1), transparent);
        }

        /* Footer */
        .footer {
            padding: 40px 0;
            background-color: #000;
            text-align: center;
        }

        .footer-nav {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-bottom: 30px;
        }

        .footer-nav a {
            color: #fff;
            text-decoration: none;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 2px;
            transition: color 0.3s ease;
        }

        .footer-nav a:hover {
            color: #ff0000;
        }

        .footer-dots {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #333;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .dot.active,
        .dot:hover {
            background-color: #ff0000;
        }

        /* Social Icons in Footer */
        .footer-social {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 30px 0;
        }

        .footer-social-icon {
            width: 40px;
            height: 40px;
            background-color: #333;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
            text-decoration: none;
            color: #fff;
            font-size: 16px;
        }

        .footer-social-icon:hover {
            background-color: #ff0000;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .nav-menu {
                display: none;
            }
            
            .hero-title {
                font-size: 3rem;
            }
            
            .mission-content {
                padding: 0 20px;
            }
            
            .mission-paragraph {
                font-size: 14px;
            }
            
            .join-container {
                flex-direction: column;
            }
            
            .join-left {
                padding: 60px 30px;
                align-items: center;
                text-align: center;
            }
            
            .join-title {
                font-size: 3rem;
            }
            
            .social-icons {
                justify-content: center;
                width: 100%;
            }

            .footer-nav {
                flex-wrap: wrap;
                gap: 20px;
            }
        }

        @media (max-width: 480px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .join-title {
                font-size: 2.5rem;
            }
            
            .mission-paragraph {
                font-size: 13px;
                line-height: 1.6;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="container">
            <div class="logo">
                <span class="logo-x">X</span>
            </div>
            <nav class="nav">
                <ul class="nav-menu">
                    <li><a href="#" class="nav-link">HOME</a></li>
                    <li><a href="#" class="nav-link">NEWS</a></li>
                    <li><a href="#" class="nav-link active">OUR MISSION</a></li>
                    <li><a href="#" class="nav-link">MATCHES</a></li>
                    <li><a href="#" class="nav-link">SOCIALS</a></li>
                </ul>
            </nav>
            <button class="shop-btn">SHOP</button>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <h1 class="hero-title">OUR MISSION</h1>
        </div>
    </section>

    <!-- Mission Text Section -->
    <section class="mission-text">
        <div class="container">
            <div class="mission-content">
                <p class="mission-paragraph">
                    AT HERO X, WE BELIEVE THAT GREATNESS ISN'T JUST ACHIEVED — 
                    OUR MISSION IS TO PUSH THE BOUNDARIES OF COMPETITIVE GAMING 
                    BY BUILDING A TEAM THAT EMBODIES DISCIPLINE, PASSION, AND 
                    UNRELENTING AMBITION.
                </p>
                
                <p class="mission-paragraph">
                    WE'RE NOT JUST HERE TO PLAY — WE'RE HERE TO DOMINATE. FROM 
                    EVERY SCRIM TO EVERY TOURNAMENT, OUR PLAYERS ARE 
                    COMMITTED TO EXCELLENCE, BOTH AS INDIVIDUALS AND AS A UNIT. 
                    WE AIM TO SET NEW STANDARDS IN PERFORMANCE, 
                    PROFESSIONALISM, AND INNOVATION WITHIN THE ESPORTS SCENE.
                </p>
                
                <p class="mission-paragraph">
                    BUT HERO X IS MORE THAN JUST A TEAM — IT'S A MOVEMENT. WE 
                    STRIVE TO INSPIRE THE NEXT GENERATION OF GAMERS AND FOSTER 
                    A GLOBAL COMMUNITY BUILT ON RESPECT, TEAMWORK, AND THE 
                    RELENTLESS PURSUIT OF VICTORY.
                </p>
                
                <p class="mission-highlight">
                    BECAUSE WITH HERO X, ANYONE CAN BECOME A HERO.
                </p>
                
                <p class="mission-final">
                    THIS IS OUR MISSION. THIS IS HERO X.
                </p>
            </div>
        </div>
    </section>

    <!-- Join Section -->
    <section class="join-section">
        <div class="join-container">
            <div class="join-left">
                <h2 class="join-title">JOIN THE<br>FAMILY</h2>
                <div class="social-icons">
                    <a href="#" class="social-icon instagram">📷</a>
                    <a href="#" class="social-icon twitter">🐦</a>
                    <a href="#" class="social-icon tiktok">🎵</a>
                    <a href="#" class="social-icon youtube">📺</a>
                    <a href="#" class="social-icon discord">💬</a>
                </div>
            </div>
            <div class="join-right">
                <div class="join-image">
                    <!-- Team image background -->
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-social">
            <a href="#" class="footer-social-icon">📷</a>
            <a href="#" class="footer-social-icon">🐦</a>
            <a href="#" class="footer-social-icon">🎵</a>
            <a href="#" class="footer-social-icon">📺</a>
            <a href="#" class="footer-social-icon">💬</a>
        </div>
        
        <div class="footer-nav">
            <a href="#">HOME</a>
            <a href="#">NEWS</a>
            <a href="#">OUR MISSION</a>
            <a href="#">MATCHES</a>
            <a href="#">SOCIALS</a>
            <a href="#">SHOP</a>
        </div>
        
        <div class="footer-dots">
            <span class="dot active"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
    </footer>
</body>
</html>