/* --- GRUNDSTILE & SEITENSTRUKTUR --- */
html, body { height: 100%; margin: 0; padding: 0; }
body { background-color: #121212; color: #ffffff; font-family: Arial, sans-serif; display: flex; flex-direction: column; position: relative; }
.video-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.video-background video { width: 100%; height: 100%; object-fit: cover; }
header, footer { background-color: #1a1a1a; border-bottom: 1px solid #333; padding: 20px 5%; position: relative; z-index: 10; }
footer { border-bottom: none; border-top: 1px solid #333; text-align: center; color: #888; font-size: 0.9em; }
header { display: flex; justify-content: space-between; align-items: center; }
.logo { height: 50px; width: auto; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
nav li { margin-left: 30px; }
nav a { color: #ffffff; text-decoration: none; font-size: 1.1em; font-weight: bold; transition: color 0.3s; text-transform: uppercase; }
nav a:hover { color: #a0a0a0; }
.menu-toggle { display: none; background: none; border: none; color: white; font-size: 1.8em; cursor: pointer; }
main { flex-grow: 1; display: flex; justify-content: center; align-items: center; padding: 40px 20px; }

/* --- Inhaltsboxen --- */
.home-content, .story-content, .media-gallery, .follow-page, .buy-page-content {
    background-color: rgba(26, 26, 26, 0.85); padding: 40px; border-radius: 12px;
    max-width: 800px; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.home-content, .buy-page-content { max-width: 700px; text-align: center; }
.game-cover { max-width: 90%; width: 350px; height: auto; border-radius: 8px; margin-bottom: 20px; }
.home-content h2 { font-size: 2.5em; margin: 0; }
.home-content p { font-size: 1.3em; color: #c0c0c0; }
.story-content h1, .media-gallery h1, .follow-page h1 { font-size: 2.8em; margin-bottom: 15px; text-align: center; }
.story-content h2, .media-gallery h2, .follow-page h2 { font-size: 1.8em; color: #c0c0c0; text-align: center; margin-bottom: 40px; }
.story-content p { font-size: 1.2em; line-height: 1.6; margin-bottom: 20px; text-align: left; }
.placeholder { background-color: #2a2a2a; border: 2px dashed #444; display: flex; justify-content: center; align-items: center; color: #888; font-size: 1.2em; border-radius: 8px; }
.video-placeholder { width: 100%; max-width: 800px; margin: 0 auto 50px auto; aspect-ratio: 16 / 9; }
.image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.image-placeholder { width: 100%; aspect-ratio: 16 / 10; }
.social-icons { margin-bottom: 50px; }
.social-icons a { font-size: 2.5em; color: #ffffff; margin: 0 15px; transition: transform 0.3s, color 0.3s; display: inline-block; }
.social-icons a:hover { transform: scale(1.1); color: #a0a0a0; }
.follow-page h2 { border-top: 1px solid #333; padding-top: 40px; }
.follow-page p { text-align: center; }
.contact-email { display: inline-block; margin-top: 10px; padding: 10px 20px; background-color: #333; color: #ffffff; border-radius: 5px; text-decoration: none; font-weight: bold; transition: background-color 0.3s; }
.contact-email:hover { background-color: #555; }

/* =================================
   HAUPT-BUTTON-STIL (CTA & BETA)
   ================================= */
/* HIER IST DIE 1. ÄNDERUNG: Ich habe beide Klassen zusammengefasst. */
.cta-button, .beta-button {
    display: inline-block; margin-top: 30px; padding: 15px 40px; background-color: #a00000;
    color: #ffffff; text-decoration: none; font-size: 1.2em; font-weight: bold;
    border: none; /* Wichtig für <button> Elemente */
    text-transform: uppercase; border-radius: 8px; transition: background-color 0.3s, transform 0.2s;
    cursor: pointer; /* Damit die Maus zur Hand wird */
}
.cta-button:hover, .beta-button:hover { background-color: #ff0000; transform: scale(1.05); }


/* =================================
   STIL FÜR BETA-ANFRAGEFORMULAR
   ================================= */
/* HIER IST DIE 2. ÄNDERUNG: Stile für das Formular hinzugefügt */
.beta-form-container {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 30px 40px;
    border-radius: 10px;
    max-width: 600px;
    margin: 20px auto;
    text-align: center;
}

.form-description {
    margin-bottom: 25px;
    line-height: 1.6;
    color: #c0c0c0;
}

.beta-input {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    background-color: #222;
    border: 1px solid #444;
    color: #fff;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box; /* Verhindert, dass Padding die Breite beeinflusst */
}

/* --- Navigations-Button (Store) --- */
.nav-buy-button {
    background-color: #333; /* Neutraleres Grau */
    padding: 10px 20px; border-radius: 6px; border: 1px solid #555;
    transition: background-color 0.3s, border-color 0.3s;
}
.nav-buy-button:hover { background-color: #555; border-color: #777; color: #ffffff !important; }

/* --- Stile für die buy.html Platzhalter-Seite --- */
.buy-page-content h1 { font-size: 2.5em; margin: 0 0 10px 0; }
.page-description { font-size: 1.2em; line-height: 1.6; color: #c0c0c0; max-width: 600px; margin: 0 auto 30px auto; }
.placeholder-box {
    text-align: left; background-color: rgba(0,0,0,0.2);
    padding: 25px; border: 1px dashed #444; border-radius: 8px;
}
.placeholder-box p { font-size: 1.1em; line-height: 1.6; margin: 0; }
.placeholder-box p:not(:last-child) { margin-bottom: 20px; }
.placeholder-box ul { list-style: none; padding-left: 0; margin-top: 15px; margin-bottom: 0; }
.placeholder-box li { margin-bottom: 10px; font-size: 1.1em; }

/* --- MEDIA QUERY --- */
@media (max-width: 768px) {
    .menu-toggle { display: block; }
    nav {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background-color: rgba(20, 20, 20, 0.98);
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
    }
    nav.active { transform: translateX(0); }
    nav ul { flex-direction: column; justify-content: center; height: 100%; }
    nav li { margin: 20px 0; }
    nav a { font-size: 1.5em; }
    .nav-buy-button { display: inline-block; margin-top: 15px; }
    .home-content, .story-content, .media-gallery, .follow-page, .buy-page-content { padding: 30px 20px; }
    .game-cover { width: 250px; }
    .home-content h2 { font-size: 2em; }
}