/*
#+++++++++++++++++++++++++++++++++++++++++++++++++++++
# GENERAL WIDTHS AND HEIGHTS
#+++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
.max-width-50 { max-width: 50px; height: auto; }
.max-width-100px { max-width: 100px; height: auto; }
.max-width-150 { max-width: 150px; height: auto; }
.max-width-200 { max-width: 200px; height: auto; }
.max-width-300 { max-width: 300px; height: auto; }
.max-width-400 { max-width: 400px; height: auto; }
.max-width-500 { max-width: 500px; height: auto; }
.max-width-600 { max-width: 600px; height: auto; }
.max-width-700 { max-width: 700px; height: auto; }
.max-width-800 { max-width: 800px; height: auto; }
.max-width-900 { max-width: 900px; height: auto; }
.max-width-1000 { max-width: 1000px; height: auto; }
.max-width-100vw { max-width: 100vw; height: auto; }

.width-25 { width: 25% !important; }
.width-50 { width: 50% !important; }
.width-75 { width: 75% !important; }
.width-100 { width: 100% !important; }

.height-10 { height: 10% !important; }
.height-15 { height: 15% !important; }
.height-20 { height: 20% !important; }
.height-25 { height: 25% !important; }
.height-30 { height: 30% !important; }
.height-40 { height: 40% !important; }
.height-50 { height: 50% !important; }
.height-60 { height: 60% !important; }
.height-70 { height: 70% !important; }
.height-75 { height: 75% !important; }
.height-80 { height: 80% !important; }
.height-85 { height: 85% !important; }
.height-90 { height: 90% !important; }
.height-100 { height: 100% !important; }

.max-width-100 { max-width: 100% !important; }
.max-height-100 { max-height: 100% !important; }


.grid-y .innercol,
    /*.grid-x .innercol,*/
.h100 {
    height: 100% !important;
}
.mh100 {
    min-height: 100%;
}
@media only screen and (min-width: 1024px) {
    .h100l {
        height: 100%;
    }
}
/*
#+++++++++++++++++++++++++++++++++++++++++++++++++++++
# RESPONSIVE WIDTHS (BASED ON WRAPPER WIDTH)
#+++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

@media only screen and (min-width: 1024px) {
    .width-five, .width-six, .width-seven,
    .width-eight, .width-nine, .width-ten, .width-eleven {
        margin-left: auto;
        margin-right: auto;
    }
    .width-five { max-width: calc(var(--wrapper-width) * .41666); }
    .width-six { max-width: calc(var(--wrapper-width) * .5); }
    .width-seven { max-width: calc(var(--wrapper-width) * .5833); }
    .width-eight { max-width: calc(var(--wrapper-width) * .6666); }
    .width-nine { max-width: calc(var(--wrapper-width) * .7499); }
    .width-ten { max-width: calc(var(--wrapper-width) * .8333); }
    .width-eleven { max-width: calc(var(--wrapper-width) * .9166); }
}

/*
#+++++++++++++++++++++++++++++++++++++++++++++++++++++
# GRID SYSTEM (RESPONSIVE CLASSES)
#+++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

@media only screen and (min-width: 1024px) {
    .wlarge-auto { width: auto; }
    .wlarge-1 { width: 8.3333333333%; }
    .wlarge-2 { width: 16.6666666667%; }
    .wlarge-3 { width: 25%; }
    .wlarge-4 { width: 33.3333333333%; }
    .wlarge-5 { width: 41.6666666667%; }
    .wlarge-6 { width: 50%; }
    .wlarge-7 { width: 58.3333333333%; }
    .wlarge-8 { width: 66.6666666667%; }
    .wlarge-9 { width: 75%; }
    .wlarge-10 { width: 83.3333333333%; }
    .wlarge-11 { width: 91.6666666667%; }
    .wlarge-12 { width: 100%; }
    .hlarge-10 { height: 10vh}
    .hlarge-15 { height: 15vh}
    .hlarge-20 { height: 20vh}
    .hlarge-25 { height: 25vh}
    .hlarge-30 { height: 30vh}
    .hlarge-40 { height: 40vh}
    .hlarge-50 { height: 50vh}
    .hlarge-60 { height: 60vh}
    .hlarge-70 { height: 70vh}
    .hlarge-75 { height: 75vh}
    .hlarge-80 { height: 80vh}
    .hlarge-85 { height: 85vh}
    .hlarge-90 { height: 90vh}
    .hlarge-100 { height: 100vh}
}
@media only screen and (max-width: 1024px) {
    .wlarge-1,
    .wlarge-2,
    .wlarge-3,
    .wlarge-4,
    .wlarge-5,
    .wlarge-6,
    .wlarge-7,
    .wlarge-8,
    .wlarge-9,
    .wlarge-10,
    .wlarge-11,
    .wlarge-12 { padding-left: 1rem; padding-right: 1rem}
}

/*
#+++++++++++++++++++++++++++++++++++++++++++++++++++++
# ALIGNMENT HELPERS
#+++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

.right-auto-unset { margin-right: auto !important; margin-left: unset !important;}
.left-auto-unset { margin-left: auto !important; margin-right: unset !important;}
.right-auto { margin-right: auto !important;}
.left-auto { margin-left: auto !important;}
.margin-auto {margin-left: auto !important;margin-right: auto !important;}

.a1060center { max-width: var(--maincontent-max); margin: 0 auto; }
.a1060left { max-width: var(--maincontent-max); margin: 0 auto 0 0; }
.a1060right { max-width: var(--maincontent-max); margin: 0 0 0 auto; }

.w1240 { max-width: 1240px; }
.w1024 { max-width: 1024px; }
.w960  { max-width: 960px; }
.w768  { max-width: 768px; }

/*
#+++++++++++++++++++++++++++++++++++++++++++++++++++++
# VIEWPORT MINIMUM HEIGHT
#+++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

.hv100, .vh100 {
    min-height: 100vh;
}
.hv10, .vh10 {
    min-height: 10vh;
}
.hv20, .vh20 {
    min-height: 20vh;
}
.hv30, .vh30 {
    min-height: 30vh;
}
.hv40, .vh40 {
    min-height: 40vh;
}
.hv50, .vh50 {
    min-height: 50vh;
}
.hv60, .vh60 {
    min-height: 60vh;
}
.hv70, .vh70 {
    min-height: 70vh;
}
.hv80, .vh80 {
    min-height: 80vh;
}
.hv90, .vh90 {
    min-height: 90vh;
}
/*
#+++++++++++++++++++++++++++++++++++++++++++++++++++++
# max height
#+++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

.hvmax100 {
    max-height: 100vh;
}
.hvmax10 {
    max-height: 10vh;
}
.hvmax20 {
    max-height: 20vh;
}
.hvmax30 {
    max-height: 30vh;
}
.hvmax40 {
    max-height: 40vh;
}
.hvmax50 {
    max-height: 50vh;
}
.hvmax60 {
    max-height: 60vh;
}
.hvmax70 {
    max-height: 70vh;
}

.hvmax80 {
    max-height: 80vh;
}
.hvmax90 {
    max-height: 90vh;
}
.hv50max {
    width: 100vw;
    max-height: 50vh;
    overflow: hidden;
}
@media only screen and (max-width: 40.063em) {
    /* Klasse zum Zurücksetzen der Höhenbegrenzungen */
    .small-reset-height {
        max-height: unset;
        min-height: unset;
        height: unset;
    }
    /* Zusätzliche Klassen für flexible Höhenanpassung */
    .small-height-auto {
        height: auto !important;
    }
    .small-max-height-100 {
        max-height: 100% !important;
    }
    .small-min-height-100 {
        min-height: 100% !important;
    }
}

/*
#+++++++++++++++++++++++++++++++++++++++++++++++++++++
# FULL-WIDTH UTILITIES (VIEWPORT WIDTH)
#+++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
.width-auto {width: auto}
.w100 { width: 100%; }

.vw100img, .vw100img img { width: 100vw; }

.vw100, .wv100 { min-width: 100vw; }

@media only screen and (min-width: 1024px) {
    .vw50 { min-width: 50vw; }
    .vw50max { min-width: 50vw; max-width: 50vw; }
}

/*
#+++++++++++++++++++++++++++++++++++++++++++++++++++++
# MISC MEDIA QUERIES
#+++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

@media only screen and (min-width: 40.063em) {
    .medium-up-h100 { height: 100% !important; }
}