@media screen and (min-width:43em) {
    main {
        box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
        width: 98%;
        margin-top: 1rem;
        margin-left: auto;
        margin-right: auto;
        padding: 0
    }
    .content {
        display: flex;
        flex-wrap: wrap
    }
    .header {
        box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
        min-height: 5.0rem;
        transition: min-height .3s;
        margin-left: auto;
        margin-right: auto
    }
    .header__menu {
        display: none
    }
    .header__title {
        font-size: 1.5rem;
        padding: 1rem .5rem .5rem 0;
    }
    .header__logo {
        height: 28px;
        vertical-align: baseline;
        margin-top: 10px
    }
    .header__inner {
        padding: 0;
        border: none;
        width: 100%;
        margin-left: auto;
        margin-right: auto
    }
    ul {
        display: inline-block
    }
    .nav {
        width: 100%;
        background-color: #fff;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        border: none;
        top: 3.0rem
    }
    li.nav__item {
        display: inline;
        width: 22%;
        -webkit-text-size-adjust: 100%;
        font-size: .80rem;
        box-sizing: border-box;
        text-align: center;
        line-height: 24px;
        text-transform: uppercase;
        letter-spacing: .1em;
        padding: 10px 0 10px 0;
        margin: 1em 1em 0 0;
        border-top: none
    }
    .nav__item img {
        height: 14px;
        vertical-align: -1px
    }
    .nav a {
        padding: .5em .3em .1em .3em
    }
    #nh {
        width: 4%;
        text-align: left;
        line-height: 24px;
        padding-left: .5em
    }
    #nh img {
        height: 20px;
        vertical-align: -4px
    }
    .hero_zl {
        padding: 0;
        margin: 0 1rem 0 0;
        display: flex;
        flex-wrap: wrap;
        width: auto;
        max-width: 67%;
        order: 0;
        align-content: flex-start
    }
    .hero {
        padding: 0;
        margin: 0 1rem 0 0;
        display: flex;
        flex-wrap: wrap;
        max-width: calc(100% - 20rem);
        order: 0;
        align-content: flex-start
    }
    .hero_two {
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        width: 50%;
        order: 0
    }
    .heroR {
        padding: 0 1.5rem 0 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        max-width: 78%;
        order: 0
    }
    .heroR div#GameText {
        font-size: 1rem;
        line-height: 1rem;
        border: 1px solid #e3e3e3;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        padding: .5em;
        height: 100%;
        max-height: 95vh;
        max-width: 100%;
        margin-top: 5em
    }
    .lback {
        display: flex;
        align-items: flex-start;
        width: 17%;
        padding: 0;
        margin: -.1rem 1rem 0 0;
        order: 0
    }
    .gotop {
        float: left;
        margin: -4.2rem 0 0 -5rem
    }
    .gotop img {
        width: 1.5rem
    }
    div.gotop a {
        border-bottom: none
    }
    aside {
        display: flex;
        align-items: center;
        background: #f7fbf0;
        padding: .5em;
        margin: 1rem 0 0 0;
        -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
        box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
        order: 1;
        font-size: 1rem;
        line-height: 1.4rem
    }
    .aside {
        display: flex;
        order: 1
    }
    .aside_dia {
        display: flex;
        flex-wrap: wrap;
        width: 45%;
        margin-left: 1rem;
        order: 1
    }
    .aside_pic {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        max-width: 30%;
        order: 1;
        padding: 1.25rem 0 0 1.5rem
    }
    .aside_pic img {
        width: 100%
    }
    article {
        width: 100%
    }
    time {
        font-size: 1rem
    }
    #zeitleiste li p {
        margin: -1.38rem 0 .2em
    }
    #zeitleiste {
        position: relative;
        margin-left: 6em;
        margin-top: 1.1em;
        list-style-type: none
    }
    .flex-i {
        border: none;
        padding: .5em;
        -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
        box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
        background: #f7fbf0
    }
    picture img {
        max-width: 100%;
        width: 80vw
    }
    .citebox {
        max-width: 18rem;
        margin-left: 0
    }
    .zitat {
        font-size: .9rem;
        line-height: 1.2em
    }
    .resp-iframe {
        height: 800px;
        width: 100%
    }
    .liveboard {
        float: left;
        margin-top: .5rem;
        padding-left: 0;
        padding-right: 1em
    }
    div#GameText.game_text {
        font-size: 1rem;
        -webkit-text-size-adjust: 100%;
        border: 1px solid #e3e3e3;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        margin-left: 1rem;
        padding: .5rem;
        overflow: auto;
        height: 50em;
        max-height: 100vh
    }
}
@media screen and (min-width:62em) {
    .header {
        box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
        min-height: 6rem;
        transition: min-height .3s;
        margin-left: auto;
        margin-right: auto
    }
    .header__inner {
        border: none;
        padding: 0 0 1rem 0
    }
    .header__logo {
        height: 32px;
        vertical-align: baseline;
        margin-top: 10px
    }
    .header__title {
        font-size: 1.75em
    }
    .hero {
        padding: 0;
        margin: 0 1rem 0 0;
        display: flex;
        flex-wrap: wrap;
        max-width: 60%;
        width: 60%;
        order: 0
    }
    .hero_two {
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        width: 50%;
        order: 0
    }
    .heroR {
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        max-width: 72%;
        order: 0
    }
    .lback {
        display: flex;
        align-items: flex-start;
        width: 20%;
        padding: 0;
        margin: -.1rem 1rem 0 0;
        order: 0
    }
    .aside {
        display: flex;
        order: 1
    }
    .aside_dia {
        display: flex;
        flex-wrap: wrap;
        width: 45%;
        margin-left: 1rem;
        order: 1
    }
    .aside_dia div#GameText {
        max-width: 100%;
        height: 100%;
        max-height: 50rem;
        font-size: 1em;
        border: 1px solid #e3e3e3;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        padding: 1em;
        margin-top: .4em
    }
    .hero_zl {
        padding: 0;
        margin: 0 1rem 0 0;
        display: flex;
        flex-wrap: wrap;
        width: auto;
        max-width: 60%;
        order: 0;
        align-content: flex-start
    }
    .aside_pic {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        max-width: 38%;
        order: 1;
        padding: 1.25rem 0 0 1.5rem
    }
    .aside_pic img {
        width: 100%
    }
    .nav {
        background-color: #fff;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        border: none;
        top: 3.5rem;
        width: 98%;
        margin-top: .25em
    }
    .nav__list {
        padding: 0;
        margin-left: auto;
        margin-right: auto
    }
    .nav__item {
        display: list-item;
        border-top: 1px solid #e0e0e0;
        text-align: left
    }
    li.nav__item {
        display: inline;
        width: 22%;
        -webkit-text-size-adjust: 100%;
        font-size: 1rem;
        box-sizing: border-box;
        text-align: center;
        line-height: 22px;
        text-transform: uppercase;
        letter-spacing: .05rem;
        padding: 10px .5em 10px .5em;
        margin: 1em 2em 0 0;
        border-top: none
    }
    .nav__item img {
        height: 18px;
        vertical-align: -1px
    }
    .nav a {
        padding: .5em .3em .1em .3em
    }
    #nh {
        width: 4%;
        text-align: left;
        line-height: 24px;
        padding-right: .65em;
        padding-left: .25em
    }
    #nh img {
        height: 24px;
        vertical-align: -4px
    }
    article h3 {
        font-size: 1.15rem;
        line-height: 1.5rem
    }
    article p {
        font-size: 1.15rem;
        line-height: 1.65rem
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 1.15rem;
        line-height: 1.5rem
    }
    time {
        font-size: 1.15rem
    }
    #zeitleiste li p {
        margin: -1.5rem 0 .2em
    }
    #zeitleiste {
        position: relative;
        margin-left: 6.25em;
        margin-top: 1em;
        list-style-type: none
    }
    picture img {
        max-width: 100%;
        width: 60vw
    }
    .danger {
        float: left;
        vertical-align: bottom;
        margin: .5rem .5rem 0 0
    }
    .danger img {
        width: 2.8rem
    }
    .boardTable {
        border-style: solid;
        border-color: #000;
        border-width: 2px;
        box-shadow: 0 0 20px #ddd;
        width: 280px;
        height: 280px
    }
    .liveboard {
        float: left;
        margin-top: .5rem;
        padding-left: 0;
        padding-right: 1em
    }
    .pieceImage {
        width: 34px;
        height: 33px
    }
    .blackSquare, .highlightBlackSquare, .highlightWhiteSquare, .whiteSquare {
        width: 32px;
        height: 32px;
        border-style: solid;
        border-width: 1px
    }
    .highlightBlackSquare, .highlightWhiteSquare {
        border-style: dashed;
        border-width: 1px
    }
    .heroR div#GameText {
        font-size: .95rem;
        border: 1px solid #e3e3e3;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        padding: .5em;
        height: auto;
        max-height: 70vh;
        max-width: 100%;
        margin-top: .4em
    }
    .puzzle_txt {
        font-family: skolar-sans-latin-extended, sans-serif;
        -webkit-text-size-adjust: 100%;
        font-weight: 400;
        padding: .1em .23em .2em .23em;
        margin: .1em 0
    }
    .flex_cont {
        display: flex;
        width: auto;
        max-width: 40%;
        justify-content: flex-end;
        margin-top: 0;
        margin-left: 60%
    }
    .citebox {
        max-width: 20.5rem;
        margin-left: 1rem
    }
    .zitat {
        font-size: 1rem;
        line-height: 1.2em
    }
    .resp-iframe {
        display: flex;
        height: 800px
    }
    div#GameText.game_text {
        font-size: 1rem;
        -webkit-text-size-adjust: 100%;
        border: 1px solid #e3e3e3;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        margin-left: 1rem;
        padding: .5rem;
        overflow: auto;
        height: 50em;
        max-height: 100vh
    }
}
@media screen and (min-width:82em) {
    main {
        box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
        max-width: 80em;
        margin-top: 1rem;
        margin-left: auto;
        margin-right: auto;
        padding: 0
    }
    aside {
        margin-left: 1rem
    }
    .header {
        box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
        max-width: 80em;
        min-height: 6.5rem;
        transition: min-height .3s;
        margin-left: auto;
        margin-right: auto
    }
    .header__inner {
        border: none;
        max-width: 80em;
        margin-left: auto;
        margin-right: auto;
        padding: 0
    }
    .header__logo {
        height: 32px;
        vertical-align: baseline;
        margin-top: 20px
    }
    .header__title {
        font-size: 2rem
    }
    .hero {
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        max-width: 70%;
        order: 0;
        align-content: flex-start
    }
    .hero_full {
        order: 0
    }
    .hero_two {
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        width: 50%;
        order: 0
    }
    .aside {
        display: flex;
        width: 100%;
        margin-left: 1rem;
        order: 1
    }
    .aside_pic {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        max-width: 30%;
        order: 1;
        padding: 1.25rem 0 0 1.5rem
    }
    .aside_pic img {
        width: 100%
    }
    .nav {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        background-color: #fff;
        max-width: 80em;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        border: none;
        top: 4rem;
        margin-top: .25em
    }
    .nav__item {
        display: list-item;
        border-top: 1px solid #e0e0e0;
        text-align: left
    }
    li.nav__item {
        display: inline;
        width: 22%;
        -webkit-text-size-adjust: 100%;
        font-size: 1rem;
        box-sizing: border-box;
        text-align: center;
        line-height: 22px;
        text-transform: uppercase;
        letter-spacing: .12em;
        padding: 10px 1em 10px 1em;
        margin: 1em 2em 0 0;
        border-top: none
    }
    .nav__item img {
        height: 24px;
        vertical-align: -4px
    }
    .nav a {
        padding: .5em 0 .2em .125em
    }
    #nh {
        width: 4%;
        text-align: left;
        line-height: 24px;
        padding: 10px 1em 10px .5em
    }
    #nh img {
        margin-right: .25em
    }
    article h3 {
        font-size: 1.2rem;
        line-height: 1.5rem
    }
    article p {
        font-size: 1.2rem;
        line-height: 1.8rem
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 1.2rem;
        line-height: 1.5rem
    }
    time {
        font-size: 1.2rem
    }
    #zeitleiste li p {
        margin: -1.5rem 0 .2em
    }
    #zeitleiste {
        position: relative;
        margin-left: 7em;
        margin-top: 0;
        list-style-type: none
    }
    picture img {
        max-width: 100%;
        width: 50vw
    }
    .danger {
        float: left;
        vertical-align: bottom;
        margin: .5rem .5rem 0 0
    }
    .danger img {
        width: 3rem
    }
    .liveboard {
        float: left;
        margin-top: .5rem;
        padding-left: 0;
        padding-right: 1em
    }
    .heroR div#GameText {
        font-size: 1rem;
        border: 1px solid #e3e3e3;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        padding: .5em;
        height: auto;
        max-height: 60vh;
        max-width: 100%;
        margin-top: .4em
    }
    .hero div#GameText {
        font-size: 1rem;
        border: 1px solid #e3e3e3;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        padding: .5em;
        height: auto;
        max-height: 60vh;
        max-width: 100%;
        margin-top: .4em
    }
    div#GameBoard {
        max-width: 50%
    }
    .aside_dia {
        display: flex;
        flex-wrap: wrap;
        width: 45%;
        margin-left: 1rem;
        order: 1
    }
    .aside_dia p {
        -webkit-text-size-adjust: 100%;
        font-family: ReallyNo2, serif;
        font-style: italic
    }
    .aside_dia #GameText {
        max-width: 100%;
        height: 100%;
        max-height: 50rem;
        font-size: 1em;
        border: 1px solid #e3e3e3;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        padding: 1em;
        margin-top: .4em
    }
    .aside_dia .liveboard {
        width: 100%
    }
    #GameBlack, #GameDate, #GameEvent, #GameWhite, #numero {
        font-size: 1.2rem;
        -webkit-text-size-adjust: 100%
    }
    .puzzle_txt {
        font-family: skolar-sans-latin-extended, sans-serif;
        -webkit-text-size-adjust: 100%;
        font-weight: 400;
        padding: .1em .23em .2em .23em;
        margin: .1em 0
    }
    .flex_cont {
        display: flex;
        width: auto;
        max-width: 30%;
        justify-content: flex-end;
        margin-top: 0;
        margin-left: 70%
    }
    .citebox {
        max-width: 25rem;
        margin-left: 4rem
    }
}