/* Navigation */


.navi {
  height: 50px;
  background-color: var(--main-color);
}

.nav-logo:after {
  content: '';
  font-size: 11px;
  position: relative;
  margin-left: 5px;
  top: 3px;
}

.navbutton {
  font-size: 0.9em;
  line-height: 1em;
  font-weight: 400;
  height: 1.875em;
  background-color: var(--bg-main-color);
  color: var(--color-white);
}

.navbutton.navstart path {
  fill: var(--white-color);
}


.navbutton.navstart:hover {
  color: var(--white-color);
  background-color: var(--accent1-color);
}

.navbutton.navstart:hover path {
  fill: var(--main-color);
}

.navbutton.navfind:hover {
  background-color: var(--accent2-color);
}


.navbutton.navhowto:hover {
  color: var(--accent1-color);
  background-color: var(--main-color);
}

.navbutton.navhowto:hover path {
  fill: var(--accent1-color);
}

.navbutton svg path {
  fill: var(--color-white);
}



.navshop span.shopitems {
  background-color: var(--alert-color);
  font-size: .6em;
}


.navbuttonsmall {
  font-size: 0.9em;
  line-height: 1em;
  font-weight: 400;
  background-color: var(--bg-main-color);
  color: var(--color-white);
}


.navbuttonsmall.navshop:hover ,
.navbuttonsmall.navuser:hover {
  color: var(--accent1-color);
  background-color: var(--main-color);
}

.navbuttonsmall:hover path {
  fill: var(--accent1-color);
}

.navbuttonsmall.navshop:hover span {
  color: var(--white-color);
}

.navbuttonsmall span.loggedin {
  background-color: var(--alert-color);
}

.loggedin-navi {
  background: var(--accent1-color);
  color: var(--white-color);
  top: 52px;
}

.loggedin-navi ul li {
  color: var(--main-color);
}

.loggedin-navi ul li:hover {
  background-color: var(--main-color);
  color: var(--accent1-color);
}

.navbutton img, .navbuttonsmall img {margin-left: 4px;}



/* Modul: Footernavi */

.footernavi-item {
  border-right: 1px solid var(--main-75-color);
}

.footernavi-links li a {
  line-height: 2.25;
  border-bottom: 1px solid var(--main-color);
}

.footernavi-links li a:hover {
  color: var(--accent1-color);
  border-bottom: 1px solid var(--accent1-color);
}





/* Menu Mobile Hamburger */

@media only screen and (min-width: 150px) and (max-width: 1024px) {

  #menuToggle span {
    background: var(--main-color);
  }

   #menuToggle input:checked ~ span {
    background: var(--main-color);
  }

  #menu {
    background-color: var(--white-color);
    color: var(--main-color);
  }

  #menu ul li {
    border-bottom: 1px solid var(--main-75-color);
  }

  #menu .mobilenav-inner ul li a {
    font-size: 16px;
  }
  #menu .mobilenav-inner ul.user {
    border-bottom: 1px solid var(--main-75-color);
  }

  .mobile-logo:after {
    content: '';
    font-size: 11px;
    margin-left: 5px;
    top: 3px;
    color: var(--white-color);
  }

  .mobile-logo-inner {
    border-bottom: 1px solid var(--main-75-color);
  }

}




/* Tablet Portrait */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

}


/* Tablet Landscape */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

}


/* Mobile Portrait */
@media only screen and (max-width: 767px) {

}



/*Änderungen/Anpasssungen*/
.navi {
  background-color: var(--white-color);
}
.navbutton, .navbutton.navstart:hover, .navbutton.navhowto:hover,.navbuttonsmall, .navbuttonsmall.navshop:hover, .navbuttonsmall.navuser:hover, .navbutton.navfind:hover {
  color: var(--main-color);
  background-color: var(--white-color);
}


.nav-logo {background: url(https://www.fairplaid.org/files/images-dkb/220103_DKB-Spendenplattform_Herzenswunsch.svg)left center no-repeat transparent;
    overflow: hidden;
    text-indent: -200px;
    background-size: 100%;
    width: 400px;
    margin-top: 0px;
    height: 74px;
    margin-left: 3%;
}

.mobile-logo {background: url(https://www.fairplaid.org/files/images-dkb/220613_DKB-Spendenplattform_Herzenswunsch_Logo.svg)left center no-repeat transparent;
    overflow: hidden;
    text-indent: -200px;
    background-size: 98%;
    width: 250px;
    margin-top: 0px;
    height: 76px;
    margin-left: 3%;
}

.loggedin-navi {background-color: var(--lightgrey-color);color: var(--main-color);}
.loggedin-navi ul li:hover {background-color: var(--white-color);color: var(--accent1-color);}


@media only screen and (max-width:900px){
    .footernavi{
        display:block;
    }
    .footernavi-item:first-child,.footernavi-item:nth-child(2) {
      height:310px;
    }
    .footernavi-item{
        width:50%;
        float:left;
        font-size:12px;
        padding:0 1em;
        border:none;
    }
    .footernavi-headline h3{
        font-size:13px !important;
    }
}



@media only screen and (min-width: 768px){
.footernavi .footernavi-item {width: 33% !important;}
}


/*Navi breite*/
.navi {height: 75px;}
#menuToggle {top: 25px;}
.navi-breadcrumb {top: 75px;}


/*Warenkorb zu Spendenkorb*/
.navshop {visibility: hidden;}
/*.navshop:after {content:"Spendenkorb";visibility: visible;}*/
.navshop img {display:block !important;visibility: visible;margin-right: 20px;
    margin-left: -35px;}

/*@media only screen and (max-width: 1024px){
  #menu .mobilenav-inner ul.user + ul > li:first-child:after {content:"Spendenkorb";visibility: visible;color: var(--main-color);font-size: 16px;}
  #menu .mobilenav-inner ul li:nth-child(2):after {content: "Spendenkorb";
    visibility: visible;
    color: var(--main-color);
    font-size: 16px;}
  #menu .mobilenav-inner ul li:nth-child(2) {visibility: hidden;font-size: 0;}
}*/

#menu .mobilenav-inner ul + ul li:first-child a {color: transparent;display: none;visibility: hidden;}

/*Warenkorb Zahl*/
.navshop span.shopitems {visibility: visible!important;left:20px!important;}
@media only screen and (min-width: 1200px) and (max-width: 1325px) {
  .navshop span.shopitems {margin-top: -30px;left: 35px!important;}
}
.navshop:after {content:url(https://www.fairplaid.org/files/img/icon-nav-cart.svg);color:black;width: 20px;height:20px;visibility: visible;margin-right: 10px;position: absolute;}