/* 
    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
*/
/***************
** Pegel
****************/
#placeholder_pegel{
}
#placeholder_pegel [id$="unit"]{
    font-size: 0.8em;
}
#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;
}
.datenlegende {
position:relative;
float:left;
width: calc(100% - 20px);
max-width: 750px;
color:#fff;
font-size:0.75em;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
background-color: #93CA10;
}
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;
}
#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:70px;
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%;
    }
}
/***************
** Wetter
****************/ 
.wetterdatensmall,
.wetterdaten {
position:absolute;
left:0px;
top:174px;
z-index:2;
font-size:0.8em;
padding-top:0.8em;
padding-bottom:0.8em;
padding-left:1em;
padding-right:0.5em;
width:190px;
border-radius:0px 45px 45px 0px;
background-color:rgba(255,255,255,1);
transition: height 2s, width 2s;
box-shadow: 8px 8px 8px rgba(136,136,136,0.2);
}
.wetterdaten a.wetterlink:before,
.wetterdatensmall a.wetterlink:before {
position:absolute;
z-index:3;
display:block;
content: ' ';
left:0px;
right:0px;
top:0px;
bottom:0px;
cursor:pointer;
}
#placeholder_wetter [id$="unit"]{
    font-size: 0.8em;
margin-right:1em;
}
#placeholder_wetter{
    /*
    border: 1px dashed red;
    background-color: rgba(230,20,20,0.1);
    */
    position: relative;
    float: none;
    clear: both;
    width: 100%;
    height: auto;
}
#placeholder_wetter div{
    display: inline-block;
}
#wind_direction_value,
#wind_direction_unit{
    display: none;
}
#wind_direction_icon:before{
    position: relative;
    /*display: inline-block;*/
    font-size: 1em;
    width: 0.8em;
    height: 0.8em;
    color: #0069b4;
    
    /*
    https://unicode-table.com/de/sets/arrow-symbols/
    */
    content: '\27A2';
    
    /* 
    https://www.mediaevent.de/css/transform.html
    Wert anhand der Daten zuweisen
    transform: rotate(117deg);
    */
}
#wind_direction_value:before{
}
.temperature_value::before, 
.humidity_value::before{
    position: relative;
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    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: middle;
}
.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);
}