/* 
   =========================================
   MEDIA.CSS - VOLLSTÄNDIG & FIXIERT
   ========================================= 
*/

/* BEREICH 1: HEADER (Bild wp6.png) */
.main-bg { 
    background: linear-gradient(rgba(15, 15, 15, 0.8), rgba(15, 15, 15, 0.8)), url('../pic/wp6.png') center/cover fixed; 
    min-height: 45vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.main-bg h1 { 
    font-family: var(--font-title); 
    font-size: clamp(2rem, 5vw, 3.5rem); 
    color: #fff; 
    text-transform: uppercase; 
    text-shadow: 0 0 20px var(--hytale-green); 
}

/* SUB-MENÜ KORREKTUR (Z-Index Fix gegen Verdeckung) */
.sub-menu { 
    background: #1d1d1d; 
    border-bottom: 2px solid #444; 
    position: sticky; 
    top: var(--header-height, 80px); /* Dockt unter dem Header an */
    z-index: 500; /* Niedriger als Main-Header (9999) */
}

.sub-menu-inner { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    padding: 12px; 
}

.sub-menu a { 
    font-weight: 700; 
    color: #eee; 
    text-decoration: none; 
    font-size: 0.85rem; 
    text-transform: uppercase; 
    padding: 8px 16px; 
    border-radius: 20px; 
    transition: .3s; 
    border: 1px solid transparent; 
}

.sub-menu a.active, 
.sub-menu a:hover, 
.sub-menu a:focus-visible { 
    color: #fff; 
    background: var(--hytale-green); 
    outline: none; 
}

/* STREAM SECTION (Twitch/Video) */
.stream-section { 
    max-width: 1100px; 
    margin: 0 auto 40px; 
    width: 90%; 
}

.video-wrapper { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    border-radius: 20px; 
    overflow: hidden; 
    border: 3px solid var(--hytale-green); 
    background: #000; 
}

.video-wrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

/* BEREICH 2: GRID (Hintergrund wp3.jpg) */
.grid-bg {
    background: linear-gradient(rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.95)), url('../pic/wp3.jpg') center/cover fixed;
    padding: 100px 5%;
}

.kachel-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px; 
    max-width: 1200px; 
    margin: 0 auto; 
}

.kachel { 
    min-height: 380px; 
    border-radius: 25px; 
    display: flex; 
    align-items: flex-end; 
    padding: 30px; 
    text-decoration: none; 
    color: #fff; 
    transition: 0.4s; 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    background-size: cover; 
    background-position: center;
}

.kachel:hover, 
.kachel:focus-visible { 
    transform: translateY(-12px); 
    border-color: var(--hytale-green); 
    outline: 3px solid #fff; 
}

/* Kachel-Hintergründe */
.kachel-youtube { 
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent), url('../pic/wp6.png'); 
}

.kachel-twitch { 
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent), url('../pic/wp3.jpg'); 
}

.kachel-content h2 { 
    font-family: var(--font-title); 
    font-size: 1.8rem; 
    margin-bottom: 8px; 
    color: #fff; 
}

.kachel-content p { 
    color: #eee; 
    font-size: 1rem; 
    font-weight: 500; 
}