/**
 * Theme Name:      Divi Shop Theme
 * Theme URI:       https://www.elegantthemes.com/gallery/divi/
 * Description:     A child theme for Divi created by LiNDERT WEBDESiGN
 * Author:          LiNDERT WEBDESiGN
 * Author URI:      https://lindert-webdesign.de
 * Template:         Divi
 * Version:         1.0.0
 * Text Domain:     divi-shop-theme
 * License:         GPL2
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 */


/* ---------------------- Theme customization starts here ---------------------- */

/* Header-Menu: Lupe an den Anfang der Navigation, Warenkorb rechtsbuendig
   auf Hoehe des Telefon-CTA aus der Zeile darueber (2026-09-05)

   Divi erzeugt auf manchen Seiten (z.B. Kategorie-Archiven) automatisch
   "Critical CSS" mit ID-Selektoren (".et-db #et-boc .et-l a.et_pb_menu__icon
   { margin:0 11px; background:none; ... }"). Diese ID gewinnt gegen unsere
   Klassen-Selektoren, ist aber nicht auf jeder Seite vorhanden (z.B. fehlt sie
   auf der Startseite) - daher !important, damit es ueberall konsistent ist. */
@media (min-width: 981px) {
	.dtb-menu .et_pb_menu__menu {
		padding-top: 5px;
		margin-top: 5px;
	}

	/* Divis eigene Regel ".et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li
	   {margin-top:8px}" taucht in der Critical-CSS-Kopie mancher Seiten
	   (Kategorie-Archive) auf, fehlt aber z.B. auf der Startseite - dadurch
	   sass der Nav-Text dort ein paar Pixel tiefer als Lupe/Warenkorb. */
	.dtb-menu .et_pb_menu__menu > nav > ul > li {
		margin-top: 0 !important;
	}

	/* Auf Taxonomie-/Archiv-Seiten (Kategorie-Uebersichten, /shop/) generiert
	   Divi eine zusaetzliche, ID-gestuetzte "Critical CSS"-Datei
	   (".et-db #et-boc .et-l ... .et_pb_menu__icon{padding:0;...}"), die NUR
	   dort geladen wird und dank der ID gegen unsere Klassen-Regel gewinnt -
	   auch ohne !important auf ihrer Seite. Ergebnis: Auf genau diesen
	   Seiten (aber nicht auf der Startseite) wurde das horizontale Padding
	   der Lupen-Pille komplett auf 0 zurueckgesetzt, wodurch die runde
	   Hintergrundflaeche viel zu eng um Icon+Text saß ("Grenzen der
	   abgesetzten Buttonflaeche stimmen nicht", 2026-09-07). !important
	   ergaenzt, um auch gegen ID-Selektoren zu gewinnen. */
	.dtb-menu .et_pb_menu__search-button {
		order: -1;
		align-self: center;
		margin-right: 20px !important;
		width: auto;
		height: 34px !important;
		padding: 0 16px 0 10px !important;
		gap: 8px;
		border-radius: 20px;
		background-color: rgba(255, 255, 255, 0.14) !important;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background-color 0.2s ease, transform 0.15s ease;
	}

	/* "Suche"-Beschriftung neben der Lupe, genauso kraeftig wie die
	   restlichen Navigationspunkte (gleiches font-weight/font-size/Farbe wie
	   das Menu-Modul selbst: menu_font="|600|||||||", 16px, weiss). Der
	   Button ist ein leeres <button class="et_pb_menu__icon
	   et_pb_menu__search-button">, das Lupen-Icon kommt bereits als
	   ::after-Pseudo-Element von Divi - Text hier zusaetzlich per ::before,
	   die geerbte "flex-direction:row-reverse" von .et_pb_menu__icon dreht
	   die Reihenfolge sichtbar so, dass die Lupe weiterhin zuerst (links)
	   erscheint (2026-09-06). */
	.dtb-menu .et_pb_menu__search-button::before {
		content: "Suche";
		font-weight: 600;
		font-size: 16px;
		color: #ffffff;
	}

	/* Icon-Fonts kennen kein echtes font-weight (nur ein Schriftschnitt
	   vorhanden) - "fett" wirkende Lupe/Warenkorb-Glyphen deshalb per
	   -webkit-text-stroke simuliert (zeichnet eine zusaetzliche Kontur in
	   Icon-Farbe, wirkt dadurch kraeftiger) statt eines wirkungslosen
	   font-weight (2026-09-06). */
	.dtb-menu .et_pb_menu__search-button::after,
	.dtb-menu .et_pb_menu__cart-button::after {
		-webkit-text-stroke: 0.6px currentColor;
	}

	.dtb-menu .et_pb_menu__search-button:hover {
		background-color: rgba(255, 255, 255, 0.3) !important;
		transform: scale(1.08);
	}

	.dtb-menu .et_pb_menu__cart-button {
		margin-left: auto !important;
		/* Feste Hoehe (gleich der Lupe) unabhaengig vom Pillen-Zustand -
		   vorher bekam nur der "hat Artikel"-Zustand vertikales Padding
		   (7px oben/unten), wodurch der Button dort insgesamt 14px hoeher
		   wurde als im leeren Zustand. Das liess die ganze Nav-Zeile
		   waechst mit und verschob die Kategorienamen sichtbar nach oben,
		   sobald ein Artikel im Warenkorb lag (2026-09-07). */
		height: 34px;
		display: flex;
		align-items: center;
	}

	/* Warenkorb-Button bekommt denselben "abgesetzten" Look wie der Lupen-
	   Button, aber erst sobald tatsaechlich Artikel drin sind. Divis eigene
	   Klasse et_pb_menu__icon__with_count haengt NUR an der Moduleinstellung
	   "show_cart_quantity" (immer "on" hier) und ist unabhaengig vom
	   Warenkorb-Inhalt IMMER vorhanden, auch bei "0 Artikel" - daher stattdessen
	   die eigene Klasse .geko-cart-has-items, die per JS aus dem tatsaechlichen
	   Mengentext ermittelt wird (siehe js/script.js). Pille statt festem
	   Kreis, weil hier zusaetzlich zum Icon noch der Mengentext
	   ("14 Artikel") Platz braucht (2026-09-06). Nur noch horizontales
	   Padding - die Hoehe kommt jetzt fest von .et_pb_menu__cart-button
	   selbst, damit sich an der Nav-Zeilenhoehe nichts mehr aendert
	   (2026-09-07). */
	.dtb-menu .et_pb_menu__cart-button.geko-cart-has-items {
		background-color: rgba(255, 255, 255, 0.14) !important;
		border-radius: 20px;
		padding: 0 16px !important;
		transition: background-color 0.2s ease, transform 0.15s ease;
	}

	.dtb-menu .et_pb_menu__cart-button.geko-cart-has-items:hover {
		background-color: rgba(255, 255, 255, 0.3) !important;
		transform: scale(1.05);
	}

	/* Mengentext ("X Artikel") in Weiss wie die restlichen Navpunkte, aber
	   NUR sobald tatsaechlich etwas im Warenkorb liegt (.geko-cart-has-items,
	   siehe Abschnitt 17/Fix zur echten Bestandspruefung) - bei 0 Artikeln
	   bleibt die Zahl in der Icon-Farbe (Markenorange), auf ausdruecklichen
	   Nutzerwunsch ("aber erst wenn er mehr als 0 ist") (2026-09-06). */
	.dtb-menu .et_pb_menu__cart-button.geko-cart-has-items .et_pb_menu__cart-count {
		color: #ffffff !important;
		font-weight: 600;
	}
}

/* Aufgeklapptes Suchfeld im Header: lesbarer Text, abgesetzter Hintergrund,
   Lupe bleibt als statisches Icon sichtbar (2026-09-06) */
.dtb-menu .et_pb_menu__search-container .et_pb_menu__search {
	position: relative;
}

.dtb-menu .et_pb_menu__search-container .et_pb_menu__search::before {
	content: "U";
	font-family: "ETmodules" !important;
	speak: none;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: rgba(255, 255, 255, 0.85);
	pointer-events: none;
	z-index: 1;
}

.dtb-menu .et_pb_menu__search-container .et_pb_menu__search-input {
	background-color: rgba(255, 255, 255, 0.14) !important;
	border-radius: 4px;
	color: #ffffff !important;
	font-weight: 700;
	padding: 8px 16px 8px 42px;
}

.dtb-menu .et_pb_menu__search-container .et_pb_menu__search-input::placeholder {
	color: rgba(255, 255, 255, 0.8);
	font-weight: 700;
}

/* Natives "Leeren"-Kreuz von type="search" ausblenden - sonst steht es neben
   dem orangen Divi-Schliessen-Button, sobald Text im Feld steht */
.dtb-menu .et_pb_menu__search-container .et_pb_menu__search-input::-webkit-search-cancel-button,
.dtb-menu .et_pb_menu__search-container .et_pb_menu__search-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* Die 1s-Ausblendanimation der restlichen Menuzeile liess den verschwindenden
   Warenkorb-Button kurz wie ein zweites "X" aussehen - deutlich verkuerzt */
.dtb-menu .et_pb_menu__wrap--hidden {
	animation-duration: 0.15s;
}

/* Sticky Footer: bei kurzen Seiten (z.B. "Keine Ergebnisse gefunden") hing der
   Footer direkt hinter dem Content, mit viel leerem Weissraum darunter bis
   zum Ende des Sichtfensters. Divis Struktur ist
   #et-boc > (header, #et-main-area > (#main-content, footer)) - der Footer
   liegt also INNERHALB von #et-main-area, nicht als eigenes Geschwister von
   header. #et-boc bekommt per Flexbox eine Mindesthoehe von 100vh,
   #et-main-area wird gestreckt (flex:1) und ist selbst wieder ein Flex-
   Container, in dem #main-content gestreckt wird - dadurch bleibt der Footer
   bei kurzem Content am unteren Rand des Sichtfensters, waechst bei langem
   Content aber ganz normal mit (2026-09-06). */
html,
body {
	min-height: 100%;
}

#et-boc {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#et-main-area {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

#et-main-area > #main-content {
	flex: 1 0 auto;
}

/* Footer: Ueberschriften-Block ("Shop Daten" / "Rechtliche Angaben") etwas
   von der Spaltenoberkante abgesetzt und mehr Luft zur Trennlinie darunter
   (2026-09-06) */
.et_pb_column_1_tb_footer > .et_pb_text:first-child,
.et_pb_column_2_tb_footer > .et_pb_text:first-child {
	margin-top: 0;
	height: 58px;
	display: flex;
	align-items: flex-end;
}

.et_pb_column_1_tb_footer > .et_pb_text:first-child > .et_pb_text_inner,
.et_pb_column_2_tb_footer > .et_pb_text:first-child > .et_pb_text_inner {
	padding-bottom: 5px;
	width: 100%;
}

/* Logo-Spalte bekommt dieselbe Trennlinie wie "Shop Daten"/"Rechtliche
   Angaben" daneben, auf exakt gleicher Hoehe (58px ab Spaltenoberkante,
   identisch zu den beiden Ueberschriften-Boxen oben) statt bisher gar
   keine Linie zu haben (2026-09-06). */
.geko-footer-logo-box {
	display: flex;
	align-items: flex-end;
	height: 58px;
	padding-bottom: 5px;
	border-bottom: 1px solid #ffffff;
}

/* Divis Standard-Modulabstand (margin-bottom, ca. 19px) zwischen dem
   Adress-/Kontakt-Textblock und dem unsichtbaren Script-Modul danach war
   die groesste Ursache fuer den Leerraum unter der E-Mail-Zeile - das
   Script-Modul selbst hat keine sichtbare Hoehe, braucht also auch keinen
   Abstand danach/davor (2026-09-07). */
.et_pb_column_0_tb_footer .et_pb_text_0_tb_footer {
	margin-bottom: 0 !important;
}

.geko-footer-logo-box img {
	max-width: 150px;
	height: auto;
	display: block;
}

/* Eigene Suchergebnisseite (search.php): Produkte als Kacheln (WooCommerce-
   Produkt-Loop-Markup), passende Kategorie als horizontale Vorschau, sonstige
   Treffer (Seiten/Beitraege) im bisherigen Blog-Listen-Stil (2026-09-06) */
.geko-search-title {
	margin-bottom: 20px;
}

.geko-search-heading {
	margin-top: 40px;
	margin-bottom: 15px;
	padding-bottom: 8px;
	border-bottom: 1px solid #e2e2e2;
}

.geko-search-category-match {
	margin-bottom: 20px;
}

/* Suchergebnisseite ohne Sidebar (volle Breite, wie auf den Kategorieseiten) -
   Divis Standard-Zweispalten-Layout reserviert die Sidebar-Breite trotzdem
   per CSS-Prozentwerten, unabhaengig davon, ob get_sidebar() ueberhaupt
   aufgerufen wurde. Ohne diese Regeln bliebe #left-area schmaler als noetig
   und Divis dekorativer Spalten-Trenner (".container:before", height:100%)
   wuerde weiterhin ueber die volle (hohe) Produktgrid-Hoehe gezeichnet,
   obwohl daneben gar keine Sidebar mehr steht (2026-09-06). */
.geko-search-no-sidebar:before {
	display: none !important;
}

#left-area.geko-search-full-width {
	width: 100% !important;
	float: none !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

/* Divis Grid-Layout fuer WooCommerce-Produktkacheln (Bild/Titel/Preis
   nebeneinander) ist an dessen eigenes "Shop"-Modul gebunden
   (".et_pb_shop_grid .woocommerce ul.products li.product") und greift
   nicht bei einer eigenstaendig gerenderten WooCommerce-Produkt-Loop wie
   hier auf der Suchergebnisseite - daher ein eigenes, unabhaengiges
   CSS-Grid statt auf Divis Modul-Klassen angewiesen zu sein. */
.geko-search-products .products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.geko-search-products .products li.product {
	width: auto;
	float: none;
	margin: 0;
}

@media (max-width: 980px) {
	.geko-search-products .products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.geko-search-products .products {
		grid-template-columns: 1fr;
	}
}

.geko-search-category-preview.products {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 20px;
	padding-bottom: 15px;
	-webkit-overflow-scrolling: touch;
}

.geko-search-category-preview.products li.product {
	flex: 0 0 220px;
	width: 220px;
}

/* ======================================================================
   Suchergebnis-Produktkacheln im selben Grundstil wie die Produktdetail-
   seite (Abschnitt 15/16): weisse Karte mit Schatten, grosser/fetter
   Orange-Preis, Lageranzeige als gruen/rote Pille mit Punkt-Indikator,
   Manrope-Font - keine neue Optik erfinden, sondern 1:1 die dort bereits
   etablierten Werte wiederverwenden (2026-09-07). Titel/Preis/Warenkorb-
   Button kommen aus WooCommerce's Standard-Loop-Markup, Lageranzeige +
   "Details"-Link werden per Hook ergaenzt (siehe functions.php,
   $GLOBALS['geko_search_loop']). */
.geko-search-products .products li.product,
.geko-search-category-preview.products li.product {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
	padding: 16px 16px 20px;
	font-family: "Manrope", sans-serif;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.geko-search-products .products li.product:hover,
.geko-search-category-preview.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.geko-search-products .products li.product img,
.geko-search-category-preview.products li.product img {
	border-radius: 10px;
	background: var(--slate-100);
}

.geko-search-products .products li.product .woocommerce-loop-product__title,
.geko-search-category-preview.products li.product .woocommerce-loop-product__title {
	font-family: "Manrope", sans-serif;
	font-weight: 800;
	color: var(--geko-dark);
	font-size: 16px;
	line-height: 1.35;
	margin: 12px 0 6px;
}

/* Preis: gleiche Werte wie ".single-product p.price" (Abschnitt 15), nur
   kleiner skaliert fuer den Kachel-Kontext statt der Einzelproduktseite. */
.geko-search-products .products li.product .price,
.geko-search-category-preview.products li.product .price {
	font-family: "Manrope", sans-serif;
	font-weight: 800 !important;
	font-size: 20px;
	color: var(--orange) !important;
	display: block;
	margin: 6px 0 10px;
}

/* Lageranzeige: 1:1 dieselben Werte wie ".single-product .stock"
   (Abschnitt 16) - gleiche gruene/rote Pille mit Punkt-Indikator, hier per
   Hook eingefuegt (WooCommerce zeigt Lagerstatus von Haus aus nur auf der
   Einzelproduktseite, nicht im Loop). */
.geko-search-products .products li.product .stock,
.geko-search-category-preview.products li.product .stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px !important;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 20px;
	background: #e8f5e9;
	color: #1b5e20 !important;
	border: 1px solid #a5d6a7;
	margin: 0 0 8px;
}

.geko-search-products .products li.product .stock.out-of-stock,
.geko-search-category-preview.products li.product .stock.out-of-stock {
	background: #fdecea;
	color: #8e1a1a !important;
	border-color: #f0b4b0;
}

.geko-search-products .products li.product .stock:before,
.geko-search-category-preview.products li.product .stock:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2e7d32;
	flex: 0 0 auto;
}

.geko-search-products .products li.product .stock.out-of-stock:before,
.geko-search-category-preview.products li.product .stock.out-of-stock:before {
	background: #c62828;
}

/* Warenkorb-Button: gleiche Optik/Hover-Anhebung wie
   ".single_add_to_cart_button" (Abschnitt 15), nur volle Kachelbreite. */
.geko-search-products .products li.product a.button,
.geko-search-category-preview.products li.product a.button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background: var(--orange) !important;
	color: #fff !important;
	border-radius: 6px !important;
	font-family: "Manrope", sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	padding: 12px 14px !important;
	margin-top: 6px;
	text-transform: none !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.geko-search-products .products li.product a.button:hover,
.geko-search-category-preview.products li.product a.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.geko-search-products .products li.product .geko-search-details-link,
.geko-search-category-preview.products li.product .geko-search-details-link {
	display: block;
	text-align: center;
	margin-top: 10px;
	font-family: "Manrope", sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--geko);
	text-decoration: none;
}

.geko-search-products .products li.product .geko-search-details-link:hover,
.geko-search-category-preview.products li.product .geko-search-details-link:hover {
	text-decoration: underline;
}

/* Germanized-Pflichttexte (MwSt./Versand/Lieferzeit) machen die Kachel im
   Vergleich zur Bildvorlage unruhig - auf der Suchergebnisseite
   ausgeblendet, sie stehen weiterhin vollstaendig auf der
   Produktdetailseite (rechtlich nicht Pflicht, direkt in der Kachel-
   Vorschau zu wiederholen). */
.geko-search-products .products li.product .wc-gzd-additional-info,
.geko-search-category-preview.products li.product .wc-gzd-additional-info {
	display: none;
}

/* Produktseite "In den Warenkorb"-Modul: das Divi-Modul setzt fuer den
   Fokus-Zustand der Anzahl-Feldes nur background-color:#fff !important,
   die (weisse) Schriftfarbe des Normalzustands bleibt dabei aber stehen -
   im Fokus also weisser Text auf weissem Grund. Fokus-Hintergrund bleibt
   stattdessen beim dunkelblauen Normalzustand. Divis eigene Regel steht als
   Inline-<style> weiter unten im Dokument als unser Stylesheet-Link - bei
   gleicher Spezifitaet + !important gewinnt sonst die spaeter stehende
   Regel, daher hier "html body" vorangestellt, um sicher zu gewinnen
   (2026-09-06). */
html body .et_pb_wc_add_to_cart_0_tb_body .quantity input.qty:focus {
	background-color: #376b8c !important;
}

/* ======================================================================
   Neue Startseite (GEKO Shop Redesign, 2026-09-06)
   Sektionen liegen als et_pb_code-Module im Divi-Body der Startseite
   (Post 2), Header/Footer bleiben unveraendert die bestehenden
   Theme-Builder-Layouts. Farben/Typo hier zentral gepflegt statt inline
   in jedem Code-Modul zu wiederholen.
   ====================================================================== */
:root {
	--geko: #376f91;
	--geko-dark: #285b79;
	--orange: #f39200;
	--slate-100: #f1f5f9;
	--slate-500: #64748b;
	--slate-800: #1e293b;
}

.geko-hero,
.geko-categories,
.geko-solutions,
.geko-bestsellers,
.geko-newsletter {
	font-family: "Manrope", sans-serif;
}

.geko-categories h2,
.geko-bestsellers h2,
.geko-solutions h2 {
	font-weight: 800;
}

/* Divis "width=100%/max_width=100%" Row-Attribute wurden ignoriert - kein
   einziges CSS-Rule dafuer im generierten Divi-Cache (vermutlich braucht
   diese Divi-Version dafuer zusaetzlich use_custom_width="on"). Die Zeile
   blieb bei Divis Standardbreite (~80% Viewport), wodurch unser eigenes
   .container (nochmal 80%) auf Basis der bereits geschrumpften Breite
   gerechnet hat - Ergebnis: Inhalt doppelt zu schmal. Statt gegen Divis
   Zeilen-Breitensystem zu kaempfen, klassischer Full-Bleed-Ausbruch aus
   jedem umschliessenden Divi-Wrapper (2026-09-06). */
.geko-fullbleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ---------- Hero ---------- */
.geko-hero {
	position: relative;
	height: 350px;
	border-bottom: 4px solid var(--orange);
	overflow: hidden;
}

.geko-hero video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Video wurde vertikal zentriert zugeschnitten - bei manchen Szenen
	   wurden Koepfe am oberen Rand angeschnitten. Oben ausgerichtet statt
	   zentriert, damit der obere Bildbereich immer vollstaendig sichtbar
	   bleibt (2026-09-07). */
	object-position: top;
	filter: brightness(0.8);
}

.geko-hero-overlay {
	position: absolute;
	inset: 0;
	/* Leichter radialer Verlauf, damit der Text bei jedem Video-Ausschnitt
	   etwas Kontrast zum Hintergrund hat (2026-09-06). */
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.25) 100%);
}

.geko-hero-content {
	position: relative;
	z-index: 10;
	height: 100%;
	display: flex;
	align-items: center;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}

/* Zwei getrennte Bloecke statt eines gestapelten Zentrums: links die
   Begruessung ("Willkommen im GEKOShop"), weiter rechts (aber noch
   innerhalb der Seiten-Breitengrenze) das rotierende "Alles rund um ..."
   plus CTA-Button, gemaess Nutzer-Bildvorlage. Wichtig: Der Hero ist ein
   Fullbleed-Element (volle Viewportbreite), der Rest der Seite (z.B. "GEKO
   Shopkategorien") liegt dagegen innerhalb von ".container" (max-width
   1400px, zentriert). Ein fester Pixel-Abstand vom Viewportrand haette den
   Hero-Text nicht an derselben Kante wie den restlichen Seiteninhalt
   ausgerichtet - dieselbe max-width/margin:auto-Logik wie ".container"
   sorgt dafuer, dass die linke Kante bei jeder Fensterbreite exakt mit dem
   Rest der Seite uebereinstimmt (2026-09-07). */
.geko-hero-inner {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	text-align: left;
}

.geko-hero-greeting,
.geko-hero-pitch {
	text-align: left;
}

.geko-hero-pitch {
	flex: 0 1 560px;
}

.geko-hero-content h1 {
	/* Divis globale Basis-Regel "h1,h2,h3,h4,h5,h6{color:#333}" ist ein
	   Element-Selektor und schlaegt damit die von .geko-hero-content geerbte
	   weisse Farbe - Vererbung verliert immer gegen einen expliziten Wert,
	   egal wie niedrig dessen Spezifitaet ist. Farbe hier explizit setzen
	   (2026-09-06). */
	color: #fff;
	font-size: clamp(20px, 4vw, 32px);
	font-weight: 700;
	margin: 0 0 8px;
}

.geko-hero-content .geko-logo-large {
	font-size: clamp(28px, 6vw, 48px);
	font-weight: 800;
	color: #fff;
	margin-bottom: 12px;
	line-height: 1;
}

.geko-hero-content .geko-logo-large span {
	color: var(--orange);
}

.geko-hero-content p {
	max-width: 560px;
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

/* Hero-Text wirkte "langweilig, unprofessionell, nach Standard" - Eyebrow-
   Badge oben und ein klarer CTA-Button unten sollen aus dem reinen
   Willkommensgruss einen Blickfang mit Handlungsaufforderung machen
   (2026-09-07). */
/* "DIREKT VOM HERSTELLER"-Badge wieder entfernt (steht bereits im Header,
   im Hero wirkte es redundant) - stattdessen ein rotierendes Wort im
   Untertitel ("Alles rund um Zubehör/Wartung/Lösungen/..."), damit der
   sonst statische Einzeiler etwas Bewegung/Interesse bekommt (2026-09-07). */
.geko-hero-content p.geko-hero-rotator {
	font-weight: 700;
	font-size: clamp(26px, 5vw, 44px);
	line-height: 1.2;
	margin: 18px 0 0;
	max-width: none;
}

.geko-rotate-word {
	display: inline-block;
	font-weight: 800;
	color: var(--orange);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.geko-rotate-word.geko-rotate-out {
	opacity: 0;
	transform: translateY(4px);
}

/* "Alles rund um" und das rotierende Wort erzwungen auf zwei Zeilen,
   global (Desktop + Mobile) - bei laengeren Woertern ("Einblastechnik")
   sonst zu breit/unruhig (2026-09-08). */
.geko-rotate-word {
	display: block;
}

.geko-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 26px;
	background: var(--orange);
	color: #fff;
	font-family: "Manrope", sans-serif;
	font-weight: 700;
	font-size: 16px;
	padding: 14px 28px;
	border-radius: 6px;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.geko-hero-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.geko-hero-cta svg {
	width: 18px;
	height: 18px;
}

/* ---------- Kategorien-Grid ---------- */
.geko-categories {
	padding: 30px 0;
}

/* Dieses generische ".container" traegt sitenweit ein geerbtes
   "padding-top:58px" (fuer eine andere Divi-Seitenvorlage gedacht), das
   hier auf der Startseite unerwuenscht mit dem Section-Padding stapelte und
   den Abstand vom Header/Hero zur "GEKO Shopkategorien"-Ueberschrift
   unnoetig aufgeblaeht hat (2026-09-07). */
.geko-categories .container {
	padding-top: 0;
}

.geko-categories h2 {
	color: var(--geko);
	border-bottom: 1px solid var(--geko);
	padding-bottom: 10px;
	margin-bottom: 30px;
	font-size: clamp(22px, 4vw, 30px);
}

.geko-cat-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

.geko-cat-card {
	display: block;
	text-decoration: none;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	transition: transform 0.2s ease;
}

.geko-cat-card:hover {
	transform: translateY(-4px);
}

.geko-cat-card .geko-cat-image {
	height: 208px;
	overflow: hidden;
	border: 8px solid #fff;
	background: var(--slate-100);
	display: flex;
	align-items: center;
	justify-content: center;
}

.geko-cat-card .geko-cat-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(50%);
}

.geko-cat-card .geko-cat-image svg {
	color: var(--geko);
}

.geko-cat-card .geko-cat-label {
	background: var(--orange);
	padding: 12px;
	font-weight: bold;
	text-align: center;
	color: #fff;
}

@media (max-width: 980px) {
	.geko-cat-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.geko-cat-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- Loesungs-Boxen ---------- */
.geko-solutions {
	padding: 20px 0 50px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.geko-solution-box {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	padding: 40px;
	display: grid;
	gap: 32px;
	color: #fff;
	align-items: center;
}

.geko-solution-box.box-1 {
	background: linear-gradient(135deg, #376f91 0%, #f39200 100%);
	grid-template-columns: 1fr 1.1fr;
}

.geko-solution-box.box-2 {
	background: linear-gradient(135deg, #f39200 0%, #dc2626 100%);
	grid-template-columns: 1.1fr 1fr;
}

.geko-solution-box.box-3 {
	background: linear-gradient(135deg, #0d9488 0%, #1e40af 100%);
	grid-template-columns: 1.15fr 1fr;
}

.geko-solution-box .geko-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.15);
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 16px;
}

.geko-solution-box h2 {
	/* Divis globale Regel "h1,h2,h3,h4,h5,h6{color:#333}" schlaegt sonst die
	   von .geko-solution-box geerbte weisse Farbe (2026-09-06). */
	color: #fff;
	font-size: clamp(22px, 3.5vw, 30px);
	margin: 0 0 12px;
}

.geko-solution-box p {
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 20px;
	opacity: 0.95;
}

.geko-btn {
	padding: 12px 20px;
	border-radius: 8px;
	font-weight: bold;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.3s ease;
}

.geko-btn-white {
	background: #fff;
	color: var(--geko);
}

.geko-btn-white:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	color: var(--geko);
}

.geko-btn-dark {
	background: var(--geko-dark);
	color: #fff;
}

.geko-btn-dark:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	color: #fff;
}

.geko-visual-section {
	position: relative;
}

.geko-icon-grid {
	width: 100%;
	height: auto;
	max-width: 280px;
}

.geko-badge-circle {
	position: absolute;
	bottom: -20px;
	right: -20px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.geko-badge-circle strong {
	font-size: 40px;
	color: var(--geko);
	line-height: 1;
}

.geko-badge-circle small {
	font-size: 10px;
	color: var(--geko-dark);
	margin-top: 4px;
}

.geko-timeline-visual,
.geko-process-diagram {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 12px;
	padding: 20px;
}

.geko-timeline-label {
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	opacity: 0.8;
}

.geko-timeline-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.geko-timeline-tabs button {
	flex: 1;
	padding: 16px 8px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: #fff;
	cursor: default;
	font-family: "Manrope", sans-serif;
}

.geko-timeline-tabs button.active {
	background: #fff;
	color: var(--orange);
	font-weight: bold;
}

.geko-timeline-tabs button strong {
	display: block;
	font-size: 20px;
}

.geko-timeline-tabs button span {
	font-size: 10px;
}

.geko-timeline-progress {
	display: flex;
	align-items: center;
	gap: 8px;
}

.geko-timeline-progress .dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	flex: 0 0 auto;
}

.geko-timeline-progress .dot.dim {
	background: rgba(255, 255, 255, 0.5);
}

.geko-timeline-progress .bar {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.3);
}

.geko-timeline-progress .bar .fill {
	width: 66%;
	height: 100%;
	background: #fff;
	border-radius: 2px;
}

.geko-process-diagram {
	overflow-x: auto;
}

.geko-process-diagram svg {
	min-width: 480px;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* ---------- Bestseller ---------- */
.geko-bestsellers h2 {
	color: var(--geko);
	border-bottom: 1px solid var(--geko);
	padding-bottom: 10px;
	margin-bottom: 30px;
	font-size: clamp(22px, 4vw, 30px);
}

.geko-product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.geko-product-card {
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	text-decoration: none;
	display: block;
	background: #fff;
	transition: transform 0.2s ease;
}

.geko-product-card:hover {
	transform: translateY(-4px);
}

.geko-product-card .geko-product-image {
	height: 224px;
	background: var(--slate-100);
}

.geko-product-card .geko-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.geko-product-card .geko-product-content {
	border-top: 8px solid var(--geko);
	padding: 20px;
	text-align: center;
}

.geko-product-card h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--slate-800);
	margin: 0 0 8px;
}

.geko-product-card .geko-price {
	color: var(--orange);
	font-size: 20px;
	font-weight: bold;
	margin: 0;
}

@media (max-width: 980px) {
	.geko-product-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.geko-solution-box {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 600px) {
	.geko-product-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Newsletter ---------- */
.geko-newsletter {
	background: var(--orange);
	padding: 30px 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	color: #fff;
	margin: 20px 0 50px;
}

.geko-newsletter h3 {
	/* Siehe .geko-hero-content h1: Divis h1-h6-Basisregel schlaegt vererbte
	   Farbe, daher explizit setzen (2026-09-06). */
	color: #fff;
	margin: 0;
	font-size: clamp(18px, 3vw, 24px);
	font-weight: 800;
}

/* ======================================================================
   Produktseite: Kartendesign, groesserer/markenfarbiger Preis,
   Kurzfakten-Leiste (Lieferzeit/Verfuegbarkeit), Breadcrumb (2026-09-06)
   ====================================================================== */
.single-product div.product {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	font-family: "Manrope", sans-serif;
}

.single-product .product_title {
	font-family: "Manrope", sans-serif;
	font-weight: 800 !important;
}

.single-product .woocommerce-product-gallery {
	transition: transform 0.3s ease;
}

.single-product .woocommerce-product-gallery:hover {
	transform: scale(1.02);
}

/* Die Vorschaubilder-<li> sind floated (Divi/WooCommerce-Standard-CSS,
   margin-bottom:6.6666%), der Rahmen-Container clear't die Floats aber nicht
   (gemessene Hoehe 0) - dadurch "entkommt" der Rand der letzten Reihe nach
   unten und erzeugt einen ca. 34px groesseren Abstand als oben/seitlich
   (10px). Clearfix haelt den Float-Rand wieder im Container (2026-09-06).
   !important noetig: Divis eigene .et_pb_wc_images-Modul-CSS setzt
   overflow:visible auf denselben Selektor mit identischer Spezifitaet und
   gewinnt sonst per Ladereihenfolge (nach woocommerce.css geladen). */
.single-product .flex-control-thumbs {
	overflow: hidden !important;
	/* Der Clearfix (overflow:hidden) laesst den Container die Floats zwar
	   jetzt korrekt umschliessen, die margin-bottom:6.6666% der letzten
	   Vorschaubild-Reihe zaehlt aber weiterhin zur Container-Hoehe dazu -
	   ohne Korrektur bliebe der Abstand zum unteren Rahmen dadurch immer
	   noch groesser als oben/seitlich. Negativer Ausgleich in gleicher
	   Groesse macht den Rahmen wieder symmetrisch (2026-09-06). */
	margin-bottom: -6.6666% !important;
}

/* Preishinweis, MwSt-Zusatz und Beschreibungstext liefen bisher auf dem
   knappen Theme-Standard - insgesamt etwas groesser fuer bessere Lesbarkeit
   im Preis-/Infobereich (2026-09-06). */
.single-product .legal-price-info,
.single-product .wc-gzd-additional-info.tax-info,
.single-product .et_pb_wc_description {
	font-size: 16px;
}

/* Divi setzt die Preisfarbe schon per Modul-Attribut auf Orange (siehe
   Body-Layout Post 3231) - hier nur Groesse/Gewicht, damit der Preis wie auf
   den Produktkacheln als klarer Blickfang wirkt, nicht nur als Fliesstext. */
.single-product p.price,
.single-product p.price span.woocommerce-Price-amount {
	font-size: 32px !important;
	font-weight: 800 !important;
}

/* Kurzfakten-Leiste: Lieferzeit- und Verfuegbarkeits-Text existieren auf
   jedem Produkt (WooCommerce/Germanized-Standardfelder) - hier nur als
   Badges mit Punkt-Indikator umgestylt, keine neuen Daten pro Produkt
   noetig, funktioniert also fuer den ganzen Katalog gleich. */
.single-product .stock,
.single-product .wc-gzd-additional-info.delivery-time-info {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--slate-100);
	color: var(--slate-800);
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	margin: 0 8px 8px 0;
}

.single-product .stock:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2e7d32;
	flex: 0 0 auto;
}

.single-product .stock.out-of-stock:before {
	background: #c62828;
}

/* Lageranzeige sollte staerker auffallen als die uebrigen Kurzfakten-Badges -
   eigene, groessere/kraeftigere Optik statt der gemeinsamen grauen Pille
   oben, mit farblichem Rahmen passend zum Status (2026-09-06).
   !important auf font-size/color noetig: WooCommerce's eigenes
   ".woocommerce div.product p.stock" (0.92em, gedecktes Oliv-Gelb) hat mehr
   Klassen in der Selektorkette als unser ".single-product .stock" und
   gewinnt sonst trotz spaeterer Ladereihenfolge - das war der Grund, warum
   die Badge bisher gar nicht wie beabsichtigt (graue Pille) aussah, sondern
   im schwachen WooCommerce-Standardton gerendert wurde. */
.single-product .stock {
	font-size: 15px !important;
	font-weight: 700;
	padding: 8px 16px;
	background: #e8f5e9;
	color: #1b5e20 !important;
	border: 1px solid #a5d6a7;
}

.single-product .stock.out-of-stock {
	background: #fdecea;
	color: #8e1a1a !important;
	border-color: #f0b4b0;
}

.single-product .stock:before {
	width: 10px;
	height: 10px;
}

.single-product .wc-gzd-additional-info.delivery-time-info:before {
	content: "🚚";
	font-size: 13px;
}

/* Auswahl-Dropdown bei Variationsprodukten - vorher nackter Browser-Standard,
   jetzt an Eingabefeld-Optik (Anzahl-Feld) angeglichen. */
.single-product .variations select {
	/* Divis "Add to Cart"-Modul stylt dieses <select> selbst ueber seine
	   eigenen dropdown_menus_*-Shortcode-Attribute (gleiches Muster wie beim
	   Anzahl-Feld, siehe Abschnitt 12 in shopfix-search.md) - !important noetig,
	   um zuverlaessig zu gewinnen (2026-09-06). */
	font-family: "Manrope", sans-serif !important;
	font-size: 16px !important;
	padding: 10px 14px !important;
	border: 1px solid #cccccc !important;
	border-radius: 6px !important;
	background-color: #fff !important;
	color: var(--geko) !important;
	font-weight: 600 !important;
}

.single-product .variations td.label {
	font-weight: 700;
	color: var(--geko-dark);
}

/* Kaufen-Button etwas praesenter/einladender als der Divi-Standard. */
.single-product .single_add_to_cart_button {
	/* Divi positioniert das Warenkorb-Icon per ::after absolut nahe am
	   rechten Rand - ohne zusaetzlichen rechten Puffer sitzt es buendig an
	   der Button-Kante ("hinter dem warenkorb symbol fehlt noch ein rand",
	   2026-09-06). Rechtes Padding groesser als links, damit hinter dem
	   Icon noch Luft bleibt. */
	padding: 14px 40px 14px 28px !important;
	font-size: 17px !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Bei Produkten mit nur 1 verfuegbarer Einheit rendert WooCommerce das
   Anzahl-Feld als unsichtbares <input type="hidden"> (kein Auswahlfeld
   noetig) - der umgebende ".quantity"-Wrapper bleibt aber im Layout stehen
   und behaelt seinen rechten Abstand (Divi: margin-right auf .quantity,
   nicht margin-left auf den Button), wodurch vor dem "In den Warenkorb"-
   Button eine unmotivierte Luecke entsteht, wo eigentlich gar kein
   sichtbares Anzahl-Feld mehr existiert. Wrapper in diesem Fall komplett
   aus dem Layout nehmen (2026-09-06). */
.single-product .quantity:has(> input.qty[type="hidden"]) {
	display: none;
}

.single-product .single_add_to_cart_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Breadcrumb - eigener Shortcode, da Divis Theme-Builder-Body-Layout die
   normalen WooCommerce-Content-Hooks (an denen woocommerce_breadcrumb()
   sonst haengt) nicht durchlaeuft; siehe geko_breadcrumb() in functions.php. */
.geko-breadcrumb {
	/* War mit 13px/slate-500 zu unauffaellig - jetzt groesser, dunkler und mit
	   Trennlinie darunter fuer klare Abgrenzung (2026-09-06).
	   !important auf font-size/color noetig: WooCommerce's eigenes
	   ".woocommerce-breadcrumb{font-size:.92em}" hat durch die zusaetzliche
	   .woocommerce-Klasse in der Kette mehr Spezifitaet als unser einzelner
	   .geko-breadcrumb-Selektor und gewann bisher trotzdem. */
	font-family: "Manrope", sans-serif;
	font-size: 15px !important;
	font-weight: 600;
	color: var(--slate-800) !important;
	padding-bottom: 12px;
	margin-bottom: 20px;
	border-bottom: 1px solid #e2e2e2;
}

.geko-breadcrumb a {
	color: var(--geko);
	font-weight: 600;
	text-decoration: none;
}

.geko-breadcrumb a:hover {
	text-decoration: underline;
}

/* Kopfzeile->Brotkrumen und Brotkrumen->Produktinhalt wirkten viel zu
   "maechtig": Divis et_pb_row hat ohne eigenes custom_padding-Attribut ein
   eingebautes Default-Padding von 27.3px oben UND unten - das steckte in
   BEIDEN Reihen (Brotkrumen-Reihe und Produkt-Reihe) zusaetzlich zu den
   Section-Paddings drin und summierte sich zu ~47px vor bzw. ~110px nach
   dem Brotkrumen. Hier direkt an der Ursache (Zeilen-Default-Padding)
   entschaerft statt nur die Section-Werte zu kuerzen (2026-09-06). */
.single-product .et_pb_section_0_tb_body {
	padding-top: 12px !important;
}

.single-product .et_pb_section_0_tb_body .et_pb_row_0_tb_body {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.single-product .et_pb_section_1_tb_body {
	padding-top: 20px !important;
}

.single-product .et_pb_section_1_tb_body .et_pb_row_0_tb_body {
	padding-top: 0 !important;
}

/* Kontaktseite wirkte "nichtssagend" - unstyled Fließtext-Liste (Reste eines
   alten Fusion-Builder-Imports) ohne jede Verbindung zum sonstigen
   Markendesign. Gleiche Kartenoptik/Farbpalette wie Produktseite und
   Startseite: weisse Karte mit Schatten, Icon-Zeilen statt Fliesstext-
   Wand, Karte fuer die Anfahrtskarte (2026-09-06). */
.geko-contact-title {
	font-family: "Manrope", sans-serif;
	font-weight: 800;
	color: var(--geko-dark);
	font-size: 30px;
	margin-bottom: 20px;
}

.geko-contact-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	padding: 10px 32px;
	font-family: "Manrope", sans-serif;
}

.geko-contact-row {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--slate-100);
	line-height: 1.5;
}

.geko-contact-row:last-child {
	border-bottom: none;
}

.geko-contact-icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--slate-100);
	color: var(--geko);
	display: flex;
	align-items: center;
	justify-content: center;
}

.geko-contact-icon svg {
	width: 20px;
	height: 20px;
}

.geko-contact-row a {
	color: var(--geko);
	font-weight: 700;
	text-decoration: none;
}

.geko-contact-row a:hover {
	text-decoration: underline;
}

.geko-contact-map-card {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	line-height: 0;
}

/* "Groessere Karte anzeigen"-Textlink durch ein Overlay-Symbol auf der Karte
   ersetzt, im selben Look wie die eingebetteten OSM-Zoom-Buttons (weisses,
   abgerundetes Quadrat mit Schatten) - Lupe fuer "Karte ansehen" + kleines
   Pfeil-Badge dafuer, dass es extern (neuer Tab) oeffnet (2026-09-06). */
.geko-contact-map-overlay-btn {
	position: absolute;
	/* Direkt unter die eingebetteten OSM-Zoom-Buttons (oben rechts, ca. 2x26px
	   plus oberem Rand) gesetzt statt unten rechts - alle Kartensteuerungen
	   auf einen Blick am selben Rand, kein Suchen mehr noetig (2026-09-06).
	   Exakte Position per Pixelanalyse eines Screenshots ermittelt (das
	   OSM-Embed ist ein Cross-Origin-iframe, dessen DOM/Layout sich nicht per
	   JS auslesen laesst): Der "-"-Button endet bei y=68px (kartenrelativ) -
	   68px allein liess unseren Button direkt buendig ohne jeden Abstand
	   anschliessen. +4px gewuenschter Abstand ergibt top:72px (2026-09-07). */
	top: 72px;
	right: 10px;
	z-index: 5;
	width: 29px;
	height: 29px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333333;
	transition: background-color 0.15s ease;
}

.geko-contact-map-overlay-btn:hover {
	background: #f4f4f4;
}

.geko-contact-map-overlay-btn > svg {
	width: 15px;
	height: 15px;
	/* Nach oben links verschoben, damit das Link-Badge unten rechts Platz
	   hat, ohne den Lupenstiel zu beruehren. Eine spaetere Mikro-Korrektur
	   ("1px rechts, 4px runter") hatte das Icon versehentlich naeher an
	   die Badge-Ecke herangeschoben statt weiter weg - dadurch beruehrten
	   sich Lupenstiel und Badge sichtbar ("kacke" laut Nutzer). Zurueck auf
	   einen Wert mit klarem Abstand zwischen beiden (2026-09-07). */
	transform: translate(-2px, -2px);
}

.geko-contact-map-overlay-badge {
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 11px;
	height: 11px;
	background: var(--geko);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px #fff;
}

.geko-contact-map-overlay-badge svg {
	width: 7px;
	height: 7px;
}

.geko-contact-map-card iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
}

/* "Anfahrt von"-Formular unter der Karte: oeffnet OpenStreetMap-Routing
   (osm.org/directions) mit dem eingegebenen Startort und dem festen GEKO-
   Standort als Ziel in einem neuen Tab - keine eigene Routing-Engine noetig,
   OSM geokodiert den Freitext selbst (2026-09-06). */
.geko-directions-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-top: 20px;
	font-family: "Manrope", sans-serif;
}

.geko-directions-form label {
	flex-basis: 100%;
	font-weight: 700;
	color: var(--geko-dark);
	font-size: 14px;
}

/* Eingabefeld + Standort-Button + Vorschlagsliste gehoeren visuell
   zusammen, deshalb eigener Positionierungs-Container statt alles direkt
   im Flex-Formular (2026-09-06). */
.geko-directions-input-group {
	position: relative;
	flex: 1 1 220px;
}

.geko-directions-form input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	font-family: "Manrope", sans-serif;
	font-size: 15px;
	padding: 10px 44px 10px 14px;
	border: 1px solid #cccccc;
	border-radius: 6px;
	color: var(--slate-800);
}

.geko-directions-form input[type="text"]:focus {
	outline: none;
	border-color: var(--geko);
}

/* Standort-Button (Browser-Geolocation) sitzt als kleines rundes Icon im
   Eingabefeld selbst, wie ein "Locate me"-Symbol in Kartenanwendungen. */
.geko-directions-locate {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--slate-100);
	color: var(--geko);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.geko-directions-locate:hover {
	background: #dbe5eb;
}

.geko-directions-locate svg {
	width: 18px;
	height: 18px;
}

/* Adress-Vorschlaege (Nominatim, ab 3 Zeichen) als Dropdown direkt unter dem
   Eingabefeld. Als <div>-Zeilen statt <ul>/<li> aufgebaut (nicht nur
   Geschmackssache): ein <ul> bekam trotz "list-style:none" weiterhin einen
   sichtbaren Aufzaehlungspunkt, da eine spezifischere WooCommerce/Divi-
   Basisregel fuer "ul" gewinnt - <div>s umgehen das Problem komplett
   (2026-09-06). */
.geko-directions-suggestions {
	position: absolute;
	z-index: 10;
	top: calc(100% - 1px);
	left: 0;
	right: 0;
	padding: 6px 0;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-top: none;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
	max-height: 240px;
	overflow-y: auto;
}

.geko-directions-suggestion {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	font-size: 14px;
	line-height: 1.35;
	color: var(--slate-800);
	cursor: pointer;
}

.geko-directions-suggestion:hover {
	background: var(--slate-100);
}

.geko-directions-suggestion-icon {
	flex: 0 0 auto;
	display: flex;
	color: var(--slate-500);
}

.geko-directions-suggestion-icon svg {
	width: 15px;
	height: 15px;
}

.geko-directions-suggestion-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Eingabefeld optisch mit dem darunterliegenden Dropdown verbinden, statt
   frei schwebend mit Luecke - wirkt wie ein zusammenhaengendes Element. */
.geko-directions-form:has(.geko-directions-suggestions:not([hidden])) #geko-directions-from {
	border-radius: 6px 6px 0 0;
	border-color: #e2e2e2;
}

.geko-directions-form > button[type="submit"] {
	flex: 0 0 auto;
	font-family: "Manrope", sans-serif;
	font-weight: 700;
	font-size: 15px;
	padding: 10px 22px;
	background: var(--orange);
	color: #fff;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.geko-directions-form > button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.geko-directions-status {
	flex-basis: 100%;
	color: var(--slate-500);
	font-size: 13px;
}

/* "Unsere Partner"-Leiste auf der Kontaktseite: flache, gedeckte Wortmarken
   auf hellgrauem Grund, angelehnt an klassische "as seen in"/Partner-Balken
   (2026-09-06). Textbasierte Wortmarken statt eingebundener Fremd-Logos -
   hanf-depot.de lieferte beim Testen einen 500er (Seite down), ein
   gutex.de-Logo liess sich nicht zuverlaessig als eigenstaendige Bilddatei
   extrahieren. Bei Bedarf leicht gegen echte Logo-Dateien austauschbar,
   sobald die Partner passende Dateien bereitstellen. */
.geko-partners-title {
	font-family: "Manrope", sans-serif;
	font-weight: 800;
	color: var(--geko-dark);
	font-size: 26px;
	margin: 10px 0 20px;
}

.geko-partners-strip {
	background: #e5e5e5;
	border-radius: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 50px;
	padding: 36px 30px;
	margin-bottom: 20px;
}

.geko-partner-logo {
	font-family: "Manrope", sans-serif;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: 0.3px;
	color: #55606b;
	text-decoration: none;
	opacity: 0.8;
	transition: opacity 0.2s ease;
}

.geko-partner-logo:hover {
	opacity: 1;
}

/* WooCommerce Germanized haengt automatisch einen eigenen
   "Alle Preise inkl./exkl. MwSt."-Hinweis (".footer-info.vat-info") ganz am
   Seitenende an - unabhaengig vom Divi-Footer-Layout, auf jeder Seite. Der
   Hinweis steht jetzt bereits mit im Copyright-Text (siehe Post 3255,
   Footer-Layout) - Original-Element ausblenden statt doppelt anzuzeigen
   (2026-09-06). */
.footer-info.vat-info {
	display: none;
}

/* Ebenso haengt das WooCommerce-Germanized-Submodul "EU Order Withdrawal
   Button" einen eigenen Absatz ganz am Seitenende an - ausserhalb des
   Divi-Footers, auf jeder Shop-/Produkt-/Konto-Seite, UNABHAENGIG davon ob
   der Besucher je eine Bestellung hatte (siehe print_button() im Plugin:
   prueft nur is_woocommerce()/is_cart()/is_checkout()/is_account_page(),
   nicht ob ueberhaupt ein Vertrag existiert). Kein bekannter Zwang, diesen
   Link ohne jeden Bestellbezug ueberall einzublenden - die eigentliche
   Widerrufsbelehrung ist bereits reguraer im Footer verlinkt. Ueberall
   ausgeblendet, ausser auf der eigenen Zielseite "Vertrag widerrufen"
   selbst (Post 7016, body-Klasse "page-id-7016") - dort soll er
   mindestens erreichbar bleiben ("auf der Widerrufseite muss er
   erscheinen"), damit die Seite nicht ohne den eigentlichen Handlungs-
   Button dasteht (2026-09-08). */
.eu-owb-order-withdraw-from-contract-button {
	display: none;
}

body.page-id-7016 .eu-owb-order-withdraw-from-contract-button {
	display: block;
	margin: 32px 0 0;
	padding: 0;
	text-align: left;
}

body.page-id-7016 .eu-owb-order-withdraw-from-contract-button a.button {
	display: inline-block;
	background: var(--orange);
	color: #ffffff;
	border: none;
	border-radius: 6px;
	font-family: "Manrope", sans-serif;
	font-size: 15px;
	font-weight: 700;
	padding: 12px 24px;
	text-transform: none;
	box-shadow: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.page-id-7016 .eu-owb-order-withdraw-from-contract-button a.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Header-Redesign: Logo-Zeile bekommt einen Mittelblock ("Direkt vom
   Hersteller ...") und eine neu gestaltete Telefon-CTA-Box statt des
   schlichten blauen Anruf-Buttons (2026-09-06). */
.geko-header-usp {
	font-family: "Manrope", sans-serif;
	margin-top: 26px;
	padding-left: 20px;
	border-left: 1px solid #d5dbe0;
}

.geko-header-usp-label {
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--geko-dark);
}

.geko-header-usp-sub {
	font-size: 14px;
	color: var(--slate-500);
	margin-top: 3px;
}

.geko-header-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
	background: var(--geko-dark);
	border-left: 5px solid var(--orange);
	border-radius: 0 6px 6px 0;
	padding: 10px 18px;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.geko-header-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.geko-header-cta-icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--orange);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.geko-header-cta-icon svg {
	width: 19px;
	height: 19px;
}

.geko-header-cta-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	font-family: "Manrope", sans-serif;
}

.geko-header-cta-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.geko-header-cta-number {
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	white-space: nowrap;
}

.geko-header-cta-arrow {
	flex: 0 0 auto;
	display: flex;
	color: rgba(255, 255, 255, 0.55);
	margin-left: 4px;
}

.geko-header-cta-arrow svg {
	width: 18px;
	height: 18px;
}

/* ======================================================================
   Warenkorb- und Kasse-Seite: bislang komplett unstyled/WooCommerce-
   Standard (graue Inputs, duenne Outline-Buttons, kein Branding) - jetzt an
   die uebrige Kartendesign-/Farb-/Font-Sprache angeglichen (Manrope,
   --geko/--orange, weisse Karten mit Schatten), analog zu Produkt- und
   Kontaktseite (2026-09-06). Bewusst breit auf body.woocommerce-cart/
   -checkout gescoped statt auf einzelne Divi-Klassen, da diese Seiten kein
   eigenes Theme-Builder-Body-Layout haben, sondern WooCommerce-Kernmarkup
   direkt im Standard-Seitentemplate rendern. */
body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title {
	font-family: "Manrope", sans-serif;
	font-weight: 800;
	color: var(--geko-dark);
}

/* Hinweis-Leisten: "... wurde deinem Warenkorb hinzugefuegt", "Besitzt du
   bereits ein Kundenkonto?" - vorher eine flache blaue Balkenleiste ohne
   jeden Bezug zum Markendesign. Bewusst auf body.woocommerce-page statt nur
   -cart/-checkout gescoped: Die "hinzugefuegt"-Meldung erscheint direkt auf
   der jeweiligen Produktseite (body-Klasse "single-product", nicht
   "woocommerce-cart") - "woocommerce-page" traegt WooCommerce dagegen auf
   allen Shop-relevanten Seiten gleichermassen ein (2026-09-07). */
body.woocommerce-page .woocommerce-message,
body.woocommerce-page .woocommerce-info {
	font-family: "Manrope", sans-serif;
	background: var(--slate-100) !important;
	color: var(--slate-800) !important;
	border-top: none !important;
	border-left: 4px solid var(--geko);
	border-radius: 8px;
	padding: 16px 20px !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}

body.woocommerce-page .woocommerce-message::before,
body.woocommerce-page .woocommerce-info::before {
	display: none;
}

body.woocommerce-page .woocommerce-message .button,
body.woocommerce-page .woocommerce-info a {
	font-family: "Manrope", sans-serif;
}

/* Der "Klicke hier, um dich anzumelden"-Link erbte noch eine weisse
   Standardfarbe (fuer den alten dunkelblauen Hintergrund gedacht) und war
   auf dem neuen hellen Hinweis-Hintergrund praktisch unsichtbar
   (2026-09-07). */
body.woocommerce-page .woocommerce-info a {
	color: var(--geko) !important;
	font-weight: 700;
	text-decoration: underline;
}

/* ".woocommerce-error" (z.B. "Bitte fuege deine SEPA Kontoinformationen
   ein.", Pflichtfeld-Meldungen beim Absenden eines unvollstaendigen
   Kasse-Formulars) blieb bisher unangetastet im alten WooCommerce-Standard-
   Blau - dabei sind die einzelnen Fehlerzeilen sogar als <a>-Links
   ausgezeichnet (springen zum jeweiligen Feld), deren ererbte Linkfarbe auf
   dem blauen Hintergrund praktisch unsichtbar war (identisches Muster wie
   der "Klicke hier, um dich anzumelden"-Link oben). Gleiche Kartenoptik wie
   die anderen Hinweis-Leisten, aber in der bereits etablierten Fehler-
   Farbpalette (siehe ".stock.out-of-stock", Abschnitt 16) statt Marken-Blau,
   damit ein Fehler auch farblich als Fehler erkennbar bleibt (2026-09-07). */
body.woocommerce-page .woocommerce-error {
	font-family: "Manrope", sans-serif;
	background: #fdecea !important;
	color: #8e1a1a !important;
	border-left: 4px solid #c62828;
	border-radius: 8px;
	padding: 16px 20px !important;
	margin: 0 0 24px;
	list-style: none;
}

body.woocommerce-page .woocommerce-error::before {
	display: none;
}

body.woocommerce-page .woocommerce-error li {
	padding: 4px 0;
}

body.woocommerce-page .woocommerce-error a {
	color: #8e1a1a !important;
	font-weight: 700;
	text-decoration: underline;
}

/* "Warenkorb anzeigen"-Button in der Hinweis-Leiste: eigene, in sich
   geschlossene Regel statt den globalen ".button"-Regeln weiter unten (die
   sind bewusst auf body.woocommerce-cart/-checkout begrenzt, um nicht
   versehentlich andere .button-Elemente auf Produkt-/Shopseiten
   ausserhalb dieses Redesigns zu treffen). */
body.woocommerce-page .woocommerce-message .button {
	background: var(--orange) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
	padding: 10px 22px !important;
	text-transform: none !important;
}

/* Buttons durchgaengig: Marken-Orange statt Standard-Blau/Grau-Outline. */
body.woocommerce-cart .button,
body.woocommerce-checkout .button,
body.woocommerce-checkout #place_order {
	background: var(--orange) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	font-family: "Manrope", sans-serif !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	padding: 13px 26px !important;
	text-transform: none !important;
	box-shadow: none !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.woocommerce-cart .button:hover,
body.woocommerce-checkout .button:hover,
body.woocommerce-checkout #place_order:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

body.woocommerce-cart .button:disabled,
body.woocommerce-cart .button.disabled {
	background: var(--slate-100) !important;
	color: var(--slate-500) !important;
	cursor: not-allowed;
	transform: none;
	box-shadow: none !important;
}

/* Tabellen (Warenkorb, Bestelluebersicht in der Kasse) als weisse Karte
   statt nackter HTML-Tabelle. */
body.woocommerce-cart table.shop_table,
body.woocommerce-checkout table.shop_table {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	border: none;
	font-family: "Manrope", sans-serif;
}

/* Nur die echte Tabellen-Kopfzeile (<thead><th>) dunkel einfaerben - die
   Warenkorb-Summe/Bestelluebersicht-Tabelle hat KEIN <thead>, sondern nutzt
   <th> als Label-Zelle in jeder einzelnen Zeile (Zwischensumme, Sendung,
   MwSt., Gesamtsumme) - ein Selektor auf alle "th" haette dort jede Zeile
   dunkelblau eingefaerbt und Text/Werte unlesbar ueberlagert (2026-09-06). */
body.woocommerce-cart table.shop_table thead th,
body.woocommerce-checkout table.shop_table thead th {
	background: var(--geko-dark);
	color: #fff;
	font-weight: 700;
	padding: 14px 16px;
	border: none;
}

/* Warenkorb-Summe/Bestelluebersicht: eigene Zeilen-Labels (th ohne thead)
   bleiben normaler Text, kein dunkler Balken. */
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-checkout #order_review table.shop_table th {
	background: transparent;
	color: var(--slate-800);
	font-weight: 700;
	padding: 12px 0;
	border: none;
}

/* Verschachtelte Tabelle innerhalb der bereits als Karte gestylten
   Summen-/Bestelluebersicht-Box nicht nochmal als eigene Karte ausgeben
   (sonst Karte-in-Karte). */
body.woocommerce-cart .cart_totals table.shop_table,
body.woocommerce-checkout #order_review table.shop_table {
	box-shadow: none;
	border-radius: 0;
}

body.woocommerce-cart table.shop_table td,
body.woocommerce-checkout table.shop_table td {
	padding: 16px;
	border-bottom: 1px solid var(--slate-100);
}

/* Produktbild in der Warenkorb-Tabelle: WooCommerce-Kern erzwingt per
   !important eine winzige 32px-Miniatur - kaum erkennbar. Rund 3x groesser
   (96px) plus etwas Radius/Rahmen, damit das Bild wieder etwas hermacht
   (2026-09-07). */
body.woocommerce-cart table.shop_table td.product-thumbnail img {
	width: 96px !important;
	height: 96px !important;
	border-radius: 8px;
	border: 1px solid var(--slate-100);
}

/* "Artikel entfernen"-Link: WooCommerce zeigt hier nur ein rohes "x"
   (Zeichen, keine Grafik) in kraeftigem Rot - wirkte wie eine Fehlermeldung
   statt einer normalen Aktion. Text ausgeblendet, stattdessen ein kleiner
   Muelleimer-Umriss als Inline-SVG-Maske (statt eines Icon-Font-Zeichens,
   dessen Glyphe sich ohne Referenztabelle nicht zuverlaessig erraten laesst
   - ein erster Versuch mit einem ETmodules-Zeichencode traf versehentlich
   ein Kalender-Symbol) in gedecktem Rot statt Signalrot (2026-09-07). */
body.woocommerce-cart .product-remove a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: 0;
	color: transparent;
	border-radius: 6px;
	transition: background-color 0.15s ease;
}

body.woocommerce-cart .product-remove a::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-color: #b45454;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color 0.15s ease;
}

body.woocommerce-cart .product-remove a:hover {
	background: #fdecea;
}

body.woocommerce-cart .product-remove a:hover::before {
	background-color: #8e1a1a;
}

body.woocommerce-cart .quantity input.qty,
body.woocommerce-checkout .quantity input.qty {
	border: 1px solid #cccccc !important;
	border-radius: 6px !important;
	background: #fff !important;
	font-family: "Manrope", sans-serif;
	padding: 8px !important;
}

/* "Warenkorb aktualisieren"-Button vor der ersten Mengen-Aenderung:
   WooCommerce liefert ihn mit disabled-Attribut aus. Unsere eigene
   ".button.disabled"-Farbgebung griff zwar bereits, kam aber durch die
   zusaetzliche Browser-Standard-Opacity fuer disabled-Buttons blass/
   uneindeutig ("sieht nach default aus") rueber statt bewusst gestaltet
   auszusehen (2026-09-07). Eigene Opacity fixieren und einen dezenten
   Rahmen in Markenfarbe ergaenzen, statt sich auf die Browser-Vorgabe zu
   verlassen. */
body.woocommerce-cart .button:disabled,
body.woocommerce-cart .button.disabled {
	opacity: 1 !important;
	border: 1px solid var(--slate-100) !important;
}

/* "Weiter zur Kasse": sollte denselben praesenten Stil wie der "In den
   Warenkorb"-Button auf der Produktseite bekommen (Abschnitt 15), aber mit
   einem anderen Symbol als das Warenkorb-Icon dort. Divis eingebautes
   Icon-Feature fuer diesen Button positionierte sein Pfeil-Icon falsch
   (Rest eines viel breiteren Standard-Divi-Buttons, "right: 177px" auf
   einem 160px breiten Button) - eigenes ::after mit einem simplen Pfeil
   ersetzt das zuverlaessiger als Divis Icon-Positionierung zu reparieren
   (2026-09-07). */
/* Divi generiert fuer dieses Modul eine eigene, ID-gestuetzte Regel
   ("#page-container ... .et_pb_wc_cart_totals_0 a.checkout-button.button")
   mit !important, die jede reine Klassen-Regel aussticht (ID schlaegt
   beliebig viele Klassen) - #page-container hier mit aufgenommen, um
   gleichzuziehen und durch die zusaetzlichen Klassen zu gewinnen
   (2026-09-07). */
body.woocommerce-cart #page-container .cart_totals .wc-proceed-to-checkout a.checkout-button.button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 40px 14px 28px !important;
	font-size: 17px !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.woocommerce-cart #page-container .cart_totals .wc-proceed-to-checkout a.checkout-button.button::after {
	content: "\2192" !important;
	font-family: "Manrope", sans-serif !important;
	font-size: 19px !important;
	line-height: 1;
	/* Divi versteckt sein eigenes Icon standardmaessig (opacity:0, nur bei
	   Hover eingeblendet) und positioniert es absolut - fuer ein dauerhaft
	   sichtbares Icon im Flex-Fluss (wie beim "In den Warenkorb"-Button)
	   beides zuruecksetzen (2026-09-07). */
	opacity: 1 !important;
	position: static !important;
	margin-left: 8px;
}

body.woocommerce-cart #page-container .cart_totals .wc-proceed-to-checkout a.checkout-button.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Warenkorb-Summe / Bestellzusammenfassung als eigene Karte. Oben nur 4px
   Innenabstand liess "Warenkorb-Summe" fast an der Kachelkante kleben
   ("benoetigt etwas mehr abstand zur inneren kachelkante") - auf den
   gleichen Wert wie links/rechts angehoben (2026-09-07). */
body.woocommerce-cart .cart_totals,
body.woocommerce-checkout #order_review {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	padding: 24px;
	font-family: "Manrope", sans-serif;
}

body.woocommerce-cart .cart_totals h2,
body.woocommerce-checkout #order_review_heading {
	font-family: "Manrope", sans-serif;
	font-weight: 800;
	color: var(--geko-dark);
}


/* Checkout-Formular: Eingabefelder im selben Stil wie ueberall sonst im
   Shop (Kontaktseite, Anfahrt-Formular). */
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3,
body.woocommerce-checkout #order_review_heading {
	font-family: "Manrope", sans-serif;
	font-weight: 800;
	font-size: 20px;
	color: var(--geko-dark);
}

body.woocommerce-checkout .woocommerce-billing-fields label,
body.woocommerce-checkout .woocommerce-additional-fields label,
body.woocommerce-checkout .woocommerce-shipping-fields label {
	font-family: "Manrope", sans-serif;
	font-weight: 600;
	color: var(--slate-800);
}

body.woocommerce-checkout input.input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea {
	border: 1px solid #cccccc !important;
	border-radius: 6px !important;
	background: #fff !important;
	font-family: "Manrope", sans-serif;
	padding: 10px 12px !important;
	box-shadow: none !important;
}

body.woocommerce-checkout input.input-text:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus {
	border-color: var(--geko) !important;
	outline: none;
}

/* Zahlungsarten-Auswahl. */
body.woocommerce-checkout ul.wc_payment_methods {
	border-top: none;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
	font-family: "Manrope", sans-serif;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label {
	font-weight: 700;
	color: var(--geko-dark);
}

body.woocommerce-checkout .payment_box {
	background: var(--slate-100) !important;
	border-radius: 6px;
	font-family: "Manrope", sans-serif;
}

body.woocommerce-checkout .payment_box::before {
	display: none;
}

/* Suchergebnisseite: "Andere Inhalte" (Seiten/Beitraege, vorher "Weitere
   Ergebnisse") - vorher nackte Blog-Artikel-Optik mit Autor/Datum-Zeile,
   jetzt als schlichte Karten-Liste im Markendesign, ohne die fuer Seiten wie
   AGB/Versandarten irrelevante "von admin | Datum"-Meile (2026-09-07). */
.geko-search-others {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.geko-search-other-item {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	padding: 20px 24px;
	font-family: "Manrope", sans-serif;
}

.geko-search-other-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 800;
}

.geko-search-other-title a {
	color: var(--geko-dark);
	text-decoration: none;
}

.geko-search-other-title a:hover {
	text-decoration: underline;
}

.geko-search-other-excerpt {
	color: var(--slate-500);
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 10px;
}

/* "Meinten Sie...?"-Vorschlag bei Nulltreffern: mehrwortige Anfragen ohne
   Gesamttreffer (z.B. Tippfehler in nur einem Wort) pruefen jedes Wort ab
   3 Zeichen einzeln nach - findet eines davon etwas, wird es hier
   vorgeschlagen statt in einer reinen Sackgasse zu enden (2026-09-07). */
.geko-search-didyoumean {
	margin-top: 20px;
	padding: 16px 20px;
	background: var(--slate-100);
	border-left: 4px solid var(--geko);
	border-radius: 8px;
	font-family: "Manrope", sans-serif;
	color: var(--slate-800);
}

.geko-search-didyoumean a {
	color: var(--geko);
	font-weight: 700;
	text-decoration: underline;
}

/* ======================================================================
   Warenkorb/Kasse Nachbesserung: Schritt-Anzeiger, Karten-Struktur fuer die
   Formular-Abschnitte, Produktbild in der Bestelluebersicht, Zahlungsart-
   Auswahl als auswaehlbare Karten statt nackter Radio-Buttons (2026-09-07).
   ====================================================================== */

/* Schritt-Anzeiger (Warenkorb -> Kasse -> Bestellt). */
.geko-checkout-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 28px;
	font-family: "Manrope", sans-serif;
}

.geko-step {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--slate-500);
	font-weight: 600;
	font-size: 14px;
}

.geko-step-num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--slate-100);
	color: var(--slate-500);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
}

.geko-step.active {
	color: var(--geko-dark);
}

.geko-step.active .geko-step-num {
	background: var(--orange);
	color: #fff;
}

.geko-step.done .geko-step-num {
	background: var(--geko);
	color: #fff;
}

.geko-step.done {
	color: var(--geko-dark);
}

.geko-step-sep {
	width: 40px;
	height: 2px;
	background: var(--slate-100);
}

/* Formular-Abschnitte auf der Kasse-Seite als eigene Karten statt frei im
   Seitenhintergrund schwebend - vorher nur die Bestelluebersicht-Tabelle
   selbst war eine Karte, Rechnungsdaten/Zusaetzliche Informationen nicht. */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	padding: 24px;
	margin-bottom: 24px;
}

body.woocommerce-checkout .woocommerce-checkout-payment {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	padding: 24px;
}

/* Produktbild in der Bestelluebersicht (per Hook ergaenzt, siehe
   functions.php). */
.geko-checkout-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.geko-checkout-item-thumb {
	border-radius: 6px;
	flex: 0 0 auto;
}

/* Zahlungsart-Auswahl als auswaehlbare Karten: umschliessende <li> bekommt
   Rahmen/Hintergrund, sobald ihr eigenes Radio ausgewaehlt ist - modernes
   ":has()" statt JS, da wir hier ohnehin schon an mehreren Stellen darauf
   setzen (Abschnitt 22, Abschnitt 18). */
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 10px;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--geko);
	background: var(--slate-100);
}

/* ======================================================================
   Mobile Header (< 981px): Divi rendert fuer Handy/Tablet ein KOMPLETT
   eigenes, zweites Menu-Modul ("et_pb_menu_1_tb_header") neben dem
   Desktop-Modul ("et_pb_menu_0_tb_header") - beide mit unabhaengig im
   Builder eingestellter Icon-Farbe. Unsere Anpassungen (Abschnitt 5, 17)
   gingen bisher ausschliesslich an "_0_" (Desktop) - "_1_" (Mobile) stand
   noch auf einem alten Divi-Standard-Farbwert (#7EBEC5, tuerkis), der
   nie an die Marke angepasst wurde ("die farben vom warenkorb und
   suchlupe stimmen ja auch noch nicht", 2026-09-07). */
.et_pb_menu_1_tb_header .et_pb_menu__icon.et_pb_menu__search-button,
.et_pb_menu_1_tb_header .et_pb_menu__icon.et_pb_menu__close-search-button,
.et_pb_menu_1_tb_header .et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu_1_tb_header .mobile_nav .mobile_menu_bar:before {
	color: #f39200 !important;
}

/* Gleiche Ausnahme wie auf Desktop (siehe ".dtb-menu ... .geko-cart-has-
   items .et_pb_menu__cart-count" oben): sobald tatsaechlich Artikel im
   Warenkorb liegen, wird der Mengentext weiss statt Icon-Orange - auf
   ausdruecklichen Nutzerwunsch von damals uebertragen auch auf die mobile
   Menu-Instanz ("1-Artikel darf dann auch wieder WEISS werden",
   2026-09-08). */
.et_pb_menu_1_tb_header .et_pb_menu__cart-button.geko-cart-has-items .et_pb_menu__cart-count {
	color: #ffffff !important;
}

/* Hamburger-Icon buendig an den rechten Seitenrand statt mit dem
   Standard-Zeilen-Gutter der mobilen Menu-Zeile davor (10% Gutter auf
   ".et_pb_row_2_tb_header" plus 6px Extra-Rand von Divis eigenem
   ".et_mobile_nav_menu"-Wrapper) - "der hamburgerbutton darf auch gern
   rechtsbuendig sein", 2026-09-07. */
@media (max-width: 980px) {
	.et_pb_row_2_tb_header {
		margin-right: 0 !important;
	}

	.et_pb_menu_1_tb_header .et_mobile_nav_menu {
		margin-right: 0 !important;
	}

	/* Lupe auch auf Mobile an den Anfang der Leiste (Warenkorb, Lupe,
	   Hamburger -> Lupe, Warenkorb, Hamburger), analog zum Desktop-
	   "order:-1" oben - "die lupe wieder nach links", 2026-09-08. */
	.et_pb_menu_1_tb_header .et_pb_menu__search-button {
		order: -1;
	}
}

/* Auf Mobile (< 981px) verdraengten "Direkt vom Hersteller" und die
   Telefon-CTA-Box (siehe .geko-header-usp/.geko-header-cta, Abschnitt zum
   Header-Redesign) viel Platz oberhalb der eigentlichen Warenkorb-/Menu-
   Leiste und liessen die Seite unruhig wirken - auf kleinen Screens
   ausgeblendet, damit direkt Logo -> Warenkorb-Leiste folgt
   ("damit wir eine saubere warenkorb-menu-bar bekommen", 2026-09-07).
   Nicht nur die Inhalte, sondern die ganzen Spalten ausblenden - die
   Spalten selbst (".et_pb_column_1_tb_header"/"_2_tb_header") behalten
   sonst ihr eigenes vertikales Padding/Margin und liessen trotz leerem
   Inhalt einen grossen Leerraum unter dem Logo stehen ("verringere
   erstmal den abstand zum logo", 2026-09-08). */
@media (max-width: 980px) {
	.et_pb_column_1_tb_header,
	.et_pb_column_2_tb_header {
		display: none !important;
	}

	/* Divis eigene Standard-Mobile-Regel (".et_pb_column{width:100%;
	   margin-bottom:30px}") gibt JEDER Spalte auf Mobile 30px Abstand nach
	   unten - fuer normal gestapelten Content gedacht, liess aber unter der
	   letzten (einzigen sichtbaren) Logo-Spalte einen unmotivierten
	   Leerraum vor der Warenkorb-Leiste stehen. Nur fuer die Header-
	   Logo-Spalte entfernt, nicht siteweit, um das normale Stapel-Verhalten
	   auf allen anderen Seiten nicht zu beeinflussen (2026-09-08). */
	.et_pb_column_0_tb_header {
		margin-bottom: 0 !important;
	}
}

/* ======================================================================
   "Bestellung erhalten"-Seite (Kasse -> Danke-Seite nach Bestellabschluss):
   komplett unbehandelt geblieben, obwohl body.woocommerce-checkout schon
   fuer die Kasse selbst gestylt ist - "Vielen Dank"-Kasten, Bestellnummer/
   Datum/Zahlungsart-Zeile, Bankverbindung (Vorkasse) und Adress-Spalten
   sahen noch komplett im alten grauen WooCommerce-Standard aus
   ("benoetigt dringend eine Anpassung", 2026-09-08). Die eigentliche
   Bestelldetails-Tabelle traegt bereits die Klasse "shop_table" und erbt
   dadurch automatisch das Karten-Design von oben - hier fehlten nur die
   Elemente drumherum, die WooCommerce mit eigenen Klassen ausserhalb der
   Tabelle rendert (ul.woocommerce-order-overview, Bankdaten-Liste,
   Adress-Spalten). */
body.woocommerce-checkout .woocommerce-order {
	background: #fff !important;
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	padding: 28px 32px;
	font-family: "Manrope", sans-serif;
}

body.woocommerce-checkout .woocommerce-order > p,
body.woocommerce-checkout .woocommerce-order .wc-bacs-bank-details-heading + p {
	font-family: "Manrope", sans-serif;
	color: var(--slate-800);
}

body.woocommerce-checkout .woocommerce-order .woocommerce-thankyou-order-received {
	font-size: 18px;
	font-weight: 700;
	color: var(--geko-dark);
}

/* Bestellnummer/Datum/Gesamt/Zahlungsart-Zeile als schlichte Kennzahlen-
   Leiste statt Fliesstext mit winzigen Grossbuchstaben-Labels. */
body.woocommerce-checkout ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
	list-style: none;
	margin: 20px 0 28px;
	padding: 20px 0;
	border-top: 1px solid var(--slate-100);
	border-bottom: 1px solid var(--slate-100);
}

body.woocommerce-checkout ul.woocommerce-order-overview li {
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--slate-500);
}

body.woocommerce-checkout ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	font-weight: 800;
	text-transform: none;
	letter-spacing: normal;
	color: var(--geko-dark);
}

/* Ueberschriften innerhalb der Danke-Seite (Bankverbindung, Bestelldetails,
   Rechnungs-/Lieferadresse) im gleichen Stil wie die uebrigen Checkout-
   Ueberschriften oben (var(--geko-dark), Manrope, fett). */
body.woocommerce-checkout .woocommerce-order h2 {
	font-family: "Manrope", sans-serif;
	font-weight: 800;
	font-size: 20px;
	color: var(--geko-dark);
	margin-top: 32px;
}

/* Bankverbindungs-Hinweis (Zahlung per Vorkasse) als eigene helle Karte,
   analog zur Zahlungsarten-Auswahl auf der Kasse selbst. */
body.woocommerce-checkout ul.wc-bacs-bank-details {
	list-style: none;
	margin: 12px 0 0;
	padding: 16px 20px;
	background: var(--slate-100);
	border-radius: 8px;
}

body.woocommerce-checkout ul.wc-bacs-bank-details li {
	font-family: "Manrope", sans-serif;
	padding: 4px 0;
}

body.woocommerce-checkout ul.wc-bacs-bank-details li strong {
	color: var(--geko-dark);
}

/* Rechnungs-/Lieferadresse als Karten statt duenn umrandeter Kaesten. */
body.woocommerce-checkout .woocommerce-customer-details .woocommerce-column {
	background: var(--slate-100);
	border: none;
	border-radius: 8px;
	padding: 20px;
}

body.woocommerce-checkout .woocommerce-customer-details .woocommerce-column__title {
	font-family: "Manrope", sans-serif;
	font-weight: 800;
	font-size: 18px;
	color: var(--geko-dark);
	margin-top: 0;
}

body.woocommerce-checkout .woocommerce-customer-details address {
	font-family: "Manrope", sans-serif;
	font-style: normal;
	color: var(--slate-800);
	line-height: 1.6;
}

/* Bestelldetails-Tabelle auf der Danke-Seite sprengte auf schmalen
   Screens die ganze Seite horizontal (die "Gesamtsumme"-Kopfzelle
   erzwang per Inhalts-basiertem table-layout eine Breite von 461px in
   einem 390px-Viewport, obwohl die Tabelle selbst auf 100% gesetzt war -
   ".shop_table_responsive", das dieses Problem beim Warenkorb per
   Umbruch-Layout loest, fehlt bei dieser WooCommerce-Kern-Tabelle).
   table-layout:fixed zwingt die Spalten, sich an die tatsaechliche
   Tabellenbreite zu halten statt am Inhalt (2026-09-08). Gleicher Fehler
   auf der Kasse-Formularseite selbst gefunden ("Deine Bestellung"-
   Uebersicht, andere Klasse "woocommerce-checkout-review-order-table",
   identisches Problem) - deshalb beide Tabellenklassen hier zusammen
   behandelt (2026-09-08). */
@media (max-width: 600px) {
	body.woocommerce-checkout table.woocommerce-table--order-details,
	body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
		table-layout: fixed;
		width: 100%;
	}

	body.woocommerce-checkout table.woocommerce-table--order-details th,
	body.woocommerce-checkout table.woocommerce-table--order-details td,
	body.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
	body.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	/* Feste 50/50-Aufteilung liess Labels wie "Zwischensumme:" mitten im
	   Wort umbrechen - zweite Spalte (Preis/Wert) braucht deutlich
	   weniger Platz als die erste (Produktname/Label). */
	body.woocommerce-checkout table.woocommerce-table--order-details th:first-child,
	body.woocommerce-checkout table.woocommerce-table--order-details td:first-child,
	body.woocommerce-checkout table.woocommerce-checkout-review-order-table th:first-child,
	body.woocommerce-checkout table.woocommerce-checkout-review-order-table td:first-child {
		width: 52%;
	}

	body.woocommerce-checkout table.woocommerce-table--order-details th:last-child,
	body.woocommerce-checkout table.woocommerce-table--order-details td:last-child,
	body.woocommerce-checkout table.woocommerce-checkout-review-order-table th:last-child,
	body.woocommerce-checkout table.woocommerce-checkout-review-order-table td:last-child {
		width: 48%;
	}
}

/* Auf Mobile addierte sich unser eigenes Karten-Padding (28px/32px) mit
   dem 10%-Zeilen-Gutter, das Divi der umgebenden Reihe schon mitgibt
   (".et_pb_row" bekommt auf schmalen Screens automatisch links/rechts
   Aussenabstand) - macht in Summe ~71px Leerraum je Seite auf einem
   390px-Screen, fast zwei Drittel der Breite fuer Rand statt Inhalt
   ("ueberfluessigen Rand in der mobile Ansicht reduzieren", 2026-09-08).
   Karten-Padding auf Mobile deutlich reduziert, der Zeilen-Gutter bleibt
   als einziger Aussenabstand bestehen. */
@media (max-width: 600px) {
	body.woocommerce-checkout .woocommerce-order {
		padding: 20px;
		border-radius: 0;
	}
}

/* Root-Cause-Fix statt nur Kompensation: die umgebende Divi-Zeile
   (".et_pb_row_2" in diesem Theme-Builder-Body-Layout) war auf 80% Breite
   der Section gestellt statt 100% - urspruenglich vermutlich fuer
   Kachel-/Grid-Layouts (Produktbilder, "Das koennte dich auch
   interessieren") gedacht, wo eine schmalere Spalte Sinn ergibt. Auf der
   Bestellung-erhalten-Seite gibt es aber gar keine Kacheln, nur die eine
   Karte - die 80%-Vorgabe kostete auf Desktop unnoetig Breite UND war der
   eigentliche Grund fuer die 10%-Rand-Zeilen-Gutter auf Mobile (siehe
   Karten-Padding-Fix oben). Auf 100% gesetzt kommt sowohl der Desktop-
   als auch der Mobile-Ansicht zugute ("waere gut fuer die Desktop-Sicht",
   2026-09-08). Ueber body.woocommerce-checkout skopiert, damit nur die
   Kasse/Bestellung-erhalten-Seite betroffen ist, nicht z.B. die
   Produktseite, die dieselbe Zeilen-Klassennummerierung in einem anderen
   Theme-Builder-Layout verwenden koennte. */
body.woocommerce-checkout .et_pb_row_2 {
	width: 100% !important;
	max-width: 1400px !important;
}

/* ".et_pb_row_1" (Rechnungsdaten-Formular auf der Kasse-Formularseite,
   existiert nur dort, nicht auf der Bestellung-erhalten-Seite) war beim
   ersten Durchgang uebersehen worden - blieb auf der alten 80%-Breite
   stehen, waehrend "et_pb_row_2" (Deine Bestellung/Zahlung) bereits auf
   100% + 20px-Rand umgestellt war. Zwei unterschiedliche Raender auf
   derselben Seite ("der Rand ist nicht wie bei [Warenkorb/Bestellung
   erhalten]", 2026-09-08). */
body.woocommerce-checkout .et_pb_row_1 {
	width: 100% !important;
	max-width: 1400px !important;
}

/* "Kasse"-Seitentitel-Modul (Divis generisches "Post Title"-Modul,
   ".et_pb_post_title_0") nimmt auf Mobile viel Platz mit fast nur
   Leerraum ein, waehrend die eigentliche Orientierung laengst vom
   Schritt-Anzeiger direkt darunter uebernommen wird - auf schmalen
   Screens komplett ausgeblendet. Ueber body.woocommerce-checkout
   skopiert, betrifft also Kasse-Formular UND Bestellung-erhalten,
   nicht aber die Warenkorb-Seite (2026-09-08). */
@media (max-width: 980px) {
	body.woocommerce-checkout .et_pb_post_title_0 {
		display: none !important;
	}

	/* Divis eigene Mobile-Standardregel gibt JEDER Zeile 30px Padding
	   oben/unten (".et_pb_row{padding:30px 0}", vom Nutzer selbst im
	   "dynamic critical inline" CSS gefunden) - fuer die eine Karte auf
	   dieser Seite unnoetiger Leerraum ueber und unter dem Inhalt.
	   Wieder ueber body.woocommerce-checkout auf Kasse/Bestellung-
	   erhalten beschraenkt (2026-09-08). Auf der Bestellung-erhalten-
	   Seite bringt ".woocommerce-order" selbst schon 20px Karten-Padding
	   mit, deshalb dort komplett auf 0 - auf der Kasse-Formularseite
	   selbst gibt es keine solche Karte um die "Deine Bestellung"-Tabelle,
	   daher dort 20px horizontal nachgezogen, sonst sitzt sie randlos da
	   ("mir fehlt der Rand rechts-links", 2026-09-08). */
	body.woocommerce-checkout.woocommerce-order-received .et_pb_row_2 {
		padding: 0 !important;
	}

	body.woocommerce-checkout:not(.woocommerce-order-received) .et_pb_row_2 {
		padding: 0 20px !important;
	}

	body.woocommerce-checkout .et_pb_row_1 {
		padding: 0 20px !important;
	}

	/* Gleiche Regel auch fuer die (jetzt ausgeblendete) "Kasse"-Titel-Zeile
	   ".et_pb_row_0" - das Modul selbst ist per display:none weg, aber
	   das Padding gehoert der Vollstaendigkeit halber ebenfalls entfernt
	   (2026-09-08). */
	body.woocommerce-checkout .et_pb_row_0 {
		padding: 0 !important;
	}

	/* Gleiches Muster eine Ebene hoeher: Divis Mobile-Standardregel gibt
	   JEDER Section 50px Padding oben/unten (".et_pb_section{padding:50px
	   0}", ebenfalls vom Nutzer im Inline-CSS gefunden) - addierte sich
	   zusaetzlich zum Zeilen-Padding oben zu unnoetigem Leerraum
	   (2026-09-08). */
	body.woocommerce-checkout .et_pb_section_0 {
		padding: 0 !important;
	}
}

/* ======================================================================
   Warenkorb-Seite (/warenkorb/, body.woocommerce-cart): dieselben
   Massnahmen wie eben bei "Bestellung erhalten" (Abschnitt 47) - war
   bisher nicht mitgezogen worden, obwohl exakt dasselbe Divi-Zeilen-/
   Section-Muster (80%-Breite, 30px/50px Mobile-Padding) hier ebenfalls
   greift. Zwei Zeilen betroffen: ".et_pb_row_0" (Produkttabelle) und
   ".et_pb_row_1" (Warenkorb-Summe-Karte) - beide in derselben
   ".et_pb_section_0" ("hast du alle Checkout-Seiten geprueft? .. die
   selben Massnahmen", 2026-09-08). */
body.woocommerce-cart .et_pb_row_0,
body.woocommerce-cart .et_pb_row_1 {
	width: 100% !important;
	max-width: 1400px !important;
}

@media (max-width: 980px) {
	body.woocommerce-cart .et_pb_post_title_0 {
		display: none !important;
	}

	/* Nur vertikal auf 0, horizontal 20px behalten: anders als bei
	   "Bestellung erhalten" (wo ".woocommerce-order" selbst schon 20px
	   Karten-Padding mitbringt) haben Produkttabelle und Warenkorb-Summe
	   hier keine eigene Umhuellung mit Seiten-Padding - das bisherige
	   "Rand"-Gefuehl kam ausschliesslich vom jetzt entfernten 80%-Zeilen-
	   Gutter. Ohne Ersatz stuenden Tabelle/Papierkorb-Icon/Text ploetzlich
	   ohne jeden Randabstand da ("mir fehlt der Rand rechts-links",
	   2026-09-08). */
	body.woocommerce-cart .et_pb_row_0,
	body.woocommerce-cart .et_pb_row_1 {
		padding: 0 20px !important;
	}

	body.woocommerce-cart .et_pb_section_0 {
		padding: 0 !important;
	}
}

@media (max-width: 600px) {
	body.woocommerce-cart table.shop_table,
	body.woocommerce-cart .cart_totals {
		border-radius: 0 !important;
	}
}

/* Das Divi-Modul, das Zahlungsarten/AGB-Checkbox (Kasse) bzw. die
   "Vielen Dank"-Box (Bestellung erhalten) umschliesst, hat im Builder
   selbst eine graue Hintergrundfarbe eingestellt (rgb(235,233,235)) -
   frueher durch das jetzt entfernte 30px/50px-Zeilen-/Section-Padding
   komplett kaschiert, seitdem als merkwuerdige graue Kante ueber dem
   Zahlungsbereich sichtbar ("diese merkwuerdige graue Kante",
   2026-09-08). Modul braucht keine eigene Flaeche, die weissen Karten
   darin (Zahlungsarten-Liste, .woocommerce-order) uebernehmen das
   bereits selbst. */
body.woocommerce-checkout .et_pb_wc_checkout_payment_info {
	background: transparent !important;
}

/* ======================================================================
   "Mein Konto" - Bestelldetails-Ansicht (/mein-konto/view-order/<ID>/):
   komplett unbehandelt geblieben, obwohl sie dieselben WooCommerce-
   Kernklassen wie die Bestellung-erhalten-Seite (Abschnitt 47) nutzt -
   Tabelle, Adress-Karten und Ueberschriften waren aber jeweils nur unter
   "body.woocommerce-checkout" gestylt, nicht unter "body.woocommerce-
   account". Statt jede bestehende Regel einzeln umzuschreiben, hier die
   wichtigsten Karten-/Tabellen-Regeln fuer den Konto-Kontext dupliziert
   ("guck mal hier /mein-konto/view-order .. ohje", 2026-09-08). */
body.woocommerce-account table.shop_table {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	border: none;
	font-family: "Manrope", sans-serif;
}

body.woocommerce-account table.shop_table thead th {
	background: var(--geko-dark);
	color: #fff;
	font-weight: 700;
	padding: 14px 16px;
	border: none;
}

body.woocommerce-account table.shop_table td {
	padding: 16px;
	border-bottom: 1px solid var(--slate-100);
}

body.woocommerce-account .woocommerce-order-details__title,
body.woocommerce-account .woocommerce-column__title,
body.woocommerce-account .wc-bacs-bank-details-heading {
	font-family: "Manrope", sans-serif;
	font-weight: 800;
	color: var(--geko-dark);
}

body.woocommerce-account .woocommerce-customer-details .woocommerce-column {
	background: var(--slate-100);
	border: none;
	border-radius: 8px;
	padding: 20px;
}

@media (max-width: 600px) {
	body.woocommerce-account table.woocommerce-table--order-details {
		table-layout: fixed;
		width: 100%;
	}

	body.woocommerce-account table.woocommerce-table--order-details th,
	body.woocommerce-account table.woocommerce-table--order-details td {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	body.woocommerce-account table.woocommerce-table--order-details th:first-child,
	body.woocommerce-account table.woocommerce-table--order-details td:first-child {
		width: 52%;
	}

	body.woocommerce-account table.woocommerce-table--order-details th:last-child,
	body.woocommerce-account table.woocommerce-table--order-details td:last-child {
		width: 48%;
	}
}

/* Konto-Navigation ("Dashboard, Bestellungen, Downloads, Adressen,
   Kontodetails, Abmelden"): die erste Version (einzelne Pill-Buttons pro
   Punkt) wirkte zu sehr wie verstreute Action-Buttons statt wie eine
   Seitennavigation - auf Wunsch zu einer echten Menueliste gemacht: eine
   zusammenhaengende Karte, Punkte als volle Zeilen untereinander mit
   duennen Trennlinien, aktive Seite per orangem linken Rand + Fettschrift
   statt vollflaechiger Einfaerbung markiert (2026-09-08). Die dadurch
   freigewordene Pill-Optik wandert stattdessen zu den echten Aktions-
   Buttons (siehe ".woocommerce-button.button" unten - "das waere so ein
   Aktionsbutton wie er jetzt noch fuer Dashboard/Bestellungen genutzt
   wird"). */
body.woocommerce-account .woocommerce-MyAccount-navigation {
	/* Divi/WooCommerce geben dem "nav"-Element selbst standardmaessig
	   "display:flex" mit - dadurch schrumpfte die einzige "ul"-Kindzeile
	   auf ihre Inhaltsbreite zusammen (157px statt 312px), was die
	   Menuepunkte wie zentriert statt linksbuendig-ueber-volle-Breite
	   aussehen liess ("das Menue ist noch nicht ganz was ich dachte",
	   2026-09-08). */
	display: block;
	background: #fff;
	border: 1px solid var(--slate-100);
	border-radius: 12px;
	overflow: hidden;
	margin: 0 0 24px;
	font-family: "Manrope", sans-serif;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	border-bottom: 1px solid var(--slate-100);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
	border-bottom: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-left: 4px solid transparent;
	color: var(--slate-800);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a::after {
	content: "\2192";
	color: var(--slate-500);
	font-size: 14px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--slate-100);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	border-left-color: var(--orange);
	background: var(--slate-100);
	color: var(--geko-dark);
	font-weight: 800;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::after {
	color: var(--orange);
}

/* "Anzeigen"/"Erneut bestellen"-Buttons in der Bestellliste (/mein-konto/
   orders/) waren noch als duenner blauer Outline-Button im WooCommerce-
   Standard-Look da - jetzt im selben Pill-Stil, den die Navigation vorher
   hatte (voll abgerundet, Marken-Orange). */
body.woocommerce-account .woocommerce-button.button {
	display: inline-block;
	background: var(--orange);
	color: #fff;
	border: none;
	border-radius: 20px;
	font-family: "Manrope", sans-serif;
	font-weight: 700;
	text-transform: none;
	padding: 8px 20px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.woocommerce-account .woocommerce-button.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Gleiches Divi-Mobile-Standardregel-Muster wie bei Warenkorb/Kasse
   (Abschnitt 48) auch auf "Mein Konto" gefunden und vom Nutzer selbst per
   Devtools ausprobiert: die Zeile ".et_pb_row_0" (umschliesst Navigation +
   Inhalt) braucht ihr 30px-Vertikalpadding hier gar nicht - komplett weg,
   da diese Zeile (anders als bei Warenkorb/Kasse) NICHT auf 100% Breite
   umgestellt wurde und ihren Randabstand weiterhin ganz normal aus der
   eigenen 80%-Breite bezieht. Die Section bekommt statt der vollen 50px
   nur noch einen kleinen 1rem-Abstand nach oben, keinen nach unten - Wert
   vom Nutzer selbst per Devtools getestet (2026-09-08). */
@media (max-width: 980px) {
	body.woocommerce-account .et_pb_row_0 {
		padding: 0 !important;
	}

	body.woocommerce-account .et_pb_section_0 {
		padding-top: 1rem !important;
		padding-bottom: 0 !important;
	}
}

/* Unterkategorie-Kacheln auf Kategorie-Archivseiten (z.B. "Maschinenzubehoer"
   -> "Zubehoer-M") - bewusst im selben Kachel-Design wie die "GEKO
   Shopkategorien" auf der Startseite (siehe ".geko-cat-card" oben), damit
   sofort erkennbar ist "das ist eine Kategorie, kein Produkt", ohne ein
   neues visuelles Muster einzufuehren. Eigene Klassen statt ".geko-cat-*"
   wiederzuverwenden, da hier variable Kachel-Anzahl (meist nur 1-2) statt
   der festen 5-Spalten-Startseiten-Reihe noetig ist (2026-09-08). */
.geko-subcat-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 30px;
}

.geko-subcat-card {
	display: block;
	width: 220px;
	text-decoration: none;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	transition: transform 0.2s ease;
}

.geko-subcat-card:hover {
	transform: translateY(-4px);
}

.geko-subcat-card .geko-subcat-image {
	height: 160px;
	overflow: hidden;
	border: 8px solid #fff;
	background: var(--slate-100);
	display: flex;
	align-items: center;
	justify-content: center;
}

.geko-subcat-card .geko-subcat-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(50%);
}

.geko-subcat-card .geko-subcat-image svg {
	color: var(--geko);
}

.geko-subcat-card .geko-subcat-label {
	background: var(--orange);
	padding: 12px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	font-family: "Manrope", sans-serif;
}

.geko-subcat-card .geko-subcat-label span {
	display: block;
	font-weight: 600;
	font-size: 12px;
	opacity: 0.85;
	margin-top: 2px;
}

@media (max-width: 600px) {
	.geko-subcat-card {
		width: calc(50% - 10px);
	}
}