/*
*
*	non-responsive styles
*
*/
.header-colors {
	background-color: rgb(59,76,110);
}
.header-align {
	text-align:center; 
    display:table;
}
.footer-colors {
	background-color: rgb(59,76,110);
}
.footer-align {
	text-align:center; 
    display:table;
}
.footer-text-style {
	color: rgb(255,255,255);
	font-style: italic;
	font-family: 'Open Sans', sans-serif;
	display:table-cell; 
	vertical-align:middle;
	width: 100vw;
}
.nav-colors {
	background-color: rgb(218,105,63);
	font-family: 'Open Sans', sans-serif;
}
.nav-link-text-style {
	color: rgb(255,255,255);
	font-style: italic;	
	text-decoration: none;
}

.nav-link-active-style {
	color: rgb(41,65,100);
	font-variant: small-caps;
	font-weight: bold;
	letter-spacing: 1px;
	text-decoration: none;
	font-style: italic;	
}
.text-style {
	color: rgb(41,65,100);
	font-family: 'Open Sans', sans-serif;
}
.headline-style {
	color: rgb(231,144,101);
	font-family: 'Open Sans', sans-serif;
	font-style: italic;
	font-weight: 600;
	font-variant: small-caps;
	letter-spacing: 6px;
	display: table-cell;
    vertical-align: middle;
	width: 100vw;
}
.subheadline-style {
	color: rgb(114,118,144);
	font-family: 'Open Sans', sans-serif;
	font-style: italic;
	font-weight: normal;
	font-variant: small-caps;
	letter-spacing: 2px;
}
.subheadline-style-datenschutz {
	color: rgb(114,118,144);
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	font-size: 2.2vh;
}
.footer-text-marlies {
	letter-spacing: 2px;
}
.image-border {
	border: 0.0vw solid rgb(231,144,101);
}
body {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin:0;
}
.ul-yellow-disc-style {
	list-style: none;
	padding: 0;
	padding-left:1vw;
	margin: 0;
}
.ul-yellow-disc-style li {
	padding-left: 0;
	margin-left: 15px;
	text-indent: -15px;
}

.ul-yellow-disc-style li:before {
  content: "•";
  padding-right: 10px;
  font-size: 2vh;
  color: rgb(218,105,63);
}
.maps-opt-in {
	border: 1px solid rgb(114,118,144);
	text-align: center;
}
/*
*
*	responsive styles
*
*/
.anwendung-second-column-alignment {
	position: absolute;
	padding-top: 20vh;
}
.article-index {
	display:table; 
	height:100%;
}

.article-uebermich {
	display:table; 
	height:100%;
}
.article-datenschutz {
	width:70vw;
}
.small-first-of-two-layout {
	display:table-cell;
	width: 30vw;
}
.first-of-two-layout {
	display:table-cell;
	width: 60vw;
}
.one-of-three-layout {
	display:table-cell;
	width: 25vw;
}
.second-of-two-layout {
	display:table-cell;
}
.fixed-second-of-two-layout {
	display:table-cell;
	width:50vw;
}
.nav-link-responsive {
	font-size: 2vh;
}
.nav-smaller-display-bullet {
	display: none;
}
.nav-wider-display-bullet {
	display: inline-block;
}
.nav-wider-screens {
	display: block;
}
.body-responsive {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	overflow: hidden;
}
header{
	height: 11.6vh;
}
main { 
	display: -webkit-box; 
	display: -ms-flexbox; 
	display: flex;
	height: 83.4vh;
}
nav {
	width: 18.8vw;
	-webkit-box-ordinal-group: 0;
	    -ms-flex-order: -1;
	        order: -1;
	text-align: right;
	padding-top: 11vh;
}
article{
	-webkit-box-flex: 1;
	    -ms-flex: 1 0 auto;
	        flex: 1 0 auto;
	-webkit-box-ordinal-group: 4;
	    -ms-flex-order: 3;
	        order: 3;
	padding: 0;
	padding-left:1vw;
	margin: 0;
	background-image: none;
	background-size: cover;
	background-repeat: no-repeat;
}
.footer-responsive {
	height: 5vh;
	-webkit-box-ordinal-group: 5;
	    -ms-flex-order: 4;
	        order: 4;
	padding-top: 0.2vh;
	margin-top: 0;
	margin-bottom: 0;
}
.footer-text-first-bullet {
	display: inline-block;
}
.footer-text-middle-bullet {
	display: inline-block;
}
.footer-text-responsive {
	font-size: 2vh;
}

nav a {
	display: inline-block;
	font-size: 1.9vh;
}
h1 {
	font-size: 3.65vw;
}
h2 {
	font-size: 2.8vh;
	padding-top: 3vh;
	padding-bottom: 2vh;
	margin-bottom: 0px;
}
p {
	font-size: 2vh;
}
.small-text {
	font-size: 1.5vh;
}
.datenschutz-article h3 {
	font-size: 2.5vh;
}
.datenschutz-article h4 {
	font-size: 2.2vh;
	width: 75vw;
}
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.ul-font-size-responsive {
	font-size: 2vh;
}
.ul-anwendung-responsive {
	width: 25vw;
}
.second-column-responsive-headline {
	display: block;
	padding-left: 50vw;
	margin-top: -37.1vh;
}
.second-column-responsive {
	padding-left: 50vw;
}
.article-text-responsive {
	padding-top: 0px;
	margin-top: 0px;
	-webkit-hyphens: auto;
	    -ms-hyphens: auto;
	        hyphens: auto; 
    text-align: justify
}
.image-page-1-1 {
	position: absolute; 
	z-index: 1; 
	width: auto; 
	height: auto; 
	max-width: 15vw; 
	max-height: 30vh;
	margin-top: 20vh;
	margin-left:2.5vw;
}
.image-page-1-2 {
	position: absolute; 
	z-index: 0; 
	width: auto; 
	height: auto; 
	max-width: 15vw; 
	max-height: 15vh;
	margin-top: 55vh;
	margin-left: 2.5vw;
}
.image-page-3-1 {
	position: absolute; 
	margin-left: 1vw; 
	margin-top: 5vh; 
	z-index: 0; 
	width: auto; 
	height: auto; 
	max-width: 35vw; 
	max-height: 35vw;
}
.image-page-2-1 {
	position: absolute; 
	z-index: 1; 
	width: auto; 
	height: auto; 
	max-width: 20vw; 
	max-height: 20vw; 
	margin-top: 15vh;
}
.image-page-2-2 {
	position: absolute; 
	z-index: 0; 
	width: auto; 
	height: auto; 
	max-width: 20vw; 
	max-height: 20vw; 
	margin-top: 40vh;
}
.image-page-4-1 {
	position: relative; 
	z-index: 1; 
	width: auto; 
	height: auto; 
	max-width: 15vw; 
	max-height: 15vh;
	margin-top: 5vh;
	margin-left: 25vh;
}
.image-page-5-1 {
	position: absolute; 
	margin-top: 30vh; 
	z-index: 1; 
	width: auto; 
	height: auto; 
	max-width: 15%; 
	max-height: 15%;
}
.header-hamburger-responsive {
	display: none;
}
.footer-text-linebreak {
	display: none;
}
.maps-size-responsive {
	width: 40vw;
	height: 40vh;
}
.headline-responsive-break {
	display: none;
}
.nav-responsive-break {
	display: none;
}
/*
* Hintergrundbild abhängig vom Seitenverhältnis
*/
/* Top1-Top4 */
@media (min-aspect-ratio: 16/10) {
	article{
		background-position: 0% 11vh;
	}
}
/* Top5-...*/
@media (max-aspect-ratio: 16/10) {
	article{
		background-position: 0% 27vh;
	}
}
/* Top8*/
@media (max-aspect-ratio: 16/12) {
	article{
		background-position: 0% 30vh;
	}
}


/*
*
*	unter 1192px -> menü links wird zentriert
*
*/
@media all and (max-width: 1191px) {
	.nav-link-alignment {
		padding-bottom: 2.5vh;
		text-align: center;
		display: block;
		text-align:center
	}
}

@media all and (min-width: 1192px) {
	.nav-link-alignment {
		padding-bottom: 2.5vh;
		padding-right: 2vw;
		display:inline-block;
	}
}

/*
*
*	unter 900px
*
*/
@media all and (max-width: 900px) {
	.article-datenschutz {
		width:100vw;
	}
	.anwendung-second-column-alignment {
		position: relative;
		padding-top: 0;
	}
	
	.li-index {
		display:block;
	}
	.article-index {
		display:block; 
		height:70vh;
	}
	.article-uebermich {
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex; 
		height:70vh;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	.small-first-of-two-layout {
	display:block;
	width: 100%;
	order:2;
	}
	.fixed-second-of-two-layout {
	display:block;
	width:100%;
	order:0;
}
	.article-anwendung {
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex; 
		height:70vh;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	.first-of-two-layout {
		display:block;
		width: 100%;
	}
	.second-of-two-layout {
		display:block;
	}
	.one-of-three-layout {
		display:block;
		width: 100%;
	}
	
	
	.ul-anwendung-responsive {
		width: 100vw;
	}
	.ul-anwendung-responsive li {
		display: list-item;
	}
	.second-column-responsive li {
		display: list-item;
	}
	.second-column-responsive-headline {
		display: inline;
		padding-left: 1vw;
	}
	.second-column-responsive {
		padding-left: 1vw;
	}
	.headline-responsive-break {
		display: block;
	}
	.nav-responsive-break {
		display: block;
	}
	.body-responsive {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-flow: row wrap;
		        flex-flow: row wrap;
	}
	header {
		height: 12vh;
		width: 100vw;
		padding: 0;
	}
	h2 {
		margin-top: 0;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 2.3vh;
		font-size: 4.5vw;
	}
	article {
		background-image: none;
	}
	.article-text-responsive {
		padding-left: 2.5vh;
		padding-top: 1vh;
		margin-top: 0px;
		width: calc(95vw - (100vw - 100%)); /*Berechnet Scrollbar-Breite mit ein. 95vw weil der Text nur 95% vom Viewport haben soll (plus Scrollbar)*/
		font-size: 2vh;
		overflow: auto;
	}
	.image-page-1-1 {
		position: relative; 
		margin-left: 5vw; 
		margin-top: auto; 
		max-width: 48vw; 
		max-height: 48vw;
	}
	.image-page-1-2 {
		position: relative; 
		margin-left: 5vw; 
		margin-top: auto; 
		max-width: 48vw; 
		max-height: 48vw;
	}
	.image-page-2-1 {
		position: relative; 
		margin-left: 5vw; 
		margin-top: auto; 
		max-width: 40vw; 
		max-height: 40vw;
	}
	.image-page-2-2 {
		position: relative; 
		margin-left: 5vw; 
		margin-top: auto; 
		max-width: 40vw; 
		max-height: 40vw;
	}
	.image-page-4-1 {
		position: relative; 
		margin-left: 26vw; 
		margin-top: auto; 
		max-width: 48vw; 
		max-height: 48vw;
	}
	.image-page-3-1 {
		position: absolute;
		margin-top: 2vh;
		z-index: 0;
		width: auto;
		height: auto;
		max-width: 30vw;
		max-height: 30vw;
	}
	.image-page-5-1 {
		position: relative; 
		margin-left: 30vw; 
		margin-top: auto; 
		max-width: 40vw; 
		max-height: 40vw;
	}
	nav {
		width: 100vw;
		text-align: center;
		padding: 1.7vh 0;
		margin: 0;
	}
	ul {
		margin: 0;
		padding: 0;
	}
	li {
		margin: 0;
		padding: 0;
		display: inline;
	}
	.kostenerstattung li {
		padding-left: 4vw;
		display: block;
	}
	.uebermich {
		width: 70vw;
	}
	.uebermich li {
		padding-left: 4vw;
		display: block;
	}
	.nav-smaller-display-bullet {
		display: inline-block;
	}
	.nav-wider-display-bullet {
		display: none;
	}
	.nav-link-responsive {
		font-size: 2.4vw;
		padding: 0;
		margin: 0;
		display: inline-block;
	}
	main { 
		height: 80vh;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	article {
		overflow: auto;
		padding: 0;
		height: 69vh;
	}
	.footer-responsive {
		height: 8vh;
		width: 100vw;
		padding: 0;
	}
	.footer-text-responsive {
		font-size: 1.5vh;
	}
	.footer-text-first-bullet {
		display: none;
	}
	.footer-text-marlies {
		display: block;
		padding-bottom: 0.2vh;
	}
	.footer-text-address {
		display: block;
	}
}

/*
*
*	unter 600px
*
*/
@media all and (max-width: 600px) {
	.li-index {
		font-size:4vw;
	}
	.header-hamburger-responsive {
		display: table-cell;
		width: 14vw;
	}
	h2 {
		margin-top: 1.5vh;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 2.3vh;
		font-size: 5vw;
	}
	article {
		background-image: none;
	}
	.uebermich {
		width: 100vw;
		margin-top: -3vh;
	}
	.uebermich .li-short {
		/*width: 65vw;*/
	}
	.article-text-responsive {
	/*	padding-left: 2.5vh;
		padding-top: 1vh;
		margin-top: 0px;
		width: calc(95vw - (100vw - 100%)); /*Berechnet Scrollbar-Breite mit ein. 90vw weil der Text nur 90% vom Viewport haben soll (plus Scrollbar)*/
		font-size: 4vw;
	/*	overflow: auto;*/
	}
	.image-page-3-1 {
		position: relative;
		margin-left: 30vw;
		z-index: -1;
		width: auto;
		height: auto;
		max-width: 40vw;
		max-height: 40vw;
	}
	
	/*
	nav {
		width: 100vw;
		text-align: center;
		padding: 1.7vh 0;
		margin: 0;
	}
	ul {
		margin: 0;
		padding: 0;
	}
	li {
		margin: 0;
		padding: 0;
		display: inline;
	}
	.nav-smaller-display-bullet {
		display: inline-block;
	}
	.nav-wider-display-bullet {
		display: none;
	}*/
	
	.nav-link-responsive {
		font-size: 3.5vw;
		padding: 1.5vw;
		margin: 0;
		display: block;
	}	
	.nav-wider-screens {
		display: none;
	}

	main { 
		height: 81vh;
	/*	display: flex;
		flex-direction: column;*/
	}
	article {
	/*	overflow: auto;
		padding: 0;*/
		height: 81vh;
	}
	.footer-responsive {
		height: 7vh;
	/*	width: 100vw;
		padding: 0;*/
	}
	.footer-text-responsive {
		font-size: 1.2vh;
		margin-top: 0.7vh;
	}
	/*.footer-text-first-bullet {
		display: none;
	}*/
	.footer-text-marlies {
	/*	display: block;*/
		padding-bottom: 0.5vh;
	}
	/*.footer-text-address {
		display: block;
	}*/
	.footer-text-middle-bullet {
		display: none;
	}
	.footer-text-linebreak {
		display: inline-block;
	}

	#menuToggle
	{
		display: block;
		position: relative;
		top: 0;
		left: 5vw;
		z-index: 1;
  
		-webkit-user-select: none;
		-moz-user-select: none;
		 -ms-user-select: none;
		     user-select: none;
	}

	#menuToggle input
	{
		display: block;
		width: 40px;
		height: 32px;
		position: absolute;
		top: -7px;
		left: -5px;
  
		cursor: pointer;
  
		opacity: 0; /* hide this */
		z-index: 2; /* and place it over the hamburger */
  
		-webkit-touch-callout: none;
	}

	/*
	* Just a quick hamburger
	*/
	#menuToggle span
	{
		display: block;
		width: 33px;
		height: 4px;
		margin-bottom: 5px;
		position: relative;
  
		background: #cdcdcd;
		border-radius: 3px;
  
		z-index: 1;
  
		-webkit-transform-origin: 4px 0px;
  
		    -ms-transform-origin: 4px 0px;
  
		        transform-origin: 4px 0px;
  
		-webkit-transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
					opacity 0.55s ease,
					-webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  
		transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
					opacity 0.55s ease,
					-webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  
		-o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
					background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
					opacity 0.55s ease;
  
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
					background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
					opacity 0.55s ease;
  
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
					background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
					opacity 0.55s ease,
					-webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	}

	#menuToggle span:first-child
	{
		-webkit-transform-origin: 0% 0%;
		    -ms-transform-origin: 0% 0%;
		        transform-origin: 0% 0%;
	}

	#menuToggle span:nth-last-child(2)
	{
		-webkit-transform-origin: 0% 100%;
		    -ms-transform-origin: 0% 100%;
		        transform-origin: 0% 100%;
	}

	/* 
	* Transform all the slices of hamburger
	* into a crossmark.
	*/
	#menuToggle input:checked ~ span
	{
		opacity: 1;
		-webkit-transform: rotate(45deg) translate(-2px, -1px);
		    -ms-transform: rotate(45deg) translate(-2px, -1px);
		        transform: rotate(45deg) translate(-2px, -1px);
		background: #232323;
	}

	/*
	* But let's hide the middle one.
	*/
	#menuToggle input:checked ~ span:nth-last-child(3)
	{
		opacity: 0;
		-webkit-transform: rotate(0deg) scale(0.2, 0.2);
		    -ms-transform: rotate(0deg) scale(0.2, 0.2);
		        transform: rotate(0deg) scale(0.2, 0.2);
	}

	/*
	* Ohyeah and the last one should go the other direction
	*/
	#menuToggle input:checked ~ span:nth-last-child(2)
	{
		-webkit-transform: rotate(-45deg) translate(0, -1px);
		    -ms-transform: rotate(-45deg) translate(0, -1px);
		        transform: rotate(-45deg) translate(0, -1px);
	}

	/*
	* Make this absolute positioned
	* at the top left of the screen
	*/
	#menu
	{
		position: absolute;
		/*width: 300px;*/
		width: calc(100vw + 80px);
		margin: -100px 0 0 -50px;
		padding-top: 75px;
		padding-bottom: 10px;
  
		background-color: rgb(218,105,63);
		font-family: 'Open Sans', sans-serif;
		list-style-type: none;
		-webkit-font-smoothing: antialiased;
		/* to stop flickering of text in safari */
  
		-webkit-transform-origin: 0% 0%;
  
		    -ms-transform-origin: 0% 0%;
  
		        transform-origin: 0% 0%;
		-webkit-transform: translate(-100%, 0);
		    -ms-transform: translate(-100%, 0);
		        transform: translate(-100%, 0);
  
		-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  
		transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  
		-o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	}
	/*
	#menu li
	{
		padding: 10px 0;
		font-size: 22px;
		display: block;
	}
	*/
	/*
	* And let's slide it in from the left
	*/
	#menuToggle input:checked ~ ul
	{
		-webkit-transform: none;
		    -ms-transform: none;
		        transform: none;
	}
}