*,::after,::before{box-sizing:border-box}
html{line-height:1.5}
figcaption,figure,footer,main,nav,section{display:block}
body{margin:0;font-family:Roboto,Helvetica,Arial,sans-serif;font-size:100%;font-weight:400;color:#222; display:flex; 
     flex-direction:row-reverse; flex-wrap: wrap; background-color:#fff;background:url(bg_vwfreunde.jpg) no-repeat;background-size:cover}

section{min-height:90vh}
header{margin:5px 20px 50px;min-width:20%;text-align:center}
.rahmen1,.rahmen2{border:1px solid #fff;position:relative;min-width:20%}
.rahmen2{top:10px;left:10px}
h1,h2{margin:2px}
ul{margin-top:0;margin-bottom:1rem}  
a{color:#eee;text-decoration:none;background-color:transparent}
a:hover{color:#bf4;text-decoration:underline}

aside { left:0; padding:20px; width:100%; height:100%; min-width:220px; background:rgba(0,0,0,.7); overflow-y:scroll; z-index:99;}
aside h1{color:#fcc;letter-spacing:5px;}
aside li{font-size:120%;list-style:none;width:110px}
article {width:100%;margin:20px}
.home, .seite1, .seite2, .seite3 {background-color:rgba(255,255,255,0.7);border:1px solid #faa;max-width:90%;margin-left:auto;margin-right:auto;}
.home   {padding:30px;margin-top:200px;}
.seite1 {padding:30px;margin-top:50px;}
.seite2 {padding:3px;margin-top:20px;height:1250px;text-align:center;max-width:96%;display:flex;flex-wrap:wrap;justify-content: center;}
.seite3 {padding:30px;margin-top:150px;}

.album{width:100%}
.foto{padding-left:5px;padding-right:5px}
.slick-dots{bottom:-50px}
.slick-dots li button:before{font-size:16px;opacity:.2}
.slick-dots li.slick-active button:before{color:#98999a;opacity:1}
figure{position:relative;float:left;overflow:hidden;margin:8px;background:#069;border:#8b0000 solid 1px;text-align:center;cursor:pointer}
figure figcaption{padding:1em;color:#fff;font-size:1.25em;backface-visibility:hidden}
figure figcaption::before,.foto figure figcaption::after{pointer-events:none}
figure figcaption,.foto figure figcaption > a{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center}
figure figcaption > a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:25px;opacity:1}
figure h2 span{font-weight:800}
figure img{opacity:1;transition:opacity .35s}
figure:hover img{opacity:.4}
figure figcaption::before, figure figcaption::after{position:absolute;top:10px;right:10px;bottom:10px;left:10px;content:"";opacity:0;transition:opacity 0.35s,transform .35s}
figure figcaption::before{border:1px solid #fff;transform:scale(0,1)}
figure figcaption::after {border:1px solid #f00;transform:scale(1,0)}
figure h2{margin-bottom:10px;opacity:0;transition:transform .35s;transform:translate3d(0,-20px,0)}
figure p{width:100%;padding:3px;opacity:0;transition:opacity 0.35s,transform .35s;transform:translate3d(0,20px,0)}
figure:hover figcaption::before,figure:hover figcaption::after{opacity:1;transform:scale(1)}
figure:hover h2,figure:hover p{opacity:1;transform:translate3d(0,0,0)}


form { margin:10px;}  
form input, form textarea {font-family:Verdana;font-size:110%; padding:5px;margin:5px; width:320px; border: 1px solid #eed; background: #FFF; color: #443;border-radius:4px;}
#submit {  width:99px; margin:0 0 0 100px; height:33px; padding:3px; background:#444; color:#FFF; border-radius:8px; }

@media (min-width:1024px) and (orientation:landscape) {
body{background-size:100% 100%}
aside{width:20%; position:fixed;}
article {width:76%}
.home {width:74%;padding:30px;}
}