/* css zu funktionsweise */
/* funktionsweise  */
.button_gelb {
	display: inline-block;
	border: none;
	text-align: center;
	color: white;
	background-color: #E8E801;
	padding: 11px 37px;
	transition: 300ms;
}

.funktionenBild > a {border: 0px;}

.button_gelb:hover {background-color: #DCDC03;}

.grauBalkenR {
	background-color: #eeeff3;
	margin-top: 10px;
	right: 15px;
}
.grauBalkenL {
    background-color: #eeeff3;
    margin-top: 10px;
  	left: 15px;
}
  
.blauBalken {background-color: #5381a3;}

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

#grauBalken1,
#blauBalken2Mobil,
#grauBalken1Mobil,
#grauBalken2Mobil,
#blauBalken2,
#grauBalken2,
#grauBalken3 {height: 45px;}

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

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

#funktionenRow3 > .balkenContainerR {bottom: 300px;}

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

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

#blauBalken2, #blauBalken2Mobil {right: 100px;}

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

body {hyphens: manual;}

@media (max-width: 1024px) {
  .funktionenText {width: 75%;}
  .funktionenBild {width: 100%;}
  
  .balkenContainerR {left: 80%;}
  .balkenContainerL {right: -30%;}
  
  #blauBalken2, #blauBalken2Mobil {right: -70px;}
  
  .balkenLeft {transform: skewX(-20deg);}
  
  .freeclassLogo {width: 80%;}
}
  
  @media (max-width: 600px) {
  	.funktionenText {width: 100%;}
    
    .balkenContainerL, .balkenContainerR {display: none;}
    
    .balkenContainerMobil, .balkenContainerMobilL {
      display: inline-block;
      position: relative;
      width: 100%;
      left: 30%;
    }
    
    .balkenContainerMobilL {left: -60%;}
  }
/* --- --- */
/* 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;
}
/* --- --- */