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

* {-webkit-font-smoothing: antialiased;}

/* 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: #f8f7f7;
	--color-dark-shades: #000000;
	--color-light-accent: #879793;
	--color-dark-accent: #778c78;
	--color-main-brand: #0D8116;
	
}

.mainbrand{
	background-color: var(--color-main-brand);
}

.mainbrand-text{
	color: var(--color-main-brand);
}

.light-shades{
	background-color: var(--color-light-shades);
}

.dark-shades{
	background-color: var(--color-dark-shades);
}

.light-accent{
	background-color: var(--color-light-accent);
}

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

.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));

}

.btn{
	margin-top: 5vh;
}

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

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

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

.loweropacity{
	opacity: 0.7;
}

.headline{
	margin-bottom: 5vh;
}

.section{
	padding: 10vh;
}

#backbutton{
	padding-top: 0;
}

@media only screen and (max-width: 900px) {
	.section{
		padding: 2vh;
	}
}

body{
	font-family: "Poppins";
}

h1{
	font-family: 'Poppins';
	font-size: 4em;
	font-weight: 100;

}

h2{
	font-family: 'Poppins';
	font-size: 2.5em !important;
	font-weight: 200 !important;

}

@media only screen and (max-width: 768px){

	h2{
		font-size: 2em !important;
	}
}

	



@keyframes headertransform {
   to {
     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);  
   }
}

#header{
	animation: headertransform 0.2s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
	background-color: #fff;
    animation-iteration-count: 1;
    animation-fill-mode: both;
	
}

@keyframes logotransform {
   to {
     width: 9vw;
	 padding: 2vh;
   }
}

@keyframes logotransform2 {
   to {
     width: 29vw;
	 padding: 2vh;
   }
}

#logo{
	padding: 2vh;
	padding-bottom: 0;
	width: 9vw;
	
	animation: logotransform 0.2s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);

    animation-iteration-count: 1;
    animation-fill-mode: both;
}

@media only screen and (max-width: 900px) {
	#logo{
		padding: 5vh;
		padding-bottom: 0;
		width: 39vw;

		animation: logotransform2 0.2s linear infinite;
		animation-play-state: paused;
		animation-delay: calc(var(--scroll) * -1s);

		animation-iteration-count: 1;
		animation-fill-mode: both;
	}
	
}

#logo img{
	width: 100%;
}

@keyframes menutransform {
   to {
     width: 89vw;
   }
}

@keyframes menutransform2 {
   to {
     width: 69vw;
   }
}


#menu{
	width: 90vw;
	padding: 2vh;
	
	animation: menutransform 0.2s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);

    animation-iteration-count: 1;
    animation-fill-mode: both;
}

@media only screen and (max-width: 900px) {
	#menu{
		width: 60vw;
		padding: 2vh;

		animation: menutransform2 0.2s linear infinite;
		animation-play-state: paused;
		animation-delay: calc(var(--scroll) * -1s);

		animation-iteration-count: 1;
		animation-fill-mode: both;
	}
		
}

#header2{
	 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);  
}

#logo2{
	width: 9vw;
	padding: 2vh;
}

#logo2 img{
	width: 100%;
}

#menu2{
	width: 90vw;
	padding: 2vh;
}


@media only screen and (max-width: 900px) {
	#logo2{
		width: 29vw;
		padding: 2vh;
	}
	#menu2{
		width: 70vw;
		padding: 2vh;
	}
	
}

#headpic{

}

#headpic img{
	width: 100%;
	height: auto;
	
}

#headpic #headpic-headline{
	padding: 5vw;
	
}

#headpic h1{
	font-family: 'Poppins';
	font-size: 4em;
	font-weight: 100;

}
#headpic h2{
	font-family: 'Poppins';
	font-size: 1.3em !important;
	font-weight: 200;

}

@media only screen and (max-width: 768px){
	#headpic h1{
		font-size: 2em;

	}
	#headpic h2{
		font-size: 1em !important;

	}
}

#problem .text{
	padding-right: 2vw;
}

#loesung .text{
	padding-left: 2vw;
}

#pakete .headline{
	padding: 5vw;
	border-radius: 10px;
	margin-bottom: 5vh;
}

#pakete .paket{
	position: relative;
	border-radius: 10px;
	-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);
	padding: 5vh;
	padding-bottom: 15vh;
	margin: 2vh;
}


#pakete .paket h3{
	text-align: center;
}

#pakete .paket h4{
	text-align: center;
	aspect-ratio: 1/1;
	width: 30%;
	margin-left: 35%;
	background-color: var(--color-main-brand);
	color: var(--color-light-shades);
	border-radius: 50%;
	
	display: flex;
	align-items: center;     /* vertikale Zentrierung */
	justify-content: center; /* horizontale Zentrierung */
	
	margin-top: 5vh;
	margin-bottom: 5vh;
}

#pakete .paket .btn{
	position: absolute;
	bottom: 5vh;
}

#projekte{
	
}

#projekte .projekt{
	margin: 2vh;
}

#projekte .projekt img{
	width: 100%;
	height: auto;
}

#kundenstimmen h2{
	color: var(--color-light-shades);
}

#kundenstimmen .headline{
	margin-bottom: 5vh;
}

#kundenstimmen .kundenstimme{
	position: relative;
	border-radius: 10px;
	-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);
	padding: 5vh;
	margin: 2vh;
	margin-top: 10vh;
}

#kundenstimmen .kundenstimme .kundenbild{
	border-radius: 50%;
	position: relative;
	top: -12vh;

}

#kundenstimmen .kundenstimme .kundenbild img{
	width: 100%;
	height: auto;
	border-radius: 50%;
}

#kundenstimmen .kundenstimme .kundentext{
	margin-top: -10vh;
}

#kundenstimmen .kundenstimme .kundentext img{
	filter: invert(81%) sepia(46%) saturate(2247%) hue-rotate(352deg) brightness(100%) contrast(103%);
	margin-bottom: 2vh;
}

#schritte .schritt{
	text-align: center;
	margin: 2vh;
	padding: 2vh;
	border-radius: 10px;
	-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);
	color: var(--color-light-shades);
}

#schritte .schritt h2{
	font-size: 4em !important;
	margin: 2vh;
	font-weight: 700 !important;
}


/* FOOTER */

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

#footer a:hover{
	color: var(--color-main-brand);
}

#footer h4{
	opacity: .6;
}

#footerlogo img{
	margin-left: 60%;
	width: 40%;
	height: auto;
	
}

@media (max-width:768px){
	#footerlogo img{
		width: 100%;
		margin: 0;
		padding: 10%;
		height: auto;

}

}

#footer #kontakt .kontaktitem{
	margin-top: 2vh;
}

#footer #kontakt .pic{
	filter: invert(13%) sepia(100%) saturate(5008%) hue-rotate(143deg) brightness(100%) contrast(90%);
}

#footer #kontakt .text{
	font-size: 1.8em; 
	font-weight: 700;
	margin-left: 1vw;
}

@media (max-width:768px){
	#footer #kontakt .text{
		font-size: 1.2em; 
	}
}

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


#footer .footeritem{
	margin-top: 10vh;
}

#footer .trenner{
	margin-top: 10vh;
}

#footer #footersocials{
	
}

#footer #footersocials img{
	width: 25%;
	height: auto;
	float: left;

}

#footer #footerimprint{
	text-align: right;
	
}

#footer #footerimprint a{
	padding-right: 1vw;
	padding-left: 1vw;
	border-right: 1px solid var(--color-dark-shades);
	color: var(--color-dark-shades);
	
}

#footer #footerimprint a:last-of-type{

	border: none;
	
}

#footer .footer-navitem{
	list-style-type: none;
	float: right;
	
}


@media (max-width:768px){

	
	#footer #footersocials{
		margin-top: 5vh;
	}
	
	#footer #footerimprint{
		margin-top: 5vh;
	}
}

/* ENDE FOOTER */