/*
 * Raster und Abschnitte.
 *
 * Der Renderer setzt diese Klassen ueber das Elementor-Feld _css_classes auf
 * echte Elementor-Container. Die Regeln setzen zusaetzlich die
 * Elementor-Variablen --display, --flex-direction, --gap und --content-width,
 * damit sie unabhaengig von der Ladereihenfolge der Stylesheets greifen.
 */

/* Abschnitt. Aeusserer Container einer Seitensektion. */
body.yk .yk-section {
	--display: block;
	display: block;
	width: 100%;
	padding: var(--yk-section-top) var(--yk-gutter) var(--yk-section-bottom);
	position: relative;
}

body.yk .yk-section--tight {
	padding-top: var(--yk-section-tight);
	padding-bottom: var(--yk-section-tight);
}

body.yk .yk-section--surface {
	background-color: var(--yk-color-surface);
}

body.yk .yk-section--alt {
	background-color: var(--yk-color-surface-alt);
}

body.yk .yk-section--card {
	background-color: var(--yk-color-surface-card);
}

/* Ochsenblut. Die Markenflaeche, auf der auch das Logo steht. */
body.yk .yk-section--dark {
	background-color: var(--yk-color-brand-deep);
	color: var(--yk-color-text-on-dark);
}

body.yk .yk-section--dark h1,
body.yk .yk-section--dark h2,
body.yk .yk-section--dark h3,
body.yk .yk-section--dark h4,
body.yk .yk-section--dark p,
body.yk .yk-section--dark li,
body.yk .yk-section--dark .elementor-heading-title {
	color: var(--yk-color-text-on-dark);
}

body.yk .yk-section--dark .yk-label,
body.yk .yk-section--dark .yk-small {
	color: var(--yk-color-text-on-dark-muted);
}

body.yk .yk-section--dark a:not(.elementor-button):not(.yk-btn) {
	color: var(--yk-color-sand);
}

/*
 * Architektonisches Raster: feine senkrechte Linien im Hintergrund.
 * Nur ab Laptopbreite, nur dekorativ.
 */
body.yk .yk-section--grid-lines::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: none;
}

@media (min-width: 1024px) {
	body.yk .yk-section--grid-lines::before {
		display: block;
		max-width: var(--yk-content-width);
		margin: 0 auto;
		left: 0;
		right: 0;
		background-image: repeating-linear-gradient(
			to right,
			var(--yk-color-line) 0,
			var(--yk-color-line) 1px,
			transparent 1px,
			transparent calc(100% / 6)
		);
		opacity: 0.55;
	}
}

/*
 * Elementor gibt dem inneren Wrapper eines Containers den Innenabstand oben
 * und unten aus Variablen, die sich vom Abschnitt vererben. Der Abschnitt
 * traegt seinen Abstand selbst; der Wrapper bleibt ohne, sonst verdoppelt
 * sich der Abstand (im Echtmodus der Vorschau am 30.09.2026 gemessen).
 */
body.yk .yk-section > .e-con-inner {
	padding-block-start: 0;
	padding-block-end: 0;
}

/* Inhaltsbreite. Elementor legt bei boxed einen inneren Wrapper an. */
body.yk .yk-wrap,
body.yk .yk-section > .e-con-inner {
	--content-width: var(--yk-content-width);
	width: 100%;
	max-width: var(--yk-content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

body.yk .yk-wrap--narrow,
body.yk .yk-section--narrow > .e-con-inner {
	max-width: var(--yk-narrow-width);
	margin-left: 0;
}

body.yk .yk-wrap--stage,
body.yk .yk-section--stage > .e-con-inner {
	max-width: var(--yk-stage-width);
}

/* Senkrechter Fluss innerhalb eines Blocks. */
body.yk .yk-stack {
	--display: flex;
	--flex-direction: column;
	--gap: var(--yk-space-md);
	--row-gap: var(--yk-space-md);
	display: flex;
	flex-direction: column;
	gap: var(--yk-space-md);
}

body.yk .yk-stack--xs {
	--gap: var(--yk-space-xs);
	--row-gap: var(--yk-space-xs);
	gap: var(--yk-space-xs);
}

body.yk .yk-stack--sm {
	--gap: var(--yk-space-sm);
	--row-gap: var(--yk-space-sm);
	gap: var(--yk-space-sm);
}

body.yk .yk-stack--md {
	--gap: var(--yk-space-md);
	--row-gap: var(--yk-space-md);
	gap: var(--yk-space-md);
}

body.yk .yk-stack--lg {
	--gap: var(--yk-space-lg);
	--row-gap: var(--yk-space-lg);
	gap: var(--yk-space-lg);
}

/* Waagerechte Gruppe, zum Beispiel zwei Knoepfe. */
body.yk .yk-row {
	--display: flex;
	--flex-direction: row;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--yk-space-sm) var(--yk-space-md);
}

/* Raster. Immer einspaltig auf kleinen Breiten. */
body.yk .yk-grid {
	--display: grid;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--yk-grid-gap);
	width: 100%;
}

@media (min-width: 768px) {
	body.yk .yk-grid--2,
	body.yk .yk-grid--3,
	body.yk .yk-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	body.yk .yk-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.yk .yk-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Asymmetrische Aufteilungen. Bewusst kein 50/50.
 * Zahl steht fuer die Spaltenbreite in Zwoelfteln.
 */
body.yk .yk-split {
	--display: grid;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--yk-space-xl);
	align-items: start;
	width: 100%;
}

@media (min-width: 1024px) {
	body.yk .yk-split--7-5 {
		grid-template-columns: 7fr 5fr;
		gap: var(--yk-space-xxl);
	}

	body.yk .yk-split--5-7 {
		grid-template-columns: 5fr 7fr;
		gap: var(--yk-space-xxl);
	}

	body.yk .yk-split--8-4 {
		grid-template-columns: 8fr 4fr;
		gap: var(--yk-space-xl);
	}

	body.yk .yk-split--center {
		align-items: center;
	}
}

/* Kopfzeile eines Abschnitts: Titelblock links, Aktion rechts. */
body.yk .yk-section-head {
	--display: grid;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--yk-space-sm);
	align-items: end;
	margin-bottom: var(--yk-space-xl);
}

@media (min-width: 1024px) {
	body.yk .yk-section-head--with-action {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--yk-space-xl);
	}
}

body.yk .yk-section-head h2 {
	max-width: var(--yk-measure-heading);
	margin-bottom: 0;
}

body.yk .yk-section-head p {
	margin-bottom: 0;
}

/* Elementor-Widgets sollen im Fluss keine Zusatzabstaende erzeugen. */
body.yk .yk-section .elementor-widget:not(:last-child) {
	margin-bottom: 0;
}

body.yk .yk-block {
	width: 100%;
}

body.yk .yk-section img,
body.yk .yk-section video {
	max-width: 100%;
}