* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; background: #0f1115; color: #eaeaea; }
header { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; background: #151922; border-bottom: 2px solid #ff3b3b; }
header div a, header div a:hover {color: #eaeaea; margin-left: 15px; text-decoration: none; white-space: nowrap; }
.logo { font-size: 1.4rem; font-weight: bold; }
nav a, footer a { color: #eaeaea; margin-left: 15px; text-decoration: none; white-space: nowrap; }
nav a:hover, nav a.active { color: #ff3b3b; }
nav a.active { font-weight: bold; }
.hero { padding: 60px 30px; text-align: center; background: linear-gradient(135deg, #1c1f2a, #0f1115); }
.hero.small { padding: 40px 30px; }
section { padding: 40px 30px; }
.linksToSources a {
    color: #eaeaea;
    text-decoration: none;
	text-align: center;
}

.linksToSources a:hover {
    color: #ff3b3b;
}
footer { text-align: center; padding: 20px; background: #151922; font-size: 0.9rem; }
/* Back to Top & Misc */
#backToTop { position: fixed; bottom: 30px; right: 30px; z-index: 1000; background-color: #ff3b3b; color: white; border: none; border-radius: 8px; padding: 12px 15px; cursor: pointer; display: none; flex-direction: column; align-items: center; gap: 5px; font-weight: bold; font-size: 0.7rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); }

/* Burger-Icon standardmäßig verstecken */
.nav-toggle-label {
    display: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #eaeaea;
}

@media (max-width: 768px) {
    header {
        position: relative;
        flex-wrap: wrap; /* Erlaubt dem Nav-Block, in die nächste Zeile zu rutschen */
    }

    .nav-toggle-label {
        display: block; /* Icon auf Mobilgeräten zeigen */
    }

    nav {
        display: none; /* Menü standardmäßig verstecken */
        width: 100%;
        flex-direction: column;
        background: #151922;
        padding: 5px 0;
        border-top: 1px solid #2a2f3a;
        margin-top: 5px;
    }

    nav a {
        margin: 0px 0;
        display: block;
        width: 100%;
        padding: 10px 0;
    }

    /* Wenn Checkbox aktiv ist (+), zeige nav (~) */
    .nav-toggle:checked ~ nav {
        display: flex;
    }
}