/*@import "grundstyles.css";*/
/*
    Created on : 10.04.2022, 18:33:09
    Author     : Josef Wassner
*/

/******************************************************/
/*          normalen Navigation                       */
/******************************************************/





/*Desktop first */
.navigation
{
    position:relative;
    font-family: var(--font-base);
    font-weight: 500;
    width: auto;
    min-width: 100px;
    display: flex;
    flex-flow: column;
    margin-left: auto;
    margin-right: auto;
    /*padding-top:.5%;*/
    height: 20px;
    font-size:0.85rem;
    z-index: 1000; 
    
}

.navigation ul
{
    margin: auto;
    height:auto;
    width:auto;
}

.navigation ul li
{
    /*margin:0;*/
    position:relative;
    float:left;
    list-style:none;
    color: var(--fg-navi-hauptmen-col);
    /*background: var(--nav-sub-bk-col);*/
    /*border-radius:30px;*/
    width: auto;
    text-align:left;
    /*border-right:1px solid #ffff50;*/
    transition:all 1500ms;
}

.navigation ul li a
{
    /*margin:0;*/
    text-decoration: none;
    color : var(--fg-navi-sub-men-col);
    width: auto;
    font-weight: 600;
}

.navigation > ul > li > a:hover
{
    text-decoration: none;
    color : var(--fg-navi-hauptmen-hov-col);
     /*background-color:#ffff00; var(--bg-navi-sub-hov-col);*/
}

.navigation ul li:hover
{
    color: var(--fg-navi-hauptmen-hov-col);
    /*background-color:  var(--bg-navi-sub-hov-col);*/
}

/*
.navigation ul li:last-child
{
border-radius:0 5px 5px 0;
border-right:0px
}
*/
.navigation ul li a:first-child
{
    border-radius:5px;
}

.navigation ul li:hover ul
{
    height:auto;
    opacity:1;
}

.navigation ul li:hover ul li:hover a
{
    text-decoration: none;
    color: var(--fg-navi-sub-hov-col);
}

.navigation ul li ul
{
    position:absolute;
    top:22px;
    left:auto;
    transition:all 800ms;
    opacity:0;
    overflow:hidden;
}

.navigation ul li ul li:last-child
{
    /*border-radius:0 0 5px 5px;*/
}

.navigation ul li ul li
{
    width:110px;
    padding-left:5px;
    text-align: left;
    border-right:0px;
    background: var(--bg-navi-sub-men-col);
    color : var(--fg-navi-hauptmen-col);
}

.navigation ul li ul li:hover
{
    width:110px;
    padding-left:5px;
    text-align: left;
    border-right:0px;
    background: var(--bg-navi-sub-hov-col);
    color : var(--fg-navi-hauptmen-col);
}

.navigation ul li ul li:first-child
{
    border-radius:5px 5px 0 0;
}

.navigation .direktlinkbutton
{
    padding: 0px 8px 2px 10px;
    border-radius:0px;
}

.navigation .linkrundmenue
{
    padding: 0px 8px 2px 10px;
    border-radius:10px 0 0 10px ;
}

.navigation .rechtsrundmenue
{
    padding: 0px 8px 2px 10px;
    border-radius:0 10px 10px 0;
}

.MenueBlockErster
{
    /*border-radius:5px 5px 0 0;*/
    width: 100%;
}

.MenueBlockLetzter
{
    border-radius:0 0 5px 5px;
    width: 100%;
}

.MenueBlockNexter
{
    margin:0;
    position:relative;
    float:left;
    list-style:none;
    width: 100%;
    text-align:left;
    transition:all 800ms;
}

.hamburger-char
{
    font-size:2.0rem; 
    font-weight:500; 
    margin-left: -1rem;
    margin-bottom: -1rem;
    display: inline-block;
    transform: scaleX(1.5); 
}
/*Inside ist das mobile Menue*/

.inside{

    padding-left: 10px;
    margin: 0 auto;
    position: absolute;
    z-index: 100; 
    display: none;
    pointer-events: none;
}

#activate-nav:checked ~ .inside {
    display: block;
    z-index: 101; /* Aktiviertes Menü über dem Slider */
    pointer-events: all;
}


/*dies ist das mobile Menue*/
/*Hier wird die Breite Eingestellt!!!!!!!!!!!!!!!*/
.inside .nav {
 
    display: none;
    left: 0.5rem; /* Menü nach links verschieben */
    text-decoration: none;
    font-size:.9rem;
    line-height: 1.5rem;
    font-weight: 600;
    list-style-type: none;
    /*Hintergrund des mobilen Menues*/
    background: var(--bg-mobil-plane-col);
    opacity: 1;
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 2px;
    padding-right:10px;
    width: 130px;
}

.inside .nav ul li
{
    padding-left: 5px;
    /*color:  var(--fg-MobilSubMenueColor);*/
    text-decoration: none;
    list-style-type: none;
}

/*mobile Einzel-Link hover*/
.inside .nav ul li a:hover
{
    Color:var(--fg-mobil-hover-col);
    background: var(--bg-mobil-hover-col) ;
}

.inside .nav a
{
    text-decoration: none;
}

.check_box{
    visibility: hidden;
}

input[type=checkbox]:checked ~ .inside .nav
{
    display: block;
    /*position: fixed;*/
    color:var(--Hamburger-on-col);
    background-color: var(--br-MobilNav-col);
}


input[type=checkbox] ~ label span{
    color: var(--HamburgerMemue-off-col);
}

input[type=checkbox]:checked ~ label span {
    color: var(--HamburgerMemue-on-col)
}

.disable-all{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.nav .direktlinkbuttonmobile
{
    text-decoration: none;
    list-style-type: none;
}

.nav .mittelmenuemobile
{
    text-decoration: none;
    /*color: var(--fg-MobilSubMenueColor);*/
    list-style-type: none;
}

.nav .linkrundmenuemobile
{
    text-decoration: none;
    /*color:  var(--fg-MobilSubMenueColor);*/
    list-style-type: none;
}

.nav .rechtsrundmenuemobile
{
    text-decoration: none;
    /*color:  var(--fg-MobilSubMenueColor); */       
    list-style-type: none;
}

.MobileMenueLinkColor
{
    color: var(--fg-MobilLinkColor);
}

/*mobile die Submenueueberschrift*/
.MobileSubMenueLink
{
    width: auto;
    height: auto;
    margin: 10px;
    padding: 1px 5px 0px 5px;
    border-radius:0;
    color: var(--fg-mobil-hauptmen-sub-col);
    
    /*Hintergrund nur für den Eintragstext des Submenues */
    /*background: var(--bg-mobil-menueplane-col);*/
}

/*############################################################################*/
/* Normale Desktop Navigation aktivieren                                      */
/* Große Bildschirme UND feiner Zeiger (z.B. Maus/Trackpad)                   */
/*############################################################################*/
@media (min-width: 1024px){
    /* Normale Navigation einschalten */
    .navigation {
        display: flex;
    }

    /* Mobile Navigation ausblenden */
    .check_box + label {
        display: none;
        visibility: hidden;
    }

    .inside .nav {
        display: none;
        visibility: hidden;
        opacity: 0;
    }
}

/*############################################################################*/
/* Mobile Navigation aktivieren                                               */
/* Bildschirm schmaler ODER coarse Eingabe (Touch)                             */
/*############################################################################*/
@media (max-width: 1023px) {
    /* Normale Navigation ausblenden */
    .navigation {
        display: none;
    }

    /* Mobile Navigation einblenden */
    .check_box + label {
        visibility: visible;
        padding-left: 10px;
    }

    .inside .nav {
        display: block;
    }

    .Seitenlayout {
        margin-top: 0.5rem;
    }
}

/*############################################################################*/
/* Zusätzliche Optimierungen für sehr kleine Bildschirme                      */
/*############################################################################*/
@media (max-width: 600px) {
    .inside .nav {
        font-size: .8rem;
        padding-left: .5rem;
        border-radius: .7rem;
    }
}

@media (max-width: 550px) {
    .hamburger-char {
        font-size: 1.8rem;
        font-weight: 500;
    }
}
@media (max-width: 435px) {
    .hamburger-char {
        font-size: 1.5rem;
        font-weight: 500;
     
    }
}