@import "intro.css";
 
 @font-face {
  font-family: 'Basel Grotesk';
  src: url('/assets/fonts/Basel-Grotesk-Book.eot');
  src: url('/assets/fonts/Basel-Grotesk-Book.eot?#iefix') format('embedded-opentype'),
       url('/assets/fonts/Basel-Grotesk-Book.woff2') format('woff2'),
       url('/assets/fonts/Basel-Grotesk-Book.woff') format('woff');

  font-style: normal;
}


*{
	box-sizing: border-box;
}

:root {
	--gelb: #FADCB4;
	--blau:#648CFA;
	--rot: #F05A6E;
	--violett: #5C2C62;
	--weiss: #FFFFFF;
	--schwarz: #000000;
	
	--fontsize-small: 14px;
	--fontsize-base: 18px;
	--fontsize-medium:22px;
	--fontsize-large:30px;
	
	--abstand: 40px;
	--abstand-mittel: 30px;
	--abstand-klein: 14px;
	--padding:14px 17px;
	--abstand-block:30px;
	
	
	
	--header-height: 160px;
	--page-margin: 30px;
	
	--grid: 12;
	--grid-gap: 16px;
	
	--border-radius:18px;
	
	
	
	--grid-col-width: calc( (100vw - (2*var(--page-margin)) - (11*var(--grid-gap))) / 12 );
	--main-padding-left:calc( var(--page-margin) + (2*var(--grid-col-width)) + (2*var(--grid-gap)) );
	--main-padding-right:calc( var(--page-margin) + var(--grid-col-width) + var(--grid-gap) );
	--left-col-width:calc( 2*var(--grid-col-width) + var(--grid-gap) );
	
	--left-col-width:250px;
	--main-padding-left: calc(var(--left-col-width) + var(--grid-gap) + var(--page-margin));

	--text-maxwidth: 1024px;

	interpolate-size: allow-keywords; 
}


body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	background-color:white;
	color:var(--schwarz);
	font-family:'Basel Grotesk','Arial',sans-serif;
	
	font-size:var(--fontsize-base);
	line-height:1;
	
}



/* ---------------------------------
	
	GRID SETUP
	
-----------------------------------*/

.grid-container{
	display:grid;
	grid-template-columns: repeat(var(--grid), 1fr);
	column-gap: var(--grid-gap);
	row-gap: var(--grid-gap);
}
.grid-1{ grid-column: span 1; }
.grid-2{ grid-column: span 2; }
.grid-3{ grid-column: span 3; }
.grid-4{ grid-column: span 4; }
.grid-5{ grid-column: span 5; }
.grid-6{ grid-column: span 6; }
.grid-7{ grid-column: span 7; }
.grid-8{ grid-column: span 8; }
.grid-9{ grid-column: span 9; }
.grid-10{ grid-column: span 10; }
.grid-11{ grid-column: span 11; }
.grid-12{ grid-column: span 12; }
.grid-13{ grid-column: span 13; }
.grid-14{ grid-column: span 14; }
.grid-15{ grid-column: span 15; }
.grid-16{ grid-column: span 16; }
.grid-17{ grid-column: span 16; }
.grid-18{ grid-column: span 16; }
.grid-19{ grid-column: span 16; }
.grid-20{ grid-column: span 16; }
.grid-21{ grid-column: span 16; }
.grid-22{ grid-column: span 16; }
.grid-23{ grid-column: span 16; }
.grid-all{ grid-column: 1/-1; }



/* ---------------------------------
	
	UTILITY CLASSES
	
-----------------------------------*/

body.no-scroll{
	overflow-y:hidden;
}


.mobile-only{
	display:none;
}

.max-width{
	max-width:var(--text-maxwidth);
}


/* ---------------------------------
	
	GENERAL LAYOUT STUFF
	
-----------------------------------*/

h1{
	font-size:var(--fontsize-large);
	padding-bottom:var(--abstand-block);
}
h2{
	font-size:var(--fontsize-large);
}

h4{
	font-size:var(--fontsize-small);
}

a{
	text-decoration: none;
	text-decoration-thickness: from-font;
	transition:all .2s ease;
	color:inherit;
}
sub{
	font-size: var(--fontsize-small);
	line-height:1;
	display:block;
}

.btn{
	display:inline-block;
	border-radius: 999px;
	background-color:var(--weiss);
	box-shadow: 0px 2px 6px rgba(0,0,0,.33);
	padding:0.7rem 1rem;
	display:flex;
	justify-content: space-between;
	transition: all .2s ease;
}
.is-desktop .btn:hover{
	box-shadow: 0px 6px 10px rgba(0,0,0,.33);
	transform: translateY(-10%);
}


.text-small{
	font-size: var(--fontsize-small)
}
.ratio-1-1{
	aspect-ratio: 1/1;
}
.ratio-3-2{
	aspect-ratio: 3/2;
}
.ratio-1-1{
	aspect-ratio: 1/1;
}




.container{
	max-width:1920px;
	margin:0 auto;
}
main{
	position:absolute;
	z-index: 1;
	left:var(--main-padding-left);
	right:var(--main-padding-right);
	top:var(--page-margin);	
	max-width:1440px;
	opacity:1;
}

/* HIDE WHEN NAV OPEN */
body.is-active main{
	opacity:0;
}

.b-home,
.b-angebot,
.b-default{
	--main-color:var(--blau);
}
.b-wir{
	--main-color:var(--rot);
}
.b-kontakt{
	--main-color:var(--gelb);
}


.box{
	border-radius: var(--border-radius);
	overflow:hidden;
}
.bg-blau{
	background-color:var(--blau);
}
.bg-rot{
	background-color:var(--rot);
}
.bg-gelb{
	background-color:var(--gelb);
}
.bg-main{
	background-color:var(--main-color);
}



/* ICONS */

.icon{
	display:inline-block;
	width:20px;
	aspect-ratio: 1/1;
	
	background-repeat:no-repeat;
	background-position: center;
	background-size:26px;
}

.icon-bg{
	background-repeat:no-repeat;
	background-position:calc(100% - 18px) center;
	background-size:20px;	
}
.accordeon__content.icon-bg{
	padding-right:54px;
}
.btn.icon-bg{
	background-position:calc(100% - 13px) center;
}

.icon-arrowdown{
	background-image:url('/assets/bilder/icon_arrowdown.svg');
}
.icon-arrowright{
	background-image:url('/assets/bilder/icon_arrowright.svg');
}
.icon-arrowleft{
	background-image:url('/assets/bilder/icon_arrowleft.svg');
}
.icon-heart-handshake{
	background-image:url('/assets/bilder/icons/heart-handshake.svg');
}
.icon-handshake{
	background-image:url('/assets/bilder/icons/handshake.svg');
}
.icon-house{
	background-image:url('/assets/bilder/icons/house.svg');
}
.icon-handshake{
	background-image:url('/assets/bilder/icons/handshake.svg');
}
.icon-newspaper{
	background-image:url('/assets/bilder/icons/newspaper.svg');
}
.icon-file-heart{
	background-image:url('/assets/bilder/icons/file-heart.svg');
}
.icon-network{
	background-image:url('/assets/bilder/icons/network.svg');
}
.icon-users{
	background-image:url('/assets/bilder/icons/users.svg');
}
.icon-school{
	background-image:url('/assets/bilder/icons/school.svg');
}
.icon-eye{
	background-image:url('/assets/bilder/icons/eye.svg');
}
.icon-phone{
	background-image:url('/assets/bilder/icons/phone.svg');
}
.icon-info{
	background-image:url('/assets/bilder/icons/info.svg');
}
.icon-mail{
	background-image:url('/assets/bilder/icons/mail.svg');
}
.icon-map-pin{
	background-image:url('/assets/bilder/icons/map-pin.svg');
}
.icon-heart{
	background-image:url('/assets/bilder/icons/heart.svg');
}
.icon-download{
	background-image:url('/assets/bilder/icons/download.svg');
}

/* ICON SIZES */
.togglebox__content .icon-bg{
	background-size:22px;
}





/* TOGGLEBOX */

.togglebox-header{
	display:flex;
}


.togglebox-header h2{
	width:100%;
	text-transform: uppercase;
}
.togglebox-header h2 a{
	display: block;
	padding:var(--padding);
	box-sizing: border-box;

	transition: all .2s ease;
}
.is-desktop .togglebox-header:hover h2 a{
	padding-left: 1.5rem;
}
.togglebox-header h2 a::selection{
	background:transparent;
}
.togglebox-header .icon{
	aspect-ratio:1 / 1;
	width:60px;
	transition:all .2s ease;
}
.togglebox__content{
	/*height:0px;*/
	/*max-height:0;*/
	/*overflow:hidden;
	opacity:0;
	transition:all .2s ease;*/
	display: grid;
	grid-template-rows: 0fr;
 
  	opacity:0;
	transition: grid-template-rows 0.3s ease-out, opacity 0.3s ease 0.1s;
}

.togglebox.is-active .togglebox__content{
	/*height:auto;*/
	/*max-height:40rem;
	opacity:1;*/
	opacity:1;

	 grid-template-rows: 1fr;
}
.togglebox .togglebox__content ul{
	overflow: hidden;
}
.togglebox.is-active .togglebox-header .icon{
	transform:rotate(180deg);
}
main .togglebox__content a{
	transition-delay:0;
	transition-duration: .2s;
}
main .togglebox__content a:hover{
	color:white;
}

.togglebox-trigger{
	cursor:pointer;
}
.togglebox-trigger .icon,
nav .togglebox-trigger{
	transition:all .2s ease;
}
.togglebox-trigger:hover .icon,
nav .togglebox-trigger:hover{
	transform:translateY(7%);
}





/* ---------------------------------
	
	LOGO
	
-----------------------------------*/

.logo{
	position:fixed;
	z-index:3;
	left:var(--page-margin);
	top:var(--page-margin);
	font-size:var(--fontsize-large);
	text-transform: uppercase;
	display:none;
	width: var(--left-col-width);
	line-height:0.9;
	word-wrap: break-word;
}
.logo span{
	color:var(--main-color);
}
.logo.logo-nav span{
	color:var(--blau);
}
.logo.is-active{
	display:block;
}


/* ---------------------------------
	
	NAVIGATION
	
-----------------------------------*/

nav{
	/*display:none;*/
	opacity:0;
	pointer-events: none;
	position:fixed;
	background:white;
	z-index:4;
	top:0px;
	left:var(--main-padding-left);
	right:0;
	padding-right:var(--main-padding-right);
	bottom:0px;
	overflow-y:scroll;
	padding-top:var(--page-margin);
	transition:all .2s ease;
}
nav.is-active{
	/*display:block;*/
	opacity:1;
	pointer-events: all;
}

nav .box{
	margin-bottom:var(--abstand-klein);
}
nav .togglebox-header h2{
	border-right:1px solid var(--schwarz);
}

nav ul li{
	display:block;
	border-bottom: 1px solid var(--schwarz);
	
	display:flex;
	flex-direction: row;
}
nav ul li:first-child{
	border-top: 1px solid var(--schwarz);
}
nav ul li:last-child{
	border-bottom:none;
}
.nav__main li a{
	width:100%;
	padding:var(--padding);
	transition:all .2s ease;
}
.is-desktop .nav__main a:hover,
.is-desktop .block-subsites a:hover{
	padding-left:1.5rem;
}


nav .icon{
	width:50px; /* TODO */
	background-color:transparent; /* TODO */
}
.b-home nav{
	padding-left: var(--main-padding-left);
	padding-right: var(--main-padding-right);
	left:0;
	right:0;
}
.b-home .logo{
	z-index:5;
}
.nav--angebot{
	background-color: var(--blau);
}
.nav--wir{
	background-color: var(--rot);
}
.nav--kontakt{
	background-color: var(--gelb);
}



.hamburger{
	position:fixed;
	z-index:5;
	right:var(--page-margin);
	top:var(--page-margin);
	padding:var(--grid-gap);
	background:var(--weiss);
	width: 60px;
	height: 60px;
	box-shadow: 0px 2px 6px #00000033;
	border-radius: var(--border-radius);
	padding:0;
	transition: all .2s ease;
}

.is-desktop .hamburger:hover{
	box-shadow: 0px 6px 10px #00000033;
	transform: translateY(-10%);
}

.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before{
	border-radius: 0px;
	height:1px;
}
.hamburger-inner{
	margin-top:0px;
	/*transition:all .2s ease !important;*/
	/*transform: scale(1);*/
}


.hamburger.is-active:hover, .hamburger:hover{
	opacity:1;
}


/* ---------------------------------
	
	IMPRESSUM
	
-----------------------------------*/

@media screen and (max-width:1375px){
	.impressum-details .grid-item{
		grid-column: span 6;
	}
}

/* ---------------------------------
	
	FOOTER
	
-----------------------------------*/
.b-home footer{
	display:none;
}
.b-home.is-active footer{
	display:flex;
}

footer{
	position:fixed;
	left:var(--page-margin);
	bottom:var(--page-margin);
	font-size:var(--fontsize-small);
	width:var(--left-col-width);
	display:flex;
	flex-direction: column;
	gap:var(--abstand-mittel);
}
footer .btn{
	font-size:var(--fontsize-base);
	width:100%;
}

footer .btn:first-child{
	margin-bottom:var(--abstand-klein);
}
.footer__block:first-child{
	padding-bottom:var(--abstand-klein);
	max-width:85%;
	
}
.footer__block div:first-child{
	padding-bottom:var(--abstand-klein);
}
.footer__block:last-child a{
	transition:none;
}
.footer__block:last-child a:hover{
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}



/* ---------------------------------
	
	BLOCK: GENERELL
	
-----------------------------------*/

.block{
	margin-bottom:var(--abstand-block);
}
.block:last-child{
	padding-bottom:0px;
}
.tag{
	display:inline-block;
	background:var(--weiss);
	border-radius:999px;
	padding:0.3rem 0.5rem;
	font-size:var(--fontsize-small);
	position:absolute;
	left:10px;
	top:10px;
}

.will-animate{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 0.8s ease, filter 0.8s ease;
  filter: blur(10px);
}


.will-animate.inview {
  opacity: 1;
  transform: translateY(0);
   filter: blur(0px);
}

/* ---------------------------------
	
	BLOCK: TITEL
	
-----------------------------------*/

.block-titel{
	margin-bottom:0px;
}

/* ---------------------------------
	
	BLOCK: TEXT GROSS
	
-----------------------------------*/

.block-text-gross{
	font-size:var(--fontsize-large);
	max-width:var(--text-maxwidth);
}
.block-text-gross a{
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset:4px;
}
.block-text-gross p{
	padding-bottom:var(--abstand-klein);
}


/* ---------------------------------
	
	BLOCK: TEXT 
	
-----------------------------------*/

.block-text{
	font-size:var(--fontsize-medium);
	max-width:var(--text-maxwidth);
}
.block-text h2{
	padding-bottom:var(--abstand-klein);
}
.block-text p{
	padding-bottom:var(--abstand-klein);
}
.block-text p:last-child{
	padding-bottom:0px;
}

.b-neuigkeiten .block-text a{
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}


/* ---------------------------------
	
	BLOCK: TEASERS 
	
-----------------------------------*/

.block-teasers a{
	overflow:hidden;
	position:relative;
	display:flex;
	flex-direction: column;
	justify-content: space-between;
}
.block-teasers figure{
	height: 100%;
	display: flex;
	flex-direction: column;
}
.block-teasers img{
	transition:all .2s ease;
}
.is-desktop .block-teasers a:hover{
	transform: scale(1.01);
	transform-origin: center;
}
.is-desktop .block-teasers a:hover img{
	transform: scale(1.05);
	transform-origin: center;
}

.block-teasers a span:not(.tag){
	font-size:var(--fontsize-medium);
	padding:var(--padding);
	display:block;
	aspect-ratio: 3 / 2;
}
.block-teasers figcaption,
.block-teasers h3{
	font-size:var(--fontsize-large);
	padding:var(--padding);
	text-transform: uppercase;
	position:relative;
	overflow:hidden;
	flex:1;
}
.b-neuigkeiten .block-teasers figcaption{
	text-transform: none;
	font-size:var(--fontsize-medium);
}
.block-teasers figcaption::after,
.block-teasers h3::after{
	content:'';
	display:block;
	aspect-ratio: 1 / 1;
	width: 60px;
	background-image: url('/assets/bilder/icon_arrowright.svg'), linear-gradient(90deg,rgba(100, 140, 250, 0) 0%, rgba(100, 140, 250, 1) 20%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px, 100%;
	position:absolute;
	right:0;
	top:50%;
	transform: translateX(7%) translateY(-50%);
	opacity:0;
	transition:all .2s ease;
}
.is-desktop .block-teasers a:hover figcaption::after,
.is-desktop .block-teasers a:hover h3::after,
.is-mobile .block-teasers a h3::after,
.is-mobile .block-teasers figcaption::after{
	opacity:1;
	transform: translateX(0%) translateY(-50%);
}
.is-mobile .block-teasers a h3::after,
.is-mobile .block-teasers figcaption::after{
	width:47px;
}
.b-neuigkeiten .block-teasers figcaption::after{
	background-image: url('/assets/bilder/icon_arrowright.svg'), linear-gradient(90deg,rgba(240, 90, 110, 0) 0%, rgba(240, 90, 110, 1) 20%);
}

/* ---------------------------------
	
	BLOCK: HEADER IMAGE 
	
-----------------------------------*/

.block-headerimage{
	border-radius: var(--border-radius);
	overflow:hidden;
	position:relative;
}
.block-headerimage img{
	aspect-ratio: 3/2;
	object-fit: cover;
}
figure{
	position:relative;
}
figure div{
	overflow:hidden;
}
figure img{
	width:100%;
	height:100%;
	object-fit: cover;
}

/* ---------------------------------
	
	BLOCK: IMAGE
	
-----------------------------------*/

.block-image{
	border-radius: var(--border-radius);
	overflow:hidden;
	position:relative;
}

/* ---------------------------------
	
	BLOCK: VIDEO
	
-----------------------------------*/

.block-video{
	border-radius: var(--border-radius);
	overflow:hidden;
}
.block-video iframe{
	width:100%;
	aspect-ratio: 16/9;
}

/* ---------------------------------
	
	BLOCK: AKKORDEON 
	
-----------------------------------*/

.block-accordeon:has(+ .block-accordeon) {
	margin-bottom: var(--abstand-klein);
}
.block-accordeon li{
	display:flex;
}
.block-accordeon__box{
	margin-bottom:var(--abstand-klein);
}
.accordeon__content{
	padding:var(--padding);
	width:100%;
}
.block-accordeon strong{
	color:var(--weiss);
}

.block-accordeon li{
	border-bottom: 1px solid var(--schwarz);
}
.block-accordeon li:first-child{
	border-top: 1px solid var(--schwarz);
}
.block-accordeon li:last-child{
	border-bottom:none;
}
.block-accordeon--textbox .accordeon__content{
	max-width:var(--text-maxwidth);
}

.leistungen-text p:not(:last-child){
	padding-bottom:var(--abstand-klein);
}
.leistungen-text p:has(strong){
	padding-bottom:0px !important;
}

/* ---------------------------------
	
	BLOCK: INFOBOX 
	
-----------------------------------*/

.block-infobox strong{
	color:var(--weiss);
}
.block-infobox h2{
	border-bottom:1px solid var(--schwarz);
}


/* ---------------------------------
	
	BLOCK: SUBSITES 
	
-----------------------------------*/

.block-subsites li{
	
	margin-bottom:var(--abstand-klein);
}
.block-subsites a{
	padding:var(--padding);
	font-size:var(--fontsize-large);
	text-transform: uppercase;
	width:100%;
	
	
	display:flex;
	flex-direction: row;
	justify-content: space-between;
}
.block-subsites .icon{
	background-size:12px; /* TODO */
	transition:all .2s ease;
}
.block-subsites a:hover .icon{
	transform: translateX(30%);
}
	
/* ---------------------------------
	
	BLOCK: BACKLINK 
	
-----------------------------------*/

.block-backlink a{
	padding:var(--padding);
	font-size:var(--fontsize-large);
	text-transform: uppercase;
	border-radius: var(--border-radius);
	
	display:flex;
	flex-direction: row;
	justify-content: space-between;
}

.block-backlink .icon{
	background-size:12px; /* TODO */
	/*transition:all .2s ease;*/
}


/* ---------------------------------
	
	ANIMATIONS
	
-----------------------------------*/


nav.is-active .togglebox{
	animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
	animation-duration: 0.75s; /* don't forget to set a duration! */
	animation-fill-mode: backwards;
}
.logo-nav.is-active span{
	display:inline-block;
	animation: fadeInLeft; /* referring directly to the animation's @keyframe declaration */
	animation-duration: 0.75s; /* don't forget to set a duration! */
	animation-fill-mode: backwards;
}


/* ---------------------------------
	
	RESPONSIVE
	
-----------------------------------*/



@media screen and (max-width: 1200px) {

	.block-teasers .grid-4{
		grid-column: span 6;
	}
	.footer__block:first-child{
		max-width: none
	}
	
	
	
}


/* MOBILE */
@media screen and (max-width: 1000px) {
	:root{
		--grid-gap: 10px;
		--page-margin:16px;
		--header-height:125px;
	}	
	
	.mobile-only{
		display:block;
	}
		
	body:not(.b-impressum) .grid-item{
		grid-column: 1/-1 !important;
	}


	body{
		display:flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.logo{
		z-index:5;
		position:absolute;
		width:auto;
		max-width:calc(100% - 100px);

	}
	body:not(.b-home) .logo:not(.logo-nav) span br{
		display:none;
	}
	.logo.is-active{
		position:absolute;
	}
	.logo-nav.is-active{
		position:fixed;
	}
	nav,
	.b-home nav{
		top:0px;
		padding-top:var(--header-height);
		padding-left:var(--page-margin);
		padding-right:var(--page-margin);
		min-height:100vh;
		min-height:100dvh;
		left:0px;
		right:0px;	
	}
	nav.is-active{
		display:block;
	}
	.nav-container{
		border-top-left-radius: var(--border-radius);
		border-top-right-radius: var(--border-radius);
		/*overflow:hidden;*/
		overflow-y:scroll;
		scrollbar-width: none;
		-ms-overflow-style: none;
		height:100%;
		min-height:100%;
		display:flex;
		flex-direction: column;
		justify-content: space-between;
		gap:100px;
	}
	.nav-container::-webkit-scrollbar, .nav-container::-webkit-scrollbar-button{
		display:none;
	}

	
	main{
		position:static;
		margin-top:var(--header-height);
		left:var(--page-margin);
		padding-left:var(--page-margin);
		padding-right:var(--page-margin);
	}
	
	footer{
		width:100%;
		position:static;
		padding-left:var(--page-margin);
		padding-right:var(--page-margin);
	}
	footer .footer__block{
		display:flex;
		gap:var(--grid-gap);
	}
	footer .footer__block div:first-child{
		width:100%;
	}
	footer .footer__block:last-child div:last-child{
		white-space: nowrap;
	}
	
	footer .btn:first-child{
		margin-bottom:0px;
	}
	nav footer.mobile-only{
		padding:0;
		display:flex;
	}
	
	
	.block-text-gross{
		font-size:var(--fontsize-medium);
	}
	.block-text{
		max-width: 100%;
		font-size:var(--fontsize-base);
	}
	
	
	
	
	
	.block-headerimage img{
		aspect-ratio: 1/1;
		object-fit: cover;
	}
	
	
}


@media screen and (max-width: 440px) {
	:root{
		--fontsize-small: 13px;
		--fontsize-base: 16px;
		--fontsize-medium:19px;
		--fontsize-large:26px;
	}	
	
		
	.grid-item{
		grid-column: 1/-1 !important;
	}
}