@layer unonweb {

	:root {
		--color-clone: color-mix(in oklch, var(--color), white 0.001%);
		--complementary: color-mix(in oklch longer hue, var(--color), var(--color-clone));
		--split-complementary-1: color-mix(in oklch longer hue, var(--color) 41.666%, var(--color-clone));
		--split-complementary-2: color-mix(in oklch longer hue, var(--color) 58.333%, var(--color-clone));
		--analogous-1: color-mix(in oklch longer hue, var(--color) 20%, var(--color-clone));
		--analogous-2: color-mix(in oklch longer hue, var(--color) 10%, var(--color-clone));
		--analogous-3: color-mix(in oklch longer hue, var(--color), var(--color-clone) 10%);
		--analogous-4: color-mix(in oklch longer hue, var(--color), var(--color-clone) 20%);
		--triad-1: color-mix(in oklch longer hue, var(--color) 33%, var(--color-clone));
		--triad-2: color-mix(in oklch longer hue, var(--color) 66%, var(--color-clone));
		font-size: 17px;
	}

	a:hover {
		color: var(--link-color-hover);
	}

	nav {
		a.current-location {
			color: var(--color);
		}
	}

	header.top {
		border-bottom: thin solid var(--color);
	}

	header.top.sticky {
		background-color: var(--page-bg);
	}

	.feed__content {
		width: 100%;
	}

	.title_main,
	.hero {
		h1 {
			color: var(--color);
		}
	}
	.feed__title {
		a {
			color: var(--color);
			border-bottom: none;
			position: relative;
		}

		/* Expanding animation on hover */
		a:hover::after {
			transform: scaleX(1);
			/* Scale to full width on hover */
		}

		/* The pseudo-element for the underline */
		a::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: 6px;
			width: 100%;
			height: 1px;
			background-color: var(--color);
			transform: scaleX(0);
			transform-origin: left;
			transition: transform 0.5s ease;
		}
	}

	:focus-visible {
		outline-offset: 6px;
		outline: 1px solid var(--color) !important;
		transition: none !important;
	}

	.gallery {
		a {
			outline: black solid 1px;
			transition: none !important;
		}
	}

	.pss-results__wrapper {
		background-color: var(--page-bg) !important;
		outline: 1px solid black !important;

		*:focus-visible {
			outline-offset: -2px;
			border-radius: 2px;
		}

		.pss-results__searchbar {
			outline-style: none !important;
			background-color: var(--page-bg) !important;

			.pss-results__searchbar__input {
				background-color: var(--page-bg) !important;
			}
		}

		.pss-results__list__link:hover {
			background-color: color-mix(in oklch longer hue, var(--page-bg) 75%, black) !important;
			color: white;
		}

		.pss-results__list__title {
			color: var(--color) !important;
			font-weight: bold !important;
		}
	}

	.readmore {
		color: var(--color);
	}

	.search__overlay {
		box-shadow: 0 1px 96px black;
		/* border-bottom: 1px solid var(--color); */
	}

	.pswp__img {
		border-radius: 3px;
	}

	/* editor 
	---------- */

	.shape-circle {
		img {
			border-radius: 50%;
		}
	}

	.text-highlight {
		color: var(--color);
		background-color: color-mix(in oklch, var(--color), transparent 90%);
		border-radius: 5px;
		padding: 0px 6px;
	}

	.flex {
		--gap: 3%;
		--justify-content: space-between;
		--align-items: start;
		--min-width: 175px;

		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		gap: var(--gap);
		justify-content: var(--justify-content, space-between);
		align-items: var(--align-items, start);

		@media (min-width: 768px) {
			flex-flow: row wrap;
			column-gap: var(--gap);
			justify-content: space-between;

			.flex-item.one-third {
				width: calc(33% - var(--gap));
				min-width: var(--min-width, 175px);
			}

			.flex-item.two-thirds {
				width: calc(66% - var(--gap));
				min-width: var(--min-width, 175px);
			}
		}

		.flex-item.align-start {
			align-self: flex-start;
		}

		.flex-item.align-center {
			align-self: center;
		}

		.flex-item.align-end {
			align-self: flex-end;
		}
	}

	body.home-template {
		main {
			nav.toc {
				height: 100%;
				margin-top: calc(var(--baseline) * 12 + 2vw);
				margin-right: var(--page-margin);

				>h1 {
					font-size: small;
					border-bottom: 1px solid var(--color);
					border-color: var(--color);
					position: sticky;
					top: 5%;
				}

				ul {
					padding-left: 25px;
					/* show marker bullets */
					position: sticky;
					top: 7%;
					overflow-y: scroll;
					height: 50vh;
					display: flex;
					flex-direction: column;
					row-gap: 5px;
					border-right: 1px solid var(--color);
					border-bottom: 1px solid var(--color);
					border-color: var(--color);
					margin-top: 0;
					padding-top: 1rem;
					padding-right: 1rem;


					li::marker {
						color: var(--color);
						color: var(--color);
					}

					a.toc-item {
						font-size: small;
						color: #000;
						text-decoration: none;
					}

					a.toc-item:hover {
						color: var(--color)
					}
				}
			}

			@media (min-width: 1280px) {
				display: grid;
				grid-template-areas: 'hero hero' 'feed toc';
				grid-template-columns: 3fr 1fr;
				height: fit-content;

				.hero {
					grid-area: hero;
				}

				.feed {
					grid-area: feed;
				}

				.toc {
					grid-area: toc;
				}
			}
		}
	}

	main.template-veroeffentlichungen,
	main.template-veranstaltungen {
		article {
			margin-top: 8vh;

			header {
				background-color: color-mix(in oklch, var(--color), transparent 90%);
				border-radius: 5px;
				padding: 5px;
				width: fit-content;

				.feed__meta {
					& .feed__date {
						color: var(--color);
					}

					margin-bottom: 0.5vh;
				}

				& .feed__title {
					font-size: 1rem;
				}

				& .feed__subtitle {
					font-size: 1rem;
					color: grey;
					margin-top: 0.1rem;
				}
			}

			.entry-wrapper {
				margin-top: 2vh;
				padding-left: 0px;
			}
		}
	}
}