/* 
    Created on : 20.07.2022, 09:45:02
    Author     : dbroistedt

    CSS Selektoren: 
                    https://code-crowd.de/blog/infografik-und-cheatsheet-css-selektoren/
                    http://www.w3bai.com/de/css/css_combinators.html#gsc.tab=0
                    http://www.w3bai.com/de/css/css_attribute_selectors.html#gsc.tab=0

    CSS Pseudo Elemente: 
                    http://www.w3bai.com/de/css/css_pseudo_elements.html#gsc.tab=0

    CSS Pseudo not:
                    https://www.mediaevent.de/css/not.html
*/

#placeholder_pegel{
}
#placeholder_pegel [id$="unit"]{
    font-size: 0.8em;
}
/***************
** Pegel
****************/
#placeholder_pegel {
position:relative;
/*
float:left;
*/
width: 100%;
    max-width: 750px;
overflow:hidden;
font-family: 'Open Sans', sans;
font-size:0.9em;
line-height:1.1em;
}
img.pegel_grafik_stadt {
position:relative;
margin-bottom:-0.5%;
z-index:2;
width: calc(100% + 6%);
height:auto;
right:-6%;
margin-left:-6%;
}
.pegel_grafik_wetter-wolke {
position:absolute;
width:27%;
height:30%;
bottom:60%;
color:#0068B4;
font-weight:bold;
background-image:url(../images/wetter-wolke.png);
background-repeat:no-repeat;
background-position:center center;
background-size:100% auto;
}
#temperature_pegel, #humidity_pegel {
position:relative;
top:50%;
left:30%;
}
.temperature_value::before, 
.humidity_value::before {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.2em;
    content: ' ';
    background-image: url(../images/icon-temp-blau.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
    vertical-align: text-bottom;
}
.temperature_value#pegel_temp_value:before{
    background-image:url(../images/icon-temp-weiss.svg);
}
.humidity_value:before{
    background-image:url(../images/icon-feuchte-blau.svg);
}

/*
.temperature:before {
position:absolute;
display:block;
content:' ';
height:90%;
width:10px;
left:-12px;
background-image:url(../images/icon-temp-blau.svg);
background-repeat:no-repeat;
background-position:center center;
background-size:auto 100%;
}
#humidity:before {
position:absolute;
display:block;
content:' ';
height:90%;
width:15px;
left:-17px;
background-image:url(../images/icon-feuchte-blau.svg);
background-repeat:no-repeat;
background-position:center center;
background-size:auto 100%;
}
*/
img.pegel_grafik_pegel {
position:absolute;
z-index:0;
bottom:0px;
left:35%;
height:40%;
width:auto;
}
#pegel_hintergrund_wasser {
position:absolute;
width:60%;
height:20%;
left:0px;
bottom:0px;
border:0px;
background-color: rgba(0,115,183,0.8);
}
img.wassertiefe {
position:absolute;
z-index:1;
left:0%;
bottom:20%;
width:60%;
height:auto;
    transition: left 1s 0s ease-in;        
    animation: run 4s alternate infinite;
}
img.wassertiefe.float{
    left: 1%;
    
    /*
    transform-origin: 50% 50%;
    width: 100%;
    */
}
@keyframes run {
	to { transform: translateX(calc(0% - 2%))}
    to { transform: height(calc(0% - 3%))}
}
#pegel_depth {
    position:absolute;
    width:80px;
    height:auto;
    left:22%;
    bottom:40%;
    color: #0069b4;
    font-weight: bold;
}
.pegel_werte {
position:absolute;
color:#fff;
font-weight:bold;
width:50px;
height:auto;
left:40%;
bottom:50%;
}
/*
.pegel_werte:before {
position:absolute;
display:block;
content:' ';
height:90%;
width:10px;
left:-12px;
background-image:url(../images/icon-temp-weiss.svg);
background-repeat:no-repeat;
background-position:center center;
background-size:auto 100%;
}
*/

/**********************************
***         responsive          ***
***********************************/
@media screen and (max-width: 600px){
    #temperature_pegel, #humidity_pegel {
        top: 45%;
        left: 25%;
        font-size: 0.9em;
    }
    .pegel_werte {
        left: 30%;
        bottom: 50%;
    }
}
@media screen and (max-width: 420px){
    #temperature_pegel, #humidity_pegel {
        top: 43%;
        left: 20%;
        font-size: 0.9em;
    }
    .pegel_werte {
        left: 30%;
        bottom: 50%;
    }
}