*,::after,::before{box-sizing:border-box}
html { scroll-behavior: smooth; } 
body,header,figure, ul{margin:0;padding:0}
body{background: rgb(2,0,36); background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:100%;line-height:1.5;color:#fff;overflow-x:hidden}
article{width:90%;margin-left:auto;margin-right:auto}
header{width:100%;background:#333;height:180px;background-image:url(bg_meer.jpg);background-size:cover}
header .titel{position:absolute;top:30px;font-size:30px}
.titel{text-shadow:3px 3px 4px #000}
header h1 a{color:#ea1}
.shadow{text-shadow:3px 3px 4px #000}
nav{position:fixed;left:30px;top:20px;width:min-content;z-index:99}
ul{position:fixed;width:150px;margin:0;background:#444;border-radius:9px;padding:0;list-style:none;display:flex;z-index:999;line-height:2}
li{margin:1px;border:1px solid #111;border-radius:9px 1px;display:flex;justify-content:center}
.seiten{display:flex;flex-wrap:wrap;width:100%}
section{margin-top:20px;width:100%;min-height:50vh;text-align:center;align-items:center}
button{height:40px;border-radius:9px}
footer{text-align:center}
p{margin-top:0;margin-bottom:1rem}
a{text-decoration:none;border-radius:9px 1px;background:#144;color:#fff;padding:3px 8px}
.to-top:hover,a:hover{background:#000;border-radius:9px 1px}
.mehr{float:right;margin:10px;background:transparent}
.mehr a{font-size:20px}
.to-top{background:0}
.kontakt{display:block;width:100%;margin:10px;padding:.5rem;color:#fff;background:#15e;border-radius:5px}
.kontakt:focus{color:#111;background-color:#eee}
:required{box-shadow:4px 4px 4px rgba(180,180,250,1);font-size:inherit;font-family:inherit}
.utf-icon{font-size:50px;margin:0 10px}
h1,h2,h4{margin:0 .5rem;padding:0;font-family:inherit;font-weight:500;line-height:1.2;color:inherit}
h1{font-size:2rem}
h1 a{background:0}
h2{font-size:1.6rem}
h4{font-size:1.4rem}
.linie{background-color:#99c;width:98%;height:15px;margin:30px 40px 30px 0}
.tm-logo{position:absolute;right:8%;top:18%;background:url(../img/logo-bg2.png) center no-repeat;background-size:cover;align-items:center;justify-content:center;z-index:100;visibility:hidden;top:-250px;left:0;right:0;height:300px;width:300px;margin-left:auto;margin-right:auto;visibility:hidden}
.braun{background-color:#a77}
.seite_1-left, .seite_1-right, .seite_2-left, .seite_2-right{margin:10px 25px;}
.seite_1-left, .seite_1-right {transform:skew(-6deg)}
.seite_2-left, .seite_2-right {transform:skew( 6deg)}

.seite-text{margin-left:60px;width:65%;line-height:1.6;min-height:400px;}

.left-35{margin-left:-35px}
.img-info{height:400px;background-repeat:no-repeat;background-image:url(parkw.jpg);background-size:contain}

.img-info-3{background-image:url(../img/tram.jpg);background-size:cover}
nav{width:min-content;position:relative;display:inline;margin-left:auto;margin-right:auto;min-height:35px;margin-top:8px;z-index:99}
label{display:inline-block;width:150px;color:#fff;font-size:26px;padding:5px;background:#15e;border-radius:9px}
#menu{margin-top:-250px;margin-left:150px;width:65%;max-width:90%;min-height:54px;visibility:hidden;transition:all 1s;opacity:0}
input[type=checkbox]{display:none}
input[type=checkbox]:checked~#menu{visibility:visible;opacity:1;margin-top:0;margin-left:45px}
#inf{width:90%;margin-left:auto;margin-right:auto;padding:20px}
#fot{background-color:#812;padding:10px;width:100%;min-height:1100px;}

.kreis{display:flex;width:400px;height:400px;margin-left:auto;margin-right:auto;background:#15e;border-radius:50%;flex-direction:row;justify-content:center;align-items:center}
.kreis-text{width:70%;font-size:90%}
.kreis-text a{background:#32d}
.col-kreis{width:49%}
figure{position:relative;float:left;overflow:hidden;height:auto;text-align:center;cursor:pointer}
figure img{position:relative;display:block;height:90%;max-width:90%;opacity:.8;width:calc(100% + 10px);transform:translate3d(10px,10px,20px)}
figure figcaption{padding:2em;color:#fff;font-size:1.25em;position:absolute;top:0;left:0;width:100%;height:100%}
figure:hover{background:#000}
figure:hover figcaption::before{background:rgba(0,0,0,.25)}
figure p{position:absolute;right:0;bottom:0;padding:0 1.5em .3em 0;width:160px;text-align:right;opacity:0;transform:translate3d(20px,20px,0)}
figure:hover p{opacity:1;transform:translate3d(0,0,0)}
figure:hover img{opacity:.6;transform:translate3d(0,0,0)}
figure:hover figcaption::before{opacity:1;transform:scale3d(1.2,1.2,1)}
figure figcaption::before{position:absolute;right:-100px;bottom:-100px;width:300px;height:300px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 900px rgba(255,255,255,.2);content:'';opacity:0;transform:scale3d(.5,.5,1);transform-origin:50% 50%}
figure figcaption::before,figure p{transition:opacity .35s,transform .35s}

.senden{background-color:#b88;color:#fff;padding:5px 20px;border-radius:15px;float:right}
.senden:focus,.senden:hover{background-color:#933}
@media (max-width:991px) {
nav{position:fixed}
.tm-logo{top:-250px;left:0;right:0;width:300px;margin-left:auto;margin-right:auto}
.seite_1-left{margin-left:0}
.seite_1-right{width:100%;margin-top:40px;margin-left:0}
.seite_2-left{width:100%;height:560px}
ul{margin-top:0;margin-left:-44px;padding:0;list-style:none;flex-direction:column}
}
@media (min-width:1024px) and (orientation:landscape) {
section{width:49%;text-align:center;align-items:center}
#menu{width:100%;margin-top:0;margin-left:10px;transition:none;visibility:visible;opacity:1}
.tm-logo{visibility:visible;left:50%;top:18%;align-items:flex-end;background:url(../img/logo-bg2.png) center no-repeat;background-size:cover;display:flex;align-items:center;justify-content:center;z-index:100}
ul{transition:none;visibility:visible;opacity:1;background:0}
label{display:none}
input[type=checkbox]:checked~#menu{margin-top:-12rem;margin-left:0}
.seiten{display:flex;width:100%}
#inf{padding:20px 100px;line-height:2}
} 


#top { font-size:26px;position:sticky;bottom:40px;--offset:100px;margin-top:calc(100vh + var(--offset));margin-left:91%;}

#top a {color:#66f;background:0;text-decoration:none}