:root {
	--col-background: #874d2a;
	--col-text: #f5e8df;
	--col-text-secondary: #ffb599;
	--col-text-tertiary: #facc89;
	--col-secondary: #ff7844;
	--col-secondary-active: #ff5918;
}

html * { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	/*font-family: caecilia-sans-text, sans-serif;*/
	font-family: Chivo, sans-serif;
	font-weight: 200;
	font-style: normal;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.4; 
	background-color: var(--col-background);
	color: var(--col-text);
	/*transition: background-color 0.75s ease;*/
}


/****************************************************************************
 * Typography
 ****************************************************************************/

h1, h2, h3, h4 {
	/*font-family: caecilia, sans-serif;*/
	font-weight: 500;
	font-style: normal;
	line-height: 1.1;
	clear: both;
	/*
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	*/
}

h1 { font-size: 3em; letter-spacing: -0.02em; margin-top: 0; margin-bottom: 1em; line-height: 1; }
h2 { font-size: 3em; letter-spacing: -0.015em; margin-bottom: 1.5em; }
h3 { font-weight: 500; font-size: 1.3em; margin-bottom: 1em; }
h4 { font-size: 3em; margin-bottom: 1em; }

p {
	margin-bottom: 16px;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

p.large {
	font-size: 22px;
	color: var(--col-text-tertiary);
	width: 75%;
	margin: 32px 0 32px -60px;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	hyphens: none;
}

i, em { font-style: italic; }

.centered { text-align: center; }

@media screen and (max-width: 900px) {
	h1 { font-size: 4em; }
	h2 { font-size: 3em; }
	p.large { width: inherit; margin: 2em 0; }
}

.clearfix { clear: both; }


/****************************************************************************/
/* ! Nav */
/****************************************************************************/

.navbar {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 7em;
}

.navbar .navbar-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: -webkit-linear-gradient(rgba(69, 42, 22, 1) 0%, rgba(69, 42, 22, 0.8) 28%, rgba(69, 42, 22, 0) 50%, rgba(69, 42, 22, 0) 100%);
	background: linear-gradient(rgba(69, 42, 22, 1) 0%, rgba(69, 42, 22, 0.8) 28%, rgba(69, 42, 22, 0) 50%, rgba(69, 42, 22, 0) 100%);
	background-size: 100% 14em;
	transition: background-position 0.5s ease;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-transform: translate3d(0,0,0);
}

.navbar .navbar-container { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 100px; }

.navbar div.logo { position: relative; padding-top: 24px; padding-bottom: 8px; margin-right: 3em; font-weight: 400; font-size: 1.4em; } 
.navbar div.logo a { color: var(--col-text-tertiary); text-decoration: none; }


div.menubutton, div.closebutton {
	display: none; 
	color: var(--col-text);
	position: absolute;
	top: 0px;
	right: 12px;
	z-index: 1000;
	padding: 20px;
	font-size: 24px;
	cursor: pointer;
}

nav.topnav {
}

nav.topnav ul { list-style-type: none; margin: 28px 0 0 0; float: left; }
nav.topnav ul li { display: block; float: left; margin: 0 0.6em; }
nav.topnav ul li:first-child { margin-left: -1em; }
nav.topnav ul li a { font-size: 15px; color: #fff; text-decoration: none; padding: 0.2em 0.6em; cursor: pointer; border-bottom: 1px solid rgba(255, 18, 125, 0); transition: border-color 0.2s ease-out; }
nav.topnav ul li a:hover, nav.topnav ul li a.current { border-bottom: 1px solid #ff127d; border-color: var(--col-text); }
nav.topnav ul li a.logo { font-family: caecilia, serif; color: var(--col-text-secondary); }

ul.metanav { list-style-type: none; margin: 2em 0 4em 0; }
ul.metanav li { display: inline-block; margin: 0 1rem;}
ul.metanav li a { font-size: inherit; color: var(--col-text-secondary); }
ul.metanav li a:hover, nav.topnav ul.metanav li a.current { border-color: var(--col-text-secondary); }

.test { width: 100%; background-color: fuchsia; }

.subnav-container { display: block; width: 100%; margin-top: 150px; }
nav.subnav { width: 100%; max-width: 700px; margin: 0 auto; }
nav.subnav ul { display: flex; }
nav.subnav ul li { display: inline-block; width: 25%; margin: 0 3px; }
nav.subnav ul li:first-child { margin-left: 0; }
nav.subnav ul li a { display: inline-block; width: 100%; font-size: 12px; color: var(--col-text); text-align: center; text-decoration: none; padding: 8px 24px; background-color: rgba(58, 58, 134, 0.7); cursor: pointer; transition: all 0.2s ease-out; }
/*
nav.subnav ul li:first-child a { border-top-left-radius: 4px; border-bottom-left-radius: 4px;  }
nav.subnav ul li:last-child a { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
*/
nav.subnav ul li a.current { background-color: var(--col-background); }
nav.subnav ul li a:hover:not(.current) { background-color: var(--col-secondary); }

.pagenav { width: 100%; height: 40px; max-width: 700px; margin: 100px auto 0; display: none; }
.pagenav .page-previous, .pagenav .page-next { display: inline-block;  vertical-align: middle; width: 49%; padding: 0 5px; }
.pagenav .page-previous { text-align: right; }
.pagenav a { font-size: 0.9em; text-decoration: none; transition: all 0.3s cubic-bezier(.2,.81,.44,1); }
.pagenav a span.button { display: inline-block; text-align: center; vertical-align: middle; width: 40px; height: 40px; border-radius: 6px; color: #fff; background-color: #3535F8; transition: all 0.3s cubic-bezier(.2,.81,.44,1);}
.pagenav .page-previous span { margin-left: 1em; }
.pagenav .page-next span { margin-right: 1em; }
.pagenav img { height: 18px; margin-top: 11px; margin-left: 2px;}
.pagenav .page-previous img { margin-left: 0; margin-right: 2px; }
.pagenav a:hover span.button { color: #ddd; background-color: var(--col-secondary); }
.pagenav span.inactive { display: inline-block; text-align: center; vertical-align: middle; width: 40px; height: 40px; border-radius: 6px; color: #fff; background-color: #4361c4;  opacity: 0.3; }
.pagenav span.inactive img { }

@media screen and (max-width: 1100px)
{
	.navbar { position: relative; height: auto; }
	.navbar .navbar-bg { height: 100%; background: var(--col-background); }
	.navbar .navbar-container { position: relative; display: block; padding: 0 24px; }
	.navbar nav.topnav { display: none; }
	.navbar div.menubutton { display: block; }
	.navbar div.closebutton { display: none; }
	
	nav.topnav ul { float: none; margin: 0 0 2em 0; }
	nav.topnav ul li { float: none; margin: 0 !important; padding: 0.5em 0; }
	nav.topnav ul li a.current { border: none; color: var(--col-secondary); }

	.subnav-container { margin-top: 50px; }
}

@media screen and (max-width: 768px)
{
	nav.subnav { max-width: none; }
	nav.subnav ul li { width: 49%; }
}

@media screen and (min-width: 1101px) { .topnav { display: block !important; } }

/* Links, Buttons etc. */

a { color: var(--col-text-secondary); }
a:hover { color: var(--col-secondary); }

a.button {
	display: inline-block;
	margin: 24px 0;
	padding: 0.5em 2em;
	/* background-color: #3535F8; */
	background-color: var(--col-secondary);
	/*border: 1px solid #3535F8;*/
	color: white;
	/*font-size: 14px;*/
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s cubic-bezier(.2,.81,.44,1);
	/*border-radius: 6px;*/
	text-align: center;
	
	/*display: none;*/
}

a.button:hover { background-color: var(--col-secondary-active); transform: translateY(-2px); */ }


@media screen and (max-width: 768px) {
	a.button { display: inline-block; min-width: 60%; margin-top: 0; }
}



/****************************************************************************/
/* ! Sections */
/****************************************************************************/


section { position: relative; overflow: hidden; }

.content { position: relative; width: 100%; margin: 0 auto; }

.grid { display: flex; flex-wrap: wrap; width: 100%; }


#hero .hero-image {
	width: 100%;
	background-color: var(--col-text);
}

#hero .hero-image img { width: 100%; }

.stoerer {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	background-color: var(--col-secondary);
	color: white;
	border: none;
	padding: 0;
	font-weight: 500;
	font-size: 1.2em;
	line-height: 1.4;
	text-decoration: none;
	width: 260px; height: 260px; border-radius: 50%;
	max-width: 710px;
	margin: 2em auto 0;
	overflow: hidden;
}
a.stoerer:hover { color: white; background-color: var(--col-secondary-active); /* #ff6c32; */ text-decoration: underline; }
.stoerer h3 { display: inline-block; flex: 1 0 auto; width: 100%; font-size: 1.0em !important; text-align: center; margin-top: 0; margin-bottom: 0.5em; }
.stoerer p { display: inline-block; flex: 1 0 auto; width: 100%; font-size: 1.0em !important; text-align: center; margin-bottom: 0; }

.stoerer.klein {
	position: absolute;
	width: 180px;
	height: 180px;
	right: 10%; top: 0; margin: auto; 
	font-size: 1em;
	transform: rotate(15deg);
	z-index: 1;
}
/*#hero .stoerer { position: absolute; right: 8%; bottom: 15%; margin: auto; }*/


@media screen and (max-width: 1030px)
{
	#hero { height:  auto; min-height: 0; max-height: none; }
	#hero .stoerer { position: relative; /*width: 90%; max-width: 540px; */ width: 210px; height: 210px; left: auto; right: auto; bottom: auto; top: auto; margin: 4em auto; font-size: 0.85em; }
}

@media screen and (max-width: 768px) {
	#hero .content { height: auto; width: 100%; min-width: 0; /* background: url(../images/spikes01hoch.jpg); background-size: cover; background-position: 50% 65%; */ }
	#hero .content .text { width: 80%; left: auto; margin: 0 auto; }
	#hero .content .text .headline_loop h3 { font-size: 2.5em; }
	#hero .stoerer { left: auto; margin: 2em auto; }
	.stoerer.klein {
		right: 5%;
		top: 0px;
		width: 110px;
		height: 110px;
		font-size: 0.7rem;
	}
}


/* section { background-color: transparent !important; } */
/* section { outline: 3px solid #ff33ff; } */

#intro, #overview, #description, #services, #about, #aboutus, #contact {
	padding: 6rem 0;
	display: flex;
	align-items: center;
}



#intro .content,
#overview .content,
#description .content,
#services .content,
#about .content,
#aboutus .content {
	max-width: 1200px;
	padding: 0 20px;
}

#overview h2,
#aboutus h2,
#services h2,
#about h2 { margin: 0 24px; }

#overview h2,
#aboutus h2 { margin-bottom: 2em; }
#overview .grid { }
#overview .grid-content,
#aboutus .grid-content { width: 33%; padding: 0 24px; margin-bottom: 24px; }

#intro .content {
	max-width: 700px;
	padding-top: 3rem;
	text-align: center;
}

#intro .content p {
	font-size: 1.2em;
}


#description .content { max-width: 700px; }



#about .content {
	height: 100%;
	max-width: 1200px;
}

#about .about-text { width: 50%; padding: 0 24px; float: left; }
#about .about-text:nth-of-type(1) { padding-left: 24px; } 
#about .about-text:nth-of-type(2) { padding-right: 24px; float: right; }

#about img {
	clear: both;
	display: block;
	position: relative;
	margin: 5em auto 5em;
	padding: 0 24px;
	max-width: 100%;
	height: auto;
}

.logos-foerderer {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 3rem;
}
.logos-foerderer img {
	
}

/* ! Contact */

#contact .content { width: 100%; max-width: 700px; padding: 0 20px; }
#contact h2 { font-size: 2.2em; margin-bottom: 2em; }
#contact h3 { font-size: 1.5em; }
#contact p { font-size: 1.2em; }
#contact a.button { width: auto; font-size: 1em; font-weight: 400; /*border: 1px solid #fff;*/ text-decoration: none; margin: 0; padding: 0.2em 0.5em; }
#contact a.button:hover {  }
.home #contact .content { text-align: center; }


#page-main {
	margin: 8rem 0 8rem;
}

#page-main .content {
	width: 100%;
	max-width: 700px;
	padding: 0 20px;
}

#page-main .content h2 {
	margin: 1.5em 0 0.5em;
	font-size: 2rem;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

.page-footer {
	position: relative;
	padding: 20px 0;
	text-align: center;
	font-size: 1em;
}


@media screen and (max-width: 768px)
{
	#overview h2, #services h2, #about h2, #aboutus h2 { margin: 0; }
	
	#intro, #overview, #description, #services, #about, #copy, #aboutus { padding: 100px 0; }
	#description .content { max-width: none; }
	#contact { min-height: 0; }
	
	.grid { display: block; margin: 24px 0; }
	
	#overview .grid .grid-content, #aboutus .grid .grid-content { width: 100%; padding: 0; margin-bottom: 32px;}
	#services .grid .grid-content { width: 100%; padding: 0; margin-top: 0 !important; margin-bottom: 40px;}
	
	#about h2 { margin-bottom: 1em; }
	#about img { padding: 0; margin: 4em auto; }
	#about .about-text { float: none !important; width: 100%; max-width: none; padding: 0 !important; transform: none !important; margin-bottom: 3em; }
	
	#page-main {
		margin: 4rem 0 6rem;
	}
	#page-main .content { padding: 0 24px; }
	
	#intermission .content { width: calc(100% - 40px); }
}