/* ===== theme ===== */
:root
{
        --c-primary-lighter: #E8E1DD;
        --c-primary: #B5A098;
        --c-primary-darker: #54473F;
        --c-secondary-lighter: #CEA9B3;
        --c-secondary: #633B57;
        --c-secondary-darker: #3F1D33;
        --c-success-lighter: #C9E2B3;
        --c-success: #8FC367;
        --c-success-darker: #496333;
        --c-danger-lighter: #E9B1AC;
        --c-danger: #D16759;
        --c-danger-darker: #773131;
        --c-warning-lighter: #E2CDB3;
        --c-warning: #C39C67;
        --c-warning-darker: #725A3B;
        --c-info-lighter: #A9DCEC;
        --c-info: #54B3D6;
        --c-info-darker: #365670;
        --c-light: #FFFFFF;
        --c-light-darker: #ADA8A6;
        --c-dark-lighter: #686361;
        --c-dark: #32302E;
        --c-highlight-lighter: rgba(255, 255, 255, 0.75);
        --c-highlight: rgba(255, 255, 255, 0.5);
        --c-highlight-darker: rgba(255, 255, 255, 0.25);
        --c-shadow-lighter: rgba(0, 0, 0, 0.25);
        --c-shadow: rgba(0, 0, 0, 0.5);
        --c-shadow-darker: rgba(0, 0, 0, 0.75);
}

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

body
{
	min-width: 100vw !important;
	max-width: 100vw !important;
	overflow-x: hidden;
}


/* text color */
.c-primary-lighter { color: var(--c-primary-lighter) !important; }
.c-primary { color: var(--c-primary) !important; }
.c-primary-darker { color: var(--c-primary-darker) !important; }
.c-secondary-lighter { color: var(--c-secondary-lighter) !important; }
.c-secondary { color: var(--c-secondary) !important; }
.c-secondary-darker { color: var(--c-secondary-darker) !important; }
.c-success-lighter { color: var(--c-success-lighter) !important; }
.c-success { color: var(--c-success) !important; }
.c-success-darker { color: var(--c-success-darker) !important; }
.c-danger-lighter { color: var(--c-danger-lighter) !important; }
.c-danger { color: var(--c-danger) !important; }
.c-danger-darker { color: var(--c-danger-darker) !important; }
.c-warning-lighter { color: var(--c-warning-lighter) !important; }
.c-warning { color: var(--c-warning) !important; }
.c-warning-darker { color: var(--c-warning-darker) !important; }
.c-info-lighter { color: var(--c-info-lighter) !important; }
.c-info { color: var(--c-info) !important; }
.c-info-darker { color: var(--c-info-darker) !important; }
.c-light { color: var(--c-light) !important; }
.c-light-darker { color: var(--c-light-darker) !important; }
.c-dark-lighter { color: var(--c-dark-lighter) !important; }
.c-dark { color: var(--c-dark) !important; }
.c-highlight-lighter { color: var(--c-highlight-lighter) !important; }
.c-highlight { color: var(--c-highlight) !important; }
.c-highlight-darker { color: var(--c-highlight-darker) !important; }
.c-shadow-lighter { color: var(--c-shadow-lighter) !important; }
.c-shadow { color: var(--c-shadow) !important; }
.c-shadow-darker { color: var(--c-shadow-darker) !important; }
.c-inherit { color: inherit !important; }
.c-transparent { color: transparent !important; }

/* background color */
.bg-primary-lighter { background-color: var(--c-primary-lighter) !important; }
.bg-primary { background-color: var(--c-primary) !important; }
.bg-primary-darker { background-color: var(--c-primary-darker) !important; }
.bg-secondary-lighter { background-color: var(--c-secondary-lighter) !important; }
.bg-secondary { background-color: var(--c-secondary) !important; }
.bg-secondary-darker { background-color: var(--c-secondary-darker) !important; }
.bg-success-lighter { background-color: var(--c-success-lighter) !important; }
.bg-success { background-color: var(--c-success) !important; }
.bg-success-darker { background-color: var(--c-success-darker) !important; }
.bg-danger-lighter { background-color: var(--c-danger-lighter) !important; }
.bg-danger { background-color: var(--c-danger) !important; }
.bg-danger-darker { background-color: var(--c-danger-darker) !important; }
.bg-warning-lighter { background-color: var(--c-warning-lighter) !important; }
.bg-warning { background-color: var(--c-warning) !important; }
.bg-warning-darker { background-color: var(--c-warning-darker) !important; }
.bg-info-lighter { background-color: var(--c-info-lighter) !important; }
.bg-info { background-color: var(--c-info) !important; }
.bg-info-darker { background-color: var(--c-info-darker) !important; }
.bg-light { background-color: var(--c-light) !important; }
.bg-light-darker { background-color: var(--c-light-darker) !important; }
.bg-dark-lighter { background-color: var(--c-dark-lighter) !important; }
.bg-dark { background-color: var(--c-dark) !important; }
.bg-highlight-lighter { background-color: var(--c-highlight-lighter) !important; }
.bg-highlight { background-color: var(--c-highlight) !important; }
.bg-highlight-darker { background-color: var(--c-highlight-darker) !important; }
.bg-shadow-lighter { background-color: var(--c-shadow-lighter) !important; }
.bg-shadow { background-color: var(--c-shadow) !important; }
.bg-shadow-darker { background-color: var(--c-shadow-darker) !important; }
.bg-inherit { background-color: inherit !important; }
.bg-transparent { background-color: transparent !important; }

/* border color */
.border-primary-lighter { border-color: var(--c-primary-lighter) !important; }
.border-primary { border-color: var(--c-primary) !important; }
.border-primary-darker { border-color: var(--c-primary-darker) !important; }
.border-secondary-lighter { border-color: var(--c-secondary-lighter) !important; }
.border-secondary { border-color: var(--c-secondary) !important; }
.border-secondary-darker { border-color: var(--c-secondary-darker) !important; }
.border-success-lighter { border-color: var(--c-success-lighter) !important; }
.border-success { border-color: var(--c-success) !important; }
.border-success-darker { border-color: var(--c-success-darker) !important; }
.border-danger-lighter { border-color: var(--c-danger-lighter) !important; }
.border-danger { border-color: var(--c-danger) !important; }
.border-danger-darker { border-color: var(--c-danger-darker) !important; }
.border-warning-lighter { border-color: var(--c-warning-lighter) !important; }
.border-warning { border-color: var(--c-warning) !important; }
.border-warning-darker { border-color: var(--c-warning-darker) !important; }
.border-info-lighter { border-color: var(--c-info-lighter) !important; }
.border-info { border-color: var(--c-info) !important; }
.border-info-darker { border-color: var(--c-info-darker) !important; }
.border-light { border-color: var(--c-light) !important; }
.border-light-darker { border-color: var(--c-light-darker) !important; }
.border-dark-lighter { border-color: var(--c-dark-lighter) !important; }
.border-dark { border-color: var(--c-dark) !important; }
.border-highlight-lighter { border-color: var(--c-highlight-lighter) !important; }
.border-highlight { border-color: var(--c-highlight) !important; }
.border-highlight-darker { border-color: var(--c-highlight-darker) !important; }
.border-shadow-lighter { border-color: var(--c-shadow-lighter) !important; }
.border-shadow { border-color: var(--c-shadow) !important; }
.border-shadow-darker { border-color: var(--c-shadow-darker) !important; }
.border-inherit { border-color: inherit !important; }
.border-transparent { border-color: transparent !important; }

/* font */
.fs-5 { font-size: 0.05rem !important; }
.fs-10 { font-size: 0.1rem !important; }
.fs-15 { font-size: 0.15rem !important; }
.fs-20 { font-size: 0.2rem !important; }
.fs-25 { font-size: 0.25rem !important; }
.fs-30 { font-size: 0.3rem !important; }
.fs-35 { font-size: 0.35rem !important; }
.fs-40 { font-size: 0.4rem !important; }
.fs-45 { font-size: 0.45rem !important; }
.fs-50 { font-size: 0.5rem !important; }
.fs-55 { font-size: 0.55rem !important; }
.fs-60 { font-size: 0.6rem !important; }
.fs-65 { font-size: 0.65rem !important; }
.fs-70 { font-size: 0.7rem !important; }
.fs-75 { font-size: 0.75rem !important; }
.fs-80 { font-size: 0.8rem !important; }
.fs-85 { font-size: 0.85rem !important; }
.fs-90 { font-size: 0.9rem !important; }
.fs-95 { font-size: 0.95rem !important; }
.fs-100 { font-size: 1rem !important; }
.fs-105 { font-size: 1.05rem !important; }
.fs-110 { font-size: 1.1rem !important; }
.fs-115 { font-size: 1.15rem !important; }
.fs-120 { font-size: 1.2rem !important; }
.fs-125 { font-size: 1.25rem !important; }
.fs-130 { font-size: 1.3rem !important; }
.fs-135 { font-size: 1.35rem !important; }
.fs-140 { font-size: 1.4rem !important; }
.fs-145 { font-size: 1.45rem !important; }
.fs-150 { font-size: 1.5rem !important; }
.fs-155 { font-size: 1.55rem !important; }
.fs-160 { font-size: 1.6rem !important; }
.fs-165 { font-size: 1.65rem !important; }
.fs-170 { font-size: 1.7rem !important; }
.fs-175 { font-size: 1.75rem !important; }
.fs-180 { font-size: 1.8rem !important; }
.fs-185 { font-size: 1.85rem !important; }
.fs-190 { font-size: 1.9rem !important; }
.fs-195 { font-size: 1.95rem !important; }
.fs-200 { font-size: 2rem !important; }
.fs-inherit { font-size: inherit !important; }

.fw-100 { font-weight: 100 !important; }
.fw-200 { font-weight: 200 !important; }
.fw-300 { font-weight: 300 !important; }
.fw-400, .fw-normal { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700, .fw-bold { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }
.fw-inherit { font-weight: inherit !important; }

/* text */
.text-nowrap { text-wrap: nowrap; }

.tshadow-light { text-shadow: 0px .075rem .25rem rgba(0, 0, 0, 0.5); }
.tshadow { text-shadow: 0px .075rem .25rem rgba(0, 0, 0, 1); }

/* ===== border ===== */
.border-1, .border-top-1, .border-left-1, .border-bottom-1, .border-right-1 { border-style: solid; }
.border-1, .border-top-1 { border-top-width: 1px !important; }
.border-1, .border-left-1 { border-left-width: 1px !important; }
.border-1, .border-bottom-1 { border-bottom-width: 1px !important; }
.border-1, .border-right-1 { border-right-width: 1px !important; }

.border-round { border-radius: 50% !important;}
.border-pill { border-radius: 999rem !important; }
.border-card { border-radius: 0.5rem !important; }

.pointer-events-none { pointer-events: none !important; }

/* ===== misc ===== */
/* MyFactory forms haben keine Felder um Klassen anzugeben, was mit diesem Wrapper umgagnen werden kann. */
.form-wrapper > form { display: contents !important; }

/* lined title */
.lined-title
{
    display: flex;
    align-items: center;
    text-align: center;

	font-size: clamp(1rem, 4vw, 2.5rem);

    gap: 1rem;
}
.lined-title::before, .lined-title::after
{
    z-index: -1;

    content: "";
    flex: 1 1 auto;
    min-height: 1px;
	max-height: 1px;
    background: var(--c-primary-darker);
}



/* rules */
body
{
	background-color: var(--c-primary-lighter);
	overflow-x: hidden;
}

head
{
	min-width: 100vw !important;
}

footer 
{
	min-width: 100vw !important;
}

/* ===== header ===== */
/* navigation */
.nav-row
{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;

  background-color: var(--c-secondary);
  color: var(--c-primary-lighter);
}

.nav-row-item
{
  display: inline-block;
  padding: 0.25rem 0.75rem;

  background-color: transparent;
  color: var(--c-primary-lighter);
}
.nav-row-item:is(a:hover)
{
  background-color: var(--c-primary-lighter);
  color: var(--c-secondary);
}

/* ================================== home - main */

	/* search line */
		.search-line, .search-line *
		{
			background-color: var(--c-primary-lighter);
			color: var(--c-secondary);	
		}

		.live-search-preview
		{
			position:absolute;
			z-index:1100;
			top: 48px;
			left: 0;

			display: flex;
			flex-direction: column;
			align-items: center;

			width: 100%;
			max-width: 100% !important;

			padding: 15px 5px;

			border: solid 2px var(--c-secondary);
			border-radius: inherit;
		}

		*:has(.product-search-item)
		{
			width: 100%;
		}
		*:has(.product-search-item) + *:has(.product-search-item)
		{
			margin-top: 20px;
		}

		.product-search-item
		{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 10px;

		width: 80%;
		height: 15vh;

		margin: auto;

		overflow: hidden;
		}
		.product-search-item *
		{
			max-height: 15vh;
		}

	/* basket */			
	.basket-item-list
	{
		overflow-y: auto;
		overflow-x: clip;

		max-height: 45vh;

		padding-right: 16px;

		scrollbar-width: thin;
	}

	/* slider */
		.owl-carousel
		{
			/* height: 33vw; */ /*16022026: 25vw; */
			/* max-height: 50vh; */
			min-height: none; 
		}

		.owl-carousel .owl-stage-outer, 
		.owl-carousel .owl-stage,
		.owl-carousel .owl-item,
		.owl-carousel .slider-image
		{
			height: inherit;
			max-height: inherit;
			min-height: inherit;
		}

	/* home icons */
	.home-icons
	{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		gap: 1.5rem;

		min-height: 56px;
		min-width: 100%;

		max-width: 100vw !important;
	}

	.home-icons img
	{
		object-fit: contain;

		height: 56px;
		width: auto;

		max-width: 100vw !important;
	}
	


	/* nav */
		.nav-categories
		{
			display: block;
			padding-left: 15vw;
			padding-right: 15vw;
		}

		.nav-categories-desktop
		{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;

			margin: 0px;
			padding: 0px;
		}

		.nav-category-link
		{
			display: inline-block;

			width: 100%;
			height: 100%;

			padding: 8px 16px;

			color: var(--c-primary-lighter);
			font-size: 14px;
			font-weight: 700;
			text-transform: uppercase;
			text-align: center;
			text-wrap: nowrap;
		}
		.nav-category-link:hover, 
		.nav-category-link:focus,
		.dropdown:has(*.dropdown-menu:hover) .nav-category-link,
		.dropdown:has(*.dropdown-menu:focus) .nav-category-link
		{
			background-color: var(--c-primary-lighter) !important;
			color:var(--c-secondary);
		}

		.nav-categories .dropdown-menu
		{
			min-width: 100%;

			margin: 0px;
			padding: 0px;
			
			background-color: var(--c-primary-lighter);
			
			overflow: hidden;

			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
			clip-path: inset(0px -10px -10px -10px);

			border: 1px solid rgba(0, 0, 0, 0.05);
			border-top: none;
			border-radius: unset;
		}

		.nav-categories .dropdown-menu a
		{
			color: var(--c-secondary);
			padding-bottom: 4px;
		}
		.nav-categories .dropdown-menu a:hover,
		.nav-categories .dropdown-menu a:focus
		{
			color: var(--c-secondary-lighter);
		}


	/* Container Kategorien */
		/* grid */
		.container-category-grid
		{
			display: grid;
			grid-template-columns: min-content;
			grid-gap: 1.5vw;

			margin: 20px 0 0 0; /*16022026: 20px 15vw 0 15vw*/
			padding-bottom: 50px;
		}
		
		@media (min-width: 1px) {
			.container-category-item img 
			{
				width: 90vw;	/* 246px */
				height: 53vw;	/* 144px */
			}
		}

		@media (min-width: 768px) {
			.container-category-grid
			{
				grid-template-columns: repeat(2, min-content);
			}

			.container-category-item img 
			{
				width: 42vw;
				height: 25vw;
			}
		}
		@media (min-width: 1200px) {
			.container-category-grid
			{
				grid-template-columns: repeat(4, min-content);
			}

			.container-category-item img 
			{
				width: 23vw;
				height: 13vw;
			}
		}

		/* items */
		.container-category-item
		{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.container-category-item span
		{
			display: none !important;
		}
		/* item links */
		.container-category-item a
		{
			display: block;

			width: 100%;
			height: auto;

			margin: 0px;
			padding: 0px;

			overflow: hidden;
		}

		/* bild link */
		.container-category-item a:first-of-type
		{
			border: 1px solid rgba(0, 0, 0, 0.2);
			border-bottom: none;
		}
		
		.container-category-item img 
		{
			object-fit: cover;

			transition: 0.1s;
		}
		.container-category-item:has(a:hover) img,
		.container-category-item:has(a:focus) img
		{
			transition: 0.1s;
			scale: 1.1;
		}

		/* text link */
		.container-category-item a:last-of-type
		{
			padding: 8px 5px;

			text-align: center;
			font-size: 18px;

			border: 1px solid rgba(0, 0, 0, 0.4);
			border-top: none;
		}	

		.container-category-item:has(a:hover) a:last-of-type,
		.containger-category-item:has(a:focus) a:last-of-type
		{
			color: var(--c-secondary-darker);
			background-color: var(--c-highlight);
		}

/* ================================== footer */
	/* shared */
	footer, 
	footer *
	{
		margin: 0;
		padding: 0;
		
		color: var(--c-primary-lighter);
		text-wrap: nowrap;

		max-width: 100vw;
	}
	footer a:hover, 
	footer a:hover i:before
	{
		color: var(--c-light);
	}
	footer a:hover
	{
		text-decoration: underline;
	}

	/* top row */
		.footer-top
		{
		  min-width: 100%;
		  min-height: 20px;
		  
		  display: grid;
		  grid-template-columns: min-content;
		  grid-column-gap: 0px;
		  grid-row-gap: 40px;
		  
		  padding: 30px 10vw;
		  
		  background-color: var(--c-secondary);
		}
		@media (min-width: 576px) {
		  .footer-top
		  {
        grid-template-columns: repeat(2, min-content);
        grid-column-gap: 30px;
        grid-row-gap: 40px;
		  }
		}
		@media (min-width: 992px) {
		  .footer-top
		  {
        grid-template-columns: repeat(3, auto) min-content;
        grid-column-gap: 50px;
        grid-row-gap: 0px;
		  }
		}

		.footer-content-header
		{
			margin-bottom: 20px;
			font-weight: bold;
		}

		.footer-content-grid
		{
		  display: grid;
		  grid-template-columns: min-content min-content;
		  grid-column-gap: 20px;
		}

		.footer-content-menu li:not(:first-child)
		{
			margin-top: 10px;
		}

		.footer-map
		{
			width: 300px;
			height: 180px;

			outline-style: solid;
			outline-width: 4px;
			outline-color: var(--c-primary-lighter);
			border-radius: 10px;
			overflow: hidden;

			margin-top: 15px;
		}
		.footer-map *
		{
			display: block;

			height: inherit;
			width: inherit;

			margin: 0;
			padding: 0;
		}

	/* bottom row */
		.footer-bottom
		{
			min-width: 100%;
			min-height: 5px;
			
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;

			padding: 15px 10vw;
			background-color: var(--c-secondary-darker);
		}
		

    @media (min-width: 1200px)
    {
      .footer-top
		  {
        padding: 30px 20vw;
		  }

      .footer-bottom
      {
        padding: 15px 20vw;
      }
    }

/* ================================== Catalogues */

/*
.subcategory-link
{
	font-size: 18px;
	text-wrap: nowrap;
	
	color: var(--c-primary-darker);

	margin: 15px 25px;
}
.subcategory-link:hover
{
	color: var(--c-primary);
}
*/
.subcategory-link
{
	margin: 10px;
	padding: 5px 15px;

	background-color: transparent;

	color: var(--c-primary-darker);
	font-size: 1.15rem;
	text-wrap: nowrap;

	border: none;
}
.subcategory-link:hover, 
.subcategory-link:focus
{
	padding: 4px 14px;

	color: var(--c-primary-darker);

	border: 1px solid var(--c-shadow-lighter);
	border-radius: 0.5rem;
}

/* ================================== general elements */
.hide-empty:empty, .hide-empty:not(:has(*)), .hide-empty:not(:has(*:not([hidden])))	/* versteckt leere elemente */
{
	display: none !important;
}

.hide-empty-parent:not(:has(.hide-empty-child:not(:empty)))	/* Versteckt .hide-empty-parent wenn alle .hide-empty-child elemente dessen leer sind */
{
	display: none !important;
}




/* ===== Artikellisten ===== */

/* misc */
.product-preview-button
{
	display: block;
	width: 48px;
	height: 48px;

	font-family: Pe-icon-7-stroke;
	font-size: 24px;
	text-align: center;
	line-height: 48px;

	border: none;
	border-radius: 999rem;

	background-color: var(--c-secondary);
	color: var(--c-light);
}

.product-preview-button:hover, 
.product-preview-button:focus
{
	background-color: var(--c-light);
	color: var(--c-secondary);

	border: 1px solid var(--c-shadow);

	cursor: pointer;
}


/* grid item */
.product-grid-button-area
{
	display: none;

	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
}

#divProductGridItemTop:hover .product-grid-button-area,
#divProductGridItemTop:focus .product-grid-button-area
{
	display: flex;
	flex-direction: flex-row;
	gap: 8px;
}

.product-grid-button-area > *
{
	display: contents;
}


.product-grid-item-name
{
	color: var(--c-primary-darker);
	font-size: 1.2rem;
}

.product-grid-item-number
{
	color: var(--c-dark);
	opacity: 0.33;
	font-size: 0.8rem;
}

.product-grid-item-price
{
	color: var(--c-primary-darker);
	font-size: 1.05rem;
}


/* list item */
.product-list-button-area
{
	display: none;

	position: absolute;
	left: 50%;
	bottom: 50%;
	transform: translate(-50%, -50%);
}

#divProductListImageArea:hover .product-list-button-area,
#dovProductListImageArea:focus .product-list-button-area
{
	display: flex;
	flex-direction: flex-row;
	gap: 8px;
}


.purchase-error-text
{
	position: relative;
	z-index: 200;
}



/* ===== product tabs ===== */
.product-tabs .tab-content
{
	padding: 1rem 1.5rem;

	background-color: var(--c-primary-lighter);
	border: 1px solid var(--c-shadow-lighter);
}


.product-tabs a
{
	padding: 0.5rem 0.75rem;
	margin-bottom: -2px;

	color: var(--c-primary-darker);
	background-color: var(--c-primary-lighter);
	border: 1px solid var(--c-shadow-lighter);

	border-radius: 0.5rem 0.5rem 0rem 0rem;
}
.product-tabs a:not(:first-of-type) 
{ 
	margin-left: -1px; 
}

.product-tabs a:not(.active) 
{ 
	margin-top: 0.25rem; 
}
.product-tabs a.active 
{ 
	margin-top: 0rem;
	border-bottom: 1px solid var(--c-primary-lighter);
}

.product-tabs img
{
	object-fit: contain;

	width: 100% !important;
	height: auto !important;
	max-width: 100%;
}

/* ===== Warenkorb ===== */
.cart-list ul
{
	padding-left: 0;
	list-style: none;
}

.cart-list li
{
	border-top: 1px solid var(--c-shadow);
}
.cart-list li:last-of-type
{
	border-bottom: 1px solid var(--c-shadow);
}

.cart-list li img
{
	height: 20vw;
	max-height: 18vh;
}

.cart-item-remove	
{
	display: flex;
	align-items: center;
	justify-content: center;

	width: 32px;
	height: 32px;
}

.cart-item-quantity
{
  	width: 80px;
	padding: 4px 5px 4px 10px;

	background-color: var(--c-light);
	color: var(--c-primary-darker);

	border: 1 solid var(--c-light-darker);
	border-radius: 3px;
}


.cart-checkout
{
	padding: 1rem;

	border: 1px solid var(--c-shadow);
}
@media (min-width: 992px) 
{
	.cart-checkout 
	{
		padding: 0rem 1rem;

		border: none;
		border-left: 1px solid var(--c-shadow);
		border-right: 1px solid var(--c-shadow);
	}
}

.cart-seperator-y, .cart-seperator-top { border-top: 1px solid var(--c-shadow-lighter); }
.cart-seperator-y, .cart-seperator-bottom { border-bottom: 1px solid var(--c-shadow-lighter); }
.cart-seperator-x, .cart-seperator-right { border-right: 1px solid var(--c-shadow-lighter); }
.cart-seperator-x, .cart-seperator-left { border-left: 1px solid var(--c-shadow-lighter); }



/* ===== Farbpunkte ====== */
/* ausblenden wenn keine punkte hinterlegt sind*/
.farbpunkte:not(:has(img)) { display: none; }

/* abstände zwischen den punkten */
.farbpunkte img { margin-right: 5px; }
.farbpunkte img:last-of-type { margin-right: 0px; }

/* zähler falls zu viele farbpunkte hinterlegt sind (gegebene zahl hier ist der punkt, ab dem punkte versteckt werden) */
.farbpunkte { counter-reset: farbpunkte-anzahl; }
.farbpunkte img:nth-child(n+5) 
{ 
	counter-increment:  farbpunkte-anzahl; 

	display: flex;
	width: 0;
	margin: 0;
	padding: 0;
	opacity: 0;
}
.farbpunkte:has(> img:nth-child(5))::after 
{ 
	color: var(--c-primary-darker);
	font-weight: 500;
	line-height: 16px;
	content: "+" counter(farbpunkte-anzahl); 
}

/* leere zeilen nicht anzeigen */
.farbpunkte br { display: none; }



/* ===== Über uns ===== */
.about-us > div:nth-child(2)
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}



.cart-input
{
	background-color: var(--c-highlight-lighter);

	border: none;
	border-radius: 0.25rem;
}

.cart-input:focus,
.cart-input:hover
{
	background-color: var(--c-light);
}


/* ===== newsletter popup ===== */
/* background wrapper */
.newsletter-popup-wrapper
{
  position: fixed;
  z-index: 1000;
  bottom: 0rem;
  right: 0rem;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;

  padding: 2rem;
  margin: 0rem;

  background-color: var(--c-shadow-lighter);

  opacity: 0;
  pointer-events: none;
  animation-delay: 20s;
  animation: newsletterFadeIn 1.5s ease forwards;
}

@media (min-width: 768px)
{
  .newsletter-popup-wrapper
  {
    position: fixed;
    z-index: 1000;
    bottom: 0rem;
    right: 0rem;

    display: flex;
    align-items: center;
    justify-content: center;

    width: auto;
    height: auto;

    padding: 0rem;
    margin: 2rem;

    background-color: var(--c-shadow-lighter);

    opacity: 0;
    pointer-events: none;
    animation: newsletterFadeIn 1.5s ease forwards;
    animation-delay: 20s;
  }
}

@keyframes newsletterFadeIn
{
  from 
  { 
    opacity: 0; 
    pointer-events: none;
  }
  to 
  { 
    opacity: 1; 
    pointer-events: auto;
  }
}
@keyframes newsletterFadeOut
{
  from 
  { 
    opacity: 1; 
    pointer-events: none;
  }
  to 
  { 
    opacity: 0; 
    pointer-events: none;
  }
}

/* panel wrapper */
.newsletter-popup
{
  position: relative;

  min-height: 128px;

  background-color: var(--c-primary-lighter);
  color: var(--c-primary-darker);
  border: 1px solid var(--c-shadow);
}

.newsletter-popup > img
{
  display: block;

  height: auto;
  width: auto;
  max-height: 90vh;
  max-width: 90vw;

  object-fit: cover;
}

/* interface wrapper */
.newsletter-popup-interface
{
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: end;
  justify-content: space-between;

  padding: 1rem;
}

/* close button */
.newsletter-popup-close
{
  display: flex;
  align-items: center;
  justify-content: center;

  height: 32px;
  width: 32px;
  aspect-ratio: 1/1;

  padding: 0.75rem;

  background-color: var(--c-primary-lighter);
  color: var(--c-shadow);
  border: 1px solid var(--c-shadow-lighter);
}
.newsletter-popup-close:not(:disabled):hover,
.newsletter-popup-close:not(:disabled):focus
{
  background-color: var(--c-light);
  color: var(--c-shadow);
  border: 1px solid var(--c-shadow-lighter);
}
.newsletter-popup-close:not(:disabled):hover
{
  cursor: pointer;
}

/* form */
.newsletter-popup input
{
  padding: 0.5rem;
}
.newsletter-popup input.newsletter-popup-close:not(:disabled):hover
{
  cursor: pointer;
}

.newsletter-popup input[type="text"]
{
  background-color: var(--c-primary-lighter);
  color: var(--c-shadow-lighter);
  border: 1px solid var(--c-shadow-lighter);
  border-right: none;

  min-width: 64px;
}
.newsletter-popup input[type="text"]:not(:disabled):hover,
.newsletter-popup input[type="text"]:not(:disabled):focus
{
  background-color: var(--c-light);
  color: var(--c-shadow);
  border: 1px solid var(--c-shadow-lighter);
  border-right: none;
}

.newsletter-popup input[type="submit"]
{
  background-color: var(--c-primary-lighter);
  color: var(--c-primary-darker);
  border: 1px solid var(--c-shadow-lighter);
}
.newsletter-popup input[type="submit"]:not(:disabled):hover,
.newsletter-popup input[type="submit"]:not(:disabled):focus
{
  background-color: var(--c-light);
  color: var(--c-primary-darker);
  border: 1px solid var(--c-shadow-lighter);
}



/* ===== discount sale ===== */
.discount-sale-container
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;

  margin: 1rem 0rem;
  padding: 0.75rem;

  background-color: var(--c-secondary-lighter);
  color: var(--c-secondary-darker);
  border: 1px solid var(--c-secondary);
}

.discount-sale-container span
{
  text-align: center;
}
.discount-sale-container span:not(:first-of-type)
{
	margin-top: 0.5rem;
}

.discount-sale-container progress
{
  pointer-events: none;

  margin-top: 0.75rem;

  width: 100%;

  background-color: var(--c-light);
  border: 1px solid var(--c-secondary-darker);
  border-radius: 999rem;
}
.discount-sale-container progress::-webkit-progress-bar
{
  background-color: var(--c-light);
  border: 1px solid var(--c-secondary);
  border-radius: 999rem;
}
.discount-sale-container progress::-webkit-progress-value
{
  background-color: var(--c-secondary);
  border: 1px solid var(--c-secondary);
  border-radius: 999rem;
}
.discount-sale-container progress::-moz-progress-bar
{
  background-color: var(--c-secondary);
  border: 1px solid var(--c-secondary);
  border-radius: 999rem;
}

/* ===== product qualities ===== */
.product-qualities
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  padding: 0.75rem;

  background-color: var(--c-secondary);

  border-radius: 0.5rem;
}

.product-qualities img
{
  height: 80px;
  margin: 0.5rem;
}


/* ===== input form ===== */

.input-form-line form
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}

.input-form-line input
{
	padding: 0.5rem;
}

.input-form-line input[type="text"]
{
	flex: 1 1 auto;

	padding: 0.5rem 0.75rem;

	color: var(--c-shadow-lighter);
	background-color: var(--c-highlight);
	border: 0px none;
}
.input-form-line input[type="text"]:not(:disabled):hover,
.input-form-line input[type="text"]:not(:disabled):focus
{
	color: var(--c-shadow-darker);
	background-color: var(--c-light);
}

.input-form-line input[type="submit"]
{
	color: var(--c-primary-lighter);
	background-color: var(--c-secondary);
	border: 0px none;
	border-left: 2px solid var(--c-secondary);
}
.input-form-line input[type="submit"]:not(:disabled):hover,
.input-form-line input[type="submit"]:not(:disabled):focus
{
	color: var(--c-secondary-darker);
	background-color: var(--c-light);
	border-left: 2px solid var(--c-shadow-lighter);
}
.input-form-line input[type="submit"]:not(:disabled):hover
{
	cursor: pointer;
}



/* ===== home philosophy ===== */
.home-philosophy
{
	position: relative;
	width: 100%;
	margin-left: -1px;
}
.home-philosophy-content
{
	position: absolute;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;
}

.home-philosophy a
{
	color: var(--c-light);

	scale: 1;

	background: var(--c-warning);
	background: radial-gradient(circle,var(--c-warning) 0%, var(--c-warning) 50%, var(--c-warning-darker) 100%);
	background-position: center;
	background-size: 100% 100%;

	transition: background-size 0.25s, scale 0.25s;
}
.home-philosophy a:not(:disabled):hover
{
	scale: 1.05;
	background-size: 115% 115%;
}




/* ===== about us hacky whatever ===== */
.about-us
{
	display: flex; 
	align-items: center;
	justify-content: center;

	margin: 0px -15px;
	margin-bottom: -1.5rem;

	height: 100%;

	background-size: cover;
}

.about-us .flex-row > *
{
	flex: 1 1 auto;
}

@media (min-width: 768px) 
{
	.about-us
	{
		margin: 0px -30px;
		margin-bottom: -1.5rem;
	}
}

@media (min-width: 992px) 
{
	.about-us
	{
		margin: 0px -50px;
		margin-bottom: -1.5rem;
	}
}

@media (min-width: 1200px) 
{
	.about-us
	{
		margin: 0px -70px;
		margin-bottom: -1.5rem;
	}
}

@media (min-width: 1600px) 
{
	.about-us
	{
		margin: 0px -200px;
		margin-bottom: -1.5rem;
	}
}