/* Neu 2024 */
.start_val {
    padding-top: 10px;
    display: flex;
}
.start_val_val {
    display: flex;
    overflow: hidden;
    margin-top: -3px;
    width: 100px;
}
.disp_data {
    display: flex;
    color: white;
    overflow: hidden;
    margin-top: -15px;
}
.data_val {
    color: white;
    overflow: hidden;
    width: 70px;
    height: 30px;
    margin-left: -5px;
    margin-right: -5px;
    scroll-behavior: unset;
    position: relative; bottom: 0;
    
}
.data_val_dir {
    color: white;
    overflow: hidden;
    width: 40px;
    height: 30px;
    margin-left: -5px;
    position: relative; bottom: 0;
}

.data_val_ldr {
    color: white;
    overflow: hidden;
    width: 120px;
    height: 30px;
    margin-left: -10px;
    position: relative; bottom: 0;
}

.detail_val {
    overflow: hidden;
    display: inline-flex;
    margin-top: -5px; /*-25 wenn Platz für Vorhersage sein soll*/
    height: 75px;
}

.detail_val_val {
    overflow: hidden;
    width: 100px;
}

.detail_val_val_winddir {
    overflow: hidden;
    width: 60px;
}

.space_detail_rain{
    overflow: hidden;
    margin-top: -25px;
}

/* ##### Hintergrundfarben der Menuepunkte ##### */
/* einzige Klasse, die beim Hinzufuegen eines weiteren Menuepunktes definiert werden muss */
.bg_aussentemperatur {
    background: #01749C;
}
.bg_innentemperatur {
    background: #B42F1A;
}
.bg_luftdruck {
    background: #395C69;
}
.bg_luftfeuchtigkeit {
    background: #7096CD;
}
.bg_niederschlag {
    background: #38537D;
}
.bg_windrichtung {
    background: #748EA1;
}
.bg_windgeschwindigkeit {
    background: #D54D42;
}
.bg_lichtintensitaet {
    background: #E39000;
}
.bg_kamera {
    background: #7C7C7C;
}
.bg_about {
    background: #9C1234;
}

/* ##### Allgemeines ##### */
html, body {
    margin: 0;
    padding: 0;
    font-family: "Lato", sans-serif;
    text-align: center;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto Slab", sans-serif;
}
h1 {
    font-size: 30px;
}
h2 {
    font-size: 25px;
}
h3 {
    font-size: 18px;
}
a {
    text-decoration: none;
}
i {
    font-size: 50px !important;
}
img {
    -webkit-box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2), 0 10px 32px 0 rgba(0,0,0,0.19);
    -ms-box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2), 0 10px 32px 0 rgba(0,0,0,0.19);
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2), 0 10px 32px 0 rgba(0,0,0,0.19);
}

section {
    width: 100%;
    height: auto;
}
section header {
    height: 70px;
    position: relative;
    background: #fff;
    color: #000;
}
section header h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
section ul {
    margin: 0;
    padding: 0;
}
section ul li {
    list-style: none;
    float: left;
}
section ul li ul {
    height: auto !important;
}
section ul li ul li {
    float: none !important;
    width: auto !important;
    height: auto !important;
}
section ul li ul li div {
    display: inline-block !important;
}
section ul li ul li div div {
    float: left !important;
}

/* ##### Clearfix - ist eklig, muss aber sein ##### */
.clearfix:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

/* ##### spezielle Anpassungen */
.white_font, .white_font a {
    color: #fff;
}
.nosensor {
    color: #c31919;
    font-style: italic;
}
.icon_wrapper {
    margin-top: 10px;
    display: none;
}
#uebersicht header {
    display: none;
}
#uebersicht ul li ul, .icon_wrapper {
    float: none;
}
#uebersicht ul li {
    width: 100%;
    height: 150px;
}
#uebersicht ul li a,  .homebutton a{
    color: #fff;
    display: block;
    width: 100%;
    height: 100%;
}

#kamera img {
    margin-bottom: 40px;
    float: none;
    display: block;
    margin: auto;
    min-width: 375px;
    min-height: 300px;
    max-height: 82vh;
    max-width: 82vw;
    background-color: white;
}

#about{
    padding-bottom: 20px;
}
#about p {
    padding-left: 20px;
    padding-right: 20px;
}

#start ul li {
    height: 100px;
    width: auto;
}

.wetter i {
    margin-top: 30px;
    margin-left: 20px;
}
.temperatur h2 {
    padding-top: 10px;
    padding-left: 20px;
}
.icon_wind {
    display: none;
}
.icon_wind i {
    margin-top: 25px;
    margin-left: 20px;
}
.text_wind {
    display: none;
}
.text_wind h2 {
    padding-top: 10px;
    padding-left: 10px;
}
.icon_luft {
    display: none;
}
.icon_luft i {
    margin-top: 25px;
    margin-left: 20px;
}
.text_luft {
    display: none;
}
.text_luft h2 {
    padding-top: 10px;
    padding-left: 10px;
}
.vorschau {
    display: none;
    float: right;
}
.vorschau a img {
    border: 1px solid #ddd;
    padding: 2px;
    margin-top: 6px;
    margin-right: 20px;
    height: 80px;
}
.vorschau a img:hover {
    background: rgba(0,0,0,0.3);
}
.homebutton {
    height: 150px !important;
    padding: 0 !important;
}
.homebutton i {
    margin-top: 20px;
}
.detail_box img {
    width: 100%;
    max-width: 481px;
}
.detail_box ul li {
    width: 100%;
    height: auto;
    padding-bottom: 30px;
}
.detail_box ul li:nth-child(4n) {
    background: rgba(0,0,0,0.3)
}
.detail_box ul li:nth-child(4n+1) {
    background: rgba(255,255,255,0.3)
}
.detail_box ul li:nth-child(4n+2) {
    background: rgba(0,0,0,0.1)
}
.detail_box ul li:nth-child(4n+3) {
    background: rgba(255,255,255,0.1)
}


/* ##### Anpassungen responsives Design ##### */
/* ### Header ### */
@media (min-width: 800px) {
    section header {
        height: 100px;
    }
}

/* ### Überblicksleiste ### */
@media (min-width: 350px) {
    .vorschau {
        display: inline;
    }
}
@media (min-width: 550px) {
    .icon_wind {
        display: inline;
    }
    .text_wind {
        display: inline;
    }
}
@media (min-width: 870px) {
    .icon_luft {
        display: inline;
    }
    .text_luft {
        display: inline;
    }
}

/* ### Uebersicht ### */
@media (min-width: 450px) {
    .icon_wrapper {
        height: 100%;
        width: 70px;
        margin: 0 30px;
        display: inline-block;
    }
    .icon_wrapper i {
        margin-top: 50px;
    }
    #uebersicht ul li ul {
        text-align: left;
    }
    #uebersicht ul li ul, .icon_wrapper {
        float: left;
    }
}
@media (min-width: 600px) {
    .icon_wrapper {
        height: auto;
        margin: 0;
    }
    .icon_wrapper i {
        margin-top: 35px;
    }
    #uebersicht ul li {
        width: 50%;
        height: 250px;
    }
    #uebersicht ul li ul {
        text-align: center;
    }
    #uebersicht ul li ul, .icon_wrapper {
        float: none;
    }
}
@media (min-width: 1000px) {
    .icon_wrapper {
        height: auto;
        margin: 0;
    }
    .icon_wrapper i {
        margin-top: 35px;
    }
    #uebersicht ul li {
        width: 33.3%;
        height: 250px;
    }
    #uebersicht ul li ul {
        text-align: center;
    }
    #uebersicht ul li ul, .icon_wrapper {
        float: none;
    }
}
@media (min-width: 1500px) {
    #uebersicht ul li {
        width: 20%;
    }
}

/* ### Detail-Boxen ### */
@media (min-width: 1000px) {
    .detail_box ul li {
        width: 50%;
        height: 250px !important;
        padding: 0;
    }
    .homebutton i {
        margin-top: 60px;
    }
}
@media (min-width: 1500px) {
    .detail_box ul li {
        width: 33.3%;
    }
}
@media (min-width: 3000px) {
    .detail_box ul li {
        width: 16.6%;
    }
}