/*
 * Grundschicht.
 * Schrift, Ueberschriften, Links, Fokus, Browserflaechen, Hilfsklassen.
 * Baut ausschliesslich auf den Variablen aus tokens.css auf.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scrollbar-color: var(--yk-color-brand-deep) var(--yk-color-surface-alt);
	accent-color: var(--yk-color-brand);
}

/*
 * Kein weiches Scrollen: Es animierte auch das Scrollen zum fokussierten
 * Element bei jeder Tabulatortaste. Tastaturaktionen bekommen keine Animation
 * (emil-design-eng); im Tastaturlauf von S0 lagen Stopps dadurch ausserhalb
 * des Bildes (Befund F11, final-2).
 * Elementor setzt in frontend.min.css selbst html { scroll-behavior: smooth }.
 * html:root ist spezifischer und gewinnt unabhaengig von der Ladereihenfolge.
 */
html:root {
	scroll-behavior: auto;
}

body.yk {
	/*
	 * Elementor-Grundwerte fuer alle Container, unabhaengig vom Kit: kein
	 * Standard-Innenabstand von 10 Pixel, kein Widgetabstand, Inhaltsbreite
	 * aus den Tokens. Die Kit-Klasse sitzt ebenfalls am body, hat aber
	 * geringere Spezifitaet.
	 */
	--container-default-padding-top: 0px;
	--container-default-padding-right: 0px;
	--container-default-padding-bottom: 0px;
	--container-default-padding-left: 0px;
	--widgets-spacing: 0px 0px;
	--widgets-spacing-row: 0px;
	--widgets-spacing-column: 0px;
	--container-max-width: var(--yk-content-width);
	/* Ruffer setzt body { min-width: 375px }; das erzwang bei 360 px 15 px Ueberlauf. */
	min-width: 0;
	margin: 0;
	background-color: var(--yk-color-surface);
	color: var(--yk-color-text);
	font-family: var(--yk-font-sans);
	font-size: var(--yk-size-body);
	line-height: var(--yk-leading-body);
	letter-spacing: var(--yk-tracking-body);
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	caret-color: var(--yk-color-brand);
	overflow-x: hidden;
}

/*
 * Textelemente erben die Schrift ausdruecklich. Fremde Stile setzen sie sonst
 * direkt auf p oder a (im Echtmodus der Vorschau mit Ruffer-CSS so gemessen).
 */
body.yk p,
body.yk li,
body.yk a,
body.yk span,
body.yk label,
body.yk button,
body.yk input,
body.yk select,
body.yk textarea,
body.yk .elementor-heading-title {
	font-family: inherit;
}

/* Browserflaechen gehoeren zur Gestaltung. */
body.yk ::selection {
	background-color: var(--yk-color-selection);
	color: var(--yk-color-text);
}

/* Ueberschriften. Manrope in kraeftigen Schnitten, enge Laufweite. */
body.yk h1,
body.yk h2,
body.yk h3,
body.yk h4,
body.yk .yk-display {
	margin: 0 0 var(--yk-space-sm);
	font-family: var(--yk-font-display);
	color: var(--yk-color-text);
	letter-spacing: var(--yk-tracking-display);
	text-wrap: balance;
	/* Lange deutsche Komposita brechen um, statt aus der Spalte zu laufen. */
	overflow-wrap: break-word;
	hyphens: manual;
}

body.yk .yk-feature__text,
body.yk .yk-fact__text,
body.yk .yk-tile__text,
body.yk .yk-linkcard__text,
body.yk .yk-choice__text {
	hyphens: auto;
	overflow-wrap: break-word;
}

body.yk .yk-display {
	font-size: var(--yk-size-display);
	line-height: var(--yk-leading-display);
	font-weight: 800;
}

body.yk h1 {
	font-size: var(--yk-size-h1);
	line-height: var(--yk-leading-h1);
	font-weight: 800;
}

body.yk h2 {
	font-size: var(--yk-size-h2);
	line-height: var(--yk-leading-h2);
	font-weight: 800;
}

body.yk h3 {
	font-size: var(--yk-size-h3);
	line-height: var(--yk-leading-h3);
	font-weight: var(--yk-weight-bold);
	letter-spacing: var(--yk-tracking-body);
}

body.yk h4 {
	font-size: var(--yk-size-h4);
	line-height: var(--yk-leading-h4);
	font-weight: var(--yk-weight-bold);
	letter-spacing: var(--yk-tracking-body);
}

body.yk p {
	margin: 0 0 var(--yk-space-sm);
	max-width: var(--yk-measure-text);
	text-wrap: pretty;
}

/*
 * Lange Adressen, Mailadressen und Links in Rechtstexten brechen um, statt
 * die Seite zu verbreitern (S0-Befund F6, 64 bis 93 Pixel bei 360 und 390).
 */
body.yk .elementor-widget-text-editor,
body.yk .elementor-widget-text-editor a {
	overflow-wrap: anywhere;
}

body.yk p:last-child,
body.yk .elementor-widget-text-editor ul:last-child,
body.yk .elementor-widget-text-editor ol:last-child {
	margin-bottom: 0;
}

body.yk strong,
body.yk b {
	font-weight: var(--yk-weight-bold);
}

body.yk a {
	color: var(--yk-color-brand);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

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

/*
 * Links und Knoepfe blenden nur Farben weich ueber. Das Elterntheme setzt
 * a { transition: all ease 0.4s }; damit wuerden auch Fokusrahmen und
 * Sprungmarke eingeblendet statt sofort zu stehen (S0-Befund F11, im
 * Echtmodus der Vorschau mit Ruffer-CSS gemessen). Eigene Uebergaenge der
 * Bausteine haben hoehere Spezifitaet und bleiben.
 */
body.yk a,
body.yk button {
	transition-property: color, background-color, border-color, text-decoration-color;
	transition-duration: var(--yk-duration-fast);
	transition-timing-function: ease;
}

/* Sichtbarer Fokus auf allen Bedienelementen. Nie ausschalten. */
/*
 * !important ist hier Absicht: Elterntheme und Plugins setzen teils
 * outline: none. Ein sichtbarer Fokus ist Pflicht (S0-Befund F7, 30.09.2026).
 */
body.yk :focus-visible {
	outline: var(--yk-border-focus) solid var(--yk-color-focus) !important;
	outline-offset: var(--yk-border-focus-offset) !important;
}

/*
 * Video und Bedienelemente in beschnittenen Medienrahmen: Rahmen nach innen,
 * sonst schneidet der Container ihn ab (S0-Befund F11, video.elementor-video).
 */
body.yk video:focus-visible,
body.yk .yk-media :focus-visible,
body.yk .yk-hero__media :focus-visible {
	outline-offset: -4px !important;
}

/*
 * Laufendes Video: Der Tastaturfokus liegt in den Bedienelementen des
 * Browsers, dann greifen am Video weder :focus-visible noch :focus, nur
 * :focus-within (im Browser gemessen). media.js setzt bei Tastaturbedienung
 * yk-kbd am html-Element. Der Rahmen liegt innen auf dem Bild, daher in der
 * hellen Fokusfarbe.
 */
html.yk-kbd body.yk video:focus-within {
	outline: var(--yk-border-focus) solid var(--yk-color-focus-on-dark) !important;
	outline-offset: -4px !important;
}

body.yk .yk-on-dark :focus-visible,
body.yk .yk-section--dark :focus-visible,
body.yk .yk-hero--brand :focus-visible,
body.yk .yk-header :focus-visible,
body.yk .yk-footer :focus-visible {
	outline-color: var(--yk-color-focus-on-dark) !important;
}

body.yk img,
body.yk video,
body.yk svg {
	max-width: 100%;
	height: auto;
	display: block;
}

body.yk figure {
	margin: 0;
}

/*
 * Listen nur im redaktionellen Text formatieren. Navigation, Fuss und
 * Kontaktknopf bringen eigene Listen mit, die davon unberuehrt bleiben.
 * Im Browser am 30.09.2026 gemessen: eine allgemeine ul-Regel hatte die
 * Fusslisten eingerueckt.
 */
body.yk .elementor-widget-text-editor ul,
body.yk .elementor-widget-text-editor ol,
body.yk .yk-prose ul,
body.yk .yk-prose ol {
	margin: 0 0 var(--yk-space-sm);
	padding-left: 1.25em;
	max-width: var(--yk-measure-text);
}

body.yk .elementor-widget-text-editor li + li,
body.yk .yk-prose li + li {
	margin-top: var(--yk-space-xs);
}

body.yk .elementor-widget-text-editor li::marker,
body.yk .yk-prose li::marker {
	color: var(--yk-color-brand);
}

body.yk blockquote {
	margin: 0;
	font-size: var(--yk-size-lead);
	line-height: var(--yk-leading-lead);
}

body.yk hr {
	margin: var(--yk-space-lg) 0;
	border: 0;
	border-top: var(--yk-border-hairline) solid var(--yk-color-line);
}

body.yk table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--yk-size-small);
	font-variant-numeric: tabular-nums;
}

body.yk th,
body.yk td {
	padding: var(--yk-space-xs) var(--yk-space-sm);
	border-bottom: var(--yk-border-hairline) solid var(--yk-color-line);
	text-align: left;
	vertical-align: top;
}

/* Nur fuer Hilfsmittel sichtbar. */
body.yk .yk-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Sprungmarke. Erscheint beim Fokus ohne Bewegung, weil sie ausschliesslich
 * per Tastatur ausgeloest wird.
 */
body.yk .yk-skip-link {
	position: absolute;
	top: var(--yk-space-xs);
	left: var(--yk-space-xs);
	z-index: var(--yk-z-skip-link);
	padding: var(--yk-space-xs) var(--yk-space-sm);
	background-color: var(--yk-color-sand);
	color: var(--yk-color-brand-deep);
	font-weight: var(--yk-weight-bold);
	text-decoration: none;
	transform: translateY(calc(-100% - var(--yk-space-md)));
}

body.yk .yk-skip-link:focus {
	transform: none;
	color: var(--yk-color-brand-deep);
}

body.yk .yk-main:focus {
	outline: none !important;
}

/* Kleine Beschriftung in normaler Schreibweise, ohne Versalien. */
body.yk .yk-label {
	font-size: var(--yk-size-label);
	line-height: var(--yk-leading-label);
	font-weight: var(--yk-weight-semibold);
	letter-spacing: var(--yk-tracking-label);
	color: var(--yk-color-text-muted);
}

body.yk .yk-lead {
	font-size: var(--yk-size-lead);
	line-height: var(--yk-leading-lead);
	max-width: var(--yk-measure-lead);
	color: var(--yk-color-text);
}

body.yk .yk-lead p {
	max-width: var(--yk-measure-lead);
}

body.yk .yk-small,
body.yk .yk-meta {
	font-size: var(--yk-size-small);
	line-height: var(--yk-leading-small);
	color: var(--yk-color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
	body.yk *,
	body.yk *::before,
	body.yk *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

@media print {
	body.yk .yk-dock,
	body.yk .yk-nav__burger,
	body.yk .yk-skip-link {
		display: none !important;
	}
}