/*
 * Inhaltsmuster aus dem gemeinsamen Seitenvertrag.
 *
 * Der Renderer leitet aus den Vertragsfeldern title, text, href und image
 * diese Muster ab: Linklisten, Entscheidungskacheln, Kontaktkacheln,
 * Kontaktangaben, Bildpaare, Aufrufaktionen und Rechtstexte mit
 * Inhaltsverzeichnis. Geladen nach components.css.
 */

/* ----------------------------------------------------- Linkliste */

body.yk .yk-linklist {
	--display: flex;
	--flex-direction: column;
	display: flex;
	flex-direction: column;
	border-top: var(--yk-border-hairline) solid var(--yk-color-line);
	max-width: var(--yk-measure-text);
}

body.yk .yk-linklist__item {
	position: relative;
	padding: var(--yk-space-sm) var(--yk-space-xl) var(--yk-space-sm) 0;
	border-bottom: var(--yk-border-hairline) solid var(--yk-color-line);
}

body.yk .yk-linklist__item::after {
	content: "";
	position: absolute;
	right: var(--yk-space-xs);
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -5px;
	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-linklist__title {
	font-weight: var(--yk-weight-bold);
}

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

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

/*
 * Fokus: Der Rahmen sitzt am fokussierten Link selbst (Grundregel in
 * base.css). Hilfsmittel und Pruefwerkzeuge lesen den Fokus am fokussierten
 * Element (S0-Befund F11, final-2). Der Eintrag zeigt dazu die Linkfarbe.
 * Gleiches gilt fuer Entscheidungs- und Kontaktkacheln.
 */
body.yk .yk-linklist__item:focus-within .yk-linklist__title a {
	color: var(--yk-color-brand);
}

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

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

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

	body.yk .yk-linklist__item:hover .yk-linklist__title a {
		color: var(--yk-color-brand);
	}
}

/* ------------------------------------------- Entscheidungskacheln */

body.yk .yk-intro__head {
	margin-bottom: var(--yk-space-xl);
}

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

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

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

/*
 * Eine Entscheidung je Kachel: oben der Befund in den Worten des Besuchers,
 * darunter die passende Leistung. Weisse Flaeche mit Haarlinie, keine
 * farbige Seitenkante.
 */
body.yk .yk-choice {
	position: relative;
	padding: var(--yk-space-md) var(--yk-space-xl) var(--yk-space-md) var(--yk-space-md);
	background-color: var(--yk-color-surface-card);
	border: var(--yk-border-hairline) solid var(--yk-color-line);
	border-radius: var(--yk-radius-sm);
}

body.yk .yk-choice::after {
	content: "";
	position: absolute;
	right: var(--yk-space-md);
	top: calc(var(--yk-space-md) + 0.55em);
	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-choice h3,
body.yk .yk-choice__title {
	margin-bottom: var(--yk-space-xs);
	font-size: var(--yk-size-h4);
	line-height: var(--yk-leading-h4);
}

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

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

body.yk .yk-choice:focus-within .yk-choice__title a {
	color: var(--yk-color-brand);
}

body.yk .yk-choice:focus-within {
	border-color: var(--yk-color-brand);
}

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

@media (hover: hover) and (pointer: fine) {
	body.yk .yk-choice {
		transition: border-color var(--yk-duration-fast) ease;
	}

	body.yk .yk-choice:hover {
		border-color: var(--yk-color-brand);
	}

	body.yk .yk-choice:hover .yk-choice__title a {
		color: var(--yk-color-brand);
	}
}

/* ------------------------------------------------ Kontaktkacheln */

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

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

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

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

/* Im schmalen Anfrageblock stehen die Kacheln immer untereinander. */
body.yk .yk-contact__side .yk-channels {
	grid-template-columns: minmax(0, 1fr);
}

body.yk .yk-channel {
	--yk-channel-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E");
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Platz fuer den Fokusrahmen am Wert, ohne die Beschriftung zu schneiden. */
	gap: 6px;
	min-height: 84px;
	padding: var(--yk-space-sm) var(--yk-space-md) var(--yk-space-sm) calc(var(--yk-space-md) + 44px);
	background-color: var(--yk-color-surface-card);
	border: var(--yk-border-hairline) solid var(--yk-color-line);
	border-radius: var(--yk-radius-sm);
}

body.yk .yk-channel::before {
	content: "";
	position: absolute;
	left: var(--yk-space-sm);
	top: 50%;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	border-radius: var(--yk-radius-pill);
	background-color: var(--yk-color-brand-deep);
}

body.yk .yk-channel::after {
	content: "";
	position: absolute;
	left: calc(var(--yk-space-sm) + 9px);
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background-color: var(--yk-color-sand);
	-webkit-mask: var(--yk-channel-icon) center / contain no-repeat;
	mask: var(--yk-channel-icon) center / contain no-repeat;
}

body.yk .yk-channel--phone {
	--yk-channel-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 3h3l1.5 4-2 1.4a12 12 0 0 0 5.5 5.5l1.4-2 4 1.5v3a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4.6 5.2 2 2 0 0 1 6.6 3Z'/%3E%3C/svg%3E");
}

body.yk .yk-channel--whatsapp {
	--yk-channel-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 0-7.7 13.6L3 21l4.5-1.2A9 9 0 1 0 12 3Zm4.3 12.2c-.2.6-1.2 1.1-1.8 1.2-.6 0-2.3-.6-3.9-2.1-1.6-1.5-2.2-3-2.3-3.6 0-.6.5-1.6 1.1-1.8.3-.1.6 0 .8.3l.7 1.2c.1.3.1.5 0 .7l-.4.5c-.1.2-.1.4 0 .6.3.6 1.4 1.7 2.1 2 .2.1.4.1.6 0l.5-.4c.2-.2.4-.2.7-.1l1.2.6c.3.2.4.5.3.9Z'/%3E%3C/svg%3E");
}

body.yk .yk-channel--mail {
	--yk-channel-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3zM3 6l9 6 9-6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

body.yk .yk-channel--map {
	--yk-channel-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
}

body.yk .yk-channel--form {
	--yk-channel-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14v18H5zM8 8h8M8 12h8M8 16h5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

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

body.yk .yk-channel__value {
	font-weight: var(--yk-weight-bold);
	overflow-wrap: anywhere;
}

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

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

body.yk .yk-channel:focus-within .yk-channel__value a {
	color: var(--yk-color-brand);
}

body.yk .yk-channel:focus-within {
	border-color: var(--yk-color-brand);
}

body.yk .yk-channel__value a:focus-visible {
	outline-offset: 1px !important;
}

@media (hover: hover) and (pointer: fine) {
	body.yk .yk-channel {
		transition: border-color var(--yk-duration-fast) ease;
	}

	body.yk .yk-channel:hover {
		border-color: var(--yk-color-brand);
	}

	body.yk .yk-channel:hover .yk-channel__value a {
		color: var(--yk-color-brand);
	}
}

/* ---------------------------------------------- Kontaktangaben (dl) */

body.yk .yk-contact-details {
	margin: 0;
	display: grid;
	gap: var(--yk-space-sm);
}

body.yk .yk-contact-details__row {
	display: grid;
	gap: 2px;
}

body.yk .yk-contact-details dt {
	font-size: var(--yk-size-small);
	color: var(--yk-color-text-muted);
}

body.yk .yk-contact-details dd {
	margin: 0;
	font-weight: var(--yk-weight-bold);
}

body.yk .yk-contact-details a {
	display: inline-flex;
	align-items: center;
	min-height: var(--yk-target-min);
}

body.yk .yk-footer .yk-contact-details dt {
	color: var(--yk-color-text-on-dark-muted);
}

/* ------------------------------------------------------ Bildpaare */

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

@media (min-width: 1024px) {
	body.yk .yk-pairs:not(.yk-pairs--single) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--yk-space-xl) var(--yk-space-lg);
	}
}

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

body.yk .yk-compare__item a[data-elementor-open-lightbox],
body.yk .yk-gallery__item a {
	display: block;
	height: 100%;
	cursor: zoom-in;
}

/* -------------------------------------------------------- Aufruf */

body.yk .yk-cta__actions {
	--display: flex;
	--flex-direction: column;
	display: flex;
	flex-direction: column;
	gap: var(--yk-space-md);
}

body.yk .yk-cta__action {
	--display: flex;
	--flex-direction: column;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--yk-space-xs);
}

body.yk .yk-cta__note p,
body.yk .yk-section--dark .yk-cta__note p {
	margin: 0;
	font-size: var(--yk-size-small);
	color: var(--yk-color-text-on-dark-muted);
}

/* ---------------------------------------------------- Rechtstexte */

body.yk .yk-section--legal {
	padding-top: var(--yk-space-xl);
}

body.yk .yk-legal {
	--display: grid;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--yk-space-xl);
	max-width: var(--yk-narrow-width);
}

@media (min-width: 1024px) {
	body.yk .yk-legal--with-toc {
		grid-template-columns: 260px minmax(0, 1fr);
		max-width: calc(var(--yk-narrow-width) + 260px + var(--yk-space-xl));
		align-items: start;
	}

	body.yk .yk-legal--with-toc > .yk-legal__block {
		grid-column: 2;
	}

	body.yk .yk-legal--with-toc > .yk-legal__toc {
		grid-column: 1;
		grid-row: 1 / span 40;
		position: sticky;
		top: var(--yk-space-md);
	}
}

body.yk .yk-legal__toc {
	padding: var(--yk-space-md);
	background-color: var(--yk-color-surface-alt);
	border-radius: var(--yk-radius-sm);
}

body.yk .yk-legal__toc-title {
	margin-bottom: var(--yk-space-xs);
	font-size: var(--yk-size-small);
	font-weight: var(--yk-weight-bold);
	color: var(--yk-color-brand);
}

body.yk .yk-legal__toc-list .elementor-icon-list-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.yk .yk-legal__toc-list .elementor-icon-list-item {
	margin: 0;
}

body.yk .yk-legal__toc-list a {
	display: flex;
	align-items: center;
	min-height: var(--yk-target-min);
	color: var(--yk-color-text);
	text-decoration: none;
	font-size: var(--yk-size-small);
	line-height: 1.35;
}

body.yk .yk-legal__toc-list a:hover {
	color: var(--yk-color-brand);
	text-decoration: underline;
}

body.yk .yk-legal__block {
	scroll-margin-top: var(--yk-space-lg);
}

body.yk .yk-legal__block h2 {
	font-size: var(--yk-size-h3);
	line-height: var(--yk-leading-h3);
	margin-bottom: var(--yk-space-sm);
}

body.yk .yk-legal__block .yk-prose {
	overflow-wrap: anywhere;
}

/* ---------------------------------------------- Video im Seitenfluss */

body.yk .yk-video-column {
	align-items: center;
}

@media (min-width: 1024px) {
	body.yk .yk-video-column {
		align-items: flex-end;
	}
}

/* ------------------------------------------------------ Einstieg ohne Bild */

body.yk .yk-hero--text-only h1 {
	max-width: 22ch;
}

/* --------------------------------------------------- Kleinere Muster */

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

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