/*
Theme Name: Hello Elementor Child
Theme URI: https://metallarbeiten-looschen.de/
Description: Child-Theme für Metallarbeiten Looschen. Enthält nur das, was Elementor nicht abdeckt.
Author: Metallarbeiten Looschen
Template: hello-elementor
Version: 1.1
*/

/* =====================================================
   HINWEIS

   Diese Datei wird erst geladen, seit die functions.php sie einbindet
   (Abschnitt 1). Hello Elementor bindet Child-Stylesheets nicht von
   selbst ein – vorher hatte hier nichts eine Wirkung.

   Alles, was Elementor abdeckt (Schriften, Farben, Abstände der Widgets),
   gehört NICHT hierher, sondern in den Theme Builder. Hier steht nur, was
   aus der functions.php und aus WooCommerce kommt.
   ===================================================== */


/* =====================================================
   0) Ladeanzeige – Sanduhr am Mauszeiger
   -----------------------------------------------------
   Wird von js/ladeanzeige.js gesetzt, sobald eine neue Seite
   angefordert wird, und beim Ankommen wieder entfernt.

   Hier ist !important ausnahmsweise richtig: Links, Knöpfe und
   Eingabefelder bringen alle ihren eigenen Mauszeiger mit. Ohne
   !important müsste man jeden davon einzeln überschreiben – das
   wäre deutlich mehr Verbiegung als diese eine Zeile.
   ===================================================== */

html.ml-laedt,
html.ml-laedt * {
	cursor: progress !important;
}

/* =====================================================
   1) Versandkosten-Hinweis
   -----------------------------------------------------
   Ausgabe des Shortcodes [custom_shipping_info],
   platziert in der Vorlage „Elementor Produkt".
   ===================================================== */

.ml-shipping-cost {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	padding: 10px 14px;
	border: 1px solid #e2ded8;
	border-radius: 8px;
	background: #f7f5f2;
	font-size: 14px;
	line-height: 1.5;
}

.ml-shipping-cost strong {
	font-weight: 600;
}


/* =====================================================
   2) Hinweis auf Motiv-Produktseiten
   -----------------------------------------------------
   Ausgabe des Shortcodes [motiv_hinweis].
   ===================================================== */

.motif-only-box {
	margin: 20px 0;
	padding: 18px 20px;
	border: 1px solid #e2ded8;
	border-left: 4px solid #1a1a1a;
	border-radius: 10px;
	background: #f7f5f2;
}

.motif-hint {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.5;
}

/*
 * Die Hauptprodukte im Hinweiskasten benutzen dieselben Kacheln wie die
 * Startseite. Hier stehen sie auf hellem Grund, deshalb bekommen sie
 * einen weißen Hintergrund, damit sie sich absetzen.
 */
/*
 * Im Hinweiskasten stehen nur eine Handvoll Hauptprodukte. Mit
 * "minmax(160px, 1fr)" teilten sie die ganze Zeile unter sich auf: bei
 * zwei Produkten wurde daraus zweimal 370 Bildpunkte - groesser als die
 * Kacheln auf den Uebersichtsseiten, obwohl sie hier nur ein Hinweis
 * sind. Die zweite Zahl begrenzt sie jetzt; sie fuellen die Zeile nicht
 * mehr aus, sondern stehen links nebeneinander.
 *
 * Der Vorsatz ".ml-kacheln" ist noetig, nicht schoen: ".motif-produkte"
 * und ".ml-kacheln" sind beide eine einzelne Klasse, also gleich stark -
 * und ".ml-kacheln" steht 660 Zeilen weiter unten. Bei Gleichstand
 * gewinnt die spaetere Regel. Beide Klassen zusammen wiegen mehr.
 */
.ml-kacheln.motif-produkte {
	grid-template-columns: repeat(auto-fill, minmax(110px, 140px));
	justify-content: start;
	gap: 12px;
}

.ml-kacheln.motif-produkte .ml-kachel {
	background: #fff;
}

.ml-kacheln.motif-produkte .ml-kachel__name {
	font-size: 15px;
}

.motif-config-button {
	display: inline-block;
	padding: 12px 22px;
	border: 1px solid #1a1a1a;
	border-radius: 8px;
	background: #1a1a1a;
	color: #fff;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease;
}

.motif-config-button:hover,
.motif-config-button:focus {
	background: #333;
	color: #fff;
	text-decoration: none;
}


/* =====================================================
   3) Produktbeschreibung
   -----------------------------------------------------
   Schriftgröße, -stärke und Farbe der Abschnittsüberschriften kommen NICHT
   von hier, sondern aus Elementor:

     Vorlagen → Theme Builder → „Elementor Produkt"
       → Widget „Produkt-Daten-Tabs" → Stil → Inhalt → Überschrift

   Empfohlene Werte dort: Farbe #333333, Schriftstärke 600, Größe 25 px.
   Diese Regel hängt an der Element-ID und schlägt jedes CSS von hier –
   überschreiben ginge nur mit !important.

   Hier bleiben Abstände, Listen und die FAQ-Fragen (die setzt Elementor nicht).
   ===================================================== */

.woocommerce-Tabs-panel--description h2 {
	margin: 38px 0 12px;
}

.woocommerce-Tabs-panel--description h2:first-child {
	margin-top: 0;
}

.woocommerce-Tabs-panel--description h3 {
	margin: 22px 0 6px;
	color: #333;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}

.woocommerce-Tabs-panel--description p {
	margin: 0 0 14px;
	line-height: 1.65;
}

.woocommerce-Tabs-panel--description ul,
.woocommerce-Tabs-panel--description ol {
	margin: 0 0 18px;
	padding-left: 22px;
	line-height: 1.65;
}

.woocommerce-Tabs-panel--description li {
	margin: 0 0 6px;
}

.woocommerce-Tabs-panel--description hr {
	margin: 32px 0;
	border: 0;
	border-top: 1px solid #e2ded8;
}


/* =====================================================
   4) Kopfzeile auf dem Handy
   -----------------------------------------------------
   Ausgangslage: die Kopfzeile war 395 px hoch – 45 % der ersten
   Ansicht, bevor ein einziger Inhalt kam. Grund ist der Aufbau der
   Elementor-Vorlage #2614: links eine 70-%-Spalte mit Logo UND
   Chat-Knopf untereinander, rechts eine 30-%-Spalte mit Warenkorb
   UND Menüknopf untereinander. Dazu oben vier Kontaktzeilen und
   eine Reihe Sozialsymbole.

   Hier wird nichts an der Vorlage geändert, nur die Darstellung
   unterhalb 767 px. Die Desktop-Ansicht bleibt damit unberührt,
   und ein Zurückdrehen heißt: diesen Abschnitt löschen.

   Die Regeln hängen an den Element-IDs aus #2614:
     b827c43   obere Leiste          3a76b9c  Kontaktliste
     7585eea   Sozialsymbole         79b1f482 Hauptleiste
     691262c   Logo (mobil)          c249e2c  Block „Chat starten"
     b04c735   Warenkorb             4a4e61b  Menüknopf
   ===================================================== */

@media (max-width: 767px) {

	/*
	 * Zur Spezifität: Elementor schreibt seine Abstände als
	 *   .elementor-2614 .elementor-element.elementor-element-XXX { … }
	 * Das sind drei Klassen. Eine Regel mit nur einer Klasse verliert
	 * dagegen. Deshalb steht vor den Abstandsregeln jeweils
	 *   header.elementor-location-header .elementor-element.elementor-element-XXX
	 * – drei Klassen plus ein Element, das gewinnt knapp und ohne
	 * !important, das hier sonst überall stünde.
	 */

	/* --- Obere Leiste: eine Zeile statt fünf ---------------- */

	/* Kontaktliste und Sozialsymbole nebeneinander statt gestapelt */
	.elementor-element-b827c43 > .elementor-container {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}

	.elementor-element-b827c43 .elementor-column {
		width: auto;
	}

	.elementor-element-b827c43 .elementor-column:first-child {
		flex: 1 1 auto;
		min-width: 0;
	}

	.elementor-element-b827c43 .elementor-column:last-child {
		flex: 0 0 auto;
	}

	header.elementor-location-header .elementor-element.elementor-element-b827c43 {
		padding-top: 4px;
		padding-bottom: 4px;
	}

	.elementor-element-b827c43 .elementor-element-populated {
		padding-top: 0;
		padding-bottom: 0;
	}

	/*
	 * In der Vorlage steht für diese Leiste eine Mindesthöhe von
	 * 112 px – gedacht für den Desktop, auf dem dort vier Zeilen
	 * stehen. Bei einer Zeile ist das nur Leerraum.
	 */
	header.elementor-location-header .elementor-element.elementor-element-b827c43 > .elementor-container {
		min-height: 0;
	}

	/* Die beiden Widgets tragen 26 bzw. 16 px Abstand nach oben. */
	header.elementor-location-header .elementor-element.elementor-element-3a76b9c,
	header.elementor-location-header .elementor-element.elementor-element-7585eea {
		margin-top: 0;
		margin-bottom: 0;
	}

	/* Elementor gibt jedem Widget unten Abstand – in einer einzeiligen
	   Leiste ist das nur Leerraum. */
	.elementor-element-b827c43 .elementor-widget:not(:last-child) {
		margin-bottom: 0;
	}

	/*
	 * Von den vier Kontaktzeilen bleibt nur die Telefonnummer stehen.
	 * E-Mail und Öffnungszeiten sind auf dem Handy zwei Fingertipps
	 * entfernt (Menü und Fußzeile) und kosten hier vier Zeilen.
	 */
	.elementor-element-3a76b9c .elementor-icon-list-item:not(:first-child) {
		display: none;
	}

	.elementor-element-3a76b9c .elementor-icon-list-item a {
		font-size: 15px;
		font-weight: 600;
	}

	/* Sozialsymbole kleiner und rechtsbündig */
	.elementor-element-7585eea .elementor-social-icons-wrapper {
		display: flex;
		justify-content: flex-end;
		gap: 2px;
	}

	.elementor-element-7585eea .elementor-social-icon {
		--icon-padding: 0.35em;
		font-size: 14px;
		margin: 0;
	}

	/* --- Hauptleiste: Logo links, Warenkorb und Menü rechts --- */

	.elementor-element-79b1f482 > .elementor-container {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}

	header.elementor-location-header .elementor-element.elementor-element-79b1f482 {
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.elementor-element-79b1f482 .elementor-element-populated {
		padding-top: 0;
		padding-bottom: 0;
	}

	/* Der Knopf „Chat starten" wandert aus der Leiste heraus.
	   WhatsApp bleibt über das Sozialsymbol oben erreichbar. */
	.elementor-element-c249e2c {
		display: none;
	}

	/*
	 * Das Logo trug 10 px oben und 30 px unten Außenabstand – allein
	 * das waren 40 der 395 px. Auf dem Handy sitzt es mittig in der
	 * Leiste, dafür braucht es keinen Abstand.
	 */
	header.elementor-location-header .elementor-element.elementor-element-691262c {
		margin: 0;
	}

	/* Logo linksbündig statt in seiner Spalte zentriert */
	.elementor-element-691262c,
	.elementor-element-691262c .elementor-widget-container {
		text-align: left;
	}

	.elementor-element-691262c img {
		max-height: 44px;
		width: auto;
	}

	/* Auch die Hauptleiste bringt eine Mindesthöhe aus der Vorlage mit */
	header.elementor-location-header .elementor-element.elementor-element-79b1f482 > .elementor-container {
		min-height: 0;
	}

	/* Warenkorb und Menüknopf nebeneinander, rechtsbündig */
	.elementor-element-1ce230b0 > .elementor-widget-wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
	}

	.elementor-element-1ce230b0 > .elementor-widget-wrap > .elementor-widget {
		width: auto;
		margin-bottom: 0;
	}

	header.elementor-location-header .elementor-element.elementor-element-b04c735,
	header.elementor-location-header .elementor-element.elementor-element-4a4e61b {
		margin: 0;
	}

	.elementor-element-b04c735 .elementor-menu-cart__toggle .elementor-button {
		padding: 6px 10px;
		font-size: 14px;
	}

	/* Der Menüknopf ist ein Bedienelement – 44 px sind das Minimum,
	   das sich zuverlässig treffen lässt. */
	.elementor-element-4a4e61b .elementor-menu-toggle {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* --- Das aufgeklappte Menü ------------------------------- */

	/*
	 * Bisher war es ein schmales Kästchen mit gepunktetem Rand, das
	 * sich über das Logo legte und dessen Einträge umbrachen.
	 * Es soll über die volle Breite unter der Kopfzeile liegen.
	 *
	 * Dafür muss die Kopfzeile der Bezugspunkt sein: alles
	 * dazwischen wird auf position:static gesetzt, sonst richtet
	 * sich das Menü am nächstgelegenen Vorfahren aus – und das ist
	 * heute die 30-%-Spalte.
	 */
	header.elementor-location-header {
		position: relative;
		z-index: 100;
	}

	.elementor-element-79b1f482,
	.elementor-element-79b1f482 > .elementor-container,
	.elementor-element-1ce230b0,
	.elementor-element-1ce230b0 > .elementor-widget-wrap,
	.elementor-element-4a4e61b,
	.elementor-element-4a4e61b .elementor-widget-container {
		position: static;
	}

	/*
	 * Achtung: die Klasse elementor-nav-menu--dropdown tragen auch die
	 * Untermenüs von „Feuerstellen" und „Shop" (als ul.sub-menu).
	 * Deshalb hier ausdrücklich nur der nav-Container – sonst würden
	 * die Untermenüs mit unter die Kopfzeile gezogen.
	 */
	.elementor-element-4a4e61b nav.elementor-nav-menu--dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
		border: 0;
		border-top: 1px solid #e2ded8;
		box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
		background: #fff;
	}

	.elementor-element-4a4e61b nav.elementor-nav-menu--dropdown li {
		border-bottom: 1px solid #ececec;
	}

	.elementor-element-4a4e61b nav.elementor-nav-menu--dropdown > ul > li:last-child {
		border-bottom: 0;
	}

	/* Zeilenhöhe so, dass sie sich mit dem Daumen treffen lässt.
	   44 px gelten als Untergrenze für Bedienelemente. */
	header.elementor-location-header .elementor-element.elementor-element-4a4e61b nav.elementor-nav-menu--dropdown a.elementor-item {
		padding: 14px 20px;
		font-size: 17px;
		line-height: 1.35;
		white-space: normal;
	}

	header.elementor-location-header .elementor-element.elementor-element-4a4e61b nav.elementor-nav-menu--dropdown a.elementor-sub-item {
		padding: 12px 20px 12px 36px;
		font-size: 16px;
		line-height: 1.35;
		white-space: normal;
	}

	/* Untermenüs leicht abgesetzt, damit die Ebene erkennbar bleibt */
	.elementor-element-4a4e61b nav.elementor-nav-menu--dropdown ul.sub-menu {
		background: #f7f5f2;
	}
}


/* =====================================================
   5) WhatsApp-Knopf, der mitläuft
   -----------------------------------------------------
   Ausgegeben von der functions.php, Abschnitt 7.

   Auf dem Desktop steht der Knopf „Chat starten" weiterhin in der
   Kopfzeile und ist dort dauerhaft sichtbar – deshalb erscheint
   dieser hier nur unterhalb von 767 px.
   ===================================================== */

.ml-whatsapp {
	display: none;
}

@media (max-width: 767px) {

	/*
	 * Runder Symbolknopf, 48 px. Die erste Fassung war ein breiter
	 * Knopf mit Schriftzug – der verdeckte auf Produktseiten Text und
	 * war schlicht zu laut.
	 */
	.ml-whatsapp {
		position: fixed;
		right: max(14px, env(safe-area-inset-right));
		bottom: calc(14px + env(safe-area-inset-bottom));
		z-index: 9998;

		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;

		border-radius: 50%;
		background: #25d366;
		color: #fff;
		line-height: 0;
		text-decoration: none;

		/*
		 * Der weiße Ring ist wichtiger, als er aussieht: In den
		 * Bewertungskarten sitzt oben rechts jeweils ein rundes
		 * Google-Logo. Ohne Ring stehen dort zwei runde Symbole
		 * dicht nebeneinander und wirken wie ein verrutschtes
		 * Knopfpaar. Der Ring trennt den schwebenden Knopf sichtbar
		 * von allem, was darunter liegt.
		 */
		box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0, 0, 0, .22);
		transition: transform .15s ease, box-shadow .15s ease;
	}

	.ml-whatsapp:hover,
	.ml-whatsapp:focus {
		color: #fff;
		text-decoration: none;
		box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0, 0, 0, .28);
	}

	.ml-whatsapp:active {
		transform: scale(.94);
	}

	.ml-whatsapp__symbol {
		flex: 0 0 auto;
		width: 26px;
		height: 26px;
	}

	/* Der Schriftzug entfällt – das Symbol ist eindeutig genug.
	   Für Vorleseprogramme bleibt aria-label am Link. */
	.ml-whatsapp__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/*
	 * Der Knopf „nach oben" wandert in die LINKE untere Ecke.
	 *
	 * Vorher stand er 18 px über dem WhatsApp-Knopf. Auf dem Gerät
	 * lasen sich zwei gleich große Kreise übereinander wie ein
	 * zusammengehörendes Paar mit schiefem Versatz – nicht wie zwei
	 * verschiedene Funktionen. Eine eigene Ecke je Knopf löst das,
	 * ohne dass eine Funktion wegfällt.
	 */
	.ml-nach-oben {
		right: auto;
		left: max(14px, env(safe-area-inset-left));
		bottom: calc(14px + env(safe-area-inset-bottom));
	}

	body:has(.mlk-leiste) .ml-nach-oben {
		bottom: calc(86px + env(safe-area-inset-bottom));
	}

	/*
	 * Auf den Konfigurator-Seiten klebt unten bereits die Preisleiste
	 * (.mlk-leiste, position:fixed, z-index 9999). Der Knopf rückt dann
	 * darüber, damit sich beide nicht verdecken.
	 *
	 * :has() prüft das ohne JavaScript. Browser, die es nicht können,
	 * zeigen den Knopf an der normalen Stelle – dort überdeckt ihn im
	 * schlechtesten Fall die Leiste, erreichbar bleibt er über die
	 * Kopfzeile.
	 */
	body:has(.mlk-leiste) .ml-whatsapp {
		bottom: calc(86px + env(safe-area-inset-bottom));
	}
}


/* =====================================================
   6) Knopf „nach oben"
   -----------------------------------------------------
   Ausgegeben von der functions.php, Abschnitt 8; die Sichtbarkeit
   steuert js/nach-oben.js über die Klasse „ist-da".

   Ersetzt das Elementor-Popup #5095 „Back to the Top".

   Bewusst zurückhaltend gestaltet: hell mit dunklem Pfeil. Der
   WhatsApp-Knopf soll der auffällige von beiden bleiben.
   ===================================================== */

.ml-nach-oben {
	position: fixed;
	right: max(14px, env(safe-area-inset-right));
	bottom: calc(24px + env(safe-area-inset-bottom));
	z-index: 9997;

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

	/*
	 * Gleiche Größe wie der WhatsApp-Knopf – bei unterschiedlicher
	 * Breite und gleichem rechten Rand lägen die beiden nicht auf
	 * derselben Mittelachse.
	 */
	width: 44px;
	height: 44px;
	padding: 0;

	border: 1px solid #d8d4cd;
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	color: #333;
	cursor: pointer;

	box-shadow: 0 3px 10px rgba(0, 0, 0, .16);

	/* Ausgangszustand: nicht da. js/nach-oben.js setzt „ist-da". */
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.ml-nach-oben.ist-da {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ml-nach-oben:hover,
.ml-nach-oben:focus {
	border-color: #b9b3aa;
	color: #000;
}

.ml-nach-oben:active {
	transform: scale(.94);
}

@media (prefers-reduced-motion: reduce) {

	.ml-nach-oben {
		transition: none;
		transform: none;
	}
}


/* =====================================================
   7y) Warenkorb: Bilder auch auf dem Handy zeigen
   -----------------------------------------------------
   WooCommerce klappt die Bildspalte des Warenkorbs auf schmalen
   Bildschirmen zusammen – die Zellen stehen auf 0 × 0 Pixel, das Bild
   ist im Quelltext vorhanden, aber unsichtbar.

   Das war schon immer so und betrifft alle Produkte. Aufgefallen ist es
   erst bei den Wunschmotiven: dort ist das Bild die einzige Möglichkeit
   zu erkennen, ob man die richtige Datei hochgeladen hat.
   ===================================================== */

@media (max-width: 767px) {

	/*
	 * Das vorangestellte "body" ist nötig: WooCommerces eigene Regel
	 *   .woocommerce table.shop_table_responsive tr td.product-thumbnail
	 * hat dieselbe Spezifität, und ihre Datei lädt später – bei
	 * Gleichstand gewinnt die spätere.
	 */
	body.woocommerce table.shop_table_responsive tr td.product-thumbnail,
	body.woocommerce-page table.shop_table_responsive tr td.product-thumbnail {
		display: block;
		width: auto;
		height: auto;
		padding: 10px 12px 0;
		text-align: left;
	}

	/* WooCommerce blendet in dieser Ansicht Beschriftungen ein –
	   vor einem Bild ergibt „Produkt:“ keinen Sinn. */
	body.woocommerce table.shop_table_responsive tr td.product-thumbnail::before,
	body.woocommerce-page table.shop_table_responsive tr td.product-thumbnail::before {
		content: none;
	}

	body.woocommerce table.shop_table_responsive tr td.product-thumbnail img,
	body.woocommerce-page table.shop_table_responsive tr td.product-thumbnail img {
		width: 84px;
		height: 84px;
		max-width: 84px;
		object-fit: cover;
		border-radius: 8px;
		display: block;
	}
}


/* =====================================================
   7z) Titelbild der Startseite hervorheben
   -----------------------------------------------------
   Das Bild stand mit 1000 px in einem 1140-px-Rahmen und hatte
   ringsum weiße Ränder – es wirkte dadurch wie ein eingeklebtes
   Foto, nicht wie ein Titelbild. Randlos über die volle Breite
   liest es sich sofort als Auftakt der Seite.

   f3d35e8 = Desktop-Fassung, 12e73b3 = Handy-Fassung.

   Kein 100vw-Trick: der Abschnitt selbst ist bei Elementor ohnehin
   schon so breit wie die Seite, gedeckelt ist nur der innere
   Container (1140 px). Es genügt, diesen Deckel aufzuheben.

   Der übliche Weg über width:100vw mit negativen Rändern war hier
   sogar falsch – 100vw zählt die Bildlaufleiste mit und erzeugte
   8 px waagerechten Überstand.
   ===================================================== */

/*
 * Ab hier steht überall ein "body" davor. Grund: Elementor setzt
 * die Maximalbreite als
 *   .elementor-section.elementor-section-boxed > .elementor-container
 * und die Bildbreite als
 *   .elementor-2582 .elementor-element.elementor-element-XXX img
 * – jeweils drei Klassen. Zwei Klassen verlieren dagegen. Mit dem
 * vorangestellten Element gewinnen diese Regeln knapp, ohne dass
 * überall !important stehen muss.
 */
body .elementor-section.elementor-element-f3d35e8 > .elementor-container,
body .elementor-section.elementor-element-12e73b3 > .elementor-container {
	max-width: 100%;
	width: 100%;
}

/* Die 10 px Spaltenabstand würden als heller Rahmen stehen bleiben */
body .elementor-element.elementor-element-f3d35e8 .elementor-widget-wrap,
body .elementor-element.elementor-element-12e73b3 .elementor-widget-wrap {
	padding: 0;
}

body .elementor-element.elementor-element-f3d35e8 .elementor-widget-image,
body .elementor-element.elementor-element-12e73b3 .elementor-widget-image {
	margin-bottom: 0;
}

/*
 * Das Bild hatte eine fest eingestellte Breite von 1000 px. Bei
 * 1920 px Originalbreite ist das reine Verschenkung – über die volle
 * Fensterbreite ist es deutlich präsenter.
 */
body .elementor-element.elementor-element-f3d35e8 .elementor-widget-image img,
body .elementor-element.elementor-element-12e73b3 .elementor-widget-image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/*
 * Die Überschrift soll direkt am Bild hängen, damit Bild und Aussage
 * als ein Block gelesen werden statt als zwei getrennte Elemente.
 */
.elementor-element-8333fae {
	padding-top: 26px;
}


/* =====================================================
   7a) Die beiden Knöpfe unter der Überschrift
   -----------------------------------------------------
   Eingefügt von 37-startseite-umbauen.php als Abschnitt mlk1001.

   Zwei Knopf-Widget in einer Elementor-Spalte stehen von Haus aus
   untereinander. Nebeneinander sind sie mit einem Blick erfassbar
   und kosten halb so viel Höhe – auf dem Handy zählt das doppelt.
   ===================================================== */

.elementor-element-mlk1001 > .elementor-container > .elementor-column > .elementor-widget-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.elementor-element-mlk1001 .elementor-widget-button {
	width: auto;
}

/*
 * Auf schmalen Bildschirmen passen die beiden nicht nebeneinander
 * (171 + 166 px bei 350 px Platz) und brechen um – das ist so richtig,
 * untereinander sind sie mit dem Daumen besser zu treffen. Ohne feste
 * Breite stünden sie dann aber unterschiedlich breit übereinander.
 */
.elementor-element-mlk1001 .elementor-button {
	min-width: 210px;
	justify-content: center;
}


/* =====================================================
   7) Kategorie-Kacheln
   -----------------------------------------------------
   Ausgabe des Shortcodes [ml_kategorien] (functions.php, Abschnitt 9).

   Das Raster passt sich selbst an: auf dem Handy zwei Spalten, auf
   breiteren Bildschirmen so viele, wie bei mindestens 200 px je Kachel
   hineinpassen. Ohne feste Umbruchpunkte – so stimmt es auch bei
   Bildschirmbreiten, an die hier niemand gedacht hat.
   ===================================================== */

.ml-kacheln {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
}

@media (max-width: 600px) {

	.ml-kacheln {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

.ml-kachel {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e2ded8;
	border-radius: 12px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.ml-kachel:hover,
.ml-kachel:focus {
	transform: translateY(-2px);
	border-color: #cfc9c0;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
	color: inherit;
	text-decoration: none;
}

/*
 * Festes Seitenverhältnis, damit die Kacheln gleich hoch stehen - aber
 * hochkant.
 *
 * Hier stand 4/3 quer. Nachgemessen: von 121 sichtbaren Produktbildern
 * sind 118 hochkant, und zwar fast alle genau 3:4 - mit dem Handy
 * aufgenommen. Ein Querformat schnitt davon links und rechts nichts weg,
 * dafür oben und unten ein Drittel: bei einem stehenden Feuerkorb genau
 * die Teile, an denen man ihn erkennt.
 *
 * 3/4 ist dasselbe Verhältnis, in dem WooCommerce seine eigenen
 * Kachelbilder ablegt (300x400). Damit wird an einem Hochformat nichts
 * mehr beschnitten, und das Raster bleibt trotzdem ruhig.
 */
.ml-kachel__bild {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #f7f5f2;
}

.ml-kachel__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ml-kachel__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px 14px;
}

.ml-kachel__name {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	color: #333;

	/*
	 * Produktnamen wie „Feuerkugel Planetenvernichter" oder
	 * „Beheizbarer Stehtisch – Glühweintisch mit Feuerstelle" sind
	 * länger als eine Kachel breit ist. Ohne Umbruch stehen sie über
	 * den Rand hinaus und werden abgeschnitten.
	 */
	overflow-wrap: anywhere;
	hyphens: auto;
}

.ml-kachel__anzahl {
	font-size: 14px;
	color: #7a736a;
}

.ml-kachel__preis {
	font-size: 15px;
	font-weight: 600;
	color: #1a1a1a;
}

@media (max-width: 600px) {

	.ml-kachel__text {
		padding: 10px 11px 12px;
	}

	.ml-kachel__name {
		font-size: 15px;
	}

	.ml-kachel__anzahl {
		font-size: 13px;
	}

	.ml-kachel__preis {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ml-kachel {
		transition: none;
	}

	.ml-kachel:hover,
	.ml-kachel:focus {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Express-Zahlknöpfe unter das Menü legen

   PayPal rendert seinen Knopf in einem eigenen Rahmen mit z-index 100 und
   absoluter Position. Der Kopfbereich steht dagegen auf "static" und hat
   damit gar keine Stapelposition – ein aufgeklapptes Menü verschwand
   deshalb hinter dem Knopf.

   Statt an PayPal zu drehen bekommt der Kopfbereich eine eigene Ebene. Das
   ist die stabilere Seite: PayPal darf seinen Rahmen weiter aufbauen, wie es
   will, und ein Update ändert daran nichts.
   --------------------------------------------------------------------------- */

.elementor-location-header {
	position: relative;
	z-index: 9000;
}

/* Ausklappmenüs und das mobile Menü liegen noch darüber. */
.elementor-nav-menu--dropdown,
.elementor-nav-menu__container,
.elementor-menu-toggle,
.elementor-nav-menu--main .sub-menu {
	z-index: 9100;
}

/*
 * Ein festgesetzter Kopfbereich bringt seine eigene Ebene mit – die darf
 * nicht kleiner sein als die des Knopfes.
 */
.elementor-sticky--effects,
.elementor-sticky--active {
	z-index: 9200 !important;
}

/* ---------------------------------------------------------------------------
   Widerrufsbutton von Germanized

   Der Knopf wird von Germanized ganz unten an den Body gehängt, hinter die
   Fußzeile – als blasse Zeile auf weißem Grund, in der Themefarbe #c36 und
   ohne Abstände. Er ist damit kaum zu sehen, obwohl er nach der EU-Vorgabe
   dauerhaft und gut erkennbar erreichbar sein muss.

   Deshalb bekommt er hier ein eigenes dunkles Band im Ton der Fußzeile: Er
   liest sich als deren Abschluss statt als vergessener Rest darunter.
   --------------------------------------------------------------------------- */

.eu-owb-order-withdraw-from-contract-button {
	margin: 0;
	padding: 22px 16px 26px;
	background: #1f2124;
	text-align: center;
}

.eu-owb-order-withdraw-from-contract-button > .button,
.eu-owb-order-withdraw-from-contract-button > a {
	display: inline-block;
	padding: 11px 26px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 8px;
	background: transparent;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.eu-owb-order-withdraw-from-contract-button > .button:hover,
.eu-owb-order-withdraw-from-contract-button > .button:focus-visible,
.eu-owb-order-withdraw-from-contract-button > a:hover,
.eu-owb-order-withdraw-from-contract-button > a:focus-visible {
	border-color: #fff;
	background: #fff;
	color: #1f2124;
}


/* =====================================================================
   Produktgalerie
   =====================================================================

   Die Miniaturenleiste war eine Aufzaehlung mit Innenabstaenden: vier
   Stueck je Zeile, unterschiedlich breit je nach Bild, dazwischen
   ungleiche Luecken. Hier wird ein Raster daraus - gleich breite Felder,
   gleiche Abstaende, und jedes Bild im selben Hochformat wie die
   Aufnahme.

   Das aktive Bild ist markiert. Vorher war nicht zu sehen, welche der
   Miniaturen gerade oben gross steht.

   Der lange Vorsatz ist noetig, nicht schoen. WooCommerce setzt

       .woocommerce div.product div.images .flex-control-thumbs li
           { width: 25%; float: left }

   Das sind vier Klassen; ".woocommerce-product-gallery .flex-control-
   thumbs li" sind zwei und verliert. Die Folge war sichtbar: die
   Miniaturen standen zwar im Raster, waren aber 27 Bildpunkte breit -
   ein Viertel von einem Viertel. Mit dem Vorsatz sind es fuenf Klassen.

   Zwei Fassungen, weil "images" und "woocommerce-product-gallery" je
   nach Aufbau am selben Element haengen koennen oder ineinander.

   Vier Spalten auf allen Bildschirmen, ohne Ausnahme fuers Handy. Eine
   Zeit lang standen dort drei - das machte die Miniaturen am iPhone
   *groesser* als am Desktop (120 statt 109 Bildpunkte), weil die Spalte
   dort ueber die volle Breite geht. Die Leiste wurde 327 Bildpunkte hoch
   neben einem 500 hohen Hauptbild. Mit vier Spalten rechnet sich am
   Handy von selbst die kleinere Miniatur aus: 375 durch 4 sind 85.
   ===================================================================== */

.woocommerce div.product div.images .woocommerce-product-gallery .flex-control-thumbs,
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	float: none;
	overflow: visible;
}

.woocommerce div.product div.images .woocommerce-product-gallery .flex-control-thumbs li,
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li {
	width: auto;
	float: none;
	margin: 0;
	list-style: none;
}

.woocommerce div.product div.images .woocommerce-product-gallery .flex-control-thumbs li img,
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid #e2ded8;
	background: #f7f5f2;
	opacity: 1;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.woocommerce div.product div.images .woocommerce-product-gallery .flex-control-thumbs li img:hover,
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img:hover {
	border-color: #cfc9c0;
	opacity: 1;
}

/* Das Bild, das gerade gross zu sehen ist. */
.woocommerce div.product div.images .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	border-color: #8c5a3a;
	box-shadow: 0 0 0 2px rgba(140, 90, 58, .25);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

	.woocommerce div.product div.images .woocommerce-product-gallery .flex-control-thumbs li img,
	.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img {
		transition: none;
	}
}


/* Der Zusatz hinter dem Preis: „ab 650,00 € incl. Mwst zzgl. Konfiguration“.
   Sieht aus wie der Steuer-Nachsatz von Germanized daneben, damit die
   Zeile nicht in zwei Schriftgroessen zerfaellt. */
.price .mlk-preis__zusatz {
	white-space: nowrap;
	opacity: .85;
}


/* =====================================================================
   Der Preis in der Produktliste
   =====================================================================

   Nachgemessen in der Kategorie "Feuerstellen":

     Produktname   16   px, halbfett, rosa
     Preis         13.7 px, normal,   #958E09 (stumpfes Oliv)
     Lieferzeit    14.4 px, normal,   #333
     Knopf         16   px, fett

   Der Preis war damit das kleinste und schwaechste Element der Kachel -
   kleiner als die Lieferzeit, die unter ihm steht. Nico hat ihn schlicht
   nicht gesehen, und das Oliv erreicht auf Weiss nicht einmal den
   Kontrast, den Text dieser Groesse braucht (rund 4.0:1 statt 4.5:1).

   Jetzt ist die Zahl das Zweitwichtigste nach dem Namen: groesser als
   alles darunter, fett, in der Textfarbe der Seite. Die beiden Nachsaetze
   - "incl. Mwst" und "zzgl. Konfiguration" - bleiben klein, aber in einem
   Grau, das man lesen kann.
   ===================================================================== */

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price bdi,
.woocommerce ul.products li.product .price .amount {
	color: #2f2f2f;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
}

.woocommerce ul.products li.product .price .woocommerce-price-suffix,
.woocommerce ul.products li.product .price .mlk-preis__zusatz {
	color: #6b6b6b;
	font-size: 12px;
	font-weight: 400;
}


/* =====================================================================
   Startseite: Titelbild und die beiden Knoepfe darunter
   =====================================================================

   ZWEI KNOEPFE, ZEHN PIXEL VERSETZT

   "Zum Onlineshop" und "Motive ansehen" stehen nebeneinander in einem
   Flex-Kasten mit align-items:center. Elementor gibt jedem Widget ausser
   dem letzten einen Abstand nach unten (--kit-widget-spacing, hier
   20px). Nebeneinander ist dieser Abstand sinnlos - und weil zentriert
   ausgerichtet wird, hebt er den ersten Knopf um die halbe Differenz an.
   Gemessen: Oberkante 1005 gegen 1015.

   Nicht der Aussenrand wird korrigiert, sondern seine Ursache: die
   Variable auf null. Damit bleibt Elementors eigene Rechnung
   unangetastet, und beide Knoepfe stehen auf derselben Linie.

   BILDHOEHE

   Das Titelbild stand mit 547px auf einem 900px hohen Fenster - mehr als
   die halbe Bildschirmhoehe, bevor ein Wort zu lesen ist. Die
   Ueberschrift lag damit unter der Falz. 430px lassen sie sichtbar
   werden; beschnitten wird oben und unten, wo Gras und Pflaster sind,
   nicht in der Mitte, wo die Stuecke stehen.
   ===================================================================== */

body .elementor-2582 .elementor-element.elementor-element-mlk1003,
body .elementor-2582 .elementor-element.elementor-element-mlk1004 {
	--kit-widget-spacing: 0px;
}

@media (min-width: 1025px) {

	body .elementor-2582 .elementor-element.elementor-element-8430f05 img {
		display: block;
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		height: auto;

		/*
		 * Nachgerechnet statt geschaetzt.
		 *
		 * Das Bild ist 1439 x 553, Verhaeltnis 2.602. Ueber die volle
		 * Breite (1425) waere es 548 hoch; auf 430 gedeckelt blieben
		 * unten 21 Prozent unsichtbar - genau die Reihe Feuerkoerbe, die
		 * Nico zeigen will.
		 *
		 * 20 Prozent schmaler sind 1140 Bildpunkte, und dort ist das
		 * ganze Bild nur noch 438 hoch. Zieht man oben die 7.5 Prozent
		 * ab, die bis zur roten Linie reichen (dort ist nur Himmel und
		 * Baumreihe), bleiben 405 - das Verhaeltnis 1140/405 = 2.813.
		 *
		 * NACHGEBESSERT: 405 war Nico einen Tick zu knapp. Der Rahmen ist
		 * jetzt 418 hoch - oben werden nur noch 20 statt 33 Punkte
		 * abgeschnitten. Nicht ueber object-position verschoben, sondern
		 * ueber die Rahmenhoehe: so kommt oben etwas zurueck, ohne dass
		 * unten etwas verlorengeht.
		 *
		 * Als aspect-ratio statt fester Hoehe, damit es bei jeder
		 * Fensterbreite dieselbe Aufteilung bleibt.
		 */
		aspect-ratio: 1140 / 418;
		object-fit: cover;

		/* Unten verankert: geschnitten wird nur oben. */
		object-position: center bottom;
	}
}


/* =====================================================================
   Der Preis auf der Produktseite
   =====================================================================

   Nachgemessen an der Branded Edition:

     Schriftstaerke   100   (Haarlinie)
     Sperrung         5.4px
     Farbe            #7A7A7A
     Betrag           23px / 800, aber in demselben Grau

   Die Sperrung von 5.4px zog "incl. Mwst" zu "i n c l .  M w s t"
   auseinander und drueckte den Zusatz in eine zweite Zeile; die
   Haarlinie liess alles blass wirken. Der Betrag war zwar fett, aber im
   selben Grau wie der Rest - er trat nicht hervor.

   Jetzt: der Betrag gross und in der Textfarbe der Seite, die beiden
   Nachsaetze klein, aber lesbar. Die Schriftart bleibt Archivo Narrow,
   nur Staerke, Sperrung und Farbe aendern sich - der Preis soll sich
   nicht vom Rest der Seite abheben wie ein Fremdkoerper.

   Am Schreibtisch rueckt der Kasten in die Mitte. Er ist nur so breit
   wie sein Inhalt und stand darum links am Rand, waehrend Ueberschrift
   und Text daneben die volle Breite hatten.

   DIE LANGE SELEKTORKETTE ist noetig, nicht schoen. Elementor setzt die
   Schrift dieses Widgets mit fuenf Klassen:

     .woocommerce .elementor-3147 .elementor-element.elementor-element-2f817a5b .price
       { font-weight: 100; letter-spacing: 5.4px; color: #7A7A7A }

   "body.single-product .price" sind zwei Klassen und ein Element - das
   verliert. Statt die Widget-Kennung abzuschreiben (die haengt an einer
   Vorlage und kann sich aendern) haengen wir uns an die Klasse des
   Widgets selbst und kommen damit auf sechs.

   Und ohne Leerzeichen vor ".woocommerce": diese Klasse sitzt am <body>
   selbst, nicht in ihm. Mit Leerzeichen suchte der Selektor einen
   Nachfahren, den es nicht gibt - er traf nie etwas.
   ===================================================================== */

body.single-product.woocommerce .elementor-widget.elementor-product-price-block-yes .price {
	color: #2f2f2f;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.2px;
	line-height: 1.25;
}

body.single-product.woocommerce .elementor-widget.elementor-product-price-block-yes .price .amount,
body.single-product.woocommerce .elementor-widget.elementor-product-price-block-yes .price bdi {
	color: #2f2f2f;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}

body.single-product.woocommerce .elementor-widget.elementor-product-price-block-yes .price .woocommerce-price-suffix,
body.single-product.woocommerce .elementor-widget.elementor-product-price-block-yes .price .mlk-preis__zusatz {
	color: #6b6b6b;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.2px;
	white-space: nowrap;
}

@media (min-width: 1025px) {

	body.single-product .elementor-widget.elementor-product-price-block-yes {
		margin-left: auto;
		margin-right: auto;
	}
}

/* =====================================================
   Hinweis auf der Zubehoerseite: "Passt zu ..."
   =====================================================
   Bewusst schlichter als der Motivkasten: Dort ist der Hinweis eine
   Einschraenkung ("nur ueber ein Hauptprodukt"), hier ein Angebot. */
.ml-passt{margin:22px 0 0;padding:16px 18px;border:1px solid #e2e2e2;
	border-radius:12px;background:#fafafa}
.ml-passt__text{margin:0 0 12px;font-size:15px;line-height:1.55;color:#3a3a3a}
.ml-passt__text strong{color:#2f2f2f}

@media (prefers-color-scheme: dark){
	.ml-passt{background:#1b1d21;border-color:#33363b}
	.ml-passt__text{color:#c9ccd0}
	.ml-passt__text strong{color:#e8e9ea}
}