:root {
    --bg-color: #ffffff;
    --text-color: #111111;
    --accent-color: #e60000;
    --gray-light: #f8f8f8;
    --card-bg: #ffffff;
    --shadow: 0 10px 30px rgba(0,0,0,0.05);
}

body.dark-mode {
    --bg-color: #0a0a0a;
    --text-color: #ffffff;
    --gray-light: #121212;
    --card-bg: #1a1a1a;
    --shadow: 0 10px 30px rgba(0,0,0,0.3);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0; padding: 0;
    background: var(--bg-color); color: var(--text-color);
    overflow-x: hidden;
    transition: background 0.3s, color 0.3s;
}

/* Scroll-Sperre bei offenem Menü */
body.nav-open { overflow: hidden; }

/* --- CLOUDFLARE --- */
#turnstile-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-color); z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#main-content { opacity: 0; transition: opacity 1s ease; }
#main-content.visible { opacity: 1; }

/* --- NAV HEADER --- */
.nav-header { position: fixed; top:0; width:100%; padding:20px 5%; box-sizing: border-box; display:flex; justify-content:space-between; z-index:2000; mix-blend-mode: difference; color: white; }
.burger-menu { cursor:pointer; display:flex; flex-direction:column; gap:6px; }
.burger-menu span { width:30px; height:2px; background: white; transition: 0.3s; }
.burger-menu:hover span { background: var(--accent-color); }

/* --- BURGER MENÜ --- */
.full-nav {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-color); z-index: 1999;
    
    transform: translateY(-100%); 
    transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    
    overflow-y: auto; padding: 0; 
}
.full-nav.active { transform: translateY(0); }
.nav-links { width: 100%; display: flex; justify-content: center; }
.full-nav ul { list-style:none; padding:0; text-align:center; }
.full-nav a { font-size: clamp(2rem, 5vw, 4rem); text-decoration:none; color:var(--text-color); font-weight:900; text-transform:uppercase; transition: color 0.3s; }
.full-nav a:hover { color: var(--accent-color); }


/* --- HERO --- */
.hero-wrapper { height:100vh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.hero-image { position:absolute; top:0; left:0; width:100%; height:100%; background: url('../img/gallery/evo_hero.jpg') center/cover; z-index:-1; filter:brightness(0.7); transform: scale(1.1); transition: transform 0.2s; }
.hero-title { color:white; font-size: clamp(3rem, 12vw, 10rem); text-transform:uppercase; margin:0; letter-spacing: -2px; text-shadow: 0 10px 30px rgba(0,0,0,0.5); }

/* --- SECTIONS --- */
section { padding: 100px 10%; overflow: hidden; }
h2 { text-transform: uppercase; letter-spacing: -1px; margin-bottom: 40px; }

/* --- ABOUT GRID --- */
.bio-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.bio-grid img { transition: transform 0.5s; }
.bio-grid img:hover { transform: scale(1.02); }

/* --- ANIMATIONEN --- */
.reveal { opacity:0; transform:translateY(50px); transition: all 1s ease; }
.reveal-left { opacity:0; transform:translateX(-50px); transition: all 1s ease; }
.reveal-right { opacity:0; transform:translateX(50px); transition: all 1s ease; }
.reveal.active, .reveal-left.active, .reveal-right.active { opacity:1; transform:translate(0); }

/* --- EVOLUTION STRIP GALLERY (NEU) --- */
.evo-strip-gallery {
    display: flex; gap: 20px; height: 600px;
    align-items: flex-start; padding: 20px 0;
}
.evo-strip {
    flex: 1; height: 90%; position: relative; overflow: hidden;
    border-radius: 5px; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.evo-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.evo-strip:nth-child(even) { margin-top: 50px; }
.evo-strip:hover { flex: 2; }
.evo-strip:hover img { transform: scale(1.1); }
.strip-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); opacity: 0; transition: 0.3s;
}
.strip-overlay h3 { color: white; margin: 0; font-size: 1.2rem; letter-spacing: 2px; transform: translateY(20px); transition: 0.3s; }
.evo-strip:hover .strip-overlay { opacity: 1; }
.evo-strip:hover .strip-overlay h3 { transform: translateY(0); }

/* --- SPECS --- */
.spec-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:30px; }
.spec-card { background:var(--card-bg); padding:40px; border-top:4px solid var(--accent-color); box-shadow: var(--shadow); border-radius: 8px; }
.spec-item { display:flex; justify-content:space-between; border-bottom:1px solid rgba(128,128,128,0.2); padding:15px 0; font-size: 0.95rem; }
.spec-item span:first-child { font-weight: bold; color: var(--accent-color); }

/* --- SOCIAL & FOOTER --- */
.social-icons { display: flex; gap: 20px; justify-content: center; margin: 30px 0 50px; }
.s-btn { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; text-decoration: none; color: white; transition: transform 0.3s; background: #333; }
.s-btn:hover { transform: translateY(-5px); }
.insta { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.fb { background: #3b5998; }
.snap { background: #FFFC00; color: black; }
.tiktok { background: #000000; }

footer { text-align: center; padding: 80px 20px 40px; background: var(--gray-light); margin-top: 50px; }
.footer-sponsors-wrapper { margin-bottom: 30px; }
.footer-sponsor-list { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; align-items: center; }
.footer-sponsor-item img { height: 50px; width: auto; filter: grayscale(100%); opacity: 0.5; transition: 0.3s; }
.footer-sponsor-item img:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.1); }

/* --- TOAST --- */
#theme-toast {
    position: fixed; top: 100px; left: 50%; transform: translateX(-50%) translateY(-50px);
    background-color: #000000; color: #ffffff; border-left: 5px solid var(--accent-color);
    padding: 15px 40px; font-family: 'Helvetica Neue', sans-serif; font-weight: 900;
    text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem;
    opacity: 0; pointer-events: none; z-index: 10000;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
#theme-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    section { padding: 60px 5%; }
    .hero-title { font-size: 15vw; }
    
    .nav-header { padding: 20px; }
    .spec-grid { grid-template-columns: 1fr; }

    /* LAYOUT REPARATUR */
    .bio-grid {
        display: flex;
        flex-direction: column; 
        gap: 40px; 
        text-align: center;
    }

    /* Block 1 (Disziplin):
       Die Überschrift ist jetzt separat im HTML.
       Das Grid enthält nur noch Bild und Text.
       Default Column: Bild -> Text. 
       DAS IST PERFEKT (Kein reverse nötig).
    */

    /* Block 3 (Community):
       HTML ist Video -> Text.
       Reverse macht daraus: Text -> Video.
    */
    #about .bio-grid:nth-of-type(3) {
        flex-direction: column-reverse;
    }

    /* Animation */
    .reveal-left { transform: translateX(-30px); }
    .reveal-right { transform: translateX(30px); }
    .reveal-left.active, .reveal-right.active { transform: translateX(0); }

    /* Galerie Mobile */
    .evo-strip-gallery { flex-direction: column; height: auto; gap: 15px; }
    .evo-strip { width: 100%; height: 200px; margin-top: 0 !important; }
    .strip-overlay { opacity: 1; }
    .strip-overlay h3 { transform: translateY(0); font-size: 1rem; }
    .evo-strip:nth-child(odd) { transform: translateX(-20px); }
    .evo-strip:nth-child(even) { transform: translateX(20px); }
    .evo-strip.active { transform: translateX(0); }
}