body { 	
	XXbackground: #eee url(img/bodybg.png) repeat-x 0 0;
	margin: 0; padding: 0;
	height:100%;
	width:100%;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Layout Blocks
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.wrapper { /* Holds the page items in place */
	XXbox-shadow: 0px 20px 40px -20px rgba(0, 0, 0, 0.4);	
}
.wrapper { width: 100%; max-width: 2400px; margin: 0 auto 0 auto; background: #fff;}


.topheader {display:grid; place-items: center; aspect-ratio:8; width:100%; background: #ffe url(img/header.jpg) no-repeat center center; background-size: cover;}
.topheader img {width:50%; max-width:600px;}


.topheader p {bottom:10%; width:90%; position:absolute; text-align: center; padding: 0 5%; font-size:1.6em; line-height:110%; color:#fff; text-shadow: 0px 2px 30px #000; }


/*MEnu1*/
.topmenubox {background: #fff; text-align:center;}
.topmenubox a {display: inline-block; padding:10px 10px 10px 10px; border-left: 2px solid #ccc; font-size:1.2em;}
.topmenubox a.menu-last { border-right: 2px solid #ccc;}


/*===========================================================
Contentbereich
*/

.contentbox {margin: 0 auto 0 auto; width: 90%; max-width:1400px; padding-top: 30px; }
.frontpage .contentbox {margin: 0 auto 0 auto; width: 96%; max-width:20000px; padding-top: 30px; }


/* aus alter Site */
.contentbox .half {position:relative;}
.contentbox .half .centerpic {position:absolute; left: 0; top: 50%; width:0; height:0;}
.contentbox .half .centerpic .inner {position:absolute; left: -80px; top: -80px; width:160px; height:160px; border-radius: 50%; background: #fff;}
.contentbox .half .centerpic .inner img {border-radius: 50%;}

.clear, .clearcontent {clear:both; width:100%; height:1px; XXbackground: #ddd}


img.responsive {max-width:100%; height:auto;}

.half {width:46%; margin:20px 2%; float:left;}
.inner {margin:10px 5%;}
.contentbox .half.left {clear:left;}


.logobox {text-align:center;}
.logobox img {max-width:100px; margin: 20px 0;}
.kontaktbox {width:50%; float:right;  background: #eee; margin:0 0 10px 10px;}
.kontaktbox p {margin:0 0 0 30% ; line-height:140%;}
.kontaktbox img {width:25%; margin:0 0 0 0; float:left;}

.clear {clear:both; width:100%; height:1px; background: #ddd}


/*masonry*/
.grid-item.pleft img {float:left; margin:0 4% 0 0; width: 48%;}
.grid-item.pright img {float:right; margin:0 0 0 4%; width: 48%;}




.gallerytop {padding:10px 1%; background: #efeeee;}





.piclinks {float:left; clear:left; margin: 3px 10px 1px 0;}
.picrechts {float:right; clear:right; margin: 3px 0 1px 5p;}
.graufett {color: #666666; font-weight: bold;}
 
.dahin {display:block; margin-bottom:30px; padding: 0 0 10px 15px; background:transparent url(img/arr_link_kl.gif) no-repeat 0px 8px;}
.noborder, .tp_piclink, .fbx  { border-bottom:none; }
.noborder a { border-bottom:none; }


/*masonry*/
.grid-item.pleft img {float:left; margin:0 4% 0 0; width: 48%;}
.grid-item.pright img {float:right; margin:0 0 0 4%; width: 48%;}


/*grid*/
.grid-container {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 3%;
    row-gap:40px;
	

}


.grid-item {
    padding:0 0 15px 0;
    overflow:hidden;    
    XXbackground-color: #f4f4f4;    
    position:relative; 
	background: linear-gradient(163deg, rgba(231,231,231,1) 0%, rgba(251,251,251,1) 100%);
	/*opacity: 0.7;
	transition: 1s opacity;
	*/
}
.XXgrid-item:hover {
	opacity: 1;
}

.grid-item.width2 { grid-column: span 2;  }

/*
.grid-sizer, .grid-item { width: 25%;  }
.grid-item.width2 { width: 50%; }
.grid-item.width3 { width: 75%; }
.grid-item.width4 { width: 100%; }
*/

.grid-item img {max-width:100%;}
.itemz_editlink {position:absolute; top:0; right:0;}

.innergrid {padding: 0 10px 10px 10px; }
.innergrid * {margin:0;}
.innergrid p {line-height:140%; margin-bottom: 10px;}
.innergrid h3 {font-size: 16px; margin-bottom: 10px;}
.innergrid h4 {font-size: 11px;}

.grid-footer {background:#fff url(img/gridschatten.png) no-repeat; background-size: 100% 100%; position: absolute; bottom: 0; height:20px; width:100%; transition: 0.5s all;}
.grid-item:hover .grid-footer { background-size: 100% 50%;} 


@media screen and (max-width: 1024px) {
.grid-container {   grid-template-columns: 1fr 1fr 1fr; }
.grid-item.width2 { grid-column: span 2;  }
}


@media screen and (max-width: 500px) {
  .grid-container {   grid-template-columns: 1fr; }
.grid-item.width2 { grid-column: span 1;   }
}


/*footer */
.footerbox2 {display:grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap:20px;
}


.footerbox2 {border-top: 3px #ddd dotted; padding:20px 0 60px 0; }
.footerbox2 .kontaktbox2 {width:100%; border-radius:60px; }
.footerbox2 .kontaktbox2 p {margin:0; padding:0; font-size:1.2em}
.footerbox2 .imagebox {width: 120px; height: 120px; aspect-ratio: 1; float:left; border-radius:60px; overflow:hidden;}
.footerbox2 .imagebox img {width:100%;}
.footerbox2 .textbox {display:grid; height: 120px; margin-left:140px; place-items: center;}
.footerbox2 .textbox p {width:100%; line-height:180%;}

  
#gototopswitch {display:block; width:30px; margin-top: -60px; float:right; }
    

/* ================================================================================================= */
@media screen and (max-width: 1400px) {
.contentbox {width: 98%; }
}

/* Touch Screens */
@media screen and (max-width: 1024px) {
	h1 {	font-size: 24px;}
	h2 {	font-size: 18px;line-height: 120%;}
	h3 {font-size: 14px;}
	h4 {font-size: 14px;}
	h5 {font-size: 13px;}
	h6 {font-size: 12px;	line-height: 140%;}
}



@media screen and (max-width: 768px) {
	.half {width:96%;}
	.XXcontent img {float:left;}
	.content .half .centerpic {left: 50%; top: 0;}
	.content .half .centerpic .inner {left: -80px; top: -80px; }
	
	.gallerytop {padding:10px 10px; }
}

@media screen and (max-width: 540px) {
	.topmenubox  {font-size: 13px;}
	
	.contentbox {width:100%;}
	.topmenubox {position:sticky; top: 0; z-index:9000;}
	.kontaktbox {width:100%; margin: 0 0 0 0; float:none;  }
	.kontaktbox p {margin:10px 0; line-height:140%;}
	.kontaktbox img { margin:0 5px 0 0; }
	h1 {clear:both;}
	.topmenubox a {padding:4px; font-size:1em;}
	
	.under_construction {display: none;}
	
	.footerbox2 {grid-template-columns: 1fr; width: 90%; margin-left:5%;}
	
	.topheader {aspect-ratio:5;}
	.frontpage .topheader {aspect-ratio:3;}
	.topheader img {width:100%; max-height:100%;}
}