/** * ============================================================================= * STYLES.CSS - Hauptstil-Datei für Twitch-Community-Seite * ============================================================================= * * Diese Datei enthält alle CSS-Styles für die Twitch-Community-Seite. * Struktur: * 1. Globale Basis-Styles (Reset, Body, Farben) * 2. Header & Navigation * 3. Hero-Sektion (Startbereich mit animiertem Hintergrund) * 4. Buttons & Call-to-Action * 5. Content-Sektionen * 6. Feature-Karten * 7. Statistik-Karten * 8. Footer & Social Links * 9. Responsive Design (Mobile, Tablet) * 10. Animationen & Effekte * * Farbschema: * - Primär: #FF5A5A (Rot/Twitch-ähnlich) * - Sekundär: #FFA95A (Orange) * - Dunkel: #1a1a1a (Hintergrund) * - Text Hell: #ccc bis #fff * * Hinweis: Diese Datei wird in index.html im -Bereich verlinkt. * ============================================================================= */ /* ============================= */ /* 1. GLOBALE BASIS-STYLES */ /* ============================= */ /** * CSS-Reset: Alle Elemente erhalten margin: 0 und padding: 0 * box-sizing: border-box sorgt dafür, dass Border und Padding in die Breite eingerechnet werden */ * { margin: 0; padding: 0; box-sizing: border-box; } /** * Body-Styles: * - Font: Segoe UI (Windows) oder Fallback auf Systemfonts * - line-height: 1.6 = 60% mehr Zeilenhöhe als Schriftgröße (gutes Leserlebnis) * - Dunkler Hintergrund (#1a1a1a) für Gaming/Stream-Ästhetik * - Helle Textfarbe (#333 wird später überschrieben) */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; background: #1a1a1a; } /* ============================= */ /* 2. HERO-SEKTION */ /* ============================= */ /** * .hero = Der große Startbereich mit Hintergrund-Animation * - relative Positionierung = Basis für ::before und ::after Pseudo-Elemente * - animation: gradientShift 12s ease infinite = Der Farbverlauf animiert sich * - padding: 5rem 2rem = Großer innerer Abstand (oben/unten 5rem, links/rechts 2rem) * - overflow: hidden = Versteckt overflow von Pseudo-Elementen */ .hero { position: relative; background: linear-gradient(135deg, #404040, #333333, #4D4D4C); background-size: 400% 400%; animation: gradientShift 12s ease infinite; color: white; text-align: center; padding: 5rem 2rem; overflow: hidden; } /** * .hero::before = Marmor-Muster-Hintergrund (optional visueller Effekt) * - ::before ist ein Pseudo-Element das ANSICHTLICH hinter dem Inhalt liegt * - position: absolute mit top/left 0 = Füllt den ganzen Hero-Bereich * - width/height 100% = 100% der .hero-Breite/Höhe * - background-image: SVG = Ein geometrisches Muster * - pointer-events: none = Dieses Element "blockiert" keine Mausinteraktionen * - z-index: nicht gesetzt = Liegt unter .hero-content */ .hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;utf8,'); background-repeat: repeat; background-size: 80px; pointer-events: none; } /** * Animation: gradientShift * Lässt den Farbverlauf von links nach rechts und wieder zurück wandern * - 0%: Start-Position * - 50%: Versetzt um 100% = Hintergrund rutscht nach rechts * - 100%: Wieder am Anfang * Dauer: 12 Sekunden (siehe animation: gradientShift 12s) */ @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /** * .hero-content = Wrapper für Text & Buttons im Hero * - position: relative, z-index: 2 = Liegt ÜBER dem ::before Pseudo-Element und dem Hintergrund * - max-width: 800px = Maximale Breite des Inhalts (besser lesbar) * - margin: 0 auto = Zentriert sich horizontale auf der Seite */ .hero-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; } /** * h1 = Hauptüberschrift im Hero * - font-size: 2.8rem = 2,8x größer als default font-size (meist 16px = ca. 45px) * - background: linear-gradient(...) = Farbverlauf von Rot zu Orange zu Gelb * - background-clip: text = Der Farbverlauf wird AUF den Text angewendet * - -webkit-background-clip: text = Webkit-Browser (Chrome, Safari) Fallback * - color: transparent = Text selbst ist transparent, damit der Hintergrund sichtbar ist * - display: inline-block = Texte können mehrere Zeilen haben, Box umwickelt nur den Text */ h1 { font-size: 2.8rem; margin-bottom: 1rem; background: linear-gradient(45deg, #FF5A5A, #FF8B5A, #FFA95A, #FFD45A); background-clip: text; -webkit-background-clip: text; color: transparent; display: inline-block; } /** * .hero p = Beschreibungstext im Hero * - font-size: 1.2rem = 20% größer als Normaltext * - opacity: 0.9 = 90% Durchsichtigkeit = Wirkt etwas "gediemmter" als normale Text */ .hero p { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9; } /* ============================= */ /* 3. BUTTON & CALL-TO-ACTION */ /* ============================= */ /** * .cta-button = Call-to-Action Button (z.B. "Auf dem Laufenden bleiben") * - display: inline-block = Can be styled with width/height aber fließt mit Text * - background: #FF5A5A = Twitch-rotes Rot * - padding: 1rem 2rem = Innen-Abstand (1rem oben/unten, 2rem links/rechts) * - border-radius: 50px = Sehr stark gerundete Ecken = "Pille-Form" * - transition: transform 0.3s, background 0.3s = Smooth Animationen bei Hover (0,3 Sekunden) * - box-shadow: 0 4px 15px = Schatten unter dem Button */ .cta-button { display: inline-block; background: #FF5A5A; color: white; padding: 1rem 2rem; text-decoration: none; border-radius: 50px; font-weight: bold; transition: transform 0.3s, background 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } /** * .cta-button:hover = Wie der Button aussieht, wenn Maus drüber ist * - background: #FF8B5A = Heller/weniger sättigendes Rot wechsel zu Orange * - transform: scale(1.05) = Button wird um 5% größer (schöner Effekt) */ .cta-button:hover { background: #FF8B5A; transform: scale(1.05); } /* ============================= */ /* 4. HEADER & NAVIGATION */ /* ============================= */ /** * header = Obere Navigation & Logo * - background: rgba(0,0,0,0.8) = Fast schwarzer, aber noch etwas transparent (80% Deckung) * - backdrop-filter: blur(10px) = Blur-Effekt hinter dem Header (fancy!) * - position: sticky = Bleibt oben sichtbar, wenn man scrollt * - top: 0 = Zu oberst * - z-index: 100 = Liegt über allem anderen (außer Modals etc.) * - display: flex = Flexbox für einfaches Layout * - justify-content: space-between = Logo links, Navigation rechts * - flex-wrap: wrap = Wenn zu eng, umbrechen mehrere Zeilen */ header { background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 100; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } /** * .logo = Der "DeinStreamName" Text oben links * - font-size: 1.5rem = 50% größer als Normaltext * - color: #FF5A5A = Brand-Rot * - Wird meist ein Logo-Text sein */ .logo { font-size: 1.5rem; font-weight: bold; color: #FF5A5A; } /** * nav a = Links in der Navigation (Features, Stats, Kontakt) * - margin-left: 1.5rem = Abstand ZWISCHEN den Links * - transition: color 0.3s = Farbe animiert sich über 0,3 Sekunden * - color: white = Standard-Farbe weiß */ nav a { color: white; text-decoration: none; margin-left: 1.5rem; transition: color 0.3s; } /** * nav a:hover = Wenn Maus über Nav-Link ist * - color: #FFA95A = Wechsel zu Orange */ nav a:hover { color: #FFA95A; } /* ============================= */ /* 5. CONTENT-SEKTIONEN */ /* ============================= */ /** * section = Jeder große Content-Bereich (Features, Stats, etc.) * - padding: 4rem 2rem = Großer innerer Abstand * - max-width: 1200px = Content wird nicht zu breit * - margin: 0 auto = Zentriert sich */ section { padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; } /** * .section-title = Große Überschrift für jede Sektion * - font-size: 2rem = Doppelte Größe vom Normal-Text * - margin-bottom: 3rem = Großer Abstand nach unten (Platz für Content) * - text-align: center = Zentriert * - color: white = Helle Farbe für guten Kontrast */ .section-title { text-align: center; font-size: 2rem; margin-bottom: 3rem; color: white; } /* ============================= */ /* 6. FEATURE-KARTEN */ /* ============================= */ /** * .features = Container für die Feature-Karten * - display: flex = Flexbox-Layout * - flex-wrap: wrap = Wenn zu eng, gehen Karten in neue Zeile * - gap: 2rem = Abstand ZWISCHEN den Karten (nicht margin, sondern gap zwischen flex-items) */ .features { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; } /** * .feature = Jede einzelne Feature-Karte (z.B. "Detaillierte Statistiken") * - background: rgba(255,255,255,0.05) = 5% weiße Farbe = sehr subtler Hintergrund * - border-radius: 16px = Gerundete Ecken * - padding: 2rem = Innen-Abstand * - flex: 1 1 250px = Flex-Grow, Flex-Shrink, Min-Width * -> 1 1 250px bedeutet: "Wachse gleich wie andre, Schrumpfe gleich, aber mind. 250px breit" * - backdrop-filter: blur(5px) = Glasmorphismus-Effekt (sehr trendy) * - transition: transform 0.3s = Smooth Animation */ .feature { background: rgba(255,255,255,0.05); border-radius: 16px; padding: 2rem; text-align: center; flex: 1 1 250px; backdrop-filter: blur(5px); transition: transform 0.3s; } /** * .feature:hover = Wenn Maus über Feature-Karte ist * - transform: translateY(-10px) = Karte rückt 10px nach oben (Elevations-Effekt) */ .feature:hover { transform: translateY(-10px); } /** * .feature-icon = Das Emoji oder Icon in der Karte (z.B. 📊) * - font-size: 3rem = Sehr groß (zum "Ertasten" der Feature) */ .feature-icon { font-size: 3rem; margin-bottom: 1rem; } /** * .feature h3 = Titel der Feature-Karte * - color: #FFA95A = Orange (Brand-Farbe) */ .feature h3 { margin-bottom: 1rem; color: #FFA95A; } /** * .feature p = Beschreibungstext in Feature-Karten * - color: #ccc = Hell-Grau (nicht ganz weiß) */ .feature p { color: #ccc; } /* ============================= */ /* 7. STATISTIK-KARTEN */ /* ============================= */ /** * .stats = Container für die 3 Statistik-Karten (Follower, Stream-Dauer, Sub-Punkte) * - display: flex = Flexbox für horizontales Layout * - background: rgba(255,255,255,0.03) = Sehr subtiler weißer Hintergrund * - border-radius: 24px = Große gerundete Ecken * - padding: 2rem = Innen-Abstand */ .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; background: rgba(255,255,255,0.03); border-radius: 24px; padding: 2rem; } /** * .stat-card = Jede einzelne Statistik-Karte * - background: #2a2a2a = Dunkel-Grau * - padding: 1.5rem = Innen-Abstand * - flex: 1 1 200px = Minimum 200px Breite, sonst wachsen/schrumpfen gleich * - box-shadow: 0 8px 20px = Schatten darunter (tieferes Graben-Gefühl) */ .stat-card { background: #2a2a2a; border-radius: 16px; padding: 1.5rem; text-align: center; flex: 1 1 200px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); } /** * .stat-number = Die große Zahl (z.B. "42500" Follower) * - font-size: 2.5rem = SEHR gross * - color: #FFA95A = Orange * - font-weight: bold = Fett */ .stat-number { font-size: 2.5rem; font-weight: bold; color: #FFA95A; } /** * .stat-label = Das Label unter der Zahl (z.B. "Follower") * - color: #aaa = Dunkel-Grau * - margin-top: 0.5rem = Kleiner Abstand nach oben */ .stat-label { color: #aaa; margin-top: 0.2rem; text-decoration: underline; font-weight: bold; } /** * .stat-description = Kleine Beschreibung unter dem Label * - font-size: 0.9rem = Größer für bessere Lesbarkeit * - color: #ddd = Hell-Grau, sehr lesbar * - margin-top: 0.3rem = Kleiner Abstand */ .stat-description { font-size: 0.9rem; color: #ddd; margin-top: 0.0rem; text-transform: capitalize; } /** * .twitch-embed = Container für eingebette Twitch-Clips oder Videos * - margin-top: 2rem = Abstand nach oben * - text-align: center = Video zentriert */ .twitch-embed { margin-top: 2rem; text-align: center; } /** * iframe = Eingebette Videos/Clips (z.B. Twitch Clips) * - max-width: 100% = Wird nicht breiter als Container * - border-radius: 12px = Leicht gerundete Ecken * - border: none = Keine Border */ iframe { max-width: 100%; border-radius: 12px; border: none; } /* ============================= */ /* 8. FOOTER & SOCIAL LINKS */ /* ============================= */ /** * footer = Bereich am unteren Ende der Seite * - background: #111 = Fast schwarz (noch dunkler als body) * - color: #aaa = Grau (nicht ganz weiß) * - text-align: center = Alles zentriert * - padding: 2rem = Innen-Abstand * - margin-top: 2rem = Abstand nach oben */ footer { background: #111; color: #aaa; text-align: center; padding: 2rem; margin-top: 2rem; } /** * .social-links = Container für Social-Media-Links (Twitch, Discord, YouTube, etc.) * - margin-bottom: 1rem = Abstand nach unten */ .social-links { margin-bottom: 1rem; } /** * .social-links a = Jeder Social-Media-Link * - color: #FFA95A = Orange (Brand-Farbe, damit auffällig) * - margin: 0 0.5rem = Abstand ZWISCHEN den Links * - font-size: 1.2rem = 20% größer */ .social-links a { color: #FFA95A; margin: 0 0.5rem; text-decoration: none; font-size: 1.2rem; } /** * .footer-links a = Links im Footer (Impressum, Datenschutz) * - color: #aaa = Grau (weniger prominent als Social-Links) * - margin: 0 0.5rem = Abstand zwischen * - font-size: 0.9rem = 10% kleiner (Kleintext) */ .footer-links a { color: #aaa; margin: 0 0.5rem; text-decoration: none; font-size: 0.9rem; } /** * .footer-links a:hover = Wenn Maus über Footer-Link * - color: #FFA95A = Wechsel zu Orange */ .footer-links a:hover { color: #FFA95A; } /* ============================= */ /* 9. RESPONSIVE DESIGN */ /* ============================= */ /** * @media (max-width: 768px) = Diese Styles gelten NUR auf Bildschirmen ≤ 768px breit * Das sind meist Tablets (iPad im Portrait) und Handys * * Was ändert sich: * - h1: Wird kleiner (von 2.8rem auf 2rem) * - hero: Weniger Padding (3rem statt 5rem) * - header: Breitet sich auf mehrere Zeilen aus (flex-direction: column) * - nav: Weniger Abstand zwischen Links */ @media (max-width: 768px) { h1 { font-size: 2rem; } .hero { padding: 3rem 1rem; } header { flex-direction: column; gap: 1rem; } nav a { margin: 0 0.75rem; } } /* ============================= */ /* ENDE DER CSS */ /* ============================= */