Resolve "Neue HTML-Grundstruktur für Stud.IP"

Closes #838, #1850, and #1817

Merge request studip/studip!1136

52 files changed, 485 insertions, 496 deletions

diff --git a/resources/assets/javascripts/bootstrap/application.js b/resources/assets/javascripts/bootstrap/application.js
index 05b2c26..cafd07e 100644
--- a/resources/assets/javascripts/bootstrap/application.js
+++ b/resources/assets/javascripts/bootstrap/application.js
@@ -282,29 +282,29 @@ STUDIP.domReady(function () {
 // Fix horizontal scroll issue on domready, window load and window resize.
 // This also makes the header and footer sticky regarding horizontal scrolling.
 STUDIP.domReady(function () {
-    var page_margin = ($('#layout_page').outerWidth(true) - $('#layout_page').width()) / 2,
-        content_margin = $('#layout_content').outerWidth(true) - $('#layout_content').innerWidth(),
-        sidebar_width = $('#layout-sidebar').outerWidth(true);
+    var page_margin = ($('#current-page-structure').outerWidth(true) - $('#current-page-structure').width()) / 2,
+        content_margin = $('#content').outerWidth(true) - $('#content').innerWidth(),
+        sidebar_width = $('#sidebar').outerWidth(true);
 
     function fixScrolling() {
-        $('#layout_page').removeClass('oversized').css({
+        $('#current-page-structure').removeClass('oversized').css({
             minWidth: '',
             marginRight: '',
             paddingRight: ''
         });
 
         var max_width = 0,
-            fix_required = $('html').is(':not(.responsified)') && $('#layout_content').get(0).scrollWidth > $('#layout_content').width();
+            fix_required = $('html').is(':not(.responsified)') && $('#content').get(0).scrollWidth > $('#content').width();
 
         if (fix_required) {
-            $('#layout_content').children().each(function () {
+            $('#content').children().each(function () {
                 var width = $(this).get(0).scrollWidth + ($(this).outerWidth(true) - $(this).innerWidth());
                 if (width > max_width) {
                     max_width = width;
                 }
             });
 
-            $('#layout_page').addClass('oversized').css({
+            $('#current-page-structure').addClass('oversized').css({
                 minWidth: sidebar_width + content_margin + max_width + page_margin,
                 marginRight: 0,
                 paddingRight: page_margin
@@ -314,7 +314,7 @@ STUDIP.domReady(function () {
                 var last_left = null;
                 return function (top, left) {
                     if (last_left !== left) {
-                        $('#flex-header,#tabs,#layout_footer,#barBottomContainer').css({
+                        $('#navigation-level-1,#tabs,#main-footer,#top-bar').css({
                             transform: 'translate3d(' + left + 'px,0,0)'
                         });
                     }
@@ -326,7 +326,7 @@ STUDIP.domReady(function () {
         }
     }
 
-    if ($('.no-touch #layout_content').length > 0) {
+    if ($('.no-touch #content').length > 0) {
         window.matchMedia('screen').addListener(function() {
             // Try to fix now
             fixScrolling();
diff --git a/resources/assets/javascripts/bootstrap/copyable_links.js b/resources/assets/javascripts/bootstrap/copyable_links.js
index e41d064..d3675ed 100644
--- a/resources/assets/javascripts/bootstrap/copyable_links.js
+++ b/resources/assets/javascripts/bootstrap/copyable_links.js
@@ -21,7 +21,7 @@ $(document).on('click', 'a.copyable-link', function (event) {
     (new Promise((resolve, reject) => {
         let confirmation = $('<div class="copyable-link-confirmation copyable-link-success">');
         confirmation.text($gettext('Link wurde kopiert'));
-        confirmation.insertBefore('#layout_container');
+        confirmation.insertBefore('#content');
 
         // Resolve deferred when animation has ended or after 2 seconds as a
         // fail safe
diff --git a/resources/assets/javascripts/bootstrap/forms.js b/resources/assets/javascripts/bootstrap/forms.js
index 91fc3db..611915e 100644
--- a/resources/assets/javascripts/bootstrap/forms.js
+++ b/resources/assets/javascripts/bootstrap/forms.js
@@ -206,10 +206,10 @@ function createSelect2(element) {
             return select_classes;
         },
         allowClear: placeholder !== undefined,
-        minimumResultsForSearch: $(element).closest('.sidebar').length > 0 ? 15 : 10,
+        minimumResultsForSearch: $(element).closest('#sidebar').length > 0 ? 15 : 10,
         placeholder: placeholder,
         dropdownAutoWidth: dropdownAutoWidth,
-        dropdownParent: $(element).closest('.ui-dialog,.sidebar,body'),
+        dropdownParent: $(element).closest('.ui-dialog,#sidebar,body'),
         templateResult: function(data, container) {
             if (data.element) {
                 let option_classes = $(data.element).attr('class'),
diff --git a/resources/assets/javascripts/bootstrap/global_search.js b/resources/assets/javascripts/bootstrap/global_search.js
index c33fd7f..4d0738e 100644
--- a/resources/assets/javascripts/bootstrap/global_search.js
+++ b/resources/assets/javascripts/bootstrap/global_search.js
@@ -38,7 +38,7 @@ STUDIP.domReady(() => {
     });
 
     // Close search on click on page.
-    $('div#flex-header, div#layout_page, #layout_footer').on('click', function() {
+    $('#navigation-level-1, #current-page-structure, #main-footer').on('click', function() {
         if (!$('#globalsearch-input').hasClass('hidden-js')) {
             STUDIP.GlobalSearch.toggleSearchBar(false, false);
         }
diff --git a/resources/assets/javascripts/bootstrap/header_magic.js b/resources/assets/javascripts/bootstrap/header_magic.js
index f125179..f839ec2 100644
--- a/resources/assets/javascripts/bootstrap/header_magic.js
+++ b/resources/assets/javascripts/bootstrap/header_magic.js
@@ -1,6 +1,6 @@
 STUDIP.domReady(() => {
     // Test if the header is actually present
-    if ($('#barBottomContainer').length > 0) {
+    if ($('#top-bar').length > 0) {
         STUDIP.HeaderMagic.enable();
     }
 });
diff --git a/resources/assets/javascripts/bootstrap/personal_notifications.js b/resources/assets/javascripts/bootstrap/personal_notifications.js
index c154292..281f6f0 100644
--- a/resources/assets/javascripts/bootstrap/personal_notifications.js
+++ b/resources/assets/javascripts/bootstrap/personal_notifications.js
@@ -3,7 +3,7 @@ $(document).on('click', '#notification_list .mark_as_read', STUDIP.PersonalNotif
 STUDIP.domReady(() => {
     STUDIP.PersonalNotifications.initialize();
 
-    $('#notification_container .mark-all-as-read')
+    $('#notification-container .mark-all-as-read')
         .click(STUDIP.PersonalNotifications.markAllAsRead);
     $('#notification_list')
         .mouseenter(STUDIP.PersonalNotifications.setSeen);
diff --git a/resources/assets/javascripts/bootstrap/resources.js b/resources/assets/javascripts/bootstrap/resources.js
index 53a7015..1238cec 100644
--- a/resources/assets/javascripts/bootstrap/resources.js
+++ b/resources/assets/javascripts/bootstrap/resources.js
@@ -134,7 +134,7 @@ STUDIP.ready(function () {
     );
 
     //Event handlers for the individual booking plan print view:
-    jQuery('.sidebar .colour-selector').draggable(
+    jQuery('#sidebar .colour-selector').draggable(
         {
             cursorAt: {
                 left: 28, top: 15
diff --git a/resources/assets/javascripts/bootstrap/sidebar.js b/resources/assets/javascripts/bootstrap/sidebar.js
index af0861e..01e9d96 100644
--- a/resources/assets/javascripts/bootstrap/sidebar.js
+++ b/resources/assets/javascripts/bootstrap/sidebar.js
@@ -1,8 +1,3 @@
-// (De|Re)activate when help tours start|stop
-$(document).on('tourstart.studip tourend.studip', function(event) {
-    STUDIP.Sidebar.setSticky(event.type === 'tourend.studip');
-});
-
 function heightChangeHandler() {
     var curr_height = $(document).height();
     if (doc_height !== curr_height) {
@@ -13,15 +8,15 @@ function heightChangeHandler() {
 
 // Handle dynamic content
 if (window.MutationObserver !== undefined) {
-    // Attach mutation observer to #layout_content and trigger it on
+    // Attach mutation observer to #content and trigger it on
     // changes to class and style attributes (which affect the height
     // of the content). Trigger a recalculation of the sticky kit when
     // a mutation occurs so the sidebar will
     $(document).ready(function() {
-        if ($('#layout_content').length === 0) {
+        if ($('#content').length === 0) {
             return;
         }
-        var target = $('#layout_content').get(0),
+        var target = $('#content').get(0),
             stickyObserver = new window.MutationObserver(function() {
                 window.requestAnimationFrame(function() {
                     $(document.body).trigger('sticky_kit:recalc');
@@ -48,7 +43,7 @@ if (window.MutationObserver !== undefined) {
     // to the previous height before the event occured so recalculation
     // only happens on actual changes
     $(document).on('ajaxComplete', heightChangeHandler);
-    $(document).on('load', '#layout_content img', heightChangeHandler);
+    $(document).on('load', '#content img', heightChangeHandler);
 
     // Specialized handler to trigger recalculation when wysiwyg
     // instances are created.
@@ -59,6 +54,5 @@ if (window.MutationObserver !== undefined) {
 
 // Engage
 STUDIP.domReady(() => {
-    STUDIP.Sidebar.setSticky();
     STUDIP.Sidebar.checkActiveLineHeight();
 });
diff --git a/resources/assets/javascripts/bootstrap/smiley.js b/resources/assets/javascripts/bootstrap/smiley.js
index 4315dd9..d584b1c 100644
--- a/resources/assets/javascripts/bootstrap/smiley.js
+++ b/resources/assets/javascripts/bootstrap/smiley.js
@@ -5,7 +5,7 @@ $(document).on('click', '.smiley-toggle', function(event) {
 
     $.getJSON(element.attr('href')).then(function(json) {
         var container = $(element)
-            .closest('.ui-dialog-content,#layout_content')
+            .closest('.ui-dialog-content,#content')
             .first();
         $('.messagebox', container).remove();
         container.prepend(json.message);
diff --git a/resources/assets/javascripts/bootstrap/wiki.js b/resources/assets/javascripts/bootstrap/wiki.js
index 02c0ce1..24f3119 100644
--- a/resources/assets/javascripts/bootstrap/wiki.js
+++ b/resources/assets/javascripts/bootstrap/wiki.js
@@ -100,9 +100,9 @@ $(document).on('click', '#wiki button[name="submit-and-edit"]', function(event)
                     }
 
                     // Remove messages (and display new messages, if any)
-                    $('#layout_content .messagebox').remove();
+                    $('#content .messagebox').remove();
                     if (response.messages !== false) {
-                        $(response.messages).prependTo('#layout_content');
+                        $(response.messages).prependTo('#content');
                     }
                 });
             }
diff --git a/resources/assets/javascripts/jquery-bundle.js b/resources/assets/javascripts/jquery-bundle.js
index e3724de..82053f6 100644
--- a/resources/assets/javascripts/jquery-bundle.js
+++ b/resources/assets/javascripts/jquery-bundle.js
@@ -71,8 +71,6 @@ import './studip-jquery-selection-helper.js';
 
 import select2 from 'select2/dist/js/select2.full.js';
 
-import 'sticky-kit/dist/sticky-kit.js';
-
 import 'blueimp-file-upload';
 import 'blueimp-file-upload/js/jquery.iframe-transport.js';
 
diff --git a/resources/assets/javascripts/lib/actionmenu.js b/resources/assets/javascripts/lib/actionmenu.js
index 730cbae..dee1e3d 100644
--- a/resources/assets/javascripts/lib/actionmenu.js
+++ b/resources/assets/javascripts/lib/actionmenu.js
@@ -3,7 +3,7 @@
  * @type {[type]}
  */
 function determineBreakpoint(element) {
-    return $(element).closest('.ui-dialog-content').length > 0 ? '.ui-dialog-content' : '#layout_content';
+    return $(element).closest('.ui-dialog-content').length > 0 ? '.ui-dialog-content' : '#content';
 }
 
 /**
diff --git a/resources/assets/javascripts/lib/avatar.js b/resources/assets/javascripts/lib/avatar.js
index a034910..0ada9ad 100644
--- a/resources/assets/javascripts/lib/avatar.js
+++ b/resources/assets/javascripts/lib/avatar.js
@@ -30,7 +30,7 @@ const Avatar = {
                     container.css('max-width', dialog.width() - 220);
                     // No dialog, full page.
                 } else {
-                    dialog = jQuery('#layout_content');
+                    dialog = jQuery('#content');
                     // Responsive view.
                     if (jQuery('html').hasClass('responsified')) {
                         // Adjust maximal cropper container height to page dimensions.
diff --git a/resources/assets/javascripts/lib/blubber.js b/resources/assets/javascripts/lib/blubber.js
index 777f221..d169163 100644
--- a/resources/assets/javascripts/lib/blubber.js
+++ b/resources/assets/javascripts/lib/blubber.js
@@ -18,7 +18,7 @@ const Blubber = {
             let panel_data = $('.blubber_panel').data();
             STUDIP.Vue.load().then(({createApp}) => {
                 STUDIP.Blubber.App = createApp({
-                    el: '#layout_container',
+                    el: '#content-wrapper',
                     data() {
                         return {
                             threads: $('.blubber_threads_widget').data('threads_data'),
diff --git a/resources/assets/javascripts/lib/files.js b/resources/assets/javascripts/lib/files.js
index c013107..d02486d 100644
--- a/resources/assets/javascripts/lib/files.js
+++ b/resources/assets/javascripts/lib/files.js
@@ -9,7 +9,7 @@ const Files = {
 
             STUDIP.Vue.load().then(({createApp}) => {
                 this.filesapp = createApp({
-                    el: "#layout_content",
+                    el: "#content",
                     data() {
                         return {
                             files: jQuery("#files_table_form").data("files") || [],
diff --git a/resources/assets/javascripts/lib/folders.js b/resources/assets/javascripts/lib/folders.js
index 76dfadf..ced430d 100644
--- a/resources/assets/javascripts/lib/folders.js
+++ b/resources/assets/javascripts/lib/folders.js
@@ -78,7 +78,7 @@ const Folders = {
                 if ($(data).hasClass('messagebox_success')) {
                     Folders.removeFolderListEntry(folder_id);
                 }
-                $('#layout_content').prepend(data);
+                $('#content').prepend(data);
             }
         });
     }
diff --git a/resources/assets/javascripts/lib/fullcalendar.js b/resources/assets/javascripts/lib/fullcalendar.js
index c511847..b3eb9d1 100644
--- a/resources/assets/javascripts/lib/fullcalendar.js
+++ b/resources/assets/javascripts/lib/fullcalendar.js
@@ -519,7 +519,7 @@ class Fullcalendar
             loading (isLoading) {
                 if (isLoading) {
                     if (!$('#loading-spinner').length) {
-                        jQuery('#layout_content').append(
+                        jQuery('#content').append(
                             $('<div id="loading-spinner" style="position: absolute; top: calc(50% - 55px); left: calc(50% + 135px); z-index: 9001;">').html(
                                 $('<img>').attr('src', STUDIP.ASSETS_URL + 'images/loading-indicator.svg')
                                     .css({
diff --git a/resources/assets/javascripts/lib/fullscreen.js b/resources/assets/javascripts/lib/fullscreen.js
index d39036b..5d91eb9 100644
--- a/resources/assets/javascripts/lib/fullscreen.js
+++ b/resources/assets/javascripts/lib/fullscreen.js
@@ -32,10 +32,10 @@ const Fullscreen = {
 
         (new Promise((resolve, reject) => {
             var timeout = setTimeout(() => {
-                $('#layout-sidebar').off('transitionend');
+                $('#sidebar').off('transitionend');
                 resolve();
             }, 500);
-            $('#layout-sidebar').one('transitionend', () => {
+            $('#sidebar').one('transitionend', () => {
                 clearTimeout(timeout);
                 resolve();
             });
diff --git a/resources/assets/javascripts/lib/header_magic.js b/resources/assets/javascripts/lib/header_magic.js
index f960d92..410b754 100644
--- a/resources/assets/javascripts/lib/header_magic.js
+++ b/resources/assets/javascripts/lib/header_magic.js
@@ -10,25 +10,25 @@ const scroll = function(scrolltop) {
     if (is_below_the_fold !== was_below_the_fold) {
         $('body').toggleClass('fixed', is_below_the_fold);
 
-        menu = $('#barTopMenu').remove();
+        menu = $('#navigation-level-1-items').remove();
         if (is_below_the_fold) {
             menu.append(
                 $('.action-menu-list li', menu)
                     .remove()
                     .addClass('from-action-menu')
             );
-            menu.appendTo('#barBottomLeft');
+            menu.appendTo('#responsive-menu');
         } else {
             $('.action-menu-list', menu).append(
                 $('.from-action-menu', menu)
                     .remove()
                     .removeClass('from-action-menu')
             );
-            menu.prependTo('#flex-header');
+            menu.prependTo('#navigation-level-1');
 
             NavigationShrinker();
 
-            $('#barTopMenu-toggle').prop('checked', false);
+            $('#navigation-level-1-items-toggle').prop('checked', false);
         }
 
         was_below_the_fold = is_below_the_fold;
@@ -37,7 +37,7 @@ const scroll = function(scrolltop) {
 
 const HeaderMagic = {
     enable() {
-        fold = $('#flex-header').height();
+        fold = $('#navigation-level-1').height();
         Scroll.addHandler('header', scroll);
     },
     disable() {
diff --git a/resources/assets/javascripts/lib/navigation_shrinker.js b/resources/assets/javascripts/lib/navigation_shrinker.js
index dde8618..fe6cc26 100644
--- a/resources/assets/javascripts/lib/navigation_shrinker.js
+++ b/resources/assets/javascripts/lib/navigation_shrinker.js
@@ -2,7 +2,7 @@ import Cookie from './cookie.js';
 
 // Enable shrinking of navigation
 var shrinker = function() {
-    var main = $('#barTopMenu'),
+    var main = $('#navigation-level-1-items'),
         sink = $('li.overflow', main),
         x = 0,
         index = false,
diff --git a/resources/assets/javascripts/lib/overlay.js b/resources/assets/javascripts/lib/overlay.js
index b4c6d4d..52d1c94 100644
--- a/resources/assets/javascripts/lib/overlay.js
+++ b/resources/assets/javascripts/lib/overlay.js
@@ -39,7 +39,7 @@ Overlay.show = function(ajax, containment, secure, callback, delay) {
                 this.element.addClass('modal-overlay-local');
             } else {
                 // Blur background
-                $('#layout_wrapper').addClass('has-overlay');
+                $('body').addClass('has-overlay');
             }
             this.element.appendTo(containment);
         }
@@ -60,7 +60,7 @@ Overlay.hide = function(delay) {
             this.element = null;
         }
 
-        $('#layout_wrapper').removeClass('has-overlay');
+        $('body').removeClass('has-overlay');
         $(window).off('beforeunload.overlay');
     }, delay);
 };
diff --git a/resources/assets/javascripts/lib/personal_notifications.js b/resources/assets/javascripts/lib/personal_notifications.js
index 882d982..90f1053 100644
--- a/resources/assets/javascripts/lib/personal_notifications.js
+++ b/resources/assets/javascripts/lib/personal_notifications.js
@@ -172,13 +172,13 @@ const PersonalNotifications = {
             PageLayout.title_prefix = '';
         }
         if (count) {
-            $('#notification_container').addClass('hoverable');
+            $('#notification-container').addClass('hoverable');
             $('#notification_marker').prop('disabled', false);
             if (count > old_count && audio_notification !== false) {
                 audio_notification.play();
             }
         } else {
-            $('#notification_container').removeClass('hoverable');
+            $('#notification-container').removeClass('hoverable');
             $('#notification_marker').prop('disabled', true);
         }
         if (old_count !== count) {
@@ -186,7 +186,7 @@ const PersonalNotifications = {
             let notification_text = $ngettext('%{ count } Benachrichtigung', '%{ count } Benachrichtigungen', count);
             $('#notification_marker').attr('title', $gettextInterpolate(notification_text, {count: count}));
             updateFavicon(count);
-            $('#notification_container .mark-all-as-read').toggleClass('invisible', count < 2);
+            $('#notification-container .mark-all-as-read').toggleClass('invisible', count < 2);
         }
     },
     isVisited () {
diff --git a/resources/assets/javascripts/lib/questionnaire.js b/resources/assets/javascripts/lib/questionnaire.js
index cfafc8d..d904869 100644
--- a/resources/assets/javascripts/lib/questionnaire.js
+++ b/resources/assets/javascripts/lib/questionnaire.js
@@ -48,7 +48,7 @@ const Questionnaire = {
             }
             if (data.message) {
                 jQuery('.messagebox').hide();
-                jQuery('#layout_content').prepend(data.message);
+                jQuery('#content').prepend(data.message);
             }
         }
         if (jQuery('.questionnaire_widget .widget_questionnaire_' + data.questionnaire_id).length > 0) {
@@ -80,8 +80,8 @@ const Questionnaire = {
             } else {
                 if (data.message) {
                     jQuery('.messagebox').hide();
-                    jQuery('#layout_content').prepend(data.message);
-                    jQuery.scrollTo('#layout_content', 400);
+                    jQuery('#content').prepend(data.message);
+                    jQuery.scrollTo('#content', 400);
                 }
             }
         }
diff --git a/resources/assets/javascripts/lib/resources.js b/resources/assets/javascripts/lib/resources.js
index ac182a9..53ab00f 100644
--- a/resources/assets/javascripts/lib/resources.js
+++ b/resources/assets/javascripts/lib/resources.js
@@ -735,7 +735,7 @@ class Resources
             var calendar = calendarSektion.calendar;
             if (calendar) {
                 if (!$('#loading-spinner').length) {
-                    jQuery('#layout_content').append(
+                    jQuery('#content').append(
                         $('<div id="loading-spinner" style="position: absolute; top: calc(50% - 55px); left: calc(50% + 135px); z-index: 9001;">').html(
                             $('<img>').attr('src', STUDIP.ASSETS_URL + 'images/loading-indicator.svg')
                                 .css({
diff --git a/resources/assets/javascripts/lib/responsive.js b/resources/assets/javascripts/lib/responsive.js
index 87e742c..16e6354 100644
--- a/resources/assets/javascripts/lib/responsive.js
+++ b/resources/assets/javascripts/lib/responsive.js
@@ -56,7 +56,7 @@ const Responsive = {
             '<label for="responsive-toggle">'
         );
 
-        $('<li>', { html: wrapper }).prependTo('#barBottomright > ul');
+        $('<li>', { html: wrapper }).prependTo('#header-links > ul');
     },
 
     // Responsifies the layout. Builds the responsive menu from existing
@@ -68,17 +68,17 @@ const Responsive = {
 
         Responsive.addMenu();
 
-        if ($('#layout-sidebar > section').length > 0) {
+        if ($('#sidebar > section').length > 0) {
             $('<li id="sidebar-menu">')
                 .on('click', () => Sidebar.open())
-                .appendTo('#barBottomright > ul');
+                .appendTo('#header-links > ul');
 
             $('<label id="sidebar-shadow-toggle">')
                 .on('click', () => Sidebar.close())
-                .prependTo('#layout-sidebar');
+                .prependTo('#sidebar');
 
             $('#responsive-toggle').on('change', function() {
-                $('#layout-sidebar').removeClass('visible-sidebar');
+                $('#sidebar').removeClass('visible-sidebar');
                 $('#responsive-navigation').toggleClass('visible', this.checked);
             });
         } else {
@@ -101,7 +101,7 @@ const Responsive = {
         }).reverse().trigger('change');
 
         var sidebar_avatar_menu = $('<div class="sidebar-widget sidebar-avatar-menu">');
-        var avatar_menu = $('#header_avatar_menu');
+        var avatar_menu = $('#avatar-menu');
         var title = $('.action-menu-title', avatar_menu).text();
         var list = $('<ul class="widget-list widget-links">');
         $('<div class="sidebar-widget-header">').text(title).appendTo(sidebar_avatar_menu);
@@ -122,17 +122,15 @@ const Responsive = {
             .append(list)
             .appendTo(sidebar_avatar_menu);
 
-        $('#layout-sidebar > .sidebar').prepend(sidebar_avatar_menu);
+        $('#sidebar').prepend(sidebar_avatar_menu);
     },
 
     setResponsiveDisplay (state = true) {
         $('html').toggleClass('responsive-display', state);
 
         if (state) {
-            Sidebar.disableSticky();
             HeaderMagic.disable();
         } else {
-            Sidebar.enableSticky();
             HeaderMagic.enable();
         }
     },
diff --git a/resources/assets/javascripts/lib/sidebar.js b/resources/assets/javascripts/lib/sidebar.js
index 6768a86..8f01d79 100644
--- a/resources/assets/javascripts/lib/sidebar.js
+++ b/resources/assets/javascripts/lib/sidebar.js
@@ -1,15 +1,6 @@
 import Scroll from './scroll.js';
 
 const Sidebar = {
-    stickyEnabled: true,
-    enableSticky() {
-        this.stickyEnabled = true;
-        this.setSticky();
-    },
-    disableSticky() {
-        this.stickyEnabled = false;
-        this.setSticky(false);
-    },
     open () {
         this.toggle(true);
     },
@@ -17,50 +8,18 @@ const Sidebar = {
         this.toggle(false);
     },
     toggle (visible = null) {
-        visible = visible ?? !$('#layout-sidebar').hasClass('visible-sidebar');
+        visible = visible ?? !$('#sidebar').hasClass('visible-sidebar');
 
         // Hide navigation
         $('#responsive-toggle').prop('checked', false);
         $('#responsive-navigation').removeClass('visible');
 
-        $('#layout-sidebar').toggleClass('visible-sidebar', visible);
-    }
-};
-
-// This function inits the sticky sidebar by using the StickyKit lib
-// <http://leafo.net/sticky-kit/>
-Sidebar.setSticky = function(is_sticky) {
-    if (!this.stickyEnabled) {
-        return;
-    }
-
-    if (is_sticky === undefined || is_sticky) {
-        $('#layout-sidebar .sidebar')
-            .stick_in_parent({
-                offset_top: $('#barBottomContainer').outerHeight(true) + 15,
-                inner_scrolling: true
-            })
-            .on('sticky_kit:stick sticky_kit:unbottom', function() {
-                var stuckHandler = function(top, left) {
-                    $('#layout-sidebar .sidebar').css('margin-left', -left);
-                };
-                Scroll.addHandler('sticky.horizontal', stuckHandler);
-                stuckHandler(0, $(window).scrollLeft());
-            })
-            .on('sticky_kit:unstick sticky_kit:bottom', function() {
-                Scroll.removeHandler('sticky.horizontal');
-                $(this).css('margin-left', 0);
-            });
-    } else {
-        Scroll.removeHandler('sticky.horizontal');
-        $('#layout-sidebar .sidebar')
-            .trigger('sticky_kit:unstick')
-            .trigger('sticky_kit:detach');
+        $('#sidebar').toggleClass('visible-sidebar', visible);
     }
 };
 
 Sidebar.checkActiveLineHeight = () => {
-    $('#layout-sidebar .sidebar .sidebar-widget-content .widget-links li.active a.active').each(function() {
+    $('#sidebar .sidebar-widget-content .widget-links li.active a.active').each(function() {
         var link = $(this);
         var actual_text = link.text();
         link.text('tmp');
diff --git a/resources/assets/javascripts/lib/skip_links.js b/resources/assets/javascripts/lib/skip_links.js
index 7a4d9c9..c237a54 100644
--- a/resources/assets/javascripts/lib/skip_links.js
+++ b/resources/assets/javascripts/lib/skip_links.js
@@ -98,21 +98,6 @@ const SkipLinks = {
         return false;
     },
 
-    injectAriaRoles: function() {
-        jQuery('#main_content').attr({
-            role: 'main',
-            'aria-labelledby': 'main_content_landmark_label'
-        });
-        jQuery('#layout_content').attr({
-            role: 'main',
-            'aria-labelledby': 'layout_content_landmark_label'
-        });
-        jQuery('#layout_infobox').attr({
-            role: 'complementary',
-            'aria-labelledby': 'layout_infobox_landmark_label'
-        });
-    },
-
     insertHeadLines: function() {
         var target = null;
         jQuery('#skip_link_navigation a').each(function() {
@@ -140,7 +125,6 @@ const SkipLinks = {
 
     initialize: function() {
         SkipLinks.insertSkipLinks();
-        SkipLinks.injectAriaRoles();
         SkipLinks.setActiveTarget();
     }
 };
diff --git a/resources/assets/javascripts/studip-ui.js b/resources/assets/javascripts/studip-ui.js
index 962844e..a1df9dc 100644
--- a/resources/assets/javascripts/studip-ui.js
+++ b/resources/assets/javascripts/studip-ui.js
@@ -577,7 +577,7 @@ import { $gettext } from './lib/gettext.js';
             }
             $(window).bind('scroll.datepicker-scroll', _.debounce($.proxy(DpHideOnScroll, null, input), 100, {leading:true, trailing:false}));
 
-            if ($(input).closest('.sidebar').length === 0) {
+            if ($(input).closest('#sidebar').length === 0) {
                 return;
             }
 
diff --git a/resources/assets/stylesheets/highcontrast.scss b/resources/assets/stylesheets/highcontrast.scss
index 2d65b04..27a4d01 100644
--- a/resources/assets/stylesheets/highcontrast.scss
+++ b/resources/assets/stylesheets/highcontrast.scss
@@ -22,8 +22,8 @@ body #scroll-to-top {
     }
 }
 
-body.fixed #barTopMenu li > a,
-#barBottomright > ul > li > a {
+body.fixed #navigation-level-1-items li > a,
+#header-links > ul > li > a {
     color: $white !important;
     text-decoration: underline !important;
 }
@@ -71,23 +71,23 @@ div.index_container div.index_main {
 }
 
 /* HEADER */
-#barBottomLeft,
-#barBottomright {
+#responsive-menu,
+#header-links {
     background-color: $black;
 
 }
 
-#barTopFont {
+#site-title {
     background-color: $black;
     color: $white;
 }
 
-#flex-header {
+#navigation-level-1 {
     background-color: $white;
     border-bottom: 1px solid $black !important;
 }
 
-body.fixed #barTopMenu {
+body.fixed #navigation-level-1-items {
     background-color: $black;
 
     li  a {
@@ -108,20 +108,21 @@ body.fixed #barTopMenu {
 
 }
 
-body:not(.fixed) #barTopMenu > li.active:after,
+body:not(.fixed) #navigation-level-1-items > li.active:after,
 #tabs > li.current:after {
     background-color: $black;
 }
 
 #tabs li,
-#layout_wrapper #layout_page .tabs_wrapper {
+#navigation-level-2,
+#current-page-structure #navigation-level-2 .tabs_wrapper {
     background-color: $white;
 }
 
 #tabs li.current a,
 #tabs li:hover a,
-body:not(.fixed) #barTopMenu li.active .navtitle,
-body:not(.fixed) #barTopMenu li:hover .navtitle {
+body:not(.fixed) #navigation-level-1-items li.active .navtitle,
+body:not(.fixed) #navigation-level-1-items li:hover .navtitle {
     color: $contrast-blue;
 }
 
@@ -150,7 +151,7 @@ body:not(.fixed) #barTopMenu li:hover .navtitle {
 
 }
 
-.responsive-display #layout-sidebar {
+.responsive-display #sidebar {
     background-color: $black;
     background-image: unset;
     border-left: 6px solid $black;
@@ -201,16 +202,15 @@ button.button[disabled]:hover {
 
 /* SIDEBAR AND WIDGETS */
 
-.sidebar .sidebar-image {
+#sidebar .sidebar-image {
     background-image: unset;
     background: $black;
-
 }
 
 .studip-widget .widget-header,
-.sidebar .sidebar-widget-header {
+.sidebar-widget-header {
     background-color: $black !important;
-    color: $white;
+    color: $white !important;
 }
 
 .sidebar-widget-content ul li form,
@@ -448,7 +448,7 @@ table.dates .nextdate {
 }
 
 /* FOOTER */
-#layout_footer {
+#main-footer {
     background-color: $black;
     color: $white;
     font-weight: 700;
@@ -465,8 +465,8 @@ table.dates .nextdate {
 }
 
 /* ICONS */
-body:not(.fixed) #barTopMenu li.active > a img,
-body:not(.fixed) #barTopMenu li:hover > a img,
+body:not(.fixed) #navigation-level-1-items li.active > a img,
+body:not(.fixed) #navigation-level-1-items li:hover > a img,
 form div.files-search.input-group .input-group-append img {
     filter: brightness(0) !important;
 }
@@ -483,7 +483,7 @@ section.course-statusgroups article header h1 a img {
 }
 
 // profile image
-#header_avatar_menu .action-menu-icon,
+#avatar-menu .action-menu-icon,
 .action-menu.is-open .action-menu-icon {
     filter: unset;
 }
@@ -1008,9 +1008,9 @@ a:visited,
     color: $contrast-blue;
 }
 
-#layout_content a,
-#layout_content a:link,
-#layout_content a:visited {
+#content a,
+#content a:link,
+#content a:visited {
     text-decoration: underline;
 }
 
@@ -1420,7 +1420,7 @@ button.skiplink {
 // Notifications: „Desktop-Benachrichtigungen aktivieren“: Blauer Text auf weißem Hintergrund.
 // Benachrichtigungen: Schwarzer Text auf weißem Hintergrund, beim Hovern invertieren.
 
-#notification_container a.enable-desktop-notifications,
+#notification-container a.enable-desktop-notifications,
 #notification_container a.mark-all-as-read {
     background-color: $white;
     color: $contrast-blue;
diff --git a/resources/assets/stylesheets/less/responsive.less b/resources/assets/stylesheets/less/responsive.less
index 93bbfa8..b9a5152 100644
--- a/resources/assets/stylesheets/less/responsive.less
+++ b/resources/assets/stylesheets/less/responsive.less
@@ -174,21 +174,21 @@
 .responsive-display {
     // Hide sidebar from view until .responsified
     &:not(.responsified) {
-        #layout-sidebar {
+        #sidebar {
             display: none;
         }
     }
 
     .media-breakpoint-small-down({
-        #header, #flex-header, #barTopFont, #barTopMenu,
+        #header, #navigation-level-1, #site-title, #barTopMenu,
         #barBottomLeft .current_page, #barBottommiddle, #barBottomLeft, #barBottomArrow,
-        #tabs, .sidebar-image, #sidebar-navigation:not(.show), #barTopFont, #footer, .sidebar-widget-header,
+        #tabs, .sidebar-image, #sidebar-navigation:not(.show), #barTopFont, #main-footer-info, .sidebar-widget-header,
         .tabs_wrapper .colorblock {
             display: none !important;
         }
 
-        #layout_wrapper #layout_page {
-            .secondary-navigation {
+        #current-page-structure {
+            #navigation-level-2 {
                 display: flex;
                 flex-direction: row;
                 flex-wrap: nowrap;
@@ -197,20 +197,20 @@
                 border-bottom: 1px solid @dark-gray-color-40;
 
                 .colorblock,
-                #layout_context_title,
+                #context-title,
                 .context_icon,
                 .tabs_wrapper {
                     transition: unset;
                 }
 
-                #layout_context_title,
+                #context-title,
                 .tabs_wrapper {
                     background: transparent;
                     border-width: 0;
                     flex: 1;
                 }
 
-                #layout_context_title {
+                #context-title {
                     flex: 1;
 
                     overflow: hidden;
@@ -223,12 +223,13 @@
                     }
                 }
             }
-        }
-        #layout_wrapper #layout_page .tabs_wrapper {
-            justify-content: flex-end;
-            .helpbar-container {
-                top: 0px;
-                right: 6px;
+
+            .tabs_wrapper {
+                justify-content: flex-end;
+                .helpbar-container {
+                    top: 0px;
+                    right: 6px;
+                }
             }
         }
         .responsive-hidden {
@@ -246,13 +247,13 @@
             line-height: 20px;
         }
 
-        #barTopAvatar {
+        #avatar-menu-container {
             position: relative;
             bottom: 0px;
             right: 0px;
             line-height: 20px !important;
 
-            #header_avatar_menu {
+            #avatar-menu {
                 display: none;
             }
 
@@ -261,7 +262,7 @@
             }
         }
 
-        #barBottomContainer {
+        #top-bar {
             box-sizing: border-box;
             height: @header-bar-container-height;
             position: fixed;
@@ -271,7 +272,7 @@
             width: 100%;
         }
 
-        #barBottomright, #barBottomright ul {
+        #header-links, #header-links ul {
             box-sizing: border-box;
             flex: 1;
         }
@@ -321,20 +322,15 @@
             display: block;
         }
 
-        #layout_page {
+        #current-page-structure {
             margin-left: 0;
             margin-right: 0;
         }
 
-        #layout_page, #layout_container, #barBottomContainer, #flex-header, #layout_content {
+        #current-page-structure, #top-bar, #navigation-level-1, #layout_content {
             min-width: inherit !important;
         }
 
-        #layout_container {
-            margin-left: 0px;
-            margin-right: 0px;
-        }
-
         #layout_content {
             margin: 0px 4px;
         }
@@ -343,11 +339,11 @@
             right: 0 !important;
             transition: right 300ms;
         }
-        #layout-sidebar.visible-sidebar #sidebar-shadow-toggle {
+        #sidebar.visible-sidebar #sidebar-shadow-toggle {
             display: initial;
         }
 
-        #layout-sidebar {
+        #sidebar {
             #gradient > .horizontal(@brand-color-light, @brand-color-darker);
             background-clip: content-box;
             transition: right 300ms;
@@ -368,20 +364,15 @@
 
             border-left: @responsive-menu-shadow-width solid @responsive-menu-shadow-color;
 
-            .sidebar {
-                box-sizing: border-box;
-
-                &:before {
-                    border: 0 !important;
-                }
-
-                top: auto !important;
-                width: @responsive-menu-width !important;
+            box-sizing: border-box;
 
-                background: inherit;
-                border: 0;
+            &:before {
+                border: 0 !important;
             }
 
+            background: inherit;
+            border: 0;
+
             .widget-links li.active {
                 &:before, &:after {
                     display: none;
@@ -423,7 +414,7 @@
             }
         }
 
-        #layout_footer {
+        #main-footer {
             display: block;
             min-width: 0;
             width: 100vw;
diff --git a/resources/assets/stylesheets/less/variables.less b/resources/assets/stylesheets/less/variables.less
index c362bf5..33efcc5 100644
--- a/resources/assets/stylesheets/less/variables.less
+++ b/resources/assets/stylesheets/less/variables.less
@@ -26,7 +26,7 @@
 
 // Design specific
 @bar-bottom-container-height: 40px;
-@header-height: 70px;
+@header-height: 80px;
 
 // Drag & Drop specific:
 @drag_and_drop_z_index:    1000;
diff --git a/resources/assets/stylesheets/mixins/studip.scss b/resources/assets/stylesheets/mixins/studip.scss
index 2073450..eb156bb 100644
--- a/resources/assets/stylesheets/mixins/studip.scss
+++ b/resources/assets/stylesheets/mixins/studip.scss
@@ -250,6 +250,32 @@
     }
 }
 
+@mixin scrollbox-horizontal() {
+    overflow: auto;
+
+    background:
+        /* Shadow covers */
+        linear-gradient(90deg, white 30%, rgba(255,255,255,0)),
+        linear-gradient(90deg, rgba(255,255,255,0), white 70%) 100% 0,
+
+            /* Shadows */
+        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
+        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 100% 0;
+    background:
+        /* Shadow covers */
+        linear-gradient(90deg, white 30%, rgba(255,255,255,0)),
+        linear-gradient(90deg, rgba(255,255,255,0), white 70%) 100% 0,
+
+            /* Shadows */
+        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
+        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 100% 0;
+    background-repeat: no-repeat;
+    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
+
+    /* Opera doesn't support this in the shorthand */
+    background-attachment: local, local, scroll, scroll;
+}
+
 @mixin list-unstyled {
     padding-left: 0;
     list-style: none;
diff --git a/resources/assets/stylesheets/print.less b/resources/assets/stylesheets/print.less
index c6afb4f..4683971 100644
--- a/resources/assets/stylesheets/print.less
+++ b/resources/assets/stylesheets/print.less
@@ -32,18 +32,18 @@ body, input, textarea, td, th, blockquote, p, form, ul, h4 {
 #layout_wrapper {
     display: block;
 }
-#layout_content {
+#content {
     margin-right: 0;
 }
 
-#header *, #barTopMenu, #barTopTools, #barTopStudip, #barBottomLeft,
-#barBottommiddle, #barBottomright, #barBottomshadow, #tabs, #tabs2,
+#header *, #navigation-level-1-items, #barTopTools, #top-logo, #responsive-menu,
+#barBottommiddle, #header-links, #barBottomshadow, #tabs, #tabs2,
 #layout_infobox, td.infoboxrahmen, td.infobox, td.infobox-img,
-#schedule_icons, #edit_inst_entry, #layout_sidebar, #barBottomContainer,
+#schedule_icons, #edit_inst_entry, #sidebar, #top-bar,
 .messagebox_buttons a.close, a.button, button.button,
-#layout-sidebar, .helpbar-container, .helpbar,
+#sidebar, .helpbar-container, .helpbar,
 #skip_link_navigation, .skip_target, nav.action-menu,
-#barTopFont {
+#site-title {
     display: none !important;
 }
 
@@ -108,7 +108,7 @@ td.rahmen_table_row_odd {
 }
 
 /* --- stud.ip-title oben  -------------------------------------------------- */
-#barTopFont {
+#site-title {
     font-weight: normal;
     display: block !important;
     font-size: 18pt;
@@ -119,11 +119,11 @@ td.rahmen_table_row_odd {
 }
 
 /* --- studip-logo im footer ------------------------------------------------ */
-#layout_footer * {
+#main-footer * {
     display: none;
 }
 
-#layout_footer {
+#main-footer {
     width: 100%;
     text-align: center;
     padding: 2pt 0 0 0;
diff --git a/resources/assets/stylesheets/scss/blubber.scss b/resources/assets/stylesheets/scss/blubber.scss
index 53b4279..a5bc943 100644
--- a/resources/assets/stylesheets/scss/blubber.scss
+++ b/resources/assets/stylesheets/scss/blubber.scss
@@ -492,8 +492,8 @@
 
 #blubber-index {
     @media screen and (max-width: $major-breakpoint-small) {
-        #page_title_container,
-        .secondary-navigation {
+        #page-title-container,
+        #navigation-level-2 {
             display: none;
         }
     }
diff --git a/resources/assets/stylesheets/scss/contentbar.scss b/resources/assets/stylesheets/scss/contentbar.scss
index 5ccab9d..ba8abc5 100644
--- a/resources/assets/stylesheets/scss/contentbar.scss
+++ b/resources/assets/stylesheets/scss/contentbar.scss
@@ -92,21 +92,20 @@
 }
 
 body.consuming_mode {
-    #barBottomContainer, #flex-header, .secondary-navigation, #barTopStudip, #page_title_container {
-        max-height: 0px;
-        opacity: 0;
-        overflow: hidden;
-    }
-
-    #layout_wrapper {
-        padding-top: 0px;
+    #main-header, #main-footer {
+        display: none;
     }
 
-    #layout-sidebar {
+    #sidebar {
         margin-left: -280px;
         opacity: 0;
     }
 
+    #content {
+        grid-column: 1/3;
+        grid-row: 1/3;
+    }
+
     .contentbar {
         margin-left: 10px;
         margin-right: -0;
diff --git a/resources/assets/stylesheets/scss/contents.scss b/resources/assets/stylesheets/scss/contents.scss
index 5e8b8aa..a0a3e3f 100644
--- a/resources/assets/stylesheets/scss/contents.scss
+++ b/resources/assets/stylesheets/scss/contents.scss
@@ -41,7 +41,6 @@
     grid-template-columns: repeat(auto-fit, 270px);
     grid-gap: 15px;
     list-style: none;
-    max-width: 1170px;
     padding: 0;
 
     .content-item {
diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 8a0cf62..2c6649f 100644
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -83,7 +83,7 @@ $blockadder-items: (
     biography-achievements: medal,
     biography-career: ranking,
     biography-personal-information: own-license,
-    biography-goals: radar 
+    biography-goals: radar
 );
 
 $achievement-types: (
@@ -252,12 +252,8 @@ $consum_ribbon_width: calc(100% - 58px);
     &.consume {
         overflow: hidden;
     }
-    #layout_container {
-        overflow-x: hidden;
+    #content-wrapper {
         position: relative;
-        #layout_content {
-            overflow: hidden;
-        }
     }
 }
 
@@ -449,7 +445,7 @@ $consum_ribbon_width: calc(100% - 58px);
     box-shadow: 2px 2px #ccc;
     position: absolute;
     right: -570px;
-    top: 15px;
+    top: 0;
     height: 100%;
     max-width: calc(100% - 28px);
     display: flex;
@@ -4127,7 +4123,7 @@ i m a g e  m a p  b l o c k
 i m a g e  m a p  b l o c k  e n d
 * * * * * * * * * * * * * * * * */
 
-/* * * * * * * * * * * * * * 
+/* * * * * * * * * * * * * *
 b i o g r a p h y  b l o c k
 * * * * * * * * * * * * * */
 
@@ -4154,7 +4150,7 @@ b i o g r a p h y  b l o c k
                 margin-top: 0;
             }
         }
-        
+
     }
 }
 
@@ -4922,7 +4918,7 @@ text block end
         display: table;
         width: 100%;
     }
-    
+
     .cw-timeline-item {
         margin-bottom: 50px;
         position: relative;
@@ -4942,7 +4938,7 @@ text block end
                     border: solid 2px $color;
                 }
             }
-            
+
             border-radius: 50%;
 
             img {
@@ -5031,8 +5027,8 @@ text block end
                 position: absolute;
                 left: calc(40% + 40px);
                 top: 18px;
-                width: 0; 
-                height: 0; 
+                width: 0;
+                height: 0;
                 border-top: 7px solid transparent;
                 border-bottom: 7px solid transparent;
             }
diff --git a/resources/assets/stylesheets/scss/fullscreen.scss b/resources/assets/stylesheets/scss/fullscreen.scss
index 3c4e0c2..ae1e542 100644
--- a/resources/assets/stylesheets/scss/fullscreen.scss
+++ b/resources/assets/stylesheets/scss/fullscreen.scss
@@ -11,38 +11,56 @@ $transition-duration: 300ms;
     cursor: pointer;
     float: right;
     height: 28px;
+
+    @include background-icon(zoom-in2, clickable, 20);
+    background-position: center;
+    background-repeat: no-repeat;
+
+    text-indent: 200%;
+    overflow: hidden;
+
+    clear: both;
+    float: right;
+
+    position: relative;
+    top: 1px;
+    right: 12px;
+
+    cursor: pointer;
+
+    z-index: 100;
 }
 
 html:not(.is-fullscreen-immediately) {
-    #barBottomContainer,
-    #flex-header,
-    .secondary-navigation {
+    #top-bar,
+    #navigation-level-1,
+    #navigation-level-2 {
         transition: top $transition-duration, margin-bottom $transition-duration, opacity $transition-duration;
     }
-    #layout-sidebar {
+    #sidebar {
         transition: left $transition-duration, margin-right $transition-duration, opacity $transition-duration;
     }
-    #layout_footer {
+    #main-footer {
         transition: opacity $transition-duration, max-height $transition-duration, padding $transition-duration;
     }
 }
 
 html.is-fullscreen {
-    #barBottomContainer,
-    #flex-header,
-    .secondary-navigation {
+    #top-bar,
+    #navigation-level-1,
+    #navigation-level-2 {
         margin-bottom: -70px;
         opacity: 0;
         top: -142px;
     }
 
-    #layout-sidebar {
+    #sidebar {
         left: -300px;
         margin-right: -270px;
         opacity: 0;
     }
 
-    #layout_footer {
+    #main-footer {
         opacity: 0;
         max-height: 0px;
         padding: 0px;
diff --git a/resources/assets/stylesheets/scss/globalsearch.scss b/resources/assets/stylesheets/scss/globalsearch.scss
index 61aa9d9..2ff6b1a 100644
--- a/resources/assets/stylesheets/scss/globalsearch.scss
+++ b/resources/assets/stylesheets/scss/globalsearch.scss
@@ -299,7 +299,7 @@ html:not(.size-large) {
     }
 
     &.globalsearch-visible {
-        #barBottomright ul {
+        #header-links ul {
             li {
                 display: none;
             }
@@ -313,7 +313,7 @@ html:not(.size-large) {
             z-index: 0;
         }
 
-        #layout_page {
+        #current-page-structure {
             position: relative;
             filter: blur(1px);
 
diff --git a/resources/assets/stylesheets/scss/header.scss b/resources/assets/stylesheets/scss/header.scss
index 975bd0d..0c36b89 100644
--- a/resources/assets/stylesheets/scss/header.scss
+++ b/resources/assets/stylesheets/scss/header.scss
@@ -1,9 +1,10 @@
 /* --- header.css ----------------------------------------------------------- */
-#layout_wrapper {
+body > header {
     box-sizing: border-box;
     padding-top: $bar-bottom-container-height;
 }
-#barBottomContainer {
+
+#top-bar {
     background-color: $base-color;
     border: 1px $brand-color-darker;
     color: $contrast-content-white;
@@ -22,8 +23,8 @@
     z-index: 10000;
 
 }
-#barBottomLeft,
-#barTopFont {
+#responsive-menu,
+#site-title {
     flex: 0 0 auto;
     padding: 0 15px;
     z-index: 2;
@@ -35,10 +36,10 @@ html {
     scroll-padding-top: calc($bar-bottom-container-height + 1em);
 }
 
-#layout_footer,
-#barBottomright {
+#main-footer,
+#header-links {
     > ul > li > a {
-        color: $contrast-content-white;
+        color: $white;
         margin: 0 6px;
         text-decoration: none;
         &:hover {
@@ -47,12 +48,12 @@ html {
     }
 }
 
-#layout_footer {
+#main-footer {
     > ul {
         display: flex;
-        align-items: center;
+        flex: 1;
         flex-wrap: wrap;
-        justify-content: space-between;
+        justify-content: flex-end;
         list-style-type: none;
         min-height: 30px;
         padding: 0;
@@ -63,7 +64,7 @@ html {
     }
 }
 
-#barBottomright {
+#header-links {
     flex: 0 1 auto;
     justify-self: flex-end;
     > ul {
@@ -80,11 +81,11 @@ html {
     }
 }
 
-#barTopAvatar {
+#avatar-menu-container {
     display: inline-flex;
 }
 
-#header_avatar_menu {
+#avatar-menu {
     height: 30px;
     margin: 0;
     vertical-align: text-bottom;
@@ -151,10 +152,11 @@ html {
 }
 
 .header_avatar_container {
-    align-items: center;
+    align-items: end;
+    flex: 0;
 }
 
-#barTopFont {
+#site-title {
     flex: 1;
     color: $white;
     margin-left: 0;
@@ -164,7 +166,7 @@ html {
 }
 
 .studip-logo {
-   @include hide-text();
+    @include hide-text();
     background-repeat: no-repeat;
 
     @include retina-background-image('logos/studip4-logo.png', 'logos/studip4-logo@2x.png', 130px, 92px);
@@ -174,31 +176,21 @@ html {
     display: block;
     width: 130px;
     height: 81px;
-    margin-top: -10px;
 }
 
-#barTopStudip {
+#top-logo {
     margin-left: 20px;
     margin-right: 12px;
 }
 
-#barTopLogo {
-    left: 0;
-    position: absolute;
-    top: 0;
-}
-
-
-#flex-header {
-    height: $header-height;
+#navigation-level-1 {
     background-color: $dark-gray-color-5;
-
-    position: relative;
+    height: $header-height;
     z-index: 3;
 }
 
 // Slide menu in header navigation
-#barBottomLeft {
+#responsive-menu {
     box-sizing: border-box;
     overflow-x: hidden;
     padding: 0;
@@ -209,7 +201,7 @@ html {
     }
 }
 body.fixed {
-    #barBottomLeft {
+    #responsive-menu {
         overflow-x: visible;
         padding: 0 15px;
         text-indent: 0;
diff --git a/resources/assets/stylesheets/scss/index.scss b/resources/assets/stylesheets/scss/index.scss
index ffa3221..47d21cb 100644
--- a/resources/assets/stylesheets/scss/index.scss
+++ b/resources/assets/stylesheets/scss/index.scss
@@ -1,129 +1,124 @@
-div.index_container {
-    margin: 0 0;
-    top: 111px;
-    bottom: 0;
-    width: 100%;
-    height: calc(100% - 110px);
-
-    ul#tabs {
-        display: none;
-    }
+#main-header {
+    grid-column: 1 / 3;
+    grid-row: 1 / 1;
+}
 
-    #background-desktop {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: -1;
-    }
+#content {
+    grid-column: 1 / 3;
+    grid-row: 2 / 2;
+}
 
-    #background-mobile {
-        display: none;
-        z-index: -1;
-    }
+#background-desktop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+}
 
-    div.messagebox {
-        margin-left: 50px;
-        margin-top: 50px;
-        width: 428px;
-    }
+#background-mobile {
+    display: none;
+    z-index: -1;
+}
 
-    div.index_main {
-        background-color: rgba(255, 255, 255, 0.8);
-        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
-        margin-left: 50px;
-        margin-top: 50px;
-        width: 500px;
+#loginbox {
+    background-color: rgba(255, 255, 255, 0.8);
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+    margin-left: 50px;
+    margin-top: 50px;
+    padding: 20px;
+    width: 450px;
 
-        & > div {
-            padding: 20px;
-        }
+    header {
+        margin: 10px 0 0 10px;
 
-        form {
-            padding: 20px;
+        h1 {
+            border-bottom: 0;
         }
+    }
 
-        footer {
-            overflow: auto;
-            padding: 20px;
+    nav {
+        ul {
+            display: inline-block;
+            list-style-type: none;
+            margin: 0;
+            width: 450px;
+            padding: 0 10px;
 
-            div#languages {
-                border-top: 1px solid $light-gray-color;
-                font-size: 0.9em;
-                padding: 10px;
+            .login_link {
+                display: inline-block;
+                width: 180px;
+                vertical-align: top;
+                padding-right: 25px;
 
                 a {
-                    padding-right: 10px;
+                    font-size: 1.5em;
+
+                    p {
+                        font-size: 0.5em;
+                        color: $black;
+                    }
                 }
             }
+        }
+    }
 
-            div#contrast {
-                display: flex;
-                align-items: center;
-                gap: 5px;
-                border-top: 1px solid $light-gray-color;
-                font-size: 0.9em;
-                padding: 10px;
+    footer {
+        overflow: auto;
 
-                a {
-                    text-decoration: underline;
-                    color: $base-color;
+        #languages {
+            border-top: 1px solid $light-gray-color;
+            font-size: 0.9em;
+            padding: 10px;
 
-                    &:hover, &:focus {
-                        font-size: 1em;
-                        color: $red;
-                    }
-                }
+            a {
+                padding-right: 10px;
             }
+        }
 
-            div.login_info {
-                border-top: 1px solid $light-gray-color;
-                font-size: 0.8em;
-                div {
-                    text-align: right;
-                    float: left;
-                    padding: 5px;
+        #contrast {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            border-top: 1px solid $light-gray-color;
+            font-size: 0.9em;
+            padding: 10px;
 
-                    &:last-child {
-                        float:right;
-                    }
+            a {
+                text-decoration: underline;
+                color: $base-color;
+
+                &:hover, &:focus {
+                    font-size: 1em;
+                    color: $red;
                 }
             }
-            & > a {
-                margin-left: 12px;
-            }
         }
-        nav {
-            h1 {
-                border-bottom: 0;
-            }
-            padding: 10px;
-            margin-left: 20px;
-            margin-top: 20px;
-            display: inline-block;
-            width: 450px;
-            div.login_link {
-                display: inline-block;
-                width: 180px;
-                vertical-align: top;
-                padding-right: 25px;
-                a {
-                    font-size: 1.5em;
-                    p {
-                        font-size: 0.5em;
-                        color: $black;
-                    }
+
+        div.login_info {
+            border-top: 1px solid $light-gray-color;
+            font-size: 0.8em;
+            div {
+                text-align: right;
+                float: left;
+                padding: 5px;
+
+                &:last-child {
+                    float:right;
                 }
             }
         }
-
+        & > a {
+            margin-left: 12px;
+        }
     }
 }
 
 #index,
 #login {
     .messagebox {
-        margin-bottom: -25px;
+        margin: 50px 0 -25px 50px;
+        width: 418px;
     }
 }
diff --git a/resources/assets/stylesheets/scss/layouts.scss b/resources/assets/stylesheets/scss/layouts.scss
index 1a1d076..2f0a94f 100644
--- a/resources/assets/stylesheets/scss/layouts.scss
+++ b/resources/assets/stylesheets/scss/layouts.scss
@@ -1,56 +1,77 @@
-// TODO: LESSify
+// TODO: SCSSify
 
 $page-margin: 15px;
 
-$sidebar-width: 250px;
-$sidebar-padding: 12px;
-$sidebar-border-width: 1px;
-
 $content-width: 400px;
 $content-margin: 12px;
 
+$sidebar-padding: 12px;
+$sidebar-width: 270px;
+
+$footer-height: 32px;
+
 $site-width: ($page-margin * 2 + $sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);
 $page-width: ($sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);
 
+$grid-gap: 0;
 
-/* --- Layouts -------------------------------------------------------------- */
-#layout_page {
-    border-radius: 0 0 2px 2px;
-    box-sizing: border-box;
-    clear: both;
-    margin: 0;
+body {
     background-color: $white;
+    display: grid;
+    grid-column-gap: 5px;
+    grid-row-gap: $grid-gap;
+    grid-template-columns: ($sidebar-width + $sidebar-padding) 1fr;
+    grid-template-rows: auto 1fr $footer-height;
 }
 
-// for old pages without template layout
-#layout_table {
-    background-color: $light-gray-color-60;
-    border: 20px solid $white;
-    margin: 0;
-    padding: 0;
-    width: 100%;
+#main-header {
+    grid-column: 1 / 3;
+    grid-row: 1 / 2;
+}
 
-    td { vertical-align: top; }
+#top-bar {
+    height: 40px;
+    min-width: $site-width;
+    z-index: 1001; // High enough so it will be above the sidebar
 }
 
-#layout_container {
+#navigation-level-1 {
+    align-content: stretch;
+    align-items: stretch;
     background-color: $white;
     border-radius: 0 0 2px 2px;
-    /*margin: 0;*/
-    padding-top: 15px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: flex-start;
+    min-width: $site-width;
+    width: 100%;
+
+    > ul {
+        flex: 0 0 auto;
+        height: 55px;
+    }
+
+    #top-logo {
+        flex: 0 1 auto;
+        margin-right: 12px;
+        margin-top: -13px;
+    }
 }
 
-#page_title_container {
-    float: left;
-    background-color: $white;
-    line-height: 20px;
-    margin-left: 15px;
-    margin-right: 15px;
-    min-height: 45px;
+/* --- Layouts -------------------------------------------------------------- */
+#current-page-structure {
+    background-color: #fff;
+    border-radius: 0 0 2px 2px;
+    width: 100%;
+
+    &.oversized {
+        overflow: visible;
+    }
 }
 
-.secondary-navigation {
+#navigation-level-2 {
     position: relative;
+
     .colorblock {
         position: absolute;
         top: 0;
@@ -59,7 +80,7 @@ $page-width: ($sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2
         width: $page-margin;
     }
 
-    #layout_context_title {
+    #context-title {
         font-size: 1.1em;
         height: 30px;
         padding-left: $page-margin;
@@ -75,6 +96,14 @@ $page-width: ($sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2
     }
 
     .tabs_wrapper {
+        align-items: stretch;
+        background-color: $dark-gray-color-10;
+        border-bottom: 1px solid $dark-gray-color-40;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        font-size: 0.9em;
+        justify-content: space-between;
         padding-left: 27px;
     }
 
@@ -83,7 +112,7 @@ $page-width: ($sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2
             width: 0;
         }
 
-        #layout_context_title {
+        #context-title {
             color: rgba(0, 0, 0, 0);
             height: 0;
             max-height: 35px;
@@ -99,94 +128,122 @@ $page-width: ($sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2
         }
     }
 }
-#current_page_title {
-    font-weight: bold;
-    font-size: 1.4em;
-    position: relative;
-    top: 20px;
-}
 
-#layout_page.oversized {
-    overflow: visible;
+#tabs {
+    width: 100%;
+    flex: 1;
+    padding-left: $page-margin;
+    transition: margin-left;
+    transition-duration: 300ms;
+    transition-delay: 500ms;
 }
 
+#sidebar {
+    border-left: 1px dashed $brand-color-darker;
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+}
 
-#layout_content {
-    box-sizing: border-box;
-    @include scrollbox-horizontal();
+#content-wrapper {
+    background-color: $white;
+    display: inline-flex;
+    grid-column: 2 / 3;
+    grid-row: 2 / 3;
+    justify-content: flex-start;
+    margin: 15px 15px 15px 2px;
     padding: 0 $content-margin 47px $content-margin;
+    position: relative;
     vertical-align: top;
-    min-width: $content-width;
 
     .oversized & {
         overflow: visible;
     }
 }
 
-#layout_sidebar {
-    background: inherit;
-    border-left: 1px dashed $brand-color-darker;
-    max-width: $sidebar-width;
-    width: $sidebar-width;
-    min-width: $sidebar-width;
-    padding: $sidebar-padding;
+#content {
+    flex: 1;
 }
 
-#layout_wrapper {
-    @include clearfix();
-    clear: both;
-    min-width: 800px; // 800px breite ist minimum
-    min-height: 100%;
+// for old pages without template layout
+#layout_table {
+    background-color: $light-gray-color-60;
+    border: 20px solid #fff;
+    margin: 0;
+    padding: 0;
     width: 100%;
-    height: auto !important;
-    margin: 0 auto;
+
+    td { vertical-align: top; }
 }
 
-#layout_footer {
+#page-title-container {
+    float: left;
+    background-color: #fff;
+    line-height: 20px;
+    margin-left: 15px;
+    margin-right: 15px;
+    min-height: 45px;
+}
+
+#context-title {
+    font-size: 1.1em;
+    height: 30px;
+    padding-left: $page-margin;
+    max-height: 30px;
+    overflow: hidden;
+
+    background: linear-gradient(to bottom, $dark-gray-color-5, $dark-gray-color-10);
+
+    > .context_icon {
+        margin: 7px 1px 0 9px;
+        vertical-align: text-bottom;
+    }
+}
+
+#page-title {
+    font-weight: bold;
+    font-size: 1.4em;
+    position: relative;
+    top: 20px;
+}
+
+#main-footer {
     background-color: $base-color;
-    color: $contrast-content-white;
+    color: $white;
     display: flex;
     padding: 2px 0;
-    min-width: $site-width;
-    width: 100%;
+    grid-column: 1 / 3;
+    grid-row: 3 / 4;
 }
-#footer {
-    flex-grow: 1;
+
+#main-footer-info {
     margin-left: 8px;
     margin-top: 2px;
     line-height: 28px;
 }
 
-#layout_wrapper {                // the main flex, dividing all elements into flexing rows
+#navigation-level-1 {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     flex-wrap: nowrap;
     align-content: stretch;
     align-items: stretch;
-    justify-content: flex-start;
+    justify-content: space-between;
 
+    width: 100%;
     min-width: $site-width;
 
-    #flex-header {              // first row of flex-main
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        align-content: stretch;
-        align-items: stretch;
-        justify-content: space-between;
-
-        width: 100%;
-        min-width: $site-width;
+    border-bottom: 1px solid $light-gray-color-40;
+}
 
-        border-bottom: 1px solid $light-gray-color-40;
-    }
+#top-bar {       // second row of flex-main
+    flex: 0 1 auto;
+    z-index: 1001; // High enough so it will be above the sidebar
+}
 
-    #barBottomContainer {       // second row of flex-main
-        min-width: $site-width;
-        z-index: 1001; // High enough so it will be above the sidebar
-    }
+body {
+    width: 100%;
 
-    #layout_page { // third row of flex-main
+    #current-page-structure { // third row of flex-main
         display: flex;
         flex-direction: column;
         flex-wrap: nowrap;
@@ -215,20 +272,15 @@ $page-width: ($sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2
             transition-delay: 500ms;
         }
 
-        #layout_container {          // row 3 of layout_page
-            display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
-            align-content: stretch;
-            align-items: stretch;
-            justify-content: flex-start;
+        > ul { // column 1 of flex-header
+            flex: 1 1 auto;
+        }
 
-            flex-grow: 1;
-            min-width: $page-width;
+        #top-logo {
+            flex: 0 1 auto;
+            margin-right: 12px;
+            margin-top: -13px;
 
-            #layout_content {           // column 1 of layout_container
-                flex-grow: 1;
-            }
         }
     }
 }
diff --git a/resources/assets/stylesheets/scss/mobile.scss b/resources/assets/stylesheets/scss/mobile.scss
index 2f19efc..d339d19 100644
--- a/resources/assets/stylesheets/scss/mobile.scss
+++ b/resources/assets/stylesheets/scss/mobile.scss
@@ -1,5 +1,5 @@
 @include media-breakpoint-small-down(){
-  #layout_wrapper { min-width: 0 !important; }
+  body > header { min-width: 0 !important; }
   #login div.index_container .messagebox,
   #index div.index_container .messagebox,
   #request_new_password div.index_container .messagebox,
@@ -11,7 +11,7 @@
 }
 
 @include media-breakpoint-tiny-down(){
-    #barTopStudip img {
+    #top-logo img {
         height: 33px;
         margin-top: 5px;
         width: 153px;
diff --git a/resources/assets/stylesheets/scss/navigation-hoverborder.scss b/resources/assets/stylesheets/scss/navigation-hoverborder.scss
index e3b3838..85621e3 100644
--- a/resources/assets/stylesheets/scss/navigation-hoverborder.scss
+++ b/resources/assets/stylesheets/scss/navigation-hoverborder.scss
@@ -30,7 +30,7 @@ $transition-duration: 300ms;
     opacity: 0;
 }
 
-body:not(.fixed) #barTopMenu {
+body:not(.fixed) #navigation-level-1-items {
     > li.active {
         @include border-beneath($dark-gray-color-80);
     }
diff --git a/resources/assets/stylesheets/scss/navigation.scss b/resources/assets/stylesheets/scss/navigation.scss
index 5884b04..50e47a2 100644
--- a/resources/assets/stylesheets/scss/navigation.scss
+++ b/resources/assets/stylesheets/scss/navigation.scss
@@ -1,9 +1,9 @@
 /* --- main navigation ----------------------------------------------------- */
-body:not(.fixed) #barTopMenu {
+body:not(.fixed) #navigation-level-1-items {
     align-self: flex-end;
 
     margin: 0 0 4px 5px;
-    padding: 0;
+    padding: 20px 0 0 0;
     z-index: 1000;
     font-size: 0;
 
@@ -12,7 +12,6 @@ body:not(.fixed) #barTopMenu {
         list-style-type: none;
         width: 64px;
         height: 55px;
-        padding: 0;
         z-index: 2;
         font-size: $font-size-base;
     }
@@ -249,7 +248,7 @@ html.no-touch {
 }
 
 body.fixed {
-    #flex-header {
+    #navigation-level-1 {
         height: $header-height;
     }
 
@@ -258,7 +257,7 @@ body.fixed {
         max-height: $bar-bottom-container-height;
         height: auto;
     }
-    #barTopMenu {
+    #navigation-level-1-items {
         background-color: $base-color;
 
         list-style: none;
@@ -319,8 +318,8 @@ body.fixed {
 
         }
     }
-    #barBottomLeft:hover #barTopMenu,
-    #barTopMenu-toggle:checked ~ #barTopMenu {
+    #responsive-menu:hover #navigation-level-1-items,
+    #barTopMenu-toggle:checked ~ #navigation-level-1-items {
         display: block;
     }
 }
diff --git a/resources/assets/stylesheets/scss/oauth2.scss b/resources/assets/stylesheets/scss/oauth2.scss
index a633f1b..552cfda 100644
--- a/resources/assets/stylesheets/scss/oauth2.scss
+++ b/resources/assets/stylesheets/scss/oauth2.scss
@@ -11,7 +11,7 @@ article.admin-oauth2--setup {
 
     font-size: 16px;
 
-    #layout-sidebar, #layout_footer {
+    #sidebar, #main-footer {
         display: none;
     }
 
diff --git a/resources/assets/stylesheets/scss/personal-notifications.scss b/resources/assets/stylesheets/scss/personal-notifications.scss
index e8e9339..c397c1b 100644
--- a/resources/assets/stylesheets/scss/personal-notifications.scss
+++ b/resources/assets/stylesheets/scss/personal-notifications.scss
@@ -18,7 +18,7 @@
     }
 }
 
-#notification_container {
+#notification-container {
     $arrow-height: 10px;
 
     $list-width: 400px;
diff --git a/resources/assets/stylesheets/scss/resources.scss b/resources/assets/stylesheets/scss/resources.scss
index 5fa6df5..628d37d 100644
--- a/resources/assets/stylesheets/scss/resources.scss
+++ b/resources/assets/stylesheets/scss/resources.scss
@@ -46,7 +46,7 @@ tr.resource-planning-selected-request {
     position: absolute;
 }
 
-#layout-sidebar .room-search-tree-widget {
+#sidebar .room-search-tree-widget {
     max-height: unset !important;
 }
 
@@ -292,7 +292,7 @@ ul.resource-tree {
 
 @media screen and (min-width: 1024px) {
     /* individual booking plan print view */
-    .sidebar .colour-selectors {
+    #sidebar .colour-selectors {
         display: flex;
         flex-direction: column;
         margin: 1em;
diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss
index 51bb9c2..e44196c 100644
--- a/resources/assets/stylesheets/scss/sidebar.scss
+++ b/resources/assets/stylesheets/scss/sidebar.scss
@@ -1,25 +1,11 @@
-$sidebar-width: 270px;
-
-#layout-sidebar {
+#sidebar {
     background: $white;
-    flex: 0 1 auto;
-    position: relative;
-    left: 0px;
-    margin-right: 5px;
-    margin-left: 15px;
-    text-align: left;
-    min-width: 270px;
-}
-.sidebar {
-    padding-bottom: 7px;
-    width: $sidebar-width;
-    z-index: 2;
-
     border-left: 0;
     display: inline-block;
-    flex: 0 0 auto;
-    margin-bottom: 1em;
-    position: relative;
+    margin-top: 15px;
+    padding: 0 5px 7px 15px;
+    text-align: left;
+    z-index: 2;
 
     .sidebar-image {
         width: $sidebar-width;
@@ -79,7 +65,8 @@ $sidebar-width: 270px;
     .sidebar-widget-placeholder {
         background: $white;
         border: 1px solid $content-color-40;
-        margin: 15px 0px 0;
+        margin: 15px 0 0;
+        width: $sidebar-width - 2px;
     }
     .sidebar-widget-header {
         @include clearfix();
diff --git a/resources/assets/stylesheets/scss/table_of_contents.scss b/resources/assets/stylesheets/scss/table_of_contents.scss
index 811ca9a..4298e3d 100644
--- a/resources/assets/stylesheets/scss/table_of_contents.scss
+++ b/resources/assets/stylesheets/scss/table_of_contents.scss
@@ -32,7 +32,7 @@ ul.numberedchapters {
     z-index: 100;
     position: absolute;
     right: 2px;
-    top: 176px;
+    top: -10px;
     background-color: $white;
     min-height: 10%;
     max-height: 100%;
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index bd32297..517949b 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -28,13 +28,15 @@ $headings-color:          #000;
 
 // Design specific
 $bar-bottom-container-height: 40px;
-$header-height: 70px;
+$header-height: 80px;
 
 //Avatar sizes:
 $avatar-small:  25px;
 $avatar-medium: 100px;
 $avatar-normal: 250px;
 
+$sidebar-border-width: 1px;
+
 $drag_and_drop_z_index: 1000;
 $drag_and_drop_border: 1px solid $base-color;
 
diff --git a/resources/assets/stylesheets/studip.less b/resources/assets/stylesheets/studip.less
index 36ca323..ed40030 100644
--- a/resources/assets/stylesheets/studip.less
+++ b/resources/assets/stylesheets/studip.less
@@ -478,9 +478,9 @@ a.new-member {
     brightness(100% - hsvvalue(@base-color) + hsvvalue(#28497c));
 }
 
-#barTopMenu li a img,
-#barTopMenu li a canvas,
-#layout-sidebar .sidebar-image > img {
+#navigation-level-1-items li a img,
+#navigation-level-1-items li a canvas,
+#sidebar .sidebar-image > img {
     .recolor;
 }