/* CSS Document */

html{
	font-family: Archivo-Light, Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

	height: 100%;
	margin: 0;
	padding: 0;

	--main-space: 25px;
	
	--color1: hsl(244, 35%, 38%);
	--color2: hsl(274, 35%, 38%);
	--color3: hsl(304, 35%, 38%);
	--color4: hsl(187, 35%, 38%);
	--color5: hsl(64, 35%, 38%);
	--color6: hsl(32, 35%, 38%);

	--color1-brighter: hsl(244, 30%, 45%);
	--color2-brighter: hsl(274, 30%, 45%);
	--color3-brighter: hsl(304, 30%, 45%);
	--color4-brighter: hsl(187, 30%, 45%);
	--color5-brighter: hsl(64, 30%, 43%);
	--color6-brighter: hsl(32, 30%, 43%);
	
	--global-black: black;
	--font-color-black: black;
	--font-color-white: white;
	
	--global-border-radius: 10px;
	--global-border-radius-small: 5px;
	
	--global-grid-gap: calc(1.4rem);

	--global-border-grey: 1px solid var(--global-border-color);
	--border-body: none;

	--bg-color-100-x: hsl(0, 0%, 100%);
    --bg-color-100-y: hsl(0, 0%, 100%);
	--bg-color-100-0: hsl(0,0%,100%);
	--bg-color-100-5: hsl(0,0%,100%);
	--bg-color-100-10: hsl(0,0%,100%);
	--bg-color-100-15: hsl(0,0%,100%);

    --bg-color-95-x: hsl(0, 0%, 97%);
    --bg-color-95-y: hsl(0, 0%, 97%);
	--bg-color-95-0: hsl(0,0%,97%);
	--bg-color-95-5: hsl(0,0%,97%);
	--bg-color-95-10: hsl(0,0%,97%);
	--bg-color-95-15: hsl(0,0%,97%);

	--bg-color-90-x: hsl(0, 0%, 90%);
    --bg-color-90-y: hsl(0, 0%, 90%);
	--bg-color-90-0: hsl(0,0%,90%);
	--bg-color-90-5: hsl(0,0%,90%);
	--bg-color-90-10: hsl(0,0%,90%);
	--bg-color-90-15: hsl(0,0%,90%);
	
	--bg-color-80-30: hsl(0,0%,80%);
	
    --bg-color-nav-start: hsla(0, 0%, 11%, 0%);
    --bg-color-nav: hsla(0, 0%, 11%, 40%);

	--div-border-color: #ddd;
	--global-border-color: #ddd;
	
	
	--font-color-white: hsl(0,0%,100%);
	--font-color-black: hsl(0,0%,0%);

	--nav-ul-li-color: var(--color1);
	
	--shadow-color-mitmachen: var(--background-colo-generic-div);
	--mitmachen-background:	url("assets/tau-logo (nur tau gedreht) - black.svg") no-repeat 95%;
	
	--contact-hover-background: black;
	--contact-hover-text: white;
	
	--contact-click-background: white;
	--contact-click-text: black;
	
	--invert-img: 0%;
	
	/* ANIMATIONS */
	--button-animation-click: button-animation-click;
	--logo-hover: logo-hover;
	--pack-mit-an-animation: pack-mit-an-animation;
	--workshop-zoom: workshop-zoom;
	--button-animation: button-animation;
	--button-animation-color3: button-animation-color3;
	--button-animation-color4: button-animation-color4;
	--zoom-in-small: zoom-in-small;
	--zoom-in: zoom-in;	
	--zoom-in-x-small: zoom-in-x-small;
	--button-animation-timing: 0.5s;
	--pack-mit-an-animation-timing: 1s;
	
	--header-padding: 0px;
	
	--workshop-contact-a-width: 27%;
}

body{
	--body-width: 70%;
	display: flex;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
	/*width: var(--body-width);*/
	
	margin-top: 0;
	margin-bottom: 0;
	
	align-items: stretch;
	min-height: 100%;
	
	background: var(--bg-color-95-5);		
}



/* ---------- H E A D E R ------------*/

header{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	min-height: 4em; /* Damit Header nicht hüpft, sobald Navbar geladen wird */
	--divide: 5;
	
	padding-left: var(--header-padding);
	padding-right: var(--header-padding);
	padding-top: calc(var(--main-space)/var(--divide));
	padding-bottom: calc(var(--main-space)/var(--divide));

	background-color: var(--bg-color-95-5);
}

header img{
	--img-size: 35px;
	height: var(--img-size);
}

header img:hover{
	animation: var(--logo-hover) 0.4s;
	animation-delay: 0.1s;
}

@keyframes logo-hover{
	0% {
		transform: rotate(0deg);
	}
	5%{
		transform: rotate(-2deg);
	}
	20% {
		transform: rotate(-2deg);
	}
	70% {
		transform: rotate(4deg);
	}
	85% {
		transform: rotate(-3deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

.website-logo{
	display: flex;
	align-items: center;
}

/* --------- N A V B A R -----------------*/

nav{
	font-family: Archivo;
	align-items: center;
	justify-content: flex-end; /*Für mobile design, damit rechtsbündig*/
	font-size: 11pt;
	margin-left: auto;
	max-width: calc(100% - 15em); /* Logo ist ca. 15em */
}

nav a{
	text-decoration: none;
}

nav ul{
	display: flex;
	list-style: none;
	justify-content: flex-end;
	align-items: center;
	margin-left: auto;
	flex-wrap: wrap;
}



nav ul li{
	color: var(--nav-ul-li-color);
	padding: 0.5em;

}

nav ul li:hover{
	text-decoration: underline;
}

nav ul li:active{
	color: var(--color3);
}

.contact{
	background-color: var(--nav-ul-li-color);
	padding: 0.6em 1em;
	border-radius: 25px;
	color: var(--font-color-white);
	margin-left: 5px;
}

.contact:hover{
	text-decoration: none;
	background: var(--contact-hover-background);
	color: var(--contact-hover-text);
}

.contact:active{
	text-decoration: none;
	background: var(--contact-click-background);
	color: var(--contact-click-text);
	}


#hamburger{
	margin-left: auto;
	align-self: center;
}

#hamburger h1{
	
	margin: auto 0px;
}



/* --------P A C K   M I T   A N ---------*/

div.pack_mit_an{
	padding-left: var(--header-padding);
	margin: 0;
	background: var(--bg-color-95-5);
	margin-bottom: var(--global-grid-gap);
	border-radius: var(--global-border-radius-small);
}

div.pack_mit_an p{
	font-size: 0.93em;
	font-family: Archivo;
	margin: 0;
	padding: 0.35em 0pt;
	color: var(--color1);
	border-radius: var(--global-border-radius-small);
}

div.pack_mit_an a{
	color: var(--color1);
	text-decoration: none;
}

div.pack_mit_an p:hover, /* Für Edge */
div.pack_mit_an a:hover {
	color: white;
	text-decoration: none;
	animation: pack-mit-an-animation-a var(--pack-mit-an-animation-timing) forwards cubic-bezier(0.1, 0.6, 0.4, 0.9);
}

div.pack_mit_an p:hover{
	color: white;
	animation: var(--pack-mit-an-animation) calc(var(--pack-mit-an-animation-timing)*0.5) forwards cubic-bezier(0.1, 0.6, 0.4, 0.9);	
}

@keyframes pack-mit-an-animation{
	100%{
		background-color: var(--color1);
		padding-left: var(--main-space);
	}
}

@keyframes pack-mit-an-animation-lighter{
	100%{
		background-color: var(--color1-brighter);
		padding-left: var(--main-space);
	}
}

@keyframes pack-mit-an-animation-a{
	100%{
		color: white;
		}
}

main{
	flex: auto;	
	display: flex;
	flex-direction: column;
	/*padding: var(--main-space);*/
	column-gap: var(--main-space);
	grid-row-gap: var(--global-grid-gap);
	
}

/* ---------- S E C T I O N S ---------------------*/

section.workshop,
section.mitmachen{
	display: flex;
	padding: var(--main-space);
	border: var(--global-border-grey);
}

section{
	flex: auto;
	border-radius: var(--global-border-radius);
	}

/* -------- S E C T I O N   I N T R O -----------*/

section.intro{
	display: grid;
	align-items: center;
	grid-gap: var(--global-grid-gap);
	align-items: stretch;
	}

section.intro div{
	border-radius: var(--global-border-radius);
	}

section.intro div.intro-text{
	padding-left: calc(var(--main-space)*2);
	padding-right: calc(var(--main-space)*2);
	
	display: flex;
	flex-flow: column;
	justify-content: center;
	
	border: var(--global-border-grey);
	background: var(--bg-color-100-0);
	}

div.intro-text a{
	width:inherit;
}

section.intro p{
	margin-bottom: 24pt;
	}

section.intro img{
	width: 100%;
	vertical-align: middle;
	border-radius: var(--global-border-radius);
	aspect-ratio: 1/1;
}

/*section.intro img:hover{
	animation: slight-rotate 0.4s forwards;
}*/

@keyframes slight-rotate{
	100%{
		transform: rotate(-0.75deg);
	}
}

/* ------ S E C T I O N   W O R K S H O P -------------*/

section.workshop{
	flex-flow: column;	
	background: var(--bg-color-100-10);

}

div.workshops-grid{
	display: grid;
	grid-gap: 15px;
	width: 100%;
}

div.workshops-grid div{
	border: var(--div-border-color) 1px solid;
	flex-basis: 410px;
	flex-wrap: wrap;
	padding: calc(var(--main-space)/30) calc(var(--main-space)/1) calc(var(--main-space)/30) calc(var(--main-space)/1);
	background: var(--bg-color-95-5);
	border-radius: var(--global-border-radius-small);
	}

div.workshops-grid div p{
	text-align: left;
}
div.workshops-grid img{
	border-radius: var(--global-border-radius-small);
	max-width: 100%;
	max-height: 300px;
	}

div.workshops-grid .workshop1 img{
	max-width: 85%;
}

div.workshops-grid div:hover{
	animation: var(--workshop-zoom) 0.4s forwards;
}

.workshopX{display: none}


@keyframes workshop-zoom{
	
	100%{
		transform: scale(1.05);
	}
}



div.workshop-contact{
	justify-content: center;
	margin: 35pt 0 20pt 0;
	display: flex;
	width: 100%;
}

div.workshop-contact a{
	text-align: center;
	width: var(--workshop-contact-a-width);
	
}

/* ------ S E C T I O N   M I T M A C H E N -------------*/

section.mitmachen{ 
	display: flex;
	flex-flow: column;
	grid-gap: 5pt;
	padding-left: calc(var(--main-space)*2);
	--shadow-color-mitmachen: var(--bg-color-100-0);
	background: var(--mitmachen-background) var(--bg-color-100-0);
	}


section.mitmachen h2{

	font-size: xx-large;
	line-height: 160%;
	text-shadow: 	3px 0px 0pt var(--shadow-color-mitmachen), 3px 1px 0px var(--shadow-color-mitmachen), 3px 2px 0px var(--shadow-color-mitmachen), 3px 3px 0px var(--shadow-color-mitmachen), 3px -1px 0px var(--shadow-color-mitmachen), 3px -2px 0px var(--shadow-color-mitmachen), 3px -3px 0px var(--shadow-color-mitmachen),
					2px 0px 0pt var(--shadow-color-mitmachen), 2px 1px 0px var(--shadow-color-mitmachen), 2px 2px 0px var(--shadow-color-mitmachen), 2px 3px 0px var(--shadow-color-mitmachen), 2px -1px 0px var(--shadow-color-mitmachen), 2px -2px 0px var(--shadow-color-mitmachen), 2px -3px 0px var(--shadow-color-mitmachen),
					1px 0px 0pt var(--shadow-color-mitmachen), 1px 1px 0px var(--shadow-color-mitmachen), 1px 2px 0px var(--shadow-color-mitmachen), 1px 3px 0px var(--shadow-color-mitmachen), 1px -1px 0px var(--shadow-color-mitmachen), 1px -2px 0px var(--shadow-color-mitmachen), 1px -3px 0px var(--shadow-color-mitmachen),
					0px 0px 0pt var(--shadow-color-mitmachen), 0px 1px 0px var(--shadow-color-mitmachen), 0px 2px 0px var(--shadow-color-mitmachen), 0px 3px 0px var(--shadow-color-mitmachen), 0px -1px 0px var(--shadow-color-mitmachen), 0px -2px 0px var(--shadow-color-mitmachen), 0px -3px 0px var(--shadow-color-mitmachen),
					-3px 0px 0pt var(--shadow-color-mitmachen), -3px 1px 0px var(--shadow-color-mitmachen), -3px 2px 0px var(--shadow-color-mitmachen), -3px 3px 0px var(--shadow-color-mitmachen), -3px -1px 0px var(--shadow-color-mitmachen), -3px -2px 0px var(--shadow-color-mitmachen), -3px -3px 0px var(--shadow-color-mitmachen),
					-2px 0px 0pt var(--shadow-color-mitmachen), -2px 1px 0px var(--shadow-color-mitmachen), -2px 2px 0px var(--shadow-color-mitmachen), -2px 3px 0px var(--shadow-color-mitmachen), -2px -1px 0px var(--shadow-color-mitmachen), -2px -2px 0px var(--shadow-color-mitmachen), -2px -3px 0px var(--shadow-color-mitmachen),
					-1px 0px 0pt var(--shadow-color-mitmachen), -1px 1px 0px var(--shadow-color-mitmachen), -1px 2px 0px var(--shadow-color-mitmachen), -1px 3px 0px var(--shadow-color-mitmachen), -1px -1px 0px var(--shadow-color-mitmachen), -1px -2px 0px var(--shadow-color-mitmachen), -1px -3px 0px var(--shadow-color-mitmachen);


}

section.mitmachen div.mitmachen-button{
	display: flex;
	grid-gap: 15pt;
	margin-bottom: 15pt;
	flex-wrap: wrap;
}


/* ------ F O O T E R -------------*/

footer{
	background: var(--bg-color-95-5);
	padding: var(--main-space);
	border: var(--dev-border);
	display: flex;
	justify-content: space-between;
	/*align-self: center;*/
}

.footer-right, .footer-left{
	padding-top: 25pt;
}


footer p.website-slogan{
	margin: 90px 0 30px 0;
	color: #777;
	font-size: 10pt;
}

.footer-right{
	display: flex;
	flex-flow: column;
}

.footer-nav{
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom: var(--main-space);
	grid-gap: 20px;
}

.footer-nav a{
	color: #777;
}

#theme_changer{
	padding: 0;
	position: relative;
}

#theme_changer_icons{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

#theme_changer_icons span{
	cursor: pointer;
}

#theme_changer_icons span:hover{
	transform: scale(1.1);
	transition: 0.4s;
}

#theme_changer_use{
	transition: none;
	color: var(--global-black);
}

#theme_changer_caret{
	position: relative;
	bottom: 0.1em;
}

#theme_changer_dropdown{
	border: var(--global-border-grey);
	position: absolute;
	right: 0;
	border-radius: 4px;
	background-color: var(--bg-color-90-10);
	animation: theme_changer_animation .3s forwards cubic-bezier(.1, .4, .4, .9);

}

.theme_changer_menuitem{
	margin: 0.3em;
	padding: 0.4em 0.7em 0.3em 0.7em;
	cursor: pointer;
	border-radius: 4px;
	display: flex;
	grid-gap: 0.7em;
	width: 7em;
	color: var(--global-black);
}

.theme_changer_menuitem:hover{
	background: linear-gradient(120deg, var(--color1) 20%, var(--color3));
	color: white;
}

.theme_changer_current{
	background: linear-gradient(120deg, var(--color1) 20%, var(--color4));
	color: white;
}

.theme_changer_menuitem span, .theme_changer_current span{
	color: inherit;
}

@keyframes theme_changer_animation {
    0% {
        top: 1.2em;
        transform: scale(.92);
        opacity: 40%;
    }
    70% {
        opacity: 100%;
    }
    100% {
        top: 1.5em;
        transform: scale(1);
    }
}

/* -----------W A S   I S T   T A U ? -------- */

section.was-ist-tau div.was-ist-tau-container{
	padding: calc(var(--main-space)*0.7) var(--main-space) calc(var(--main-space)*0) var(--main-space);
	border-radius: var(--global-border-radius);
	border: var(--global-border-grey);
	}

div.was-ist-tau-content{
	min-height: 60vh;
	display: flex;
	flex-flow: column;
	justify-content: center;
	grid-gap: 3vh;
	margin-bottom: var(--global-grid-gap);
	line-height: clamp(150%, 4vh, 200%);
}
.was-ist-tau li{
	margin-top: clamp(1em, 20vh, 1em);
}

.was-ist-tau li {
    font-size: clamp(1em, 1.6vh, 1.1em);
}

.was-ist-tau-content{
	
	background: var(--bg-color-100-0);
	color: var(--font-color-black);
}

section.was-ist-tau-intro{
	display: flex;
	flex-flow: column;
	justify-content: center;
	padding: var(--main-space);
	
	background: var(--bg-color-100-0);
	
	border-radius: var(--global-border-radius);
	border: var(--global-border-grey);	
}

section.was-ist-tau p{
	line-height: 150%;
	margin-bottom: 0;
}

section.was-ist-tau h2,
section.was-ist-tau h1{
	line-height: 150%;
	margin-bottom: -0.1em;
	margin-top: 0;
}

section.was-ist-tau-intro h1{
	font-size: x-large;	
}

section.was-ist-tau h2{
	font-size: xx-large;
}

div.was-ist-tau-content{
	font-size: large;
}

section.was-ist-tau p {
	text-align: justify;
}


section.was-ist-tau li{
	padding-bottom: 6pt;
	list-style-position: outside;
}

section.was-ist-tau ul{
	padding-left: calc(var(--main-space) - 5px);
}


.bg-purple{
	background: var(--color1);
	color: white;
}

.bg-purple h2{
	color: white;
}

.bg-purple ul{
	color: white;
}

section.mitmachen-was-ist-tau{ 
	color: white;
	display: flex;
	flex-flow: column;
	grid-gap: 10pt;
	padding: calc(var(--main-space)*1.6);
	--shadow-color-mitmachen: white;
	background: var(--color1) url("assets/tau-logo (nur tau gedreht) - white.svg") 95% no-repeat;
	text-align: center;
	}


section.mitmachen-was-ist-tau h2{
	
	color: white;
	font-size: xx-large;
	line-height: 160%;
	text-shadow: 	3px 0px 0pt var(--color1), 3px 1px 0px var(--color1), 3px 2px 0px var(--color1), 3px 3px 0px var(--color1), 3px -1px 0px var(--color1), 3px -2px 0px var(--color1), 3px -3px 0px var(--color1),
					2px 0px 0pt var(--color1), 2px 1px 0px var(--color1), 2px 2px 0px var(--color1), 2px 3px 0px var(--color1), 2px -1px 0px var(--color1), 2px -2px 0px var(--color1), 2px -3px 0px var(--color1),
					1px 0px 0pt var(--color1), 1px 1px 0px var(--color1), 1px 2px 0px var(--color1), 1px 3px 0px var(--color1), 1px -1px 0px var(--color1), 1px -2px 0px var(--color1), 1px -3px 0px var(--color1),
					0px 0px 0pt var(--color1), 0px 1px 0px var(--color1), 0px 2px 0px var(--color1), 0px 3px 0px var(--color1), 0px -1px 0px var(--color1), 0px -2px 0px var(--color1), 0px -3px 0px var(--color1),
					-3px 0px 0pt var(--color1), -3px 1px 0px var(--color1), -3px 2px 0px var(--color1), -3px 3px 0px var(--color1), -3px -1px 0px var(--color1), -3px -2px 0px var(--color1), -3px -3px 0px var(--color1),
					-2px 0px 0pt var(--color1), -2px 1px 0px var(--color1), -2px 2px 0px var(--color1), -2px 3px 0px var(--color1), -2px -1px 0px var(--color1), -2px -2px 0px var(--color1), -2px -3px 0px var(--color1),
					-1px 0px 0pt var(--color1), -1px 1px 0px var(--color1), -1px 2px 0px var(--color1), -1px 3px 0px var(--color1), -1px -1px 0px var(--color1), -1px -2px 0px var(--color1), -1px -3px 0px var(--color1);

}

section.mitmachen-was-ist-tau div.mitmachen-was-ist-tau-button{
	display: flex;
	grid-gap: 15pt;
	margin-bottom: 15pt;
	flex-wrap: wrap;
	justify-content: center;
	}

section.mitmachen-was-ist-tau a{
	min-width: 200px;
	width: 20%
}

/* ---------- S T A N D A R D - S E I T E -------------*/

.regular-container{
	padding: var(--main-space);
	background: var(--bg-color-100-0);
	display: flex;
	flex-flow: column;
	
	
	border-radius: var(--global-border-radius);
	border: var(--global-border-grey);

}

.regular-section{
	display: flex;
	flex-flow: column;
}

/* ---------- G E N E R A L ------------*/

h1, h2, h3{
	font-family: Libre-Baskerville, Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-weight: lighter;
	color: var(--font-color-black);
}


p{
	font-size: 1em;
	line-height: 120%;
	text-align: justify;
	color: var(--font-color-black);
}

ul{
	color: var(--font-color-black);
}

.weighted-name{
	font-family: Archivo-Black, Archivo, Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}

a{
	color: var(--color1);
}

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

.button,
.button-color3,
.button-color4{
	padding: 10pt 15pt 10pt 15pt;
	background: var(--color1);
	color: white;
	border-radius: 7px;
	text-decoration: none;
	font-family: Libre-Baskerville, Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-weight: 100;
	font-size: 10pt;	
}

.button-color3{
	background: var(--color3);
}

.button-color4{
	background: var(--color4);
}

.button:hover{
	color: white;
	animation: var(--button-animation);
	animation-duration: var(--button-animation-timing);
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.1, 0.6, 0.4, 0.9);
	}

@keyframes button-animation{
	100%{
		background: var(--color2);
	}
}

.button-color3:hover{
	color: white;
	animation: var(--button-animation-color3);
	animation-duration: var(--button-animation-timing);
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.1, 0.6, 0.4, 0.9);
}


@keyframes button-animation-color3{
	100%{
		background: var(--color3-brighter);
		color: white;
	}
}

.button-color4:hover{
	color: white;
	animation: var(--button-animation-color4);
	animation-duration: var(--button-animation-timing);
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.1, 0.6, 0.4, 0.9);
}

@keyframes button-animation-color4{
	100%{
		background: var(--color4-brighter);
		color: white;
	}
}

.button:active,
.button-color3:active,
.button-color4:active{
	color: var(--font-color-white);
	background: var(--global-black);
	animation: var(--button-animation-click);
	animation-duration: 0.5s;
	animation-fill-mode: backwards;
	animation-timing-function: cubic-bezier(0.0, 1.0, 1.0, 1.0);
}

@keyframes button-animation-click{
		0%, 100%{
		background: var(--global-black);
	}
}



.zoom-in:hover{
	animation: var(--zoom-in) 0.4s forwards;
}

@keyframes zoom-in{
	
	100%{
		transform: scale(1.05);
	}
}




.zoom-in-small:hover{
	animation: var(--zoom-in-small) 0.4s forwards;
}

@keyframes zoom-in-small{
	
	100%{
		transform: scale(1.0125);
	}
}


.zoom-in-x-small:hover{
	animation: var(--zoom-in-x-small) 0.4s forwards;
}

@keyframes zoom-in-x-small{
	
	100%{
		transform: scale(1.0075);
	}
}

/*
.mitglied-page{
	display: none;
}
*/

/* ---------- L O A D E R -------------*/
.l1{
	
	border: 2px solid var(--color1);
	border-radius: 100%;
	perspective: 200px;
	transform: rotateX(45deg) rotateY(25deg);
	transform-style: preserve-3d;
	aspect-ratio: 1/1;
	height: 100%;
	max-height: 80px;
	
}

.l1::before,
.l1::after{
	animation: loader-animation 1s cubic-bezier(0.5, 0.575, 0.565, 1) infinite;
}

.l1::before{
	--inner-size: 7px;
	width: var(--inner-size);
	aspect-ratio: 1/1;
	background: var(--color1);
	border-radius: 50%;
	top: calc(50% - var(--inner-size) / 2);
	left: calc(50% - var(--inner-size) / 2);
		
}

.l1::after{
	width: 60%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	border: 1px solid var(--color1);
	animation-delay: -700ms;

}

@keyframes loader-animation{
	0%, 100%{
		transform: translateZ(calc(33px * -1)) scale(0.5);
	}
	55%{
		transform: translateZ(calc(33px));
	}
}

.loader::before,
.loader::after{
	content:'';
	position: absolute;
	
}

.loader{
	
	display: block;
	position: relative;

	display: grid;
	place-items: center;
	grid-template-columns: 1fr;

	grid-column: 1;
	grid-row: 1;
	margin-left: auto;
	margin-right: auto;
	
	z-index: 0;
	
}

i.image-container{
	display: grid;
	background: var(--bg-color-100-0);
	border-radius: var(--global-border-radius);
	align-items: center;	
}
i.image-container img{
	grid-column: 1;
	grid-row: 1;
	z-index: 1;		
}

/* ---------- F O N T S ------------*/

@font-face{ 
	font-family: Archivo-Black;
	src: url(assets/fonts/Archivo-Black.ttf);
}

@font-face{ 
	font-family: Archivo;
	src: url(assets/fonts/Archivo-Bold.ttf);
	font-weight: bold;
}

@font-face{ 
	font-family: Archivo; 
	src: url(assets/fonts/Archivo-Regular.ttf);
	font-weight: normal;
}

@font-face{ /*Schriftart definieren bzw. einbetten*/
	font-family: Archivo-Light; /*Wir benennen hier die Schriftfamilie selber*/
	src: url(assets/fonts/Archivo-Light.ttf);
	font-weight: normal;
}

@font-face{ /*Schriftart definieren bzw. einbetten*/
	font-family: Libre-Baskerville; /*Wir benennen hier die Schriftfamilie selber*/
	src: url("assets/fonts/LibreBaskerville-Regular.ttf");
	font-weight: normal;
}

/*Style Changer*/
#style-change-button{
	border: 2px var(--color1) solid;
	width: 2.3em;
	height: 1em;
	display: flex;
	align-items: center;
	
	border-radius: 100px;
	cursor: pointer;
	
	position: absolute;
	margin-right: 1em;
	margin-top: 1em;
	right: 0;
	top: 0;
	
	background: var(--bg-color-100-0);
}

#style-change-mover{
	float: left;
	border: 1px var(--color1) solid;
	
	height: calc(100% - 1px);
	aspect-ratio: 1/1;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100px;
	position: relative;
	background: var(--bg-color-80-30);
	color: var(--font-color-black);
	
}
	




.dark-mode{
	--div-border-color: hsl(0,0%,18%);
	--global-border-color: hsl(0,0%,28%);
	
	--bg-color-100-x: hsl(0, 0%, 2%);
    --bg-color-100-y: hsl(0, 0%, 5%);
	--bg-color-100-0: hsl(0,0%,11%);
	--bg-color-100-5: hsl(0,0%,13%);
	--bg-color-100-10: hsl(0,0%,18%);
	--bg-color-100-15: hsl(0,0%,23%);

	--bg-color-95-x: hsl(0, 0%, 2%);
    --bg-color-95-y: hsl(0, 0%, 5%);
	--bg-color-95-0: hsl(0,0%,11%);
	--bg-color-95-5: hsl(0,0%,13%);
	--bg-color-95-10: hsl(0,0%,18%);
	--bg-color-95-15: hsl(0,0%,23%);
	
	--bg-color-90-x: hsl(0, 0%, 2%);
    --bg-color-90-y: hsl(0, 0%, 5%);
	--bg-color-90-0: hsl(0,0%,11%);
	--bg-color-90-5: hsl(0,0%,13%);
	--bg-color-90-10: hsl(0,0%,18%);
	--bg-color-90-15: hsl(0,0%,23%);
	
	--bg-color-80-30: hsl(0,0%,30%);
	
	--bg-color-nav-start: hsla(0, 0%, 30%, 0%);
    --bg-color-nav: hsla(0, 0%, 30%, 40%);

	--color1: hsl(244,39%,46%); /* 4% mehr Sättigung, 8% heller, */
	--color2: var(--color3); /* Akzentfarbe wird color3, da sie weniger wie besuchter Link aussieht).*/

	/* Elemente, die heller als --color1 müssen*/
	nav ul li:active{
		color: hsl(244,39%,55%);
	}
	div.pack_mit_an a
	{
 		--color1: hsl(244,39%,55%); /* Links in Text heller als --color1 */;
	}
	p a{
		color: hsl(244,39%,58%); /* Links in Text heller als --color1 */
	}
	/* Elemente, die anderes Farbschema benötigen */
	p a:hover,
	.footer-nav a:hover{
		color: var(--color4); /* Wird blau*/
	}
	p a:active,
	.footer-nav a:active{
		color: var(--color1);
	}
	.contact:active{
		color: white;
	}


	--global-black: white;
	--global-white: black;
	
	--font-color-black: white;
	--font-color-white: black;
	
	--font-color-white: #000;
	--font-color-black: #fff;
	
	--contact-hover-background: black;
	--contact-hover-text: white;
	
	--contact-click-background: var(--color1);
	--contact-click-text: white;

	--invert-img: 100%;

	--mitmachen-background:	url("assets/tau-logo (nur tau gedreht) - white.svg") no-repeat 95%;

	--nav-ul-li-color: var(--font-color-black);
}

header img, footer img{
	filter: invert(var(--invert-img));
}

@media (prefers-reduced-motion) {
	:root{
	--button-animation-click: none;
	--logo-hover: none;
	--pack-mit-an-animation: pack-mit-an-animation;
	--workshop-zoom: none;
	--button-animation: button-animation;
	--button-animation-color3: button-animation-color3;
	--button-animation-color4: button-animation-color4;
	--zoom-in-small: none;
	--zoom-in: none;
	--zoom-in-x-small: none;
		
	--button-animation-timing: 0s;
	--pack-mit-an-animation-timing: 0s;
	}
}


/* --------- M E D I A   Q U E R Y ------------------------------------------------------*/

@media screen and (max-width:640px){ /*M O B I L E mobile*/
	body {
		width: 100%;
		--global-border-radius: 0px;
		--header-padding: var(--main-space);
		}

	header{
		margin: 1em 0em;
	}
	
	div.pack_mit_an {
		padding-top: 5px;
		padding-bottom: 5px;
	}


    nav {
        width: 100vw;
        height: 100vh;
        background: var(--bg-color-nav);
        position: fixed;
        top: 0;
        right: 0;
        display: flex;
        z-index: 1;
        align-items: flex-start;
        margin: 0;
        padding: 0;
        animation: nav_fade_in 0.2s forwards cubic-bezier(0.1, 0.4, 0.4, 0.9);
		max-width: 100%;
    }
    nav ul {
        display: flex;
        flex-flow: column;
        align-items: end;
        height: 100%;
        justify-content: start;
        margin-top: 0;
        padding: var(--main-space);
        padding-top: 0.7em;
        background: linear-gradient(var(--bg-color-95-0) 70%, var(--bg-color-90-x) 100%);
        min-width: 40vw;
        max-width: 50vw;
        font-size: 120%;
        animation: slide_in 0.35s forwards cubic-bezier(0.1, 0.4, 0.4, 0.9);
    }
	
	nav ul li {
		padding: 1em 0;
	}

	nav ul li.contact{
		margin: 1em 0;
		padding: 0.6em 1.4em;
	}

	#navbar_close_button{
		transition: 0.3s;
		animation: rotate_180_deg 0.4s forwards cubic-bezier(0.1, 0.6, 0.4, 0.9);
	}
	#navbar_close_button:hover{
		transform: scale(1.35);
		transition: 0.4s;
	}

	@keyframes rotate_180_deg{
		100%{
			rotate: 180deg;
		}
	}
	
	@keyframes slide_in {
        0% {
            opacity: 60%;
            height: 0px;
        }
        100% {
			overflow: auto;
            opacity: 100%;
            height: 100%;
        }
    }
	
	@keyframes slide_out {
		0% {
			overflow: hidden;
			opacity: 100%;
			height: 100%;
		}
		99% {
			opacity: 100%;
			height: 0%;
		}
		100%{
			opacity: 0%;
		}
	}

    @keyframes nav_fade_in {
        0% {
            background: var(--bg-color-nav-start);
        }
    	100% {
            background: var(--bg-color-nav);
        }
    }


	section.was-ist-tau-intro,
	section.was-ist-tau div.was-ist-tau-container,
	div.was-ist-tau-content,
	section.workshop,
	section.mitmachen,
	div.regular-container,
	section.intro div.intro-text,
	section {
		border-left: none;
		border-right: none;
	}
	
	section.intro{
		grid-template-columns: 1fr;
		height: 100vw;
	}
	
	section.was-ist-tau-intro{
		min-height: 40vh;
		flex: auto;
	}
	
	footer{
		flex-flow: column;
	}
	
	.footer-right{
		flex-flow: row;
		justify-content: space-between;
	}

	footer ul.footer-nav{
	margin-top: 0;
	margin-bottom: 60px;
	padding: 0;
	}
	
	.footer-left{
	order: 1;
	}

	#theme_changer{
		font-size: 120%;
	}
	
	.theme_changer_menuitem{
		margin: 0.36em;
		padding: 0.48em 0.84em 0.36em 0.84em;
		width: 8.4em;
	}


	.hide-mobile{
		display: none;
	}
	
	:root{
	--workshop-contact-a-width: 100%;
	}
	
	div.pack_mit_an{
	--global-border-radius-small: 0px;
	}

}


@media screen and (min-width:640px){ /*T A B L E T */
	body {
		width: 95%;
	}
	
	div.workshops-grid{
	grid-template-columns: 1fr 1fr;
	}
	
	.hide-desktop{
		display: none;
	}
	
	section.intro{
		grid-template-columns: 1fr 1fr;
	}
	
	section.was-ist-tau-intro{
		font-size: large;
		min-height: 40vh;
	}
	

}

@media screen and (max-width:1024px){
	html{
	--workshop-contact-a-width: 50%;
	}
	
	/* ROUND STYLE */
	div.pack_mit_an{
	--header-padding: var(--main-space);	
	background-color: var(--color1);
	}
	
	
	div.pack_mit_an p:hover,
	div.pack_mit_an p:active{
	background-color: var(--color1-brighter);
	--pack-mit-an-animation: pack-mit-an-animation-lighter;
	}

	
	div.pack_mit_an p{
		--color1: white;
	}

	section.was-ist-tau div.was-ist-tau-container{
		padding-top: 3em;
		padding-bottom: 3em;
	}
	
}

@media screen and (min-width:1024px){ /*D E S K T O P*/
	
	body {
		width: 70%;
		min-width: 973px;
		max-width: 1281px;
		}
	
	div.workshops-grid{
	grid-template-columns: 1fr 1fr 1fr;
	}

}

@media screen and (min-width:1830px) {
	body {
		/*width: 1281px;*/
	}
}