body{background:#333;font-family:Arial,Tahoma,sans-serif;color:#fff;line-height:1.5;background:url(../img/pop-bg.jpg) no-repeat;background-size:cover}
body>*{flex:1 1 50vw}
nav{position:absolute;top:20vh;left:53vw;width:20vw;height:45vh;display:flex;flex-wrap:wrap}
nav img{max-width:40%;float:left;margin:8px}
nav>*{flex:1 1 70px}
.symbol{font-size:60px;width:60px}
h1{text-align:right;color:#ddd;margin:0}
hr{border-bottom:10px solid #eee}
a{text-decoration:none;color:#aaf}
input, textarea {border-radius:5px;font-size:inherit;font-family:inherit;} 
.box{margin:4px auto;padding:8px;color:#fff;display:flex;flex-direction:column;justify-content:center;width:fit-content;min-width:80px;height:fit-content;text-align:center}
.button{margin:0;padding:1px;color:#fff;text-decoration:none;cursor:pointer;border:3px inset #611;background:rgba(0,0,0,0.2)}
.button:hover{background:#06D85F}
.overlay{position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(50,50,50,0.5);visibility:hidden;opacity:0}
.overlay:target{visibility:visible;opacity:1;z-index:1}
.popup {margin:20px auto;padding:20px;background:rgba(0,0,0,0.8);border-radius:5px;max-width:60%;position:relative;min-width:40%;min-height:80%}
.popup h2{margin-top:0;color:#fff}
.popup span{margin:2px 6px;float:left}
.popup .close{position:absolute;top:20px;right:30px;font-size:30px;font-weight:700;text-decoration:none;color:#fff}
.popup .close:hover{color:#fff}
.popup .content{max-height:30%;overflow:auto}
@media screen and (max-width: 700px) {
.box{width:70%}
.popup{width:70%}
}
article{position:relative;top:20vh;left:3vw;width:38vw;height:50vh;padding:6px;text-align:justify;background:rgba(0,0,0,0.1)}
article img{width:50%;float:left;padding:5px}
article>*{flex:1 1 30vw}

/* ---------  utf-8 Zeichen  ---------- */   
ul {list-style:none; display:flex; margin-top:5vh; color:#ddd }

/* ---------  Bildwechsel  ---------- */    
.fenster{position:absolute;top:80px;right:40px;display:block;width:550px;height:400px;overflow:hidden;border-radius:5px}
.fenster:before,.fenster:after{content:'<';position:absolute;top:50%;left:1rem;z-index:2;width:2rem;height:2rem;background:#1e90ff;color:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;pointer-events:none}
.fenster:after{content:'>';left:auto;right:1rem}
.fenster input{appearance:none;display:block;width:100%;height:100%;position:absolute;top:0;left:0;border-radius:5px;background-repeat:no-repeat;background-size:60% auto;background-position:center;transform:translateX(100%);transition:transform ease-in-out 400ms;z-index:1}
.fenster input:focus{outline:none}
.fenster input:after{content:attr(title);position:absolute;top:1rem;left:1rem;background-color:rgba(0,0,0,0.4);color:#fff;padding:.5rem;font-size:1rem;border-radius:5px}
.fenster input:not(checked):before{content:'';position:absolute;width:2rem;height:2rem;border-radius:50%;top:50%;left:calc(-100% + 1rem)}
.fenster input:checked:before{display:none;left:1rem}
.fenster input:checked{transform:translateX(0);z-index:0;box-shadow:-5px 10px 20px -15px rgba(0,0,0,1)}
.fenster input:checked + input:before{left:-3rem}
.fenster input:checked + input ~ input:before{display:none}
 

/* ---------  Formular  ---------- */  
#form{position:relative;width:500px;margin:50px auto 100px}
#form input::placeholder, textarea::placeholder { color:#aaa;font-size:inherit;font-family:inherit}
#form input:focus::placeholder, textarea::focus:placeholder { color:#ccc;}  
#form input:hover::placeholder, textarea:hover::placeholder { color:#ccc;}
#form input:hover:focus::placeholder, textarea:hover:focus::placeholder { color:#ccc;}
#form input    {width:470px;height:35px;padding:4px 15px;background:#444;color:#ccc;border:solid 1px #888;transition:all .3s ease-in-out}
#form textarea {width:470px;height:35px;padding:4px 15px;background:#444;color:#ccc;border:solid 1px #888;transition:all .3s ease-in-out}
#form input:hover{background:#222;color:#fff}
#form textarea:hover{background:#222;color:#fff}
#form textarea{height:80px;max-height:80px;}
#form #submit{width:200px;padding:4px;margin:4px;color:#eee;border:solid 1px #aaa;}
#form #submit:hover{background:#262; color:#2f2}