/*
 * sections.css
 * Enthält: bereichsspezifische Styles (Hero, Logo-Glow) und große Hero-Breakpoints.
 */

@keyframes logoIconGlow {
    0%,
    100% {
        filter: none;
        transform: scale(1) translateY(0);
    }

    28% {
        filter: drop-shadow(0 0 44px rgba(121, 158, 134, 0.95)) drop-shadow(0 0 18px rgba(226, 240, 232, 0.9)) brightness(1.18) saturate(1.22);
        transform: scale(1.065) translateY(-7px);
    }
}

.logo-quote-trigger.is-glowing .logo-icon {
    animation: logoIconGlow 2.3s cubic-bezier(0.22, 0.68, 0.15, 1);
}

.hero-section {
    padding-top: clamp(280px, 24vw, 420px);
    padding-bottom: 12px;
    background: transparent;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

.hero-content p {
    margin-bottom: 22px;
}

@media (min-width: 1500px) {
    .hero-section {
        padding-top: 584px;
    }
}

@media (min-width: 1301px) and (max-width: 1499px) {
    .hero-section {
        padding-top: 452px;
    }
}

@media (min-width: 1025px) and (max-width: 1300px) {
    .hero-section {
        padding-top: 420px;
    }
}