body {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 16px;
	background-color:REED;
}
/* ===== CONTENT ===== */
main {
    padding-top: 45px;
	}

.content {
    padding-left: 7px;
}

/* =================================================================== HEADER ==================================================================== */
/* =================================================================== HEADER ==================================================================== */
/* =================================================================== HEADER ==================================================================== */
.topbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;

		background: linear-gradient(180deg, #a5d772 0%, #4e831f 100%);
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		z-index: 1000;

		padding: 6px 0; /* внутриний abstand von alle seiten */
		
		border-radius: 6px;
		border: 1px solid #000000;
		}
.top-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 5px;
		}

												/********  LOGO ********/
.logo img {
			height: 22px;
			justify-self: start;
			/*border: 1px solid #000000;*/
			}

.right-icons {
				display: flex;
				align-items: center;
				gap: 3px;
			}		
										/*********** кнопка выбора языка ***********/
.lang-dropdown {
					position: relative;
				}
.lang-dropdown.active .lang-menu {
									display: block;
									}
.lang-btn {
			padding: 4px 4px;
			font-size: 18px;
			border: 1px solid #ccc;
			background: #f5f5f5;
			border-radius: 4px;
			cursor: pointer;
			Color:BLACK;
			}
.lang-menu {
			display: none;
			position: absolute;
			top: 40px;
			right: 0;
			background:#d7eae8;
			border: 1px solid #ddd;
			border-radius: 6px;
			box-shadow: 0 3px 8px rgba(0,0,0,0.1);
			z-index: 2000;
			}
.lang-menu div {
				padding: 8px 10px;
				cursor: pointer;
				font-size: 18px;
				}
.lang-menu div:hover {
						background: #f2f2f2;
						}
/*----------------------------------------------------------------------- end header --------------------------------------------------------------------------*/


/* ======================================================================= intro.php ========================================================================= */
/* ======================================================================= intro.php ========================================================================= */
/* ======================================================================= intro.php ========================================================================= */
/* IPHONE */
@media (min-width: 401px) { 
							.intro-container {
												height: 95vh;  /* ← ДОБАВИТЬ! фиксированная высота */ 
												}
							}
/*ANDROID*/
@media (max-width: 400px) { 
							.intro-container {
												height: 85vh;  /* ← ДОБАВИТЬ! фиксированная высота */ 
												}
							}
.intro-container {
					position: relative;
					width: 100%;
					/*height: 90vh;  /* ← ДОБАВИТЬ! фиксированная высота */
					overflow: hidden; /* ← ДОБАВИТЬ! чтобы ничего не вылезало */
					}
.intro {
		/*width: 100%;
		height: auto;
		display: block;*/
		width: 100%;
		height: 100vh;  /* ← ИЗМЕНИТЬ с auto на 100vh */
		object-fit: cover; /* ← ДОБАВИТЬ! чтобы картинка заполняла весь контейнер */
		display: block;
		}
.kategorie-wrap .search-block {
    pointer-events: auto; /* ← ДОБАВИТЬ! чтобы клики работали в блоках поиска */
}

.kategorie-wrap {
				position: absolute;
				left: 50%;
				top:30%;
				transform: translateX(-50%);
				width: 100%;
				text-align: center;
				z-index: 5;  /* ← ДОБАВИТЬ! чтобы был выше фона, но ниже затемнения */
				pointer-events: none; /* ← ДОБАВИТЬ! чтобы клики проходили сквозь фон */
				}
													/* Кнопка "Unsere Adresse" - приклеена к низу экрана */
.intro-taste-unten {
					position: fixed;
					width: 96vw;
					max-width: 500px;
					bottom: 50px;
					left: 50%;
					transform: translateX(-50%);
					z-index: 10;
					display: block;
					}
.besuchercounter {
					position: fixed;
					width: 96vw;
					max-width: 500px;
					bottom: 20px;
					left: 92%;
					transform: translateX(-50%);
					z-index: 10000;
					display: block;
					color:WHITE;
					font-size:12px;
					}
/*----------------------------------------------------------------------- end intro.php -----------------------------------------------------------------------*/


/* =================================================================== unsere-adresse.php ==================================================================== */
/* =================================================================== unsere-adresse.php ==================================================================== */
/* =================================================================== unsere-adresse.php ==================================================================== */
.allepages {
			padding: 5px 5px;
			max-width: 100vw;
			height:100%;
			margin: 0 auto;
			background-color: #85b853;
			}

.allepages h1 {
				font-size: 28px;
				margin-bottom: 5px;
				text-align: center;
				color: #333;
				}
																	/* Google Maps */
.maps-block {
				margin-bottom: 5px;
			}
.maps-block iframe {
					border-radius: 10px;
					box-shadow: 0 2px 8px rgba(0,0,0,0.1);
					}
																	/* Social Medien */
.social-block {
				margin-bottom: 25px;
				}
.social-icons {
				display: flex;
				justify-content: space-around;
				gap: 15px;
				flex-wrap: wrap;
				}
.social-icons a {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-decoration: none;
				color: #333;
				border-radius: 10px;
				transition: transform 0.2s, background 0.2s;
				min-width: 80px;
				}
.social-icons a:hover {
						transform: translateY(-3px);
						background: #e8e8e8;
						}
.social-icons img {
					width: 40px;
					height: 40px;
					margin-bottom: 8px;
					}
.social-icons span {
					font-size: 14px;
					font-weight: bold;
					}
																/* Adresse Block */
.adresse-block {
				background: #c5e5cc;
				padding: 15px;
				border-radius: 10px;
				margin-bottom: 5px;
				}
.adresse-block p {
					margin: 2px 0;
					font-size: 16px;
					line-height: 1.4;
					}
.adresse-block a {
					color: #4e831f;
					text-decoration: none;
				}
.adresse-block a:hover {
						text-decoration: underline;
					}
.adresse-block h2 {
					font-size: 28px;
					margin-top:0px;
					text-align: center;
					color: #333;
					}
																/*-------------------*/
.kontakt-tools {
				text-align:center;
				/*display: flex;*/
				gap: 10px;
				margin: 20px 0;
				}
																/*   кнопки   */
.btn {
		padding: 10px 15px;
		background: #007bff;
		color: #fff;
		text-decoration: none;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		}

.btn:hover {
			background: #0056b3;
			}

																		/* PWA Install Button - специальные стили */
/* ===== PWA УСТАНОВОЧНЫЙ БАННЕР ===== */
#pwaInstallContainer {
    position: relative;
    margin: 15px auto 20px auto;
    max-width: 600px;
    padding: 0 15px;
    transition: all 0.3s ease;
}

#pwaInstallContainer.hidden {
    display: none !important;
}

.btn-install-pwa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 50px 14px 20px;
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    letter-spacing: 0.5px;
    position: relative;
}

.btn-install-pwa:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(76, 175, 80, 0.4);
    background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
}

.btn-install-pwa:active {
    transform: translateY(0px);
    box-shadow: 0 2px 10px rgba(76, 175, 80, 0.3);
}

.btn-install-pwa .icon {
    font-size: 22px;
    flex-shrink: 0;
}

.btn-install-pwa .text {
    flex: 1;
    text-align: center;
}

/* Кнопка закрытия (X) */
#closePwaBtn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 18px;
    cursor: pointer;
    color: white;
    line-height: 32px;
    text-align: center;
    transition: all 0.2s ease;
    z-index: 2;
}

#closePwaBtn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

#closePwaBtn:active {
    transform: translateY(-50%) scale(0.9);
}

/* ===== АДАПТИВНОСТЬ ДЛЯ PWA ===== */
@media (max-width: 768px) {
    #pwaInstallContainer {
        margin: 10px auto 15px auto;
        padding: 0 10px;
    }
    
    .btn-install-pwa {
        padding: 12px 45px 12px 15px;
        font-size: 14px;
        border-radius: 10px;
    }
    
    .btn-install-pwa .icon {
        font-size: 18px;
    }
    
    #closePwaBtn {
        width: 28px;
        height: 28px;
        font-size: 16px;
        line-height: 28px;
        right: 6px;
    }
}

@media (max-width: 480px) {
    #pwaInstallContainer {
        margin: 8px auto 12px auto;
        padding: 0 8px;
    }
    
    .btn-install-pwa {
        padding: 10px 40px 10px 12px;
        font-size: 13px;
        border-radius: 8px;
    }
    
    .btn-install-pwa .icon {
        font-size: 16px;
    }
    
    #closePwaBtn {
        width: 26px;
        height: 26px;
        font-size: 14px;
        line-height: 26px;
        right: 5px;
    }
}
																		/*------------------------------------------*/
					
					
/*---------------------------------------------------------------- end unsere-adresse.php -----------------------------------------------------------------*/


/* =================================================================== artikel.php ==================================================================== */
/* =================================================================== artikel.php ==================================================================== */
/* =================================================================== artikel.php ==================================================================== */
										/* ===== КОНТЕЙНЕР ЛЕНТЫ ===== */
.tiktok-feed {
				height: 100vh; /* вместо 100dvh */
				overflow-y: scroll;
				scroll-snap-type: y mandatory;
				scroll-padding-top: 0px;
				-webkit-overflow-scrolling: touch;
				}

											/* ===== КАРТОЧКА ===== */
.product-card {
				width: 96vw;
				height: calc(100dvh - 40px);  /* ← ИЗМЕНЕНО: 99dvh → 100dvh - 40px */
				display: flex;
				flex-direction: column;
				background: linear-gradient(180deg, #c5e5cc 60%, #4e831f 100%);
				border: 1px solid #000000;
				position: relative;
				scroll-snap-align: start;
				overflow: hidden;  /* ← ИЗМЕНЕНО: скрываем всё, что не помещается */
				scroll-margin-top: 5px;
				margin: 0 auto;
				scroll-snap-stop: normal;
				transform: translateZ(0);
				backface-visibility: hidden;
				}
											/* ===== КОНТЕЙНЕР ВНУТРИ КАРТОЧКИ ===== */
.product-card-container {
						width: 100%;
						max-width: 600px;
						margin: 0 auto;
						position: relative;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: center;
						padding: 0 8px;
						height: 100%;  /* ← ДОБАВЛЕНО: занимает всю высоту карточки */
						overflow: hidden;  /* ← ДОБАВЛЕНО: ничего не вылезает */
						}
														/* ===== КАРТИНКА ===== */
.product-card-img {
					width: 100%;
					height: auto;
					display: block;
					max-height: 55vh;  /* ← Ограничиваем высоту картинки */
					object-fit: contain;
					border: 1px solid #000000;
					border-radius: 4px;
					flex-shrink: 0;  /* ← Не сжимается */
					/*pointer-events: none;*/
				}

										/* ===== ОПИСАНИЕ (обрезается, если не помещается) ===== */
.product-card-container > div:last-child {
											width: 100%;
											padding: 8px 5px;
											font-size: 16px;
											text-align: left;
											flex-shrink: 0;  /* ← Не сжимается */
											max-height: calc(100% - 55vh - 60px);  /* ← Оставшееся место для описания */
											overflow: hidden;  /* ← Обрезаем, если не помещается */
										}
.description {
				background-color: rgba(228, 228, 228, 0.9);
				padding: 10px 12px;
				border-radius: 6px;
				overflow: hidden;  /* ← Обрезаем текст */
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;  /* ← Максимум 3 строки */
				font-size: 16px;
				text-overflow: ellipsis;  /* ← ... в конце */
				text-align: left;
				word-wrap: break-word;
				max-height: 80px;  /* ← Максимальная высота блока описания */
				line-height: 1.4;
			}
														/* ===== БЕЙДЖИ ===== */
.ausverkauft-badge {
					position: absolute;
					bottom: 50%;
					left: 20px;
					width: 250px;
					height: auto;
					z-index: 10;
					pointer-events: none;
					}

.lagernummer-in-img {
					position: absolute;
					top: 10px;
					right: 10px;
					z-index: 10;
					background: rgba(0, 0, 0, 0.7);
					color: white;
					padding: 5px 10px;
					border-radius: 5px;
					font-size: 10px;
					font-weight: bold;
					pointer-events: none;
					}
/*------------------------------------------------------------------- end artikel.php ------------------------------------------------------------------*/


/* =================================================================== such_kategorie.php ==================================================================== */
/* =================================================================== such_kategorie.php ==================================================================== */
/* =================================================================== such_kategorie.php ==================================================================== */
								/*---- 3 INFO TASTE & suche в intro 3 блока ----*/
.search-block {
				position: relative;
				display: block;
				margin: 10px auto;
				text-align: center;
				}
											/*---- nur 3 suche в intro 3 блока ---*/
.search-trigger {
					cursor: pointer;
					vertical-align: middle;
					width: 60%;
					/*border: 2px solid #000000;*/
				}
.kategorie-box{
				display:none;
				position:absolute;
				font-size:18px;
				left: 15%;
				top:50px;
				width:250px;
				max-height:550px;
				overflow-y:auto;
				background:#d7eae8;
				border:1px solid #ccc;
				border-radius:10px;
				margin-top:5px;
				box-shadow:0 4px 10px rgba(0,0,0,0.2);
				z-index:999;
				}
.kategorie-box a.kat-item {
							display: block;
							padding: 8px 12px;
							text-decoration: none;
							color: inherit;
							cursor: pointer;
							}
.kategorie-box a.kat-item:hover {
									background-color: #f0f0f0;
								}
.kat-item{
			padding:12px;
			cursor:pointer;
			border-bottom:1px solid #eee;
		}

.kat-item:hover{
				background:#f2f2f2;
			}
/* ===== ВЫПАДАЮЩЕЕ МЕНЮ KATEGORIE ===== */
#katMenu {
    display: none;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 60px;
    width: 90%;
    max-width: 400px;
	max-height: calc(50vh - 40px);  /* ← 100% минус отступы сверху/снизу */
	/*max-height: 45vh;  /* ← 80% от высоты экрана */
    overflow-y: auto;
    background: #d7eae8;
	/*border: 3px solid #000000;*/
    border-radius: 10px;
   /* box-shadow: 0 4px 10px rgba(0,0,0,0.2);*/
    z-index: 99999 !important;
    padding: 8px 0;
}

/* Стили для пунктов меню */
#katMenu .kat-item {
    display: block;
    padding: 6px 6px;      /* ← уменьшил отступы сверху/снизу */
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    font-size: 15px;        /* ← чуть меньше шрифт */
    line-height: 1.0;       /* ← уменьшил межстрочный */
    min-height: 8px;       /* ← убрал лишнюю высоту */
}


#katMenu .kat-item:hover {
    background: #f2f2f2;
}

#katMenu .kat-item:last-child {
								border-bottom: none;
							}
																	/* Затемнение */
#katOverlay {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background: rgba(0, 0, 0, 0.5);
			z-index: 99998;
			}
														/* подсказка KATEGORIE*/
#infoTooltip {
				display: none;
				position: absolute;
				bottom: 60px;
				left: 50%;
				transform: translateX(-50%);
				width: 80vw;
				max-width: 80vw;

				padding: 12px;
				background: #c5e5cc;
				border: 1px solid #ccc;
				border-radius: 8px;
				box-shadow: 0 2px 10px rgba(0,0,0,0.15);
				z-index: 9999;

				font-size: 14px;
				line-height: 1.4;
				text-align: left;
			}
														/* иконка info KATEGORIE*/
#infoButton {
			cursor: pointer;
			vertical-align: middle;
			width: 35px;
			margin-right: -10px;
			}


/*------------------------------------------------------------------- end such-kategorie.php ------------------------------------------------------------------*/



/* =================================================================== such_wort.php ==================================================================== */
/* =================================================================== such_wort.php ==================================================================== */
/* =================================================================== such_wort.php ==================================================================== */

.search-input {
				padding: 7px;
				font-size: 14px;
				text-align: left;
				border-radius: 6px;
				border: 2px solid #000000;
				width:150px;
				}
.search-button {
				font-size: 14px;
				text-align: center;
				color:#d5c496; 
				font-weight:bold;
				height:35px; 
				border-radius: 6px;
				border: 2px solid #c5c68d;
				background-color:#003700;
				cursor: pointer;
				}
											/* иконка info SUCHEN*/
#infoButtonS {
				cursor: pointer;
				vertical-align: middle;
				width: 35px;
				margin-right: -5px;
				}

											/* подсказка SUCHEN*/
#infoTooltipS {
				display: none;
				position: absolute;
				bottom: 60px;
				left: 50%;
				transform: translateX(-50%);
				width: 80vw;
				max-width: 80vw;

				padding: 12px;
				background: #c5e5cc;
				border: 1px solid #ccc;
				border-radius: 8px;
				box-shadow: 0 2px 10px rgba(0,0,0,0.15);
				z-index: 9999;

				font-size: 14px;
				line-height: 1.4;
				text-align: left;
				}


/*------------------------------------------------------------------- end such_wort.php ------------------------------------------------------------------*/






/* =================================================================== such_firmen.php ==================================================================== */
/* =================================================================== such_firmen.php ==================================================================== */
/* =================================================================== such_firmen.php ==================================================================== */

												/* иконка info FIRMEN*/
#infoButtonF {
				cursor: pointer;
				vertical-align: middle;
				width: 35px;
				margin-right: -10px;
			}
												/* подсказка FIRMEN*/
#infoTooltipF {
				display: none;
				position: absolute;
				bottom: 60px;
				left: 50%;
				transform: translateX(-50%);
				width: 80vw;
				max-width: 80vw;

				padding: 12px;
				background: #c5e5cc;
				border: 1px solid #ccc;
				border-radius: 8px;
				box-shadow: 0 2px 10px rgba(0,0,0,0.15);
				z-index: 9999;

				font-size: 14px;
				line-height: 1.4;
				text-align: left;
			}
													/* ===== ВЫПАДАЮЩЕЕ МЕНЮ FIRMEN ===== */
#katMenuF {
			display: none;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			top: 60px;
			width: 90%;
			max-width: 400px;
			max-height: calc(50vh - 40px);  /* ← 100% минус отступы сверху/снизу */
			/*max-height: 45vh;  /* ← 80% от высоты экрана */
			overflow-y: auto;
			background: #d7eae8;
			border: 1px solid #ccc;
			border-radius: 10px;
		   /* box-shadow: 0 4px 10px rgba(0,0,0,0.2);*/
			z-index: 99999 !important;
			padding: 8px 0;
		}
																/* Стили для пунктов меню */
#katMenuF .kat-item {
					display: block;
					padding: 6px 6px;      /* ← уменьшил отступы сверху/снизу */
					text-decoration: none;
					color: inherit;
					border-bottom: 1px solid #eee;
					cursor: pointer;
					font-size: 15px;        /* ← чуть меньше шрифт */
					line-height: 1.0;       /* ← уменьшил межстрочный */
					min-height: 8px;       /* ← убрал лишнюю высоту */
				}


#katMenuF .kat-item:hover {
							background: #f2f2f2;
						}

#katMenuF .kat-item:last-child {
								border-bottom: none;
							}
/*------------------------------------------------------------------- end such_firmen.php ------------------------------------------------------------------*/



/* =================================================================== einzelnartikel.php ==================================================================== */
/* =================================================================== einzelnartikel.php ==================================================================== */
/* =================================================================== einzelnartikel.php ==================================================================== */



/*----------------------------------------------------------------- end einzelnartikel.php -------------------------------------------------------------------*/























@keyframes pulse-glow {
						0% {
							box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
							}
						70% {
							box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
							}
						100% {
							box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
							}
						}






				

/* ================================================================== МОБИЛЬНЫЕ УСТРОЙСТВА ====================================================== */
@media (max-width: 480px) {
								.product-card {
									height: calc(100dvh - 40px);  /* ← То же самое для мобильных */
									padding: 4px 0;
								}
								
								.product-card-img {
													max-height: 45vh;  /* ← Чуть меньше на телефонах */
													/*pointer-events: none;*/
												}
								
								.product-card-container > div:last-child {
									font-size: 14px;
									padding: 6px 4px;
									max-height: calc(100% - 45vh - 50px);
								}
								
								.description {
									font-size: 13px;
									padding: 8px 10px;
									-webkit-line-clamp: 2;  /* ← 2 строки на телефонах */
									max-height: 60px;
								}
								
								.ausverkauft-badge {
														position: absolute;
														bottom: 50%;
														left: 20px;
														width: 250px;
														height: auto;
														z-index: 10;
														pointer-events: none;
													}
								.such-block {
												flex-wrap: wrap;
												gap: 5px;
												padding: 8px;
											}
								.such-block #suchText {
														min-width: 60px;
														width: 100%;
														order: 2;
														}
								.such-block #suchButtonImg {
																order: 3;
															}
							}







/* ===== БОЛЬШИЕ ЭКРАНЫ ===== */
@media (min-width: 769px) {
							.product-card-container {
														max-width: 700px;
													}
							
							.product-card-img {
													max-height: 60vh;
													/*pointer-events: none;*/
												}
							
							.product-card-container > div:last-child {
													max-height: calc(100% - 60vh - 60px);
												}
							
							.description {
											-webkit-line-clamp: 4;  /* ← 4 строки на планшетах/ПК */
											max-height: 100px;
										}
							.ausverkauft-badge {
													position: absolute;
													bottom: 50%;
													left: 20px;
													width: 250px;
													height: auto;
													z-index: 10;
													pointer-events: none;
												}
							}
/*-------------------------------------------------------------------------------------------------------------------------------------------*/


.besuchercounterxx {
					color:Gray;
					font-size:14px;
					text-align:center;
					}