/* saira-600 - latin */
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 600; src: url("../fonts/saira-v2-latin-600.eot");
  /* IE9 Compat Modes */
src: local("Saira SemiBold"), local("Saira-SemiBold"), url("../fonts/saira-v2-latin-600.eot?#iefix") format("embedded-opentype"), url("../fonts/saira-v2-latin-600.woff2") format("woff2"), url("../fonts/saira-v2-latin-600.woff") format("woff"), url("../fonts/saira-v2-latin-600.ttf") format("truetype"), url("../fonts/saira-v2-latin-600.svg#Saira") format("svg");
  /* Legacy iOS */ }
/* roboto-regular - latin */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url("../fonts/roboto-v18-latin-regular.eot");
  /* IE9 Compat Modes */
src: local("Roboto"), local("Roboto-Regular"), url("../fonts/roboto-v18-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v18-latin-regular.woff2") format("woff2"), url("../fonts/roboto-v18-latin-regular.woff") format("woff"), url("../fonts/roboto-v18-latin-regular.ttf") format("truetype"), url("../fonts/roboto-v18-latin-regular.svg#Roboto") format("svg");
  /* Legacy iOS */ }
.slider { width: 70%; height: 10px; position: relative; display: inline-block; border-left: solid 2px #bbb0ad; border-right: solid 2px #bbb0ad; font-family: 'Saira', sans-serif; }
.slider > * { position: absolute; }
.slider .bar { background: #bbb0ad; height: 2px; position: absolute; top: 4px; }
.slider > .marker { flex: none; position: absolute; box-sizing: border-box; height: 14px; width: 26px; border: 2px solid #bbb0ad; border-radius: 3.5px; left: 2px; top: -2px; }
.slider .left { left: 0px; }
.slider .right { right: 0px; }
.slider .relative { position: relative; }
.slider .initial { left: 0px; top: 0px; right: 0px; height: 14px; display: flex; opacity: 0; -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; }
.slider .initial > * { flex: 1 1 auto; }
.slider .initial .right { left: 0px; }
.slider .initial .left { right: 0px; }
.slider .initial .text { flex: none; line-height: 10px; margin: 0 2px; font-size: 10px; }
.slider .initial.fresh { opacity: 1; }

/*
.slider{ width: $slider-width; height: $slider-height; position: relative; }
.slider-input{
 height: $slider-height; position: relative; > * { position: absolute; } .initial{ display: flex; > * { flex: 1 1 auto; } .bar-container { position: relative; .bar.horizontal{ position: absolute; left: 0px; right: 0px; } } } .bar{ background: $background-color; height: $slider-thickness; }

 > .marker{ flex: none; position: absolute; box-sizing: border-box; height: $slider-height+$slider-marker-sizegain; width: $slider-marker-width; border: $slider-thickness solid $background-color; border-radius: ($slider-height+$slider-marker-sizegain)/4; left: $slider-width/40; top: -($slider-marker-sizegain/2); } .bar.horizontal{ top: (($slider-height)-$slider-thickness)/2; } > .bar.vertical{ display: block; position: absolute; width: $slider-thickness; height: $slider-height; } .left { left: 0px; } .right{ right: 0px; } > .text { flex: none;  line-height: $slider-height; margin: 0 $slider-thickness; }
} */
.brandSlider { text-align: center; }
.brandSlider .brandSlider-container { width: 100%; height: 100px; display: inline-block; white-space: nowrap; overflow: hidden; }
.brandSlider .brandSlider-container .images { height: 100px; padding-bottom: 17px; overflow-x: scroll; overflow-y: hidden; box-sizing: content-box; }
.brandSlider .brandSlider-container .images .helper { height: 100%; vertical-align: middle; display: inline-block; }
.brandSlider .brandSlider-container .images img.editable_image { box-sizing: content-box; height: 80%; margin-left: 10px; display: inline-block; vertical-align: middle; }

.cms .brandSlider-container { height: auto !important; }
.cms .brandSlider-container .images { position: relative; }

.readmore { max-height: 8.5em; /* 4 x 1.5 line height */ }

.textblock { /*text-align: center;*/ padding: 6vh 0; }

.tabs { margin-top: 40px; }
.tabs > ul { display: flex; align-items: stretch; /* Default */ justify-content: space-between; padding: 0px; flex-wrap: wrap; }
.tabs > ul > li { flex: 0 1 auto; /* Default */ display: block; flex: 0 1 auto; /* Default */ list-style-type: none; }
@media screen and (max-width: 768px) { .tabs > ul > li { min-width: 100%; text-align: center; } }

.imageBanner { overflow: hidden; width: 100vw; height: 25vw; }
.imageBanner img { width: 100%; position: relative; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); }

.greenishCover { position: absolute; height: 100%; width: 100%; overflow: hidden; }

/* HEIGHT 100%*/
.height.greenishCover div { position: relative; height: 100%; width: 10100%; left: -5000%; text-align: center; }

.height.greenishCover img { display: inline; height: 100%; margin-top: 0 !important; }

.height.left.greenishCover div { position: absolute; left: 0px; text-align: left; }

.height.right.greenishCover div { position: absolute; right: 0px; left: auto; text-align: right; }

/* WIDTH 100%*/
.width.greenishCover div { position: relative; width: 100%; top: 50%; }

.width.greenishCover img { display: block; width: 100%; }

.width.top.greenishCover div { position: absolute; top: 0px; }

.width.top.greenishCover img { margin-top: 0px !important; }

.width.bottom.greenishCover div { position: absolute; bottom: 0px; }

.width.bottom.greenishCover img { margin-top: 0px !important; position: absolute; bottom: 0px; }

#overlay { position: fixed; top: 30px; bottom: 30px; left: 30px; right: 30px; border: solid 2px #bbb0ad; color: #bbb0ad; border-top: none; border-bottom: none; z-index: 400; pointer-events: none; }
#overlay .logo { display: block; text-align: center; overflow: hidden; white-space: nowrap; transform: translateY(-52%); -ms-transform: translateY(-52%); }
#overlay .logo > span { position: relative; display: inline-block; font-weight: 600; font-size: 43px; }
#overlay .logo > span:before, #overlay .logo > span:after { content: ""; position: absolute; top: 50%; width: 9999px; height: 2px; background: #bbb0ad; }
#overlay .logo > span:before { right: 100%; margin-right: 30px; }
#overlay .logo > span:after { left: 100%; margin-left: 30px; }
#overlay a { color: #bbb0ad; text-decoration: none; pointer-events: all; }
#overlay a:hover { text-decoration: underline; }
#overlay .toplink { position: absolute; top: 20px; font-size: 0.75em; }
#overlay .backmenu { left: 20px; }
#overlay .facebook { right: 20px; }
#overlay .popup { position: absolute; padding-bottom: 15px; bottom: -15px; padding-bottom: 15px !important; font-family: 'Roboto', sans-serif; }
#overlay .popup .content { background-color: rgba(187, 176, 173, 0.8); height: 100%; padding: 20px; }
#overlay .popup .content td { padding-left: 15px; padding-top: 5px; }
#overlay .popup .bottom { height: 15px; width: 100%; }
#overlay .popup .bottom > div { position: absolute; background: rgba(187, 176, 173, 0.8); height: 15px; }
#overlay .popup.contact { width: auto; height: auto; color: #bbb0ad; }
#overlay .popup.contact a { color: #bbb0ad; }
#overlay .popup.contact .oeffnungszeitenFormatter { position: relative; }
#overlay .popup.contact .oeffnungszeitenFormatter .spalteL { width: 30%; padding-left: 3%; padding-right: 3%; display: inline-block; position: absolute; top: 0px; left: 0px; }
#overlay .popup.contact .oeffnungszeitenFormatter .spalteR { width: 70%; padding-left: 3%; padding-right: 3%; display: inline-block; position: absolute; top: 0px; right: 0px; }
#overlay .popup.contact .bottom .right { right: 0px; width: calc(100% - 116px); }
#overlay .popup.contact .bottom .left { width: 25px; left: 0px; }
#overlay .popup.termine { width: 350px; right: 0px; height: 100px; }
#overlay .popup.termine .bottom .right { right: 0px; width: 25px; }
#overlay .popup.termine .bottom .left { width: calc(100% - 118px); left: 0px; }
#overlay .bottomRow { overflow: hidden; display: block; overflow: hidden; white-space: nowrap; position: absolute; bottom: -23px; left: 0px; right: 0px; height: 25px; transform: translateY(-52%); -ms-transform: translateY(-52%); }
#overlay .bottomRow .centerBorder { width: calc(100% - 234px); left: 116px; }
#overlay .bottomRow .link { position: absolute; font-size: 21px; top: -4px; pointer-events: all; }
#overlay .bottomRow .contact.link { left: 30px; }
#overlay .bottomRow .termine.link { right: 30px; }
#overlay .bottomRow .border { position: absolute; top: 50%; height: 2px; background: #bbb0ad; }
#overlay .bottomRow .leftBorder { width: 25px; left: 0px; }
#overlay .bottomRow .rightBorder { width: 25px; right: 0px; }

.navigation { height: calc(100vh - 63px); position: relative; z-index: 300; }
.navigation ul { padding: 0px; }
.navigation li { text-align: center; list-style-type: none; margin-bottom: 20px; }
.navigation li a { color: #bbb0ad !important; text-decoration: none; pointer-events: all; font-size: 20px; font-weight: bold; }
.navigation li a:hover { text-decoration: underline; }
.navigation > div { position: relative; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); }
.navigation .back i { border: solid #bbb0ad; border-width: 0 2px 2px 0; display: inline-block; padding: 7px; transform: rotate(225deg); -webkit-transform: rotate(225deg); position: relative; top: 4px; animation: RotateAndMoveArrowReverse 2s; }
.navigation .back a { font-size: 14px; width: 0px; opacity: 0; display: inline-block; font-weight: normal; animation: FadeAndScrollReverse 2s; }
.navigation .back:hover i { animation: RotateAndMoveArrow 1s; -webkit-animation-fill-mode: both; }
.navigation .back:hover a { animation: FadeAndScroll 1s; -webkit-animation-fill-mode: both; }

@keyframes RotateAndMoveArrow { 0% { transform: rotate(225deg); -webkit-transform: rotate(225deg); }
  40% { transform: rotate(135deg); -webkit-transform: rotate(135deg); }
  100% { transform: rotate(135deg); -webkit-transform: rotate(135deg); } }
@keyframes RotateAndMoveArrowReverse { 100% { transform: rotate(225deg); -webkit-transform: rotate(225deg); }
  60% { transform: rotate(135deg); -webkit-transform: rotate(135deg); }
  0% { transform: rotate(135deg); -webkit-transform: rotate(135deg); } }
@keyframes FadeAndScroll { 40% { opacity: 0; width: 0px; }
  100% { opacity: 1; width: 41px; margin-left: -5px; } }
@keyframes FadeAndScrollReverse { 60% { opacity: 0; width: 0px; }
  0% { opacity: 1; width: 41px; margin-left: -5px; } }
.scrollIndicator { position: fixed; right: 60px; width: 13px; top: 50%; z-index: 400; transform: translate(0%, -50%); }
.scrollIndicator > div { border: solid 2px rgba(187, 177, 173, 0.5); border-radius: 5px; margin-bottom: 20px; height: 8px; width: 13px; background-color: transparent; transition: background-color 500ms linear; box-sizing: content-box; }
.scrollIndicator > div.active { background-color: rgba(187, 177, 173, 0.5); }

.test .scrollIndicateTrigger { height: 50vh; border-bottom: thick solid black; }

.imageBanner { overflow: hidden; width: 100vw; height: 25vw; }
.imageBanner img { width: 100%; position: relative; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); }

.teamOverview .member { padding-left: 20px; padding-right: 20px; }

.backdrop { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2000; background: rgba(187, 176, 173, 0.8); display: none; }
.backdrop .closeX { position: absolute; right: 10px; top: 10px; font-size: 26px; color: #FFF; z-index: 2; cursor: pointer; line-height: 1em; }

.cmodal { position: fixed; top: 50px; left: 50px; right: 50px; bottom: 50px; background: #ffffff; padding: 15px 40px 30px 15px; z-index: 2001; display: none; -webkit-overflow-scrolling: touch; }
.cmodal .modalHeader h1 { display: inline-block; }
.cmodal .modalHeader .modalFontSelect { display: inline; float: right; padding-right: 5px; }
.cmodal .modalHeader .modalFontSelect .text { font-size: 10px; }
.cmodal .modalHeader .modalFontSelect .fontIcons { position: relative; height: 44px; vertical-align: bottom; }
.cmodal .modalHeader .modalFontSelect .fontIcons > div { width: 50%; position: absolute; bottom: 0px; line-height: 1em; }
.cmodal .modalHeader .modalFontSelect .fontIcons .smaller { text-align: left; font-size: 30px; left: 0px; }
.cmodal .modalHeader .modalFontSelect .fontIcons .bigger { font-size: 44px; line-height: 0.98em; text-align: right; right: 0px; }
.cmodal .modalBody { max-height: calc(100% - 69px); overflow-y: scroll; width: 100%; margin-top: 15px; }
.cmodal .modalBody .consent { width: 60%; }
.cmodal .modalBody .button { margin-top: 20px; display: inline-block; padding: 10px; background: #bbb0ad; color: white; }

.nomargin { margin: 0px; }

.nopadding { padding: 0px; }

@media only screen and (max-width: 599px) { .backdrop { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2000; background: rgba(187, 176, 173, 0.8); display: none; }
  .backdrop .closeX { position: absolute; right: 10px; top: 10px; font-size: 26px; color: #FFF; z-index: 2; cursor: pointer; line-height: 1em; }
  .cmodal { position: fixed; top: 25px; left: 25px; right: 25px; bottom: 25px; background: #ffffff; padding: 15px 40px 30px 15px; z-index: 2001; display: none; -webkit-overflow-scrolling: touch; }
  .cmodal .modalHeader h1 { display: inline-block; }
  .cmodal .modalHeader .modalFontSelect { display: inline; float: right; padding-right: 5px; }
  .cmodal .modalHeader .modalFontSelect .text { font-size: 10px; }
  .cmodal .modalHeader .modalFontSelect .fontIcons { position: relative; height: 44px; vertical-align: bottom; }
  .cmodal .modalHeader .modalFontSelect .fontIcons > div { width: 50%; position: absolute; bottom: 0px; line-height: 1em; }
  .cmodal .modalHeader .modalFontSelect .fontIcons .smaller { text-align: left; font-size: 30px; left: 0px; }
  .cmodal .modalHeader .modalFontSelect .fontIcons .bigger { font-size: 44px; line-height: 0.98em; text-align: right; right: 0px; }
  .cmodal .modalBody { max-height: calc(100% - 69px); overflow-y: scroll; width: 100%; margin-top: 15px; }
  .cmodal .modalBody .consent { width: 60%; }
  .cmodal .modalBody .button { margin-top: 20px; display: inline-block; padding: 10px; background: #bbb0ad; color: white; }
  .nomargin { margin: 0px; }
  .nopadding { padding: 0px; }
  .cmodal { padding: 15px 15px 15px 15px; }
  .cmodal .modalHeader h1 { font-size: 24px; } }
body, h1, h2, #overlay, .navigation, .michroma, .tabLinks { font-family: 'Saira', sans-serif; letter-spacing: 1px; font-weight: 600; font-size: 30px; }

h1 { font-size: 43px; }

h2 { font-size: 21px; }

a, a:link { text-decoration: none; color: white; }

body { background: #000; }

#border { position: absolute; top: 30px; bottom: 30px; left: 30px; right: 30px; border: solid 2px white; border-top: none; z-index: 5; pointer-events: none; }

.logo { display: block; font-weight: 300; text-align: center; overflow: hidden; white-space: nowrap; transform: translateY(-50%); -ms-transform: translateY(-50%); }

.logo > span { position: relative; color: white; display: inline-block; font-size: 36px; }

.logo > span:before, .logo > span:after { content: ""; position: absolute; top: 50%; width: 9999px; height: 2px; background: white; }

.logo > span:before { right: 100%; margin-right: 15px; }

.logo > span:after { left: 100%; margin-left: 15px; }

.imageBackground { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; }
.imageBackground .optik { width: 50%; top: 0px; right: 0px; bottom: 0px; position: absolute; }
.imageBackground .optik .outer { background: #74acab; }
.imageBackground .optik .outer a:hover { color: rgba(255, 255, 255, 0.6); }
.imageBackground .optik .outer a:hover .icon .cls-1 { fill: rgba(255, 255, 255, 0.6); }
.imageBackground .akustik { width: 50%; top: 0px; left: 0px; bottom: 0px; position: absolute; }
.imageBackground .akustik .outer { background: #bbb0ad; }
.imageBackground .akustik .outer a:hover { color: rgba(255, 255, 255, 0.6); }
.imageBackground .akustik .outer a:hover .icon .cls-1 { fill: rgba(255, 255, 255, 0.6); }
.imageBackground .outer { display: table; position: absolute; height: 100%; width: calc(100% + 1px); z-index: 2; text-align: center; color: white; }
.imageBackground .outer .middle { display: table-cell; vertical-align: middle; }
.imageBackground .outer .middle .inner { margin-left: auto; margin-right: auto; position: relative; font-size: 30px; width: 100%; /*whatever width you want*/ }

@media (min-width: 0px) and (max-width: 767px) { .imageBackground .optik { width: 100%; height: 50%; }
  .imageBackground .akustik { width: 100%; top: 50%; height: 50%; left: 0px; bottom: 0px; position: absolute; } }
.icon { margin-bottom: 10px; transform: rotate(-22deg); }

.cms .greenishCover { position: relative; }