/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

html {
    scroll-behavior: smooth;
}

/*#region CssReset */
/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/*
    2. Remove default margin
  */
* {
    margin: 0;
}
/*
    3. Allow percentage-based heights in the application
  */
html, body {
    height: 100%;
    width: 100%;
}

/*
    Typographic tweaks!
    4. Add accessible line-height
    5. Improve text rendering
  */
body {
    background-color: #FAFAFA !important;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
/*
    6. Improve media defaults
  */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
/*
    7. Remove built-in form typography styles
  */
input, button, textarea, select {
    font: inherit;
}
/*
    8. Avoid text overflows
  */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
/*
    9. Create a root stacking context
  */
#root, #__next {
    isolation: isolate;
}
/*#endregion CssReset */

a:link {
    text-decoration: none;
}


a:visited {
    text-decoration: none;
}


a:hover {
    text-decoration: none;
}


a:active {
    text-decoration: none;
}


/*#region Root*/
:root {
    /* Font-Sizes */
    --fs-headerMain: 1.3rem;
    --fs-500: 5rem;
    --fs-400: 4rem;
    --fs-300: 3rem;
    --fs-200: 2rem;
    --fs-150: 1.5rem;
    --fs-130: 1.3rem;
    --fs-120: 1.2rem;
    --fs-110: 1.1rem;
    --fs-100: 1rem;
    --fs-90: 0.9rem;
    --fs-80: 0.8rem;
    --fs-70: 0.7rem;
    --fs-60: 0.6rem;
    --fs-50: 0.5rem;
    --fs-45: 0.45rem;
    --fs-40: 0.4rem;
    --fs-30: 0.3rem;
    --fs80Fest: 0.8rem;
}
/*#endregion Root*/

/*#region FontSizeClasses*/
.opacity005 {
    opacity: 0.05;
}

.color404040 {
    color: #404040;
}

.bgMeinBundKGold {
    background: #E3CAA2 0% 0% no-repeat padding-box;
    /* background-color: #E3CAA2;*/
}

.bgE3CAA2 {
    background-color: #E3CAA2;
}

.bgCBCBC9 {
    background-color: #CBCBC9;
}

.fsheaderMain {
    font-size: var(--fs-headerMain)
}

.fs500 {
    font-size: var(--fs-500);
}

.fs400 {
    font-size: var(--fs-400);
}

.fs300 {
    font-size: var(--fs-300);
}

.fs200 {
    font-size: var(--fs-200);
}

.fs150 {
    font-size: var(--fs-150);
}

.fs130 {
    font-size: var(--fs-130);
}

.fs120 {
    font-size: var(--fs-120);
}

.fs110 {
    font-size: var(--fs-110);
}

.fs100 {
    font-size: var(--fs-100);
}

.fs90 {
    font-size: var(--fs-90);
}

.fs80Fest {
    font-size: var(--fs80Fest);
}

.fs80 {
    font-size: var(--fs-80);
}

.fs70 {
    font-size: var(--fs-70);
}

.fs60 {
    font-size: var(--fs-60);
}

.fs50 {
    font-size: var(--fs-50);
}

.fontLinkButtons {
    font-size: var(--fs-50);
}

.biggerFont {
    font-size: var(--fs-130);
}

.smallerFont {
    font-size: var(--fs-80);
}

.evensmallerFont {
    font-size: var(--fs-90);
}

.smallestFont {
    font-size: var(--fs-50);
}
/*#endregion FontClasses*/

/*#region Animations*/

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
/*#endregion Animations*/

/*#region Fonts*/
@font-face {
    font-family: BMWTypeNextLight;
    src: url('../fonts/BMWTypeNext-Light.otf');
}

@font-face {
    font-family: BMWTypeNextThin;
    src: url('../fonts/BMWTypeNext-Thin.otf');
}

@font-face {
    font-family: BMWTypeNextBold;
    src: url('../fonts/BMWTypeNext-Bold.otf');
}

@font-face {
    font-family: BMWTypeNextRegular;
    src: url('../fonts/BMWTypeNext-Regular.otf');
}

@font-face {
    font-family: RobotoThinMarten;
    src: url('../fonts/Roboto-Thin.ttf');
}

@font-face {
    font-family: RobotoBlackMarten;
    src: url('../fonts/Roboto-Black.ttf');
}

@font-face {
    font-family: RobotoMediumMarten;
    src: url('../fonts/Roboto-Medium.ttf');
}

@font-face {
    font-family: MontserratBold;
    src: url('../fonts/Montserrat-Bold.ttf');
}

@font-face {
    font-family: MontserratLight;
    src: url('../fonts/Montserrat-Light.ttf');
}

.montserratBold {
    font-family: MontserratBold;
}

.montserratLight {
    font-family: MontserratLight;
}

.bmwTypeNextLight {
    font-family: BMWTypeNextLight;
}

.bmwTypeNextThin {
    font-family: BMWTypeNextThin;
}

.bmwTypeNextBold {
    font-family: BMWTypeNextBold;
}

.bmwTypeNextRegular {
    font-family: BMWTypeNextRegular;
}

.RobotoThin {
    font-family: RobotoThinMarten;
}

.RobotoBlack {
    font-family: RobotoBlackMarten;
}

.RobotoMedium {
    font-family: RobotoMediumMarten;
}

/*#endregion Fonts*/

/*#region Buttons*/

/* Button-Ripple Effect */
/* .ripple {
    background-position: center;
    transition: background 1.5s;
}

    .ripple:hover {
        background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
    }

    .ripple:active {
        background-color: #6eb9f7;
        background-size: 100%;
        transition: background 0s;
    } */

button {
    cursor: pointer;
    display: inline-block;
    position: relative;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    border: none;
    border-radius: 3px;
    /* 0.7 * 10 = 7 */
    /* animation: rotate 7s ease-in-out both;
    animation-iteration-count: infinite;    */
}

/* Self-Repeat */
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
        transform: rotate(0deg) translate3d(0, 0, 0);
    }

    2.5% {
        -webkit-transform: rotate(9deg) translate3d(0, 0, 0);
        transform: rotate(9deg) translate3d(0, 0, 0);
    }

    5% {
        -webkit-transform: rotate(-9deg) translate3d(0, 0, 0);
        transform: rotate(-9deg) translate3d(0, 0, 0);
    }

    7.5% {
        -webkit-transform: rotate(3deg) translate3d(0, 0, 0);
        transform: rotate(3deg) translate3d(0, 0, 0);
    }

    10% {
        -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
        transform: rotate(0deg) translate3d(0, 0, 0);
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
        transform: rotate(0deg) translate3d(0, 0, 0);
    }

    2.5% {
        -webkit-transform: rotate(9deg) translate3d(0, 0, 0);
        transform: rotate(9deg) translate3d(0, 0, 0);
    }

    5% {
        -webkit-transform: rotate(-9deg) translate3d(0, 0, 0);
        transform: rotate(-9deg) translate3d(0, 0, 0);
    }

    7.5% {
        -webkit-transform: rotate(3deg) translate3d(0, 0, 0);
        transform: rotate(3deg) translate3d(0, 0, 0);
    }

    10% {
        -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
        transform: rotate(0deg) translate3d(0, 0, 0);
    }
}

@-webkit-keyframes rotate2 {
    0% {
        -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
        transform: rotate(0deg) translate3d(0, 0, 0);
    }

    25% {
        -webkit-transform: rotate(9deg) translate3d(0, 0, 0);
        transform: rotate(9deg) translate3d(0, 0, 0);
    }

    50% {
        -webkit-transform: rotate(-9deg) translate3d(0, 0, 0);
        transform: rotate(-9deg) translate3d(0, 0, 0);
    }

    75% {
        -webkit-transform: rotate(3deg) translate3d(0, 0, 0);
        transform: rotate(3deg) translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
        transform: rotate(0deg) translate3d(0, 0, 0);
    }
}

@keyframes rotate2 {
    0% {
        -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
        transform: rotate(0deg) translate3d(0, 0, 0);
    }

    25% {
        -webkit-transform: rotate(9deg) translate3d(0, 0, 0);
        transform: rotate(9deg) translate3d(0, 0, 0);
    }

    50% {
        -webkit-transform: rotate(-9deg) translate3d(0, 0, 0);
        transform: rotate(-9deg) translate3d(0, 0, 0);
    }

    75% {
        -webkit-transform: rotate(3deg) translate3d(0, 0, 0);
        transform: rotate(3deg) translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
        transform: rotate(0deg) translate3d(0, 0, 0);
    }
}


/* .roundButton {
    border: none;
    content: "<-";
    padding: 0.2em;
    border-radius: 50%;
}

    button:after {
        content: '»';
        position: absolute;
        opacity: 0;
        right: -20px;
        transition: 0.5s;
    }

    button:hover {
        padding-right: 2em;
        padding-left: 8px;
    }

        button:hover:after {
            opacity: 1;
            right: 10px;
        } */
/*#endregion Buttons*/

/*#region Borders */
.borderRed {
    border: 1px solid red;
}

.borderGreen {
    border: 1px solid green;
}

.borderBlack {
    border: 1px solid black;
}

.borderOrange {
    border: 1px solid orange;
}

.borderBlue {
    border: 1px solid blue;
}
/*#endregion Borders */

/*#region GlobalCss*/
html, body {
    height: 100%;
    width: 100%;
}

.bgImageCenterCover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.bodyBgImageContent {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 30em;
    gap: 1em;
    margin-top: 1em;
    margin-bottom: 2em;
}

.padTopBotStandard {
    padding-top: 3em;
    padding-bottom: 3em;
}



.gridOverlap {
    display: -ms-grid;
    display: grid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .gridOverlap > * {
        grid-column: 1 / -1;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        grid-row: 1 / span 1;
    }

.zIndex2 {
    z-index: 2;
}

.zIndex3 {
    z-index: 3;
}

.zIndex9999 {
    z-index: 9999;
}

.row1 {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / span 1;
}

.row3 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / span 1;
}

.row4 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    grid-row: 4 / span 1;
}

.posRel {
    position: relative;
}

.posAbs {
    position: absolute;
}

.posAbsCentered {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.h80Perc {
    height: 80%;
}

.w80Perc {
    width: 80%;
}

.w90Perc {
    width: 80%;
}

.w80PercToW50Perc {
    width: 80%;
}

.w70Perc {
    width: 70%;
}

.w100Perc {
    width: 100%;
}

.imgObjFitCover {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.imgObjFitContain {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.objFitCover {
    -o-object-fit: cover;
    object-fit: cover;
}

.textCentered {
    text-align: center;
}

.whiteText {
    color: #FFFFFF;
}

.mInlineAuto {
    margin-left: auto;
    margin-right: auto;
}

.mLeftAuto {
    margin-left: auto;
}

.mRightAuto {
    margin-right: auto;
}

.bgWhite {
    background-color: white;
}

.color4D4D4D {
    color: #4D4D4D;
}

.color808080 {
    color: #808080;
}

.color727272 {
    color: #727272;
}

.colorD8D8D8 {
    color: #D8D8D8;
}

.colorB3B3B3 {
    color: #B3B3B3;
}

.colorFAFAFA {
    color: #FAFAFA;
}

.opacity05 {
    opacity: 0.5;
}

.overlapBigBgText {
    text-align: center;
    color: lightgray;
    opacity: 0.14;
    font-family: BMWTypeNextBold;
}

/*.fontWeight300{
    font-weight: 300;
}*/

.bigLetterSpace {
    letter-spacing: 8px;
}

.letterSpace5Px {
    letter-spacing: 5px;
}

.lineHeight14 {
    line-height: 1.4 !important;
}

/* TODO Farbe ueberarbeiten */
.shortHrHeader {
    margin-left: 45%;
    margin-right: 45%;
    border: none;
    height: 2px;
    border-color: #E6E6E6;
    color: #E6E6E6;
    background-color: #E6E6E6;
}

.shortHr {
    border: none;
    height: 2px;
    width: 3em;
    margin-right: auto;
    margin-left: auto;
    border-color: #E6E6E6;
    color: #E6E6E6;
    background-color: #E6E6E6;
}

.hr75Perc {
    margin-left: 2%;
    margin-right: 2%;
    border: none;
    height: 2px;
    border-color: #E6E6E6;
    color: #E6E6E6;
    background-color: #E6E6E6;
}

p {
    line-height: 1.8;
}

.flexColCentered {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flexCentered {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1em;
}

.pTB20Perc {
    padding-top: 20%;
    padding-bottom: 20%;
}

.mTBAuto {
    margin-top: auto;
    margin-bottom: auto;
}

.gridColSpanFull {
    grid-column: 1 / -1;
}

.color666666 {
    color: #666666;
}


.bg404040 {
    background-color: #404040;
}

.bg727272 {
    background-color: #727272;
}

.bgFCFCFC {
    background-color: #fcfcfc !important;
}

.bgF7F7F7 {
    background-color: #F7F7F7;
}

.bg78858D {
    background-color: #78858D;
}

.flexCol {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flexColGap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1em;
}

.topLeftAbs {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
}

.imageContentContainer {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 8%;
    gap: 0.5em;
}

.cursorPointer:hover {
    cursor: pointer;
}


.clickable:hover {
    cursor: pointer;
    -webkit-filter: blur(3px);
    filter: blur(3px);
    opacity: .5;
    -webkit-transform: scale(.98);
    -ms-transform: scale(.98);
    transform: scale(.98);
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
    -webkit-box-shadow: 0 8px 20px 0px rgba(0,0,0,0.125);
    box-shadow: 0 8px 20px 0px rgba(0,0,0,0.125);
}

.hrSubHeader {
    margin-left: 5%;
    margin-right: 5%;
    border: none;
    height: 2px;
    border-color: #F0F0F0;
    color: #F0F0F0;
    background-color: #F0F0F0;
}

.relFlexColContainer {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
/*#endregion GlobalCss*/

/*#region Header */
/*.headerImageContainer {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}*/




/*.headerImageContainer {
    width: 100%;
    height: 500px;
    position: relative;
    border: 1px solid blue;
}*/

/*#region Header*/

.headerGesamtContainer {
    height: 500px;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2em;
    justify-content: center;
    align-items: center;
}

/*#endregion Header*/

/*#region PictureElementClasses*/
.headerImageContainer {
    width: 100%;
    height: 500px;
    position: absolute;
    display: flex;
    gap: 2em;
    justify-content: center;
    align-items: center;
}

.headerImageContainerRaw {
    position: absolute;
    display: flex;
    height: 500px;
    flex-direction: column;
    gap: 2em;
    justify-content: center;
    align-items: center;
}
/*#endregion PictureElementClasses*/



.headerImageContainerFullHeight {
    width: 100%;
    height: 500px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}




.headerImagePictureContainer {
    position: absolute;
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 2500px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
}

.headerImagePictureContainerCover {
    position: absolute;
    height: 100%;
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
    object-fit: cover;
    object-position: top;
}

.headerImagePictureContainerFill {
    position: absolute;
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
    object-fit: fill;
    object-position: top;
}

.marginBot {
    margin-bottom: 12em;
}

.headerImage {
    margin: auto;
    max-height: 40em;
    /* max-height: 60vh;*/
}

.headerImageContent {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.headerImageContentWithBr {
    position: absolute;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr 1em 1fr 1em 1fr 1em 1fr 1em 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    row-gap: 1em;
    /* margin: auto; */
    z-index: 99;
    top: 10%;
    bottom: 0;
    left: 0;
    right: 0;
}

/*TODO eventuell removen*/
.headerImageContentWithBrAlternative {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.5em;
    text-align: center;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 20%;
    width: 100%;
}

/*.headerBgImageContent {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    justify-content: center;
    gap: 3em;*/
/* row-gap: 10em;*/
/* column-gap: 10em;*/
/*text-align: center;
    height: 60vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
}*/

.headerBgImageContent {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    /*gap: 2em;*/
    /* row-gap: 10em;*/
    /* column-gap: 10em;*/
    text-align: center;
    height: 40em;
    /*   height: 60vh;*/
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
}

    .headerBgImageContent > * {
        margin-top: 2em;
    }




/*#endregion Header */

/* MainContainer */
.mainContainer {
    position: relative;
    display: -ms-grid;
    display: grid;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    row-gap: 3em;
}

.roundShadowBox {
    border-radius: 6px;
    -webkit-box-shadow: 0px 2px 5px #0000000D;
    box-shadow: 0px 2px 5px #0000000D;
}

.subHeaderContainer {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 6px;
    -webkit-box-shadow: 0px 2px 5px #0000000D;
    box-shadow: 0px 2px 5px #0000000D;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2em;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /* align-items: center; */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 2em;
    padding-bottom: 4em;
    margin-top: -6em;
    background-color: #FFFFFF;
    z-index: 2;
}

.subHeaderSliderContainer {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 6px;
    -webkit-box-shadow: 0px 2px 5px #0000000D;
    box-shadow: 0px 2px 5px #0000000D;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2em;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /* align-items: center; */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 2em;
    margin-top: -6em;
    background-color: #FFFFFF;
    z-index: 2;
}

.subHeaderContainer > p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.subHeaderSliderContainer > p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

/*#region PfeilImage*/
.pfeilImage {
    position: absolute;
    cursor: pointer;
    display: block;
    border-radius: 50%;
    height: 2.2em;
    -o-object-fit: fill;
    object-fit: fill;
    top: 1em;
    right: 1em;
    /* animation: rotate 7s ease-in-out both;
    animation-iteration-count: infinite;    */
    /* -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite; */
}

    /* TODO mit Before und After setzen? */
    /* .pfeilImage:hover::before{
        transform: scale(1.4);
    } */

    .pfeilImage:hover {
        /* TODO Skalierung und  Animation bekommen*/
        -webkit-transform: scale(1.4);
        -ms-transform: scale(1.4);
        transform: scale(1.4);
        /* animation: rotate2 0.7s ease-in-out both; */
    }

/*#endregion PfeilImage*/

/*#region MediaQueries */
@media(min-width: 640px) {
    .mainContainer {
        /* background-color: green; */
    }

    .shortHrHeader {
        margin-left: 46.8%;
        margin-right: 46.8%;
    }

    .headerImageContentWithBrAlternative {
        gap: 2em;
    }

    :root {
        --fs-headerMain: 2rem;
        --fs-50: 0.7rem
    }

    .pfeilImage {
        height: 2.4em;
    }
}

@media(min-width: 768px) {

    .mainContainer {
        /* background-color: blue; */
        /* width: 80%; */
    }

    .shortHrHeader {
        margin-left: 47.6%;
        margin-right: 47.6%;
    }

    .hr75Perc {
        margin-left: -5%;
        margin-right: -5%;
    }


    .headerImageContentWithBrAlternative {
        gap: 2.5em;
    }

    .imageContentContainer {
        margin-top: 5%;
        gap: 3em;
    }
}

@media(max-width: 768px) {
}

@media(min-width: 1024px) {
    .hrSubHeader {
        margin-right: 0;
        margin-left: 0;
    }

    .w80PercToW50Perc {
        width: 50%;
    }

    .overlapBigBgText {
        font-size: var(--fs-500);
    }

    .headerBgImageContent {
        /*gap: 2.5em;*/
    }

    .padTopBotStandard {
        padding-bottom: 5em;
        padding-top: 5em;
    }

    .subHeaderContainer {
        width: 100%;
        padding-bottom: 5em;
    }

    .subHeaderSliderContainer {
        width: 100%;
        padding-top: 5em;
        padding-bottom: 5em;
    }

    .switchToBmwLight {
        font-family: BMWTypeNextLight;
    }

    .removeOnDesktop {
        display: none;
    }

    .mainContainer {
        /* background-color: orange; */
        width: 60%;
        row-gap: 4em;
    }

    .hr75Perc {
        margin-left: -15%;
        margin-right: -15%;
    }

    .shortHrHeader {
        margin-left: 47.9%;
        margin-right: 47.9%;
    }

    .subHeaderContainer {
        /* gap: 3em;*/
    }

    .subHeaderSliderContainer {
        gap: 3em;
    }

    .headerImageContentWithBrAlternative {
        gap: 4em;
    }
}

@media(max-width: 1025px) {
    /*  .showOnDesktop {
        display: none;
    }*/
}



@media(min-width: 1280px) {
    .mainContainer {
        /* background-color: red; */
        max-width: 1200px;
    }

    .headerImageContentWithBrAlternative {
        gap: 6em;
    }

    .pfeilImage {
        /* top: 1.8em;
        right: 1.8em; */
    }

    .headerImage {
        width: 1400px;
    }

    .imageContentContainer {
        gap: 6em;
    }

    .shortHrHeader {
        margin-left: 48%;
        margin-right: 48%;
    }

    .subHeaderContainer {
        /* gap: 4em;*/
    }

    .subHeaderSliderContainer {
        gap: 4em;
    }

    .headerImageContentWithBrAlternative {
        gap: 3em;
        top: 25%;
    }
}


@media(min-width: 1400px) {
    .shortHrHeader {
        margin-left: 48.4%;
        margin-right: 48.4%;
    }
}

@media(min-width: 1700px) {
    .mainContainer {
        /* background-color: brown; */
    }

    .pfeilImage {
        /* top: 2.5em;
        right: 2.5em; */
    }

    .shortHrHeader {
        margin-left: 48.7%;
        margin-right: 48.7%;
    }
}


/* Zoom-Fix for smaller Screens */
@media screen and (max-width: 1024px) {
    .mainContainer {
        max-width: 960px;
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

    body {
        background-color: green;
    }
}

/*#endregion MediaQueries */