/* CSS Document */

html{
	font-family: Gill Sans, "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	
	height: 100%;
	margin: 0;
	padding: 0;

	--main-space: 25px;
	
	/*BLUE*//*
	--color1: hsl(196, 67%, 45%); 
	--color2: #254ABE;
	--color3: #25BE9A;
	--color4: #3DB0D9;
	--color5: #BE4D25;
	--color6: hsl(180, 80%, 45%);*/

	--color1: hsl(166, 100%, 25%); 
	--color2: hsl(170, 87%, 28%);
	--color3: hsl(143, 100%, 35%);
	--color4: hsl(156, 100%, 15%);
	--color5: #000;
	--color6: hsl(180, 80%, 45%);
	

	--color1-brighter: hsl(166, 95%, 30%);
	--color2-brighter: #254ABE;
	--color3-brighter: #25BE9A;
	--color4-brighter: #3DB0D9;
	--color5-brighter: hsl(64, 30%, 43%);

	--global-black: black;
	
	--global-border-radius: 10px;
	--global-border-radius-small: 5px;
	
	--global-grid-gap: 25px;
	
	--dev-border: none;
	--global-border-desktop: 1px solid var(--global-border-color);
	--global-border-mobile: none;
	--global-border-color-bottom: var(--global-border-color);
	--border-body: none;
	
	--background-color: #fff;
	--background-color2: hsl(0,0%,95%);
	--background-color3: hsl(0,0%,90%);
	--background-color4: #fff;
	--background-color5: #fff;
	--background-color6: var(--background-color2);
	
	--bg-color-100-0: hsl(60,50%,99%);	
	--bg-color-100-3: hsl(60,50%,99%);	
	--bg-color-100-5: hsl(60,50%,99%);
	--bg-color-100-10: hsl(60,50%,99%);
	
	--bg-color-97-0: hsl(60,10%,96%);
	--bg-color-97-3: hsl(60,10%,96%);
	--bg-color-97-5: hsl(60,10%,96%);
	--bg-color-97-10: hsl(60,10%,96%);	
	
	--bg-color-95-0: hsl(60,10%,94%);
	--bg-color-95-3: hsl(60,10%,94%);
	--bg-color-95-5: hsl(60,10%,94%);
	--bg-color-95-10: hsl(60,10%,94%);
	
	--bg-color-90-0: hsl(60,10%,90%);
	--bg-color-90-3: hsl(60,10%,90%);
	--bg-color-90-5: hsl(60,10%,90%);	
	--bg-color-90-9: hsl(60,10%,90%);
	--bg-color-90-10: hsl(60,10%,90%);
	--bg-color-90-15: hsl(60,10%,90%);

	--bg-color-80-30: hsl(40,10%,80%);
	--bg-color-80-35: hsl(40,10%,80%);
	--bg-color-85-30: hsl(40,10%,85%);
	--bg-color-85-35: hsl(40,10%,85%);
	
	--bg-color-100-5-a: hsla(60,50%,110%,40%);
	
	--background-color-body: var(--background-color6);
	--background-color-pack-mit-an: var(--background-color6);
	--background-color-generic-div: var(--background-color);
	
	--background-color-workshop: var(--background-color3);
	--background-color-workshop-div: var(--background-color2);
	
	--background-color-footer: var(--background-color6);
	
	--div-border-color: #ddd;
	--global-border-color: #ddd;
	
	--font-color-white: hsl(0,0%,100%);
	--font-color-black: hsl(0,0%,0%);
	
	background-color: var(--bg-color-100-0);

	--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: var(--main-space);
	
	--workshop-contact-a-width: 27%;
}

body{
	--body-width: 100%;
	display: flex;
	flex-direction: column;
	/*width: var(--body-width);*/
	
	margin: 0;
	
	align-items: stretch;
	height: 100%;
	position: relative;
	
	background-color: var(--bg-color-100-0);
	border-left: var(--border-body);
	border-right: var(--border-body);
		
}

div.body-wrapper{
	display: grid;
	
	flex: auto;
		
	grid-template-columns: min-content auto;
	grid-template-rows: min-content 1fr;
	
	overflow: auto;
	position: relative;
	
	background: linear-gradient(
		/*var(--bg-color-90-0) 0%,		
		var(--bg-color-97-5) 1%,*/
		var(--bg-color-97-0) 99%, 
		var(--bg-color-90-0) 100%);
}



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

header{
	display: flex;
	flex-flow: column;
	
	width: calc(12em + 6vw);

	overflow-x: hidden;
	overflow-y: auto;

	background-color: var(--bg-color-100-5);	

	background: 
			

		
		linear-gradient(
		transparent 99%,
		var(--bg-color-90-0) 100%),
		
		linear-gradient(
		/*var(--bg-color-90-0) 0%,		
		var(--bg-color-100-5) 1%,*/
		 /*var(--bg-color-100-5) 50%,*/
		var(--bg-color-100-5), 
		var(--bg-color-97-0) 100%);
	
	background-size: 100%;
	box-shadow: 0px 0px 0.4em 0px var(--bg-color-90-0);
	margin-right: 0.4em;
	
	grid-row: 1 / span 2;
}

header img{
	--img-size: 35px;
	height: var(--img-size);
	fill: var(--color1);
	filter: invert(var(--invert-img));
	
}

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

.website-logo a{
	text-decoration: none;
}

.website-name-logo{
	font-weight: bold;
			color: rgb(0,0,0,0.0);
			background: conic-gradient(at 50% 40%,
			var(--color1) -10%, 
			var(--color2) 12%, var(--color1) 33%, 
			var(--color4) 33%, var(--color3) 55%, 
			var(--color1) 55%, var(--color4) 70%, 
		   var(--color4) 70%, var(--color1) 87%, 
			var(--color4) 87%);
			background-size: 50% 100%;
			background-clip: text;
			-webkit-background-clip: text;

	
	font-size: clamp(2.7em,calc(1em + 1.8vw),3.2em);
	
	--divide: 2;
	
	padding: calc(var(--main-space)/2) calc(var(--main-space)/1);
	
	margin: 0;
	
}

.website-name-logo: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{
	border: var(--dev-border);
	font-size: 1.1em;
	padding: 0 calc(var(--main-space)/3);
}

nav a{
	text-decoration: none;
	
}

nav ul{
	display: flex;
	flex-flow: column;
	padding: 0;
	list-style: none;
}

nav ul li{
	padding: 0.7em;
	color: var(--font-color-black);
	border-radius: 8px;
}

nav ul li:hover{
	background: 
	linear-gradient(
		to bottom,
		var(--bg-color-90-10),
		var(--bg-color-90-9)
	)
	
	
/*	background: linear-gradient(to right, var(--color3) 0%, var(--color1), var(--color2));
	color: white;*/
}

nav ul li:active{
	background: var(--bg-color-80-30);
}

.nav-current{
	background: var(--bg-color-90-10); 
/*	color: var(--color1);*/
}

.nav-current:hover{
	background: var(--bg-color-85-30);
}

.nav-current:active{
	background: var(--bg-color-80-35);
}

.nav-button{

	/*background: radial-gradient(ellipse at 50% 0%,
			var(--color1) -100%, rgba(240,240,240,0.5) 90%, var(--color1) 93%
	);*/
	background-color: var(--color1);
	background-size: 100% 55%;
	background-repeat: no-repeat;
	padding: 0.5em 1.3em;
	border-radius: 25px;
	color: white;
	
}

.nav-button:hover{
	text-decoration: none;
	background: black;
	color: white;
}

.nav-button:active{
	text-decoration: none;
	background: white;
	color: black;
	box-shadow: 0px 0px 0px 1px black;
	}

.nav-button-3d{
	/*background: radial-gradient(ellipse at 50% 0%,
			var(--color1) -100%, rgba(240,240,240,0.5) 90%, var(--color1) 93%
	);*/
	background-color: var(--color1);
	background-size: 100% 55%;
	background-repeat: no-repeat;
	padding: 0.5em 1.3em;
	border-radius: 25px;
	color: white;
	box-shadow: 3px 3px 0px 0px #111;
	
}

.nav-button-3d:hover{
	text-decoration: none;
	background: var(--color1-brighter);
	color: white;
	
	box-shadow: 3px 3px 0px 0px #111;

}

.nav-button-3d:active{
	text-decoration: none;
	/*background: var(--contact-click-background);
	color: var(--contact-click-text);*/

	position: relative;
	top: 3px;
	left: 3px;
	box-shadow: none;
	}

.navitem_container{
	position: relative;
}

.subnav{
	display: none;
	position: absolute;
	overflow: visible;
 /* Position it to the right of the parent container with some margin */
	width: calc(12em + 6vw); /* Ensure width is auto to prevent overflow */
	transform: translate(calc(9.5em + 6vw), -2.5em);
	border: 1px solid red;
	z-index: 100;
}

 .navitem_container:hover > .subnav{
	display: inline;
}


/*
https://css-tricks.com/popping-hidden-overflow/
*/

/* ---------- MENU BAR -------------- */


div.menubar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.1rem var(--main-space);
	background: var(--bg-color-100-5-a);
	flex-wrap: wrap;
	
	grid-row: 1;
	grid-column: 2;
	z-index: 1;
	
	

	margin-left: var(--main-space);
	margin-right: 2em;
	position: relative;
	top: 0.5em;
	border-radius: 10px;
	
	box-shadow: 0px 0px 0.4em 0em var(--bg-color-90-0);
	
	backdrop-filter: blur(10px);
	
	background: 
		-webkit-linear-gradient();
	
}


div.menubar-left{
	display: flex;
	grid-gap: 0.5em;
}

div.menubar ul{
	list-style: none;
	display: flex;
	gap: 15px;
	padding: 0;
	color: var(--font-color-black);
	margin-left: auto;
}

div.menubar ul li{
	padding: 0;
}

div.menubar ul a{
	text-decoration: none;
}

div.menubar ul a:hover{
	text-decoration: underline;
}

main{
	border: var(--dev-border);
	width: 100%;
	display: flex;
	flex-direction: column;

	/*padding: var(--main-space);*/
	column-gap: var(--main-space);
	
	grid-row-gap: var(--global-grid-gap);
	
	height: 100%;
	overflow: auto;
	
}

body::-webkit-scrollbar{
	display: none;
}

div.main-area{	
	width: 100%;
		background: linear-gradient(
		/*var(--bg-color-90-0) 0%,		
		var(--bg-color-97-5) 1%,*/
		var(--bg-color-97-0) 99%, 
		var(--bg-color-90-0) 100%);
	overflow: auto;
	height: 100%;
	
	grid-row: 1 / span 2;
	grid-column: 2 / span 1;
	z-index: 0;
	
}

div.main-container{
	width: 100%;
	max-width: 1480px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 3.5em;
	
	height: 100%;
}

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


section{
	flex: auto;
	border-radius: var(--global-border-radius);
	}
	
@keyframes slight-rotate{
	100%{
		transform: rotate(-0.75deg);
	}
}


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

footer{
	
	background: 
	
	linear-gradient(
	to bottom,
	var(--bg-color-100-5) 70%,
	var(--bg-color-97-3) 120%
	);
	padding: calc(var(--main-space)/2) var(--main-space);
	border: var(--dev-border);
	border-top: 3px solid var(--bg-color-100-0);
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*align-self: center;*/
	

}

footer::-webkit-scrollbar{
	display: none;
}

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

.footer-right{
	margin-left: auto;
	padding-right: var(--main-space);

	border-right: 1px solid #777;
}

footer ul.footer-nav{
	list-style: none;
	display: flex;
	grid-gap: 20px;
	margin: 0;
}

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

footer ul.footer-nav a:hover{
	text-decoration: none;
}

#theme_changer{
	padding: 0;
	margin: 0 var(--main-space);
	align-self: center;
}

@keyframes turnScaleOut {
	to{
		transform: scale(0.5);
		rotate: 90deg;
		opacity: 0.5;
	}
}

@keyframes turnScaleIn {
	0%{
		transform: scale(0.5);
		rotate: -90deg;
		opacity: 0.5;
	}
	to{
		transform: scale(1.0);
		rotate: 0deg;
		opacity: 1;
	}
}

 #theme_changer_svg{
	padding: 0;
	margin: 0;
}

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

.regular-container{
	padding: var(--main-space) calc(var(--main-space)*2);

	display: flex;
	flex-flow: column;
	flex: auto;
	
	border-radius: 0px;
	

	/*border-bottom: 1px solid var(--global-border-color-bottom);*/

	margin: 0;
	height: 100%;
}
 	
.regular-section{
	display: flex;
	flex-flow: column;
	height: 100%;
}


/* ---------- KONTAKTFORMULAR ------------------- */
#kontakt-headline{
	margin-top: 5rem;
}

form.kontaktformular{
	--input-border-width: 2px;
	--grid-gap: 1em;
	--input-padding: 1em;
	width: 90%;
	max-width: 35rem;
	display: flex;
	flex-flow: column;
	margin-left: auto;
	margin-right: auto;
	background: var(--bg-color-95-5);
	box-shadow: 0px 0px 1em 0.5em var(--bg-color-90-0);
	padding: var(--grid-gap);
	border-radius: 5px;
}

div.vorname-nachname-wrapper{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 4.5em;
	grid-gap: var(--grid-gap);
}


div.vorname input,
div.nachname input{
	width: calc(100% - var(--grid-gap) * 2 - var(--input-padding) - var(--input-border-width));
}

div.email{
	height: 4.5em;
}

div.email input{
	width: calc(100% - var(--grid-gap) * 2 - var(--input-padding) - var(--input-border-width));
}

input{
	border-radius: 25px;
	padding: 0.4em var(--input-padding);
	border-top: var(--input-border-width) solid var(--color1);
	border-left: var(--input-border-width) solid var(--color1);
	border-bottom: var(--input-border-width) solid hsl(180, 100%, 27%);
	border-right: var(--input-border-width) solid hsl(180, 100%, 27%);
}

input:hover{
	border: var(--input-border-width) solid hsl(166,100%,35%);
	box-shadow: 0px 0px 0.2em 0.1em hsla(166,100%,25%,30%);
	transition: 0.02s;
	background: hsl(0,0%,97%);
}

input:focus{
	padding: 1.0em var(--input-padding);
	transition: 0.4s;
	border-radius: 20px;
	outline: 0;
	border: var(--input-border-width) solid hsl(166,100%,35%);
	box-shadow: 
		0px 0px 0.5em 0.2em hsla(166,100%,25%,30%),
		0px 0px 0.5em 0.2em hsla(0,0%,97%,15%);
}




input[type="submit"]{
	transition: 0;
	padding: 0.4em calc(var(--input-padding)*4);
	width: min-content;
	margin: var(--input-padding) auto;
	
	background: hsl(166, 100%, 25%); /* 166 */
	border-top: hsl(166, 100%, 30%) 0.12em solid;
	border-bottom: hsl(166, 100%, 18%) 0.0em solid;

	outline: hsl(166, 100%, 20%) solid 2px;
	box-shadow: 0px 0px 2px 2px hsl(166, 100%, 25%);
	border-left: 0;
	border-right: 0;
	
	color: #eee;
	font-weight: 600;
	font-family: Gill Sans, "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

input[type="submit"]:hover{
	transition: 0.05s;
	cursor: pointer;
	background: hsl(166, 100%, 22%); /* 166 */
	border-top: hsl(166, 100%, 27%) 0.12em solid;

	/*border-bottom: hsl(166, 100%, 18%) 0.04em solid;*/
	outline: hsl(166, 100%, 20%) solid 2px;
	box-shadow: 0px 0px 2px 2px hsl(166, 100%, 25%);
	border-left: 0;
	border-right: 0;
}

input[type="submit"]:active{
	transition: 0s;
	padding-top: 0.36em;
	
	background: hsl(166, 100%, 12%); /* 166 */
	border-top: hsl(166, 100%, 8%) 0.04em solid;
	
	border-bottom: hsl(166, 100%, 27%) 0.12em solid;
	outline: hsl(166, 100%, 20%) solid 2px;
	box-shadow: 0px 0px 2px 2px hsl(166, 100%, 25%);
	border-left: 0;
	border-right: 0;
	
	 
}

p.error-text{
	height: 1em;
	color: red;
	
}


/* ------------ M I T G L I E D   W E R D E N ----------- */

#mitglied-werden-form{
	display: flex; /* Für Submit-Button*/
	flex-flow: column;
}

#mitglied-werden-wrapper{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.mitglied-werden-form-wrapper {
	color: var(--font-color-black);
	display: flex;
	flex-flow: column;
	border-radius: var(--global-border-radius-small);
	border: 0px white solid;
	background-color: var(--bg-color-100-10);
	padding: var(--global-grid-gap);
}

.mitglied-werden-form-category{
	display: flex;
	flex-flow: column;
	padding-bottom: 1em;
	grid-gap: 0.3em;
}
 
/*Elemente u. a. mit Checkboxen, die als Reihe dargestellt werden sollen */
#mitglied-werden-form-ermaessigung,
#mitglied-werden-form-foerdermitglied-label,
#mitglied-werden-form-mitgliedsbeitrag-label,
#mitglied-werden-form-zahlungsintervall {
    flex-flow: row;
	grid-gap: 0.9em;
	align-items: center; /* v. a. für Mitgliedsbeitrag */
}

.mitglied-werden-form-category input{
	padding: 0.6rem;
	border-radius: var(--global-border-radius-small);
	font-size: 0.9em;
	outline: var(--global-black) 1px solid;
	border: none;
}

.mitglied-werden-form-category:hover input,
.mitglied-werden-form-category input:focus{
    outline: var(--color1) 2px solid;
}

.mitglied-werden-form-category input:focus{
	color: black;
}

.mitglied-werden-form-radio:hover,
.mitglied-werden-form-category:hover,
.mitglied-werden-form-category input:hover{
	color: var(--color1);
}

.mitglied-werden-form-radio{
	padding-left: 0.6em;
	padding-right: 0.6em;
}

#mitglied-werden-form-mitgliedsbeitrag-label:hover{
	color: var(--font-color-black); /* Damit kein hover-Effekt entsteht*/
}

.submit-button{
	background-color: var(--color1);
	padding: 0.7em 1.1em;
	border-radius: 3px;
	color: white;
	border: none;
	font-size: 1em;

	margin: 2.5em auto 1em auto;

	width: 100%;

	transition: all 200ms;
}

.submit-button:hover{
	transition: all 200ms;
	text-decoration: none;
	background: var(--color3);
	color: var(--contact-hover-text);
	cursor: pointer;
}

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

#mitglied-werden-form-mitgliedsbeitrag-label input{
	margin-right: 0.5em;
}


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

h1, h2, h3{
	font-family: Segoe, "Segoe UI", "Trebuchet MS", "DejaVu Sans", Verdana, "sans-serif";
	font-weight: normal;
	color: var(--font-color-black);
	margin: 0;
	margin-bottom: 0.5em;
}


p{	
	margin: 0;
	line-height: 120%;
	text-align: justify;
	color: var(--font-color-black);
		
}

span{
	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{
	outline: none;
	border: none;
	font-family: Gill Sans, "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-weight: 600;
	padding: 0.9em 1.2em;
}

.button,
.button-color3,
.button-color4{
	padding: 10pt 15pt 10pt 15pt;
	background: var(--color1);
	color: white;
	border-radius: 7px;
	text-decoration: none;
	font-weight: 100;
	font-size: 10pt;	
	cursor: pointer;
}

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


/* LOADERJS LOADER_JS  */
#page_load{
	animation: page_load 1000ms linear infinite;
}

@keyframes page_load{
	to{
		transform: rotate(360deg);
	}
}
/* ---------- 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{ 
	font-family: Archivo-Light;
	src: url(assets/fonts/Archivo-Light.ttf);
	font-weight: normal;
}

@font-face{ 
	font-family: Libre-Baskerville; 
	src: url("assets/fonts/LibreBaskerville-Regular.ttf");
	font-weight: normal;
} */

@font-face{ 
	font-family: Gill-Sans; 
	src: url("assets/fonts/GIL.TTF");
	font-weight: normal;
}

@font-face{ 
	font-family: Trebuchet MS; 
	src: url("assets/fonts/TREBUCBD.TTF");
	font-weight: bold;
}


/* --------- HIRAGANA LETTERS ----------- */

div.hiragana-wrapper{
	display: grid;
	grid-gap: 7px;
	width: 100%;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 40px;
}


div.hiragana_and_katakana_wrapper{
	grid-gap: 14px 7px;
	max-width: 700px;
}

.five-column{
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.four-column{
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.three-column{
	grid-template-columns: 1fr 1fr 1fr;
}

div.hiragana-div{
	border: 1px solid #ccc;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 5px;
	background: #fff;
	background-color: var(--bg-color-100-0);
	box-shadow: 1px 1px 0px 0px #ccc;
	page-break-inside: avoid;
}

div.hiragana-div:hover{
	animation: hiragana-zoom 0.4s forwards;
}

@keyframes hiragana-zoom{
	
	100%{
		transform: scale(1.1);
	}
}

div.hiragana-empty{
	background: #eee;
	background-color: var(--bg-color-95-5);
	box-shadow: none;
}

div.hiragana-empty:hover{
	animation: none;
}

div.hiragana-special-background{
	background: hsla(0,50%,96%,100%);
}

.hiragana-letter{
	font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: calc(1.6em + 0.5vw);
	display: flex;
	align-items: center;
	white-space: nowrap;
}

.hiragana_and_katakana_wrapper .hiragana-letter{
	font-size: calc(1.4em + 0.5vw);
}

.hiragana-spacer{
	width: 0.5em;
}

.added-latin{
	font-size: 0.7em;
	font-weight: normal;
}

.latin-letter{
	font-weight: 400;
}

.hiragana_and_katakana_wrapper .latin-letter{
	display: none;
}



/* ----------- HIRAGANA END ------------- */

@media print{
	header,
	footer,
	.pack_mit_an,
	div.menubar{
		display: none;
	}
	
	.regular-container,
	.regular-section{
		border: none;
		outline: none;
		overflow: inherit;
		background-color: #fff;
	}
	
	html,
	body{
		background-color: #fff;
	}
	
	.has-page-break{
		page-break-after: always;
	}
	
	h1, h2, h3, p{
		page-break-after: avoid;
	}
	
	div.hiragana-div{
		page-break-inside: avoid;
	}
	
	div.hiragana-div:not(.hiragana-empty){
		background: #fff;
	}
	
	
	
	div.body-wrapper,
	div.main-area,
	main{
		overflow: inherit;
		background-color: #fff;
	}
	
	div.body-wrapper{
		grid-template-columns: auto;
	}

	div.main-area{
		grid-column: 1;
	}
}


/* --------- M E D I A   Q U E R Y ------------------------------------------------------*/
@media screen and (max-width: 640px){ /* only mobile */
	nav{
		width: 100%;
	}
}

@media screen and (max-width:1024px){ /*M O B I L E and tablet*/
	body {
		--main-space: 20px;
		width: 100%;
		border: none;
		}
	
	div.pack_mit_an {
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
	div.body-wrapper{
		grid-template-columns: auto;
		overflow: inherit;
	}
	
	div.menubar{
		grid-row: auto;
		grid-column: auto;
		border-bottom: 1px solid var(--bg-color-95-10);
		
		margin-left: 0;
		margin-right: 0;
		position: inherit;
		border-radius: 0px;
	
		box-shadow: none;
		background: var(--bg-color-100-5);
		
	}
	
	div.main-area{
		grid-row: auto;
		grid-column: auto;
	}
	
	div.main-container{
		padding-top: 0;
	}
	
	.regular-container{
		padding: var(--main-space) calc(var(--main-space)*1);
	}
	
	header{
		width: 100%;
		overflow: inherit;
		flex-flow: row;
		flex-wrap: wrap;
		justify-content: space-between;
		grid-row: 2 / span 1;

		background: 
		linear-gradient(
		var(--bg-color-100-5) 99%,
		var(--bg-color-90-0) 100%)
			;
	}

	#hamburger{
		margin-left: auto;
		padding: 0 var(--main-space);
		align-self: center;
	}

	#hamburger h1{
		margin-bottom: 9px;
	}
		
	nav{
		margin-left: auto;
	}
	
	header img{
		margin-top: 15px;
	}
	
	section.intro{
		grid-template-columns: 1fr;
		height: 100vw;
	}
	
	section.was-ist-tau-intro{
		min-height: 40vh;
		flex: auto;
	}
	
	footer{
		/*flex-flow: column;*/
	}
	
	footer ul.footer-nav{
	margin-top: 0;
	padding: 0;
	}
	
	.footer-left{
	/*order: 1;*/
	
	}
	
	.hide-mobile{
		display: none;
	}
	
	:root{
	--workshop-contact-a-width: 100%;
	}
	
	div.body-wrapper{
		flex-flow: column;
		height: auto;
		grid-template-rows: min-content min-content auto;
	}

	main{
		overflow: inherit;
	}
	
	footer{
		overflow: inherit;
		padding: var(--main-space);
	}
	
	nav ul{
		flex-flow: row;
		justify-content: flex-end;
		align-items: center;
		margin-right: var(--main-space);
		flex-wrap: wrap;
	}

	.nav-current{
		margin: 0 0.1em;
	}
}


@media screen and (min-width:640px){ /*T A B L E T */
	body {
		width: 100%;
	}
	
	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{
	/* GENERAL */
	--header-padding: var(--main-space);
	--global-border-radius: 0px;
		

	--workshop-contact-a-width: 50%;
	
	/* BLOCKY STYLE */
	/*	--global-grid-gap: 0px;
		--global-border-desktop: none;
		
		--global-border-desktop: none;
		--global-border-mobile: 1px solid var(--color1);
		
		--global-border-color-bottom: var(--color1);
		
		--background-color-body: var(--background-color3);
		--background-color-pack-mit-an: var(--background-color);
		--background-color-workshop: var(--background-color2);
		--background-color-workshop-div: var(--background-color3);
		--background-color-footer: var(background-color3);*/
	}
	
	/* ROUND STYLE */
	div.pack_mit_an{
	--background-color-pack-mit-an: var(--color1);
	--global-border-radius-small: 0px;
	}
	
	div.pack_mit_an:hover,
	div.pack_mit_an:active{
	--background-color-pack-mit-an: var(--color1-brighter);
	--pack-mit-an-animation: pack-mit-an-animation-lighter;
	}
	
	div.pack_mit_an a{
		--color1: white;
	}
	
	section.intro{
		--global-grid-gap: 0px;
	}
	
	body{
		--border-body: 1px solid var(--global-border-color);
	}
	
}

@media screen and (min-width:1024px){ /*D E S K T O P*/
	
	body {
		width: 100%;
		min-width: 1024px;
		}
	
	div.workshops-grid{
	grid-template-columns: 1fr 1fr 1fr;
	}
	
	#newsletter-signup::before{
		content: "Sign up for unsketchy ";		
	}

}

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

/* ---------- DARK MODE -------------------- */
.dark-mode{
	--background-color: hsl(0,0%,11%);
	--background-color2: hsl(0,0%,18%);
	--background-color3: hsl(0,0%,23%);
	--background-color4: var(--background-color2);
	--background-color5: var(--background-color);
	--background-color6: hsl(0,0%,13%);
	--div-border-color: hsl(0,0%,18%);
	--global-border-color: hsl(0,0%,28%);
	
	--bg-color-100-0: hsl(60,3%,6%);	
	--bg-color-100-3: hsl(60,1%,12%);	
	--bg-color-100-5: hsl(60,1%,15%);
	--bg-color-100-10: hsl(60,1%,20%);
	
	--bg-color-97-0: hsl(60,3%,6%);
	--bg-color-97-3: hsl(60,1%,12%);	
	--bg-color-97-5: hsl(60,1%,15%);
	--bg-color-97-10: hsl(60,1%,20%);

	--bg-color-95-0: hsl(60,3%,6%);
	--bg-color-95-3: hsl(60,1%,12%);	
	--bg-color-95-5: hsl(60,1%,15%);
	--bg-color-95-10: hsl(60,1%,20%);

	--bg-color-90-0: hsl(60,3%,6%);
	--bg-color-90-3: hsl(60,1%,12%);	
	--bg-color-90-5: hsl(60,1%,15%);	
	--bg-color-90-9: hsl(60,1%,18%);
	--bg-color-90-10: hsl(60,1%,20%);
	
	--bg-color-80-30: hsl(60,1%,25%);
	--bg-color-80-35: hsl(60,1%,30%);
	--bg-color-85-30: hsl(60,1%,25%);
	--bg-color-85-35: hsl(60,1%,30%);
	
	--bg-color-100-5-a: hsla(60,1%,20%,60%);

	--sat-adjust: + 2%;
	--light-adjust: + 2%;

	
	
	--color1: hsl(166, calc(100% var(--sat-adjust)), calc(25% var(--light-adjust))); /* 4% heller, 4% mehr Sättigung */
	
								
	--global-black: white;
	--global-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%;
}

.dark-mode header img, 
.dark-mode footer img,
.navbar_item_placeholder{
	filter: invert(100%);
}

.dark-mode nav ul li {
color: white;
}

.dark-mode nav ul li.nav-button{
	background: white;
	color: black;
}
	

@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;
	}
}
/*
@media (prefers-color-scheme: dark) {
	:root, html, body{
		--background-color: hsl(0,0%,11%);
		--background-color2: hsl(0,0%,18%);
		--background-color3: hsl(0,0%,23%);
		--background-color4: var(--background-color2);
		--background-color5: var(--background-color);
		--background-color6: hsl(0,0%,13%);
		--div-border-color: hsl(0,0%,18%);
		--global-border-color: hsl(0,0%,28%);
		
		--bg-color-100-0: hsl(60,3%,6%);	
		--bg-color-100-5: hsl(60,1%,15%);
		--bg-color-100-10: hsl(60,1%,20%);
		
		--bg-color-97-0: hsl(60,3%,6%);
		--bg-color-97-5: hsl(60,1%,15%);
		--bg-color-97-10: hsl(60,1%,20%);
	
		--bg-color-95-0: hsl(60,3%,6%);
		--bg-color-95-5: hsl(60,1%,15%);
		--bg-color-95-10: hsl(60,1%,20%);
	
		--bg-color-90-0: hsl(60,3%,6%);
		--bg-color-90-5: hsl(60,1%,15%);	
		--bg-color-90-10: hsl(60,1%,20%);
		
		--bg-color-80-30: hsl(60,1%,25%);
		--bg-color-80-35: hsl(60,1%,30%);
		--bg-color-85-30: hsl(60,1%,25%);
		--bg-color-85-35: hsl(60,1%,30%);
		
		--bg-color-100-5-a: hsla(60,1%,20%,60%);
	
		--sat-adjust: + 2%;
		--light-adjust: + 2%;
	
		
		
		--color1: hsl(166, calc(100% var(--sat-adjust)), calc(25% var(--light-adjust))); /* 4% heller, 4% mehr Sättigung */
		
					/*				
		--global-black: white;
		--global-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%;
	}
  }

*/