:root {
    --tp-bg: #eeeeee;
}

.touchpoint-image-container {
    position:relative;
}

.touchpoint-container {
    position: absolute;
    display:flex;
    transition: all ease .7s;
    z-index:3;
}

.touchpoint-container:hover {

    transform: translateY(-10px);
    z-index: 4;
}

.touchpoint-inner-container {
    position:absolute;
    display: flex;
    top: -10%;
    left: 33%;
    max-width: 45vw;
    opacity: 0;
    visibility: hidden;
    background-color: #fff;
    transition: all ease .7s;
}

.touchpoint-inner-container.links {
    left: unset;
    right: 33%;
}

.touchpoint-container:hover .touchpoint-inner-container {
    opacity: 1;
    visibility: visible;
}

.touchpoint-icon {
    width: 58px;
    height:58px;
}

.touchpoint-container:hover .touchpoint-icon {
    z-index: 2;
}

.touchpoint-icon-img {
    transition: all ease .7s;
}

.touchpoint-container:hover .touchpoint-icon-img {
    transform: scale(0.9);
}

.touchpoint-inner-image-container {
    min-width: 200px;
    flex-basis:200px;
    /*width: 40%;
    background-repeat: no-repeat;
    background-size: cover;*/
}
.touchpoint-inner-image-container img {
    height:100% !important;
    object-fit: cover;
}

.touchpoint-content-container {
    /*width:60%;*/
    padding: 20px;
    flex-basis: 300px;
    min-width: 300px;
    /*display:flex;
    flex-direction: column;*/
}

/* Headlines Balken */
.heading-container {
    display:inline-block;
}

.balken-headline {
    color: #fff !important;
    padding: 5px 7px 7px !important;
    white-space: nowrap;
}

.balken-headline.rot {
    font-size: 40px;
    margin-top: .1rem !important;
    margin-bottom: .1rem !important;
    background-color: var(--imo-rot);
}

.balken-headline.schwarz {
    font-size: 26px;
    font-weight: 500 !important;
    margin-top: .1rem !important;
    margin-bottom: .1rem !important;
    background-color: var(--imo-schwarz);
}

.touchpoint-text {
    margin: 0;
    font-size: 26px;
    line-height: 1.4em;
    padding-top: 20px;
    padding-bottom: 20px;
}

@media screen and (max-width:1025px) {

    .touchpoint-container {
        display: none;
    }
    /*.touchpoint-image-container {
        height: 50vh;
        overflow: hidden;
    }
    .touchpoint-image-bg {
        height: 100% !important;
        width:auto;
        left: 50%;
        max-width: inherit !important;
        transform:translateX(-50%);
    }*/
}