/*
    Created on : 12.01.2015, 13:39:08
    Author     : Lutz
    Optik
*/




#startseite {
	display: grid;
	grid-template-areas:
		"a b"
		"c d"
		"e f"
		"g h"
		"i j";
}

#startseite .eins{grid-area: a;
	background-color: red;}
#startseite .zwei{grid-area: b;}
#startseite .drei{grid-area: c;}
#startseite .vier{grid-area: d;}
#startseite .fuenf{grid-area: e;}
#startseite .sechs{grid-area: f;}
#startseite .sieben{grid-area: g;}
#startseite .acht{grid-area: h;}
#startseite .neun{grid-area: i;}
#startseite .zehn{grid-area: j;}

}

@font-face {
    font-family: "Arvo";
    src: url('../style-assets/fonts/Arvo/Arvo-regular.ttf');
}
@font-face {
    font-family: "Raleway";
    src: url('../style-assets/fonts/Raleway/Raleway-Regular.ttf');
}
@font-face {
    font-family: "Lato";
    src: url('../style-assets/fonts/Josefin_Sans/JosefinSans-Regular.ttf');
}
@font-face {
    font-family: "Comforter_Brush";
    src: url('../style-assets/fonts/Comforter_Brush//ComforterBrush-Regular.ttf');
}
@font-face {
    font-family: "Fondamento";
    src: url('../style-assets/fonts/Fondamento/Fondamento-Regular.ttf');
}
@font-face {
    font-family: "Mea_Culpa";
    src: url('../style-assets/fonts/Mea_Culpa/MeaCulpa-Regular.ttf');
}
@font-face {
    font-family: "Qwitcher_Grypen";
    src: url('../style-assets/fonts/Qwitcher_Grypen/QwitcherGrypen-Regular.ttf');
}
@font-face {
    font-family: "Tapestry";
    src: url('../style-assets/fonts/Tapestry/Tapestry-Regular.ttf');
}
@font-face {
    font-family: "Explora";
    src: url('../style-assets/fonts/Explora/Explora-Regular.ttf');
}
@font-face {
    font-family: "Vujahday_Script";
    src: url('../style-assets/fonts/Vujahday_Script/VujahdayScript-Regular.ttf');
}

html {
/*	background-image: url('../style-assets/hintergrund_stripes_i_b.png');
	background-image: url('../style-assets/hintergrund_stripes_i.png');
    background-image: url('../style-assets/hintergrund_stripes_vfl.png');
	background-image: url('../style-assets/hintergrundbild.jpg');
	background-image: url('../style-assets/hintergrund_stripes_2.png');
	background-image: url('../style-assets/hintergrund_70_15.png');
	background-image: url('../style-assets/hintergrund_alu_5.jpg');
*//*	background-attachment: fixed;
	background-size: cover;
	background-repeat: none;
*/}

.rot{
    color: red;
}
.gruen{
color: green;
}
.gelb{
    color: yellow;
}
.unsichtbar{
  display:none;
}
.warnung{
	color: darkred;
	background-color: rgb(255,200,200);
	padding: 10px;
	border-color: darkred;
	border: 1px solid;
	border-radius: 10px;
}
.deko{
    font-family: Tapestry;
    font-size: 50px;
    color: black;
}
.handwriting{
    font-family: Qwitcher_Grypen;
    font-size: 70px;
    color: darkblue;
}
body {
/*    width: 80%;
*/
/*    max-width: 1000px;
*/
/*    font-family: Arial,Helvetica,Geneva,Sans-serif,sans-serif;
*/  font-family: Tahoma, Helvetica,Geneva,Sans-serif,sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    margin: auto;
/*    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
*/    background-color: rgba(255,255,255,0.1);
    background-color: rgba(255,255,255,1.0);
    border-color: #ff0000;
/*    border-left: 1px solid;
    border-top: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(50,50,50,0.5);
*/}

	/*#logo_links {
    margin-left: 20px;
    margin-top: 0px;
    float: left;
}
#logo_rechts {
    margin-right: 0px;
    margin-top: 0px;
    float: right;
}*/


a {
/*    color: darkred;
	color: rgb(195,191,141);
	color: rgb(175,171,127);
*/	color: rgb(124,103,20);
/*    font-weight: bold;
*/    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

hr {
    color: rgb(200,200,200);
    border: 1px solid rgb(230,230,230);
}
.bild_gerahmt{
    border: 1px solid darkgrey;
    margin: 20px;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 2px rgba(50,50,50,0.5);
    background-color: white;
}

.bild_gerahmt_eng{
	border: 1px solid black;
	border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(50,50,50,0.5);
    background-color: white;
}


ul li {
    padding: 7px;
}

table {
/*    font-family: Arial,Helvetica,Geneva,Sans-serif,sans-serif;
*/  font-family: Tahoma,Helvetica,Geneva,Sans-serif,sans-serif;
    font-size: 16px;
}
table th{
}
table td{
    padding: 25px;
    vertical-align: top;
    text-align: left;
}
thead th{
    background-color: rgb(100,100,100);
    color: white;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
}
tbody td{
    background-color: rgb(245,245,245);
    color: black;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
}
table .leerzeile{
    height: 20px;
    background-color: white;
}
table .kopfzeile{
    background-color: rgb(100,100,100);
    color: white;
    padding: 5px;
}


#warenkorb table {
/*    font-family: Lato,Arial,Helvetica,Geneva,Sans-serif,sans-serif;
*/  font-family: Tahoma,Helvetica,Geneva,Sans-serif,sans-serif;
    font-size: 1.0em;
	width: 100%;
}
#warenkorb table th{
}
#warenkorb table td{
    padding: 5px;
    vertical-align: top;
    text-align: left;
}
#warenkorb thead th{
    background-color: rgb(255,255,255);
    color: darkgrey;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}
#warenkorb tbody td{
    background-color: rgb(255,255,255);
    color: black;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}
#warenkorb table .leerzeile{
    height: 7px;
    background-color: white;
}
#warenkorb table .kopfzeile{
    background-color: rgb(100,100,100);
    color: white;
    padding: 5px;
}
#warenkorb .rechtsbuendig{
	text-align: right;
}
#warenkorb .linksbuendig{
	text-align: left;
}
#warenkorb .zentriert{
	text-align: center;
}
#warenkorb .delete_icon{
	width: 20px;
	height: 20px;
	border: 1px grey;
	border-radius: 3px;
	background-color: red;
	color: white;
	font-size: 0.8em;
	font-style: bold;
}

#suchmeldung {
	display: none;
	text-align: center;
	color: white;
	background-color: rgba(255,0,0,0.7);
	font-style: bold;
	border: 1px darkred;
	padding: 15px;
	width: 50%;
	border-radius: 7px;
	position: fixed;
	top: 50%;
	left: 25%;
}



.rechtsbuendig{
    text-align: right;
}
.linksbuendig{
    text-align: left;
}
.zentriert{
    text-align: center;
}
.grau{
    color: grey;
}
.weiss{
	color: white;
}
.fett{
    font-weight: bold;
}
.bg_grau{
    background-color: rgb(240,240,240);
}
.bg_schwarz{
	background-color: black;
}


.adress {
    font-family: Tahoma,Helvetica,Geneva,Sans-serif,sans-serif;
    color: grey;
    margin-bottom: 10px;
    text-align: center;
}
.adress a {
    text-decoration: none;
    color: grey;
}
.adress a:hover {
    color: black;
}

header {
    font-family: Arial,Helvetica,Geneva,Sans-serif,sans-serif;
    background-image: url(../style-assets/Banner_2015_links.jpg), url(../style-assets/Banner_2015_rechts.jpg), url("../style-assets/banner-background.jpg");
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-color: rgb(200,200,200);
    width: 100%;
    height: 150px;
}
#header_titel, #menu_button {
    display: none;
}
#kl_order {
    font-family: Tahoma, Helvetica, Geneva, Sans-serif, sans-serif;
    background-color: rgb(200,200,200);
    width: 100%;
    height: 50px;
    clear: both;
    display: block;
    text-align: right;
}
#kl_order .textfeld{
	font-family: Tahoma, Helvetica, Geneva, Sans-serif, sans-serif;
/*    color: rgb(100,100,100);
*/
    border-radius: 5px;
	padding: 10px;
    float: left;
    margin-top: 4px;
    margin-left: 10px;
    text-decoration: none;
}
#kl_order .linkbutton{
    font-family: Arial, Helvetica, Geneva, Sans-serif, sans-serif;
    color: rgb(100,100,100);
    background-color: rgb(220,220,220);
    border: 1px solid grey;
    border-radius: 5px;
    padding: 10px;
    float: right;
    margin-top: 4px;
    margin-right: 10px;
    text-decoration: none;
    box-shadow: 3px 3px 2px rgba(100,100,100,0.5), inset 3px 3px 2px rgba(255,255,255,0.5);
}
#kl_order .linkbutton:hover {
    background-color: rgb(230,230,230);
    color: black;
}
#kl_order .linkbutton:active {
    color: darkgrey;
    background-color: rgb(240,240,240);
    box-shadow: 1px 1px 1px rgba(100,100,100,0.7), inset 2px 2px 1px rgba(255,255,255,0.5);
}

.formbutton{
    font-family: Arial, Helvetica, Geneva, Sans-serif, sans-serif;
    color: rgb(100,100,100);
    background-color: rgb(220,220,220);
    border: 1px solid grey;
    border-radius: 5px;
    padding: 10px;
    float: right;
    margin-top: 4px;
    margin-right: 10px;
    text-decoration: none;
    box-shadow: 3px 3px 2px rgba(100,100,100,0.5), inset 3px 3px 2px rgba(255,255,255,0.5);
}
.formbutton:hover {
    background-color: rgb(230,230,230);
    color: black;
}
.formbutton:active {
    color: darkgrey;
    background-color: rgb(240,240,240);
    box-shadow: 1px 1px 1px rgba(100,100,100,0.7), inset 2px 2px 1px rgba(255,255,255,0.5);
}

nav {
    font-family: Arial,Helvetica,Geneva,Sans-serif,sans-serif;
}
#nav_top {
    position: absolute;
    top: 100px;
    width: 90%;
    height: 50px;
}
#nav_top ul {
    margin-top: 0px;
    padding-left: 0px;
}
#nav_top li {
    margin-top: 10px;
    display: inline;
    float: left;
}
#nav_top a {
    display: inline;
    color: white;
    float: left;
    padding: 10px;
    margin-right: 1px;
    text-decoration: none;
}
#nav_top a:hover {
    background-color: rgba(200,200,200,0.4 );
}
#nav_top a:active {
    background-color: rgba(200,200,200,0.8);
}

#nav_side {
	font-size: 0.8em;
    margin-top: 5px;
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 25px;
    float: left;
/*    border: 1px solid whitesmoke;
*/	background-color: white;
}
#nav_side ul {
    margin-top: 0px;
    padding-left: 0px;
}
#nav_side li {
    margin-top: 0px;
    padding-left: 0px;
    display: block;
}
#nav_side a {
    display: inline;
    color: rgb(90,90,90);
    float: left;
//  background-color: rgb(250,250,250);
    padding: 5px;
    margin-right: 1px;
    margin-bottom: 2px;
    border-radius: 0px;
    text-decoration: none;
    min-width: 160px;
}
#nav_side a:hover {
//  background-color: rgb(230,230,230);
    color: black;
}
#nav_side a:active {
    background-color: white;
    color: rgb(230,230,230);
}

.newslist li{
//	background-color: red;
}
#nav_side .menu_img{
  max-width: 150px;
}

#page_content {
/*    font-family: Lato,Arial,Helvetica,Geneva,Sans-serif,sans-serif;
*/  font-family: Trebuchet,Helvetica,Geneva,Sans-serif,sans-serif;
    font-size: 18px;
    padding-left: 40px;
    margin-top: 40px;
    margin-right: 5%;
    text-align: justify;
}
#page_content img{
	max-width: 90%;
}
#page_content .wichtig{
    color: darkred;
    font-weight: bold;
}
#page_content h1,h2,h3 {
    font-family: Mea_Culpa;
    text-align: left;
}
#page_content h3{
    margin-bottom: 35px;
}
#page_content h1,h2 {
/*    font-family: Raleway,Arial,Helvetica,Geneva,Sans-serif,sans-serif;
*/
    font-family: Trebuchet,Helvetica,Geneva,Sans-serif,sans-serif;
    font-size: 20px;
    color: black;
}
#page_content h3 {
/*    font-family: Raleway,Arial,Helvetica,Geneva,Sans-serif,sans-serif;
*/
    font-family: Georgia,Helvetica,Geneva,Sans-serif,sans-serif;
    font-size: 18px;
    color: rgb(100,100,100);
    font-style: italic;
    font-weight: normal;
}
#page_content .absatz {
    overflow: auto;
    font-size: 14px;
    border: 1px solid grey;
    padding: 5%;
    padding-top: 2%;
}
#page_content .gutscheinnummer{
	font-weight: bold;
	font-size: 1.5em;
	color: darkred;
	margin-right: 20px;
	margin-top: 20px;
	clear: both;
}

#page_content .bild_icon{
  max-width: 150px;
  margin: 25px;
}

#page_content .faq_q{
  font-weight: bold;
  font-size: 0.9em;
}
#page_content .faq_a{
  font-size: 0.9em;
}

#page_content .linkbutton{
    font-family: Arial, Helvetica, Geneva, Sans-serif, sans-serif;
    color: #593b15;
    background-color: rgb(195,191,141);
    border: 1px solid rgb(170,171,133);
    border-radius: 5px;
    padding: 10px;
    float: right;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-decoration: none;
    box-shadow: 3px 3px 2px rgba(100,100,100,0.5), inset 3px 3px 2px rgba(255,255,255,0.5);
}
#page_content .linkbutton:hover {
    background-color: rgb(221,216,163);
}
#page_content .linkbutton:active {
    background-color: rgb(195,180,141);
}
#page_content .radiobutton{
    font-family: Arial, Helvetica, Geneva, Sans-serif, sans-serif;
    color: black;
    background-color: rgb(216,216,216);
    border: 1px solid rgb(170,171,133);
    border-radius: 5px;
    padding: 5px;
/*    float: right;
*/    margin-right: 10px;
    margin-bottom: 2px;
    margin-left: 10px;
    margin-top: 2px;
    text-decoration: none;
    box-shadow: 3px 3px 2px rgba(100,100,100,0.5), inset 3px 3px 2px rgba(255,255,255,0.5);
}
#page_content .radiobutton:hover {
    color: darkgrey;
    background-color: rgb(216,216,216);
}
#page_content .radiobutton:active {
    background-color: rgb(200,200,200);
}
#clearbutton{
	background-color: white;
	border-color: white;
	border:0px;
    color: rgb(195,180,141);
}
#page_content .telefonbutton{
    font-family: Arial, Helvetica, Geneva, Sans-serif, sans-serif;
//    color: white;
//    background-color: rgb(0,164,0);
    border: 1px solid rgb(170,171,133);
//    border-radius: 5px;
    padding: 10px;
    float: right;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-decoration: none;
    box-shadow: 3px 3px 2px rgba(100,100,100,0.5), inset 3px 3px 2px rgba(255,255,255,0.5);
}
#page_content .telefonbutton:hover {
//    background-color: rgb(0,216,0);
    background-color: rgb(216,216,216);
}
#page_content .telefonbutton:active {
//    background-color: rgb(0,100,0);
    background-color: rgb(200,200,200);
}
#page_content .mailbutton{
    font-family: Arial, Helvetica, Geneva, Sans-serif, sans-serif;
//    color: white;
//    background-color: rgb(67,50,138);
    border: 1px solid rgb(170,171,133);
//    border-radius: 5px;
    padding: 10px;
    float: right;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-decoration: none;
    box-shadow: 3px 3px 2px rgba(100,100,100,0.5), inset 3px 3px 2px rgba(255,255,255,0.5);
}
#page_content .mailbutton:hover {
//    background-color: rgb(103,68,254);
	background-color: rgb(216,216,216);

}
#page_content .mailbutton:active {
//    background-color: rgb(31,16,100);
    background-color: rgb(200,200,200);
}

#page_content .produkt_name {

}
#page_content .produkt_img{
	max-height: 700px;
	max-width: 100%;
}
#page_content .produkt_id{
	font-style: italic;
	display: inline;
}
#page_content .produkt_preis{
	font-weight: bold;
	font-size: 1.5em;
	float: right;
	color: darkred;
	margin-right: 20px;
	margin-top: 20px;
	clear: both;
}
#page_content .lieferzeit{
	font-weight: bold;
	font-size: 1.1em;
	float: right;
	color: darkblue;
	margin-right: 20px;
	margin-top: 20px;
	margin-bottom: 10px;
	clear: both;
}
#page_content .produkt_mwst{
	font-style: italic;
	float: right;
	color: grey;
	clear: both;
	margin-right: 20px;
	margin-top: 5px;
}
#page_content .feldbeschriftung{
	float: right;
	font-style: bold;
	font-size: 1.5em;
	text-align: right;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
}
#page_content .bestellbutton{
	float: right;
	padding: 10px;
	margin-right: 20px;
	margin-left: 20px;
	margin-bottom: 20px;
	font-size: 1.2em;
	font-style: bold;
	clear: both;
    box-shadow: 2px 2px 5px 2px rgba(200,200,200,0.6);
}
#page_content .minibutton{
	float: right;
	padding: 5px;
	margin-right: 20px;
	margin-left: 20px;
	margin-bottom: 20px;
	font-size: 0.8em;
	clear: both;
}
#page_content .inputfield{
	float: right;
	padding: 10px;
	margin-right: 20px;
	margin-top: 20px;
	font-style: bold;
	font-size: 1.2em;
	text-align: right;
	width: 30px;
	clear: both;
}
#page_content .selectfield{
	margin-right: 10px;
	padding: 5px;
	margin-top: 20px;
	font-style: bold;
	font-size: 0.9em;
	text-align: right;
}
#page_content .selectfield_label{
	width: 125px;
	font-size: 0.9em;
	text-align: right;
}
#page_content .feldreihe{
	display: inline;
}
#page_content .warnhinweis{
	float: right;
	color: darkred;
	margin-right: 20px;
	margin-top: 20px;
	clear: both;
}
#warenkorb{
	display: none;
	text-align: right;
	font-size: 0.9em;
}
#adresse_empfaenger .inputfield{
	float: left;
	padding: 2px;
	margin-right: 20px;
	margin-top: 2px;
	font-style: none;
	font-size: 1.0em;
	text-align: left;
	width: 100%;
	clear: both;
}
#adresse_versand .inputfield{
	float: left;
	resizable: true;
	padding: 2px;
	margin-right: 20px;
	margin-top: 2px;
	font-style: none;
	font-size: 1.0em;
	text-align: left;
	width: 100%;
	clear: both;
}
#order_bemerkung .inputfield{
	float: left;
	resizable: true;
	padding: 2px;
	margin-right: 20px;
	margin-top: 2px;
	font-style: none;
	font-size: 1.0em;
	text-align: left;
	width: 100%;
	clear: both;
}
#page_content .rahmenlos{
    border-style: none;
}
#page_content .gerahmt {
    border: 0px solid rgb(180,180,180);
    border-radius: 10px;
    padding: 20px;
    margin: 20px;
    box-shadow: 2px 2px 5px 2px rgba(200,200,200,0.6);
    background-color: white;
}

#page_content .eckig{
    border-radius: 0px;
    border: 1px solid darkgrey;
}

#page_content .head {
    border: 1px solid grey;
    border-radius: 5px;
    padding: 20px;
    margin: 10px;
    background-color: rgb(240,240,240);
    overflow: auto;
}
#page_content .grid_item{
	width: 40%;
	padding-left: 10px;
	padding-right: 15px;
	margin-bottom: 10px;
*	border-radius: 10px;
	border-top: 1px solid lightgrey;
	border-left: 1px dotted lightgrey;
	border-right: 1px dotted lightgrey;
*	box-shadow: 2px 2px 5px 2px rgba(200,200,200,0.6);
*    background-position: top left;
}
#page_content .grid_news{
	width: 86.5%;
	border:none;
}
#page_content .grid_item h2{
	color: white;
}
#page_content .grid_news h2{
	color: darkgrey;
}
#page_content .rot{
    color: red;
}
#page_content .hintergrund_gruen{
	background-image: url(../style-assets/hintergrund_verlauf_gruen.jpg);
    background-repeat: repeat-x;
}
#page_content .hintergrund_blau{
	background-image: url(../style-assets/hintergrund_verlauf_blau.jpg);
    background-repeat: repeat-x;
}
#page_content .hintergrund_rot{
	background-image: url(../style-assets/hintergrund_verlauf_rot.jpg);
    background-repeat: repeat-x;
}
#page_content .hintergrund_gelb{
	background-image: url(../style-assets/hintergrund_verlauf_gelb.jpg);
    background-repeat: repeat-x;
}
#page_content .hintergrund_tuerkis{
	background-image: url(../style-assets/hintergrund_verlauf_tuerkis.jpg);
    background-repeat: repeat-x;
}
#page_content .hintergrund_rose{
	background-image: url(../style-assets/hintergrund_verlauf_rose.jpg);
    background-repeat: repeat-x;
}
#page_content .hintergrund_braun_kurz{
	background-image: url(../style-assets/hintergrund_braun_kurz_2.jpg);
	background-repeat: repeat-x;
}
#page_content .hintergrund_grau_kurz{
	background-image: url(../style-assets/hintergrund_grau_kurz_2.jpg);
	background-repeat: repeat-x;
}
#page_content .hintergrund_vfl{
	background-image: url(../style-assets/hintergrund_vfl.jpg);
	background-repeat: repeat-x;
}
#page_content .left{
	float: left;
	margin-left: 5%;
}
#page_content .right{
	float: right;
	margin-right: 5%;
}
#page_content .row{
/*	text-align: justify;
*/	overflow: hidden;
}
#page_content .produkt_thumb{
	max-width: 100%;
	max-height: 75px;
	margin-top: 20px;
	margin-left: 20px;
}
#page_content .produkt_thumb_klein{
	max-width: 100%;
	max-height: 75px;
	margin-top: 5px;
	margin-left: 5px;
}

#fussteil {
    font-family: Arial, Helvetica, Geneva, Sans-serif, sans-serif;
    padding: 10px;
    width: 100%;
    background: rgb(112,83,51);
    font-size: 12px;
    color: rgb(230,230,230);
    margin-bottom: 20px;
    }
#fussteil tbody td{
    font-family: Arial, Helvetica, Geneva, Sans-serif, sans-serif;
    vertical-align: top;
    text-align: left;
    padding-left: 25px;
    padding-right: 25px;
    background-color: transparent;
    color: white;
}
#fussteil th{
    font-family: Arial, Helvetica, Geneva, Sans-serif, sans-serif;
    vertical-align: top;
    text-align: left;
    padding: 5px;
    background-color: transparent;
    color: white;
}
#fussteil a{
    text-decoration: none;
    color: rgb(200,200,200);
}
#fussteil a:hover{
    color: white;
    box-shadow: 0px 0px 3px 5px rgba(255,255,255,0.1);
    border-radius: 2px;
    background: rgba(255,255,255,0.1);
}
#fussteil a:active{
    color: white;
    box-shadow: 0px 0px 3px 5px rgba(255,255,255,0.2);
    border-radius: 2px;
    background: rgba(255,255,255,0.4);
}
#brotkruemel {
    font-family: Arial,Helvetica,Geneva,Sans-serif,sans-serif;
    font-size: 15px;
/*	color: rgba(100,90,70,0.6);
	color: rgb(221,216,163);
*/	color: rgb(150,150,150);

}
#brotkruemel a{
/*	color: rgb(221,216,163);
*/	color: rgb(200,200,200);
	text-decoration: none;
}
#brotkruemel a:hover{
    color: rgb(195,191,141);
}

footer {
    clear: both;
    text-align: center;
    padding-top: 20px;
    margin-bottom: 16px;
    border-top: 1px dotted grey;
//	background-color: white;
}
.article {
    border-bottom: 1px dotted grey;
}

textarea {
	width: 98%;
	height: 100px;
}

#textfeld {
	width: 98%;
}

.hinweis img{
    margin: 20px;
    max-width: 75%;
}
/*img {
    max-width: 50%;
    min-width: 50px;
}*/

#accordion_a,
#accordion_b,
#accordion_c,
#accordion_d,
#accordion_e,
#accordion_f,
#accordion_g,
#accordion_h,
#accordion_i,
#accordion_j,
#accordion_k,
#accordion_l,
#accordion_m,
#accordion_n,
#accordion_o,
#accordion_p,
#accordion_q,
#accordion_r,
#accordion_s,
#accordion_t{
  display: none; 		/* aktivieren, wenn Akkordion funktionieren soll wie vorgesehen*/
/*	display: block;   	/* aktivieren, wenn Akkordion-Elemente immer sichtbar sein sollen*/
    margin-left: 20px;
    padding: 20px;
    border-left: 1px dotted rgb(200,200,200);
    transition: ease-in-out;
    overflow: auto;
}


#accordion_a:target,
#accordion_b:target,
#accordion_c:target,
#accordion_d:target,
#accordion_e:target,
#accordion_f:target,
#accordion_g:target,
#accordion_h:target,
#accordion_i:target,
#accordion_j:target,
#accordion_k:target,
#accordion_l:target,
#accordion_m:target,
#accordion_n:target,
#accordion_o:target,
#accordion_p:target,
#accordion_q:target,
#accordion_r:target,
#accordion_s:target,
#accordion_t:target{
    display: block;
}

#accordion_a:not(:target),
#accordion_b:not(:target),
#accordion_c:not(:target),
#accordion_d:not(:target),
#accordion_e:not(:target),
#accordion_f:not(:target),
#accordion_g:not(:target),
#accordion_h:not(:target),
#accordion_i:not(:target),
#accordion_j:not(:target),
#accordion_k:not(:target),
#accordion_l:not(:target),
#accordion_m:not(:target),
#accordion_n:not(:target),
#accordion_o:not(:target),
#accordion_p:not(:target),
#accordion_q:not(:target),
#accordion_r:not(:target),
#accordion_s:not(:target),
#accordion_t:not(:target){
  display: none; 		/* aktivieren, wenn Akkordion funktionieren soll wie vorgesehen*/
/*	display: block;   	/* aktivieren, wenn Akkordion-Elemente immer sichtbar sein sollen*/
}

.accordion > a{
    background-color: rgb(245,245,245);
    padding: 10px;
    margin: 5px;
    display: block;
    border: 1px solid rgb(150,150,150);
    border-radius: 4px;
    text-decoration: none;
    color: rgb(100,100,100);
/*	display: none;		/* aktivieren, wenn Akkordion-Elemente immer sichtbar sein sollen */

}

summary {
    background-color: rgb(245,245,245);
    padding: 10px;
    margin: 5px;
    display: block;
    border: 1px solid rgb(150,150,150);
    border-radius: 4px;
    text-decoration: none;
    color: rgb(100,100,100);
/*	display: none;		/* aktivieren, wenn Akkordion-Elemente immer sichtbar sein sollen */
}

.image_left {
    float: left;
    margin-right: 40px;
    margin-bottom: 10px;
}
.image_right {
    float: right;
    margin-left: 40px;
    margin-bottom: 10px;
}
.image_center {
    display: block;
    margin: auto;
    margin-bottom: 10px;
}
.piktogramm{
/*	display: block;
*/	float: right;
	margin: auto;
	max-width: 20px;
}
.rahmenlos {
    border-style: none;
    overflow: auto;
}
.gerahmt {
    border: 1px solid grey;
    overflow: auto;
}
.einzeln{
    clear: both;
}
.bildnachweis{
    font-family: Arial, Helvetica, Geneva, Sans-serif, sans-serif;
    font-size: 14px;
    clear: both;
    font-style: italic;
    text-align: left;
    padding: 5px;
    margin-bottom: 25px;
}
.block_links{
    display: block;
    float: left;
}
.block_rechts{
    display: block;
    float: right;
}
.block_center{
    display: block;
    align: center;
}
.block_blocksatz{
    display: block;
    clear: both;
    width: 100%;
    text-align: justify;
}

#bemerkung {
    width: 100%;
}
#Bestellcode,
#Nachname,
#Absender,
#Telefon {
    max-width: 100%;
}


/*Bildschirmgroesse > 900px*/
@media only screen
and (min-width: 900px){
    .mobile{
        display:none;
    }
}/*Bildschirmgroesse < 900px*/
@media only screen
and (max-width: 900px){
    .monitor{
        display:none;
    }
#page_content .grid_item{
	width: 90%;
+	margin-bottom: 10px;
}
#page_content .left{
	float: left;
	margin-left: 5%;
	margin-right: 5%;
*	padding: 5%;
}
#page_content .right{
	float: left;
	margin-left: 5%;
	margin-right: 5%;
*	padding: 5%;
}

}
/*Bildschirmgroesse < 1300px*/
@media only screen
and (max-width: 1300px){
#kl_order{
	height: 100px;
}

.image_center {
    display: block;
	max-width: 80%;
    margin: auto;
    margin-bottom: 10px;
}
}
/*Bildschirmgroesse < 1000px*/
@media only screen
and (max-width: 1000px){

body {
    width: 95%;
/*    max-width: 1000px;
    font-family: Arial,Helvetica,Geneva,Sans-serif,sans-serif;
*/  font-family: Tahoma, Helvetica,Geneva,Sans-serif,sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    margin: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 10px;
    background-color: rgba(255,255,255,0.1);
    background-color: rgba(255,255,255,1.0);
    border-color: #000000;
    border-left: 0px solid;
    border-top: 0px solid;
    border-right: 0px solid;
    border-bottom: 0px solid;
    border-radius: 0px;
    box-shadow: 0px 0px 10px 2px rgba(50,50,50,0.5);
}

#page_content .telefonbutton{
    font-family: Arial, Helvetica, Geneva, Sans-serif, sans-serif;
    color: white;
    background-color: rgb(0,164,0);
    border: 1px solid rgb(170,171,133);
    border-radius: 5px;
    padding: 10px;
    float: right;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-decoration: none;
    box-shadow: 3px 3px 2px rgba(100,100,100,0.5), inset 3px 3px 2px rgba(255,255,255,0.5);
}

#page_content .telefonbutton:hover {
    background-color: rgb(0,216,0);
}
#page_content .telefonbutton:active {
    background-color: rgb(0,100,0);
}
#page_content .mailbutton{
    font-family: Arial, Helvetica, Geneva, Sans-serif, sans-serif;
    color: white;
    background-color: rgb(67,50,138);
    border: 1px solid rgb(170,171,133);
    border-radius: 5px;
    padding: 10px;
    float: right;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-decoration: none;
    box-shadow: 3px 3px 2px rgba(100,100,100,0.5), inset 3px 3px 2px rgba(255,255,255,0.5);
}
#page_content .mailbutton:hover {
    background-color: rgb(103,68,254);
}
#page_content .mailbutton:active {
    background-color: rgb(31,16,100);
}
#fussteil {
        display: none;
    }
    #nav_side {
        display: none;
        border: 0px;
        width: 65%;}

/*    .monitor{
        display:none;
    }
*/

    #nav_side:target {
    position: absolute;
    top: 10%;
    left: 10%;
    display: block;
    width: 65%;
    padding: 0px;
    float: left;
    }
    #nav_side ul {
        display: block;
        width: 100%;
    }
    #nav_side li {
        width: 100%;
        display: block;
    }
    #nav_side a {
    display: block;
    color: rgb(150,150,150);
    float: left;
    background-color: rgb(250,250,250);
    padding: 25px;
    margin-right: 0px;
    margin-bottom: 0px;
    border-radius: 0px;
    text-decoration: none;
    width: 100%;
    border: 1px solid grey;
    }
    #nav_side a:hover {
    background-color: rgb(195,191,141);
    color: white;
    }
    #nav_side a:active {
    background-color: rgb(195,191,141);
    color: rgb(230,230,230);
    }
    #nav_side:not(:target) {display:none;}

	#accordion_a,
	#accordion_b,
	#accordion_c,
	#accordion_d,
	#accordion_e,
	#accordion_f,
	#accordion_g,
	#accordion_h,
	#accordion_i,
	#accordion_j,
	#accordion_k,
	#accordion_l,
	#accordion_m,
	#accordion_n,
	#accordion_o,
	#accordion_p,
	#accordion_q,
	#accordion_r,
	#accordion_s,
	#accordion_t{
  display: none; 		/* aktivieren, wenn Akkordion funktionieren soll wie vorgesehen*/
/*	display: block;   	/* aktivieren, wenn Akkordion-Elemente immer sichtbar sein sollen*/
    margin-left: 2px;
    padding: 5px;
    border-left: 1px dotted rgb(200,200,200);
    transition: ease-in-out;
    overflow: auto;
	}

	.image_left{
		float: none;
		display: block;
		clear: both;
	}
	.hard_left{
		float: left;
	}
}

/*Bildschirmgroesse zwischen 500 und 1000px*/
@media only screen
and (max-width: 1000px) and (min-width: 500px){


	#warenkorb{
		width: 90%;
	}
    #header_titel {
    display: none;
    }
    #menu_button {
        display: block;
        color: black;
        background-color: rgb(195,191,141);
        margin-right: 5%;
        font-size: 25px;
        border: 1px solid grey;
        border-radius: 5px;
        position: absolute;
        top: 30px;
        right: 10px;
        height: 50px;
        width: 50px;    }
    #nav_side {
        display: none;
    }
    header {
    font-family: Arial,Helvetica,Geneva,Sans-serif,sans-serif;
    background-image: url(../style-assets/Banner_2015_links.jpg), url("../style-assets/banner-background.jpg");
    background-position: top left;
    background-repeat: no-repeat, repeat-x;
    background-color: rgb(195,191,141);
    width: 100%;
    height: 150px;
    }
    .banner{
    display: none;
    }
}
/*Bildschirmgroesse zwischen 1000 und 1100px*/
@media only screen
and (max-width: 1100px) and (min-width: 1000px){
    #header_titel {
    display: none;
    }

    header {
    font-family: Arial,Helvetica,Geneva,Sans-serif,sans-serif;
    background-image: url(../style-assets/Banner_2015_links.jpg), url("../style-assets/Banner_2015_rechts_ohne_Text.jpg"), url("../style-assets/banner-background.jpg");
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-color: rgb(195,191,141);
    width: 100%;
    height: 150px;
    }

    .banner{
    display: none;
    }
}

/*Bildschirmgroesse kleiner als 700px */
@media only screen
and (max-width: 800px)
{

#kl_order{
	height: 150px;
}
}

/*Bildschirmgroesse kleiner als 500px */
@media only screen
and (max-width: 500px)
{




#page_content {
/*    font-family: Lato,Arial,Helvetica,Geneva,Sans-serif,sans-serif;
*/
    font-family: Tahoma,Helvetica,Geneva,Sans-serif,sans-serif;
    font-size: 16px;
    padding-left: 5px;
    margin-top: 5px;
    margin-right: 1%;
    text-align: justify;
}

#warenkorb{
	width: 95%;
}
#page_content .absatz {
    overflow: auto;
    font-size: 14px;
//    border: 1px solid grey;
    padding: 5%;
    padding-top: 5%;
}

#page_content .gerahmt {
    border: 0px;
    border-radius: 0px;
    padding: 0px;
    margin: 0px;
    box-shadow: 0px 0px 0px 0px rgba(200,200,200,0.6);
    background-color: white;
}

.image_center {
    display: block;
	max-width: 100%;
	clear: both;
    margin: auto;
    margin-bottom: 10px;
}


    #header_titel {
        display: block;
        margin-left: 5%;
        font-size: 20px;
    }
    #menu_button {
        display: block;
        color: black;
        background-color: rgb(195,191,141);
        margin-right: 5%;
        font-size: 25px;
        border: 1px solid grey;
        border-radius: 5px;
        position: absolute;
        top: 30px;
        right: 10px;
        height: 30px;
        width: 30px;
    }
    header {
        color: white;
        font-family: Arial, Helvetica, Geneva, Sans-serif, sans-serif;
        background-color: rgb(112,83,51);
        background-image: url("");
        width: 100%;
        height: 75px;
        padding-top: 10px;
    }
    #nav_top {
        position: absolute;
        top: 65px;
        width: 90%;
        height: 15px;
        font-size: 12px;
        padding-left: 5px;
    }
    #nav_top ul {
        margin: 0px;
        padding: 0px;
    }
    #nav_top li {
        margin: 0px;
        padding: 0px;
        display: inline;
        float: left;
    }
    #nav_top a {
    display: inline;
    color: white;
    float: left;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 15px;
    margin: 0px;
    font-weight: normal;
    text-decoration: none;
    }

.bildnachweis{
    font-family: Arial, Helvetica, Geneva, Sans-serif, sans-serif;
    font-size: 10px;
    clear: both;
    font-style: italic;
    text-align: left;
    padding: 5px;
    margin-bottom: 25px;
}

.banner{
    display: none;
}
}

/*Bildschirmgroesse kleiner als 450px */
@media only screen
and (max-width: 450px)
{
#kl_order{
	height: 150px;
}
}
