/*******************************************************************************/


/*                                                                             */


/*                                  Stages		                               */


/*                                                                             */


/*******************************************************************************/


/******************************  Stages  ************************************/

:root {
    --stagecolor1: #0C8786;
    --stagecolor2: #b0d3d4;
    --stagecolor3: #eaf3f4;
    --stagecolor4: #ffffff;
    --stagecolor5: #ffffff;
    --stagecolor6: #ffffff;
    --stagecolor7: #ffffff;
    --stagecolor8: #ffffff;
    --stagecolor9: #ffffff;
    --stagecolor10: #b3d7ecb2;
    --stagecolor11: #ffffffb2;
    --stagecolor12: #90a922b2;
    --stagecolor13: #d3d800b2;
    --stagecolor101: #437494;
}

.stage.standard {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 5% 0;
    position: relative;
}




.stage.timeline {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    padding: 0;
}

.stage-item {
    opacity: 0;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.stage-item.visible {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

.description.intro {
    max-width: 1200px;
    margin: 1vh auto 0;
}

.typo {
    font-size: 3.5vh;
}

.typo.big {
    font-size: 6vh;
}

.big {
    font-size: 20vh;
}


/*
	Containers
*/

section {
    position: relative;
    overflow: hidden;
}

.stage {
    height: 100vh;
    padding: 0;
    background-size: cover;
    background-position: center;
}

.stage.normal {
    height: auto;
    padding: 50px 0 0;
    color: var(--fontcolor);
}

#content-wrapper,
#story-wrapper {
    height: 100%;
}

.scrollContainer {
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%
}

.scrollContainer {
    height: 100%;
    margin: auto;
    overflow: hidden;
}

#story-wrapper .scrollContent {
    height: 100%;
}

.stage--row-wrapper {
    width: 99.33vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
}

.stage--row {
    width: 80%;
    padding: 50px 10% 0;
}

.stage--row.full-width {
    width: 100%;
    padding: 70px 0 0;
}

.stage .colorbox {
    padding: 20px 30% 20px 20px;
    border-radius: 20px;
    width: 100%;
    margin-bottom: 20px;
}

.stage .col--content {
    width: 90%;
    max-width: var(--pageSize);
    margin: auto;
}

.stage .col--left {
    width: 50%;
    margin-left: 0%;
    margin-top: 2%;
    display: inline-block;
    vertical-align: top;
    padding-top: 0px;
}

.stage .col--right {
    width: 48%;
    margin-left: 0%;
    display: inline-block;
    padding-top: 0;
}

.stage .col--left .colorbox {
    margin-left: -10%;
    padding: 20px 20px 20px 30%;
    width: 65%;
    border-radius: 0 20px 20px 0px;
}

.stage .col--right .colorbox {
    margin-left: 0%;
    padding: 20px 15px 20px 20px;
    width: 300%;
    border-radius: 20px 0px 0px 20px;
}

.stage .col--left .textbox {
    width: 90%;
    font-size: 1em;
}

.stage .col--right .textbox {
    width: 80%;
    font-size: 1em;
    max-width: 600px;
}

.stage.boxcolor4 p {
    color: white;
}

.stage .col--full.sublines {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
    font-size: 1.3em;
    line-height: 1.4em;
}

.slide--full .stage--column {
    width: 100%;
    max-width: var(--pageSize);
    margin: 0 auto;
}

.slide--full .col--standard {
    width: 100%;
    max-width: 1000px;
    position: relative;
    z-index: 10;
}


.stage--center {width:100%;max-width:1200px;margin:0 auto;}

/* ====================================================================================================================
 * MISC
 * ====================================================================================================================*/

.stagecolor1 {
    background: var(--stagecolor1);
}

.stagecolor2 {
    background: var(--stagecolor2);
}

.stagecolor3 {
    background: var(--stagecolor3);
}

.stagecolor4 {
    background: var(--stagecolor4);
}

.stagecolor5 {
    background: var(--stagecolor5);
}

.stagecolor6 {
    background: var(--stagecolor6);
}

.stagecolor7 {
    background: var(--stagecolor7);
}

.stagecolor8 {
    background: var(--stagecolor8);
}

.stagecolor9 {
    background: var(--stagecolor9);
}

.stagecolor10 {
    background: var(--stagecolor10);
}

.stagecolor11 {
    background: var(--stagecolor11);
}

.stagecolor101 {
    background: var(--stagecolor101);
}

.textbox {
    color: var(--fontcolor);
}

.txtcolor1 {
    color: var(--color1);
}

.txtcolor4 {
    color: var(--color4);
}

.txtcolor2 {
    color: var(--color2);
}

.txtcolor8 {
    color: var(--color8);
}

.txtcolor11 {
    color: var(--color11);
}

.boxcolor1 {
    background: var(--color1);
}

.boxcolor2 {
    background: var(--color2);
}

.boxcolor3 {
    background: var(--color3);
}

.boxcolor4 {
    background: var(--color4);
}

.boxcolor5 {
    background: var(--color5);
}

.boxcolor6 {
    background: var(--color6);
}

.boxcolor7 {
    background: var(--color7);
}

.boxcolor8 {
    background: var(--color8);
}

.boxcolor9 {
    background: var(--color9);
}

.boxcolor10 {
    background: var(--color10);
}

.boxcolor11 {
    background: var(--color11);
}

.boxcolor1 h3 {
    color: var(--white);
}

.boxcolor4 h3 {
    color: var(--white);
}

.col--left .col--standard {
    margin-left: 20%;
}

.illu.portrait {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    margin-top: -80px;
    margin-left: -120px;
}

.illu.icon {
    max-width: 200px;
}

.boxcolor11 p.textbox {
    color: var(--fontcolor);
}

.boxcolor8 p.textbox {
    color: white;
}

.boxcolor4 p.textbox {
    color: white;
}

.boxcolor5 p.textbox {
    color: white;
}

.boxcolor1 p.textbox {
    color: white;
}

.boxcolor2 p.textbox {
    color: var(--color1);
}

p.textbox.gray {
    color: var(--gray);
}

.col--standard.space--top1,
.col--content.space--top1 {
    margin-top: 30px;
}

.col--standard.space--top2,
.col--content.space--top2 {
    margin-top: 60px;
}

.col--standard.space--top3,
.col--content.space--top3 {
    margin-top: 100px;
}

.col--standard.space--top11 {
    margin-top: -250px;
}

.col--right.space--top1 {
    margin-top: 30px;
}

.col--right.space--top2 {
    margin-top: 60px;
}

.col--right.space--top3 {
    margin-top: 100px;
}

.col--right.space--top4 {
    margin-top: 150px;
}

.col--right.space--top5 {
    margin-top: 200px;
}

.col--standard.col--100 {
    width: 100%;
    max-width: var(--pageSize);
    margin: 70px auto 0;
}

.space--top3 {
    margin-top: 100px;
}

.space--top2 {
    margin-top: 60px;
}

.space--top1 {
    margin-top: 30px;
}

.fullheight {
    height: 100%;
}

.stage.fullheight.normal {
    height: 100%;
}

h3.centered {
    margin: 30% auto;
    text-align: center;
}


.blase {padding:20px;border-radius:20px;margin-bottom:30px;top:10%;position: relative;}
.blase.green {background:#90a922;color:#fff;max-width:600px;}
.blase.blue {background:var(--bubblecol1);color:#fff;max-width:600px;margin-left:15%;}
.blase.blue2 {background:var(--bubblecol5);color:#0C8786;max-width:600px;}
.blase.blue3 {background:var(--bubblecol7);color:#fff;max-width:600px;}
.blase.blue4 {background:var(--bubblecol6);color:#fff;}
.blase.red {background:var(--bubblecol4);color:#fff;max-width:600px;}


.blase.red.haken{border-radius:20px 20px 20px 20px;}
.blase.red.haken:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 20px;
    top: 100%;
    border: 12px solid;
    border-color: var(--bubblecol4) transparent transparent var(--bubblecol4);}
    

.blase.blue.haken{border-radius:20px 20px 20px 20px;}
.blase.blue.haken:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: 20px;
    top: 100%;
    border: 12px solid;
    border-color: var(--bubblecol2)  var(--bubblecol2) transparent transparent;}

.blase.blue2.haken{border-radius:20px 20px 20px 20px;}
.blase.blue2.haken:before {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        left: 20px;
        top: 100%;
        border: 12px solid;
        border-color: var(--bubblecol5)  transparent transparent  var(--bubblecol5);}    

.blase.blue3.haken-R{border-radius:20px 20px 20px 20px;}
.blase.blue3.haken-R:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: 20px;
    top: 100%;
    border: 12px solid;
    border-color: var(--bubblecol7)  var(--bubblecol7) transparent transparent;}

.blase.blue.haken-L{border-radius:20px 20px 20px 20px;}
.blase.blue.haken-L:before {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        left: 20px;
        top: 100%;
        border: 12px solid;
        border-color: var(--bubblecol2) transparent transparent var(--bubblecol2);}
        
.blase.green.haken{border-radius:20px 20px 20px 20px;}
.blase.green.haken:before {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        left: 20px;
        top: 100%;
        border: 12px solid;
        border-color: var(--bubblecol3) transparent transparent var(--bubblecol3);}
        



        .blase.talk1.haken{border-radius:20px 20px 20px 20px;}
        .blase.talk1.haken:before {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: 20px;
            top: 100%;
            border: 12px solid;
            border-color: var(--bubblecol5)  transparent transparent  var(--bubblecol5);}    
        
        
        .blase.talk2.haken{border-radius:20px 20px 20px 20px;}
        .blase.talk2.haken:before {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: 20px;
            top: 100%;
            border: 12px solid;
            border-color: var(--bubblecol6)  transparent transparent  var(--bubblecol6);}    
        
        .blase.talk3.haken{border-radius:20px 20px 20px 20px;}
        .blase.talk3.haken:before {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            right: 20px;
            top: 100%;
            border: 12px solid;
            border-color: var(--bubblecol7)  var(--bubblecol7) transparent transparent;}
        

/* ====================================================================================================================
 * STAGES
 * ====================================================================================================================*/
 .illu--sectionicon {max-width:500px;width:100%;margin:0 auto;position:absolute;}

/* ====================================================================================================================
 * A1
 * ====================================================================================================================*/

.stage svg .spirale {
    transform: rotate(0deg);
    transform-origin: 401px 297px;
}

.stage .wirbel-illu {
    position: absolute;
    left: -25%;
    top: -5%;
    width: 100%;
}

.stage .wirbel-blank {
    opacity: 0.2;
}

.intro {
    margin-top: 30px;
}

.intro h1 {
    font-size: 4em;
    text-transform: none;
    letter-spacing: 0em;
    hyphens: none;
    color: #fff;
    margin-bottom: 0.5em;
    line-height: 1.2em;
    text-transform:uppercase;
}

.intro h2.subline {
    font-size: 1.5em;
    text-transform: none;
    letter-spacing: 0em;
    hyphens: none;
    color: #fff;
    margin-bottom: 30px;
    margin-top: 0;
    max-width: 900px;
    width: 100%;
    font-family: "Asap Regular", Arial, sans-serif;
    font-weight: normal;
    line-height: 1.4em;
    font-style:italic;
}

.intro p.subline {
    font-size: 1.5em;
    text-transform: none;
    letter-spacing: 0em;
    hyphens: none;
    color: #fff;
    padding-bottom: 15px;
    max-width: 1000px;
    width: 100%;
    line-height: 1.4em;
}



.invisible {
    opacity: 1;
}


.phone1:after{
    content: url("svg/phone1.svg");;
    position:absolute !important;
    margin:-50px;
    width:100px;
    height:100px;
     top: 0;
  right: 0;
  }

.phone2:after{
    content: url("svg/phone2.svg");;
    position:absolute !important;
    margin:-70px -30px;
    width:100px;
    height:100px;
     top: 100%;
  right: 0;
  }  
  .phone1-2:after{
    content: url("svg/phone1_white.svg");;
    position:absolute !important;
    margin:-50px;
    width:100px;
    height:100px;
     top: 0;
  right: 0;
  }

.phone2-2:after{
    content: url("svg/phone2_white.svg");;
    position:absolute !important;
    margin:-70px -30px;
    width:100px;
    height:100px;
     top: 100%;
  right: 0;
  }
.intro--btn {
    color: #fff;
    padding: 5px 10px;
    border-radius: 15px;
    display: block;
    margin: 0 auto;
    background: #fff;
    width: 200px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 1em;
    line-height: 30px;
}
.svg.erdkugel {position: absolute;
    top: 40%;
    width: 40%;
    max-width:500px;
    height: 500px;
    right:10%;
    }
    


.col--standard {width:100%;max-width:var(--pagesize);margin:0 auto;}
.pos--top {margin-top:10vh;height:30vh;}
.col--left.bottom {position:relative;bottom:0;}
.textbox.colored {background:var(--secondarycolor); border-radius:10px;padding:5%;width:auto;color:#fff;
    display: inline-block;
    max-width: 300px;
 }
    
.centered {margin:0 auto;}
.illu--figure {max-width: 1000px;}
.illu--figure.top-1 {margin-top:-50px;}

.position-top {position:relative;z-index:10;}
.top1 {padding-top:5vh;}
.illusize.fullwidth {max-width: var(--pageSize);}


/* A1 */

#A1 .introtxt {max-width:800px;}
#A1 .overlay {width:100%;height:100vh;background:#fff;opacity:0.8;position:absolute;top:0;left:0;z-index: 10;}
#A1 .weiss {color:#fff;}
#A1 .txt-center {margin-top:20%;font-size: 2em;
  width: 30%;
  line-height: 1.3em;
margin-left:20%;
}
#A1 .svg.kim {position: absolute;
top: 30%;
width: 40%;
max-width:300px;
right:30%;

}
#A1 .pos--top {margin-top:25vh;}

#A1 .css-dreieck {
  width: 0px;
  height: 0px;

  border-top: 40px solid transparent; /* skyblue */
  border-right: 40px solid transparent; /* limegreen;  */
  border-bottom: 40px solid transparent; /* orange; */
  border-left: 40px solid white; 
  position:relative;
  display:block;
  left:50%;
  top:-100px;
}

/* A2 */
#A1 .subline {margin-left:10%;}
.overlay {width:100%;height:100vh;background:#fff;opacity:0.8;position:absolute;top:0;left:0;z-index: 10;}
.weiss {color:#fff;}
.txt-center {margin-top:20%;font-size: 2em;
  width: 30%;
  line-height: 1.3em;
margin-left:20%;
}
.svg.kim {position: absolute;
top: 30%;
width: 40%;
max-width:300px;
right:30%;

}
#A1 .pos--top {margin-top:25vh;}

#A1 .css-dreieck {
  width: 0px;
  height: 0px;

  border-top: 40px solid transparent; /* skyblue */
  border-right: 40px solid transparent; /* limegreen;  */
  border-bottom: 40px solid transparent; /* orange; */
  border-left: 40px solid white; 
  position:relative;
  display:block;
  left:50%;
  top:-100px;
}

/* A3 */

#A2 p.textbox {width:100%;max-width:600px;margin:10vh auto;}

/* A4 */

#A3 .col--left {width:40%;max-width:350px;}
#A3 .col--right {width:60%;max-width:600px;}
#A3 .centered {margin:10% auto 0;width:100%;max-width:1000px;}
#A3 .illusize-normal {max-width: 250px;}

/* B1 */
#B1 .top1 {margin-top:10%;}

#D3 p.textbox {
    opacity: 1;
}

#D3 .textbox.pos-top {
    height: 100%;
    background: #fff;
}

#D3 div.pos-top {
    max-width: 550px;
    width: 100%;
}

/* B2 */

#B2 .kaffee {position: absolute;
    right: 10px;
    top: bott;
    bottom: -50px;
    max-width: 80px;}
  
   #B2-3 {
  margin-bottom:60px !important;
   } 
    hr.white {
      border:0;
    border-top: 1px solid white;
  }
  
  span.underline:after {     content: '';
    flex: 1;
    margin-left: 1rem;
    height: 1px;
    background-color: #000;}
  #B2 .illu--left {position:absolute;max-width:150px;width:100%;margin-left:-200px;bottom:30%;}
  #B2 .illu--left2 {position:absolute;max-width:100px;width:100%;margin-left: -70px;  bottom: -70px;}
  #B2 .illu--bottom {position:absolute;max-width:300px;height:130px;width:100%;bottom:-66px;right:-90px;}
  #B2 .illu--right {position:absolute;max-width:400px;width:100%;bottom:10%;right:10%;}
  .dialog {max-width:800px;margin:50px auto;}
  #B2 .blase {padding:20px;border-radius:20px;margin-bottom:30px;position:relative;top:30%;}
  #B2 .blase.green {background:#90a922;color:#fff;max-width:700px;}
  
  
  
  #B2 .blase.green2:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 16px;
  top: 100%;
  border: 13px solid;
  border-color: #90a922 transparent transparent #90a922;}
  
  #B2 .blase.blue {background:#3babae;color:#fff;max-width:700px;}


/* B4 */
#B4 .illu--center {position:relative;max-width:700px;width:100%;margin:0 auto;}



/* B5 */
#B5 .illu--left {position:absolute;max-width:300px;width:100%;margin-left:-300px;top:30%;}
#B5 .illu--right {position:absolute;max-width:200px;width:100%;right:-150px;bottom:-200px;}

/* B6 */
#B6 .artikel {background:#fff;border-radius:20px;padding:50px;max-width:1000px;width:100%;margin:5% auto;color:#000;min-height:500px;}
#B6 .illu--right {text-align:left;padding:0 20px;float: right;}
#B6 p {font-size:1.2em;line-height:1.3em;max-width:600px;}
#B6 h3 {font-size:2em;line-height:1.3em;margin:0;padding:0;padding-bottom:0;margin-bottom:10px;}
#B6 h4 {font-style:italic;font-size:1.3em;font-weight:400;margin:0;padding-bottom:20px;color:#666;}


/* B8*/
#B8 .illu--center {position:absolute;max-width:800px;width:100%;margin-left:0px;top:50%;}
#B8 .blase.blue {width: 400px;
  margin-left: 50%;margin-top:15%;}


/* C1 */
#C1 .top1 {margin-top:10%;}



/* C2 */
#C2 .top1 {margin-top:40%;}
#C2 .col--left .illu--left {position:absolute;max-width:200px;width:100%;margin-left:-200px;}
#C2 .col--left .illu--bottom {position:absolute;max-width:300px;width:100%;}
#C2 .col--right .illu--right {position:absolute;max-width:1000px;width:100%;bottom:10%;left:20%;}
#C2 .blase.blue {width: 400px; margin-left: 20%;position:absolute;top:30%;}
#C2 .blase.blue2 {position:absolute;top:30%; margin-left: 5%;}
#C2-B p {font-size:1.2em;}


/* C3 */
#C3 .illu--center {max-width:1200px;width:100%;margin:0 auto;}
#C3 p.textblock {margin-top:10%;position:absolute;}

/* C4 */
#C4 .illu--center {position:absolute;max-width:800px;width:100%;margin-left:0px;top:50%;}
#C4 .blase.blue {position:absolute;top:30%;width:400px;margin-left: 20%;}


/* C5 */
#C5 .illu--fullwidth {max-width:1000px;width:100%;}
#C5 .top1 {margin-top:-50px;}


/* D1 */
#D1 .top1 {margin-top:10%;}



/* D2 */
#D2 .top1 {margin-top:40%;}
#D2 .col--left .illu--left {position:absolute;max-width:200px;width:100%;margin-left:-200px;}
#D2 .col--left .illu--bottom {position:absolute;max-width:300px;width:100%;}
#D2 .col--right .illu--right {position:absolute;max-width:1000px;width:100%;bottom:10%;left:20%;}
#D2 .blase {padding:20px;border-radius:20px;margin-bottom:30px;}
#D2 .blase.green {background:#90a922;color:#fff;position:absolute;}
#D2 .blase.blue {background:#3babae;color:#fff;position:absolute;top:30%;}


#D2 .talk1 {background:var(--bubblecol5);color:var(--fontcolor);width:400px;margin-left:5%;position:absolute;top:30%;}
#D2 .talk2 {background:var(--bubblecol6);color:#fff;width:400px;margin-left:20%;position:absolute;top:30%;}
#D2 .talk3 {background:var(--bubblecol7);color:#fff;width:400px;margin-left:10%;position:absolute;top:30%;}

#D2-B p {font-size:1em;}
#D2-B ol.abc-liste {font-size:1em;color:#fff;list-style-type:lower-alpha;padding-top:20px;padding-bottom:20px;}
#D2-B ol.abc-liste li {padding-bottom:10px;}

#D2-B .col--standard {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 10;
}


#D2-B ol.abc-liste {
    counter-reset: list;
}
#D2-B ol.abc-liste > li {
    list-style: none;
    position: relative;
}
#D2-B ol.abc-liste > li:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}


#D2 .itp-illu {position:relative;width:400px;margin:0 auto;display:block;}
#D2 img.itp {position:absolute;max-width:350px;}  

/* D3 */
ul.listwhite {color:#fff;}
#D3 .stage--column  {max-width:1200px;width:100%;margin:0 auto;  display: table;height: 100vh;}
#D3 .col--center  {max-width:1200px;width:100%;margin:0 auto;display:table-caption;}
#D3 .col--center.bottom  {max-width:1200px;width:100%;margin:0 auto;vertical-align: bottom;padding-bottom: 30%;display: table-cell;}
#D3 .blase {padding:20px;border-radius:20px;margin-bottom:30px;top:10%;}
#D3 .blase.green {background:#90a922;color:#fff;max-width:600px;}
#D3 .blase.blue {background:#3babae;color:#fff;max-width:600px;margin-left:15%;}
#D3 .blase.red {background:var(--bubblecol4);color:#fff;max-width:600px;}

#D3-D p {font-size:1em;}


#D3 .illu--left {position:absolute;max-width:180px;width:100%;margin-left:-250px;bottom:30%;}
#D3 .illu--bottom {position:absolute;max-width:300px;height:130px;width:100%;bottom:-66px;right:-90px;}
#D3 .illu--right {position:absolute;max-width:400px;width:100%;bottom:10%;right:15%;}


.blase.bubblecol4 {background:var(--bubblecol4);color:#fff;}
#D3 .cta-bubble {position:absolute;max-width:400px;width:100%;bottom:15%;right:20%;}
.transment_anim {position:absolute;width:1200px;height:300px;bottom:0;}
.transment_anim span.upper {display:inline-block;text-transform:uppercase;}
.transment_anim span.lower {display:inline-block;}
#D3-t1.txtanim {position:absolute;left:10%;top:0;}
#D3-t2.txtanim {position:absolute;left:0%;top:20%;}
#D3-t3.txtanim {position:absolute;left:30%;top:40%;}
#D3-t4.txtanim {position:absolute;left:40%;top:10%}
.transment_anim .txtanim {font-size:2em;color:var(--color1);font-weight:normal;font-family: "Asap SemiBold", Arial, sans-serif;}

/* D4 */

#D4 .illu--fullwidth {max-width:1000px;width:100%;}
#D4 .illu--bottom {max-width:450px;width:100%;margin-top:-100px;}
#D4 .top1 {margin-top:-50px;}


/* E1 */

#E1 .stage--column  {max-width:1200px;width:100%;margin:0 auto;  display: table;height: 100vh;}
#E1 .col--center  {max-width:1200px;width:100%;margin:0 auto;display:table-caption;}
#E1 .col--center.bottom  {max-width:1200px;width:100%;margin:0 auto;vertical-align: bottom;padding-bottom: 30%;display: table-cell;}
#E1 .blase {padding:20px;border-radius:20px;margin-bottom:30px;top:10%;position:relative;}
#E1 .blase.blue {background:#3babae;color:#fff;max-width:700px;}
#E1 .blase.red {background:var(--bubblecol4);color:#fff;max-width:700px;}

#E1 .illu--left {position:absolute;max-width:180px;width:100%;margin-left:-250px;bottom:30%;}
#E1 .illu--bottom {position:absolute;max-width:300px;height:130px;width:100%;bottom:-66px;right:-90px;}
#E1 .illu--right {position:absolute;max-width:400px;width:100%;bottom:10%;right:15%;}

/* E2 */

#E2 .illu--fullwidth {max-width:1000px;width:100%;}
#E2 .illu--bottom {max-width:450px;width:100%;margin-top:-100px;}
#E2 .top1 {margin-top:-50px;}

/* F1 */
#F1 .top1 {margin-top:10%;}


/* F2 */
#F2 .delta-illu {position:relative;width:200px;margin:0 auto;display:block;}
#F2 img.delta {position:absolute;max-width:180px;}    
#F2 .stage--column  {max-width:1200px;width:100%;margin:0 auto;  display: table;height: 100vh;}
#F2 .col--center  {max-width:1200px;width:100%;margin:0 auto;display:table-caption;}
#F2 .col--center.bottom  {max-width:1200px;width:100%;margin:0 auto;vertical-align: bottom;padding-bottom: 30%;display: table-cell;}
#F2 .blase {padding:20px;border-radius:20px;margin-bottom:30px;top:10%;position:relative;}

#F2 .illu--left {position:absolute;max-width:180px;width:100%;margin-left:-250px;bottom:30%;}
#F2 .illu--bottom {position:absolute;max-width:300px;height:130px;width:100%;bottom:-66px;right:-90px;}
#F2 .illu--right {position:absolute;max-width:400px;width:100%;bottom:10%;right:15%;}

#F2-Z p {font-size:1em;}
#F2-Z ul.abc-liste {font-size:1em;color:#fff;list-style-type:disc;padding-top:20px;padding-bottom:20px;}
#F2-Z ul.abc-liste li {padding-bottom:10px;}

#F2-Z .col--standard {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 10;
}


#F2-Z ol.abc-liste {
    counter-reset: list;
}
#F2-Z ol.abc-liste > li {
    list-style: none;
    position: relative;
}
#F2-Z ol.abc-liste > li:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}
#B2 .blase.blue.haken:before, 
#D3 .blase.blue.haken:before,  
#F2 .blase.blue.haken:before, 
#F4 .blase.blue.haken:before, 
#G2 .blase.blue.haken:before,
#G4 .blase.blue.haken:before,
#H2 .blase.blue.haken:before,
#H4 .blase.blue.haken:before, 
#I1 .blase.blue.haken:before, 
#I3 .blase.blue.haken:before {border-color: var(--bubblecol7) var(--bubblecol7) transparent transparent;}

/* F3 */

#F3 .stage--column  {max-width:1200px;width:100%;margin:0 auto;  display: table;height: 100vh;}
#F3 .col--center  {max-width:1200px;width:100%;margin:0 auto;}
#F3 .top1 {margin-top:30px;}



/* F4 */

#F4 .stage--column  {max-width:1200px;width:100%;margin:0 auto;  display: table;height: 100vh;}
#F4 .col--center  {max-width:1200px;width:100%;margin:0 auto;display:table-caption;}
#F4 .col--center.bottom  {max-width:1200px;width:100%;margin:0 auto;vertical-align: bottom;padding-bottom: 30%;display: table-cell;}
#F4 .blase {padding:20px;border-radius:20px;margin-bottom:30px;top:10%;}

#F4 .illu--left {position:absolute;max-width:180px;width:100%;margin-left:-250px;bottom:30%;}
#F4 .illu--bottom {position:absolute;max-width:300px;height:130px;width:100%;bottom:-66px;right:-90px;}
#F4 .illu--right {position:absolute;max-width:400px;width:100%;bottom:10%;right:15%;}

#F4-Y p {font-size:1.2em;}
#F4-Z p {font-size:1.2em;}
#F4-Z ol.abc-liste {font-size:1em;color:#fff;list-style-type:lower-alpha;padding-top:20px;padding-bottom:20px;}
#F4-Z ol.abc-liste li {padding-bottom:10px;}

#F4-Z .col--standard {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 10;
}
#F4-Y .col--standard {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 10;
}

#F4-Z ol.abc-liste {
    counter-reset: list;
}
#F4-Z ol.abc-liste > li {
    list-style: none;
    position: relative;
}
#F4-Z ol.abc-liste > li:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}
#F4-Z .boxrahmen  {border:2px solid #fff;border-radius:5px;padding:20px;font-style:italic;}

/* F5 */
#F5 .illu--fullwidth {max-width:1000px;width:100%;}
#F5 .illu--bottom {max-width:450px;width:100%;margin-top:-100px;}
#F5 .top1 {margin-top:-50px;}

/* G1 */
#G1 .top1 {margin-top:10%;}



/* G2 */

#G2 .stage--column  {max-width:1200px;width:100%;margin:0 auto;  display: table;height: 100vh;}
#G2 .col--center  {max-width:1200px;width:100%;margin:0 auto;display:table-caption;}
#G2 .col--center.bottom  {max-width:1200px;width:100%;margin:0 auto;vertical-align: bottom;padding-bottom: 30%;display: table-cell;}
#G2 .blase {padding:20px;border-radius:20px;margin-bottom:30px;top:10%;position:relative;}


#G2 .illu--left {position:absolute;max-width:180px;width:100%;margin-left:-250px;bottom:30%;}
#G2 .illu--bottom {position:absolute;max-width:300px;height:130px;width:100%;bottom:-66px;right:-90px;}
#G2 .illu--right {position:absolute;max-width:400px;width:100%;bottom:10%;right:15%;}


/* G3 */

#G3 .grafik-dialog {height:100px;}
#G3 .grafik-dialog .blase {position:absolute;}
#G3 .illu--fullwidth {max-width:1000px;width:100%;}
#G3 .illu--bottom {max-width:450px;width:100%;margin-top:-100px;}
#G3 .top1 {margin-top:-50px;}
#G3-Y p {font-size:1.2em;}
#G3-Z p {font-size:1.2em;}
#G3-Z ol.abc-liste {font-size:1em;color:#fff;list-style-type:lower-alpha;padding-top:20px;padding-bottom:20px;}
#G3-Z ol.abc-liste li {padding-bottom:10px;}

#G3-Z .col--standard {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 10;
}
#G3-Y .col--standard {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 10;
}

/* G4 */
#G4 .illu--fullwidth {max-width:1000px;width:100%;}
#G4 .illu--bottom {max-width:450px;width:100%;margin-top:-100px;}
#G4 .top1 {margin-top:-50px;}
#G4 .sprechblasen.rechts {position:absolute;right: 15%; top: 30vh;width: 400px;}


/* H1 */
#H1 .top1 {margin-top:10%;}


/* H2 */
#H2 .stage--column  {max-width:1200px;width:100%;margin:0 auto;  display: table;height: 100vh;}
#H2 .col--center  {max-width:1200px;width:100%;margin:0 auto;display:table-caption;}
#H2 .col--center.bottom  {max-width:1200px;width:100%;margin:0 auto;vertical-align: bottom;padding-bottom: 30%;display: table-cell;}
#H2 .blase {padding:20px;border-radius:20px;margin-bottom:30px;top:10%;position:relative;}


#H2 .illu--left {position:absolute;max-width:180px;width:100%;margin-left:-250px;bottom:30%;}
#H2 .illu--bottom {position:absolute;max-width:300px;height:130px;width:100%;bottom:-66px;right:-90px;}
#H2 .illu--right {position:absolute;max-width:400px;width:100%;bottom:10%;right:15%;}
#H2-Z p {font-size:1.2em;}

/* H3 */
#H3 .blase.red {
    max-width: 650px;
  }
#H3 .grafik-dialog {height:100px;}
#H3 .grafik-dialog .blase {position:absolute;}

#H3 .illu--fullwidth {max-width:1000px;width:100%;}
#H3 .illu--bottom {max-width:450px;width:100%;margin-top:-100px;}
#H3 .top1 {margin-top:-50px;}

.tippy-box[data-theme~='tomato']   {
  background-color: #eaf3f4;
  color: #0C8786;
  padding:0 10px 10px;border-radius:10px;
  -webkit-box-shadow: 5px 5px 15px 2px rgba(0,0,0,0.24); 
box-shadow: 5px 5px 15px 2px rgba(0,0,0,0.24);
}

.tippy-box[data-theme~='tomato'] h4  {
font-size:1.2em;
}


.tippy-box[data-theme~='tomato'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: #eaf3f4;
}
.tippy-box[data-theme~='tomato'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: #eaf3f4;
}
.tippy-box[data-theme~='tomato'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: #eaf3f4;
}
.tippy-box[data-theme~='tomato'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: #eaf3f4;
}




/* H4 */

#H4 .stage--column  {max-width:1200px;width:100%;margin:0 auto;  display: table;height: 100vh;}
#H4 .col--center  {max-width:1200px;width:100%;margin:0 auto;display:table-caption;}
#H4 .col--center.bottom  {max-width:1200px;width:100%;margin:0 auto;vertical-align: bottom;padding-bottom: 30%;display: table-cell;}
#H4 .blase {padding:20px;border-radius:20px;margin-bottom:30px;top:10%;position:relative;}


#H4 .illu--left {position:absolute;max-width:180px;width:100%;margin-left:-250px;bottom:30%;}
#H4 .illu--bottom {position:absolute;max-width:300px;height:130px;width:100%;bottom:-66px;right:-90px;}
#H4 .illu--right {position:absolute;max-width:400px;width:100%;bottom:10%;right:15%;}

#H4 .blase.button {background:var(--stagecolor101);color:#fff;width:400px;position:absolute;right:0;bottom:10%;}
#H4 .blase.button img {float: left;  margin-right: 20px;}

/* H5 */

#H5 .illu--fullwidth {max-width:1000px;width:100%;}
#H5 .illu--bottom {max-width:450px;width:100%;margin-top:-100px;}
#H5 .top1 {margin-top:-50px;}




/* I1 */

#I1 .col--center  {max-width:1200px;width:100%;margin:0 auto;display:table-caption;}
#I1 .col--center.bottom  {max-width:1200px;width:100%;margin:0 auto;vertical-align: bottom;padding-bottom: 30%;display: table-cell;}
#I1 .blase {padding:20px;border-radius:20px;margin-bottom:30px;top:10%;position:relative;}

#I1 .illu--left {position:absolute;max-width:180px;width:100%;margin-left:-250px;bottom:30%;}
#I1 .illu--bottom {position:absolute;max-width:300px;height:130px;width:100%;bottom:-66px;right:-90px;}
#I1 .illu--right {position:absolute;max-width:400px;width:100%;bottom:10%;right:15%;}

#I1 .blase.button {background:var(--stagecolor101);color:#fff;width:400px;position:absolute;right:0;bottom:10%;}
#I1 .blase.button img {float: left;  margin-right: 20px;}

/* I2*/
#I2 .grafik-dialog {height:100px;}
#I2 .grafik-dialog .blase {position:absolute;}
#I2 .illu--fullwidth {max-width:1000px;width:100%;}
#I2 .illu--bottom {max-width:450px;width:100%;margin-top:-100px;}
#I2 .top1 {margin-top:-50px;}



/* I3*/
#I3 .stage--column  {max-width:1200px;width:100%;margin:0 auto;  display: table;height: 100vh;}
#I3 .col--center  {max-width:1200px;width:100%;margin:0 auto;display:table-caption;}
#I3 .col--center.bottom  {max-width:1200px;width:100%;margin:0 auto;vertical-align: bottom;padding-bottom: 30%;display: table-cell;}
#I3 .blase {padding:20px;border-radius:20px;margin-bottom:30px;top:10%;position:relative;}


#I3 .illu--left {position:absolute;max-width:180px;width:100%;margin-left:-250px;bottom:30%;}
#I3 .illu--bottom {position:absolute;max-width:300px;height:130px;width:100%;bottom:-66px;right:-90px;}
#I3 .illu--right {position:absolute;max-width:400px;width:100%;bottom:10%;right:15%;}

#I3 .illu-portrait {position:absolute;max-width:80px;padding-left:100px;}
#I3 .illu-portrait.paula {position:absolute;padding-left:200px;}

/* I4*/
#I4 .illu--fullwidth {max-width:1000px;width:100%;}
#I4 .illu--bottom {max-width:450px;width:100%;margin-top:-100px;}
#I4 .top1 {margin-top:-50px;}


/* J1 */



#J1 .stage--row.full-width {
    padding: 60px 0 0;
}

#J1 .actors .pcol {
    fill: #ffffff;
}

#J1 .actors .gfx-txt {
    font-size: 9px;
    font-family: 'Asap Medium';
    fill: #ffffff;
}

#J1 a svg {
    cursor: pointer;
}


#J1 a svg:hover {
 
    filter: brightness(130%);
    }


#J1 .column7 .column {
    width: 12%;
    margin: 0 1%;
}

#J1 .column7 {
    display: flex;
    margin-left:30px;
}

#J1 .tabcontent {
    display: none;
    border-radius: 40px;
    background-color: var(--stagecolor1);
    padding: 50px 50px;
    margin-top: 0px;
    color:#fff;
}

#J1 .tabcontent.aktiv {
    display: block;
}

#J1 .tabcontent ul {
    margin: 0;
    padding: 20px;
    font-size: 0.8em;
    break-inside: avoid;
}

#J1 .tabcontent ul li {
     width: 100%;
    padding-bottom: 5px;
    line-height: 1.1em;
    position: relative;
}


#J1 .tablinks.active {
    background: var(--stagecolor1);
    height: auto;
    border-radius:  80px 80px 0 0;
    display: block;
}

#J1 .tablinks:hover {

    height: auto;
    border-radius: 80px 80px 0 0;
    display: block;
}

#J1 .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

#J1 .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

#J1 .tab button:hover {
    background-color: #ddd;
}

#J1 .tab button.active {
    background-color: #ccc;
}




#J1 a {color:#56ffef;}
#J1 .illu--left {max-width:400px;width:100%;position:absolute;left:0;top:100px;}
#J1 .top1 {margin-top:25%;}
#J1 h4 {font-size:1.5em;margin:0;padding:0;padding-bottom:30px;}
#J1 .spaltig {
    column-width: 400px;
    column-gap: 2em;
}
#J1 .spaltig p {
font-size:18px;
}

#J1 p.quelle {font-size:14px;font-style:italic;line-height:16px;}
#J1 .tippy-box a {
    color: #0C8786;font-style:italic;
}

/* F1 */

#F1 .stage--row.full-width {
    padding: 60px 0 0;
}

#F1 .accordion-container {
    width: 100%;
    max-width: 1100px;
}

#F1 .accordion-container {
    width: 100%;
    max-width: 1100px;
}

#F1 .col--full {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

#F1 .more {
    display: block;
    margin-top: 30px;
}

#F1 .legal {
    display: block;
    font-size: 0.6em;
    line-height: 1.5em;
}

#F1 .acclogo1 {
    max-width: 200px;
    margin-right: 100px;
}

#F1 .acclogo2 {
    max-width: 300px;
}

#F1 .acclogo3 {
    max-width: 250px;
    margin-right: 100px;
}

#F1 .acclogo4 {
    max-width: 250px;
}

#F1 .acclogo5 {
    max-width: 300px;
}

#F1 .acclogo6 {
    max-width: 300px;
}

#F1 .ac-logo {
    padding: 20px 50px 0;
    margin-bottom: 0px;
}
.blase.button {
    background: var(--stagecolor101);
    color: #fff;
    width: 300px;
    position: absolute  !important;
    right: 5%;
    bottom: 5%;
    top: inherit !important;
    border-radius: 20px  !important;
    z-index:1;
    padding:20px 20px 20px 30px !important;
  }

.blase.button img {
    float: left;
    margin-left: -110px;
    max-width:100px;
  }
  .blase.button img:hover {
    filter: brightness(150%);
  }


img.back.icon.pfeil  {
    float: left;
    margin-left: -120px;
    margin-top: -10px;
    max-width:100px;
  }



/* ====================================================================================================================
 * RESPONSIVE
 * ====================================================================================================================*/


/* small devices (laptops) */

@media screen and (max-width: 1400px) {
    .stage .col--right {
        float: right;
        width: 40%;
    }
    .stage .col--right .colorbox {
        width: 200%;
    }
    .stage .col--right .textbox {
        width: 40%;
        font-size: 1em;
        max-width: 600px;
    }
 
}


/* small devices (small desktops) */

@media screen and (max-width: 1200px) {
    .stage .col--right .colorbox {
        width: 120%;
    }
    .stage .col--content {
        width: 90%;
        max-width: 1100px;
        margin: 0 auto;
    }
    .intro .subscene #A1-4 {
        width: 800px;
        margin-left: 0px;
    }
    .intro .subscene {
        margin-top: -200px;
    }
    .stage .col--right .textbox {
        width: 40%;
    }

}

@media screen and (max-width: 992px) {
    #J1 h2.subline {color:var(--color1);
    text-transform:none;letter-spacing: 0;
    }

}


/* Medium devices (tablets, 768px and up) */

@media screen and (max-width: 768px) {
    .stage .col--content {
        width: 95%;
        max-width: 750px;
        margin: 0 auto;
    }
    .space--top3 {
        margin-top: 60px;
    }
    .space--top2 {
        margin-top: 30px;
    }
    .space--top1 {
        margin-top: 20px;
    }
    .colorbox p {
        margin-bottom: 0px !important;
    }
    #story-wrapper .stage--row {
        width: 90%;
        padding: 5% 5%;
    }
    #story-wrapper .stage--row.full-width {
        width: 90%;
        padding: 60px 20px 10px;
    }
    #story-wrapper .textblock {
        line-height: 1.4em;
        font-size: 1em;
    }
    #story-wrapper .typo-big {
        font-size: 4em;
    }
    #story-wrapper .stage .col--left {
        width: 100% !important;
        margin-left: 0%;
        margin-top: 30px;
        display: block !important;
        padding: 0;
    }
    #story-wrapper .stage .col--right {
        width: 100% !important;
        margin-left: 0%;
        margin-top: 0%;
        display: block !important;
        padding: 0px 0 0 !important;
        float: left;
    }
    #story-wrapper .stage .colorbox {
        margin-left: 0%;
        padding: 20px !important;
        width: auto;
        border-radius: 20px;
    }
    #story-wrapper .stage .col--right .textbox {
        width: 100% !important;
        font-size: 0.8em !important;
        line-height: 1.2em !important;
    }
    #story-wrapper .stage .col--left .textbox {
        width: 100% !important;
        font-size: 0.8em !important;
        line-height: 1.2em !important;
    }
    #story-wrapper .textblock.big {
        padding-top: 0%;
        font-size: 1.5em !important;
        line-height: 1.4em !important;
        padding-bottom: 50px;
    }


    h2 {
        font-size: 1.2em;
    }
    h3 {
        font-size: 1.2em;
        line-height: 1em;
        margin: 0!important;
    }
    h4 {
        font-size: 1.2em;
        line-height: 1em;
        margin-left: 0 !important;
    }

    #story-wrapper span.format1 {
        font-size: 1.3em !important;
    }
    .col--left .col--standard {
        margin-left: 0%;
    }

    p
    {
      margin: 0;
      padding: 0;
      margin-bottom: 20px;
      font-size: 1.2em;
      line-height: 1.3em;
    }
    #story-wrapper .stage h1.headline {
        font-size: 1.5em !important;
        color: #fff;
        padding-top: 0rem;
        text-align: left;
        margin: 0.1em 0;
        line-height: 1.1em !important;
    }
    .description.intro {
        margin: 20px auto 0 !important;
    }

    
    .intro p.subline {
        line-height: 1.1em !important;
    }
    .intro h2.subline {  font-size: 1.2em;
        line-height: 1.1em !important;
    }
    .intro .subscene #A1-4 {
        width: 100%;
        margin-left: 0px;
    }
    
    .ac .ac-panel .ac-text {
        padding: 10px !important;
        margin: 0;
        font-size: 0.75em;
        color: white;
        line-height: 1.2em;
    }
    .ac .ac-header {
        padding: 0 0 0 10px !important;
        border-radius: 20px;
    }
    .tabcontent ul li::before {
        left: -15px !important;
        height: 12px !important;
        width: 20px !important;
    }
   

    .blase.blue
    {
        width: 80% !important;
      margin-left: 0 !important;
      margin-top: 20% !important;
    }

    .blase.button
{
   width: 50%;
  position: absolute !important;
  right: inherit;
  bottom: 5%;
  top: inherit !important;
  border-radius: 20px !important;
  z-index: 1;
  padding: 20px inherit !important;
  margin: auto !important;
  left: 30%;
}

    #A1 .txt-center
    {
      margin-top: 20%;
      font-size: 1.3em;
      width: 80%;
      line-height: 1.3em;
      margin-left: 10%;
    }
    #A3-4 {margin-top:0 !important;}
    #A4 .illusize-normal
    {
      max-width: 120px !important;
    }


    #B2 .illu--right
{
  position: absolute;
  max-width: 300px !important;
  width: 100%;
  bottom: 20% !important;
  right: 10%;
}
#B6 .artikel
{
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  max-width: 500px;
  width: 90%;
  margin: 5% auto;
  color: #000;
  min-height: 500px;
}

#B6 h3
{
  font-size: 1.5em;
  line-height: 1.3em;
  margin: 0;
  padding: 0;
    padding-bottom: 0px;
  padding-bottom: 0;
  margin-bottom: 10px;
}
#B6 p
{
  font-size: 1em;
  line-height: 1.3em;
  max-width: 600px;
}


#B6 .illu--audio
{
  position: relative !important;
  right: inherit !important;
  top: inherit  !important;
  width: 60px;
  cursor: pointer;
}

#C2 .blase.blue
{
  width: 80% !important;
  margin-left: auto !important;
  position: absolute;
  top: 0 !important;
}


#C2 .blase.denken
{
  background-image: url("images/gedankenblase.png");
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 80% !important;
  margin-left: 5%;
  position: absolute;
  top: 0 !important;
  padding: 0 !important;
}

#C3 .illu--center
{
  margin-top: 20% !important;
}

#D2 .talk2
{
  background: var(--bubblecol6);
  color: #fff;
  width: 80% !important;
  margin-left: 0 !important;
  position: absolute;
  top: 10%;
}

#D3 .illu--right
{
  position: absolute;
  max-width: 300px ;
  width: 80% !important;
  bottom: 10% !important;
  right: 0 !important;
}

#E1 .illu--right
{
    position: absolute;
    max-width: 300px ;
    width: 80% !important;
    bottom: 10% !important;
    right: 0 !important;
}

#F2 .illu--right
{
    position: absolute;
    max-width: 300px ;
    width: 80% !important;
    bottom: 10% !important;
    right: 0 !important;
}
#F4 .illu--right
{
    position: absolute;
    max-width: 300px ;
    width: 80% !important;
    bottom: 10% !important;
    right: 0 !important;
}
#G2 .illu--right
{
    position: absolute;
    max-width: 300px ;
    width: 80% !important;
    bottom: 10% !important;
    right: 0 !important;
}

#H2 .illu--right
{
    position: absolute;
    max-width: 300px ;
    width: 80% !important;
    bottom: 10% !important;
    right: 0 !important;
}

#H4 .illu--right
{
    position: absolute;
    max-width: 300px ;
    width: 80% !important;
    bottom: 10% !important;
    right: 0 !important;
}

#G4 .sprechblasen.rechts
{
  position: absolute;
  right: auto !important;
  top: 30vh;
  width: 80%;
}

#I1 .illu--right
{
    position: absolute;
    max-width: 300px ;
    width: 80% !important;
    bottom: 10% !important;
    right: 0 !important;
}
#I3 .illu--right
{
    position: absolute;
    max-width: 300px ;
    width: 80% !important;
    bottom: 10% !important;
    right: 0 !important;
}
.videos
{
  width: 90%;
  height: auto;
  border: 20px solid #0C8786;
  border-radius: 20px;
  max-width: 800px;
  margin: 0 auto;
}


.videorahmen::after
{
  display: block;
  content: "";
  width: 300px;
  margin: -10px 10%;


}


#J1 .tabcontent
    {
      display: none;
      border-radius: 40px;
      background-color: var(--stagecolor1);
      padding: 30px !important;
      margin-top: 0px;
      color: #fff;
    }
    #J1 .spaltig p
    {
        font-size: 14px;
    }

    .blase
    {

      top: 5% !important;

    }  
}