:root {
    --smaller-width: 5;
    --bigger-width: 8;

    --margin-vertical: 2rem;

    --mibe-mud:              #E0DED7;

    /*    --smaller-width: 6;
        --bigger-width: 7;*/

}

/* ##################### Frames #################### */

.frame-type-mibe_otonvideo,
.frame-type-mibe_video,
.frame-type-mibe_media_open,
.frame-type-tumsitebase-card-container {
    margin-top:var(--margin-vertical);
}
/* hack: remove bottom distance (from card elements inside of frame-type-tumsitebase-card-container, lowest row)*/
.frame-type-tumsitebase-card-container {
    margin-bottom:calc(0rem - var(--margin-vertical));
}


/* ##################### General Styles #################### */

.categories {
    margin-bottom:1rem;
    background:white;
    color: var(--blue-dark-5);
    padding:0.1rem 1.2rem 0 1.2rem;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 600;
    width: max-content;
}


/* --- Base Overlap , O-Ton Video, MIBE Video u.ä. --- */

/* ##################### O-Ton Video, Base Overlap #################### */

.overlapContainer {
    display: grid;
    grid-template-columns: repeat(12, [col-start] 1fr);
    gap: 3em;
}

.overlapContainer h2 {
    font-size: 1.65rem;
}
.overlapContainer h3 {
    font-size: 1.1rem;
}

.overlapContainer .oTonLabel,
.overlapContainer .videoLabel {
    margin-left:2.5rem;
    margin-bottom:1rem;
    background:white;
    color: var(--blue-dark-5);
    padding:0.1rem 1.2rem 0 1.2rem;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 600;
    width: max-content;
}

.overlapContainer .icon {
    margin-left: -1.9rem;
    padding-top:1.3rem;
    padding-right:1rem;
}

.overlapContainer header {
    margin-bottom: 1.5rem;
}

.overlapContainer .front,
.overlapContainer .back {
    grid-row: 1;
}
.overlapContainer .back {
    padding: 2.5rem 3.5rem 3.5rem 3.5rem;
    font-size: 1.1rem;
}

.overlapContainer .back {
    background-color: var( --blue-dark-5 );
    z-index: 5;
    color: white;
    & a {
        color: white;
    }
}


.overlapContainer .front {
    background-color: #763783;
    z-index: 9;
    margin-top:3rem;
    margin-bottom:3rem;
    aspect-ratio: 16/9;
}

.overlapContainer .left {
    grid-column: col-start  / span var(--bigger-width);
}

.overlapContainer .right {
    grid-column: col-start var(--bigger-width) / span var(--smaller-width);
}


.overlapContainer .front.left {
    grid-column: col-start  / span var(--smaller-width);
}

.overlapContainer .back.right {
    grid-column: col-start var(--smaller-width) / span var(--bigger-width);
}

.overlapContainer .front video {
    width:100%;
    height:auto;
    /* remove gap at bottom (Unterlänge font) 
    https://stackoverflow.com/questions/5804256/why-does-my-image-inside-a-div-have-extra-space-below-it
    vertical-align: bottom   OR 
    display: block
    */
    vertical-align: bottom;
}

.overlapContainer .back.left {
    padding-right: 7.2rem;
}
.overlapContainer .back.right {
    padding-left: 7.2rem;
}

/* this was basic settings as in O-Ton Video. Now overwrites for similar elements */
.overlapContainer .back.mibeVideo,
.overlapContainer .back.mibeMediaOpen {
    background-color: var( --blue-dark-2 );
}
/* adjust image figure margins in special elements */
.mibeMediaOpen .ce-column figure.image,
.mibeVideo .ce-column figure.image,
.mibeOton .ce-column figure.image
{
    margin-bottom: 0;
}

.overlapContainer.pis {
    gap:0;
}
.overlapContainer.pis .front.left{
    background-color: var( --blue-dark-5 );
    z-index: 5;
    color: white;
    padding: 2rem;
    & a {
        color: white;
    }
    & .button {
        background-color: var( --blue-dark-5 );
    }
}
.overlapContainer.pis .back.right {
    grid-column: col-start 6 / span var(--bigger-width);
    background-color: var(--mibe-mud);
    color:black;
}

/* ##################### Cards #################### */

.frame-type-mibe_card .button {
    background-color: var(--blue);
    border-color:var(--blue);
}

.frame-type-mibe_card {
    background-color: var(--blue-light-4);
    padding: 3rem;
    padding-left: 5rem;
    grid-column: col-start 1 / span 6;
    margin-bottom: var(--margin-vertical);
    /*    aspect-ratio: 16/9;*/
    position: relative;
}


:nth-child(2 of .frame-type-mibe_card),
:nth-child(3 of .frame-type-mibe_card),
:nth-child(6 of .frame-type-mibe_card),
:nth-child(7 of .frame-type-mibe_card),
:nth-child(10 of .frame-type-mibe_card),
:nth-child(11 of .frame-type-mibe_card),
:nth-child(14 of .frame-type-mibe_card),
:nth-child(15 of .frame-type-mibe_card)
{
    background:var(--blue);
    color:white;
}
:nth-child(2 of .frame-type-mibe_card) .button,
:nth-child(3 of .frame-type-mibe_card) .button,
:nth-child(6 of .frame-type-mibe_card) .button,
:nth-child(7 of .frame-type-mibe_card) .button,
:nth-child(10 of .frame-type-mibe_card) .button,
:nth-child(11 of .frame-type-mibe_card) .button,
:nth-child(14 of .frame-type-mibe_card) .button,
:nth-child(15 of .frame-type-mibe_card) .button {
    background-color: transparent;
    border-color:white;
}


:nth-child(2n of .frame-type-mibe_card) {
    grid-column: col-start 7 / span 6;
    padding-left:3rem;
    padding-right:5rem;
}

.frame-type-mibe_card .icon {
    position: absolute;
    width: 6rem;
    height: 4.8rem;
    border-radius: 3rem;
    background-color: var(--blue-dark-2);
    left: -8rem;
    top: 3rem;
    text-align:center;
    color: white;
    font-weight: bold;
    padding-top:1.2rem;
}
:nth-child(2n of .frame-type-mibe_card) .icon {
    left:unset;
    right:-3rem;
}
:nth-child(2 of .frame-type-mibe_card) .icon,
:nth-child(3 of .frame-type-mibe_card) .icon,
:nth-child(6 of .frame-type-mibe_card) .icon,
:nth-child(7 of .frame-type-mibe_card) .icon,
:nth-child(10 of .frame-type-mibe_card) .icon,
:nth-child(11 of .frame-type-mibe_card) .icon,
:nth-child(14 of .frame-type-mibe_card) .icon,
:nth-child(15 of .frame-type-mibe_card) .icon
{
    background:var(--blue-light-3);
}

/* special types of mibe cards */

.frame-type-mibe_card .mibe_card {
    position: relative;
    height: 100%;
}

.frame-type-mibe_card .socialMediaIcon {
    position: absolute;
    bottom: -2rem;
    right: -5rem;
}

/* #####################  #################### */


figure .video-embed {
    position: relative;
}

figure .video-button-overlay {
    pointer-events: none;
    width:100%;
    height:100%;
    position: absolute;
    background-image:url(../Icons/videoPlay.svg);
    background-repeat: no-repeat;
    background-position: center center;
}