diff --git a/.gitignore b/.gitignore
index b5b25cf..dc3c123 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 ._.DS_Store
 /._*
 ._*
+fonts/icons/fontello
diff --git a/css/area_content.less b/css/area_content.less
index ad90afc..4e7307f 100755
--- a/css/area_content.less
+++ b/css/area_content.less
@@ -8,5 +8,29 @@
 .content .row {
     > .col-xs-12 {
         box-shadow: @box-shadow;
+        #dokuwiki__content{
+            position: relative;
+            z-index: 10;
+            &::before{
+                content: "";
+                background-color: @background_page-header;
+                border-bottom: 1px solid @color-border;
+                position: absolute;
+                top: 0; left: 0;
+                height: 3rem; width: 100%;
+                z-index: -1;
+            }
+            #meta-box{
+                display: inline-block;
+                height: 3rem;
+                max-width: 40%;
+                float: right;
+                border: 1px solid transparent;
+            }
+
+            #plugin__highlightparent{
+                display: block;
+            }
+        }
     }
 }
diff --git a/css/area_footer.less b/css/area_footer.less
index 8a14a1a..6ad4f7a 100755
--- a/css/area_footer.less
+++ b/css/area_footer.less
@@ -42,13 +42,23 @@
     #dokuwiki__footer {
         .col-xs-12 {
             float: right;
-            width: 73%;
+            width: 100%;
         }
 
         .main-footer {
             padding: @margin-default 0;
         }
     }
+
+    .showSidebar {
+        #dokuwiki__footer {
+             .col-xs-12 {
+                 width: 73%;
+            }
+        }
+    }
+
+
 }
 
 
diff --git a/css/area_main-sidebar.less b/css/area_main-sidebar.less
index f661324..675e595 100644
--- a/css/area_main-sidebar.less
+++ b/css/area_main-sidebar.less
@@ -6,10 +6,11 @@
 
 
 #dokuwiki__aside.main-sidebar {
-
+    counter-reset: nav-counter;
 /* + + + + +  nav main  + + + + + */
     .nav-main {
         > ul {
+
             @icon-size: 2rem;
 
             margin: 0;
@@ -42,13 +43,16 @@
                 border-bottom: solid 1px @color-border;
                 margin: 0;
                 padding: 0 0 .3rem 0;
+                counter-increment: nav-counter;
 
                 > .li { //background-color: pink;// hier activ !!!
                     position: relative;
                     padding: .5rem 0 .5rem (@icon-size + 1);
 
-                    &::before {                        background-color: gold;// test
-                        content: '?';
+                    &::before {
+                        //background-color: @color-link;
+                        color: @color-nav;
+                        content: counter(nav-counter);
                         position: absolute;
                         top: 0;
                         left: 0;
@@ -76,7 +80,89 @@
                         background-color: @color-border;
                         transition: @transition background-color;
                     }
+
+                    &.opened, &.closed{
+                        padding: 0;
+                        &::before, &::after{
+                           display: none;
+                        }
+                        a{
+                            display: block;
+                            position: relative;
+                            padding: .5rem 0 .8rem (@icon-size + 1);
+                            margin-bottom: -.3rem;
+                            border: 1px solid transparent;
+                            &::before {
+                                //background-color: @color-link;
+                                color: @color-nav;
+                                content: counter(nav-counter);
+                                position: absolute;
+                                top: -.1rem;
+                                left: 0;
+                                display: flex;
+                                display: -webkit-flex;
+                                flex-direction: column;
+                                -webkit-flex-direction: column;
+                                justify-content: center;
+                                -webkit-justify-content: center;
+                                height: 100%;
+                                width: @icon-size;
+                                overflow: hidden;
+                                text-align: center;
+                                margin-top: auto;
+                                margin-bottom: auto;
+                            }
+
+                            &::after {
+                                content: '';
+                                position: absolute;
+                                top: 15%;
+                                bottom: 15%;
+                                width: 1px;
+                                left: (@icon-size + .5);
+                                background-color: @color-border;
+                                transition: @transition background-color;
+                            }
+                            &:hover, &:focus, &:active{
+                                text-decoration: none;
+                                background-color: #fff;
+                                border-color: @color-link;
+                                color: @color-link;
+                            }
+                        }
+
+                    }
+
+                    &.opened{
+                        a{
+                            background-color: @color-link;
+                            color: #fff;
+                            &::after, &::before{
+                                color: #fff;
+                                border-color: #fff;
+                            }
+                            &:hover, &:focus, &:active{
+                                text-decoration: none;
+                                background-color: #fff;
+                                border-color: @color-link;
+                                color: @color-link;
+                                &::after, &::before{
+                                    color: inherit;
+                                    border-color: inherit;
+                                }
+                            }
+                        }
+                    }
+                    + ul{
+                        height: auto;
+                        overflow: hidden;
+                    }
+                  &.closed + ul{
+                      height: 0;
+                  }
                 }
+
+
             }
         }
     }
diff --git a/css/area_nav-pagetools.less b/css/area_nav-pagetools.less
index 799188c..c91c25a 100755
--- a/css/area_nav-pagetools.less
+++ b/css/area_nav-pagetools.less
@@ -24,6 +24,7 @@
 nav#dokuwiki__pagetools{
     right: -2rem;
     top: 3.05rem;
+    z-index: 100;
     ul {
         li {
             *{
diff --git a/css/area_sidetools.less b/css/area_sidetools.less
index 657c333..1c69786 100644
--- a/css/area_sidetools.less
+++ b/css/area_sidetools.less
@@ -19,8 +19,8 @@
         padding: .5rem 0 .5rem (@icon-size + 1);
 
         &::before {
-            background-color: gold;
-            content: '?';
+            //background-color: gold;
+            content: 'A';
             position: absolute;
             top: 0;
             left: 0;
diff --git a/css/base_mixins.less b/css/base_mixins.less
index aac2b6b..715abb1 100755
--- a/css/base_mixins.less
+++ b/css/base_mixins.less
@@ -14,16 +14,16 @@
         font-family: @fontFamily;
         font-style: normal;
         font-weight: @fontWeight;
-        src: ~"local('@{localFontName}'), local("~"'@{localFontNameVar}'), url(fonts/"~"@{filename}.eot)";
-        src: ~"url(fonts/"~"@{filename}.eot?#iefix) format('embedded-opentype'), url(fonts/"~"@{filename}.woff) format('woff')";
+        src: ~"local('@{localFontName}'), local('@{localFontNameVar}'), url(fonts/@{filename}.eot)";
+        src: ~"url(fonts/@{filename}.eot?#iefix) format('embedded-opentype'), url(fonts/@{filename}.woff) format('woff')";
     }
 }
 
 .setIconFontFace(@fontFamily,@filename) {
     @font-face {
         font-family: @fontFamily;
-        src: ~"url('fonts/icons/"~"@{filename}.eot?6762325')";
-        src: ~"url('fonts/icons/"~"@{filename}.eot?6762325#iefix') format('embedded-opentype'), url('fonts/icons/"~"@{filename}.woff2?6762325') format('woff2'), url('fonts/icons/"~"@{filename}.woff?6762325') format('woff'), url('fonts/icons/"~"@{filename}.ttf?6762325') format('truetype'), url('fonts/icons/"~"@{filename}.svg?6762325#fontello') format('svg')";
+        src: ~"url('fonts/icons/@{filename}.eot?6762325')";
+        src: ~"url('fonts/icons/@{filename}.eot?6762325#iefix') format('embedded-opentype'), url('fonts/icons/@{filename}.woff2?6762325') format('woff2'), url('fonts/icons/@{filename}.woff?6762325') format('woff'), url('fonts/icons/@{filename}.ttf?6762325') format('truetype'), url('fonts/icons/@{filename}.svg?6762325#fontello') format('svg')";
         font-weight: normal;
         font-style: normal;
     }
diff --git a/css/base_structure.less b/css/base_structure.less
index 5f3556a..2d00607 100755
--- a/css/base_structure.less
+++ b/css/base_structure.less
@@ -124,13 +124,13 @@
     .tools {
         .row > .col-xs-12 {
             position: absolute;
-            background: pink;
         }
     }
 
     .content {
         .row > .col-xs-12 {
             width: 100%;
+            position: relative;
             background-color: #fff;
         }
     }
@@ -139,7 +139,6 @@
         .content {
             .row > .col-xs-12 {
                 width: 73%;
-                position: relative;
                 float: right;
             }
         }
diff --git a/js/base/helper.js b/js/base/helper.js
index a57735e..170773b 100755
--- a/js/base/helper.js
+++ b/js/base/helper.js
@@ -77,3 +77,9 @@ if (typeof console === "undefined" || typeof console.log === "undefined") {
         console.log = function() {};
     }
 }
+
+var wikiLang = "de";
+/**
+ * anonymous func: get page language
+ */
+(function($){ $("html").attr("lang"); if(typeof(l)!= 'undefined' && l.length>=2) wikiLang=l.substr(0,2).toLowerCase(); if(wikiLang!='de'&& wikiLang!='en') wikiLang='de'; })(jQuery);
diff --git a/js/sidebar-menu.js b/js/sidebar-menu.js
new file mode 100644
index 0000000..449b782
--- /dev/null
+++ b/js/sidebar-menu.js
@@ -0,0 +1,44 @@
+( function( $, spc ) {
+
+    var mainMenu = function(){
+        var $menu = $('.nav-main').find('> ul');
+
+        try{
+            if($menu.length > 0){
+                var $toggler = $menu.find('> li.level1 > .li'),
+                    $submenu = $menu.find('> li.level1 > ul');
+                if($toggler.length > 0 && $submenu.length > 0){
+                    $toggler.addClass('closed');
+                    $toggler.wrapInner('<a href="#toggleMenu" class="toggler"></a>');
+                    $toggler.each(function( index ) {
+                        $(this).on( "click", function(e) {
+                            e.preventDefault();
+                            var $this = $(this);
+                            $this.toggleClass('closed');
+                            $this.toggleClass('opened');
+                            if($this.hasClass('opened')){
+                                var $foc = $this.closest('li.level1').find('li.level2:first-child').find('a:first-child');
+                                if($foc.length > 0){
+                                    $foc.focus();
+                                }
+                            }
+                        });
+                    });
+
+                    //FIXME: store current nav state with local storage
+                }
+
+
+            }
+
+        }catch(err){
+
+        }
+    };
+
+    $(function(){
+        mainMenu();
+    });
+
+} )( jQuery, spc );
+
diff --git a/lang/de/lang.js b/lang/de/lang.js
new file mode 100644
index 0000000..ff76071
--- /dev/null
+++ b/lang/de/lang.js
@@ -0,0 +1,34 @@
+
+var $lang = {};
+
+$lang['direct_prefix']              = 'Direkt';
+$lang['direct_content_main']        = 'Hauptinhalt dieser Seite';
+$lang['direct_menu_main']           = 'Hauptmenü';
+
+$lang['adjunct_start_logo_text']    = 'Logo: ';
+$lang['adjunct_linked_logo_text']   = '. Link zur Startseite';
+
+$lang['nav-area-head']              = 'Navigationsmenüs und Suche';
+$lang['head_magic_matcher']         = 'MagicMatcher';
+$lang['head_quick_search']          = 'wikiübergreifende Schnellsuche';
+$lang['head_menu_main']             = 'Hauptmenü';
+$lang['head_menu_status']           = 'Seitenstatus';
+$lang['head_breadcrumb']            = 'Standortanzeiger';
+
+$lang['quality_trigger']            = 'Seitenanalyse ein- bzw. ausblenden';
+
+$lang['prefix_tasks']               = 'offene Aufgaben: ';
+$lang['prefix_tasks_user']          = 'Ihre offenen Aufgaben: ';
+$lang['prefix_tasks_page']          = 'offene Aufgaben auf dieser Seite: ';
+$lang['tasks_page_none']            = 'keine offenen Aufgaben für diese Seite';
+
+$lang['discussion']                 = 'Diskussion';
+$lang['back_to_article']            = 'Zurück zum Artikel';
+$lang['userpage']                   = 'Benutzer-Seite';
+$lang['__existing__']               = 'Schriftfarbe für Links zu vorhandenen Webseiten';
+$lang['__missing__']                = 'Schriftfarbe für Links zu nicht vorhandenen Webseiten';
+$lang['__site_width__']             = 'The width of the full site (can be any length unit: %, px, em, ...)';
+$lang['__sidebar_width__']          = 'The width of the sidebar, if any (can be any length unit: %, px, em, ...)';
+
+$lang['__button_color__']           = 'Schriftfarbe für Buttons';
+$lang['__button_background__']      = 'Hintergrundfarbe für Buttons';
diff --git a/lang/en/lang.js b/lang/en/lang.js
new file mode 100644
index 0000000..b268ca0
--- /dev/null
+++ b/lang/en/lang.js
@@ -0,0 +1,33 @@
+var $lang = {};
+
+$lang['direct_prefix']              = 'jump to';
+$lang['direct_content_main']        = 'main content';
+$lang['direct_menu_main']           = 'main menu';
+
+$lang['adjunct_start_logo_text']    = 'Logo: ';
+$lang['adjunct_linked_logo_text']   = '. homepage link';
+
+$lang['nav-area-head']              = 'menus and quick search';
+$lang['head_magic_matcher']         = 'MagicMatcher';
+$lang['head_quick_search']          = 'quick search';
+$lang['head_menu_main']             = 'main menu';
+$lang['head_menu_status']           = 'site status';
+$lang['head_breadcrumb']            = 'location indicator';
+
+$lang['quality_trigger']            = 'toggle page analysis';
+
+$lang['prefix_tasks']               = 'open tasks: ';
+$lang['prefix_tasks_user']          = 'your open tasks: ';
+$lang['prefix_tasks_page']          = 'open tasks for this page: ';
+$lang['tasks_page_none']            = 'no open tasks for this page';
+
+$lang['discussion']                 = 'Discussion';
+$lang['back_to_article']            = 'Back to article';
+$lang['userpage']                   = 'User page';
+$lang['__existing__']               = 'The color for links to existing pages';
+$lang['__missing__']                = 'The color for links to non-existing pages';
+$lang['__site_width__']             = 'The width of the full site (can be any length unit: %, px, em, ...)';
+$lang['__sidebar_width__']          = 'The width of the sidebar, if any (can be any length unit: %, px, em, ...)';
+
+$lang['__button_color__']           = 'Color for buttons';
+$lang['__button_background__']      = 'Backgroundcolor for buttons';
diff --git a/main.php b/main.php
index f37afbb..cf07678 100755
--- a/main.php
+++ b/main.php
@@ -14,7 +14,7 @@ if (!defined('DOKU_INC')) die();                        /* must be run from with
 header('X-UA-Compatible: IE=edge,chrome=1');
 
 $showTools = !tpl_getConf('hideTools') || ( tpl_getConf('hideTools') && !empty($_SERVER['REMOTE_USER']) );
-$showSidebar = page_findnearest($conf['sidebar']) && ($ACT=='show');
+$showSidebar = /*page_findnearest($conf['sidebar']) &&*/ ($ACT=='show');
 
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@@ -148,8 +148,6 @@ $showSidebar = page_findnearest($conf['sidebar']) && ($ACT=='show');
         <div class="sr-only nav-area-head">
             <h5 class="sr-only" role="heading" aria-level="1"><?php echo tpl_getLang('nav-area-head') ?></h5>
         </div><!-- .nav-area-head -->
-        <?php if ($showSidebar): ?>
-
 
         <div class="tools">
             <div class="container">
@@ -223,7 +221,6 @@ $showSidebar = page_findnearest($conf['sidebar']) && ($ACT=='show');
                 </div><!-- .row -->
             </div><!-- .container -->
         </div><!-- .tools -->
-        <?php endif ?>
 
 
         <div class="top-header">
@@ -309,6 +306,7 @@ $showSidebar = page_findnearest($conf['sidebar']) && ($ACT=='show');
                         </div>
 
                         <div id="dokuwiki__content" class="page main-content">
+                            <div id="meta-box"></div>
 
                             <?php
 
diff --git a/script.js b/script.js
index e3128ab..b1ceb69 100755
--- a/script.js
+++ b/script.js
@@ -1,5 +1,33 @@
 
 /* DOKUWIKI:include js/base/helper.js */
-
 /* DOKUWIKI:include js/base/spc.js */
+
+( function( $, spc, lang ) {
+
+    var setLang = function(){
+        try{
+            if(lang==="de"){
+                /* DOKUWIKI:include lang/de/lang.js */
+            } else if(lang==="en"){
+                /* DOKUWIKI:include lang/en/lang.js */
+            } else{
+                /* default */
+                /* DOKUWIKI:include lang/de/lang.js */
+            }
+        }catch(err){
+        }
+    };
+
+    $(function(){
+        setLang();
+    });
+
+} )( jQuery, spc, wikiLang );
+
+
 /* DOKUWIKI:include js/plugins/do_tasks.js */
+/* DOKUWIKI:include js/sidebar-menu.js */
+
+
+
+
diff --git a/style.ini b/style.ini
index 0744537..03c3a06 100755
--- a/style.ini
+++ b/style.ini
@@ -153,4 +153,4 @@ __background_site__         = "#ECECEC"
 
 __default_border_radius__   = "5px"
 
-__background_page-header__  = "#F9F9F9"
+__background_page-header__  = "#F6F6F6"
diff --git a/tpl/nav-main.php b/tpl/nav-main.php
index 5ddb938..4349a58 100755
--- a/tpl/nav-main.php
+++ b/tpl/nav-main.php
@@ -1,5 +1,6 @@
 <?php
     if (!defined('DOKU_INC')) die();
+    if ($showSidebar):
 
     echo "<nav class=\"nav-main\">";
     echo "<h6 class=\"sr-only\" role=\"heading\" aria-level=\"2\">".tpl_getLang('head_menu_main')."</h6>";
@@ -8,3 +9,4 @@
     echo PHP_EOL;
     echo "</nav>";
 
+    endif ?>
diff --git a/tpl/nav-page-quality-tasks.php b/tpl/nav-page-quality-tasks.php
index 6a8ba4e..377087e 100755
--- a/tpl/nav-page-quality-tasks.php
+++ b/tpl/nav-page-quality-tasks.php
@@ -3,7 +3,10 @@
 ?>
 
 <?php
+    /** @var \helper_plugin_qc $qc */
     $doPlugin = plugin_load('helper','do');
+    
+    /** @var \helper_plugin_qc $qc */
     $qc = plugin_load('helper','qc');
     if ($doPlugin !== null ||$qc ) {
         echo "<ul class=\"page-attributes\">";
@@ -13,9 +16,9 @@
         $qc->tplErrorCount();
         echo "</li>";
     }
-    if ($doplugin !== null ) {
-        $tasks = $doplugin->getPageTaskCount();
-        $num = $tasks[count];
+    if ($doPlugin !== null ) {
+        $count = $doPlugin->getPageTaskCount();
+        $num = $count['count'];
         $title = "";
 
         if($num == 0){ // no tasks - does not exist do in plug-in