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

html { scroll-behavior: smooth; }

body {
	/*font-family: 'Fira Sans', sans-serif;*/
	font-family: caecilia-sans-text, sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.4; 
	background-color: #6c488e;
	color: #dbd0e6;
	transition: background-color 0.75s ease;
}


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

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

h1 { font-size: 5em; letter-spacing: 0.01em; margin-top: 0; margin-bottom: 0.2em; }
h2 { font-size: 3em; margin-bottom: 2.5em; }
h3 { /*font-family: 'Fira Sans', sans-serif;*/ font-weight: 500; font-size: 1.3em; /*color: #6986F3;*/ 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: #bf9be1; width: 75%; margin: 32px 0 32px -60px; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; }

i, em { font-style: italic; }

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

.clearfix { clear: both; }

/****************************************************************************/
/* ! BG color transistions */
/****************************************************************************/
/*
.bgcolor-hero { background-color: #242049;  background-color: #27275D;}
.bgcolor-lightblue { background-color: #27275D; }
.bgcolor-darkblue { background-color: #1D1841; }
.bgcolor-highlightblue { background-color: #4A4A8D; transition: all 0.75s ease; }

body.bgcolor-highlightblue .bgcolor-highlightblue { color: #fff; }
body.bgcolor-highlightblue .bgcolor-highlightblue a:not(.button) { color: #fff; }
*/

/****************************************************************************/
/* ! 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(37, 14, 59, 1) 0%, rgba(37, 14, 59, 0.8) 28%, rgba(37, 14, 59, 0) 50%, rgba(37, 14, 59, 0) 100%);
	background: linear-gradient(rgba(37, 14, 59, 1) 0%, rgba(37, 14, 59, 0.8) 28%, rgba(37, 14, 59, 0) 50%, rgba(37, 14, 59, 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-family: caecilia, serif; font-size: 1.4em; } 
.navbar div.logo a { color: #dbd0e6; text-decoration: none; }

/*
body.bgcolor-highlightblue .navbar .navbar-bg{ background-color: rgba(145, 43, 79, 0); background-position-y: -4em; }
*/

div.menubutton, div.closebutton {
	display: none; 
	color: #dbd0e6;
	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: #fff; }
nav.topnav ul li a.logo { font-family: caecilia, serif; color: #dbd0e6; }

ul.metanav { margin: 2em 0 4em 0; }
ul.metanav li a { font-size: 12px; color: #ffaca2; }
ul.metanav li a:hover, nav.topnav ul.metanav li a.current { border-color: #dbd0e6; }

.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: #fff; 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: #4A4A8D; background-color: #803149; }
nav.subnav ul li a:hover:not(.current) { background-color: #E06969; }

.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: #5367FF; }
.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: absolute; height: auto; }
	.navbar .navbar-bg { height: 100%; background: #6c488e; }
	.navbar .navbar-container { position: relative; display: block; padding: 0 2em; }
	.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: #99adff }

	.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: #ffaca2; }
a:hover { color: #ffd2cc; }

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

a.button:hover { background-color: #E06969; /* background-color: transparent; border: 1px solid #fff; */ /* transform: translateY(-2px); */ }


@media screen and (max-width: 768px) {
	a.button { width: 50%; 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 {
	/*
	height: 100vh;
	min-height: 700px;
	max-height: 1100px;
	*/
	/*
	background: -webkit-linear-gradient(#141036 0%, #27275D 100%);
	background: linear-gradient(#141036 0%, #27275D 100%);
	*/
}

/*body:not(.bgcolor-hero) #hero { background: none; background: linear-gradient(#1D1841 0%, #1D1841 100%); }*/
#hero .hero-gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: -webkit-linear-gradient(rgba(37, 14, 59, 1) 0%, rgba(37, 14, 59, 0) 90%);
	background: linear-gradient(rgba(37, 14, 59, 1) 0%, rgba(37, 14, 59, 0) 90%);
}

#hero .hero-image {
	width: 100%;
	/*
	background: url(../images/keyvisual.png) no-repeat center center;
	background-size: cover;
	*/
	background-color: #e9daf7;
	margin-bottom: 8em;
}

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

#hero .content {
	position: relative;
	min-width: 1600px;
	height: 100%;
	padding-top: 250px;
	/*
	display: flex;
	align-items: center;
	*/
	/*
	background: url(../images/spikes01.jpg) no-repeat 55% center;
	background-size: cover;
	*/
}

#hero .content .text {
	position: relative;
	/*
	left: 50%;
	top: 34%;
	margin-left: -700px;
	*/
	left: 160px;
	width: 600px; 
}

#hero .content .text p {
	-webkit-hyphens: none;
	-moz-hyphens: none;
	hyphens: none;
}

#hero .content .text h1 { font-size: 3.6rem; margin-bottom: 1em; }
#hero .content .text .headline_loop { margin-bottom: 3em; }
#hero .content .text .headline_loop h3 { display: none; font-size: 1.3em; }

#hero #canvas-container { position: absolute; top: 0; left: 0; width: 100%; }
#hero #canvas-container canvas { width: 100%; }

.stoerer {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	background-color: #ff6450;
	color: #fff; /* #ff6c32; */
	border: none;
	padding: 5em 1em 5.5em;
	/* font-family: bebas-neue-by-fontfabric, sans-serif;
	font-weight: 700;
	font-style: normal; */
	font-family: caecilia, sans-serif;
	font-weight: 300;
	font-size: 0.9em;
	line-height: 1.4;
	text-decoration: none;
	width: 220px; height: 220px; border-radius: 50%;
	max-width: 710px;
	margin: 2em auto 0;
	overflow: hidden;
}
a.stoerer:hover { color: #fff; /* #ff6c32; */ text-decoration: underline; }
/*
.stoerer h3 { font-family: bebas-neue-by-fontfabric, sans-serif; font-weight: 700; font-style: normal; font-size: 1.0em !important; margin-bottom: 0.5em; }
*/
.stoerer h3 { display: inline-block; flex: 1 0 auto; width: 100%; font-size: 1.0em !important; text-align: center; margin-top: 0.5em; 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; }

/*#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; }
}


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

#overview, #description, #services, #about, #aboutus { min-height: 100vh; padding: 80px 0; display: flex; align-items: center;}

/*#about { min-height: 800px; padding: 180px 0; }*/

#contact { display: flex; align-items: center; min-height: 800px; min-height: 100vh; }


#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: 64px; }


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

/*
#description p { width: 80%; }
#description p:nth-child(even) { margin-left: 20%; }
#description p:nth-child(odd) { margin-left: -20%; }
*/

#services h2 { /*text-align: center;*/ margin-bottom: 1.5em; }

#services .grid { margin-bottom: 2em; }
#services .grid-content { width: 25%; padding: 0 24px; }
#services .grid-content a.button { width: 90%; }

#services .grid-content:nth-child(1) { margin-top: 80px; }
#services .grid-content:nth-child(2) { margin-top: 160px; }
#services .grid-content:nth-child(3) { margin-top: 0; }
#services .grid-content:nth-child(4) { margin-top: 120px; }


#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;
}

/* ! 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; color: #27275D; color: #fff; background: none; margin: 0; padding: 0.2em 0.5em; }
#contact a.button:hover { background-color: #E06969; color: #fff; }
.home #contact .content { text-align: center; }

/* ! page-main */

#page-main { min-height: 100vh; padding: 100px 0 150px; }
#page-main.flex { display: flex; align-items: center; }
#page-main .content { width: 100%; max-width: 700px; margin-top: 50px; }
#page-main .content:first-of-type { margin-top: 50px; }
#page-main .content:last-of-type { margin-bottom: 50px; }
.subnav-container + #page-main { padding-top: 30px; }

#page-main h1 { font-size: 2.2em; margin-bottom: 2em; }
#page-main h2 { font-size: 1.3em; line-height: 1.4; margin: 1.5em 0 1em; }
#page-main h3 { font-size: 1.3em; line-height: 1.4; margin: 1.5em 0 1em; }
#page-main h4 { font-family: caecilia-sans-text, sans-serif; font-size: 1.1em; font-weight: 700; line-height: 1.4; margin: 1.5em 0 1em; }

#intermission { display: flex; align-items: center; /*height: 100vh;*/ padding-bottom: 200px; }
#intermission .content { max-width: 700px; background-color: #27275D; background-color: rgba(58, 58, 134, 0.7); padding: 2em 3em; }
#intermission .content h2 { font-size: 1.5em; margin-bottom: 1em; }

.page-footer { position: relative; height: 80px; margin-top: -80px; padding-top: 20px; text-align: center; font-size: 0.9em; color: #bf9be1; /*background-color: rgba(0,0,0,0.2);*/ }


@media screen and (max-width: 768px)
{
	#overview h2, #services h2, #about h2, #aboutus h2 { margin: 0; }
	
	#overview, #description, #services, #about, #copy, #aboutus { padding: 100px 0; }
	#contact { height: 100vh; min-height: 0; }
	
	.grid { display: block; margin: 48px 0; }
	
	#overview .grid .grid-content, #aboutus .grid .grid-content { width: 100%; padding: 0; margin-bottom: 40px;}
	#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 .content { padding: 0 24px; }
	
	#intermission .content { width: calc(100% - 40px); }
}


/****************************************************************************/
/* ! Step by step */
/****************************************************************************/

.stepbystep-container { display: flex; align-items: center; width: 100%; min-height: 450px; background-image: url(../images/wellen_01_50@2x.png); background-size: 2400px; background-size: cover; background-repeat: no-repeat; background-position: center; }

.stepbystep { display: flex; width: 100%; min-width: 900px; max-width: 1100px; margin: 4em auto; }
.stepbystep .step { position: relative; width: 25%; margin: 0 5px; color: #fff; background-color: #27275D; background-color: rgba(58, 58, 134, 0.7); overflow: hidden; }

.stepbystep-3 .stepbystep .step { width: 33.33%; }
.stepbystep-4 .stepbystep .step { width: 25%; }

.modules .stepbystep { flex-wrap: wrap; justify-content: center; }
.modules .stepbystep .step { min-height: 13em; width: 36%; margin: 5px; }

/*
.stepbystep .step:first-child { margin-left: 0; }
.stepbystep .step:last-child { margin-right: 0; }
*/
.stepbystep .step .step-number { display: flex; position: absolute; width: 100%; height: 100%; padding: 12px 24px; justify-content: flex-end; align-items: top; font-family: caecilia, sans-serif; font-size: 5em; opacity: 0.2; }
.stepbystep .step .step-content { position: relative; padding: 24px; height: 100%; transform: translateY(50%); transform: translateY(calc(100% - 7em)); }
.stepbystep .step .step-content img { opacity: 0.8; transform-origin: 15%; transform: scale(0.9); margin-bottom: 1em; }
.stepbystep .step .step-content h4 { font-family: caecilia-sans-text, sans-serif; font-weight: 400 !important; font-size: 1.0em !important; margin: 0 0 1em !important; }
.stepbystep .step .step-content p { font-size: 0.95em; opacity: 0; transform: translateY(40px); }

.stepbystep .step:hover { background-color: #803149; }
.stepbystep .step:hover .step-number { opacity: 0; }
.stepbystep .step:hover .step-content { transform: translateY(0px); }
.stepbystep .step:hover .step-content p { opacity: 1; transform: translateY(0px); }

.stepbystep .step, .stepbystep .step-content  { transition: all 0.25s ease-out; }
.stepbystep .step-number { transition: all 0.45s ease-out; }
.stepbystep .step .step-content p { transition: all 0.35s ease-out; }

@media screen and (max-width: 900px)
{
	.stepbystep { display: block; min-width: 0; }
	.stepbystep .step, .stepbystep-3 .stepbystep .step, .stepbystep-4 .stepbystep .step { width: calc(100% - 40px); margin: 5px auto; }
	.stepbystep .step .step-number { padding-top: 6px; font-size: 4em; }
	.stepbystep .step .step-content { transform: translateY(0px); }
	.stepbystep .step .step-content p { opacity: 1; transform: translateY(0px); }
}

/****************************************************************************/
/* ! Collapsible list */
/****************************************************************************/

ul.collapsible { margin: 1.5em 0; }
ul.collapsible li { }
ul.collapsible li p { margin-bottom: 0; padding: 0 2.5em 0; height: 0; overflow: hidden; background-color: #803149; transition: all 0.2s ease-out; }
ul.collapsible li h4 { padding: 0.8em 1em 0.8em 2.5em; margin: 0.5em 0 0 !important; transition: background-color 0.25s ease-out, color 0.25s ease-out; background-image: url(../images/icon_plus.svg); background-size: 22px; background-repeat: no-repeat; background-position: 0.5em 0.85em;}
ul.collapsible li h4:hover { cursor: pointer; color: #fff; background-color: #803149; }
ul.collapsible li.expanded { color: #fff; background-color: #803149; padding-bottom: 1em; }
ul.collapsible li.expanded h4 { background-image: url(../images/icon_minus.svg); }
/*ul.collapsible li.expanded p { height: 6em; } */


/****************************************************************************/
/* ! Articles */
/****************************************************************************/

.beitrag .content { width: 90%; max-width: 640px; margin: 12em auto 10em; }
.beitrag .content h1 { font-size: 3.6em; }
.beitrag .content h2 { font-size: 2em; margin-top: 2em; margin-bottom: 1em; }
.beitrag .content h3 { font-size: 1.2em; margin-top: 1em; margin-bottom: 1em; line-height: 1.4; }
.beitrag .content audio { margin-bottom: 1em; }