@font-face {
  font-family: "League";
  src: 
    local("League Spartan"),
    url("fonts/LeagueSpartan-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
}



:root{
	
	--orange:#ed6c05;
	--light:white;
	--lightgrey:#dadada;
	--lightgrey-b:#b4b4b4;
	--grey:#8b9091;
	--black:#282829;
	--black-b:#33353b; /*lighter*/
	
	
	--txt-color:var(--black);
	--accent:var(--orange);
	--accent-b:#821512;
	
	--txt-size:clamp(1.1rem, 1.1vw, 1.25rem);
	--txt-size-h1:clamp(1.75rem, 3.3vw, 3.5rem);
	--txt-size-h2:clamp(1.5rem, 2.1vw, 2rem);
	--txt-size-h3:clamp(1.125rem, 1.4vw, 1.25rem);
	--txt-size-h4:1.125rem;
	
	--sec-cont-width:1220px;
	--border-rad-s:2px;	
	--border-rad-m:8px;	
	
	--shadow:0 0 16px 1px rgba(19, 23, 82, .05);
}

*{
	padding:0;
	margin:0;
	box-sizing:border-box;
}
body{
	font-family:"League", sans-serif;
	color:var(--black);
	line-height:1.5;
	font-size:var(--txt-size);
	
}
html{
	scroll-behavior:smooth;
}
/*---------- headings and text*/
h1, h2, h3{
	color:var(--accent);
	margin:1.5em 0 .5em;
	line-height:1.25;
	text-transform:uppercase;
	font-weight:bold;
	
}
h1{
	font-size:var(--txt-size-h1);
	margin-top:0;
	margin-bottom:.25em;
	.blue{
		color:var(--blue);
	}
}
#hero h1{
	--txt-size-h1:clamp(2rem, 3.5vw, 3.5rem);
}
h2{
	font-size:var(--txt-size-h2);
	margin-bottom:1em;
}
p{
	
	line-height:1.6;
	margin-bottom:1em;
}
strong{
	font-weight:600;
}
/*----------- buttons*/
.button{
	padding:.75em 1.5em .5em;
	line-height:1.25;
	border-radius:1rem 1rem 1rem 0;
	background:var(--accent);
	color:white;
	border:none;
	transition:.2s;
	font-size:1.25rem;
	font-family:inherit;
	margin:2rem 0;
	width:max-content;
	display: flex;
    gap: .5em;
    flex-direction: row;
    align-items: center;
	justify-content: center;
    flex-wrap: nowrap;
	text-decoration:none;
	cursor:pointer;
}
.button:hover, .button:focus{
	transform:scale(.975);
	background:var(--accent-b);
	
	
}
a{
	text-decoration-thickness:1px;
	text-underline-offset:3px;
	color:inherit;
	
}
a:not(.button):not(.logo-wrap):hover{
	text-decoration:none;
	opacity:.8;
}
a.icon-link{
	display: flex;
    gap: .125em;
	
	.icon{
		font-size:iherit;
	}
}
ul, ol{
	padding-left: 1.25em;
	li{
		margin-bottom:.5em;
	}
}
.small{
	font-size:.9em;	
}
.smaller{
	font-size:.8em;
}
.icon, .icon svg{
	height:1.25em;
	width:1.25em;
}
/*----------- section*/
section{
	width:100%;
	max-width:100vw;
	background:white;
	position:relative;
}
.sec-cont-wrap{
	width:100%;
	max-width:var(--sec-cont-width);
	margin:auto;
	padding:40px 16px;
	
	
}
.left-cont{
	max-width:640px;
}
/*---------------------------------------- header*/
header{
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:9;
	padding:1rem;
	
	.sec-cont-wrap{
		background:white;
		border-radius:.5rem;
		display:flex;
		flex-direction:row;
		align-items: center;
        justify-content: space-between;
		padding:.5rem 1rem;
		box-shadow:0 0 1rem rgba(0,0,0,.125);
	
	}
	.logo{
		height:80px;
	
	}
	.header-contact{
		display:flex;
		flex-direction:row;
		gap:2rem;
		
		a{
			display:inline;
		}
	}
	
}
a.logo-wrap{
	text-decoration:none;
	font-weight:300;
	line-height:0;
}
/*---------------------------------------- footer*/

footer{
	background:var(--black);
	color:var(--light);

	*{
		color:inherit;
	}
	.sec-cont-wrap{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap:1rem;
		padding-top:56px;
	} 
	p{
		margin:0;
		line-height:1.25;
	}
	.logo-footer{
		max-width:240px;
		margin-top:-24px;
	}
	.footer-menu{
		
		
		a{
			opacity:.6;
			font-weight:300;
		}
		a:hover{
			opacity:1;
		}
	}
	
}


/*---------------------------------------- hero*/

#hero.home{
	background:url('img/gesa-hero.jpg');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
	
	*{
		color:white;
		text-align:center;
	}
	
	.overlay{
		position:absolute;
		inset:0;
		opacity:.5;
		background:var(--black);
	}
	
	.sec-cont-wrap{
		min-height:70vh;
		position:relative;
		display:flex;
		flex-direction:column;
		padding-top:112px;
		padding-bottom:112px;
		
	}
	.hero-inner{
		
		margin:auto;
		padding:80px 40px;
		
		
		*{
			max-width:560px;
		}
	}
	.subhead{
		margin-bottom:0;
		
	}
}

.hero.impressum{
	min-height:25svh;
}

/*------------------------------------------- kontakt*/
#kontakt{
	background:transparent;
	
	.sec-cont-wrap{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		gap:1rem;		
		padding-top:0;
		margin-top:-7rem;
		padding-bottom:80px;
	}
	h2{
		width:100%;
		color:white;
		text-align:center;
		margin-top:0;
		margin-bottom:.5em;
	}
	.contact-item{
		background:white;
		border-radius:.5rem;
		box-shadow:0 0 1rem rgba(0,0,0,.125);
		padding:1rem 2rem;
		flex:1;
		
		h3{
			margin-top:.5em;
			text-align:center;
			margin-bottom:2em;
			
		}
		a{
			display:block;
			margin-bottom:1em;
		}
	}
}
@media screen and (min-width:992px){
	.hero .sec-cont-wrap{
		padding:80px 40px;
	}
	.sec-cont-wrap{
		padding:40px 40px;
	}
	#header{
		.sec-cont-wrap{
			padding-top:16px;
			padding-bottom:24px;
		}
	}
	.logo-d{
		display:inline;
	}		
}

@media screen and (max-width:991px){
	#header{
		.header-contact{
			display:none;
		}
	}
	#hero.home{
		 .sec-cont-wrap{
			padding-bottom:120px;
		}
		.hero-inner{
			padding:40px 0;
		}
	}
}
@media screen and (min-width:480px) and (max-width:991px){
	#timetable{
		    grid-template-columns: 1fr 1fr;
	}
}
@media screen and (max-width:767px){
	header{
		
	}
	header .logo{
		height:56px;
	}
	#hero.home{
	
	}
	#kontakt{
		.sec-cont-wrap{
			flex-direction:column;
		}
	}
	
	footer .sec-cont-wrap{
		flex-direction:column;
		align-items: flex-start;
		gap:3rem;
		
		.logo{
			height:56px;
			display:block;
		}
		.logo-wrap a{
			display:block;
		}
	}
}