/* Diese Regel lädt die Schriftart aus dem Typekit-Kit */
/* Diese Regel lädt die Schriftart aus dem Typekit-Kit */
@import url('https://use.typekit.net/mnk2lda.css');

/* Definiere eine benutzerdefinierte Klasse, die die Schriftart verwendet */
.adobe-font {
    font-family: proxima-nova, sans-serif; /* Ersetze 'Adobe Font Name' durch den tatsächlichen Namen der Schriftart aus deinem Typekit-Kit */
}
.adobe-font {
    font-family: adobe-garamond-pro, serif; /* Ersetze 'Adobe Font Name' durch den tatsächlichen Namen der Schriftart aus deinem Typekit-Kit */
}

/* Beispiel-Nutzung der benutzerdefinierten Klasse auf einem Element */
h1 {
	font-family: proxima-nova, sans-serif; /* Du kannst auch die Schriftart direkt auf einzelnen Elementen festlegen */
}

h2 {
	font-family: proxima-nova, sans-serif;/* Du kannst auch die Schriftart direkt auf einzelnen Elementen festlegen */	
}
h3 {
    font-family: adobe-garamond-pro, serif; 
    font-style: italic;
    font-size: 1.4em;/* Du kannst auch die Schriftart direkt auf einzelnen Elementen festlegen */
}

h4 {
    font-family: proxima-nova, sans-serif; /* Du kannst auch die Schriftart direkt auf einzelnen Elementen festlegen */	
}

h5 {
    font-family: adobe-garamond-pro, serif; /* Du kannst auch die Schriftart direkt auf einzelnen Elementen festlegen */
}

h6 {
    font-family: adobe-garamond-pro, serif; /* Du kannst auch die Schriftart direkt auf einzelnen Elementen festlegen */
}

ul {
    font-family: proxima-nova, sans-serif; /* Du kannst auch die Schriftart direkt auf einzelnen Elementen festlegen */
}

body {
    font-family: proxima-nova, sans-serif; /* Du kannst auch die Schriftart direkt auf einzelnen Elementen festlegen */	
}

sup {
    font-family: adobe-garamond-pro, serif; /* Du kannst auch die Schriftart direkt auf einzelnen Elementen festlegen */
}

sub {
    font-family: adobe-garamond-pro, serif; /* Du kannst auch die Schriftart direkt auf einzelnen Elementen festlegen */
}

input {
    font-family: adobe-garamond-pro, serif; /* Du kannst auch die Schriftart direkt auf einzelnen Elementen festlegen */
}

change-link {
    font-family: proxima-nova, sans-serif; /* Du kannst auch die Schriftart direkt auf einzelnen Elementen festlegen */	
}

button {
    font-family: proxima-nova, sans-serif; /* Du kannst auch die Schriftart direkt auf einzelnen Elementen festlegen */	
}

button-xs {
   font-family: proxima-nova, sans-serif; /* Du kannst auch die Schriftart direkt auf einzelnen Elementen festlegen */	
}

dropdown-menu {
    font-family: adobe-garamond-pro, serif; /* Du kannst auch die Schriftart direkt auf einzelnen Elementen festlegen */
	
}

:root {


/*------------Palette------------*/
--primary-light: #e9c999;
--primary-main: #fff;
--primary-dark: #fff;

--secondary-light: #1c1c1c;
--secondary-main: #1c1c1c;
--secondary-dark: #1c1c1c;

--accent-light: #e9c999;
--accent-main: #e9c999;
--accent-dark: #e9c999;

--error: #e4032e;
--success: #86bc24;

/*--Font Settings--*/
--font-primary: 'adobe-garamond-pro', serif;
--font-title-primary: 'proxima-nova', sans-serif;
--font-menu: 'proxima-nova', sans-serif;
--font-fallback: 'adobe-garamond-pro', serif;

/*--Font Size Settings--*/
--font-body-size: 14px;
--font-p-size: 1em;
--font-h1-size: 3em;
--font-h2-size: 2.4em;
--font-h3-size: 1.2em;
--font-h4-size: 1.1em;
--font-h5-size: 1em;
--font-h6-size: 1em;
--font-sup-size: .8rem;
--font-sub-size: .9rem;
--font-input-size: .9em;
--font-button-size: .8em;
--font-button-sm-size: .8em;
--font-button-xs-size: .8em;
--font-menu-size: 1.2em;
--font-dropdown-menu-size: 1em;	

--section-spacing: 1rem;
		
/*--Font Color Settings--*/
--text-primary-color:#1c1c1c;
--text-secondary-color:#1c1c1c;
--text-menu-color: #fff;
--text-menu-hover-color:#b1b3b4;
--text-submenu-color: #e9c999;
--text-submenu-hover-color: var(--text-menu-hover-color);

--text-title-color: #1c1c1c;

--text-on-navigation-bar: #fff;
--text-hover-on-navigation-bar:#b1b3b4;
--text-hover-on-card:#b1b3b4;
	
		
/*Icons Color Settings*/
--icon-primary: #1c1c1c;
--icon-secondary:#1c1c1c;
--icon-accent:#1c1c1c;

/*Background Color Settings*/
--background-body: #e9c999;
--background-primary: #fff;
--background-secondary: #fff;
--background-accent: var(--accent-main);
--background-error: var(--error);
--background-widget-bar: #fff;
--background-menu-bar: #1c1c1c;
--background-navigation-bar: #1c1c1c;
--background-submenu: #1c1c1c;
--background-card: #1c1c1c;
--background-form-control:rgba(255,255,255,0.9);
--background-form-control-active: #fff;
--background-footer-main:#b1b3b4;
--background-footer-copyright:#b1b3b4;
--background-footer-payments:#b1b3b4;
--background-dark: #1c1c1c;
--background-icon-contrast: rgba(200,200,200,0);
--background-slider-control: rgba(255,255,255,0.9);
--background-main-header:#e9c999;
--shadow-hover-card: 0px 8px 20px 0px rgba(0,0,0,0.15);

	
/*Border Settings*/
--border-primary:#e9c999;
--border-accent: var(--accent-main);
--border-error: var(--error);
--border-radius-sm: 0rem;
--border-radius-md: 0rem;
--border-radius-lg: 0rem;
--border-radius-arrow: 0rem;
--border-radius-img: 0rem;
--border-radius-button: 0rem;


}/*root ende*/


	
/*Background*/

body {
    background-image: url(https://magvinum.vinothek.online/media/images/background_dhZWpuS.svg?origin=true);
	background-repeat: no-repeat;
    background-attachment: fixed;
	background-size: cover;
}

@media (max-width: 820px) {
	body {
		background-position-x: 40%;
	}
}

.product-single-page+#page-footer {
    padding-bottom: 2rem;
}

#__nuxt {
	
	.main-header .widget-bar {
		background-color:transparent;
	}


	/*Menu*/
	.main-menu .sub-menu-main {
    	background-color: #1c1c1c;
	}


	/*MAIN SLIDER*/

	.fullsceen-slider .slider-bg {
    	min-height: 60vh;
		margin: 1em 0em;
	}

	.fullsceen-slider .slider-content {
    	display: none;
	}

	.fullsceen-slider .splide__pagination__page {
    	border: 2px solid #1c1c1c;
	}

	.fullsceen-slider .splide__pagination .splide__pagination__page.is-active {
    	background: #1c1c1c;
	}

	.splide__pagination .splide__pagination__page.is-active {
    	background: #1c1c1c;
	}
	
	.splide__pagination__page {
    	background: #1c1c1c;
	}

	.splide__arrow svg {
    	fill: #1c1c1c;
	}

	.splide__arrow {
    	background: none;
	}

	/*AKTION SLIDER*/

	.section-raw-content-row .description {
    	font-size: 1rem;
	}


	.line {
    	width: 10rem;
    	height: .1rem;
	}


	.related-products-section .section-title {
    	border-bottom: 1px solid white;
	}


	.boxed-banner-card .subtitle, .boxed-banner-card .title {
    	hyphens: auto;
    	hyphenate-limit-chars: auto 5;
	}

	.boxed-banner-card, .color-overlay {
    	transition: all .3s ease;
    	transition: all var(--transition-standart-time,.3s) ease;
    	text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
	}

	.section-three-column-slider .slider-card {
    	background: white;
	}

	.flex-container {
		padding:0px 10px;
    	display: flex;
    	flex-wrap: wrap;
    	gap: 10px;
    	justify-content: space-between;
	}

	.flex-item {
		flex: 1 1 calc(33.333% - 20px);
    	hyphens: auto;
    	padding: 10px;
    	box-sizing: border-box;
	}
        
	.flex-item p {
		margin: 0;
	}
        
	@media (max-width: 720px) {
		.flex-item {
			flex: 1 1 calc(50% - 20px) !important;
		}
	}
        
	@media (max-width: 480px) {
		.flex-item {
			flex: 1 1 100% !important;
		}
	}

	.section-icon-links .icon-link-list .icon-link .title {
    	font-family: var(--font-title-primary);
	}
	
/*PRODUKTE*/
	
	.price-tooltip:hover {
    	color: #1c1c1c;
	}

	.price-tooltip .tooltiptext {
    	background-color: #b1b3b4;
	}

	.tooltip-top {
    	bottom: -50%;
    	left: 110%;
	}


	.tooltip-top:after {
    	content: "";
    	position: absolute;
    	top: 45%;
    	left: -5px;
    	margin-left: -5px;
    	border: 5px solid transparent;
    	border-top: 5px solid #b1b3b4;
    	transform: rotate(90deg);
	}

	.description a:not(.external-link) {
    	font-weight: bold;
    	color: #e9c999 !important;
    	background-color: white;
	}
	
	.product-gallery-lightbox {
		background-color: rgba(200,200,200,0.8);
	}
	
	.search-overlay {
   		background-image: url(https://magvinum.vinothek.online/media/images/background_dhZWpuS.svg?origin=true);
		background-repeat: no-repeat;
    	background-attachment: fixed;
		background-size: cover;
		height: 90%;
    	bottom: 0;
		top:11%;
	}
	
	.search-overlay .container {
    	padding-top: 1.5rem;
    	padding-bottom: 1.5rem;
	}

	.splide--fade>.splide__track>.splide__list>.splide__slide.is-active {
    	height: 60vh !important;
	}
	
	.product-images-gallery .splide__track>.splide__list>.splide__slide {
    	max-height: 60vh;
	}
	
	@media (max-width: 480px) {	
		.product-images-gallery .splide__track>.splide__list>.splide__slide {
        	max-height: 45vh;
    	}
	}
	
	.border-bottom-dashed {
    	border-bottom: 0px;
	}
	
	.border-top-dashed {
    	border-top: 0px;
	}
	
	.pt-4, .py-4 {
    	padding-top: 1rem!important;
	}
	
	.product-info .description {
    	background: white;
    	border: 1px solid #e9c999;
    	padding: 1rem;
	}
}

/*
-keine dashed Linien beim Produkt
-Flashenbild groesser
-Suche die gleiche Hintergrund und womoeglichemit
-vllt. Wunschliste text einblenden
-Kastl wie bei Attribut für Beschreibungstext (senso whsl) beim Produkt
-homescreenicon?
-Nur noch 8 überig SCHWARZ
-ab 149€ versankostenfrei
-1.Slider längsemerer Übergang und kürzere Einblendzeit
-ZAHLUNGSMEHODE - AKTIVE/HOVER sichtbar machen
*/