/* ------------------------------------------------------------- */
/* ---------------------- DDR REZEPTE CSS ---------------------- */
/* ------------------------------------------------------------- */
/* ---------------------- by Steven Becker --------------------- */
/* ------------------------------------------------------------- */

/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/oswald-v41-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/oswald-v41-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/oswald-v41-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/oswald-v41-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/oswald-v41-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/oswald-v41-latin-regular.svg#Oswald') format('svg'); /* Legacy iOS */
}

/* merriweather-sans-regular - latin */
@font-face {
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/merriweather-sans-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/merriweather-sans-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/merriweather-sans-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/merriweather-sans-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/merriweather-sans-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/merriweather-sans-v20-latin-regular.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}

body { 
	font-family: 'Merriweather Sans', sans-serif; 
	background-color: #f2dfc7; 
	background-image: url("../images/backgroundpicture.jpg"); 
	/* cursor: url(https://www.ddr-rezepte.de/images/kochloeffel.png), auto; */
}
	
p { line-height: 1.5;}

a { 
	color: black; 
	text-decoration: underline dotted;
}

a:hover { 
	color: #E7BEA5; 
	text-decoration: none;
}

h1 {
	margin-bottom: 7px;
	font-family: 'Oswald', sans-serif;
}

h2 {
	font-family: 'Oswald', sans-serif;
}

h3 {
	font-family: 'Oswald', sans-serif;
	text-align: center;
}
h4 {
	font-family: 'Oswald', sans-serif;
	text-align: center;
}

.table-wrapper {
    overflow: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* -- Navigationsleiste -- */
.topnav { overflow: hidden; background-color: #f2dfc7; }
.topnav a { font-family: 'Oswald', sans-serif; float: left; display: block; color: black; text-align: center; padding: 12px 14px; text-decoration: none; font-size: 16px; }
.topnav a:hover { background-color: #E7BEA5; color: white; }
.active { background-color: #E7BEA5; color: white; }
.topnav .icon { display: none; }

/* -- Breadcrumb -- */
.breadcrumb { padding-top: 10px; font-size: 10px; }
ul.breadcrumb { list-style: none; }
ul.breadcrumb li { display: inline; }  /* Display list items side by side */
ul.breadcrumb li+li:before { padding: 2px; color: black; content: ">\00a0"; }	

/* -- Textinhalt-- */
.inhalt { padding-top: 0%; padding-left: 4%; padding-right: 4%; padding-bottom: 2%; }

.filterbuchstabe { font-family: 'Oswald', sans-serif; font-size: 28px; font-weight: bold; color: #CC4029; margin-bottom: 0px; padding-top: 30px;}	

.filterbuchstabebutton { background-color: #F2DFC7; padding: 10px; border-radius: 5px; margin: 0px;}	

/* ---------------------- unter 600 Pixel ---------------------- */
@media screen and (max-width: 600px) {
 .topnav a:not(:first-child) {display: none;}
 .topnav a.icon { float: right; display: block; }
 .topnav.responsive {position: relative;}
 .topnav.responsive .icon { position: absolute; right: 0; top: 0; }
 .topnav.responsive a { float: none; display: block; text-align: left; }
  
 .hauptfenster {
	margin-top: 1%;
	width: 99%;
    margin-left: auto;
    margin-right: auto;
	background-color: #f9f1e0;
	border: 1px solid #E7BEA5;
	border-radius: 15px;
 }
  .headerbild { 
    width: 90%;
	margin-bottom: 0px;
	}
  .seitentext { 
    text-align: justify;
	}
  .kategoriekachel {
	width: 300px;
	float:left;
	border: 3px solid #E7BEA5;
	border-radius: 20px;
	margin: 0 auto;
	margin-bottom: 20px;
 } 
 .breadcrumb {
	 margin-left: -10px;
 }
 .form-style-6 {
    font-family: 'Oswald', sans-serif;
	font-size: 16px;
	max-width: 95%;
    margin: 10px auto;
    padding: 16px;
  }
 .kategoriekachel-4 {
	float:left;
	border: 3px solid #E7BEA5;
	border-radius: 20px;
	margin: 0 auto;
	margin-bottom: 20px;
	width: 300px;
 } 
 .filterbuchstaben {
	text-align: center;
	font-size: 150%;
	line-height: 2.5em;
 }
 
 .veranstaltungsbild {
	float:right; 
	margin-left: 45px;
	margin-right: 45px;
	margin-bottom: 10px;
 }
 
  .ads {
 	width: 90%;
	margin-left: auto;
    margin-right: auto;
 }
  .rezeptbild {
	 float: left;
	 width: 95%;
	 text-align: center;
	 border: 2px solid #E7BEA5;
	 border-radius: 20px;
	 margin-right: 2%;
	 margin-left: 2%;
	 margin-bottom: 2%;
  }
  .ostproduktbild {
	 margin-bottom: 20px;
	 margin-top: 20px;
	 width: 100%;
  }
  
 .rezeptvorschau {
	float: left; 
	background-color: #EFE0C6; 
	border-radius: 10px; 
	text-align: center;
	width: 90%; 
	margin: 10px; 
	padding: 8px; 
	font-family: 'Oswald', sans-serif;
	font-size: 18px;
  }
  
 .rezeptvorschaubild {
	border-radius: 8px; 
	margin: 5px;
	width: 70%; 
  }   
  
.videoframe {
	 width: 100%;
	 height: 200px;
  }

.videoframe-out {
	 width: 100%;
	 height: 200px;
	 border: solid 3px;
	 border-color: #EFBCA7;
	 border-radius: 5px;
  }
 
 .ddrmuseenliste {
	text-align: left;
	padding: 5px;
	border-radius: 10px;
	margin-bottom: 30px;
	clear: both;
  }  
 .ddrmuseenbild {
	float: left;
	width: 150px;
	height: 150px;
	margin: 5px;
  }  
 .ddrmuseenadresse {
	padding: 10px;
	float: left;
  }   
 
  .inhalt-zweiteilig { padding-top: 0%; padding-left: 4%; padding-right: 4%; padding-bottom: 4%; }
  .sidebar { float: left; padding-left: 5%; padding-right: 5%; padding-top: 0%;}
}

/* ---------------------- größer als 600 Pixel ---------------------- */
@media screen and (min-width: 600px) {
 .hauptfenster {
	margin-top: 1%;
	width: 90%;
    margin-left: auto;
    margin-right: auto;
	background-color: #f9f1e0;
	border: 3px solid #E7BEA5;
	border-radius: 20px;
 }
  .headerbild { 
    width: 90%;
	margin-bottom: 0px;
	}
  .seitentext { 
    text-align: justify;
	}	
 .kategoriekachel {
	width: 350px;
	float:left;
	border: 3px solid #E7BEA5;
	border-radius: 20px;
	margin: 4%;
 } 
 .form-style-6 {
    font-family: 'Oswald', sans-serif;
	font-size: 16px;
	max-width: 95%;
    margin: 10px auto;
    padding: 16px;
  }
 .kategoriekachel-4 {
	float:left;
	border: 3px solid #E7BEA5;
	border-radius: 20px;
	margin: 10px;
	margin-bottom: 20px;
	width: 300px;
 } 
 .filterbuchstaben {
	text-align: center;
	font-size: 130%;
	line-height: 2.5em;
 }
 
 .veranstaltungsbild {
	float:right; 
	margin-left: 50px;
	margin-right: 50px;
 }
 
  .ads {
 	width: 90%;
	margin-left: auto;
    margin-right: auto;
 }  
  .rezeptbild {
	 float: left;
	 text-align: center;
	 border: 3px solid #E7BEA5;
	 border-radius: 20px;
	 margin-right: 10%;
	 margin-left: 2%;
	 margin-bottom: 2%;
  }
  .ostproduktbild {
	 margin-bottom: 20px;
	 margin-top: 20px;
	 width: 100%;
  }
  
 .rezeptvorschau {
	float: left; 
	background-color: #EFE0C6; 
	border-radius: 10px; 
	text-align: center;
	width: 200px; 
	height: 280px; 
	margin: 10px; 
	padding: 10px; 
	font-family: 'Oswald', sans-serif;
	font-size: 18px;
  }
  
 .rezeptvorschaubild {
	border-radius: 10px; 
	margin: 10px;
	width: 180px;
  }   
  
.videoframe {
	 width: 100%;
	 height: 300px;
  }
  
.videoframe-out {
	 width: 100%;
	 height: 300px;
	 border: solid 3px;
	 border-color: #EFBCA7;
	 border-radius: 5px;
  }
 
 .ddrmuseenliste {
	text-align: left;
	padding: 5px;
	border-radius: 10px;
	margin-bottom: 30px;
	clear: both;
  }  
 .ddrmuseenbild {
	float: left;
	width: 150px;
	height: 150px;
	margin: 5px;
  }  
 .ddrmuseenadresse {
	padding: 10px;
	float: left;
  }  
 
  .inhalt-zweiteilig { padding-top: 0%; padding-left: 4%; padding-right: 4%; padding-bottom: 4%; }
  .sidebar { float: left; padding-left: 5%; padding-right: 5%; padding-top: 0%;}
}


/* ---------------------- größer als 1000 Pixel ---------------------- */
@media screen and (min-width: 1000px) {
 .hauptfenster {
	margin-top: 1%;
	width: 90%;
    margin-left: auto;
    margin-right: auto;
	background-color: #f9f1e0;
	border: 3px solid #E7BEA5;
	border-radius: 20px;
 }
 .headerbild { width: 600px; }
 .kategoriekachel {
	width: 280px;
	float:left;
	border: 3px solid #E7BEA5;
	border-radius: 20px;
	margin: 2%;
 } 
 .kategoriekachel-4 {
	float: left;
	border: 3px solid #E7BEA5;
	border-radius: 20px;
	margin-left: 1%;
	margin-right: 1%;
	margin-top: 1%;
	margin-bottom: 3%;
	width: 230px;
 }
 .kachelcontainer-4 {
	width: 100%;
    margin-left: auto;
    margin-right: auto;
 }  
 .form-style-6 {
    font-family: 'Oswald', sans-serif;
	font-size: 16px;
	max-width: 80%;
    margin: 10px auto;
    padding: 16px;
 }
 .filterbuchstaben {
	text-align: center;
	font-size: 130%;
	line-height: 2.5em;
 }
 .veranstaltungsbild {
	float:right; 
	margin-left: 30px;
	margin-right: 30px;
 }
 .ads {
	width:728px;
	margin-left: auto;
    margin-right: auto;
 }
 .rezeptbild {
	float: right;
	text-align: center;
	border: 3px solid #E7BEA5;
	border-radius: 20px;
	margin-right: 2%;
	margin-left: 2%;
	margin-bottom: 2%;
 }
  .ostproduktbild {
     float: left;
	 margin-right: 40px;
	 margin-bottom: 20px;
	 margin-top: 20px;
	 width: 600px;
  }
  
 .rezeptvorschau {
	float: left; 
	background-color: #EFE0C6; 
	border-radius: 10px; 
	text-align: center;
	width: 200px; 
	height: 280px; 
	margin: 10px; 
	padding: 10px;
	font-family: 'Oswald', sans-serif;
	font-size: 18px;
  }
  
 .rezeptvorschaubild {
	border-radius: 10px; 
	margin: 10px;
	width: 180px;
  } 
 
.sociallinks {
	 width: 100%;
  }
 
.videoframe {
	 width: 560px;
	 height: 315px;
	 margin-left: auto;
     margin-right: auto;
	 text-align: center;
  }
 
.videoframe-out {
	 width: 560px;
	 height: 315px;
	 margin-left: auto;
     margin-right: auto;
	 text-align: center;
	 border: solid 3px;
	 border-color: #EFBCA7;
	 border-radius: 5px;
  }
 
 .ddrmuseenliste {
	text-align: left;
	padding: 5px;
	border-radius: 10px;
	margin-bottom: 30px;
	clear: both;
  }  
 .ddrmuseenbild {
	float: left;
	width: 150px;
	height: 150px;
	margin: 5px;
  }  
 .ddrmuseenadresse {
	padding: 10px;
	float: left;
  }  
  
  .inhalt-zweiteilig { float: left; padding-top: 0%; padding-left: 3%; padding-right: 2%; padding-bottom: 4%; width: 70%;}
  .sidebar { float: left;  border-left:2px solid #E7BEA5; padding-left: 2%; padding-right: 2%; padding-top: 0%; width: 20%;}
}

/* ---------------------- größer als 1500 Pixel ---------------------- */
@media screen and (min-width: 1500px) {
 .hauptfenster {
	margin-top: 1%;
	width: 70%;
	max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
	background-color: #f9f1e0;
	border: 3px solid #E7BEA5;
	border-radius: 20px;
 }
 .kategoriekachel {
	width: 330px;
	float:left;
	border: 3px solid #E7BEA5;
	border-radius: 20px;
	margin: 2%;
 } 
 .form-style-6 {
    font-family: 'Oswald', sans-serif;
	font-size: 16px;
	max-width: 60%;
    margin: 10px auto;
    padding: 16px;
 }
 .kategoriekachel-4 {
	float:left;
	border: 3px solid #E7BEA5;
	border-radius: 20px;
	margin: 10px;
	margin-bottom: 20px;
	width: 275px;
 }  

 .filterbuchstaben {
	text-align: center;
	font-size: 130%;
	line-height: 2.5em;
 }

 .rezeptvorschau {
	float: left; 
	background-color: #EFE0C6; 
	border-radius: 10px; 
	text-align: center;
	width: 200px; 
	height: 280px; 
	margin: 10px; 
	padding: 10px; 
	font-family: 'Oswald', sans-serif;
	font-size: 18px;
  }
  
 .rezeptvorschaubild {
	border-radius: 10px; 
	margin: 10px;
	width: 180px;
  } 
 
.videoframe {
	 width: 560px;
	 height: 315px;
	 margin-left: auto;
     margin-right: auto;
	 text-align: center;
  }

.videoframe-out {
	 width: 560px;
	 height: 315px;
	 margin-left: auto;
     margin-right: auto;
	 text-align: center;
	 border: solid 3px;
	 border-color: #EFBCA7;
	 border-radius: 5px;
  }

 .veranstaltungsbild {
	float:right; 
	margin-left: 20px;
 }
 
 .ads {
	 width:728px;
	 margin-left: auto;
	 margin-right: auto;
 }

 .ddrmuseenliste {
	text-align: left;
	padding: 5px;
	border-radius: 10px;
	margin-bottom: 30px;
	clear: both;
  }  
 .ddrmuseenbild {
	float: left;
	width: 200px;
	height: 200px;
	margin: 10px;
  }  
 .ddrmuseenadresse {
	padding: 10px;
	float: left;
  }  
 
  .inhalt-zweiteilig { float: left; padding-top: 0%; padding-left: 3%; padding-right: 2%; padding-bottom: 4%; width: 70%;}
  .sidebar { float: left;  border-left:2px solid #E7BEA5; padding-left: 2%; padding-right: 2%; padding-top: 0%; width: 20%;}
}

/* ---------------------- Sonstiges ---------------------- */



.form-style-6 input[type="text"],
.form-style-6 input[type="date"],
.form-style-6 input[type="password"],
.form-style-6 input[type="datetime"],
.form-style-6 input[type="email"],
.form-style-6 input[type="number"],
.form-style-6 input[type="search"],
.form-style-6 input[type="time"],
.form-style-6 input[type="url"],
.form-style-6 textarea,
.form-style-6 select {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    background: #fff;
    margin-bottom: 1%;
    border: 1px solid #E3BFA5;
    padding: 1%;
    color: #555;
	font-size: 16px;
	font-family: 'Oswald', sans-serif;
}
.form-style-6 input[type="text"]:focus,
.form-style-6 input[type="date"]:focus,
.form-style-6 input[type="datetime"]:focus,
.form-style-6 input[type="email"]:focus,
.form-style-6 input[type="number"]:focus,
.form-style-6 input[type="search"]:focus,
.form-style-6 input[type="time"]:focus,
.form-style-6 input[type="url"]:focus,
.form-style-6 textarea:focus,
.form-style-6 select:focus {
    box-shadow: 0 0 5px #E3BFA5;
    border: 1px solid #E3BFA5;
}
.form-style-6 input[type="submit"],
.form-style-6 input[type="button"]{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 2%;
    background: #EFE0C6;
    border-bottom: 2px solid #EFE0C6;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;   
    color: black;
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	cursor: pointer;
}
.form-style-6 input[type="submit"]:hover,
.form-style-6 input[type="button"]:hover{
    background: #E3BFA5;
	border-bottom: 2px solid #E3BFA5;
	color: white;
}



.form-style-3 input[type="text"] {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 60%;
    background: #fff;
    margin-bottom: 1%;
    border: 1px solid #E3BFA5;
    padding: 0.5%;
    color: #555;
	font-size: 16px;
	font-family: 'Oswald', sans-serif;
}
.form-style-3 input[type="date"],
.form-style-3 input[type="datetime"],
.form-style-3 input[type="email"],
.form-style-3 input[type="number"],
.form-style-3 input[type="search"],
.form-style-3 input[type="time"],
.form-style-3 input[type="url"],
.form-style-3 textarea {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    background: #fff;
    margin-bottom: 1%;
    border: 1px solid #E3BFA5;
    padding: 0.5%;
    color: #555;
	font-size: 16px;
	font-family: 'Oswald', sans-serif;
}
.form-style-3 select {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 35%;
    background: #fff;
    margin-bottom: 1%;
	margin-left: 2%;
    border: 1px solid #E3BFA5;
    padding: 0.5%;
    color: #555;
	font-size: 16px;
	font-family: 'Oswald', sans-serif;
}
.form-style-3 input[type="text"]:focus,
.form-style-3 input[type="date"]:focus,
.form-style-3 input[type="datetime"]:focus,
.form-style-3 input[type="email"]:focus,
.form-style-3 input[type="number"]:focus,
.form-style-3 input[type="search"]:focus,
.form-style-3 input[type="time"]:focus,
.form-style-3 input[type="url"]:focus,
.form-style-3 textarea:focus,
.form-style-3 select:focus {
    box-shadow: 0 0 5px #E3BFA5;
    border: 1px solid #E3BFA5;
}
.form-style-3 input[type="submit"],
.form-style-3 input[type="button"]{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 1%;
    background: #EFE0C6;
    border-bottom: 2px solid #EFE0C6;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;   
    color: black;
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
}
.form-style-3 input[type="submit"]:hover,
.form-style-3 input[type="button"]:hover{
    background: #E3BFA5;
	border-bottom: 2px solid #E3BFA5;
	color: white;
}



 .kachelcontainer {
	width: 95%;
    margin-left: auto;
    margin-right: auto;
 }  

 .produktkachel {
	display: inline-block;
	margin: 10px;
	text-align: center;
	padding: 10px;
	width: 200px;
	height: 400px;
 }  




/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  border: none;
  outline: none;
  color: black;
  background-color: inherit;
  margin: 0;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  display: block; 
  text-align: center; 
  padding: 12px 14px;
  text-decoration: none;
  font-size: 16px;
  
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #F2DFC7;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  color: white;
  background-color: #E7BEA5;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #E7BEA5;
  color: white;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: center;
  }
}