/* css zu varianten */
/* resizeableColumnsCSS  */
.noSelect { 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.drag {
    width: 3px;
    min-width: 0px !important;
    height: 100%;
    padding: 0px !important;
    position: absolute;
    right: -2px;
    top: 0px;
    z-index: 1;
}

table.dragHeader { z-index: 1; }



table.draggable td { 
    hyphens: auto;
    -moz-hyphens: auto;
    word-break: break-word;
    position: relative; 
}


.drag:hover { cursor: col-resize; }



.drag::before {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    margin: auto;
    background-color: #ccc;
    position: relative;
}
/* --- --- */
/* varianten  */
.grauBalkenR {
	background-color: #eeeff3;
	margin-top: 10px;
	right: 15px;
}
.grauBalkenL {
    background-color: #eeeff3;
    margin-top: 10px;
  	left: 15px;
}
  
.blauBalken {background-color: #5381a3;}

#blauBalken1, #blauBalken1Mobil, #blauBalken4 {height: 12px;}

#grauBalken1,
#blauBalken3Mobil,
#grauBalken1Mobil,
#grauBalken3Mobil,
#blauBalken3,
#grauBalken3,
#grauBalken4,
#grauBalken5,
#blauBalken5 {height: 45px;}

#grauBalken5 {left: -20px;}

.variantenText, .variantenBild {width: 50%; display: inline-block;}
  
.balkenContainerMobil, .balkenContainerMobilL {display: none;}
  
.balkenContainerL, .balkenContainerR {
  position: absolute;
  width: 50%;
}

.balkenContainerR {
	left: 65%;
	bottom: 100px;
}

#variantenRow4 > .balkenContainerR {bottom: 200px;}

#variantenRow4 > .balkenContainerR > .grauBalkenR {margin-top: 0; right: -15px;}
#variantenRow4 > .balkenContainerR > .blauBalken {margin-top: 10px;}
  
 .balkenContainerL {
  bottom: 50px;
  right: 65%;
}

.balkenFuntionsweise {
	border-left: 10px solid transparent;
	position: relative;
	width: 100%;
}

#blauBalken3, #blauBalken3Mobil {right: 100px;}

.balkenRight {transform: skewX(-20deg);}
.balkenLeft {transform: skewX(20deg);}

body {hyphens: manual;}

@media (max-width: 1024px) {
  .variantenText {width: 75%;}
  .variantenBild {width: 100%;}
  
  .balkenContainerR {left: 80%;}
  .balkenContainerL {right: -30%;}
  
  #blauBalken3, #blauBalken3Mobil {right: -70px;}
  
  .balkenLeft {transform: skewX(-20deg);}
}
  
  @media (max-width: 600px) {
  	.variantenText {width: 100%;}
    
    .balkenContainerL, .balkenContainerR {display: none;}
    
    .balkenContainerMobil, .balkenContainerMobilL {
      display: inline-block;
      position: relative;
      width: 100%;
      left: 30%;
    }

	.balkenContainerMobilL {left: -60%;}
  }
/* --- --- */