@font-face {
	font-family: 'Officina';
	font-style: normal;
	font-weight: 400;
	src: url('../resources/fonts/MyWebfontsKit/webFonts/ITCOfficinaSerifProBold/font.woff2') format('woff2');
}

:root {
	--content-width: 50em;
	--content-width-big: 65em;
    --bg-color: white;
	--text-color: black;
	--fancybox-content-color:var(--text-color);
	--primary-color: #3d9492;
	--secondary-color: lightgrey;
	--hover-color: var(--primary-color);
	--swiper-navigation-size: 3em;
	--swiper-theme-color: white;
	--header-height: 0px;
    --footer-bg-color: white;
    --footer-text-color: black;
}

body {
    background-color: var(--bg-color);
	font-size: 21px;
	text-align: center;
	/* -webkit-text-size-adjust: none; */
}

body.toggled header
{
	overflow: auto;
	height: 100vh;
}

header {
	background-color: var(--bg-color, white);
	box-shadow: 0px 1px 10px rgba(0, 0, 0, .5);
}

header .wrapper {
	display: grid;
	grid-template-columns: minmax(0, .5fr) minmax(0, 1fr) minmax(0, 3fr);
	align-items: center;
	gap: 2em;
	transition: all .5s ease-in-out;
	position: relative;
}

header .banner {
	text-align: start;
	padding: .5rem 0;
	font-weight: 700;
	color: black;
}

header .wrapper {
	max-width: var(--content-width-big);
	padding: 2.25rem var(--content-padding-horizontal) 1.25rem var(--content-padding-horizontal);
}

header .logo img {
	position: absolute;
	top: 1rem;
	display: block;
	transition: all .5s ease-in-out;
}

header nav {
	gap: 1em;
    justify-self: end;
    align-self: end;
	flex-wrap: wrap;
	justify-content: end;
}

header nav a {
	display: block;
	padding: .5rem .25rem;
}

header nav a:first-child {
	display: none;
}

header nav a {
	font-family: 'Officina', serif;
	font-size: clamp(.7em, 1.25vw, 1.2em);	
	color: black;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.05em;
}

header .language {
	position: absolute;
	top: 0;
	right: 2em;
	transition: all .2s ease-in-out;
}

header .language a {
	color: black;
	outline: 1px solid black;
	text-transform: uppercase;
	padding: .2em .5em;
}

header .language a.active {
	background-color: gray;
	color: white;
}

strong {
	font-weight: bold;
}

.stripes > span {
	display: block;
	height: 1.25em;
	background-color: #00ADA3;
	border-bottom: 12px solid white;
	box-sizing: border-box;
	transition: all .5s ease-in-out;
}

.stripes > span:first-child {
	height: 2.5em;
}

.stripes > span:last-child {
	background-color: #7A7A7A;
}

footer .stripes {
	background-image:url('../images/Streifen-Bikelounge_schmal.svg');
	background-color: white;
	background-repeat: repeat-x;
	height: 90px;
}

.scrolled header .language {
	opacity: 0;
}

.scrolled header .stripes {
	height: 0;
}

.scrolled header .stripes > span {
	height: 0;
	border-bottom: 0px solid white;;
}

a:hover:not(.contactForm a) {
	color: var(--hover-color);
}

.scrolled header .wrapper {
	padding: var(--content-padding-vertical) var(--content-padding-horizontal);
}

.scrolled header .logo img {
	width: calc(clamp(4em, 20vw, 10.5em) / 1.5);
}

h1 {
	margin: 0;
	color: var(--primary-color);
	font-size: clamp(1.75em, 5vw, 3.85em);
	font-weight: 700;
	line-height: 1;
}

h2 {
	font-size: clamp(.8em, 3vw, 1.15em);
}

h2 small
{
	font-weight: normal;
	white-space: nowrap;
}

section {
	scroll-margin-top: var(--header-height);
}

.typo,
.legend,
.consent-dialog .consent-message {
	font-weight: 500;
	font-size: clamp(0.8em, 2vw, 1.2em);
	line-height: 1.1em;
	letter-spacing: .5px;
}

.typo {
	font-family: 'Roboto', sans-serif;
	line-height: 1.2;
}

.button,
button {
	font-family: 'Officina', serif;
	font-size: 1.2em;
	background:var(--footer-bg-color);
}

button.primary:hover {
	background: var(--primary-color);
}

.button.secondary,
button.secondary {
	color: var(--primary-color);
	border:1px solid var(--primary-color);
}

button.secondary:hover {
	color: white;
	background-color: var(--primary-color);
}

.box button:hover {
	background-color: var(--bg-color);
	color: var(--text-color);
}

.group:not(.group-nopad) > .wrapper
{
	padding:var(--content-padding-vertical) var(--content-padding-horizontal);
	padding-top:6rem;
	padding-bottom: 8rem;
}

.contactform .wrapper,
.partner .wrapper {
	padding: 0 var(--content-padding-horizontal);
}

.contactform .wrapper {
	padding-bottom: 8rem;
}

.group > .wrapper > .element
{
	margin:1.5em 0;
}

.group:not(.group-noclip) > .wrapper > .element:first-child,
.group:not(.group-noclip) > .wrapper > .element.title:first-child > .wrapper > h1,
.group:not(.group-noclip) > .wrapper > .element.subtitle:first-child > .wrapper > h2
{
	margin-top:0;
}

.group:not(.group-noclip) > .wrapper > .element:last-child,
.group:not(.group-noclip) > .wrapper > .element.title:last-child > .wrapper > h1,
.group:not(.group-noclip) > .wrapper > .element.subtitle:last-child > .wrapper > h2
{
	margin-bottom:0;
}

.group .element
{
	margin:1em 0;
}

main section:first-child .group .wrapper .slideshow:first-child 
{
	margin-top: -4em;
}

.consent-settings .group > .wrapper .links button.primary,
.consent-settings .group > .wrapper .links button.secondary {
	font-size: clamp(.6em, 3vw, 1em);
}

/* elements */
.group .element {
	margin:2em 0;
}

.title h1,
.team .title.element h2 {
	font-family: 'Officina', serif;
	margin-bottom: 0;
}

.team .title.element h2 {
	color: black;
}

.images .legend {
	display: none;
}

.image-link .link {
	display: block;
	position: relative;
}

.image-link img {
	display: block;
	width: 100%;
}

.viewport-animated.viewport-visible {
	opacity: 1;
	transform:translateY(0);
}

.box {
	background-color: var(--bg-color);
	color: var(--text-color);
}

.box .group:not(.group-nopad) > .wrapper:has(.columns),
.partner .wrapper {
	max-width: var(--content-width-big);
	margin: 0 auto;
}

.box .group:not(.group-nopad) > .wrapper:has(.columns) .title {
	margin-bottom: 4rem;
}

.box a:hover:not(footer nav a, .contactForm a) {
	color: var(--secondary-color);
}

.partner .wrapper {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	gap: 2em 10em;
	padding-bottom: 6rem;
	margin-top: -2rem;
}

.partner .wrapper.last-child-centered > a:last-child {
	grid-column: 2;
}

.partner a {
	transition: all .25s ease-in-out;
}

.partner a>img {
	display: block;
	width: 100%;
}

.partner a:hover {
	transform: scale(1.05);
}

.eyecatcher .wrapper
{
	position: relative;
}

.eyecatcher .content {
	position: absolute;
	display: flex;
	bottom: calc(clamp(150px, 28vw, 450px) / 1.25);
	left: 20vw;
	background-size: 100%;
	background-position: center;
	z-index: 1;
}

.eyecatcher .content {
	width: clamp(150px, 28vw, 450px);
}

.eyecatcher .button-bg,
.eyecatcher .typo {
	position: absolute;
}

.eyecatcher .button-bg {
	filter: drop-shadow(0px 0px 10px #000000);
}

.eyecatcher .typo {
	font-size: clamp(.5em, 1.8vw, 1.45em);
	font-family: 'Officina', serif;
	line-height: 1.1;
	color: white;
	padding: 3.25em 3.5em;
	transform: rotate(-10deg);
}

.swiper {
	overflow-y: initial;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
	display: none;
}

.group .slideshow {
	margin-bottom: 4em;
}

.slideshow .wrapper,
.googlemap .wrapper,
.googlemaps .wrapper {
	max-width: 2400px;
	margin: 0 auto;
}

.image-link .legend,
.slideshow .swiper-slide > .legend {
	position: absolute;
	color: black;
	text-align: start;
	text-shadow: none;
	left: 0;
	bottom: 0;
	text-align: center;
	padding: .5em 1em;
	width: fit-content;
	background-color: var(--primary-color);
	color: white;
}

.slideshow.large .swiper-slide > img {
	display: block;
}

.button-links .items {
	display:flex;
	gap: 1em 3em;
	flex-wrap:wrap;
	justify-content: center;
}

.button-links span {
	font-size: .9em;
	align-self: start;
}

.button-links .items .icon {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: minmax(0, 1fr) .3fr;
	font-weight: 400;
	max-width: 10em;
	width: 100%;
}

.button-links .items .icon:hover {
	color: black;
}

.button-links .items .icon:hover > img {
	transform: scale(1.1);
}

.button-links .items .icon img {
	width: 100%;
	padding-bottom: 1em;
	transition: all .2s ease-in-out;
}

.contactform .wrapper {
	max-width: var(--content-width-big);
	margin: auto;
}

.consent-dialog .wrapper {
	max-width: var(--content-width-big);
}

.accordion .accordion-header h3
{
	margin: 0;
	font-size: clamp(.8em, 2.5vw, 1.2em);
	display: flex;
	align-items: baseline;
	gap: .5em;
	transition: all .1s ease-in-out;
}

.accordion .accordion-header h3:before 
{
	flex-shrink: 0;
	text-align: center;
	content: "\f054";
	font: var(--fa-font-regular);
	width: 1em;
	transition: all .1s ease-in-out;
}

.accordion .accordion-item {
	margin: 2em 0;
}

.accordion .accordion-item h3:hover {
	cursor: pointer;
}

.accordion .accordion-item.toggled .accordion-header h3:before 
{
	transform: rotate(90deg);
}

.accordion .accordion-item:not(.toggled) .accordion-body
{
	display: none;
}

.columns.element .items
{
	display:grid;
	gap: var(--content-padding);
}

.columns.element .items-2
{
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3em;
}

.columns.element .items-2 .image-link .item {
	text-align: center;
}

.columns.element .items-2 .image-link .legend {
	position: static;
}

.box .columns .items .text {
	text-align: start;
}

.group > .wrapper > .team.element {
	margin-top: 6rem;
}

.team > .wrapper {
	max-width: var(--content-width);
	margin: 0 auto;
}

.team .items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 5em 2em;
	text-align: center;
}

.team .item {
	display: flex;
	flex-direction: column;
}


.team .title.element {
	margin: 0;
	font-size: 1.5em;
}

.team .text.element {
	margin-top: 1em;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.team .text.element .wrapper {
	margin: 0;
}

.team .text.element a {
	text-decoration-color: var(--navi-color);
}

.team img {
	width: 100%;
	border-radius: 50%;
	padding: 1em;
	box-sizing: border-box;
}

footer {
	text-align: start;
	background-color: var(--footer-bg-color);
	color: var(--footer-text-color);
}

footer > .wrapper {
	max-width: var(--content-width-big);
	margin: 0 auto;
	padding: 5rem var(--content-padding-horizontal);
	display: grid;
	align-items: center;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr)  repeat(2, minmax(0, 1fr));
}

footer .social-media {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-size: clamp(1.25em, 2.5vw, 1.75em);
}

footer .typo {
	font-weight: 400;
	align-self: start;
	font-size: clamp(0.6em, 1.4vw, 1em);
}

footer nav a {
	color: var(--footer-text-color);
}

@media(max-width:1550px) {
	.eyecatcher .content {
		left: var(--content-padding-horizontal);
	}
}

@media(max-width:1200px) {
	header .wrapper {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}

	header .banner {
		display: none;
	}

	.layout2cols .items {
		grid-template-columns: auto;
	}
}

@media(max-width:1000px) {
	header nav {
		gap: 0;
		margin-top: 1em;
	}

	header nav a {
		padding: 1.5em 2.5em;
		border-bottom: 1px solid var(--primary-color);
	}
	header nav a:first-child {
		border-top: 1px solid var(--primary-color);
	}


	header .language 
	{
		right: 1em;
	}

	header .wrapper,
	footer .wrapper {
		grid-template-columns: auto;
		gap: .5em;
		padding: 1em;
	}

	.stripes > span {
		height: .8em;
		border-bottom: 8px solid white;
	}

	.stripes > span:first-child {
		height: 1.6em;
	}

	footer .wrapper {
		text-align: center;
		justify-content: center;
	}

	footer .logo {
		display: flex;
		justify-content: center;
	}

	header .items {
		gap: 2em;
	}
	
	.scrolled header .wrapper {
		padding: .5em 1em;
	}

	.toggled header nav
	{
		justify-self: center;
		text-align: center;
		width: 100%;
		flex-wrap: nowrap;
	}

	.toggled header nav {
		display: flex;
		flex-direction: column;
		justify-content: center;
		transition: all .5s ease-in-out;
	}

	
	.team .items {
		grid-template-columns: 1fr;
		gap: 2em;
	}

	.team .item {
		align-items: center;
	}

	.team img {
		max-width: 10em;
	}

	main .group:not(.group-nopad) > .wrapper,
	.contactform .wrapper,
	.partner .wrapper
	{
		padding: 2em 1em;
	}
	
	main section:first-child .group .wrapper .slideshow:first-child 
	{
		margin-top: -2em;
	}

	.consent-dialog .wrapper {
		padding: 1em;
	}
}

@media(max-width:850px) {
	.partner .wrapper {
		gap: 2em;
	}
}

@media(max-width:600px) {
	.eyecatcher .content {
		top: unset;
		bottom: 6em;
	}

	.columns.element .items-2 {
		grid-template-columns: minmax(0, 1fr);
		gap: 1em;
	}

	.group > .wrapper > .team.element {
		margin-top: 3rem;
	}
}

@media(max-width:500px) 
{
	.stripes > span {
		height: .5em;
		border-bottom: 5px solid white;
	}

	.stripes > span:first-child {
		height: 1em;
	}

	.group .element 
	{
		margin: 1em 0;
	}

	.partner .wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.partner .wrapper.last-child-centered > a:last-child {
		grid-column: auto;
	}

	.layout2cols .items {
		gap: 2em;
	}

	.button-links .items {
		justify-content: center;
	}

	.consent-cover-info {
		font-size: 14px;
	}

	.swiper-button-next:after,
	.swiper-button-prev:after {
		font-size: 2em;
	}

	footer .wrapper {
		text-align: center;
	}

	footer nav {
		flex-direction: column;
		gap: 0;
	}

	.fancybox__content .group > .wrapper,
	.consent-settings .group > .wrapper {
		padding: 1em;
	}
}

@media(max-width: 400px) {
	.partner .wrapper {
		grid-template-columns:  minmax(0, 1fr);
	}
}