/* News Benachrichtigung System - Diskrete Hinweise für neue News */

/* Roter Punkt/Badge am News-Button */
.news-notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: linear-gradient(135deg, #DC3545, #C82333);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4);
    animation: pulse-news 2s infinite;
    z-index: 10;
    border: 1px solid white;
}

.news-notification-badge.simple-dot {
    width: 12px;
    height: 12px;
    padding: 0;
    min-width: 12px;
    border-radius: 50%;
    background: #DC3545;
}

@keyframes pulse-news {
    0% { transform: scale(1); box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4); }
    50% { transform: scale(1.1); box-shadow: 0 3px 8px rgba(220, 53, 69, 0.6); }
    100% { transform: scale(1); box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4); }
}

/* Service Icon mit Badge - Relative Positionierung für Badge */
.service-icon {
    position: relative;
}

.service-icon.has-news-notification {
    overflow: visible;
}

/* Dropdown Link mit Badge */
.dropdown-menu li {
    position: relative;
}

.dropdown-menu a.has-news-notification {
    position: relative;
    font-weight: 600;
    color: #EB5E28 !important;
}

.dropdown-menu a.has-news-notification .news-notification-badge {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

/* Mini-Notification Stripe - EINFACH UND FUNKTIONAL */
.news-notification-stripe {
    position: relative;
    width: 100%;
    background: linear-gradient(90deg, #EB5E28, #FF8A50, #EB5E28);
    color: white;
    padding: 15px 20px !important; /* Gleichmäßiges Padding für mittige Zentrierung */
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    z-index: 100;
    box-shadow: 0 3px 12px rgba(235, 94, 40, 0.3);
    animation: slideInFromTop 0.5s ease-out;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 !important;
    margin-top: -35px !important; /* NOCH aggressiver - schließt auch kleinste Lücken */
    border: none !important;
    line-height: 1.2 !important; /* Bessere Textzentrierung */
}

.news-notification-stripe:hover {
    background: linear-gradient(90deg, #DC3545, #C82333, #DC3545);
    transform: translateY(1px);
    box-shadow: 0 3px 12px rgba(220, 53, 69, 0.4);
}

.news-notification-stripe i {
    margin-right: 8px;
    animation: bounce-horizontal 2s infinite;
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 60px;
    }
}

/* Legacy Animation für Kompatibilität */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes bounce-horizontal {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}

/* Schließen-Button für Stripe */
.news-notification-stripe .close-stripe {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.3s;
}

.news-notification-stripe .close-stripe:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .news-notification-stripe {
        padding: 6px 40px 6px 20px;
        font-size: 12px;
    }
    
    .news-notification-stripe .close-stripe {
        right: 10px;
        font-size: 14px;
    }
    
    .news-notification-badge {
        top: -3px;
        right: -3px;
        font-size: 9px;
        min-width: 14px;
        height: 14px;
    }
    
    .news-notification-badge.simple-dot {
        width: 10px;
        height: 10px;
        min-width: 10px;
    }
}

/* Versteckt standardmäßig - wird über JavaScript aktiviert */
.news-notification-badge,
.news-notification-stripe {
    display: none !important;
}

.news-notification-badge.show {
    display: flex !important;
}

.news-notification-stripe.show {
    display: block !important;
}

/* Fade-out Animation beim Schließen */
.news-notification-stripe.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

/* SLIDESHOW-PUNKTE VERSTECKEN - Automatische Slideshow ohne sichtbare Navigation */
.slideshow-dots {
    display: none !important;
}

/* Auch andere mögliche Slideshow-Navigation verstecken */
.hero .slideshow-dots,
.hero-slideshow .slideshow-dots,
.dots,
.slide-dots,
.carousel-dots {
    display: none !important;
    visibility: hidden !important;
}

/* HERBSTBLATT-ANIMATION - Sicherstellen dass es läuft */
#autumn-animation {
    /* Sicherstellen dass Container sichtbar ist */
    display: block !important;
    pointer-events: none !important;
    z-index: 9998 !important;
}

.falling-leaf {
    /* Sicherstellen dass Blätter von ganz oben starten */
    top: -200px !important;
    position: absolute !important;
}

/* HERBST-ANIMATION FORCE-AKTIVIERUNG */
body:not(.no-autumn-animation) #autumn-animation {
    display: block !important;
}