/* Wetter-Widget Stile */
.weather-widget {
    padding: 0.5rem;
}

.weather-icon {
    margin-bottom: 1rem;
}

.weather-temp {
    font-weight: 700;
}

.weather-desc {
    text-transform: capitalize;
    color: #6c757d;
    font-size: 1.1rem;
}

.weather-details {
    margin: 1rem 0;
    font-size: 0.9rem;
}

.weather-details .row > div {
    margin-bottom: 0.5rem;
}

.weather-sun {
    font-size: 0.9rem;
    color: #6c757d;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 0.5rem;
}

.weather-update {
    font-size: 0.8rem;
    color: #adb5bd;
}

/* Animation für Wetter-Icons */
@keyframes weather-icon-move {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}

.weather-icon i {
    animation: weather-icon-move 3s ease-in-out infinite;
}

/* Spezifische Stile für verschiedene Wetterbedingungen */
.weather-widget.rain {
    background-color: rgba(0, 123, 255, 0.05);
}

.weather-widget.snow {
    background-color: rgba(248, 249, 250, 0.5);
}

.weather-widget.clear {
    background-color: rgba(255, 193, 7, 0.05);
}

.weather-widget.clouds {
    background-color: rgba(108, 117, 125, 0.05);
}

/* Responsive Anpassungen */
@media (max-width: 576px) {
    .weather-temp .display-4 {
        font-size: 2.5rem;
    }
    
    .weather-details {
        font-size: 0.8rem;
    }
}