<!DOCTYPE html>
<html lang="de-DE">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Anleitungen | KoinOnein - Leitfäden und Tipps für Social Gaming und HTML5-Spiele.">
    <title>Anleitungen | KoinOnein</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎮</text></svg>">
    
    <!-- Critical Mobile-First Styles -->
    <style>
        * { 
            box-sizing: border-box !important; 
            max-width: 100% !important; 
        }
        
        html, body { 
            overflow-x: hidden !important; 
            width: 100% !important; 
            margin: 0 !important; 
            padding: 0 !important; 
            background: #0a0a1f !important;
            background-color: #0a0a1f !important;
            color: #ffffff !important;
            font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif !important;
        }
        
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
            pointer-events: none;
            z-index: 0;
        }
        
        /* Header Styles */
        .main-header {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 70px !important;
            background: rgba(10, 10, 31, 0.95) !important;
            backdrop-filter: blur(10px) !important;
            border-bottom: 2px solid #00f3ff !important;
            z-index: 1000 !important;
            box-shadow: 0 4px 20px rgba(0, 243, 255, 0.3) !important;
        }
        
        .header-content {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            height: 100% !important;
            max-width: 1200px !important;
            margin: 0 auto !important;
            padding: 0 1.5rem !important;
            gap: 2rem !important;
        }
        
        .logo-section {
            display: flex !important;
            align-items: center !important;
            gap: 1rem !important;
            flex-shrink: 0 !important;
        }
        
        .site-logo {
            font-size: clamp(1.25rem, 3vw, 1.75rem) !important;
            color: #00f3ff !important;
            text-shadow: 0 0 10px rgba(0, 243, 255, 0.5) !important;
            margin: 0 !important;
            font-weight: 700 !important;
            line-height: 1 !important;
            display: flex !important;
            align-items: center !important;
        }
        
        .free-badge {
            background: #00ff41 !important;
            color: #0a0a1f !important;
            padding: 4px 12px !important;
            border-radius: 20px !important;
            font-size: 0.75rem !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            line-height: 1 !important;
            display: inline-flex !important;
            align-items: center !important;
            height: auto !important;
        }
        
        .navbar {
            display: flex !important;
            align-items: center !important;
            flex: 1 !important;
            justify-content: center !important;
        }
        
        .nav-menu {
            display: flex !important;
            gap: 0.75rem !important;
            list-style: none !important;
            align-items: center !important;
            padding: 0 !important;
            margin: 0 !important;
            flex-wrap: nowrap !important;
            justify-content: center !important;
        }
        
        .nav-menu li {
            display: flex !important;
            align-items: center !important;
            height: 40px !important;
            flex-shrink: 0 !important;
        }
        
        .nav-link {
            color: #c0c0ff !important;
            font-size: 0.85rem !important;
            font-weight: 600 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            padding: 8px 10px !important;
            border-radius: 8px !important;
            transition: all 0.3s ease !important;
            text-decoration: none !important;
            white-space: nowrap !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            height: 40px !important;
            line-height: 1 !important;
            vertical-align: middle !important;
            flex-shrink: 0 !important;
        }
        
        .nav-link:hover,
        .nav-link.active {
            color: #00f3ff !important;
            text-shadow: 0 0 10px rgba(0, 243, 255, 0.5) !important;
        }
        
        .nav-link.cta-link {
            background: linear-gradient(135deg, #00f3ff 0%, #bf00ff 100%) !important;
            color: #ffffff !important;
            padding: 8px 16px !important;
            white-space: nowrap !important;
            height: 40px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        
        .nav-link.cta-link:hover {
            box-shadow: 0 0 20px rgba(0, 243, 255, 0.5) !important;
        }
        
        .mobile-menu-toggle {
            display: none !important;
            flex-direction: column !important;
            gap: 5px !important;
            background: transparent !important;
            border: none !important;
            cursor: pointer !important;
            padding: 8px !important;
        }
        
        .mobile-menu-toggle span {
            display: block !important;
            width: 28px !important;
            height: 3px !important;
            background: #00f3ff !important;
            border-radius: 2px !important;
            transition: all 0.3s ease !important;
            box-shadow: 0 0 10px rgba(0, 243, 255, 0.5) !important;
        }
        
        .hero,
        .features-section,
        .disclaimer-section,
        .footer {
            position: relative !important;
            z-index: 10 !important;
        }
        
        .section-title {
            color: #00f3ff !important;
        }
        
        .article-preview-card {
            background: #15152e !important;
            background-color: #15152e !important;
            border: 2px solid #00f3ff !important;
        }
        
        .article-preview-card h3 {
            color: #00f3ff !important;
        }
        
        .article-preview-card p {
            color: #c0c0ff !important;
        }
        
        /* Container and Layout */
        .container {
            max-width: 1200px !important;
            margin: 0 auto !important;
            padding: 0 1.5rem !important;
            width: 100% !important;
        }
        
        /* Hero Section */
        .hero {
            position: relative !important;
            min-height: 40vh !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: linear-gradient(135deg, #0a0a1f 0%, #1a1a3e 50%, #0a0a1f 100%) !important;
            padding-top: 140px !important;
            overflow: hidden !important;
        }
        
        .hero-overlay {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 31, 0.7) 100%) !important;
            z-index: 1 !important;
        }
        
        .hero-content {
            position: relative !important;
            z-index: 2 !important;
            text-align: center !important;
        }
        
        .hero-title {
            font-size: clamp(2rem, 5vw, 3.5rem) !important;
            color: #00f3ff !important;
            text-shadow: 0 0 10px rgba(0, 243, 255, 0.5) !important;
            margin-bottom: 1rem !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 2px !important;
        }
        
        .hero-subtitle {
            font-size: clamp(1rem, 2.5vw, 1.5rem) !important;
            color: #c0c0ff !important;
            margin-bottom: 0 !important;
            text-transform: uppercase !important;
            letter-spacing: 3px !important;
        }
        
        /* Features Section */
        .features-section {
            padding: 3rem 0 !important;
            background: #0a0a1f !important;
            position: relative !important;
            z-index: 10 !important;
        }
        
        .section-title {
            text-align: center !important;
            color: #00f3ff !important;
            text-shadow: 0 0 10px rgba(0, 243, 255, 0.5) !important;
            margin-bottom: 1rem !important;
            font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 3px !important;
        }
        
        /* Articles Grid */
        .articles-preview-grid {
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
            gap: 2rem !important;
            margin-top: 2rem !important;
        }
        
        .article-preview-card {
            background: #15152e !important;
            border: 2px solid #00f3ff !important;
            border-radius: 20px !important;
            padding: 2rem !important;
            transition: all 0.3s ease !important;
        }
        
        .article-preview-card:hover {
            border-color: #bf00ff !important;
            box-shadow: 0 0 20px rgba(191, 0, 255, 0.5) !important;
            transform: translateY(-5px) !important;
        }
        
        .article-preview-card h3 {
            color: #00f3ff !important;
            margin-bottom: 1rem !important;
            font-size: 1.25rem !important;
            font-weight: 700 !important;
        }
        
        .article-preview-card p {
            color: #c0c0ff !important;
            line-height: 1.7 !important;
            margin-bottom: 1.5rem !important;
        }
        
        .read-more {
            color: #bf00ff !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 1px !important;
            font-size: 0.875rem !important;
            text-decoration: none !important;
        }
        
        .read-more:hover {
            color: #00f3ff !important;
        }
        
        /* Disclaimer Section */
        .disclaimer-section {
            background: linear-gradient(135deg, #ff0055 0%, #bf00ff 100%) !important;
            color: #ffffff !important;
            padding: 2rem 0 !important;
            border-top: 3px solid #ff00ff !important;
            border-bottom: 3px solid #ff00ff !important;
            position: relative !important;
            z-index: 10 !important;
        }
        
        .disclaimer-content {
            text-align: center !important;
        }
        
        .disclaimer-content h3 {
            font-size: clamp(1.25rem, 3vw, 1.75rem) !important;
            margin-bottom: 1rem !important;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
        }
        
        .disclaimer-content p {
            font-size: 1rem !important;
            margin-bottom: 1rem !important;
            line-height: 1.7 !important;
        }
        
        .disclaimer-badges {
            display: flex !important;
            gap: 1rem !important;
            justify-content: center !important;
            flex-wrap: wrap !important;
            margin-top: 1rem !important;
        }
        
        .badge-item {
            background: rgba(255, 255, 255, 0.2) !important;
            padding: 8px 16px !important;
            border-radius: 20px !important;
            font-weight: 700 !important;
            font-size: 0.875rem !important;
            border: 2px solid white !important;
        }
        
        /* Footer */
        .footer {
            background: #0a0a1f !important;
            border-top: 2px solid #00f3ff !important;
            padding: 3rem 0 1rem !important;
            position: relative !important;
            z-index: 10 !important;
        }
        
        .footer-content {
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
            gap: 2rem !important;
            margin-bottom: 2rem !important;
        }
        
        .footer-section h3 {
            color: #00f3ff !important;
            margin-bottom: 1rem !important;
            font-size: 1.25rem !important;
        }
        
        .footer-section h4 {
            color: #00f3ff !important;
            margin-bottom: 1rem !important;
            font-size: 1.1rem !important;
        }
        
        .footer-section p {
            color: #c0c0ff !important;
            line-height: 1.7 !important;
        }
        
        .footer-free {
            color: #00ff41 !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
        }
        
        .footer-links {
            list-style: none !important;
            padding: 0 !important;
        }
        
        .footer-links li {
            margin-bottom: 0.5rem !important;
        }
        
        .footer-links a {
            color: #c0c0ff !important;
            text-decoration: none !important;
            transition: all 0.3s ease !important;
        }
        
        .footer-links a:hover {
            color: #00f3ff !important;
            padding-left: 5px !important;
        }
        
        .footer-bottom {
            border-top: 1px solid rgba(0, 243, 255, 0.3) !important;
            padding-top: 1rem !important;
            text-align: center !important;
        }
        
        .footer-bottom p {
            color: #8080b0 !important;
            font-size: 0.875rem !important;
        }
        
        .age-section {
            margin-bottom: 1rem !important;
        }
        
        .age-restriction {
            display: inline-block !important;
            background: #ff0055 !important;
            color: white !important;
            padding: 8px 16px !important;
            border-radius: 50% !important;
            font-size: 1.25rem !important;
            font-weight: 700 !important;
            box-shadow: 0 0 15px #ff0055 !important;
        }
        
        .compliance-logos {
            display: flex !important;
            gap: 1rem !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            margin-bottom: 1rem !important;
        }
        
        .compliance-logo {
            height: 35px !important;
            width: auto !important;
            background: rgba(255, 255, 255, 0.95) !important;
            padding: 8px !important;
            border-radius: 8px !important;
            opacity: 0.9 !important;
            transition: all 0.3s ease !important;
            border: 1px solid #00f3ff !important;
            object-fit: contain !important;
        }
        
        .compliance-logo:hover {
            opacity: 1 !important;
            border-color: #bf00ff !important;
            box-shadow: 0 0 10px rgba(191, 0, 255, 0.5) !important;
            transform: scale(1.05) !important;
        }
        
        .help-resources {
            margin-top: 1rem !important;
        }
        
        .help-resources p {
            margin-bottom: 0.5rem !important;
        }
        
        .help-resources a {
            color: #00f3ff !important;
            font-weight: 700 !important;
        }
        
        @media (max-width: 768px) {
            .hero { padding-top: 100px !important; margin-top: 60px !important; background-position: center top !important; }
            .main-header { height: 60px !important; }
            body { background: #0a0a1f !important; background-color: #0a0a1f !important; color: #00f3ff !important; }
            .articles-preview-grid { grid-template-columns: 1fr !important; }
            .footer-content { grid-template-columns: 1fr !important; }
            
            .mobile-menu-toggle {
                display: flex !important;
                z-index: 1001 !important;
            }
            
            .nav-menu {
                position: fixed !important;
                top: calc(60px - 1px) !important;
                left: 0 !important;
                width: 100% !important;
                height: calc(100vh - 60px) !important;
                background: rgba(10, 10, 31, 0.98) !important;
                backdrop-filter: blur(10px) !important;
                flex-direction: column !important;
                gap: 0 !important;
                padding: 2rem !important;
                transform: translateX(-100%) !important;
                transition: transform 0.3s ease !important;
                overflow-y: auto !important;
                border-top: 2px solid #00f3ff !important;
            }
            
            .nav-menu.active {
                transform: translateX(0) !important;
            }
            
            .nav-link {
                width: 100% !important;
                text-align: center !important;
                padding: 1rem !important;
                font-size: 1rem !important;
                border-bottom: 1px solid rgba(0, 243, 255, 0.2) !important;
            }
        }
    </style>
</head>
<body>
    <header class="main-header">
        <div class="container header-content">
            <div class="logo-section">
                <h1 class="site-logo">⚡ KoinOnein</h1>
                <span class="free-badge">KOSTENLOS</span>
            </div>
            <nav class="navbar">
                <ul class="nav-menu">
                    <li><a href="index.html" class="nav-link">Startseite</a></li>
                    <li><a href="index.html#games" class="nav-link">Spiele</a></li>
                    <li><a href="blog.html" class="nav-link">Blog</a></li>
                    <li><a href="guides.html" class="nav-link active">Anleitungen</a></li>
                    <li><a href="reviews.html" class="nav-link">Bewertungen</a></li>
                    <li><a href="about.html" class="nav-link">Über uns</a></li>
                    <li><a href="responsible-play.html" class="nav-link">Verantwortungsvoll Spielen</a></li>
                    <li><a href="account.html" class="nav-link cta-link">Konto</a></li>
                </ul>
                <button class="mobile-menu-toggle" aria-label="Menü öffnen">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </nav>
        </div>
    </header>

    <section class="hero" style="min-height: 40vh; padding-top: 140px;">
        <div class="hero-overlay"></div>
        <div class="container hero-content">
            <div class="hero-text">
                <h1 class="hero-title">Anleitungen</h1>
                <p class="hero-subtitle">Leitfäden und Tipps für besseres Gaming</p>
            </div>
        </div>
    </section>

    <section class="features-section">
        <div class="container">
            <h2 class="section-title">Gaming-Anleitungen</h2>
            <div class="articles-preview-grid">
                <div class="article-preview-card">
                    <h3>🎰 Slot-Spiele: Ein Einsteiger-Guide</h3>
                    <p>Lernen Sie die Grundlagen von Slot-Spielen und verstehen Sie Paylines, RTP und Volatilität...</p>
                    <a href="guides/slots-einsteiger-guide.html" class="read-more">Weiterlesen →</a>
                </div>
                <div class="article-preview-card">
                    <h3>🎮 HTML5-Gaming: Erste Schritte</h3>
                    <p>Entdecken Sie, wie HTML5-Spiele funktionieren und was Sie wissen müssen...</p>
                    <a href="guides/html5-gaming-guide.html" class="read-more">Weiterlesen →</a>
                </div>
                <div class="article-preview-card">
                    <h3>⚡ Performance-Optimierung</h3>
                    <p>Tipps für ein besseres Spielerlebnis auf allen Geräten...</p>
                    <a href="guides/performance-guide.html" class="read-more">Weiterlesen →</a>
                </div>
            </div>
        </div>
    </section>

    <section class="disclaimer-section">
        <div class="container">
            <div class="disclaimer-content">
                <h3>⚠️ WICHTIG: DIES IST KEIN ECHTGELD-CASINO</h3>
                <p><strong>🚫 KEIN ECHTGELD-GLÜCKSSPIEL:</strong> KoinOnein ist 100% KOSTENLOS. Kein echtes Geld, nur Unterhaltung!</p>
                <div class="disclaimer-badges">
                    <span class="badge-item">🆓 100% KOSTENLOS</span>
                    <span class="badge-item">❌ KEIN ECHTGELD</span>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>⚡ KoinOnein</h3>
                    <p>Ihre futuristische Social Gaming-Plattform für kostenlose Unterhaltung.</p>
                    <p class="footer-free">🆓 100% KOSTENLOS • KEIN ECHTGELD</p>
                </div>
                <div class="footer-section">
                    <h4>Navigation</h4>
                    <ul class="footer-links">
                        <li><a href="index.html">Startseite</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="about.html">Über uns</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>Rechtliches</h4>
                    <ul class="footer-links">
                        <li><a href="privacy-policy.html">Datenschutzerklärung</a></li>
                        <li><a href="responsible-play.html">Verantwortungsvoll spielen</a></li>
                    </ul>
                </div>
                <div class="footer-section compliance">
                    <h4>Spielerschutz</h4>
                    <div class="age-section"><span class="age-restriction">18+</span></div>
                    <div class="compliance-logos">
                        <a href="https://www.gambleaware.org/" target="_blank" rel="noopener noreferrer">
                            <img src="images/gambleaware.png" alt="GambleAware" class="compliance-logo">
                        </a>
                        <a href="https://www.gamecare.org.uk/" target="_blank" rel="noopener noreferrer">
                            <img src="images/gamecare.png" alt="GameCare" class="compliance-logo">
                        </a>
                        <a href="https://www.check-dein-spiel.de/" target="_blank" rel="noopener noreferrer">
                            <img src="images/check-dein-spiel.svg" alt="Check Dein Spiel" class="compliance-logo">
                        </a>
                        <a href="https://www.gordonmoody.org.uk/" target="_blank" rel="noopener noreferrer">
                            <img src="images/gordon-moody-logo.svg" alt="Gordon Moody" class="compliance-logo">
                        </a>
                    </div>
                    <div class="help-resources">
                        <p><strong>Brauchen Sie Hilfe?</strong></p>
                        <p>📞 BZgA: <a href="tel:08001372700">0800 1 37 27 00</a></p>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 Things U Need. Alle Rechte vorbehalten.</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>
</html>