: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 > section h2 {
    margin: 2rem 0 0 0;
}

main > article > section h2 ~ p:first-of-type {
    margin: 1rem 0 1rem 0;
}

main > article > section h2 ~ p {
    margin: 0 0 1rem 0;
}

main article {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

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

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

main article > section.box.three img,
main article > section.box.two img {
    height: 264px;
}

main article.vote > section img {
    object-fit: contain;
}

main article > section.images {
    display: none;
}

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

main article > section.box {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
}

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

main article > section.box h3,
main article > section.box > .center > h3 {
    margin: 0 0 .5em;
    line-height: 2.25rem;
    word-break: break-word;
}

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.vote {
    border-color: var(--success-color);
}

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;
}

main article > section.box > .bottom > nav,
main article > section.box > .bottom > nav > p {
    margin: 0;
}


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

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

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

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

.mediaContent 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.mediaContent {
    margin: 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 span.info {
    position: relative;
    display: block;
    color: var(--success-color);
    font-weight: 700;
    margin: 0 0 1em 0;
}

main article .box.border.disabled span.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;
}

main article section.mediaContent fieldset m-button {
    font-size: 1rem;
    min-width: fit-content;
}

nav:not(#nav) {
    gap: .5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

m-upload > .content {
    width: 350px;
    max-width: 100%;
}

m-upload.active > .content nav m-button:last-child {
    min-width: -webkit-fill-available;
}

.mediaContent > nav {
    margin: 1rem 0;
    padding: 1rem 0;
    width: 100%;
}

main article section.mediaContent picture {
    height: 200px;
}

/* voting and participate */
main article.vote > section.box > .top {
    background: var(--gray);
}
main article.vote > section.box.border > .bottom {
    padding: 1em;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

main article.vote > section.box.border > .bottom p {
    font-size: .85rem;
    width: auto;
    padding: 0 1rem 0 0;
}

main article.vote > section.box.border > .bottom m-button {
    margin: 0;
    width: -webkit-fill-available;
    max-width: max-content;
    height: fit-content;
}

main article.vote > section.box.border > .bottom m-button.vote {
    background: var(--success-color);
    padding: .75rem 1.5rem .75rem 1rem;
    width: -webkit-fill-available;
}

m-button.vote > .icon {
    position: relative;
    display: inline-block;
    content: '';
    -webkit-mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/check-circle-solid.svg);
    mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/check-circle-solid.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    mask-size: 100%;
}

main article.vote > section img {
    height: 300px;
}

main article.vote > m-message {
    position: fixed;
    bottom: 1rem;
    z-index: 999;
    left: 0;
}

main article section.mediaContent fieldset:last-of-type span.label {
    line-height: 1.5rem;
    font-size: 1rem;
    margin: 0 0 0 30px;
}

@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 > section.images {
        display: block;
    }

    main article.detail {
        gap: 1rem;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "text text image"
    "mediaContent mediaContent image";
    }

    main article.detail > section.box {
        width: 100%;
    }

    main article.detail section.text {
        grid-area: text;
        -ms-grid-row: 1;
        -ms-grid-column:1;
    }
    main article.detail section.mediaContent {
        grid-area: mediaContent;
        -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 > .top {
        min-height: 264px;
    }
    main article > section.box.plus {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "top center"
            "top bottom";
        align-items: center;
    }
    main article > section.box.plus > .top {
        grid-area: top;
        height: 100%;
    }
    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 .lable {
        font-size: 1.25em;
    }
    main article > section.box.one {
        width: 100%;
    }
    main article > section.box.two {
        width: calc(50% - .5em);
    }
    main article > section.box.three > .bottom {
        margin: auto 0 0 0;
    }
    main article > section.contest.images {
        margin: 2em 0 0 0;
    }
    main article > section.box.three {
        width: calc(50% - .5rem);
    }
    main article section.mediaContent picture img {
        max-height: inherit;
    }
}

@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.mediaContent {
        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;
    }

    main article > section.box.three {
        width: calc(33.33% - 2rem / 3);
    }

    main article.vote > m-message {
        left: auto;
        bottom: 3rem;
    }
    main article section.mediaContent picture {
        width: 500px;
        float: left;
        margin: 0 1rem 0 0;
        height: 500px;
    }
    main article section.mediaContent m-progress-bar ~ picture {
        margin: 1rem 1rem 0 0;
    }
    main article section.mediaContent m-field > .frame > textarea {
        min-height: 222px;
    }

    main article section.mediaContent fieldset:last-of-type label {
        margin: 1rem 0;
    }
}