@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..500;1,200..500&display=swap");

:root {
	/* hands-on */
	--accent: hsl(26, 100%, 50%);
	--accent-lighter: rgba(255, 110, 78, 0.8);
	--accent-darker: hsl(26, 100%, 20%);
	--compliment: hsl(253, 87%, 46%);
	--compliment-text: hsl(244, 87%, 46%);
	--compliment-text: hsl(235, 100%, 46%);
	--compliment-darker: hsl(264, 100%, 23%);
	/* --background-color: hsl(11.4, 16.5%, 49.8%); */
	--background-color: hsl(11.4, 16.5%, 53.8%);
	/* --background-color: hsla(12, 25%, 55%); */
	--color-switch: var(--accent-lighter);
	--transparent: rgba(0, 0, 0, 0);
	--black: #000;

	/* --background-color: #eee; */
	--title-size: 3rem;
	--title-color: var(--accent);
	--title-color-outline: var(--compliment);
	--title-color-outline-purple: hsl(from var(--compliment) h s 60%);
	--text-color: white;
	--text-color-dark: #222;

	--accent-color: var(--compliment);
	--accent-color-text: var(--compliment-text);
	--accent-color-light: var(--compliment);
	--accent-color-other: var(--light-green);
	--main-color: var(--compliment);
	--light-color: hsl(253, 87%, 46%);
	--link-color: var(--compliment);
	--link-color-hover: var(--accent-darker);

	--border-thickness: 2px;
	--content-width: 768px;
}
/* "*" selects all, use with care */
* {
	/* calculate element sizes with the border */
	box-sizing: border-box;
}
@media (prefers-contrast: more) {
	--link-color: var(--accent-darker);
	--link-color-hover: var(--accent);
}

.hidden {
	display: none;
}

.inline-block {
	display: inline-block;
}

strong {
	font-weight: 500;
}

body {
	background: var(--background-color);
	font-family: "Atkinson Hyperlegible Next", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}

body {
	position: relative;
	min-height: 100%;
	color: var(--text-color);
}

.dots {
	position: absolute;
	inset: 0;
	z-index: -4;
}

.background-image {
	height: 100%;
	width: 100%;
	position: fixed;
	inset: 0;
	z-index: -5;
}

.background-image .gradient {
	z-index: -5;
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	position: fixed;
	inset: 0;
	/* background: linear-gradient(60deg, rgba(255, 110, 78, 0.8), rgba(104, 0, 122, 0.8) 75%, rgba(203, 206, 5, 0.8) 100%); */
	background:
		linear-gradient(-45deg, #ffffff00 75%, #ca81c5 100%),
		linear-gradient(135deg, #ffffff00 75%, #ca81c5 100%);
	opacity: 0.7;
}

.background-image .mask {
	/* height: 100%; */
	/* width: 100%; */
	position: fixed;
	inset: -13vh 0 0 0;
	background: url("../image/TfT-Pattern.svg");
	background-size: 110%;
	background-repeat: no-repeat;
	background-position: top;
	opacity: 0.5;
	/* mix-blend-mode: overlay; */
}

.moving-dot {
	position: absolute;
	--dot-size: 25px;
	width: var(--dot-size);
	height: calc(var(--dot-size) * 0.9);
	background-color: hsl(from var(--accent) h s 60%);
	border-radius: 50%;
	transition: all 2s ease-in-out;
}

main,
header {
	/* font-family: "Lexend", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal; */
	font-size: 1.5 rem;
}

/* FHNW Logo Vorgabe */
.logo {
	height: 2rem;
	max-width: initial;
	display: inline-block;
	/* position: absolute; */
	margin-left: 1.7%;
	margin-top: 1.5%;
	z-index: 1;
}
.logo::after {
	content: "";
	clear: both;
	display: table;
}

.logo img {
	height: 100%;
}

#fhnwlogo {
	width: auto;
	margin-right: 1.5rem;
}

.mix-blend {
	/* color: white; */
	mix-blend-mode: exclusion;
}

.sticky {
	position: sticky;
}

h1,
.h1,
h2,
.h2,
nav form,
nav a {
	/* font-family: PKiko; */
	color: hsl(from var(--compliment-text) calc(h + 15) s l);
	font-family: "antipol-variable", sans-serif;
	font-variation-settings:
		"STCH" 1,
		"wdth" 225,
		"wght" 700;
	/* -webkit-text-stroke-width: 1px; */
	/* -webkit-text-stroke-color: var(--color-font-outline); */

	/* text-shadow: 1px 1px 0 var(--color-font-outline), -1px 1px 0 var(--color-font-outline),
		-1px -1px 0 var(--color-font-outline), 1px -1px 0 var(--color-font-outline); */
}

.main-title h1 {
	display: none;
}

h1,
.h1 {
	font-size: 4.5rem;
	margin-top: 0;
	/* margin-bottom: -5.6rem; */
}

h1 .orange-glow {
	text-align: center;
	text-transform: uppercase;
	display: block;
	pointer-events: none;
	color: var(--title-color);
	text-shadow:
		0 0 7px var(--title-color),
		0 0 7px var(--title-color),
		0 0 7px var(--title-color),
		0 0 7px var(--title-color),
		0 0 7px var(--title-color);
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: var(--title-color-outline);
}

.white-purple-glow {
	text-align: center;
	position: relative;
	top: -5rem;
	font-family: PKiko;
	font-weight: 200;
	text-transform: lowercase;
	display: block;
	color: white;
	text-shadow:
		0 0 7px var(--title-color-outline-purple),
		0 0 7px var(--title-color-outline-purple),
		0 0 7px var(--title-color-outline-purple),
		0 0 7px var(--title-color-outline-purple),
		0 0 7px var(--title-color-outline-purple);
	/* -webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: var(--title-color-outline); */
	font-size: 7rem;
}

h2.orange-glow {
	/* font-family: "antipol-variable", sans-serif; */
	text-align: center;
	text-transform: uppercase;
	--shadow-width: 4px;
	--shadow-color: hsl(from var(--title-color) h 80% l);
	text-shadow:
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color);
}
h2 .purple-glow {
	display: block;
	font-family: "antipol-variable", sans-serif;
	text-align: center;
	text-transform: uppercase;
	color: white;
	--shadow-width: 4px;
	text-shadow:
		0 0 var(--shadow-width) var(--title-color-outline-purple),
		0 0 var(--shadow-width) var(--title-color-outline-purple),
		0 0 var(--shadow-width) var(--title-color-outline-purple),
		0 0 var(--shadow-width) var(--title-color-outline-purple),
		0 0 var(--shadow-width) var(--title-color-outline-purple);
}

h1,
h2,
.h1,
.h2 {
	/* margin: 0 2rem;
	display: block; */
}

h2 {
	text-transform: uppercase;
	hyphens: auto;
	hyphenate-limit-chars: auto 10;
	/* hyphens: manual; */
}

/* h1 {
	font-size: 1.563rem;
} */

h2 {
	font-size: 1.3rem;
	line-height: 1.9rem;
}

h3 {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}

h3:not(h3.mitwirkende) {
	color: var(--accent-color-text);
	font-family: "antipol-variable", sans-serif;
	text-transform: uppercase;
	font-variation-settings:
		"STCH" 1,
		"wdth" 225,
		"wght" 700;
}

/* h3.mitwirkende {
	font-family: "Atkinson Hyperlegible Next", sans-serif; 
	font-variation-settings: "STCH" 1, "wdth" inherit, "wght" inherit;
	text-transform: none;
	color: hsl(from var(--compliment-text) calc(h - 0) s l);
} */
h4 {
	margin-bottom: 0.5rem;
}

a {
	color: var(--link-color);
	text-decoration: underline;
}
a:hover,
a:focus,
a:active {
	/* color: var(--link-color-hover); */
	color: var(--accent-color);

	--shadow: 4px;
	text-shadow:
		0 0 var(--shadow) var(--title-color),
		0 0 var(--shadow) var(--title-color),
		0 0 var(--shadow) var(--title-color),
		0 0 var(--shadow) var(--title-color),
		0 0 var(--shadow) var(--title-color);
	transition: all 0.2s ease-in-out 0s;
}

a.main-title {
	text-decoration: none;
}

.main-title {
	text-align: center;
}
.main-title-image {
	display: block;
	max-width: 100%;
	margin: 0 auto;
}

.selection a {
	text-decoration: none;
	color: var(--accent-color);
	text-shadow: none;
	border-color: var(--accent-color);
}

video {
	max-width: 300px;
}

/* 
MARK: Header
 */

header {
	width: 100%;
	z-index: 100;
	margin-bottom: 2rem;
	position: sticky;
	top: -360px;
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: var(--content-width)) {
	header {
		top: -300px;
	}
}

header .title {
	/* font-family: "Pinyon Script"; */
	/* font-weight: 400; */
	font-size: var(--title-size);
	font-style: normal;
}

header .title:hover {
	cursor: pointer;
}

header h1,
header .title {
	/* top: calc(0.5 * var(--title-size)); */
	text-decoration: none;
	/* color: white; */
}
header h2 {
	font-size: 1rem;
}

header h1,
header .title,
header h2 {
	margin: 0.7rem 0;
}

header img {
	position: relative;
	width: 100%;
}

footer {
	z-index: 0;
}

footer h2,
footer h3,
footer h4 {
	font-family: var(--bs-body-font-family);
	color: #ffffff;
	font-size: 0.875rem;
	font-weight: 600;
}

.flex {
	display: flex;
	justify-content: space-between;
}

#langSelector,
.lang-selector {
	/* justify-content: right; */
	margin: 0.8rem;
	/* top: calc(0.65 * var(--title-size)); */
	z-index: 200;
	/* position: fixed; */
	/* float: right; */
	right: 1.5rem;
	/* height: calc(0.7 * var(--title-size)); */
	/* margin-top: 0.5rem; */
	font-family: "Atkinson Hyperlegible Next", sans-serif;
}

.pagehead {
	box-shadow: 0 20px 20px 0px var(--background-color);
}

nav form {
	z-index: 1000;
	/* position: sticky; */
	top: 0;
	/* background-color: var(--background-color); */
	padding-top: 1rem;
	padding-bottom: 1rem;
	display: grid;
}

.navbar {
	padding: 0 1rem 0 1rem;
	justify-content: space-between;
}

main {
	overflow: hidden;
	position: relative;
	/* top: calc(var(--title-size) * 7); */
	min-height: 65vh;
	min-height: 65dvh;
	/* padding: 0 0.7rem; */
	max-width: var(--content-width);
	margin: auto;
}

main.tools {
	max-width: 992px;
}

main .container {
	width: 100%;
}

.img {
	max-width: 100%;
	height: auto;
	font-style: italic;
	font-size: 0.8rem;
}

main .container {
	z-index: 1;
}

.container img {
	/* margin: 15px auto; */
	width: 100%;
	max-width: var(--content-width);
}

.links a:hover,
.links a:focus {
	/* background: #333; */
	color: var(--text-color);
}

.links-text {
	/* display: flex; */
	display: grid;
	flex-wrap: wrap;
	justify-content: center;
}

.inset {
	margin-left: 1rem;
}

.background {
	position: absolute;
	top: 0;
	left: 50%;
	width: 100%;
	max-width: 1000px;
	height: 100%;
	padding-top: calc(3.5 * var(--title-size));
	margin-left: calc(-1 * min(50%, 500px));
}

video {
	width: 100%;
	height: auto;
}

.audiobar {
	/* display: flex;
	flex-wrap: wrap; */
	margin-bottom: 2rem;
}
.audiobar p {
	margin: 0;
}
.audiobar > * {
	height: 2rem;
	vertical-align: middle;
}
audio {
	width: 100%;
	border-radius: 100vw;
	overflow: hidden;
	margin: 2rem 0;
}

.pdf {
	max-width: 100%;
}

/*
MARK: background
*/

/* #shape {
	width: 200px;
	height: 200px;
	position: relative;
	border: 1px solid black;
	font-family: "Pinyon Script";
} */
/* .letter {
	text-transform: capitalize;
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 200px;
} */

.content {
	margin: 3rem auto;
}

.project-info {
	text-align: center;
	margin-top: 40px;
	transition: all 0.5s ease-out;
}

.project-title {
	/* color: rgb(8, 42, 123); */
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 10px;
	position: relative;
	display: inline-block;
	border-bottom: 2px solid var(--color-font-outline);
	/* border-bottom: 2px solid var(--color-font); */
}

/* .project-title::before,
.project-title::after {
	content: "";
	position: absolute;
	top: 100%;
	width: 100px;
	height: 2px;
	background: var(--color-accent-300);
} */

.project-title::before {
	left: -120px;
}

.project-title::after {
	right: -120px;
}

.project-subtitle {
	color: var(--color-text);
	font-size: 1.5rem;
	font-weight: 500;
	opacity: 0.8;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 10px 0;
	margin-top: -15px;
	position: relative;
}
.dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 60px;
}

.dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(8, 42, 123, 0.2);
	cursor: pointer;
	transition: all 0.3s ease;
}

.dot.active {
	/* background: rgb(8, 42, 123); */
	transform: scale(1.2);
}

.nav-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: var(--color-font-outline);
	color: white;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 20;
	transition: all 0.3s ease;
	font-size: 1.5rem;
	border: none;
	outline: none;
	padding-bottom: 4px;
}

.nav-arrow:hover {
	background: rgba(0, 0, 0, 0.8);
	transform: translateY(-50%) scale(1.1);
}

.nav-arrow.left {
	left: 0px;
	padding-right: 3px;
}

.nav-arrow.right {
	right: 0px;
	padding-left: 3px;
}
@media (max-width: 768px) {
	h1,
	.h1 {
		font-size: 1.9rem;
		margin-top: 1rem;
		-webkit-text-stroke-width: 1.5px;
		margin-bottom: -1.5rem;
	}

	h2,
	.h2 {
		font-size: 1rem;
	}
	h1 .orange-glow {
	}

	.white-purple-glow {
		top: -2rem;
		font-size: 2.7rem;
	}

	h2.orange-glow {
	}
	h2.purple-glow {
	}

	.project-title {
		font-size: 1.5rem;
	}

	.project-subtitle {
		font-size: 1.1rem;
	}

	.project-title::before,
	.project-title::after {
		width: 50px;
	}

	.project-title::before {
		left: -70px;
	}

	.project-title::after {
		right: -70px;
	}
}

/* 
MARK: tags
*/

#tools-filters {
	margin-bottom: 4rem;
}

.selection {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
body:has(#switch-option-2:checked) {
	#tools .selection {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
}

main .selection label,
main .selection button,
main .items li,
main .tags li,
main .pagination button {
	padding: 0rem 0.5rem;
	margin: 0.2rem 0.3rem;
	border: var(--border-thickness) solid var(--accent-color);
	border-radius: 100vw;
	color: var(--accent-color-text);
	background-color: unset;
	font-weight: 350;
}

button:hover,
button:focus,
button:active {
	/* outline:  0px 2px solid var(--accent-color); */
	/* border-bottom: var(--border-thickness) solid var(--accent-color); */
	color: var(--text-color-accent);
}

button {
	border: none;
	font-weight: 300;
	/* border-bottom: var(--border-thickness) solid var(--accent-color); */
}
.pagination {
	margin-top: 3rem;
	display: flex;
	justify-content: end;
}

.selection input {
	/* display: none; */
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	z-index: -1;
	opacity: 0;
	position: relative;
	color: var(--text-color);
}

nav form {
	margin: 0;
	padding: 0;
}

/* .container.navigation {
	display: grid;
} */

.list-menu a {
	color: var(--title-color);
	--shadow: 4px;
	/* -webkit-text-stroke-width: 1px; */
	/* -webkit-text-stroke-color: var(--title-color-outline); */
	text-shadow: none;
	transition: all 0.2s ease-in-out 0s;
	margin: 0;
	padding: 0;
	margin: auto 0.5rem;
	color: var(--title-color);
	color: var(--title-color-outline);
	font-size: 1.2rem;
}

.list-menu a:hover,
.list-menu a:focus,
.list-menu a:has(input:checked) {
	text-shadow:
		0 0 var(--shadow) var(--title-color),
		0 0 var(--shadow) var(--title-color),
		0 0 var(--shadow) var(--title-color),
		0 0 var(--shadow) var(--title-color),
		0 0 var(--shadow) var(--title-color);
	/* border-bottom: 2px solid var(--link-color); */
	transition: all 0.2s ease-in-out 0s;
}

main .selection label:has(input:checked),
main .selection label:has(input:focus),
main .selection label:hover,
.pagination button:hover {
	border-color: 2px solid var(--link-color);
	--shadow-width: 10px;
	--shadow-color: hsl(from var(--title-color) h 80% l);
	box-shadow:
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color);
	/* border-bottom: 2px solid var(--link-color); */
	transition: all 0.3s ease-in-out 0s;
}

main .selection label:hover,
.paginationbutton:hover {
	--shadow-width: 10px;
	--shadow-color: hsl(from var(--title-color) h 80% l);
	text-shadow:
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color);
	/* border-bottom: 2px solid var(--link-color); */
	transition: all 0.3s ease-in-out 0s;
}

main .selection label:has(input:checked),
main .selection label:has(input:focus) {
	--shadow-color: hsl(from var(--title-color) h 80% l);
	background: var(--shadow-color);
}

.selection label:has(input:checked) span,
.selection label:has(input:focus) span,
.selection label:hover span {
	text-shadow: none;
}

.selection label.break {
	background: none;
	flex-basis: 100%;
}

.selection .clear {
	margin-left: 2rem;
	font-style: italic;
	background-color: unset;
}
.selection label.clear:has(input:focus),
.selection label.clear:hover {
	/* outline: 2px solid var(--main-color); */
	border-bottom: var(--border-thickness) solid var(--accent-color);
}

/* #section-switch {
} */

.list-menu a {
	flex-grow: 1;
	text-align: center;
}

.list-menu a:has(input:checked) {
	outline: none;
}

/* .list-menu a {
	border-radius: 0;
} */

.selection label .tooltiptext {
	visibility: hidden;
	/* width: 120px; */
	background-color: hsla(0, 0%, 100%, 0.9);
	color: #var(var(--accent));
	text-align: center;
	border-radius: 1rem;
	padding: 0.5rem 1rem;
	max-width: 300px;

	/* Position the tooltip */
	position: absolute;
	/* bottom: 0; */
	/* left: 0; */
	z-index: 200;
	overflow: auto;

	margin-left: -18%;
	margin-top: 2rem;
}

.selection label:hover .tooltiptext {
	visibility: visible;
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
	.list-menu {
		padding: 0;
	}
	.list-menu nav {
		margin: 1.5rem;
		display: grid;
		gap: 0.5rem;
		grid-template-columns: 1fr;
	}
	.list-menu a {
		font-size: 2rem;
		flex-grow: 1;
		text-align: center;
		/* width: 100%; */
		border-radius: 0;
	}

	.list-menu a:has(input:checked) {
		outline: none;
	}

	.navbar-collapse {
		position: absolute;
		width: 100vw;
		right: -0.5rem;
		top: 45px;
		background-color: var(--background-color);
		/* padding-bottom: 2rem; */
	}
}
/* 
MARK: Tools
*/

#tools .item {
	color: var(--accent-color);
}

#tools .item:hover {
	color: var(--accent-color);

	--shadow: 4px;
	text-shadow:
		0 0 var(--shadow) var(--title-color),
		0 0 var(--shadow) var(--title-color),
		0 0 var(--shadow) var(--title-color),
		0 0 var(--shadow) var(--title-color),
		0 0 var(--shadow) var(--title-color);
	transition: all 0.2s ease-in-out 0s;
}

#tools .title {
	line-height: 1.5rem;
	margin-bottom: 0.6rem;
}

/* 
MARK: collapse 
*/

/* #tools-filters, */
#tools,
#program,
#info {
	/* transition: max-height 0.5s, opacity 0.2s; */
	max-height: 20000px;
	/* overflow: hidden; */
	opacity: 1;
	filter: blur(0px);
}

#program.collapsed,
#info.collapsed,
#tools-filters.collapsed,
#tools.collapsed {
	opacity: 0.2;
	max-height: 0;
	overflow: hidden;
	filter: blur(2px);
}

/*
 MARK: items
*/

.items {
	height: unset;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 2.5rem;
}

.items .title,
#program .title,
#program .time {
	font-size: 1.2em;
	line-height: auto;
	margin: 0;
	margin-top: 1.5rem;
	font-weight: 700;
	hyphens: none;
	hyphenate-limit-chars: auto 6;
}


/* section.items {
	align-items: flex-start;
} */

.items .name,
.item .time {
	/* color: var(--text-lighter); */
	font-size: 1em;
	margin: 0;
	margin-bottom: 0.25rem;
	font-weight: 650;
}

.item {
	order: 2;
	margin: 1rem 0;
	margin-bottom: 2.5rem;
	/* flex-grow: 1; */
	filter: blur(2px);
	opacity: 0.3;
	/* max-width: 220px; */
	flex-basis: 250px;
	flex-grow: 2;
	/* max-width: 400px; */
	/* display: grid; */
}

.item:has(.item) {
	margin: 0;
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 768px) {
	.item {
		flex-basis: auto;
		margin-bottom: 5rem;
		margin-left: 0;
		margin-right: 0;
	}
	
	#program .title, 
	#program .time {
		font-size: 1.5rem;
	}
}

.item.visible .image {
	/* background: var(--accent-lighter); */
	--shadow-width: 7px;
	--shadow-color: hsl(from var(--title-color) h 60% l);
	box-shadow:
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color);
	background: rgba(255, 255, 255, 0.2);
}

.item .image {
	/* background: var(--salmon); */
	/* background: var(--light-orange); */
	/* display:none; */
}

.item img {
	z-index: 0;
	/* mix-blend-mode: overlay; */
	/* filter: grayscale(100); */
}

.item:hover,
.item:focus-within,
.item:focus-visible {
	transition:
		filter ease 0.5s,
		opactiy ease 0.5s;
	filter: none;
	opacity: 1;
}

.item .anleser {
	color: white;
	margin: 0.9rem auto;
}
.item:hover .anleser {
	text-shadow: none;
}

#tools a {
	text-decoration: none;
}

.item h2,
.item h3 {
	cursor: pointer;
}

.item.visible {
	order: 1;
	filter: none;
	opacity: 1;
}

.item ul {
	display: none;
	/* list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0; */
	/* justify-content: center; */
}

#toolpage h1 {
	margin-bottom: 1.5rem;
	font-variation-settings:
		"STCH" 1,
		"wdth" 225,
		"wght" 500;
}

#toolpage ul.tags {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	margin: 2rem 0;
	padding: 0;
	/* justify-content: center; */
}

.item li {
	border-radius: 0;
	transition: color ease 0.5s;
	color: rgba(0, 0, 0, 0);
	font-size: 0.7rem;
	padding: 0.1rem 0.6rem;
	margin: 0;
}

.item.selected li,
.item:focus li,
.item:hover li,
.item li.selected {
	border-radius: 100vw;
	transition: color ease 0.5s;
	color: var(--text-color);
	font-size: 0.7rem;
	padding: 0.1rem 0.6rem;
	/* margin: -0.1rem; */
}

.item li.selected {
	background: var(--accent-color-other);
	color: var(--text-color);
}

/* 
MARK: Modal 
*/

.modal-content {
	border-radius: 2rem;
	border: 2px solid var(--accent-color);
	padding: 1rem;
	position: relative;
}

.modal-content .close {
	position: absolute;
	top: 1.1rem;
	right: 1.2rem;
}

.modal-header {
	border-bottom: none;
}

.modal-body {
	padding-bottom: 0;
}
.modal-body > p:last-child {
	margin-bottom: 0;
}

.modal p {
	color: var(--accent-color-text);
}

.modal em {
	font-style: normal;
	font-weight: 700;
}

.modal-footer {
	border-top: none;
	justify-content: center;
}

.modal-footer .btn,
#awareness .btn {
	border: 2px solid var(--accent-color);
	border-radius: 100vw;
	color: var(--accent-color-text);
	background-color: unset;
	font-weight: 350;
	padding: 0.5rem 1rem;
}

.modal-footer .btn:hover,
#awareness .btn:hover {
	--shadow-width: 10px;
	--shadow-color: hsl(from var(--title-color) h 80% l);
	text-shadow:
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color);
	border-bottom: 2px solid var(--link-color);
	transition: all 0.3s ease-in-out 0s;
}

.modal-footer .btn:hover,
#awareness .btn:hover {
	border-color: 2px solid var(--link-color);
	--shadow-width: 10px;
	--shadow-color: hsl(from var(--title-color) h 80% l);
	box-shadow:
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color),
		0 0 var(--shadow-width) var(--shadow-color);
	border-bottom: 2px solid var(--link-color);
	transition: all 0.3s ease-in-out 0s;
}

#awareness .btn {
	font-weight: 500;
	margin-bottom: 1.5rem;
}

/* 
MARK: program
*/

#program {
	width: 100%;
}

#program .item {
	flex-basis: 100%;
	margin: 0;
	padding: 1rem;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 3fr 2fr;
	align-items: start;
	border-bottom: 1px solid var(--accent-color-text);
}

#program a.item {
	text-decoration: none;
}
#program a.item .title {
	text-decoration: underline;
}

#program .item:last-child {
	border-bottom: none;
}

#program .item > span {
	margin-right: 1rem;
}

#program h2,
#program .time,
#program .title {
	margin-top: 0;
}

#program .name {
	grid-row-start: 1;
	grid-row-end: 3;
	grid-column-start: 3;
	grid-column-end: 4;
	/* height: 100%; */
	align-self: flex-start;
	padding-top: 0.22rem;
}

#program .type,
#program .location {
	height: 100%;
}

#program a.item .time,
#program a.item .name,
#program a.item .location,
#program a.item .type {
	text-decoration: unset;
	color: var(--text-color);
}

#program .item a:hover,
#program a.item:hover .title,
#program .item a:focus,
#program a.item:focus-within .title {
	color: var(--link-color-hover);
}

#program a:hover .time,
#program a:hover .name,
#program a:hover .type,
#program a:hover .location,
#program a:focus .time,
#program a:focus .name,
#program a:focus .type,
#program a:focus .location {
	text-shadow: none;
}

#program .item.day {
	/* background: var(--main-color); */
	margin-top: 3rem;
}

.day h3 {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	grid-column: 1 / span 2;
}

#program .subtitle,
#program .until {
	display: block;
	font-size: 0.7em;
	font-weight: 300;
}


#program a.item.cancelled * {
	text-decoration:line-through;
	opacity: .6;
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 768px) {
	#program .item span {
		margin-bottom: 0.5rem;
	}

	#program .name,
	#program .type,
	#program .location {
		color: var(--text-lighter);
	}

	#program .item {
		grid-template-columns: 1fr;
	}

	#program .title {
		grid-row-start: 1;
		grid-row-end: 2;
		grid-column-start: 1;
		grid-column-end: 2;
	}
	#program .time {
		grid-row-start: 2;
		grid-row-end: 3;
		grid-column-start: 1;
		grid-column-end: 2;
	}
	#program .name {
		grid-row-start: 3;
		grid-row-end: 5;
		grid-column-start: 1;
		grid-column-end: 2;
	}
}

/* 
	MARK: Info
*/

#info ul {
	margin-bottom: 2rem;
}

/* #info a {
	color: var(--link-color);
	text-decoration: underline; 
} */

/* #info a:hover,
#info a:focus {
	color: var(--accent-color);
} */

/* #info .video {
	display: inline-block;
} */

.phone {
	display: block;
}

/*
MARK: Colors
*/

label.purple,
.item.purple li {
	background: var(--light-purple);
}
label:has(input:checked).purple {
	background: var(--purple);
}

label.pink,
.item.pink li {
	background: var(--light-pink);
}
label:has(input:checked).pink {
	background: var(--pink);
}

label.green,
.item.green li {
	background: var(--light-green);
}
label:has(input:checked).green {
	background: var(--green);
}

label.salmon,
.item.salmon li {
	background: var(--light-salmon);
}
label:has(input:checked).salmon {
	background: var(--salmon);
}

label.orange,
.item.orange li {
	background: var(--light-orange);
}
label:has(input:checked).orange {
	background: var(--orange);
}

/*
MARK: Tools pages
*/

/* #toolpage {
} */

.toolsheader {
	/* display: grid;
	row-gap: 1rem;
	column-gap: 0.7rem;
	grid-template-columns: 1fr 1fr; */
	margin-bottom: 3rem;
	/* flex-wrap: wrap; */
	/* justify-content: space-between; */
	/* padding: 0; */
	/* margin: 0; */
}

.toolsheader {
	color: var(--accent-color-text);
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {
	.toolsheader {
		grid-template-columns: 1fr;
	}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	audio {
		max-width: 400px;
	}
}

.carousel {
	background: rgba(255, 255, 255, 0.2);
}

.carousel-item-next,
.carousel-item.active {
	display: flex;
	align-items: center;
	justify-content: center;
	/* float: none; */
	width: 100%;
	/* margin-right: 0; */
}

.carousel-item img {
	max-height: 90vh;
	width: auto;
	max-width: 100%;
}

/* .header-item {
	flex-grow: 1;
} */

.header-item.img {
	display: none;
}

.flexitem.img {
	margin-top: 1rem;
}

h2.name,
h3.mitwirkende {
	font-size: 1.15rem;
	font-weight: 400;
	color: var(--text-lighter);
	margin-bottom: 0;
}
.name .pronouns {
	font-size: 0.8rem;
	margin-left: 0.2rem;
}
h3.mitwirkende {
	font-size: 0.9rem;
	margin-top: 0;
}
.mitwirkende .pronouns {
	font-size: 0.7rem;
	margin-left: 0.2rem;
}

.back {
	margin-top: 3rem;
}

/*
MARK:mobile layout
*/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	/* .title {
		--title-size: 7rem;
		line-height: 0.9;
	} */
	header {
		margin-bottom: 3rem;
	}

	/* main .container {
		padding: 20px;
	} */

	/* header h1 {
		top: calc(0.2 * var(--title-size));
	} */
	header h2 {
		font-size: 1.5rem;
	}

	/* section > div {
		padding-top: 55vh;
		top: calc(4 * var(--title-size));
	} */

	.background {
		padding-top: calc(7 * var(--title-size));
	}

	#myVideo,
	.backgroundVid {
		top: calc(2.5 * var(--title-size));
	}

	.projekt-multimedia .gallery,
	.projekt-multimedia .video-gallery {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.projekt-multimedia .gallery * {
		max-height: 47vh;
		margin-bottom: 3.2%;
		width: auto;
		margin: auto;
		margin-bottom: 2rem;
		text-align: center;
	}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}