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

/* Zutatentabelle.................................................. */

.zutaten-tabelle {
	width: 100%;
	border-collapse: collapse;
}

.zutaten-tabelle th {
	background-color: var(--background-color);
	text-align: left;
	padding: 10px;
	font-size: 14px;
	border-bottom: 2px solid var(--text-color);
}

.zutaten-tabelle td {
	padding: 10px;
	border-bottom: 1px solid var(--text-color);
	font-size: 14px;
}

/*
.zutaten-tabelle tr:hover {
	background-color: var(--hintergrund);
}
*/

.menge {
	width: 80px;
	text-align: right;
	font-weight: bold;
}

.einheit {
	width: 100px;
	color: var(--text-color);
}

.zutat {
	width: auto;
}


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


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

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

.menu {
	margin: 10px 0px 10px 0px;
	overflow: hidden;
	height: 80px;
}

.header-p {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
  display: flex;
}

ul li {
  display: block;
  color: var(--text-color);
  padding: 15px 0px 0px 10px;
  text-decoration: none;
}

.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;
	min-height: 500px;

}

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

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

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

.footer {
	background-color: var(--dunkelblau);
	min-height: 200px;
	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%;
}


button {
    padding: 10px 15px;
    margin-right: 10px;
    border: none;
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
    font-size: 14px;
}

button:hover {
    background-color: #0056b3;
}

form { 
	margin-bottom: 20px; 
}

input, select, textarea { 
	display: inline; 
	margin-bottom: 10px; 
	width: 200px; 
}

/* 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: sansc5light;
	color: var(--weiss);
	font-size: 20px;
}

h3 {
	font-family: sansc5light;
	color: var(--text-color);
	font-size: 30px;
	margin-bottom: 20px;
}

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: left;
  	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 {
		width: 35%;
	}
	
	.right {
		width: 65%;
	}	

	.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: 10px;
	}

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

	h3 {
		padding-top: 15px;
	}


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

}