@font-face {
    font-family: MeteoconsRegular;
    src: url(../fonts/meteocons-webfont.eot);
    src: url(../fonts/meteocons-webfont.eot?#iefix) format('embedded-opentype'),
         url(../fonts/meteocons-webfont.woff) format('woff'),
         url(../fonts/meteocons-webfont.ttf) format('truetype'),
         url(../fonts/meteocons-webfont.svg#MeteoconsRegular) format('svg');
}
.weather-container {
            width: 100%;
            margin: 0 auto;
            text-align: left;
        }

        .weather-current {
    display: flex; /* Flexbox für die aktuelle Wetteranzeige */
    align-items: center; /* Vertikale Zentrierung der Inhalte */
}

.weather-icon {
    font-size: 47px; /* Größe des Icons */
    margin-right: 10px; /* Abstand zwischen Icon und Wetterinfo */
    color: #b31218; /* Farbe des Icons */
    width: 50px; /* Gleiche Breite wie Temperatur */
}

        .weather-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .weather-header {
            font-size: 20px;
            font-weight:bold;
            color: #b31218;
            margin: 0;
        }

        .weather-description {
            font-size: 14px;
            color: #555;
            margin-top: 4px;
        }

        .weather-temp-humidity {
    display: flex; /* Flexbox für Temperatur und Luftfeuchtigkeit */
   font-size: 14px;
    min-width: 60px; /* Minimale Breite für die Temperatur */
    margin-bottom: 5px;
}

.temperature {
  margin-right: 10px;
  width: 50px;
}

        .sp-weather-forecasts {
            margin-top: 10px;
        }

       .weather-forecast {
    display: flex;
    justify-content: flex-start; /* Elemente linksbündig ausrichten */
    align-items: center;
    margin-bottom: 10px;
}

.weather-forecast .forecast-icon {
    font-size: 20px; /* Größeres Icon */
    color: #b31218;
    margin-right: 10px; /* Abstand von 20px zum Tag */
}

.temperature-container {
    display: flex;
    justify-content: flex-start; /* Temperaturen linksbündig */
    min-width: 150px; /* Breite des Temperaturbereichs */
    gap: 5px; /* Abstand zwischen den Temperaturwerten */
}

        /* Kleinere Temperaturanzeige */
        .temperature-small {
            font-size: 14px;
            margin-left: 0px;
        }

        .temperature-small::before {
            content: "";
            display: inline-block;
            margin-right: 0px;
        }

        hr {
            border: none;
            border-top: 2px dotted #b31218;
            margin: 0px 0 5px 0;
        }
        
        i[class^=meteocons-]:before{display:inline-block;font-family:MeteoconsRegular;font-style:normal}.meteocons-storm:before{content:'Z'}.meteocons-chance-of-storm:before{content:'O'}.meteocons-chance-of-storm-night:before{content:'6'}.meteocons-thunderstorm:before{content:'0'}.meteocons-rain-and-snow:before{content:'X'}.meteocons-sleet:before{content:'X'}.meteocons-rain:before{content:'R'}.meteocons-rain-night:before{content:'S'}.meteocons-snow:before{content:'W'}.meteocons-snow-night:before{content:'X'}.meteocons-chance-of-snow:before{content:'U'}.meteocons-chance-of-snow:before{content:'"'}.meteocons-dusty:before{content:'E'}.meteocons-foggy:before{content:'J'}.meteocons-foggy-night:before{content:'K'}.meteocons-hazy:before{content:'L'}.meteocons-hazy-night:before{content:'K'}.meteocons-smoke:before{content:'M'}.meteocons-smoke-night:before{content:'K'}.meteocons-cloudy:before{content:'N'}.meteocons-mostly-cloudy:before{content:'3'}.meteocons-mostly-cloudy-night:before{content:'4'}.meteocons-partly-cloudy:before{content:'H'}.meteocons-partly-cloudy-night:before{content:'I'}.meteocons-sunny:before{content:'B'}.meteocons-sunny-night:before{content:'C'}.meteocons-other:before{content:')'}