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

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

html, body {font-family:federo,Verdana,sans-serif; font-size:110%}
body, header, html {margin:0;padding:0;}
header {width:100%; height:4.5rem;padding:8px 30px;background:#fefefe;position:sticky;top:0;} /*background: linear-gradient(to bottom, rgba(255,188,189,7) 0%, rgba(232,255,240,1) 60%, rgba(255,190,80,5) 100%);*/
article {margin-top:2px;}
.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(720deg);}
a {text-decoration:none;}
li, ul{margin:0;padding:0;list-style:none}
nav {min-height:25px; text-align:right; width:90vw; margin-top:8px; z-index:99;border-bottom:1px solid #fa3}
label { display:inline-block;color:#fff; background:#a81; padding:.4rem 1rem; margin:.4rem;}
/* menu unsichtbar */
#menu {width:100%; text-align:right; visibility:hidden; transition:all 1s;opacity:0;}
#menu ul {margin:4px 0 0 7rem; padding:2px;background-color:#000;}
#menu li {list-style-type:none;height:45px; margin:.1rem; padding:0;background:linear-gradient(to bottom, rgba(255,188,189,.5) 0%, rgba(232,255,240,1) 50%, rgba(255,190,80,1) 100%);border:1px solid #fa3;border-radius:15px 2px;}
#menu ul li {display:block;text-align:center}
#menu ul li a{line-height:46px;font-weight:500;color:#642}
#menu a:hover { background:rgba(30,200,30,.8);color:#fff;height:40px;border-radius:15px 2px;}    

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

section{width:100%;min-height:60vh; padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;display:flex;flex-wrap: wrap;}

#fotos  {display:flex; align-content:center; flex-wrap:wrap; flex-direction:row; justify-content:space-around;}
.breit {background:#eee;margin:8px;padding:2px;min-width:15%;max-width:35%;}
.logo{width:20%;height:2.5rem; position:absolute;top:0px;margin:5px 0 0 0}

h1 {font-size:200%;}
h2 {font-size:140%;color:#f42;margin:2px 0 0 0;padding:0;}
h2 a{font-size:18px;}
p  {margin:4px 0;}
.bild, .text{min-width:48%;margin-left:auto;margin-right:auto;padding:20px;float:left}
img{max-width:100%}

input[type=checkbox]{display:none;}   /* checkbox versteckt */
input[type=checkbox]:checked ~ #menu {visibility:visible;opacity:1;margin-top:2px;margin-left:0;}      /* schaltet menu ein */

input, textarea {
 width: 400px;
 height:30px;
 margin:4px;
 background-color:#eaeaea; 
 font-family: federo, Verdana, Arial, Helvetica, sans-serif;
 font-size: 1em;
 font-weight: bold;
 border:none;
 border-bottom: 1px solid black;
}
textarea {height:100px}

.mehr{max-width:200px;float:left;background-color:#f86;padding:3px 20px; margin:5px 0 20px; transform:skew(-20deg);border-radius:8px 4px;}
.schatten {margin:0;padding:0;letter-spacing:.2em; color:#900; text-shadow: -1px -1px 1px hsl(0,0%,80%), -2px -2px 1px hsl(0,0%,55%), -3px -3px 1px hsl(0,0%,40%),
                 -4px -4px 1px hsl(0,0%,50%), -5px -5px 1px hsl(0,0%,80%)}

.modalDialog {
 position: Fixed;
 font-family: Verdana, Sans-Serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: rgba(0, 0, 0, 0.6);
 z-index: 99999;
 opacity: 0;
 transition: opacity 400ms ease-in;
 pointer-events: None;
}

.modalDialog:target { opacity:1; pointer-events:Auto;}

.modalDialog > div {
 width: 400px;
 position: relative;
 margin: 10% Auto;
 padding: 5px 20px 13px 20px;
 border-radius: 10px;
 background-color: #fff;
 background: linear-gradient(#fff, #999);
 cursor: Default;
}

.close {
 background-color: #666;
 color: #fff;
 line-height: 25px;
 position: Absolute;
 right: -12px;
 text-align: Center;
 top: -10px;
 width: 24px;
 text-decoration: None;
 font-weight: Bold;
 border-radius: 12px;
 box-shadow: 1px 1px 3px #000;
}
.close:hover { background-color:#0df; }

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

@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 a {width:100%;padding:4px 12px;}
#menu ul li { display: inline-block;text-align:center}
label{display:none;}
input[type=checkbox]:checked ~ #menu {margin-top:2rem; margin-left:0;}
.bild, .text{max-width:48%;margin-left:auto;margin-right:auto;padding:20px;float:left}
}

ul.col ul { display:none }
ul.col li:hover ul {
   list-style: none;
   display: block; position: absolute;
   left: 14em; z-index: 10; margin-top: -2em;
   width: 12em
}
button#back2top {
	position:fixed;
	right:2%;
	bottom:4%;
	opacity:0;
	visibility:hidden;
	font-size:22px;
	color:#fff;
	background-color:red;
	border:none;
	border-radius:1rem;
	padding:3px 2px;
	margin:0
}

.hoch {
	position:fixed;
	bottom:10px;
	right:10px;
	z-index:10;
	width:40px
}