@media all and (min-width: 728px) {
    .teaser:not(.teaser-highlight) figure {
        margin:0 0 12px;
        width: 100%
    }

    .teaser:not(.teaser-highlight) .headline {
        font-weight: 700
    }

    .teaser-highlight>div,.teaser-highlight>a {
        margin-left: 12px
    }

    .teaser-highlight .headline {
        font-size: 32px
    }

    .teaser-hero .description {
        font-size: 20px
    }

    .teaser-hero ul {
        margin: 24px
    }

    .teaser-hero li {
        font-size: 20px;
        padding-left: 22px
    }

    .teaser-hero li:before {
        height: 12px;
        width: 12px
    }
}

@media all and (min-width: 1024px) {
    .teaser-hero {
        text-align:center
    }

    .teaser-hero ul {
        margin: 24px 48px
    }

    .teaser-hero li {
        display: inline-block;
        margin-right: 18px
    }

    .teaser-hero li:last-child {
        margin-right: 0
    }

    .teaser-hero figure:not(.desktop) {
        display: none
    }

    .teaser-hero .desktop {
        display: block
    }

    .teaser.social .headline {
        font-size: 13.5px
    }

    .teaser.social figure {
        margin: 0 12px 0 0;
        width: 52%
    }

    .teaser.social .label {
        display: none
    }

    .teaser.social .comments-count {
        display: none
    }

    .teaser [data-mod=backgroundImage] {
        bottom: 0;
        display: block;
        filter: blur(8px);
        height: 100%;
        left: 0;
        opacity: .165;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 0
    }

    .teaser [data-mod=backgroundImage]~* {
        position: relative
    }
}

@media all and (min-width: 1240px) {
    .teaser.social figure {
        width:58%
    }

    .teaser:not(.social):not(.teaser-highlight) .headline,.teaser:not(.social):not(.teaser-highlight) .description {
        line-height: 1.5
    }

    .maximum .teaser {
        padding: 0 calc((100% - 1240px)/2)
    }

    .teaser-highlight .inner {
        padding: 0 24px 24px
    }

    .teaser-highlight .headline {
        font-size: 29px
    }

    .teaser.teaser-prominent .description {
        display: block
    }

    .teaser-hero .inner {
        box-sizing: border-box;
        padding: 0 48px 18px;
        width: 100%
    }

    .teaser-hero .headline {
        font-size: 36px
    }
}

@media all and (min-width: 728px) {
    .teaser.teaser-opinion {
        position:relative
    }

    .teaser.teaser-opinion h2 {
        float: right;
        width: calc(100% - 70px)
    }

    .teaser.teaser-opinion h2 a {
        font-family: Georgia,Times,"Times New Roman",serif;
        font-size: 18px;
        font-weight: 400;
        font-style: italic;
        line-height: 28px
    }

    .teaser.teaser-opinion figure {
        background-color: transparent;
        bottom: 0;
        display: inline-block;
        height: 60px;
        left: 0;
        margin: 0;
        position: absolute;
        width: 60px
    }

    .teaser.teaser-opinion figure:before {
        display: none
    }

    .teaser.teaser-opinion .comments-count {
        right: 15px;
        top: 0
    }
}

@media all and (min-width: 1024px) {
    .teaser.teaser-opinion h2 {
        height:90px;
        overflow: hidden
    }

    .teaser.teaser-opinion figure {
        height: 80px;
        width: 80px
    }

    .teaser.teaser-opinion .inner {
        padding-bottom: 10px
    }
}

@media all and (min-width: 1240px) {
    .teaser.teaser-opinion {
        border-bottom:4px solid #494949;
        height: 310px
    }

    .teaser.teaser-opinion p {
        display: block;
        width: 100%
    }

    .teaser.teaser-opinion h2 {
        height: 140px;
        overflow: hidden;
        width: 100%
    }

    .teaser.teaser-opinion figure {
        width: 30%
    }

    .teaser.teaser-opinion .comments-count {
        bottom: 15px;
        right: 15px;
        top: auto
    }
}

@media all and (min-width: 728px) {
    .mod-pancakes {
        grid-gap:32px 16px
    }

    .mod-pancakes>* {
        margin: 0 16px
    }

    .pancake {
        grid-gap: 32px
    }
}

@media all and (min-width: 1024px) {
    .mod-pancakes {
        grid-template-columns:1fr 351px
    }

    .mod-pancakes>* {
        grid-column: 1/span 2;
        margin: 0 16px
    }

    .mod-pancakes>*.primary {
        grid-column: 1
    }

    .mod-pancakes>*.primary+.primary+.secondary,.mod-pancakes>*.primary+.primary+.pagination+.secondary {
        grid-row: span 2
    }

    .mod-pancakes>*.secondary {
        border-left: 3px solid #f1f1f1;
        grid-column: 2;
        margin-left: 0;
        padding-left: 32px
    }

    .mod-pancakes>*.secondary.pancake {
        grid-gap: 12px
    }

    .mod-pancakes>*.secondary.pancake .teaser:not(:last-of-type) {
        border-bottom: 2px solid #f1f1f1;
        padding-bottom: 12px
    }

    .mod-pancakes>*.secondary.pancake>div:empty {
        margin-bottom: -12px
    }

    .mod-pancakes>*.maximum {
        margin: 0
    }
}

@media all and (min-width: 1240px) {
    .mod-pancakes {
        grid-template-columns:1fr 841px 351px 1fr
    }

    .mod-pancakes>* {
        grid-column: 2/span 2
    }

    .mod-pancakes>*.primary {
        grid-column: 2
    }

    .mod-pancakes>*.secondary {
        grid-column: 3
    }

    .mod-pancakes>*.maximum {
        grid-column: 1/span 4
    }

    .mod-pancakes.wraparound {
        max-width: 1240px
    }
}

@media all and (-ms-high-contrast: none)and (min-width: 728px),(-ms-high-contrast: active)and (min-width: 728px) {
    .teaser {
        display:block;
        margin-bottom: 32px
    }

    .duet,.quartet {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .duet>* {
        flex-basis: calc(50% - 16px)
    }

    .quartet:not(.opinion)>* {
        flex-basis: calc(25% - 24px)
    }

    .ensemble h3 {
        margin-bottom: 32px;
        width: 100%
    }
}

@media all and (-ms-high-contrast: none)and (min-width: 1024px),(-ms-high-contrast: active)and (min-width: 1024px) {
    .mod-pancakes {
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .mod-pancakes .primary {
        flex-basis: calc(100% - 399px)
    }

    .mod-pancakes .primary.solo.wide {
        height: 340px
    }

    .mod-pancakes .primary.solo.wide figure {
        max-width: 510px
    }

    .mod-pancakes .primary.solo.splash {
        height: 700px
    }

    .mod-pancakes .secondary {
        flex-basis: 300px
    }

    .mod-pancakes .secondary.duet {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start
    }

    .mod-pancakes .solo>.teaser {
        flex-basis: 100%
    }

    .mod-pancakes .primary.solo.wide+.primary+.secondary {
        margin-top: -340px
    }

    .mod-pancakes .primary.solo.splash+.primary+.secondary {
        margin-top: -700px
    }

    .pancake {
        flex-basis: 100%
    }

    .opinion>* {
        flex-basis: calc(50% - 12px)
    }

    .ensemble {
        display: flex;
        flex-wrap: wrap
    }

    .ensemble .teaser-highlight {
        flex-basis: calc(50% - 16px)
    }

    .ensemble .secondary {
        flex-basis: calc(50% - 51px)
    }
}

@media all and (-ms-high-contrast: none)and (min-width: 1240px),(-ms-high-contrast: active)and (min-width: 1240px) {
    .mod-pancakes {
        justify-content:center
    }

    .mod-pancakes .pancake:not(.primary):not(.secondary):not(.maximum) {
        flex-basis: 1176px
    }

    .mod-pancakes .primary {
        flex-basis: 809px;
        margin-right: 32px
    }

    .mod-pancakes .primary.solo {
        margin-right: 383px
    }

    .mod-pancakes .primary.solo.wide {
        height: 370px
    }

    .mod-pancakes .primary.solo.splash {
        height: 790px
    }

    .mod-pancakes .primary.solo.wide+.primary+.secondary {
        margin-top: -370px
    }

    .mod-pancakes .opinion>* {
        flex-basis: calc(25% - 24px)
    }
}

@supports not (display: grid) {
    @media all and (min-width: 728px) {
        .teaser {
            display:block;
            margin-bottom: 32px
        }

        .duet,.quartet {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between
        }

        .duet>* {
            flex-basis: calc(50% - 16px)
        }

        .quartet:not(.opinion)>* {
            flex-basis: calc(25% - 24px)
        }

        .ensemble h3 {
            margin-bottom: 32px;
            width: 100%
        }
    }

    @media all and (min-width: 1024px) {
        .mod-pancakes {
            display:flex;
            flex-wrap: wrap;
            justify-content: space-between
        }

        .mod-pancakes .primary {
            flex-basis: calc(100% - 399px)
        }

        .mod-pancakes .primary.solo.wide {
            height: 340px
        }

        .mod-pancakes .primary.solo.wide figure {
            max-width: 510px
        }

        .mod-pancakes .primary.solo.splash {
            height: 700px
        }

        .mod-pancakes .secondary {
            flex-basis: 300px
        }

        .mod-pancakes .secondary.duet {
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: flex-start
        }

        .mod-pancakes .solo>.teaser {
            flex-basis: 100%
        }

        .mod-pancakes .primary.solo.wide+.primary+.secondary {
            margin-top: -340px
        }

        .mod-pancakes .primary.solo.splash+.primary+.secondary {
            margin-top: -700px
        }

        .pancake {
            flex-basis: 100%
        }

        .opinion>* {
            flex-basis: calc(50% - 12px)
        }

        .ensemble {
            display: flex;
            flex-wrap: wrap
        }

        .ensemble .teaser-highlight {
            flex-basis: calc(50% - 16px)
        }

        .ensemble .secondary {
            flex-basis: calc(50% - 51px)
        }
    }

    @media all and (min-width: 1240px) {
        .mod-pancakes {
            justify-content:center
        }

        .mod-pancakes .pancake:not(.primary):not(.secondary):not(.maximum) {
            flex-basis: 1176px
        }

        .mod-pancakes .primary {
            flex-basis: 809px;
            margin-right: 32px
        }

        .mod-pancakes .primary.solo {
            margin-right: 383px
        }

        .mod-pancakes .primary.solo.wide {
            height: 370px
        }

        .mod-pancakes .primary.solo.splash {
            height: 790px
        }

        .mod-pancakes .primary.solo.wide+.primary+.secondary {
            margin-top: -370px
        }

        .mod-pancakes .opinion>* {
            flex-basis: calc(25% - 24px)
        }
    }
}

@media all and (min-width: 728px) {
    .pancake.solo .video-icon {
        height:50px;
        width: 50px
    }

    .pancake.solo .video-icon:before {
        border-width: 11px 0 11px 15px
    }

    .pancake.solo .gallery-icon {
        height: 50px;
        width: 50px
    }

    .pancake.solo .gallery-icon:before {
        font-size: 32px
    }

    .pancake.solo.wide .teaser-prominent figure {
        border: 0;
        float: right;
        width: 66%
    }

    .pancake.solo.wide .teaser-prominent .headline {
        font-size: 24px
    }

    .pancake.solo.wide .teaser-prominent .label {
        background: none !important;
        color: #979797;
        margin: 18px 12px;
        padding: 0;
        top: 0
    }
}

@media all and (min-width: 1024px) {
    .pancake.solo.featured .teaser-prominent {
        text-align:left
    }

    .pancake.solo.featured .teaser-prominent>a,.pancake.solo.featured .teaser-prominent>div:not([data-mod=backgroundImage]) {
        margin: 24px 24px 0
    }

    .pancake.solo.featured .teaser-prominent figure {
        float: right;
        width: 55%
    }

    .pancake.solo.featured .teaser-prominent .headline {
        font-size: 26px
    }

    .pancake.solo.featured .teaser-prominent .description {
        display: block;
        font-size: 16px
    }

    .pancake.solo.featured .teaser-prominent .label {
        top: 0
    }

    .pancake.wide .teaser-prominent .description {
        display: none
    }
}

@media all and (min-width: 728px) {
    .duet {
        grid-template-columns:repeat(2, 1fr)
    }

    .duet .video-icon {
        height: 40px;
        width: 40px
    }

    .duet .video-icon:before {
        border-width: 9px 0 9px 12px
    }

    .duet .gallery-icon {
        height: 40px;
        width: 40px
    }

    .duet .gallery-icon:before {
        font-size: 27px
    }

    .duet>div {
        font-size: 17px
    }
}

@media all and (min-width: 1024px) {
    .duet.secondary {
        grid-template-columns:1fr
    }

    .duet>div {
        font-size: 16px
    }
}

@media all and (min-width: 1240px) {
    .duet>div {
        font-size:18px
    }
}

@media all and (min-width: 728px) {
    .pancake.quartet .video-icon {
        height:40px;
        width: 40px
    }

    .pancake.quartet .video-icon:before {
        border-width: 9px 0 9px 12px
    }

    .pancake.quartet .gallery-icon {
        height: 40px;
        width: 40px
    }

    .pancake.quartet .gallery-icon:before {
        font-size: 27px
    }

    .pancake.quartet:not(.opinion) {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media all and (min-width: 1024px) {
    .pancake.quartet.opinion {
        grid-template-columns:repeat(2, 1fr)
    }

    .pancake.quartet .teaser {
        font-size: 16px
    }
}

@media all and (min-width: 1240px) {
    .pancake.quartet.opinion {
        grid-template-columns:repeat(4, 1fr)
    }
}

@media all and (min-width: 728px)and (max-width: 1024px) {
    .pancake.ensemble>.pancake {
        margin-left:0;
        margin-right: 0
    }

    .pancake.ensemble>.pancake .video-icon,.related-column .pancake.ensemble .teaser-highlight .video-icon {
        height: 40px;
        width: 40px
    }

    .pancake.ensemble>.pancake .video-icon:before,.related-column .pancake.ensemble .teaser-highlight .video-icon:before {
        border-width: 9px 0 9px 12px
    }

    .pancake.ensemble>.pancake .gallery-icon,.related-column .pancake.ensemble .teaser-highlight .gallery-icon {
        height: 40px;
        width: 40px
    }

    .pancake.ensemble>.pancake .gallery-icon:before,.related-column .pancake.ensemble .teaser-highlight .gallery-icon:before {
        font-size: 27px
    }
}

@media all and (min-width: 1024px) {
    .pancake.ensemble {
        grid-template-columns:repeat(2, 1fr)
    }

    .pancake.ensemble h3 {
        grid-column: span 2
    }

    .related-column .pancake.ensemble .teaser-highlight .video-icon {
        height: 30px;
        width: 30px
    }

    .related-column .pancake.ensemble .teaser-highlight .video-icon:before {
        border-width: 7px 0 7px 9px
    }

    .related-column .pancake.ensemble .teaser-highlight .gallery-icon {
        height: 30px;
        width: 30px
    }

    .related-column .pancake.ensemble .teaser-highlight .gallery-icon:before {
        font-size: 20px
    }
}

@media all and (min-width: 728px) {
    .pancake.ensemble h3>a {
        font-size:28px
    }

    .pancake.ensemble div.teaser-highlight .video-icon {
        height: 50px;
        width: 50px
    }

    .pancake.ensemble div.teaser-highlight .video-icon:before {
        border-width: 11px 0 11px 15px
    }

    .pancake.ensemble div.teaser-highlight .gallery-icon {
        height: 50px;
        width: 50px
    }

    .pancake.ensemble div.teaser-highlight .gallery-icon:before {
        font-size: 32px
    }

    .pancake.ensemble div.teaser-highlight .headline {
        margin-left: 0;
        margin-right: 0
    }

    .pancake.ensemble .teaser-highlight .description {
        display: block
    }
}

@media all and (min-width: 1024px) {
    .pancake.ensemble h3>a {
        font-size:30px
    }

    .pancake.ensemble .pancake {
        grid-column: 2
    }

    .pancake.ensemble .teaser {
        font-size: 16px
    }

    .pancake.ensemble .teaser-highlight .comments-count {
        margin-top: 0
    }

    .pancake.ensemble>.pancake {
        border-left: 3px solid #f1f1f1;
        padding-left: 32px
    }

    .pancake.ensemble>.pancake .teaser figure {
        margin-right: 18px;
        width: 33%
    }

    .pancake.ensemble>.pancake .teaser .headline {
        line-height: 1.4
    }
}

@media all and (min-width: 1240px) {
    .pancake.ensemble h3>a {
        font-size:32px
    }
}

@media all and (min-width: 728px) {
    .section-page #simple-wrapper,.tag-head #simple-wrapper,.topic-page #simple-wrapper {
        width:calc(100% - 32px)
    }

    .section-page .breadcrumbs,.tag-head .breadcrumbs,.topic-page .breadcrumbs {
        margin-left: 16px;
        margin-right: 16px
    }

    .section-head,.tag-head,.topic-head {
        margin-left: 16px;
        margin-right: 16px
    }

    .section-head h1,.tag-head h1,.topic-head h1 {
        font-size: 40px
    }

    .topic-intro {
        box-sizing: border-box;
        overflow: hidden;
        padding: 24px 24px 18px;
        width: 100%
    }

    .topic-intro figure {
        display: inline-block
    }

    .topic-intro figure.profile {
        width: 117px
    }

    .topic-intro figure.profile .image-outer {
        padding-right: 10px
    }

    .topic-intro .profile-info {
        margin: 0 auto
    }

    .topic-intro .profile-info h1 {
        font-size: 30px;
        width: 300px
    }

    .topic-intro .topic-intro-text p {
        font-family: "Open Sans",sans-serif;
        font-size: 16px;
        font-weight: 400;
        text-transform: none
    }

    .social-profile-links {
        padding: 6px 0
    }

    .social-profile-links ul li.phone-profile {
        width: 5px
    }

    .social-profile-links ul li.phone-profile span {
        font-size: 14px
    }

    .social-profile-links ul li.phone-profile a {
        text-indent: inherit
    }

    .social-profile-links ul li.phone-profile a.show-phone span {
        margin-left: 10px
    }

    .social-profile-links ul li.phone-profile a:before {
        font-size: 14px;
        left: 7px;
        position: relative;
        top: 0
    }

    .social-profile-links ul li.phone-profile a:before:hover {
        opacity: .9
    }

    .section-head.section-info .topic-intro-text.with-image {
        width: 80%
    }
}

@media all and (min-width: 1024px) {
    .section-page #simple-wrapper,.tag-page #simple-wrapper,.topic-page #simple-wrapper {
        position:relative
    }

    .section-page #simple-wrapper:before,.tag-page #simple-wrapper:before,.topic-page #simple-wrapper:before {
        background: #f1f1f1;
        content: "";
        height: 100%;
        left: calc(100% - 300px - 32px - 3px);
        position: absolute;
        width: 3px
    }

    .section-page #simple-wrapper>.content,.tag-page #simple-wrapper>.content,.topic-page #simple-wrapper>.content {
        float: left;
        width: calc(100% - (300px + 3px + 64px))
    }

    .section-page #simple-wrapper>aside,.tag-page #simple-wrapper>aside,.topic-page #simple-wrapper>aside {
        float: right;
        width: 300px
    }

    .section-head p:nth-child(2),.tag-head p:nth-child(2),.topic-head p:nth-child(2) {
        display: block;
        font-size: 16px
    }

    .section-head p:nth-child(2) a,.tag-head p:nth-child(2) a,.topic-head p:nth-child(2) a {
        display: block;
        line-height: 1.3;
        padding-right: 18px;
        position: relative
    }

    .section-head p:nth-child(2) a:after,.tag-head p:nth-child(2) a:after,.topic-head p:nth-child(2) a:after {
        content: "»";
        display: block;
        font-weight: bold;
        height: 12px;
        position: absolute;
        right: 0;
        top: 0;
        transition: right 200ms ease;
        width: 12px
    }

    .section-head p:nth-child(2) a:hover:after,.tag-head p:nth-child(2) a:hover:after,.topic-head p:nth-child(2) a:hover:after {
        right: -2px
    }

    .tag-head time {
        float: right
    }

    .topic-intro figure {
        width: 17%
    }

    .topic-intro figure.profile {
        width: 8%
    }

    .topic-intro figure.profile+.topic-intro-text {
        width: 79%
    }

    .topic-intro .profile-info {
        display: inline-block
    }

    .topic-intro .profile-info p {
        margin-top: 0
    }

    .topic-intro-text.profile {
        border-left: 1px solid #979797;
        float: right;
        padding: 0 10px;
        width: 55%
    }

    .topic-intro-text .profile-details div {
        display: inline-block
    }

    .topic-intro-text .profile-details div:after {
        content: "| ";
        margin-right: 5px
    }

    .topic-intro-text .profile-details div:nth-of-type(even):after,.topic-intro-text .profile-details div:nth-last-of-type(2):after {
        content: "";
        margin-right: 0
    }

    .topic-intro-text .profile-details div p {
        display: inline-block;
        line-height: 0
    }

    .social-profile-links {
        border: 0;
        margin: 0;
        padding: 10px 0
    }

    .social-profile-links ul li.phone-profile {
        width: 5px
    }

    .social-profile-links ul li.phone-profile a {
        text-indent: inherit
    }

    .social-profile-links ul li.phone-profile a:before {
        font-size: 14px;
        left: 7px;
        position: relative;
        top: 0
    }

    .social-profile-links ul li.phone-profile a:before:hover {
        opacity: .9
    }
}

@media all and (min-width: 1240px) {
    main {
        background-color:#fff
    }

    .topic-intro .topic-intro-text.profile {
        float: right;
        width: 60%
    }

    .topic-intro .profile-details div {
        display: inline-block
    }

    .topic-intro .profile-details div p {
        display: inline-block
    }

    .tag-head time {
        float: right
    }

    .social-profile-links ul li.phone-profile {
        width: 5px
    }

    .social-profile-links ul li.phone-profile span {
        font-size: 14px
    }

    .social-profile-links ul li.phone-profile a {
        text-indent: inherit
    }

    .social-profile-links ul li.phone-profile a:before {
        font-size: 14px;
        left: 7px;
        position: relative;
        top: 0
    }

    .social-profile-links ul li.phone-profile a:before:hover {
        opacity: .9
    }
}

@media all and (min-width: 728px) {
    .badges-nav:after {
        display:none
    }

    .badges {
        -ms-overflow-style: none;
        margin: 0 auto 14px;
        overflow: initial;
        width: 100%
    }

    .badges .scroll {
        width: 100%
    }

    .badges ul {
        margin-bottom: 24px;
        padding-left: 16px;
        padding-right: 16px
    }

    .badges ul li {
        padding: 0 2px
    }

    .badges ul li a {
        min-height: 35px
    }

    .badges [data-count="15"] li {
        width: calc(100% / 15)
    }

    .badges [data-count="15"] li:last-child {
        width: calc(100% / 15)
    }

    .badges [data-count="20"] li {
        width: calc(100% / 20)
    }

    .badges [data-count="20"] li:last-child {
        width: calc(100% / 20)
    }
}

@media all and (min-width: 1024px) {
    .badges {
        overflow:initial;
        width: 100%
    }

    .badges .scroll {
        margin-bottom: 24px
    }

    .badges ul {
        display: inline-block;
        padding-left: 16px;
        padding-right: 16px;
        text-align: center
    }

    .badges li {
        display: inline-block;
        float: none;
        padding: 0 4px;
        text-align: center
    }

    .badges li a {
        min-height: 41px;
        width: 100%
    }

    .badges li:last-child {
        width: 5%
    }

    .badges li:last-child a {
        background-position: center
    }
}

@media all and (min-width: 1240px) {
    .badges {
        overflow:initial
    }

    .badges ul {
        display: block;
        float: left;
        margin-bottom: 24px;
        padding: 2px 0;
        width: 100%
    }

    .badges ul li:last-child {
        padding: 0 6px
    }

    .badges li {
        float: left;
        padding: 0 8px
    }

    .badges li a:hover {
        transform: scale(1.2);
        transition: all .15s ease-in-out
    }

    .badges li:last-child a {
        background-position: center
    }
}