@charset "UTF-8";
/* CSS Document */


	body {
	overflow-x:hidden !important; 
	background-color: #293133 !important;
}
	p{
		font-size: 18px;
		font-family: 'sans-serif', sans-serif;
		font-weight: 400;
		text-align: justify;
		letter-spacing: 0.05rem;
		color: #fff;
		hyphens: auto;
	}
		
		h1, h2, h3, h4, h5, h6{hyphens: auto;	}
	
	
	.sprung {visibility: hidden; height: 0px !important; position: absolute; margin: -95px !important;}
	
	
.carousel-item img {
	
}
	
	.mt-100{margin-top: 100px;}
	
	.pb-25{padding-bottom: 25px;}
	.pt-100{padding-top: 100px;}

.head {
	max-height: 100vh;
    overflow: hidden;
}


	
	.sub_image_sliders {
	display: none;
	position: fixed;
	height: 100vh;
	width: 100%;
    left: 0%;
    top: 0%;
	z-index: 9999;
}
		
	.video_overlay {
	display: none;
	justify-content: center;
	align-content: center;
	position: fixed;
	height: 100vh;
	width: 100%;
    left: 0%;
    top: 0%;
	z-index: 9999;
	background: rgba(9,9,9,0.9);
}

.exit {
	position: absolute;
	right: 20px;
	top: 20px;
	z-index: 99999;
	font-size: 50px;
	color: #afca0b;
}

.exit:hover {
	cursor: pointer !important;
	color: white;
	text-decoration: none;
}
	
	
	.gallery-fullsize{
		background-color: rgba(1,1,1,0.84);
		height: 100%;	
	}
	
	
	/*.gallery-img{
		width: 85%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		top: 50%;
 		 -webkit-transform: translateY(-50%);
 		 -ms-transform: translateY(-50%);
 		 transform: translateY(-50%);
	}
	*/	
		
		
.gallery-img{
		width: auto;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		top: 50%;
 		 -webkit-transform: translateY(-50%);
 		 -ms-transform: translateY(-50%);
 		 transform: translateY(-50%);
	}
		




.cataloge{
	margin: 30px 0px;
	padding: 0px 40px;
		}

.cataloge-img{
	display: block;
	overflow: hidden;
	max-width: 60%;
	margin: auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}


		
		.cataloge h4{
			font-size: 1.2rem;
			font-weight: bold;
			max-width: 100%;
			text-align: center;
			color: #212529;

			
		}	
		
		.cataloge h5{
			font-size: 1rem;
			max-width: 100%;
			text-align: center;
			margin-top: 10px;
			text-transform: uppercase;
		}
		
		
		
		.sub_image_sliders .carousel-item{height: 100vh;}
	
	.sub_image_sliders .carousel-control-next, .carousel-control-prev{
		width: 8%;
	}
	
	.btn-ebhard{
		background-color: #afca0b !important;
		color: #293133 !important;
	}
	
	
	.impressum{text-align: right;
	padding-top: 12px;}
	
	.footer{
		color: #fff;
	}
	
	.footer a{
		font-size: 12px;
		color: #DDD !important;
		text-decoration: none;
	}
	
.ueberuns{
	padding: 100px !important;
	background-color: #fff;
	border-left: 8px solid #afca0b;
	/*margin-left: 25%; */
}

.impress{
	padding: 100px !important;
	background-color: #fff;
}
	
h2 {
	font-weight: 400;
}
		
	
.ueberuns p {
	color: #293133;
}

.impress p {
	color: #293133;
}

	
	.ueberuns-background{
		background-color: #fff;
	
	}
	
		#zitat{
		background: #afca0b;
	
		}
		
		#zitat2{
		background: url(img/weiss.png);
		background-repeat: no-repeat;
		background-size: 200%;
		background-position: right;
		height: 100%;
		position: relative;
		opacity: 30%;
		}

#zitat h2{
	font-size: 2.8rem;
	text-align: right;
	padding: 40px;
	font-weight: bold;
	position: absolute;
	bottom: 70px;
	font-style: italic;
	color: white;

		
		}
		

.leistung{
	min-height: 580px;
			
	}
		
.leistung img {
	max-height: 100%;
}
		
		
		
.leistung-img{
	display: block;
	width: 100%;
	height:100%;
	min-height: 200px;
	padding: 0;
	background-size: cover !important;"
		}


.text-block {
	padding: 100px !important;
}
		
.text-block-small {
	padding: 50px 100px !important;
}

.gray {
	background-color: #eeeeee;
}

.dark {
	background-color: #293133;
	color: #fff;
}
	
.white{
		background-color: #fff;
		color: ;
}

	.white p{
		color: #293133 !important;
}
	}

.dark h1, h2, h3, h4, h5, h6 {
	color: #afca0b;
}
	
	.white h1, h2, h3, h4, h5, h6 {
	color: #afca0b;
}
.break {
	display: block;
	height: 5px;
	background-color: #afca0b;
}

.break-text {
	display: block !important;
	background-color: #afca0b;
	height: 103px;
}

.break-text h2 {
	font-family: 'sans-serif', sans-serif;
	color: #293133 !important;
	margin-bottom: 0;
    font-size: 85px;
	padding-top: 18px;
	text-align: right;
	margin-right: 50px;
	font-weight: 900;
	letter-spacing: 0.6rem;
	opacity: 0.6;
	line-height: 0.8;
}


.carousel-control-next, .carousel-control-prev {
	color: #afca0b !important;
}

.button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 11px 47px;
    border: 5px solid #afca0b;
    border-radius: 0px;
    font-size: 20px;
    color: #ffffff;
    text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}
.button:hover,
.button:focus {
    border: 5px solid #fff;
    color: #ffffff;
    text-decoration: none;
}
.button:active {
}

#kontakt {
	color: white;
}



.header {
	padding: 0px 15px 10px 0px;
	color: #f1f1f1;
	z-index: 9999;
	position: fixed;
    width: 100%;
	background-color: rgba(41,49,51, 0.6);
	transition: background-color .4s ease-in-out;
}

.header img {
	width: 290px;
	margin-left: 10%;
	margin-top: 20px;
}

/* Page content */

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(41,49,51, 1);
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 102px;
}
.pull-right {
	float:right;
}


/* Hamburger Button */
.menu_btn {
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    user-select: none;
    position: fixed;   /* FIXIERT oben rechts */
    top: 30px;
    right: 30px;
    z-index: 10001;    /* höher als Menü */
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
}

/* Icon innerhalb des Buttons */
.menu_btn i {
    font-size: 24px;
    line-height: 1;
}




.menu {
    width: 300px;
    position: fixed;
    top: 0;
    right: -300px; /* initial versteckt */
    height: 100vh;
    background-color: rgba(41,49,51,0.95);
    z-index: 1000;  /* niedriger als Hamburger */
    overflow-y: auto; 
    transition: right 0.4s ease-in-out;
    padding-top: 130px;
    box-sizing: border-box;
}





/* Menü sichtbar */
.menu.visible {
    right: 0;
}

/* Alle Menübuttons */
.menu_button {
    display: block;
    width: 100%;
    color: white;
    text-decoration: none;
    font-weight: 500;
    padding: 20px 40px;
    text-align: right;
    line-height: 1.5em;
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
    box-sizing: border-box;
}

.menu_button:hover {
    color: #afca0b;
    background-color: rgba(255,255,255,0.05);
    cursor: pointer;
}

/* Dropdown Wrapper */
.dropdown_wrapper {
    width: 100%;
}

/* Label für Dropdown */
.dropdown_label {
    display: block;
    cursor: pointer;
    user-select: none;
    position: relative;
}

/* Pfeil links */
.dropdown_label .arrow {
    margin-right: 5px;
	margin-top: -6px;
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
    vertical-align: middle;
	color: #afca0b;
}

/* Submenu initial verstecken */
.submenu {
    max-height: 0;
    overflow: hidden;
    margin-left: 20px;
	margin-right: 30px;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease;
}

/* Submenu sichtbar wenn Checkbox aktiv */
#leistung_toggle:checked + .dropdown_label + .submenu {
    max-height: 500px;
    opacity: 1;
}

/* Pfeil drehen, leicht wackeln */
#leistung_toggle:checked + .dropdown_label .arrow {
    transform: rotate(90deg);
    animation: arrow_wiggle 0.3s ease;
}

@keyframes arrow_wiggle {
    0% { transform: rotate(90deg); }
    50% { transform: rotate(95deg); }
    100% { transform: rotate(90deg); }
}

/* Submenu Buttons */
.submenu .menu_button {
    text-align: right;
    padding-left: 25px;
    padding-right: 25px;
}

/* Touchscreen optimiert: größerer klickbereich */
.menu_button, .dropdown_label {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Scrollbar optional auf Smartphones */
.menu::-webkit-scrollbar {
    width: 6px;
}

.menu::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.3);
    border-radius: 3px;
}










#leistung_toggle:checked + .dropdown_label + .submenu {
    max-height: 500px;
    opacity: 1;
}

/* Pfeil drehen */
#leistung_toggle:checked + .dropdown_label .arrow {
    transform: rotate(90deg);
}

/* Submenu Buttons */
.submenu .menu_button {
    text-align: right;
    padding-left: 25px;
    padding-right: 25px;
}



a {
	color: #afca0b;
}
a:hover {
	color: #afca0b !important;
}


	#arbeit-img-class{
	overflow: hidden;
	margin: 0 !important;
	max-height: 220px;
	}

	#kiga-img-class{
	overflow: hidden;
	margin: 0 !important;
	max-height: 300px;
	}


#arbeit-img{
	margin: -50px;
	height: auto;
	width: 120%;
	position: relative;
	top: -100%;
}
	
	#arbeit-img-half{
		margin: -50px;
	height: auto;
	width: 120%;
	position: relative;
	top: -40%;
	}
	
	
	.border-green{border-top:3px solid #afca0b; border-bottom:5px solid #afca0b;}	
	.border-green-top{border-top:3px solid #afca0b}
	.border-green-bottom{border-bottom:3px solid #afca0b}
	.border-green-left{border-left:3px solid #afca0b}
	.border-green-right{border-right:3px solid #afca0b}
	.arbeit{margin: 70px 0;}
	

.image_rows {
max-height: 50px;
}
	
.image_text{
		top: 50%;
		font-family: 'sans-serif', sans-serif;
	}
		
			.image_text h2{font-size: 1.6rem; text-transform: uppercase;}
	
	
	
.grayscale img {
   -webkit-filter: grayscale(100%) brightness(50%);
   -moz-filter: grayscale(100%) brightness(50%);
   filter: grayscale(100%) brightness(50%);
   transition: all 0.7s ease;
   margin-left: -75px;
   min-height: 300px;
   min-width: 400px;
		 margin-top: -50px;
	cursor: zoom-in;
 } 
 
  
 .grayscale:hover .image_text { 
	 -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none;
	top: 120%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
	transition: all 0.7s ease;
	 text-align: center;
	 cursor: zoom-in;
 }
	

 .grayscale:hover {
	cursor: pointer;
 }
 
.grayscale .image_text { 
	top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
	text-align: center;
		text-shadow: 1px 1px 2px black;
	width: 80%;
 }

 .grayscale:hover img {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
 }
 
 .zoom_image:hover img {
	 transform: scale(1.05);
 }
 
 .hover_shadow {
	 transition: box-shadow 0.7s ease;
 }
 
 .hover_shadow:hover {
	 box-shadow: 0px 0px 19px 2px #f5c183;
 }
 
 .zoom_div {
	transform: scale(1.0);
}
.zoom_div:hover {
	transform: scale(1.1);
}

.img_full{
	width: 140%;
}

.arbeit_img_overlay{
	height: 100vh;
}

.arbeit_text_overlay{
	padding: 100px 80px 100px 50px !important;
	text-align: justify;
	height: 110vh;
	overflow-y: scroll;
}


.arbeit_text_overlay ul{
	padding-left: 25px;
}

	.mobile-only{display: none}
	.footer_cookie {
	z-index: 99999;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #1b2032;
  color: white;
  text-align: center;
  display: block;
	padding-top:10px;
}

	
	#snackbar, #snackbar-error {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 650px; /* Set a default minimum width */
  background-color: #afca0b; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 20px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 99; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  top: 30px; /* 30px from the bottom */
  transform: translate(-50%, 0px);
	font-size: 18px;
}

		
			#snackbar-anmeldung {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 550px; /* Set a default minimum width */
  background-color: #afca0b; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 99; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  top: 30px; /* 30px from the bottom */
  transform: translate(-50%, 0px);
	font-size: 16px;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 7s;
  animation: fadein 0.5s, fadeout 0.5s 7s;
}

#snackbar-error.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 7s;
  animation: fadein 0.5s, fadeout 0.5s 7s;
}

		#snackbar-anmeldung.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 7s;
  animation: fadein 0.5s, fadeout 0.5s 7s;
}
		
/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {top: -30px; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@keyframes fadein {
  from {top: -30px; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: -30px; opacity: 0;}
}

@keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: -30px; opacity: 0;}
}
	

		
		#zertifikat{max-height: 200px; position: relative; top: 85px; left: 100px;}
		
		.kontakt{text-align: left; 	line-height: 1.2;}
		
 @media(max-width: 767px) {
	.grayscale img {width: 140%;}
	.img_full {	width: 160%;}
	 .break-text h2{
		 font-size: 2.4rem;
		 padding-top: 40px;
		 letter-spacing: 0.4rem;
		 margin-right: 0px;
		 text-align: center;
		 line-height: 1;
	 }
	 .text-block{padding: 35px !important;}
	 .text-block-small{padding: 35px !important;}
	 h2{font-size: 2rem;}
	 .mobile-none{display: none;}
	 .mobile-only{display: block}
	 .ueberuns{padding: 35px !important; margin-left: 0%;}
	 #zertifikat{top: 10%; left: 22%}
	 #mobile-center{text-align: center; margin-top: 50px;}
	 .kontakt{text-align: center;}
	 .header img{margin-left: 30px; width: 260px; margin-top: 30px;}
	 .border-green-left{border-right:5px solid #afca0b}
	 .grayscale img{margin-top:-150px;}
	 p{text-align: left; font-size: 16px;}
	 
	 
	 	.leistung-img{
	min-height: 400px;
		}

.cataloge-img{max-width: 50%;}
	}	
		
		
		
		
		 @media(min-width: 767px) and (max-width: 992px) {
	.grayscale img {width: 140%;}
	.img_full {	width: 160%;}
	 .break-text h2{
		 font-size: 4rem;
		 padding-top: 15px;
		 letter-spacing: 0.4rem;
		 margin-right: 0px;
		 text-align: right;
		 line-height: 1;
			 }
	 .text-block{padding: 55px;}
	.text-block-small{padding: 55px;}
	 h2{font-size: 2rem;}
	 .mobile-none{display: none;}
	.mobile-only{display: block}
	 .ueberuns{padding: 35px;}
	 #zertifikat{top: 15%; left: 0%}
	 .header img{margin-left: 0px; width: 260px; margin-top: 30px;}
	.image_text h2{font-size: 1.6rem;}
			 p{text-align: left; font-size: 17px;}
	}
		
@media(min-width: 993px) and (max-width: 1200px) {
		
			
		}