:root {
    --bg-color: #0a0a0a;
    --text-color: #ffffff;
    --accent-color: #0096ff;
    --card-bg: #141414;
    --border-color: #2a2a2a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--bg-color); color: var(--text-color); font-family: sans-serif; line-height: 1.6; }

/* Banner: Skaliert jetzt immer korrekt ohne Abschneiden */
header { background-color: #000; width: 100%; }
.banner { 
    width: 100%; 
    height: auto; 
    display: block; 
}

/* Menü: Jetzt sauber nebeneinander */
nav { background-color: var(--card-bg); padding: 20px 0; text-align: center; border-bottom: 1px solid var(--border-color); }
nav ul { list-style: none; display: flex; justify-content: center; gap: 30px; }
nav ul li { display: inline; }
nav a { color: #fff; text-decoration: none; font-weight: bold; font-size: 1.1em; }
nav a:hover { color: var(--accent-color); }

main { max-width: 1000px; margin: 40px auto; padding: 0 20px; }

/* Video-Animation (Canvas) */
.video-teaser-container { position: relative; width: 100%; height: 400px; overflow: hidden; border-radius: 12px; border: 1px solid #333; background: #000; }
.video-teaser-container canvas { width: 100%; height: 100%; filter: blur(8px); }
.video-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.card { background: var(--card-bg); padding: 30px; border-radius: 8px; border: 1px solid #333; }