@charset "utf-8";
/* CSS Document */

/* allg. Farben */
:root {
	--blau:         rgba(066,097,126,1.00);
	--weiss:        rgba(255,255,255,1.00);
	--hintergrund:  rgba(250,245,240,1.00);
	--grau: 		rgba(050,050,050,1.00);
	--dunkelgrau:	rgba(020,020,020,1.00);
	--dunkelblau:	rgba(037,065,089,1.00);
	
	--border-radius: 10px;
	--border-radius-large: 8px;
	
	color-scheme: light dark;
}

/* automatic dark mode --------------------------------------------- */
/* ❗️ keep the rules in sync with the manual dark mode below! */
@media (prefers-color-scheme: dark) {
	:root {
		--background-color: 	var(--grau);
		--text-color: 			var(--hintergrund);
		--svg:       			100%;
		--img:					0%;
	}

	
}

/* manual dark mode --------------------------------------------- */

	:root.dark {
		--background-color: 	var(--grau);
		--text-color: 			var(--hintergrund);
		--svg:       			100%;
		--img:					0%;
	}



/* automatic Light Mode --------------------------------------------- */
/* ❗️ keep the rules in sync with the manual light mode below! */
@media (prefers-color-scheme: light) {
	:root {
		--background-color: 	var(--hintergrund);
		--text-color: 			var(--blau);
		--svg:       			0%;
		--img:					100%;
	}

}

/* manual Light Mode --------------------------------------------- */

	:root.light {
		--background-color: 	var(--hintergrund);
		--text-color: 			var(--blau);
		--svg:       			0%;
		--img:					100%;
	}

@font-face {
    font-family: sansC5italic;
    src: url(../fonts/TheSansC5-4iSemiLightIta.otf);
}

@font-face {
    font-family: sansc5semilight;
    src: url(../fonts/TheSansC5-4_SemiLight.otf);
}

@font-face {
    font-family: sansc5semibold;
    src: url(../fonts/TheSansC5-6_SemiBold.otf);
}

@font-face {
    font-family: sansc5light;
    src: url(../fonts/TheSansC5-3_Light.otf);
}



/* Webseite --------------------------------------------- */

* {
    box-sizing: border-box;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/* display: flow-root;  CSS clear – float beenden */
	/* clear: both;*/
}

body {
	background-color: var(--background-color);
	color: var(--text-color);
	overflow: auto; /*Scrollbalken*/
}
.main {
	margin: 0px auto;
	width: 1200px;
}

.header {
	width: 100%;
	background-color: var(--blau);
	overflow: hidden;
	padding: 0px 0px 10px 0px; 
	margin: 0px 0px 0px 0px;
}

.header-title {
	width: 100%;
	float: left;
}

/* Header Tour.................................................. */

.header-tour {
	width: 100%;
	min-height: 50px;
	display: flex;
	flex-direction: row;
	justify-content: right;
	align-items: center;
	padding: 0px 10px 0px 0px;
}

.header-tour p {
	font-size: 18px;
	color: var(--weiss);
}

.header-tour-left {
	text-align: left;
	flex-basis: 150px;
}	

.header-tour-center {
	text-align: center;
	flex-basis: 200px;
}	

.header-tour-right {
	text-align: right;
	flex-basis: 150px;
}

/* .................................................. */


.header-left-two {
	width: auto;
	float: left;
}

.header-right-two {
	padding-left: 20px;
	float: left;
}

.menu {
	margin: 10px 0px 10px 0px;
	overflow: hidden;
	height: 40px;
	/* background-image: linear-gradient(to top, var(--background-color), var(--blau)); */
}

.swith-lang p {
	font-family: sansc5semilight;
	float: right;
	padding-right: 15px;
	color: var(--weiss);
}

.logo {
	height: 100px;
	padding: 15px 0px 0px 0px;
}

.de-titel, .en-titel {
	padding: 10px 0px 0px 0px;
}

.en-titel h1 {
	font-family: sansC5italic;
}

.content {
	float: left;
	width: 100%;
	margin: -6px 0px 15px 0px;
}

.left {
    float: left;
    width: 40%;
    text-align: justify;
}

.right {
    float: left;
    width: 60%;
    text-align: left;
	padding: 0px 0px 0px 10px;
}

.privacy img {
	filter: invert(var(--img));
	padding-right: 5px;
}

.footer {
	background-color: var(--dunkelblau);
	min-height: 270px;
	overflow: hidden;
	padding: 30px 15px 0px 15px;
	margin: 0px 0px 0px 0px;
}

.footer-left {
    float: left;
    width: 25%;
    text-align: left;
}

.footer-left img {
	height: 80px;
}

.footer-middle {
    float: left;
    width: 50%;
    text-align: center;
}

.footer-right {
    float: left;
    width: 25%;
    text-align: left;
}

.footer .logo {
	height: 70px;
	padding: 0px 0px 0px 0px;
}

.footer p {
	color: var(--weiss);
}

.footer-right img {
	padding-right: 5px;
	width: 35px;
}

hr {
	margin-bottom: 15px;
	color: var(--weiss);
	width: 100%;
}

/*
.main hr {
	margin: 0px 0px 0px 0px;
	width: 100%;
	color: var(--text-color); 
	border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
*/


/* audio  --------------------------------------------- */

.menu .audio img {
	float: left; 
	width: 40px;
	filter: invert(var(--svg));
}

/* audio Potcast  --------------------------------------------- */

.column audio {
  width: 100%;
}

/* Links --------------------------------------------- */
a {
	text-decoration: none;
	color: var(--weiss);
}

a:hover {
	color: var(--weiss);
}

a:active {
	color: var(--weiss);
}

/* Titel --------------------------------------------- */
h1 {
	font-family: sansc5semilight;
	color: var(--weiss);
	font-size: 40px;
}

h2 {
	font-family: sansc5semibold;
	color: var(--text-color);
	padding: 0px 0px 20px 0px;
}

h3 {
	font-family: sansc5semilight;
/*	font-size: 2vw;*/
	color: var(--weiss);
}

p {
	font-size: 16px;
	font-family: sansc5semilight;
	color: var(--text-color);
}

/* Buttom --------------------------------------------- */

.buttom {
	float: right;
	border: none;
  	color: var(--text-color);
	background-color: var(--background-color);
  	padding: 10px 10px;
	margin: 1px 0px 0px 10px;
  	text-align: center;
  	text-decoration: none;
 	font-size: 15px;
}
/*
.buttom:hover {
	background-color:rgb(140, 140, 140);
}

.buttom:hover::after {
	background-color: var(--background-color);
}
*/

/* Image Set --------------------------------------------- */

figcaption {
	/*background-color: var(--background-color);*/
  	color: var(--text-color);
  	font-family: sansc5semilight;
	font-size: 14px;
  	padding: 10px;
  	text-align: center;
/*	border-bottom: solid;
	border-left: solid;
	border-right: solid;*/
}

.row {
  	display: -ms-flexbox; /* IE10 */
  	display: flex;
  	-ms-flex-wrap: wrap; /* IE10 */
  	flex-wrap: wrap;
	margin: 0 -5px;
  	padding: 0px 0px 0px 0px;
}

/* Create two (50%) equal columns that sits next to each other */
.column {
	-ms-flex: 50%; /* IE10 */
	flex: 50%;
	max-width: 50%;
	padding: 5px;
  	margin: 0px 0px 0px 0px;
}

.column img {
  	vertical-align: middle;
  	width: 100%;
	margin: 0px 0px 0px 0px; /*Abstand über den Bildern*/
}

/* For Tablets --------------------------------------------- */
@media only screen and (max-width: 1200px) {
	
	.main { 
		width:100%;
		margin: 0px 0px 0px 0px; 
	}
	.de-titel, .en-titel {
		padding-left: 10px;
	}

	.menu {
		padding-left: 10px;
		padding-right: 10px;
	}

	.header-tour {
		padding-right: 15px;
	}

	.header-tour-right, .header-tour-left {
		border-bottom: solid 1px white;
	}

	.content { 
		width:100%;
		padding-left: 10px;
	}
	.left, .right {
		width: 50%;
	}	

	.right {
		padding-right: 10px;
		padding-left: 15px;
	}

	h1 {
		font-size: 2,5em;
	}

	.logo {
		height: 80px;
		padding-left: 10px;
	}
	
	.swith-lang img {
		padding-right: 10px;
	}
	
	.footer-left img {
		height: 46px;
	}
	
}

/* For Smartphones */
@media only screen and (max-width: 700px) {
	
	.content, .right, .left {
		width: 100%;
	}

	.content { 
		padding-left: 0px;
	}

	.header-tour {
		padding: 0px 10px 0px 10px;
	}

	.header-tour-left, .header-tour-center, .header-tour-right {
		flex-grow: 2;
	}

	.header-tour-right p {
		font-size: 15px;
		text-align: right;	
	}

	.header-tour-center p {
		font-size: 15px;
		text-align: center;
	}

	.header-tour-left p {
		font-size: 15px;
		text-align: left;
	}

	.left p {
		padding-left: 10px;
		padding-right: 10px;
	}

	.logo {
		height: 60px;
	}

	h1 {
		font-size: 7vw;
	}

	.column {
		-ms-flex: 100%;
		flex: 100%;
		max-width: 100%;
		padding: 0px 0px 0px 0px;
  	}

	.buttom {
		padding: 8px 8px;
		margin-top: 3px;
		font-size: 15px;

	}

	.footer {
		min-height: 650px;
	}

	.footer-left, .footer-middle, .footer-right {
		width: 100%;
	}

	.footer-middle, p {
		text-align: left;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	hr {
		width: 300px;
	}

	.footer-left img {
		height: 70px;
	}	

}