html,body{margin:0;padding:0;text-align:center;font-family:roboto,verdana,arial,helvetica,sans-serif;font-size:100%;background-color:red;
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%239C92AC' fill-opacity='0.25' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),linear-gradient(to right top,#334,#223,#212,#111,#000)}
#body-margin{text-align:center;padding:8px;margin:10px auto 10px;width:90%}
img{border:none;max-width:90%}
article{color:#fff}
a{text-decoration:none;color:#828282;font-weight:700;color:#000}
a:hover{text-decoration:underline;color:#fd7979}
header{background:url(titelbild.jpg);background-size:100% 100%;height:140px;margin:0 auto}
#logo i{color:#fff;text-align:right;margin:0;margin-left:20%;}
#logo{padding-top:30px;margin:0 auto;}
#logo a{float:left;width:98%;height:75px;color:red;font-size:30px;text-decoration:none;text-shadow:2px 2px 1px #b00}
.kaffee{max-width:260px}
#container{overflow:hidden;text-align:left;margin:0 auto;background:#fee;padding-bottom:30px;color:#000}
#seiten{background:#fff;color:#000; background: rgb(195,60,34);
        background: linear-gradient(0deg, rgba(195,60,34,.5) 0%, rgba(253,186,45,0.96) 46%, rgba(45,145,253,.5) 99%);}
* html #container{overflow:visible}
#intro{min-height:190px;margin:10px auto}
* html #intro{height:190px}
#intro-image{float:left;width:250px;margin-left:14px}
#intro-text{padding:8px 20px;float:right;max-width:80%;text-align:justify}
#content{margin-top:20px;min-height:250px;height:250px}

#sidecontent{border:2px solid #888;width:98%;margin:8px;padding:4px;text-align:center}
#sidecontent img{padding:1px;border:1px solid #888}
#maincontent{width:70%}
#mainleft{width:98%}
#mainright{width:98%;}
#mainright a{color:#000}
footer{margin:0 auto;min-height:40px;background-image:linear-gradient(#d12 0%,#811 100%);border-top:2px solid #000;text-align:center;}


nav{height:85px;background-image:linear-gradient(#d12 0%,#811 100%);margin:10px auto;border-bottom:4px solid #888;display:flex;justify-content:center}
nav ul{position:relative;float:left;list-style-type:none;margin:0;padding:0 0 0 10px}
nav li{margin:10px 3px 0;float:left;height:28px;border:1px solid #9af;border-radius:5px;transform:skew(-10deg)}
nav a{float:left;display:block;padding:4px 12px 6px;color:#FFF;text-decoration:none}
nav a:hover{background:#828282;color:#fff;cursor:pointer}

h1{padding-top:0;margin-top:0;font:110% Arial;font-weight:700;color:#c00}
.mainheading{font-weight:700;font-size:123%}
.heading{background-image:linear-gradient(#DF1E2E 0%,#8A121C 100%);border-bottom:4px solid #888;height:25px}
.subheading-white{color:#fff;margin:0;padding:5px 0 0 10px;font-size:115%;font-weight:700}
.p-indent{padding-top:0;padding-left:10px}
.top { font-size:26px;position:sticky;bottom:40px; --offset: 100px; margin-top: calc(100vh + var(--offset)); margin-left:91%}

@media (min-width: 1024px) and (orientation: landscape) {     /*  - - - - = ab 1024 pixel  - - - -  */
nav{height:45px;margin:0 auto;border-bottom:4px solid #888;}
#sidecontent{float:left;border:2px solid #888;width:230px;margin-left:15px;margin-right:20px;padding:8px;}
#intro-text{padding:8px 20px;float:right;max-width:60%;text-align:justify}
#maincontent{float:right;width:68%}
#mainleft{float:left;width:470px}
#mainright{float:right;width:30%;margin-right:10px}

}