/* ------------------------------------------------------------------
 * Bezugspunkt fuer Icon-Box und Bilder-Box
 *
 * Der Wrapper wird zum Grid mit zwei Spalten und zwei Zeilen. Der
 * Content-Container bekommt display:contents, damit Titel und
 * Beschreibung selbst zu Grid-Kindern werden: Titel in Zeile 1,
 * Beschreibung in Zeile 2. Das Icon liegt je nach Bezugspunkt in
 * Zeile 1 oder Zeile 2 und sitzt damit genau auf deren Hoehe -
 * unabhaengig davon, wie lang der uebrige Text ist.
 *
 * Absichtlich NICHT gesetzt wird align-items: das kommt von Elementors
 * vorhandener "Vertikale Ausrichtung" und wirkt in Grid genauso wie in
 * Flex. So bleibt oben/mittig/unten dort, wo der Nutzer es erwartet,
 * nur eben bezogen auf die gewaehlte Zeile.
 *
 * Die Klassen mk-icon-bezug--titel / --text setzt Elementor selbst ueber
 * prefix_class am Bezugspunkt-Control. Eine gemeinsame Basisklasse gibt
 * es deshalb nicht - beide Faelle stehen ueberall ausgeschrieben.
 *
 * WICHTIG - warum ueberall .elementor-widget davorsteht:
 *
 * Elementor liefert fuer diese beiden Widgets eigene Stylesheets
 * (widget-icon-box, widget-image-box) und reiht sie ueber
 * get_style_depends() erst beim Rendern des Widgets ein. Dieses
 * Stylesheet haengt dagegen an elementor/frontend/after_enqueue_styles
 * und steht damit im Quelltext davor. Elementors Regel
 *
 *     .elementor-widget-icon-box .elementor-icon-box-wrapper { display: flex }
 *
 * hat mit einer Regel wie .mk-icon-bezug--titel .elementor-icon-box-wrapper
 * exakt dieselbe Spezifitaet (zwei Klassen) - bei Gleichstand gewinnt
 * das spaeter geladene Stylesheet, also Elementor. Das Grid wurde
 * dadurch komplett ueberschrieben und der Bezugspunkt blieb wirkungslos
 * (gemessen am 09.09.2026 auf markoon-druckproduktion).
 *
 * Die zusaetzliche Klasse .elementor-widget - die jedes Widget ohnehin
 * traegt - hebt jede Regel hier auf drei Klassen und macht sie damit
 * unabhaengig von der Ladereihenfolge. Deshalb NIE eine Regel in dieser
 * Datei ohne diesen Vorsatz schreiben.
 * ------------------------------------------------------------------ */

.elementor-widget.mk-icon-bezug--titel .elementor-icon-box-wrapper,
.elementor-widget.mk-icon-bezug--titel .elementor-image-box-wrapper,
.elementor-widget.mk-icon-bezug--text .elementor-icon-box-wrapper,
.elementor-widget.mk-icon-bezug--text .elementor-image-box-wrapper {
	display: grid;
	/* Erste Spalte: beim Icon inhaltsbreit, beim Bild Elementors eigener Wert. */
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	/*
	 * Elementors Control "Icon-Abstand" schreibt gap auf diesen Wrapper. In
	 * Flex mit flex-direction:row wirkt das nur waagerecht - Abstand zwischen
	 * Icon und Text. In Grid wirkt gap auf BEIDE Achsen und landet damit
	 * zusaetzlich zwischen Titel und Beschreibung: der Spalt dort wuchs beim
	 * Umschalten des Bezugspunkts um genau den Icon-Abstand (gemessen 17px am
	 * 09.09.2026). Der senkrechte Anteil muss deshalb weg - fuer den Abstand
	 * zwischen Titel und Text ist allein "Content Spacing" zustaendig, das
	 * als margin am Titel haengt und unberuehrt bleibt.
	 *
	 * !important ist hier bewusst gesetzt: den gap schreibt Elementor in die
	 * Seiten-CSS mit einem Selektor wie
	 *     .elementor-2 .elementor-element.elementor-element-abc123 .elementor-icon-box-wrapper
	 * also vier Klassen tief, und diese Datei laedt davor. Die Tiefe haengt an
	 * Seiten- und Element-ID, ein Nachbauen der Spezifitaet waere ein Rennen
	 * ohne verlaessliches Ziel. Betroffen ist ausschliesslich row-gap; der
	 * waagerechte Abstand bleibt Elementors Regler.
	 */
	row-gap: 0 !important;
}

.elementor-widget.mk-icon-bezug--titel .elementor-icon-box-content,
.elementor-widget.mk-icon-bezug--titel .elementor-image-box-content,
.elementor-widget.mk-icon-bezug--text .elementor-icon-box-content,
.elementor-widget.mk-icon-bezug--text .elementor-image-box-content {
	display: contents;
}

.elementor-widget.mk-icon-bezug--titel .elementor-icon-box-icon,
.elementor-widget.mk-icon-bezug--titel .elementor-image-box-img,
.elementor-widget.mk-icon-bezug--text .elementor-icon-box-icon,
.elementor-widget.mk-icon-bezug--text .elementor-image-box-img {
	grid-column: 1;
}

.elementor-widget.mk-icon-bezug--titel .elementor-icon-box-title,
.elementor-widget.mk-icon-bezug--titel .elementor-image-box-title,
.elementor-widget.mk-icon-bezug--text .elementor-icon-box-title,
.elementor-widget.mk-icon-bezug--text .elementor-image-box-title {
	grid-column: 2;
	grid-row: 1;
	/*
	 * Ohne das wuerde Elementors align-items den Titel in seiner Zeile
	 * mitzentrieren. Zeile 1 ist zwar genau titelhoch, Zeile 2 aber nicht -
	 * deshalb stehen beide Textzeilen fest oben in ihrer Zeile.
	 */
	align-self: start;
}

.elementor-widget.mk-icon-bezug--titel .elementor-icon-box-description,
.elementor-widget.mk-icon-bezug--titel .elementor-image-box-description,
.elementor-widget.mk-icon-bezug--text .elementor-icon-box-description,
.elementor-widget.mk-icon-bezug--text .elementor-image-box-description {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
}

/* Bezugspunkt Titel: das Icon teilt sich die Zeile mit der Ueberschrift. */
.elementor-widget.mk-icon-bezug--titel .elementor-icon-box-icon,
.elementor-widget.mk-icon-bezug--titel .elementor-image-box-img {
	grid-row: 1;
}

/* Bezugspunkt Beschreibung: das Icon rutscht in die Zeile des Fliesstexts. */
.elementor-widget.mk-icon-bezug--text .elementor-icon-box-icon,
.elementor-widget.mk-icon-bezug--text .elementor-image-box-img {
	grid-row: 2;
}

/* ------------------------------------------------------------------
 * Icon rechts
 *
 * Bei seitlich getauschter Position dreht Elementor die Reihenfolge per
 * flex-direction um - das greift im Grid nicht. Deshalb hier die
 * Spalten tauschen. Icon-Box nutzt den logischen Wert inline-end,
 * die Bilder-Box weiterhin right.
 * ------------------------------------------------------------------ */

.elementor-widget.mk-icon-bezug--titel.elementor-position-inline-end .elementor-icon-box-wrapper,
.elementor-widget.mk-icon-bezug--text.elementor-position-inline-end .elementor-icon-box-wrapper,
.elementor-widget.mk-icon-bezug--titel.elementor-position-right .elementor-icon-box-wrapper,
.elementor-widget.mk-icon-bezug--text.elementor-position-right .elementor-icon-box-wrapper,
.elementor-widget.mk-icon-bezug--titel.elementor-position-right .elementor-image-box-wrapper,
.elementor-widget.mk-icon-bezug--text.elementor-position-right .elementor-image-box-wrapper {
	grid-template-columns: minmax(0, 1fr) auto;
}

.elementor-widget.mk-icon-bezug--titel.elementor-position-inline-end .elementor-icon-box-icon,
.elementor-widget.mk-icon-bezug--text.elementor-position-inline-end .elementor-icon-box-icon,
.elementor-widget.mk-icon-bezug--titel.elementor-position-right .elementor-icon-box-icon,
.elementor-widget.mk-icon-bezug--text.elementor-position-right .elementor-icon-box-icon,
.elementor-widget.mk-icon-bezug--titel.elementor-position-right .elementor-image-box-img,
.elementor-widget.mk-icon-bezug--text.elementor-position-right .elementor-image-box-img {
	grid-column: 2;
}

.elementor-widget.mk-icon-bezug--titel.elementor-position-inline-end .elementor-icon-box-title,
.elementor-widget.mk-icon-bezug--titel.elementor-position-inline-end .elementor-icon-box-description,
.elementor-widget.mk-icon-bezug--text.elementor-position-inline-end .elementor-icon-box-title,
.elementor-widget.mk-icon-bezug--text.elementor-position-inline-end .elementor-icon-box-description,
.elementor-widget.mk-icon-bezug--titel.elementor-position-right .elementor-icon-box-title,
.elementor-widget.mk-icon-bezug--titel.elementor-position-right .elementor-icon-box-description,
.elementor-widget.mk-icon-bezug--text.elementor-position-right .elementor-icon-box-title,
.elementor-widget.mk-icon-bezug--text.elementor-position-right .elementor-icon-box-description,
.elementor-widget.mk-icon-bezug--titel.elementor-position-right .elementor-image-box-title,
.elementor-widget.mk-icon-bezug--titel.elementor-position-right .elementor-image-box-description,
.elementor-widget.mk-icon-bezug--text.elementor-position-right .elementor-image-box-title,
.elementor-widget.mk-icon-bezug--text.elementor-position-right .elementor-image-box-description {
	grid-column: 1;
}

/* ------------------------------------------------------------------
 * Bilder-Box: Breite
 *
 * Elementors Control "Breite" schreibt einen Prozentwert auf das
 * <figure>. Gegen eine auto-breite Grid-Spalte ist das zirkulaer, das
 * Bild wuerde schrumpfen. PHP spiegelt den Wert deshalb als
 * --mk-bild-breite an den Wrapper; die Spalte bekommt ihn, das figure
 * fuellt sie aus.
 * ------------------------------------------------------------------ */

.elementor-widget.mk-icon-bezug--titel .elementor-image-box-wrapper,
.elementor-widget.mk-icon-bezug--text .elementor-image-box-wrapper {
	grid-template-columns: var(--mk-bild-breite, 30%) minmax(0, 1fr);
}

.elementor-widget.mk-icon-bezug--titel.elementor-position-right .elementor-image-box-wrapper,
.elementor-widget.mk-icon-bezug--text.elementor-position-right .elementor-image-box-wrapper {
	grid-template-columns: minmax(0, 1fr) var(--mk-bild-breite, 30%);
}

.elementor-widget.mk-icon-bezug--titel .elementor-image-box-wrapper figure.elementor-image-box-img,
.elementor-widget.mk-icon-bezug--text .elementor-image-box-wrapper figure.elementor-image-box-img {
	width: 100%;
}

/* ------------------------------------------------------------------
 * Schmale Geraete
 *
 * Sobald Elementor die Box dort untereinander stellt - bei der Icon-Box
 * ist "oben" der Standard fuer Mobil -, muss das Grid weichen.
 *
 * Die Icon-Box liefert die Erkennung selbst mit: ihr Positions-Control
 * ist mit 'elementor%s-position-' angelegt, Elementor schreibt also je
 * Breakpoint eine eigene Klasse ins Markup. Daran docken diese Regeln
 * direkt an - ohne PHP und damit auch im Editor korrekt.
 *
 * Die Bilder-Box hat 'elementor-position-' ohne Platzhalter und traegt
 * nur die Desktop-Klasse. Fuer sie setzt PHP mk-icon-bezug--aus-tablet
 * beziehungsweise --aus-mobil.
 *
 * Die Grenzen entsprechen Elementors Standard-Breakpoints (Mobil bis
 * 767, Tablet bis 1024). Wer im Kit eigene Breakpoints gesetzt hat,
 * muss diese Werte hier mitziehen.
 * ------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-widget.mk-icon-bezug--titel.elementor-tablet-position-block-start .elementor-icon-box-wrapper,
	.elementor-widget.mk-icon-bezug--titel.elementor-tablet-position-block-end .elementor-icon-box-wrapper,
	.elementor-widget.mk-icon-bezug--text.elementor-tablet-position-block-start .elementor-icon-box-wrapper,
	.elementor-widget.mk-icon-bezug--text.elementor-tablet-position-block-end .elementor-icon-box-wrapper,
	.elementor-widget.mk-icon-bezug--aus-tablet .elementor-image-box-wrapper {
		display: block;
		grid-template-columns: none;
	}

	.elementor-widget.mk-icon-bezug--titel.elementor-tablet-position-block-start .elementor-icon-box-content,
	.elementor-widget.mk-icon-bezug--titel.elementor-tablet-position-block-end .elementor-icon-box-content,
	.elementor-widget.mk-icon-bezug--text.elementor-tablet-position-block-start .elementor-icon-box-content,
	.elementor-widget.mk-icon-bezug--text.elementor-tablet-position-block-end .elementor-icon-box-content,
	.elementor-widget.mk-icon-bezug--aus-tablet .elementor-image-box-content {
		display: block;
	}

	.elementor-widget.mk-icon-bezug--aus-tablet .elementor-image-box-wrapper figure.elementor-image-box-img {
		width: revert;
	}
}

@media (max-width: 767px) {
	.elementor-widget.mk-icon-bezug--titel.elementor-mobile-position-block-start .elementor-icon-box-wrapper,
	.elementor-widget.mk-icon-bezug--titel.elementor-mobile-position-block-end .elementor-icon-box-wrapper,
	.elementor-widget.mk-icon-bezug--text.elementor-mobile-position-block-start .elementor-icon-box-wrapper,
	.elementor-widget.mk-icon-bezug--text.elementor-mobile-position-block-end .elementor-icon-box-wrapper,
	.elementor-widget.mk-icon-bezug--aus-mobil .elementor-image-box-wrapper {
		display: block;
		grid-template-columns: none;
	}

	.elementor-widget.mk-icon-bezug--titel.elementor-mobile-position-block-start .elementor-icon-box-content,
	.elementor-widget.mk-icon-bezug--titel.elementor-mobile-position-block-end .elementor-icon-box-content,
	.elementor-widget.mk-icon-bezug--text.elementor-mobile-position-block-start .elementor-icon-box-content,
	.elementor-widget.mk-icon-bezug--text.elementor-mobile-position-block-end .elementor-icon-box-content,
	.elementor-widget.mk-icon-bezug--aus-mobil .elementor-image-box-content {
		display: block;
	}

	.elementor-widget.mk-icon-bezug--aus-mobil .elementor-image-box-wrapper figure.elementor-image-box-img {
		width: revert;
	}
}