/* ==========================================================================
   BALLETTBEKLEIDUNG.DE - ZENTRALES CSS
   BB-CSS-KOMPLETT-NEU.css
   
   Testfassung: 2026-08-24

   Zusammengeführt aus:
   - BB-CSS-KOMPLETT.css
   - menu.css
   - BB-responsive-fixes.css

   Hauptbreakpoint:
   - bis 767px  : Mobile / Hamburger
   - ab 768px   : Desktop-Seitenmenü

   WICHTIG:
   Diese Datei ist zunächst als TESTDATEI gedacht.
   Erst nach Prüfung aller wichtigen Seitentypen die bisherigen CSS-Dateien
   endgültig ersetzen.
   ========================================================================== */

/*   BB-CSS-KOMPLETT.csv


div {
    outline: 1px solid red !important;
}
*/

/*
unsere Farben ab 2025
#FED5D9   	rosa
#7E212C		bordeaux
#CCD3D9		grau helles
#321E17		dunkelbraun
#000		schwarz
#FFF		weiß


ehemals

#F7CBDE - helles rosa - Hintergrund
#FED5D9 - helles rosa2 - Balken und alles was besser sichtbar ist - ist auch im neuen Profil2025
#840039 - dunkles rot
		
*/		
		
		


/* poppins-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/poppins-v23-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/poppins-v23-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v23-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/poppins-v23-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins-v23-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/poppins-v23-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/poppins-v23-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/poppins-v23-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v23-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/poppins-v23-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/poppins-v23-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/poppins-v23-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}







	

#cookiedb a {color:#000; text-decoration:underline;}

#cookiedb a:hover {text-decoration:underline;}

#cookiedb div {padding:10px; padding-right: 70px;}

#cookiedb { 
   outline: 1px solid #7E212C; 
   text-align:right; 
   border-top:1px solid #fff;
   background: #FED5D9; 
   background: -moz-linear-gradient(top, #d6e0eb 0%, #FED5D9 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FED5D9), color-stop(100%,#FED5D9)); 
   background: -webkit-linear-gradient(top, #FED5D9 0%,#FED5D9 100%); 
   background: -o-linear-gradient(top, #FED5D9 0%,#FED5D9 100%);
   background: -ms-linear-gradient(top, #FED5D9 0%,#FED5D9 100%); 
   background: linear-gradient(to bottom, #FED5D9 0%,#FED5D9 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#FED5D9', endColorstr='#FED5D9',GradientType=0 ); 
   position:fixed;
   bottom:0px; 
   z-index:10000; 
   width:100%; 
   font-size:12px; 
   line-height:16px;}

#cookiedbCloser {
   color: #fff;
   font: 14px/100% arial, sans-serif;
   position: absolute;
   right: 10px;
   text-decoration: none;
   text-shadow: 0 1px 0 #fff;
   top: 5px;
   cursor:pointer;
   border-top:1px solid #7E212C; 
   border-left:1px solid #7E212C; 
   border-bottom:1px solid #7E212C; 
   border-right:1px solid #7E212C; 
   padding:4px;
   background: #7E212C; /* Old browsers */
   background: -moz-linear-gradient(top, #7E212C, #7E212C 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7E212C), color-stop(100%,#7E212C)); 
   background: -webkit-linear-gradient(top, #7E212C,#7E212C 100%); 
   background: -o-linear-gradient(top, #7E212C,#7E212C 100%); 
   background: -ms-linear-gradient(top, #7E212C,#7E212C 100%); 
   background: linear-gradient(to bottom, #7E212C,#7E212C 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(    startColorstr='#7E212C', endColorstr='#7E212C',GradientType=0 ); 
 }

#cookiedbCloser:hover {border-bottom:1px solid white; border-right:1px solid white; border-top:1px solid white; border-left:1px solid white;}
    




.buttonzahlversand {
    display: block;
    text-align: center;
    font-weight: 600;
    padding: 12px 24px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    text-decoration: none; /* Entfernt Standard-Link-Stile */
}

.buttonzahlversand.selected {
    background-color: #840039;
    color: white !important;
}

.buttonzahlversand.unselected {
    background-color: #e5e7eb; /* Tailwind: bg-gray-200 */
    color: black !important;
}

.buttonzahlversand.unselected:hover {
    background-color: #d1d5db; /* Tailwind: bg-gray-300 */
    color: black !important;
}


/* Styling für die Zahlungs- und Versandbuttons */
.buttonzahlungversand {
    display: block;
    width: 100%;
    max-width: 400px;
    padding: 12px;
    margin: 5px auto; /* Zentriert & mit Abstand */
    text-align: center;
    font-size: 16px;
	height: 40px;
    font-weight: bold;
    color: white;
    background: #fff; /* Dunkles Bordeaux passend zur Shop-Farbgebung */
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.buttonzahlungversandactive {
    display: block;
    width: 100%;
    max-width: 400px;
    padding: 12px;
    margin: 5px auto; /* Zentriert & mit Abstand */
    text-align: center;
    font-size: 16px;
	height: 40px;
    font-weight: bold;
    color: white;
    background: #666; /* Dunkles Bordeaux passend zur Shop-Farbgebung */
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
	
}.buttonbestellen {
    display: block;
    width: 100%;
    max-width: 400px;
    padding: 12px;
    margin: 5px auto; /* Zentriert & mit Abstand */
    text-align: center;
    font-size: 16px;
	height: 40px;
    font-weight: bold;
    color: white;
    background: #666; /* Dunkles Bordeaux passend zur Shop-Farbgebung */
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

/* Hover-Effekt */
.buttonzahlungversand:hover {
    background: #333; /* Helleres Bordeaux */
		height: 40px;
    transform: scale(1.03);
}

/* Aktiver Button (gewählte Zahlungs-/Versandart) */
.buttonzahlungversand.active {
    background: #666; /* Markierung für aktivierte Option */
	height: 40px;
}

/* Container für die Auswahlbereiche */
.boxfloat400 {
    display: flex;
    flex-direction: column;
    gap: 10px;
	margin: 10px;
    max-width: 420px;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 20px;
}





/* Info-Leiste (verschwindet beim Scrollen) */
#bbv2-top-info-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: #840039; /*CCD3D9*/
    color: white;
    font-size: 12px;
    text-align: center;
    z-index: 1001;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.4s ease-in-out, opacity 0.4s;
}


/* Standard: Header sitzt unter der Info-Leiste */
#flexbox-main_head {
    position: fixed;
    top: 40px; /* Direkt unter der Info-Leiste */
    left: 0;
    width: 100%;
    height: 80px; /* Header-Höhe */
    background-color: white;
    z-index: 1000;
/*    border-bottom: 2px solid #ccc;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    transition: top 0.4s ease-in-out;
}

.scrolled #flexbox-main_head {
    top: 0; /* Header rutscht nach oben */
}


@media (max-width: 767px) {
		#bbv2-top-info-bar {
			display: none;
		}
}

/* 2️⃣ Haupt-Navigation */
#bbv2-main-header {
    position: sticky;
    top: 0;
    background: white;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-bottom: 4px solid #CCD3D9;
    z-index: 1000;
}

.bbv2-nav-left ul {
    display: flex;
    list-style: none;
    padding: 0;
}

.bbv2-nav-left li {
    padding: 0 15px;
    cursor: pointer;
}

.bbv2-nav-logo img {
    height: 40px;
}

.bbv2-nav-right .bbv2-search-box {
    background: #f8f8f8;
    border: none;
    padding: 5px 10px;
    font-size: 14px;
    width: 200px;
}

/* 3️⃣ Shop-Ansicht */
#bbv2-shop-wrapper {
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Linkes Menü */
#bbv2-shop-sidebar {
    width: 250px;
    background: white;
}

#bbv2-shop-sidebar ul {
    list-style: none;
    padding: 0;
}

#bbv2-shop-sidebar li {
    padding: 10px;
    cursor: pointer;
}

#bbv2-shop-sidebar .bbv2-active {
    font-weight: bold;
}

/* Rechte Seite mit Produkten */
#bbv2-shop-products {
    flex: 1;
    padding: 0 20px;
}

/* 4️⃣ Info-Zone */
#bbv2-info-zone {
    background: #f8f8f8;
    padding: 20px;
    text-align: center;
}

/* 5️⃣ Footer-Zone */
#bbv2-footer-info {
    background: black;
    color: white;
    padding: 20px;
    text-align: center;
}

/* 6️⃣ Lauftext-Zeile */
#bbv2-ticker-bar {
    height: 15px;
    background: red;
    color: white;
    font-weight: bold;
    text-align: center;
    overflow: hidden;
}




/* 1️⃣ Header Grundstruktur */
/* Standard: Header sitzt unter der Info-Leiste */
#bbh-main-header {
    position: fixed;
    top: 40px; /* Direkt unter der Info-Leiste */
    left: 0;
    width: 100%;
    height: 100px;
    background-color: white;
    z-index: 1000;
    border-bottom: 4px solid #CCD3D9;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    transition: top 0.4s ease-in-out;
}

/* Wenn gescrollt wird: Info-Leiste weg & Header rutscht nach oben */
.scrolled #bbv2-top-info-bar {
    transform: translateY(-100%);
    opacity: 0;
}

.scrolled #bbh-main-header {
    top: 0; /* Header rutscht nach oben */
}



/* 2️⃣ Navigation */
.bbh-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
}

/* 1️⃣ Basis-Styling für Navigation */
.bbh-nav-left {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.bbh-nav-item {
    position: relative;
    padding: 10px 15px;
}

.bbh-nav-item a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    transition: color 0.3s ease;
}

.bbh-nav-item a:hover {
    color: #7E212C;
}

/* 2️⃣ Styling für Untermenü */
.bbh-submenu {
    display: none; /* Standardmäßig versteckt */
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    list-style: none;
    padding: 5px 0;
    width: 200px;
    z-index: 1000;
}

.bbh-submenu li {
    padding: 8px 15px;
}

.bbh-submenu li a {
    color: black;
    text-decoration: none;
    font-size: 14px;
    display: block;
}

.bbh-submenu li a:hover {
    background: #f8f8f8;
}

/* 3️⃣ Dropdown anzeigen bei Hover */
.bbh-has-submenu:hover .bbh-submenu {
    display: block;
}




/* 4️⃣ Logo in der Mitte */
.bbh-nav-logo img {
    height: 80px;
}

/* 5️⃣ Rechte Navigation */
.bbh-nav-right {
    display: flex;
    align-items: center;
}

/* 6️⃣ Suchfeld */
.bbh-search-form {
    margin-right: 20px;
}

.bbh-search-box {
    background: #f8f8f8;
    border: none;
    padding: 5px 10px;
    font-size: 14px;
    width: 200px;
    border-radius: 5px;
}

/* 7️⃣ Icons */
.bbh-icon img {
    height: 24px;
    margin-left: 15px;
    transition: transform 0.2s ease-in-out;
}

.bbh-icon:hover img {
    transform: scale(1.1);
}









cssmenu ul menuaktivsale a { 
		color: red;
		font-size: 0.8em;
		line-height: 1.4em; }




.product-image img {
    background-color: #f0f0f0; /* Hellgrau */
    display: block; /* Sorgt für saubere Umrandung */
    padding: 5px; /* Optional, für Abstand zum Bildinhalt */
}

.favorite-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #ccc; /* Grau */
    cursor: pointer;
    transition: color 0.3s ease;
}

.favorite-icon:hover {
    color: red; /* Rot beim Hover */
}



/*ein Spezialcontainer unter dem Produktbild mit 2 Infobereichen links und rechtsbündig */
.info-details-container {
    display: flex; /* Aktiviert Flexbox für horizontale Anordnung */
    justify-content: space-between; /* Elemente links und rechts platzieren */
    align-items: center; /* Vertikale Zentrierung */
    padding: 5px 10px; /* Optionaler Innenabstand */
    border-top: 1px solid #ddd; /* Optional: dünne Trennlinie */
    margin-top: 5px; /* Abstand vom Bild */
	margin-left: 0px;
}

.info-left {
    font-size: 14px; /* Schriftgröße für die Info */
    font-weight: bold; /* Optional: Fettgedruckt */
}

.info-right {
    display: flex; /* Für die Farbpunkte */
    gap: 5px; /* Abstand zwischen den Farbpunkten */
}


.verfuegbarkeit-table td {
    text-align: center;
    font-size: 10px;
    padding: 5px;
}

.verfuegbarkeit-table .rotated-header {
    position: relative;
    width: 30px; /* Breite der Zelle, kann angepasst werden */
    height: 100px; /* Höhe für den Text, um ihn korrekt zu drehen */
    vertical-align: bottom; /* Text am unteren Rand der Zelle ausrichten */
}

.verfuegbarkeit-table .rotated-header span {
    display: block;
    transform: rotate(-90deg); /* Text um 90° drehen */
    transform-origin: bottom left; /* Drehpunkt unten links */
    white-space: nowrap; /* Verhindert Zeilenumbrüche */
    font-size: 10px;
    text-align: left; /* Optional: Text linksbündig */
}


.rotated-header {
    position: relative;
    height: 120px; /* Höhe der Zelle anpassen */
    width: 30px; /* Breite der Zelle anpassen */
    text-align: center; /* Text zentrieren */
    vertical-align: bottom; /* Text am unteren Rand ausrichten */
}

.rotated-header span {
    position: absolute;
    bottom: 0; /* Text an den unteren Rand der Zelle setzen */
    left: 50%; /* Horizontale Mitte */
    transform: translateX(-50%) rotate(-90deg); /* Drehen und zentrieren */
    transform-origin: bottom center; /* Drehpunkt festlegen */
    white-space: nowrap; /* Verhindert Zeilenumbrüche */
    font-size: 12px; /* Schriftgröße anpassen */
}




	
        .category-text h2 {
            font-size: 18px;
            font-weight: bold;
            color: #7E212C;
            margin-bottom: 8px;
			margin-top: 25px;
        }
		
        .category-text {
            font-size: 14px;
            line-height: 1.6;
            color: #333;
            text-align: left;
        }







@media (max-width: 767px)  

{



        #flexbox-main_welcome {
            display: none !important;
        }
		
		
		.pconly {
		display:none;
		}
		
		
		.spanmenupunkt {
		margin-bottom: 10px;
		padding: 5px 0px; 
		background: #FED5D9;
		color: #FFFFFF;
		}		

		.input-checkbox {
		-webkit-appearance: none;
		border-radius: 0;
		}	

		body {
		display: block; /* Standard-Blockflow */
		font-family: 'Poppins', sans-serif;
		letter-spacing: 0.04em;
		word-spacing: 0.35em;
		line-height: 2.8;
		
		width: 100vw;  /* Nutzung der vollen Breite */
		max-width: 100%;
		font-size: 14px;
		font-weight: 300;
		margin: 5px;
		}



		body a {
		color:#336699;
		text-decoration:none;}


		a.text-klein:link, 
		a.text-klein:visited, 
		a.text-klein:hover, 
		a.text-klein:current {
		color: #000000;
		font-size: 1.0em;
		text-decoration: none;
	}	


		iframe {max-width:100%; height:300px; }





		.category-text {
			font-size: 11px;
			line-height: 1.5;
			color: #333;
			text-align: left;
		}

		.category-text h2 {
			font-size: 14px;
			font-weight: bold;
			color: #7E212C;
			margin-bottom: 4px;
			margin-top: 12px;
		}




			
		#flexbox-main {
			display: flex;
			flex-direction: column;
			width: 100%;
			justify-content: flex-start !important; /* Anstatt 'left' */
			height: auto;
			background: #fff;
			padding-left: 0px;
			padding-right: 0px;
		}



		#flexbox-main_middle {
			display: flex;
			flex-direction: column; /* Ändert die Anordnung der Flex-Items auf eine Spalte */
			width: 100%;
			height: auto;
			background: #fff;
			margin-top: 30px;
			margin-left: 4px;
			margin-right: 14px;
			box-sizing: border-box;
		}


		.content_menu {
			width: 100%; /* Nimmt die volle Breite */
			background: #f7f7f7; /* Optional zur besseren Sichtbarkeit */
		}

		.content_content {
			width: 100%;
			height: auto;
			min-height: 2500px; /* Falls nötig */
			background: #FFFFFF;
			padding: 0px; /* Optional für Abstand */
			margin-top: 120px; /* Mindestabstand zum Menü */
		}

		.content_menu, .content_content {
			flex-grow: 0; /* Verhindert, dass die Elemente wachsen */
			flex-shrink: 0; /* Verhindert, dass die Elemente schrumpfen */
		}


		.content_menu, .content_content {
			width: 100%; /* Nimmt die volle Breite des Containers ein */
		}





		#flexbox-main_middle::after {
			content: "";
			display: block;
			clear: both;
		}



		#flexbox-main_head {		/* in Grundbox enthalten*/
			display:none;	}	




		#flexbox-main_footer {
		flex-basis: 30%;
		max-height: 150px;
		width: 100%;
		flex: 0 0 auto;
		box-sizing: border-box;
		padding: 0 0px;
		background:#fff;
		}	  	




		#flexbox-content_menu {
		background:#fff;
		width:100%;

		}




		#hilfscontainer{
		width: 100%;
		}

		aside {text-align:center;
		width:100%;}




		article {
			display: flex !important;
			flex-wrap: wrap !important;
			justify-content: center !important;
			width: 100% !important;
			float: none !important; /* Entfernt die float-Problematik */
		}

		main {
			display: flex !important;
			flex-direction: column !important;
			align-items: center !important;
			width: 100% !important;
			float: none !important;
		}





		main h1 {font-size: 4em;
		margin-bottom: 10px;
		margin-top: 0px;
		line-height: 35px;}		

		infoarea {border: 1px solid grey;
		border-radius:1px;
		float:left;
		margin:20px;
		max-width:250px;
		min-width:200px;
		padding-bottom:10px;
		padding-left:20px;
		padding-right:20px;
		padding-top:10px;}




		refpicture {
		border: 0px solid grey;
		float:left;
		min-width:50px;
		max-width:200px;
		padding-bottom:10px;
		padding-left:0px;
		padding-right:0px;
		padding-top:10px;}


		main article .text-grau  { 
		color: #666666;
		font-size: 14px;
		line-height: 19px; }

		main article .text-schwarz  { 
		color: #000000;
		font-size: 14px;
		line-height: 19px; }


		main article .text-klein  { 
		color: #000000;
		font-size: 11px;
		line-height: 14px; }

		main article .text-mini  { 
		color: #000000;
		font-size: 11px;
		line-height: 14px; }

		main article .Shop-Sonderpreis  { 
		color: #7E212C;
		font-size: 25px;
		line-height: 30px; }

		.Shop-Sonderpreis  { 
		color: #7E212C;
		font-size: 25px;
		line-height: 30px; }

		main article .Shop-Sonderpreis-kl  { 
		color: #000000;
		font-size: 1.3em;
		line-height: 1.4em; }	


		main article .ueberschrift1  { 
		color: #000000;
		font-size: 1.2em;
		line-height: 1.4em; }	




		main article .text-preis  { 
		color: #7E212C;
		font-size: 25px; }	

		main article h1  {
			font-size: 18px;
			color:#321E17;
			line-height: 40px; }
			

		main article h2  {
			font-size: 16px;
			color:#7E212C;
			font-weight: 400;
			line-height: 40px; }
			
		main article h3  {
			color:#333;
			font-size: 15px;
			font-weight: 400;	
			line-height: 80px; 			}
			
			
		main article h4  {
			color:#333;
			font-size: 12px;
			line-height: 21px;
			font-weight: 300;	
		}		

		main article .productdescription  { 
		color: #000000;
			font-size: 14px;
			line-height: 23px;
		}

		main article .productdescription a {
		color: #000000;
		}


		main article .productdescription_main  { 
		width: 120px;
		display:flex;
		color: #000;
			font-size: 14px;
			line-height: 23px;
		}



		#pdesc {
			width: 90%;
			overflow: auto;
			text-align: center; /* Falls zentriert */
		}

		#pdesc a{
		color: #000000;
		}




		main article .productspotprice  { 
		color: #7E212C;
		font-size: 1.3em;
		font-weight: bold;	}




		footer {background-color:#ffffff;
		clear:left;
		color:#000000;
		padding-bottom:10px;
		padding-top:10px;
		text-align:center;
		width: 100%;}

		footer .text-grau  { 
		color: #666666;
		font-size: 1.0em; }

		footer .text-klein  { 
		color: #000000;
		font-size: 0.6em; }


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


		#brands {

		background-color:#FFFFFF;
		padding-top:40px;
		padding-bottom:40px;	
		height: auto;
		/*	text-align:center;*/
		width: 90%;
		display:-webkit-flex;
		display:flex;
		display: none;
		}	 

		.floating-box-brands {
		/*	display: inline-block;*/
		width: 20%;
		/*	text-align: center;	*/
		margin: 10px;
		}

		.mobilefoot {
		background-color:#e2e2e2;
		color:#000;
		padding:30px;
		font-size: 16px;
		line-height: 25px;
		height: auto;
		}	 



		/* Boxen im header*/



		#menutopbox {display: none;}
		#menubottombox {display: none;}








		/* SCHRIFTEN*/


		h1, h2, h3, h4, h5, h6 {
		display: block;
		font-weight: bold;
		}

		h1 { 
		font-size: 16px; 
		margin: .10px 0;
		}
		h2 { 
		font-size: 14px; 

		}
		h3 { 
		font-size: 1.17em; 
		margin: .83em 0;
		}
		h4 { 
		font-size: 16px; 
		}
		h5 { 
		font-size: .83em; 
		margin: 1.5em 0;
		}
		h6 { 
		font-size: .75em; 
		margin: 1.67em 0;
		}



		/* CSS Document */

		/*CSS BALLETTBEKLEIDUNG DE

		#FED5D9 - helles rosa - Hintergrund
		#7E212C - dunkles rot
		*/


		/* CSS Document zur Formatierung des CSS Menüs VERTIKAL - MOBILE ANSICHT*/
		/* Es handelt sich um die normale Ansicht die im unteren Teil verändert wird */
		/* Der erste Teil könnte auch gelöscht werden, sofern er in er auch auf der echten Seite als Menü benutzt wird.*/



		/* cssmenu muss ausgeblendet werden, dieser Abschnitt wird für normale Anzeige verwendet*/
		#cssmenu
		{
		display:none;
		}




		label.responsive-nav-label {
		position: relative;
		display: block;
		padding: 0px;
		background: #7E212C;
		cursor: pointer;
		color: #fff;
		}

		label.responsive-nav-label span {
		margin-right: 0px;  
		}


		input#responsive-nav[type=checkbox]:checked ~ nav {
		position: relative;
		top: 0;
		}

		input[type=checkbox]{
		display: none;
		}






		/* MENÜ HAMBURGER */
		aside {text-align:center;
		width:100%;
		padding-bottom: 0px;
		}


		nav {margin:1px;
		text-align:center;
		position: absolute;
		top: -9999px;
		padding: 0px;  
		}



		nav a:after {
		display: none;
		}


		/* genereller Font und Größe */
		nav li {
		float: none;
		width: 100%;
		border-bottom: none; 
		font-family: 'dejavu_sanscondensed', sans-serif;
		font-size: 20px;	 
		}

		/*durch padding die Höhe der Boxen */   
		nav li a {
		margin-bottom: 10px;
		padding: 5px 0px; 
		background: #FED5D9;
		color: #FFFFFF;

		}

		nav ul li:hover {
		background: none;
		}

		nav ul li a:hover {
		background: #666666;
		}



		nav ul ul {
		position: relative;
		width: 100%;
		left: 0;
		top: 0;
		background: none;
		box-shadow: none;
		}

		nav ul ul li {
		padding-left: 20px;
		}






		/*entfernen der Standardformatierung der Listen*/
		nav ul          
		{	
		list-style: none;
		margin: 0;
		padding-left: 0px;
		}


		/*Anordnung Menüpunkte nebeneinander*/
		nav > ul > li 	
		{   
		float: left;
		}


		/*ausblenden aller Unterebenen*/
		nav > ul > li > ul   
		{
		display: none;
		}


		/*Aussehen der Menü a Elemente */
		nav > ul a   
		{
		display: block;
		white-space: nowrap;
		padding: 3px;
		background: #7E212C;
		}


		/* Aussehen des Menübereichs */
		nav ul > li > ul > li a {
		background: #fff;
		border-radius: 6px 6px 6px 6px;
		border-color:#CCCCCC;
		color: #000;
		}


		/* Hier grundsätzliche Abstände, Hintergrundfarbe des gesamten Menüs*/
		nav > ul {
		float: left;
		overflow: hidden;
		padding: 0 0px 0 0px;
		box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
		background: #fff;
		}


		/*Hover löst Anzeigen der zweiten Menüeben aus */

		nav > ul > li:hover > ul 	{
		display: block;
		position: absolute;
		}

		nav > ul > li > ul > li {
		position: relative;
		}



		/*Dritte Menüebene, wird nur angezeigt wenn im Element darüber hover aktiv ist*/
		nav > ul > li > ul > li > ul {
		display: none;
		}

		nav > ul > li > ul > li:hover > ul {
		display: block;
		}

		nav > ul > li > ul > li:hover > ul {
		display: block;
		position: absolute;
		left: 100%;
		top: 0;
		}

		/* Menüpunkte mit Untermenüpunkten kennzeichnen*/
		nav li > a:after {
		content: " >>";
		}

		nav li > a:only-child:after {
		content: " +";
		}




		/* VERÄNDERUNGEN für die mobile Ansicht*/

		nav > ul > li 	/*Anordnung Menüpunkte untereinander*/
		{   
		float: none;
		}

		/* Alle Positionierungen und floats entfernen*/
		nav > ul, #nav > ul > li {
		float: none;
		}

		nav > ul > li > ul, nav > ul > li:hover > ul {
		position: relative;
		}

		nav > ul > li > ul > li:hover > ul {
		position: relative;
		left: 0;
		}

		nav > ul > li > ul > li > ul > li > a {
		font-style: italic;
		}



}




@media (min-width: 768px)  

{
		

		/* CSS Document */
		
		/*CSS BALLETTBEKLEIDUNG DE
		 
		#FED5D9 - helles rosa - Hintergrund
		#7E212C - dunkles rot
		
		Standardfont BB: font-family: 'Poppins', sans-serif;
		 
		normale Schriften: mini, text, text-fett, text-gross, text-gross-fett, text-gross-fett-dkrot, text-gross-italic
		andere Schriften: text-infobox - hellrosa Hintergrund z.B. in Produktanzeige
		*/
			

		.phoneonly {
			display:none;
		}

		.mobileonly {
			display:none;
		}

		
		
		body {
		/*	display:flex;
			display:-webkit-flex;	
			flex-flow: row wrap;*/
			justify-content: center;
			align-items: center;
			font-family: 'Poppins', sans-serif;
			letter-spacing: 0.04em;
			font-size: 14px;
			font-weight: 300;
			line-height: 26px;
			margin:0px;}
			
		body a {
		color:#333;
		text-decoration:none;}
		
		
		
		.text-mini  { 
			color: #000000;
			font-size: 11px;
			line-height: 15px;}
			
		.text-normal  { 
			color: #000000;
			font-size: 14px;
			}
		
		a.text-klein:link,visited,hover,current {
			color: #000000;
			font-size: 10px;
			line-height: 13px;
			text-decoration:none; }
			
		a.text-klein:link,hover {
			color: #000000;
			font-size: 10px;
			line-height: 13px;
			text-decoration:underline; }
			
		
		
		iframe {width:600px; height:auto; }
		
		#flexbox-main {					/* Grundbox der gesamten Seite*/
		display: flex;
		flex-direction: column;
		height: 100vh; /* Volle Höhe des Viewports */
		
		width:100%;
		justify-content: left;
		
		height:auto;
		background:#fff;
		padding-left: 0px;
		padding-right: 0%;
			}
			
		
		
		#flexbox-main_head-mobile {		/* in Grundbox enthalten*/
			display:none;
			}
		  
		#flexbox-main_middle {
			display: flex;
			flex: 1;
			margin-top: 150px; /* Platz für den fixierten Header */
			overflow: hidden; /* Verhindert, dass das ganze Layout scrollt */
			
			width:auto;
			height:auto;
			background:#fff;
			padding-left: auto;

			box-sizing: border-box;
		
			}
			
			
			@media (min-width: 1800px)  	{#flexbox-main_middle {margin-left:10%; margin-right:10%}}

#flexbox-main_welcome {
    width: 100%;
	display: block !important;
    max-width: 100vw;
    text-align: center;
    margin: 0;
    padding: 0;
    position: relative; /* Stellt sicher, dass es unter dem Header bleibt */
    z-index: 1; /* Hebt es über den Hintergrund, aber unter den Header */
    margin-top: 150px; /* Platz für den fixierten Header schaffen */
}

#flexbox-main_welcome img {
    width: 100%;
    height: auto;
    display: block;
}


    .welcome-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 9vw;
        height: 2.8vw;
        font-size: 0.8vw;
        font-weight: bold;
        color: #840039;
        background: rgba(255, 255, 255, 1);
        border: 0.15vw solid #840039;
        border-radius: 0.2vw;
        text-decoration: none;
        text-align: center;
        transition: background 0.3s;
    }

    .welcome-button:hover {
        color: #321E17;
		border: 0.15vw solid #321E17;
    }





		
		#flexbox-main_footer {
			height:auto;
			background:#fff;
			box-sizing: border-box;	
		  }	  	
		
			
		
		
		.content_menu {
			width: 240px;
			float: left;	
			height:auto;
			font-style:normal;
			text-align:center;	
			vertical-align:top;
		
				height: calc(100vh - 220px); /* Gesamte Höhe abzüglich Header */
				
			font-size:12px;
			margin-left: 20px;  /* linker Rand Menü*/
			margin-right: 2px;	
			}	
			
			
		.content_content {
			width: 100%;
			height:auto;
			font-style:normal;
			text-align:left;	
			vertical-align:top;
			margin-left: 0px;    /*normal 35px*/
			margin-right: 5px;	
			}		


		
		
		.searchmobile {
			display:none;
			}
			
		
		aside {float:left;
			text-align:center;
			min-width:200px;
			max-width:400px;}
		
		
		
		main {background-color:#ffffff;
			float:left;
			width:100%;
		}
			
		main h1 {
			font-size: 16px;
		}		
		
		
		infoarea {border: 1px solid grey;
			border-radius:1px;
			float:left;
			margin:20px;
			max-width:250px;
			min-width:100px;
			padding-bottom:10px;
			padding-left:20px;
			padding-right:20px;
			padding-top:10px;}
		
		
		article {border: 0px solid grey;
			background:#fff;
			border-radius:1px;
			float:right;
			margin-left:20px;				/*normal 10px*/
			min-width:20vw;
			/*width:100%;*/
			padding-bottom:10px;
			padding-left:0px;
			padding-right:0px;
			padding-top:0px;
			-webkit-flex:1;
			flex:1;
		
			}
			
			
		main article {background-color:#ffffff;
			float:left;
			width:100%;
		}
		
		refpicture {border: 0px solid grey;
		
			float:left;
			min-width:50px;
			max-width:200px;
			padding-bottom:10px;
			padding-left:0px;
			padding-right:0px;
			padding-top:10px;}
		



		
		main article a { 
			color: #000;
	 }
	 
		main article a:visited { 
			color: #000;
	 }
	 
		main article a:hover  { 
			color: #7E212C;
	 }



		main article .text-grau  { 
			color: #666666;
			font-size: 12px;
			line-height: 16px; }
			
		main article .text-schwarz  { 
			color: #000000;
		}
		
		
		main article .text-klein  { 
			color: #000000;
			font-size: 10px; 
		line-height: 13px;}
		
		
		main article .text-mini  { 
			color: #000000;
			font-size: 11px;
			line-height: 14px; }



		main article .Shop-Sonderpreis  { 
			color: #7E212C;
			font-size: 20px;
			line-height: 30px; }

		Shop-Sonderpreis  { 
			color: #7E212C;
			font-size: 20px;
			line-height: 24px; }
			
		main article .Shop-Sonderpreis-kl  { 
			color: #000000;
			font-size: 16px;
			line-height: 20px; }	

		main article .ueberschrift1  { 
			color: #000000;
			font-size: 12px;
			line-height: 16px;}	

		
		main article .text-preis  { 
			color: #7E212C;
			font-size: 14px; 
			line-height: 18px;}	
		
		main article h1  {
			font-size: 25px;
			color:#321E17;
			line-height: 55px; }
			

		main article h2  {
			font-size: 18px;
			color:#7E212C;
			font-weight: 400;
			line-height: 35px; }
			
		main article h3  {
			color:#333;
			font-size: 16px;
			font-weight: 400;		}
			
		main article h4  {
			color:#333;
			font-size: 13px;
			line-height: 21px;
			font-weight: 300;		
			}		
		
		

			
			
		
		main article .productdescription  { 
		color: #000000;
			font-size: 12px;
			line-height: 16px; 
		}
		
		main article .productdescription a {
		color: #000000;
		}
		
		
		
		main article .productdescription_main  { 
			with: 120px;
			display:flex;
			display:-webkit-flex;	
			color: #000;
			font-size: 12px; 
		}
		
		
		
		#pdesc {
		width: 190px;
		overflow: auto;
		align: middle;
		font-size: 12px; 
		line-height:16px;
		}
		
		#pdesc a {
			color: #000000;
		}
		
		
			
		
		main article .productspotprice  { 
		color: #7E212C;
		font-size: 16px;
		font-weight:bold;	}
		
		
		
		footer {background-color:#ffffff;
			clear:left;
			color:#000000;
			padding-bottom:10px;
			padding-top:10px;
			text-align:center;
			width: 100%;}
			
		footer .text-grau  { 
			color: #666666;
			font-size: 14px; }
		
		footer .text-klein  { 
			color: #000000;
			font-size: 12px; }
			
		
		img {max-width:100%; height:auto; }
		
		
		#brands {background-color:#FFFFFF;
		/*	clear:left;*/
			padding-top:40px;
			padding-bottom:40px;	
			height: auto;
			text-align:center;
			width: 100%;
			display:-webkit-flex;
			display:flex;
			align-items: center;
			justify-content: center;	
		}	 
		
		
		.floating-box-brands {
			display: inline-block;
			width: 10%;
			text-align: center;	
			margin: 10px;
			}
		
		.mobilefoot {
		
			display:none;
		}		
		
		
		/* Bildanzeige in Referenzen*/
		
		.simplegallery {
			  margin: 0 auto;
			  width: 417px;
			  height: 380px;
			  overflow: hidden;
			}
			
		.simplegallery .content {
			  background: #fff;
			  position: relative;
			  width: 418px;
			  height: 270px;
			  overflow: hidden;
			}
			
		.simplegallery .content img {
			  width: 415px;
			  border: 1px solid #9c9c9c;
			}
			
		.simplegallery .thumbnail { margin-top: 5px; }
		.simplegallery .thumbnail .thumb {
			  float: left;
			  width: 100px;
			  height: 100px;
			  margin: 0 5px 0 0;
			  cursor: pointer;
		}
		
		.simplegallery .thumbnail .thumb img {
			 border: 1px solid #9c9c9c;
			  width: 100px;
		}
		.simplegallery .thumbnail .last { margin: 0; }
		.clear { clear: both; }
		
		/* SCHRIFTEN*/
		
		
		h1, h2, h3, h4, h5, h6 {
			display: block;
			font-weight: bold;
		}
		h1 { 
			font-size: 16px; 
			margin: .67em 0;
		}
		
		h4 { 
		font-size: 14px; 
		}
		
		
		
		/* ============================================================
   06 DESKTOP-SEITENMENÜ
   Quelle: bisherige menu.css, jetzt zentral integriert.
   Gilt nur innerhalb des bestehenden Desktop-Blocks ab 768px.
   ============================================================ */

/* Das mobile <nav> im Seitenmenü wird auf Desktop ausgeblendet. */
nav {
    display: none;
}

/* Historisches Checkbox-Hamburger ausblenden. */
input#responsive-nav,
label.responsive-nav-label {
    display: none;
}

/* Grundstruktur des linken Kategoriemenüs */
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    box-sizing: border-box;
}

#cssmenu {
    width: 250px;
    font-family: 'Merriweather Sans', sans-serif;
    text-align: left;
    color: #000;
}

#cssmenu ul ul {
    display: none;
}

.align-right {
    float: right;
}

/* Hauptkategorien */
#cssmenu > ul > li > a {
    padding: 12px 8px;
    border-bottom: 0;
    cursor: pointer;
    z-index: 2;
    font-size: 13px;
    font-weight: 300;
    text-decoration: none;
    color: #000;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    background: #fff;
}

#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a:hover {
    color: #666;
    background: #fff;
}

#cssmenu > ul > li.open > a {
    color: #840039;
    background: #fff;
    margin-left: 5px;
    border-bottom: none;
}

#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
    border-bottom: 0;
}

/* Pfeil / Holder */
.holder {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: 0;
}

.holder::after,
.holder::before {
    display: block;
    position: absolute;
    content: "";
    width: 4px;
    height: 4px;
    right: 10px;
    z-index: 10;
    transform: rotate(-135deg);
}

.holder::after {
    top: 17px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
}

.holder::before {
    top: 18px;
    border-top: 2px solid;
    border-left: 2px solid;
    border-top-color: inherit;
    border-left-color: inherit;
}

#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
    border-color: #000;
}

/* Untermenüs */
#cssmenu ul ul li a {
    cursor: pointer;
    border-bottom: 0;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    padding: 10px 25px;
    z-index: 1;
    text-decoration: none;
    font-size: 13px;
    font-weight: 300;
    color: #333;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#cssmenu ul ul li:hover > a {
    color: #666;
    background: #e2e2e2;
}

#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
    background: #fff;
    color: #840039;
}

#cssmenu ul ul li:first-child > a {
    box-shadow: none;
}

#cssmenu ul ul ul li:first-child > a {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#cssmenu ul ul ul li a {
    padding-left: 30px;
}

#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
    border-bottom: 0;
}

#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
    border-bottom: 1px solid #000;
    color: #840039;
    background-color: #fff;
}

#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
    border-bottom: 0;
}

#cssmenu ul ul li.has-sub > a::after {
    display: block;
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    right: 20px;
    z-index: 10;
    top: 11.5px;
    font-size: 30px;
    border-top: 2px solid #eee;
    border-left: 2px solid #eee;
    transform: rotate(-135deg);
}

/* Korrigierter Selektor: im alten CSS fehlte hier ein Komma. */
#cssmenu ul ul li > a:hover::after,
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after {
    border-color: #fff;
}



}



@media (min-width: 1600px)  
{
		.content_content {
		width: 80%;
		}	
}





@media (min-width: 10px) and (max-width: 1150px) {
	#flexbox-main {		/* Grundbox der gesamten Seite Browser Rand löschen bei Darstellungen kleiner 1150 Pixel Breite*/
/*	 display: flex;
	justify-content:center;
 	background:#fff;	  	
	height:auto;	*/
	margin-left:auto;
	margin-right:auto;		
		}
}


#katbildbox{
/*Hauptbilder auf der Site*/
width:auto;
}

#katbildboxkleiner{
/*Hauptbilder auf der Site*/
width:auto;
}

#katbildboxsmartphone{
/*Hauptbilder auf der Site*/
width:100%;
}

@media (min-width: 10px) and (max-width: 600px)  {
	#katbildboxkleiner{display:none;}
	#katbildbox{display:none;}
	#katbildboxsmartphone{width:100%;}
}

@media (min-width: 768px) and (max-width: 1106px) {
	#katbildbox{display:none;}
	#katbildboxsmartphone{display:none;}
}

@media (min-width: 1107px)  {
	#katbildboxkleiner{display:none;}
	#katbildboxsmartphone{display:none;}
}

@media (min-width: 701px) {
	.umenufix {
		width: 170px; 
		display: inline-block; /* Verhindert Layout-Probleme */
		float: left;
		font-family: 'Poppins', sans-serif;
	}
}


.anpassen{
/*width:100%;*/
height:100%;
}

#headerlinediv{
color: #666666;
width:100%;
display: table;
font-family: 'Poppins', sans-serif;
background-color: #F3F3F3;
background-color: #fff;
padding-bottom:10px;
padding-left:10px;
padding-right:0px;
margin-right:30px;
}

@media (max-width: 800px) {
	#headerlinediv{display:none;}
}

#menudiv{
color: #000;
width:100%;
valign:center;
display: table;
font-family: 'Poppins', sans-serif;
background-color: #7E212C;
padding-left:auto;
padding-right:0px;
padding-bottom:0px;
margin-top:0px;
}

.produktsuche {
color: #F3F3F3;
background-color: #fff;
padding-right: 7px;
padding-top: 8px;
font-size: 16px;
line-height:30px;

margin-left: 6px;
border-radius: 0px ;
}

.produktsuchefeldalt {
color: #7E212C;
border-color:#FED5D9;
font-family: 'Poppins', sans-serif;
font-weight:600;
background-color: #fff;
font-size: 12px;
padding-left:10px;
margin-right:20px;
margin-bottom: 19px;
line-height:26px;
border-radius: 8px ;
}

.produktsuchefeldalt:focus {
      outline: none;
}


	
.produktsuchefeld {
    width: 90%;
    max-width: 400px; /* Falls du eine maximale Breite möchtest */
	height: 30px; /* Oder eine andere gewünschte Höhe */
    padding: 4px;
    margin-bottom:10px;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 12px;
	color:#ccc;
    transition: all 0.3s ease-in-out;
    outline: none;
    
}

.produktsuchefeld:focus {
    border-color: #7E212C; /* bordeaux Umrandung beim Fokus */
    box-shadow: 0 0 8px rgba(132, 0, 57, 1);
}


.eingabefeld {
  
	height: 30px; /* Oder eine andere gewünschte Höhe */
    padding: 4px;
    margin-bottom:10px;
    border: 2px solid #7E212C	;
    border-radius: 8px;
    font-size: 14px;
	color:#333;
    transition: all 0.3s ease-in-out;
    outline: none;
    
}

.eingabefeld:focus {
    border-color: #7E212C; /* bordeaux Umrandung beim Fokus */
    box-shadow: 0 0 8px rgba(132, 0, 57, 1);
}






.inputfield {
color: #000;
font-size: 13px;
font-family: 'Poppins', sans-serif;
/*background-color: #FED5D9;*/
background-color: #fff;
padding: 5px;
margin-top:15px;
border: 1px;
border-style:solid;
border-color:#000000;
border-radius: 6px 6px 6px 6px;
}

.inputfieldhell {
color: #999999;
font-size: 13px;
font-family: 'Poppins', sans-serif;
/*background-color: #FED5D9;*/
background-color: #fff;
padding: 5px;
margin-top:15px;
border: 1px;
border-style:solid;
border-color:#999999;
border-radius: 6px 6px 6px 6px;
}

.button {
color: #fff;
font-size: 15px;
font-family: 'Poppins', sans-serif;
background-color: #7E212C;
padding: 5px;
margin-top:20px;
cursor: pointer;
border: 1px;
border-style:solid;
border-radius: 6px 6px 6px 6px;
}

.button a {
color: #fff;
}

.button a:visited {
color: #fff;
}

.buttongrey {
color: #fff;
font-size: 15px;
font-family: 'Poppins', sans-serif;
background-color: #666666;
padding: 5px;
margin-top:20px;
cursor: pointer;
border: 1px;
border-style:solid;
border-radius: 6px 6px 6px 6px;
}

.buttongrey a {
color: #fff;
}







/* floating box angebote umschließt div bildvorschau - CSS für Produktliste*/

.floating-box-angebote {
    display: inline-block;
	max-width: 270px;
	height:440px;
	font-style:normal;
	text-align:center;	
	vertical-align:bottom;
    margin-right: 16px;
	}
	


.floating-box-angebote_main {
    display: inline-block;
	max-width: 220px;
	height:400px;
	font-style:normal;
	text-align:center;	
	vertical-align:bottom;
    margin-left: 2px;
    margin-right: 2px;	
	}



	

.bildvorschau {
    display: table-cell;
    height: 460px;
	vertical-align: bottom;		
	width: 270px;	
	border-radius:0px;
	/*border: thin silver solid;		*/
	padding: 2px;
}

.bildvorschau img {
/*	display:block;*/
}


.bildvorschau-sonderangebot {
    display: table-cell;
    height: 460px;
    vertical-align: bottom;		
    width: 270px;	
    position: relative; /* Wichtig für das Pseudo-Element */
    padding: 2px;
    /* Rahmen entfernt */
}

.bildvorschau-sonderangebot::after {
    content: "Angebot"; /* Text für das Kästchen */
    position: absolute; /* Platzierung relativ zum Container */
    top: 330px; /* Abstand vom oberen Rand */
    left: 7px; /* Abstand vom linken Rand */
    background-color: rgba(132, 0, 57, 0.7); /* Roter Hintergrund mit 0.2 = 20% Deckkraft*/
    color: white; /* Weiße Schrift */
    font-size: 10px; /* Schriftgröße */
    /* font-weight: bold; Fettschrift */
    padding: 1px 5px; /* Innenabstand für das Kästchen */
    border-radius: 1px; /* Abgerundete Ecken */
    z-index: 10; /* Über dem Inhalt anzeigen */
    text-transform: uppercase; /* Großbuchstaben */
}


.bildvorschau-sale {
    display: table-cell;
    height: 460px;
    vertical-align: bottom;		
    width: 270px;	
    position: relative; /* Wichtig für das Pseudo-Element */
    padding: 2px;
    /* Rahmen entfernt */
}


.bildvorschau-sale::after {
    content: " S A L E "; /* Text für das Kästchen */
    position: absolute; /* Platzierung relativ zum Container */
    top: 330px; /* Abstand vom oberen Rand */
    left: 7px; /* Abstand vom linken Rand */
    background-color: #ab0000; /* Roter Hintergrund mit 0.2 = 20% Deckkraft*/
    color: white; /* Weiße Schrift */
    font-size: 10px; /* Schriftgröße */
     font-weight: bold; /*Fettschrift */
    padding: 1px 5px; /* Innenabstand für das Kästchen */
    border-radius: 1px; /* Abgerundete Ecken */
    z-index: 10; /* Über dem Inhalt anzeigen */
    text-transform: uppercase; /* Großbuchstaben */
}




.bildvorschau_main {
    display: table-cell;
    height: 260px;
	vertical-align: bottom;		
	width: 280px;	
	border-radius:20px;
	padding: 3px;
}


@media (min-width: 10px) and (max-width: 1150px) {
	.floating-box-angebote_main {
		max-width: 300px;
		height:380px;
		margin-left: 5px;
		margin-right: 5px;		
	}

	.bildvorschau_main {
		width: 300px;	
	}
}	

@media (min-width: 768px) and (max-width: 1150px) {

/*HIER SIND DIE EINSTELLUNGEN FÜR TABLETS - HÖHE Der Bildvorschau*/

	.floating-box-angebote {
	max-width: 270px;
	height:620px;
	margin-left: 5px;
	margin-right: 5px;	
	}
	
	.picframe {
	max-width: 210px;	
	}
	
	.bildvorschau {
    height: 400px;
	}
	
	.bildvorschau-sonderangebot {
    height: 400px;
	}
}


@media (max-width: 767px) {

	.floating-box-angebote_main {
		display:none;
	}



    .floating-box-angebote_main_phone {
     display: block !important;
	
	border: thin #7E212C solid;
	margin-top: 15px;	
	padding: 0px;
	width: 90%;	
	height:560px;
    margin-left: 15px;
    margin-right: 5px;		
	}
	
	

.floating-box-angebote {
    display: inline-block;
    width: calc(50% - 30px); /* Zwei Artikel nebeneinander */
    vertical-align: top;
    box-sizing: border-box; /* Stellt sicher, dass Padding/Margin mit einkalkuliert werden */
}

.bildvorschau {
	 width: calc(40% - 10px); /* Zwei Artikel nebeneinander */
}




.bildvorschau-sonderangebot {
    display: table-cell;
    height: 460px;
    vertical-align: bottom;		
     width: calc(40% - 10px); /* Zwei Artikel nebeneinander */
    position: relative; /* Wichtig für das Pseudo-Element */
    padding: 2px;
    /* Rahmen entfernt */
}

.bildvorschau-sonderangebot::after {
    content: "Angebot"; /* Text für das Kästchen */
    position: absolute; /* Platzierung relativ zum Container */
    top: 330px; /* Abstand vom oberen Rand */
    left: 7px; /* Abstand vom linken Rand */
    background-color: rgba(132, 0, 57, 0.7); /* Roter Hintergrund mit 0.2 = 20% Deckkraft*/
    color: white; /* Weiße Schrift */
    font-size: 10px; /* Schriftgröße */
    /* font-weight: bold; Fettschrift */
    padding: 1px 5px; /* Innenabstand für das Kästchen */
    border-radius: 1px; /* Abgerundete Ecken */
    z-index: 10; /* Über dem Inhalt anzeigen */
    text-transform: uppercase; /* Großbuchstaben */
}


.bildvorschau-sale {
    display: table-cell;
    height: 460px;
    vertical-align: bottom;		
     width: calc(40% - 10px); /* Zwei Artikel nebeneinander */
    position: relative; /* Wichtig für das Pseudo-Element */
    padding: 2px;
    /* Rahmen entfernt */
}


.bildvorschau-sale::after {
    content: " S A L E "; /* Text für das Kästchen */
    position: absolute; /* Platzierung relativ zum Container */
    top: 330px; /* Abstand vom oberen Rand */
    left: 7px; /* Abstand vom linken Rand */
    background-color: #ab0000; /* Roter Hintergrund mit 0.2 = 20% Deckkraft*/
    color: white; /* Weiße Schrift */
    font-size: 10px; /* Schriftgröße */
     font-weight: bold; /*Fettschrift */
    padding: 1px 5px; /* Innenabstand für das Kästchen */
    border-radius: 1px; /* Abgerundete Ecken */
    z-index: 10; /* Über dem Inhalt anzeigen */
    text-transform: uppercase; /* Großbuchstaben */
}































	
	.bildvorschau_main {
	display: table-cell;
    height: 300px;
	vertical-align: bottom;		
	horizontal-align: middle;
	width: 80%;	
	border-radius:20px;
	padding: 3px;
	}

}

@media (min-width: 768px)  {
	.floating-box-angebote_main_phone {
		display:none;
	}


	.bildvorschau_main {
		width: 500px;	
		}	
		
		
	.pconly {
	line-height:25px;
	}

	

}	

/* picframe ist das normale Bild im Shop / Liste und Marken etc. für alles... 
minicols - damit die Bilder rund angezeigt werden mit 50% Rundung

picframe-articlesale - ist im SALE Bereich die unmittelbare Bilddefinition
picinfoframe-articlesale - ist der Bereich der articlesale sowie direkte infos darunter aufnimmt

*/

.picframe {
	border-top-style: none;
	border-right-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	padding: 2px;
}


.picframe-minicols {
	box-sizing: border-box; 
	border-radius: 50%;	
	border: 1px solid silver;
	margin-left: 2px;
	margin-right: 2px;	
	margin-top: 3px;

}

.picframe-articlesale {
	box-sizing: border-box; 
	max-height:200px;
	width: 110px;
	border-radius: 0%;	
	border: 0px solid silver;
	padding: 5px;
}

.picinfoframe-articlesale {
	height:250px;
	width: 130px;
	border-radius: 10%;	
	border: 0px solid silver;
	display:table-cell;
	vertical-align: bottom;
}




/*Ende Produktliste */




/* PRODUKTSEITE - CSS für show_product: */
/*Ein oberer und ein unterer Container liegen in einem Gesamtcontainer*/




.products_supersale {
    display: inline-block;
	max-width: 1100px;
	min-width: 300px;
	height:auto;
	min-height:400px;	
	font-style:normal;
	background-color:#fff;
	text-align:left;	
	vertical-align:top;
    margin-left: 15px;
    margin-right: 0px;	
	}
	



.product_pic {
    display: inline-block;
	max-width: 600px;
	min-width: 300px;
	height:auto;
	min-height:400px;
	font-style:normal;
	text-align:center;
	vertical-align:top;
    margin-left: 0px;
    margin-right: 25px;	
	}


.product_description {
    display: inline-block;
	max-width: 400px;
	min-width: 300px;
	height:auto;
	min-height:400px;	
	font-style:normal;
	background-color:#fff;
	padding: 0px;
	text-align:left;	
	vertical-align:top;
    margin-left: 25px;
    margin-right: 0px;	
	}
	
	
.product_wkinfo {
    display: inline-block;
	max-width: 250px;
	min-width: 100px;
	min-height:400px;
	height:auto;
	background-color:#6666CC;
	font-style:normal;
	text-align:center;	
	vertical-align:top;
    margin-left: 5px;
    margin-right: 5px;	
	}	

.product_informations {
    display: inline-block;
	max-width: 400px;
	min-width: 300px;
	height:auto;
	font-style:normal;
	text-align:left;	
	vertical-align:top;
    margin-left: 5px;
    margin-right: 5px;	
	}	

.product_availability {
    display: inline-block;
	max-width: 800px;
	min-width: 300px;
	height:auto;
	background-color:#fff;
	font-style:normal;
	text-align:left;	/*center*/
	vertical-align:top;
    margin-left: 5px;
    margin-right: 5px;	
	}			


.productpicture {
	/*wird evtl. nicht mehr gebruacht*/
	display: table-cell;
	vertical-align: bottom;		
	width: 450px;
	height:auto;
	max-height:600px;			
	border-radius:20px;
	padding: 3px;
}
	


@media (min-width: 10px) and (max-width: 600px)  {
	.productpicture {
		width: 350px;}
	.product_pic {
		width: 350px;}
	.product_description {
		width: 350px;}
	.product_informations {
		width: 350px;}
}

	
#textpreisbox {
	background:#fff;
	-webkit-flex:1;
	flex:1;
	width:100%;
	margin-left:20px;
	height:auto;	
}

	.producttext {
		display: table-cell;
		vertical-align: bottom;		
		min-width: 250px;	
		height:auto;			
		border-radius:1px;
		padding: 3px;
	}
	
	#preisdisplay {
		text-align:right;
		margin-top: 20px;			
}


#boxrechts {
	background:#fff;
	width:200px;
}

/*Funktionsweise: volle Bildschirmbreite - es werden 3 Boxen nebeneinander angezeigt
ab 1300 Pixel wird Spalte rechts nicht mehr angezeigt
ab 1100 Pixel wird Bild auf 27vw Pixel Breite verkleinert 
ab 900 Pixel wird Bild und Text untereinander angezeigt
ab 640 Pixel wird Bild und Text unter dem Menü angezeigt*/

@media (max-width: 1300px) {
	#boxrechts {
	display:none;
	}

 }
 
 
@media (min-width: 801px) and (max-width: 1100px) {
	#bildbox {
		background:#fff;
		width:27vw;
		height:auto;
	}

	#container_productview {

}
}	

@media (max-width: 900px) 
{
	#container_productview {
	-webkit-flex-direction: column;
	flex-direction: column;
	background:#fff;
	min-height:1500px;		
	}

	#bildbox {
		background:#fff;
		width:100%;
	}
	
	#textpreisbox {
	background:#fff	;
		width:100%;
		height:auto;		
	
	}
}

/* ENDE OBERER CONTAINER */


/* ZWEITER CONTAINER */

#container_availableinfo {
	width:100%;
	height:auto;
	background:#ccc;
	display:-webkit-flex;
	display:flex;
	justify-content: space-between;	
}


#availability {
	background:	#fff;
	width:100%;	
	min-width:350px;
	height:auto;
	font-family: 'Poppins', sans-serif;
	font-size: 5px;
	-webkit-flex:1;
	flex:1;	
}

#tabelleverfuegbarkeit {
	with:400px;
}


#information {
	background: #FFF;
	width:400px;
	padding: 10px;
	height:auto;	
}

@media (max-width: 1250px) 
{
	#container_availableinfo {
	-webkit-flex-direction: column;
	flex-direction: column;
	}
	
	#information {	
	width: 100%;
}	

}

@media (max-width: 767px) 
	{

	#tabelleverfuegbarkeit {
		display:none;
	}
	}


/* ENDE ZWEITER CONTAINER */


/* weitere CSS */
.prodprice {
	border : 0px solid white;
	font-size : 30px;
	font-weight:bold;
	font-family: 'Poppins', sans-serif;
}

.products-drop-selected {
color: #666666;
font-size: 15px;
font-family: 'Poppins', sans-serif;
background-color: #F3F3F3;
width: 260px;
padding: 5px;
border-radius: 6px 6px 6px 6px;
}

.drop-bestellmenge {
color: #666666;
font-size: 15px;
font-family: 'Poppins', sans-serif;
background-color: #F3F3F3;
width: 60px;
padding: 5px;
border-radius: 6px 6px 6px 6px;
}

/*gedrehte Texte in der Verfügbarkeitstabelle*/


#avtab{
	border:	1px;
	text-align: center;
	width: 400px;		
}



#avtabtop{
	
	border:	0px;
	height: 150px;
	width: 10px;	
	font-family: 'Poppins', sans-serif;
	font-size: 8pt;
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);
	text-align: right;
	style:nowrap;
}

#avtabright{
	
	border:	1px;
	text-align: right;
	font-family:	Arial;
	font-size:	8pt;
}

#avtabpoints{
	border:	1px;
	text-align: center;
}


/*Ende Produktseite */






.kat-gross {
	color: #7E212C;
	font-family: 'Poppins', Arial,sans-serif;
	font-size: 28px;
	font-style: normal;
	line-height: 22px;
	font-weight: 600;
}

.ukat-gross {
	color: #7E212C;
	font-family: 'Poppins', Arial,sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: 18px;
	font-weight: 600;
}





.after-floating-box {
    border: none; 
	font-size: 12px;
	line-height: 22px; 
	padding-bottom:15px;
}	

.floating-box-productpreview {
	display: inline-block;
	border: 1px solid #D4D4D4;
	border-radius: 10px;
	width: 23%;
	min-width:150px;
	min-height:120px;
	height: auto;
	font-size:0.5em;
	font-style:normal;
	text-align:center;	
	margin: 4px;

}	

.productpreview-picture {
 /*   border: thin silver solid; */
	border: 1px solid #FFFFFF; 
	border-radius: 10px;
	height:210px;
	width: 98%;
	background-color:#FFFFFF;
	min-height:100px;
}	


.productpreview-color {
	/* border: thin silver solid; */
	width: 98%;
	background-color:#FFFFFF;
	height:23px;
}	

.productpreview-preis {
   /* border: thin silver solid; */
	border: 1px solid #FFFFFF; 
	border-radius: 10px;   
	width: 98%;
	background-color:#FFFFFF;
	font-size:18px;	
	color:#7E212C;
	height:40px;
}	

.productpreview-text {
   /* border: thin silver solid; */
	width: 98%;
	font-size:11px;
	line-height:16px;
	background-color:#FFFFFF;
	height: 40px;
}	


/* PRODUKT DETAIL SEITE*/
		

.floating-box-productdetail-brand {
	display: inline-block;
	width: 18%;
	min-width:100px;
	height: 40em;
	font-size:8px;
	line-height:13px;
	font-style:normal;
	vertical-align:text-top;
	text-align: left;	
	margin: 2px;
	/*border: thin silver solid;*/
}

/* ENDE PRODUKTDETAIL SEITE*/


/*WARENKORB*/

tr.carttop{
	background:#F3F3F3;
	font-family:'Poppins', Arial, sans-serif;
	font-style:normal;
	font-weight:400;
	line-height: 20px;
	color:#7F063C;
	font-size: 11px;
}

.wk{
	color: #000;
}

td.wk{
	background:#F3F3F3;
	font-size: 1.0em;
	padding-left: 5px;
	padding-top:5px;
}

table.wk{
	background:#fff;
	font-size: 1.0em;
	padding-left: 5px;
	padding-top:30px;
	
}

#warenkorb {
	width:100%;
	height:300px;
	background:#ccc;
	display:-webkit-flex;
	display:flex;
}

#bild {
	width:150px;
}

#anzahl {
	-webkit-flex:1;
	flex:1;
}

#beschreibung {
	width:150px;
}

#preis {
	width:150px;
}






/* ENDE Warenkorb */




.boxmax {
	padding-bottom:40px;	
	justify-content: center;	
}




/* floating Boxen 350 px breite  */


.boxfloat350 {
  float: left; 		
  width: 350px; 
  padding-left: 15px;  
  }


.boxfloat400 {
  float: left; 		
  width: 400px; 
  padding-left: 15px;
  }
    
@media (max-width: 767px) {
	.boxfloat400 {
	  width: 80%; 
	  }
 }

/* Boxen im header */

#menutopbox {
  position: absolute;
  width: 600px;
 /* background-color:#666666;*/
  min-height: 120px;
  top: 12px;
  right: 40px;
  font-size: 15px;
  line-height: 30px;
  font-weight: 400;
  color: #7E212C;
  text-align:right;
}


@media (min-width: 701px) and (max-width: 1150px) {
	#menutopbox {
	  position: absolute;
	  width: 500px;
	/*  background-color:#666666;*/
	  height: 11vw;
	  top: 12px;
  right: 20px;
  font-size: 12px;
  line-height: 25px;
  font-weight: 400;
	  letter-spacing:0px;
	  color: #fff;
	  text-align:right;
	}
}

@media (max-width: 767px) {
	#menutopbox {
	display:none;
	}
}

#menubottombox {
  position: absolute;
  width: 300px;
  height: 2vw;
  top: 8vw;
  left: 28%;
  font-size: 0.7vw;
  color: #7E212C;
  text-align:left;
 
  z-index: 1;
}




a.menutopbox{
color: #000000;
font-size: 11px;
font-weight:100;
} 


a.menutopbox:hover{
  color: #7E212C;
} 

/* Ende boxen im header*/


/* SALE Kategorie alte CSS übernommen */
td.boxcomplete {
	border: 1px solid #7E212C;
}

img.boxcomplete {
	border: 1px solid #7E212C;
}


/* picframe ist das normale Bild im Shop / Liste und Marken etc. für alles... 
minicols - damit die Bilder rund angezeigt werden mit 50% Rundung

picframe-articlesale - ist im SALE Bereich die unmittelbare Bilddefinition
picinfoframe-articlesale - ist der Bereich der articlesale sowie direkte infos darunter aufnimmt

*/

.picframe {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	padding: 2px;
}


.picframe-minicols {
	box-sizing: border-box; 
	border-radius: 50%;	
	border: 1px solid silver;
	margin-left: 2px;
	margin-right: 2px;	
	margin-top: 3px;
}

.picframe-articlesale {
	box-sizing: border-box; 
	max-height:200px;
	width: 110px;
	border-radius: 0%;	
	border: 0px solid silver;
	padding: 5px;
}

.picinfoframe-articlesale {
	height:250px;
	width: 130px;
	border-radius: 10%;	
	border: 0px solid silver;
	display:table-cell;
	vertical-align: bottom;
}





/*ENDE SALE */

.floating-box-footer {
	display: inline-block;
	width: 200px;
	height: auto;
	font-size:0.7em;
	line-height:0.9em;
	font-style:normal;
	vertical-align:text-top;
	text-align: left;	
	margin: 10px;
	padding-bottom:30px;
	color:#333333;	
	/*	border: thin silver solid;*/
}	

/*.floating-box-footer-adverts {
	display: none;
}*/	

a.footerlist {
	color:#333333;
	line-height:28px;
	font-size:12px;;
	text-decoration:none;
	}
    





#infoausklapp {
width:350px;
padding-right: 5px;
height:auto;
background-color:#FFFFFF;
}


/* für die Boxen */

.dbox {
font-family: 'Poppins', sans-serif;
font-size:11px;
font-weight:normal;
color: #000000;
background-color:#FFFFFF;
line-height:130%;
margin: 5px 0px 5px 0px;
}

.dboxTab {
font-family: 'Poppins', sans-serif;
font-size:11px;
color: #fff;
background-color:#FFFFFF;
line-height:130%;
margin-top: 15px;
}

.dboxTab td {
text-align:left;
vertical-align:top;
background-color:#FFFFFF;
color: #fff;
padding:5px;
}


.TabKopfzeile td {
padding:5px;
font-family: 'Poppins', sans-serif;
font-size:11px;
background-color:#FFFFFF;
color: #fff;
line-height:130%;
}





/* für die Linkleisten */

.linkleiste {
width: 350px;
padding: 3px;
font-family: 'Poppins', sans-serif;
font-size: 14px;
background-color: #999999;   /*Hintergrund Leiste*/
margin: 0px 0px 6px 0px;
margin-left: 0px;
line-height: 250%;
}

.linkleiste a:link, .linkleiste a:visited {
color: #fff;
font-family: 'Poppins', sans-serif;
font-size: 14px;
margin-left: 20px;
font-weight: normal;
text-transform: none;
}

.linkleiste a:hover {
font-weight: bold;
}


/* ENDE BBDE SPEZIFISCH */




/* ZoomFunktion positive zoom - zur Anzeige der Produktbilder*/

.cospozoomcontainer{
    width: 500px;
	height: 700px;
    display: flex;
	justify-content: center;
    align-items: column; 
    margin: 0 auto;
}

.positive-gallery-slider{
    width: 100%;
    display: flex;
}

.positive-gallery-slider .side-img{
    flex-basis: 9%;   /*hier die Größe der kleinen Ansicht*/
    display: flex;
    flex-direction: column;
}


.positive-gallery-slider .side-img img.small-preview{  
    margin-left: 6px;
	margin-bottom: 6px;
    width: 100%;
    cursor: pointer;
	border: 1px solid silver;
	border-radius: 3px 3px 3px 3px;
}


.zoom-image{
    flex: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 15px;  
}

@media (min-width: 768px)  
	{

		.product_pic_mobile{
			display:none;
		}
	}


@media  (max-width: 767px) 
{ 

	.product_pic{
	display:none;
	}

	.product_pic_mobile
	{
	display: flex;
	width: 100%;

	height:auto;
	min-height:400px;
	font-style:normal;
	text-align:center;
	vertical-align:top;
	}

	.cospozoomcontainer{
	width: 100%;

	display: flex;
	justify-content: center;
	align-items: column; 
	margin: 0 auto;
	}

	.positive-gallery-slider{
	width: 100%;
	display: flex;
	flex-direction: column; 
	}
	
	
	
	.zoom-image{

	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-left: 0px;  
	padding-bottom:10px;
	margin-top:10px;
	border: 0px solid #e2e2e2;
	}

	.cospozoomcontainer{
	width: 90%;
	align-items: column; 
	}

	.slider-zoom{
	flex: 1;
	align-items: row; 
	}



	.positive-gallery-slider .side-img img.small-preview{  
	margin-left: 6px;
	flex-basis: 25%;
	width:5px;
	cursor: pointer;
	border: 1px solid #e2e2e2;
	border-radius: 0px;
	margin: 2px;

	}


	.positive-gallery-slider .side-img{
	flex-basis: 15%;   /*hier die Größe der kleinen Ansicht*/
	display: flex;
	flex-direction: row;
	}

}



@media (max-width: 820px){
  .mobilefoot,
  footer,
  #footer,
  .footer{
    position: static !important;
    bottom: auto !important;
    top: auto !important;
  }
}

@media (max-width: 767px){

  /* Footer darf auf Mobile wieder atmen */
  #flexbox-main_footer{
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Ads dürfen NICHT stacken/overlayn */
  .familystores-wrap{
    position: static !important;
    z-index: auto !important;
    clear: both !important;
    width: 100% !important;
    margin: 20px 0 40px 0 !important;
  }
}

@media (max-width: 820px){
  #flexbox-main_footer{
    position: static !important;
    bottom: auto !important;
    top: auto !important;
  }
}




.familystores-wrap{
  position: relative;
  z-index: 2;
}



/*Ende CSS der  Zoom Funktion







/* ========================================================================
   14 ZENTRALES RESPONSIVE LAYOUT - BBDE 2026
   ------------------------------------------------------------------------
   Eine globale Umschaltlogik:
     0 - 767 px     : Mobile / Hamburger
     768 - 1200 px  : Tablet / kleiner Laptop + Seitenmenü
     1201 - 1599 px : normaler Desktop + Seitenmenü
     ab 1600 px     : großer Desktop

   Dieser Abschnitt ist absichtlich am Dateiende. Er ist die verbindliche
   Layout-Schicht und ersetzt die bisherige BB-responsive-fixes.css.
   ======================================================================== */

/* Berechenbare Breiten */
html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
svg,
canvas {
    max-width: 100%;
    height: auto;
}

/* Flex-Kinder müssen schrumpfen dürfen. */
#flexbox-main,
#flexbox-main_middle,
.content_menu,
.content_content,
main,
article,
aside {
    min-width: 0;
}


/* ------------------------------------------------------------------------
   MOBILE: bis 767 px
   Hamburger-Navigation, kein linkes Desktop-Kategoriemenü.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {

    /* Desktop-Header und Desktop-Kategoriemenü aus */
    #bbv2-top-info-bar,
    #flexbox-main_head,
    #cssmenu {
        display: none !important;
    }

    /* Die mobile Navigation aus menu.php darf sichtbar sein.
       Das äußere <nav> wird im alten Mobile-CSS bereits als Navigation genutzt. */
    .content_menu > aside,
    .content_menu > aside > nav {
        display: block !important;
    }

    body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        word-spacing: normal;
    }

    #flexbox-main {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #flexbox-main_middle {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 10px;
        padding-right: 10px;
        overflow: visible !important;
    }

    .content_menu {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    .content_content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: 0 0 auto !important;
    }

    main,
    article,
    main article {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
    }

    .productpicture,
    .product_pic,
    .product_description,
    .product_informations,
    .product_availability,
    .boxfloat350,
    .boxfloat400 {
        max-width: 100%;
        min-width: 0;
    }

    .boxfloat350,
    .boxfloat400 {
        width: 100%;
        padding-left: 0;
        float: none;
    }
}


/* ------------------------------------------------------------------------
   TABLET / KLEINER LAPTOP: 768 - 1200 px
   Linkes Menü bleibt erhalten, Content bekommt ausschließlich den Restplatz.
   ------------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1200px) {

    #flexbox-main_middle {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: clamp(8px, 1.5vw, 20px);
        padding-right: clamp(8px, 1.5vw, 20px);
        gap: clamp(10px, 1.5vw, 20px);
        overflow: visible !important;
    }

    .content_menu {

        flex: 0 0 clamp(185px, 20vw, 225px) !important;
        width: clamp(185px, 20vw, 225px) !important;
        min-width: 185px !important;
        max-width: 225px !important;
        margin: 0 !important;
        float: none !important;
        height: auto;
    }

    .content_menu > aside {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Mobile-Navigation aus, Desktop-Menü an */
    .content_menu > aside > nav {
        display: none !important;
    }

    #cssmenu {
        display: block !important;
        width: 100% !important;
        max-width: 225px !important;
    }

    #cssmenu > ul > li > a {
        padding-left: 10px;
        padding-right: 22px;
    }

    .content_content {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        float: none !important;
    }

    main,
    article,
    main article {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
    }

    iframe {
        width: 100%;
        max-width: 100%;
    }

    .floating-box-angebote {
        width: calc(33.333% - 12px);
        max-width: 250px;
        min-width: 170px;
        height: auto;
        min-height: 500px;
        margin: 6px;
        vertical-align: top;
    }

    .bildvorschau,
    .bildvorschau-sonderangebot,
    .bildvorschau-sale,
    .picframe {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .bildvorschau,
    .bildvorschau-sonderangebot,
    .bildvorschau-sale {
        min-height: 360px;
        display: block;
    }

    .products_supersale,
    .product_pic,
    .product_description,
    .product_informations,
    .product_availability,
    #container_productview,
    #container_availableinfo {
        max-width: 100%;
        min-width: 0;
    }

    #textpreisbox {
        min-width: 0;
        margin-left: clamp(8px, 1.5vw, 20px);
    }

    #information {
        max-width: 100%;
    }

    #availability {
        min-width: 0;
    }

    .cospozoomcontainer {
        width: min(500px, 100%);
        max-width: 100%;
    }
}


/* Engere Tablets: Produktlisten zweispaltig */
@media (min-width: 768px) and (max-width: 1050px) {

    .floating-box-angebote {
        width: calc(50% - 12px);
        max-width: none;
        min-width: 0;
    }

    .content_menu {
        flex-basis: 190px !important;
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
    }

    #cssmenu {
        max-width: 190px !important;
    }

    #cssmenu > ul > li > a,
    #cssmenu ul ul li a {
        font-size: 11px;
    }

    #container_productview {
        flex-direction: column;
    }

    #bildbox,
    #textpreisbox {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}


/* ------------------------------------------------------------------------
   NORMALER DESKTOP: 1201 - 1599 px
   Verhindert 100%-Content PLUS 240px Sidebar.
   ------------------------------------------------------------------------ */
@media (min-width: 1201px) and (max-width: 1599px) {

    #flexbox-main_middle {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .content_menu {
        flex: 0 0 240px !important;
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
    }

    .content_menu > aside > nav {
        display: none !important;
    }

    #cssmenu {
        display: block !important;
    }

    .content_content {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-right: 5px !important;
    }

    main,
    article,
    main article {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    article {
        margin-left: 10px !important;
        float: none !important;
    }
}


/* ------------------------------------------------------------------------
   GROSSER DESKTOP: ab 1600 px
   Alte 80%-Sonderbreite neutralisieren; Flexbox teilt den Platz sauber.
   ------------------------------------------------------------------------ */
@media (min-width: 1600px) {

    #flexbox-main_middle {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .content_menu {
        flex: 0 0 240px;
        width: 240px;
        min-width: 240px;
        max-width: 240px;
    }

    .content_menu > aside > nav {
        display: none !important;
    }

    #cssmenu {
        display: block !important;
    }

    .content_content {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}


/* ------------------------------------------------------------------------
   FOOTER-GLOBALS
   Diese Regeln können die doppelten <style>-Blöcke in footer.php ersetzen.
   ------------------------------------------------------------------------ */
.footerlink,
.footerlink:visited {
    color: #fff;
    text-decoration: none;
}

.footerlink:hover,
.footerlink:active {
    color: #fff;
    text-decoration: underline;
}