@charset "utf-8";
@font-face {
	font-family: 'Open Sans';
	src: url(../fonts/Open_Sans/OpenSans-Regular.ttf);
}
* { box-sizing:border-box; }
h1 { font-size:1.5rem; letter-spacing:.1rem; font-variant: small-caps; }
h2 { font-size:1.2rem; letter-spacing:.1rem; font-variant: small-caps; }
h3 { font-size:1.0rem; letter-spacing:.1rem; }
p { margin: 0 0 1.0rem 0; }
li { margin:0 0 1rem 0;}
a { text-decoration:none; color:rgb(23, 52, 135); font-weight: bold;}
a:hover { text-decoration:underline; }
img, video, figure { max-width:100%; height:auto; }
figure { margin:0 0 1rem 0; }
figcaption {font-size:90%;}
figure.video { display:flex; }
figure.video video {margin:0 4rem 0 0; }

button { padding:1rem; margin:1rem; background:transparent; border:1px solid black; border-radius: 4px;}
button:hover { cursor:pointer;}
dt {float:left; font-weight: bold; margin-right:.5rem;}
dd { margin:0 0 .4rem 5rem; }
.right {width:100%; margin:1rem 0; } /* Bilder im Fließtext. Der ist u.U. 2-spaltig */
.left {width:100%; margin:1rem 0; }
@media all and (min-width:35rem) { 
	.right {float:right; width:45%; margin:1rem 0 1rem 2rem; } 
	.left {float:left; width:45%; margin:1rem 2rem 1rem 0; } 
}

.center { text-align: center; font-style: italic; }
.centerblock { display:grid; place-items:center; }

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.btn >* {
	display:block;
	width:20rem;
	margin: 0 auto;
	border:1px solid grey; 
	padding:.6rem;
	border-radius:3px; 
	background:rgba(240,240,240,1.00);
}
#currywurst {
	position:absolute;
	top:46vh; left:0;
	width:160px;
	animation-delay:20s;
	animation: 30s ;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-name: startseite-bild; /* Chrome, Safari, Opera */
	animation-fill-mode:forwards;
}
@-webkit-keyframes startseite-bild {
    0%   {left:0px; top:20vh; z-index:1; width:1px; transform:rotate(-40deg); opacity:0; }
	50%  {left:90%; top:46vh; width:100px; transform:rotate(-10deg);	opacity:1; }
	100% {left:90%; top:46vh; width:160px; opacity:1; transform:rotate(0deg); }
}
#currywurst2 {
	position:absolute;
	top:38vh; right:-1vw;
	width:22%;
	transform: rotate(15deg);
	box-shadow:4px 4px 8px 4px rgba(0,0,0,.3);
}

body {
    font-family: "Open Sans",Arial,sans-serif;
    font-size: 16px;
    color: #525252;
    background-color: #fff;
	margin:0;
}
header {
	/* mit 100vw und 100vh entsteht ein fullscreen-Hintergrundbild. In index.php wird bei Bedarf ein anderer Wert für height gesetzt. */
	width:100%; height:100vh;	
	color:#fff;
	position:relative; /* um den Inhalt darin absolut zu positionieren */
	margin:0; padding:0;
}
/* -------------- Logo -------------- */
.logo {
	position:absolute;
	top:1rem;
	left:1.5rem;
	
}
/*------------------ Pfeil -----------------*/
#pfeil {
	position:absolute;
	bottom:4%;
  	left:48.2%;
}
/* -------------- Navi - die gemeinsamen Sachen für Mobile- und Desktop-Navi -----*/
nav {
	font-size:1.1rem;
	font-variant: small-caps;
	letter-spacing:0.1rem;
	margin:0 0 0 0;
	color:white;
}
nav li {
	border-radius:3px;
}
nav a { 
	color:white;
	white-space:nowrap;
	text-decoration:none;
}
nav a:hover {
	color:white;
  transition:.15s ease-in-out;
	-moz-transition:.15s ease-in-out;
  -webkit-transition:.15s ease-in-out;
}
/*---------------------------- MOBIL NAVI --------------------*/
.toggleMobile {
	width:60px; height:45px;
	position:absolute;
	top:3rem; right:2rem;
	transform: rotate(0deg);
	transition:.5s ease-in-out;
	cursor:pointer;
	z-index: 99;
}

.toggleMobile span {
	display:block;
	position:absolute;
	left:0;
	height:5px; width:80%;
	background: rgba(255,255,255,1);
	border-radius:1px;
	opacity:1;
	transform:rotate(0deg);
	transition:.25s ease-in-out;
}
.toggleMobile span:nth-child(1) { top:0px; }
.toggleMobile span:nth-child(2) { top:12px; }
.toggleMobile span:nth-child(3) { top:24px; }
.toggleMobile.open span:nth-child(1) { background: rgba(76,134,178,1); top:18px; transform:rotate(135deg);}
.toggleMobile.open span:nth-child(2) { background: rgba(76,134,178,1); opacity:0; left:-60px;}
.toggleMobile.open span:nth-child(3) { background: rgba(76,134,178,1); top:18px; transform:rotate(-135deg);}

#mobileMenu {
	display: none;
	z-index:98;
	position:fixed;
	top: 0;
	right: 0;
	margin:0; padding:1rem 4rem 1rem 0rem;
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
	background:rgba(0,0,0,.8);
	border-radius:3px 0 0 3px;
}
#mobileMenu ul li {
	display:block;
	padding: 1rem 0 1rem 0;
	margin:0;
	border-bottom: 1px solid rgba(76,134,178,1);
}
#mobileMenu ul li ul li{
	padding:.7rem 0 0 0;
	border:none;
}
#mobileMenu ul li ul li:before{
	content:"- ";
}
#mobileMenu ul li:last-child {
	border-bottom: none;
}
#mobileMenu .dropdown > a:hover { /* falls ein Dropdown-Menü-Punkt, dann soll kein Hover-Effekt angezeigt werden */
	color:rgba(76,134,178,1);
	cursor:default;
}

/* -------------- Slideshow im Header nach http://tympanus.net/codrops/2013/04/17/background-slideshow/ -------------- */
.cbp-bislideshow {
	list-style: none;
	width: 100%;
	height: 100%;
	position: relative;
	top: 0;
	left: 0;
	z-index: -1;
	padding: 0;
	margin: 0;
}
.cbp-bislideshow li {
	position: absolute;
	width: 101%;
	height: 101%;
	top: -0.5%;
	left: -0.5%;
	opacity: 0;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	transition: opacity 1s;
}
/* If background-size supported we'll add the images to the background of the li */
.backgroundsize .cbp-bislideshow li {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-position: center center;
}
/* ...and hide the images */
.backgroundsize .cbp-bislideshow li img {
	display: none;
}
.cbp-bislideshow li img {
	display: block;
	width: 100%;
}
.cbp-caption {
	position:absolute;
	bottom:4rem;
	left:0;
	width:100%;
	color:white;
	text-align:center;
	text-shadow: 0px 0px 15px rgba(0,0,0,1.00);
	padding:0 10%; /* damit der Text nicht an den Rand stösst: */
	box-sizing:border-box; /* klappt nur mit border-box */
	animation:fadein 2s normal forwards;
}
@keyframes fadein {
    from { transform: translateY(20px); }
    to   { transform: translateY(-20px); }
}
.cbp-bicontrols {
	position: absolute;
	width: 300px;
	height: 100px;
	margin: -50px 0 0 -150px;
	top: 50%;
	left: 50%;
}
.cbp-bicontrols span {
	float: left;
	width: 100px;
	height: 100px;
	position: relative;
	cursor: pointer;
}
.cbp-bicontrols span:before {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-align: center;
	font-family: 'entypo';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 100px;
	font-size: 80px;
	color: #fff;
	-webkit-font-smoothing: antialiased;
	opacity: 0.7;
}
.cbp-bicontrols span:hover:before { opacity: 1; }
.cbp-bicontrols span:active:before { top: 2px; }
span.cbp-biplay:before { content: "\e002"; }
span.cbp-bipause:before { content: "\e003"; }
span.cbp-binext:before { content: "\e000"; }
span.cbp-biprev:before { content: "\e001"; }
.cbp-bicontrols span.cbp-binext { float: right; }
/* Fallback */
.no-js.no-backgroundsize .cbp-bislideshow li:first-child { opacity: 1; }
.no-js.backgroundsize .cbp-bislideshow li:first-child img { display: block; }

/* -------------- main -------------- */
main { width:90%; margin:1rem auto; }

/* -------------- Mehrspaltiger Fließtext -------------- */
.column { 
	-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
	column-count: 1; 
	-webkit-column-gap:6rem;
	-moz-column-gap:6rem;
	column-gap:2rem;
	border-top: 1px solid rgba(0,0,0,0.20);
}
.column:last-child {border:none;}
@media all and (min-width:55rem) { 
	.column {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
		padding:2rem 0;
	} 
}

/* -------------- Flex-Gedöns -------------- */
.column3, .blog, .gridi, .gallery, .gallery2, footer {
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
}
/* -------------- blog + gallery -------------- */
.column3 section, .blog section, .gallery a, .gallery2 a, .gridi a {
	flex:0 0 98%;
	margin:.9rem 1%;
	padding:0;
}
.blog section img{ width:100%; height:auto; }
.blog section .date{ color:rgba(150,150,150,1.00); }
.blog section .title{ border-top: 1px dotted #c2c2c2; padding:1rem 0 0 0; font-weight:bold; letter-spacing:.1rem; text-transform:uppercase; }

.gallery figure, .gallery2 figure, .grid-itemi { width:100%; margin:0; padding:0; }

@media all and (min-width:  500px) { .blog section, .gallery a, .gallery2 a, .gridi a { flex:0 0 48%; } }
@media all and (min-width:  800px) { .column3 section, .blog section, .gallery a, .gridi a { flex:0 0 31.3333%; } }
@media all and (min-width: 1100px) { .blog section, .gallery a, .gridi a { flex:0 0 23%; } }

/* -------------- Isotope -------------- */
.filter { 
	list-style: none;
	width:100%;
	text-align:center;
}
.filter button{ 
	display:inline-block;
	margin:1rem 0rem;
	padding:.5rem;
	background:transparent;
	border:1px solid grey;
	border-radius: 3px;
}
.grid-itemi { 
	position:relative;
	height:13rem;
	background-size:cover;
	background-position:center center;
	color:white;
	overflow:hidden;
	transition: all .4s ease-in-out;
}
.grid-itemi *{
	position:absolute;
	bottom:0; left:0;
	margin:0; padding:1rem;
}
/*.grid-item:hover { transform: rotate(4deg) scale(1.2); }*/

/* -------------- Footer -------------- */
footer {
	clear:both;
	justify-content:flex-start; /* für Smartphones */
	background:rgba(0,0,0,1);
	color:rgba(200,200,200,1);
	padding:.5rem;
	margin:1rem 0 0 0;
	line-height:2rem;
}
footer section { padding:1rem; }
footer a{ color:rgba(174,218,255,1.00);}
footer.copyright {
	display:block;
	padding:.5rem;
	margin:0;
	border-top:1px solid #888;
	font-size:.8rem;
	text-align:center;
	text-transform:uppercase;
	letter-spacing:.1rem;
}

@media (min-width: 1024px){
h1 { font-size:3.0rem; letter-spacing:.1rem; text-align:center; }
h2 { font-size:2.4rem; letter-spacing:.1rem; }
h3 { font-size:1.6rem; }
footer { justify-content:space-between; }
}

.Entwicklungsphase { display:flex; flex-flow:column; }
.Entwicklungsphase figure { display:flex; aligh-items:flex-start; margin:0 0 4rem 0;}
.Entwicklungsphase figcaption { 
	padding:2rem; 
	background: rgba(0,0,0,.1);
	flex:1;
}
.Entwicklungsphase img { flex:1; height:auto; margin:0 1rem 0 0; }