/* ==========================================================================
   Grafikus Coffeetec – Ecomall Child
   Werte (Farben, Breite, Galerie) kommen als CSS-Variablen aus „Grafikus Theme“.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Seitenbreite (Theme: 1410 px ab 1501 px Bildschirmbreite)
   -------------------------------------------------------------------------- */
@media (min-width: 1501px) {
	/* Inhaltsbreite = eingestellte Breite; dazu immer 50 px Seitenabstand wie beim Theme unter 1500 px –
	   sonst klebt das Logo zwischen 1501 px und (Breite + 100 px) am Fensterrand. */
	.container,
	.ts-header .header-sticky .container,
	.breadcrumb-title-wrapper .breadcrumb-content,
	.no-sidebar .single-post > *,
	body > .ts-search-result-container .search-content,
	.display-vertical-menu .top-slideshow,
	.elementor-page .page-container.has-1-sidebar,
	.elementor-page .page-container.has-2-sidebar,
	:is(.page-template-blog-template, body:not(.elementor-page), body.woocommerce-page.elementor-page) .page-container {
		max-width: calc(var(--gc-maxw) + 100px);
		padding-left: 50px;
		padding-right: 50px;
		box-sizing: border-box;
	}
	.no-stretch-content > ul.sub-menu > li {
		max-width: var(--gc-maxw);
	}
	body.boxed #page,
	body.boxed #page .header-sticky {
		max-width: calc(var(--gc-maxw) + 100px);
	}
	body .e-con {
		--content-width: min(var(--gc-maxw), calc(100vw - 100px - var(--scrollbarWidth, 0px)));
	}
	body.boxed .e-con {
		--content-width: min(calc(var(--gc-maxw) - 60px), calc(100vw - 160px - var(--scrollbarWidth, 0px)));
	}
	.elementor-section.elementor-section-boxed > .elementor-container {
		max-width: min(var(--gc-maxw), calc(100% - 100px));
	}
	/* Grafikus Explosionszeichnungen: Maschinen-Übersicht ([lm_machine_tiles]) ist im Plugin fest auf 1410 px zentriert */
	body .lm-machine-tiles {
		max-width: min(var(--gc-maxw), calc(100% - 100px));
	}
}

/* --------------------------------------------------------------------------
   2. Produktseite: Breite der Bildergalerie
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.woocommerce div.product div.images {
		width: var(--gc-gallery);
	}
	.woocommerce div.product div.summary {
		width: calc(100% - var(--gc-gallery));
	}
}

/* --------------------------------------------------------------------------
   3. Farbkonzept: Links dunkel, Hover mit gelbem Marker, Menü mit gelbem Strich
   -------------------------------------------------------------------------- */
/* Links im Fließtext: dunkelblau + Unterstrich, damit sie klar als Link erkennbar sind (Kontrast Blau auf Weiß ca. 6,9:1).
   Gilt auch für Elementor-Textblöcke im Seiteninhalt (nicht im Footer). Hover: gelber Marker. */
.gc-colors .entry-content a:not(.button):not(.elementor-button),
.gc-colors .woocommerce-product-details__short-description a,
.gc-colors .gc-section-body a:not(.button),
.gc-colors .site-content .elementor-widget-text-editor a:not(.button):not(.elementor-button),
.gc-colors .site-content .elementor-tab-content a:not(.button):not(.elementor-button) {
	color: var(--gc-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.gc-colors .entry-content a:not(.button):not(.elementor-button):hover,
.gc-colors .woocommerce-product-details__short-description a:hover,
.gc-colors .gc-section-body a:not(.button):hover,
.gc-colors .site-content .elementor-widget-text-editor a:not(.button):not(.elementor-button):hover,
.gc-colors .site-content .elementor-tab-content a:not(.button):not(.elementor-button):hover {
	color: var(--gc-dark);
	background-color: var(--gc-accent);
	text-decoration: none;
	/* 1.7.36: Markierung links und rechts etwas überstehen lassen (knapp ein Leerzeichen), ohne den Text zu verschieben */
	padding: 0 .2em;
	margin: 0 -.2em;
	border-radius: 2px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.gc-colors .ts-header .ts-menu nav > ul > li > a,
.gc-colors .ts-header nav > ul.menu > li > a {
	/* Unterstrich ist immer da, aber unsichtbar – beim Hover blendet er direkt in Gelb ein (kein schwarzer Zwischenschritt) */
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}
.gc-colors .ts-header .ts-menu nav > ul > li > a:hover,
.gc-colors .ts-header .ts-menu nav > ul > li.current-menu-item > a,
.gc-colors .ts-header nav > ul.menu > li > a:hover,
.gc-colors .ts-header nav > ul.menu > li.current-menu-item > a {
	color: var(--gc-dark);
	text-decoration: underline;
	text-decoration-color: var(--gc-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}
/* Obere schwarze Leiste: eigener Hover (sonst dunkle Schrift auf dunklem Grund und doppelte Unterstreichung) */
.gc-colors .ts-header .header-top nav > ul.menu > li > a,
.gc-colors .ts-header .header-top nav > ul.menu > li.current-menu-item > a {
	color: #fff;
	text-decoration: none;
}
.gc-colors .ts-header .header-top nav > ul.menu > li > a:hover,
.gc-colors .ts-header .header-top .header-store-notice a:hover {
	color: var(--gc-accent);
	text-decoration: none;
}
.gc-colors .ts-header .header-top .header-store-notice a {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.gc-colors .ts-header .header-top .header-store-notice a:hover {
	text-decoration: underline;
	text-decoration-color: var(--gc-accent);
}
/* Theme zeichnet unter Links im Hinweistext eine eigene Linie (::before/::after) – versetzt, deshalb aus */
.ts-header .header-top .header-store-notice a::before,
.ts-header .header-top .header-store-notice a::after {
	display: none !important;
}
/* 1.7.65: Fokusrahmen nur bei Bedienung mit der Tastatur (html.gc-kbd, siehe frontend.php) – nicht nach Mausklick/Tippen */
html.gc-kbd .gc-colors a:focus-visible,
html.gc-kbd .gc-colors button:focus-visible {
	outline: 2px solid var(--gc-dark);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Geradliniges Design
   -------------------------------------------------------------------------- */
.gc-straight .woocommerce div.product div.images .flex-viewport,
.gc-straight .woocommerce div.product div.images .flex-control-thumbs img,
.gc-straight .woocommerce div.product div.images img,
.gc-straight .product-wrapper .thumbnail-wrapper,
.gc-straight .product-wrapper .thumbnail-wrapper img,
.gc-straight .ts-summary-custom-content {
	border-radius: 4px;
}
.gc-straight .product-wrapper,
.gc-straight .product-wrapper .thumbnail-wrapper {
	box-shadow: none;
}
.gc-straight .woocommerce a.button,
.gc-straight .woocommerce button.button,
.gc-straight .woocommerce input.button {
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   5. Produktseite: Abschnitte statt Tabs
   -------------------------------------------------------------------------- */
.gc-product-sections {
	width: 100%;
	clear: both;
	margin: 0 0 var(--ts-section-gap, 60px);
}
.gc-jumpnav {
	border-top: 1px solid var(--gc-border);
	border-bottom: 1px solid var(--gc-border);
	background: #f6f6f6;
	margin-bottom: 8px;
}
.gc-jumpnav ul {
	list-style: none;
	margin: 0;
	padding: 0 4px;
	display: flex;
	flex-wrap: wrap;
	gap: 0 32px;
}
.gc-jumpnav li {
	margin: 0;
	padding: 0;
}
.gc-jumpnav a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	font-size: 14px;
	font-weight: 800;
	color: var(--gc-dark);
	text-decoration: none;
}
.gc-jumpnav a:hover {
	text-decoration: underline;
	text-decoration-color: var(--gc-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}
.gc-section {
	padding: 32px 0;
	border-bottom: 1px solid var(--gc-border);
	scroll-margin-top: 120px;
}
.gc-section:last-child {
	border-bottom: 0;
}
.gc-section-title {
	margin: 0 0 14px;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 800;
}
.gc-section-body {
	max-width: 1100px;
}
/* Doppelte Überschriften der Inhalte ausblenden */
.gc-section-body > h2:first-child,
.gc-section-body .woocommerce-Reviews-title {
	display: none;
}
.gc-section-body table.shop_attributes {
	max-width: 760px;
}

/* --------------------------------------------------------------------------
   6. Kategorie-Filter (Widget) und aktive Filter
   -------------------------------------------------------------------------- */
.gc-filter-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.gc-reset {
	font-size: 13px;
	font-weight: 700;
	color: var(--gc-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
.gc-reset:hover {
	background: var(--gc-accent);
	color: var(--gc-dark);
	text-decoration: none;
}
.gc-cat-filter,
.gc-cat-filter ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gc-cat-filter ul {
	padding-left: 26px;
}
.gc-cat-filter li {
	margin: 0;
	padding: 0;
}
.gc-cat-filter a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 34px;
	color: var(--gc-dark);
	text-decoration: none;
}
.gc-cat-filter a:hover .gc-name {
	text-decoration: underline;
}
.gc-cat-filter .gc-box {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border: 1.5px solid #8a8a8a;
	border-radius: 3px;
	background: #fff;
	position: relative;
}
.gc-cat-filter li.is-checked > a .gc-box {
	background: var(--gc-dark);
	border-color: var(--gc-dark);
}
.gc-cat-filter li.is-checked > a .gc-box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid var(--gc-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.gc-cat-filter li.is-checked > a .gc-name {
	font-weight: 700;
}
.gc-cat-filter .gc-count {
	color: #666;
	font-size: 13px;
}
.gc-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
}
.gc-active-label {
	font-size: 13px;
	color: #666;
	margin-right: 4px;
}
.gc-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid #c9c9c9;
	border-radius: 16px;
	background: #f6f6f6;
	font-size: 13px;
	font-weight: 600;
	color: var(--gc-dark);
	text-decoration: none;
}
.gc-chip:hover {
	background: var(--gc-accent);
	border-color: var(--gc-accent);
	color: var(--gc-dark);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   7. Startseite: Kacheln [grafikus_kacheln]
   -------------------------------------------------------------------------- */
.gc-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}
.gc-tile {
	display: flex;
	flex-direction: column;
	min-height: 420px;
	border-radius: 8px;
	overflow: hidden;
	color: var(--gc-dark);
	text-decoration: none;
}
a.gc-tile:hover {
	color: var(--gc-dark);
	text-decoration: none;
}
a.gc-tile:hover .gc-tile-link {
	background: var(--gc-accent);
	text-decoration: none;
}
.gc-tile-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px 28px 8px;
}
.gc-tile-label {
	align-self: flex-start;
	background: var(--gc-price);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.5;
	padding: 2px 10px;
	border-radius: 3px;
	letter-spacing: .02em;
}
.gc-tile-title {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
}
.gc-tile-link {
	align-self: flex-start;
	font-size: 14px;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.gc-tile-art {
	display: block;
	margin-top: auto;
	padding: 0 20px 20px;
}
.gc-tile-art svg {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   8. Startseite: Vorteile-Leiste [grafikus_vorteile]
   -------------------------------------------------------------------------- */
.gc-usps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	border: 1px solid var(--gc-border);
	border-radius: 8px;
}
.gc-usp {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 24px;
	color: var(--gc-dark);
	text-decoration: none;
}
.gc-usp + .gc-usp {
	border-left: 1px solid var(--gc-border);
}
a.gc-usp:hover .gc-usp-title {
	background: var(--gc-accent);
}
a.gc-usp,
a.gc-usp:hover {
	color: var(--gc-dark);
	text-decoration: none;
}
a.gc-usp .gc-usp-title::after {
	content: " \2192";
}
.gc-usp svg {
	flex: 0 0 30px;
}
.gc-usp-title {
	display: block;
	font-weight: 800;
	/* 1.7.35: Hover-Markierung nur so breit wie der Text, links und rechts leicht überstehend (ohne Verschieben) */
	width: fit-content;
	padding: 0 5px;
	margin: 0 -5px;
	border-radius: 2px;
}
.gc-usp-text {
	display: block;
	font-size: 13px;
	color: #666;
}

@media (max-width: 767px) {
	.gc-usp + .gc-usp {
		border-left: 0;
		border-top: 1px solid var(--gc-border);
	}
	.gc-tile {
		min-height: 0;
	}
	.gc-jumpnav ul {
		gap: 0 20px;
	}
}

/* --------------------------------------------------------------------------
   9. Produktseite: Kaufkasten und kompakter Kopf (Option „Produktseiten-Layout“)
   -------------------------------------------------------------------------- */
body.gc-pp div.product div.summary .product_title {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.25;
}
body.gc-pp div.product .summary .ts-product-ratings-stock {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}
body.gc-pp .gc-sku {
	font-size: 13px;
	color: #666;
}
body.gc-pp div.product .summary .meta-content .sku-wrapper {
	display: none;
}
body.gc-pp .gc-about-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 800;
}
body.gc-pp .gc-about .woocommerce-product-details__short-description {
	color: var(--gc-dark);
}
body.gc-pp div.product div.summary > div.gc-buybox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 12px;
	padding: 22px;
	border: 1px solid var(--gc-border);
	border-radius: 8px;
	background: #fff;
	box-sizing: border-box;
}
body.gc-pp div.product .gc-buybox > *:not(.price):not(.ts-variation-price):not(.ts-discount-percent) {
	width: 100%;
	flex: none;
	margin: 0;
}
body.gc-pp div.product .gc-buybox > .price,
body.gc-pp div.product .gc-buybox > .ts-variation-price {
	font-size: 2rem;
	line-height: 1;
	margin: 0;
}
body.gc-pp div.product .gc-buybox .single-product-buttons {
	padding-top: 14px;
	border-top: 1px solid var(--gc-border);
}

/* „inkl. MwSt.“ (Preis-Suffix) klein und grau statt groß und rot */
.woocommerce div.product .summary .price .woocommerce-price-suffix,
.woocommerce .products .price .woocommerce-price-suffix,
.gc-pp .woocommerce-price-suffix {
	font-size: 13px;
	font-weight: 400;
	color: #666;
}

/* --------------------------------------------------------------------------
   10. Marine-Dunkelblau: Hinweis- und Infoboxen
   -------------------------------------------------------------------------- */
.gc-colors .ts-summary-custom-content,
.gc-colors .woocommerce-info,
.gc-colors .woocommerce-message {
	background-color: color-mix(in srgb, var(--gc-navy) 8%, #ffffff);
	color: var(--gc-navy);
	border-color: var(--gc-navy);
}
.gc-colors .ts-summary-custom-content a,
.gc-colors .woocommerce-info a,
.gc-colors .woocommerce-message a {
	color: var(--gc-navy);
	font-weight: 700;
}

/* Kaufkasten: Innenabstand gegen die Theme-Regel „.summary > * { padding: 0 }“ durchsetzen */
body.gc-pp div.product div.summary > div.gc-buybox {
	padding: 22px;
}
/* Rabatt als kleines rotes Badge statt „(-20%)“ */
body.gc-pp div.product div.summary .gc-buybox > .ts-discount-percent {
	margin: 0;
	padding: 3px 8px;
	border-radius: 3px;
	background: var(--gc-price);
	color: #ffffff;
	font-size: 0;
	line-height: 1;
	align-self: center;
}
body.gc-pp div.product div.summary .gc-buybox > .ts-discount-percent > span {
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
}
body.gc-pp div.product div.summary .gc-buybox > .ts-discount-percent > span::before {
	content: "-";
}
body.gc-pp div.product div.summary .gc-buybox > .ts-discount-percent > span::after {
	content: " %";
}
body.gc-pp div.product div.summary .gc-buybox .price del {
	font-size: 15px;
	color: #666;
}

/* Abschnitte in der rechten Spalte */
body div.product div.summary > div.gc-product-sections {
	width: 100%;
	margin: 8px 0 0;
	line-height: 1.6;
}
body div.product div.summary > div.gc-product-sections .gc-section:first-of-type {
	padding-top: 24px;
}

/* --------------------------------------------------------------------------
   11. Abschnitte mit Textumfluss (Position „Beginnt rechts … läuft weiter“)
   Galerie links und Kaufbereich rechts stehen als Floats; die Abschnitte
   folgen danach und umfließen die Galerie, bis diese endet.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	body.gc-wrap div.product .product-images-summary {
		display: block;
	}
	body.gc-wrap div.product div.images {
		float: left;
		width: var(--gc-gallery);
		margin-right: 40px;
		margin-bottom: 24px;
	}
	body.gc-wrap div.product div.summary {
		float: right;
		width: calc(100% - var(--gc-gallery) - 40px);
		padding-left: 0;
		margin-bottom: 8px;
	}
	body.gc-wrap div.product .gc-product-sections {
		clear: right; /* unter den Kaufbereich, aber neben der Galerie beginnen */
		width: auto;
		margin: 0;
	}
	/* Kästen und Linien dürfen nicht unter die Galerie laufen → eigene Blockformatierung */
	body.gc-wrap .gc-product-sections .gc-jumpnav,
	body.gc-wrap .gc-product-sections .gc-section-title,
	body.gc-wrap .gc-product-sections table,
	body.gc-wrap .gc-product-sections #reviews {
		display: flow-root;
	}
	/* Listen umfließen mit: Aufzählungszeichen nach innen, damit sie nicht unter der Galerie liegen */
	body.gc-wrap .gc-product-sections ul,
	body.gc-wrap .gc-product-sections ol {
		list-style-position: inside;
		padding-left: 0;
	}
}
body.gc-wrap .gc-product-sections .gc-section {
	padding: 0;
	border-bottom: 0;
}
body.gc-wrap .gc-product-sections .gc-section-title {
	margin: 32px 0 12px;
	padding-top: 24px;
	border-top: 1px solid var(--gc-border);
}
body.gc-wrap .gc-product-sections .gc-section:first-of-type .gc-section-title {
	margin-top: 16px;
	padding-top: 0;
	border-top: 0;
}
body.gc-wrap .gc-product-sections .gc-section-body {
	max-width: none;
}

/* --------------------------------------------------------------------------
   12. Galerie scrollt mit (Position „Rechte Spalte, Galerie scrollt links mit“)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	body.gc-sticky div.product .product-images-summary {
		display: flex;
		align-items: flex-start;
		gap: 40px;
	}
	body.gc-sticky div.product .product-images-summary::after {
		display: none;
	}
	/* .woocommerce-product-gallery mit angeben: WooCommerce setzt sonst mit höherer Gewichtung position: relative */
	body.gc-sticky div.product div.images.woocommerce-product-gallery,
	body.gc-sticky div.product div.images {
		flex: 0 0 var(--gc-gallery);
		width: var(--gc-gallery);
		float: none;
		position: sticky;
		top: var(--gc-sticky-top-live, var(--gc-sticky-top));
		transition: top 200ms ease;
		z-index: 2;
	}
	body.gc-sticky div.product div.summary {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		float: none;
		padding-left: 0;
	}
}
/* Tags/Teilen am Ende der rechten Spalte */
body.gc-sticky div.product div.summary > .meta-content,
body.gc-sections-on div.product div.summary > div.gc-product-sections + .meta-content {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--gc-border);
}

/* --------------------------------------------------------------------------
   13. Reiterleiste über den Abschnitten (ersetzt die alte Sprungleiste)
   -------------------------------------------------------------------------- */
body div.product .gc-jumpnav {
	background: #ffffff;
	border-top: 1px solid var(--gc-border);
	border-bottom: 1px solid var(--gc-border);
	margin: 0 0 4px;
}
body div.product .gc-jumpnav ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 0 36px;
}
body div.product .gc-jumpnav li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
body div.product .gc-jumpnav li::before,
body div.product .gc-jumpnav li::after {
	content: none !important;
	display: none !important;
}
body div.product .gc-jumpnav a {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding-top: 4px;
	box-sizing: border-box;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--gc-dark);
	text-decoration: none;
	border-bottom: 4px solid transparent;
	transition: border-color 150ms ease;
}
body div.product .gc-jumpnav a:hover,
body div.product .gc-jumpnav a.is-active {
	border-bottom-color: var(--gc-accent);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   14. Vorschaubilder in einer Reihe mit Pfeilen
   -------------------------------------------------------------------------- */
body.gc-thumbrow div.product.gallery-layout-vertical.has-gallery div.images {
	padding-left: 0;
}
body.gc-thumbrow .gc-thumbs-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}
body.gc-thumbrow div.product div.images .gc-thumbs-row .flex-control-thumbs {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	margin: 0 !important;
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 10px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	list-style: none;
}
body.gc-thumbrow div.product div.images .gc-thumbs-row .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}
body.gc-thumbrow div.product div.images .gc-thumbs-row .flex-control-thumbs li {
	flex: 0 0 calc((100% - 40px) / 5);
	width: auto;
	margin: 0;
	list-style: none;
}
body.gc-thumbrow div.product div.images .gc-thumbs-row .flex-control-thumbs li img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	cursor: pointer;
}
body.gc-thumbrow .gc-thumbs-btn {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid #c9c9c9;
	border-radius: 50%;
	background: #ffffff;
	cursor: pointer;
	position: relative;
}
body.gc-thumbrow .gc-thumbs-btn::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border: solid var(--gc-dark);
	border-width: 0 2.5px 2.5px 0;
	transform: translate(-30%, -50%) rotate(135deg);
}
body.gc-thumbrow .gc-thumbs-next::before {
	transform: translate(-70%, -50%) rotate(-45deg);
}
body.gc-thumbrow .gc-thumbs-btn:hover {
	background: var(--gc-accent);
	border-color: var(--gc-accent);
}
/* Klick aufs Bild öffnet die Vollbild-Ansicht */
body.gc-thumbrow div.product div.images .woocommerce-product-gallery__image,
body.gc-thumbrow div.product div.images .zoomImg {
	cursor: zoom-in;
}

/* --------------------------------------------------------------------------
   15. Vollbild-Ansicht: deutliche Pfeile zum Blättern
   -------------------------------------------------------------------------- */
body .pswp__button--arrow--left,
body .pswp__button--arrow--right {
	width: 90px;
	height: 120px;
	margin-top: -60px;
	opacity: 1 !important;
	visibility: visible !important;
}
body .pswp__button--arrow--left::before,
body .pswp__button--arrow--right::before {
	content: "" !important;
	position: absolute;
	top: 34px !important;
	width: 52px !important;
	height: 52px !important;
	border-radius: 50%;
	background: #ffffff !important;
	background-image: none !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
body .pswp__button--arrow--left::before { left: 20px !important; }
body .pswp__button--arrow--right::before { right: 20px !important; left: auto !important; }
body .pswp__button--arrow--left::after,
body .pswp__button--arrow--right::after {
	content: "";
	position: absolute;
	top: 54px;
	width: 12px;
	height: 12px;
	border: solid #1a1a1a;
	border-width: 0 3px 3px 0;
}
body .pswp__button--arrow--left::after { left: 44px; transform: rotate(135deg); }
body .pswp__button--arrow--right::after { right: 44px; transform: rotate(-45deg); }
body .pswp__button--arrow--left:hover::before,
body .pswp__button--arrow--right:hover::before {
	background: var(--gc-accent) !important;
}
body .pswp__ui--one-slide .pswp__button--arrow--left,
body .pswp__ui--one-slide .pswp__button--arrow--right {
	display: none;
}

/* --------------------------------------------------------------------------
   16. „Vergleichen“ ausblenden (Option)
   -------------------------------------------------------------------------- */
body.gc-nocompare .button-in.compare,
body.gc-nocompare a.compare,
body.gc-nocompare .compare.button,
body.gc-nocompare .single-product-buttons .compare,
body.gc-nocompare .product-group-button > div.compare,
body.gc-nocompare .yith-woocompare-widget,
body.gc-nocompare .widget_yith-woocompare-widget {
	display: none !important;
}

/* 17. Schnellansicht und Lupen-Symbol ausblenden */
body.gc-noquickview .button-in.quickshop,
body.gc-noquickview a.quickshop,
body.gc-noquickview #ts-quickshop-modal {
	display: none !important;
}
body.gc-nozoomicon .woocommerce-product-gallery__trigger {
	display: none !important;
}

/* 18. Schmales Fenster: Abschnitte über die volle Breite (per JS unter Bild + Kaufkasten verschoben) */
body.gc-stacked div.product .gc-product-sections {
	width: 100%;
	clear: both;
	margin-top: 40px;
}
body.gc-stacked.gc-sticky div.product div.images.woocommerce-product-gallery,
body.gc-stacked.gc-sticky div.product div.images {
	position: relative;
	top: auto;
}

/* 19. Handy: Wichtiges zuerst – Preis/Warenkorb vor Explo-Hinweis und „Über diesen Artikel“ */
@media (max-width: 767px) {
	body.gc-pp div.product div.summary {
		display: flex;
		flex-direction: column;
	}
	body.gc-pp div.product div.summary > * {
		order: 0;
	}
	body.gc-pp div.product div.summary > .gc-buybox {
		order: 1;
	}
	body.gc-pp div.product div.summary > .lm-pp-hint {
		order: 2;
		margin-top: 0;
	}
	body.gc-pp div.product div.summary > .gc-about {
		order: 3;
	}
	body.gc-pp div.product div.summary > .gc-product-sections {
		order: 4;
	}
	body.gc-pp div.product div.summary > .meta-content {
		order: 5;
	}
	body.gc-pp div.product div.summary > div.gc-buybox {
		margin-bottom: 18px;
	}
}

/* 20. Startseite oben: drei Kacheln [grafikus_hero] */
.gc-hero {
	display: grid;
	grid-template-columns: 1.45fr 1.15fr 0.9fr;
	gap: 24px;
	align-items: stretch;
}
.gc-hero-tile {
	min-height: var(--gc-hero-h, 0px);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
}
.gc-hero-welcome {
	padding: 40px 40px 0;
	color: #1a1a1a;
}
.gc-hero-welcome-text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
body .gc-hero .gc-hero-title {
	margin: 0;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.12;
	color: #1a1a1a;
	max-width: 360px;
}
.gc-hero-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	max-width: 420px;
}
.gc-hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 2px;
}
body .gc-hero a.gc-hero-btn {
	height: 46px;
	padding: 0 24px;
	display: inline-flex;
	align-items: center;
	border-radius: 23px;
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	box-sizing: border-box;
}
body .gc-hero a.gc-hero-btn--dark {
	background: #1a1a1a;
	color: #fff;
}
body .gc-hero a.gc-hero-btn--light {
	background: #fff;
	color: #1a1a1a;
	border: 1px solid #1a1a1a;
}
body .gc-hero a.gc-hero-btn:hover {
	filter: brightness(1.15);
	text-decoration: none;
}
.gc-hero-welcome-img {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 82%;
	max-width: 600px;
	height: auto;
	object-fit: contain;
	object-position: right bottom;
	display: block;
	pointer-events: none;
}
.gc-hero-picker {
	overflow: visible;
}
.gc-hero-picker .lm-mp--card {
	min-height: var(--gc-hero-h, 0px);
}
.gc-hero-update {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-top: 40px;
	color: #1a1a1a;
	text-decoration: none;
}
a.gc-hero-update:hover {
	text-decoration: none;
	color: #1a1a1a;
}
.gc-hero-badge {
	background: var(--gc-price, #dd2831);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	padding: 3px 10px;
	border-radius: 3px;
	letter-spacing: .03em;
}
.gc-hero-update-title {
	margin: 12px 0 4px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
}
.gc-hero-update-link {
	font-size: 15px;
	font-weight: 800;
	text-decoration: underline;
	text-decoration-color: var(--gc-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
}
.gc-hero-update-img {
	width: 100%;
	max-width: 380px;
	height: auto;
	display: block;
	margin-top: auto;
}
/* Ab 1200 px: Höhe richtet sich nach der Maschinen-Kachel, Bild und Willkommen strecken sich nicht mehr */
@media (min-width: 1200px) {
	.gc-hero-welcome {
		padding: 32px 36px;
	}
	.gc-hero-picker .lm-mp--card {
		padding: 24px 26px 22px;
		gap: 12px;
		box-sizing: border-box;
	}
	.gc-hero-update {
		padding-top: 28px;
	}
	/* Laptop-Bild skaliert mit der Kachel: unten bündig, mindestens kachelbreit,
	   bei schmalen hohen Kacheln bis 112 % der Breite (Seiten minimal beschnitten). */
	.gc-hero .gc-hero-update {
		container-type: size;
	}
	.gc-hero-update > *:not(.gc-hero-update-img) {
		position: relative;
		z-index: 1;
	}
	.gc-hero .gc-hero-update-img {
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: clamp(100cqw, 100cqh, 112cqw);
		max-width: none;
		height: auto;
		margin: 0;
		z-index: 0;
	}
}
@media (max-width: 1199px) {
	.gc-hero {
		grid-template-columns: 1fr 1fr;
	}
	.gc-hero-welcome {
		grid-column: 1 / -1;
		min-height: 0;
		padding-bottom: 40px;
	}
	.gc-hero-welcome-img {
		width: auto;
		height: 100%;
		max-height: 290px;
	}
}
@media (max-width: 767px) {
	.gc-hero {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.gc-hero-tile,
	.gc-hero-picker .lm-mp--card {
		min-height: 0;
	}
	.gc-hero-welcome {
		padding: 24px 20px 0;
	}
	body .gc-hero .gc-hero-title {
		font-size: 26px;
	}
	.gc-hero-welcome-img {
		position: static;
		width: 100%;
		max-width: 420px;
		height: auto;
		margin: 12px -20px 0 auto;
	}
	.gc-hero-update {
		padding-top: 24px;
	}
	.gc-hero-update-title {
		font-size: 26px;
	}
}

/* ==========================================================================
   21. Startseite – Kachel-Design „Neu“ (ab 1.7.0, umschaltbar in den Einstellungen)
   Alles hier greift nur mit .gc-hero--v2 / .gc-usps--v2 – „Vorher“ = Stand 1.6.5.
   ========================================================================== */
/* Buttons wie im restlichen Shop: Ecken 4 px, Großbuchstaben */
body .gc-hero--v2 a.gc-hero-btn,
body .gc-hero--v2 .lm-mp a.lm-mp-go {
	height: 46px;
	padding: 0 22px;
	border-radius: 4px;
	border: 1px solid var(--gc-btn, #ffe600);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	filter: none;
	transition: background-color .15s, color .15s, border-color .15s;
}
/* Gelb (wie „Suchen“, „In den Warenkorb“): Hover weiß mit dunklem Rand */
body .gc-hero--v2 a.gc-hero-btn--dark,
body .gc-hero--v2 .lm-mp a.lm-mp-go {
	background: var(--gc-btn, #ffe600);
	border-color: var(--gc-btn, #ffe600);
	color: var(--gc-btn-fg, #1a1a1a);
}
body .gc-hero--v2 a.gc-hero-btn--dark:hover,
body .gc-hero--v2 .lm-mp a.lm-mp-go:hover {
	background: #fff;
	border-color: var(--gc-dark);
	color: var(--gc-dark);
	filter: none;
}
/* Weiß mit Rand (wie die Produkt-Buttons): Hover dunkel */
body .gc-hero--v2 a.gc-hero-btn--light {
	background: #fff;
	border-color: var(--gc-dark);
	color: var(--gc-dark);
}
body .gc-hero--v2 a.gc-hero-btn--light:hover {
	background: var(--gc-btn, #ffe600);
	border-color: var(--gc-dark);
	color: var(--gc-btn-fg, #1a1a1a);
	filter: none;
}
/* Textlinks: dunkel, Hover unterstrichen */
.gc-hero--v2 .gc-hero-update-link {
	text-decoration: none;
	color: var(--gc-dark);
}
.gc-hero--v2 a.gc-hero-update:hover .gc-hero-update-link {
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Vorteile-Leiste: Hover gelb hinterlegt (1.7.4, wie vor 1.7.0) */
.gc-usps--v2 a.gc-usp:hover .gc-usp-title {
	background: var(--gc-accent);
	text-decoration: none;
}

@media (min-width: 1200px) {
	/* Willkommen schmaler, Maschinen breiter → 2 Zeilen Maschinen, flachere Kacheln */
	.gc-hero.gc-hero--v2 {
		grid-template-columns: 1.1fr 1.25fr .9fr;
	}
	.gc-hero--v2 .gc-hero-welcome {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 32px 40px;
	}
	body .gc-hero--v2 .gc-hero-title {
		font-size: 38px;
		max-width: none;
	}
	.gc-hero--v2 .gc-hero-text {
		max-width: 460px;
	}
	/* Webshop-Kachel: Text oben links, Laptop groß unten rechts, rechts angeschnitten */
	.gc-hero--v2.gc-hero .gc-hero-update {
		align-items: flex-start;
		text-align: left;
		padding: 28px 30px;
	}
	.gc-hero--v2 .gc-hero-update-title {
		font-size: 30px;
		margin: 12px 0 6px;
	}
	.gc-hero--v2.gc-hero .gc-hero-update-img {
		left: auto;
		right: -18cqw;
		transform: none;
		width: clamp(110cqh, 118cqw, 150cqh);
	}
}
@media (min-width: 1200px) and (max-width: 1499px) {
	/* Mittlere Breiten: alte Aufteilung, sonst wird „Willkommen“ zu schmal */
	.gc-hero.gc-hero--v2 {
		grid-template-columns: 1.45fr 1.15fr .9fr;
	}
	body .gc-hero--v2 .gc-hero-title {
		font-size: 34px;
	}
}

/* 1.7.1: einheitliche Schriften in den drei Kacheln (nur Kachel-Design „Neu“) */
body .gc-hero--v2 .gc-hero-title,
body .gc-hero--v2 .lm-mp-title,
body .gc-hero--v2 .gc-hero-update-title {
	font-family: inherit;
	font-weight: 800;
	color: var(--gc-dark);
	letter-spacing: .02em;
	line-height: 1.15;
	text-transform: none;
}
body .gc-hero--v2 .lm-mp-title,
body .gc-hero--v2 .gc-hero-update-title {
	font-size: 28px;
}
.gc-hero--v2 .gc-hero-text,
.gc-hero--v2 .lm-mp-sub {
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: .02em;
}
.gc-hero--v2 .lm-mp-sub {
	color: #555;
}
@media (max-width: 767px) {
	body .gc-hero--v2 .lm-mp-title,
	body .gc-hero--v2 .gc-hero-update-title {
		font-size: 24px;
	}
}


/* ==========================================================================
   22. Korrekturen 1.7.2
   ========================================================================== */
/* Kacheln dürfen nie breiter als der Bildschirm werden (Handy: Maschinenliste scrollt waagerecht) */
.gc-hero > * {
	min-width: 0;
}
@media (max-width: 1199px) {
	.gc-hero.gc-hero {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.gc-hero.gc-hero {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Merkliste: YITH-Herz ausblenden – das Theme zeigt sein eigenes Herz-Symbol (sonst zwei übereinander) */
.yith-wcwl-add-to-wishlist .yith-wcwl-icon-svg,
.yith-wcwl-add-to-wishlist i.yith-wcwl-icon {
	display: none !important;
}

/* Suche: Hinweis „Suche zurücksetzen“ über den Ergebnissen */
.gc-search-reset {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 1px solid var(--gc-border);
	border-radius: 8px;
	background: #fafafa;
	font-size: 14px;
}
.gc-search-reset strong {
	font-weight: 800;
}
body a.gc-search-reset-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 14px;
	line-height: 1.3;
	text-align: center;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--gc-dark);
	border-radius: 4px;
	background: #fff;
	color: var(--gc-dark);
	font-weight: 800;
	font-size: 13px;
	text-decoration: none;
}
body a.gc-search-reset-link:hover {
	background: var(--gc-btn, #ffe600);
	color: var(--gc-btn-fg, #1a1a1a);
	text-decoration: none;
}

/* Kategorie-Filter: „Alle Produkte“ als Link oben */
.gc-filter-all {
	display: block;
	margin: 0 0 6px;
	font-weight: 800;
	color: var(--gc-dark);
	text-decoration: none;
}
.gc-filter-all.is-current,
a.gc-filter-all:hover {
	text-decoration: underline;
	text-decoration-color: var(--gc-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

/* Lagerstatus „Verfügbar bei Nachlieferung“ (Varianten) */
.availability.available-on-backorder {
	color: #9a6b00;
	border-color: #e0b44c;
}

/* Blog-Übersicht (1.7.2) */
.gc-blog {
	max-width: var(--gc-maxw, 1600px);
	margin: 0 auto;
	padding-bottom: 80px;
}
.gc-blog-head {
	margin: 10px 0 30px;
}
body .gc-blog .gc-blog-title {
	margin: 0 0 8px;
	font-size: 38px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: .02em;
	color: var(--gc-dark);
}
.gc-blog-intro {
	max-width: 760px;
	color: #555;
	font-size: 16px;
	line-height: 1.6;
}
.gc-blog-intro p {
	margin: 0;
}
.gc-blog-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}
body a.gc-blog-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 16px;
	border: 1px solid #d6d6d6;
	border-radius: 19px;
	background: #fff;
	color: var(--gc-dark);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
body a.gc-blog-chip span {
	font-weight: 500;
	color: #777;
}
body a.gc-blog-chip:hover {
	border-color: var(--gc-dark);
	text-decoration: none;
	color: var(--gc-dark);
}
body a.gc-blog-chip.is-on {
	background: var(--gc-btn, #ffe600);
	border-color: var(--gc-dark);
}
.gc-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}
.gc-blog-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--gc-border);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	margin: 0;
	transition: box-shadow .2s, border-color .2s;
}
.gc-blog-card:hover {
	border-color: #cfcfcf;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
}
.gc-blog-card-img {
	display: block;
	aspect-ratio: var(--gc-blog-ratio, 16 / 9);
	background: #f3f3f3;
	overflow: hidden;
}
.gc-blog-card-img .gc-blog-frame {
	transition: transform .4s;
}
.gc-blog-card:hover .gc-blog-card-img .gc-blog-frame {
	transform: scale(1.03);
}
/* Format-Rahmen für Beitragsbilder (Übersicht und Beitrag) */
.gc-blog-frame {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #f3f3f3;
}
.gc-blog-frame img.gc-blog-img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-width: none;
}
.gc-blog-frame.is-fit img.gc-blog-img {
	object-fit: contain;
}
.gc-blog-img-bg {
	position: absolute;
	inset: -24px;
	background-size: cover;
	background-position: center;
	filter: blur(18px) saturate(.9);
	opacity: .55;
}
/* Beitragsseite: Titelbild über die volle Inhaltsbreite im Querformat */
.single-post .entry-header figure.thumbnail {
	width: 100%;
	max-width: none;
	aspect-ratio: var(--gc-blog-ratio, 16 / 9);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 24px;
}
.single-post .entry-header figure.thumbnail .gc-blog-frame {
	border-radius: 8px;
}
.gc-blog-card-noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f7ebc1, #bed7dc);
}
.gc-blog-card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 22px;
	flex: 1;
}
.gc-blog-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 13px;
	color: #777;
}
body a.gc-blog-card-cat {
	font-weight: 800;
	color: var(--gc-dark);
	text-transform: uppercase;
	letter-spacing: .04em;
	text-decoration: none;
}
body .gc-blog .gc-blog-card-title {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .01em;
}
body .gc-blog-card-title a {
	color: var(--gc-dark);
	text-decoration: none;
}
body .gc-blog-card-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--gc-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}
.gc-blog-card-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #444;
}
body a.gc-blog-card-more {
	margin-top: auto;
	font-size: 14px;
	font-weight: 800;
	color: var(--gc-dark);
	text-decoration: underline;
	text-decoration-color: var(--gc-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
}
.gc-blog-pagination {
	margin-top: 40px;
}
.gc-blog-pagination .nav-links {
	display: flex;
	gap: 6px;
	justify-content: center;
}
.gc-blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--gc-border);
	border-radius: 4px;
	color: var(--gc-dark);
	font-weight: 700;
	text-decoration: none;
}
.gc-blog-pagination .page-numbers.current {
	background: var(--gc-btn, #ffe600);
	border-color: var(--gc-dark);
}
@media (max-width: 1023px) {
	.gc-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}
@media (max-width: 640px) {
	.gc-blog-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	body .gc-blog .gc-blog-title {
		font-size: 28px;
	}
}

/* Footer-Linklisten auf dem Handy: zwei Spalten, Zeilen bündig (auch die Menü-Spalte [gsf_menu]) */
@media (max-width: 767px) {
	.footer-container .elementor-icon-list-items,
	.footer-container nav.gsf-menu ul.gsf-menu-list {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		column-gap: 30px;
		row-gap: 8px;
	}
	.footer-container .elementor-icon-list-items > li,
	.footer-container nav.gsf-menu ul.gsf-menu-list li {
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}

/* Startseiten-Kacheln mit freigestelltem Bild (Klasse „gc-tile-contain“ am Banner-Widget):
   Bild immer ganz in einem eigenen Bildbereich unten (52 % Höhe, 6 % Rand) – auch breite Bilder
   werden nie angeschnitten. */
.gc-tile-contain .ts-banner .banner-wrapper::before {
	top: auto !important;
	bottom: 7% !important;
	left: 6% !important;
	right: 6% !important;
	width: auto !important;
	height: 52% !important;
	background-size: contain !important;
	background-position: center bottom !important;
	background-repeat: no-repeat !important;
}
.gc-tile-contain.gc-tile-grey .ts-banner .banner-wrapper { background-color: #eef0f2; }
.gc-tile-contain.gc-tile-beige .ts-banner .banner-wrapper { background-color: #ece8da; }
.gc-tile-contain.gc-tile-blue .ts-banner .banner-wrapper { background-color: #e4e5eb; }
.gc-tile-contain.gc-tile-lilac .ts-banner .banner-wrapper { background-color: #e3e0ea; }

/* 1.7.18: schmale Ansicht – Willkommen mit Abstand unter den Buttons, Webshop-Kachel nicht unnötig hoch */
@media (max-width: 767px) {
	.gc-hero .gc-hero-welcome {
		padding-bottom: 24px;
	}
}
@media (max-width: 1199px) {
	.gc-hero .gc-hero-update {
		padding-bottom: 0;
	}
	.gc-hero .gc-hero-update-img {
		width: auto;
		max-width: 100%;
		max-height: 240px;
		margin: 16px auto 0;
		object-fit: contain;
		object-position: center bottom;
	}
}

/* Footer-Links: Hover wie im Hauptmenü – Schrift bleibt dunkel, gelber Strich darunter
   (gelbe Schrift auf Weiß wäre nicht lesbar, Kontrast 1,27:1). */
footer.footer-container .elementor-icon-list-item a .elementor-icon-list-text,
footer.footer-container nav.gsf-menu ul.gsf-menu-list a,
footer.footer-container .elementor-widget-text-editor a {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	transition: text-decoration-color .15s ease;
}
footer.footer-container .elementor-icon-list-item a:hover .elementor-icon-list-text,
footer.footer-container .elementor-icon-list-item a:focus-visible .elementor-icon-list-text,
footer.footer-container nav.gsf-menu ul.gsf-menu-list a:hover,
footer.footer-container nav.gsf-menu ul.gsf-menu-list a:focus-visible,
footer.footer-container .elementor-widget-text-editor a:hover,
footer.footer-container .elementor-widget-text-editor a:focus-visible {
	color: var(--gc-dark, #1a1a1a) !important;
	text-decoration-color: var(--gc-accent, #ffe600);
}
footer.footer-container .elementor-icon-list-item a:hover .elementor-icon-list-icon i,
footer.footer-container .elementor-icon-list-item a:hover .elementor-icon-list-icon svg {
	color: var(--gc-dark, #1a1a1a) !important;
	fill: var(--gc-dark, #1a1a1a) !important;
}

/* Produkt-Karussells: Punkte-Navigation mit Abstand zur Karte, damit der Hover-Rahmen der Karte nicht auf den Punkten liegt. */
.ts-product-wrapper .products.swiper > .swiper-pagination {
	margin-top: 24px !important;
}

/* Wunschliste: Listenname („Meine Wunschliste“) doppelt den Seitentitel – ausblenden. */
.yith-wcwl-form .wishlist-title-container { display: none !important; }

/* Kachelfarben Startseite (1.7.33): Farben unter Grafikus Theme → Farben einstellbar. */
.gc-tile-contain.gc-tile-c1 .ts-banner .banner-wrapper { background-color: var(--gc-tile-1, #eaeced); }
.gc-tile-contain.gc-tile-c2 .ts-banner .banner-wrapper { background-color: var(--gc-tile-2, #fdf6d6); }
.gc-tile-contain.gc-tile-c3 .ts-banner .banner-wrapper { background-color: var(--gc-tile-3, #e0e8f0); }
.gc-tile-contain.gc-tile-c4 .ts-banner .banner-wrapper { background-color: var(--gc-tile-4, #f7e0e2); }

/* Aufzählungen im Fließtext (1.7.37): Folgezeilen bündig mit dem Textanfang (hängender Einzug), nicht unter dem Punkt. */
.site-content .elementor-widget-text-editor ul,
.site-content .elementor-tab-content ul,
.single-post .entry-content ul,
.page .entry-content > ul {
	padding-left: 1.2em;
	margin-left: 0;
}
.site-content .elementor-widget-text-editor ol,
.site-content .elementor-tab-content ol,
.single-post .entry-content ol,
.page .entry-content > ol {
	padding-left: 1.5em;
	margin-left: 0;
}
.site-content .elementor-widget-text-editor :is(ul, ol) > li,
.site-content .elementor-tab-content :is(ul, ol) > li,
.single-post .entry-content :is(ul, ol) > li,
.page .entry-content > :is(ul, ol) > li {
	list-style-position: outside;
	padding-left: .2em;
}

/* 1.7.39: schmale Ansicht – Webshop-Kachel: leeren Bereich oben im Bild abschneiden (Option „Bild oben beschneiden“) */
@media (max-width: 1199px) {
	.gc-hero .gc-hero-update-img.gc-hu-crop {
		width: 100%;
		max-width: 340px;
		max-height: none;
		height: auto;
		aspect-ratio: var(--gc-hu-ar);
		object-fit: cover;
		object-position: center bottom;
	}
}

/* 1.7.40: lange Zeichenketten ohne Leerzeichen (z. B. „*****“-Trennlinien und „____“-Felder in AGB/Widerrufsformular)
   umbrechen statt die Seite auf dem Handy seitlich zu verbreitern. */
.site-content .elementor-widget-text-editor,
.site-content .elementor-tab-content,
.single-post .entry-content,
.page .entry-content {
	overflow-wrap: anywhere;
}

/* Sprachwechsler in der Kopfzeile (1.7.41) */
.gc-lang {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-right: 18px;
}
.gc-lang-item {
	display: inline-flex;
	line-height: 0;
	border-radius: 3px;
	padding: 3px;
	transition: opacity .15s, filter .15s, background-color .15s;
}
.gc-lang-item img {
	width: 21px;
	height: 14px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
	object-fit: cover;
}
/* 1.7.95: beide Flaggen klar und farbig – keine abgeschwächte Darstellung der nicht aktiven Sprache */
a.gc-lang-item {
	opacity: 1;
	filter: none;
}
a.gc-lang-item:hover,
a.gc-lang-item:focus-visible {
	opacity: 1;
	filter: none;
	background-color: var(--gc-accent, #ffe600);
}
.gc-lang--mobile {
	display: none;
	margin-right: 10px;
}
@media (max-width: 767px) {
	.gc-lang--mobile {
		display: flex;
	}
}

/* Schwebender Sprachwechsler von TranslatePress (unten rechts): hell und passend zum Shop statt schwarzer Kasten */
#trp-floater-ls.trp-language-switcher-container {
	background: #fff !important;
	border: 1px solid var(--gc-border, #e5e5e5) !important;
	border-bottom: 0 !important;
	border-radius: 8px 8px 0 0 !important;
	box-shadow: 0 -2px 14px rgba(0, 0, 0, .08) !important;
	font-family: inherit !important;
}
#trp-floater-ls.trp-language-switcher-container a,
#trp-floater-ls.trp-language-switcher-container a:hover {
	color: var(--gc-dark, #1a1a1a) !important;
	font-weight: 600;
}
#trp-floater-ls .trp-language-wrap a:not(.trp-ls-disabled-language):hover {
	background: var(--gc-accent, #ffe600) !important;
}
#trp-floater-ls .trp-flag-image {
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

/* 1.7.46: Startseiten-Kachel mit Foto (Klasse „gc-tile-photo“ am Banner-Widget):
   Foto auf volle Kachelbreite. Die senkrechte Lage setzt assets/tile-photo.js so, dass das Motiv erst unter
   dem Text beginnt (--gc-photo-y); ohne Skript unten bündig. Motiv-Anfang im Foto: --gc-photo-motiv (Anteil der Höhe). */
.gc-tile-photo .ts-banner .banner-wrapper {
	--gc-photo-motiv: .44;
	overflow: hidden;
	background: linear-gradient(to bottom, #b4b3b1 0%, #bdb9b6 50%, #e7e2e1 75%, #f4f3f1 100%) !important;
}
.gc-tile-photo .ts-banner .banner-wrapper::before {
	top: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	height: auto !important;
	background-size: 100% auto !important;
	background-position: center var(--gc-photo-y, bottom) !important;
	background-repeat: no-repeat !important;
}

/* 1.7.48: Kachel mit eingepasstem Motiv („gc-tile-contain gc-tile-fit“): Motiv ohne Beschnitt zwischen Text und Rand,
   mittig unten. Oberkante setzt tile-photo.js (--gc-fit-top), Rand/Abstand aus den Child-Theme-Einstellungen. */
.gc-tile-contain.gc-tile-fit .ts-banner .banner-wrapper::before{top:var(--gc-fit-top,45%)!important;bottom:var(--gc-fit-pad,14px)!important;left:var(--gc-fit-pad,14px)!important;right:var(--gc-fit-pad,14px)!important;width:auto!important;height:auto!important;background-size:contain!important;background-position:center bottom!important;background-repeat:no-repeat!important}

/* 1.7.49: Kategorien-Menü-Symbol (links neben „Startseite“) in der Akzentfarbe statt Schwarz */
.vertical-menu-heading .icon::before{background:var(--gc-accent,#ffe600)!important;color:var(--gc-dark,#1a1a1a)!important}
/* 1.7.49: Kopfzeile auf Tablets (iPad): Kategorie-Auswahl der Suche breit genug für „Alle Kategorien“;
   unter 1024 px ohne Kategorie-Auswahl (sonst wird „Produkte suchen“ abgeschnitten); Hauptmenü etwas enger,
   damit Flaggen und Merkliste in derselben Zeile bleiben. */
@media (min-width:1024px){.ts-search-by-category select.select-category{min-width:172px!important}}
@media (max-width:1023px){.ts-search-by-category select.select-category{display:none!important}.header-bottom ul.menu{column-gap:10px!important}.header-bottom ul.menu > li > a{font-size:14px!important}.header-bottom .container{column-gap:16px!important}.header-bottom .menu-wrapper{column-gap:12px!important}}
@media (max-width:860px){.header-bottom ul.menu{column-gap:7px!important}.header-bottom ul.menu > li > a{font-size:13px!important}.header-bottom .menu-wrapper{column-gap:10px!important}}

/* 1.7.50: Startseite „Neuer Webshop“-Kachel (ab 1200 px): Bild ohne Beschnitt zwischen Text und Kachelrand einpassen
   (freigestelltes PNG), mittig unten. Oberkante setzt tile-photo.js (--gc-hu-top); Rand/Abstand wie „gc-tile-fit“. */
@media (min-width:1200px){
	.gc-hero--v2.gc-hero .gc-hero-update-img{top:var(--gc-hu-top,45%)!important;left:var(--gc-fit-pad,14px)!important;right:auto!important;bottom:auto!important;width:calc(100% - 2 * var(--gc-fit-pad,14px))!important;height:calc(100% - var(--gc-hu-top,45%) - var(--gc-fit-pad,14px))!important;max-width:none!important;transform:none!important;object-fit:contain!important;object-position:center bottom!important}
}

/* 1.7.51: Seitenleisten (Warenkorb, Filter, Menü) auf iPad/iPhone: Höhe = sichtbarer Bildschirm (dvh statt Layout-Höhe),
   damit „Warenkorb anzeigen“ und „Kasse“ immer sichtbar sind; die Artikelliste scrollt bei Bedarf innerhalb. */
@supports (height: 100dvh) {
	.ts-floating-sidebar .ts-sidebar-content{bottom:auto!important;height:100dvh!important;max-height:100dvh!important}
	.admin-bar .ts-floating-sidebar .ts-sidebar-content{height:calc(100dvh - 32px)!important;max-height:calc(100dvh - 32px)!important}
	@media screen and (max-width:782px){.admin-bar .ts-floating-sidebar .ts-sidebar-content{height:calc(100dvh - 46px)!important;max-height:calc(100dvh - 46px)!important}}
}
.ts-floating-sidebar .ts-sidebar-content{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))!important}
#ts-shopping-cart-sidebar .cart-wrapper,#ts-shopping-cart-sidebar .cart-content,#ts-shopping-cart-sidebar .cart_list{min-height:0!important}
#ts-shopping-cart-sidebar .dropdown-footer{flex:0 0 auto!important}

/* 1.7.52: Tests Handy/iPad
   – Handy: Kopfzeile in einer Zeile (Logo kleiner), dadurch deutlich niedriger, auch beim Mitscrollen */
@media only screen and (max-width:767px){
	.ts-header .header-middle .container{flex-wrap:nowrap!important;column-gap:10px!important;align-items:center!important}
	.ts-header .header-middle .header-left{flex:0 1 auto!important;min-width:0}
	.ts-header .header-middle .logo-wrapper img,.ts-header .header-middle .logo img{max-width:110px!important;width:110px!important;height:auto!important}
	.ts-header .header-middle .header-right{flex:0 0 auto!important;margin-left:auto}
	/* Sprachauswahl unten links klein (nur Flagge), damit sie keine Buttons verdeckt */
	#trp-floater-ls{left:8px!important;right:auto!important;width:auto!important;min-width:0!important;max-width:none!important}
	#trp-floater-ls #trp-floater-ls-current-language a{font-size:0!important;padding:10px 12px!important}
	#trp-floater-ls #trp-floater-ls-current-language a img{margin:0!important}
}
/* – iPad (768–1023 px): Shop-Filter wie auf dem Handy über „Filtern“, Produkte über die volle Breite */
@media only screen and (min-width:768px) and (max-width:1023px){
	body.woocommerce.archive .filter-widget-area-button{display:block!important;order:-1}
	body.woocommerce.archive #main-content{width:100%!important}
	#main-content.show-filter-sidebar{z-index:994}
	#main-content.show-filter-sidebar .before-loop-wrapper{position:static}
	body.woocommerce.archive #left-sidebar,body.woocommerce.archive #right-sidebar{position:fixed!important;inset:0;width:100vw!important;max-width:420px;overflow:hidden auto;display:none!important;margin:0!important;padding:0!important;z-index:99992;background:var(--ts-main-bg,#fff)}
	body.woocommerce.archive.admin-bar #left-sidebar,body.woocommerce.archive.admin-bar #right-sidebar{top:32px}
	body.woocommerce.archive #left-sidebar.active,body.woocommerce.archive #right-sidebar.active{display:block!important;animation-duration:150ms;animation-fill-mode:both;animation-name:animation_fade}
	body.woocommerce.archive :is(#left-sidebar,#right-sidebar) .close{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;width:61px;height:54px;border-left:1px solid #fff;position:static}
	body.woocommerce.archive :is(#left-sidebar,#right-sidebar) .sidebar-header{display:flex;flex-flow:wrap;background:#efefef;align-items:center;margin-bottom:30px}
	body.woocommerce.archive :is(#left-sidebar,#right-sidebar) .product-on-sale-form{display:block;min-height:0;background:transparent;color:inherit;letter-spacing:0;flex:1 1 0%;padding:16px 30px}
	body.woocommerce.archive :is(#left-sidebar,#right-sidebar) > aside{overflow:hidden;gap:0}
	body.woocommerce.archive #left-sidebar .widget-container{padding:0 30px}
	/* Startseite: Vorteile untereinander statt 2 + 1 */
	.gc-usps{grid-template-columns:1fr!important}
	.gc-usp + .gc-usp{border-left:0!important;border-top:1px solid var(--gc-border)}
}
/* Filter-Leiste (Handy/iPad): Kästchen und „Nur Produkte im Angebot anzeigen“ in einer Zeile */
body.woocommerce.archive :is(#left-sidebar,#right-sidebar) .sidebar-header .product-on-sale-form label{display:flex!important;align-items:center;gap:10px}
/* Warenkorb: Spaltenüberschriften nicht mitten im Wort trennen */
.woocommerce-cart-form .shop_table th{hyphens:manual!important;-webkit-hyphens:manual!important;word-break:normal!important;overflow-wrap:normal!important;white-space:nowrap}
/* Produktseite: „Bald wieder verfügbar“ gut lesbar (Orange statt hellem Gelb) */
.availability.available-on-backorder,.availability.available-on-backorder .availability-text,.stock.available-on-backorder{color:#f6910d!important}
/* Produktseite: kleinerer Abstand zwischen den Varianten-Knöpfen (Farbe usw.) */
.ts-product-attribute{row-gap:10px!important;column-gap:10px!important}
.ts-product-attribute > .option{margin-bottom:0!important}
/* Leere Bewertungen (0 Sterne) ausblenden – Option „Leere Bewertungen“ */
body.gc-norating .star-rating:has(> span[style*="width:0%"]),
body.gc-norating .woocommerce-product-rating:has(.star-rating > span[style*="width:0%"]){display:none!important}

/* 1.7.54: „Neuer Webshop“-Kachel breit und niedrig: Bild rechtsbündig (siehe tile-photo.js) */
@media (min-width:1200px){.gc-hero--v2.gc-hero .gc-hero-update.gc-hu-wide .gc-hero-update-img{object-position:right bottom!important}}

/* 1.7.55: Warenkorb-Leiste nach dem Hinzufügen (siehe cart-open.js) */
body.gc-cart-open #ts-ajax-add-to-cart-message:not(.error){display:none!important}
#ts-shopping-cart-sidebar li.woocommerce-mini-cart-item{transition:background-color .8s ease-out}
#ts-shopping-cart-sidebar li.gc-just-added{background-color:var(--gc-accent,#ffe600);transition:none}
#gc-cart-toast{position:fixed;left:50%;bottom:20px;z-index:100001;transform:translate(-50%,150%);opacity:0;visibility:hidden;max-width:calc(100% - 32px);padding:12px 18px;background:#1a1a1a;color:#fff;border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,.25);font-size:15px;line-height:1.4;transition:transform .25s,opacity .25s,visibility 0s .25s}
#gc-cart-toast.show{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .25s,opacity .25s}
#gc-cart-toast a{color:var(--gc-accent,#ffe600);font-weight:700;text-decoration:underline;margin-left:6px;white-space:nowrap}
#ts-shopping-cart-sidebar .gc-cart-busy{display:none}
#ts-shopping-cart-sidebar.gc-busy .gc-cart-busy{display:flex;align-items:center;gap:10px;position:absolute;left:0;right:0;top:64px;z-index:5;margin:0 20px;padding:12px 14px;background:var(--gc-accent,#ffe600);color:#1a1a1a;font-weight:700;font-size:15px;border-radius:3px}
#ts-shopping-cart-sidebar.gc-busy .ts-tiny-cart-wrapper{opacity:.45;pointer-events:none;transition:opacity .2s}
#ts-shopping-cart-sidebar .gc-spin{flex:0 0 18px;width:18px;height:18px;border:2px solid rgba(0,0,0,.25);border-top-color:#1a1a1a;border-radius:50%;animation:gcSpin .8s linear infinite}
@keyframes gcSpin{to{transform:rotate(360deg)}}

/* 1.7.59: Pflichtfelder deutlich markieren (siehe form-check.js); Kasse: Markierung von WooCommerce verstärken */
body.gc-form-check .gc-invalid,
body.gc-form-check .woocommerce form .form-row.woocommerce-invalid .input-text,
body.gc-form-check .woocommerce form .form-row.woocommerce-invalid select,
body.gc-form-check .woocommerce form .form-row.woocommerce-invalid .select2-selection{border-color:var(--gc-price,#dd2831)!important;box-shadow:0 0 0 1px var(--gc-price,#dd2831)!important;background-color:#fff6f6}
body.gc-form-check .gc-field-error{display:flex;align-items:center;gap:7px;margin:7px 0 0;color:var(--gc-price,#dd2831);font-size:14px;font-weight:700;line-height:1.35}
body.gc-form-check .gc-field-error::before{content:"!";flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:var(--gc-price,#dd2831);color:#fff;font-size:12px;line-height:18px;text-align:center}
body.gc-form-check .woocommerce form .form-row.woocommerce-invalid label{color:var(--gc-price,#dd2831)}
/* 1.7.60: WooCommerce hängt nach dem Hinzufügen „Warenkorb anzeigen“ an den Button (z. B. Explosionszeichnungen) – die Warenkorb-Leiste ersetzt das */
body.gc-cart-open a.added_to_cart.wc-forward{display:none!important}

html:not(.gc-kbd) .gc-colors button:focus-visible,html:not(.gc-kbd) .gc-colors a:focus-visible{outline:none}

/* 1.7.66: Willkommens-Titel – unter 1200 px steht die Kachel über die volle Breite, der Titel darf sie nutzen (vorher 360 px) */
@media (max-width:1199px){body .gc-hero--v2 .gc-hero-title{max-width:none}}
.gc-nowrap{white-space:nowrap}

/* 1.7.77: Lagerhinweis bei Varianten – die Erweiterung tauscht nur den Text, die Farbe blieb grün */
.summary .availability.woo-custom-stock-status.out-of-stock,
.summary .availability.woo-custom-stock-status.out-of-stock .availability-text {
	color: #c62828 !important;
	border-color: #c62828 !important;
}

/* 1.7.80: Kopfzeile 1280–1379 px – Menü, Flaggen und Merkliste passen sonst nicht in eine Zeile;
 * der rechte Teil rutschte nach dem Laden in eine zweite Zeile. Abstände leicht verringern. */
@media (min-width: 1280px) and (max-width: 1379px) {
	.header-bottom .container { column-gap: 24px; }
	.header-bottom .vertical-menu-heading { width: 260px; min-width: 260px; }
	.header-bottom .ts-menu ul.menu { column-gap: 20px; }
}

/* 1.7.84: Sprachwechsler als Text (oben und im Fußbereich) */
.gc-lang-text { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.gc-lang-text .gc-lt-sep { opacity: .5; }
.gc-lang-text .gc-lt-item.is-current { font-weight: 700; }
.gc-lang-text a.gc-lt-item { text-decoration: none; }
.gc-lang-text a.gc-lt-item:hover { text-decoration: underline; }
.top-header-menu .gc-lang-text-li { display: inline-flex; align-items: center; }
.gc-lang-text--footer { margin-top: 6px; }
.gc-lang-text--footer a.gc-lt-item, .gc-lang-text--footer a.gc-lt-item:visited { color: inherit; }
.gc-lang-text--top { line-height: inherit; }

/* 1.7.89: Flaggen statt „Deutsch | English“ – sonst bricht die schwarze Leiste bei mittleren Breiten um */
.gc-lang-text .gc-lt-flag { display: none; width: 21px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); object-fit: cover; vertical-align: middle; }
@media (max-width: 1099px) {
	.gc-lang-text--top .gc-lt-name,
	.gc-lang-text--top .gc-lt-sep { display: none; }
	.gc-lang-text--top .gc-lt-flag { display: inline-block; }
	.gc-lang-text--top { gap: 6px; }
	.gc-lang-text--top .gc-lt-item { display: inline-flex; line-height: 0; padding: 2px; border-radius: 3px; }
	.gc-lang-text--top a.gc-lt-item { opacity: 1; filter: none; }
	.gc-lang-text--top a.gc-lt-item:hover { opacity: 1; filter: none; text-decoration: none; }
}
/* Unter 960 px passen auch die Flaggen nicht mehr in die Leiste – die Flaggen im Kopfbereich sind dort sichtbar */
@media (max-width: 959px) {
	.top-header-menu .gc-lang-text-li { display: none; }
}

/* 1.8.1: Bewertungen – Hinweis „Nur angemeldete Kunden …“ mittig wie „Es gibt noch keine Bewertungen.“ */
.woocommerce-Reviews .woocommerce-verification-required{text-align:center}