/*
 * Bausteine.
 *
 * Jede Regel gilt sowohl fuer vom Theme ausgegebenes Markup als auch fuer
 * Elementor-Standardwidgets, die der Renderer mit denselben yk-Klassen
 * versieht. Darum stehen oft zwei Selektoren beieinander:
 *   a.yk-btn                     Knopf direkt im Theme
 *   .yk-btn .elementor-button    Knopf aus dem Elementor-Widget
 *
 * Gestaltungsregeln dieser Datei:
 *   - keine Vorzeilen ueber Ueberschriften, keine Versal-Beschriftungen
 *   - keine farbigen Seitenraender an Kacheln
 *   - Bilder tragen die Flaechen, nicht gleichfoermige Karten
 *   - Hover-Bewegung nur bei feinem Zeiger, Druckrueckmeldung auf Knoepfen
 */

/* ---------------------------------------------------------------- Knoepfe */

body.yk a.yk-btn,
body.yk button.yk-btn,
body.yk .yk-btn .elementor-button,
body.yk .yk-btn .elementor-button-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--yk-space-xs);
	min-height: var(--yk-target-min);
	padding: 12px 22px;
	border: var(--yk-border-strong) solid transparent;
	border-radius: var(--yk-radius-sm);
	font-family: var(--yk-font-sans);
	font-size: var(--yk-size-body);
	font-weight: var(--yk-weight-bold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--yk-duration-fast) ease, border-color var(--yk-duration-fast) ease, color var(--yk-duration-fast) ease, transform var(--yk-duration-fast) var(--yk-easing);
}

body.yk a.yk-btn:active,
body.yk button.yk-btn:active,
body.yk .yk-btn .elementor-button:active {
	transform: scale(var(--yk-press-scale));
}

/* Hauptaktion auf hellem Grund: Bordeaux. */
body.yk a.yk-btn--primary,
body.yk button.yk-btn--primary,
body.yk .yk-btn--primary .elementor-button {
	background-color: var(--yk-color-brand);
	border-color: var(--yk-color-brand);
	color: var(--yk-color-surface-card);
}

body.yk a.yk-btn--primary:hover,
body.yk a.yk-btn--primary:focus-visible,
body.yk button.yk-btn--primary:hover,
body.yk .yk-btn--primary .elementor-button:hover,
body.yk .yk-btn--primary .elementor-button:focus-visible {
	background-color: var(--yk-color-brand-deep);
	border-color: var(--yk-color-brand-deep);
	color: var(--yk-color-surface-card);
}

body.yk a.yk-btn--outline,
body.yk button.yk-btn--outline,
body.yk .yk-btn--outline .elementor-button {
	background-color: transparent;
	border-color: var(--yk-color-line-strong);
	color: var(--yk-color-text);
}

body.yk a.yk-btn--outline:hover,
body.yk .yk-btn--outline .elementor-button:hover {
	border-color: var(--yk-color-brand);
	color: var(--yk-color-brand);
}

body.yk a.yk-btn--ghost,
body.yk .yk-btn--ghost .elementor-button {
	min-height: var(--yk-target-min);
	padding: 4px 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--yk-color-brand);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

body.yk a.yk-btn--ghost:hover,
body.yk .yk-btn--ghost .elementor-button:hover {
	color: var(--yk-color-brand-deep);
}

/*
 * Auf Ochsenblut wird die Hauptaktion zu Sand, wie die Akzente im Live-Kopf.
 * Gilt fuer Kopf, Einstieg der Startseite und Aufrufbaender.
 */
body.yk .yk-header a.yk-btn--primary,
body.yk .yk-header .yk-btn--primary .elementor-button,
body.yk .yk-hero--brand a.yk-btn--primary,
body.yk .yk-hero--brand .yk-btn--primary .elementor-button,
body.yk .yk-section--dark a.yk-btn--primary,
body.yk .yk-section--dark .yk-btn--primary .elementor-button {
	background-color: var(--yk-color-sand);
	border-color: var(--yk-color-sand);
	color: var(--yk-color-brand-deep);
}

body.yk .yk-header a.yk-btn--primary:hover,
body.yk .yk-header .yk-btn--primary .elementor-button:hover,
body.yk .yk-hero--brand a.yk-btn--primary:hover,
body.yk .yk-hero--brand .yk-btn--primary .elementor-button:hover,
body.yk .yk-section--dark a.yk-btn--primary:hover,
body.yk .yk-section--dark .yk-btn--primary .elementor-button:hover {
	background-color: var(--yk-color-surface);
	border-color: var(--yk-color-surface);
	color: var(--yk-color-brand-deep);
}

body.yk .yk-hero--brand a.yk-btn--outline,
body.yk .yk-hero--brand .yk-btn--outline .elementor-button,
body.yk .yk-section--dark a.yk-btn--outline,
body.yk .yk-section--dark .yk-btn--outline .elementor-button {
	border-color: var(--yk-color-line-on-dark);
	color: var(--yk-color-text-on-dark);
}

body.yk .yk-hero--brand a.yk-btn--outline:hover,
body.yk .yk-hero--brand .yk-btn--outline .elementor-button:hover,
body.yk .yk-section--dark a.yk-btn--outline:hover,
body.yk .yk-section--dark .yk-btn--outline .elementor-button:hover {
	border-color: var(--yk-color-sand);
	color: var(--yk-color-sand);
}

/* ------------------------------------------------------------------- Hero */

body.yk .yk-hero {
	padding-top: var(--yk-space-xl);
	padding-bottom: var(--yk-space-xxl);
	overflow: hidden;
}

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

body.yk .yk-hero h1 {
	margin-bottom: var(--yk-space-sm);
	max-width: 18ch;
}

body.yk .yk-hero__lead,
body.yk .yk-hero__lead p {
	font-size: var(--yk-size-lead);
	line-height: var(--yk-leading-lead);
	max-width: 44ch;
}

body.yk .yk-hero__actions {
	margin-top: var(--yk-space-md);
	gap: var(--yk-space-sm) var(--yk-space-xl);
}

/* Aktion und Telefon stehen nebeneinander, solange Platz ist. */
body.yk .yk-hero__actions > .elementor-widget,
body.yk .yk-hero__actions > .yk-block {
	width: auto;
	flex: 0 0 auto;
}

body.yk .yk-hero--brand h1 {
	max-width: none;
}

/*
 * Einstieg der Startseite auf Ochsenblut. Der Kopf mit dem Logo geht
 * nahtlos in diese Flaeche ueber; zusammen bilden sie den Markenblock.
 */
body.yk .yk-hero--brand {
	background-color: var(--yk-color-brand-deep);
	color: var(--yk-color-text-on-dark);
	padding-top: var(--yk-space-lg);
	padding-bottom: var(--yk-space-xl);
}

body.yk .yk-hero--brand h1,
body.yk .yk-hero--brand .yk-display,
body.yk .yk-hero--brand .elementor-heading-title,
body.yk .yk-hero--brand p {
	color: var(--yk-color-text-on-dark);
}

body.yk .yk-hero--brand .yk-hero__lead p {
	color: var(--yk-color-text-on-dark-muted);
}

body.yk .yk-hero--brand .yk-contact-actions__phone,
body.yk .yk-hero--brand .yk-contact-actions__whatsapp {
	color: var(--yk-color-text-on-dark);
}

body.yk .yk-hero--brand .yk-contact-actions__phone:hover,
body.yk .yk-hero--brand .yk-contact-actions__whatsapp:hover {
	color: var(--yk-color-sand);
}

body.yk .yk-hero--brand .yk-contact-actions__label {
	color: var(--yk-color-text-on-dark-muted);
}

@media (min-width: 1024px) {
	body.yk .yk-hero--brand {
		padding-top: var(--yk-space-xl);
		padding-bottom: var(--yk-space-xxl);
	}
}

/*
 * Bild- und Videoflaeche des Einstiegs.
 * Hochkant im natuerlichen Verhaeltnis 9 zu 16, ohne Beschnitt. Die Breite
 * richtet sich nach der erlaubten Hoehe. Mobil bleibt die Flaeche so niedrig,
 * dass Ueberschrift, Satz und Aktion zuerst sichtbar sind.
 */
body.yk .yk-hero__media {
	position: relative;
	width: 100%;
	background-color: var(--yk-color-surface-alt);
}

body.yk .yk-hero--brand .yk-hero__media {
	background-color: var(--yk-color-brand-deep-hover);
}

body.yk .yk-hero__media--portrait,
body.yk .yk-media--portrait {
	--yk-portrait-max-h: 62vh;
	aspect-ratio: var(--yk-aspect-portrait);
	width: min(100%, calc(var(--yk-portrait-max-h) * 9 / 16));
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 1024px) {
	body.yk .yk-hero__media--portrait,
	body.yk .yk-media--portrait {
		--yk-portrait-max-h: min(72vh, 680px);
		margin-right: 0;
	}
}

body.yk .yk-hero__media--landscape {
	aspect-ratio: var(--yk-aspect-stage);
}

body.yk .yk-hero--wide .yk-hero__media--landscape {
	aspect-ratio: var(--yk-aspect-landscape);
	margin-top: var(--yk-space-xl);
}

@media (min-width: 1024px) {
	body.yk .yk-hero--wide .yk-hero__media--landscape {
		aspect-ratio: 21 / 9;
	}
}

body.yk .yk-hero__media img,
body.yk .yk-hero__media video,
body.yk .yk-hero__media .elementor-widget-video,
body.yk .yk-hero__media .elementor-wrapper,
body.yk .yk-hero__media > .elementor-widget-image,
body.yk .yk-hero__media > .elementor-widget-image .elementor-widget-container {
	width: 100%;
	height: 100%;
}

body.yk .yk-hero__media img,
body.yk .yk-hero__media video {
	object-fit: cover;
}

/* ------------------------------------------------------ Medien und Videos */

body.yk .yk-media {
	position: relative;
	width: 100%;
	background-color: var(--yk-color-surface-alt);
	overflow: hidden;
}

body.yk .yk-media--landscape {
	aspect-ratio: var(--yk-aspect-landscape);
}

body.yk .yk-media--square {
	aspect-ratio: var(--yk-aspect-square);
}

body.yk .yk-media--stage {
	aspect-ratio: var(--yk-aspect-stage);
}

body.yk .yk-media--tile {
	aspect-ratio: 4 / 3;
}

body.yk .yk-media > .elementor-widget-image,
body.yk .yk-media > .elementor-widget-video,
body.yk .yk-media .elementor-widget-container,
body.yk .yk-media .elementor-wrapper,
body.yk .yk-media .elementor-fit-aspect-ratio,
body.yk .yk-media a {
	width: 100%;
	height: 100%;
}

body.yk .yk-media img,
body.yk .yk-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Knopf zum Abspielen und Anhalten, von media.js eingesetzt. */
body.yk .yk-media__toggle {
	position: absolute;
	left: var(--yk-space-sm);
	bottom: var(--yk-space-sm);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--yk-space-xs);
	min-height: var(--yk-target-min);
	padding: 10px 16px;
	background-color: var(--yk-color-sand);
	border: 0;
	border-radius: var(--yk-radius-sm);
	color: var(--yk-color-brand-deep);
	font-family: var(--yk-font-sans);
	font-size: var(--yk-size-small);
	font-weight: var(--yk-weight-bold);
	cursor: pointer;
	transition: transform var(--yk-duration-fast) var(--yk-easing);
}

body.yk .yk-media__toggle:active {
	transform: scale(var(--yk-press-scale));
}

body.yk .yk-media__toggle::before {
	content: "";
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid currentColor;
}

/* Nach dem ersten Abspielen uebernehmen die Bedienelemente des Browsers. */
body.yk .is-started > .yk-media__toggle {
	display: none;
}

/* ------------------------------------------------------ Bildkacheln */

/*
 * Leistungen und Beispiele als Bildkacheln: das Foto traegt, darunter Titel
 * und ein Satz. Kein Kasten, kein Schatten. Die ganze Kachel ist klickbar,
 * der Link bleibt der Titel.
 */
body.yk .yk-tiles {
	--display: grid;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--yk-space-xl) var(--yk-grid-gap);
}

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

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

body.yk .yk-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--yk-space-sm);
}

body.yk .yk-tile .yk-media {
	margin-bottom: var(--yk-space-xs);
}

body.yk .yk-tile__title,
body.yk .yk-tile h3 {
	margin: 0;
}

body.yk .yk-tile__title a {
	color: var(--yk-color-text);
	text-decoration: none;
}

body.yk .yk-tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

body.yk .yk-tile__text p {
	margin: 0;
	color: var(--yk-color-text-muted);
}

/*
 * Fokus: Der Rahmen sitzt am fokussierten Titellink selbst (Grundregel in
 * base.css), nicht an der Kachel. Hilfsmittel und Pruefwerkzeuge lesen den
 * Fokus am fokussierten Element (S0-Befund F11, final-2). Die Kachel zeigt
 * zusaetzlich die Titelfarbe wie beim Zeigen.
 */
body.yk .yk-tile:focus-within .yk-tile__title a {
	color: var(--yk-color-brand);
}

@media (hover: hover) and (pointer: fine) {
	body.yk .yk-tile img {
		transition: transform var(--yk-duration-base) var(--yk-easing);
	}

	body.yk .yk-tile:hover img {
		transform: scale(1.02);
	}

	body.yk .yk-tile:hover .yk-tile__title a {
		color: var(--yk-color-brand);
	}
}

/* ------------------------------------------------ Merkmale, ohne Kaesten */

body.yk .yk-features {
	--display: grid;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--yk-space-lg) var(--yk-grid-gap);
}

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

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

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

body.yk .yk-feature {
	padding-top: var(--yk-space-sm);
	border-top: var(--yk-border-hairline) solid var(--yk-color-text);
}

body.yk .yk-feature h3,
body.yk .yk-feature__title {
	margin-bottom: var(--yk-space-xs);
	font-size: var(--yk-size-h4);
	line-height: var(--yk-leading-h4);
}

body.yk .yk-feature__text p {
	margin: 0;
	color: var(--yk-color-text-muted);
}

/* ------------------------------------------------ Verweisraster */

body.yk .yk-linkgrid {
	--display: grid;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 var(--yk-grid-gap);
	border-top: var(--yk-border-hairline) solid var(--yk-color-line);
}

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

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

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

body.yk .yk-linkcard {
	position: relative;
	padding: var(--yk-space-md) var(--yk-space-lg) var(--yk-space-md) 0;
	border-bottom: var(--yk-border-hairline) solid var(--yk-color-line);
}

body.yk .yk-linkcard::after {
	content: "";
	position: absolute;
	right: 4px;
	top: calc(var(--yk-space-md) + 0.5em);
	width: 9px;
	height: 9px;
	border-top: var(--yk-border-strong) solid var(--yk-color-brand);
	border-right: var(--yk-border-strong) solid var(--yk-color-brand);
	transform: rotate(45deg);
}

body.yk .yk-linkcard h3,
body.yk .yk-linkcard__title {
	margin-bottom: 4px;
	font-size: var(--yk-size-h4);
	line-height: var(--yk-leading-h4);
}

body.yk .yk-linkcard__title a {
	color: var(--yk-color-text);
	text-decoration: none;
}

body.yk .yk-linkcard__title a::before {
	content: "";
	position: absolute;
	inset: 0;
}

body.yk .yk-linkcard__text p {
	margin: 0;
	font-size: var(--yk-size-small);
	color: var(--yk-color-text-muted);
}

/* Fokusrahmen am Titellink selbst, siehe Bildkacheln. */
body.yk .yk-linkcard:focus-within .yk-linkcard__title a {
	color: var(--yk-color-brand);
}

@media (hover: hover) and (pointer: fine) {
	body.yk .yk-linkcard::after {
		transition: transform var(--yk-duration-fast) var(--yk-easing);
	}

	body.yk .yk-linkcard:hover::after {
		transform: translateX(3px) rotate(45deg);
	}

	body.yk .yk-linkcard:hover .yk-linkcard__title a {
		color: var(--yk-color-brand);
	}
}

/* ------------------------------------------------------------- Schritte */

body.yk .yk-steps {
	--display: grid;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--yk-space-lg);
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

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

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

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

body.yk .yk-step {
	position: relative;
	padding-top: var(--yk-space-md);
	border-top: var(--yk-border-strong) solid var(--yk-color-brand-deep);
	margin: 0;
}

body.yk .yk-step__number {
	display: block;
	margin-bottom: var(--yk-space-sm);
	font-family: var(--yk-font-display);
	font-size: var(--yk-size-h2);
	line-height: 1;
	font-weight: 800;
	letter-spacing: var(--yk-tracking-display);
	color: var(--yk-color-brand);
	font-variant-numeric: tabular-nums;
}

body.yk .yk-step h3,
body.yk .yk-step__title {
	margin-bottom: var(--yk-space-xs);
}

body.yk .yk-step__title a {
	color: inherit;
}

body.yk .yk-step p {
	margin-bottom: 0;
	color: var(--yk-color-text-muted);
	max-width: none;
}

body.yk .yk-step .yk-media {
	margin-top: var(--yk-space-sm);
}

/* ------------------------------------------------ Fakten neben Text */

body.yk .yk-facts {
	--display: grid;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--yk-space-md) var(--yk-space-lg);
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

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

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

body.yk .yk-fact {
	margin: 0;
	padding-top: var(--yk-space-sm);
	border-top: var(--yk-border-hairline) solid var(--yk-color-line-strong);
}

body.yk .yk-fact__title {
	display: block;
	font-weight: var(--yk-weight-bold);
	margin-bottom: 2px;
}

body.yk .yk-fact p,
body.yk .yk-fact__text p {
	margin: 0;
	color: var(--yk-color-text-muted);
	font-size: var(--yk-size-small);
	max-width: none;
}

/* ----------------------------------------------------- Vorher und Nachher */

body.yk .yk-compare {
	--display: grid;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--yk-space-xs);
}

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

body.yk .yk-compare__item {
	position: relative;
	margin: 0;
}

/*
 * z-index ist hier noetig, nicht dekorativ: Elementor gibt jedem Widget
 * position: relative. Das spaeter im Markup stehende Bildwidget wuerde die
 * vorher stehende Beschriftung sonst verdecken. In der Vorschau am
 * 29.09.2026 genau so gemessen und behoben.
 */
body.yk .yk-compare__label {
	position: absolute;
	top: var(--yk-space-sm);
	left: var(--yk-space-sm);
	z-index: 2;
	margin: 0;
	padding: 6px 12px;
	background-color: var(--yk-color-brand-deep);
	border-radius: var(--yk-radius-sm);
	font-size: var(--yk-size-small);
	font-weight: var(--yk-weight-bold);
	color: var(--yk-color-sand);
	pointer-events: none;
}

body.yk .yk-compare__label .elementor-heading-title {
	color: var(--yk-color-sand);
	font-size: inherit;
	font-weight: inherit;
}

/* ------------------------------------------------------------- Galerie */

body.yk .yk-gallery {
	--display: grid;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--yk-space-sm);
}

@media (min-width: 768px) {
	body.yk .yk-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--yk-space-md);
	}
}

body.yk .yk-gallery__item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

body.yk .yk-gallery__item figcaption {
	margin-top: var(--yk-space-xs);
	font-size: var(--yk-size-small);
	color: var(--yk-color-text-muted);
}

/* ------------------------------------------------------------- Stimmen */

/*
 * Belegte Rezensionen als Zitate: grosse Anfuehrung in Bordeaux, Text,
 * darunter Name und Herkunft. Keine Sterne, keine Kaesten.
 */
body.yk .yk-quotes {
	--display: grid;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--yk-space-xl) var(--yk-grid-gap);
}

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

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

/*
 * Das deutsche Anfuehrungszeichen unten steht auf der Grundlinie seiner
 * Zeile. Die Zeilenhoehe ist darum gleich dem Innenabstand oben, so sitzt das
 * Zeichen ueber dem Text statt auf dessen ersten Buchstaben. Im Browser am
 * 30.09.2026 gemessen und so korrigiert.
 */
body.yk .yk-quote {
	--flex-direction: column;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--yk-space-md);
	padding-top: 64px;
}

body.yk .yk-quote::before {
	content: "\201E";
	position: absolute;
	top: 0;
	left: -0.04em;
	height: 64px;
	font-family: var(--yk-font-display);
	font-size: 72px;
	line-height: 64px;
	font-weight: 800;
	color: var(--yk-color-brand);
	overflow: hidden;
}

body.yk .yk-quote__text p {
	margin: 0;
	font-size: var(--yk-size-lead);
	line-height: var(--yk-leading-lead);
	max-width: none;
}

/*
 * Elementor-Container fliessen standardmaessig senkrecht. Die Zeile muss
 * darum ausdruecklich waagerecht gesetzt werden, auch ueber die
 * Elementor-Variable.
 */
body.yk .yk-quote__meta {
	--display: flex;
	--flex-direction: row;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--yk-space-sm);
	margin-top: auto;
}

body.yk .yk-quote__meta > .yk-block {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

/*
 * Anfangsbuchstaben statt Bildkachel. Vermeidet das Nachladen fremder
 * Profilbilder und damit einen ungewollten Drittanbieteraufruf.
 */
body.yk .yk-quote__initials {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--yk-radius-pill);
	background-color: var(--yk-color-brand-deep);
	color: var(--yk-color-sand);
	font-size: var(--yk-size-small);
	font-weight: var(--yk-weight-bold);
}

body.yk .yk-quote__initials .elementor-widget-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

body.yk .yk-quote__initials .elementor-heading-title {
	color: var(--yk-color-sand);
	font-size: inherit;
	font-weight: inherit;
	line-height: 1;
	text-align: center;
}

body.yk .yk-quote__name {
	display: block;
	font-weight: var(--yk-weight-bold);
}

body.yk .yk-quote__source {
	display: block;
	font-size: var(--yk-size-small);
	color: var(--yk-color-text-muted);
}

/* -------------------------------------------------------- Fragenliste */

body.yk .yk-faq {
	border-top: var(--yk-border-hairline) solid var(--yk-color-text);
	max-width: 880px;
}

body.yk .yk-faq__item {
	border-bottom: var(--yk-border-hairline) solid var(--yk-color-line-strong);
	padding: var(--yk-space-xs) 0;
}

body.yk .yk-faq__question {
	margin: 0;
}

body.yk .yk-faq__question h2,
body.yk .yk-faq__question h3,
body.yk .yk-faq__question h4 {
	margin: 0;
	font-size: var(--yk-size-h4);
	line-height: var(--yk-leading-h4);
}

body.yk .yk-faq__answer {
	margin: var(--yk-space-xs) 0 var(--yk-space-sm);
}

body.yk .yk-faq__answer p {
	margin-bottom: var(--yk-space-xs);
	color: var(--yk-color-text-muted);
}

/* Erst mit JavaScript wird die Frage zum Knopf. */
body.yk .yk-faq__button {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--yk-space-md);
	width: 100%;
	min-height: var(--yk-target-min);
	padding: var(--yk-space-sm) 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

body.yk .yk-faq__button-sign {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 0.35em;
}

body.yk .yk-faq__button-sign::before,
body.yk .yk-faq__button-sign::after {
	content: "";
	position: absolute;
	background-color: var(--yk-color-brand);
}

body.yk .yk-faq__button-sign::before {
	top: 7px;
	left: 0;
	width: 16px;
	height: 2px;
}

body.yk .yk-faq__button-sign::after {
	top: 0;
	left: 7px;
	width: 2px;
	height: 16px;
	transition: transform var(--yk-duration-fast) var(--yk-easing);
}

body.yk .yk-faq__item.is-open .yk-faq__button-sign::after {
	transform: scaleY(0);
}

@media (hover: hover) and (pointer: fine) {
	body.yk .yk-faq__button:hover {
		color: var(--yk-color-brand);
	}
}

/* ------------------------------------------------------------ Kontakt */

body.yk .yk-contact-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--yk-space-sm) var(--yk-space-lg);
}

body.yk .yk-contact-actions--column {
	flex-direction: column;
	align-items: flex-start;
}

body.yk .yk-contact-actions__phone,
body.yk .yk-contact-actions__whatsapp {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--yk-target-min);
	color: var(--yk-color-text);
	text-decoration: none;
	font-weight: var(--yk-weight-bold);
}

body.yk .yk-contact-actions__phone:hover,
body.yk .yk-contact-actions__whatsapp:hover {
	color: var(--yk-color-brand);
}

body.yk .yk-contact-actions__label {
	font-size: var(--yk-size-small);
	font-weight: var(--yk-weight-regular);
	color: var(--yk-color-text-muted);
}

/* ------------------------------------------------------------ Formular */

body.yk .yk-form,
body.yk .yk-form .wpcf7-form {
	max-width: none;
}

body.yk .yk-form p {
	max-width: none;
}

body.yk .yk-form label,
body.yk .yk-form .yk-form__label {
	display: block;
	margin-bottom: var(--yk-space-hair);
	font-size: var(--yk-size-small);
	font-weight: var(--yk-weight-bold);
}

body.yk .yk-form input[type="text"],
body.yk .yk-form input[type="email"],
body.yk .yk-form input[type="tel"],
body.yk .yk-form input[type="url"],
body.yk .yk-form input[type="date"],
body.yk .yk-form input[type="file"],
body.yk .yk-form select,
body.yk .yk-form textarea {
	width: 100%;
	min-height: var(--yk-target-min);
	padding: 12px var(--yk-space-sm);
	background-color: var(--yk-color-surface-card);
	border: var(--yk-border-hairline) solid var(--yk-color-line-strong);
	border-radius: var(--yk-radius-sm);
	font-family: var(--yk-font-sans);
	font-size: var(--yk-size-body);
	color: var(--yk-color-text);
}

body.yk .yk-form textarea {
	min-height: 160px;
	line-height: var(--yk-leading-body);
	resize: vertical;
}

body.yk .yk-form input:focus-visible,
body.yk .yk-form select:focus-visible,
body.yk .yk-form textarea:focus-visible {
	border-color: var(--yk-color-brand);
}

body.yk .yk-form .yk-form__hint {
	margin-top: var(--yk-space-hair);
	font-size: var(--yk-size-small);
	color: var(--yk-color-text-muted);
}

body.yk .yk-form .wpcf7-not-valid-tip {
	color: var(--yk-color-error);
	font-size: var(--yk-size-small);
}

body.yk .yk-form .wpcf7-response-output {
	margin: var(--yk-space-md) 0 0;
	padding: var(--yk-space-sm);
	border: var(--yk-border-hairline) solid var(--yk-color-line-strong);
	font-size: var(--yk-size-small);
}

body.yk .yk-form .wpcf7-mail-sent-ok {
	border-color: var(--yk-color-success);
	color: var(--yk-color-success);
}

body.yk .yk-form .wpcf7-validation-errors,
body.yk .yk-form .wpcf7-acceptance-missing {
	border-color: var(--yk-color-error);
	color: var(--yk-color-error);
}

body.yk .yk-form input[type="submit"],
body.yk .yk-form button[type="submit"] {
	min-height: var(--yk-target-min);
	padding: 12px 22px;
	background-color: var(--yk-color-brand);
	border: var(--yk-border-strong) solid var(--yk-color-brand);
	border-radius: var(--yk-radius-sm);
	color: var(--yk-color-surface-card);
	font-family: var(--yk-font-sans);
	font-size: var(--yk-size-body);
	font-weight: var(--yk-weight-bold);
	cursor: pointer;
	transition: background-color var(--yk-duration-fast) ease, transform var(--yk-duration-fast) var(--yk-easing);
}

body.yk .yk-form input[type="submit"]:hover,
body.yk .yk-form button[type="submit"]:hover {
	background-color: var(--yk-color-brand-deep);
	border-color: var(--yk-color-brand-deep);
}

body.yk .yk-form input[type="submit"]:active,
body.yk .yk-form button[type="submit"]:active {
	transform: scale(var(--yk-press-scale));
}

/* ------------------------------------------------------ Aufrufband */

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

body.yk .yk-cta h2 {
	margin-bottom: var(--yk-space-xs);
}

/* ------------------------------------------------- Hinweis und Lesetext */

body.yk .yk-note {
	padding: var(--yk-space-sm) var(--yk-space-md);
	background-color: var(--yk-color-brand-tint);
	font-size: var(--yk-size-small);
}

body.yk .yk-prose {
	max-width: var(--yk-measure-text);
}

body.yk .yk-prose h2 {
	margin-top: var(--yk-space-xl);
}

body.yk .yk-prose h2:first-child {
	margin-top: 0;
}

body.yk .yk-prose h3 {
	margin-top: var(--yk-space-lg);
}