/*
 * Seitenweite Design-Anpassungen (Korrekturrunde Oktober 2026)
 * Eingebunden über inc/design-global.php. Nur Kit-Farben verwenden.
 */

/* ------------------------------------------------------------------
 * Header: Such-Icon (FiboSearch) in Icon-Größe von Konto/Warenkorb.
 * Ersetzt die Regeln „Header Icons anpassen“ aus dem Customizer.
 * Das SVG dient als Maske, die Farbe kommt aus dem Kit.
 * ------------------------------------------------------------------ */
.dgwt-wcas-search-wrapp a.js-dgwt-wcas-search-icon-handler {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-color: var(--e-global-color-primary);
	-webkit-mask: url('/wp-content/uploads/2026/07/suche-macaronsundco.svg') center / contain no-repeat;
	mask: url('/wp-content/uploads/2026/07/suche-macaronsundco.svg') center / contain no-repeat;
	transition: background-color 0.2s ease-in-out;
}

.dgwt-wcas-search-wrapp a.js-dgwt-wcas-search-icon-handler:hover,
.dgwt-wcas-search-wrapp a.js-dgwt-wcas-search-icon-handler:active {
	background-color: var(--e-global-color-50be59a);
}

.dgwt-wcas-search-wrapp a.js-dgwt-wcas-search-icon-handler svg {
	opacity: 0;
	width: 100%;
	height: 100%;
}

/* FiboSearch begrenzt den Icon-Container auf 20px, das Icon ragte heraus und
   der Abstand zur Kochmütze wirkte kleiner als zwischen Kochmütze und Warenkorb. */
.dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon {
	width: 28px;
	min-width: 28px;
	max-width: 28px;
}

@media (max-width: 1024px) {
	.dgwt-wcas-search-wrapp a.js-dgwt-wcas-search-icon-handler {
		width: 24px;
		height: 24px;
	}

	.dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon {
		width: 24px;
		min-width: 24px;
		max-width: 24px;
	}
}

.elementor-menu-cart__toggle_button {
	padding: 0 !important;
}

/* ------------------------------------------------------------------
 * Produktseiten: Preis grau wie der Text (alle Produkte), seit 28.10.2026
 * wieder etwas größer (1,5 statt 1,25 rem, Wunsch Géraldine).
 * Ersetzt die Customizer-Regel „.single-product .price“ (Orange).
 * ------------------------------------------------------------------ */
.single-product .elementor-widget-woocommerce-product-price .price,
.single-product .elementor-widget-woocommerce-product-price .price .amount {
	color: var(--e-global-color-text) !important;
	font-family: var(--e-global-typography-text-font-family), sans-serif !important;
	font-size: 1.5rem !important;
	font-weight: 600 !important;
}

/* Hinweise unter dem Preis in einer Zeile:
   „inkl. MwSt. | zzgl. Versandkosten | 2-7 Tage Lieferzeit“ (Container .mc-preis-hinweise) */
.mc-preis-hinweise .wc-gzd-additional-info {
	margin: 0;
}

.mc-preis-hinweise > .elementor-widget:not(:first-child) .wc-gzd-additional-info::before {
	content: "|";
	margin-right: .4em;
}

/* ------------------------------------------------------------------
 * Produkt-Lightbox (WooCommerce PhotoSwipe 4): weiß statt schwarz.
 * ------------------------------------------------------------------ */
.pswp__bg {
	background: var(--e-global-color-f2ba8d3);
}

.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption,
.pswp__top-bar,
.pswp__caption {
	background-color: transparent;
}

.pswp__counter,
.pswp__caption__center {
	color: var(--e-global-color-primary);
	opacity: 1;
}

/* Die Symbole sind weiße Sprites, invertiert werden sie dunkelgrau. */
.pswp__button,
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
	filter: invert(0.55);
}

.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
	background-color: transparent;
}

/* ------------------------------------------------------------------
 * Kurs-Kachel rund (Loop-Item „Backkurs-Kachel rund“, Klasse mc-kachel-rund):
 * runde Illustration, beim Überfahren erscheint das runde Foto.
 * ------------------------------------------------------------------ */
.mc-kachel-rund .woog-thumb-wrap,
.mc-kachel-rund .elementor-widget-image img,
.mc-kachel-rund .elementor-widget-theme-post-featured-image img {
	border-radius: 50%;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.mc-kachel-rund .woog-thumb-wrap .woog-hover-image {
	border-radius: 50%;
	transition: opacity 0.3s ease-in-out;
}

.mc-kachel-rund .woog-thumb-wrap > img:not(.woog-hover-image) {
	transition: opacity 0.3s ease-in-out;
}

/* Statische Kachel „Sonderworkshops“: zweite Illustration beim Überfahren. */
.mc-kachel-wechsel {
	position: relative;
}

.mc-kachel-wechsel .mc-kachel-wechsel__hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	pointer-events: none;
}

.mc-kachel-wechsel:hover .mc-kachel-wechsel__hover {
	opacity: 1;
}

/* ------------------------------------------------------------------
 * Kategorie-Kacheln (Startseite Boutique/Magazin): Name auf dem Foto.
 * Ohne Textschatten wie die Shop-Kacheln (Wunsch Géraldine, 03.11.2026).
 * ------------------------------------------------------------------ */
.mc-kat-kachel {
	overflow: hidden;
}

/* ------------------------------------------------------------------
 * WooCommerce-Hinweise außerhalb von Warenkorb und Kasse, z. B.
 * „… wurde deinem Warenkorb hinzugefügt“ auf Produktseiten (27.10.2026).
 * Gleicher Stil wie in mc-shop.css: weiße Karte mit rosa Streifen statt
 * grüner Linie und grauer Fläche. WooCommerce setzt den Fokus auf die
 * Meldung, der Browser zeichnete dabei die blaue Fokuslinie.
 * Warenkorb/Kasse (mc-shop.css) und Mein Konto (mein-konto.css) geben
 * ihre Hinweise im Inhalt aus und sind hiervon nicht betroffen.
 * ------------------------------------------------------------------ */
body > .woocommerce-notices-wrapper:not(:empty) {
	box-sizing: border-box;
	max-width: 1200px;
	margin: 24px auto 0;
	padding: 0 16px;
	outline: none;
}

/* Das Header-Logo ragt auf dem Desktop ca. 90 px unter die Kopfzeile. */
@media (min-width: 1025px) {
	body > .woocommerce-notices-wrapper:not(:empty) {
		margin-top: 110px;
	}
}

body > .woocommerce-notices-wrapper .woocommerce-message,
body > .woocommerce-notices-wrapper .woocommerce-info,
body > .woocommerce-notices-wrapper .woocommerce-error {
	--mc-hinweis-farbe: var(--e-global-color-50be59a);

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 16px;
	padding: 14px 20px 14px 24px;
	border: 1px solid var(--e-global-color-secondary);
	border-radius: 1rem;
	background: var(--e-global-color-f2ba8d3);
	box-shadow: inset 4px 0 0 var(--mc-hinweis-farbe);
	color: var(--e-global-color-text);
	font-size: 14px;
	line-height: 1.6;
	list-style: none;
	outline: none;
}

body > .woocommerce-notices-wrapper .woocommerce-message {
	--mc-hinweis-farbe: var(--e-global-color-7abbf54);
}

body > .woocommerce-notices-wrapper .woocommerce-error {
	flex-direction: column;
	align-items: flex-start;
}

body > .woocommerce-notices-wrapper .woocommerce-error li {
	margin: 0;
	list-style: none;
}

body > .woocommerce-notices-wrapper .woocommerce-message::before,
body > .woocommerce-notices-wrapper .woocommerce-info::before,
body > .woocommerce-notices-wrapper .woocommerce-error::before {
	display: none;
}

body > .woocommerce-notices-wrapper .woocommerce-message .button,
body > .woocommerce-notices-wrapper .woocommerce-info .button {
	order: 2;
	float: none;
	margin: 0 0 0 auto;
	padding: 8px 16px;
	border: 0;
	border-radius: 1rem;
	background: color-mix(in srgb, var(--e-global-color-47a7e76) 60%, var(--e-global-color-f2ba8d3));
	color: var(--e-global-color-7abbf54);
	font-size: 13px;
	line-height: 1.4;
	white-space: nowrap;
}

body > .woocommerce-notices-wrapper .woocommerce-message .button:hover,
body > .woocommerce-notices-wrapper .woocommerce-info .button:hover {
	background: var(--e-global-color-7abbf54);
	color: var(--e-global-color-f2ba8d3);
}

/* ------------------------------------------------------------------
 * Lagerbestand: Vorrätiges zeigt keinen Text mehr (inc/woocommerce-design.php,
 * Abschnitt 15). „Nicht vorrätig“ in Rosa dunkel statt WooCommerce-Rot.
 * ------------------------------------------------------------------ */
.woocommerce div.product .stock.out-of-stock {
	color: var(--e-global-color-7abbf54);
	font-weight: 600;
}

/* ------------------------------------------------------------------
 * Produkte mit Varianten: Auswahlfeld weiß mit rosa Rahmen und Pfeil
 * statt grau/blau (27.10.2026). Gleiche Werte wie beim Gutschein in
 * woocommerce-gutschein-style-anpassung.css, dessen Regeln für 17881
 * stärker gewichtet sind und dort weiter gelten.
 * ------------------------------------------------------------------ */
.single-product .elementor-add-to-cart form.variations_form.cart table.variations th.label {
	vertical-align: middle;
}

.single-product .elementor-add-to-cart form.variations_form.cart table.variations select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 46px 0 18px;
	font-size: 16px;
	font-weight: 500;
	line-height: 52px;
	color: var(--e-global-color-text);
	background-color: var(--e-global-color-f2ba8d3);
	/* Pfeil aus zwei Verläufen statt SVG, damit die Kit-Farbe greift */
	background-image:
		linear-gradient(45deg, transparent 50%, var(--e-global-color-50be59a) 50%),
		linear-gradient(135deg, var(--e-global-color-50be59a) 50%, transparent 50%);
	background-repeat: no-repeat;
	background-position: right 24px center, right 18px center;
	background-size: 6px 6px, 6px 6px;
	border: 1px solid var(--e-global-color-50be59a);
	border-radius: 1rem;
	box-shadow: none;
	cursor: pointer;
	transition: border-color .18s ease;
}

.single-product .elementor-add-to-cart form.variations_form.cart table.variations select:hover {
	border-color: var(--e-global-color-7abbf54);
}

/* Sortierung im Shop: gleiche Gestaltung, nur niedriger (28.10.2026) */
.woocommerce .woocommerce-ordering select.orderby {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 44px;
	margin: 0;
	padding: 0 46px 0 18px;
	font-size: 15px;
	line-height: 44px;
	color: var(--e-global-color-text);
	background-color: var(--e-global-color-f2ba8d3);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--e-global-color-50be59a) 50%),
		linear-gradient(135deg, var(--e-global-color-50be59a) 50%, transparent 50%);
	background-repeat: no-repeat;
	background-position: right 24px center, right 18px center;
	background-size: 6px 6px, 6px 6px;
	border: 1px solid var(--e-global-color-50be59a);
	border-radius: 1rem;
	box-shadow: none;
	cursor: pointer;
}

.woocommerce .woocommerce-ordering select.orderby:hover,
.woocommerce .woocommerce-ordering select.orderby:focus {
	border-color: var(--e-global-color-7abbf54);
	outline: none;
}

.single-product .elementor-add-to-cart form.variations_form.cart table.variations select:focus,
.single-product .elementor-add-to-cart form.variations_form.cart table.variations select:focus-visible {
	border-color: var(--e-global-color-7abbf54);
	box-shadow: none;
	outline: 2px solid var(--e-global-color-7abbf54);
	outline-offset: 1px;
}

/* Aufgeklappte Liste rosa statt Systemblau (nur Chromium ab 135, sonst normale Liste) */
@supports (appearance: base-select) {
	.single-product .elementor-add-to-cart form.variations_form.cart table.variations select,
	.single-product .elementor-add-to-cart form.variations_form.cart table.variations select::picker(select),
	.woocommerce .woocommerce-ordering select.orderby,
	.woocommerce .woocommerce-ordering select.orderby::picker(select) {
		appearance: base-select;
	}

	.single-product .elementor-add-to-cart form.variations_form.cart table.variations select,
	.woocommerce .woocommerce-ordering select.orderby {
		display: flex;
		align-items: center;
	}

	/* Pfeil kommt aus dem Hintergrund (s. o.) */
	.single-product .elementor-add-to-cart form.variations_form.cart table.variations select::picker-icon,
	.woocommerce .woocommerce-ordering select.orderby::picker-icon {
		display: none;
	}

	.single-product .elementor-add-to-cart form.variations_form.cart table.variations select::picker(select),
	.woocommerce .woocommerce-ordering select.orderby::picker(select) {
		transition: none; /* sonst fliegt die Liste beim Öffnen über den Bildschirm */
		margin-top: 4px;
		padding: 4px 0;
		border: 1px solid var(--e-global-color-50be59a);
		border-radius: 1rem;
		background: var(--e-global-color-f2ba8d3);
		box-shadow: 0 8px 24px color-mix(in srgb, var(--e-global-color-text) 12%, transparent);
	}

	.single-product .elementor-add-to-cart form.variations_form.cart table.variations option,
	.woocommerce .woocommerce-ordering select.orderby option {
		padding: 8px 18px;
		background: var(--e-global-color-f2ba8d3);
		color: var(--e-global-color-text);
		font-size: 16px;
	}

	/* Haken rechts an der gewählten Option */
	.single-product .elementor-add-to-cart form.variations_form.cart table.variations option::checkmark,
	.woocommerce .woocommerce-ordering select.orderby option::checkmark {
		order: 1;
		margin-left: auto;
		color: var(--e-global-color-50be59a);
		font-weight: 700;
	}

	/* !important gegen „.single-product table * { background-color: white !important }“
	   im Customizer-CSS, sonst bleibt der Hover weiß. */
	.single-product .elementor-add-to-cart form.variations_form.cart table.variations option:hover,
	.single-product .elementor-add-to-cart form.variations_form.cart table.variations option:focus-visible,
	.woocommerce .woocommerce-ordering select.orderby option:hover,
	.woocommerce .woocommerce-ordering select.orderby option:focus-visible {
		background-color: color-mix(in srgb, var(--e-global-color-47a7e76) 18%, var(--e-global-color-f2ba8d3)) !important;
		outline: none;
	}

	/* Gewählte Option dezent: rosa Schrift, fett, Haken – keine dunkle Fläche (02.11.2026) */
	.single-product .elementor-add-to-cart form.variations_form.cart table.variations option:checked,
	.woocommerce .woocommerce-ordering select.orderby option:checked {
		color: var(--e-global-color-50be59a);
		font-weight: 600;
	}
}

/* ------------------------------------------------------------------
 * Elementor-Formulare (Kontakt, Anfragen Private Events): aufgeklappte
 * Auswahlliste weiß/rosa statt grau/blau (28.10.2026), wie beim
 * Terminkalender. Das geschlossene Feld gestaltet das Formular-Widget.
 * Die Klasse elementor-field sitzt am Wrapper, nicht am <select>.
 * ------------------------------------------------------------------ */
.elementor-form .elementor-field-type-select .elementor-select-wrapper::before {
	color: var(--e-global-color-50be59a);
}

@supports (appearance: base-select) {
	.elementor-form .elementor-field-type-select select,
	.elementor-form .elementor-field-type-select select::picker(select) {
		appearance: base-select;
	}

	.elementor-form .elementor-field-type-select select {
		display: flex;
		align-items: center;
	}

	/* Pfeil kommt aus dem Elementor-Wrapper (s. o.) */
	.elementor-form .elementor-field-type-select select::picker-icon {
		display: none;
	}

	.elementor-form .elementor-field-type-select select::picker(select) {
		/* Ohne Übergang: Die Liste erbt sonst „transition: all .3s“ des Themes
		 * und fliegt beim Öffnen vom ganzen Bildschirm auf ihren Platz (30.10.). */
		transition: none;
		margin-top: 4px;
		padding: 4px 0;
		border: 1px solid var(--e-global-color-50be59a);
		border-radius: 1rem;
		background: var(--e-global-color-f2ba8d3);
		box-shadow: 0 8px 24px color-mix(in srgb, var(--e-global-color-text) 12%, transparent);
	}

	.elementor-form .elementor-field-type-select option {
		padding: 8px 18px;
		background: var(--e-global-color-f2ba8d3);
		color: var(--e-global-color-text);
	}

	/* Haken rechts an der gewählten Option */
	.elementor-form .elementor-field-type-select option::checkmark {
		order: 1;
		margin-left: auto;
		color: var(--e-global-color-50be59a);
		font-weight: 700;
	}

	.elementor-form .elementor-field-type-select option:hover,
	.elementor-form .elementor-field-type-select option:focus-visible {
		background-color: color-mix(in srgb, var(--e-global-color-47a7e76) 18%, var(--e-global-color-f2ba8d3));
		outline: none;
	}

	/* Gewählte Option dezent: rosa Schrift, fett, Haken – keine dunkle Fläche (02.11.2026) */
	.elementor-form .elementor-field-type-select option:checked {
		color: var(--e-global-color-50be59a);
		font-weight: 600;
	}
}

/* ------------------------------------------------------------------
 * Megamenü im Header: Die Titel (Backkurse, Private Events, Shop, Magazin)
 * sind keine Links, sondern klappen beim Überfahren auf. Elementor setzt
 * dort cursor: default – gewünscht ist die Hand (02.11.2026).
 * ------------------------------------------------------------------ */
.elementor-location-header .elementor-widget-n-menu .e-n-menu-title-container:not(.e-link),
.elementor-location-header .elementor-widget-n-menu .e-n-menu-title-container:not(.e-link) * {
	cursor: pointer;
}

/* ------------------------------------------------------------------
 * Produkt-Template 535: FAQ-Bereich „Fragen und Antworten“ nur, wenn beim
 * Produkt FAQs ausgewählt sind (Body-Klasse aus inc/produkt-faqs.php).
 * ------------------------------------------------------------------ */
.mc-produkt-ohne-faqs .elementor-element-39270da {
	display: none;
}

/* Produkt-Template 535: Kästen Nährwerte, Zutaten, Allergene, Artikelnummer
 * und Marke nur, wenn beim Produkt etwas angelegt ist (Body-Klassen aus
 * inc/woocommerce-design.php, Abschnitt 19). */
.mc-ohne-naehrwerte .box-naehrwerte,
.mc-ohne-zutaten .box-zutaten,
.mc-ohne-allergene .box-allergene,
.mc-ohne-sku .box-sku,
.mc-ohne-marken .box-marken {
	display: none;
}

/* Handy: lange Wörter in Überschriften (z. B. „Junggesellinnenabschied“ in
 * der Schwungschrift) trennen statt rechts abschneiden (Mobil-Durchgang 29.10.).
 * Seit 30.10. nur Wörter ab 13 Buchstaben, sonst wurden auch „ge-meinsam“ oder
 * „UTENSI-LIEN“ am Zeilenende getrennt. Safari kennt hyphenate-limit-chars
 * nicht, dort verhindern je 5 Buchstaben vor/nach dem Strich kurze Trennungen. */
@media (max-width: 767px) {
	.elementor-heading-title,
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.elementor-widget-text-editor h2,
	.elementor-widget-text-editor h3 {
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 13 5 5;
		-webkit-hyphenate-limit-before: 5;
		-webkit-hyphenate-limit-after: 5;
		overflow-wrap: break-word;
	}

	/* Produktraster (Shop, Kategorien, Suche): zwei gleich breite Spalten.
	 * Mit „1fr“ wuchs eine Spalte mit langen Wörtern wie „Weihnachtsbaumschmuck“
	 * über den Bildschirm hinaus, die zweite Spalte war rechts abgeschnitten. */
	.elementor-widget-wc-archive-products ul.products,
	.elementor-widget-woocommerce-products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Zwischenüberschriften im Fließtext (AGB, Datenschutz, Widerruf, Zahlung &
	 * Versand) waren mit 32 px zu groß für Wörter wie „Seitenfunktionalitäten“. */
	body .elementor-widget-text-editor h2 {
		font-size: 1.5rem;
	}

	body .elementor-widget-text-editor h3 {
		font-size: 1.25rem;
	}

	/* Lange Links (PayPal, Google) und „______“-Linien brechen um. */
	.elementor-widget-text-editor p,
	.elementor-widget-text-editor li,
	.elementor-widget-theme-post-content p,
	.elementor-widget-theme-post-content li {
		overflow-wrap: break-word;
	}

	.elementor-widget-text-editor a,
	.elementor-widget-theme-post-content a,
	.comment-list {
		overflow-wrap: anywhere;
	}
}

/* ------------------------------------------------------------------
 * Magazin, Vorlage 19500 „Kategorie – Wissen & Tipps“: Kasten „Auch in
 * meinem Backshop“ nur auf „Meine Lieblingsküchenhelfer“ (28.10.2026).
 * Per Body-Klasse, weil Elementor die Vorlage für alle Wissen-Kategorien
 * zwischenspeichert.
 * ------------------------------------------------------------------ */
body:not(.category-meine-lieblingskuechenhelfer) .mc-backshop-hinweis {
	display: none;
}

/* ------------------------------------------------------------------
 * Mini-Warenkorb (Header): Kursdaten untereinander statt in zwei Spalten.
 * Elementor setzt „max-content auto“, lange Werte wie Termin und Ort
 * ragten dadurch aus dem schmalen Seitenpanel und wurden abgeschnitten.
 * ------------------------------------------------------------------ */
.elementor-menu-cart__main .elementor-menu-cart__product .variation {
	grid-template-columns: minmax(0, 1fr);
}

.elementor-menu-cart__main .elementor-menu-cart__product .variation dt,
.elementor-menu-cart__main .elementor-menu-cart__product .variation dd {
	grid-column-start: 1;
}

.elementor-menu-cart__main .elementor-menu-cart__product .variation dt {
	font-weight: 600;
}

.elementor-menu-cart__main .elementor-menu-cart__product .variation dd {
	margin: 0 0 4px;
	overflow-wrap: anywhere;
}

/* Details unter dem Namen (Kurstermin, Personen, Ort, Lieferzeit) kleiner als
 * der Produktname (Géraldine, 30.10.: „Schrift kleiner für alle Details“). */
.elementor-menu-cart__main .elementor-menu-cart__product .variation,
.elementor-menu-cart__main .elementor-menu-cart__product .variation p,
.elementor-menu-cart__main .elementor-menu-cart__product .wc-gzd-cart-info {
	font-size: 0.75rem;
	line-height: 1.4;
}

.elementor-menu-cart__main .elementor-menu-cart__product .variation p {
	margin: 0;
}

/* ------------------------------------------------------------------
 * Mobilmenü (Header 19026 „Header Mobil“ fc2a180, Popups 19000–19003),
 * 30.10.2026: Die Menüs öffnen unter dem Kopf, der Kopf bleibt sichtbar und
 * der offene Bereich ist rosa. Klassen und --mc-mm-oben setzt
 * assets/js/mobilmenue.js (inc/mobilmenue.php).
 * ------------------------------------------------------------------ */
.elementor-element-2e8bc45 .elementor-icon-box-wrapper {
	padding: 4px 3px;
	border-radius: 12px;
	transition: background-color 0.2s ease-in-out;
}

/* Bei 360 px passen vier Schalter mit Rand plus Logo nur mit 12 px Schrift.
 * Auf noch schmaleren Geräten (oder solange die Schrift lädt) dürfen die
 * Schalter schrumpfen, „Private Events“ bricht dann um statt überzulaufen. */
@media (max-width: 767px) {
	.elementor-element-2e8bc45 .elementor-icon-box-title,
	.elementor-element-2e8bc45 .elementor-icon-box-title a {
		font-size: 12px;
	}

	/* Nicht schmaler als das längste Wort (min-width: auto), so bricht nur
	 * „Private Events“ um. */
	.elementor-element-2e8bc45 > .elementor-widget-icon-box {
		--flex-shrink: 1 !important;
	}
}

/* Sehr schmale Geräte (iPhone SE 1. Generation, 320 px) */
@media (max-width: 359px) {
	.elementor-element-2e8bc45 .elementor-icon-box-title,
	.elementor-element-2e8bc45 .elementor-icon-box-title a {
		font-size: 11px;
	}

	.elementor-element-2e8bc45 .elementor-icon-box-wrapper {
		padding: 4px 1px;
	}

	/* !important gegen die Elementor-Breite (56 px) des Logo-Widgets */
	.elementor-element-2e8bc45 .elementor-element-1a9fa26 img {
		width: 48px !important;
	}
}

.elementor-element-2e8bc45 .mc-mm-aktiv .elementor-icon-box-wrapper {
	background-color: var(--e-global-color-50be59a);
}

.elementor-element-2e8bc45 .mc-mm-aktiv .elementor-icon,
.elementor-element-2e8bc45 .mc-mm-aktiv .elementor-icon-box-title,
.elementor-element-2e8bc45 .mc-mm-aktiv .elementor-icon-box-title a {
	color: var(--e-global-color-f2ba8d3) !important;
	fill: var(--e-global-color-f2ba8d3) !important;
}

/* Kopf über dem offenen Menü (Elementor-Popups liegen bei z-index 9999).
 * Nur solange ein Menü offen ist, sonst läge der Kopf auch über der Lightbox. */
body.mc-mm-offen .elementor-element-fc2a180 {
	z-index: 10000 !important;
}

/* Eigene Scroll-Sperre statt „Scrollen verhindern“ der Popups: Elementor begrenzt
 * dabei den Body auf 100vh, die Seite sprang nach oben und blieb dort. */
html.mc-mm-sperre,
html.mc-mm-sperre body {
	overflow: hidden;
}

/* Elementor fokussiert beim Öffnen „← zurück“. Nach einem Tipp ohne Rahmen,
 * mit der Tastatur bleibt er sichtbar. */
html.mc-mm-zeiger #elementor-popup-modal-19000 :focus,
html.mc-mm-zeiger #elementor-popup-modal-19001 :focus,
html.mc-mm-zeiger #elementor-popup-modal-19002 :focus,
html.mc-mm-zeiger #elementor-popup-modal-19003 :focus {
	outline: none;
}

/* Elementor setzt das Popup bei „Scrollen verhindern“ auf position: sticky
 * und den Inhalt auf 100vh. Hier: fest unter dem Kopf bis zum unteren Rand. */
#elementor-popup-modal-19000,
#elementor-popup-modal-19001,
#elementor-popup-modal-19002,
#elementor-popup-modal-19003 {
	position: fixed !important;
	top: var(--mc-mm-oben, 0px) !important;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto !important;
	height: auto !important;
}

#elementor-popup-modal-19000 .dialog-widget-content,
#elementor-popup-modal-19001 .dialog-widget-content,
#elementor-popup-modal-19002 .dialog-widget-content,
#elementor-popup-modal-19003 .dialog-widget-content {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: auto !important;
	box-shadow: none;
}

/* Menütitel nur an festen Stellen (&shy;) trennen, wie im Desktop-Megamenü */
#elementor-popup-modal-19000 .elementor-heading-title,
#elementor-popup-modal-19001 .elementor-heading-title,
#elementor-popup-modal-19002 .elementor-heading-title,
#elementor-popup-modal-19003 .elementor-heading-title {
	-webkit-hyphens: manual;
	hyphens: manual;
}

#elementor-popup-modal-19000 .dialog-message,
#elementor-popup-modal-19001 .dialog-message,
#elementor-popup-modal-19002 .dialog-message,
#elementor-popup-modal-19003 .dialog-message {
	height: 100% !important;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Suchfeld im Kopf (FiboSearch als Eingabefeld statt Lupe). Auf dem Handy
 * öffnet FiboSearch beim Antippen die Vollbild-Suche. */
.elementor-element-d0f521d .dgwt-wcas-search-wrapp {
	max-width: none;
	min-width: 0;
}

.elementor-element-d0f521d .dgwt-wcas-sf-wrapp {
	padding: 0;
	background: transparent;
}

.elementor-element-d0f521d .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	height: 36px;
	padding: 0 40px 0 16px;
	border: 1px solid var(--e-global-color-secondary);
	border-radius: 18px;
	background-color: var(--e-global-color-f2ba8d3);
	color: var(--e-global-color-text);
	font-size: 14px;
	box-shadow: none;
}

.elementor-element-d0f521d .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus {
	border-color: var(--e-global-color-50be59a);
}

/* Lupe rechts im Feld (der Stil „pirx“ setzt sie für ein Feld mit 10 px Rand
 * links unten, dort ragte sie unter dem Feld heraus). */
.elementor-element-d0f521d .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	top: 50%;
	right: 2px;
	bottom: auto;
	left: auto;
	margin: 0;
	transform: translateY(-50%);
}

.elementor-element-d0f521d .dgwt-wcas-ico-magnifier-handler,
.elementor-element-d0f521d .dgwt-wcas-ico-magnifier {
	fill: var(--e-global-color-primary);
}

/* Instagram-Feed (Smash Balloon) auf der Startseite: Profilkopf, Kacheln und
 * „Folge mir auf Instagram“ im Design der Seite (Button wie „Newsletter abonnieren“). */
#sb_instagram .sbi_photo_wrap,
#sb_instagram .sbi_photo {
	border-radius: 1rem;
	overflow: hidden;
}

#sb_instagram .sb_instagram_header h3 {
	color: var(--e-global-color-primary);
	font-weight: 600;
}

#sb_instagram .sb_instagram_header .sbi_bio {
	color: var(--e-global-color-text);
}

#sb_instagram #sbi_load .sbi_follow_btn a {
	padding: 8px 16px;
	border-radius: 16px;
	background: var(--e-global-color-50be59a);
	color: var(--e-global-color-f2ba8d3);
	font-size: 16px;
	line-height: 1.5;
	transition: background-color 0.3s;
}

#sb_instagram #sbi_load .sbi_follow_btn a:hover,
#sb_instagram #sbi_load .sbi_follow_btn a:focus-visible {
	background: var(--e-global-color-7abbf54);
	box-shadow: none;
}