/* alle hier vorkommenden Klassen sind absichtlich nicht nach BEM notiert
     damit im Markup sofort ersichtlich ist das es sich um Hilfsklassen handelt */

    /*--------------------------------------HILFSKLASSEN------------------------------------------------------------------------------
    -------------------------------------------------------------------------------------------------------------------------------- */

    /*--------------------------------------Maximale Breiten---------------------------------------
    ---------------------------------------------------------------------------------------------- */
.width_max-1600{
    max-width: 1600px !important;
}
.width_max-1440{
    max-width: 1440px !important;
}
.width_max-1200{
    max-width: 1200px!important;
}
.width_max-1000{
    max-width: 1000px!important;
}
.width_max-800{
    max-width: 800px!important;
}
.width_max-600{
    max-width: 600px!important;
}
.width_max-400{
    max-width: 400px!important;
}
.width_max-200{
    max-width: 200px!important;
}
.width_max-50p{
  max-width: calc((100%/12) * 6);
}
.width_max-33p{
  max-width: calc((100%/12) * 4);
}
.width_max-25p{
  max-width: calc((100%/12) * 3);
}

    /*--------------------------------------Höhen--------------------------------------------------
    ---------------------------------------------------------------------------------------------- */

    .height-100{
      height:100%;
    }
    /*--------------------------------------Order Klassen nach Endgeräten---------------------------
    ---------------------------------------------------------------------------------------------- */

/* Order Klassen für Tablets */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .order_tablet-1 {
    order: 1;
  }
  .order_tablet-2{
    order: 2;
  }
  .order_tablet-3{
    order: 3;
  }
  .order_tablet-4{
    order: 4;
  }
  .order_tablet-5{
    order: 5;
  }
  .order_tablet-6{
    order: 6;
  }
}
/* Order Klassen für Mobile */
@media only screen and (max-width:767px) {
  .order_mobile-1 {
    order: 1;
  }
  .order_mobile-2{
    order: 2;
  }
  .order_mobile-3{
    order: 3;
  }
  .order_mobile-4{
    order: 4;
  }
  .order_mobile-5{
    order: 5;
  }
  .order_mobile-6{
    order: 6;
  }
}

/* Order Klassen für Desctop */
@media only screen and (min-width: 992px) {
  .order_desctop-1 {
    order: 1;
  }
  .order_desctop-2{
    order: 2;
  }
  .order_desctop-3{
    order: 3;
  }
  .order_desctop-4{
    order: 4;
  }
  .order_desctop-5{
    order: 5;
  }
  .order_desctop-6{
    order: 6;
  }
}

    /*--------------------------------------Ausrichtung von Elemente-----------------
    ---------------------------------------------------------------------------------------------- */

  .float-left{
    float:left;
  }

  .float-right{
    float:right
  }
    /*--------------------------------------Ausblenden von Elemente nach Endgeräten-----------------
    ---------------------------------------------------------------------------------------------- */

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 991px){
    .hide_tablet{
        display: none;
    }
}

/* Mobile */
@media only screen and (max-width: 767px){
    .hide_mobile{
        display: none;
    }
}

/* Desctop */
@media only screen and (min-width: 992px){
    .hide_desctop{
        display: none;
    }
}
    /*--------------------------------------Typografische Hilfsklassen------------------------------
    ---------------------------------------------------------------------------------------------- */

/* Schriftgrößen von klein nach Groß -----*/

.font_size--3{
    font-size: var(--fontSize--3)!important;
}
.font_size--2{
    font-size: var(--fontSize--2)!important;
}
.font_size--1{
    font-size: var(--fontSize--1)!important;
}
.font_size_0{
    font-size: var(--fontSize-0)!important;
}
.font_size-1{
    font-size: var(--fontSize-1)!important;
}
.font_size-2{
    font-size: var(--fontSize-2)!important;
}
.font_size-3{
    font-size: var(--fontSize-3)!important;
}
.font_size-4{
    font-size: var(--fontSize-4)!important;
}
.font_size-5{
    font-size: var(--fontSize-5)!important;
}
.font_size-6{
    font-size: var(--fontSize-6)!important;
}
.font_size-7{
    font-size: var(--fontSize-7)!important;
}
.font_size-8{
    font-size: var(--fontSize-8)!important;
}
.font_size-9{
    font-size: var(--fontSize-9)!important;
}
.font_size-10{
    font-size: var(--fontSize-10)!important;
}

/* Ausrichtung von Text */

.text_align-center{
  text-align:center;
}
.text_align-left{
  text-align:left;
}
.text_align-right{
  text-align:right;
}

/* Transformation von Text */
.text_transform-uppercase{
  text-transform:uppercase;
}
.text_transform-lowercase{
  text-transform:lowercase;
}
    /*--------------------------------------Schrift und Hintergrundfarben---------------------------
    ---------------------------------------------------------------------------------------------- */
.color-black-deep{
  color: var(--colorBlack-deep)!important;
}
.color-black{
  color: var(--colorBlack)!important;
}
.color-white{
  color: var(--colorWhite)!important;
}
.color-white-warm{
  color: var(--colorWhite-warm)!important;
}
.color-primary{
  color: var(--colorPrimary)!important;
}
.color-secondary{
  color: var(--colorSecondary)!important;
}
.color-accent{
  color: var(--colorAccent)!important;
}


.bg_color-primary{
  background-color: var(--colorPrimary)!important;
}
.bg_color-secondary{
  background-color: var(--colorSecondary)!important;
}
.bg_color-accent{
  background-color: var(--colorAccent)!important;
}
.bg_color-grey{
  background-color: var(--colorGrey-medium)!important;
}
.bg_color-black{
  background-color: var(--colorBlack)!important;
}
.bg_color-black-deep{
  background-color: var(--colorBlack-deep)!important;
}
.bg_color-white-warm{
  background-color: var(--colorWhite-warm)!important;
}


    /*--------------------------------------Overflow----------------------------------------------
    ---------------------------------------------------------------------------------------------- */

.overflow-clip{
  overflow:clip;
}
.overflow-hidden{
  overflow:hidden;
}

    /*--------------------------------------Effekte----------------------------------------------
    ---------------------------------------------------------------------------------------------- */

  .box_shadow-black{
    box-shadow: 6px 6px 10px 0 rgba(0, 0, 0, 0.40);
  }