@media (min-width: 960px) {

    main {
        margin-top: 250px;
    }

    nav {
        display: block;
    }

    .header {
        border-bottom: none;
    }

    nav.main {
        display: block;
        border-top: 10px solid var(--color-green);
    }

    nav.top {
        display: block;
    }

    header .content {
        position: relative;
    }

    nav.top {
        position: absolute;
        top: 15px;
        right: 0;
    }

    nav.top ul {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }

    nav.top ul li {
        padding-left: 20px;
    }

    nav.top ul li a {
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    nav.top ul li a i {
        font-size: 20px;
    }

    nav.main ul {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    nav.main ul li {
        display: flex;
        position: relative;
        width: 20%;
        padding-bottom: 15px;
        padding-top: 15px;
    }

    nav.main ul li.medienanstalt,
    nav.hover .content ul.medienanstalt {
        width: 19%;
    }

    nav.main ul li.medienaufsicht,
    nav.hover .content ul.medienaufsicht {
        width: 23%;
    }

    nav.main ul li.medienkompetenz,
    nav.hover .content ul.medienkompetenz {
        width: 24%;
    }

    nav.main ul li.mediatop,
    nav.hover .content ul.mediatop {
        width: 19%;
    }

    nav.main ul li.mediathek,
    nav.hover .content ul.mediathek {
        width: 15%;
    }

    .sidr ul.mobile-main-nav > li:nth-child(1) {
        width: calc(19% - 30px);
    }

    .sidr ul.mobile-main-nav > li:nth-child(2) {
        width: calc(23% - 30px);
    }

    .sidr ul.mobile-main-nav > li:nth-child(3) {
        width: calc(24% - 30px);
    }

    .sidr ul.mobile-main-nav > li:nth-child(4) {
        width: calc(19% - 30px);
    }

    .sidr ul.mobile-main-nav > li:nth-child(5) {
        width: calc(15% - 30px);
    }

    nav.main ul li:before {
        content: '';
        display: block;
        position: absolute;
        width: 10px;
        height: 10px;
        top: -10px;
        left: calc((100% - 30px) / 2);
        left: 30px;
        background-color: var(--color-link);
        border-left: 10px solid white;
        border-right: 10px solid white;
        opacity: 0;
        -webkit-transition: opacity 0.6s 0s ease-in-out;
        -moz-transition: opacity 0.6s 0s ease-in-out;
        -o-transition: opacity 0.6s 0s ease-in-out;
        transition: opacity 0.6s 0s ease-in-out;
    }

    nav.main ul li.selected:before, nav.main ul li:hover:before, .sidr .mobile-main-nav > li.selected:before ,.sidr .mobile-main-nav > li:hover:before {
        opacity: 1;
    }

    nav.main ul li a {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    nav.main ul li a span {
        display: block;
    }

    nav.main ul li a span.title {
        font-family: var(--global-font-title), sans-serif;
        font-weight: 500;
        color: var(--color-link);
        font-size: 20px;
        margin-bottom: 3px;
    }

    nav.main ul li a span.subtitle {
        font-weight: 400;
        color: var(--color-mid-grey);
        font-size: 16px;
        font-family: var(--global-font-thin), sans-serif;
    }

    nav.main ul li.mediathek {
    }

    nav.main ul li.mediathek a {
        padding-left: 50px;
    }

    nav.main ul li.mediathek a span.title {
        position: relative;
    }

    nav.main ul li.mediathek i {
        display: block;
        position: absolute;
        font-size: 24px;
        width: 40px;
        height: 40px;
        text-align: center;
        color: white;
        background-color: var(--color-dark-blue);
        padding-top: 8px;
        transition: all .5s;
        z-index: -100;
        border-radius: 50%;
        top: 2px;
        left: -45px;
        padding-left: 4px;
    }

    nav.main ul li.mediathek:hover i {
        border-radius: 0;
        background-color: var(--color-green);
    }

    .two-columns {
        column-count: 2;
        column-gap: 30px;
    }

    .sidr ul.mobile-main-nav > li {
        width: calc(20% - 30px);
        padding-top: 5px;
        position: relative;
    }
    .sidr div.menu-border {
        height: 10px;
        background-color: #FFFFFF;
        position: absolute;
        top: 141px;
        width: 100%;
    }
    .sidr .mobile-main-nav > li:before {
        content: '';
        display: block;
        position: absolute;
        width: 10px;
        height: 10px;
        top: -25px;
        left: calc(((100% - 30px) / 2) - 20px);
        background-color: var(--color-link);
        border-left: 10px solid var(--color-green);
        border-right: 10px solid var(--color-green);
        opacity: 0;
        -webkit-transition: opacity 0.6s 0s ease-in-out;
        -moz-transition: opacity 0.6s 0s ease-in-out;
        -o-transition: opacity 0.6s 0s ease-in-out;
        transition: opacity 0.6s 0s ease-in-out;
    }
    .sidr .mobile-main-nav > li:hover:before,
    .sidr .mobile-main-nav > li.selected:before {
       opacity: 1;
    }
    .sidr ul.mobile-main-nav {
        margin: 45px 0 20px -30px;
    }
    .sidr .close-menu {
        top: 71px;
    }
    .sidr ul.mobile-main-nav > li > a {
        width: 100%;
        margin-left: 0px;
    }
    .sidr ul.mobile-main-nav > li a span.subtitle {
        font-weight: 400;
        color: rgb(255, 255, 255);
        font-size: 15px;
        font-family: var(--global-font-thin), sans-serif;
        width: 100%;
        text-align: left;
    }
    .sidr ul.mobile-main-nav > li a span.title {
        font-family: var(--global-font-title), sans-serif;
        font-weight: 500;
        color: var(--color-link);
        font-size: 20px;
        margin-bottom: 5px;
        width: 100%;
        text-align: left;
    }

    .sidr #searchform {
        margin: 48px 0 0 0;
    }

    .swiper-slide .overlay {
        width: 50%;
        bottom: 0px;
        background-color: rgba(0,0,0,0.3);
        position: absolute;
    }

    .swiper-slide .overlay .overlay-content {
        line-height: 125%;
        padding: 20px;
    }

    .swiper-slide .overlay .overlay-content h3 {
        font-size: 22px;
    }

    .swiper-slide .overlay .overlay-content p.description {
        display: block;
    }

    .swiper-slide .overlay .overlay-content p.description_mobile {
        display: none;
    }

    .swiper-slide.alternate .overlay {
        padding-top: 30px;
        display: block;
        height: 100%;
        background-color: var(--color-green);
    }
    .swiper-slide .overlay .overlay-content a.button {
        margin-bottom: 0;
        background-color: var(--color-green);
        color: #FFFFFF;
    }
    .swiper-slide.alternate .overlay .button {
        color: var(--color-green);
        background-color: #FFFFFF;

    }
    .swiper-slide.alternate img {
        display: block;
        width: 50%;
        margin-left: 0 !important;
    }

    .swiper-slide .source {
        right: auto;
        top: auto;
        left: 0;
        bottom: 0;
        border-top-right-radius: 15px;
        z-index: 999;
    }

    .form .input_wrapper {
        width: 100%;
    }

    .form .row {
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
    }

    .form .item.row.form_text {
        display: block;
    }

    .form .label_wrapper {
        width: 40%;
    }

    .form .input_wrapper {
        width: 60%;
    }

    .form .label_wrapper label {
        width: 90%;
        display: block;
        border-bottom: 1px dotted rgb(220, 220, 220);
    }

    .form .label_wrapper label:empty {
        border-bottom: none;
    }

    div.video-list div.list div.item {
        width: calc(25% - 30px);
    }
    ul.grid li.item {
        width: calc(25% - 30px);
    }
    .item.twothirds div.video-list div.list div.item,
    .related_acts div.video-list div.list div.item {
        width: calc(50% - 30px);
    }
    div.audio-list div.list div.item {
        width: calc(25% - 30px);
    }
    .grid .item.third {
        width: calc(33.33% - 30px);
    }
    .grid .item.two-thirds {
        width: calc(66.66% - 30px);
    }
/*
    nav.main:hover + nav.hover {
        display: block;
    }

    nav.hover:hover {
        display: block;
    }

 */

    nav.hover {
        background-color: var(--color-dark-green);
        color: white;
        position: absolute;
        left: 0;
        width: 100%;
        font-family: var(--global-font-thin);
        display: none;
        z-index: 900;
    }

    nav.hover.visible {
        display: block;
    }

    nav.hover .content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    nav.hover .content ul {
        width: 20%;
        padding: 20px 0;
    }

    nav.hover .content ul:hover,
    nav.hover .content li.selected a,
    nav.hover .content ul.focus {
        font-weight: 400;
    }

    nav.hover .content ul li {
        margin-bottom: 5px;
    }

    nav.hover a {
        color: white;
        position: relative;
        margin-left: 20px;
        display: block;
        color: rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid transparent;
        display: inline-block;
    }

    nav.hover a:before {
        content: '\f105';
        display: block;
        position: absolute;
        left: -20px;
        top: 2px;
        font-family: 'Font Awesome 6 Pro';
        font-weight: 200;
        color: rgba(255, 255, 255, 0.5)
    }

    nav.hover ul:hover li a,
    nav.hover ul li.selected a,
    nav.hover ul.focus li a {
        color: rgba(255, 255, 255, 1);
    }

    nav.hover ul:hover li a:before,
    nav.hover ul li.selected a:before,
    nav.hover ul.focus li a:before {
        content: '\f32b';
        font-weight: 200;
        color: var(--color-link);
    }

    nav.hover ul li.selected a:before,
    nav.hover ul:hover li a:hover:before {
        font-weight: 600;
    }

    nav.hover ul li.selected a,
    nav.hover ul:hover li a:hover {
        border-bottom: 1px solid white;
    }

    .compass_video_list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
    }

    .compass_video_list .video {
        width: calc(50% - 15px);
        margin-bottom: 20px;
    }

    .compass_video_list .video img {
        margin-bottom: 10px;
    }

    div.compass_video_list div.video:first-child {
        width: 100%;
    }

    div.simple-list .grid .item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid var(--color-super-light-grey);
    }

    div.simple-list .grid .item figure {
        width: 250px;
    }

    div.simple-list .grid .item div.text {
        width: calc(100% - 280px);
    }

    section.mediatop .headline {
        max-width: 66.66%;
    }

    .mediatop-service .image-wrapper.cnt {
        float: right;
        width: 250px;
    }

    .mediatop-internship-quote .gallery .item {
        width: calc(25% - 15px);
    }

    .mediatop-internship-quote .image-wrapper.cnt {
        width: 250px;
        float: right;
        margin: 0 0 15px 15px;
    }

    img.mediatop-logo {
        margin-top: -120px;
    }
    
    /*******************************************/
    /* programm (list)
    /*******************************************/
    .program-serie-list-view .grid .item {
        flex-direction: row;
    }
    .program-serie-list-view .grid .item .info {
        margin-left: auto;
        margin-top: auto;
        width: 200px;
    }
    .program-serie-list-view .grid .item .text {
        width: calc(100% - 200px);
    }
    .program-serie-list-view .grid .item .info span {
        display: block;
        width: 100%;
    }

    /* z.B. https://medienanstalt-mv.de/medienkompetenz/medienkompetenz-preis-mv/ */
    video.video-portrait {
        width: 50%;
        float: right;
        margin-left: 20px;
    }

}