@charset "utf-8";
/**
  * @link       </assets/css/style.css>
  * @version    1.0
  * @media      all
  * @css-for    all
  * @author     Ingo Wagener <http://atelierkrake.de>
  * @created    31.03.16
  */


/**
  * @section    Page Setup
  */

html, body { background: #0f447a }

/* 
	Here be Dragons 
	To Do: Dynamisch 
*/
body.fixed-nav { padding-top: 72px }


body, h1, h2, h3, h4, h5, h6, p, ul, ol, table {
	font-family: 'Helvetica Neue', Helvetica, arial, sans-serif
}

/**
  * @section	Headings
  */


h2 { margin-bottom: 15px; font-size: 2.5em; font-weight: 300 }
h3 { margin-bottom: 15px; font-size: 2em; font-weight: 300}
h4 { margin-bottom: 15px; font-size: 1.5em; line-height: 24px; font-weight: 30 }

/**
  * @section	Paragraphs 
  */
  
p { 
	margin-bottom: 15px; 
	font-size: 1.5em; 
	line-height: 1.6; 
	color: #003257
}

address { margin-bottom: 15px }

.lead { margin-bottom: 30px; font-size: 1.5em }

.ah-blau { color: #003257 }



/**
  * @section	Lists
  */

ul { 
	margin-bottom: 15px; 
	font-size: 16px; 
	line-height: 1.6; 
	list-style: square
}

ul:not([class]) {
	margin: 0 0 15px;
	padding: 0 0 0 30px;
}


/**
  * @section	Images
  */
  
img { max-width: 100% }


/**
  * @section	Links
  */
  
a { color: blue }
a:hover { text-decoration: none }

li.aktuell { color: #cc6600 }



/**
  * @section	Horizontal rules
  */

hr {
	height: 1px;
	background: #333;
	margin: 30px auto;
	border: 0
}

small { font-size: .85em }


/**
  * @section	.containers
  */

div { box-sizing: border-box }


@media (min-width: 768px) {
.container { width: 100%; max-width: 1400px; margin: 0 auto; position: relative }
	.container--content { padding: 0 120px }
	.container--standalone { padding: 30px 120px }
	}
	
	@media (max-width: 768px) {
.container { width: 100%; max-width: 98%; margin: 0 auto; position: relative }
	.container--content { padding: 0 30px; color: #e9ebf0 }
	.container--standalone { padding: 30px }
	}
	
	
.fullwidth { padding: 30px 0; background: #1e2d40; border-top: 1px solid #fff }
	.fullwidth--white { background: #fff }
	.fullwidth--grey { background: #f3f6f8; color: #fff } /* AH-Farbe */
	
@media (max-width: 768px) { .fullwidth { padding: 15px 0 }}

  
/**
  * @section    Navigation (oben)
  */
  
.navigation { 
	position: relative;
	padding: 0; 
	z-index: 10; 
	/*background: #003257; /* AH-Farbe */
	background-color: rgba(15, 68, 122, 0.6);
	transition: all .1s linear;
	color: #fff
  }
.navigation.aktuell { color: #FFCC33 }

/*
 * Function: assets/js/functions.js - Line 26 ff
*/

.navigation--fixed { position: fixed; top: 0; width: 100% }

.navigation--transparent { background: transparent; color: #fff }

	.nav-wrapper {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		padding: 0 15px; 
		position: relative;
	}


	@media (min-width: 960px) { 	
	.brand { 
		position: relative; 
		z-index: 10; 
		flex:1;
		margin: 0.7em 0 -1.5em 0; /* AH */
	}
	
	
	}

	@media (max-width: 959px) { 
	.brand { 
		position: relative; 
		z-index: 10; 
		flex:1;
		margin: 0.7em 0 -1.5em 0; /* AH */
	}
		

	}
	
	
	
	
	.hamburger {
		padding: 0;
		display: inline-block;
		cursor: pointer;
		transition-property: opacity, -webkit-filter;
		transition-property: opacity, filter;
		transition-property: opacity, filter, -webkit-filter;
		transition-duration: 0.15s;
		transition-timing-function: linear;
		font: inherit;
		color: inherit;
		text-transform: none;
		background-color: transparent;
		border: 0;
		margin-left: 1em;
		overflow: visible;
	}
	
	.hamburger:hover { opacity: 0.7 }
	
	.hamburger-box {
		width: 40px;
		height: 24px;
		display: inline-block;
		position: relative;
	}
	.hamburger-inner {
		display: block;
		top: 50%;
		margin-top: -2px;
	}
	.hamburger-inner,
	.hamburger-inner::before,
	.hamburger-inner::after {
		width: 40px;
		height: 4px;
		background-color: #fff;
		border-radius: 4px;
		position: absolute;
		transition-property: -webkit-transform;
		transition-property: transform;
		transition-property: transform, -webkit-transform;
		transition-duration: 0.15s;
		transition-timing-function: ease;
	}
	.hamburger-inner::before,
	.hamburger-inner::after { content: ""; display: block }
	
	.hamburger-inner::before { top: -10px }
	
	.hamburger-inner::after { bottom: -10px }
	
	.hamburger--spin .hamburger-inner {
		transition-duration: 0.3s;
		transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}
	.hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in }
	
	.hamburger--spin .hamburger-inner::after {
		transition: bottom 0.1s 0.34s ease-in, -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
		transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
		transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}
	.hamburger--spin.is-active .hamburger-inner {
		-webkit-transform: rotate(225deg);
		transform: rotate(225deg);
		transition-delay: 0.14s;
		transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	
	.hamburger--spin.is-active .hamburger-inner::before {
		top: 0;
		opacity: 0;
		transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out;
	}
	
	.hamburger--spin.is-active .hamburger-inner::after {
		bottom: 0;
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
		transition: bottom 0.1s ease-out, -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
		transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
		transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
	}


	.nav { 
		display: none;
		position: absolute; 
		/*background: #015673; /*alte Farbe */
		background-color: rgba(0, 50, 87, 0.8);
		top: 100%; left: 0;
		z-index: 1;
		box-sizing: border-box;
		width: 100%;
		padding: 15px;
		list-style: none;
		box-shadow: 0px 5px 10px rgba(0,0,0, .6);
	}
		
	.nav a {
		display: block;
		padding: 5px 10px;
		text-decoration: none;
		text-transform: uppercase; /*bo*/
		color: #eee;
		font-size:1.3em;
		align-self: stretch;
		text-align: right;
	}
	
	

	@media (min-width: 768px) {
		

	.hamburger { display: none }
		
		.nav {
			position: static;
			width: 100%;
			flex: 1 1 auto;
			align-self: stretch;
			margin: 0 0 0 auto;
			padding: 0;
			display: flex;
			flex-flow: row wrap;
			list-style: none;
			box-shadow: none;
			background: transparent;
		}
			
				.nav > li {
					position: static;
					flex: 1 1 auto;
					padding: 0 15px;
					border: 0;
	
				}
				
				.nav > li:last-child { padding-right: 0 }
	
		
		.nav a {
			display: block;
			position: relative;
			text-decoration: none;
			text-transform:uppercase;
			transition: all .4s ease-in-out;
			text-shadow: 1px 1px 0px rgba(0,0,0, .4)
		}

		
		.nav a:hover { color: #666 }
		
		.nav a:hover:after { opacity: 1}
	}

	
	

	

		
	
  
.hero { position: relative; background-color: #666; color: #fff; box-shadow: inset 0 -10px 10px -10px rgba(0,0,0, .8) }

	.hero--image { background-repeat: no-repeat; background-position: 50% 0; background-size: cover;  }
	
	@media (min-width: 768px) { .hero--image { background-attachment: fixed } }
	
	.hero--image-dummy { background-image: url(../img/hero-dummy.png)}
	
	@media (min-width: 768px) {
		.hero-content {
			position: relative; 
			z-index:1;
			min-height: 100vh;
			padding: 50px 15px 45px 120px;
			display: flex;
			flex-flow: column wrap;
			justify-items: flex-start;
			text-align: center;
		}
		}
		@media (max-width: 768px) {
		.hero-content {
			position: relative; 
			z-index:1;
			min-height: 100vh;
			padding: 100px 15px 45px 30px;
			display: flex;
			flex-flow: column wrap;
			justify-items: flex-start;
			text-align: center;
		}
		}
		
			.hero-content--half {
				min-height: calc(780px)
			}
			
						.hero-content--sub {
				min-height: calc(120px)
			}
			
			#hero--landing {
				justify-content: flex-end;
				text-align: left
			}
			
			.hero--has-menu { padding: 109px 15px 45px 257px; }
			
			
	
	.letsgo  {
		display: inline-block;
		width: 64px;
		height: 64px;
		text-decoration: none;
		border: 2px solid currentColor;
		border-radius: 50%;
		background: rgba(255,255,255, .3);
		font-size: 36px;
		line-height: 64px; 
		color: #fff;
		transition: all .2s ease-in-out;
		text-align: center

	}
	
/**
  * @section	Buttons 
  */

.btn {
	display: inline-block;
	line-height: 1.12!important;
	border-radius: 3px;
	text-decoration: none;
	transition: all .2s ease-in-out;
	box-shadow: none;
}

	.btn--green { border-color: #2d7f24!important; background: #2d7f24; color: #fff }
	.btn--green:hover { border-color: #2a6121; background: #2a6121 }



/**
  * @section	Footer
  */
  
.footer {
	padding: 30px 0;
	box-shadow: inset 0 20px 20px -20px rgba(0,0,0, .9)
	
}

.footer .inline-list { line-height: 32px; margin: 0; font-size: 1.2em }
@media (min-width: 768px) { .footer .inline-list { line-height: 48px } }

.footer .inline-list a { color: #999; text-decoration: none }
.footer .inline-list a:hover { color: #fff }


/**
  * @section	to top
  */
  
.to-top {
	position: fixed;
	right: 15px;
	bottom: 30px;
	z-index: 20;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 26px;
	background: rgba(0,0,0, .1);
	color: #fff;
	text-align: center;
	text-decoration: none;
	border-radius: 3px
}

.to-top:hover { background: rgba(0,0,0, .5) }


/**
  * @section	Social Networks
  */

.social-links { list-style: none;  margin: 0; text-align: center; color: #999  }

.social-links li { display: inline-block;  }

.share { margin-bottom: 15px;  line-height: 56px; text-align: right; }

@media (max-width: 767px) { .share { text-align: center }}


.social-links a {
	display: block;
	width: 32px;
	height: 32px;
	line-height: 32px;
	border-radius: 50%;
	background: rgba(0,0,0, .2);
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	transition: all .4s ease-in-out 
}

.share a { background: rgba(0,0,0, .15)}

.social-links a:hover { transform: scale(1.1)}

footer .social-links a:hover { transform: rotate(360deg) scale(1.1) }

.facebook a:hover { background: #2C438D }
.twitter a:hover { background: #2490F1 }
.youtube a:hover { background: #BA0016 }
.whatsapp a:hover { background: #38cd4e }

.social-links span { display: none }



@media (min-width: 768px) {
	footer .social-links { float: right }
	
	footer .social-links a {
		width: 48px;
		height: 48px;
		line-height: 48px;
		font-size: 24px;
	}

}


/**
  * @section	Tiles
  */

.tiles {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin-right: -7.5px;
	margin-left: -7.5px;
	order: 1
}

.tile-item {
	box-sizing: border-box;
	padding: 0 7.5px;
	text-align: center
}


.tile-item-img {
	max-width: 190px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255, .3)
}

.tile-item h3 { font-size: 1.2em }

.tile-item a { color: #003257; text-decoration: none } /* AH-Farbe */

.tiles-thirds .tile-item {
	flex: 1 1 33.3%
}

.tiles-quart .tile-item {
	flex: 1 1 25%
}

.tiles-quint .tile-item {
	flex: 1 1 20%
}

.tiles-quint .tile-item-img {
	max-width: 150px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255, .3)
}



/**
  * @section	Embeds
  */
  
.embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom: 15px } 
.embed iframe, .embed object, .embed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/**
  * @section	helpers
  */

.center { text-align: center }

.small-text { font-size: 12px }

.marginplus { margin: 30px 0;}

.pull-right { float: right }
.pull-left { float: left }

.pull-right.margin { margin: 0 0 5px 15px }
.pull-left.margin { margin: 0 15px 5px 0 }

.clearfix::before,
.clearfix::after { content: " "; display: table; } 
.clearfix::after { clear: both; }
.clearfix { *zoom: 1; }

.inline-list { list-style: none; }
.inline-list > li {
	display: inline-block;
	margin-right: -4px;
}

.inline-list > li:not(:first-child)::before {
	content: " ▪ ";
	display: inline-block;
	margin: 0 5px;
}

/**
  * @section	Hide
  */
  
@media (max-width: 767px) { .hide-xs {  display: none !important } }

@media (min-width: 768px) { 
	.doppelbildli {float:left; width: min(49.7%); padding: 0 2px 4px 0 !important}
	.doppelbildre {float:right; width: min(49.7%, 480px); padding: 0 2px 4px 0 !important}
	.bildli {float:left; width: min(33%); vertical-align:middle; padding-bottom: 1em; margin: 0 30px 0 0 !important}
	.bildre {float:right; width: min(33%); vertical-align:middle; padding-bottom: 1em; margin: 0 0 0 30px !important}
}
@media (max-width: 767px) { 
	.doppelbildli {float:left; width: 100%; padding: 0 0 4px 0; float: none !important}
	.doppelbildre {float:right; width: 100%; float: none !important}
	.bildli {float:left; width: 100%; float: none; margin: 0 0 20px 0; padding-bottom: 1em  !important}
	.bildre {float:right; width: 100%; float: none; margin: 0 0 20px 0; padding-bottom: 1em !important}
 
}