:root {
    /* 100% der Höhe abzüglich des margin des main tags und der Höhe des Footers */
    --min-main-height: calc(100vh - 65px - 2em - 537px);
    --border: 2px solid var(--gray);
}

main.disabled > article > section h2,
main.disabled > article > section p,
main.disabled > article > section img {
    opacity: .5;
}

main article {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

main article.detail {
    display: grid;
    grid-template-columns: 1fr;
}

main article > section img {
    position: relative;
    display: block;
    width: 100%;
    object-fit: contain;
    height: auto;
}

main article > section.images > img {
    width: fit-content;
    max-width: 100%;
    object-fit: contain;
}

main article > section.box {
    position: relative;
    width: calc(100% - 2em);
    margin: 1em;
    padding: 0;
}

main article > section.box > .top {
    position: relative;
}

main article > section.box h3 {
    margin: 0 0 .5em;
}

main article > section.box.plus {
    background: var(--light-secondary);
}

main article > section.box .lable {
    position: absolute;
    display: block;
    padding: 0.25em 0.5em;
    background: var(--primary);
    color: var(--background-white);
    text-transform: uppercase;
    font-weight: 600;
    top: 1em;
    left: 1em;
    z-index: 1;
}

main.disabled > article > section > .lable {
    position: relative;
    display: inline-block;
    top: 0;
    left: 0;
}

main article > section.box.plus .lable {
    background: var(--secondary);
}

main article > section.box.border {
    border: var(--border);
}

main article > section.box.border > .center,
main article > section.box.plus > .center {
    padding: 1em 1em 0 1em;
}
main article > section.box.border > .bottom,
main article > section.box.plus > .bottom {
    padding: 0 1em;
}

main article > section.box > .center > *,
main article > section.box > .bottom > * {
    margin: 0 0 1em 0;
}

main article > section.box.expired > .top > img {
    opacity: .5;
}

main article > section.box.expired > .center > *,
main article > section.box.expired > .bottom > * {
    opacity: .8;
}

m-field[mask] > .frame > .mask {
    display: none;
}

m-field[mask]>.frame>input {
    padding: 0px
}

main article > section.box > .bottom > m-button ~ p {
    font-size: .875em;
    line-height: 1.25em;
}

.answer m-field {
    width: 4em;
    display: inline-block;
}

.answer m-field > span > input {
    text-align: center;
}

.answer m-field[type="area"] {
    width: 100%;
}

main article > m-message {
    position: relative;
    display: block;
    width: 100%;
}

main article > section.box.three {
    padding: 0;
}

main article section.contest {
    position: relative;
    display: inline-block;
}

main article section.contest.detail,
main article section.contest.answer {
    margin: 1em;
    width: calc(100% - 2em);
}

main article section.contest.answer {
    margin: 1em 1em 0 1em;
}

main article > section.contest.images {
    margin: 0 1em;
    padding: 0;
}

main article .box.border.participated {
    border-color: var(--success-color);
}

main article .box.border.participated img,
main article .box.border.disabled img {
    opacity: .5;
}

main article .box.border.plus.participated img {
    opacity: 1;
}

main article .participated:after {
    content: '';
    height: 2em;
    width: 2em;
    padding: 1em;
    min-width: 24px;
    position: absolute;
    display: inline-block;
    background: var(--success-color);
    top: 1em;
    right: 1em;
    border-radius: 50%;
}

main article .participated:before {
    content: '';
    height: 1.5em;
    width: 1.5em;
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background: var(--white);
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/check.svg);
    mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/check.svg);
    z-index: 1;
    top: 1.25em;
    right: 1.25em;
}

main article .box.border.participated .info {
    position: relative;
    display: block;
    color: var(--success-color);
    font-weight: 700;
    margin: 0 0 1em 0;
}

main article .box.border.disabled .info {
    position: relative;
    display: block;
    margin: 0 0 1em 0;
}

main article .box.border.info {
    border: 2px solid var(--gray);
    background: var(--light-gray);
    padding: 1em;
    color: var(--dark-gray);
}

main article .box.border.info > h3 {
    font-size: 1.25rem;
}

main article .box.border.info > h3:before,
.accordion.info:before {
    content: '';
    height: 1.2rem;
    width: 1.2rem;
    margin: 0 .25rem 0 0;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background: var(--dark-gray);
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/info.svg);
    mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/info.svg);
}

.accordion.info:before {
    margin: -.125rem .5rem 0 0;
}

main article .box.border.info > p:last-child {
    margin: 0;
}

main article .box nav {
    position: relative;
    display: flex;
    margin: 1em 0;
    justify-content: space-between;
}

.accordion {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    background-color: var(--gray);
    color: var(--black);
    cursor: pointer;
    padding: 1rem;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
}

.accordion:after {
    content: '';
    height: 1rem;
    width: 1rem;
    margin: .125rem .25rem 0 0;
    position: relative;
    display: inline-block;
    float: right;
    vertical-align: middle;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background: var(--black);
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/triangle-down-fill.svg);
    mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/triangle-down-fill.svg);
}
.accordion.active:after {
    transform: rotate(180deg);
}


.accordion ~ .panel {
    padding: 0 18px;
    max-height: 0;
    background-color: var(--light-gray);
    overflow: hidden;
    transition: .3s;
}
.accordion ~ .panel > *:first-of-type {
    position: relative;
    display: block;
    margin: 1rem 0;
}

@media (min-width: 768px) {
    :root {
        /* 100% der Höhe abzüglich des margin des main tags und der Höhe des Footers */
        --min-main-height: calc(100vh - 65px - 2em - 247px);
    }
    main article.detail {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "text text image"
    "answer answer images";
    }

    main article.detail > section.box {
        width: calc(100% - 1em);
    }

    main article.detail section.text {
        grid-area: text;
        -ms-grid-row: 1;
        -ms-grid-column:1;
    }
    main article.detail section.answer {
        grid-area: answer;
        -ms-grid-row: 2;
        -ms-grid-column:1;
    }

    main article.detail section.images {
        grid-area: images;
        grid-column: 3;
        grid-row: 1 / span 2;
    }
    main article > section.box.one.border {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "top center"
        "top bottom";
        grid-template-rows: auto 1fr;
    }
    main article > section.box.plus {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "top center"
            "top bottom";
        margin: 2em 1em 4em 1em;
        align-items: center;
    }
    main article > section.box.plus > .top {
        grid-area: top;
    }
    main article > section.box.plus > .center,
    main article > section.box.one.border > .center {
        grid-area: center;
        margin: auto 0 0 0;
    }
    main article > section.box.plus > .bottom,
    main article > section.box.one.border > .bottom {
        grid-area: bottom;
        margin: 0 0 auto 0;
    }
    main article > section.box.plus > .top img {
        bottom: -3em;
    }
    main article > section.box.plus .lable {
        font-size: 1.25em;
    }
    main article > section.box.one {
        width: 100%;
    }
    main article > section.box.three > .bottom {
        margin: auto 0 0 0;
    }
    main article > section.contest.images {
        margin: 2em 0 0 0;
    }
}

@media (min-width: 1400px) {
    :root {
        /* 100% der Höhe abzüglich des margin des main tags und der Höhe des Footers */
        --min-main-height: calc(100vh - 165px - 4em - 249px);
    }
    main article > section.box.plus {
        grid-template-columns: .75fr 1fr;
    }
    main article section.contest.text,
    main article section.contest.answer {
        max-width: calc(var(--max-content-width) / 3 * 2 - 2em);
    }

    main article > section.contest.images {
        max-width: calc(var(--max-content-width) / 3 - 1em);
        margin: 3em 1em 0 0;
    }
}