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

/* poppins-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 100;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 200;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 800;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 900;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/poppins-v24-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


:root {
	--color-light-shades: #FFFFFF;
	--color-light-accent: #B0D1C5;
	--color-main-brand: #6C867D;
	--color-dark-accent: #2F4A43;
	--color-dark-shades: #282828;
	
}

.row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.section{
	padding-left: 5vw;
	padding-right: 5vw;
	padding-top: 15vh;
	padding-bottom: 15vh;
}

.headline{
	margin-top: 5vh;
	margin-bottom: 5vh;
}


@media (min-width:769px){
	.headline h2{
		font-size: 3em;
	}
}

body{
	font-family: 'Poppins';
}

h1, h2, h3, h4, h5, h6{
	font-weight: 100;
}

p{
	font-weight: 300;
	font-size: 1.1em;
	overflow-wrap: break-word;
    word-break: break-word;
}

a:hover{
	color: var(--color-dark-accent);
}

.btn-primary{
	background-color: var(--color-main-brand);
	border-color: var(--color-main-brand);
}

.btn-primary:hover{
	background-color: var(--color-dark-accent);
	border-color: var(--color-dark-accent);
}


/* HEADER VARIANTE 1 */

#headmenu1{
	padding-top: 3vh;
	display: flex;
	background-color: var(--color-light-shades);
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0);
	
}


@media (min-width:769px){
	#headmenu1{
		padding-top: 0;

	}
} 

#headmenu1 #logo{
	width: 35vw;
	float: left;
	padding: 2vh;
	padding-bottom: 0;

}


#headmenu1 #mainmenu{
	width: 65vw;
	float: left;	
	
}


@media (max-width:768px){
	#headmenu1 #logo{
		width: 60vw;
		float: left;
		padding: 2vh;
	}
	
	#headmenu1 #mainmenu{
		width: 40vw;
		float: left;	

	}	
}	 



#headmenu1 #mainmenu .container-fluid{
	justify-content: flex-end;
}


#headmenu1 .navbar{
	
}

#headmenu1 .navbar-nav{
	
}

#headmenu1 .navbar-brand{
	color: var(--color-main-brand);
}

#headmenu1 .nav-link{
	color: var(--color-main-brand);

	font-size: 1.2em;
}

#headmenu1 .nav-link:hover{
	color: var(--color-dark-accent);
}

#headmenu1 .offcanvas{
	color: var(--color-dark-shades);
	background-color: var(--color-light-shades);
	max-width: 70%;
}

#headmenu1 .offcanvas-logo{

}

#headmenu1 .offcanvas .nav-link:hover{
	color: var(--color-main-brand);	
}


#headmenu1 .offcanvas .dropdown-menu a{
	white-space: pre-wrap
}


#headmenu1 .offcanvas-logo{
	padding: 20px;

}



/* ENDE HEADER VARIANTE 1 */


/* HERO-SEKTION */
#headimage{
	position: relative;
}

#headimage .bg{
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 100%);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 100%);
}

#headimage .bg img{
	width: 100%;
	height: auto;
}

#headimage .slogan{
	position: absolute;
	top: 20vh;
	left: 10vw;
	width: 40vw;
	
}

#headimage .slogan p{
	font-weight: 100;
	font-size: 4em;
	
}

@media (max-width:1199px){
	#headimage .slogan{
		position: absolute;
		top: 10vh;
		left: 10vw;
		width: 40vw;

	}
	
	#headimage .slogan p{
		font-size: 2.8em;

	}

}

@media (max-width:768px){
	#headimage .slogan{
		position: absolute;
		top: 5vh;
		left: 10vw;
		width: 40vw;

	}
	
	#headimage .slogan p{
		font-size: 1em;

	}

}

/* ENDE HERO-SEKTION */

/* WELCOME-SEKTION */
#welcome .text{
	padding-right: 5vw;
}

#welcome .pic img{
	width: 100%;
	height: auto;
}

/* ENDE WELCOME-SEKTION */

/* KACHELN1 */
#kacheln1{
	background-color: var(--color-main-brand);
}

#kacheln1 .headline{
	text-align: center;
	color: var(--color-light-shades);
}

@media (min-width:769px){
	#kacheln1 .headline h2{
		width: 80%;
		margin-left: 10%;
	}
}

#kacheln1 .kachel-inner{
	margin: 2vw;
	padding: 2vw;
	background-color: var(--color-light-shades);
	border-radius: 10px;
	text-align: center;
}

#kacheln1 .kachel-inner img{
	width: 50%;
	height: auto;
	margin-bottom: 5vh;
	filter: invert(50%) sepia(15%) saturate(382%) hue-rotate(108deg) brightness(97%) contrast(90%);

}

/* ENDE KACHELN1 */

/* REASONS */
/*#reasons .reason-inner{
	margin: 2vw;
	padding: 2vw;
	background-color: var(--color-dark-accent);
	color: var(--color-light-shades);
	border-radius: 10px;
	text-align: center;
}

#reasons h2{
	margin-top: 1em;
}

#reasons img{
	width: 50%;
	margin-left: 25%;
	height: auto;
}

@media (max-width:991px){
	#reasons img{
		width: 100%;
		margin-left: 0;
		height: auto;
	}
	
}

*/

#reasons{
	position: relative;
	background-color: var(--color-dark-shades);
}

#reasons .bgpic{

}

#reasons .bgpic img{
	width: 100%;
	height: auto;
}

#reasons .text-outer{
	position: relative;
}

#reasons .text{
	width: 40vw;
	position: absolute;
	margin-top: -50vw;
	margin-left: 10vw;
	background-color: var(--color-light-shades);
	padding: 5vw;
	border-radius: 10px
	
}

@media (max-width:1199px){
	#reasons .text{
		width: 65vw;
		margin-left: 5vw;
		margin-top: -60vw;
	}
}

@media (max-width:999px){
	#reasons .text{
		width: 65vw;
		margin-left: 5vw;
		margin-top: -66vw;
	}
}

@media (max-width:768px){
	#reasons{
		padding-bottom: 10vw;
	}
	
	#reasons .text{
		width: 80vw;
		margin-left: 10vw;
		margin-top: -10vw;
		position: relative;
	}
}


/* ENDE REASONS */

/* ANSATZ */

#ansatz{
	position: relative;
	background-color: var(--color-dark-shades);
}

#ansatz .bgpic{

}

#ansatz .bgpic img{
	width: 100%;
	height: auto;
}

#ansatz .text-outer{
	position: relative;
}

#ansatz .text{
	width: 40vw;
	position: absolute;
	margin-top: -50vw;
	margin-left: 50vw;
	background-color: var(--color-light-shades);
	padding: 5vw;
	border-radius: 10px
	
}

@media (max-width:1199px){
	#ansatz .text{
		width: 55vw;
		margin-left: 40vw;
		margin-top: -60vw;
	}
}

@media (max-width:768px){
	#ansatz{
		padding-bottom: 10vw;
	}
	
	#ansatz .text{
		width: 80vw;
		margin-left: 10vw;
		margin-top: -10vw;
		position: relative;
	}
}


/* ENDE ANSATZ */


/* ANGEBOTE */
#angebote{
	background-color: var(--color-main-brand);
}

#angebote .headline{
	text-align: center;
	color: var(--color-light-shades);
}

#angebote .angebot .angebot-inner{
	text-align: center;
	background-color: var(--color-light-shades);
	margin: 2vw;
	padding: 2vw;
	border-radius: 10px;
}

#angebote .angebot .angebot-inner img{
	width: 60%;
	filter: invert(50%) sepia(15%) saturate(382%) hue-rotate(108deg) brightness(97%) contrast(90%);
}

/* ENDE ANGEBOTE */

/* ABOUT*/

#about .aboutsection:nth-of-type(even) .text{
	padding-right: 5vw;
	padding-bottom: 2vh;
}

#about .aboutsection:nth-of-type(odd) .text{
	padding-left: 5vw;
	padding-bottom: 2vh;
}

#about p{
	text-align: justify;
}

@media (max-width:768px){
	#about .text{
		padding-left: 0;
		padding-right: 0;
		padding-top: 2vh;
		
	}
}

#about .pic img{
	width: 100%;
	height: auto;
}

#about .aboutsection{
	padding-bottom: 3vh;
}

#about .text2{
	padding-right: 3vw;
}

/* ENDE ABOUT*/


/* REZENSIONEN */

#referenzen{
	background-color: var(--color-main-brand);
}

#referenzen .headline{
	text-align: center;
	color: var(--color-light-shades);
}

#referenzen .referenz-inner{
	margin: 2em;
	padding: 5em;
	background-color: var(--color-light-shades);
	border-radius: 10px;
	text-align: left;
	
}

#referenzen .referenz-inner .left{
	border-right: 1px solid var(--color-dark-shades);
	text-align: center;
}

#referenzen .referenz-inner .right{
	padding-left: 2em;
}

@media (max-width:991px){
	
	#referenzen .referenz-inner{
		margin: 2vw;
		padding: 2vw;

	}
	
	#referenzen .referenz-inner .left{
		border-right: 0;
		border-bottom: 1px solid var(--color-dark-shades);
		text-align: center;
		margin-bottom: 2em;
		padding-bottom: 2em;
	}

	#referenzen .referenz-inner .right{
		padding-left: 0;
		text-align: center;
	}
	
}

#referenzen .referenz-inner img{
	width: 40%;
	height: auto;
	margin-top: 5vh;
}

/* ENDE REZENSIONEN */

/* CTA */

#cta{
	background-color: var(--color-dark-accent);
}

#cta .bgpic img{
	width: 100%;
	height: auto;
}

#cta .text-outer{
	position: relative;
}

#cta .text{
	width: 45vw;
	position: absolute;
	margin-top: -35vw;
	margin-left: 7vw;
	background-color: var(--color-light-shades);
	padding: 5vw;
	border-radius: 10px
	
}

@media (max-width:1199px){
	#cta .text{
		width: 55vw;
		margin-top: -35vw;
		margin-left: 10vw;
	}
}

@media (max-width:999px){
	#cta .text{
		position: relative;
	}
}

@media (max-width:768px){
	#cta{
		padding-bottom: 10vw;
	}
	
	#cta .text{
		width: 84vw;
		margin-left: 8vw;
		margin-top: -10vw;
		position: relative;
	}
}

/* ENDE CTA */


/* FOOTER */
#footer{
	padding-top: 15vh;
	padding-bottom: 15vh;
	background-color: var(--color-dark-accent);
}

#footer .logo{
	padding: 6vw;
	padding-top: 0;
}

#footer .logo img{
	width: 100%;
	height:auto;
}
#footer .footeritems .footeritem{
	padding: 3vh;
	padding-top: 0;
} 

#footer .footeritems .footeritem h5{
	color: var(--color-light-shades);
	font-weight: 600;
}

#footer .footeritems .footeritem p{
	color: var(--color-light-shades);
	font-size: 0.9em;
}

#footer .footeritems .footeritem a{
	color: var(--color-light-shades);
	text-decoration: none;
}

#footer .footeritems .footeritem a:hover{
	text-decoration: underline;
}

/* ENDE FOOTER */