@charset "utf-8";
/* CSS Document */
body {
  font: normal 24pt "Comic Sans MS", Calibri, Tahoma, Arial, Verdana, "sans-serif";
}

div.texte,
div.texte > div {
  position: absolute;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  z-index: 800;
  transition: all 500ms linear;
}

div.texte table,
div.texte tbody,
div.texte tr {
  width: 100%;
  height: 100%;
}

div.texte td {
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

.ecke {
  width: 400px;
  height: 300px;
  padding: 50px;
  /*border-top-left-radius: 30px;*/
  color: white;
  font-weight: 700;
}
.phase-1 .ecke, .phasen .lo { background: rgb(192,80,77); }
.phase-2 .ecke, .phasen .ro { background: rgb(155,187,89); }
.phase-3 .ecke, .phasen .lu { background: rgb(128,100,162); }
.phase-4 .ecke, .phasen .ru { background: rgb(75,172,198); }
.phasen .mi { background: rgb(232,208,208); }
.schiri  .ecke { background: rgb(60, 60, 60); }


.phasen .lo, .phasen .ro, .phasen .lu, .phasen .ru {
  width: 400px;
  height: 300px;
  border: 2px solid white;
  color: white;
  padding: 30px;
  text-align: center;
    -moz-box-shadow: 0 0 12px rgba(0,0,0,.6);
	-webkit-box-shadow: 0 0 12px rgba(0,0,0,.6);
	box-shadow: 0 0 12px rgba(0,0,0,.6);
}

.phasen .lo {
  position: absolute;
  right: 50%;
  bottom: 50%;
  border-top-left-radius: 35px;
}
.phasen .ro {
  position: absolute;
  left: 50%;
  bottom: 50%;
  border-top-right-radius: 35px;
}
.phasen .lu {
  position: absolute;
  right: 50%;
  top: 50%;
  border-bottom-left-radius: 35px;
  padding-top: 150px;
}
.phasen .ru {
  position: absolute;
  left: 50%;
  top: 50%;
  border-bottom-right-radius: 35px;
  padding-top: 150px;
}
.phasen .mi {
  position: absolute;
  width: 240px;
  height: 140px;
  padding-top: 22px;
  left: calc(50% - 120px);
  top:  calc(50% - 70px);
  border: 3px solid white;
  border-radius: 24px;
  text-align: center;
    -moz-box-shadow: inset 0 0 12px rgba(0,0,0,.6);
	-webkit-box-shadow: inset 0 0 12px rgba(0,0,0,.6);
	box-shadow: inset 0 0 12px rgba(0,0,0,.6);
}




.panel-phase {
  background: white;
  margin: 30px;
  -webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
  -moz-box-shadow: 0 0 12px rgba(0,0,0,.6);
	-webkit-box-shadow: 0 0 12px rgba(0,0,0,.6);
	box-shadow: 0 0 12px rgba(0,0,0,.6);
  overflow: hidden;
}

.panel-phase .bild {
  position: absolute;
  top: 0px;
  left: 400px;
  width: calc(100% - 400px);
  height: 100%;  
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0.5;
  z-index: 805;
}

.panel-phase.phase-1 .bild { background-image: url(../media/phase-1.png); }
.panel-phase.phase-2 .bild.bild-1 { background-image: url(../media/phase-2a.png); }
.panel-phase.phase-2 .bild.bild-2 { background-image: url(../media/phase-2b.png); }
.panel-phase.phase-3 .bild { background-image: url(../media/phase-3.png); }
.panel-phase.phase-4 .bild { background-image: url(../media/phase-4.png); }


.panel-phase.schiri .bild { background-image: url(../media/Schiri-2.svg); }

.panel-phase .text {
  position: absolute;
  left: 150px;
  top: 320px;
  width: 60%;
  z-index: 810;
  font-size: 18pt;
}

.panel-phase .text li {
  transition: all 500ms linear;  
}

.text-color-white {
  color: white;
}



































.sprechblase7 {
  /*position: relative;*/
  padding: 15px;
  border: 3px solid #2651A6;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background: #fff;
}

 .sprechblase7:before {
 content: ' ';
 position: absolute;
 width: 0;
 height: 0;
 left: 30px;
 top: 100%;
 border: 20px solid;
 border-color: #2651A6 transparent transparent #2651A6;}

 .sprechblase7:after {
 content: ' ';
 position: absolute;
 width: 0;
 height: 0;
 left: 34px;
 top: 100%;
 border: 15px solid;
 border-color: #ffffff transparent transparent #ffffff;}