@charset "utf-8";

/*
Theme Name:		Fachkräfteportal
Version:		0.9
Author:			Webit!
Author URI: 	https://www.webit.de/
Date:			2019-02
*/

/* ========= Colours
corporate	
purple		#6A1979
blue		#367EC0
orange		#CB4F1C
black		#080808
green		#68AC4F

grey		#727272

poi:
university		#03ffc5
cinema			#d3cb0b
school			#d168e5
trainstation	#000
kindergarten	#379dfa
hospital		#FF0000
museum			#ff7600
sport			#68ac4f
sight			#cb1c1c 
vacation		#73EB80
shopping		#FFFF73
medical			#FC6360
industry		#033E8C
government 		#D7D1AF
*/

html,
body {
  font-weight: 300;
  font-size: 25px;
  line-height: 1.5;
  color: #080808;
  overflow-x: hidden;
}

html.main-navigation-opened,
html.no-scroll {
  overflow-y: hidden;
  width: 100%;
  height: 100%;
}

body.mappage {
  box-sizing: border-box;
  right: 0;
  width: 100%;
  height: 100%;
}

.mappage .wrapper {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.scroll-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;

  transition: bottom 1s ease;
}

.preview-toggle:before {
  transition: border .5s ease;
}

@media screen and (max-width: 768px) {
  .scroll-wrapper {
    overflow-y: scroll;
    top: auto;
  }

  .scroll-wrapper.hidden {
    bottom: -100vh;
  }

  .scroll-wrapper.preview-open {
    overflow: hidden;
    bottom: calc(-100vh + 96px + 100px + 30px);

    position: fixed;
    z-index: 1961;
  }

  .scroll-wrapper.preview-open .overlays-container {
    top: 30px;
  }

}

@media screen and (max-width: 329px) {
  .scroll-wrapper.preview-open {
    bottom: calc(-100vh + 96px + 130px + 30px);
  }
}

@media screen and (min-width: 769px) {
  .scroll-wrapper {
    overflow-y: scroll;
    overflow-x: hidden;
    width: 540px;
  }
}

.no-scroll,
.scroll-wrapper {
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}

.no-scroll::-webkit-scrollbars,
.scroll-wrapper::-webkit-scrollbar {
  width: 0;
  /* For Chrome, Safari, and Opera */
}

strong,
b {
  font-weight: 600;
}

hr {
  border: none;
  height: 3px;
  background: transparent url(/assets/dotted-lines.svg) left -4px repeat-x;
  margin: .75rem 0 1.5rem;
}

small {
  font-size: .75rem;
  display: inline-block;
}

/* ========= grid */
.container {
  width: 1760px;
}

/* ========= form */
form {
  position: relative;
}

form input,
form textarea,
form select {
  padding: 0;
  color: inherit;
  border: none;
  background-color: transparent;
  max-width: 100%;
}

::-webkit-input-placeholder {
  color: #080808;
}

:-moz-placeholder {
  color: #080808;
}

::-moz-placeholder {
  color: #080808;
}

:-ms-input-placeholder {
  color: #080808;
}

/* label */
label {
  display: block;
  cursor: pointer;
}

/* date */
input[type="date"] {
  font-size: .64rem;
}

/* checkboxes */
input[type="checkbox"] {
  -ms-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
  margin-left: .25rem;
  vertical-align: 0;
}

/* radio */
.styled-radio input[type="radio"],
.styled-radio input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.styled-radio .radio-text {}

.styled-radio input[type="radio"]:checked~.radio-text,
.styled-radio input[type="checkbox"]:checked~.checkbox-text {
  font-weight: 600;
}

.input-group {
  margin-bottom: 1.5rem;
}

/* ========= links & buttons */
a {
  text-decoration: none;
  color: currentColor;
}

a:hover {
  text-decoration: underline
}

p a {
  border-bottom: 1px solid;
}

p a:hover {
  text-decoration: none;
}

.button {
  text-transform: uppercase;
  color: currentColor;
}

.button.aslink,
.button.none,
.button.aslink:hover {
  text-transform: none;
  background-color: transparent;
  border: none;
}

/* icon links */
.icon-link {
  font-weight: 600;
  line-height: 83px;
  text-transform: uppercase;
  font-size: .8rem;
  vertical-align: text-top;
}

.icon-link:before {
  content: ' ';
  display: inline-block;
  height: 80px;
  width: 80px;
  vertical-align: middle;
  background: transparent center no-repeat;
  background-size: contain;
}

/* color */
.teaser-item .icon-link {
  color: #727272;
}

/* align */
.icon-left:before {
  float: left;
}

.icon-right:before {
  float: right;
}

/* sizes */
.icon-link.icon-midi {
  line-height: 2.5rem;
}

.icon-link.icon-midi:before {
  width: 2.5rem;
  height: 2.5rem;
}

.icon-link.icon-small {
  line-height: 1.5rem;
}

.icon-link.icon-small:before {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-link.icon-text {
  line-height: 1rem;
  font-weight: 400;
  text-transform: none;
  display: inline-block;
}

.icon-link.icon-text:before {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: .5rem;
}

/* body main icon */
body.icon-outside:before {
  height: 1000px;
  width: 1000px;
  content: ' ';
  position: absolute;
  left: -580px;
  top: -330px;
  background: transparent center no-repeat;
  background-size: cover;
}

/* list */
.icon-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.icon-list li>.icon-link {
  line-height: 1;
  font-size: .64rem;
  display: inline-block;
  background-color: #fff;
  padding-top: .75rem;
  margin: .75rem;
  height: 150px;
  width: 150px;
  -webkit-box-shadow: 0 .25rem 1rem 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 .25rem 1rem 0 rgba(0, 0, 0, 0.25);
  -o-box-shadow: 0 .25rem 1rem 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 .25rem 1rem 0 rgba(0, 0, 0, 0.25);
}

.icon-list li>.icon-link:before {
  background-size: auto;
}

.icon-list li>a.icon-link.active,
.icon-list li>a.icon-link:hover,
.icon-list li>a.icon-link:focus {
  background-color: #367EC0;
  color: #fff;
}

ul:not(.guide-nav).icon-list li>a.icon-link.active:before {
  background-image: url('/assets/icon-close.svg');
}

.icon-list li .icon-title {
  display: block;
}

/* ul list */
.icon-ul ul {
  list-style: none;
  padding: 0 0 1rem 0;
  line-height: 1.25;
}

.icon-ul li {
  position: relative;
  padding: 0 0 .5rem 27px;
}

/* icons */
.icon-ul a:before {
  content: ' ';
  display: inline-block;
  position: absolute;
  left: 0;
  top: .1rem;
  height: 1.25rem;
  width: 30px;
  vertical-align: middle;
  background: transparent left center no-repeat;
}

.fixed-infobox .icon-ul a:before {
  height: .64rem;
}

.icon-arrowdown-up:before {
  background-image: url(/assets/icon-arrowdown-up.svg);
}

.icon-arrowrightdown-up:before {
  background-image: url(/assets/icon-arrowrightdown-up.svg);
}

.icon-arrowrightup-up:before {
  background-image: url(/assets/icon-arrowrightup-up.svg);
}

.icon-arrowup-up:before {
  background-image: url(/assets/icon-arrowup-up.svg);
}

.icon-atom-up:before {
  background-image: url(/assets/icon-atom-up.svg);
}

.icon-bookdown-up:before {
  background-image: url(/assets/icon-bookdown-up.svg);
}

.icon-bookup-up:before {
  background-image: url(/assets/icon-bookup-up.svg);
}

.icon-circle-up:before {
  background-image: url(/assets/icon-circle-up.svg);
}

.icon-clock-up:before {
  background-image: url(/assets/icon-clock-up.svg);
}

.icon-double-down:before {
  background-image: url(/assets/icon-double-down.svg);
}

.icon-double-up:before {
  background-image: url(/assets/icon-double-up.svg);
}

.colored-blue .icon-ul a:before,
.icon-empty-blue-down:before {
  background-image: url(/assets/icon-empty-blue-down.svg);
}

.icon-empty-blue-up:before {
  background-image: url(/assets/icon-empty-blue-up.svg);
}

.icon-empty-dark-down:before {
  background-image: url(/assets/icon-empty-dark-down.svg);
}

.icon-empty-dark-up:before {
  background-image: url(/assets/icon-empty-dark-up.svg);
}

.icon-empty-green-up:before {
  background-image: url(/assets/icon-empty-green-up.svg);
}

.icon-empty-orange-up:before {
  background-image: url(/assets/icon-empty-orange-up.svg);
}

.icon-empty-yellow-up:before {
  background-image: url(/assets/icon-empty-yellow-up.svg);
}

.colored-white .icon-ul-link a:before,
.colored-white .icon-ul a:before,
.icon-empty-white-down:before {
  background-image: url(/assets/icon-empty-white-down.svg);
}

.icon-empty-white-down-2:before {
  background-image: url(/assets/icon-empty-white-down-2.svg);
}

.icon-exclamationmark-down:before {
  background-image: url(/assets/icon-exclamationmark-down.svg);
}

.icon-facebook:before {
  background-image: url(/assets/icon-facebook.svg);
}

.icon-filled-dark-down:before {
  background-image: url(/assets/icon-filled-dark-down.svg);
}

.icon-filled-dark-up:before {
  background-image: url(/assets/icon-filled-dark-up.svg);
}

.icon-filled-purple-down:before {
  background-image: url(/assets/icon-filled-purple-down.svg);
}

.icon-gradient-blue-down:before {
  background-image: url(/assets/icon-gradient-blue-down.svg);
}

.icon-gradient-blue-up:before {
  background-image: url(/assets/icon-gradient-blue-up.svg);
}

.icon-gradient-green-up:before {
  background-image: url(/assets/icon-gradient-green-up.svg);
}

.icon-gradient-orange-down:before {
  background-image: url(/assets/icon-gradient-orange-down.svg);
}

.icon-gradient-orange-plus-down:before {
  background-image: url(/assets/icon-gradient-orange-plus-down.svg);
}

.icon-gradient-orange-plus-up:before {
  background-image: url(/assets/icon-gradient-orange-plus-up.svg);
}

.icon-gradient-orange-cross-down:before {
  background-image: url(/assets/icon-gradient-orange-cross-down.svg);
}

.icon-gradient-yellow-down:before {
  background-image: url(/assets/icon-gradient-yellow-down.svg);
}

.icon-lang-up:before {
  background-image: url(/assets/icon-lang-up.svg);
}

.icon-lines-horizontal-down:before {
  background-image: url(/assets/icon-lines-horizontal-down.svg);
}

.icon-lines-horizontal-up:before {
  background-image: url(/assets/icon-lines-horizontal-up.svg);
}

.icon-lines-vertical-down:before {
  background-image: url(/assets/icon-lines-vertical-down.svg);
}

.icon-lines-vertical-up:before {
  background-image: url(/assets/icon-lines-vertical-up.svg);
}

.icon-linkedin:before {
  background-image: url(/assets/icon-linkedin.svg);
}

.icon-marker-up:before {
  background-image: url(/assets/icon-marker-up.svg);
}

.colored-blue .icon-ul-pdf a:before,
.colored-blue .icon-ul a[href$=".pdf"]:before,
.colored-blue .icon-pdf:before {
  background-image: url(/assets/icon-pdf-blue.svg);
}

.colored-orange .icon-ul-pdf a:before,
.colored-orange .icon-ul a[href$=".pdf"]:before,
.colored-orange .icon-pdf:before {
  background-image: url(/assets/icon-pdf-orange.svg);
}

.colored-purple .icon-ul-pdf a:before,
.colored-purple .icon-ul a[href$=".pdf"]:before,
.colored-purple .icon-pdf:before {
  background-image: url(/assets/icon-pdf-purple.svg);
}

.icon-plus-down:before {
  background-image: url(/assets/icon-plus-down.svg);
}

.icon-search-up:before {
  background-image: url(/assets/icon-search-up.svg);
}

.icon-triangle-down:before {
  background-image: url(/assets/icon-triangle-down.svg);
}

.icon-triangle-up:before {
  background-image: url(/assets/icon-triangle-up.svg);
}

.icon-trible-down:before {
  background-image: url(/assets/icon-trible-down.svg);
}

.icon-twitter:before {
  background-image: url(/assets/icon-twitter.svg);
}

.icon-wave-down:before {
  background-image: url(/assets/icon-wave-down.svg);
}

.icon-slider-arrow-right:before,
.icon-slider-arrow-left:before {
  background-image: url(/assets/icon-slider-arrow-right.svg);
  opacity: .112;
}

.icon-slider-arrow-right-2:before,
.icon-slider-arrow-left-2:before {
  background-image: url(/assets/icon-slider-arrow-right-2.svg);
}

.icon-slider-arrow-left:before,
.icon-slider-arrow-left-2:before {
  transform: rotate(180deg);
  transform-origin: 50%;
}

.icon-map-down:before {
  background-image: url(/assets/icon-map-down.svg);
}

.icon-bookdown-down:before {
  background-image: url(/assets/icon-bookdown-up.svg);
}

.icon-cinema:before {
  background-image: url(/assets/icon-cinema.svg);
}

.icon-city:before {
  background-image: url(/assets/icon-city.svg);
}

.icon-hamburger-down:before {
  background-image: url(/assets/icon-hamburger-down.svg);
}

.icon-hospital:before {
  background-image: url(/assets/icon-hospital.svg);
}

.icon-kindergarten:before {
  background-image: url(/assets/icon-kindergarten.svg);
}

.icon-museum:before {
  background-image: url(/assets/icon-museum.svg);
}

.icon-school:before {
  background-image: url(/assets/icon-school.svg);
}

.icon-sight:before {
  background-image: url(/assets/icon-sight.svg);
}

.icon-sport:before {
  background-image: url(/assets/icon-sport.svg);
}

.icon-trainstation:before {
  background-image: url(/assets/icon-trainstation.svg);
}

/* hover */
a.icon-empty-orange-up:hover:before,
a.icon-filled-purple-down:hover:before {
  background-image: url(/assets/icon-filled-purple-right.svg);
}

/* ========= tables */
table {}

table,
table th,
table td {}

table th {}

table th.nowrap,
table td.nowrap {
  white-space: nowrap;
}

table th:first-child,
table td:first-child {
  padding-left: 0;
}

table th:last-child,
table td:last-child {
  padding-right: 0;
}

.table-container {
  overflow: auto;
}

/* ========= video */
.embed-container {
  position: relative;
  padding-bottom: 100%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ========= figcaption */
figcaption {
  font-size: 1.5rem;
}

/* ========= blockquote */
blockquote {
  font-size: 1.5rem;
  margin-top: 3rem;
  padding: 1.5rem 1.5rem 2.5rem 1.5rem;
  position: relative;
  line-height: 1.25;
}

blockquote .blockquote-image.outside {
  position: absolute;
  top: -3rem;
}

blockquote .icon-link {
  display: block;
}

.colored-white .icon-empty-orange-up:before {
  background-image: url(/assets/icon-empty-white-down-2.svg);
}

.colored-white .icon-link.icon-empty-orange-up:hover:before {
  background-image: url(/assets/icon-filled-white-right.svg);
}

.blockquote-slider:not(.slick-initialized) .slide-item:not(:first-child) {
  display: none;
}

.blockquote-slider {
  /* to align it with section.teaser-list  */
  margin-left: 1rem;
  margin-right: 4rem;
}


.blockquote-slider.slick-initialized blockquote {
  width: calc(100% - 6rem);
  margin-left: auto;
  margin-right: auto;
}


.blockquote-slider blockquote {
  margin-bottom: 6rem;
  padding: 1.5rem 2rem;
}

.blockquote-slider .blockquote-content {
  font-size: 1.2rem;
}

.blockquote-slider .blockquote-content,
.blockquote-slider a,
.blockquote-slider strong {
  margin: 0 0 .75rem;
  display: block;
}

.blockquote-slider .blockquote-content:last-child,
.blockquote-slider a:last-child,
.blockquote-slider strong:last-child {
  margin-bottom: 0;
}

.blockquote-slider strong small {
  display: block;
}

.blockquote-slider a {
  margin-top: 1.5rem;
}

.blockquote-slider .slick-list {
  height: 100% !important;
}

/* ========= card slider */

.card-slider {
  color: #000000;
  font-weight: 400;
  float: none;
  max-width: 1150px;
}

.card-slider .slick-track {
  display: flex;
}

/* make room for box-shadow -> otherwise box-shadow will be cut off via 'overflow-hidden: hidden;' property of the slick-list elemnt -> if overflow-hidden is set to true the following slides that sould be hidden will also be displayed */
.card-slider .slide-wrapper {
  padding: 1.5rem;
  display: flex;
  height: auto;
  float: none;
}

.card-slider .slick-current .slide-item {
  box-shadow: 0.24rem 0.4rem 1.08rem #727272;
}

.card-slider .slide-item {
  border-radius: 5px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.8rem 2.5rem 4rem 2.5rem;
  position: relative;
}

.card-slider .flex-dummy {
  height: 0;
}

.card-slider .slick-arrow {
  bottom: 2.5rem;
  color:#727272;
  font-size: .75rem;
  font-weight: 400;
  top: unset;
  width: auto;
}

.card-slider .slick-arrow.slide-next {
  right: 4rem;
}

.card-slider .slick-arrow.slide-prev {
  left: 4rem;
}

/* Disabled Prev-Btn on first slide */
.card-slider .slick-disabled {
  display: none !important;
}

.card-slider .subline {
  color: #6A1979;
  font-size: .75rem;
  font-weight: 700;
  margin-bottom: 0;
}

.card-slider h2 {
  padding-top: 0;
  padding-bottom: 0;
}
.card-slider .slide-body h2 {
  margin-bottom: 1rem;
}
.card-slider .background--img h2 {
  color: #fff;
}

.card-slider img + h2 {
  /* padding-top: 1.2rem; */
  /* padding-bottom: .5rem; */
}

.card-slider p {
  font-size: .8rem;
  margin-bottom: 0;
}

.card-slider img {
  margin: 0 auto;
  width: 60%;
}

.card-slider--white-buttons .slick-arrow {
  color: #ffffff;
}

.card-slider .gradient-colored-purple-orange:before {
  background: -moz-linear-gradient(0deg, #6a1979 0%, #cb4f1c 100%) !important;
  background: -webkit-linear-gradient(0deg, #6a1979 0%, #cb4f1c 100%) !important;
  background: linear-gradient(0deg,#6a1979 0%, #cb4f1c 100%) !important;
  border-radius: 5px;
}

.card-slider .gradient-colored-purple-orange {
  color: #ffffff;
}

.card-slider .gradient-colored-purple-orange .subline {
  color: #ffffff;
}

.card-slider .gradient-colored-purple-orange .slick-arrow {
  color: #ffffff;
}

.card-slider .background--img {
  background-image: url("https://imagefoo.dev.webit.de/1512x1726/839FC7/839FC7"); 
  background-repeat: no-repeat;
  background-size: 	cover;
}

.card-slider .background--img article {
  color: #ffffff;
}

.card-slider .background--img .subline {
  color: #ffffff;
}

.card-slider .background--img ul {
  justify-content: flex-end;
}

.card-slider .background--white {
  background: #ffffff;
}

/* ========= headlines */
h1,
h1 a,
.likeh1,
h2,
h2 a,
.likeh2,
h3,
h3 a,
.likeh3,
h4,
h4 a,
.likeh4,
h5,
h5 a,
.likeh5,
h6,
h6 a,
.likeh6 {
  color: currentColor;
  font-weight: 300;
  line-height: 1.25;
}

h1,
h1 a,
.likeh1 {
  text-transform: uppercase;
  font-size: 2.4rem;
  padding-bottom: .75em;
  line-height: 1;
}

h1 strong,
.likeh1 strong {
  font-weight: 700;
}

h2,
h2 a,
.likeh2 {
  text-transform: uppercase;
  font-size: 1.6rem;
  padding-bottom: 1em;
}

h3,
h3 a,
.likeh3 {
  text-transform: uppercase;
  font-size: 1rem;
}

h4,
h4 a,
.likeh4 {}

h5,
h5 a,
.likeh5 {
  text-transform: none;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1em;
}

h6,
h6 a,
.likeh6 {
  text-transform: uppercase;
  font-size: .64rem;
  padding-bottom: 0;
}

/* ========= header */
.page-header {
  margin: 5.5rem 0 3rem 0;
}

.page-header .fixed-navigation-outer {
  left: -145px;
  margin-left: 1rem;
  position: absolute;
  top: 325px;
  max-width: 102px;
}
/* .page-header .header-intro { font-size: 1.4rem; } */

/* ========= logo */
.logo-container {
  margin-bottom: 3rem;
  max-width: 100%;
  width: 200px;
}

/* ========= page footer */
.page-footer {
  margin-top: 5rem;
  margin-bottom: 75px;
  /* leave space for usercentrics button and mobile navigation buttons*/
}

/* ========= page navigation */
/* footer */
.navigation-container {
  position: relative;
  padding: 1.75rem 0 4.5rem 0;
  overflow: hidden;
}

/* .navigation-container:after { content: ' '; width: 100%; height: 65px; position: absolute; right: -1px; bottom: -1px; background: transparent url(/assets/footer-bg.svg) right bottom no-repeat; background-size: contain; } */

.footer-navigation,
.footer-navigation ul,
.meta-navigation {
  list-style: none;
  padding: 0;
}

.footer-navigation ul {
  margin-top: 1.25rem;
}

.meta-navigation a,
.meta-navigation span,
.footer-navigation a,
.footer-navigation span {
  color: rgba(255, 255, 255, .72);
  display: inline-block;
  padding: .25rem 0;
  font-size: .8rem;
}

.footer-navigation>li {
  width: 25%;
  float: left;
}

.footer-navigation .navi-headline {
  text-transform: uppercase;
  display: block;
  min-height: 2rem;
  color: #fff;
}

/* meta navigation */
.meta-navigation {
  border-top: 3px dotted rgba(255, 255, 255, .72);
  padding-top: 1rem;
  position: absolute;
  left: 15px;
  bottom: 0;
}

.meta-navigation a,
.meta-navigation span {
  color: #fff;
  text-transform: uppercase;
}

/* social navigation */
.social-navigation {
  padding: 0;
  margin-top: 1.25rem;
  list-style: none;
}

.social-navigation li {
  display: inline;
  margin-right: 1rem;
}

.social-navigation .icon-link {
  line-height: 1;
}

.social-navigation .icon-link:before {
  width: 50px;
  height: 50px;
}

/* fixed navigation */
.fixed-navigation-outer {
  position: fixed;
  right: 0;
  top: 50%;
  margin-top: -170px;
  z-index: 1;
}

.fixed-navigation.icon-list {
  top: auto;
  margin-bottom: 0;
  list-style: none;
  padding: 0;
  display: block;
}

.fixed-navigation.icon-list>li {
  position: relative;
  display: block;
}

.fixed-navigation-outer .icon-link,
.fixed-navigation.icon-list>li>.icon-link {
  margin: .125rem 1rem;
  padding: 0 0 .75rem 0;
  font-size: .35rem;
  width: 70px;
  height: 70px;
}

.fixed-navigation.icon-list>li>.icon-link:before {
  width: 60px;
  height: 60px;
}

.fixed-navigation.icon-list>li>.icon-link.active:before {
  content: ' ';
}

.fixed-navigation.icon-list>li>.icon-link .icon-title {
  margin-top: -.25rem;
}

.fixed-infobox table {
  border: 0;
  width: 100%;
}

.fixed-infobox table th,
.fixed-infobox table td {
  background: transparent url(/assets/dotted-line.svg) left bottom repeat-x;
  border: 0;
}

/* content */
.article-infobox hr {
  margin: .5rem 0;
}

.article-infobox.fixed-infobox {
  display: none;
  position: absolute !important;
  right: 100%;
  top: .25rem;
  margin-right: -.85rem;
  width: 550px;
  text-align: left;
  font-size: .64rem;
}

/* clickable outside */
.fixed-outside {
  position: fixed;
  display: block;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, .5);
  z-index: -2;
}


/* ========= page document */
/* .page-document { margin-top: 5rem; position: relative; } */
.page-document {
  position: relative;
}

/* ========= article */
/* globals */
/* .article-item { padding-top: 3rem; } */
.article-item .article-image {
  position: relative;
  width: auto;
}

/* .article-item .article-image img { max-height: 400px; width: auto; } */

/* image */
.article-item.image-left .article-image,
.article-item.image-right .article-image {
  width: 50%;
  z-index: -1;
}

/* left */
.article-item.image-left .article-image {
  float: left;
  margin-right: 8.333%;
}

/* right */
.article-item.image-right .article-image {
  float: right;
  margin-left: 8.333%;
}

/* content */
/* right */
.article-item.image-left .article-content {
  float: left;
  width: 33.333%;
}

/* left */
.article-item.image-right .article-content {
  float: left;
  width: 33.333%;
  margin-left: 8.333%;
}

.article-item.infobox-right .article-content {
  float: left;
  width: 33.333%;
  margin-left: 16.666%;
}

/* infobox */
/* global */
.article-infobox.with-gradient {
  position: relative;
  padding: 1.75rem 2.5rem 2.5rem 2.5rem;
}

.article-infobox.with-gradient .icon-link:before {
  background-image: url(/assets/icon-empty-white-down.svg);
}

/* right */
.article-item.infobox-right .article-infobox {
  position: relative;
  float: right;
  width: 25%;
  margin-right: 16.666%;
}

/* ========= teaser */
/* .teaser-list { padding-top: 1rem; } */

/* item */
.teaser-item {
  font-size: .8rem;
  font-weight: 300;
  margin-bottom: 1rem;
}

/* .teaser-item hr { margin-top: 0; } */
.teaser-item .teaser-image {
  margin-bottom: 1rem;
}

/* list with "single" items */
.single-items .teaser-item {
  /* border-top: 1px dotted #727272; padding-top: 1rem;*/
  font-weight: 400;
  margin-left: 1rem;
  margin-right: 1rem;
}

/* ========= icon list */
.icon-list {
  top: -2.5rem;
  margin-bottom: -2.5rem;
  position: relative;
  list-style: none;
  padding-left: 0;
}

.icon-list>li {
  display: inline;
}

/* ========= map content */
.map-container,
.marker-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.marker-container {
  z-index: +1;
}

.home-link {
  font-size: 15px;
  font-weight: normal;
  position: absolute;
  right: 50px;
  top: 60px;
  color: #CB4F1C;
  background-color: #FFF;
  padding-right: 15px;
  -webkit-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25);
  -o-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25);
}

.home-link .button {
  padding: 0;
}

/* poi marker */
.map-marker {
  position: absolute;
  padding: 0;
}

.map-marker.active:before {
  background-image: url(/assets/icon-filled-dark-up.svg);
}

.map-marker .icon-title {
  z-index: +1;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

/* container with all overlays */
.overlays-container {
  background-color: #fff;
  font-size: .75rem;
  left: 50px;
  margin-bottom: 50px;
  position: absolute;
  width: 460px;
  z-index: +1;

  -webkit-box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.46);
  -moz-box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.46);
  -o-box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.46);
  box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.46);
}

.overlays-container .flag {
  left: 47px;
  position: absolute;
  top: -40px;
  z-index: +1;
}

.overlays-container .flag:before {
  background-size: contain;
  content: ' ';
  display: inline-block;
  height: 124px;
  vertical-align: middle;
  vertical-align: middle;
  width: 124px;
}

/* info container */
.markerinfo-container {
  background-color: #FFF;
  display: none;
}

.markerinfo-container .image-wrapper {
  width: 100%;
  position: relative;
}

.markerinfo-container .button {
  color: #6A1979;
  padding: 0;
}

.markerinfo-heading {
  color: #367EC0;
  font-size: 30px;
  font-weight: bold;
  line-height: 30px;
  margin-bottom: 25px;
  padding: 0;
  text-transform: uppercase;
}

.markerinfo-heading-small {
  color: #99CDFD;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.markerinfo-text {
  font-size: 15px;
  line-height: 20px;
}

.markerinfo-text:first-line {
  font-weight: bold;
}

.markerinfo-pois {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.markerinfo-pois .poi {
  display: block;
  margin: 5px 0;
  position: relative;
  width: 50%;
}

.markerinfo-pois label {
  color: #FFF;
  display: inline-block;
  font-size: 15px;
  padding-left: 30px;
  text-transform: uppercase;
}

.markerinfo-pois label:before {
  background-color: #FFF;
  border-radius: 3px;
  border: 5px solid transparent;
  content: '';
  cursor: pointer;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color .3s ease 0s, border-color .3s ease 0s;
  width: 20px;
}

.markerinfo-pois [type="checkbox"]:checked+label[for*="university"]:before {
  border-color: #03ffc5;
}

.markerinfo-pois [type="checkbox"]:checked+label[for*="cinema"]:before {
  border-color: #d3cb0b;
}

.markerinfo-pois [type="checkbox"]:checked+label[for*="school"]:before {
  border-color: #d168e5;
}

.markerinfo-pois [type="checkbox"]:checked+label[for*="trainstation"]:before {
  border-color: #000;
}

.markerinfo-pois [type="checkbox"]:checked+label[for*="kindergarten"]:before {
  border-color: #379dfa;
}

.markerinfo-pois [type="checkbox"]:checked+label[for*="hospital"]:before {
  border-color: #FF0000;
}

.markerinfo-pois [type="checkbox"]:checked+label[for*="museum"]:before {
  border-color: #ff7600;
}

.markerinfo-pois [type="checkbox"]:checked+label[for*="sport"]:before {
  border-color: #68ac4f;
}

.markerinfo-pois [type="checkbox"]:checked+label[for*="sight"]:before {
  border-color: #CB1C1C;
}

.markerinfo-pois [type="checkbox"]:checked+label[for*="government"]:before {
  border-color: #D7D1AF;
}

.markerinfo-pois [type="checkbox"]:checked+label[for*="industry"]:before {
  border-color: #033E8C;
}

.markerinfo-pois [type="checkbox"]:checked+label[for*="medical"]:before {
  border-color: #FC6360;
}

.markerinfo-pois [type="checkbox"]:checked+label[for*="shopping"]:before {
  border-color: #FFFF73;
}

.markerinfo-pois [type="checkbox"]:checked+label[for*="vacation"]:before {
  border-color: #73EB80;
}

.markerinfo-pois input {
  left: -999rem;
  opacity: 0;
  position: absolute;
}

.markerinfo-content .button.button-blue {
  background-color: #379DFA;
  border-radius: 3px;
  border: none;
  color: #FFF;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  padding: 21px 45px;
  text-transform: uppercase;
  transition: background-color .3s ease 0s;
}

.markerinfo-content .button.button-blue:hover {
  background-color: #367EC0;
}

.markerinfo-content .button.button-blue:disabled {
  background-color: transparent !important;
  border: 2px solid #379DFA;
  cursor: default;
}

/* ========= main page image */
.page-image {
  background: transparent top right no-repeat;
  background-size: auto 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 75vh; /* 1000px; */
  max-height: 100%;
}

body.frontpage .page-image {
  height: 600px;
}

/* ========= overwrite plugins */
/* slick */
.slick-arrow {
  width: 45px;
  height: 45px;
  position: absolute;
  left: 0;
  top: 50%;
  padding: 0;
  z-index: +1;
}

.slick-arrow.slide-next {
  left: auto;
  right: 0;
}

.slick-arrow:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.blockquote-slider .slick-arrow {
  transform: translateY(-50%);
  top: calc(50% - 1.5rem);
  z-index: 1;
  width: 25px;
}

.blockquote-slider .slick-arrow:before {
  background-repeat: no-repeat;
}

@media screen and (min-width: 1920px) {
  .blockquote-slider .slide-prev {
    left: -3rem;
  }

  .blockquote-slider .slide-next {
    right: -3rem;
  }
}

/* ========= helper */
@media screen and (max-width: 768px) {
  .mobile-only {
    display: block;
  }

  .desktop-only {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .mobile-only {
    display: none;
  }

  .desktop-only {
    display: block;
  }
}

.full-width {
  width: 100%;
}

.indent {
  margin: 1rem 1.5rem;
}

.indent-small {
  margin: .5rem 1rem;
}

.indent-left {
  padding-left: 3rem;
}

.indent-right {
  padding-right: 3rem;
}

.outside-left {
  margin-left: -8.333%;
}

.topSpace {
  margin-top: 3rem;
}

.topSpace-small {
  margin-top: 1rem;
}

.bottomSpace {
  padding-bottom: 3rem;
}

.bottomSpace-small {
  margin-top: 1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fixed-navigation.icon-list>li.desktop-only {
  display: block;
}

.fixed-navigation.icon-list>li.mobile-only {
  display: none;
}

@media screen and (max-width: 768px) {
  .fixed-navigation.icon-list>li.desktop-only {
    display: none;
  }

  .fixed-navigation.icon-list>li.mobile-only {
    display: inline-block;
  }
}

/* ========= colorizr */

/* icons */
.icon-outside.icon-colored-blue:before {
  background-image: url('/assets/icon-gradient-blue-down.svg');
}

.icon-outside.icon-colored-purple:before {
  background-image: url('/assets/icon-gradient-orange-down.svg');
}

/* color */
.colored-blue {
  color: #367EC0;
}

.colored-purple {
  color: #6A1979;
}

.colored-white {
  color: #fff;
}

.colored-orange {
  color: #CB4F1C;
}

.colored-black {
  color: #080808;
}

/* border color */
.colored-grey hr {
  background-position: left 0;
}

.colored-purple hr {
  background-position: left -4px;
}

.colored-blue hr {
  background-position: left -8px;
}

.colored-orange hr {
  background-position: left -12px;
}

.colored-black hr {
  background-position: left -16px;
}

.colored-green hr {
  background-position: left -20px;
}

.colored-white hr {
  background-position: left -24px;
}

/* gradient background */
.gradient-background:before {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
  max-height: 100%;
}

/* size */
.gradient-background.gradient-small:before {
  height: 270px;
  margin-left: calc(8.33333333% + 15px);
  margin-right: calc(8.33333333% + 15px);
}

.gradient-background.gradient-full:before,
.gradient-background.gradient-displaced:before {
  height: 100%;
}

.gradient-background.gradient-displaced:before {
  left: 16.666%;
  right: 8.333%;
}

/* colors */
.gradient-background.gradient-grey:before {
  background: #d5d5d5;
  background: -moz-linear-gradient(top, #d5d5d5 0%, #ffffff 850px);
  background: -webkit-linear-gradient(top, #d5d5d5 0%, #ffffff 850px);
  background: linear-gradient(to bottom, #d5d5d5 0%, #ffffff 850px);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5d5d5', endColorstr='#ffffff', GradientType=0);
}

.gradient-background.gradient-colored-green-blue:before {
  background: #68ac4f;
  background: -moz-linear-gradient(left, #68ac4f 0%, #367ec0 100%);
  background: -webkit-linear-gradient(left, #68ac4f 0%, #367ec0 100%);
  background: linear-gradient(to right, #68ac4f 0%, #367ec0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#68ac4f', endColorstr='#367ec0', GradientType=1);
}

.gradient-background.gradient-colored-purple-blue:before {
  background: #6A1979;
  background: -moz-linear-gradient(left, #6A1979 0%, #367ec0 100%);
  background: -webkit-linear-gradient(left, #6A1979 0%, #367ec0 100%);
  background: linear-gradient(to right, #6A1979 0%, #367ec0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6A1979', endColorstr='#367ec0', GradientType=1);
}

.gradient-background.gradient-colored-purple-orange:before {
  background: #6a1979;
  background: -moz-linear-gradient(45deg, #6a1979 0%, #cb4f1c 100%);
  background: -webkit-linear-gradient(45deg, #6a1979 0%, #cb4f1c 100%);
  background: linear-gradient(45deg, #6a1979 0%, #cb4f1c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6a1979', endColorstr='#cb4f1c', GradientType=1);
}

.gradient-background.gradient-colored-orange-purple:before {
  background: #6a1979;
  background: -moz-linear-gradient(45deg, #cb4f1c 0%, #6a1979 100%);
  background: -webkit-linear-gradient(45deg, #cb4f1c 0%, #6a1979 100%);
  background: linear-gradient(45deg, #cb4f1c 0%, #6a1979 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cb4f1c', endColorstr='#6a1979', GradientType=1);
}

.blue-gradient {
  background: #184B79;
  background: -moz-linear-gradient(150deg, #367EC0 0%, #184B79);
  background: -webkit-linear-gradient(150deg, #367EC0 0%, #184B79);
  background: linear-gradient(150deg, #367EC0 0%, #184B79);
}

/* search screen */
.search input {
  padding: 21px;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  font-size: 18px;
  line-height: normal;
  color: #FFF;
  border: none;
  width: 160px;
  font-weight: 600;
  display: block;
}


.search input::-webkit-input-placeholder {
  color: #FFF;
  text-transform: none;
  font-weight: normal;
  line-height: normal;
}

.search input::-moz-placeholder {
  color: #FFF;
  text-transform: none;
  font-weight: normal;
  line-height: normal;
}

.search input:-ms-input-placeholder {
  color: #FFF;
  text-transform: none;
  font-weight: normal;
  line-height: normal;
}


.search input:disabled {
  cursor: not-allowed;
  background-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.57);
}

.search input:disabled::placeholder {
  color: rgba(0, 0, 0, 0.57);

}

.search input:disabled::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.57);
}

.search input:disabled::-moz-placeholder {
  color: rgba(0, 0, 0, 0.57);
}

.search input:disabled::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.57);
}

.search input:first-of-type {
  width: 100%;
}

.search .text-between-inputs {
  font-size: 15px;
  line-height: 2;
  color: #FFF;
  margin: 0;
}


/* search-plus screen */
.search-plus .input-group+button:first-of-type {
  margin-top: 0;
}

.search-plus .input-group label input[type='radio'] {
  position: absolute;
  left: -999rem;
  opacity: 0;
  height: 0;
  width: 0;
}

.search-plus .input-group {
  margin-bottom: 45px;
  height: 70px;
  display: block;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.search-plus .input-group label {
  width: 42%;
  height: 100%;
  vertical-align: middle;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.search-plus .radio-button {
  display: block;
  background-color: #EFEFEF;
  color: #000;
  font-size: 15px;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  box-sizing: content-box;
  height: 100%;
  transition: background-color .3s ease;
  position: relative;
}

.search-plus .radio-button span {
  display: inline-block;
  /* max-width: 80px; */
  width: auto;
}

.search-plus label:hover input~.radio-button {
  background-color: #379DFA;
}

.search-plus label input:checked~.radio-button {
  background-color: #99CDFD;
}

.search-plus .input-seperator {
  height: 50%;
  width: 30px;
  margin: 0 5px;
  display: inline-block;
  border-bottom: 3px solid #FFF;
}

.search-plus .radio-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.search-plus .question-heading {
  font-size: 15px;
  line-height: 19px;
  color: #FFF;
  text-transform: uppercase;
}

.explanation-text {
  color: #FFF;
  font-size: 15px;
  line-height: 19px;
  margin-bottom: 0;
}

/* 0 - 499 */
@media screen and (max-width: 499px) {
  .markerinfo-pois .poi {
    width: 100%;
  }
}

/*mobile only*/
/* 0 - 768 */
@media screen and (max-width: 768px) {
  .overlays-container {
    width: 100%;
    height: auto;
    min-height: 100%;
    left: 0;
    top: 0;
    padding-bottom: 96px;
    margin: 0;
    overflow-x: hidden;
  }

  .overlays-container.city-open:not(.filter-open) {
    background: #FFF;
  }

  .markerinfo-content {
    padding: 30px;
  }

  .markerinfo-content button {
    margin-top: 30px;
  }

  .markerinfo-container .image-wrapper {
    height: auto;
  }

  .markerinfo-image {
    height: auto;
    width: 100%;
  }

  .markerinfo-text {
    margin-bottom: 15px;
  }

  .markerinfo-pois {
    margin-bottom: 30px;
  }

  .filter-pois .button {
    width: 100%;
  }

  .markerinfo-pois label {
    padding-left: 40px;
    line-height: 30px;
  }

  .markerinfo-pois label:before {
    width: 30px;
    height: 30px;
  }

  .search,
  .search-plus,
  .filter-pois {
    height: auto;
    min-height: 100%;
  }

  .search .markerinfo-heading-small,
  .search-plus .markerinfo-heading-small {
    margin-top: 45px;
  }

  .markerinfo-heading-small:first-of-type {
    margin-top: 0;
  }

  .markerinfo-content .input-group {
    margin-bottom: 30px;
  }

  .markerinfo-content .input-group:last-of-type {
    margin-bottom: 0;
  }

  .vertical-align button+.explanation-text {
    margin-top: 10px;
  }

  .search-plus .input-group label {
    width: 46%;
  }

  .search-plus .input-seperator {
    width: 10px;
  }
}

/* desktop only*/
/* 769 - ... */
@media screen and (min-width: 769px) {

  .overlays-container {
    top: 60px !important;
    padding-bottom: 0 !important;
  }

  .markerinfo-content {
    padding: 45px;
  }

  .markerinfo-container .markerinfo-content {
    padding-top: 25px;
    padding-bottom: 10px;
  }

  .markerinfo-container .image-wrapper {
    height: 248px;
    overflow: hidden;
  }

  .markerinfo-image {
    height: 100%;
    width: auto;
    max-width: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .markerinfo-text {
    margin-bottom: 0;
  }

  .markerinfo-pois {
    margin-bottom: 20px;
  }

  .filter-pois {
    padding-top: 25px;
    padding-bottom: 30px;
  }

  .markerinfo-content button {
    margin-top: 45px;
  }

  .filter-pois button {
    margin-top: 25px;
  }

  .search .markerinfo-heading-small,
  .search-plus .markerinfo-heading-small {
    margin-top: 80px;
  }

  .search,
  .search-plus {
    padding-top: 55px;
    padding-bottom: 45px;
  }

  .markerinfo-content .input-group {
    margin-bottom: 35px;
  }

  .markerinfo-content .input-group:last-of-type {
    margin-bottom: 0;
  }

  .vertical-align p {
    display: inline;
  }

  .vertical-align button {
    margin-right: 30px;
  }

  .button-back-group button {
    margin-top: 45px;
  }
}

/*mobile navigation on guide only*/

.guide-nav {
  position: fixed !important;
  left: 0;
  bottom: 0;
  top: auto !important;
  background-color: #FFF;
  width: 100%;
  z-index: 10 !important;

  -webkit-box-shadow: -4px -2px 39px 10px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: -4px -2px 39px 10px rgba(0, 0, 0, 0.16);
  -o-box-shadow: -4px -2px 39px 10px rgba(0, 0, 0, 0.16);
  box-shadow: -4px -2px 39px 10px rgba(0, 0, 0, 0.16);
}

.guide-nav a.active {
  background-color: #EFEFEF !important;
}

.guide-nav li.disabled a {
  background-color: transparent !important;
  color: #6A1979 !important;
}

.guide-nav li.disabled {
  position: relative !important;
}

.guide-nav li.disabled:after {
  background-color: #FFF;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .9;
}

.guide-nav .icon-title {
  font-size: 12px;
  font-weight: 600px;
  text-align: center;
  line-height: 1;
}

.guide-nav a {
  color: #6A1979;
  margin-left: 0 !important;
  margin-right: 0 !important;

}

.guide-nav a.active {
  color: #6A1979 !important;
}

/* navigation logic */
/* general */
.overlays-container {
  display: block;
}

.search,
.search-plus,
.filter-pois,
.markerinfo-container {
  display: none;
}

.overlays-container.city-open .markerinfo-container {
  display: block;
}

.overlays-container.search-open .search,
.overlays-container.search-plus-open .search-plus {
  display: block;
}

/* navigation logic */
/* mobile */
@media screen and (max-width: 768px) {
  .overlays-container.overlay-closed {
    display: none;
  }

  .overlays-container.city-open .filter-pois {
    display: none;
  }

  .overlays-container.filter-open .filter-pois,
  .overlays-container.city-open.filter-open .filter-pois {
    display: block;
  }

  .overlays-container.city-open.filter-open .markerinfo-container {
    display: none;
  }

  .overlays-container.city-open {
    transition: all 1s ease;
  }

  .preview-open .overlays-container.city-open {
    border-radius: 10px 10px 0 0;
    -webkit-box-shadow: 0px 4px 19px 9px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 4px 19px 9px rgba(0, 0, 0, 0.16);
    -o-box-shadow: 0px 4px 19px 9px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 4px 19px 9px rgba(0, 0, 0, 0.16);
    position: absolute;
    overflow-x: visible;
  }

  .overlays-container.city-open .preview-toggle {
    padding: 40px;
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 1;
  }

  .preview-open .overlays-container.city-open .preview-toggle {
    top: -30px;
  }

  .overlays-container.city-open .preview-toggle:before {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0px;
    border-top: 30px solid #367EC0;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    z-index: 1000;
  }

  .preview-open .overlays-container.city-open .preview-toggle:before {
    border-top: none;
    border-bottom: 30px solid rgba(0, 0, 0, 0.5);
  }


}

/* navigation logic */
/* desktop */
@media screen and (min-width: 769px) {
  .overlays-container.city-open .filter-pois {
    display: block;
  }
}

/* ========= skip links */

.skipplinks {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 10;
  font-size: .8rem;
}

.skipplinks a {
  background-color: #fff;
  display: inline-block;
  left: 0;
  padding: 5px 10px;
  position: absolute;
  top: 0;
  transform: translateX(-100%);
  transition: .3s;
  white-space: nowrap;
  z-index: 1;
}

.skipplinks a:hover,
.skipplinks a:focus {
  transform: translateX(0);
  z-index: 2;
}

.video-row {
  position: relative;
  /* ::before */
}

.video-row::before {
  background: linear-gradient(to bottom, #d5d5d5 0%, #ffffff 100%);
  content: '';
  height: 200px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
}

.video-row .embed-container {
  margin-top: -2rem;
}

.logo-container {
  display: flex;
  align-items: baseline;
  width: auto;
}

/* ========= language-navigation */
.language-navigation {
  color: #000;
  font-size: 0.64rem;
  line-height: 1.1;
  margin-left: 85px;
  order: 1;
  /*.logo-container*/
}

.language-navigation ul {
  display: inline-flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.language-navigation li {
  display: inline-block;
}

.language-navigation li:not(:last-child) {
  margin-right: 6px;
  padding-right: 6px;
  border-right: 1px solid #000;
}

.language-navigation a {
  color: inherit;
}


/* ========= main-navigation */
.icon-main-navigation {
  background: transparent;
  color: #367EC0;
  display: block;
  font-weight: 700;
  height: 70px;
  line-height: 1;
  margin: .125rem 1rem;
  padding: 0 0 .75rem 0;
  position: relative;
  text-align: center;
  width: 70px;
}

.icon-main-navigation::before {
  height: 60px;
  width: 60px;
}

.icon-main-navigation::after {
  background-image: url('/assets/menu-desktop.svg');
  background-repeat: no-repeat;
  background-position: center;
  content: '';
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.icon-main-navigation .icon-title {
  display: block;
  margin-top: -.35rem;
}

.main-navigation-animation-background {
  position: fixed;
  background-color: #fff;
  border-radius: 50%;
  width: 220vw;
  height: 220vw;
  transform: scale(0) translateX(50%) translateY(-50%);
  transform-origin: right top;
  right: 100%;
  top: 50%;
  z-index: -1;
}

body.loaded .main-navigation-animation-background {
  /* use the "loaded" class to enable the transitions */
  transition: transform .4s;
}

@media screen and (orientation:portrait) {
  .main-navigation-animation-background {
    height: 220vh;
    width: 220vh;
  }
}

@media screen and (orientation:landscape) {
  .main-navigation-animation-background {
    height: 220vw;
    width: 220vw;
  }
}

.main-navigation {
  background-color: #fff;
  color: #000;
  display: flex;
  flex-direction: column;
  left: 0;
  height: 100%;
  overflow: auto;
  position: fixed;
  text-align: left;
  top: 0;
  width: 100%;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s, visibility .4s;
}

.fixed-navigation,
.toggle-navigation {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s, visibility .4s;
}

.main-navigation-opened .fixed-navigation,
.main-navigation-opened .toggle-navigation {
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s .3s, visibility .4s .3s;
}

.main-navigation-opened .main-navigation {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s .3s, visibility .4s .3s;
}

.main-navigation-opened .main-navigation-animation-background {
  transform: scale(1) translateX(50%) translateY(-50%);
}

.button-close-main-navigation {
  background-color: transparent;
  background-image: url('/assets/close-big.svg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 13px;
  top: 0;
  width: 24px;
  height: 27px;
}

.main-navigation.icon-outside::before {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 1000px;
  width: 1000px;
  content: ' ';
  position: absolute;
  left: -580px;
  top: -330px;
}

.main-navigation-inner {
  flex: 1 0 auto;
  /* .main-navigation */
  overflow: hidden;
  padding: 5vh 8.3%
}

.main-navigation-header .col-md-6:last-child {
  display: flex;
}

.button-close-main-navigation {
  cursor: pointer;
  order: 10;
  transform: translate(0, -50%);
}

.main-navigation .col-md-6:last-child {
  padding-left: 145px;
}

.main-navigation .language-navigation {
  margin-left: 0;
  margin-bottom: 5vh;
}

.main-navigation nav {
  font-size: 0.84rem;
  /* 21px */
}

.main-navigation nav ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 50%;
}

.main-navigation nav>ul {
  border-right: 1px solid #999;
  height: 13.5em;
  /* 9 lines */
  padding-right: 5.5%;
}

.main-navigation nav>ul>li>a {
  text-transform: uppercase;
}

.main-navigation nav ul li.opened>a,
.main-navigation a[aria-current="true"] {
  font-weight: 600;
}

.main-navigation nav ul ul {
  left: 50%;
  height: auto;
  min-height: 13.5em;
  /* enough for 9 lines */
  padding-left: 5.5%;
  padding-right: 10px;
  position: absolute;
  top: 0;
}

.main-navigation nav ul ul:not(.opened) {
  display: none;
}

.main-navigation .eye-catcher {
  align-items: flex-end;
  display: flex;
  font-size: 0.64rem;
  /* 16px */
}

.main-navigation .eye-catcher img {
  margin-right: -30px;
  max-width: 50%;
}

.main-navigation .eye-catcher a {
  align-items: center;
  display: flex;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  margin: 1rem 0 0;
  padding: 0;
  width: auto;
  height: auto;
}

.main-navigation .eye-catcher a::before {
  height: 50px;
  margin: -10px calc(2em - 10px) -10px -10px;
  width: 50px;
}

/* ========= main-navigation-additional */
.main-navigation-additional {
  font-size: 0.64rem;
  line-height: 1.1;
  margin-top: 5vh;
}

.main-navigation-additional ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 5px 0 0;
  padding: 0;
}

.main-navigation-additional li:not(:last-child) {
  margin-right: 6px;
  padding-right: 6px;
  border-right: 1px solid #000;
}


/* ========= main-navigation-footer */
.main-navigation-footer {
  flex: 0 0 auto;
  overflow: hidden;
}

.main-navigation-footer {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.main-navigation-footer .footer-slider-item {
  flex: 1 1 calc(100%/3);
}

.main-navigation-footer .slick-arrow {
  transform: translateY(-50%);
}

.main-navigation-footer .slick-arrow::before {
  opacity: .5;
}


/* ========= image-teaser */
.image-teaser {
  display: block;
  position: relative;
}

.image-teaser::after {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .9));
  bottom: 0;
  content: '';
  height: 50%;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.image-teaser img {
  vertical-align: top;
  width: 100%;
}

.image-teaser-text {
  align-items: flex-end;
  bottom: 0;
  color: #fff;
  display: flex;
  font-weight: 600;
  left: 0;
  line-height: 1.25;
  padding: 30px 70px;
  position: absolute;
  text-transform: uppercase;
  width: 100%;
  z-index: 1;
}

.text-bold {
  font-weight: bold;
}

/* ========= flex header */

.header-container {
  display: flex;
  margin-bottom: 1.5rem;
}

.header-addon {
  color: white;
  margin-right: 1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  font-size: .5rem;
  font-weight: bold;
}

.header-headline {
  flex-grow: 1;
}

.header-headline h2 {
  padding-top: .3em;
  padding-bottom: .3em;
}

.colored-purple .header-addon { background-color: #6A1979; }
.colored-purple .header-headline { border-bottom: 3px dotted #6A1979; }
.colored-blue .header-addon { background-color: #367EC0; }
.colored-blue .header-headline { border-bottom: 3px dotted #367EC0; }

/* ========= contact filter */

.contact-filter { margin-top: 2em; margin-bottom: 3em;}
.contact-filter .icon-list { top: -3em; }
.contact-filter .icon-list li > .icon-link { margin: 0 .5em; }
.contact-filter section { margin-top: 1em;}

.contact-filter .teaser-item { display: none; }
.contact-filter.category-1 .category-1, .contact-filter.all .category-1 { display: block; }
.contact-filter.category-2 .category-2, .contact-filter.all .category-2 { display: block; }
.contact-filter.category-3 .category-3, .contact-filter.all .category-3 { display: block; }
.contact-filter.category-4 .category-4, .contact-filter.all .category-4 { display: block; }
.contact-filter.category-5 .category-5, .contact-filter.all .category-5 { display: block; }

.contact-filter [role="button"][aria-pressed="true"] { background-color: gray !important; color: white; }

@media only screen and (min-width: 1200px) { /* lg */
  .contact-filter .icon-list { float: right; }
  .contact-filter .filter-header h2 { position: relative; top: -2em; }
}

@media only screen and (max-width: 1200px) { /* lg */
  .contact-filter .filter-header { margin-top: -4em; }
  .contact-filter .filter-header h2 { text-align: center; }
  .contact-filter .icon-list { top: 0; }
  .contact-filter .icon-list li > .icon-link { height: 90px; }
  .contact-filter section { margin-top: 3em;}
}

@media only screen and (max-width: 768px) { /* small */
  .contact-filter .icon-list li > .icon-link { margin: 0 .2rem 1rem; }
}

/* ========= centered border block */

.center-line {
  display:flex;
  margin-bottom: 1rem;
}

.line-left:before {
  content:'';
  flex:1;
  border-bottom: 3px dotted #6A1979;
  margin:auto 0;
}
.line-right:after {
  content:'';
  flex:1;
  border-bottom: 3px dotted #6A1979;
  margin:auto 0;
}

.line-right div {
  margin-right: 1rem;
}

/* ========= target groups */

.target-groups {
  display: inline-block
}
.target-groups .center-line {
  margin: 0 .75rem 3rem;
}
.target-groups h2 {
  padding: 0;
}

/* ========= stories */

.stories .row {
  position: relative;
  margin-top: -3.5rem;
  margin-bottom: 1em;
}

.stories h2 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* ========= usercentrics embedding */

.uc-embedding-container {
  overflow: hidden;
  /* min-height: auto; */
}

.uc-embedding-container,
.uc-embedding-container img {
  max-height: none;
  width: auto !important;
}

.uc-embedding-container img {
  width: 100% !important;
}

.uc-embedding-wrapper {
  min-width: 500px !important;
  width: auto !important;
}

.uc-embedding-accept {
  background-color: #367ec0 !important;
}

.uc-embedding-more-info {
  background-color: hsl(0.0,0%,90.0%) !important;
  color: hsl(0.0,0%,19%) !important;
}

.uc-embedding-wrapper span {
  font-size: 12px !important;
}

@media only screen and (max-width: 640px) {
  .uc-embedding-wrapper {
    min-width: 100% !important;
  }

  .uc-embedding-container,
  .uc-embedding-container img {
    height: auto !important;
  }
  
  .uc-embedding-buttons button {
    width: 100%;
  }

  .uc-embedding-more-info {
    margin-bottom: .5em;
  }
}

/* ========= usercentrics declaration */

.uc-embed {
  margin-bottom: 50px;
}
.uc-embed:last-child {
  margin-bottom: 0;
}

.uc-title {
  font-size: 18px;
  font-weight: bold;
  margin-left: .5em;
}

.uc-heading {
  font-size: 14px;
  font-weight: bold;
}

a + .uc-heading {
  margin-top: 10px;
}

.uc-list,
.uc-div,
.uc-a {
  font-size: 14px;
  margin: 0 0 10px;
}

.uc-list {
  padding-left: 0;
  padding-bottom: 0;
}

.uc-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.uc-list li {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 49%;
  flex: 1 0 48%;
  margin-right: 2%;
}

.uc-a {
  border-bottom: 1px solid #223954;
  color: #223954;
}

.uc-a:hover {
  border-bottom: 0 none;
}