/* CSS for Blog Grid */
.leistungen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 grid items per row on desktop */
    gap: 20px; /* Add some gap between grid items */
}

.leistungen-grid-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 grid items per row on desktop */
    gap: 20px; /* Add some gap between grid items */
}

/* Grid layout for tablet */
@media screen and (max-width: 768px) {
    .leistungen-grid {
        grid-template-columns: repeat(1, 1fr); /* 1 grid item per row on tablet and mobile */
    }
	  .leistungen-grid-2 {
        grid-template-columns: repeat(1, 1fr); /* 1 grid item per row on tablet and mobile */
    }
}


/* CSS for the walls grid */
.leistungen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}



/* Add styles for each grid item */
.leistungen-grid-item {
    position: relative!important;
    background-size: cover!important;
    background-position: center!important;
    height: 400px!important; /* Adjust the height as needed */
	min-height:400px!important;
	box-shadow: 0px 12px 18px -6px rgba(0,0,0,0.3);
	border-radius:20px;
/*	cursor:pointer;*/
}

/* Add overlay styles */
.leistungen-grid-overlay {
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100%!important;
    background-color: rgba(0, 0, 0, 0.25)!important; /* Adjust the overlay color and opacity as needed */
   /* display: flex!important;
    flex-direction: column!important;
    justify-content: end!important;
    align-items: center!important;
    padding: 20px!important;*/
    color: #fff!important; /* Adjust the text color for title and button */
}


.leistungen-grid-overlay {
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100%!important;
    background-color: #FF6A10!important; /* Adjust the overlay color and opacity as needed */
	/*background: linear-gradient(184deg, rgba(255,106,16,1) 0%, rgba(252,176,69,1) 100%);*/
	background: linear-gradient(180deg, #ff9c00, #fc0 55%, #fd1);
  /*  display: flex!important;
    flex-direction: column!important;
    justify-content: center!important;
    align-items: center!important;*/
    padding: 20px!important;
    color: #000!important; /* Adjust the text color for title and button */
	border-radius:20px;
}


.leistungen-grid-overlay:hover {
   background: linear-gradient(180deg, #ff9c00, #fc0 55%, #fd1)!important;
/*	background-color: #FF6A10!important;*/ /* Adjust the overlay color and opacity as needed */
   /* background-color: #f6f6f6!important;*/ /* Adjust the overlay color and opacity as needed */
/*	background: #f6f6f6!important;*/
	
}

.leistungen-grid-content {
/*border: solid 2px #fff;*/
    padding: 20px;
    margin: 10px;
   /* border-width: 10px;
    border-color: rgba(255,255,255,0.39);*/
    padding-top: 12%!important;
    padding-right: 24px!important;
    padding-bottom: 12%!important;
    padding-left: 24px!important;
    margin-top: 10px!important;
    margin-right: 10px!important;
    margin-bottom: 10px!important;
    margin-left: 10px!important;
    box-shadow: 0px 20px 60px -6px rgba(0,0,0,0.3);
    min-height: 380px;
	border-radius:20px;
}


.leistungen-grid-content:hover {
/*border: solid 10px #375F3C;*/
   /* border-width: 10px;
    border-color: #d07500;*/
box-shadow: 0px 20px 60px -6px rgba(0,0,0,0.3);
	 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transform: scale(1.01);
    transition: box-shadow 0.3s ease, transform 0.3s ease;

}

/* Add styles for the title */
.leistungen-grid-title {
    font-size: 22px!important;
    margin-bottom: 10px!important;
	color:#000!important;
	/*text-transform:uppercase;*/
	/*text-align:center;*/
	font-weight:500;
}

/* Add styles for the button */
.leistungen-grid-button {
 display: block;
    margin-top: 10px; /* Add some space between excerpt and button */
	margin-bottom:10px;
    padding: 14px 20px;
    background-color: #7F4C3F;
    color: #fff;
    text-decoration: none;
    border-radius: 0px;
    text-align: center; /* Center the text horizontally */
    border: 1px solid #375F3C;
	font-size: 16px;
	    box-shadow: 0px 12px 18px -6px rgba(0,0,0,0.3);
	width:100%;
}

/* Hover effect for the button */
.leistungen-grid-button:hover {
    /*   background-color: #f4583f;*/
   background-color: #2a3a34;
	
    color: #fff;
    border: 1px solid #2a3a34;
}


/* On tablet and mobile, display one item per row */
@media (max-width: 768px) {
    .leistungen-grid {
        grid-template-columns: 1fr!important;
    }
}

.leistungen-excerpt { 

    color: #fff;
 /*   text-align: center; *//* Center the text horizontally */
    font-size: 16px;
	min-height:80px;

}

.leistungen-content { 
/*text-align:center;*/
}

.leistungen-icon { 
width:50px;
	margin-bottom:35px;
}

/*END REFERENCE */




/* CSS for KARRIERE */
.karriere-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 grid items per row on desktop */
    gap: 20px; /* Add some gap between grid items */
}

.karriere-grid-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 grid items per row on desktop */
    gap: 20px; /* Add some gap between grid items */
}

/* Grid layout for tablet */
@media screen and (max-width: 768px) {
    .karriere-grid {
        grid-template-columns: repeat(1, 1fr); /* 1 grid item per row on tablet and mobile */
    }
	  .karriere-grid-2 {
        grid-template-columns: repeat(1, 1fr); /* 1 grid item per row on tablet and mobile */
    }
}


/* CSS for the walls grid */
.karriere-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}



/* Add styles for each grid item */
.karriere-grid-item {
    position: relative!important;
    background-size: cover!important;
    background-position: center!important;
    height: 400px!important; /* Adjust the height as needed */
	min-height:400px!important;
	box-shadow: 0px 12px 18px -6px rgba(0,0,0,0.3);
	border-radius:20px;
	cursor:pointer;
}

/* Add overlay styles */



.karriere-grid-overlay {
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100%!important;
    background-color: #FF6A10!important; /* Adjust the overlay color and opacity as needed */
	/*background: linear-gradient(184deg, rgba(255,106,16,1) 0%, rgba(252,176,69,1) 100%);*/
	/*background: linear-gradient(180deg, #ff9c00, #fc0 55%, #fd1);*/
	background-color: rgba(0, 0, 0, 0.25)!important; /* Adjust the overlay color and opacity as needed */
    display: flex!important;
    flex-direction: column!important;
    justify-content: center!important;
    align-items: center!important;
    padding: 20px!important;
    color: #000!important; /* Adjust the text color for title and button */
	border-radius:20px;
}


.karriere-grid-overlay:hover {
    
	background: linear-gradient(180deg, #ff9c00, #fc0 55%, #fd1);
	
}

.karriere-grid-content {
/*border: solid 2px #fff;*/
    padding: 20px;
    margin: 10px;
   /* border-width: 10px;
    border-color: rgba(255,255,255,0.39);*/
    padding-top: 12%!important;
    padding-right: 24px!important;
    padding-bottom: 12%!important;
    padding-left: 24px!important;
    margin-top: 10px!important;
    margin-right: 10px!important;
    margin-bottom: 10px!important;
    margin-left: 10px!important;
    box-shadow: 0px 20px 60px -6px rgba(0,0,0,0.3);
    min-height: 380px;
	border-radius:20px;
}


.karriere-grid-content:hover {
/*border: solid 10px #375F3C;*/
   /* border-width: 10px;
    border-color: #d07500;*/
box-shadow: 0px 20px 60px -6px rgba(0,0,0,0.3);
	 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transform: scale(1.01);
    transition: box-shadow 0.3s ease, transform 0.3s ease;

}

/* Add styles for the title */
.karriere-grid-title {
    font-size: 22px!important;
    margin-bottom: 10px!important;
	color:#fff!important;
	/*text-transform:uppercase;*/
	text-align:center;
	font-weight:500;
}

/* Add styles for the button */
.karriere-grid-button {
 display: block;
    margin-top: 10px; /* Add some space between excerpt and button */
	margin-bottom:10px;
    padding: 14px 20px;
    background-color: #7F4C3F;
    color: #fff;
    text-decoration: none;
    border-radius: 0px;
    text-align: center; /* Center the text horizontally */
    border: 1px solid #375F3C;
	font-size: 16px;
	    box-shadow: 0px 12px 18px -6px rgba(0,0,0,0.3);
	width:100%;
}

/* Hover effect for the button */
.karriere-grid-button:hover {
    /*   background-color: #f4583f;*/
   background-color: #2a3a34;
	
    color: #fff;
    border: 1px solid #2a3a34;
}


/* On tablet and mobile, display one item per row */
@media (max-width: 768px) {
    .karriere-grid {
        grid-template-columns: 1fr!important;
    }
}

.karriere-excerpt { 

    color: #fff;
    text-align: center; /* Center the text horizontally */
    font-size: 14px;
	min-height:80px;

}

.karriere-content { 
text-align:center;
}

.karriere-icon { 
width:50px;
	margin-bottom:10px;
}



.karriere-excerpt {
    display: none; /* Initially hide the excerpt */
}

.karriere-grid-item:hover .karriere-excerpt {
    display: block; /* Show the excerpt when the parent is hovered */
}

.karriere-grid-item:hover .karriere-grid-title {
    color:#000!important;
}

.karriere-grid-item:hover .karriere-excerpt {
    color:#000!important;
}



/*END karier */


/*PRODUKTE */

.produkte-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 3 grid items per row on desktop */
    gap: 20px; /* Add some gap between grid items */
}


/* Add styles for each grid item */
.produkte-grid-item {
	/*min-height:400px!important;*/
	box-shadow: 0px 12px 18px -6px rgba(0,0,0,0.3);
	border-radius:20px;
	/*cursor:pointer;*/

	padding:5px;
	font-size:18px;
	font-weight:300;
	color:#000;
	background: linear-gradient(180deg, #ff9c00, #fc0 55%, #fd1);
}

.produkte-grid-overlay { 
background-color:#fff;
	padding:20px;
	border-radius:20px;
}




.pages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 3 grid items per row on desktop */
    gap: 20px; /* Add some gap between grid items */
}


/* On tablet and mobile, display one item per row */
@media (max-width: 768px) {
    .pages-grid {
        grid-template-columns: 1fr!important;
    }
}




.pages-grid-button {
 display: block;
    margin-top: 10px; /* Add some space between excerpt and button */
	margin-bottom:10px;
    padding: 14px 20px;
    color: #fff;
    text-decoration: none;
     text-align: center; /* Center the text horizontally */
    border: 2px solid #fff;
	border-color: #fff;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700 !important;
    background-color: RGBA(255, 255, 255, 0);
	text-transform:uppercase;
}

/* Hover effect for the button */
.pages-grid-button:hover {
    /*   background-color: #f4583f;*/
   background-color: #ff6a10;
	
    color: #fff;
    border: 2px solid #fff;
}


.pages-grid-button {
    display: none; /* Initially hide the excerpt */
}

.karriere-grid-item:hover .pages-grid-button {
    display: block; /* Show the excerpt when the parent is hovered */
}

.produkte-grid-title h4 { 
font-size:25px;
}
h4.produkte-grid-title { 
font-size:25px;
}


/*PROCESS */

.process-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px; /* Add some gap between grid items */
    position: relative;
}

.process-grid-item {
    box-shadow: 0px 15px 80px -6px rgba(0, 0, 0, 0.3);
    transition: transform 300ms ease 0ms;
    border-radius: 0px;
   /* cursor: pointer;*/
    padding: 5px;
    font-size: 18px;
    font-weight: 300;
    color: #000;
    border: solid 2px #fff;
	background:#fff;
	border-radius:6px;
    position: relative;
	    padding: 20px;
}

.process-grid-item.even {
    margin-left: 10%;
}

.process-grid-item.odd {
    margin-right: 10%;
}

.arrow-left, .arrow-right {
    text-align: center;
    /*margin: 20px 0; *//* Space between items */
}

.arrow-left img {
    float: left;
    width: 50px; /* Adjust size as needed */
	    margin-left: 3%;
    margin-bottom: -30px;
}

.arrow-right img {
    float: right;
    width: 50px; /* Adjust size as needed */
    transform: scaleX(-1); /* Flip the image */
	    margin-right: 3%;
    margin-bottom: -30px;
}


@media (max-width: 768px) {
    .arrow-right img, .arrow-left img  {
        margin-bottom: 0px;
    }
	.arrow-right img {
    float: right;
    width: 50px;
   
    margin-right: 15%;
    transform: rotate(95deg);
}
		.arrow-left img {
    float: left;
    width: 50px;
   
    margin-left: 15%;
   transform: rotate(25deg);
}
}


.process-card { 
display: grid;
    grid-template-columns: 20% 80%; /* Two grid items per row */
    grid-column-gap: 20px; /* Adjust as needed */
}

/* Styles for the left inner grid item */
.process-card-inner-left {
    width: 100%;
	text-align:center;
}

/* Styles for the right inner grid item */
.process-card-inner-right {
    width: 100%;
    padding-top: 2%;
	padding:10px;
}


@media screen and (min-width: 981px) {
    .reverse {
        display: flex;
		flex-direction: row-reverse; 
    }
	.reverse .services-card-inner-left { 
	flex: 2;
	}
	.reverse .services-card-inner-right { 
	flex: 8;
	}
}

@media screen and (max-width: 980px) {
.process-card { 
display: grid;
    grid-template-columns: 1fr; /* Two grid items per row */
    grid-column-gap: 20px; /* Adjust as needed */
}
}

.process-image { 
object-fit:cover;
	width:140px;
	height:140px;
	border-radius:99%;
}


.blog-date { 
color:#fff;
}

.karriere-grid-item:hover .blog-date {
    display: none; /* Show the excerpt when the parent is hovered */
}



.news-taxonomy-term-title { 
margin-top:35px;
margin-bottom:10px;

}



.tax-brand-description { 
font-size:18px;
	    color: #000000;
    font-weight: 300!important;
	margin-bottom:15px;
}




.brand-tax-title h3 { 
font-weight: 700;
    font-size: 48px;
    color: #000000 !important;
    line-height: 1.2em;
}