/* ==================== style.css ==================== */

@tailwind base;
@tailwind components;
@tailwind utilities;

.hero-bg {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.5)), url('grafik/hero.jpg');
    background-size: cover;
    background-position: center;
    min-height: 620px;           /* Standard für Desktop */
}

/* Auf großen Bildschirmen nicht zu hoch */
@media (min-width: 1024px) {
    .hero-bg {
        min-height: 680px;       /* etwas höher als im Mockup */
    }
}

/* Auf sehr großen Monitoren etwas kleiner halten */
@media (min-width: 1536px) {
    .hero-bg {
        min-height: 620px;
    }
}

/* Sehr transparenter Header */
header {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(2px);
}

header h1 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.nav-link {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}