/**
 * Unterseiten an das Design der Startseite angleichen.
 *
 * Die Unterseiten sind klassisch mit Elementor gebaut und übernehmen die
 * Vorgaben des Elementor-Kits: Überschriften in Rubik, Kit-Farben. Die neue
 * Startseite dagegen nutzt Anton, Cormorant Garamond und die Hausfarben.
 * Diese Datei zieht Typografie und Farben nach, ohne den Seitenaufbau
 * anzufassen.
 *
 * Spezifität: Das Kit schreibt `.elementor-kit-<ID> h2 { … }` – das ist
 * (0,1,1). Die Regeln hier stehen mit `body.lpc-bridge h2` auf (0,1,2) und
 * gewinnen damit.
 *
 * **`:not(.lp *)` an jeder Regel:** Seiten können beides enthalten – eigene
 * Bausteine der Startseite *und* übernommenen Elementor-Inhalt (etwa die
 * Rechtstexte, die zwischen Titelbild und Fußbereich stehen bleiben). Ohne
 * diese Einschränkung färbte die Angleichung die weiße Hero-Überschrift
 * anthrazit und machte sie auf dem Foto unlesbar. So greift sie nur dort,
 * wo sie gebraucht wird.
 */

/* ─── Hausfarben und Schriften ──────────────────────────────────
   Die Tokens des Startseiten-Plugins hängen an `.lp` und stehen auf den
   Unterseiten nicht zur Verfügung. Deshalb hier noch einmal, wortgleich. */
body.lpc-bridge {
	--lpc-burgundy: #7E1306;
	--lpc-mustard: #ecca53;
	--lpc-sand: #d5be9b;
	--lpc-cappuccino: #545353;
	--lpc-cream: #FDF1DE;
	--lpc-anthracite: #545353;
	--lpc-orange: #e36223;

	--lpc-font-condensed: "Anton", Impact, "Haettenschweiler", sans-serif;
	--lpc-font-serif: "Cormorant Garamond", Georgia, serif;
	--lpc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ─── Fließtext ─────────────────────────────────────────────────
   Nur dort, wo Elementor Text ausgibt. Eingabefelder und Schaltflächen
   des Shops bleiben außen vor, damit Warenkorb und Kasse unverändert
   bedienbar bleiben. */
body.lpc-bridge .elementor-widget-text-editor:not(.lp *),
body.lpc-bridge .elementor-widget-theme-post-content:not(.lp *),
body.lpc-bridge .elementor-widget-icon-list .elementor-icon-list-text:not(.lp *){
	font-family: var(--lpc-font-body);
	color: var(--lpc-anthracite);
}

/* ─── Überschriften ─────────────────────────────────────────────
   Anton, versal und eng gesetzt – wie auf der Startseite. */
/* Zum `!important`: Bei einem Teil der Überschriften ist die Schriftart im
   Elementor direkt am Widget hinterlegt. Elementor schreibt daraus Regeln
   wie `.elementor-14186 .elementor-element-abc .elementor-heading-title`
   – Spezifität (0,3,0). Dagegen kommt keine sinnvoll formulierte globale
   Regel an. Betroffen sind bewusst nur Schriftart, Schnitt und Versalien;
   Schriftgrößen und Farben, die je Seite eingestellt wurden, bleiben
   unangetastet. */
body.lpc-bridge h1:not(.lp *),
body.lpc-bridge h2:not(.lp *),
body.lpc-bridge h3:not(.lp *),
body.lpc-bridge h4:not(.lp *),
body.lpc-bridge .elementor-heading-title:not(.lp *),
body.lpc-bridge .elementor-widget-heading .elementor-heading-title:not(.lp *){
	font-family: var(--lpc-font-condensed) !important;
	font-weight: 400 !important;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* Die Textfarbe nur dort setzen, wo im Editor nichts eigenes hinterlegt
   wurde – sonst würden Überschriften auf dunklem Grund unlesbar. */
body.lpc-bridge h1:not([style*="color"]):not(.lp *),
body.lpc-bridge h2:not([style*="color"]):not(.lp *),
body.lpc-bridge h3:not([style*="color"]):not(.lp *),
body.lpc-bridge h4:not([style*="color"]):not(.lp *){
	color: var(--lpc-anthracite);
}

body.lpc-bridge h1:not(.lp *),
body.lpc-bridge h2:not(.lp *){
	line-height: 0.95;
}

body.lpc-bridge h3:not(.lp *),
body.lpc-bridge h4:not(.lp *){
	line-height: 1.1;
}

/* ─── Kursive Auszeichnung im Stil der Startseite ───────────────
   Dort steht die Serifenschrift für Zwischentöne („Liebe Gäste,"). */
body.lpc-bridge em:not(.lp *),
body.lpc-bridge .lpc-serif:not(.lp *){
	font-family: var(--lpc-font-serif);
	font-style: italic;
}

/* ─── Schaltflächen ─────────────────────────────────────────────
   Eckig, Anton, versal – wie `.lp-btn` auf der Startseite. Zahlungs- und
   Warenkorb-Schaltflächen von WooCommerce sind bewusst ausgenommen. */
body.lpc-bridge .elementor-button:not(.woocommerce *):not(.lp *),
body.lpc-bridge .elementor-widget-button .elementor-button:not(.lp *){
	font-family: var(--lpc-font-condensed);
	font-weight: 400;
	font-size: 1.1rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	border-radius: 0;
	background-color: var(--lpc-burgundy);
	color: #fff;
	transition: background-color 0.2s;
}

body.lpc-bridge .elementor-button:not(.woocommerce *):hover:not(.lp *),
body.lpc-bridge .elementor-widget-button .elementor-button:hover:not(.lp *){
	background-color: var(--lpc-orange);
	color: #fff;
}

/* ─── Verweise ──────────────────────────────────────────────────
   Im Fließtext in Hausfarbe. Navigation und Shop bleiben unangetastet,
   damit dort nichts unlesbar wird. */
body.lpc-bridge .elementor-widget-text-editor a:not(.elementor-button):not(.lp *),
body.lpc-bridge .elementor-widget-theme-post-content a:not(.elementor-button):not(.lp *){
	color: var(--lpc-burgundy);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s;
}

body.lpc-bridge .elementor-widget-text-editor a:not(.elementor-button):hover:not(.lp *),
body.lpc-bridge .elementor-widget-theme-post-content a:not(.elementor-button):hover:not(.lp *){
	color: var(--lpc-orange);
}

/* ─── Trennlinien und Akzente ───────────────────────────────────*/
body.lpc-bridge .elementor-divider-separator:not(.lp *){
	border-top-color: var(--lpc-sand);
}

/* ─── Kleine Displays ───────────────────────────────────────────
   Anton trägt kräftig auf; auf schmalen Geräten etwas zurücknehmen,
   damit lange Überschriften nicht über den Rand laufen. */
@media (max-width: 767px) {
	body.lpc-bridge h1:not(.lp *),
	body.lpc-bridge h2:not(.lp *){
		line-height: 1;
		word-break: break-word;
	}
}

/* ─── Shop-Seiten: Warenkorb, Kasse, Konto ──────────────────────
   Diese Seiten kommen von WooCommerce und bringen ihr eigenes,
   graues Standardaussehen mit. Hier werden Tabellen, Felder und
   Schaltflächen an das Haus-Design angeglichen — ohne in die
   Bedienung einzugreifen. */

/* Tabellen: eckig, feine Linien, Kopfzeile in Anton */
body.lpc-bridge .shop_table:not(.lp *) {
	border: 1px solid rgba(84, 83, 83, 0.14);
	border-radius: 0;
	border-collapse: collapse;
	width: 100%;
}

body.lpc-bridge .shop_table th:not(.lp *) {
	font-family: var(--lpc-font-condensed);
	font-weight: 400;
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lpc-anthracite);
	background: rgba(213, 190, 155, 0.28);
	border-bottom: 1px solid rgba(84, 83, 83, 0.14);
	padding: 14px 16px;
	text-align: left;
}

body.lpc-bridge .shop_table td:not(.lp *) {
	border-top: 1px solid rgba(84, 83, 83, 0.1);
	padding: 14px 16px;
	background: transparent;
	font-size: 0.9rem;
}

body.lpc-bridge .shop_table .product-name a:not(.lp *) {
	color: var(--lpc-anthracite);
	font-weight: 600;
}

body.lpc-bridge .shop_table .product-name a:hover:not(.lp *) {
	color: var(--lpc-burgundy);
}

/* Preise in Hausfarbe */
body.lpc-bridge .woocommerce-Price-amount:not(.lp *) {
	color: var(--lpc-burgundy);
	font-weight: 600;
}

/* Der Bereich mit der Warenkorbsumme */
body.lpc-bridge .cart-collaterals .cart_totals:not(.lp *),
body.lpc-bridge .woocommerce-checkout-review-order:not(.lp *) {
	background: rgba(213, 190, 155, 0.18);
	border: 1px solid rgba(84, 83, 83, 0.14);
	padding: 22px;
}

/* Schaltflächen von WooCommerce im Stil der Startseite */
body.lpc-bridge .woocommerce a.button:not(.lp *),
body.lpc-bridge .woocommerce button.button:not(.lp *),
body.lpc-bridge .woocommerce input.button:not(.lp *),
body.lpc-bridge .woocommerce #place_order:not(.lp *) {
	font-family: var(--lpc-font-condensed);
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: 0;
	background: var(--lpc-burgundy);
	color: #fff;
	padding: 13px 28px;
	transition: background 0.2s;
}

body.lpc-bridge .woocommerce a.button:hover:not(.lp *),
body.lpc-bridge .woocommerce button.button:hover:not(.lp *),
body.lpc-bridge .woocommerce input.button:hover:not(.lp *),
body.lpc-bridge .woocommerce #place_order:hover:not(.lp *) {
	background: var(--lpc-orange);
	color: #fff;
}

/* Ausgegraute Schaltflächen bleiben erkennbar ausgegraut */
body.lpc-bridge .woocommerce button.button:disabled:not(.lp *),
body.lpc-bridge .woocommerce button.button[disabled]:not(.lp *) {
	background: rgba(84, 83, 83, 0.25);
	color: rgba(255, 255, 255, 0.8);
}

/* Eingabefelder */
body.lpc-bridge .woocommerce form .form-row input.input-text:not(.lp *),
body.lpc-bridge .woocommerce form .form-row textarea:not(.lp *),
body.lpc-bridge .woocommerce form .form-row select:not(.lp *) {
	border: 1px solid rgba(84, 83, 83, 0.2);
	border-radius: 0;
	padding: 11px 13px;
	font-family: var(--lpc-font-body);
	font-size: 0.9rem;
	background: #fff;
}

body.lpc-bridge .woocommerce form .form-row input.input-text:focus:not(.lp *),
body.lpc-bridge .woocommerce form .form-row textarea:focus:not(.lp *),
body.lpc-bridge .woocommerce form .form-row select:focus:not(.lp *) {
	border-color: var(--lpc-burgundy);
	outline: none;
}

body.lpc-bridge .woocommerce form .form-row label:not(.lp *) {
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lpc-cappuccino);
}

/* Hinweise und Meldungen */
body.lpc-bridge .woocommerce-message:not(.lp *),
body.lpc-bridge .woocommerce-info:not(.lp *) {
	border-top-color: var(--lpc-burgundy);
	background: rgba(213, 190, 155, 0.18);
	border-radius: 0;
}

body.lpc-bridge .woocommerce-error:not(.lp *) {
	border-top-color: var(--lpc-orange);
	border-radius: 0;
}

@media (max-width: 767px) {
	body.lpc-bridge .shop_table th:not(.lp *),
	body.lpc-bridge .shop_table td:not(.lp *) {
		padding: 11px 10px;
		font-size: 0.85rem;
	}
}

/* ─── Formular von Elementor ─────────────────────────────────────
   Das Kontaktformular bringt runde Felder mit. Überall sonst auf der
   Seite sind Eingaben und Schaltflächen eckig – auch beim
   Reservierungsformular, das eigens darauf umgestellt wurde. */
.lpc-bridge .elementor-field-group .elementor-field:not(.lp *),
.lpc-bridge .elementor-field-group .elementor-field-textual:not(.lp *) {
	border-radius: 0 !important;
	border: 1px solid rgba(84, 83, 83, 0.25) !important;
	background: #fff !important;
	font-family: 'Rubik', system-ui, sans-serif !important;
	/* 16 px, sonst zoomt iOS beim Antippen hinein. */
	font-size: 16px !important;
	padding: 14px 16px !important;
}

.lpc-bridge .elementor-field-group .elementor-field:focus:not(.lp *),
.lpc-bridge .elementor-field-group .elementor-field-textual:focus:not(.lp *) {
	border-color: #7E1306 !important;
	outline: none !important;
}

.lpc-bridge .elementor-field-label:not(.lp *) {
	font-family: 'Rubik', system-ui, sans-serif !important;
	font-size: 0.82rem !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: #545353 !important;
}

.lpc-bridge .elementor-button[type="submit"]:not(.lp *) {
	border-radius: 0 !important;
}

/* ─── Familienpizza (Produkt zum Zusammenstellen) ────────────────
   Der Aufbau bleibt wie bei jeder Produktseite: links das Bild,
   rechts der Inhalt. Ein Versuch, die Auswahl über die volle Breite
   zu legen, hat den gewohnten Aufbau zerstört – deshalb wieder raus. */

/* Die Mengenfelder der Auswahl waren rund, alle anderen Eingaben auf
   der Website sind eckig. */
body.single-product .mnm_form input.qty:not(.lp *),
body.single-product .mnm_child_products input.qty:not(.lp *) {
	border-radius: 0 !important;
	border: 1px solid rgba(84, 83, 83, 0.25) !important;
}

/* ─── Schaltflächen durchgehend eckig ────────────────────────────
   Auf den Produkt- und Bestellseiten kamen noch runde Knöpfe durch:
   „Zum Warenkorb hinzufügen" war vollständig abgerundet (999 px), die
   Elemente des Bestell-Plugins (Mengenregler, „Hinzufügen", Schließen)
   auf 100 px, der Kassen-Knopf im Warenkorb-Fenster auf 20 px. Der
   Rest der Website ist eckig – das fiel auseinander.

   Der schwebende Warenkorb bleibt bewusst ein Kreis: Das ist ein
   Sinnbild, keine Schaltfläche mit Beschriftung. */
body.lpc-bridge .single_add_to_cart_button:not(.lp *),
body.lpc-bridge .woocommerce button.button:not(.lp *),
body.lpc-bridge .woocommerce a.button:not(.lp *),
body.lpc-bridge .woocommerce input.button:not(.lp *),
body.lpc-bridge .wc-forward:not(.lp *),
body.lpc-bridge .checkout-button:not(.lp *),
body.lpc-bridge .orderable-button:not(.lp *),
body.lpc-bridge .orderable-drawer__close:not(.lp *),
body.lpc-bridge .orderable-quantity-roller__button:not(.lp *),
body.lpc-bridge .orderable-product__button:not(.lp *),
body.lpc-bridge .orderable-mini-cart__button:not(.lp *) {
	border-radius: 0 !important;
}

/* Auch auf den Produktseiten selbst, die nicht über die Brücke laufen. */
body.single-product .single_add_to_cart_button:not(.lp *),
body.single-product .woocommerce button.button:not(.lp *),
body.single-product .woocommerce a.button:not(.lp *),
body.single-product .orderable-button:not(.lp *),
body.single-product .orderable-quantity-roller__button:not(.lp *),
body.single-product .orderable-drawer__close:not(.lp *) {
	border-radius: 0 !important;
}

/* Die Mengenregler auf der Produktseite stammen aus einem weiteren
   Plugin und heißen anders (`tgqb-…`), ebenso die Bearbeiten-Links an
   den Zutatenoptionen und die Regler im Warenkorb-Fenster. Die
   Adminleiste (`ab-item`) bleibt außen vor – die gehört WordPress. */
body.single-product .tgqb-qty-updater:not(.lp *),
body.single-product input.qty:not(.lp *),
body.single-product .wpo-edit-option-link:not(.lp *),
body.lpc-bridge .tgqb-qty-updater:not(.lp *),
body.lpc-bridge input.qty:not(.lp *),
body.lpc-bridge .wpo-edit-option-link:not(.lp *),
.woofc-item-qty-minus:not(.lp *),
.woofc-item-qty-plus:not(.lp *),
.woofc-item-qty input:not(.lp *) {
	border-radius: 0 !important;
}

/* Die Auswahlfelder der Zutatenoptionen stehen in derselben Zeile wie
   die Knöpfe und waren als Einzige noch abgerundet. */
body.single-product .variations select:not(.lp *),
body.single-product .wpo-options select:not(.lp *),
body.single-product select.wpo-option-select:not(.lp *),
body.single-product .product select:not(.lp *),
body.lpc-bridge .product select:not(.lp *) {
	border-radius: 0 !important;
}

/* Die Zutaten-Auswahl ist kein echtes Auswahlfeld, sondern ein
   nachgebautes (`nice-select`) – deshalb griff die Regel für `select`
   nicht. Auch die aufklappende Liste darunter. */
body.single-product .nice-select:not(.lp *),
body.single-product .nice-select .list:not(.lp *),
body.lpc-bridge .nice-select:not(.lp *),
body.lpc-bridge .nice-select .list:not(.lp *) {
	border-radius: 0 !important;
}

/* Im Warenkorb blieben noch das Gutscheinfeld und – nur für die
   Verwaltung sichtbar – das Feld zum Teilen des Warenkorbs rund. */
body.lpc-bridge .woocommerce .coupon input.input-text:not(.lp *),
body.lpc-bridge .woocommerce input.input-text:not(.lp *),
body.lpc-bridge input.copy-url:not(.lp *),
body.lpc-bridge button.copy-button:not(.lp *),
.woocommerce .coupon input.input-text:not(.lp *),
input.copy-url:not(.lp *),
button.copy-button:not(.lp *) {
	border-radius: 0 !important;
}

/* Der Mengenregler des Bestell-Plugins hat neben den Knöpfen noch eine
   eigene Hülle (`__roller`), die ebenfalls abgerundet war. */
.orderable-quantity-roller__roller:not(.lp *),
.orderable-quantity-roller:not(.lp *) {
	border-radius: 0 !important;
}

/* Das „×" zum Entfernen einer Warenkorbzeile. */
.woocommerce a.remove:not(.lp *),
body.lpc-bridge a.remove:not(.lp *) {
	border-radius: 0 !important;
}

/* ─── Kasse ──────────────────────────────────────────────────────
   Die Kasse brachte ihre eigenen Rundungen mit: die großen Kästen
   (Rechnungsdaten, Bestellübersicht, Gutschein, Zahlungsart) auf
   24 px, die Eingabe- und Auswahlfelder vollständig abgerundet.
   Bewusst ausgenommen bleiben die Produktbilder in der Übersicht und
   der Sprachumschalter – das sind keine Kästen des Bestellvorgangs. */
body.woocommerce-checkout .col-1:not(.lp *),
body.woocommerce-checkout .col-2:not(.lp *),
body.woocommerce-checkout .woocommerce-additional-fields:not(.lp *),
body.woocommerce-checkout .woocommerce-billing-fields:not(.lp *),
body.woocommerce-checkout .woocommerce-shipping-fields:not(.lp *),
body.woocommerce-checkout .e-checkout__order_review:not(.lp *),
body.woocommerce-checkout .e-checkout__container:not(.lp *),
body.woocommerce-checkout .e-coupon-box:not(.lp *),
body.woocommerce-checkout .woocommerce-checkout-payment:not(.lp *),
body.woocommerce-checkout .woocommerce-checkout-review-order:not(.lp *),
body.woocommerce-checkout .payment_box:not(.lp *),
body.woocommerce-checkout ul.payment_methods:not(.lp *),
body.woocommerce-checkout .woocommerce-info:not(.lp *),
body.woocommerce-checkout .woocommerce-message:not(.lp *),
body.woocommerce-checkout .orderable-order-timings:not(.lp *) {
	border-radius: 0 !important;
}

/* Eingabe- und Auswahlfelder der Kasse. */
body.woocommerce-checkout input[type="text"]:not(.lp *),
body.woocommerce-checkout input[type="email"]:not(.lp *),
body.woocommerce-checkout input[type="tel"]:not(.lp *),
body.woocommerce-checkout input[type="number"]:not(.lp *),
body.woocommerce-checkout input[type="password"]:not(.lp *),
body.woocommerce-checkout input.input-text:not(.lp *),
body.woocommerce-checkout textarea:not(.lp *),
body.woocommerce-checkout select:not(.lp *),
body.woocommerce-checkout .select2-selection:not(.lp *),
body.woocommerce-checkout .nice-select:not(.lp *) {
	border-radius: 0 !important;
}

/* Die Miniaturbilder in der Bestellübersicht – überall sonst auf der
   Website stehen Produktfotos eckig. Der Sprachumschalter unten links
   bleibt unangetastet, der gehört einem fremden Werkzeug. */
body.woocommerce-checkout .attachment-woocommerce_thumbnail:not(.lp *),
body.woocommerce-checkout .woocommerce-checkout-review-order img:not(.lp *),
body.lpc-bridge .attachment-woocommerce_thumbnail:not(.lp *) {
	border-radius: 0 !important;
}

/* Der Zustimmungssatz an der Kasse: Der Verweis auf die AGB kam in
   17,6 px Rubik daher, der Satz drumherum in 11,5 px Roboto – der Link
   sprang dadurch aus der Zeile.

   Der Link steht INNERHALB des Satzes. Eine eigene Größe in `em` wirkt
   sich deshalb zweimal aus und macht ihn zu klein (erster Versuch:
   7,7 px). Richtig ist, ihn schlicht erben zu lassen: Dann ist er so
   groß wie der Satz, in dem er steht – egal, wie der eingestellt ist.
   Die Hausfarbe bleibt, daran erkennt man den Verweis. */
body.woocommerce-checkout .woocommerce-terms-and-conditions-link:not(.lp *),
body.lpc-bridge .woocommerce-terms-and-conditions-link:not(.lp *) {
	font-family: inherit !important;
	font-size: 1em !important;
	font-weight: inherit !important;
	letter-spacing: inherit !important;
	line-height: inherit !important;
	text-transform: inherit !important;
}

/* ─── Familienpizza: Aufbau der Seite ────────────────────────────
   Zwei Sachen standen quer:

   1. Die Spalten wurden auf gleiche Höhe gezogen. Weil die Auswahl
      rechts sehr lang ist, entstand links unter dem Bild ein leerer
      Streifen von mehreren tausend Pixeln. `align-items: start` lässt
      jede Spalte so hoch sein, wie ihr Inhalt es braucht.

   2. „Zutaten" und „Allergene" hingen in der linken Spalte unter dem
      Bild – also weit weg von der Schaltfläche, zu der sie gehören.
      Sie stehen jetzt rechts unter dem Warenkorb-Bereich.

   Die Selektoren kommen ohne die Kennungen des Templates aus: Gemeint
   ist das Raster, in dem ein Produkt zum Zusammenstellen steht. */
body.single-product .e-grid:has(.mnm_form) {
	align-items: start !important;
}

body.single-product .e-grid:has(.mnm_form) > .elementor-widget-n-accordion {
	grid-column: 2 !important;
}

/* „Auswahl aufheben" beim Produkt zum Zusammenstellen. */
body.single-product .mnm_reset:not(.lp *),
body.lpc-bridge .mnm_reset:not(.lp *) {
	border-radius: 0 !important;
}

/* Der Abschnitt „Mach dein Menü komplett" lag ohne seitlichen Abstand
   am Fensterrand, während der Produktbereich darüber 24 px hat. Auf
   breiten Bildschirmen fiel das nicht auf, weil die Inhaltsbreite
   ohnehin begrenzt ist – auf schmaleren klebte er am Rand (gemessen:
   2 px bei 760 px Fensterbreite). */
body.single-product .e-con:has(.elementor-widget-loop-grid) {
	/* Genau 32 px – so viel hat der Produktbereich darüber. Mit den
	   zuerst gesetzten 24 px begann der Abschnitt bei schmalem Fenster
	   8 px weiter außen als der restliche Seiteninhalt. */
	padding-left: 32px !important;
	padding-right: 32px !important;
}

/* ─── Abschnitte außerhalb des Elementor-Dokuments ───────────────
   Bei der Familienpizza steht „Mach dein Menü komplett" nicht im
   Produkt-Template, sondern **direkt am Seitenkörper** – zwischen
   Produktbereich und Fußzeile, ohne den Rahmen, den Elementor sonst
   um seine Seiten legt. Damit fehlen dem Abschnitt sämtliche
   Angaben aus dem Template-Stylesheet: Elementor setzt die Anzeigeart
   über eine Variable (`display: var(--display)`), die dort nirgends
   definiert wird. Der Browser fällt auf `inline` zurück – und dann
   wirken weder Innenabstand noch Breitenbegrenzung. Der Abschnitt lag
   deshalb hart am Fensterrand.

   Bei anderen Produkten fiel das nicht auf: Dort liegt derselbe
   Abschnitt innerhalb des Templates und bekommt seine Angaben. */
body.single-product > .e-con {
	display: flex !important;
	padding-left: 32px !important;
	padding-right: 32px !important;
}

body.single-product > .e-con > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: 1300px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Findet die Vorschlagsschleife nichts, blieb die Überschrift „Mach
   dein Menü komplett" über einer leeren Fläche stehen (bei der
   Familienpizza der Fall). Dann verschwindet der ganze Abschnitt. */
body.single-product .e-con:has(.elementor-widget-loop-grid):not(:has(.e-loop-item)) {
	display: none !important;
}