/**
Farben:

gelb: #feec22
hellgrau: #e5e5e5 und #e3e0da

**/

@font-face {
  font-family: Rapor;
  src: url('../font/rapor/rapor-thin-webfont.woff');
  font-weight: 100;
}
 
@font-face {
  font-family: Rapor;
  src: url('../font/rapor/rapor-extralight-webfont.woff');
  font-weight: 200;
}
 
@font-face {
  font-family: Rapor;
  src: url('../font/rapor/rapor-light-webfont.woff');
  font-weight: 300;
}
 
@font-face {
  font-family: Rapor;
  src: url('../font/rapor/rapor-book-webfont.woff');
  font-weight: 350;
} 

@font-face {
  font-family: Rapor;
  src: url('../font/rapor/rapor-regular-webfont.woff');
  font-weight: 400;
}
 
@font-face {
  font-family: Rapor;
  src: url('../font/rapor/rapor-medium-webfont.woff');
  font-weight: 500;
}

@font-face {
  font-family: Rapor;
  src: url('../font/rapor/rapor-semibold-webfont.woff');
  font-weight: 600;
}
@font-face {
  font-family: Rapor;
  src: url('../font/rapor/rapor-bold-webfont.woff');
  font-weight: 700;
}

 
/* ENDE Font */

.wpcf7-form label {
  font-weight: 300 !important;
  font-size: 1.5rem !important;
}

/* Attribute für Design */

	/* Font auf Website */
		body{
			font-family:'Rapor';
			color:#000;
			font-size: 1.5rem;
			font-style: normal;
			font-weight: 350;
			line-height: 2.375rem; 
		}
	/* ENDE Font auf Website */
	
	/* Link */


	/* ENDE Link */
	
	/* Grid Breite */
	header, footer{
		padding:50px;
	} 
	
	footer{
		padding-top: 0;
	}

	section, .slidernavdesc, footer, .slidernavigation{
		width:1380px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	
	section.stauchen, section.stauchenleft > .content{
		width:800px;
	}
	
	section > .content > .wpb_column > .vc_column-inner{
		padding-left:0;
		padding-right:0;
	}

	section[data-vc-full-width="true"]{
		width:100% !important;
		left:unset;
		max-width:100%;
	}

	/* ENDE Grid Breite */

		:focus-within{
			outline: none;
		}

	/* ENDE Focus Outline Color */
	
	/* Fokus */
		.shuffle-filter .button:focus, .nav-menu li a:focus, .ggbanner a:focus, #menu-footer li a:focus, .wpb_text_column p a:focus{
		/*border-bottom: solid 1px #000;*/
		color: #929292;
		}

		.filter-container-mg .grid-item > div > a .hovercirlce{
		background-image: url(https://mattgelb.de/wp-content/themes/mattgelb/img/kreis-transparent.svg);
		  background-repeat: no-repeat !important;
		  background-position:top 15px left 15px;
		  background-size: 0;
		  display: block;
		  width: 30px;
		  height: 30px;
		  position: absolute;
		  top: 10px;
		  left: 30px;
		  border-radius:50%;
		  background-color: transparent;
		  border:solid 1px transparent;
		  transition: all ease 0.4s;
		}


		.filter-container-mg .grid-item > div > a:focus .hovercirlce{
		background-image: url(https://mattgelb.de/wp-content/themes/mattgelb/img/kreis-schwarz.svg) !important;
		  background-repeat: no-repeat !important;
		  background-position:top 5px left 5px;
		  background-size: 20px !important;
		  background-color: #fff;
		  border:solid 1px #929292;
		}


	/* ENDE Fokus */
	

/* Cursor
body, a, .wpcf7-submit, .shuffle-filter .button, .accordion.mg h2 button {
	 cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="%23000000" fill="%23000000" width="15px" height="15px" viewBox="0 0 10.04 10.04"><circle cx="5.02" cy="5.02" r="4.52"/></svg>') 10 10, auto;


}
footer, footer a {
	 cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="%23ffffff" fill="%23ffffff" width="15px" height="15px" viewBox="0 0 10.04 10.04"><circle cx="5.02" cy="5.02" r="4.52"/></svg>') 10 10, auto;


} */
/* ENDE Cursor */


/* Text-Auswahl - Farbe */ 
::-moz-selection { background: #000; color: #fff; }
	::selection { background: #000; color: #fff; }




/* MENÜ */
	
		/* --- Grundlayout --- */
		#menu-toggle {
		  display: none;
		  background: none;
		  border: none;
		  cursor: pointer;
		  padding: 0.5rem;
		}

		#menu-toggle span {
		  display: block;
		  width: 28px;
		  height: 3px;
		  margin: 6px auto;
		  background: #000;
		  border-radius: 2px;
		  transition: all 0.3s ease-in-out;
		}

		/* Hamburger → X */
		#menu-toggle.active span:nth-child(1) {
		  transform: rotate(45deg) translate(6px, 6px);
		}
		#menu-toggle.active span:nth-child(2) {
		  opacity: 0;
		}
		#menu-toggle.active span:nth-child(3) {
		  transform: rotate(-45deg) translate(6px, -6px);
		}

		/* Menü-Struktur */
		.nav-menu,
		.sub-menu-list {
		  list-style: none;
		  margin: 0;
		  padding: 0;
		}
		.nav-menu > li {
		  position: relative;
		}

		/* Submenu versteckt */
		.sub-menu {
		  display: none;
		  overflow: hidden;
		}
 /*.menu-hauptmenue-container, .mobile-info-box-menu h2, .mobile-info-box-menu div{
					   display: none;
					   transition: transition: 0.3s ease all;
				   }*/
.menu-hauptmenue-container, .mobile-info-box-menu > .boxinfo{
					   display: none;
					
				   }

.mobile-info-box-menu .boxinfo{
	padding-top: 60px;
  padding-left: 60px;
  padding-right: 120px;
}

.mobile-info-box-menu .boxinfo a{
	font-size: 1.5em !important;
}

		/* Desktop-Version */
		@media (min-width: 1351px) {
			
			.menu-hauptmenue-mobil-container{
				display:none !important;
			}
			
		  #menu-toggle {
			display: none !important;
			tabindex: -1;
		  }
		  .menu-hauptmenue-container {
			display: block !important;
		  }
		  .nav-menu {
			display: flex;
			justify-content: end;
			margin-right: -30px;
		  }
		  .sub-menu {
			position: absolute;
			top: 98px;
			right: 0;
		   background-color: #3131DF;
			min-width: 460px;
			display: none;
			border-top: solid 5px #fff;
		  }
		  
	
		  
		  .nav-menu > li:hover .sub-menu {
			display: block;
			animation: slideDown 0.3s ease forwards;
		  }
		  
			/* Hover-Effekt für das Untermenü */
				.menu-item-has-children:hover .sub-menu {
				  display: block;
				}
				
				/*
		.sub-menu-list li a:hover, .sub-menu-list li.current-menu-item a{
					font-weight: 700;
					background-color:#2727B3;
				}*/
				/*
				.nav-menu > li > a:hover span {
				  border-bottom: solid 5px #fff;
		padding-bottom: 26px;
				}
				.nav-menu > li > a span {
				  border-bottom: solid 5px transparent;
		padding-bottom: 26px;
				}*/
				
				.mobilmenu{display:none;}
		}

		/* Mobile-Version */
		@media (max-width: 1350px) {
			
				#menu-toggle:focus, nav a:focus, .calendar-icon:focus {
						  outline: 3px solid #fff;
						  outline-offset: 2px;
						}
					
					body > header{
						display:flex;
					}
					
					body > header > .content {
					  justify-content: left;
					
					}

					.logo {
					  flex:unset;
					}
					
				/*
				  
				   .menu-hauptmenue-container, .mobile-info-box-menu h2, .mobile-info-box-menu div{
					   display: none;
				   }*/
				    
				   .menu-hauptmenue-container, .mobile-info-box-menu > .boxinfo{
					   display: none;
				   }
				   
				   
				  
				  .menu-hauptmenue-mobil-container {
					display: none;					
					width: 100%;
					background-color: #3131DF;
					left: 0;
					top: 160px;
					padding-left: 0;
					padding-right: 0;
					overflow:hidden;
					position: absolute;
					z-index: 22222;
					box-shadow: 0 8px 5px -2px rgba(0, 0, 0, 0.75);					
				  }
				  
				  
				  #menu-hauptmenue-mobil{
					  width: calc(95% - 30px);
  margin-left: auto;
  margin-right: auto;
				  }
				  
				  .nav-menu {
					display: block;
				  }

		 
		}

		/* Animation fürs Sub-Menü */
		@keyframes slideDown {
		  from {
			opacity: 0;
			transform: translateY(-10%);
		  }
		  to {
			opacity: 1;
			transform: translateY(0);
		  }
		}


		/* Custom Stile Menü */
		.nav-menu {
		  background:none;
		  border:none;
		  cursor: pointer;
		  padding:0;
		}

		.nav-menu > li > a {
		  display: flex;
		  text-decoration: none;
		}

		.nav-menu > li {
		  position: relative;
		  padding-right: 15px;
		  padding-left: 15px;
		 
		}
		.nav-menu > li:last-child {
		  padding-right: 30px;
		}

		#menu-hauptmenue button.submenu-toggle, .abmenu nav button.submenu-toggle, #menu-hauptmenue-mobil button.submenu-toggle {
		 width: 20px;
		padding: 0;
		  background-image: url("../img/icon/menu-down.svg");
		  background-repeat: no-repeat;
		  background-position: center;
		  margin-right: 12px;
		  border: 0;
		  background-color: transparent;
		  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(104deg) brightness(103%) contrast(103%);
		  background-size: 20px 10px;
		  height: 22px;
		  }
		#menu-hauptmenue button.submenu-toggle, #menu-hauptmenue-mobil button.submenu-toggle {
		  display: block;
		}

		.sub-menu{
			z-index: 4444;
		}
/*
		.sub-menu .sub-menu-list{
			padding-bottom:30px;
		}*/



		/* Styling der Links im Untermenü */
				.sub-menu-list li {
				 
				  border-bottom:solid 5px #fff;
				}

				.sub-menu-list li a {
				  text-decoration: none;
				  display: block;
				  word-wrap: break-word;
				  white-space: normal;
				   padding: 20px;
				}
				

			


			.nav-menu > li.current-menu-item > a span, .nav-menu > li.current-menu-parent > a span {
				  border-bottom:solid 5px #fff;
  padding-bottom: 26px;
				}

/* ENDE Menü */


/* ENDE Attribute für Design */



body.overflowhidden {
  overflow: hidden;
}

body{
	margin:0;
	padding:0;
}

.displaynone{
	display:none;
}

.clear{
	clear:both;
}

ul, ol{
	padding:0;
	margin:0;
}

img{
	display:block;
}

.pb30{
	padding-bottom:30px !important;
}
.pb60{
	padding-bottom:60px !important;
}

.pb90{
	padding-bottom:90px !important;
}
.pb120{
	padding-bottom:120px !important;
}



/* Barrierefreie Elemente */

	.skip-link {
	  position: absolute;
	  top: 110px;
		left: 60px;
	  transform: translateY(-550%);
	  border-width: 0.3rem;
	  border-radius: 0;
	  text-transform: none;
	  -webkit-text-decoration: none;
	  text-decoration: none;
	  border-color:black;
	}
	.skip-link.tabulator-menu-btn {
	  top: 70px;
	  right: 60px;
	  left: unset !important;
	  display:none;
	}
	.skip-link.tabulator-filter-btn {
	  left: unset !important;
	  right: 75px;
	  top: -8px;
	  display:none;
	}
	
	.closemenu, .menutipp{
	 position: absolute;
	  top: 1rem;
	  left: 1rem;
/*	  transform: translateY(-250%);*/
	 
}

.menutipp, .closetabmenu, .closetabmenutest, .onlyresponsive {
  display: none;
}



	.skip-link:focus {
	  transform: translateY(0);
	}
	

/* ENDE Barrierefreie Elemente */


.ltrtext {
  unicode-bidi: bidi-override;
  direction: rtl;
}


/* Menü */
.menu-side{
	padding-top:10px;
}

header{
	display:flex;
}
header .menu-container{
	position:relative;
	flex: 1;
}
 header .menu-side{
display: flex;
}

 header .menu-side > nav{
flex: 1;
}

header nav {
  text-align: right;
}

.nav-menu > li {
  display: inline-block;
  position: relative;
}

.nav-menu li {
  list-style: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.nav-menu li a{
font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: 0px;
  color: #000;
  text-decoration: none;
  margin-right: 40px;
  border-bottom:solid 1px transparent;
  padding-bottom: 14px;
}


.contactmenu{

width:30px;
height:30px;
display: flex;
  align-items: center;
}
.contactmenu span{
	width:28px;
	background-image:url('../img/kreis-schwarz.svg');
height:8px;
display:block;
background-size: 8px;
  background-repeat: space;
  background-position: initial;
}
/* ENDE Menü */


/* Content */

.abstand{
	display:block;
	width:100%;
}

#gg-main > section:last-child{
	padding-bottom:50px;
}

h1{
	margin:0;
}

.logo img{
	max-width:130px;
}
.contentheader{
	padding-top: 60px;
	padding-bottom:30px;

}

.home .contentheader{
	padding-top: 60px;
	padding-bottom:90px;
	margin-top: 20px;
  margin-bottom: 30px;
}

.home .contentheader {
  padding-bottom: 40px;
}
/*
.contentheader span{
	background-image:url('../img/kreis-schwarz.svg');
	background-size: 6px;
	padding-left:15px;
	background-position:left center;
	background-repeat:no-repeat;
	font-size: 1em;
  margin-bottom: 30px;
  font-weight: 400;
}*/


/*
.contentheader > *{
	margin-left:15px !important;
	margin-right:15px !important;
}*/


.contentheader h1{
font-size: 4rem;
font-style: normal;
font-weight: 600;
line-height: 4.5rem;
}
.contentheader span{
font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75rem;
  margin-bottom: 20px;
  display: block;
}
.home .contentheader h1{
font-size: 12.5rem;
font-style: normal;
font-weight: 700;
line-height: 11.875rem;
margin-top: 20px;
  margin-bottom: 30px;
}

.home .contentheader h2{
font-size: 3rem;
font-style: normal;
font-weight: 700;
line-height: 4.25rem;
}
.home .contentheader h3{
font-size: 1.5rem;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom:0;
}

h2{
	font-size: 2.2em;
  line-height: 1.4em;
  font-weight: 500;
  margin-top:0;
  margin-bottom:0;
}
h2.pb{
  margin-bottom:15px;
}
h3{
  margin-top:0;
}

h3.h3ash2{
	font-size: 1.5em;
  line-height: 1.4em;
  font-weight: 500;
  margin-top:0;
  margin-bottom:0;
}

h2.h2ash1{
	font-size: 3em;
  line-height: 1.4em;
  font-weight: 600;
}

a{
	text-decoration:underline;
	color:#000;
}
section{
	padding-bottom:90px;
}

.ggbanner{
font-size: 3rem;
font-style: normal;
font-weight: 700;
line-height: 4.25rem;
}
.ggbanner.smallfont{
font-size: 1.5rem;
font-style: normal;
font-weight: 700;
line-height: 2.375rem;
}

.ggbanner.smallbottom{
margin-bottom:50px;
}


.fakten{
	padding-top:60px;
}
.fakten h3{
	font-family: Rapor;
font-size: 3rem;
font-style: normal;
font-weight: 700;
line-height: 4.25rem;
margin-bottom: 20px;
}
.fakten ul{
list-style:none;
}
.fakten li{
font-size: 2rem;
font-style: normal;
font-weight: 500;
line-height: 3.5rem;
}
/* ENDE Content */

/* Footer */
footer > div{
	display:flex;
	border-top:solid 1px #eaeaea;
	justify-content:end;
	padding-top:40px;
}
footer > div > div:first-child{
	flex:1;
	
}

#menu-footer{
	list-style:none;
}
#menu-footer li{
	display:inline-block;
	padding-left:30px;
}
/* ENDE Footer */


/* Slider */
.slider .slick-slide img{
	padding-left:60px;
}
.slider, .slider .slick-list{
	height:900px;
}
.slider.smallslider, .slider.smallslider .slick-list{
	height:360px;
}

.slick-dots{
	position:relative !important;
	bottom: 0;
}

.slick-dots li button::before {
  position: relative;
}
.slick-dots li button{
	background-color:#000;
	border-radius:50%;
	width: 9px !important;
  height: 9px !important;
}

.slick-dots li.slick-active button{
	width: 14px !important;
  height: 14px !important;
}

.slick-dots li button::before {
  line-height: unset;
}

.slidernavdesc{
	display:flex;
	justify-content: end;
	padding-top: 8px;
}
.sliderdesc{
	text-align: left;
	flex: 1;
}
.slidernavdesc > div:first-child{
	padding-left:15px;
}
.slidernavdesc > div:last-child{
	padding-right:15px;
	
}
	.sliderdesc > div{
	width:30%;
}


.slidernavigation{
	position: relative;
}


.slidernavigation button{
	background:transparent;
	border:0;
	position:absolute;
}

.slidernavigation button:focus{
	background:red;
}

.slidernavigation button.next-btn{
	left:100px;
}

.slick-dotted.slick-slider {
  margin-bottom: 48px;
}

/* ENDE Slider */

/* Referenzen mit Filter*/


.shuffle-container img {
  width: 100%;
  transition: 0.3s ease all;
}
.shuffle-container img, .shuffle-container a {
  display: block;
}

.shuffle-container {
  list-style: none;
}
/**/
.filter-container-mg .grid-item > div > * {
  padding-left: 18px;
  padding-right: 18px;
}

.filter-container-mg .grid-item {
  display: inline-block;
  padding-bottom: 90px;
}

.grid-item{ width: 50%; }

.grid-item h2{
	font-size: 2rem;
	font-weight:500;
	padding-top: 30px;
  padding-bottom: 12px;
}
.grid-item h3{
	font-size: 1.5rem;
	font-weight: 350;
	margin:0;
}
.grid-item h3 a{
	color: #000;
}
.grid-item a{
  text-decoration: none;
}

/*.grid-item--width2 { width: 50%; }

.grid-sizer {
  width: 50%;
}
*/
.refbtnresponsive{
	display:none !important;
}

.shuffle-container {
	
 width: 100%;
 /*  margin-left: -30px !important;*/
  margin: 0 auto;
    margin-left: auto;
  padding: 0;
  list-style: none;
}

section.referenzen{
	/*padding-left: 36px;*/width: 1416px;
	padding-top: 40px;
}
/*
section.referenzen .content{
	margin-left: 10px;
}*/

.shuffle-filter{
	display:flex;
	justify-content:start;
	border-top:solid 1px #eaeaea;
	margin-left: 20px;
  margin-right: 20px;
padding-bottom: 30px;
}

.shuffle-filter > span{
	border-right:solid 1px #eaeaea;
	padding-right:40px;
	padding-left:40px;
	  padding-top: 15px;
	  padding-bottom: 15px;
	  color:#929292;
	  font-size: 0.7em;
  font-weight: 400;
}

.shuffle-filter > button[aria-expanded="true"]{
	  color:#929292;
}

.shuffle-filter .button{
	font-size: 0.7em;
  font-weight: 400;
	  padding-top: 15px;
 padding-bottom: 14px;
border-radius: 0;
border: 0;
background-color: transparent;
margin-left: 30px;
margin-right: 30px;
border-bottom: solid 1px transparent;
}

.resp-filter-btn {
  background-image: url(../img/respons-filter-btn.png);
  background-position: right bottom;
  background-repeat: no-repeat;
  height: 25px;
  display: none;
}



/* ENDE Referenzen mit Filter*/


/* Refernz Detail */

.nextreferenz h2{
	font-size: 1.5rem;
font-style: normal;
font-weight: 350;
line-height: 2.375rem;
text-align:center;
padding-bottom: 40px;
}
.nextreferenz div{
text-align:center;
}
.nextreferenz div a{
font-size: 3rem;
font-style: normal;
font-weight: 700;
line-height: 4.25rem; 
background-image:url(arrow-right.svg);
background-repeat:no-repeat;
background-position:center right;
padding-right: 60px;
text-decoration:none;
}

section.referenz .items, section.referenz{
width:1406px; 
}

section.referenz{
display:flex;
}

section.referenz > div{
width: calc(50% - 26px);
padding-left:13px;
padding-right:13px;
}
section.referenz .faktentxt{
max-width:600px;
padding-left:25px;
}



section.referenz > div > div{
padding-bottom:26px;
}



/* riehenfolge umsotieren mit order: 1; order:4 oder order: 3; */
/* riehenfolge umsotieren mit order: 1; order:4 oder order: 3; */

section.referenz img{
width:100%;
}

/* ENDE Refernz Detail */


/* Formurlar */
.wpcf7-form input, .wpcf7-form textarea{
	border-top:0;
  border-left:0;
  border-right:0;
  border-bottom:solid 1px !important;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 100;
  line-height: 2rem;
  padding-top: 5px;
  padding-bottom: 5px;
  width:100%;
}
.wpcf7-form label{
  font-weight: 200;
}
.wpcf7-form .wpcf7-submit{
border-radius:50px;
  line-height: 1em;
  transition:all 0.3s;
  color: #fff;
  display: inline-block;
  text-align: center;
  white-space:nowrap;
  background-color: #000;
  border-style:solid;
    border-bottom-style: solid;
  border-width:1px;
  width: auto !important;
  padding-left: 2.5em;
  padding-right: 2.5em;
  padding-top: 0.75em;
  padding-bottom: 0.75em;
  font-weight: 200;
  font-size: 1rem;
  border-color:#000 !important;
}
.wpcf7-form .wpcf7-submit:hover{

  color: #000;
cursor:pointer;
  background-color: transparent;
  
}
/* ENDE Formurlar */


/* Cursor */
.n-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  transform: translateZ(0);
  visibility: hidden; }
  .n-cursor--inner {
    margin-left: -3px;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    z-index: 10000001;
    background-color: #000;
    transition: width 0.15s ease, height 0.15s ease, margin 0.15s ease; }
    .n-cursor--inner.n-cursor--links {
      margin-left: -10px;
      margin-top: -10px;
      width: 20px;
      height: 20px;
      opacity: 0.65; }
  .n-cursor--outer {
    margin-left: -15px;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border: 1px solid #303133;
    box-sizing: border-box;
    z-index: 10000000;
    opacity: 0.5;
    transition: all 0.08s ease-out; }
/* ENDE Cursor */