/* -----------------------------------------
   Grundfarben & Basistypografie
----------------------------------------- */
:root {
    --brand: #4d8190;
    --brand-dark: #3c6671;
}

body {
    font-family: 'Montserrat', sans-serif;
}

.bg-brand {
    background-color: var(--brand);
}

.bg-brand-dark {
    background-color: var(--brand-dark);
}

.section {
    scroll-margin-top: 96px;
}

.shadow-soft {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.brand {
    color: var(--brand);
}


/* -----------------------------------------
   NEON Logo-Schrift
----------------------------------------- */
.neon-word {
    font-family: "alfarn", sans-serif;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--brand);
    display: inline-block;
    font-size: 1.05em;
}

.neon-word::first-letter {
    font-size: 1.3em;
    line-height: 0.9;
}


/* -----------------------------------------
   Hero Headline Styling
----------------------------------------- */
.hero-title {
    line-height: 1.1;
    font-weight: 800;
    max-width: 22ch;
    font-size: 2.8rem;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 3.5rem;
    }
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: 4rem;
    }
}


/* -----------------------------------------
   Animationen – Fade, Slide, Zoom
----------------------------------------- */

/* Sanfter Fade-In + Slide-Up */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.9s ease-out forwards;
}

.fade-up.delay-1 { animation-delay: 0.15s; }
.fade-up.delay-2 { animation-delay: 0.3s; }
.fade-up.delay-3 { animation-delay: 0.45s; }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Bild Fade + sanfter Zoom beim Laden */
.image-fade {
    opacity: 0;
    transform: scale(0.98);
    animation: imageFade 0.8s ease-out forwards;
}

@keyframes imageFade {
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* Buttons – eleganter Hover Lift */
.button-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}


/* Cards (z.B. Audio-Karten) – kleiner Pop-in Effekt */
.card-pop {
    opacity: 0;
    transform: translateY(10px);
    animation: cardPop 0.6s ease-out forwards;
}

/* Automatische Verzögerungen für Grid-Items */
.card-pop:nth-child(1)  { animation-delay: 0.05s; }
.card-pop:nth-child(2)  { animation-delay: 0.10s; }
.card-pop:nth-child(3)  { animation-delay: 0.15s; }
.card-pop:nth-child(4)  { animation-delay: 0.20s; }
.card-pop:nth-child(5)  { animation-delay: 0.25s; }
.card-pop:nth-child(6)  { animation-delay: 0.30s; }
.card-pop:nth-child(7)  { animation-delay: 0.35s; }
.card-pop:nth-child(8)  { animation-delay: 0.40s; }
.card-pop:nth-child(9)  { animation-delay: 0.45s; }
.card-pop:nth-child(10) { animation-delay: 0.50s; }
.card-pop:nth-child(11) { animation-delay: 0.55s; }
.card-pop:nth-child(12) { animation-delay: 0.60s; }

@keyframes cardPop {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}