/*
	FRAMEWORK
*/

:root {
    --content-padding--negativ: calc(var(--content-padding) * -1);
    --content-padding--double: calc(var(--content-padding) * 2);
    --content-padding--half: calc(var(--content-padding) / 2);
}

/* Page and Body */

html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    padding: 0px 0px;
    margin: 0px;
}

body.bh-bemode {
    padding-top: 50px;
}

/* LAYOUT */

/* Allgemein */

.l-page {
    min-height: 100%;
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
}

.style-content-padding {
    box-sizing: border-box;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

/* Navigationen */

.servnavi_item.bh-login-link {
    display: none;
}

/* RESIZE ANIMATION STOPPER */
.resize-animation-stopper * {
    animation: none !important;
    transition: none !important;
}


/*		
	DROPZONES
*/

.bhe-state-dragging .dev-show-content-label:before {
    content: attr(data-label);
    position: absolute;
    z-index: 880;
    padding: 10px;
    background: rgba(48, 48, 48, 0.8);
    color: #fff;
    font-size: 14px;
    line-height: 24px;
    font-weight: normal;
    font-family: 'Open Sans', sans-serif;
    border-bottom-right-radius: 4px;
    pointer-events: none;
}

/*
    bhe-bodytext-empty-highligh
*/

.bhe-bodytext-empty-highligh.current-editing-property {
    outline-style: dashed;
    outline-width: 1px;
    outline-color: black;
    outline-offset: 2px;
}

.bhe-bodytext-empty-highligh.current-editing-property:focus {
    outline-style: solid;
}


/*
	VISIBILITY
*/

.bh-state-desktop .bh-hide-desktop,
.bh-state-mobile .bh-hide-mobile {
    display: none !important;
}

/* MEDIUM */
@media only screen and (max-width: 1200px) {
    .bh-hide-md {
        display: none !important;
    }

    .bh-show-md {
        display: block !important;
    }
}


/* SMALL */
@media only screen and (max-width: 600px) {
    .bh-hide-sm {
        display: none !important;
    }

    .bh-show-sm {
        display: block !important;
    }
}


/*
	CLEARFIX	
*/

.bh-clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.bh-clearfix {
    display: block;
}



/*
	WIDTH
*/

.bhElement {
    box-sizing: border-box;
    width: 100%;
}

.bh-centered {
    margin-left: auto;
    margin-right: auto;
    max-width: 960px;
}

.bh-width-small {
    max-width: 630px;
}

.bh-width-normal {
    max-width: 960px;
}

.bh-width-large {
    max-width: 1440px;
}

.bh-width-full {
    max-width: none;
}

.bh-width-max {
    max-width: none;
}

.style-content-padding .bh-width-max {
    width: calc(100% + var(--content-padding--double));
    margin-left: var(--content-padding--negativ);
}

/*
	MARGIN	
*/

/* logged in */
/* letztes element */
.bhe-state-editing .bhContainer:not(.simple-cols__col__content) > .bhElement:nth-last-child(2),
.bhContainer:not(.simple-cols__col__content) > .bhElement:last-child,
.bh-bodytext > *:last-child,
.bhTabElement,
.bhFadecontainer > .bhContainer > .bhElement,
/* empty dropzones */
.bh-femode .bhe-state-content-empty,
.bhe-state-dragging .bhe-state-content-inherited {
    margin-bottom: 0px;
}

/* MARGIN */


.bhElement,
.bh-margin,
.bh-margin-normal {
    margin-bottom: 6rem;
}

.bh-margin-none {
    margin-bottom: 0px;
}

.bh-margin-small {
    margin-bottom: 4rem;
}

.bh-margin-large {
    margin-bottom: 10rem;
}

.bh-margin-max {
    margin-bottom: 12rem;
}

@media (max-width: 960px) {

    .bhElement,
    .bh-margin,
    .bh-margin-normal {
        margin-bottom: 6rem;
    }

    .bh-margin-none {
        margin-bottom: 0px;
    }

    .bh-margin-small {
        margin-bottom: 2rem;
    }

    .bh-margin-large {
        margin-bottom: 8rem;
    }

    .bh-margin-max {
        margin-bottom: 10rem;
    }
}

@media (max-width: 600px) {

    .bhElement,
    .bh-margin,
    .bh-margin-normal {
        margin-bottom: 4rem;
    }

    .bh-margin-none {
        margin-bottom: 0px;
    }

    .bh-margin-small {
        margin-bottom: 2rem;
    }

    .bh-margin-large {
        margin-bottom: 6rem;
    }

    .bh-margin-max {
        margin-bottom: 8rem;
    }
}

/*
	COLS
*/

.bh-cols {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-left: calc(var(--bh-cols-gap) / -2);
    margin-right: calc(var(--bh-cols-gap) / -2);
}

.bh-cols--stretch {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.bh-col {
    box-sizing: border-box;
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-left: calc(var(--bh-cols-gap) / 2);
    padding-right: calc(var(--bh-cols-gap) / 2);
    margin-bottom: var(--bh-cols-gap);
    width: var(--bh-col--width);
}


/* ----- SPALTEN ZWISCHENRÄUME ----- */


/* large */

.bh-cols.bh-cols--gaps-large {
    --bh-cols-gap: 4rem;
}

/* normal */

.bh-cols {
    --bh-cols-gap: 2rem;
}

/* small */

.bh-cols.bh-cols--gaps-small {
    --bh-cols-gap: 1rem;
}

/* xsmall */

.bh-cols.bh-cols--gaps-xsmall {
    --bh-cols-gap: 0.5rem;
}

/* none */

.bh-cols.bh-cols--gaps-none {
    --bh-cols-gap: 0rem;
}

@media only screen and (max-width: 840px) {
    .bh-cols.bh-cols--gaps-large {
        --bh-cols-gap: 3rem;
    }

    .bh-cols,
    .bh-cols--gaps-normal {
        --bh-cols-gap: 2rem;
    }

    .bh-cols--gaps-small {
        --bh-cols-gap: 1.5rem;
    }

    .bh-cols--gaps-xsmall {
        --bh-cols-gap: 1rem;
    }

    .bh-cols--gaps-none {
        --bh-cols-gap: 0rem;
    }
}

/* widths */

.bh-col--1 {
    --bh-col--width: 8.33333333%;
}

.bh-col--2 {
    --bh-col--width: 16.66666%;
}

.bh-col--3 {
    --bh-col--width: 25%;
}

.bh-col--4 {
    --bh-col--width: 33.33333%;
}

.bh-col--5 {
    --bh-col--width: 41.6666666%;
}

.bh-col--6 {
    --bh-col--width: 50%;
}

.bh-col--7 {
    --bh-col--width: 58.33333333%;
}

.bh-col--8 {
    --bh-col--width: 66.66666%;
}

.bh-col--9 {
    --bh-col--width: 75%;
}

.bh-col--10 {
    --bh-col--width: 83.33333333%;
}

.bh-col--11 {
    --bh-col--width: 91.666666666%;
}

.bh-col--12 {
    --bh-col--width: 100%;
}

/* MEDIUM */

@media only screen and (max-width: 960px) {
    .bh-col--md-1 {
        --bh-col--width: 8.33333333%;
    }

    .bh-col--md-2 {
        --bh-col--width: 16.66666%;
    }

    .bh-col--md-3 {
        --bh-col--width: 25%;
    }

    .bh-col--md-4 {
        --bh-col--width: 33.33333%;
    }

    .bh-col--md-5 {
        --bh-col--width: 41.6666666%;
    }

    .bh-col--md-6 {
        --bh-col--width: 50%;
    }

    .bh-col--md-7 {
        --bh-col--width: 58.33333333%;
    }

    .bh-col--md-8 {
        --bh-col--width: 66.66666%;
    }

    .bh-col--md-9 {
        --bh-col--width: 75%;
    }

    .bh-col--md-10 {
        --bh-col--width: 83.33333333%;
    }

    .bh-col--md-11 {
        --bh-col--width: 91.666666666%;
    }

    .bh-col--md-12 {
        --bh-col--width: 100%;
    }
}


/* SMALL */

@media only screen and (max-width: 720px) {
    .bh-col--sm-1 {
        --bh-col--width: 8.33333333%;
    }

    .bh-col--sm-2 {
        --bh-col--width: 16.66666%;
    }

    .bh-col--sm-3 {
        --bh-col--width: 25%;
    }

    .bh-col--sm-4 {
        --bh-col--width: 33.33333%;
    }

    .bh-col--sm-5 {
        width: 41.6666666%;
    }

    .bh-col--sm-6 {
        --bh-col--width: 50%;
    }

    .bh-col--sm-7 {
        --bh-col--width: 58.33333333%;
    }

    .bh-col--sm-8 {
        --bh-col--width: 66.66666%;
    }

    .bh-col--sm-9 {
        --bh-col--width: 75%;
    }

    .bh-col--sm-10 {
        --bh-col--width: 83.33333333%;
    }

    .bh-col--sm-11 {
        --bh-col--width: 91.666666666%;
    }

    .bh-col--sm-12 {
        --bh-col--width: 100%;
    }
}


/*---- AUSRICHTUNG ----*/

.bhElement.bh-align-left {
    margin-left: 0px;
    margin-right: auto;
}

.bhElement.bh-align-right {
    margin-right: 0px;
    margin-left: auto;
}

/* ----- PICTURES RESIZE ----- */

body:not(.bhe-state-editing) .el-picture.bhElement img {
    width: 100%;
    height: auto;
}