/* ==========================================================================
   1. Variablen & Basis-Definitionen
   ========================================================================== */
:root {
	/* Fonts */
	font-size: 16px;
	--family-head: 'Hind Guntur', Arial, Helvetica, sans-serif;
	--family-normal: 'Titillium Web', Arial, Helvetica, sans-serif;

	/* Font Sizes */
	--ahg-ueberschrift: 40px;
	--ahg-unterueberschrift: 24px;
	--ahg-drittschrift: 18px;
	--ahg-fliesstext: 15px;
	--ahg-kleinschrift: 12px;

	/* Farben */
	--ahg-blau: #134390;
	--ahg-schnee: #F8F8F8;
	--ahg-hellgrau: #F8F8F8;
	--ahg-dunkelgrau: #2D2D2D;

	/* Animation */
	--ahg-transition: all .2s ease-in-out;
}

body {
	font-family: var(--family-normal);
	font-weight: 400;
	font-size: .9375rem;
	background-color: #f8f8f8;
}

body.is-act-home .container-main {
	padding: 0px;
}

#content-main {
	padding-top: 30px;
}

/* ==========================================================================
   2. Typografie
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--family-head);
}

h1 {
	font-weight: 600;
	font-size: 2.5rem;
	line-height: 1.4;
}

h2 {
	font-weight: 600;
	font-size: 1.5rem;
}

h3 {
	font-weight: 500;
	font-size: 1.125rem;
}

/* ==========================================================================
   3. Header & Navigation
   ========================================================================== */
.header-main {
	background-color: #ffffff;
	min-height: 100px;
	padding-top: 0px;
}

.header-logo-col {
	position: relative;
	width: 200px;
	align-self: flex-start;
}

.header-logo-main {
	width: 135px;
	height: 135px;
	border-radius: 100%;
	position: absolute;
	background-color: #ffffff;
	top: -9px;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 20px;
}

.header-logo-picture {
	max-width: unset;
	/*min-width: unset;*/
}

.header-logo-picture .img-fluid.header-logo-main-img {
	max-width: 115px;
	width: 100%;
}

.header-search {
	border-bottom: solid 2px var(--ahg-blau);
	margin-left: auto;
}

#searchCollapse,
form.header-search-form {
	height: 100%;
}

form.header-search-form {
	display: flex;
	min-height: 46px;
}

.header-search-btn,
input.form-control.header-search-input,
button.btn.header-search-btn {
	border: none;
	background-color: #ffffff;
}

.header-search-btn {
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-search .input-group:has(#header-main-search-input.form-control) {
	box-shadow: 0 0 0 0.125rem #ffffff00, 0 0 0 0.25rem #13439000;
	transition: box-shadow .2s ease-out;
}

.header-search .input-group:has(#header-main-search-input.form-control:valid:focus) {
	box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #134390;
}

.header-search .input-group #header-main-search-input.form-control:valid:focus {
	box-shadow: none;
}

.header-actions-col .row {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.header-actions-btn,
button#accountWidget {
	background-color: var(--ahg-blau);
	color: #ffffff !important;
	padding: 10px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: solid 2px #ffffff00;
}

.header-actions-btn.icon {
	color: #ffffff !important;
}

button#accountWidget {
	margin-left: 15px;
}

.header-cart-btn.header-actions-btn {
	padding: 10px 18px;
	margin-left: 35px;
}

.header-cart-total,
.header-cart-icon span.icon.icon-bag,
.header-wishlist span.icon.icon-heart,
.nav-main-toggle-btn .icon.icon-stack,
.search-toggle span.icon.icon-search {
	svg use { fill: #ffffff !important; }
}
button#accountWidget .icon.icon-avatar {
	svg use { fill: #ffffff !important; }
}

button.btn.nav-main-toggle-btn.header-actions-btn:focus,
button.btn.nav-main-toggle-btn.header-actions-btn:active,
button.btn.nav-main-toggle-btn.header-actions-btn:hover {
	background-color: #ffffff !important;
	border: solid 2px var(--ahg-blau) !important;
}

button.btn.nav-main-toggle-btn.header-actions-btn:focus .icon.icon-stack svg use,
button.btn.nav-main-toggle-btn.header-actions-btn:active .icon.icon-stack svg use,
button.btn.nav-main-toggle-btn.header-actions-btn:hover .icon.icon-stack svg use  {
	fill: var(--ahg-blau) !important;
}

.header-actions-btn:hover,
button#accountWidget:hover,
button#accountWidget:active,
.btn .account-menu-btn .header-actions-btn button.show {
	border: solid 2px var(--ahg-blau);
	color: var(--ahg-blau);
	background-color: #ffffff !important;
}

.header-actions-btn:hover * {
	color: var(--ahg-blau) !important;
}

.header-cart-btn.header-actions-btn:hover .header-cart-icon span.icon.icon-bag,
.header-wishlist-btn:hover span.icon.icon-heart,
.header-cart-btn:hover .header-cart-total,
button#accountWidget:hover span.icon.icon-avatar,
.header-actions-btn:hover span.icon.icon-search,
.header-actions-btn:hover span.icon.icon-search:active {
	svg use { fill: var(--ahg-blau) !important; }
}

.header-cart-total {
	font-size: var(--ahg-fliesstext);
	color: #ffffff !important;
	line-height: 100%;
}

.header-wishlist-icon,
span.header-cart-icon,
.header-search-icon {
	line-height: 0;
}

.header-main .btn .icon>svg {
	top: unset;
	color:white;
}

.nav-main {
	background-color: var(--ahg-blau);
	color: #ffffff;
	padding-top: 0px;
	padding-bottom: 0px;
}

.nav-main .main-navigation-menu {
	max-width: 88%;
	margin-left: auto;
	justify-content: flex-end;
	padding: 0px;
	margin-right: -15px;
	min-height: 76px;
	align-items: stretch;
}

.main-navigation-menu .nav-item:not(:last-child) {
	padding-right: 0px !important;
}

a.nav-link.main-navigation-link {
	padding: 5px 15px !important;
	display: flex;
	height: inherit;
	align-items: center;
}

a.nav-link::after {
	color: #fff !important;
}

a.nav-link.main-navigation-link:hover {
	background-color: var(--ahg-schnee);
}

a.nav-link:hover::after {
	color: var(--ahg-blau) !important;
}

a.nav-link.main-navigation-link:hover .main-navigation-link-text {
	color: var(--ahg-blau);
}

.main-navigation-link-text {
	color: #ffffff;
	font-family: var(--family-head);
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0.5px;
	height: fit-content;
	padding-bottom: 0px;
	padding-top: 6px;
}

.main-navigation-link.active .main-navigation-link-text {
	border-color: #fff !important;
	text-decoration: none;
}

.main-navigation-link.active:hover .main-navigation-link-text {
	border-color: var(--ahg-blau) !important;
}

.nav-main-toggle-btn.header-actions-btn:hover svg {
	color: var(--ahg-blau);
}

.main-navigation-menu-list .dropdown .navigation-flyout-category-link {
	color: var(--ahg-blau);
	margin-bottom: 20px !important;
}

.main-navigation-menu-list .dropdown-menu {
	border: none !important;
	box-shadow: 0px 5px 20px -3px #00000014 !important;
}

.navigation-flyouts .navigation-flyout {
	background-color: var(--ahg-hellgrau);
}

.navigation-flyout-categories.is-level-0 > .navigation-flyout-col {
	margin-bottom: 0;
}

/* ==========================================================================
   4. Komponenten (Slider, Breadcrumbs, Pagination)
   ========================================================================== */
.tns-nav button {
	background-color: #ffffff !important;
	border: 0 !important;
	height: 15px !important;
	width: 15px !important;
	padding: 0px !important;
	margin: 0px 5px !important;
}

.tns-nav button.tns-nav-active {
	background-color: var(--ahg-blau) !important;
}

.base-slider-controls-prev,
.base-slider-controls-next {
	background-color: var(--ahg-blau) !important;
	border-radius: 0px 50% 50% 0px !important;
	height: 45px;
	width: 45px;
	opacity: 1;
	border: 1px solid transparent;
	transition: var(--ahg-transition);
}

.base-slider-controls-next {
	border-radius: 50% 0px 0px 50% !important;
}

.base-slider-controls-prev:hover,
.base-slider-controls-next:hover {
	background-color: #fff !important;
	border: 1px solid var(--ahg-blau);
}

.base-slider-controls-prev .icon,
.base-slider-controls-next .icon {
	height: 20px;
	width: 20px;
	line-height: normal;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: white;
	transition: var(--ahg-transition);
}

.base-slider-controls-prev:hover .icon,
.base-slider-controls-next:hover .icon {
	color: var(--ahg-blau);
}

.base-slider-controls-prev .icon>svg { left: -4px; top: unset; }
.base-slider-controls-next .icon>svg { right: -4px; top: unset; }

.breadcrumb {
	--bs-breadcrumb-margin-bottom: 0rem !important;
}
.pagination-nav  .page-link:focus {box-shadow: none;}
.pagination-nav li.page-item { border: 2px solid #fff; }
.pagination-nav li.page-item:hover { border: 2px solid var(--ahg-blau); background-color: #fff; }
.pagination-nav li.page-item .page-link:hover { background-color: #fff; color: var(--ahg-blau); }
.pagination-nav li.page-item.active { border: 2px solid var(--ahg-blau); }
.pagination-nav li.page-item.active:hover { border: 2px solid var(--ahg-blau); background-color: #fff; }
.pagination-nav li.page-item.active .page-link:hover { background-color: #fff; color: var(--ahg-blau); }

.pagination-nav li.disabled>.page-link,
.pagination-nav li.disabled>.page-link:hover,
.pagination-nav li.page-item.disabled {
	border: none;
	background-color: var(--ahg-schnee);
}

.scroll-up-button>button.btn.btn-primary {
	aspect-ratio: 1 / 1;
}

/* ==========================================================================
   5. Produkt-Boxen (Listenansicht & Global)
   ========================================================================== */
.product-box {
	border-color: transparent;
	box-shadow: 0px 0px 10px -6px #00000000;
	transition: box-shadow .2s ease-out;
}

.product-box:hover {
	box-shadow: 0px 7px 13px -6px #00000029;
}

.card.product-box .card-body .product-info {
	padding: 0px 10px 10px 10px;
}

div.product-variant-characteristics,
.product-price-unit,
.product-rating {
	display: none;
}

.product-box .product-image-wrapper { margin-bottom: 25px; }

.product-box .product-price {
	color: var(--ahg-dunkelgrau);
	font-size: var(--ahg-drittschrift);
	font-family: var(--family-head);
}

.product-box .product-price-wrapper { text-align: start; }

.product-box .product-cheapest-price {
	margin-bottom: unset;
	margin: 16px 0px;
	min-height: fit-content;
}

.product-box .btn.btn-light.btn-detail {
	background-color: var(--ahg-dunkelgrau);
	color: white;
	border: 2px solid transparent;
}

.product-box button.btn.btn-buy {
	border: 2px solid transparent;
}

.product-box .btn.btn-light.btn-detail:hover,
.product-box button.btn.btn-buy:hover {
	background-color: var(--ahg-schnee);
	color: var(--ahg-blau);
	border: 2px solid var(--ahg-blau);
}

.product-name {
	font-family: var(--family-head);
	font-size: var(--ahg-drittschrift);
	line-height: 30px;
	height: 60px;
}

.product-box .product-description {
	font-size: var(--ahg-fliesstext);
	height: 60px;
	line-height: 20px;
}

.product-badges .badge {
	border-radius: 0;
	padding: 2px 10px;
}

.cms-element-product-listing-actions { margin-bottom: 30px; }

.cms-element-product-listing .sorting:has(.form-select) { margin-right: 2px; }

.cms-element-product-listing .sorting.form-select {
	height: 40px;
	line-height: 40px;
	padding: 0px 12px 0px 12px;
	margin-right: 2px;
}

.cms-element-product-listing .sorting.form-select:hover {
	outline: 2px solid var(--ahg-blau);
	cursor: pointer;
}

.cms-element-product-listing .sorting.form-select:focus-visible {
	box-shadow: 0 0 0 0.2rem var(--ahg-blau);
}

.cms-element-product-listing .sorting.form-select:focus { box-shadow: unset; }

/* ==========================================================================
   6. Custom CMS Blöcke & Startseite
   ========================================================================== */
.container-main:has(.um-startseite-kopfbereich) {
	padding-top: 0px;
	padding-bottom: 0px;
}

.um-katalog-konfigurator .cms-element-image .cms-image {
	height: 480px;
	object-fit: contain;
}

.um-startseite-produktslider,
.um-katalog-konfigurator {
	margin-bottom: 90px !important;
}

.um-hersteller { padding: 50px 0px; }

.um-startseite-produktslider .cms-block-product-slider {
	border-top: 1px solid var(--ahg-blau);
	border-bottom: 1px solid var(--ahg-blau);
}

.um-startseite-produktslider .card-body {
	padding: 20px !important;
	transition: all .25s ease-in-out;
}

.um-startseite-produktslider .product-cheapest-price,
.um-startseite-produktslider .product-price-unit,
.um-startseite-produktslider .product-variant-characteristics {
	min-height: 0; height: 0; margin: 0;
}

.um-startseite-produktslider .product-wishlist {
	display: flex;
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.um-startseite-produktslider .product-wishlist-action-circle {
	pointer-events: all;
	height: 46px;
	width: 46px;
	background: none;
	border-radius: 0;
	border-style: none;
	position: absolute;
	bottom: -48%;
	right: 0px;
	padding: 10px 0 10px 10px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

.um-startseite-produktslider .product-action a,
.um-startseite-produktslider .product-action .btn.btn-buy {
	display: none;
	width: calc(100% - 46px);
	height: 46px;
	justify-content: center;
	align-items: center;
	line-height: normal;
	font-size: var(--ahg-fliesstext);
	letter-spacing: 1px;
}

.um-startseite-produktslider .product-action,
.um-startseite-produktslider .product-variant-characteristics,
.um-startseite-produktslider .product-rating { display: none; }

.um-startseite-produktslider .product-image-wrapper {
	margin: 0 auto;
	width: 100%;
	height: unset;
	background-color: white;
	display: flex;
	aspect-ratio: 1/1;
}

.um-startseite-produktslider .product-info {
	display: flex;
	min-height: 145px;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: space-between;
	font-weight: 500;
	font-family: var(--family-head);
	font-size: var(--ahg-drittschrift);
}

.um-startseite-produktslider .product-price {
	font-size: var(--ahg-fliesstext);
	font-family: var(--family-normal);
	font-weight: 400;
	line-height: normal;
}

.um-startseite-produktslider .product-name {
	height: unset;
	font-size: inherit;
	line-height: normal;
	hyphens: auto;
	margin: 1.2rem 0rem;
}

.um-startseite-produktslider .card.product-box.box-minimal {
	background-color: transparent;
	border: 1px solid #ffffff00;
	transition: all .24s ease-in-out;
}

.um-startseite-produktslider .card.product-box.box-minimal:hover {
	background-color: #ffffff;
	border: 1px solid var(--ahg-blau);
}

.um-startseite-produktslider .card.product-box.box-minimal:hover .product-name {
	color: var(--ahg-blau);
}

.um-startseite-produktslider .icon>svg path { fill: var(--ahg-blau); }

.um-top-produkte .product-slider.has-nav { padding: 0px; }
.um-top-produkte .product-slider-controls-next.is-arrow-next-inside { right: 0; }
.um-top-produkte .product-slider-controls-prev.is-arrow-prev-inside { left: 0; }

.um-titel-sektion h1,
.um-titel-sektion h2 { hyphens: auto; }

.um-titel-sektion h1 { color: var(--ahg-blau); }

/* ==========================================================================
   7. Produktdetailseite
   ========================================================================== */
.gallery-slider-thumbnails-item.tns-item .gallery-slider-thumbnails-item-inner {
	border-color: transparent;
	background-color: #fff;
}

.gallery-slider-thumbnails-item.tns-item.tns-nav-active .gallery-slider-thumbnails-item-inner {
	border-color: var(--ahg-blau);
}

.gallery-slider button.base-slider-dot {
	border-radius: 0 !important;
	width: 5px !important;
	height: 5px !important;
}

.base-slider.gallery-slider .tns-outer { background-color: white; }
.gallery-slider-thumbnails-container.is-underneath .tns-outer { margin: 0; }

a.nav-link.product-detail-tab-navigation-link.active {
	color: var(--ahg-blau);
	background-color: unset;
	font-weight: 600;
}

a.nav-link.product-detail-tab-navigation-link {
	border-color: var(--ahg-dunkelgrau);
	font-size: var(--ahg-drittschrift);
	margin-right: 15px;
}

a.nav-link.product-detail-tab-navigation-link:hover { background-color: unset; }

.product-detail-tabs {
	background-color: #fff;
	padding: 50px;
}

/* ==========================================================================
   8. Sidebar & Filter
   ========================================================================== */
.cms-section-sidebar .cms-section-sidebar-sidebar-content {
	padding-left: 0px;
}

.cms-section-sidebar .cms-section-sidebar-sidebar-content .cms-block-category-navigation {
	background: #fff;
	border-radius: 0px;
	padding: 20px;
}

.cms-section-sidebar .cms-section-sidebar-sidebar-content .cms-block-category-navigation .cms-block-container {
	padding: 0 !important;
}

.um-filter-sidebar .filter-panel-item-toggle { background-color: #fff; }

.um-filter-sidebar .filter-panel-item-toggle[aria-expanded="true"] {
	background-color: var(--ahg-blau);
	color: #fff;
}

.um-filter-sidebar .filter-panel-item-toggle[aria-expanded="true"] svg { color: #fff; }

.um-filter-sidebar .filter-panel-item-dropdown {
	background-color: #fff;
	border: 1px solid var(--ahg-blau);
	border-radius: 0px;
}

.um-filter-sidebar span.filter-active { background-color: #fff; }

/* ==========================================================================
   9. Footer
   ========================================================================== */
.footer-main {
	color: #ffffff;
	background-color: var(--ahg-blau);
}

.footer-main a,
.footer-column-headline {
	color: #ffffff;
}

.footer-main a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.footer-bottom { background-color: var(--ahg-blau); }

.footer.social-media {
	width:2rem;
	height: 2rem;
}

.footer-logo-haendlerbund {
	max-width:170px;
	height: auto;
}


/* ==========================================================================
   10. UmStaticSlider
   ========================================================================== */
.um-swiper-inner img {
	/*max-width:100%;*/
	height: 100px !important;
}


/* ==========================================================================
   11. Media Queries
   ========================================================================== */
@media screen and (max-width: 1400px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 992px) {
	
	.nav-main { padding: 0px; }
	.nav-main .main-navigation-menu { min-height: unset; }
	.header-row { box-shadow: 0px 5px 8px #00000014; }
	.header-logo-col { margin: .5rem 0; position: relative; width: fit-content; align-self: center; }
	.header-logo-main {
		width: 80px;
		height: unset;
		position: relative;
		top: unset;
		left: unset;
		margin-left: unset;
	}
}

@media screen and (max-width: 768px) {
	.offcanvas {
		z-index: 2500;
	}
	#searchCollapse.collapse:not(.show) { display: none; }
}

@media screen and (max-width: 576px) {
	.modal {
		z-index: 2500;
	}
	.header-main {
		position: sticky;
		top: 0;
		width: 100%;
		z-index: 2222;
		padding-top: 0;
	}
	.header-main .header-row {
		justify-content: space-between;
		width: 100vw;
		background:white;
		padding-left: 10px;
		padding-right: 10px;
	}
	.header-row { padding: 0; }
	.header-logo-col { width: fit-content; flex: 1; }
	.header-logo-main { width: 80px; margin: 0; margin-bottom: 5px; }
	.header-actions-col { width: fit-content; padding: 20px; flex: 8; }
	.header-cart-btn.header-actions-btn { padding: 10px; margin-left: 0; }
	button#accountWidget { margin-left: 0; }
}

/* Für Bildschirme unter 1300px: Desktop-Menü verstecken, mobiles Burger-Menü anzeigen */
@media (max-width: 1299.98px) {
	.js-navigation-flyout-wrapper,
	.header-navigation {
		display: none !important;
	}

	.nav-main-toggle,
	.header-menu-col {
		display: block !important;
	}
}

/* Ab 1300px und größer: Desktop-Navigation anzeigen, mobiles Menü verstecken */
@media (min-width: 1300px) {
	.header-navigation {
		display: flex !important;
	}

	.nav-main-toggle {
		display: none !important;
	}
}