#news-sidebar {
    background-color: #f8f9fa;
    padding-left: 1rem;  
    padding-right: 1rem; 
}

/* --- Mobile-Ansicht (Overlay) --- */
@media (max-width: 991.98px) {
    /* Der Container wird zum Anker für die 'absolute' Sidebar */
    #vdc_container {
        position: relative;
    }

    #news-sidebar {
        /* 1. Als Overlay positionieren */
        position: absolute; 
        top: 0;
        right: 0;
        bottom: 0;
        height: auto; 

        /* 2. Breite und Aussehen */
        width: 90%; 
        max-width: 350px; 
        z-index: 1030;
        /* HIER: Shadow zur Transition hinzugefügt */
        transition: transform 0.3s ease, box-shadow 0.3s ease; 
        background-color: white;
        
        /* 3. Standardmäßig versteckt */
        transform: translateX(100%); 
        
        /* --- FIX: Standardmäßig keinen Schatten --- */
        box-shadow: none;
    }

    #news-sidebar.active {
        /* Sichtbar schieben */
        transform: translateX(0%);
        
        /* --- FIX: Schatten wiederherstellen (Wert von Bootstrap 'shadow-lg') --- */
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); 
    }
}


/* --- Desktop-Ansicht  --- */
@media (min-width: 991.99px) { 
    
    /* Container braucht keine spezielle Position */
    #vdc_container {
        position: static;
    }

    #news-sidebar {
        /* 1. Mobile-Stile zurücksetzen */
        position: static;
        transform: none;
        z-index: 1;
        height: auto; 
        padding: 0;
        /* 2. Breite und Animation (Standard = versteckt) */
        width: 330px;       /* Feste Breite, wenn sichtbar */
        flex-shrink: 0;     
        max-width: 0;       /* Standardmäßig versteckt (Breite 0) */
        overflow: hidden;   
        
        /* HIER: Padding und Shadow zur Transition hinzugefügt */
        transition: max-width 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
        box-shadow: none;
        border: none; /* Sicher ist sicher */
    }

    #news-sidebar.active {
        /* 3. Sichtbar machen (Breite animieren) */
        max-width: 400px; 
        padding-left: 1rem;  
        padding-right: 1rem; 
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); 
    }
}

/* Der Container für eine einzelne News */
.newsfeed-body {
    background-color: #ffffff;
    padding: 1.25rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(0,0,0,0.02);
    margin-bottom: 1rem !important; /* Überschreibt mb-4 */
}

.newsfeed-body:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

/* Titel */
.newsfeed-title a {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.4;
    display: block;
}

.newsfeed-title a:hover {
    color: #2563eb; /* Deine Primärfarbe */
}

/* Datum und Quelle */
.newsfeed-info {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8 !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

/* Text */
.newsfeed-teaser {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Mehr lesen Link */
.read-more {
    color: #2563eb;
    font-weight: 600;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    display: inline-block;
}