/* Bereiche für die Button */
#mobile-trigger {display:block; height:70px;}
#mobile-close   {display:block; background:transparent;}

.mobile-logo      {float:left; position:absolute; top:5px; left:10px;}
.mobile-logo img  {margin:0;}

/* sie Button selbst */
#mobile-trigger a.mobile-open, #mobile-close a {
  float:right;
  width:60px; height:60px; margin-top:5px;
  color:#FFF; text-decoration:none; text-align:center; font-size:16px; line-height:60px;
  }

#mobile-trigger a.mobile-open {
  background-color:rgba(250,250,250,0.2); color:#FFF;
  background-repeat:no-repeat;
  background-position:center center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23BED730' d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E%0A");
  }
#mobile-trigger a.mobile-open span {display:none;}

#mobile-close a {
  background-color:rgba(250,250,250,0.2); color:#FFF;
  background-repeat:no-repeat;
  background-position:center center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E%0A");
  }


/* ATF Beginn: wird AUCH NOCH zwecks ATF in helper.css geladen */
  /* Menü Overlayfunktion */
  .w100.mainnav   {display:block;}
  body            {position:relative;}/* falls nicht schon. Damit das Overlay drüber geht */
  /* div mit .w100 .mainnav */
  .mainnav  {
    position: absolute;
    top: 0; bottom: 0; right:0; left:-100%;/* nach links raus -100% */
    width:100%; height:100%;
    z-index:9999;
    overflow: hidden; overflow-y: auto;
/*    background:rgba(0,175,200,1.0);*/
    background:rgba(199,211,9,1.0);
    -webkit-transition: 0.15s ease;
       -moz-transition: 0.15s ease;
         -o-transition: 0.15s ease;
            transition: 0.15s ease;
  }
/* ATF end */

/* wenn geöffnet: x=100% */
.mainnav.open {transform: translate(100%, 0px);}


/*----------------------------------------------*\
  Menü mit Aufklappfunktion
\*----------------------------------------------*/
.sf-menu                              {clear:both; margin:3rem; margin-top:0;}
.sf-menu ul                           {padding:0 0 1rem 2rem;}/* jede UL */
.sf-menu li                           {display:block; padding:4px 0 2px 5px;}
.sf-menu a                            {color:#444; text-decoration:none; font-size:1.6rem;}
.sf-menu li:after, .submenu:before    {content:''; clear:both; display:block;}
.mainnav.open .submenu                {display: none;}/* alle Submenüs verstecken, zu */


/* LI mit Submenü a=links Opener rechts */
.sf-menu a                            {display:inline-block; width:100%;}
.sf-menu li.trigger-sub > a           {width:calc(100% - 40px);}
.opener                               {float:right; width:24px;}
.sf-menu a, .opener                   {min-height:24px;}/* keine absolute Höhe angeben! */


/* Border */
.sf-menu li                           {border-bottom:1px solid rgba(255,255,255,0.7);}
.level-1:last-child, .submenu li:last-child  {border-bottom:none;}
.sf-menu .current > a                 {color:#FFF; font-weight:600;}/* Passt so für alles */

/* Trenner ohne Link */
.sf-menu li.trenner                   {font-size:1.6rem; color:#FFF; font-weight:bold; padding-top:10px;}
/* Nur dickere Trennline im ersten Aufklapper */
.sf-menu ul li.level-2.minitrenner    {border-width:2px; border-color:#FFF;}

/* Icons */
.opener               {background:transparent url("data:image/svg+xml,%3Csvg fill='%23444444' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z'/%3E%3C/svg%3E") no-repeat center center;}
.opener.submenu-open  {background-image: url("data:image/svg+xml,%3Csvg fill='%23444444' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z'/%3E%3C/svg%3E");}
.opener:hover         {cursor:pointer;}


@media only screen and (max-width: 440px) {
.mobile-logo         {top:11px;}
.mobile-logo img     {width:240px; height:48px;}
}


/*
.mainnav.open .trigger-sub > a::after {
  content: '';
  display: block;
  height: 24px;
  width: 24px;
  position: absolute;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 5px;
  background:#0DB3CA url("data:image/svg+xml,%3Csvg fill='%23EEEEEE' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z'/%3E%3C/svg%3E") no-repeat center center;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
*/

/*
.mainnav.open .trigger-sub > a.submenu-open::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
  -moz-transform: translateY(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) rotate(90deg);
  -o-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
}
*/