html {
	color-scheme: light;
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--fpw-kopfhoehe) + var(--fpw-sp-2));
}

html[data-theme="dark"],
html[data-theme="dark"] body {
	color-scheme: dark;
	--wp--preset--color--background: #121212;
	--wp--preset--color--soft: #181818;
	--wp--preset--color--ink: #EDEDED;
	--wp--preset--color--ink-2: #D0D0D0;
	--wp--preset--color--muted: #A6A6A6;
	--wp--preset--color--line: #2E2E2E;
	--wp--custom--color--surface: #1E1E1E;
	--wp--custom--color--field-line: #707070;
	--wp--custom--color--card-border: #2E2E2E;
	--wp--custom--color--ring-outer: #EDEDED;
	--wp--custom--color--ring-inner: #121212;
	--wp--custom--color--band: #0B0B0B;
	--wp--custom--color--band-2: #070707;
	--wp--custom--color--band-surface: #1C1C1C;
	--wp--custom--color--band-line: #2E2E2E;
	--wp--custom--color--band-field: #121212;
	--wp--custom--color--ill-ink: #EBEBEB;
	--wp--custom--color--ill-paper: #1E1E1E;
	--wp--custom--color--ill-mute: #2E2E2E;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme]),
	html:not([data-theme]) body {
		color-scheme: dark;
		--wp--preset--color--background: #121212;
		--wp--preset--color--soft: #181818;
		--wp--preset--color--ink: #EDEDED;
		--wp--preset--color--ink-2: #D0D0D0;
		--wp--preset--color--muted: #A6A6A6;
		--wp--preset--color--line: #2E2E2E;
		--wp--custom--color--surface: #1E1E1E;
		--wp--custom--color--field-line: #707070;
		--wp--custom--color--card-border: #2E2E2E;
		--wp--custom--color--ring-outer: #EDEDED;
		--wp--custom--color--ring-inner: #121212;
		--wp--custom--color--band: #0B0B0B;
		--wp--custom--color--band-2: #070707;
		--wp--custom--color--band-surface: #1C1C1C;
		--wp--custom--color--band-line: #2E2E2E;
		--wp--custom--color--band-field: #121212;
		--wp--custom--color--ill-ink: #EBEBEB;
		--wp--custom--color--ill-paper: #1E1E1E;
		--wp--custom--color--ill-mute: #2E2E2E;
	}

	html:not([data-theme]) h1 em {
		color: var(--fpw-amber);
	}
}

html[data-theme="dark"] h1 em {
	color: var(--fpw-amber);
}

body {
	transition: background-color var(--fpw-dur-3) var(--fpw-ease), color var(--fpw-dur-3) var(--fpw-ease);
}

:focus-visible {
	outline: 3px solid var(--fpw-ring-outer);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--fpw-ring-inner);
	border-radius: 4px;
}

.jet-form-builder .jet-form-builder__field:focus-visible,
.fpw-kopf__nav .wp-block-navigation__responsive-container:focus-visible {
	border-radius: var(--fpw-r-sm);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	html.js .fpw-startseite-kopf .ill .float,
	html.js .fpw-startseite-kopf .ill .float-2,
	html.js .fpw-startseite-kopf .ill .float-3 {
		transform-box: fill-box;
		transform-origin: center;
		animation: fpw-schweben 2.2s ease-in-out 2;
	}

	html.js .fpw-startseite-kopf .ill .float-2 {
		animation-delay: 0.2s;
	}

	html.js .fpw-startseite-kopf .ill .float-3 {
		animation-delay: 0.4s;
	}

	html.js .fpw-kopf .fpw-logo .logo-c1 {
		animation: fpw-chevron-ein var(--fpw-dur-4) 0.1s var(--fpw-ease) backwards;
	}

	html.js .fpw-kopf .fpw-logo .logo-c2 {
		animation: fpw-chevron-ein var(--fpw-dur-4) 0.2s var(--fpw-ease) backwards;
	}

	@view-transition {
		navigation: auto;
	}

	.fpw-kopf {
		view-transition-name: fpw-kopf;
	}

	::view-transition-old(root) {
		animation: var(--fpw-dur-2) var(--wp--custom--easing--in) both fpw-ausblenden;
	}

	::view-transition-new(root) {
		animation: var(--fpw-dur-3) var(--fpw-ease) both fpw-einblenden;
	}

	html.fpw-farbwechsel .fpw-kopf {
		view-transition-name: none;
	}

	html.fpw-farbwechsel *,
	html.fpw-farbwechsel *::before,
	html.fpw-farbwechsel *::after {
		transition: none !important;
	}

	html.fpw-farbwechsel::view-transition-old(root) {
		animation: none;
	}

	html.fpw-farbwechsel::view-transition-new(root) {
		animation: fpw-farbkreis 0.6s var(--fpw-ease) both;
	}
}

@keyframes fpw-chevron-ein {
	from {
		opacity: 0;
		transform: translateX(-35%);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fpw-ausblenden {
	to {
		opacity: 0;
	}
}

@keyframes fpw-einblenden {
	from {
		opacity: 0;
	}
}

@keyframes fpw-farbkreis {
	from {
		clip-path: circle(0 at var(--tx, 92%) var(--ty, 32px));
	}

	to {
		clip-path: circle(150vmax at var(--tx, 92%) var(--ty, 32px));
	}
}

@media (forced-colors: active) {
	.is-style-karte:has(a:focus-visible),
	.is-style-projektkarte:has(a:focus-visible),
	.is-style-eintrag-mit-icon:has(a:focus-visible) {
		outline: 2px solid Highlight;
	}
}