/* Formatdatei */
* {
  box-sizing: border-box;        
}

html {
    /*height: 100%;*/
    padding: 2px;
}

body {
    background: #f3f3f3;
    font-family: helvetica;
    font-size: 1.0em;
}

.navb {
    position: absolute;
    left: 1vw;
    top: 1vh;
    margin-left: 0;
}

.fig1 {
    position: absolute;
    left: 22vw;
    top: 24vh;
    max-width: 35%;
    height: auto;
    padding: 1px;
    border: 2px solid #8c6c6c;
    border-radius: 15px;
}

.fig2 {
    position: absolute;
    right: 3vw;
    top: 2vh;
    max-width: 35%;
    border: 2px solid #8c6c6c;
    border-radius: 15px;
    padding: 1px;
}

.fig3 {
    position: absolute;
    right: 3vw;
    top: 50vh;
    max-width: 35%;
    border: 2px solid #8c6c6c;
    border-radius: 15px;
    padding: 1px;
}

figcaption {
    font-family: helvetica;
    font-size: 1em;
    font-weight: normal;
    text-align: center;
    background: #ffffff;
    /*width: 50%;*/
    border-radius: 15px;
}

.foothead {
    position: absolute;
    left: 1vw;
    top: 87vh;
    font-family: helvetica;
    font-size: 0.9em;
    font-weight: normal;
    text-align: left;
    padding: 0.5em;
    background: #ffffff;
    border: 2px solid #8c6c6c;
    border-radius: 20px;
}

.logo-img {
    position: absolute;
    left: 3vw;
    top: 48vh;
    width: 6vw;
    border: 2px solid #8c6c6c;
    border-radius: 10px;
}

h1 {
    position: absolute;
    left: 27vw;
    top: 1vh;
    font-family: Tahoma;
    font-size: 2.4em;
    font-weight: normal;
    text-align: left;
    color: #008080;
/*    text-shadow: 0px -2px 1px black;*/
}

pstat {
    position: absolute;
    right: 1vw;
    top: 1vh;
    font-family: helvetica;
    font-size: 0.3em;
    font-weight: normal;
    text-align: left;
    color: #008080;
}

label[id="impress"] {
    position: absolute;
    top: 68vh;
    left: 1vw;
    padding: 0.2em;
    font-family: helvetica;
    font-size: 0.8em;
    font-weight: normal;
    text-align: center;
    background: #ffffff;
    color: black;
    border: 1px solid #8c6c6c;
    border-radius: 10px;
}

label[id="wsimpress"] {
    position: absolute;
    top: 72vh;
    left: 4vw;
    padding: 0.5em;
    font-family: helvetica;
    font-size: 0.8em;
    font-weight: normal;
    text-align: center;
    background: #ffffff;
    color: black;
    border: 1px solid #8c6c6c;
    border-radius: 10px;
}

label[id="indtext"] {
    position: absolute;
    top: 13vh;
    left: 25vw;
    font-family: Tahoma;
    font-size: 1.2em;
    font-weight: normal;
    text-align: left;
    color: #008080;
}

label[id="offzeit"] {
    position: absolute;
    top: 76vh;
    left: 24vw;
    font-family: helvetica;
    font-size: 0.8em;
    font-weight: normal;
    text-align: left;
    color: black;
}

/* Anzeige aktuelle Bildnr.*/
input[id="bildnr"] {
    position: absolute;
    top: 94vh;
    left: 45vw;
    width: 3em;
    font-family: helvetica;
    font-size: 1em;
    font-weight: normal;
    text-align: center;
    background: #fdff85;
    color: black;
    border: 1px solid #8c6c6c;
    border-radius: 10px;
}

button {
    width: 10em;
    font-size: 1.2em;
    text-align: center;
    color: #f3f3f3;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    background: #008080;
    border: 2px solid #8c6c6c;
    border-radius: 20px;
}

.leftb {
    position: absolute;
    top: 38vh;
    left: 1vw;
    height: 4em;
    width: 1.2em;
    font-size: 1.8em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    background: #008080;
    border: 2px solid #8c6c6c;
    border-radius: 20px;
}

.rightb {
    position: absolute;
    top: 38vh;
    right: 1vw;
    height: 4em;
    width: 1.2em;
    font-size: 1.8em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    background: #008080;
    border: 2px solid #8c6c6c;
    border-radius: 20px;
}

.rbtn {
    position: fixed;
    width: 8em;
    bottom: 2vh;
    right: 1vw;
    font-size: 0.9em;
    background: #008080;
    color: #f3f3f3;
    border: 2px solid #8c6c6c;
    border-radius: 5px;
}

button:hover {
    background: #fdff85;
    color: #000000;
    border: 2px solid #8c6c6c;
}

button:active {
    background: #ff8f8f;
}

@media screen and (max-width: 957px) {
    h1 {
        position: absolute;
        left: 31vw;
        top: 1vh;
        font-size: 2em;
    }
    label[id="indtext"] {
        position: absolute;
        top: 13vh;
        left: 28vw;
        font-size: 1em;
    }

    button {
        width: 8.5em;
        font-size: 0.9em;
    }

    .fig1 {
        position: absolute;
        max-width: 71%;
        left: 130px;
        top: 22vh;
    }

    .fig2 {
        position: absolute;
        left: 1vw;
        top: 105vh;
        max-width: 99%;
    }

    .fig3 {
        position: absolute;
        left: 1vw;
        top: 155vh;
        max-width: 99%;
    }
    .logo-img {
        position: absolute;
        left: 3vw;
        top: 48vh;
        width: 20vw;
    }

    label[id="offzeit"] {
        position: absolute;
        top: 69vh;
        left: 22vw;
    }

    label[id="wsimpress"] {
        position: absolute;
        top: 74vh;
        left: 3vw;
    }
}

/*------------------------------------------------------------------- 
    Große Bildschirme (>1280 Pixel) 
      1280px / 16px/em = 80em
  -------------------------------------------------------------------- */
@media screen and (min-width: 80em) {

}

/*-----------------------------------------------------   
     Handyversion ab 320 Pixel
------------------------------------------------------*/
@media screen and (max-width: 442px) {
    h1 {
        position: absolute;
        left: 39vw;
        top: 1vh;
        font-size: 1.4em;
    }
    label[id="indtext"] {
        position: absolute;
        top: 10vh;
        left: 120px;
        font-size: 0.9em;
    }

    button {
        width: 8.5em;
        font-size: 0.8em;
        padding-top: 0.4em;
        padding-bottom: 0.4em;
    }

    figcaption {
        font-size: 0.8em;
    }

    .fig1 {
        position: absolute;
        max-width: 64%;
        left: 116px;
        top: 23vh;
    }

    .fig2 {
        position: absolute;
        max-width: 96%;
        left: 1vw;
        top: 100vh;
    }

    .fig3 {
        position: absolute;
        max-width: 96%;
        left: 1vw;
        top: 138vh;
    }
    .logo-img {
        position: absolute;
        left: 5vw;
        top: 48vh;
        width: 20vw;
    }

    label[id="offzeit"] {
        position: absolute;
        top: 57vh;
        left: 28vw;
    }

    .leftb {
        position: absolute;
        top: 38vh;
        left: 1vw;
        height: 4em;
        width: 1em;
        font-size: 1.6em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    .rightb {
        position: absolute;
        top: 38vh;
        right: 1vw;
        height: 4em;
        width: 1em;
        font-size: 1.6em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    label[id="wsimpress"] {
        position: absolute;
        top: 74vh;
        left: 3vw;
    }
    /* Anzeige aktuelle Bildnr.*/
    input[id="bildnr"] {
        position: absolute;
        top: 85%;
        left: 45vw;
    }
}