/* Text Bereich xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#size {
    height: 2450px;
    overflow-x: hidden;
}

#textField  {
    text-align: center;
}

#TGWLogo {
   position: absolute;
   padding-left: 1330px;
   padding-top: 10px;
}

.title {
    font-family: TheSans,sans-serif;
    margin-top: 40px;
    font-size: 32px;
    font-weight: bold;
    color: #15607e;
}

#textVision {
    font-family: TheSans,sans-serif;
    font-size: 30px;
    color: #15607e;
}

#textWerte {
    font-family: TheSans,sans-serif;
    font-size: 24px;
    color: #15607e;
}

/* Spalten beginn */
#threeColumns {
    display: flex;
    justify-content: center;
}

#column1 {
    width: 335px;
    margin-right: 30px;
}

#column2 {
    width: 280px;
}

#column3 {
    width: 335px;
    margin-left: 30px;
}

#titleColumn {
    font-family: TheSans,sans-serif;
    font-size: 26px;
    color: #15607e;
    font-weight: bold;
}

#textColumn {
    font-family: TheSans,sans-serif;
    font-size: 24px;
    color: #15607e;
}
/* Spalten ende */

#textStrategie {
    font-family: TheSans,sans-serif;
    font-size: 24px;
    width: 1100px;
    color: #15607e;
    margin: auto;
}


/* Strategie darstellungs Bereich xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
#graphicField{
    position: relative;
    left: 50%;
    margin-left: -950px;
    
}

/*INNER CIRCLE- BACKGROUND, COLORED SHAPES  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#paletteInner {
    --g:30px; /* The gap between shapes*/
    --s:179px; /* the size*/
  
    height: 630px;
    width: 630px;
    position: absolute;
    overflow:hidden;
    margin-top: 210px;
    margin-left: 630px;
}

#paletteInner > * {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:var(--s) solid var(--c,	#64aae8);
    border-radius:50%;
    clip-path:polygon(
      calc(50% + var(--g)/2) 50%, 
      calc(50% + var(--g)/2) 0%, 
      100% 0%,
      100% calc(78.665% - var(--g)/2),
      50% calc(50% - var(--g)/2)); 
}

#color2 {
    transform:rotate(120deg);
    --c:#65b2b0;
}

#color3 {
    transform:rotate(-120deg);
    --c:#001156;
}

/* INNER CIRCLE- FOREGROUND, WHITE SHAPES  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#paletteInnerHighlighted {
    --g:38px; 
    --s:173px;
  
    height: 624px;
    width: 624px;
    position: absolute;
    overflow:hidden;
    margin-top: 213px;
    margin-left: 633px;
}

#paletteInnerHighlighted > * {
    display: block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:var(--s) solid var(--c,	White);
    border-radius:50%;
    clip-path:polygon(
      calc(50% + var(--g)/2) 50%, 
      calc(50% + var(--g)/2) 0%, 
      100% 0%,
      100% calc(78.665% - var(--g)/2),
      50% calc(50% - var(--g)/2)); 
}

#highlightColor_2 {
    transform:rotate(120deg);
    --c:White;
}

#highlightColor_3 {
    transform:rotate(-120deg);
    --c:White;
} 


/* OUTER CIRCLE- VISIBLE  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#paletteOuter {
    --g:30px; /* The gap between shapes*/
    --s:20px; /* the size*/
  
    height: 710px;
    width: 710px;
    position: absolute;
    overflow:hidden;
    margin-top: 170px;
    margin-left: 590px;
}

#paletteOuter > * {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:var(--s) solid var(--c,	#64aae8);
    border-radius:50%;
    clip-path:polygon(
      calc(50% + var(--g)/2) 50%, 
      calc(50% + var(--g)/2) 0%, 
      calc(91% - var(--g)/2) 0%,
      50% calc(50% - var(--g)/2)); 
}

#color1Outer {
    transform:rotate(40deg);
    --c:#64aae8;
}

#color2Outer {
    transform:rotate(80deg);
    --c:#64aae8;
}

#color3Outer {
    transform:rotate(120deg);
    --c:#65b2b0;
}

#color4Outer {
    transform:rotate(160deg);
    --c:#65b2b0;
}

#color5Outer {
    transform:rotate(-40deg);
    --c:#001156;
}

#color6Outer {
    transform:rotate(-80deg);
    --c:#001156;
}

#color7Outer {
    transform:rotate(-120deg);
    --c:#001156;
}

#color8Outer {
    transform:rotate(-160deg);
    --c:#65b2b0;
}

/* OUTER CIRCLE- INVISIBLE  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#paletteOuterHighlighted {
    --g:30px; /* The gap between shapes*/
    --s:60px; /* the size*/
  
    height: 830px;
    width: 830px;
    position: absolute;
    overflow: hidden;
    margin-top: 110px;
    margin-left: 530px;
}

#paletteOuterHighlighted > * {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:var(--s) solid var(--c,	#64aae8);
    border-radius:50%;
    clip-path:polygon(
      calc(50% + var(--g)/2) 50%, 
      calc(50% + var(--g)/2) 0%, 
      calc(91% - var(--g)/2) 0%,
      50% calc(50% - var(--g)/2)); 
}

#colorOuter_2 {
    transform:rotate(40deg);
    --c:#64aae8;
}

#colorOuter_3 {
    transform:rotate(80deg);
    --c:#64aae8;
}

#colorOuter_4 {
    transform:rotate(120deg);
    --c:#65b2b0;
}

#colorOuter_5 {
    transform:rotate(160deg);
    --c:#65b2b0;
}

#colorOuter_9 {
    transform:rotate(-40deg);
    --c:#001156;
}

#colorOuter_8{
    transform:rotate(-80deg);
    --c:#001156;
}

#colorOuter_7{
    transform:rotate(-120deg);
    --c:#001156;
}

#colorOuter_6{
    transform:rotate(-160deg);
    --c:#65b2b0;
}

[id^='colorOuter']{
    opacity: 0.3;
    display: none;
}



#logo {
    position: absolute;
    left: 820px;
    top: 470px;
}

.txtStyleInner {
    font-family: TheSans,sans-serif;
    line-height: 22px;
    letter-spacing: -0.1px;
    white-space: normal;
    width:150px;
    text-decoration: underline;
    text-align: left;
    font-size: 22px;
    color: #001155;
    font-weight: 700;
}

.txtStyleOuter {
    font-family: TheSans,sans-serif;
    line-height: 22px;
    letter-spacing: -0.1px;
    white-space: normal;
    width: auto;
    max-width: 230px;
    text-decoration: underline;
    text-align: left;
    font-size: 22px;
    color: #001155;
    font-weight: 700;
}


[id^='OuterText'], [id^='InnerText']{
    cursor: pointer;
}

/*Text im ersten Abschnitt */
#InnerTextOne {
    position: absolute;
    left: 1050px;
    top: 350px;
}

/*Text im dritten Abschnitt */
#InnerTextTwo {
    text-align: center;
    position: absolute;
    left: 870px;
    top: 725px;
}

/*Text im zweiten Abschnitt */
#InnerTextThree {
    text-align: center;
    position: absolute;
    left: 700px;
    top: 350px;
}

#InnerTextThree:hover {
    Color: White;
}

#OuterTextOne {
    position: absolute;
    left: 1100px;
    top: 150px;
}

#OuterTextTwo {
    position: absolute;
    left: 1290px;
    top: 340px;
}

#OuterTextThree {
    position: absolute;
    left: 1320px;
    top: 610px;
}

#OuterTextFour {
    position: absolute;
    left: 1190px;
    top: 830px;
}

#OuterTextFive {
    text-align: center;
    position: absolute;
    left: 830px;
    top: 915px;
}

#OuterTextSix{
    position: absolute;
    left: 590px;
    top: 830px;
}

#OuterTextSeven {
    position: absolute;
    left: 330px;
    top: 610px;
}

#OuterTextEight {
    position: absolute;
    left: 380px;
    top: 340px;
}

#OuterTextNine {
    position: absolute;
    left: 630px;
    top: 150px;
}