.sustainabilityLayer{
  width: calc(var(--singleUserWindowWidth) - (var(--singleUserWindowBorderSize) * 2));
  height: calc(var(--singleUserWindowHeight) - (var(--singleUserWindowBorderSize) * 2));
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  background-image: linear-gradient(to bottom, var(--bmwi_blue_100) , var(--bmwi_white_100));
  overflow: hidden;
}

.mainCircleContainer{
  height: 470;
  width: 470;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 150px;
  margin-bottom: 30px;
}

.mainCircle{
  width: 472px;
  height: 470px;
}

.bg_circle_marker{
  transform-origin: center center;
  transition: transform 0.5s ease;
}

.sustainabilityHeadline{
  position: absolute;
  margin-block-start: 0px;
  color: var(--bmwi_white_100);
  font-size: 60px;
  font-family: 'BundesSansWeb', arial, sans-serif;
  font-weight: bold;
}

.circle-container a {
	display: block;
	overflow: hidden;
	position: absolute;
	top: 47%; left: 47.5%;
	margin: -1em;
  cursor: pointer;
  user-select: none;
}

.center{
  /* pointer-events: none; */
  fill: var(--bmwi_white_100);
  width: 7em; height: 7em;
}

.deg0
 { transform: translate(10em);
   fill: var(--bmwi_blue_100);
   width: 7em; height: 8em;
 }

.deg60
 { transform: rotate(60deg) translate(9em,0em) rotate(-60deg);
   fill: var(--bmwi_blue_100);
   width: 7em; height: 7em
 }

.deg120
 { transform: rotate(120deg) translate(9.5em,1em) rotate(-120deg);
   fill: var(--bmwi_blue_100);
   width: 7em; height: 8em;
 }

.deg180
 { transform: translate(-10em,-1em);
   fill: var(--bmwi_blue_100);
   width: 7em; height: 7em;
}

.deg240
 { transform: rotate(240deg) translate(10.0em,0em) rotate(-240deg);
   fill: var(--bmwi_blue_100);
   width: 6em; height: 6em;
 }

.deg300
 { transform: rotate(300deg) translate(11em,0em) rotate(-300deg);
   fill: var(--bmwi_blue_100);
   width: 7em; height: 7em;

 }

.titleAboveTe{
  display: none;
  margin-bottom: -40px;
  cursor: pointer;
  user-select: none;
}

.text{
  display: none;
  font-family: 'BundesSansWeb', Verdana, Arial, Helvetica, sans-serif;
  padding: 45px 45px 0px 45px;
  color: var(--bmwi_blue_100);
  overflow-wrap: break-word;
  -ms-hyphens: auto;
  font-size: var(--mainFontSize);
  line-height: var(--mainLineHeight);
  margin-block-start:0px;
  margin-block-end:0px;
  height: 400px;
  margin: 0 auto;
  max-width: 1000px;
  cursor: pointer;
  user-select: none;
}

.is-displayed{
  display: block;
  margin-bottom: -40px;
}

h2.sustainabilityTitle{
  font-size: var(--turntableLabelFontSize);
  font-weight: bold;
  line-height: var(--turntableLabelLineHeight);
  padding: 0px;
  margin: 0px;
  text-align: center;
  color: var(--bmwi_blue_100);
  top: auto;
}

.is-selected{
  color: var(--bmwi_white_100);
}

.sectionSustainHeadline{
  width: 32%;
  top: 65;
  height: calc(var(--mainHeaderLineHeight) * 1.82);
  padding: 0px;
  margin-top: calc(var(--mainHeaderLineHeight) / 3);
  display: block;
  box-sizing: border-box;
  position: absolute;
  color: var(--bmwi_white_100);
  position: absolute;
}
.introShortText, .introLongText {
    font-size: var(--teaserFontSize);
    font-weight: normal;
    line-height: var(--teaserLineHeight);
    padding: 0px;
    margin: 0px;
    color: var(--bmwi_white_100);
    cursor: pointer;
    user-select: none;
}

.foldableOpen .introShortText {
    display: none;
}

.introLongText {
    display: none;
}

.foldableOpen .introLongText {
    display: block;
}

.introTextArrow {
    width: 25px;
    height: 50px;
    fill: var(--bmwi_white_100);
    transition: transform 0.2s ease;
    cursor: pointer;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.foldableOpen .introTextArrow {
    transform: rotate(180deg);
}