@import url(reset.css);   
@import url(normalize.css);  


/* Entfernt die Pfeile in Firefox und anderen modernen Browsern */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
	}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
	}

/* ==============================
	Styles for mobile viewport <768px(48em)
	=============================*/

/* Styles for body and images */

:root {
	font-size: calc(1vw+0.6em); /* Basis-Schriftgröße */
	font-family: Helvetica, Verdana, Arial, sans-serif;
	--primary-color: #c81e46;   /*   gold:  #ffc400   grau  #666a72 */
	--secondary-color:#666a72;  /*  #d4af37*/
	--tertiary-color: #5c2c17;
	--quaternary-color: #73381c;
    	--text-color: #333333;
	--btn-color: #a62817;
    	--hover-color: #E91E63;
	--graukasten-color: #f8f8f8;
  }

* {
	box-sizing:border-box;
	} 

body {
	color: var(--text-color);
    background: var(--primary-color);
	line-height:1.2;
	}

#container {
    padding: 0.5em;
	}

/*Style rules for skip navigation */
.skip {
	position:absolute;
	left:-999px;
	}

.skip:focus {
	color: #000;
	background-color: #fff;
	text-decoration:none;
	padding: 0.5%;
	top:auto;
	left:auto;
	right:1px;
	z-index: 1;
	}

/* Styles for header*/
header{
	top:0;
	background-color:#fff;
	height:190px;
	}

header img {
	margin:0 auto;	
	}

img { /*WICHTIG */
    max-width: 100%;
    display: block;
	}


/* ==============================
	Navigation/ Hamburger menu für Mobile
	=============================*/

.mobile-nav {
	position: relative;
	}
#menu-links, .tablet-desktop {
	display: none;
	}
.mobile-nav li {
	margin:0.5em 3.5em 0.5em 0.1em;
	border: 1px solid #fff;	
	border-radius: 0.5em;
	}
.mobile-nav a {
	color: #fff;
	text-align:left;
	font-size:2rem;
	font-family: Helvetica, Arial, sans-serif;
	text-decoration:none;
	padding:3%;
	display:block;
	}
.mobile-nav a.menu-icon {
	display:block;
	position:absolute;
	right:0;
	top:0;
	background: var(--primary-color);
    color: white;
	cursor: pointer;
	}

.dropdown {
	position: relative;
	display: inline-block;
	}
.dropdown ul{
	padding-left:0;
}
.dropdown-menu {
	display: none;
	position: absolute;
	background-color: white;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	list-style: none;
	}
.dropdown-menu a {
	color: black;
	font-size: 1.5rem;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	}
.dropdown-menu a:hover {
	background-color: #ddd;
	}
.dropdown.active .dropdown-menu {
	display: block;
	}

/* ==============================
	ENDE Navigation/ Hamburger menu
	=============================*/


#breadcrumb {
color: var(--primary-color);
font-size: 0.9em;
text-transform: uppercase;
line-height:2rem;
padding: 0.3rem;
}

#breadcrumb a {
text-decoration: none;
color: var(--primary-color);
text-transform: uppercase;  }

#breadcrumb a:hover {
    text-decoration: underline;
    color: var(--btn-color);
}

/* ==============================
	MAIN Styles
	=============================*/

main {
	background-color:#fff;
	padding:0.5em;
	font-size:1rem;
	}

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
	font-family: Georgia, serif;
	}

h1 {
	font-size:1.8rem;
	color: var(--secondary-color);
	padding-top: 1em;
	padding-bottom: 1em;
	}
h2 {
	font-size:1.6rem;
	color: var(--secondary-color); 
	}
h3 {
	font-size:1.4rem;
	color: var(--tertiary-color);
	}
h4 {
	font-size:1.2rem;
	color: var(--quaternary-color);
	margin-bottom: 0.5rem;
	margin-top:1rem;
	}
h5 {
	color:lightgrey;
	}
.title { /* übergreifend für alle h1 & h2 */
		text-align: center; /*Index- & Shop-Seite*/
		margin-bottom: 1.0em;
	}

p {
	line-height:1.6;
    margin-bottom: 1rem;
	}
	
section {
	padding: 2.5em 0;
	}


.gray-bg {  /* übergreifend für alle Graukästen */
	background: var(--graukasten-color); /*Index- & Shop-Seite*/
	}

/* ==============================
	ENDE MAIN Styles
	=============================*/


/* ==============================
	BUTTON Styles
	=============================*/

.btn-container {
	text-align: center; /* Zentriere den Container */
	margin-top:0;
	}
.btn {
    display: inline-block;
    background: var(--btn-color);
	color: #fff;
	font-size: 1.25rem;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
	white-space: nowrap;
    padding: 0.5em 1em;
	border: 1px solid transparent;
    border-radius: 0.25em;
	margin-bottom: 1em;
    margin-top: 0;
    cursor: pointer;
	}
.btn-primary{
	margin-right:1em;
	margin-top:1em;
}
.btn:hover, .btn-primary:focus {
	background: var(--hover-color);
    border-color: var(--hover-color);
	}

.btn-secondary {
		display: inline-block;
		background: var(--btn-color);
		color: #fff;
		text-decoration: none;
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
		padding: 0.2em;
		border: 1px solid transparent;
		border-radius: 0.25em;
		cursor: pointer;
		}

.btn-lg {
	font-size: 1.4rem;
    padding: 0.5em 1em;
    line-height: 1.5;
    border-radius: 0.3em;
	}
.btn-wk{
	background-color: rgb(0,68,0);
}
.btn-wk:hover, btn-wk:focus {
	background: green;
	border-color: var(--hover-color);
	}


.clicked {
		background-color: green !important;
		border-color: green !important;
	}
	
.clicked:hover {
		background-color: darkgreen !important;
	} 


.btn-increase, .btn-decrease{
	width:2rem;
}

.btn-bank {
    display: inline-block;
    /* background: #a62817; eventuell überflüssig */
    font-size: 1.25rem;
    color: #fff;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    padding: 0.5em 1em;
    border: 1px solid transparent;
    border-radius: 0.25em;
    margin-bottom: 3rem; /* Geänderte Werte */
    margin-top: 1rem;
    cursor: pointer;
    background-color: orange; /* Neue Farbe */
}

.btn-link {
    display: flex; /* Flexbox für volle Größe */
    justify-content: center; /* Text zentrieren */
    align-items: center; /* Vertikale Zentrierung */
    width: 100%; /* Volle Breite */
    height: 100%; /* Volle Höhe */
    color: white;
    text-decoration: none;
}


@media screen and (max-width: 22.5em) { /*360px */

	#content .container{
		padding:5px;
	}
	
	#content h1{
		font-size:1.4rem;
		font-family:serif;
	}
	
	#content h2{
		font-size:1.2rem;
		font-family:sans-serif;
	}
	
	 

	 .btn-lg{
		 max-width:300px;
		 font-size:1.2rem;
	 }
	 
	 .panel{
		 max-width:260px;
	 }
	
}

/*Kontakt-formular */
.button {
	background-color: var(--secondary-color);
	color: white;
	border: none;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	height: 80px;
	width: 100%;
	padding: 1%;
	margin: 0.5% auto;
  }


/* ==============================
	ENDE BUTTON Styles
	=============================*/


/* ==============================
	FOOTER 
	=============================*/

footer .copyright{
	font-size: 1.2rem;
	text-align: center;
	color: #fff;
	margin: 0;
	padding: 0.7em;
	border-top: 1px solid #eee;
	color: #fff;
	}
footer h5 {
	margin-bottom:0.5em;
	padding: 1em;
	}
footer li {
	color: #fff;
	font-size:1.0rem;
	margin-bottom:2em;
	padding:1em;
	}
footer a {
	color: #fff;
	text-transform: none;
	text-decoration: none;
	padding: 1em;
	} 
footer .email{
	font-size:1.4rem;
	}

.links-footer{
	text-align: left;
}

.links-footer img {
	display:inline;
}

/* ==============================
	ENDE FOOTER 
	=============================*/

/* ==============================
	KONTAKT-Seite
	=============================*/

#contact {
	text-align: center;
	}

#contact .contact-email-link {
	color: #4a4a00;
	text-decoration:none;
	}

/* Styles for form elements */
#form {
	margin-top: 2%;
	background-color: #f2f2f2;
	padding:2%;
	}
#form h2 {
	text-align:center;
	}
#form fieldset, #form input, #form select, #form textarea {
	margin-bottom: 2%;
	} 
#form fieldset {
	display: block;
	margin-inline-start: 2px;
	margin-inline-end: 2px;
	padding-block-start: 0.35em;
	padding-inline-start: 0.75em;
	padding-inline-end: 0.75em;
	padding-block-end: 0.625em;
	min-inline-size: min-content;
	border-width: 2px;
	border-style: groove;
	border-color: rgb(192, 192, 192);
	}
#form fieldset legend {
	font-weight:bold;
	font-size:1.25em;
	}
#form label {
	display: block;
	padding-top:3%;
	}

#form fieldset textarea {
	width:100%;
	}

#form fieldset input {
	height:40px;
	width:80%;
	margin: 0.2em;
	/*padding: 1px 0px; */
	padding: 5px;
	border-width: 2px;
	border-style: solid;
	border-color: #888;
	border-radius: 5px;
	}  

	
/* für Kontakt-Seite */
.options > label {
	display: inline;
	padding-top:1%;
}
select{
	height:40px;
	width:100%;
	border-style: solid;
	border-width:1px;
	font-size:0.8em;
	}
.adresse input{
		width:80%;
	}
#ber input{
		width:10% !important;
		margin-right:0.3em !important;
	}

.error {color: #FF0000;}

.confirmation {color: green;
	font-weight:bold;
	font-size: 28px;
	margin-bottom: 2%;
	/*float: left;*/}

.tel-link {
	background-color: gray;
	padding: 2%;
	margin: 0 auto;
	width: 80%;
	text-align: center;
	border-radius: 5px;
	transition: background 0.3s ease-in-out;
}
.tel-link a {
	color: #fff;
	text-decoration: none;
	font-size: 1.5em;
	display: block;	
}
.tel-link:hover {
	background-color: #444;
}


/* ==============================
	Speziel für INDEX-Seite
	=============================*/

.grid-why p {
		padding: 0 0.5em 0.3em 0.5em;
	}
	
.usp {
		padding: 0.8em 0 0 0.5em;
		margin-bottom:0.4em;
	}

/* Grid-Produkt-Auflistung mit Links */
.grid-idx .grid-idx-item {
	position: relative;
	margin: 1%;
	}
.grid-idx .grid-idx-card {
	border: 0;
	border-radius: 0;
	}
.grid-idx .grid-idx-card img {
	width: 100%;
	height: auto;
	}
.grid-idx .grid-idx-card .grid-idx-card-img-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	}
/* ENDE Grid-Produkt-Auflistung mit Links */


/* ==============================
	Speziel für SHOP-Seite
	=============================*/

.grid-produktauswahl { /*rosa-Kästen */
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-top:1em;
	}

	.grid-produkte {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 0;
}


.produkt-item {
    border: 1px solid #ddd;
    padding: 1rem;
    text-align: center;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ==============================
	INDEX- & SHOP-Seite - GRID mit rosa-Buchtsaben INDEX mit class="grid-versand" und SHOP mit class="grid-produktauswahl"
	=============================*/

.grid-item {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 0.8em;
	/* box-shadow: 10px -10px 10px 0 gray; */
	border-top: 4px solid rgba(0, 0, 0, .2);
	/* border-right: 2px solid rgba(0, 0, 0, .2); */
	}
.grid-item a {
		color: inherit;
		text-decoration: none;
	}
.grid-item .media {
	display: flex;
	align-items: center;
	justify-content: center;
	}
.grid-item .media .d-flex {
	display: flex;
	margin-right: 0.5rem;
	}
.grid-item .media .media-body {
	flex: 1;
	}
.grid-item h5 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-weight: 500;
	line-height: 1.2;
	}
.grid-item p {
	margin-top: 0;
	margin-bottom: 1rem;
	}

.media {
	padding: 1em;
	border: 1px solid #ddd;
	}
.media span {
	font-size: 1rem;
	text-align: center;
	}
.media span i {
	font-size: 3rem;
	color: #4A9304;
	}
.media h5 {
	font-size: 1rem;
	margin: 0;
	color: var(--hover-color);  /*pink*/
	}
.media p {
	font-size:0.9rem;
	margin: 0;
	min-height: 38px;
	} 

/* ==============================
	ENDE INDEX- & SHOP-Seite - GRID mit rosa-Buchtsaben class="grid-produktauswahl"
	=============================*/


/* ==============================
	Speziel für SHOP-Seite
	=============================*/

	.carousel {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		position: relative;
		width: 100%;
	}
	
	.carousel-grid {
		display: flex;
		transition: transform 0.5s ease-in-out;
		width: 100%;
	}
	
	.carousel-item {
		flex: 0 0 calc(100% / 3); /* 3 sichtbare Elemente */
		box-sizing: border-box;
		padding: 10px;
	}
	
	@media (max-width: 1439px) {
		.carousel-item {
			flex: 0 0 calc(100% / 2); /* 2 Artikel auf Tablets */
		}
	}
	
	@media (max-width: 767px) {
		.carousel-item {
			flex: 0 0 100%; /* 1 Artikel auf mobilen Geräten */
		}
	}
	
	
.carousel-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0.8rem;
	background: #fff;
	border: 1px solid #ddd;
	margin: 5px;
	}
.carousel-card img {
	width: 100%;
	height: auto;
	}
.carousel-card-product {
	text-align: center;
	}
.carousel-card-product .carousel-card-title {
	margin-bottom: 0.5em;
    margin-top: 0.5em;
	}
.carousel-card-product .carousel-card-title a {
	color: #333333;
	}
.carousel-card-product .carousel-card-title a:hover, .carousel-card-product .carousel-card-title a:focus {
	color: var(--hover-color); /*pink*/
	}
.carousel-card-product {
	color: #777777;
	font-size: 1rem;
	}

	.card-price {
		color:#048722;
		font-size: 1rem;
		font-weight:bold;
	}



/* Kleine Carousel für alle Produkte */

.carousel-allProducts {
	position: relative;
	overflow: hidden;
	width: 100%;
	}
.carousel-grid-allProducts {
	display: flex; /* Flexbox-Layout verwenden */
	gap: 10px; /* Abstände zwischen den Bildern */
	transition: transform 0.5s ease-in-out;
	}
.carousel-item-allProducts {
	flex: 0 0 auto; /* Elemente sollen sich nicht verkleinern oder vergrößern */
	width: 180px; /* Feste Breite von 150px */
	box-sizing: border-box;
	display: flex;
	justify-content: center; /* Bild zentrieren */
	}
.carousel-card-allProducts {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0.4rem;
	background: #fff;
	border: 1px solid #ddd;
	}
.carousel-card-allProducts img {
	width: 100%; /* Bild passt sich der Breite des übergeordneten Elements an */
	height: auto;
	}

.arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2rem;
	color: #333;
	cursor: pointer;
	z-index: 1000;
	background-color: rgba(255, 255, 255, 0.7);
	padding: 0.8rem;
	border-radius: 50%;
	transition: background-color 0.3s ease, transform 0.2s ease;
	}
.arrow:hover, .arrow:focus {
	background-color: rgba(255, 255, 255, 1);
	transform: translateY(-50%) scale(1.1);
}
.arrow-left {
	left: 10px;
	}
.arrow-right {
	right: 10px;
	}

.img-container {
	position: relative;
	display: inline-block;
	}
	
.card-img-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	text-align: center;
	pointer-events: none; /* Ensures the overlay doesn't block clicks */
	}
.card-img-overlay .frchtbrt-btn {
	pointer-events: auto; /* Allows the button to be clickable */
	text-align: center;
	display: block;
	width: 80%;
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis;
}

/* ==============================
	ENDE SHOP-Seite
	=============================*/


/* ==============================
	PRODUKT-DETAIL-Seite
	=============================*/

/*
.card {
	border: 0;
	border-radius: 0;
	}

.card img {
	width: 100%;
	height: auto;
	}
*/

.product-detail {
    margin: 0 auto;
    width: 100%;
	}
.spalten{
	margin-bottom:2em;
	}
.column {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    max-width: 100%;
	}

.small-image-group {
	display: flex;
	justify-content: space-between; 
	} 
.small-image-col {
	display: flex;
	flex-basis: 23%;
	flex-direction: row;
	cursor: pointer;
	margin-bottom:1em;	
	}
.small-image-col img{
	margin-top: 0.5em;
	margin-right: 0.5em;
	}


#related-product {
    clear:left;
	} 

/*
.card-product {
	text-align: center;
}
.card-product .card-title {
	margin-bottom: 1%;
}
.card-product .card-title a {
	color: #333333;
}
.card-product .card-title a:hover, .card-product .card-title a:focus {
	color: #E91E63;
}
.card-product .card-price{
	color: #777777;
	font-size: 1rem;
} */



.variant-buttons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	}
.variant-button {
	background-color: white;
	border: 2px solid #28a745;
	color: #28a745;
	padding: 10px 20px;
	cursor: pointer;
	text-align: center;
	border-radius: 5px;
	transition: background-color 0.3s ease, color 0.3s ease;
	}
.variant-button:hover {
	background-color: #e9f5e9;
	}
.variant-button.active {
	background-color: #28a745;
	color: white;
	border: none;
	}
.variant-button:focus {
	outline: none;
	}

/* ==============================
	ENDE PRODUCT DETAIL-Seite
	=============================*/


/* ==============================
	WARENKORB- & TRANSACTION- & CHECKOUT-Seite
	=============================*/

.text-right{
	text-align: right;
}
.text-left{
	text-align: left;
}
.text-danger {
	color:red;
	margin-top:1em;
	height:40px;
}
table {
    border-collapse: collapse;
	margin-left:auto;
	margin-right: auto;
}
td, th {
	padding: 1em;
}
th:first-child {
	padding-left: .5em;
}
th:last-child, td:last-child {
	padding-right: .5em;
}
thead th {
	border-bottom: medium solid lightblue;
}
tbody th {
	font-weight: normal;
	text-align: left;
}
th a {
	background: url(pdf.png) no-repeat left center;
	padding: 15px 5px 15px 40px;
}
td {
	text-align: center;
}
td:nth-child(3) {
	text-align: right;
}
td:nth-child(4) {
	color: red;
	font-weight: bold;
}
td.paid {
	color: green;
	font-weight: normal;
}
td.notpaid {
	color: red;
	font-weight: normal;
}



/* Warenkorb */

#cart table{
	width: 100%;
	border-collapse: collapse;
}

#cart .product-info{
	display:flex;
	flex-wrap: wrap;
}


#cart td{
	padding: 0.5em 1.1em;
}

#cart td img {
	width: 80px;
	height: 80px;
	margin-right:0.8em;
}

#cart input{
	width:30%;
	display:inline-block;
}



/*Hochzeitstorten-Seite */


#usp {
	clear:left;
	line-height: 1.8;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	background: linear-gradient(to right, #d9d8d8, #fff);
	padding: 1% 2%;
}

#usp dt {
	font-weight: bold;
	margin-bottom:0.6rem;
}

#usp dd {
	padding: 0.5% 1% 2% 0;
}



.form-grid-hzt, .layout-hzt {
	margin-top: 2%;
	background-color: #f2f2f2;
	padding:2%;
	}
	.form-grid-hzt h2, .layout-hzt h2{
	text-align:center;
	}
	.form-grid-hzt fieldset, .form-grid-hzt input, .form-grid-hzt select, .form-grid-hzt textarea,
	.layout-hzt fieldset, .layout-hzt input, .layout-hzt select, .layout-hzt textarea  {
	margin-bottom: 2%;
	} 

	.form-grid-hzt fieldset,
	.layout-hzt fieldset {
	display: block;
	margin-inline-start: 2px;
	margin-inline-end: 2px;
	padding-block-start: 0.35em;
	padding-inline-start: 0.75em;
	padding-inline-end: 0.75em;
	padding-block-end: 0.625em;
	min-inline-size: min-content;
	border-width: 2px;
	border-style: groove;
	border-color: rgb(192, 192, 192);
	}
.form-grid-hzt fieldset legend,
.layout-hzt fieldset legend {
	font-weight:bold;
	font-size:1.25em;
	}
	.form-grid-hzt label,
	.layout-hzt label {
	display: block;
	padding-top:3%;
	}

	.form-grid-hzt fieldset textarea,
	.layout-hztfieldset textarea  {
	width:100%;
	}

	.form-grid-hzt fieldset input,
	.layout-hzt fieldset input {
	height:40px;
	width:10%;
	margin: 0.2em;
	/*padding: 1px 0px; */
	padding: 5px;
	border-width: 2px;
	border-style: solid;
	border-color: #888;
	border-radius: 5px;
	}  

/*
.layout-hzt{
	margin-top: 2%;
	background-color: #f2f2f2;
	padding:2%;
	}
#layout-hzt h2 {
	text-align:center;
	}
#layout-hzt fieldset, #layout-hzt input, #layout-hzt select, #layout-hzt textarea {
	margin-bottom: 2%;
	} 
#layout-hzt fieldset {
	display: block;
	margin-inline-start: 2px;
	margin-inline-end: 2px;
	padding-block-start: 0.35em;
	padding-inline-start: 0.75em;
	padding-inline-end: 0.75em;
	padding-block-end: 0.625em;
	min-inline-size: min-content;
	border-width: 2px;
	border-style: groove;
	border-color: rgb(192, 192, 192);
	}
#layout-hzt fieldset legend {
	font-weight:bold;
	font-size:1.25em;
	}
#layout-hzt label {
	display: block;
	padding-top:3%;
	}

#layout-hzt fieldset textarea {
	width:100%;
	}

#layout-hzt fieldset input {
	height:40px;
	width:80%;
	margin: 0.2em;

	padding: 5px;
	border-width: 2px;
	border-style: solid;
	border-color: #888;
	border-radius: 5px;
	}  
*/



.wunschtorte fieldset {
	margin-bottom: 2%;
	} 

	/* .wunschtorte fieldset, #form input, #form select, #form textarea {
		margin-bottom: 2%;
		} */

	.wunschtorte fieldset {
	/* display: block;
	margin-inline-start: 2px;
	margin-inline-end: 2px;
	padding-block-start: 0.35em;
	padding-inline-start: 0.75em;
	padding-inline-end: 0.75em;
	padding-block-end: 0.625em;
	min-inline-size: min-content; */
	border-width: 2px;
	border-style: groove;
	border-color: rgb(192, 192, 192);
	}
	.wunschtorte fieldset legend {
	font-weight:bold;
	font-size:1.25em;
	}
	.wunschtorte label {
	display: block;
	padding-top:1%;
	}

.wunschtorte fieldset textarea {
	width:100%;
	}

	.wunschtorte fieldset input {
	height:40px;
	width:10%;
	margin: 0.2em;
	/*padding: 1px 0px; */
	padding: 5px;
	border-width: 2px;
	border-style: solid;
	border-color: #888;
	border-radius: 5px;
	}  

	#transportbox-feldset fieldset {
		display: block;
		margin-inline-start: 2px;
		margin-inline-end: 2px;
		padding-block-start: 0.35em;
		padding-inline-start: 0.75em;
		padding-inline-end: 0.75em;
		padding-block-end: 0.625em;
		min-inline-size: min-content; 
		border-width: 2px;
		border-style: groove;
		border-color: rgb(192, 192, 192);
		}


wunschtorte > fieldset input:not(#motto_thema, #anzahlErw, #anzahlKind, #budget) {
    width: 10%;
}

.wunschtorte #motto_thema {
    width: 80%;
}

.wunschtorte #anzahlErw, #anzahlKind, #budget{
    width: 20%;
}





@media screen and (max-width: 63em) { /*672px */

	#cart td:nth-child(2)::before {
		content: "Anzahl: ";
		}
	#cart td:nth-child(3)::before {
		content: "Zwischensumme in EUR: ";
		}
	table, tbody, tr {
		display: block;
		}
	thead {
		display: none;
		}
	tr:first-child {
		border-top: medium solid lightblue;
		}
	tr {
		border-bottom: medium solid lightblue;
		padding: .5em 2em 1em;
		}
	tbody th {
		display: block;
		font-weight: bold;
		}
	th a {
		font-weight: normal;
		}
	td {
		display: inline-block;
		min-width: 30%;
		padding: .2em 2em;
		text-align: left;
		}
	td:nth-child(3) {
		text-align: left;
		}
}

@media screen and (max-width: 33em) { /*528px */
	td {
		display: block;
		}
	tr {
		padding: .5em .5em 1em;
		}
}

/* ==============================
	ENDE WARENKORB- & TRANSACTION- & CHECKOUT-Seite
	=============================*/


/* ==============================
	SPEZIEL für CHECKOUT
	=============================*/


.grid-checkout { 
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	}
.reAdresse {
	padding-left:1.2rem;
}


/* ==============================
	transaction.php Styles
	=============================*/

.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
	}
.row input {
	width:80px;
	margin-left:1em;
	margin-bottom:2em;
	}

.container-trnsctn {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-right: 15px;
	padding-left: 15px;
	}
	
/* ==============================
	ENDE transaction.php Styles
	=============================*/
	
/* ==============================
	BANK Styles
	=============================*/

.bank-style{
	margin:0.1rem auto 1rem auto;
	background-color:white; 
	color:black; 
	font-size:1.2rem;
	 border:solid 1px black;
	}
.bank-style p {
	 padding:1rem; 
	 line-height:2rem
	}
	
/* ==============================
	login.php, register.php, checkout.php,setting.php Styles
	=============================*/
	
.form-control {
	display: block;
	width: 100%;
	padding: 0.375rem 0.75rem;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	font-size: 1rem;
	color: #495057;
	background-color: #fff;
	}
.form-group {
	margin-bottom: 1em;
	}
.form-group label{
	font-weight:bold;
	margin-bottom: 0.2em;
	}

#login-url, #register-url, .passwort-vergessen{
	text-decoration: underline;
	font-size: 1rem;
	font-weight: bold;
	color: var(--quaternary-color);
	}

.checkout-small-element{
	display: inline-block;
	width: 48%;
	}
.checkout-large-element{
	/* display: inline-block; */
	width: 97%;
	}

.hottypt-field{
	position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
	
/* ==============================
	ENDE login.php, register.php, setting.php Styles
	=============================*/


/* ==============================
	LOGIN-& REGISTRATION-Seite
	=============================*/

.card-login {
    background-color: #fff;
	background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 20px;
    margin: 20px auto;
    max-width: 400px;
	}
.card-login .checkbox {
    display: inline-block;
	}
.card-login .checkbox input[type="checkbox"] {
    margin-right: 5px;
	}

.error-message{
	color: red; 
	margin-top: 10px;
	font-size: 1.2em;
	font-weight:bold;
	text-transform:uppercase;
	background-color:white; 
	padding:1rem;
}
.message{
	color: green;
	margin-top: 10px;
	font-size: 1.2em;
	font-weight: bold;
	background-color:white;
	padding:1rem;
	text-transform:uppercase;
}
/* ==============================
	ENDE LOGIN-& REGISTRATION-Seite
	=============================*/

/* Hochzeitstorten-Seite */
#usp {
	clear:left;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	background: linear-gradient(to right, #d9d8d8, #fff);
	padding: 1% 2%;
}

#usp dt {
	font-weight: bold;
}

#usp dd {
	padding: 0.5% 1% 2% 0;
}

.leistungsdatum{
	width:50%;
}



/* =========================================
	Media Query for Tablet Viewport (>768px(48em))
	========================================*/

@media screen and (min-width:48em){
/*Tablet Viewport: Show ".tablet-desktop-class", hide ".mobile-class" */	

.tablet-desktop {
	display: block;
	}	
	
.mobile, .mobile-nav {
	display:none;
	}

/* Tablet Viewport: Styles for header */
header {
	padding-bottom:2%;
	}

/* Tablet Viewport: Styles for navigation */
nav {
	padding:1%;
	margin-bottom:1%;
	}
nav ul {
	list-style-type:none;
	text-align:center;
	}
nav li {
	font-size:1.5rem;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	display: inline-block;
	border-bottom: none; 
	border-right: 1px solid #fff;	
	margin-bottom:1rem;
	}
nav li:last-child {
	border-right:none;
	}
nav li a {
	padding: 0.5em 1em;
	display:block;
	color:#fff;
	text-decoration:none;
	font-size: 1.8rem;
	}

.tablet-desktop .dropdown-menu {
	text-align:left;
	}

footer li {
	padding:1%;
	}

/* Tablet Viewport: Styles for main content  Navigation in header.php*/
main ul {
	margin: 0 0 4% 10%;
	}

/* Tablet Viewport: Styles for form element */
/*form {
	width: 70%;
	margin: 0 auto;	
} */


/* Desktop Viewport: Styles for form elements */
form {
	width: auto;
	}

/*Kontakt-Seite */
.tel-num {
	font-size:1.25em;
	}
.button {
	width: 50%;
	}

/* ==============================
	Speziel für INDEX-Seite
	=============================*/

.grid-idx {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1.2em;
	}

	
/* ==============================
	Speziel für SHOP-Seite
=============================*/
	
.grid-produktauswahl {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	}

.carousel-grid{
	grid-template-columns: repeat(2, 1fr);
	}
.carousel-item {
	min-width: 50%;
	}

	  .grid-produkte {grid-template-columns: repeat(2, 1fr);}

/* ==============================
	Speziel für PRODUCT-DETAIL-Seite
=============================*/
.grid {
	grid-template-columns: repeat(2, 1fr);
	}   
.product-detail {
	padding-top: 3rem;
	}
.column {
        flex: 0 0 50%;
        max-width: 50%;
	}
.spalten {
	display:flex;
	} 



/* ==============================
	LOGIN-& REGISTRATION-Seite
	=============================*/

.card-login {
	width: 400px;
  }

/* ==============================
	SPEZIEL für CHECKOUT
	=============================*/


.grid-checkout { 
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 10px;
	}

.reAdresse {
	padding-left:1.6rem;
}

/* Hochtzeitstorten*/
.form-grid-hzt {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-gap: 20px;
}

.wunschtorte #motto_thema {
    width: 50%;
}

.wunschtorte #anzahlErw, #anzahlKind, #budget{
    width: 10%;
}


} /*ENDE Media Query for Tablet Viewport (>768px(48em)) */


/* =========================================
	Media Query for Desktop Viewport (>=1024px(=64em))
	========================================*/

@media screen and (min-width:64em), print {
	
/* Desktop Viewport: Styles for header */
header {
	width:25%;
	float:left;
	padding-bottom:0;
	}

/* Desktop Viewport: Styles for navigation */
nav {
	float:right;
	width:70%;
	margin: 0.5em 0.5em 0 0;
	}	
nav ul {
	text-align:right;
	}	

nav li a:hover {
	color: #000;
	background-color: #fff;
	transform: scale(1.3);
	}

.tablet-desktop .dropdown-menu {
	right:0;
	}
	
/* Desktop Viewport: Styles for main content */
main {
	clear:left;
	}	

/* FOOTER* */
.grid-footer {
	text-align:center;
	margin-top:1%;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 0.5em;
	}

footer .links-footer {
    display: flex; /* Ändern Sie display auf flex */
    flex-direction: column; /* Um die Elemente vertikal anzuordnen */
	text-align: center;
	}

.sm > img {
	display:inline;
	}


/* Desktop Viewport: Styles for form elements */
form {
	width: auto;
	}


/* ==============================
	Speziel für INDEX-Seite
	=============================*/

.grid-why {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-gap: 1.2em;
	}

.grid-versand {
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	}


/* ==============================
	Speziel für SHOP-Seite
	=============================*/

.grid-produktauswahl {
	display: grid;
	/*grid-template-columns: repeat(3, 1fr); */
	width: 100%;
	}

.carousel-item {
	min-width: 33.3333%;
	}

.grid-produkte {grid-template-columns: repeat(3, 1fr);}

.media h5 {
	font-size: 1.2rem;
}

.media p {
	font-size: 1.1rem;
}


/* ==============================
	Speziel für PRODUCT-DETAIL-Seite
	=============================*/

.grid {
	grid-template-columns: repeat(3, 1fr);
	}

/* ==============================
	Speziel für WARENKORB-Seite
	=============================*/
.text-danger{
	height:30px;
	}

} /*ENDE Media Query for Desktop Viewport (>=1024px(=64em)) */


/* ==================================================
	Media Query for Larger Desktop Viewport (>=1440px (=90em))
	=================================================*/

@media screen and (min-width:90em) {

	nav {
		margin: 1.5em 1.5em 0 0;
		}	

.carousel-grid{
	grid-template-columns: repeat(3, 1fr);
	}

#ber input{
	margin-right:0.1rem !important;
	}

nav li {
	margin-bottom:1.5rem;
}

/* ==============================
	Speziel für WARENKORB-Seite
	=============================*/

#cart {
	width:80%;
	}

/* Kontakt-Seite */
.form-grid {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	grid-gap: 5px;
	}

/* Hochzeitstorten-Seite */

.leistungsdatum{
	width:25%;
}

} /*ENDE Media Query for Desktop Viewport (>=1440px(=90em)) */

/* ==================================================
	Media Query for Larger Desktop Viewport (>=1920px (=120em))
	=================================================*/

@media screen and (min-width:120em) {
	
#container {
	width:120em;
	margin:0 auto;
	}

.card-img-overlay .frchtbrt-btn {
	width: 60%;
	}

/* ==============================
	Speziel für SHOP-Seite
	=============================*/

.grid-produktauswahl {
	display: grid;
	grid-template-columns: repeat(3, 1fr); 
	}

	.grid-produkte {grid-template-columns: repeat(4, 1fr);}



} /*ENDE Media Query for Larger Desktop Viewport (>=1920px(=120em)) */


/* =========================================
	Media Query for Print
	========================================*/
	
@media print {
	
	body {
		background-color: #fff;
		color: #000;
	}
}  /*ENDE Media Query for Print */