diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less
index 16ef4ad..bcbce80 100755
--- a/css/area_nav-breadcrumb.less
+++ b/css/area_nav-breadcrumb.less
@@ -85,54 +85,4 @@
             padding: .1em .1em 0;
         }
     }
-
-
-/* + + + + +  icon list  + + + + + */
-    .page-attributes {
-        list-style: none;
-        float: right;
-        display: inline-block;
-        max-width: 30%;
-        margin: -.45em 0 0;
-        padding: 0;
-
-        @media @screen_max-xs{
-            max-width: 90%;
-        }
-
-        > li {
-            .btn-usertools-wrapper(); // uniform li
-            .btn-usertools-num();
-
-            float: left;
-
-            > strong,
-            > a {
-                display: block;
-                width: auto;
-                min-height: @toggle-size;
-                border: 1px solid @wikiicons-border;
-                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
-                text-align: center;
-                margin: 0;
-            }
-
-            .prefix {
-                .btn-prefix ();
-                .icon-clipboard();
-
-                display: block;
-                font-size: 1.2rem;
-                line-height: 1;
-            }
-        } // li
-
-        a {
-            .btn-hover();
-
-            &[aria-expanded="false"] + #plugin__qc__wrapper {
-                display: none;
-            }
-        }
-    }
 }
diff --git a/css/area_nav-page-attributes.less b/css/area_nav-page-attributes.less
new file mode 100644
index 0000000..b7ab433
--- /dev/null
+++ b/css/area_nav-page-attributes.less
@@ -0,0 +1,75 @@
+/**
+ * Page Attribute Icons in the breadcrumb bar
+ */
+
+
+/* + + + + +  icons in breadcrumb area  + + + + + */
+
+.page-attributes {
+    list-style: none;
+    float: right;
+    display: inline-block;
+    max-width: 30%;
+    margin: -.45em 0 0;
+    padding: 0;
+
+    @media @screen_max-xs {
+        max-width: 90%;
+    }
+
+    > li {
+        .btn-usertools-wrapper(); // uniform li
+        .btn-usertools-num();
+
+        position: relative;
+        float: left;
+        display: block;
+        width: auto;
+        min-height: @toggle-size;
+        text-align: center;
+        margin: 0 .25rem;
+
+        strong {
+            display: block;
+            min-height: 1.64rem;
+            border: 1px solid @wikiicons-border;
+            border-radius: @ini_default_border_radius;
+        }
+
+        a {
+            display: block;
+            width: auto;
+            min-height: 1.64rem;
+            background-color: @ini_nav_menu_hover_bg;
+            border: 1px solid @wikiicons-border;
+            border-radius: @ini_default_border_radius;
+            transition: @transition background-color, @transition border-color, @transition color;
+
+            &:hover,
+            &:focus,
+            &:active {
+                background-color: @ini_nav_menu_hover_color;
+                border-color: @ini_nav_menu_hover_color;
+                color: @ini_nav_menu_hover_bg;
+
+                span {
+                    fill: @ini_nav_menu_hover_bg;
+                    color: @ini_nav_menu_hover_bg;
+                }
+            }
+        }
+
+        .prefix {
+            .btn-prefix(.26rem);
+            .icon-clipboard();
+
+            display: block;
+            font-size: 1.2rem;
+            line-height: 1;
+        }
+
+        .num {
+            top: -.6em;
+        }
+    }
+}
diff --git a/css/base.less b/css/base.less
index 4c4352f..a9446ab 100755
--- a/css/base.less
+++ b/css/base.less
@@ -455,18 +455,7 @@ nav > ul {
         padding: 0;
     }
 
-    html, body, div, span, applet, object, iframe,
-    h1, h2, h3, h4, h5, h6, p, blockquote,
-    a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp,
-    small, strike, strong, sub, sup, tt, var,
-    b, u, i, center,
-    dl, dt, dd, ol, ul, li,
-    fieldset, form, label, legend,
-    table, caption, tbody, tfoot, thead, tr, th, td,
-    article, aside, canvas, details, embed,
-    figure, figcaption, footer, header,
-    menu, nav, output, ruby, section, summary,
-    time, mark, audio, video {
+    html, body {
         font-family: @font_family_screen;
         color: @ini_text;
     }
diff --git a/css/base_mixins.less b/css/base_mixins.less
index 82a5291..4f7428b 100755
--- a/css/base_mixins.less
+++ b/css/base_mixins.less
@@ -175,7 +175,7 @@
     }
 }
 
-.btn-usertools-num () {
+.btn-usertools-num() {
     .num {
         position: absolute;
         right: -.4rem;
@@ -192,7 +192,7 @@
     }
 }
 
-.btn-prefix () {
+.btn-prefix(@margin-top:.3rem) {
     .fontello();
     .hide-text-show-before();
 
@@ -200,15 +200,15 @@
     font-size: @font-size-default;
 
     @media @screen_min-xxlg {
-        margin-top: .25rem;
+        margin-top: .22rem;
     }
 
     @media @screen_max-xxlg {
-        margin-top: .3rem;
+        margin-top: @margin-top;
     }
 
     @media @screen_max-md {
-        margin-top: .25rem;
+        margin-top: .2rem;
     }
 }
 
diff --git a/css/plugins/do_tasks.less b/css/plugins/do_tasks.less
index 261f5de..6b66253 100755
--- a/css/plugins/do_tasks.less
+++ b/css/plugins/do_tasks.less
@@ -19,7 +19,6 @@ ul.page-attributes {
             }
 
             .num {
-                margin-top: 1px;
                 background-color: @noopentasks-border; // fix
                 color: @noopentasks-color; // fix
             }
diff --git a/css/plugins/qc.less b/css/plugins/qc.less
index aaf152a..25688b9 100644
--- a/css/plugins/qc.less
+++ b/css/plugins/qc.less
@@ -1,79 +1,89 @@
 /**
- * This file provides styles for qc plugin
+ * Styles for the QC plugin
  */
 
 
-/* + + + + +  global  + + + + + */
+/* + + + + +  icon in breadcrumb  + + + + + */
 
-#dokuwiki__site {
-    .plugin__qc {
-        display: inline-block;
-        overflow: visible;
-        position: static;
-    }
+.page-attributes .plugin_qc {
+    .qc_icon {
+        margin: 0;
 
-    #plugin__qc__icon {
-        display: none;
-    }
-
-    #plugin__qc__link {
-        position: relative;
-
-        .prefix {
-            .icon-emo-happy();
-
-            width: 100%;
-            font-size: @font-size-default;
-
-            &::before {
-                width: 100%;
-                margin: 0;
-            }
-        }
-    }
-
-    #plugin__qc__wrapper {
-        position: absolute;
-        right: 0;
-        z-index: 2000;
-        width: auto;
-        box-shadow: @box-shadow-bottom;
-        background: @ini_background_page_header;
-        background: -webkit-linear-gradient(top, @ini_background_page_header, @ini_background_content);
-        background: linear-gradient(top, @ini_background_page_header, @ini_background_content);
-        border: 0 none;
-        font-size: @font-size-default;
-
-        p {
-            font-size: @font-size-default;
-        }
-
-        #plugin__qc__out {
-            h1 {
-                font-size: @font-size-head3;
-            }
-
-            h2 {
-                margin-top: 1.6em;
-                font-size: @font-size-head5;
-            }
-            > h1,
-            > h2,
-            > p,
-            > dl,
-            > div {
-                padding-left: 1rem;
-                margin-left: 0;
-            }
-
-            > div p {
-                padding-left: 0;
-                margin-left: 0;
-            }
-        }
-
-        &[aria-hidden="false"] {
-            margin-top: .5rem;
+        svg {
+            margin-top: .1em;
+            width: 1.6em;
+            height: 1.6em;
+            font-size: (@font-size-small - .06);
         }
     }
 }
+
+
+/* + + + + +  slideout output  + + + + + */
+.qc-output {
+    min-width: 100%;
+    width: auto;
+    font-size: 90%;
+    box-shadow: @box-shadow-bottom;
+    margin-bottom: 0;
+
+    h2 {
+        font-size: 1.3rem;
+    }
+    h3 {
+         font-size: 1.1rem;
+    }
+    h4, h5, h6 {
+        font-size: 1rem;
+    }
+
+
+    @media @screen_min-xxs {
+        margin-top: -(@margin-default + 1);
+        margin-right: -(@margin-default);
+        margin-left: -(@margin-default);
+        padding-left: @margin-default;
+        padding-right: @margin-default;
+    }
+
+    @media @screen_max-md {
+        margin-top: -(@page_padding-top + 2);
+        margin-right: -(@margin-default * 1.6);
+        margin-left: -(@margin-default);
+        padding-top: @margin-default;
+    }
+
+    @media @screen_max-xxs {
+        margin-left: -(@margin-small);
+        padding-left: @margin-small;
+        padding-right: @margin-default;
+    }
+
+    div,
+    p {
+        margin-left: 0;
+    }
+
+    dl {
+        dt,
+        dd {
+            padding-bottom: @small-spacing;
+
+            @media @screen_max-xxs {
+                float: none;
+                display: inline-block;
+                width: 49%;
+                max-width: 10em;
+                vertical-align: top;
+                margin-left: 0;
+            }
+        }
+    }
+
+    .qc_icon {
+        background-color: #fff;
+        border-radius: @fix_border-radius;
+        vertical-align: top;
+        padding: .1rem;
+    }
+}
diff --git a/css/template_detail.less b/css/template_detail.less
new file mode 100644
index 0000000..b335ec3
--- /dev/null
+++ b/css/template_detail.less
@@ -0,0 +1,130 @@
+/**
+ * This file provides the design styles for the the detail template
+ * (media details)
+ *
+ * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
+ */
+#dokuwiki__detail {
+
+    // linked image
+    .img-link{
+
+        text-align: center;
+
+        a {
+            display: inline-block;
+            margin: 0 auto 1.4em;
+            position: relative;
+
+            img {
+                margin: 0;
+                display: block;
+                border: 1px dotted @ini_background;
+                position: relative;
+                z-index: 1;
+            }
+
+            &:hover,
+            &:focus,
+            &:active {
+                &:before{
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    box-sizing: border-box;
+                    display: block;
+                    padding: @margin-small;
+
+                    z-index:2;
+                    background: @ini_button_background;
+                    color: @ini_button_color;
+                    content:attr(title);
+                }
+                img {
+                    border: 1px solid @ini_button_background;
+                }
+            }
+
+        }
+    }
+
+    // meta data
+    div.img_detail {
+        /* vertical minus margin of .img-detail corresponds to the padding of .page  */
+        margin: @margin-default -(@margin-default);
+
+        border: solid @ini_border_light;
+        border-width: 1px 0;
+        background-color: @ini_background_page_header;
+        h1, h2, h3, h4, h5, h6, p{
+            padding-left: @margin-default;
+            padding-right: @margin-default;
+        }
+
+        > h4 {
+            padding-top: (@margin-default / 2);
+        }
+
+        dl {
+            display: flex;
+            display: -webkit-flex;
+            display: -ms-flexbox;
+
+
+            flex-direction: row;
+            -webkit-flex-direction: row;
+            -ms-flex-direction: row;
+
+            flex-wrap: wrap;
+            -webkit-flex-wrap: wrap;
+            -ms-flex-wrap: wrap;
+
+            width: 100%;
+
+            dt, dd {
+                box-sizing: border-box;
+                margin: .2em 0;
+                padding: (@small-spacing * 2) @small-spacing;
+            }
+
+            dt {
+                width: 33.3%;
+                background-color: @ini_highlight;
+                color: @ini_highlight_text;
+
+            }
+            dd {
+                width: 66.6%;
+                padding-left: (@small-spacing * 2);
+            }
+
+        }
+        .os-map {
+            p {
+                text-align: right;
+            }
+            iframe {
+                padding: 0;
+                margin: 0;
+                border: solid @ini_button_background;
+                border-width: 1px 0;
+            }
+        }
+
+        @media @screen_max-md {
+            margin-right: -(@margin-default * 1.6);
+            h1, h2, h3, h4, h5, h6, p {
+                padding-right: (@margin-default * 1.6);
+            }
+        }
+
+        @media @screen_max-xs {
+            margin-left: -(@margin-small);
+            h1, h2, h3, h4, h5, h6, p {
+                padding-left: @margin-small;
+            }
+        }
+
+    }
+}
diff --git a/detail.php b/detail.php
index f010711..86f18a6 100755
--- a/detail.php
+++ b/detail.php
@@ -1,93 +1,381 @@
 <!DOCTYPE html>
 <?php
 /**
- * DokuWiki Image Detail Page
+ * DokuWiki sprintDoc Detail Template
  *
- * @author   Andreas Gohr <andi@splitbrain.org>
- * @author   Anika Henke <anika@selfthinker.org>
+ * @link     FIXME
+ * @author   Jana Deutschlaender <deutschlaender@cosmocode.de>
+ * @author   Michael Grosse <grosse@cosmocode.de>
  * @license  GPL 2 (http://www.gnu.org/licenses/gpl.html)
  */
+use dokuwiki\template\sprintdoc\Template;
 
-// must be run from within DokuWiki
-if (!defined('DOKU_INC')) die();
+if (!defined('DOKU_INC')) die();                        /* must be run from within DokuWiki */
 header('X-UA-Compatible: IE=edge,chrome=1');
 
+global $JSINFO;
+if (empty($JSINFO)) {
+    $JSINFO = array();
+}
+
 ?>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $conf['lang']?>"
- lang="<?php echo $conf['lang']?>" dir="<?php echo $lang['direction'] ?>" class="no-js">
+<html class="edge no-js" lang="<?php echo $conf['lang'] ?>" dir="<?php echo $lang['direction'] ?>">
 <head>
-    <meta charset="UTF-8" />
-    <title>
-        <?php echo hsc(tpl_img_getTag('IPTC.Headline',$IMG))?>
-        [<?php echo strip_tags($conf['title'])?>]
-    </title>
-    <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
-    <?php tpl_metaheaders()?>
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <?php echo tpl_favicon(array('favicon', 'mobile')) ?>
-    <?php tpl_includeFile('meta.html') ?>
+<?php
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* meta and link relations */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+?>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<?php tpl_metaheaders() ?>
+<?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* page title */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+?>
+<title><?php echo hsc(tpl_img_getTag('IPTC.Headline', $IMG)) ?> [<?php echo strip_tags($conf['title']) ?>]</title>
+
+<script type="text/javascript">(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
+<?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* favicons */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+?>
+<?php
+include('tpl/favicon_tiles.php');
+?>
+<?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Include Hook: meta.html */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+?>
+<?php tpl_includeFile('meta.html') ?>
 </head>
 
-<body>
-    <div id="dokuwiki__detail" class="<?php echo tpl_classes(); ?>">
-        <?php html_msgarea() ?>
+<body id="dokuwiki__top" class="<?php echo tpl_classes(); ?> wide-content showSidebar">
+<div id="dokuwiki__site">
+    <?php
 
-        <?php if($ERROR): print $ERROR; ?>
-        <?php else: ?>
 
-            <?php if($REV) echo p_locale_xhtml('showrev');?>
-            <h1><?php echo hsc(tpl_img_getTag('IPTC.Headline', $IMG))?></h1>
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* template Include: tpl/nav-direct */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+    ?>
+    <?php include('tpl/nav-direct.php') ?>
+
+
+    <div class="page-wrapper <?php echo ($showSidebar) ? 'hasSidebar' : ''; ?>">
+        <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Include Hook: header.html */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+            tpl_includeFile('header.html');
+        ?>
+
+        <div id="dokuwiki__header" class="header no-print">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xs-12">
+                        <div class="claim main-sidebar">
+                            <?php if (tpl_getConf('logo') && file_exists(mediaFN(tpl_getConf('logo')))) {
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Logo */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* upload your logo into the data/media folder (root of the media manager) and replace 'logo.png' in der template config accordingly: */
+                                include('tpl/main-sidebar-logo.php');
+                            } ?>
+                            <div class="main-title">
+                                <?php if ($conf['title']):
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Wiki Title Mobile */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?>
+                                    <p class="title mobile-only"><?php echo $conf['title'] ?></p>
+                                <?php endif ?>
+                            </div><!-- .main-title -->
+
+                        </div><!-- .headings -->
+                    </div><!-- .col -->
+                    <div class="col-xs-12">
+                        <div class="main-title desktop-only">
+                            <?php if ($conf['title']):
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Wiki Title Desktop */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?>
+                                <p class="title"><?php echo $conf['title'] ?></p>
+                            <?php endif ?>
+                            <?php if ($conf['tagline']):
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Wiki Tagline Desktop */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?>
+                                <p class="claim"><?php echo $conf['tagline'] ?></p>
+                            <?php endif ?>
+                        </div><!-- .main-title -->
+                    </div><!-- .col -->
+
+                </div><!-- .row -->
+            </div><!-- .container -->
+        </div><!-- .header -->
+        <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* headline menu area (Accessibility ) */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+        ?>
+        <div class="sr-only nav-area-head">
+            <h5 class="sr-only" aria-level="1"><?php echo tpl_getLang('nav-area-head') ?></h5>
+        </div><!-- .nav-area-head -->
+
+        <div class="tools">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xs-12">
+
+
+                        <div class="search main-sidebar">
+                            <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* search form */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                            include('tpl/main-sidebar-search.php');
+                            ?>
+                        </div><!-- .search -->
+
+                        <div class="sidebarheader main-sidebar">
+                            <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Include Hook: sidebarheader.html */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                            tpl_includeFile('sidebarheader.html')
+                            ?>
+                        </div><!-- .sidebarheader -->
+
+
+                        <div id="dokuwiki__aside">
+                            <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* sidebar */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                            include('tpl/main-sidebar-nav.php');
+                            ?>
+                        </div><!-- .aside -->
+
+                    </div><!-- .col -->
+                </div><!-- .row -->
+            </div><!-- .container -->
+        </div><!-- .tools -->
+
+        <div class="top-header">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xs-12">
+
+                        <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* User Tools but no MagicMatcher Bar */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                        $showTools = true;
+                        include('tpl/nav-usertools-buttons.php');
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Include Hook: header.html */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                        tpl_includeFile('header.html');
+                        ?>
+
+                    </div><!-- .col -->
+                </div><!-- .row -->
+            </div><!-- .container -->
+        </div><!-- /top-header -->
+
+
+        <div id="dokuwiki__detail">
+
+            <?php tpl_flush(); /* flush the output buffer */ ?>
 
             <div class="content group">
-                <?php tpl_img(900, 700); /* the image; parameters: maximum width, maximum height (and more) */ ?>
+                <div class="container">
+                    <div class="row">
+                        <div class="col-xs-12">
+                            <div class="breadcrumbs" data-do="<?php echo $ACT ?>">
 
-                <div class="img_detail">
-                    <h2><?php print nl2br(hsc(tpl_img_getTag('simple.title'))); ?></h2>
+                                <div class="togglelink page_main-content">
+                                    <a href="#"><span class="sr-out"><?php echo tpl_getLang('a11y_sidebartoggle') ?></span></a>
+                                </div>
 
-                    <?php if(function_exists('tpl_img_meta')): ?>
-                        <?php tpl_img_meta(); ?>
-                    <?php else: /* deprecated since Release 2014-05-05 */ ?>
-                        <dl>
-                            <?php
-                                $config_files = getConfigFiles('mediameta');
-                                foreach ($config_files as $config_file) {
-                                    if(@file_exists($config_file)) {
-                                        include($config_file);
-                                    }
-                                }
+                                <h6 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_menu_status') ?></h6>
 
-                                foreach($fields as $key => $tag){
-                                    $t = array();
-                                    if (!empty($tag[0])) {
-                                        $t = array($tag[0]);
-                                    }
-                                    if(is_array($tag[3])) {
-                                        $t = array_merge($t,$tag[3]);
-                                    }
-                                    $value = tpl_img_getTag($t);
-                                    if ($value) {
-                                        echo '<dt>'.$lang[$tag[1]].':</dt><dd>';
-                                        if ($tag[2] == 'date') {
-                                            echo dformat($value);
+                                <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* breadcrumb */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                include('tpl/nav-breadcrumb.php');
+                                ?>
+
+                                <h6 class="sr-only" role="heading" aria-level="2"><?php echo $lang['page_tools'] ?></h6>
+
+                                <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* page tools */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?>
+                                <nav id="dokuwiki__pagetools">
+                                    <div class="tools">
+                                        <ul>
+                                            <?php
+                                            echo '<li>' . dokuwiki\template\sprintdoc\tpl::pageToolAction('mediaManager') . '</li>';
+                                            echo '<li>' . dokuwiki\template\sprintdoc\tpl::pageToolAction('img_backto') . '</li>';
+                                            ?>
+                                        </ul>
+                                    </div>
+                                </nav>
+
+                            </div>
+                            <div id="dokuwiki__content" class="page main-content">
+
+                                <div id="spr__meta-box"></div>
+                                <div class="msg-area"><?php html_msgarea();/*msg('Information.', 0);msg('Success', 1);msg('Notification', 2);msg('Fehler', -1);*/ ?></div>
+
+
+                                <?php if ($ERROR): print $ERROR; ?>
+                                <?php else: ?>
+
+                                <?php if ($REV) {
+                                    echo p_locale_xhtml('showrev');
+                                } ?>
+
+                                <h1><?php echo hsc(tpl_img_getTag('IPTC.Headline', $IMG)) ?></h1>
+                                <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* image */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                ?>
+                                <div class="img-link">
+                                    <?php tpl_img(900, 700); /* the image; parameters: maximum width, maximum height (and more) */ ?>
+                                </div>
+                                <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* meta data of image */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                ?>
+                                <div class="img_detail">
+                                    <?php
+                                        $simple_title = hsc(tpl_img_getTag('simple.title'));
+                                        if(strlen($simple_title) > 0) {
+                                    ?>
+                                    <h4><?php print nl2br(hsc(tpl_img_getTag('simple.title'))); ?></h4>
+                                    <?php
                                         } else {
-                                            echo hsc($value);
+                                            echo '<h4>' . tpl_getLang('meta_data') . '</h4>';
+                                        }
+                                    ?>
+
+                                    <?php
+                                    tpl_img_meta();
+
+
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* open street maps if geo data is available */
+/** @var helper_plugin_spatialhelper_index $spatial */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                    $spatial = plugin_load('helper', 'spatialhelper_index');
+                                    if ($spatial && plugin_load('helper', 'geophp')) {
+                                        global $IMG;
+                                        $point = $spatial->getCoordsFromExif($IMG);
+                                        if ($point) {
+                                            $long = $point->getX();
+                                            $lat = $point->getY();
+                                            $latShort = round($lat, 3);
+                                            $longShort = round($long, 3);
+
+                                            $hrefOSM = "https://www.openstreetmap.org/?mlat=$lat&mlon=$long#map=18/$lat/$long";
+                                            $srcOSM = 'https://www.openstreetmap.org/export/embed.html?bbox=' . ($long - 0.004) . ',' . ($lat - 0.002) . ',' . ($long + 0.004) . ',' . ($lat + 0.002) . '&layer=mapnik&marker=' . $lat . ',' . $long;
+                                            echo '<div class="os-map">';
+                                            echo '<h4 lang="en">OSM (Open Street Maps):</h4>';
+                                            echo '<iframe width="100%" height="350" frameborder="0" src="' . $srcOSM . '"></iframe><br/><p><a class="button" target="_blank" title="' . tpl_getLang('osm_zoom_link_title') . '" href="' . $hrefOSM . '">' . tpl_getLang('osm_zoom_link_text') . '</a></p>';
+                                            echo '</div>';
                                         }
-                                        echo '</dd>';
                                     }
-                                }
-                            ?>
-                        </dl>
-                    <?php endif; ?>
-                    <?php //Comment in for Debug// dbg(tpl_img_getTag('Simple.Raw')); ?>
-                </div>
+                                    ?>
+                                    <?php //Comment in for Debug// dbg(tpl_img_getTag('Simple.Raw')); ?>
+                                </div>
+                            </div><!-- .main-content -->
+                        </div><!-- .col -->
+                    </div><!-- .row -->
+                </div><!-- .container -->
             </div><!-- /.content -->
 
-            <p class="back">
-                <?php tpl_action('mediaManager', 1) ?><br />
-                &larr; <?php tpl_action('img_backto', 1) ?>
-            </p>
 
         <?php endif; ?>
-    </div>
+        </div>
+    </div><!-- /wrapper -->
+
+
+    <!-- ********** FOOTER ********** -->
+
+    <div id="dokuwiki__footer">
+        <div class="container">
+            <div class="row">
+                <div class="col-xs-12">
+
+                    <div class="main-footer">
+                        <p>
+                            <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* copyright */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                            tpl_license($img = false, $imgonly = false, $return = false, $wrap = false);
+                            ?>
+                        </p>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div><!-- /footer -->
+
+
+    <?php tpl_includeFile('footer.html') ?>
+</div><!-- .dokuwiki__site -->
+
+<div class="no"><?php tpl_indexerWebBug() /* provide DokuWiki housekeeping, required in all templates */ ?></div>
+
 </body>
 </html>
diff --git a/js/plugins/do_tasks.js b/js/plugins/do_tasks.js
index 78a8f34..1ff8717 100755
--- a/js/plugins/do_tasks.js
+++ b/js/plugins/do_tasks.js
@@ -1,47 +1,49 @@
-( function( $, spc ) {
-
-    var togglePageAnalysis = function(){
-            var $this = $('.page-attributes').find('.plugin__qc');
-            try{
-                var $link = $this.find('#plugin__qc__link'),
-                    $container = $this.find('#plugin__qc__wrapper');
-
-                if($container.length < 1){
-                    $this.remove();
-                }else{
-                    $container.attr('aria-hidden','true');
-                    var $icon = $container.find('#plugin__qc__icon');
-                    $container.find('#plugin__qc__out').removeAttr('style');
-                    $link.on( 'click', function(e){
-                        e.preventDefault();
-                        $icon.trigger('click');
-                        var oldState = ($link.attr('aria-expanded')=== "true" );
-                        $container.attr('aria-hidden',oldState);
-                        $(this).attr('aria-expanded',!oldState);
-
-                    });
-
-                    if($container.length > 0){
-                        var num = $container.attr('data-errors');
-                        if(num){
-                            $link.find('.num').empty().append(num);
-                            $link.closest('li').removeClass('do_none');
-                        }
-                    }
-
-                }
-
-            }catch(err){
-                $this.remove();
-            }
-    };
-
-    $(function(){
-        togglePageAnalysis();
-    });
-
-} )( jQuery, spc );
-
-
-
+// FIXME figure out what this did and why
 
+// ( function( $, spc ) {
+//
+//     var togglePageAnalysis = function(){
+//             var $this = $('.page-attributes').find('.plugin__qc');
+//             try{
+//                 var $link = $this.find('#plugin__qc__link'),
+//                     $container = $this.find('#plugin__qc__wrapper');
+//
+//                 if($container.length < 1){
+//                     $this.remove();
+//                 }else{
+//                     $container.attr('aria-hidden','true');
+//                     var $icon = $container.find('#plugin__qc__icon');
+//                     $container.find('#plugin__qc__out').removeAttr('style');
+//                     $link.on( 'click', function(e){
+//                         e.preventDefault();
+//                         $icon.trigger('click');
+//                         var oldState = ($link.attr('aria-expanded')=== "true" );
+//                         $container.attr('aria-hidden',oldState);
+//                         $(this).attr('aria-expanded',!oldState);
+//
+//                     });
+//
+//                     if($container.length > 0){
+//                         var num = $container.attr('data-errors');
+//                         if(num){
+//                             $link.find('.num').empty().append(num);
+//                             $link.closest('li').removeClass('do_none');
+//                         }
+//                     }
+//
+//                 }
+//
+//             }catch(err){
+//                 $this.remove();
+//             }
+//     };
+//
+//     $(function(){
+//         togglePageAnalysis();
+//     });
+//
+// } )( jQuery, spc );
+//
+//
+//
+//
diff --git a/js/plugins/qc.js b/js/plugins/qc.js
new file mode 100644
index 0000000..5a0de75
--- /dev/null
+++ b/js/plugins/qc.js
@@ -0,0 +1,37 @@
+/**
+ * Add custom QC functionality instead of using the plugin's mechanism
+ */
+jQuery(function () {
+    var $panel = jQuery('div.qc-output').hide();
+
+    // load summary
+    jQuery('.page-attributes .plugin_qc a').load(
+        DOKU_BASE + 'lib/exe/ajax.php',
+        {
+            call: 'plugin_qc_short',
+            id: JSINFO['id']
+        },
+        function () {
+            jQuery(this).find('span span').addClass('num');
+        }
+    ).click(function (e) {
+        e.preventDefault();
+
+        if ($panel.html() == '') {
+            // load output
+            $panel.load(
+                DOKU_BASE + 'lib/exe/ajax.php',
+                {
+                    call: 'plugin_qc_long',
+                    id: JSINFO['id']
+                },
+                function () {
+                    $panel.dw_show();
+                }
+            );
+        } else {
+            $panel.dw_toggle();
+        }
+    });
+
+});
diff --git a/lang/de/lang.php b/lang/de/lang.php
index 2de4372..77a8751 100755
--- a/lang/de/lang.php
+++ b/lang/de/lang.php
@@ -43,6 +43,10 @@ $lang['discussion']                 = 'Diskussion';
 $lang['back_to_article']            = 'Zurück zum Artikel';
 $lang['userpage']                   = 'Benutzer-Seite';
 
+$lang['meta_data']                  = 'Meta Daten des Bildes';
+$lang['osm_zoom_link_text']         = 'größere Karte anzeigen';
+$lang['osm_zoom_link_title']        = 'externer Link - öffnet in neuem Fenster';
+
 
 /**
  * colors
diff --git a/lang/de/settings.php b/lang/de/settings.php
index 3b4981c..2d6972a 100755
--- a/lang/de/settings.php
+++ b/lang/de/settings.php
@@ -4,3 +4,9 @@
  *
  */
 
+
+$lang['sidebar_sections']   = 'Automatisches Ein- und Ausblenden der Sidebar Abschnitte orientieren sich an diesen Elementen:';
+$lang['sidebar_sections_o_h1']   = 'Überschriften 1. Ordnung';
+$lang['sidebar_sections_o_h1,h2']   = 'Überschriften der 1. und 2. Ordnung';
+$lang['sidebar_sections_o_h1,h2,h3,h4,h5']   = 'Alle Überschriften';
+$lang['sidebar_sections_o_li.level1 > .li']   = 'Top-level Listeneinträge in verschachtelten Listen';
diff --git a/lang/en/lang.php b/lang/en/lang.php
index f634485..3b01cd1 100755
--- a/lang/en/lang.php
+++ b/lang/en/lang.php
@@ -44,6 +44,10 @@ $lang['discussion']                 = 'Discussion';
 $lang['back_to_article']            = 'Back to article';
 $lang['userpage']                   = 'User page';
 
+$lang['meta_data']                  = 'Meta Data';
+$lang['osm_zoom_link_text']         = 'view larger map';
+$lang['osm_zoom_link_title']        = 'external link opens new window';
+
 
 /**
  * colors
diff --git a/lang/en/settings.php b/lang/en/settings.php
index ebd2e4f..c210f07 100755
--- a/lang/en/settings.php
+++ b/lang/en/settings.php
@@ -4,8 +4,11 @@
  *
  */
 
+
 $lang['sidebar_sections']   = 'Auto-toggle the sidebar into sections on these elements:';
 $lang['sidebar_sections_o_h1']   = '1st order headings';
 $lang['sidebar_sections_o_h1,h2']   = '1st and 2nd order headings';
 $lang['sidebar_sections_o_h1,h2,h3,h4,h5']   = 'All headings';
 $lang['sidebar_sections_o_li.level1 > .li']   = 'Top-level list items';
+
+
diff --git a/main.php b/main.php
index ea4794e..2dfb9b5 100755
--- a/main.php
+++ b/main.php
@@ -288,7 +288,7 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* page quality / page tasks */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                                include('tpl/nav-page-quality-tasks.php');
+                                include('tpl/nav-page-attributes.php');
                             ?>
 
                             <?php
@@ -324,6 +324,7 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
                                 include('tpl/nav-meta-box.php'); ?>
                             </div>
 
+                            <div class="qc-output"></div>
 
                             <div class="msg-area"><?php html_msgarea();/*msg('Information.', 0);msg('Success', 1);msg('Notification', 2);msg('Fehler', -1);*/ ?></div>
                             <?php
diff --git a/script.js b/script.js
index 0636fe1..ed8b13e 100755
--- a/script.js
+++ b/script.js
@@ -2,6 +2,7 @@
 /* DOKUWIKI:include js/base/spc.js */
 
 /* DOKUWIKI:include js/plugins/do_tasks.js */
+/* DOKUWIKI:include js/plugins/qc.js */
 
 /* DOKUWIKI:include js/meta-box.js */
 /* DOKUWIKI:include js/sidebar.js */
diff --git a/style.ini b/style.ini
index 64a8289..e65c476 100755
--- a/style.ini
+++ b/style.ini
@@ -66,13 +66,13 @@ css/area_footer.less                  = all
 css/area_msg.less                     = all
 css/area_nav-direct.less              = all
 css/area_nav-breadcrumb.less          = all
+css/area_nav-page-attributes.less     = all
 css/area_nav-usertools.less           = all
 css/area_sidebar-search.less          = all
 css/area_nav-pagetools.less           = all
 css/area_nav-metabox.less             = all
 css/area_main-sidebar-nav.less        = all
 css/area_main-sidebar-content.less    = all
-;css/area_sidetools.less               = all
 css/area_main-content.less            = all
 css/area_main-content-secedit.less    = all
 css/area_togglelink.less              = all
@@ -81,7 +81,10 @@ css/area_search.less                  = all
 css/area_tabs.less                    = all
 css/area_recent.less                  = all
 
+; ____________ template styles _____________
+
 css/template_admin.less               = all
+css/template_detail.less              = all
 
 
 ; _____________  plugin styles _____________
diff --git a/tpl/favicon_tiles.php b/tpl/favicon_tiles.php
index a29b2e3..ebd8d8a 100755
--- a/tpl/favicon_tiles.php
+++ b/tpl/favicon_tiles.php
@@ -17,7 +17,7 @@ echo Template::getResizedImgTag(
     'link',
     array(
         'rel' => 'shortcut icon',
-        'href' => array('wiki:favicon.ico', 'wiki:favicon.png')
+        'href' => array('wiki:favicon.ico', 'wiki:favicon.png', 'wiki:logo-square.png')
     ),
     0, 0 // no scaling
 );
@@ -29,7 +29,7 @@ foreach(array(57, 60, 72, 76, 114, 120, 144, 152, 180) as $size) {
         array(
             'rel' => 'apple-touch-icon',
             'sizes' => $size . 'x' . $size,
-            'href' => array('wiki:logo-' . $size . 'x' . $size . '.png', 'wiki:logo-square.png', 'wiki:logo.png')
+            'href' => array('wiki:logo-' . $size . 'x' . $size . '.png', 'wiki:logo-square.png', 'wiki:favicon.ico', 'wiki:favicon.png', 'wiki:logo.png'),
         ),
         $size, $size
     );
@@ -42,7 +42,7 @@ foreach(array(32, 96, 192) as $size) {
         array(
             'rel' => 'icon',
             'sizes' => $size . 'x' . $size,
-            'href' => array('wiki:logo-' . $size . 'x' . $size . '.png', 'wiki:logo-square.png', 'wiki:logo.png')
+            'href' => array('wiki:logo-' . $size . 'x' . $size . '.png', 'wiki:logo-square.png', 'wiki:favicon.ico', 'wiki:favicon.png', 'wiki:logo.png')
         ),
         $size, $size
     );
@@ -54,7 +54,7 @@ foreach(array(70, 310) as $size) {
         'meta',
         array(
             'name' => 'msapplication-square' . $size . 'x' . $size . 'logo',
-            'content' => array('wiki:logo-' . $size . 'x' . $size . '.png', 'wiki:logo-square.png', 'wiki:logo.png')
+            'content' => array('wiki:logo-' . $size . 'x' . $size . '.png', 'wiki:logo-square.png', 'wiki:favicon.ico', 'wiki:favicon.png', 'wiki:logo.png'),
         ),
         $size, $size
     );
diff --git a/tpl/nav-meta-box.php b/tpl/nav-meta-box.php
index c83145d..d8b9e5c 100755
--- a/tpl/nav-meta-box.php
+++ b/tpl/nav-meta-box.php
@@ -12,7 +12,7 @@ $tabs = \dokuwiki\template\sprintdoc\Template::getInstance()->getMetaBoxTabs();
             if (empty($tab['tab']) || trim($tab['tab']) === '') {
                 continue;
             }
-            echo '<li>';
+            echo '<li class="' . $tab['id'] . '">';
             echo '<a href="#' . $tab['id'] . '" aria-expanded="false">';
             echo '<span class="prefix">';
             echo $tab['label'];
diff --git a/tpl/nav-page-attributes.php b/tpl/nav-page-attributes.php
new file mode 100755
index 0000000..6fceac4
--- /dev/null
+++ b/tpl/nav-page-attributes.php
@@ -0,0 +1,57 @@
+<?php
+if(!defined('DOKU_INC')) die();
+
+/** @var \helper_plugin_do $doPlugin */
+$doPlugin = plugin_load('helper', 'do');
+/** @var \helper_plugin_qc $qcPlugin */
+$qcPlugin = plugin_load('helper', 'qc');
+
+
+if($doPlugin !== null || $qcPlugin !== null) {
+    echo '<ul class="page-attributes">';
+}
+
+
+if($qcPlugin && $qcPlugin->shouldShow()) {
+    echo '<li class="plugin_qc"><a href="#">…</a></li>'; // filled by javascript
+}
+
+
+if($doPlugin !== null) {
+    $count = $doPlugin->getPageTaskCount();
+    $num = $count['count'];
+    $title = "";
+
+    if($num == 0) { // no tasks - does not exist do in plug-in
+        $class = "do_none";
+        $title = tpl_getLang('tasks_page_none');
+    } elseif($count['undone'] == 0) { // all tasks done
+        $class = 'do_done';
+        $title = $this->getLang('title_alldone');
+    } elseif($count['late'] == 0) { // open tasks but none late
+        $class = 'do_undone';
+        $title = sprintf(tpl_getLang('title_intime'), $count['undone']);
+    } else { // late tasks
+        $class = 'do_late';
+        $title = sprintf(tpl_getLang('title_late'), $count['undone'], $count['late']);
+    }
+    $markup = "<li class=\"plugin__do_pagetasks " . $class . "\" title=\"'.$title.'\"><strong><span class=\"prefix\">" . tpl_getLang('prefix_tasks_page') . " </span><span class=\"num\">" . $num . "</span></strong></li>";
+
+    echo $markup;
+}
+
+if($doPlugin !== null || $qcPlugin !== null) {
+    echo "</ul>";
+}
+
+
+
+/*
+
+
+$out = '<div class="plugin__do_pagetasks" title="' . $title . '"><span class="' . $class . '">';
+$out .= $count['undone'];
+$out .= '</span></div>';
+
+if($return) return $out;
+echo $out;*/
diff --git a/tpl/nav-page-quality-tasks.php b/tpl/nav-page-quality-tasks.php
deleted file mode 100755
index 2a1977c..0000000
--- a/tpl/nav-page-quality-tasks.php
+++ /dev/null
@@ -1,54 +0,0 @@
-<?php
-    if (!defined('DOKU_INC')) die();
-?>
-
-<?php
-    /** @var \helper_plugin_do $doPlugin */
-    $doPlugin = plugin_load('helper','do');
-
-    /** @var \helper_plugin_qc $qc */
-    $qc = plugin_load('helper','qc');
-    if ($doPlugin !== null ||$qc ) {
-        echo "<ul class=\"page-attributes\">";
-    }
-    if ($qc) {
-        echo "<li class=\"plugin__qc do_none\"><a id=\"plugin__qc__link\" aria-expanded=\"false\" href=\"#plugin__qc__wrapper\"><span class=\"prefix\">".tpl_getLang('quality_trigger')."</span><span class=\"num\">0</span></strong></a>";
-        $qc->tplErrorCount();
-        echo "</li>";
-    }
-    if ($doPlugin !== null ) {
-        $count = $doPlugin->getPageTaskCount();
-        $num = $count['count'];
-        $title = "";
-
-        if($num == 0){ // no tasks - does not exist do in plug-in
-            $class = "do_none";
-            $title = tpl_getLang('tasks_page_none');
-        } elseif($count['undone'] == 0){ // all tasks done
-            $class = 'do_done';
-            $title = $this->getLang('title_alldone');
-        }elseif($count['late'] == 0) { // open tasks but none late
-            $class = 'do_undone';
-            $title = sprintf($this->getLang('title_intime'), $count['undone']);
-        } else { // late tasks
-            $class = 'do_late';
-            $title = sprintf($this->getLang('title_late'), $count['undone'], $count['late']);
-        }
-        $markup = "<li class=\"plugin__do_pagetasks ".$class."\" title=\"'.$title.'\"><strong><span class=\"prefix\">".tpl_getLang('prefix_tasks_page')." </span><span class=\"num\">".$num."</span></strong></li>";
-
-        echo $markup;
-    }
-
-    if ($doPlugin !== null ||$qc ) {
-        echo "</ul>";
-    }
-
-/*
-
-
-$out = '<div class="plugin__do_pagetasks" title="' . $title . '"><span class="' . $class . '">';
-$out .= $count['undone'];
-$out .= '</span></div>';
-
-if($return) return $out;
-echo $out;*/