/*
 * Copyright (C) 2026 by scriptwriter13
 */
:root {
    --bg-color: #050505;
    --card-bg: #151515;
    --accent-green: #55FF55; /* NAV_GREEN */
    --accent-orange: #FF8000; /* NAV_ORANGE */
    --text-main: #ffffff;
    --text-dim: #b0b0b0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header { text-align: center; margin-bottom: 50px; }

.hero-image {
    width: 100%;
    max-width: 250px;
    border-radius: 20px;
    border: 2px solid var(--accent-green);
    box-shadow: 0 0 30px rgba(85, 255, 85, 0.15);
    margin-bottom: 20px;
}

h1 { color: var(--accent-green); font-size: 3rem; margin: 0; letter-spacing: -1px; }
h2 { color: var(--accent-orange); border-left: 4px solid var(--accent-orange); padding-left: 15px; margin-top: 0; }

main { max-width: 700px; width: 100%; }

section {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 25px;
    border: 1px solid #333;
}

.btn {
    display: inline-block;
    background: var(--accent-green);
    color: #000;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn:hover { background: #fff; transform: translateY(-2px); }

footer { margin-top: 50px; font-size: 0.85rem; color: #555; }

/* Sprachumschaltung */
.lang-switcher { margin: 20px 0; text-align: center; }
.lang-btn { cursor: pointer; background: none; border: 1px solid var(--text-dim); color: var(--text-dim); padding: 5px 10px; border-radius: 4px; margin: 0 5px; }
.lang-btn.active { border-color: var(--accent-green); color: var(--accent-green); }

/* Sichtbarkeit steuern */
.lang-en .lang-de { display: none; }
.lang-de .lang-en { display: none; }