@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap");

/* @font-face {
	font-family: "Pinyon Script";
	font-style: normal;
	font-weight: 400;
} */

:root {
	--background-color: #eee;
	--title-size: 3rem;
	--text-color: black;
	--text-color-accent: white;
	--text-lighter: rgb(128, 128, 128);

	--purple: rgb(98, 47, 239);
	--pink: rgb(253, 16, 238);
	--green: rgb(203, 251, 5);
	--salmon: rgb(255, 221, 196);
	--orange: rgb(252, 110, 2);
	/* --blue: rgb(0, 159, 227); */
	--medium-purple: rgb(161, 130, 245);
	--medium-pink: rgb(254, 112, 245);
	--medium-green: rgb(224, 253, 105);
	--medium-salmon: rgb(255, 235, 220);
	--medium-orange: rgb(253, 168, 103);
	/* --medium-blue: rgb(0, 159, 227); */
	--light-purple: rgb(208, 192, 250);
	--light-pink: rgb(254, 183, 250);
	--light-green: rgb(239, 254, 180);
	--light-salmon: rgb(255, 245, 237);
	--light-orange: rgb(254, 211, 179);
	/* --light-blue: rgb(0, 159, 227); */

	--accent-color: var(--purple);
	--accent-color-light: var(--light-purple);
	--accent-color-other: var(--light-green);
	--main-color: var(--light-orange);
	--light-color: var(--salmon);
	--link-color: var(--accent-color);
	--link-color-hover: var(--orange);
}
/* "*" selects all, use with care */
* {
	/* calculate element sizes with the border */
	box-sizing: border-box;
}

.hidden {
	display: none;
}

html,
body {
	background: var(--background-color);
}

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

main,
header {
	font-family: "Lexend", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;

	font-size: 1.5 rem;
}

/* h1, */
/* h2, */
/* h3, */
/* h4, */

/* 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;
}

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

.sticky {
	position: sticky;
}

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

h2 {
	font-size: 1.563rem;
}

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

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

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: 768px) {
	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 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; */
}

/* .pagehead,
main {
	padding: 0 1rem;
} */

.banner {
	background-image: url("../image/tft_banner.jpg");
	background-size: cover;
	width: 100vw;
	height: 380px;
	box-shadow: 0 -20px 20px 0px var(--background-color) inset;
	background-position: center;
}
.pagehead {
	box-shadow: 0 20px 20px 0px var(--background-color);
}

.container.navigation {
	z-index: 1000;
	position: sticky;
	top: 10px;
}

/* Medium devices (landscape tablets, 768px and up) */
/* @media only screen and (max-width: 768px) {
	.container.navigation {
		position: relative;
	}
} */
main {
	position: relative;
	/* top: calc(var(--title-size) * 7); */
	min-height: 65vh;
	min-height: 65dvh;
	/* padding: 0 0.7rem; */
	max-width: 100%;
	margin: auto;
}

.container {
	margin-bottom: 2rem;
}

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

main .container {
	z-index: 1;
}

main .container img {
	/* margin: 15px auto; */
	width: 100%;
	max-width: 680px;
}

.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));
}

/* 
.projekt-links li {
	font-size: 1.2rem;
	margin-bottom: 0.9rem;
	line-height: 1.25rem;
}


.projekt-titel {
	margin-bottom: 0;
}
.projekt-format {
	margin-top: 0;
	font-size: 1.5rem;
	font-weight: 50;
}

.projekt-content-note {
	font-style: italic;
	font-size: 0.9rem;
}
.projekt-content-note p::before {
	content: "Content Note: ";
	display: inline;
}

.projekt-model {
	width: 500px;
	height: 500px;
	max-width: 80vw;
	max-height: 80vw;
	margin: auto;
	margin-bottom: 2rem;
}

.projekt-mitwirkende li {
	margin-left: 1rem;
}
.projekt-multimedia {
	margin-top: 3rem;
}

.projekt-multimedia img,
.projekt-multimedia video {
	margin-bottom: 1rem;
} */

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%;
}

.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;
}

/* 
MARK: tags
*/

.selection {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.selection label,
.selection button,
.items li,
.tags li,
.pagination button {
	/* background: var(--light-orange); */
	background: var(--main-color);
	padding: 0.2rem 0.8rem;
	border-radius: 100vw;
	margin: 0.2rem;
}

button:hover,
button:focus,
button:active {
	outline: 2px solid var(--accent-color);
}

button {
	border: none;
	font-weight: 300;
}
.pagination {
	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;
}
#section-switch label:has(input:checked) {
	background: var(--accent-color);
	color: var(--text-color-accent);
}
.selection label:has(input:checked) {
	outline: 2px solid var(--accent-color-light);
	background: var(--accent-color-other);
	/* color: var(--text-color-accent); */
}

.selection label:has(input:focus),
.selection label:hover {
	outline: 2px solid var(--accent-color);
}

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

.selection .clear {
	margin-left: 2rem;
	font-style: italic;
	background: var(--light-color);
}
.selection label.clear:has(input:focus),
.selection label.clear:hover {
	outline: 2px solid var(--main-color);
}

/* #section-switch {
} */

#section-switch label {
	flex-grow: 1;
	text-align: center;
}

#section-switch label:has(input:checked) {
	outline: none;
}

#section-switch label {
	border-radius: 0;
}
#section-switch label:first-child {
	border-top-left-radius: 100vw;
	border-bottom-left-radius: 100vw;
}
#section-switch label:last-child {
	border-top-right-radius: 100vw;
	border-bottom-right-radius: 100vw;
}

.selection label .tooltiptext {
	visibility: hidden;
	/* width: 120px; */
	background-color: black;
	color: #fff;
	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) {
	#section-switch {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
	}
	#section-switch label {
		flex-grow: 1;
		text-align: center;
		width: 100%;
	}

	#section-switch label:has(input:checked) {
		outline: none;
	}

	#section-switch label {
		border-radius: 0;
	}
	#section-switch label:first-child {
		border-radius: 100vw 100vw 0 0;
	}
	#section-switch label:last-child {
		border-radius: 0 0 100vw 100vw;
	}
}
/* 
MARK: Tools
*/

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

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

/* 
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: flex-end;
}

.items .title,
#program .title,
#program .time {
	font-size: 1.5em;
	margin: 0;
	margin-top: 2rem;
	font-weight: 700;
}

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

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

.item.visible .image {
	background: var(--light-color);
}

.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;
}

#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 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: 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: end;
	border-bottom: 1px solid var(--text-lighter);
}

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

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

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

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

#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 .item.day {
	background: var(--main-color);
	margin-top: 3rem;
}

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

.subtitle {
	display: block;
	font-size: 0.7em;
	font-weight: 400;
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 768px) {
	#program .item {
		grid-template-columns: 1fr;
	}

	#program .item span {
		margin-bottom: 0.5rem;
	}

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

/* 
	MARK: Info
*/

/* #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;
	/* flex-wrap: wrap; */
	/* justify-content: space-between; */
	/* padding: 0; */
	/* margin: 0; */
}

/* 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;
	}
}

/* .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;
}

/*
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) {
}