/* CSS Document */

@font-face {
	font-family: "Montserrat_light";
	src: url("Montserrat-VariableFont_wght.ttf") format("truetype");
			font-weight: 200;
			font-style: 200;
	}

@font-face {
	font-family: "Montserrat_regular";
	src: url("Montserrat-VariableFont_wght.ttf") format("truetype");
			font-weight: normal;
			font-style: normal;
	}


/* ## Schrift ############################################################################################ */
h1, h2, #navigation a, #navigation {
	font-size: 45px;
	margin-top: 0;
	font-family:"Montserrat_light", Arial , Tahoma, sans-serif;
}

p, #navigation li:last-child a, .fragen li, h3 {
	font-size:20px;
}

h2, h3 {
	margin-bottom: 0;
}

h3~p {
	margin-top: 0;
}

#slider p {
	margin-top:10%;
}

.impressum p:last-child a {
	text-transform: uppercase
}


.variabel h1, .variabel h2, #navigation.variabel a {
	font-size: clamp(1.875rem, 1.1607rem + 3.5714vw, 2.5rem);
}

.variabel p, 
#navigation.variabel li:last-child,
#navigation.variabel li:last-child a {
	font-size: clamp(0.9375rem, 0.5804rem + 1.7857vw, 1.25rem);
}

.recht h1 {
	display: block;
	text-align: center;
	margin-bottom: 25px;
}

.recht h1, .recht h3 {
	text-transform: uppercase;
}

/* ## Farben ############################################################################################ */
p.grau, h1.grau, h2.grau { 
	color: #dddee3;
} div.grau { 
	background-color: #dddee3;			
} div.grau h1, span.grau h1 {
	color: #1d2042;
} div.grau p {
	color: #4b4b4d;
}



p.orange, h1.orange, h2.orange, h3 {
	color: #de9e2c !important;
} div.orange {
	background-color: #de9e2c;
} div.orange h1, span.orange h1 {
	color: #fff;
} div.orange p {
	color: #1d2042;
}



p.blau, h1.blau, h2.blau  {
	color: #1d2042;
} div.blau, span.blau {
	background-color: #1d2042;
} div.blau h1, span.blau h1 {
	color: #de9e2c;
} div.blau p, div.blau li, div.blau li a {
	color: #fff;
}



/* ## CSS ############################################################################################ */

div, a, span { box-sizing:border-box; }


body {
	font-family:"Montserrat_regular", Arial , Tahoma, sans-serif;
	margin: 0;
	padding: 0;
	height: 100%;
	hyphens: auto;
	width: 100%;
	min-width:320px;
	background-color: #dddee3;
	
}

#wrap {
	width:100%;
	
}

.abstandmobile {
	background-color: #dddee3;
}

.buehne {
	position: relative;
	/*z-index:5;*/
	width: 100% !important;
	max-width: 1640px;
	min-width: 320px;
	margin: 0 auto;
}

/*.buehne2 {
	position: relative;
	width: 100%;
	max-width: 1640px;
	margin: 0 auto;
	outline: 2px dotted red;
}*/

.ghost, .header {
	margin:40px auto 0 auto;
	width: 100%;
	min-height: 20px;
	aspect-ratio: 209 / 100;
	max-width: 1640px;
	min-width: 320px;
	position: relative;
}


.home {
	background:url("../bilder/header_start.jpg") center center no-repeat;
}

.imp {
	background:url("../bilder/header_impressum.jpg") center center no-repeat;
}

.datenschutz {
	background:url("../bilder/header_datenschutz.jpg") center center no-repeat;
}

.header {
	position: fixed;
	top:0;
	left: 50%;
	transform: translateX(-50%);
	
	transition: all 0.2s;
	
	background-size: cover ;
}



.headerbox {
	position: absolute;
	z-index: 5;
	margin-top: 12%;
	left: 0px;
	right: 50%;
	padding: 5%;
}


#navigation a, #navigation {
	text-decoration: none;
	line-height: 80%;
}

.headerbox h1 {
	display: block;
	max-width: 500px;
	margin: 0 14% 6% auto;
}

.leistungen h1 {
	
}

.headerbox p {
	display: block;
	padding: 0;
	margin: 0 14% 0 auto;
	max-width: 500px;
}

.leistungen p {
	
}

.logo {	
	width: 96%;
	height: 96%;
	margin:2%;
	background: url("../bilder/logo_foodtrendconsulting_header.png") center center no-repeat;
	background-size: cover;
}

.leistungen {
	text-align: center;
	padding: 5%;
}

#open {
	display: block;
	position: sticky;
	top:0;
	right:0;
	margin:5%;
	width:50px;
	height:29px;
	background: url("../bilder/burger.gif") center center no-repeat;
	float: right;
	cursor: pointer;
}


#close, #navigation span {
	display: block;
	position:relative;
	width: 38px;
	height: 37px;
	margin:2% !important;
}


#close {	
	background: url("../bilder/close.png") center center no-repeat;
	cursor: pointer;
}


#navigation {
	display: none;
	flex-direction: row;
	justify-content: space-between;
    position: relative;	
    z-index: 10;
    width: 98%;
    height: 96%;
    top: 2%;
	left: 50%;
	transform: translateX(-50%);
}

#navigation ul, #navigation li {
	padding:0;
	list-style-type: none;
	list-style-position: inside;
}

#navigation ul {
	margin:0;
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content:center;
	align-items:center;
}

#navigation li {
	display: inline;
	text-align: center;
	font-size:0;
	margin-bottom: 3%;
}

#navigation li:last-child {
	margin-top:5%;
	margin-bottom: 0%;
}


.trendbericht {
	position: relative;
	padding-top:2%;
}

.deko {
	visibility: visible;
	display:block;
	position: absolute;
	background-color: #fff;
	top:0px;
	left:30%;
	right:-2%;
	bottom:0px;
}

.fragen {
	width:100%;
	max-width: 1640px;
	min-width: 320px;
	position: relative;
	z-index:50;
	font-size:0;
	margin: 0 auto;
	padding-top: 5%;
}


.fragen div:first-child {
	position: relative;
	width:60%;
	max-width:950px;
	padding:3% 20% 3% 3%;
	aspect-ratio: 10/7;	
	text-align: left;
}

.fragen div:last-child {
	position: absolute;
	width: 50%;
	right: 0;
	bottom: 0;
}

.fragen div:last-child img {
	width:100%;
	height: auto;
}

.fragen h1 {
	
}

.fragen ul li {
	
}

.fragen ul {
	display: block;
    margin-left: 0;
    padding-left: 15px;
}

.fragen li {
	list-style-type: '- ';
	hyphens: auto;
	margin-left: 0px;
}

.whoiam {
	position: relative;
	z-index:50;
	padding: 5%;
	text-align: center;
}
	
.whoiam h1{
	
}
	
.whoiam p {
	
}


.rootsbilder {
	width:100%;
	max-width: 1640px;
	min-width: 320px;
	position: relative;
	z-index:50;
	font-size:0;
	margin: 0 auto;
}

.rootsbilder div:first-child {
	position: absolute;
    width: 40%;
    right: 0;
    z-index: 52;
    margin-top: -3%;
    margin-right: 5%;
}


.rootsbilder div:last-child {
	position: relative;
	width:60%;
	top:0;
	left:0;
	z-index:51;
}


.rootsbilder div img {
	width:100%;
	height: auto;
}

.keinabstandoben {
	margin-top:0;
	padding-top:0;
}

.roots {
	padding:5%;
	text-align: center;
}

.roots h1, .roots p {
	
}

#slider {
	position: relative;
	/*padding-bottom: 5%;*/
}

.abstand {
	visibility: visible;
    width: 5%;
    aspect-ratio: 1/1;
	/*display:none;*/
}

#slider div:nth-child(1) {
	display:block;
	position: relative;
	padding:5%;
	width:60%;
	margin-left:40%;
	aspect-ratio: 10/7;
}

#slider div:nth-child(2) {
	font-size:0;
	line-height: 0;
	position: absolute;
    z-index: 60;
    top: 35%;
	left: 0;
    right: 20%;
    bottom: 10%;
    visibility: visible;
	overflow: hidden;
}

#slider div:nth-child(3) {
	display: inline-block;
}

#slider ul {
	display:inline-block;
	white-space: nowrap;
	margin: 0;
	padding: 0;
	transition: 2s all;
}

#slider li {
	display: inline-block;
	position:relative;
	height:100%;
	aspect-ratio: 1/1;
	margin-right: 25px;
	font-size:20px;
	line-height:100%;
	background-size: cover;
}

#slider div:nth-child(3) a {
	display: inline-block;
	width:25px;
	height:25px;
	background-color: #de9e2c;
	margin-right:25px;
	
	cursor: pointer;
	
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}

#slider li a {
	text-decoration: none;
	position:relative;
	z-index:100;
	display: block;
	width:80%;
	aspect-ratio:1/1;
	margin:-90% 10% 10% 10%;
	background-color:rgba(29,32,66,0.7);
	text-align: center;
	vertical-align: middle;
}



#slider li span {
	margin:0;
	display:inline-block;
	position:absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width:auto;
	aspect-ratio: unset;
	background-color: unset;
}

#slider li img {
	width:100%;
	height:auto;
}

.impressum {
	padding: 5%;
	position: relative;
	text-align: center;
}

.impressum p {
	margin-bottom: 5%M
}

.impressum a.instagram {
	width:40px;
	height:40px;
	background: url("../bilder/icon_instagram.png") center center no-repeat;
	background-size: cover;
	visibility: visible;
	display: block;
	margin: 5% auto;
}

.impressum p a {
	color: #fff;
	text-decoration: none;
}

.recht p a {
	color: #4b4b4d;
	text-decoration: none;
}

.logo_abbinder {
	width:100%;
	height:auto;
	max-width:641px;
	margin: 5% 0;
}

.recht {
	padding: 5%;
}

@media only screen and (max-width: 1950px) { 
	.headerbox{ margin-top: 14%; }
}

@media only screen and (max-width: 1800px) { 
	.headerbox{ margin-top: 15%; }
	
	.rootsbilder div:last-child {
		margin-top: -2%;
	}
}

@media only screen and (max-width: 900px) { 
	
	#slider div:nth-child(1) {
		width:96%;
		margin-left:2%;
		aspect-ratio: 10/5;
	}
	
	#slider div:nth-child(2) {
   		top: 25%;
    	left: 7.5%;
    	right: 7.5%;
    	bottom: 20%;
	}
	
	#slider div:nth-child(3) {
    	display: block;
    	margin-top: 20%;
    	text-align: center;
    	/*padding-bottom: 5%;*/
	}
	
	#navigation li {
		margin-bottom: 0%;
	}
	
	.fragen {
		position: static;
		margin-top: 0%;
	}


	.fragen div:first-child {
		position: relative;
		width:100%;
		padding:5%;
		aspect-ratio: unset;
		text-align: left;
	}
	
	.fragen div:last-child {
		position: relative;
		width: 100%;
	}	
	
	.fragen h1 br {
		display: none;
	}
	
	.rootsbilder div:last-child {
		width:100%;
		padding-top:30%;
	}
	
	#slider br {
		display: none;
	}
} 

@media only screen and (max-width: 600px) { 
	
	.buehne {
		/*position: absolute;
		left:0;
		right:0;*/
	}
	
	.abstandmobile {
		/*padding: 0 2%;*/
	}

	.logo_abbinder {
		width:80%;
	}

	
.variabel h1, #navigation.variabel a {
		font-size: 30px;
}

.variabel p, 
#navigation.variabel li:last-child,
#navigation.variabel li:last-child a {
	font-size: 15px;
}
	
	#navigation li {
		margin-bottom: 5%;
	}
	
	
	.ghost, .header {
		transition: all 0.2s;
		aspect-ratio: 100 / 112;
		margin-top:0;
		/*position: relative;*/
	}
	
	.header {
		background-position: 60% center;
	}
	
	.logo {
		background: url("../bilder/logo_foodtrendconsulting.png") 15% 5% no-repeat;
		background-size: 50%;
	}
	
	.headerbox {
		right: 7%;
		margin-top: 55%;
	}
	
	.headerbox br {
		display:none;
	}
	
	.headerbox h1 {
		margin: 0 5% 6% auto;
	}

	.headerbox p {
		margin: 0 5% 0 auto;
	}
	
	
} 

@media only screen and (max-width: 400px) { 
	
	#close, #navigation span {
		margin: 5%;
		width: 19px;
		height: 19px;
		background-size: contain;
	}
	
	#open {
		margin: 5%;
		width: 25px;
		height: 15px;
		background-size: contain;
	}
	
	#slider div:nth-child(2) {
   		top: 38%;
    	left: 7.5%;
    	right: 7.5%;
    	bottom: 13%;
	}
	
	#slider div:nth-child(3) {
    	margin-top: 20%;
	}
	
	h1, h2, #navigation a, #navigation {
	font-size: 20px;
	margin-top: 0;
	font-family:"Montserrat_light", Arial , Tahoma, sans-serif;
}

p, #navigation li:last-child a, .fragen li, h3 {
	font-size:10px;
}


.variabel h1, .variabel h2, #navigation.variabel a {
	font-size:20px;
	/*font-size: 1.5625rem;
	font-size: clamp(1.5625rem, 1.1865601503759398rem + 1.879699248120301vw, 3.125rem);*/
}

.variabel p, 
#navigation.variabel li:last-child,
#navigation.variabel li:last-child a {
	font-size:10px;
	/*font-size: 0.625rem;
	font-size: clamp(0.625rem, 0.3994360902255639rem + 1.1278195488721805vw, 1.5625rem);*/
}


}