/* ************************************************************************ */
/*                                                                          */
/* Copyright (c) by Bjoern Scherenberger                                    */
/*                                                                          */
/* ************************************************************************ */


body {
    font-family: Arial;
    font-size: 1em;
}

#home {
    background-color: #3e753b;
    background-image: url("../pics/grass.png");
    background-size: 70%;
}

#desk {
    display: grid;
    margin-top: 1em;
    padding: 1em;
    margin-bottom: 3em;
    text-align: left;
    grid-template-areas:
        "head head head head head"
        "aa ab ac ad ae"
        "ba bb bc bd be"
        "ca cb cc cd ce"
        "da db dc dd de"
        "ea eb ec ed ee"
        "fa fb fc fd fe"
        "ga gb gc gd ge"
        "ha hb hc hd he";
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-row-gap: 0px;
    grid-column-gap: 0px;
}

#impressum {
    display: grid;
    width: 100%;
    margin-top: 1em;
    margin-bottom: 3em;
    text-align: left;
    grid-template-areas:
        "head head head head head"
        "aa ab ab ab ae";
    grid-template-columns: 30vW 10vW 20vW 10vW 30vW;
    grid-row-gap: 0px;
    grid-column-gap: 0px;
}

#datenschutz {
    display: grid;
    width: 100%;
    margin-top: 1em;
    margin-bottom: 3em;
    text-align: left;
    grid-template-areas:
        "head head head head head"
        "aa ab ab ab ae";
    grid-template-columns: 30vW 10vW 20vW 10vW 30vW;
    grid-row-gap: 0px;
    grid-column-gap: 0px;
}

.step {
    font-family: Arial;
    font-size: 2vW;
    text-align: right;
    color: white;
    filter: drop-shadow(4px 8px 4px #283322);
}

.step img {
    max-width: 19vW;
}

#head {
    grid-area: head;
    margin: auto auto auto auto;
}

#aa {
    grid-area: aa;
    margin: auto auto auto auto;
}

#ab {
    grid-area: ab;
    margin: auto auto auto auto;
}

#ac {
    grid-area: ac;
    margin: auto auto auto auto;
}

#ad {
    grid-area: ad;
    margin: auto auto auto auto;
}

#ae {
    grid-area: ae;
    margin: auto auto auto auto;
}

#ba {
    grid-area: ba;
    margin: auto auto auto auto;
}

#bb {
    grid-area: bb;
    margin: auto auto auto auto;
}

#bc {
    grid-area: bc;
    margin: auto auto auto auto;
}

#bd {
    grid-area: bd;
    margin: auto auto auto auto;
}

#be {
    grid-area: be;
    margin: auto auto auto auto;
}

#ca {
    grid-area: ca;
    margin: auto auto auto auto;
}

#cb {
    grid-area: cb;
    margin: auto auto auto auto;
}

#cc {
    grid-area: cc;
    margin: auto auto auto auto;
}

#cd {
    grid-area: cd;
    margin: auto auto auto auto;
}

#ce {
    grid-area: ce;
    margin: auto auto auto auto;
}

#da {
    grid-area: da;
    margin: auto auto auto auto;
}

#db {
    grid-area: db;
    margin: auto auto auto auto;
}

#dc {
    grid-area: dc;
    margin: auto auto auto auto;
}

#dd {
    grid-area: dd;
    margin: auto auto auto auto;
}

#de {
    grid-area: de;
    margin: auto auto auto auto;
}

#ea {
    grid-area: ea;
    margin: auto auto auto auto;
}

#eb {
    grid-area: eb;
    margin: auto auto auto auto;
}

#ec {
    grid-area: ec;
    margin: auto auto auto auto;
}

ed {
    grid-area: ed;
    margin: auto auto auto auto;
}

#ee {
    grid-area: ee;
    margin: auto auto auto auto;
}

#fa {
    grid-area: fa;
    margin: auto auto auto auto;
}

#fb {
    grid-area: fb;
    margin: auto auto auto auto;
}

#fc {
    grid-area: fc;
    margin: auto auto auto auto;
}

#fd {
    grid-area: fd;
    margin: auto auto auto auto;
}

#fe {
    grid-area: fe;
    margin: auto auto auto auto;
}

#ga {
    grid-area: ga;
    margin: auto auto auto auto;
}

#gb {
    grid-area: gb;
    margin: auto auto auto auto;
}

#gc {
    grid-area: gc;
    margin: auto auto auto auto;

}

#gd {
    grid-area: gd;
    margin: auto auto auto auto;
}

#ge {
    grid-area: ge;
    margin: auto auto auto auto;
}

#ha {
    grid-area: ha;
    margin: auto auto auto auto;
}

#hb {
    grid-area: hb;
    margin: auto auto auto auto;
}

#hc {
    grid-area: hc;
    margin: auto auto auto auto;
}

#hd {
    grid-area: hd;
    margin: auto auto auto auto;
}

#he {
    grid-area: he;
    margin: auto auto auto auto;
}

#pup {
    position: absolute;
    z-index: 200;
    /* aaaalways on top*/
    padding: 5px;
    margin-left: 10px;
    margin-top: 5px;
    width: 250px;
    border: 1px solid darkgreen;
	border-radius: 10px 10px 10px 10px;
    background-color: #4f944b;
    color: white;
    font-size: 0.95em;
}


/*Ab hier CSS für die "Fußzeile"*/
footer {
    position: fixed;
	bottom: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 2.7em;
	-webkit-height: 3em;
    background: #3e753b;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 0px -3px 15px #283322;
    text-align: center;
}

.footer {
    min-width: 60px;
    margin-top: 4px;
    font-family: Arial;
    color: white;
    text-decoration: none;
    font-size: 0.8em;
    text-align: center;
}

.footer a {
    color: white;
    text-decoration: none;
    font-size: 0.8em;
}

.footer.selected {
    text-decoration: underline solid white;
    text-underline-position: under;
	-webkit-text-decoration-line: underline;
  	-webkit-text-decoration-color: white;
    margin: 4px;
    font-size: 1em;
}

.footer a:hover {
    filter: drop-shadow(0px 0px 10px lightgreen);
}

.footer a:active {
    filter: drop-shadow(0px 0px 5px #ffffff);
}

.footer:hover {
    font-size: 1em;
}

form .error {
    color: #ff0000;
}