/* @group TYPO */
  
@font-face {
	font-family: 'Kiro';
	src: url('../fonts/2B875C_1_0.woff') format('woff'),
			 url('../fonts/2B875C_1_0.ttf') format('truetype');
	font-weight: normal;
	font-display: swap
}

@font-face {
	font-family: 'Kiro';
	src: url('../fonts/2B875C_0_0.woff') format('woff'),
			 url('../fonts/2B875C_0_0.ttf') format('truetype');
	font-weight: bold;
	font-display: swap
}

/* @end */

/* @group VARIABLES */

:root {
	
	--base-color: #030303;
	--background-color: #ffffff;
	--primary-color: #00b5e2;
	--white-color: #ffffff;
	--grey-color: #707070;
	--light-grey-color: #b3b3b3;
	--subtle-grey-color: #d9d9d9;
	
	--text-base: 1rem; /* 20px */
	--text-base-bold: 1.1rem;
	--text-sm: .85rem; /* 17px */
	--text-sm-bold: .935rem;
	--text-md: 1.2rem; /* 24px */
	--text-md-bold: 1.3rem;
	--text-lg: 1.5rem; /* 30px */
	--text-lg-bold: 1.65rem;
	--text-xl: 2rem; /* 40px */
	--text-xl-bold: 2.2rem;
	
	--spacing-xs: .7rem;
	--spacing-sm: 1.4rem;
	--spacing-md: clamp(2.1rem, 4vw, 2.8rem);
	--spacing-lg: clamp(2.8rem, 6vw, 4.8rem);
	--spacing-xl: clamp(3.5rem, 8vw, 7.0rem);
	--spacing-xxl: clamp(4.8rem, 10vw, 9.1rem);
	
	--logo-width: 3.5rem;
	
	--body-min-width: 320px;
}

	@media (max-width: 799px) {
		
		:root {
			--text-sm: 1rem;
			--text-sm-bold: 1.1rem;
		}
		
	}

	@media (max-width: 999px) {
		
		:root {
			--text-xl: 1.6rem; /* 28px */
			--text-xl-bold: 1.75rem;
		}
		
	}

/* @end */

/* @group BASE */

html {
	min-width: var(--body-min-width);
}

html,
body {
	font-family: 'Kiro', Helvetica, Arial, sans-serif;
	font-size: 20px;
	line-height: 1.4em;
}

	@media (max-width: 799px) {
		
		html,
		body {
			font-size: 18px;
			line-height: 1.4em;
		}
		
	}
	
strong {
	font-size: 1.1em;
	font-weight: bold;
}

h1 {
	font-size: var(--text-xl-bold);
	font-weight: bold;
	line-height: 1.1em;
}
	
h2 {
	font-size: var(--text-lg-bold);
	font-weight: bold;
	line-height: 1.2em;
}

h1 + h2 {
	margin-top: 2.1rem;
}

p + h2 {
	margin-top: 2.1rem;
}

h3 {
	font-size: var(--text-md-bold);
	font-weight: bold;
	line-height: 1.2em;
}

p + h3 {
	margin-top: 2.1rem;
}

	h1 em,
	h2 em,
	h3 em {
		font-size: var(--text-bold);
		font-weight: normal;
	}

p:not(:last-child) {
	margin-bottom: 1em;
}

ul:not(:last-child) {
	margin-bottom: 1em;
}
	
li {
	display: table;
}

	li::before {
		content: "•";
		display: table-cell;
		width: 1em;
	}

h1 + p,
h1 + ul,
h2 + p,
h2 + ul,
h3 + p,
h3 + ul {
	margin-top: .7em;
}

a {
	transition: color .15s ease-in-out 0s;
}

.topbar a,
.offcanvas__info a,
.main a,
.footer a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.main a:hover {
	color: var(--primary-color);
}
	
img {
	max-width: 100%;
	height: auto;
}

/* @end */

/* @group Topbar */

.topbar {
	padding-top: .35rem;
	padding-bottom: .35rem;
	padding-right: 1rem;
	padding-left: 1rem;
	background-color: var(--primary-color);
	font-size: var(--text-sm);
	line-height: 1.2em;
	text-align: center;
}

	@media (max-width: 799px) {
		
		.topbar {
			display: none;
		}
		
	}

/* @end */

/* @group Menu */

.menu {
	display: flex;
	row-gap: 1rem;
	color: var(--base-color);
	font-weight: bold;
}
	
	.menu > * {
		white-space: nowrap;
	}
	
	@media (max-width: 799px) {
		
		.header .menu {
			display: none;
		}
		
	}

/* @end */

/* @group Menu toggle */

.menu-toggle {
	position: fixed;
  z-index: 200;
  top: 0;
  right: 0;
  left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: var(--body-min-width);
	padding: .35rem;
	background-color: var(--primary-color);
}
	
	@media (min-width: 800px) {
		
		.menu-toggle {
			display: none;
		}
		
	}

/* @end */

/* @group Hamburger */

.hamburger {
	position: relative;
	width: 1.4rem;
	height: 1.4rem;
}

	.hamburger > * {
		display: block;
		position: absolute;
		top: calc(50% - .05rem);
		height: .1rem;
		width: 100%;
		background-color: currentColor;
		transition: all 300ms ease-in-out 0s;
	}
	
	.hamburger > *:nth-child(1) {
		transform: translateY(0.4em);
	}

	.hamburger > *:nth-child(3) {
		transform: translateY(-0.4em);
	}
	
	/* isNavOpen */
	
	.hamburger.isOpen > *:nth-child(1) {
		width: 80%;
		margin-left: 10%;
		transform: rotate(45deg);
	}
	
	.hamburger.isOpen > *:nth-child(2) {
		opacity: 0;
	}
	
	.hamburger.isOpen > *:nth-child(3) {
		width: 80%;
		margin-left: 10%;
		transform: rotate(-45deg);
	}

/* @end */

/* @group Branding */

.branding {
	display: flex;
	align-items: flex-start;
	column-gap: var(--spacing-xs);
}

	.branding__logo {
		width: var(--logo-width);
		height: auto;
	}
	
	.branding__title {
		padding-top: .2em;
		font-size: var(--text-base-bold);
		font-weight: bold;
		line-height: 1rem;
	}

/* @end */

/* @group Header */

.header {
	position: absolute;
	z-index: 10;
	width: 100%;
	min-width: var(--body-min-width);
}

	.header__container {
		max-width: 1400px;
		margin-right: auto;
		margin-left: auto;
		display: flex;
		column-gap: 2.4rem;
		padding-top: 1.05rem;
		padding-right: var(--spacing-sm);
		padding-left: var(--spacing-sm);
	}

	.header .menu {
		flex-wrap: wrap;
		column-gap: 1.4em;
		padding-top: .2em;
		font-size: var(--text-base-bold);
		line-height: 1rem;
	}
	
		.header .menu a.active,
		.header .menu a:hover {
			color: var(--primary-color);
		}
	
	.header__quick-support {
		width: 2.4rem;
		height: 2.4rem;
	}
	
		.header__quick-support img {
			width: 100%;
			height: 100%;
		}
	
	@media (max-width: 799px) {
		
		.header {
			padding-top: 2.1rem; /* Placeholder for menu-toggle-bar */
		}
		
			.header .branding {
				flex-grow: 1;
			}
	
	}
	
	@media (min-width: 800px) {
		
			.header .menu {
				flex-grow: 1;
			}
		
	}
	
	@media (min-width: 1400px) {
		
		.header__container {
			width: unset;
			
		}
		
	}

/* @end */

/* @group Offcanvas */

.offcanvas {
	position: fixed;
	z-index: 100;
	top: 0;
	right: 0;
	left: 0;
	min-width: var(--body-min-width);
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	padding: 2.8rem 1.4rem 3.5rem;
	background-color: var(--primary-color);
	transform: translateY(-110vh); /* with -100vh there’s a bug on iOS 16.2 */
  transition: transform 0.3s ease;
}
		
.offcanvas.isOpen {
	transform: translateY(0);
}

	.offcanvas .branding {
		margin-bottom: 2.1rem;
	}

	.offcanvas .menu {
		flex-direction: column;
		padding-left: calc(var(--logo-width) + var(--spacing-xs));
		font-size: var(--text-md-bold);
		line-height: 1em;
	}
	
		.offcanvas .menu a.active {
			color: var(--white-color);
		}
	
	.offcanvas__info {
		padding-top: 2.1rem;
		padding-left: calc(var(--logo-width) + var(--spacing-xs));
		color: var(--white-color);
	}

	@media (min-width: 800px) {
		
		.offcanvas {
			display: none;
		}
		
	}

/* @end */

/* @group Main */

.main {
	
}

/* @end */

/* @group Hero */

.hero {
	position: relative;
	min-width: var(--body-min-width);
}

	.hero::before {
		content: "";
		display: block;
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		left: 0;
		height: 20%;
		background: linear-gradient(180deg, rgba(219,229,231,.7) 0%, rgba(219,229,231,0.7) 50%, rgba(219,229,231,0) 100%);
	}

	.hero::after {
		content: "";
		display: block;
		position: absolute;
		z-index: 1;
		bottom: 0;
		right: 0;
		left: 0;
		height: 30%;
		background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	}
	
	.hero img {
		width: 100%;
		height: 70vh;
		object-fit: cover;
	}

	@media (orientation: portrait) {
		
			.hero img {
				height: 60vh;
			}
			
	}
	
	@media (max-width: 799px) {
		
		.hero {
			margin-bottom: 1.4rem;
		}

	}

/* @end */

/* @group Block */

.block {
	position: relative;
	z-index: 10;
	padding-top: var(--spacing-md);
	padding-bottom: var(--spacing-md);
}

.hero + .block {
	margin-top: -10vh;
}

.block:not(.teasers-block):not(.voices-block):last-child {
	margin-bottom: var(--spacing-xl);
}

	@media (orientation: portrait) {
		
		.hero + .block {
			margin-top: -20vh;
		}
		
	}

/* @end */

/* @group Blocks */

/* @group cards-block */

.cards-block {
	
}

	.cards-block .text {
		margin-bottom: var(--spacing-sm);
	}
	
	@media (min-width: 1000px) {
		
			.cards-block .text {
				width: 50%;
			}
		
	}

/* @end */

/* @group cards-large-block */

.cards-large-block {
	
}
	
	@media (min-width: 1000px) {
		
			.cards-large-block .text {
				width: 50%;
			}
		
	}

/* @end */

/* @group image-block */

.image-block {
	
}
	
	.image-block__container {
		display: grid;
		column-gap: var(--spacing-md);
		row-gap: var(--spacing-sm);
	}
	
		.image-block--right .image-block__container .image-block__text {
			order: -1;
		}
	
		.image-block__figure img {
			width: 100%;
			border-radius: 1.75rem;
		}
	
	@media (min-width: 800px) {
		
		.image-block__container {
			grid-template-columns: 7fr 5fr;
		}
		
		.image-block--right .image-block__container {
			grid-template-columns: 5fr 7fr;
		}
		
	}

/* @end */

/* @group logos-block */

.logos-block {
	
}

	.logos-block .text {
		margin-bottom: var(--spacing-lg);
	}
	
	@media (min-width: 1000px) {
		
			.logos-block .text {
				width: 50%;
			}
		
	}

/* @end */

/* @group teasers-block */

.teasers-block {
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-xl);
	padding-bottom: var(--spacing-xxl);
	background-color: var(--base-color);
	color: var(--white-color);
}

.teasers-block + * {
	margin-top: var(--spacing-xl);
}

	.teasers-block .text {
		width: unset;
		margin-bottom: var(--spacing-md);
	}

/* @end */

/* @group text-block */

.text-block {
	
}

	@media (min-width: 1000px) {
		
			.text-block .text {
				width: 50%;
			}
		
	}

/* @end */

/* @group voices-block */

.voices-block {
	margin-top: var(--spacing-md);
	padding-top: var(--spacing-xl);
	padding-bottom: var(--spacing-xxl);
	background-color: var(--base-color);
	color: var(--white-color);
}

.voices-block + * {
	margin-top: var(--spacing-xl);
}

	.voices-block .bubbles {
		margin-bottom: var(--spacing-md);
	}

	.voices-block .bubble::after {
	  background: var(--base-color);
	}

/* @end */

/* @end */

/* @group Container */

.container {
	max-width: 1400px;
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--spacing-sm);
	padding-left: var(--spacing-sm);
}

	@media (min-width: 1000px) {
		
		.container {
			padding-right: calc(var(--spacing-sm) + var(--logo-width) + var(--spacing-xs));
			padding-left: calc(var(--spacing-sm) + var(--logo-width) + var(--spacing-xs));
		}
		
	}

/* @end */

/* @group Text */

.text {
	
}

/* @end */

/* @group Introtext */

.introtext {
	font-size: var(--text-xl);
	line-height: 1.3em;
}

/* @end */

/* @group Link */

.link {
	
}

* + .link {
	margin-top: var(--spacing-sm);
}

/* @end */

/* @group Cards / Card */

.cards {
	display: grid;
	gap: var(--spacing-xs);
}

.cards--large {
	gap: var(--spacing-md);
}
	
.card {
	padding: 1rem 1.4rem 1.4rem;
	border: 1px solid var(--base-color);
	border-radius: 1.75rem;
	background-color: rgba(255,255,255,0.85);
	font-size: var(--text-sm);
	line-height: 1.3em;
}

.card--large {
	padding: 1.4rem 1.75rem 1.75rem;
	font-size: var(--text-base);
	line-height: 1.3em;
}

.card--contact {
	width: 18rem;
	max-width: 100%;
	background: url('../images/contact-bar.svg') repeat-x left top;
	background-size: 62px 15px;
}

.card--news {
	border-color: var(--primary-color);
	background-color: var(--primary-color);
	color: var(--white-color);
}

.card--contact.card--large {
	padding-top: 2.1rem;
}

.cards--large > .card--contact:first-child:not(:only-child) {
	justify-self: end;
}

	@media (min-width: 600px) and (max-width: 1199px) {
		
		.cards {
			grid-template-columns: repeat(2, 1fr);
		}
		
	}
	
	@media (min-width: 1200px) {
		
		.cards {
			grid-template-columns: repeat(4, 1fr);
		}
		
		.cards--large {
			grid-template-columns: repeat(2, 1fr);
		}
		
			.cards--large > *:only-child {
				grid-column: 2;
			}
		
	}

/* @end */

/* @group Bubbles / Bubble */

.bubbles {
  display: flex;
  flex-direction: column;
	margin-bottom: var(--spacing-sm);
}

.bubble {
  border-radius: 1rem;
  padding: .4rem .75rem;
	font-size: var(--text-sm);
	line-height: 1.3em;
}

	.bubble::before,
	.bubble::after {
		content: "";
	  position: absolute;
	  z-index: 1;
	  bottom: 0;
	}

.bubble--left {
	align-self: flex-start;
  background-color: var(--subtle-grey-color);
	color: var(--base-color);
  position: relative;
}

	.bubble--left::before {
	  left: -.35rem;
	  height: 1rem;
	  width: 1rem;
	  background: var(--subtle-grey-color);
	  border-bottom-right-radius: .75rem;
	}
	
	.bubble--left::after {
	  left: -.5rem;
	  width: .5rem;
	  height: 1rem;
	  background: white;
	  border-bottom-right-radius: .5rem;
	}

.bubble--right {
	align-self: flex-end;
  color: white;
  background-color: var(--primary-color);
  position: relative;
}

	.bubble--right::before {
	  right: -.4rem;
	  height: 1rem;
	  width: 1rem;
	  background-color: var(--primary-color);
	  border-bottom-left-radius: .75rem;
	}
	
	.bubble--right::after {
	  right: -.5rem;
	  width: .5rem;
	  height: 1rem;
	  background: var(--background-color);
	  border-bottom-left-radius: .5rem;
	}

/* @end */

/* @group Logos / Logo */

.logos {
	display: grid;
	grid-template-columns: 	repeat(auto-fit, minmax(min(100%, 7em), 1fr));
	column-gap: var(--spacing-md);
	row-gap: var(--spacing-md);
}

	.logo img {
		width: 100%;
	}
	
	@media (max-width: 599px) {
		
		.logos {
			grid-template-columns: repeat(2, 1fr);
		}
		
	}
	
	@media (min-width: 600px) and (max-width: 799px) {
		
		.logos {
			grid-template-columns: repeat(3, 1fr);
		}
		
	}
	
	@media (min-width: 800px) and (max-width: 999px) {
		
		.logos {
			grid-template-columns: repeat(4, 1fr);
		}
		
	}
	
	@media (min-width: 1000px) {
		
		.logos {
			grid-template-columns: repeat(5, 1fr);
		}
		
	}

/* @end */

/* @group Teasers / Teaser */

.teasers {
	display: grid;
	column-gap: var(--spacing-sm);
	row-gap: var(--spacing-lg);
	justify-items: center;
}

	@media (min-width: 1000px) {
		
		.teasers {
			grid-template-columns: repeat(3, 1fr);
		}
		
	}
	
.teaser {
	max-width: 14rem;
}

	.teaser__figure {
		width: 7rem;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: .7rem;
		padding: 1.4rem;
		border-radius: 50%;
		border: .2rem solid var(--primary-color);
	}
	
		.teaser__figure img {
			width: 100%;
		}
		
		.teaser h1,
		.teaser h2,
		.teaser h3 {
			margin-bottom: 1.05rem;
			text-align: center;
		}
		
		.teaser p,
		.teaser ul {
			color: var(--primary-color);
		}

/* @end */

/* @group Voice */

.voice {
	display: block;
	max-width: 50rem;
	margin-right: auto;
	margin-left: auto;
}

	.voice__text {
		font-size: var(--text-lg);
		line-height: 1.3em;
	}
	
	.voice__text:not(:last-child) {
		margin-bottom: .7rem;
	}

/* @end */

/* @group Splide */

.splide {
	
}
	
	.splide__pagination {
		margin-top: var(--spacing-sm);
		color: var(--light-grey-color);
		line-height: 1rem;
	}
	
		.splide__pagination > * {
			display: unset;
		}
		
			.splide__pagination > *::before {
				content: "";
				display: none;
				width: unset;
			}
			
			.splide__pagination__page {
				width: 2rem;
				height: 2rem;
				transition: all .15s ease-in-out 0s;
			}
			
				.splide__pagination__page::before {
					content: "";
					display: block;
					border: .1rem solid currentColor;
					border-radius: 50%;
				}
				
				.splide__pagination__page:not(.is-active)::before {
					margin-left: .25rem;
					margin-right: .25rem;
					width: .5rem;
					height: .5rem;
				}
				
				.splide__pagination__page.is-active::before {
					background-color: currentColor;
					width: .75rem;
					height: .75rem;
				}
			
				.splide__pagination__page:hover {
					cursor: pointer;
				}
				
					.splide__pagination__page:hover::before {
						background-color: currentColor;
					}

/* @end */

/* @group Footer */

.footer {
	padding-top: 48vw;
	padding-bottom: var(--spacing-lg);
	background: url(../images/sbs-karte-muenchen.png) var(--primary-color);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: top left;
	font-size: var(--text-sm);
	line-height: 1.3em;
}

	.footer__figure {
		
	}
	
	.footer__container {
		
	}

	.footer__colophon {
		
	}
		
	.footer__bottombar {
		margin-top: var(--spacing-md);
	}

/* @end */

/* @group Colophon */

.colophon {
	
}

	.colophon strong {
		color: var(--white-color);
	}

/* @end */

/* @group Bottombar */

.bottombar {
	display: flex;
	flex-direction: column;
	row-gap: 1em;
	color: var(--white-color);
}

	.bottombar__menu {
		display: flex;
		column-gap: 1em;
	}

/* @end */