*, *: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%;height:200px}
body, header, html, li, ul {margin:0;padding:0;line-height:1.5;color:#fff}
/* html {background-image: linear-gradient(to top, #450202, #702612, #984d19, #bb781e, #d7a828);}  */

body {background-image:url(bg_betonieren1.jpg); background-repeat:no-repeat}
#alles {background:rgba(110,80,80,.7)}

header {width:100%; height:4.5rem;padding:8px 30px;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:70px;}

.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);}

li, ul{list-style:none;color:#333}
nav {min-height:80px; text-align:right; width:90vw; margin-top:-50px; z-index:99}        /* ;border-bottom:1px solid #fa3 */
label { display:inline-block;color:#fff; background:#a81; padding:.5rem 1rem; margin:.2rem 2rem}
/* menu unsichtbar */
#menu {width:100%; text-align:right; visibility:hidden; transition:all 1s;opacity:0;}
#menu ul {margin:4px 0 0 3rem; padding:1px;}
#menu li {min-width:100px;list-style-type:none;height:45px; margin:.1rem; padding:0;background:linear-gradient(to bottom, rgba(225,165,25,.6) 0%, rgba(232,255,240,1) 50%, rgba(200,140,10,1) 100%);border:1px solid #f81}
#menu ul li {display:block;text-align:center}
#menu ul li a{line-height:1.5;font-weight:600;color:#222;text-decoration:none;font-size:130%;}
#menu li:hover { background:rgba(10,180,10,.8)}
#menu a:hover{color:#fff}
    

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 */

.top{padding:0 4px 4px;font-size:26px;background:#f44;border-radius:100px;position:sticky;bottom:35px;--offset:100px;margin-top:calc(100vh + var(--offset));margin-left:91%;text-align:center}
.top a{text-decoration:none;color:#77f}

section{width:90%;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{margin:0;background-image: linear-gradient(to top, #450202, #702612, #984d19, #bb781e, #d7a828);width:200px;height:70px}
.logo a{margin: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;color:#000;height:max-content;}
.text{background-color:#ffffffdd;}  
.bild{max-width:40%;margin-left:-50px;margin-top:-160px} 
address{max-width:100%;margin-left:10px;margin-top:-24px}   
#fotos img{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%)}

/* article {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:90%; height:auto} */

.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:600px;
 position: relative;
 margin:8% Auto;
 padding: 5px 12px 10px 12px;
 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 {margin:0;height:40px;}
#menu li a {width:100%;height:45px; 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:40%;margin-left:auto;margin-right:auto;float:left}
.bild{margin-left:-40px}
.text{border:8px solid #fa3;border-radius:10px 5px;box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;}
}

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
}