@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{
	--red:#a21a17;
	--light:#F2F2F2;
	--lightgrey:#a6a6a6;
	--grey:#929292;
	--darkgrey:#5F5F5F;
	--black:#303030;
	
	--txt-color:var(--black);
	--accent:var(--red);
	--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;
}
.info{
	font-size:.85em;
	opacity:.6;
	color:var(--darkblue);
}
.info:hover{
	opacity:1;
}
/*----------- 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;
	
	
}
main section:last-child .sec-cont-wrap{
	
}
.left-cont{
	max-width:640px;
}
/*---------------------------------------- header*/
header{
	position:sticky;
	top:0;
	background:white;
	z-index:9;
	.sec-cont-wrap{
		padding-top:0;
		padding-bottom:0;
		display:flex;
		flex-direction:row;
		align-items: center;
        justify-content: space-between;
	}
	.logo{
		margin-bottom:-2rem;
		margin-top:1em;
		height:102px;
		width:auto;
	}
	.header-contact{
		display:flex;
		flex-direction:row;
		gap:2rem;
		
		a{
			display:inline;
		}
	}
	
}
a.logo-wrap{
	text-decoration:none;
	font-weight:300;
}
/*---------------------------------------- footer*/

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

	*{
		color:inherit;
	}
	.sec-cont-wrap{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap:1rem;		
	} 
	p{
		margin:0;
		line-height:1.25;
	}
	.bni-logo{
		max-width:96px;
		margin-top:.5rem;
		margin-bottom:3rem;
	}
}


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

#hero.home{
	position:sticky;
	top:96px;
	z-index:0;
	padding:0 5vw 5vw 5vw;
	
	.sec-cont-wrap{
		max-width:unset;
		background:grey;
		background:url(img/raumwerkstadt-hero.jpg);
		border-radius:5vw 0;
		min-height:65vh;
		
	}
	.hero-inner{
		max-width:var(--sec-cont-width);
		margin:auto;
		padding:80px 40px;
		
		*{
			max-width:560px;
		}
	}
	.subhead{
		margin-bottom:0;
		
	}
}

/*------------------------------------- über uns*/
#ueber-uns{
	position:relative;
	padding:56px 1rem;
	background: linear-gradient(0deg,rgba(255,255,255, 1) 0%, rgba(255, 255, 255, 0) 90%);

	.sec-cont-wrap{
		padding:clamp(1rem, 5vw, 40px);
		background:grey;
		border-radius:4rem;
		background:rgba(255,255,255,.8);
		backdrop-filter:blur(8px);
		-webkit-backdrop-filter:blur(8px);
		display:flex;
		flex-direction:row;
		align-items: flex-start;
		gap:2rem;
	}
	h2{
		color:var(--accent);
		margin-top:0;
	}
	img{
		max-width:320px;
		border-radius:2rem;
	}
	
}
/*------------------------------------- leistungen*/
#leistungen{
	background:var(--lightgrey);
	text-align:center;
	position:relative;
	padding-top:5vw;
	
	*{
		color:var(--light);
	}
	.leistungen-flex{
		display:flex;
		flex-direction:row;
		gap:1rem;
		width:100%;
		margin-bottom:4rem;
		
		.leistung{
			border-radius:2rem 2rem 2rem 0;
			color:white;
			border:1px solid currentcolor;
			text-align:center;
			background:var(--accent);
			padding:2rem 1rem;
			flex:1;
			position:relative;
			overflow:hidden;
			
			h3, p{
				position:relative;
				z-index:1;
				line-height:1.25;
			}
			h3{
				margin-bottom:2em;
			}
		}
		
		.leistung::before{
			content:'';
			position:absolute;
			inset:0;
			mix-blend-mode:multiply;
			background-image:url('img/leistungen-2.webp');
			z-index:0;
		}
		.leistung:first-child::before{
			background-image:url('img/leistungen-1.webp');
		}
		.leistung:last-child::before{
			background-image:url('img/leistungen-3.webp');
		}
		
	}
	.bg-shape{
		width:100%;
		position:absolute;
		top:-1px;
		right:0;
		left:0;
		transform:rotate(180deg);
	}
	
}
.image-sec{
	position:relative;
	background:url('img/raumwerkstadt-footer.jpg');
	min-height:50svh;
	background-position:top;
	background-size:cover;
	background-attachment:fixed;
	background-repeat:no-repeat;
	
	.bg-shape{
		width:100%;
		position:absolute;
		top:-1px;
		right:0;
		left:0;
		transform:rotate(180deg);
	}
	
}
.hero.impressum{
	min-height:25svh;
	background:url('img/raumwerkstadt-footer.jpg');
	.bg-shape{
		width:100%;
		position:absolute;
		bottom:-1px;
		right:0;
		left:0;
		
	}
}
@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-contact{
		display:none!important;
	}
	header .logo{
		height:80px;
	}
	#hero.home{
		top:80px;
	}
	#leistungen .leistungen-flex{
		flex-direction:column;
	}
	#ueber-uns .sec-cont-wrap{
		flex-direction:column-reverse;
		
		img{
			max-width:100%;
		}
	}
	footer .sec-cont-wrap{
		flex-direction:column;
		align-items: flex-start;
		gap:3rem;
		
		.logo{
			height:56px;
			display:block;
		}
		.logo-wrap a{
			display:block;
		}
	}
}