/*
Theme Name: FGR Basic Theme Menu
Theme URI: http://fgr.design/
Description: Das FGR Basic-Theme wurde eigens für FGR Kunden entwickelt. Es bedarf keinerlei zusätzliche Lizenz, jedoch darf die Gestaltung die durch die FGR vorgegeben wurde nicht verändert werden - es erlischt umgehend das Nutzungsrecht. Inhaltliche Änderungen dürfen selbstverständlich getätigt werden. Im Zweifelsfall steht die <a href="http://fgrepublik.com/">Freie Gestalterische Republik</a> jederzeit bereit, um Fragen zu beantworten.
Author: der Freien Gestalterischen Republik
Author URI: http://fgr.design/
Version: 1.3.4
License: Keine Nutzung ohne vorherige Absprache erlaubt.
License URI: license.txt
Tags: FGR, basic, Widgetfähig, Menü, Responsive
*/

/* #####################################################

1. Header 
2. Main Menu
3. Logo
4. Mobile
5. Footer Nav
6. Search
7. TV Now
8. Barrierefreiheit Menu

################## 1. Header ##################*/

header {
    position: fixed;
    z-index: 111;
    left: 0;
    right: 0;
    background-color: var(--darkColor);
}

header .row {
    padding-top: 25px;
    padding-bottom: 25px;
}

@media screen and (max-width:991px) {
    header .row {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

header .row>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .row>div {
    position: static;
}

@media screen and (min-width:768px) {
    .nav-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

@media screen and (max-width:991px) {
    header .row>div {
        min-height: 60px;
    }
}

@media screen and (max-width:767px) {
    .nav-wrap {
        transform: translateX(-100%);
        pointer-events: none;
        position: absolute;
        width: calc(100vw - 0px);
        top: 70px;
        left: 0px;
        height: calc(var(--unit-100vh) - 70px);
        min-height: calc(var(--unit-100vh) - 70px);
        background-color: var(--darkColor);
        transition: 0.85s all;
        z-index: -1;
        flex-wrap: wrap;
        overflow: scroll;
        padding-bottom: 0px !important;
        border-top-left-radius: var(--radius);
        border-top-right-radius: var(--radius);
    }

    .nav-wrap.opened {
        opacity: 1;
        transform: translateX(0%);
        pointer-events: all;
    }

    .mobile-additionals {
        margin-top: 40px;
        padding: 0 20px;
    }

    .mobile-additionals>div {
        margin-top: 30px;
        columns: 2;
    }

    .mobile-additionals li {
        display: block;
        margin-right: 5px;
        break-inside: avoid-column;
        list-style-type: none;
    }

    .mobile-additionals .menu>li:first-of-type {
        display: none;
    }

    .mobile-additionals li img,
    .mobile-additionals li svg {
        height: 22.5px;
        width: 22.5px;
        object-fit: contain;
    }

    .mobile-additionals li svg path {
        fill: var(--lightColor);
    }
}

@media screen and (min-width:768px) {

    #contentwrap.side-opened-nav::after,
    #contentwrap.side-opened-search::after,
    #contentwrap.side-opened-tvnow::after {
        opacity: 1;
        pointer-events: all;
    }
}

#contentwrap::after {
    transition: 1s all;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: var(--unit-100vh);
    content: "";
    background-color: rgba(0, 0, 0, 0) !important;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.16));
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 11;
}

/*################## 2. Main Menu ##################*/

header .menu-hauptnavigation-container .menu li {
    display: inline-flex;
}

header .menu-hauptnavigation-container .menu>li {
    align-items: center;
    position: relative;
}

header .menu-hauptnavigation-container .menu a {
    font: normal 700 var(--smallFS) 'Akrobat', sans-serif;
    color: var(--lightColor);
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.66px;
}

header .menu-hauptnavigation-container .menu .cta-menu-item a {
    color: var(--lightColor);
    position: relative;
}

header .menu-hauptnavigation-container .menu .cta-menu-item:hover a:after {
    opacity: 0;
}

header .menu-hauptnavigation-container .menu .cta-menu-item a:after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: var(--lightColor);
    position: absolute;
    left: 0;
    bottom: -2px;
    transition: 0.35s all;
}

header .menu-hauptnavigation-container .menu li:hover a {
    color: var(--primaryColor) !important;
}

header .menu-hauptnavigation-container .menu li:hover a:after {
    background-color: var(--primaryColor);
}

@media screen and (min-width:768px) {

    header .menu-hauptnavigation-container .menu>li:after {
        content: "";
        width: 100%;
        height: calc(100% + 10px);
        position: absolute;
        left: 0;
        top: 0;
    }

    header .menu-hauptnavigation-container .menu li {
        padding: 0 17.5px;
        position: relative;
    }

    header .menu-hauptnavigation-container .menu .current-menu-item a {
        color: var(--primaryColor);
    }

    header .menu-hauptnavigation-container .menu .current-menu-item a:before {
        content: "";
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: var(--primaryColor);
        left: -15px;
        top: 11px;
    }
}

@media screen and (min-width:768px) and (max-width:991px) {
    header .menu-hauptnavigation-container .menu .current-menu-item a:before {
        top: 7px;
        left: -13px;
    }

    header .menu-hauptnavigation-container .menu li {
        padding: 0 13.5px;
    }
}

@media screen and (max-width:767px) {
    header .menu-hauptnavigation-container .menu li {
        display: block;
        margin: 12.5px 7.5px;
        padding: 0px;
        height: auto;
        position: relative;
        margin: 12.5px 0;
    }

    header .menu-hauptnavigation-container .menu li a {
        font-size: var(--quinaryHead);
    }

    header .menu-hauptnavigation-container .menu>li>a {
        color: var(--lightColor);
    }

    header .menu-hauptnavigation-container .menu li ul {
        display: none;
        padding: 5px 0;
        transition: none;
    }

    header .menu-hauptnavigation-container .menu li ul li a {
        color: var(--darkColor);
        display: inline-block;
    }

    header .menu-hauptnavigation-container .menu li ul li {
        margin: 8.5px 0;
        position: relative;
    }

    header .menu-hauptnavigation-container .menu li.btn {
        display: none;
    }

    header .menu-hauptnavigation-container .menu li:first-of-type {
        display: block;
    }

    header .menu-hauptnavigation-container .menu {
        padding: 15px 20px 0 20px;
    }
}

/*################## 3. Logo ##################*/

.logo {
    width: 160px;
    height: auto !important;
    line-height: 0;
}

.logo path,
.logo rect {
    fill: var(--lightColor);
}

.logo:hover path,
.logo:hover rect {
    fill: var(--primaryColor);
}

footer .logo:hover path,
footer .logo:hover rect {
    fill: var(--lightColor);
}

.logo-wrap {
    position: relative;
}

@media screen and (max-width:991px) {
    .logo {
        width: 125px;
    }
}

/*################## 4. Mobile ##################*/

@media screen and (max-width:767px) {
    body .nav-mobile-wrap {
        display: flex !important;
        align-items: center;
    }

    #navbtn {
        padding: 9.5px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primaryColor);
        border-radius: 50%;
        width: 40px;
        appearance: none;
        border: none;
        -webkit-appearance: none;
    }

    body .nav-mobile-wrap span {
        display: none;
    }

    body .nav-mobile-wrap {
        flex-direction: row-reverse;
        margin-right: -5px;
        margin-left: auto;
    }
}

/*Hamburger*/

#hamburger-icon {
    width: 20px;
    height: 21px;
    position: relative;
    display: block;
    transform: translateY(3px);
    transition: 0.25s all;
}

#hamburger-icon.active {
    transform: translateY(4px);
}

@media screen and (max-width:767px) {
    #hamburger-icon {
        transform: translateY(2px);
    }

    #hamburger-icon.active {
        transform: translateY(3.5px);
    }
}

#hamburger-icon .line {
    display: block;
    background: var(--darkColor);
    width: 20px;
    height: 2px;
    position: absolute;
    left: 0;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}

#hamburger-icon .line.line-1 {
    top: 0;
}

#hamburger-icon .line.line-2 {
    top: 6px;
}

#hamburger-icon .line.line-2:after {
    display: block;
    content: "MENÜ";
    font: normal 800 9px 'Akrobat', sans-serif !important;
    color: var(--darkColor);
    margin-top: 5px;
}

#hamburger-icon .line.line-3 {
    top: 12px;
}

#hamburger-icon.active .line-1 {
    transform: translateY(6px) translateX(0) rotate(45deg);
}

#hamburger-icon.active .line-2,
#hamburger-icon:not(.active) .line-3 {
    opacity: 0;
}

#hamburger-icon.active .line-3 {
    transform: translateY(-6px) translateX(0) rotate(-45deg);
}

/*################## 5. Footer Nav ##################*/

#footer-nav>div>ul {
    columns: 3;
    margin: -5px 0;
}

#footer-nav .menu>li {
    break-inside: avoid-column;
}

.menu-footernavigation-container .menu li {
    list-style-type: none;
}

.menu-footernavigation-container .menu li a {
    color: var(--primaryColor);
    padding: 8.5px 0;
    align-items: center;
    display: inline-flex;
    font: normal 800 var(--quinaryHead) 'Akrobat', sans-serif;
}

.menu-footernavigation-container .menu li a:hover {
    color: var(--primaryColor);
}

.menu-footernavigation-container .menu>li>ul>li>a {
    font: normal 700 var(--smallFS) 'Akrobat', sans-serif;
    color: var(--lightColor);
    text-transform: uppercase;
    letter-spacing: 0.66px;
}

.menu-footernavigation-container .menu>li>ul>li>a:before {
    content: '•';
    color: var(--darkGray);
    transform: translateY(-1.5px);
    display: inline-block;
    margin-right: 6.5px;
}

.contrast .menu-footernavigation-container .menu>li>ul>li>a:before{
    color: var(--lightColor);
}

@media screen and (max-width:1199px) and (min-width: 992px) {
    #footer-nav>div>ul {
        columns: 2;
    }

    #footer-top .row>div {
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }
}

@media screen and (max-width:767px) {
    #footer-nav>div>ul {
        columns: 2;
    }

    .menu-footernavigation-container .menu li a {
        padding: 5px 0;
    }
}

/*Meta Nav*/
.menu-metanavigation-container li {
    list-style-type: none;
    display: inline-block;
}

.menu-metanavigation-container li:not(:first-of-type):before {
    content: "· ";
}

.contrast .menu-metanavigation-container li:not(:first-of-type):before{
    color: var(--lightColor);
}

.menu-metanavigation-container li a {
    color: var(--darkGray);
    margin: 0 0px 0px 0px;
    text-transform: none;
    color: var(--darkGray);
    font: normal 400 var(--smallFS) 'Akrobat', sans-serif;
}

.contrast .menu-metanavigation-container li a {
    color: var(--lightColor);
}

.menu-metanavigation-container li a:hover,
.contrast .menu-metanavigation-container li a:hover {
    color: var(--primaryColor);
}

/*################## 6. Search ##################*/

.trigger-search {
    color: var(--lightColor);
    font: normal 700 var(--smallFS) 'Akrobat', sans-serif !important;
    letter-spacing: 0.66px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    border:none;
    appearance: none;
    background-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
}

.trigger-search.active,
.trigger-search:hover {
    color: var(--primaryColor) !important;
}

.trigger-search:hover span,
.trigger-search.active span {

    background-color: var(--primaryColor) !important;
}

.trigger-search.active span svg:first-of-type,
.trigger-search:not(.active) span svg:last-of-type {
    opacity: 0;
}

.trigger-search svg {
    width: 24px;
    height: 24px;
    object-fit: contain;
    position: absolute;
    transition: 0.5s all;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    pointer-events: none;
}

@media screen and (min-width:768px) {
    .trigger-search:before {
        content: "Filmsuche";
        padding-right: 15px;
    }
}

.trigger-search span{
    background-color: var(--lightColor);
}

.trigger-search span:not(.sr-only) {
    background-color: var(--lightColor);
   
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--lightColor);
    border-radius: 50%;
}

@media screen and (max-width:991px) {
    .trigger-search span:not(.sr-only) {
        width: 40px;
        height: 40px;
    }

    .trigger-search svg {
        width: 18px;
        height: 18px;
    }
}

.trigger-search svg path {
    fill: var(--darkColor)
}

#search-wrap {
    position: fixed;
    width: 100vw;
    padding: 22.5px 20px 20px 20px;
    max-width: 50%;
    right: 0;
    z-index: 11;
    transform: translateX(100%);
    top: 110px;
    height: calc(var(--unit-100vh) - 110px);
    background-color: var(--primaryColor);
    transition: 0.85s all;
    overflow: scroll;
}

@media screen and (max-width:991px) {
    #search-wrap {
        top: 70px;
        height: calc(var(--unit-100vh) - 70px);
    }
  
}

@media screen and (max-width:767px) {
    #search-wrap {
        max-width: 100%;
    }
    .trigger-search{
        border-radius: 50%;
        padding: 0;
        margin-left: 15px;
    }
}

#search-wrap.opened {
    transform: translateX(0%);
}

#search-wrap h2.search-title {
    font-weight: 800;
}

#search-wrap .card {
    margin-bottom: 10px;
}

#search-wrap p {
    font-size: var(--smallFS) !important;
}

.search-result-item {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
}

.search-result-item>div:last-of-type {
    flex: 0 0 calc(100% - 420px - 20px);
    margin-left: 20px;
}

.search-result-item>div:first-of-type {
    flex: 0 0 calc(420px);
}

@media screen and (max-width:1399px) {
    .search-result-item>div:last-of-type {
        flex: 0 0 calc(100% - 0px);
        margin-left: 0px;
    }
}

@media screen and (max-width:991px) {
    .search-result-item>div:first-of-type {
        flex: 0 0 calc(100%);
    }
}

/*################## 7. TV Now ##################*/

.menu a[href="#jetzt_im_tv"] {
    position: relative;
}

.menu a[href="#jetzt_im_tv"].active {
    color: var(--primaryColor) !important;
}

.menu a[href="#jetzt_im_tv"].active:after {
    display: none;
}

.menu a[href="#jetzt_im_tv"].active:before {
    content: "×";
    position: absolute;
    right: -14px;
    top: 3px;
    font-size: 1.0625rem;
    opacity: 0;
    pointer-events: none;
    transition: 0.35s all;
}

.menu a[href="#jetzt_im_tv"].active:before {
    opacity: 1;
    pointer-events: all;
}

@media screen and (max-width:991px) {
    .menu a[href="#jetzt_im_tv"].active:before {
        top: -0px;
        font-size: 0.9375rem;
        right: -12.5px;
    }
}

@media screen and (max-width:767px) {
    .menu a[href="#jetzt_im_tv"].active:before {
        display: none
    }
}

#tvnow-wrap {
    position: fixed;
    width: 100vw;
    max-width: 50%;
    right: 0;
    z-index: 11;
    transform: translateY(calc(100% + 110px));
    top: 110px;
    height: calc(var(--unit-100vh) - 110px);
    transition: 0.85s all;
    overflow: scroll;
}

#tvnow-wrap.opened {
    transform: translateY(0%);
}

#tvnow-wrap .now-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    padding: 20px;
}

#tvnow-wrap .now-head .card {
    flex: 0 0 100%;
    margin-top: 15px;
}

#tvnow-wrap span.weekday:before {
    content: attr(data-weekday);
}

#tvnow-wrap .now-body {
    padding: 20px 20px 0px 20px;
}

#tvnow-wrap .now-body .card {
    margin: 20px 0;
}

@media screen and (max-width:991px) {
    #tvnow-wrap {
        top: 70px;
        height: calc(var(--unit-100vh) - 70px);
    }
}

@media screen and (max-width:767px) {
    #tvnow-wrap {
        max-width: 100%;
    }

    #tvnow-wrap span.weekday:before {
        content: attr(data-weekdayshortener);
    }
}

/*################## 8. Barrierefreiheit Menü ##################*/
.btn-toggle-accessibility.btn-accessibility.focus-visible {
    z-index: 12 !important;
}

.btn-toggle-accessibility.btn-accessibility {
   background-color: rgba(0, 0, 0, 0) !important;
   margin-bottom: 0px !important;
   transform: translateX(2px);
}

.accessibility-wrap {
    position: absolute !important;
    right:-5px;
    top:55px;
    background-color: var(--primaryColor);
    z-index: 11;
    padding: 2px  2px  0px  2px;
    display: none;
}
.accessibility-wrap:before{
    content: "";
    top: 62.5px;
    position: fixed;
    margin-left: 10px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: var(--primaryColor) transparent transparent transparent;
    transform: rotate(180deg);
}

.accessibility-wrap .focus-visible {
    z-index: 12 !important;
}

.btn-accessibility {
    display: block;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background-color: var(--primaryColor);
    font: normal 600 0.5rem 'Akrobat', sans-serif !important;
    color: var(--darkColor);
    width: 40px;
    text-align: center;
    margin-bottom: 2px;
    transition: 0.25s all;
    letter-spacing: -0.1px;
}

.btn-accessibility.btn-toggle-accessibility svg {
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto 2px auto;
}

.btn-accessibility:not(.btn-toggle-accessibility) svg {
    width: 25px;
    height: 25px;
    display: block;
    margin: 0 auto 2px auto;
}

.btn-accessibility svg path{
    fill:var(--darkColor);
}

.btn-toggle-accessibility.btn-accessibility svg path{
    fill:var(--lightColor);
}

body.contrast .btn-contrast svg path,
 body.visualtab .btn-visualtab svg path, 
.btn-toggle-accessibility.active svg path,
.btn-toggle-accessibility:hover svg path{
    fill:var(--primaryColor) !important;
}

body.contrast .btn-contrast,
body.visualtab .btn-visualtab,
.active.btn-toggle-accessibility
{  background-color: var(--darkColor); 
    color: var(--primaryColor);
}

@media screen and (min-width:992px) {
    .btn-accessibility {
        font: normal 600 0.75rem 'Akrobat', sans-serif !important;
        line-height: 1.25 !important;
        width: 70px !important;
        height: 70px;
        padding: 2px 0px;
        margin-bottom: 3px;
        letter-spacing: -0.5px; 
    }

    .accessibility-wrap:before{
        top: 100px;
        position: fixed;
        margin-left: 20px;
        border-width: 15px 15px 0 15px;
    }

    .btn-toggle-accessibility.btn-accessibility {
        width: 60px !important;
        height: 60px;
        transform: translateX(-2px);
    }

    .btn-toggle-accessibility.btn-accessibility svg{
        width: 40px;
        height: 40px;
    }

    .btn-accessibility:not(.btn-toggle-accessibility) svg {
        width: 40px;
        height: 40px;
    }

    .accessibility-wrap{    
      top: 85px;
       right: -5px;
       padding: 3px  3px  0px  3px;
    }
}