body > main {
    position: relative;
    display: block;
    margin: 90px auto 0 auto;
    width: 100%;
}

body > main.headline ~ main {
    margin: 1em auto 2em auto;
}

body div.splide ~ main {
    margin: 90px auto 0 auto;
}

body > main .logo {
    position: relative;
    display: block;
    margin: 1em auto 1em auto;
}

main.banner {
    display: block;
    margin: 60px auto 0 auto;
    width: 100%;
}

main.banner article {
    position: relative;
    display: block;
    min-width: 100%;
    height: 400px;
    margin: 0;
}

main.banner iframe {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

main.headline {
    position: relative;
    display: block;
    width: 100%;
    margin: 90px 0 0 0;
}

body > main.headline:first-of-type {
    margin: 90px auto 0 auto;
}

main.headline article {
    position: relative;
    display: block;
    width: 100%;
    max-width: var(--max-content-width);
    margin: 0 auto;
}

main.headline article h2 {
    margin: 0;
}

main .anchor {
    position: relative;
    display: inline-block;
    margin: 0 auto;
}

main .anchor:before {
    content: '';
    position: relative;
    display: block;
    width: 3em;
    height: 3em;
    background-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/chevron-circle-down-solid.svg);
}

main > article {
    position: relative;
    display: flex;
    flex-direction: column;
}

main > article.banner {
    position: relative;
    display: block;
    margin: 0 auto 2em auto;
    width: 100%;
}

main > article.banner img {
    position: relative;
    display: block;
    max-width: 100%;
    min-width: 100%;
}

main > article.abo {
    flex-wrap: wrap;
}

main > article.abo > section.box.one,
main > article.abo > section.box.two,
main > article.abo > section.box.three {
    width: calc(100% - 2em);
    margin: 1em;
    row-gap: 1em;
}

main > article.message,
main > article.back,
main > article.fullWidth {
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 0 1em;
    width: 100%;
    max-width: var(--max-content-width);
    text-align: center;
}

main > article.fullWidth {
    display: flex;
    justify-content: center;
}

main > article.back {
    min-width: 100px;
    width: auto;
}

main > article.message {
    margin: 0 auto 3em auto;
}

article.userMessage {
    background: var(--primary);
    color: var(--white);
    margin: 1em auto;
    padding: 1em;
    width: calc(100% - 2rem);
}

article.userMessage section {
    margin: 0;
    width: 100%;
}

article.userMessage p.user {
    margin: 0 0 0 32px;
    line-height: 1.25rem;
}

article.userMessage p.user:before {
    content: '';
    position: relative;
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: 0 8px -6px -30px;
    background: var(--white);
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/user.svg);
    mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/user.svg);
}

article.userMessage a {
    color: var(--white);
}

article.userMessage m-button.flat {
    color: var(--white);
    margin: 0 0 0 auto;
}

main > article.back {
    display: inline-block;
    text-align: initial;
    padding: 0;
}

main > article.fullWidth h2 {
    margin: 3rem 0 1rem 0;
    font-family: var(--primary-font);
    text-transform: uppercase;
}

main > article.twoThirds {
    position: relative;
    display: block;
    width: calc(100% - 3em);
    max-width: 900px;
    justify-content: flex-start;
    margin: .75em 1.5em 1.25em 1.5em;
    font-family: 'Noto Serif', serif;
}

main > article.twoThirds h2 {
    margin: 0 0 2em 0;
}

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

main > article > section.box.fullWidth {
    text-align: left;
    border: var(--border);
}

main > article > section.box > .top > img {
    max-width: 100%;
    margin: 0 auto 1em auto;
}

main > article.space {
    display: block;
    padding: 0;
}

main > article > section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

main > article > section > iframe {
    min-height: 400px;
}

main > article > section.box {
    background: var(--white);
    border: var(--border);
    width: 100%;
    margin: 0 0 3.5em 0;
    padding: 2em 1.75em 1.75em 1.75em;
    order: 2;
}

main > article > section.box h2 {
    margin: 0 0 1rem 0;
}

main.content > article.fullWidth > section.box {
    display: block;
    text-align: left;
}

main > article > section.box.massage {
    margin: 0 auto 3.5em auto;
    padding: 1.25em;
    max-width: calc(1400px - 2.5em);
    display: block;
}

main > article > section.box.recommendation {
    overflow: hidden;
    padding: 0 1.75em 1.75em 1.75em;
    order: 1;
    background: var(--light-gray);
    border: none;
}

main > article > section.box.recommendation > .top:before {
    content: 'Unsere Empfehlung';
    position: relative;
    display: block;
    margin: 2em 0 -2em 0;
    padding: .25em .5em;
    font-family: var(--primary-font);
    font-weight: 600;
    background: var(--primary);
    color: var(--white);
    width: max-content;
}

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

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

main > article > section > .headline {
    text-align: center;
    margin: 3rem 0 .5rem 0;
    width: 100%;
    text-transform: uppercase;
}

main > article > section > .headline > img {
    position: relative;
    top: 16px;
    margin: 0 0 0 8px;
    width: auto;
    height: 2em;
}

main > article.back ~ article > section > .headline {
    margin: 0 0 .5em 0;
}

main h2.headline > span.highlight {
    position: relative;
    display: block;
    font-size: 1.2em;
    color: var(--primary);
}

main > article > section.box > h4.headline {
    display: inline-flex;
    align-items: center;
    margin: .5em 0;
    width: 100%;
    text-align: left;
    font-size: 1.25em;
}

main > article > section.recommendation > .top img {
    margin: 0 auto 1em auto;
}

main > article ul.check {
    list-style: none;
    padding: 0;
}

main > article ul.check li {
    display: flex;
    align-items: flex-start;
    margin: 0 0 1em 0;
}

main > article ul.check li > p {
    margin: 0;
}

main > article ul.check li > img {
    margin: -.25em 0 0 0;
}

main > article ul.check li:before {
    content: '';
    height: 1rem;
    width: 1rem;
    min-width: 1rem;
    background: var(--black);
    margin: 0 .5rem 0 0;
    background: var(--black);
    position: relative;
    display: block;
    vertical-align: middle;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    -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-color: var(--primary);
    top: 0.15em;
}

main > article ul.check [download] li:before {
    background-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/pdf.svg);
}

main > article > section > div > span.small {
    margin: 0 0 .5em 0;
    display: inline-block;
}

main > article > section > div > h3.headline,
main > article > section > h3.headline {
    text-align: left;
    margin: 0 0 0.5em 0;
    text-transform: uppercase;
}

main > article h3.price {
    font-size: 2.5em;
    display: flex;
    align-items: flex-start;
    margin: 0 0 .5em 0;
    font-weight: 600;
}

main > article h3.price > .top {
    position: relative;
    display: inline-block;
    font-size: .65em;
    margin: .05em .25em 0 0;
}

main > article h3.price > span.small {
    font-size: 16px;
    font-weight: 400;
    margin: auto 0 0 1em;
}

main > article.abo > section.box.recommendation {
    overflow: initial;
}

section[hidden] {
    display: none;
}

/* div table with checkbox */
main > article .table {
    position: relative;
    display: block;
    background: var(--white);
    border: 1px solid var(--secondary);
    border-radius: 4px;
    overflow-x: auto;
    margin: 0 0 1em 0;
}

main > article .table > * {
    display: grid;
    grid-template-columns: 32px minmax(100px, 100%) minmax(100px, 100%) minmax(84px, 100%) minmax(100px, 100%) minmax(100px, 100%) minmax(140px, 100%);
}

main > article .table > fieldset {
    border-top: 1px solid var(--secondary);
}

main > article .table > .th span {
    font-weight: 600;
    line-height: 2em;
}

main > article .table > * span {
    word-break: break-word;
    padding: 0.5em;
    line-height: 2em;
}

main > article m-select .table > * span {
    padding: 0;
}

main > article .table > fieldset m-state.active,
main > article .table > fieldset m-state.active ~ span {
    background: var(--light-gray);
}

main > article .table > fieldset m-state.checkbox > .frame > .body {
    margin: 4px;
}

main > article .table > fieldset m-state {
    margin: 0;
    width: auto;
}

main > article .table > fieldset m-state span.box {
    margin: 0;
}

/* div table devices with checkbox */
main > article .table.devices > * {
    display: grid;
    grid-template-columns: 32px minmax(120px, 100%) minmax(140px, 100%) minmax(140px, 100%);
}

main > article .info {
    position: relative;
    display: block;
    width: calc(100% - 2em);
    background: var(--primary);
    color: var(--white);
    margin: 0 1em 2em 1em;
    padding: 1em;
}

main > article:first-of-type .info {
    margin: 2em 1em 2em 1em;
}

main > article .info h3 {
    font-family: var(--primary-font);
    text-transform: uppercase;
    margin: 0 0 .5em 0;
}

main > article .info h3:before {
    content: '';
    height: 28px;
    width: 28px;
    min-width: 28px;
    top: -2px;
    background: var(--black);
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.25em 0 0;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background: var(--white);
    -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);
}

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

main > article .info a {
    color: var(--white);
    font-weight: 600;
}

/* scrollbar */
::-webkit-scrollbar {
    width: .25em;
    height: .25em;
}

::-webkit-scrollbar-track {
    box-shadow: none;
    background-color: transparent;
}

::-webkit-scrollbar-track-piece {
    background-color: var(--white);
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--medium-gray);
    border-radius: .25em;
}

@media (min-width: 768px) {
    body > main {
        margin: 90px auto 0 auto;
    }

    body > main:last-of-type {
        min-height: calc(100vh - 502px);
    }

    main.headline {
        margin: 90px auto 0 auto;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        max-width: var(--max-content-width);
    }

    body > main .logo {
        margin: 2em auto 1em auto;
    }

    main > article,
    main > article.space {
        flex-direction: row;
        justify-content: flex-start;
        max-width: calc(var(--max-content-width) - 2em);
        margin: 0 auto 1.25em auto;
        padding: 0;
    }

    main > article.abo {
        max-width: var(--max-content-width);
    }

    main > article.space {
        flex-wrap: wrap;
        max-width: var(--max-content-width);
    }

    main > article > section.box {
        min-width: 220px;
    }

    main > article > section.box,
    main > article.space > section.box {
        display: flex;
        border: var(--border);
        align-items: flex-start;
        justify-content: space-between;
        order: initial;
    }

    main > article.space > section.box {
        margin: 0 1em 2em 1em;
    }

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

    main > article > section.box.small {
        margin: 0 0 2em 1em;
    }

    main > article.borderTop > section.box.small {
        min-width: 220px;
        max-width: 31%;
    }

    main > article.two > section.box {
        width: calc(50% - 2em);
    }

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

    main > article > section.box.recommendation {
        margin: 0 1em 2em 0;
        order: initial;
    }

    main > article > section.box > .center {
        position: relative;
        display: block;
        height: 100%;
    }

    main > article .info {
        width: 100%;
        margin: 0 0 1em 0;
    }

    main > article:first-of-type .info {
        margin: 2em 0 1em 0;
    }

    main > article span.small {
        font-size: .8em;
    }

    main > article.abo > section.box.three:nth-child(3n),
    main > article.abo > section.box.one {
        display: grid;
        grid-template-columns: 3fr 2fr;
        grid-column-gap: 1em;
        grid-template-areas:
        "center top"
        "center bottom";
    }

    main > article.abo > section.box.three:nth-child(3n) > .top,
    main > article.abo > section.box.one > .top {
        grid-area: top;
    }

    main > article.abo > section.box.three:nth-child(3n) > .center,
    main > article.abo > section.box.one > .center {
        grid-area: center;
    }

    main > article.abo > section.box.three:nth-child(3n) > .bottom,
    main > article.abo > section.box.one > .bottom {
        grid-area: bottom;
    }

    main > article.abo > section.box.three.recommendation:nth-child(3n) > .top:before,
    main > article > section.box.one.recommendation > .top:before {
        display: none;
    }

    main > article.abo > section.box.three.recommendation:nth-child(3n) > .center:before,
    main > article > section.box.one.recommendation > .center:before {
        content: 'Unsere Empfehlung';
        position: relative;
        display: block;
        margin: 2em 0 1em 0;
        padding: .25em .5em;
        font-family: var(--primary-font);
        font-weight: 600;
        background: var(--primary);
        color: var(--white);
        width: max-content;
    }

    main > article.abo > section.box.two {
        width: calc(50% - 2em);
        margin: 1em;
    }

    main > article.abo > section.box.three {
        width: calc(50% - 2em);
        margin: 1em;
    }

    main > article.abo > section.box.three:nth-child(3n) {
        display: flex;
        width: 100%;
    }

    main > article.abo > section.box > div.top img {
        max-width: 100%;
        max-height: 160px;
    }

    main > article.twoThirds {
        margin: .75em auto 1.25em 2em;
    }

    main > article.message {
        margin: 0 auto 6em auto;
    }

}

@media (min-width: 1400px) {

    main.banner article {
        height: 450px;
    }

    main > article,
    main > article.space {
        margin: 1.25em auto;
    }

    main > article.space {
        display: flex;
    }

    main > article.abo {
        margin: 0 auto 3.5em auto;
    }

    main > article > section.box,
    main > article.space > section.box {
        width: 100%;
        margin: 3.5em 0 2em 0;
    }

    main > article > section.box {
        margin: 0 2em 2em 0;
        padding: 1.5em;
    }

    main > article > section.box.small {
        margin: 0 0 2em 1em;
    }

    main > article.space > section.box {
        margin: 0 1em 2em 1em;
        width: calc(33% - 2em);
        display: inline-flex;
        justify-content: flex-start;
    }

    main > article.borderTop > section.box {
        flex-direction: column;
        margin: 0 1em 2em 0;
    }

    main > article > section.box.fullWidth {
        padding: 1.25em;
    }

    main > article.abo > section.box.three,
    main > article.abo > section.box.three:nth-child(3n) {
        width: calc(33.3% - 2em);
        margin: 1em;
    }

    main > article.twoThirds {
        margin: .75em auto 1.25em 1.5em;
    }

    main > article.twoThirds h2 {
        margin: 0;
    }

    body > main > article section.variant_true,
    body > main > article section.debit {
        flex-direction: column;
    }
}