@import "reset.css";

/* @group FONTS */

/* Open Type Features does not work with local font */

@font-face {
    font-family: 'Fira Sans';
    src: url('fonts/FiraSans-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('fonts/FiraSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
	font-family: 'icomoon';
	src:  url('fonts/icomoon.eot?14jwta');
 	src:  url('fonts/icomoon.eot?14jwta#iefix') format('embedded-opentype'),
		  url('fonts/icomoon.ttf?14jwta') format('truetype'),
    	  url('fonts/icomoon.woff?14jwta') format('woff'),
    	  url('fonts/icomoon.svg?14jwta#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

.submenu__item--open > .submenu__item__link:after, .submenu__item__link:after, .breadcrumb__item:after, .arrowlist__item__arrow:before, .arrowlink:before, .mm-next:after, .mm-prev:before {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	
	font-size: .6em;
}

.icon-arrow-right:before, .submenu__item__link:after, .breadcrumb__item:after, .arrowlist__item__arrow:before, .arrowlink:before, .mm-next:after {
	content: "\e900";
}

.icon-arrow-bottom:before, .submenu__item--open > .submenu__item__link:after {
	content: "\e901";
}

.icon-arrow-left:before, .mm-prev:before {
	content: "\e902";
}
.icon-arrow-top:before {
	content: "\e903";
}

/* @end */

/* @group TYPO */

html, body,
.button {
	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 17px;
	line-height: 1.5em;
}

.title {
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.1em;
	letter-spacing: 0;
}

.claim, h1 {
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.5em;
}

.menu {
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1em;
}

@media (min-width: 50em) {
	
	.title {
		font-size: 3rem;
		line-height: 1.1em;
	}
	
	.claim, h1 {
		font-size: 2rem;
		line-height: 1.1em;
	}
	
}

strong, h1, h2, h3,
.mobile-menu-toggle,
.tabmenu,
.submenu__item__link,
.breadcrumb__item,
.arrowlist__item__link,
.arrowlink,
.button {
	font-weight: 400;
}

h2 {
	text-transform: uppercase;
}

/* MARGINS */

.main {
	margin-bottom: 3rem;
}

.main {
	padding-top: 2.25rem;
}

h3 + h2 {
	margin-top: 2.25rem;
}

h1, .tabmenu {
	margin-bottom: 2.25rem;
}

.claim, .footer {
	margin-bottom: 1.5rem;
}

h2, h3, p + .arrowlist {
	margin-top: 1.5rem;
}

p, h2, h3, .content ul, .arrowlist__item, .collist__item {
	margin-bottom: .75rem;
}

	.collist__item--no-margin-bottom {
		margin-bottom: 0;
	}

.content li {
	margin-bottom: .5rem;
}

@media (max-width: 49.999999999em) {
	
	.claim {
		margin-bottom: .75rem;
	}
	
	.main {
		padding-top: 1.25rem;
	}
	
	h1, .tabmenu {
		margin-bottom: 1.5rem;
	}

}

.main ul:not([class]):has(+ *) {
    margin-bottom: 1.5em;
}

	.main ul:not([class]) li {
	   display: flex;
	}
	
		.main ul:not([class]) li:not(:has(> a:only-child))::before {
	    content: "•";
	    flex: 0 0 1em;
			padding-right: .25em;
			text-align: center;
		}
	
	.main ul:not([class]) li:has(+ li) {
	   margin-bottom: .5em;
	}

/* TEXT */

.footer, .text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.text-left {
	text-align: left;
}

sup {
	position: relative;
	top: -0.25em;
	font-size: .8em;
	line-height: 0;
	vertical-align: baseline;
}

.numbers-versal { /* Versalziffern */
  -webkit-font-feature-settings: "tnum" 1; 
  -moz-font-feature-settings: "tnum" 1; 
  -moz-font-feature-settings: "tnum=1"; 
  -ms-font-feature-settings: "tnum" 1; 
  -o-font-feature-settings: "tnum" 1; 
  font-feature-settings: "tnum" 1;
}

/* LIST */

.list__item {
	display: table-row;
}

.list__item:before {
	display: table-cell;
	content: "–";
	width: 1rem;
}

/* DECORATIONS */

.tabmenu__item, .arrowlink, .arrowlist__item__link {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: transparent;
}

.main a:not([class]),
.tabmenu__item:hover,
.arrowlink:hover,
.arrowlist__item__link:hover,
.footer__link a,
.stage a,
.button:hover {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #cae7fa;
}

	.stage a {
		border-bottom-color: #0086b4;
	}

.main a:not([class]):hover, .footer__link a:hover, .stage a:hover {
	color: #c00b1d;
}

.button {
	
}

	.button:after {
		content: url('images/arrow-right.svg');
		display: inline-block;
		padding-left: .5em;
	}

.arrowlink {
	display: inline-flex;
}

	.arrowlink:before {
		padding-right: .5rem;
		line-height: 1.5rem;
	}

/* @end */

/* @group COLORS */

html, body {
	color: #333333;
}

.color--red, .title, .submenu__item__link:after, .breadcrumb__item:after, .arrowlist__item__arrow, .arrowlink:before, .quotation,
.mm-next:after {
	color: #c00b1d;
}

.color--blue,
.claim,
.menu,
h1,
.mobile-menu-toggle,
.tabmenu,
.submenu__item__link,
.breadcrumb__item,
.arrowlist__item__link,
.arrowlink,
.button {
	color: #0086b4;
}

.menu, .mobile-menu-toggle, .submenu__item--active .submenu__item__link, .submenu__item__link:hover {
	background-color: #e4f3fc;
}

.menu__item--active, .tabmenu__item--active, .submenu__item--open > .submenu__item__link {
	background-color: #cae7fa;
}

.quotation__line {
	position: relative;
    left: .5rem;
    box-shadow: .5rem 0 0 0 #f6dbdd, -.5rem 0 0 0 #f6dbdd;
    background-color: #f6dbdd; /* 15% red */
    box-decoration-break: clone;
}

.quotation {
    
}

.footer {
	color: #808080;
}

/* @end */

/* @group LAYOUT */

body {
	min-width: 320px;
}

.main, .footer {
	padding-right: 1.5rem; padding-left: 1.5rem;
}

@media (min-width: 1280px) {
	
	.frame {
		max-width: 1080px;
		margin-right: auto; margin-left: auto;
		box-shadow: 0 0 15px rgba(0,0,0,.15);
	}
	
	.frame:after {
		content: "";
		display: table;
	}
}

/* @group columns */

.section {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

	.section__col--center {
		text-align: center;
	}
	
@media (max-width: 49.999999999em) {
	
	.section {
		flex-wrap: wrap;
	}
	
		.section__col {
			width: 100%;
		}
	
		.section__col--submenu-wrapper {
			order: 2;
		}
		
		.section__col--submenu-wrapper + .section__col {
			order: 1;
		}
	
}

@media (min-width: 50em) {
	
	.main, .footer {
		padding-right: 3rem; padding-left: 3rem;
	}
		
	.section {
		
	}
		
		.section__col {
			 
		}
		
		.section__col--left {
			width: 50%;
			padding-right: 1rem;
			text-align: right;
		}
		
		.section__col--right {
			width: 50%;
			padding-left: 1rem;
			text-align: left;
		}
		
		.section__col--center {
			width: 100%;
		}
		
	.hide-desktop {
		display: none;
	}

}



/* @end */

/* @end */

/* @group header */

.header {
	text-align: center;
}

.logo {
	width: auto; height: 3rem;
	margin-top: 2rem; margin-bottom: .7rem;
}

	@media (min-width: 50em) {
	
		.logo {
			width: auto; height: 5rem;
		}

	}

.title {
	display: block;
	margin-bottom: .5em;
}

.claim {
	
}

.menu {	
	
}

	.menu__item {
		display: inline-block;
		padding-top: .5em; padding-bottom: .5em;
		padding-right: .4em; padding-left: .4em;
	}
	
	
.stage__picture {
	width: 100%;
	height: auto;
}

/* @end */

/* @group mmenu */

@media (max-width: 49.999999999em) {

	.menu {
		display: none;
	}
}

@media (min-width: 50em) {
	
	.mobile-menu-toggle, .breadcrumb {
		display: none;
	}
}


.mobile-menu-toggle {
	position: fixed;
	right: 0; top: 0;
	padding-top: .5rem; padding-bottom: .5rem;
	padding-left: .75rem; padding-right: .75rem;
}

.mm-menu {
    background: #fff;
    font-weight: 400;
}

	.mm-panels {
		
	}
	
		.mm-panel {
			
		}
		
		.mm-panels > .mm-panel {
		   padding: 0;
		}
		
		.mm-panels > .mm-panel:after,
		.mm-panels > .mm-panel:before {
		    display: none;
		    
		}

		.mm-panels > .mm-panel.mm-hasnavbar {
			padding-top: 4rem; /* = height of .mm-navbar */
		}
	
			/* navbar */

			.mm-navbar {
				height: 4rem;
			    padding: 1rem;
			    border-bottom: 1px solid #e5e5e5;
			    
				font-size: 1.25rem;
    			line-height: 2rem;
			}
										
				.mm-menu .mm-navbar a,
				.mm-menu .mm-navbar > * { /* title */
					padding: 0 1rem;
				
				  	color: #c00b1d;
				}
								
				
			/* listview*/
			
			.mm-iconpanel .mm-panel.mm-opened {
			    border-left: none;
			    
			}
												
			.mm-panels > .mm-panel > .mm-listview {
				margin: 0;
				font-size: 1rem;
    			line-height: 1.2em;
			}
			
			.mm-panels > .mm-panel > .mm-listview:first-child,
			.mm-panels > .mm-panel > .mm-navbar + .mm-listview {
			    margin-top: 0;
			}

				.mm-listview li:not(.mm-divider):after {
					position: inherit;
					right: auto; left: auto;
					border: none;
					
				}
				
				/* listview items */
				
				.mm-listview > li > a,
				.mm-listview > li > span {
					text-overflow: normal;
					white-space: normal;
					overflow: visible;
					color: #0086b4;
					background-color: transparent;
					border-bottom: 1px solid #e5e5e5;
				}
				
				.mm-listview > li,
				.mm-listview > li .mm-next,
				.mm-listview > li .mm-next:before,
				.mm-listview > li:after {
					border-color: #e5e5e5;
				}
				
					.mm-listview > li > a,
					.mm-listview > li > span {
					    padding: 1rem;
					}
					
	/* arrow */
	
	.mm-listview .mm-next,
	.mm-navbar .mm-prev {
	    background: none;
	    width: 1rem;
	    
	    display: flex;
	}
	
	.mm-navbar .mm-prev {
		height: 4rem;
	}
	
	.mm-next:after,
	.mm-prev:before {
	    border: none;
	    transform: none;
	    height: auto;
	    width: auto;
	    
	    display: inline-flex;
		align-items: center;
	}
	
	.mm-next:after {
		right: 1rem;
		
	}
	
	.mm-prev:before {
	    left: 1rem;
	}
					

/* @end */

/* @group tabmenu */

.tabmenu {
	width: 100%;
	text-align: center;
}

	.tabmenu__item {
		display: inline-block;
		padding-right: .5rem; padding-left: .5rem;
	}


/* @end */

/* @group submenu */

.submenu {
	text-align: right;
}

	.submenu__item {
		display: block;
	}
	
		.submenu__item__link {
			cursor: pointer;
			display: inline-flex;
			padding-top: .25rem; padding-bottom: .25rem;
			padding-left: .75rem;
			margin-bottom: .25rem;
			text-align: right;
		}
		
		.submenu__item__link:after {
			display: inline-flex;
			width: 2rem;
			flex-shrink: 0;
			line-height: 1.5rem;
			justify-content: center;
			align-items: center;
		}
		
					
.submenu__item .submenu {
	display: none;
	margin-bottom: .5rem;
}

.submenu__item--open .submenu {
	display: block;
}

/* @end */

/* @group footer */

.footer {
	display: flex;
}

	.footer__link {
		width: 50%;
		padding-right: 1rem; padding-left: 1rem;
	}
	
	.footer__link:nth-child(1) {
		text-align: right;
	}
	
	.footer__link:nth-child(2) {
		text-align: left;
	}

/* @end */

/* @group arrowlist, collist */

.arrowlist {
	
}
	
	.arrowlist__item {
		display: flex;
		width: 100%;
	}
		
		.arrowlist__item__title {
			width: calc(50% - 1rem);
			flex-shrink: 0;
			text-align: right;
		}
		
		.arrowlist__item__arrow {
			width: 2rem;
			flex-shrink: 0;
			text-align: center;
		}
		
		.arrowlist__item__text {
			width: calc(50% - 1rem);
			flex-shrink: 0;
			text-align: left;
		}
		
		.news .arrowlist__item__text {
			padding-right: 1rem;
		}

/* @end */

/* @group collist */

.collist {
	text-align: center;
}

	.collist__item {
		
	}
	
		.collist__item__title, .collist__item__text {
			display: block;
		}

@media (max-width: 49.999999999em) {
	
	.collist__item {
		margin-bottom: .75rem;
	}
	
}

@media (min-width: 50em) {
	
	.collist__item {
		display: flex;
		width: 100%;
	}
	
		.collist__item__title {
			width: 50%;
			padding-right: 1rem;
			text-align: right;
		}
		
		.collist__item__text {
			width: 50%;
			padding-left: 1rem;
			text-align: left;
		}
}



/* @end */

/* @group breadcrumb */

.breadcrumb {
	margin-bottom: 1.5rem;
}

	.breadcrumb__item {
		display: inline-block;
		white-space: nowrap;
	}
	
	.breadcrumb__item:after {
		display: inline-block;
		width: 1rem;
		margin-left: .15rem;
		text-align: center;
	}

/* @end */

/* @group news */

.news {
	padding-top: 1rem; padding-bottom: .5rem;
	background-color: #cae7fa;
	text-align: center;
}

/* @end */

/* @group slider */

.slider {
	margin-top: 1rem;
	padding-right: 3rem; padding-left: 3rem;
	font-size: 1.5rem;
	line-height: 1.5em;
	text-align: center;
	color: #c00b1d;
}

	.slider__content {
		max-width: 30em;
		margin-right: auto; margin-left: auto;
		padding-top: 3rem;
	}
	
		.slider__content p:last-child {
			margin-bottom: 0;
		}
		
@media (max-width: 49.999999999em) {
	
	.slider {
		margin-bottom: 1rem;
		font-size: 1rem;
		line-height: 1.5em;
	}
	
}

/* @end */