@charset "UTF-8";

:root {
	--el-bg: #fff4ca;


	--font-main: 'Helvetica Neue', sans-serif;
	--bg-background: #FAFAFA;
	--bg-background-light: #DFDFDF;
	--bg-box: #F0E7E0;
	--bg-border: #B1B1B1;
	--bg-disabled: #b1b1b1;
	--bg-heading: #C51A1B;
	--bg-alert: #C51A1B;
	--bg-hover: #eae1c7;
	--bg-active: #d3c89f;

	--color-main: #203030;
	--color-alert: #FFF;
	--color-heading: #C51A1B;
	--color-light: #B1B1B1;

	--font-small: .8em;

	--logo-header-height: 50px;

	--box-shadow: 0 0 3px #203030;
	--text-shadow: 1px 1px 2px #203030;
}

/* Bootstrap */
.container-fluid { margin-top: 2em;}

.modal-header {
	/*border: none;
	background: var(--bg-background-light);*/
	/*border-bottom: 1px solid var(--bg-background-light);
	padding-top: .3em;
	padding-bottom: .3em;*/
	border: none;
}

.modal-header h1 {
	color: unset;
}

.form-control, .form-select {
	line-height: 2em;
	margin-bottom: 1em;
}



/* Material Icons */

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/MaterialIcons-Regular.woff2');
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 1.5em;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	vertical-align: text-bottom;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;

	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;

	/* Support for IE. */
	font-feature-settings: 'liga';
}

.material-icons-small {
	font-size: .6em;
	vertical-align: text-top;
}

/*
	2024
 */


html {
	/*font-family: 'Times New Roman';*/
}

h1, h2, h3 {
	margin-bottom: 1rem;
	color: var(--color-heading);
}

h4 {
	font-size: 1.1em;
}
body {
	max-width:100%;
	background: var(--bg-background);
	font-family: var(--font-main);
	color: var(--color-main);
	letter-spacing: 1px;
}

hr {
	width: 98%;
	margin: 2em auto;
}





#container {
	display: block;
	max-width:1200px;
	margin: 0 auto;
	height: 100vh;
}

.header {
	border-bottom: 1px solid var(--bg-border);
}

#head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1em;
	border-bottom: 1px solid var(--bg-border);
}

#logo-header {
	max-height: var(--logo-header-height);
}


#alert {
	display: flex;
	align-items: center;
	background: var(--bg-alert);
	color: var(--color-alert);
	padding: 1em;
	font-size: var(--font-small);
	text-align: center;
}

#alert img {
	height: 50px;
	margin-right: 1em;
}

#alert a {
	color: var(--color-alert);
}

#nav-categories {
	list-style: none;
	display: flex;
	text-align: center;
	overflow-x: scroll;
	padding: 0;
	border-bottom: 1px solid var(--bg-border);
}

#nav-categories a {
	text-decoration: none;
	color: unset;
}

.active {
	background: var(--bg-active);
	padding: 3px;
	border-radius: 5px;
}
#nav-categories li {
	margin: 1em;
}

@media only screen and (max-width:800px) {
	#nav-categories img {
		display: none;
	}
}
#nav-categories img {
	max-width: unset;
	height: 50px;
	margin-bottom: .5em;
}

/* Modal Delivery Times */

#modalDeliveryTimes {
	font-size: .9em;
}

.delivery {
	margin-bottom: .3em;
}

.delivery:nth-of-type(2n) {
	background: var(--bg-background);
}

.delivery-day {
	width: auto;
}

.delivery-time {
	text-align: right;
}

.btn-delivery-area {
	width: 49%;
	padding: 1%;
	border-radius: 5px;
	background: #FFF;
}

.btn-delivery-area:hover {
	border: 2px solid var(--bg-heading);
	background: var(--bg-box);
}

.btn-delivery-area .material-icons {
	display: block;
	font-size: 6em;
}


/* Modal Delivery Area */
#modalDeliveryArea .modal-header {
	background: var(--el-bg);
}



/* Homepage */

.intro-image {
	width: 100%;
	height: 400px;
	object-fit: cover;
	filter: brightness(50%);
}

.intro-text {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	height: 200px;
	margin-top: -400px;
	filter: brightness(90%);
}

#welcome {
	text-align: center;
	padding: .5em 1em;
}


/*
	Categories
}*/

#categories {
	display: grid;
	grid-template-columns: repeat(auto-fill, 48%);
	grid-gap: 1%;
	justify-content: space-between;
	margin-bottom: 2em;
}

#categories a {
	text-decoration: none;
}

.category-image {
	border-radius: 10px;
	box-shadow: var(--box-shadow);
}

#categories figcaption {
	margin-top: -2rem;
	margin-left: 10px;
	color: #FFF;
	font-weight: bold;
	text-shadow: var(--text-shadow);
	white-space: nowrap;
	overflow: hidden;
}

@media only screen and (min-width:600px) {
	#categories {
		grid-template-columns: repeat(auto-fill, 32%);
	}
}

@media only screen and (min-width:1000px) {
	#categories {
		grid-template-columns: repeat(auto-fill, 24%);
	}
}


/*
	App ad
 */

#app-box {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	background: var(--bg-box);
}

#startseite #app-box {
	margin-bottom: -2em;
}

#app-box-head {
	flex: 1 100%;
	margin-top: 2em;
	margin-bottom: 1em;
}
#app-box-badges, #app-box-image {
	flex: 1 50%;
	text-align: center;
}
#app-box-badges img {
	max-width: 120px;
	margin: .5em;
}
#app-box-qr {
	display: none;
}
#app-box-image img {
	max-height: 250px;
}

@media only screen and (min-width: 800px) {
	#app-box-head {
		text-align: center;
	}

	#app-box-badges, #app-box-image {
		flex: 1 30%;
	}

	#app-box-badges img {
		max-width: 150px;
	}
}

@media only screen and (min-width: 1000px) {
	#app-box-badges, #app-box-image {
		flex: 1 30%;
	}

	#app-box-qr {
		display: unset;
		width: 20%;
		text-align: center;
	}
	#app-box-qr img {
		max-width: 175px;
	}
}


/*
	Products
 */
#category-image {
	height: 150px;
	width: 100%;
	object-fit: cover;
}
@media only screen and (min-width:600px) {
	#category-image {
		height: 180px;
	}
}
@media only screen and (min-width:1200px) {
	#category-image {
		height: 240px;
	}
}

.discountLabel {
	display: inline-block;
	border-radius: 0 20px 20px 0;
	background: var(--bg-alert);
	color: var(--color-alert);
	margin: 2em 0 0 0;
	padding: .5em 1em .5em .5em;
}

a.product {
	text-decoration: none;
	color: unset;
}

a.product:hover {
	color: unset;
}

.product-box {
	display: flex;
	background: #FFF;
	border: 1px solid var(--bg-border);
	border-radius: 10px;
	padding: 1em;
	margin-bottom: 1em;
}

.product-box img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 10px;
}
@media only screen and (min-width:600px) {
	.product-box img {
		width: 150px;
		height: 100px;
	}
}
@media only screen and (min-width:800px) {
	.product-box img {
		width: 200px;
		height: 167px;
	}
}

.product-content {
	flex: 1;
	margin-left: 1em;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
}

.product-name {
	font-weight: bold;
	margin-bottom: 0;
}

@media only screen and (max-width:600px) {
	.product-description {
		font-size: var(--font-small);
	}
}

.product-data {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2em;
}

.product-label {
	width: 1.2em !important;
	height: 1.2em !important;
	margin-right: .3em;
}

.product-prices {
	display: flex;
}

.product-price-stroke {
	color: var(--color-light);
	text-decoration: line-through;
}

.product-price {
	margin-left: 1em;
	font-weight: bold;
	color: var(--color-heading);
}


/*
	Product
 */


#modal-product-body {
	padding: 0;
}

#modal-product-body .container-fluid:first-of-type {
	margin-top: 1em;
}

#modal-product-content {
	margin-top: 1em;
}

#toppings {
	background: #FFF;
	border: 1px solid var(--bg-border);
	border-radius: 10px;
	padding: 1em;
	margin-bottom: 1em;
}

.topping-box {
	display: flex;
	align-items: center;
	padding-bottom: 1em;
	margin-bottom: 1em;
	border-bottom: 1px solid var(--bg-border);
}

.topping-box:last-of-type {
	border-bottom: none;
	padding-bottom: unset;
	margin-bottom: unset;
}

.topping-box img {
	width: 100px;
}

.topping-name {
	flex: 1;
	margin-left: 1em;
}

.topping-free {
	color: var(--color-heading);
	font-style: italic;
}

#notiz {
	width: 100%;
	height: 5em;
	border-radius: .5em;
	padding: .5em;
	resize: none;
	margin-bottom: 1em;
}


#product-add-amount {
	background: var(--bg-background-light);
	display: flex;
	margin: 1em;
	padding: .5em;
	border-radius: .5em;
}
#cart #product-add-amount {
	margin: 0;
	padding: .3em;
}

#product-add-amount div {
	display: flex;
	align-items: center;
}

.product-add-amount-button {
	background: #FFF;
	padding: .2em .7em;
	border-radius: .5em;
	cursor: pointer;
}

#product-add-amount-number {
	padding: 0 1em;
}

#product-add-button {
	flex: 1;
	padding: 0 1em 0 0;
}

#product-add-button .button {
	/*width: 100%;
	border-radius: .5em;*/
}

/*
	Menu
 */
.menu-product {
	background: var(--bg-background);
	margin: 1em;
	border-radius: 10px;
}


/*
	Cart
 */

#cart a.product {
	text-decoration: underline;
}

.cart-product-box {
	background: #FFF;
	border: 1px solid var(--bg-border);
	border-radius: 10px;
	padding: 1em;
	margin-bottom: 1em;
}
.cart-product-box-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: .3em;
}
.cart-product-box-row:last-of-type {
	margin-bottom: 0;
}

.cart-product-delete {
	margin: .5em;
}

/*
	Order form
 */

#sonderwuensche::placeholder {
	color: var(--bg-border);
}

.bestellbutton {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}


.payment-methods {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 15px; /* Für die mobile Ansicht */
}

.payment-method {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/*width: 120px; /* Adjust width as needed */
	margin: 10px;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background-color: #fff;
	cursor: pointer;
	transition: all 0.3s;
	color: var(--color-main);
	font-size: var(--font-small);
}

.payment-method span {
	display: block;
	text-align: center;
}

.payment-method img {
	max-width: 80px;
	margin-bottom: 5px;
}

/* Hover effect */
.payment-method:hover {
	background-color: var(--bg-hover);
}

.payment-method.active {
	border-color: var(--bg-background-light);
	background-color: var(--bg-active);
}




/*
	Order confirm
 */

#order-confirm {
	margin-top: 5em;
	margin-bottom: 7em;
}

#order-confirm * {
	margin-top: 2em;
}

#icon-confirm {
	font-size: 1.2em;
	margin-right: .5em;
}


/*
	Info page
 */

#impressum .container-fluid {
	margin-top: 4em;
}

/*
	Ende 2024
 */





#demo_hinweis {
	display: none;
}

body#produkt #nav_kat_img, body#produkt #nav_aussen, body#produkt #nav_innen,
body#bestellen #nav_kat_img, body#bestellen #nav_aussen, body#bestellen #nav_innen,
body#bestellen-fertig #nav_kat_img, body#bestellen-fertig #nav_aussen, body#bestellen-fertig #nav_innen,
body#menue_auswahl #nav_kat_img, body#menue_auswahl #nav_aussen, body#menue_auswahl #nav_innen {
	 display:none;}

img {
	max-width:100%;
	height: auto;
}

a {
	color: #B60F0F;
	/*text-decoration: none;
	color: #FFF;*/
}

a:hover {
	color: #ff1515;
}

a.button:hover {
	color: #FFF;
}

select {
    padding: 0.2em;
}

.zentriert {
	text-align:center;
}

input[type="radio"] {
	margin: 0 0.5em 1em 0.5em;
}

.lass {
	display: none;
}

.button {
	/*display: block;
	float: left;
	margin: 1em 1em 1em 0;
	padding: 0.5em;
	text-decoration: none;
	background: #D51111;
	color: white;*/
	padding: 0.5em;
	text-decoration: none;
	background: var(--bg-heading);
	color: #FFF;
	width: 100%;
	border-radius: .5em;
}

.button[disabled] {
	background: var(--bg-disabled);
}

.button_gross {
	float: right;
	width: 90%;
	text-align: center;
	margin: 1em 5%;
}

.button_klein {
	width: 20%;
	margin-left: 2em;
}

.button_deaktiviert {
	background: #AAAAAA;
}

.formbutton {
	background: #F00;
	color: #FFF;
}

.form-readonly {
	color: #999;
}

.hinweistext {
	color: red;
}

.hinweisbox {
	border: 2px dotted #F00;
	background: var(--bg-box);
	padding: 1em;
	margin-bottom: 2em;
}

.kleineschrift {
    font-size:80%;
}

.titel, .hinweis_info {
	margin-left: 2%;
	padding:0;
}

.hinweis_info {
	color: red;
	border:1px solid #F00;
	padding:0.5em;
	margin-right: 5%;
}

.hinweis_zusatzstoffe {
	margin-left:2%;
	text-decoration:none;
}

.zusatzstoffe {
	font-size: 0.8em;
}

.warenkorb {
	color: red;
}


#ladebalken {
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1000;
	background: #000;
	opacity: 0.7;
}

#ladebalken img {
	position: fixed;
	top: 48%;
	left: 45%;
}

/* ############ */

.content-box {
	width: 90%;
	padding: 2%;
	margin: 0.5em 3% 1em 3%;
	line-height:1.5em;
	text-align: center;
}

.content-box h2 {
	margin: 2em;
}


/* App ad begin */
#app-ad {
	background: var(--el-bg);
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	width: 94%;
	padding: 0;
}

#app-ad h2 {
	margin: 1.5em 1em 1em 2em;
}

#app-ad-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}


#app-ad-content .hinweistext {
	white-space: nowrap;
}

.badge-app {
	width: 25%;
	margin: 2em;
}

@media only screen and (min-width:600px) {
	.badge-app {
		width: 20%;
	}
}
#app-thumbnail {
	max-height: 220px;
	margin: 1em;
}


@media only screen and (min-width:800px) {
	#app-ad-content {
		flex-direction: row;
	}


	#app-ad-content div:first-child {
		flex: 70%;
		padding: 3em;
	}

	#app-ad-content div:last-child {
		flex: 30%;
	}

}
/* App ad end */

/* Kategorien Startseite begin */
/*#kategorien {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#kategorien figure {
	flex: 28%;
	margin: 1em;
}

@media only screen and (min-width:1000px) {
	#kategorien figure {
		flex: 20%;
	}
}*/
#kategorien {
	width: 94%;
	padding: 0;
}

#kategorien figure {
	display: inline-block;
	width: 45%;
	margin: 2%;
}

#kategorien img {
	border-radius: 2px;
}
/*
#kategorien img {
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

#kategorien img:hover {
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}*/

@media only screen and (min-width:600px) {
	#kategorien figure {
		width: 28%;
		margin: 1.5% 1%;
	}
}

@media only screen and (min-width:800px) {
	#kategorien figure {
		width: 22%;
	}
}

/* Kategorien Startseite end */

/* ############ */





#footer-cart, #footer-up {
	position: fixed;
	bottom: 1em;
	background: var(--bg-background);
	border: 1px solid #c6c5c5;
	border-radius: 100%;
	margin: 1em;
	padding: .5em;
	box-shadow: 0 0 0.5em 0 rgba(125, 125, 125, 0.75)
}

#footer-up{
	right:1em;
}

/* NAVI */

#nav-burger {
	font-size: 1.5em;
}

#nav-main {
	display: none;
	padding: 0 1em 0 0;
}

#nav-main ul li {
	display: inline;
	margin: 0 .5em;
}

#nav-mobile {
	text-align: center;
}

#nav-mobile a {
	text-decoration: none;
}

#nav-mobile-icons span {
	margin: 1em .5em;
}

#nav-mobile-links {
	border-bottom: 1px solid var(--bg-background-light);
}

.nav-mobile-link {
	margin: 1em;
	padding: .5em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-mobile-link .material-icons {
	margin-right: .5em;
}

#nav-mobile-categories {
	list-style: none;
	padding:0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.nav-img {
	width: 120px;
	margin: 2em 1.5em;
}

.nav-img img {
	width: 80px;
}

@media only screen and (min-width: 600px) {
	#nav-mobile {
		display: flex;
		align-items: center;
	}

	#nav-mobile-links {
		display: flex;
		flex-direction: column;
		align-items: baseline;
		width: 33%;
		margin-left: 1em;
		margin-bottom: 1em;
		border-bottom: none;
		border-right: 1px solid var(--bg-background-light);
	}

	.nav-mobile-link {
		margin: .5em;
	}
}




.header nav {
	white-space:nowrap;
	width:100%;
	-webkit-overflow-scrolling: touch;
	/*border-top: 1px solid #B60F0F;*/
}

#nav_aussen {
	height: 7em;
	overflow:hidden;
}

#nav_innen {
	height: 8em;
	overflow:auto;
	overflow-y:hidden;
}

#nav_innen:hover {
	height:7em;
}

#content {
	/*margin-bottom:4em;
	padding-bottom:2em;*/
	padding-bottom: 2em;
}

footer {
	/*width:92%;
	padding:1%;
	margin: 0 2% 4em 2%;
	border: 1px dotted #7D7D7D;
	text-align:center;
	color: #666;*/
	background: #000;
	padding:1%;
	text-align:center;
	color: #FFF;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding-bottom: 3em;
}

footer div {
	padding: 2em;
	flex-basis: 50%;
}

footer p {
	font-size:.8em;
}

footer a {
	color: #FFF;
	text-decoration: underline;
}

.icon-sm {
	width: 28px;
	margin: .5em;
}
.smbuttons { display:inline-block;}
.smbuttons a {
	display: block;
	float: left;
	width:48px;
	height:48px;
	margin-left:1em;
	background-image: url(../images/sprite-sm-48.png);
	background-repeat: no-repeat;
	text-indent:-9999px;
}

.sm_button {
	display: inline-block;
	width:48px;
	height:48px;
	margin-left:1em;
	background-image: url(../images/sprite-sm-48.png);
	background-repeat: no-repeat;
	text-indent:-9999px;
}

.sm_facebook {
	background-position: -26px -14px;
}

.sm_googleplus {
	background-position: -26px -93px;
}

.sm_twitter {
	background-position: -26px -330px;
}

.sm_instagram {
	background-position: -26px -172px;
}

.sm_youtube {
	background-position: -26px -409px;
}

.sm_snapchat {
	background-position: -26px -488px;
}

.footer {
	position: fixed;
	bottom: 0;
	width:100%;
	background: #F6F6F7;
	height: 4em;
	font-size: 0.8em;
}

.footer li {
	list-style:none;
	width:32%;
	padding:0.4em 0 0 0;
	
	border-right: 1px solid #999;
	display:inline-block;
	text-align:center;
}

.footer li:last-child {
	border-right: none;
}


.footer li a {
	color: #333;
	text-decoration: none;
	text-align:center;
}

.footer li a:hover {
	color: #B60F0F;
}

.footer p {
	margin:0;
	padding:0;
}

.clear {
	clear: both;
}

/*ENDE GRUNDGERÜST*/

/*NAVI*/

#nav_forward { margin-top:-9999px;}

#header_menu {
	display:block;
	position:absolute;
	right:1em;
	top:10px;
	width:24px;
	padding: 2% 3%;
	cursor:pointer;
}

#header_menu a {
	color: #B60F0F;
}

/*
#navMain {
	display:none;
	list-style: none;
	padding:2%;
	width:95%;
}

#navMain li a {
	background:#FF9;
	display:block;
	padding: 3% 0 3% 0;
	margin-bottom:2%;
	text-decoration:none;
	text-align:center;
	font-weight: bold;
	
	border-radius: 2px 2px 2px 2px;
	-moz-border-radius: 2px 2px 2px 2px;
	-webkit-border-radius: 2px 2px 2px 2px;
	border: 1px solid #F00;
}

#navMain_kat {
	list-style: none;
	width: 80%;
}

#navMain_kat li a {
	background: #F00;
	color: #FF9;
}
*/
#nav_kat, #nav_kat_img, #nav_aussen, #nav_innen {
	display: none;
}


/*ENDE NAVI*/

/* Abfragebox */

#abfragebox_hintergrund {
	background-color: #000;
	background:rgba(0,0,0,.8);
	height: 100%;
	width: 100%;
	margin-top: 0;
	padding-top: 0;
	position: fixed;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

#abfragebox {
	color: #333;
	background-color: #FFF;
	width: 90%;
	max-width: 600px;
	height: auto;
	min-height:12em;
	max-height: 70%;
	left: 5%;
	top: 25%;
	padding:0;
	border: 1px solid #000;
	border-radius: 10px;
}

#abfragebox .vorbestellen {
	top: 5%;
	background: yellow;
}

#abfragebox_content {
	float: left;
	width: 94%;
	height: 70%;
	padding: 2%;
	overflow: auto;
}

#abfragebox h1 {
	font-size: 1.2em;
	padding: .5em 0;
	margin: 0;
	background: #ffeedf;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom: 1px solid #e8d7c8;
	text-align: center;
}

#abfragebox .plzbutton {
	border: 0;
	background-color: transparent;
	cursor: pointer;
	font-size: 100%;
	color: #333;
	padding-left: 20px;
}

#plz_auswahl, #plz_select {
	width: 80%;
	text-align:center;
}

#abfragebox .button {
	display:inline;
	float:left;
}

#abfragebox img {
	max-width:15%;
	margin-top:1em;
}

#abfragebox p {
	width: 96%;
	padding: 0 2%;
	text-align: center;
}

/* PLZ neue Abfrage */
.liefer-gebiet-auswahl {
	display: flex;
	justify-content: space-around;
	padding: 2%;
}

.plz-button {
	text-align: center;
	/*width: 45%;*/
}

.plz-button label {
	display: block;
	border: 1px solid #d3c3c3;
	border-radius: 15px;
	padding: 2em;
	cursor: pointer;
}

.plz-button label:hover {
	background: var(--el-bg);
}

.plz-button-btn {
	flex-basis: 100%;
	margin: 2em 5% 1em 5%;
}

.plz-auswahl {
	display: none;
}

.plz-auswahl:checked + label {
	background: var(--bg-active);
	box-shadow: 6px 6px 10px hsla(300, 17.6%, 66.7%, 0.3) inset;
}

/*.plz-form {
	width: 96%;
	padding: 1%;
	margin: 2%;
}*/

.plz-icon {
	max-height: 5em;
	max-width: 5em;
}
/* Abfragebox Ende */

/*KATEGORIEN*/
.kat {
	padding-bottom: 3%;
	margin-bottom: 2%;
	min-height: 3em;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	float: left;
	width:100%;
}

.kat_titel {
	position: absolute;
	font-size: 1.2em;
	color: #000;
	padding: 4% 4%;
	margin: 1% 0 0 4%;
}

.katbild, .pr_katbild {
	min-height: 5em;
	margin:0 0 0.3em 0;
	padding:0;
	display: inline-block;
	max-width:100%;
}

.kat_bildtitel, .pr_kat_bildtitel {
	position: absolute;
	margin: 15% 0 0 5%;
	padding: 2% 4%;
	background: #FFF;
	opacity: 0.9;
	border-radius: 5%;
	font-size: 1.2em;
	color: #000;

}

.kat_bildtitel p {
	font-size: 0.6em;
	padding:0;
	margin:0;
}

.kat_freitext {
	background: var(--el-bg);
	border-bottom: 1px solid #999;
	margin: -0.3em 0 0 0;
	padding:0.5em;
}

.kat_beschreibung {
	padding: 2em;
	font-style: italic;
	line-height: 1.5em;
	font-weight: lighter;
}
/*ENDE KATEGORIEN*/


/*PRODUKTLISTE*/
.produkt {
	border-bottom: 1px solid #CCC;
	padding: 1em 0.5em;
}

.produktbild {
	width: 100%;
	text-align:center;
	margin-bottom: 1em;
	background: rgba(255,255,255,1);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
}

.produktname, .menue_produktname {
	font-size:1em;
	font-weight: bold;
	margin-bottom: 0.3em;
	margin-top: 0.3em;
	display: inline-block;
}

.zusatzstoffe_deklaration p {
	display: inline-block;
	background:#FFFF76;
	padding:0.5em;
	font-size:0.8em;
	line-height:1.2em;
}

.zutaten_zusatzstoffe {
	font-size: 0.8em;
}

.produktbezeichnung {
	font-size:0.8em;
	margin:0 auto;
}

.produktpreise {
	float: right;
	width: 100%;
}

.produktpreisbox {
	float: left;
	margin: 2% 4% 2% 0;
	width: 25%;
	border: 1px solid #999;
	background: var(--el-bg);
}

.produktpreisbox:hover,
.produktpreisbox:active {
	background: #FF9;
}

.produktpreisbox .preiskategorie,
.produktpreisbox .grundpreis {
	text-align: center;
	padding-bottom: 0.8em;
	border-bottom: 1px solid #CCC;
	margin: 0;
	padding: 0.5em;
	font-size: 0.8em;
}
.produktpreisbox .grundpreis {
	font-size: 0.7em;
}
.produktpreisbox .preis {
	font-weight: bold;
	text-align: center;
	margin: 0;
	padding: 0.5em;
}

.streichpreis {
	font-size: 0.8em;
	-webkit-text-decoration-line: line-through;
	text-decoration: line-through;
}

/*ENDE PRODUKTLISTE*/

/*PRODUKT*/
.produkt_auswahl {
	background:#FFF;
	float: left;
	width: 92%;
	margin: 1em 3% 4em 3%;
	padding:0.5em;
}

.produkt_auswahlbox {
	float: left;
	background: #FF9;
	width: 92%;
	padding: 0 2% 2% 2%;
	margin-bottom: 1em;
}

#pr_anzahl {
	width:4em;
	margin-right:0.5em;
}

.produkt_btn_abbr {
	color: red;
	width: 2em;
	height: 2em;
	float: right;
	padding:0.2em;
}

.produkt_btn_ok, .btn_ok, .menue_btn_ok {
	color: green;
	width: 2em;
	height: 2em;
	float: right;
	margin: 0 1.5em 1em 1em;
	padding:0.2em;
}

.produkt_btn_abbr:hover,
.produkt_btn_abbr:active,
.produkt_btn_ok:hover {
	font-size:120%;
	padding:0;
}

.produkt_extras, .produkt_sorte, .produkt_sonderwunsch, .produkt_preis {
	font-size: 0.8em;
}

.sortenauswahl {
	font-size: 0.8em;
}

.zutatenlink {
	text-decoration: none;
	display: block;
	margin-bottom: 1.5em;
	font-size: 0.8em;
}

.zutatenlink:hover { font-weight: bold; }
.zutat_ausgewaehlt { font-weight: bold; font-style: italic; font-size:0.9em;}

#sonderwunschfeld { width:100%; height:5em;}

#kennz_inhalt { font-size: 0.8em; }
/*ENDE PRODUKT*/

/* SYMBOLE */
.symbol_vegetarisch {
	background: url('../images/sprite_symbole.png') no-repeat -6px -4px;
	width: 27px;
	height: 28px;
	display: inline-block;
}

.symbol_vegan {
	background: url('../images/sprite_symbole.png') no-repeat -52px -4px;
	width: 27px;
	height: 28px;
	display: inline-block;
}

.symbol_halal {
	background: url('../images/sprite_symbole.png') no-repeat -6px -41px;
	width: 27px;
	height: 28px;
	display: inline-block;
}

.symbol_koscher {
	background: url('../images/sprite_symbole.png') no-repeat -52px -41px;
	width: 27px;
	height: 28px;
	display: inline-block;
}

.symbol_neu {
	background: url('../images/sprite_symbole.png') no-repeat -7px -79px;
	width: 27px;
	height: 28px;
	display: inline-block;
}

.symbol_tipp {
	background: url('../images/sprite_symbole.png') no-repeat -52px -79px;
	width: 27px;
	height: 28px;
	display: inline-block;
}

.symbol_scharf {
	background: url('../images/sprite_symbole.png') no-repeat -7px -114px;
	width: 27px;
	height: 28px;
	display: inline-block;
}

.symbole_legende {
	margin-left: 2%;
}

/* ENDE SYMBOLE */

/* MENÜ */
.menue_titel {
	margin: 1em auto 0 2%;
	width:80%;
}
/*Ende Menü*/

/*Warenkorb*/
.warenkorb_box, .content_box, .content_app {
	background: #FFC;
	width: 90%;
	padding: 2%;
	margin: 0.5em 3% 1em 3%;
	font-size: 0.8em;
	line-height:1.5em;
}

.warenkorb_auswahl {
    padding: 0.5em;
    font-size: 1em;
	line-height:1.5em;
    border: #929292 2px solid;
}

.warenkorb_box:last-of-type,
.content_box:last-of-type,
.menue_speichern  {
	margin-bottom: 4em;
}

.warenkorb_button {
	background: #FF9;
	color: red;
	border: 1px solid red;
}

.tbl-warenkorb {
	width: 100%;
}

.tbl-warenkorb td {
	line-height: 1.4em;
}

.tbl-wk-inhalt {
	width: 85%;
}

.tbl-wk-preis {
	width: 15%;
	text-align: right;
	white-space: nowrap;
}

.tbl-kennzeichnung {
    margin-top: 2em;
    line-height: 1.4em;
}

.tbl-kennzeichnung td {
    padding: 0 1em 0 0;
    vertical-align: top;
}

.tbl-kennzeichnung .wert {
    text-align: right;
}

.bestell_button {
	float:right;
	width:90%;
	margin-right:5%;
	/*margin-top:-3em;*/
}

#paypal-buttons {
	/*display: flex;
	justify-content: center;*/
	font-size: 1em;
	text-align: center;
}

#paypal-button-container {
	max-width: 50%;
	margin: auto;
}

#loading {
	position: fixed;
	opacity: 0.5;
	top: 0;
	left: 0;width: 100%;
	height: 100%;
	z-index: 9999;
	background: grey;
	display: none;
}

.loader {
	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 16px solid #3498db;
	width: 120px;
	height: 120px;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
	margin: 40%;
}
/* Safari */
@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
/*Ende Warenkorb*/

/*Bestellformular*/
.bestellformular {
	padding:2%;
}

fieldset {
    padding: 1em;
}

.legend_bestform {
    margin: 0 auto;
    text-align: center;
    padding:0.7em;
    border: 1px solid #c2c2c2;
    border-radius: 0.7em;
    font-weight: bold;
}

.textfeld label {
	float: left;
	width: 90%;
	margin-top: 1em;
}

.textfeld input, .textfeld textarea, #sonderwunschfeld, #gutscheincode {
	width: 90%;
	border-radius:5px;
	background: #F2F2F2;
	border: 1px solid #DADADA;
	line-height:1.5em;
	padding:0.5em;
	margin:0.2em 0 0.5em 0;
}

#gutscheincode { width: 50%;}

#gutscheinformular { margin-top: 3em; }
#gutscheinform { height: 2.5em;}

.textfeld textarea {
	width: 90%;
	height: 4em;	
}

.checkbox {
	margin-top:1em;
}

/*Ende Bestellformular*/

/* Bestellung Bestätigung */
#pp_best_text { display: none;}
/* Ende Bestellung Bestätigung */

/*Login*/
.daten_laden {
	border: 1px solid #FC6;
	padding: 0 1em 1em 1em;
}
/*Ende Login*/


/* App */
.content_app { border-bottom: 1px solid #E2E2E2; min-height: 10em;
		background-image: url(../images/iphone_oben.png); background-repeat: no-repeat; background-position: right; background-size: contain;
	}
#app_werbung .content_app {margin-bottom: -5em; }
.img_badge { max-width: 45%; float: left; margin-right: 1em; margin-top: 1em;}
.content_app h2 { display: inline-block; padding: 0.3em;}
.content_app p { width: 60%; font-weight: bold; font-size: 1em; line-height: 1.4em; padding: 0.3em;}


/* Ende App */





@media only screen and (min-width: 600px) {
	#content { /*padding-top:1em;*/}
	.katbild, .kat { width:45%; margin: 0.3em 2% 0.3em 2%; }
	.kat { height: 75%; }
	.kat_bildtitel { margin: 10% 0 0 3%; padding: 1% 2%;}
	
	#header_menu { display: none;}
	
	/*Navi Liste*/
	#nav_kat {
		list-style: none;
		display: inline-block;
		font-size:0.9em;
	}

	#nav_kat li {
		float: left;
		margin: 0 2em 1em 0;
		padding: 0.3em 0.3em 0.3em 0.5em;
		width: 17%;
		border-bottom: 1px solid #CCC;
		border-radius: 5px;
		display: block;
	}

	#nav_kat li:hover {
		background: #FFFF99;
	}
	/*Ende Navi LIste*/
	
	/*Navi Bilder*/
	#nav_aussen, #nav_innen { display:block;}
	#nav_kat_img {
		list-style: none;
		display:-webkit-inline-flex;
		display:inline-flex;
	}
	
	#nav_kat_img li {
		float: left;
		margin-right: 2em;
		text-align: center;
	}
	
	#nav_kat_img a {
		color: #666;
		text-decoration:none;
	}
	
	#nav_kat_img a:hover {
		color: #B60F0F;
	}
	

	#nav_kat_img li img {
		max-width:80px;
		-webkit-filter: grayscale(100%); filter: grayscale(100%);
	}
	
	#nav_kat_img li#nav_active {
		border-bottom: 1px solid #CCC;
		padding-bottom:0.5em;
	}
	#nav_kat_img li#nav_active img, 
	#nav_kat_img li:hover img {
		-webkit-filter: grayscale(0%); filter: grayscale(0%);		
	}
	#nav_kat_img li#nav_active {
		color: #B60F0F;
	}

	#nav_kat_img li span {
		display:block;
		text-align:center;
		text-transform:uppercase;
		font-size: 0.9em;
		padding-top:0.5em;
	}
	
	/*Scroll-Buttons*/
	#nav_back, #nav_forward { position: absolute; width:1em; height: 4.5em;background: #000; opacity:0.2; color:#999; padding: 2.5em 0.5em 0 1em; z-index:1000;cursor:pointer;}
	#nav_back:hover, #nav_forward:hover { opacity: 0.7; width:2em;}
	#nav_back {left:0; margin:0;}
	#nav_forward { right: 0; margin:0;}
	
	/*Ende Navi Bilder*/
	
	/*Produkte*/
	.pr_katbild { display:none;}
	.pr_kat_bildtitel { position:relative; margin:0 0 0 1em; background:none; opacity:1; padding:0.5em;text-transform:uppercase;font-size:1.5em;}
	.kat_freitext { padding:0.5em 0.5em 0.5em 2em;}
	
	/*Produkt*/
	.zutatenlink { display: inline-block;width:50%;}
	.produkt_btn_abbr, .produkt_btn_ok, .btn_ok, .menue_btn_ok { font-size:1.5em;}
	.produkt_btn_abbr:hover, .produkt_btn_abbr:active, .produkt_btn_ok:hover {font-size:1.7em;}
	
	/*Menü*/
	h2.titel {margin-left:0;}
	.menue_titel { margin: 1em auto 0 0;}
	
	/*Warenkorb*/
	.titel, .hinweis_info {margin-left: 1em; }
	
	.bestell_button { 	margin-right: 3em; width:auto;}
	.bestellformular { padding:3%;}
	.datenschutzhinweis { margin-left:1em;}
	
	/*App*/
	.img_badge { max-width: 25%; }
	.content_app p { width: 75%; }
}

@media only screen and (min-width: 800px) {
	/*#nav-burger { display: none; }
	#nav-main { display: unset; }*/

	.footer {
		position: absolute;
		top:0;
		right:0;
		width:35%;
		margin: 2em 3em 0 0;
		background: none;
		color: #333;
	}
	
    .produktbild { width: 60%; float:left; background: none;}
	.produkt_info {width:35%; float: left; margin:5% 0 0 2em; }
	.produkt_info_allein { width: 80%; float:left; margin: 1em 0 0 2em;}
	.produktname, .menue_produktname { text-transform: uppercase; border-bottom:1px solid #74B168; padding-bottom:0.3em; letter-spacing:2px; display:inline-block;}
	.menue_produktname { border-bottom:none;}
	.produktbezeichnung {padding:0.3em 0;}
	
	.zutatenlink { width:33%;}
	
	.textfeld input { width:45%;}
	.bestellbutton { float: right;}

	.datenschutzhinweis { margin-left:2em;}

	/*App*/
	.img_badge { max-width: 20%; }
}

@media only screen and (min-width: 1000px) {
	.kat_bildtitel { margin: 5% 0 0 2%; }
	.katbild, .kat { width: 29%; margin: 0.3em 2%; }
	.produkt_info {margin-top:4%;}
	.zutatenlink { width:25%;}
	
}

@media only screen and (min-width: 1200px) {
	/*body { background:url(../images/hg.jpg); background-size:cover; background-attachment:fixed; }*/
	/*#container { -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1); box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);}*/
	.warenkorb_box, .content_box { font-size:0.9em;}
	.produkt_auswahl {	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1); box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);}
	footer { border-left:none; border-right: none; border-bottom: none;}
	
	/*App*/
	.img_badge { max-width: 15%; }
}

@media only screen and (min-width: 1300px) {
	.footer {width:30%; right:10%;}
}

@media only screen and (min-width: 1300px) {
	.kat_bildtitel {margin:3.5em 1em; padding:0.5em 0.5em;}
}

@media only screen and (min-width: 1600px) {
	.produkt_info {margin-top:3%;}
	.footer {width:25%; right:15%;}
}

@media only screen and (min-width: 2000px) {
	.footer {right:25%; width:20%;}
}