*, *:before, *:after {box-sizing:border-box;}

@font-face{font-family:'federo';src:url('federo.woff2') format('truetype');}

html, body {height:100%; width:100%; font-family:federo,Verdana,sans-serif; font-size:100%}
body, header, html {margin:0;padding:0;}
header {max-width:100%; height:6rem;padding:12px;background: linear-gradient(to bottom, rgba(185,188,189,1) 0%, rgba(232,238,240,1) 50%, rgba(185,188,189,1) 100%);}
nav {height:3rem; text-align:right;width:74vw;float:right;margin-top:-5rem;position: relative; z-index:99}
.drehen { transition:all .5s; display:inline-block; text-rendering:auto; font-size:24px; font-weight:900; color: #fff;text-shadow: #111 2px 2px 4px;}
.drehen:hover {transform:rotate(900deg);}
label { display:inline-block;color:#fff; background:#158; padding:.2rem .5rem; margin:.2rem;}
/* menu unsichtbar */
#menu {width:100%; text-align:right; margin-top:-10rem;margin-left:-10rem; visibility:hidden;transition:all 1s;opacity:0;}
#menu ul {display:inline-block;margin:0 20px 0 0; padding:0;}
#menu li {list-style-type:none;font-size:22px; margin:0 3px; padding:0; border-style: outset;border-radius:4px 14px 4px 14px;background:#eee; width:inherit;}
#menu li a {display:block;text-align:center;text-decoration:none; padding:3px;color:#a00; font-size:100%}
#menu li a:hover { background: rgba(30,200,30,.7);}    
.leer {min-height:101vh}
input[type=checkbox]{display:none;}   /* checkbox versteckt */
input[type=checkbox]:checked ~ #menu {visibility:visible;opacity:1;margin-top:2rem;margin-left:0;}      /* schaltet menu ein */

#logo {max-width:20%; height:5rem;margin-left:20px;font-family:'federo';content:'\f0c9';}
#schatten {margin:0;padding:0;letter-spacing:.2em; color:#900; text-shadow: -1px -1px 1px hsl(0,0%,30%), -2px -2px 1px hsl(0,0%,35%), -3px -3px 1px hsl(0,0%,40%),
                 -4px -4px 1px hsl(0,0%,50%), -5px -5px 1px hsl(0,0%,60%)}

article {max-width:100vw; margin:2px 0; padding:20px; background:#999;background: linear-gradient(to right, rgba(185,188,189,1) 0%, rgba(232,238,240,1) 50%, rgba(185,188,189,1) 100%);}
img {max-width:80%; height:auto}


.flexbox { background:#fff; width:100%; display: flex; flex-wrap: wrap }                  
.breit33 { width:33.3%; background:#eef; padding:1rem}
.breit66 { max-width:66.6%; background:#efe; padding:1rem}
.expand { font-size:30px; font-stretch: extra-expanded;}
.expand1 { font-size:25px; font-weight:600;font-stretch: extra-expanded;text-shadow: #111 2px 2px 4px; color: #000;}

@media (min-width: 576px) {    /* - - - - ab 576 pixel - - - - */
#menu li a {width:100%;padding:2px;}
}

@media (min-width: 1024px) and (orientation: landscape) {     /*  - - - - = ab 1024 pixel  - - - -  */
#menu {background:transparent;transition:none;visibility:visible;opacity:1;margin-top:0;margin-left:0;}
#menu ul {background:transparent}
#menu li {display:inline-block;margin:2px;}
#menu li a {width:100%; padding:4px 12px;}
nav {padding:1rem;}
label{display:none;}
input[type=checkbox]:checked ~ #menu {margin-top:0; margin-left:0;}
}

.links { background: linear-gradient(to right, rgba(5,188,189,1) 0%, rgba(150,150,150,1) 70%, rgba(285,188,189,1) 100%);}
.mitte { background: linear-gradient(to right, rgba(185,5,189,1) 0%, rgba(150,150,150,1) 70%, rgba(185,288,189,1) 100%);}
.rechts{ background: linear-gradient(to right, rgba(185,188,5,1) 0%, rgba(150,150,150,1) 70%, rgba(185,188,289,1) 100%);}





@media screen and (prefers-reduced-motion: no-preference) {  html { scroll-behavior: smooth; } }


    
.wrapper {
  position: absolute;
  top:100vh;
  right:1rem;
  bottom: -5em;
  width: 3em;
  pointer-events: none; 

}
.main {
  padding: 0 3rem;
  position: relative;
  width:100%;
  margin: 2rem auto;
  text-align:right;
}

.top {
  text-decoration: none;
  padding:0 4px 4px 4px;
  font-size:22px;
  color: #00f;
  background: #e22;
  border-radius: 100px;
  position: sticky;
  bottom: 20px; 
  --offset: 100px;
  margin-top: calc(100vh + var(--offset));
  margin-left:91%;
  text-align:center;
  border:2px solid #000;
}
.top a {color:#66f;text-decoration:none}