From dc24c8991022fd9b0036e2fa48e7cc7da8e83710 Mon Sep 17 00:00:00 2001
From: Thomas Hackl <hackl@data-quest.de>
Date: Wed, 7 Dec 2022 13:55:04 +0000
Subject: [PATCH] =?UTF-8?q?Resolve=20"Neue=20HTML-Grundstruktur=20f=C3=BCr?=
 =?UTF-8?q?=20Stud.IP"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #838, #1850, and #1817

Merge request studip/studip!1136
---
 app/controllers/settings/accessibility.php    |   2 +-
 .../1.150_help_tours_and_content.php          |  24 +-
 db/migrations/1.164_help_tours_en.php         |  36 +-
 db/migrations/5.1.12_biest_402.php            |  32 +-
 lib/classes/Context.php                       |   2 +-
 lib/include/html_end.inc.php                  |   5 +-
 lib/include/html_head.inc.php                 |   3 -
 lib/wiki.inc.php                              |   2 +-
 package-lock.json                             |   1 -
 package.json                                  |   1 -
 .../plugins/studip-floatbar/plugin.js         |   3 +-
 public/index.php                              |   1 -
 .../javascripts/bootstrap/application.js      |  18 +-
 .../javascripts/bootstrap/copyable_links.js   |   2 +-
 .../assets/javascripts/bootstrap/forms.js     |   4 +-
 .../javascripts/bootstrap/global_search.js    |   2 +-
 .../javascripts/bootstrap/header_magic.js     |   2 +-
 .../bootstrap/personal_notifications.js       |   2 +-
 .../assets/javascripts/bootstrap/resources.js |   2 +-
 .../assets/javascripts/bootstrap/sidebar.js   |  14 +-
 .../assets/javascripts/bootstrap/smiley.js    |   2 +-
 .../assets/javascripts/bootstrap/wiki.js      |   4 +-
 resources/assets/javascripts/jquery-bundle.js |   2 -
 .../assets/javascripts/lib/actionmenu.js      |   2 +-
 resources/assets/javascripts/lib/avatar.js    |   2 +-
 resources/assets/javascripts/lib/blubber.js   |   2 +-
 resources/assets/javascripts/lib/files.js     |   2 +-
 resources/assets/javascripts/lib/folders.js   |   2 +-
 .../assets/javascripts/lib/fullcalendar.js    |   2 +-
 .../assets/javascripts/lib/fullscreen.js      |   4 +-
 .../assets/javascripts/lib/header_magic.js    |  10 +-
 .../javascripts/lib/navigation_shrinker.js    |   2 +-
 resources/assets/javascripts/lib/overlay.js   |   4 +-
 .../javascripts/lib/personal_notifications.js |   6 +-
 .../assets/javascripts/lib/questionnaire.js   |   6 +-
 resources/assets/javascripts/lib/resources.js |   2 +-
 .../assets/javascripts/lib/responsive.js      |  16 +-
 resources/assets/javascripts/lib/sidebar.js   |  47 +-
 .../assets/javascripts/lib/skip_links.js      |  16 -
 resources/assets/javascripts/studip-ui.js     |   2 +-
 .../assets/stylesheets/highcontrast.scss      |  48 +-
 .../assets/stylesheets/less/responsive.less   |  69 ++-
 .../assets/stylesheets/less/variables.less    |   2 +-
 .../assets/stylesheets/mixins/studip.scss     |  26 +
 resources/assets/stylesheets/print.less       |  18 +-
 .../assets/stylesheets/scss/blubber.scss      |   4 +-
 .../assets/stylesheets/scss/contentbar.scss   |  17 +-
 .../assets/stylesheets/scss/contents.scss     |   1 -
 .../assets/stylesheets/scss/courseware.scss   |  22 +-
 .../assets/stylesheets/scss/fullscreen.scss   |  38 +-
 .../assets/stylesheets/scss/globalsearch.scss |   4 +-
 resources/assets/stylesheets/scss/header.scss |  54 +--
 resources/assets/stylesheets/scss/index.scss  | 187 ++++----
 .../assets/stylesheets/scss/layouts.scss      | 244 ++++++----
 resources/assets/stylesheets/scss/mobile.scss |   4 +-
 .../scss/navigation-hoverborder.scss          |   2 +-
 .../assets/stylesheets/scss/navigation.scss   |  13 +-
 resources/assets/stylesheets/scss/oauth2.scss |   2 +-
 .../scss/personal-notifications.scss          |   2 +-
 .../assets/stylesheets/scss/resources.scss    |   4 +-
 .../assets/stylesheets/scss/sidebar.scss      |  27 +-
 .../stylesheets/scss/table_of_contents.scss   |   2 +-
 .../assets/stylesheets/scss/variables.scss    |   4 +-
 resources/assets/stylesheets/studip.less      |   6 +-
 resources/vue/components/StudipSelect.vue     |   2 +-
 templates/footer.php                          |   6 +-
 templates/header.php                          | 447 +++++++++++-------
 templates/index_nobody.php                    | 149 +++---
 templates/layouts/base.php                    | 146 +-----
 templates/loginform.php                       | 123 +++--
 templates/noheader.php                        |   2 +-
 templates/sidebar/sidebar.php                 |  40 +-
 templates/tabs.php                            |   2 +-
 templates/wiki/list.php                       |   2 +-
 templates/wiki/show.php                       |   2 +-
 75 files changed, 999 insertions(+), 1015 deletions(-)

diff --git a/app/controllers/settings/accessibility.php b/app/controllers/settings/accessibility.php
index f52c33b76f9..6e53cc0531e 100644
--- a/app/controllers/settings/accessibility.php
+++ b/app/controllers/settings/accessibility.php
@@ -23,7 +23,7 @@ class Settings_AccessibilityController extends Settings_SettingsController
 
         PageLayout::setTitle(_('Barrierefreiheit'));
         Navigation::activateItem('/profile/settings/accessibility');
-        SkipLinks::addIndex(_('Barrierefreiheitseinstellungen anpassen'), 'layout_content', 100);
+        SkipLinks::addIndex(_('Barrierefreiheitseinstellungen anpassen'), 'content', 100);
     }
 
     public function index_action()
diff --git a/db/migrations/1.150_help_tours_and_content.php b/db/migrations/1.150_help_tours_and_content.php
index a0a046a28f2..f27e5f9330c 100644
--- a/db/migrations/1.150_help_tours_and_content.php
+++ b/db/migrations/1.150_help_tours_and_content.php
@@ -63,7 +63,7 @@ class HelpToursAndContent extends Migration
 
         // add steps
         $query = "INSERT IGNORE INTO `help_tour_steps` (`tour_id`, `step`, `title`, `tip`, `orientation`, `interactive`, `css_selector`, `route`, `author_id`, `mkdate`) VALUES
-('96ea422f286fb5bbf9e41beadb484a9a', 3, 'Stud.IP-Score', 'Der Stud.IP-Score wächst mit den Aktivitäten in Stud.IP und repräsentiert so die Erfahrung mit Stud.IP.', 'BL', 0, '#layout_content TABLE:eq(0) TBODY:eq(0) TR:eq(0) TD:eq(0) A:eq(0)', 'dispatch.php/profile', '', 1406722657),
+('96ea422f286fb5bbf9e41beadb484a9a', 3, 'Stud.IP-Score', 'Der Stud.IP-Score wächst mit den Aktivitäten in Stud.IP und repräsentiert so die Erfahrung mit Stud.IP.', 'BL', 0, '#content TABLE:eq(0) TBODY:eq(0) TR:eq(0) TD:eq(0) A:eq(0)', 'dispatch.php/profile', '', 1406722657),
 ('96ea422f286fb5bbf9e41beadb484a9a', 5, 'Neue Ankündigung', 'Klicken Sie auf das Plus-Zeichen, wenn Sie eine Ankündigung erstellen möchten.', 'BR', 0, '.contentbox:eq(0) header img:eq(1)', 'dispatch.php/profile', '', 1406722657),
 ('96ea422f286fb5bbf9e41beadb484a9a', 1, 'Profil-Tour', 'Diese Tour gibt Ihnen einen Überblick über die wichtigsten Funktionen des \"Profils\".\r\n\r\nUm auf den nächsten Schritt zu kommen, klicken Sie bitte rechts unten auf \"Weiter\".', 'T', 0, '', 'dispatch.php/profile', '', 1406722657),
 ('96ea422f286fb5bbf9e41beadb484a9a', 6, 'Persönliche Daten', 'Das Bild sowie weitere persönliche Angaben können über diese Seiten geändert werden.', 'BL', 0, '#tabs li:eq(2)', 'dispatch.php/profile', '', 1406722657),
@@ -71,7 +71,7 @@ class HelpToursAndContent extends Migration
 ('25e7421f286fc5bdf9e41beadb484ffa', 1, 'Profil', 'Diese Tour gibt Ihnen einen Überblick über die wichtigsten Funktionen des \"Profils\".\r\n\r\nUm auf den nächsten Schritt zu kommen, klicken Sie bitte rechts unten auf \"Weiter\".', 'B', 0, '', 'dispatch.php/profile', '', 1406722657),
 ('25e7421f286fc5bdf9e41beadb484ffa', 2, 'Bild hochladen', 'Auf dieser Seite lässt sich ein Profilbild hochladen.', 'BL', 0, '#nav_profile_avatar A SPAN', 'dispatch.php/settings/avatar', '', 1406722657),
 ('25e7421f286fc5bdf9e41beadb484ffa', 3, 'Bild auswählen', 'Dafür kann eine beliebige Bilddatei hochgeladen werden.', 'L', 0, 'input[name=imgfile]', 'dispatch.php/settings/avatar', '', 1406722657),
-('96ea422f286fb5bbf9e41beadb484a9a', 4, 'Ankündigungen', 'Sie können auf dieser Seite persönliche Ankündigungen veröffentlichen.', 'B', 0, '#layout_content SECTION HEADER H1 :eq(0)', 'dispatch.php/profile', '', 1406722657),
+('96ea422f286fb5bbf9e41beadb484a9a', 4, 'Ankündigungen', 'Sie können auf dieser Seite persönliche Ankündigungen veröffentlichen.', 'B', 0, '#content SECTION HEADER H1 :eq(0)', 'dispatch.php/profile', '', 1406722657),
 ('3629493a16bf2680de64361f07cab096', 3, 'Text gestalten', 'Der Text kann formatiert und mit Smileys versehen werden.\r\nEs können die üblichen Formatierungen verwendet werden, wie z. B. **fett** oder %%kursiv%%.', 'BL', 0, 'TEXTAREA#new_posting.autoresize', 'plugins.php/blubber/streams/forum', '', 1405508371),
 ('6849293baa05be5bef8ff438dc7c438b', 4, 'Navigation', 'Falls nur in einem bestimmten Bereich (wie z.B. Lehre) gesucht werden soll, kann dieser hier ausgewählt werden.', 'R', 0, '#layout-sidebar SECTION DIV DIV.sidebar-widget-header :eq(0)', 'dispatch.php/search/courses', '', 1406121826),
 ('3a717a468afb0822cb1455e0ae6b6fce', 3, 'Text gestalten', 'Der Text kann formatiert und mit Smileys versehen werden.\r\nEs können die üblichen Formatierungen verwendet werden, wie z. B. **fett** oder %%kursiv%%.', 'BL', 0, 'TEXTAREA#new_posting.autoresize', 'plugins.php/blubber/streams/profile', '', 1405508371),
@@ -80,14 +80,14 @@ class HelpToursAndContent extends Migration
 ('21f487fa74e3bfc7789886f40fe4131a', 1, 'Forum', 'Diese Tour gibt einen Überblick über die Elemente und Interaktionsmöglichkeiten des Forums.\r\n\r\nUm zum nächsten Schritt zu gelangen, klicken Sie bitte rechts unten auf \"Weiter\".', 'BL', 0, '', 'plugins.php/coreforum', '', 1405415772),
 ('21f487fa74e3bfc7789886f40fe4131a', 2, 'Sie befinden sich hier:...', 'An dieser Stelle wird angezeigt, welcher Bereich des Forums gerade betrachtet wird.', 'BL', 0, 'DIV#tutorBreadcrumb', 'plugins.php/coreforum', '', 1405415875),
 ('44f859c50648d3410c39207048ddd833', 1, 'Forum verwalten', 'Sie haben die Möglichkeit sich eine Tour zur Verwaltung des Forums anzuschauen.\r\n\r\nUm die Tour zu beginnen, klicken Sie bitte unten rechts auf \"Weiter\".', 'TL', 0, '', 'plugins.php/coreforum', '', 1405418008),
-('21f487fa74e3bfc7789886f40fe4131a', 3, 'Kategorie', 'Das Forum ist unterteilt in Kategorien, Themen und Beiträge. Eine Kategorie fasst Forumsbereiche in größere Sinneinheiten zusammen.', 'BL', 0, '#layout_content #forum #sortable_areas TABLE CAPTION .category_name :eq(0)', 'plugins.php/coreforum', '', 1405416611),
-('21f487fa74e3bfc7789886f40fe4131a', 4, 'Bereich', 'Das ist ein Bereich innerhalb einer Kategorie. Bereiche beinhalten die Diskussionstränge. Bereiche können mit per drag & drop in ihrer Reihenfolge verschoben werden.', 'BL', 0, '#layout_content #forum TABLE THEAD TR TH :eq(0)', 'plugins.php/coreforum', '', 1405416664),
+('21f487fa74e3bfc7789886f40fe4131a', 3, 'Kategorie', 'Das Forum ist unterteilt in Kategorien, Themen und Beiträge. Eine Kategorie fasst Forumsbereiche in größere Sinneinheiten zusammen.', 'BL', 0, '#content #forum #sortable_areas TABLE CAPTION .category_name :eq(0)', 'plugins.php/coreforum', '', 1405416611),
+('21f487fa74e3bfc7789886f40fe4131a', 4, 'Bereich', 'Das ist ein Bereich innerhalb einer Kategorie. Bereiche beinhalten die Diskussionstränge. Bereiche können durch Klicken-und-Ziehen in ihrer Reihenfolge verschoben werden.', 'BL', 0, '#content #forum TABLE THEAD TR TH :eq(0)', 'plugins.php/coreforum', '', 1405416664),
 ('21f487fa74e3bfc7789886f40fe4131a', 5, 'Info-Icon', 'Dieses Icon färbt sich rot, sobald es etwas neues in diesem Bereich gibt.', 'B', 0, 'IMG#tutorNotificationIcon', 'plugins.php/coreforum', '', 1405416705),
 ('21f487fa74e3bfc7789886f40fe4131a', 7, 'Forum abonnieren', 'Das gesamte Forum, oder einzelne Themen können abonniert werden. Dann wird bei jedem neuen Beitrag in diesem Forum eine Benachrichtigung angezeigt und eine Nachricht versendet.', 'B', 0, '#layout-sidebar SECTION DIV DIV UL LI A :eq(5)', 'plugins.php/coreforum', '', 1405416795),
 ('21f487fa74e3bfc7789886f40fe4131a', 6, 'Suchen', 'Hier können sämtliche Inhalte dieses Forums durchsucht werden.\r\nUnterstützt werden auch Mehrwortsuchen. Außerdem kann die Suche auf eine beliebige Kombination aus Titel, Inhalt und Autor eingeschränkt werden.', 'BL', 0, '#layout-sidebar SECTION #tutorSearchInfobox DIV #tutorSearchInfobox UL LI INPUT :eq(1)', 'plugins.php/coreforum', '', 1405417134),
 ('44f859c50648d3410c39207048ddd833', 2, 'Kategorie bearbeiten', 'Mit diesen Icons kann der Name der Kategorie geändert oder aber die gesamte Kategorie gelöscht werden. Die Bereiche werden in diesem Fall in die Kategorie \"Allgemein\" verschoben und bleiben somit erhalten.\r\n\r\nDie Kategorie \"Allgemein\" kann nicht gelöscht werden und ist daher in jedem Forum enthalten.', 'BR', 0, '#forum #sortable_areas TABLE CAPTION #tutorCategoryIcons', 'plugins.php/coreforum', '', 1405424216),
 ('44f859c50648d3410c39207048ddd833', 3, 'Bereich bearbeiten', 'Wird der Mauszeiger auf einem Bereich positioniert, erscheinen Aktions-Icons.\r\nMit diesen Icons kann der Name und die Beschreibung eines Bereiches geändert oder auch der gesamte Bereich gelöscht werden.\r\nDas Löschen eines Bereichs, führt dazu, dass alle enthaltenen Themen gelöscht werden.', 'B', 0, 'IMG.edit-area', 'plugins.php/coreforum', '', 1405424346),
-('44f859c50648d3410c39207048ddd833', 4, 'Bereiche sortieren', 'Mit dieser schraffierten Fläche können Bereiche an einer beliebigen Stelle durch Klicken-und-Ziehen einsortiert werden. Dies kann einerseits dazu verwendet werden, um Bereiche innerhalb einer Kategorie zu sortieren, andererseits können Bereiche in andere Kategorien verschoben werden.', 'BR', 0, 'HTML #plugins #layout_wrapper #layout_page #layout_container #layout_content #forum #sortable_areas TABLE TBODY #tutorArea TD IMG#tutorMoveArea.handle.js :eq(1)', 'plugins.php/coreforum', '', 1405424379),
+('44f859c50648d3410c39207048ddd833', 4, 'Bereiche sortieren', 'Mit dieser schraffierten Fläche können Bereiche an einer beliebigen Stelle durch Klicken-und-Ziehen einsortiert werden. Dies kann einerseits dazu verwendet werden, um Bereiche innerhalb einer Kategorie zu sortieren, andererseits können Bereiche in andere Kategorien verschoben werden.', 'BR', 0, 'HTML #plugins #layout_wrapper #layout_page #layout_container #content #forum #sortable_areas TABLE TBODY #tutorArea TD IMG#tutorMoveArea.handle.js :eq(1)', 'plugins.php/coreforum', '', 1405424379),
 ('44f859c50648d3410c39207048ddd833', 5, 'Neuen Bereich hinzufügen', 'Hier können neue Bereiche zu einer Kategorie hinzugefügt werden.', 'BR', 0, 'TFOOT TR TD A SPAN', 'plugins.php/coreforum', '', 1405424421),
 ('44f859c50648d3410c39207048ddd833', 6, 'Neue Kategorie erstellen', 'Hier kann eine neue Kategorie im Forum erstellt werden. Geben Sie hierfür den Titel der neuen Kategorie ein.', 'TL', 0, '#tutorAddCategory H2', 'plugins.php/coreforum', '', 1405424458),
 ('ef5092ba722c81c37a5a6bd703890bd9', 1, 'Was ist Blubbern?', 'Diese Tour gibt Ihnen einen Überblick über die wichtigsten Funktionen von \"Blubber\".\r\n\r\nUm auf den nächsten Schritt zu kommen, klicken Sie bitte rechts unten auf \"Weiter\".', 'TL', 0, '', 'plugins.php/blubber/streams/global', '', 1405507364),
@@ -108,20 +108,20 @@ class HelpToursAndContent extends Migration
 ('b74f8459dce2437463096d56db7c73b9', 1, 'Hilfe-Tour \"Meine Veranstaltungen\"', 'Diese Tour gibt einen Überblick über die wichtigsten Funktionen der Seite \"Meine Veranstaltungen\".\r\n\r\nUm auf den nächsten Schritt zu kommen, klicken Sie bitte rechts unten auf \"Weiter\".', 'TL', 0, '', 'dispatch.php/my_courses', '', 1405521184),
 ('b74f8459dce2437463096d56db7c73b9', 2, 'Veranstaltungsüberblick', 'Hier werden die  Veranstaltungen des aktuellen und vergangenen Semesters angezeigt. Neue Veranstaltungen erscheinen zunächst in rot.', 'T', 0, '#my_seminars TABLE THEAD TR TH :eq(2)', 'dispatch.php/my_courses', '', 1405521244),
 ('154e711257d4d32d865fb8f5fb70ad72', 1, 'Meine Dateien', 'Meine Dateien ist der persönliche Dateibereich. Hier können Dateien auf Stud.IP gespeichert werden, um sie von dort auf andere Rechner herunterladen zu können.\r\n\r\nAndere Studierende oder Lehrende erhalten keinen Zugriff auf Dateien, die in den persönlichen Dateibereich hochgeladen werden.\r\n\r\nUm auf den nächsten Schritt zu kommen, klicken Sie bitte rechts unten auf \"Weiter\".', 'TL', 0, '', 'dispatch.php/document/files', '', 1405592884),
-('154e711257d4d32d865fb8f5fb70ad72', 4, 'Dateiübersicht', 'Alle Dateien und Verzeichnisse werden tabellarisch aufgelistet. Neben dem Namen werden noch weitere Informationen wie der Dateityp oder die Dateigröße angezeigt.', 'TL', 0, '#layout_content FORM TABLE THEAD TR TH :eq(3)', 'dispatch.php/document/files', '', 1405593089),
+('154e711257d4d32d865fb8f5fb70ad72', 4, 'Dateiübersicht', 'Alle Dateien und Verzeichnisse werden tabellarisch aufgelistet. Neben dem Namen werden noch weitere Informationen wie der Dateityp oder die Dateigröße angezeigt.', 'TL', 0, '#content FORM TABLE THEAD TR TH :eq(3)', 'dispatch.php/document/files', '', 1405593089),
 ('154e711257d4d32d865fb8f5fb70ad72', 3, 'Neue Dateien und Verzeichnisse', 'Hier können neue Dateien von dem Computer in den persönlichen Dateibereich hochgeladen und neue Verzeichnisse erstellt werden.', 'TL', 0, '#layout-sidebar SECTION DIV DIV UL LI A :eq(0)', 'dispatch.php/document/files', '', 1405593409),
 ('ef5092ba722c81c37a5a6bd703890bd9', 4, 'Personen erwähnen', 'Andere können über einen Beitrag informiert werden, indem sie per @benutzername oder @\"Vorname Nachname\" im Beitrag erwähnt werden.', 'BL', 0, 'TEXTAREA#new_posting.autoresize', 'plugins.php/blubber/streams/global', '', 1405672301),
 ('154e711257d4d32d865fb8f5fb70ad72', 6, 'Export', 'Hier besteht die Möglichkeit einzelne Ordner oder den vollständigen Dateibereich als ZIP-Datei herunterzuladen. Darin sind alle Dateien und Verzeichnisse enthalten.', 'TL', 0, '#layout-sidebar SECTION DIV DIV.sidebar-widget-header :eq(1)', 'dispatch.php/document/files', '', 1405593708),
-('154e711257d4d32d865fb8f5fb70ad72', 5, 'Aktionen', 'Bereits hochgeladene Dateien und Ordner können hier bearbeitet, heruntergeladen, verschoben, kopiert und gelöscht werden.', 'TR', 0, '#layout_content FORM TABLE THEAD TR TH :eq(7)', 'dispatch.php/document/files', '', 1405594079),
+('154e711257d4d32d865fb8f5fb70ad72', 5, 'Aktionen', 'Bereits hochgeladene Dateien und Ordner können hier bearbeitet, heruntergeladen, verschoben, kopiert und gelöscht werden.', 'TR', 0, '#content FORM TABLE THEAD TR TH :eq(7)', 'dispatch.php/document/files', '', 1405594079),
 ('154e711257d4d32d865fb8f5fb70ad72', 2, 'Verfügbarer Speicherplatz', 'Der Speicherplatz des persönlichen Dateibereichs ist begrenzt. Es wird angezeigt, wie viel Speicherplatz noch verfügbar ist.', 'BR', 0, 'DIV.caption-actions', 'dispatch.php/document/files', '', 1405594184),
-('edfcf78c614869724f93488c4ed09582', 5, 'Rundmail an Nutzergruppe versenden', 'Weiterhin besteht die Möglichkeit eine Rundmail an einzelne Nutzergruppen zu versenden.', 'BR', 0, '#layout_container #layout_content TABLE CAPTION SPAN A IMG :eq(0)', 'dispatch.php/course/members', '', 1406637123),
-('25e7421f286fc5bdf9e41beadb484ffa', 4, 'Voraussetzungen', 'Eine Bilddatei muss im **.jpg**, **.png** oder **.gif** Format vorliegen.\r\nDie Dateigröße darf 700 KB nicht überschreiten.', 'L', 0, '#layout_content #edit_avatar TBODY TR TD FORM B :eq(2)', 'dispatch.php/settings/avatar', '', 1406722657),
+('edfcf78c614869724f93488c4ed09582', 5, 'Rundmail an Nutzergruppe versenden', 'Weiterhin besteht die Möglichkeit eine Rundmail an einzelne Nutzergruppen zu versenden.', 'BR', 0, '#layout_container #content TABLE CAPTION SPAN A IMG :eq(0)', 'dispatch.php/course/members', '', 1406637123),
+('25e7421f286fc5bdf9e41beadb484ffa', 4, 'Voraussetzungen', 'Eine Bilddatei muss im **.jpg**, **.png** oder **.gif** Format vorliegen.\r\nDie Dateigröße darf 700 KB nicht überschreiten.', 'L', 0, '#content #edit_avatar TBODY TR TD FORM B :eq(2)', 'dispatch.php/settings/avatar', '', 1406722657),
 ('19ac063e8319310d059d28379139b1cf', 1, 'Studiengruppe anlegen', 'Studiengruppen ermöglichen die Zusammenarbeit mit anderen. Diese Tour gibt Ihnen einen Überblick darüber wie Sie Studiengruppen anlegen können.\r\n\r\nUm zum nächsten Schritt zu gelangen, klicken Sie bitte rechts unten auf \"Weiter\".', 'R', 0, '', 'dispatch.php/my_studygroups', '', 1405684423),
 ('19ac063e8319310d059d28379139b1cf', 2, 'Studiengruppe anlegen', 'Mit Klick auf \"Neue Studiengruppe anlegen\" kann eine neue Studiengruppe angelegt werden.', 'R', 0, 'A#nav_browse_new', 'dispatch.php/my_studygroups', '', 1406017730),
 ('19ac063e8319310d059d28379139b1cf', 3, 'Studiengruppe benennen', 'Der Name einer Studiengruppe sollte aussagekräftig sein und einmalig im gesamten Stud.IP.', 'R', 0, 'INPUT#groupname', 'dispatch.php/course/studygroup/new', '', 1405684720),
 ('19ac063e8319310d059d28379139b1cf', 4, 'Beschreibung hinzufügen', 'Die Beschreibung ermöglicht es weitere Informationen anzuzeigen und somit das Auffinden der Gruppe zu erleichtern.', 'R', 0, 'TEXTAREA#groupdescription', 'dispatch.php/course/studygroup/new', '', 1405684806),
-('19ac063e8319310d059d28379139b1cf', 8, 'Studiengruppe speichern', 'Nach dem Speichern einer Studiengruppe erscheint diese unter \"Veranstaltungen > Meine Studiengruppen\".', 'L', 0, '#layout_content FORM TABLE TBODY TR TD :eq(14)', 'dispatch.php/course/studygroup/new', '', 1405686068),
-('19ac063e8319310d059d28379139b1cf', 5, 'Inhaltselemente zuordnen', 'Hier können Inhaltselemente aktiviert werden, welche  innerhalb der Studiengruppe zur Verfügung stehen sollen. Das Fragezeichen gibt nähere Informationen zur Bedeutung der einzelnen Inhaltselemente.', 'L', 0, '#layout_content FORM TABLE TBODY TR TD :eq(5)', 'dispatch.php/course/studygroup/new', '', 1405685093),
+('19ac063e8319310d059d28379139b1cf', 8, 'Studiengruppe speichern', 'Nach dem Speichern einer Studiengruppe erscheint diese unter \"Veranstaltungen > Meine Studiengruppen\".', 'L', 0, '#content FORM TABLE TBODY TR TD :eq(14)', 'dispatch.php/course/studygroup/new', '', 1405686068),
+('19ac063e8319310d059d28379139b1cf', 5, 'Inhaltselemente zuordnen', 'Hier können Inhaltselemente aktiviert werden, welche  innerhalb der Studiengruppe zur Verfügung stehen sollen. Das Fragezeichen gibt nähere Informationen zur Bedeutung der einzelnen Inhaltselemente.', 'L', 0, '#content FORM TABLE TBODY TR TD :eq(5)', 'dispatch.php/course/studygroup/new', '', 1405685093),
 ('19ac063e8319310d059d28379139b1cf', 6, 'Zugang festlegen', 'Mit diesem Drop-down-Menü kann der Zugang zur Studiengruppe eingeschränkt werden.\r\n\r\nBeim Zugang \"offen für alle\" können sich alle Studierenden frei eintragen und an der Gruppe beteiligen.\r\n\r\nBeim Zugang \"Auf Anfrage\" müssen Teilnehmer durch den Gruppengründer hinzugefügt werden.', 'R', 0, 'SELECT#groupaccess', 'dispatch.php/course/studygroup/new', '', 1405685334),
 ('19ac063e8319310d059d28379139b1cf', 7, 'Nutzungsbedingungen akzeptieren', 'Bei der Erstellung einer Studiengruppe müssen die Nutzungsbedingungen akzeptiert werden.', 'R', 0, 'P LABEL', 'dispatch.php/course/studygroup/new', '', 1405685652),
 ('edfcf78c614869724f93488c4ed09582', 6, 'Gruppen erstellen', 'Hier können die Teilnehmenden der Veranstaltung in Gruppen eingeteilt werden.', 'R', 0, 'A#nav_course_edit_groups', 'dispatch.php/course/members', '', 1405689311),
@@ -157,7 +157,7 @@ class HelpToursAndContent extends Migration
 ('49604a77654617a745e29ad6b253e491', 3, 'Widget hinzufügen', 'Hier können Widgets hinzugefügt werden. Zusätzlich zu den Standard-Widgets kann beispielsweise der persönliche Stundenplan auf der Startseite anzeigt werden. Neu hinzugefügte Widgets erscheinen ganz unten auf der Startseite. Darüber hinaus kann in der Sidebar direkt zu jedem Widget gesprungen werden.', 'R', 0, '#layout-sidebar SECTION DIV DIV UL LI :eq(4)', 'dispatch.php/start', '', 1405935192),
 ('49604a77654617a745e29ad6b253e491', 5, 'Widget positionieren', 'Ein Widget kann per Drag&Drop an die gewünschte Position verschoben werden: Dazu wird in die Titelzeile eines Widgets geklickt, die Maustaste gedrückt gehalten und das Widget an die gewünschte Position gezogen.', 'B', 0, '.widget-header', 'dispatch.php/start', '', 1405935687),
 ('49604a77654617a745e29ad6b253e491', 7, 'Widget entfernen', 'Jedes Widget kann durch Klicken auf das X in der rechten oberen Ecke entfernt werden. Bei Bedarf kann es jederzeit wieder hinzugefügt werden.', 'R', 0, '.widget-header', 'dispatch.php/start', '', 1405935376),
-('49604a77654617a745e29ad6b253e491', 6, 'Widget bearbeiten', 'Bei einigen Widgets wird neben dem X zum Schließen noch ein weiteres Symbol angezeigt. Der Schnellzugriff bspw. kann durch Klick auf diesen Button individuell angepasst, die Ankündigungen können abonniert und bei den aktuellen Terminen bzw. Stundenplan können Termine hinzugefügt werden.', 'L', 0, '#layout_content DIV UL DIV SPAN A IMG :eq(0)', 'dispatch.php/start', '', 1405935792),
+('49604a77654617a745e29ad6b253e491', 6, 'Widget bearbeiten', 'Bei einigen Widgets wird neben dem X zum Schließen noch ein weiteres Symbol angezeigt. Der Schnellzugriff bspw. kann durch Klick auf diesen Button individuell angepasst, die Ankündigungen können abonniert und bei den aktuellen Terminen bzw. Stundenplan können Termine hinzugefügt werden.', 'L', 0, '#content DIV UL DIV SPAN A IMG :eq(0)', 'dispatch.php/start', '', 1405935792),
 ('3629493a16bf2680de64361f07cab096', 1, 'Was ist Blubbern?', 'Diese Tour gibt Ihnen einen Überblick über die wichtigsten Funktionen von \"Blubber\".\r\n\r\nUm auf den nächsten Schritt zu kommen, klicken Sie bitte rechts unten auf \"Weiter\".', 'TL', 0, '', 'plugins.php/blubber/streams/forum', '', 1405507364),
 ('3a717a468afb0822cb1455e0ae6b6fce', 4, 'Personen erwähnen', 'Andere können über einen Beitrag informiert werden, indem sie per @benutzername oder @\"Vorname Nachname\" im Beitrag erwähnt werden.', 'BL', 0, 'TEXTAREA#new_posting.autoresize', 'plugins.php/blubber/streams/profile', '', 1405672301),
 ('3629493a16bf2680de64361f07cab096', 2, 'Beitrag erstellen', 'Hier kann eine Diskussion durch Schreiben von Text begonnen werden. Absätze lassen sich durch Drücken von Umschalt+Eingabe erzeugen. Der Text wird durch Drücken von Eingabe abgeschickt.', 'BL', 0, 'TEXTAREA#new_posting.autoresize', 'plugins.php/blubber/streams/forum', '', 1405507478),
diff --git a/db/migrations/1.164_help_tours_en.php b/db/migrations/1.164_help_tours_en.php
index 51e3c7d27d0..eaed2ba5080 100644
--- a/db/migrations/1.164_help_tours_en.php
+++ b/db/migrations/1.164_help_tours_en.php
@@ -8,19 +8,19 @@ class HelpToursEn extends Migration
     {
         return 'Adds english help tours.';
     }
-    
+
     function up()
     {
         $this->addHelpToursEN();
     }
-    
+
     function down()
     {
         DBManager::get()->exec("DELETE FROM `help_tours` WHERE `tour_id` = '7af1e1fb7f53c910ba9f42f43a71c723' OR `tour_id` = 'c89ce8e097f212e75686f73cc5008711' OR `tour_id` = 'de1fbce508d01cbd257f9904ff8c3b43' OR `tour_id` = '1badcf28ab5b206d9150b2b9683b4cb6' OR `tour_id` = 'fa963d2ca827b28e0082e98aafc88765' OR `tour_id` = 'f0aeb0f6c4da3bd61f48b445d9b30dc1' OR `tour_id` = '3dbe7099f82dcdbba4580acb1105a0d6' OR `tour_id` = '9e9dca9b1214294b9605824bfe90fba1' OR `tour_id` = '89786eac42f52ac316790825b4f5c0b2' OR `tour_id` = 'e41611616675b218845fe9f55bc11cf6' OR `tour_id` = '83dc1d25e924f2748ee3293aaf0ede8e' OR `tour_id` = '588effa83da976a889a68c152bcabc90' OR `tour_id` = 'd9913517f9c81d2c0fa8362592ce5d0e' OR `tour_id` = '05434e40601a9a2a7f5fa8208ae148c1'");
         DBManager::get()->exec("DELETE FROM `help_tour_steps` WHERE `tour_id` = '7af1e1fb7f53c910ba9f42f43a71c723' OR `tour_id` = 'c89ce8e097f212e75686f73cc5008711' OR `tour_id` = 'de1fbce508d01cbd257f9904ff8c3b43' OR `tour_id` = '1badcf28ab5b206d9150b2b9683b4cb6' OR `tour_id` = 'fa963d2ca827b28e0082e98aafc88765' OR `tour_id` = 'f0aeb0f6c4da3bd61f48b445d9b30dc1' OR `tour_id` = '3dbe7099f82dcdbba4580acb1105a0d6' OR `tour_id` = '9e9dca9b1214294b9605824bfe90fba1' OR `tour_id` = '89786eac42f52ac316790825b4f5c0b2' OR `tour_id` = 'e41611616675b218845fe9f55bc11cf6' OR `tour_id` = '83dc1d25e924f2748ee3293aaf0ede8e' OR `tour_id` = '588effa83da976a889a68c152bcabc90' OR `tour_id` = 'd9913517f9c81d2c0fa8362592ce5d0e' OR `tour_id` = '05434e40601a9a2a7f5fa8208ae148c1'");
         DBManager::get()->exec("DELETE FROM `help_tour_settings` WHERE `tour_id` = '7af1e1fb7f53c910ba9f42f43a71c723' OR `tour_id` = 'c89ce8e097f212e75686f73cc5008711' OR `tour_id` = 'de1fbce508d01cbd257f9904ff8c3b43' OR `tour_id` = '1badcf28ab5b206d9150b2b9683b4cb6' OR `tour_id` = 'fa963d2ca827b28e0082e98aafc88765' OR `tour_id` = 'f0aeb0f6c4da3bd61f48b445d9b30dc1' OR `tour_id` = '3dbe7099f82dcdbba4580acb1105a0d6' OR `tour_id` = '9e9dca9b1214294b9605824bfe90fba1' OR `tour_id` = '89786eac42f52ac316790825b4f5c0b2' OR `tour_id` = 'e41611616675b218845fe9f55bc11cf6' OR `tour_id` = '83dc1d25e924f2748ee3293aaf0ede8e' OR `tour_id` = '588effa83da976a889a68c152bcabc90' OR `tour_id` = 'd9913517f9c81d2c0fa8362592ce5d0e' OR `tour_id` = '05434e40601a9a2a7f5fa8208ae148c1'");
     }
-    
+
     function addHelpToursEN() {
         // add tour data
         $query = "INSERT IGNORE INTO `help_tours` (`tour_id`, `name`, `description`, `type`, `roles`, `version`, `language`, `studip_version`, `installation_id`, `mkdate`) VALUES
@@ -40,7 +40,7 @@ class HelpToursEn extends Migration
 ('05434e40601a9a2a7f5fa8208ae148c1', 'My documents', 'The personal document area will be presented in this tour.', 'tour', 'autor,tutor,dozent,admin,root', 1, 'en', '3.1', '', 1427786336);
 ";
         DBManager::get()->exec($query);
-        
+
         // add steps
         $query = "INSERT IGNORE INTO `help_tour_steps` (`tour_id`, `step`, `title`, `tip`, `orientation`, `interactive`, `css_selector`, `route`, `author_email`, `mkdate`) VALUES
 ('7af1e1fb7f53c910ba9f42f43a71c723', 1, 'Search', 'This tour gives you an overview of the most important \"search\" functions \n\n\nIn order to reach the next step please click \"next\" on the bottom right', 'TL', 0, '', 'dispatch.php/search/courses', '', 1405519865),
@@ -54,7 +54,7 @@ class HelpToursEn extends Migration
 ('c89ce8e097f212e75686f73cc5008711', 2, 'Add persons', 'With these functions you can search for individual persons in Stud.IP and directly  select them as lecturer, tutor or author. It is also possible to insert a list of participants in order to allocate several persons as a tutor of the event at the same time.', 'R', 0, '#layout-sidebar SECTION DIV.sidebar-widget :eq(1)', 'dispatch.php/course/members', '', 1405688707),
 ('c89ce8e097f212e75686f73cc5008711', 3, 'Upgrade/ downgrade', 'In order to upgrade an already enroled person to a tutor, or to downgrade them to a reader select this person in the list and carry out the requested action by using the dropdown menu.', 'T', 0, '#autor CAPTION', 'dispatch.php/course/members', '', 1405690324),
 ('c89ce8e097f212e75686f73cc5008711', 4, 'Send circular e-mail', 'A circular e-mail can be sent to all participants of the event here.', 'R', 0, '#layout-sidebar SECTION DIV DIV UL LI A :eq(3)', 'dispatch.php/course/members', '', 1406636964),
-('c89ce8e097f212e75686f73cc5008711', 5, 'Send circular e-mail to user group', 'There is further the possibility to send a circular e-mail to individual user groups.', 'BR', 0, '#layout_container #layout_content TABLE CAPTION SPAN A IMG :eq(0)', 'dispatch.php/course/members', '', 1406637123),
+('c89ce8e097f212e75686f73cc5008711', 5, 'Send circular e-mail to user group', 'There is further the possibility to send a circular e-mail to individual user groups.', 'BR', 0, '#layout_container #content TABLE CAPTION SPAN A IMG :eq(0)', 'dispatch.php/course/members', '', 1406637123),
 ('c89ce8e097f212e75686f73cc5008711', 6, 'Create groups', 'The participants of the event can be divided into groups here.', 'R', 0, 'A#nav_course_edit_groups', 'dispatch.php/course/members', '', 1405689311),
 ('c89ce8e097f212e75686f73cc5008711', 7, 'Name group', 'You can search for a suitable group name in the templates and select it using the yellow double arrow. As an alternative you also have the possibility to determine a new group name by directly entering the name in the right field.', 'B', 0, 'SELECT', 'admin_statusgruppe.php', '', 1405689541),
 ('c89ce8e097f212e75686f73cc5008711', 8, 'Group size', 'With the field \"group size\" you can set the maximum number of participants of a group. If you do not require this, simply leave the field empty.', 'B', 0, 'INPUT#role_size', 'admin_statusgruppe.php', '', 1405689763),
@@ -62,9 +62,9 @@ class HelpToursEn extends Migration
 ('c89ce8e097f212e75686f73cc5008711', 10, 'Document folder', 'If you activate the function \"document folder\", an additional document folder will  be created per group. Group-specific documents can be uploaded to this folder.', 'B', 0, 'INPUT#group_folder', 'admin_statusgruppe.php', '', 1405689936),
 ('de1fbce508d01cbd257f9904ff8c3b43', 1, 'Profile tour', 'This tour gives you an overview of the most important functions of the \"profile\".\r\n\r\nIn order to reach the next step please click \"next\" on the bottom right.', 'T', 0, '', 'dispatch.php/profile', '', 1406722657),
 ('de1fbce508d01cbd257f9904ff8c3b43', 2, 'Personal picture', 'If you uploaded a picture, it will be displayed here. You can change it at all times.', 'RT', 0, '.avatar-normal', 'dispatch.php/profile', '', 1406722657),
-('de1fbce508d01cbd257f9904ff8c3b43', 3, 'Stud.IP-Score', 'The Stud.IP-Score increases with the activities in Stud.IP and thus represents the experience with  Stud.IP.', 'BL', 0, '#layout_content TABLE:eq(0) TBODY:eq(0) TR:eq(0) TD:eq(0) A:eq(0)', 'dispatch.php/profile', '', 1406722657),
-('de1fbce508d01cbd257f9904ff8c3b43', 4, 'Announcements', 'You can publish personal announcements on this site.', 'B', 0, '#layout_content SECTION HEADER H1 :eq(0)', 'dispatch.php/profile', '', 1406722657),
-('de1fbce508d01cbd257f9904ff8c3b43', 5, 'New announcement', 'Click on the plus sign, if you would like to create an announcement.', 'BR', 0, '#layout_content SECTION HEADER NAV A :eq(0)', 'dispatch.php/profile', '', 1406722657),
+('de1fbce508d01cbd257f9904ff8c3b43', 3, 'Stud.IP-Score', 'The Stud.IP-Score increases with the activities in Stud.IP and thus represents the experience with Stud.IP.', 'BL', 0, '#content TABLE:eq(0) TBODY:eq(0) TR:eq(0) TD:eq(0) A:eq(0)', 'dispatch.php/profile', '', 1406722657),
+('de1fbce508d01cbd257f9904ff8c3b43', 4, 'Announcements', 'You can publish personal announcements on this site.', 'B', 0, '#content SECTION HEADER H1 :eq(0)', 'dispatch.php/profile', '', 1406722657),
+('de1fbce508d01cbd257f9904ff8c3b43', 5, 'New announcement', 'Click on the plus sign, if you would like to create an announcement.', 'BR', 0, '#content SECTION HEADER NAV A :eq(0)', 'dispatch.php/profile', '', 1406722657),
 ('de1fbce508d01cbd257f9904ff8c3b43', 6, 'Personal details', 'Your picture and additional user data can be changed on these sites.', 'BL', 0, '#tabs li:eq(2)', 'dispatch.php/profile', '', 1406722657),
 ('1badcf28ab5b206d9150b2b9683b4cb6', 1, 'Help tour \"My event\"', 'This tour gives you an overview of the most important functions of the page \"My courses\".\r\n\r\nIn order to reach the next step please click \"next\" on the bottom right.', 'TL', 0, '', 'dispatch.php/my_courses', '', 1406125847),
 ('1badcf28ab5b206d9150b2b9683b4cb6', 2, 'Overview of events', 'The courses of the current and past semester are displayed here. New courses initially appear in red.', 'TL', 0, '#my_seminars TABLE THEAD TR TH :eq(2)', 'dispatch.php/my_courses', '', 1406125908),
@@ -90,33 +90,33 @@ class HelpToursEn extends Migration
 ('f0aeb0f6c4da3bd61f48b445d9b30dc1', 3, 'Add widget', 'Widgets can be added here. In addition to the standard widgets the personal timetable can, for example, be displayed on the start page. Newly added widgets appear right at the bottom on the start page. In addition, it is possible to jump directly to each widget in the sidebar.', 'R', 0, '#layout-sidebar SECTION DIV DIV UL LI :eq(4)', 'dispatch.php/start', '', 1405935192),
 ('f0aeb0f6c4da3bd61f48b445d9b30dc1', 4, 'Jump labels', 'In addition, it is possible to jump directly to each widget using jump labels.', 'R', 0, '#layout-sidebar SECTION DIV DIV.sidebar-widget-header :eq(0)', 'dispatch.php/start', '', 1406623464),
 ('f0aeb0f6c4da3bd61f48b445d9b30dc1', 5, 'Position widget', 'A widget can be moved to the desired position using drag&drop: For this purpose you click into the headline of a widget, hold down the mouse button, and drag the widget to the desired position.', 'B', 0, '.widget-header', 'dispatch.php/start', '', 1405935687),
-('f0aeb0f6c4da3bd61f48b445d9b30dc1', 6, 'Edit widget', 'With several widgets a further symbol is displayed in addition to the X for closing. The widget \"Quicklinks\", for example, can be adjusted individually by clicking on this button, the announcements can be subscribed to and appointments can be added with the actual appointments or timetable.', 'L', 0, '#layout_content DIV UL DIV SPAN A IMG :eq(0)', 'dispatch.php/start', '', 1405935792),
+('f0aeb0f6c4da3bd61f48b445d9b30dc1', 6, 'Edit widget', 'With several widgets a further symbol is displayed in addition to the X for closing. The widget \"Quicklinks\", for example, can be adjusted individually by clicking on this button, the announcements can be subscribed to and appointments can be added with the actual appointments or timetable.', 'L', 0, '#content DIV UL DIV SPAN A IMG :eq(0)', 'dispatch.php/start', '', 1405935792),
 ('f0aeb0f6c4da3bd61f48b445d9b30dc1', 7, 'Remove widget', 'Each widget can be removed by clicking on the X in the right upper corner. If required, it can be added again at all times.', 'R', 0, '.widget-header', 'dispatch.php/start', '', 1405935376),
 ('3dbe7099f82dcdbba4580acb1105a0d6', 1, 'Administering the forum', 'You have the possibility to look at a tour for the administration of the forum.\n\nIn order to begin the tour please click \"next\" at the bottom right.', 'TL', 0, '', 'plugins.php/coreforum', '', 1405418008),
 ('3dbe7099f82dcdbba4580acb1105a0d6', 2, 'Edit category', 'The name of the category can be changed or, however, the whole category deleted with these icons. The sectors will in this case be shifted into the category \"General\" and are thus retained.\n\nThe category \"General\" cannot be deleted and is therefore included in each forum.', 'BR', 0, '#forum #sortable_areas TABLE CAPTION #tutorCategoryIcons', 'plugins.php/coreforum', '', 1405424216),
 ('3dbe7099f82dcdbba4580acb1105a0d6', 3, 'Edit area', 'Action icons will appear, if the cursor is positioned on an area\n\nYou can use the icons to change the name and description of an area, or to delete the whole area.\nThe deletion of an area causes all contained topics to be deleted.', 'B', 0, 'IMG.edit-area', 'plugins.php/coreforum', '', 1405424346),
-('3dbe7099f82dcdbba4580acb1105a0d6', 4, 'Sort area', 'With this hatched surface areas can be sorted in at any place by clicking and dragging. This can, on one hand, be used in order to sort areas within a category, and on the other hand, areas can be shifted into other categories.', 'BR', 0, 'HTML #plugins #layout_wrapper #layout_page #layout_container #layout_content #forum #sortable_areas TABLE TBODY #tutorArea TD IMG#tutorMoveArea.handle.js :eq(1)', 'plugins.php/coreforum', '', 1405424379),
+('3dbe7099f82dcdbba4580acb1105a0d6', 4, 'Sort area', 'With this hatched surface areas can be sorted in at any place by clicking and dragging. This can, on one hand, be used in order to sort areas within a category, and on the other hand, areas can be shifted into other categories.', 'BR', 0, 'HTML #plugins #layout_wrapper #layout_page #layout_container #content #forum #sortable_areas TABLE TBODY #tutorArea TD IMG#tutorMoveArea.handle.js :eq(1)', 'plugins.php/coreforum', '', 1405424379),
 ('3dbe7099f82dcdbba4580acb1105a0d6', 5, 'Add new area', 'New areas can be added to a category here.', 'BR', 0, 'TFOOT TR TD A SPAN', 'plugins.php/coreforum', '', 1405424421),
 ('3dbe7099f82dcdbba4580acb1105a0d6', 6, 'Create new category', 'A new category in the forum can be created here. Enter the title of the new category for this purpose.', 'TL', 0, '#tutorAddCategory H2', 'plugins.php/coreforum', '', 1405424458),
 ('9e9dca9b1214294b9605824bfe90fba1', 1, 'Create study group', 'Study groups enable the cooperation with fellow students or colleagues. This tour gives you an overview of how you can create study groups.\n\nIn order to go to the next step please click \"next\" at the bottom right.', 'R', 0, '', 'dispatch.php/my_studygroups', '', 1405684423),
 ('9e9dca9b1214294b9605824bfe90fba1', 2, 'Create study group', 'A new study group can be created with a click on \"create new study group\".', 'R', 0, 'A#nav_browse_new', 'dispatch.php/my_studygroups', '', 1406017730),
 ('9e9dca9b1214294b9605824bfe90fba1', 3, 'Name a study group', 'The name of a study group should be meaningful and unique in the whole Stud.IP.', 'R', 0, 'INPUT#groupname', 'dispatch.php/course/studygroup/new', '', 1405684720),
 ('9e9dca9b1214294b9605824bfe90fba1', 4, 'Add description', 'The description makes it possible to display additional information that makes it easier to find the group.', 'R', 0, 'TEXTAREA#groupdescription', 'dispatch.php/course/studygroup/new', '', 1405684806),
-('9e9dca9b1214294b9605824bfe90fba1', 5, 'Allocate content elements', 'Content elements can be activated here, which are to be available within the study group. The question mark provides more detailed information on the meaning of the individual content elements', 'L', 0, '#layout_content FORM TABLE TBODY TR TD :eq(5)', 'dispatch.php/course/studygroup/new', '', 1405685093),
+('9e9dca9b1214294b9605824bfe90fba1', 5, 'Allocate content elements', 'Content elements can be activated here, which are to be available within the study group. The question mark provides more detailed information on the meaning of the individual content elements', 'L', 0, '#content FORM TABLE TBODY TR TD :eq(5)', 'dispatch.php/course/studygroup/new', '', 1405685093),
 ('9e9dca9b1214294b9605824bfe90fba1', 6, 'Stipulate access', 'The access to the study group can be restricted with this drop down menu.\n\nAll students can register freely and participate in the group with the access \"open for everyone\".\n\nWith the access \"upon request\" participants must be added by the group founder.', 'R', 0, 'SELECT#groupaccess', 'dispatch.php/course/studygroup/new', '', 1405685334),
 ('9e9dca9b1214294b9605824bfe90fba1', 7, 'Accept terms of use', 'The terms of use have to be accepted before you can create a study group.', 'R', 0, 'P LABEL', 'dispatch.php/course/studygroup/new', '', 1405685652),
-('9e9dca9b1214294b9605824bfe90fba1', 8, 'Save study group', 'After you saved a study group it will appear under \"My courses\" > \"My study groups\".', 'L', 0, '#layout_content FORM TABLE TBODY TR TD :eq(14)', 'dispatch.php/course/studygroup/new', '', 1405686068),
+('9e9dca9b1214294b9605824bfe90fba1', 8, 'Save study group', 'After you saved a study group it will appear under \"My courses\" > \"My study groups\".', 'L', 0, '#content FORM TABLE TBODY TR TD :eq(14)', 'dispatch.php/course/studygroup/new', '', 1405686068),
 ('89786eac42f52ac316790825b4f5c0b2', 1, 'Forum', 'This tour provides an overview of the elements and interactional possibilities of the forum.\n\nIn order to go to the next step please click \"next\" on the bottom right.', 'BL', 0, '', 'plugins.php/coreforum', '', 1405415772),
 ('89786eac42f52ac316790825b4f5c0b2', 2, 'You are here:...', 'Here you can see which sector of the forum you are currently looking at.', 'BL', 0, 'DIV#tutorBreadcrumb', 'plugins.php/coreforum', '', 1405415875),
-('89786eac42f52ac316790825b4f5c0b2', 3, 'Category', 'The forum is divided into categories, topics and posts. A category summarises forum areas into larger units of meaning.', 'BL', 0, '#layout_content #forum #sortable_areas TABLE CAPTION .category_name :eq(0)', 'plugins.php/coreforum', '', 1405416611),
-('89786eac42f52ac316790825b4f5c0b2', 4, 'Area', 'This is an area within a category. Areas contain threads. The order of areas can be altered using drag&drop', 'BL', 0, '#layout_content #forum TABLE THEAD TR TH :eq(0)', 'plugins.php/coreforum', '', 1405416664),
+('89786eac42f52ac316790825b4f5c0b2', 3, 'Category', 'The forum is divided into categories, topics and posts. A category summarises forum areas into larger units of meaning.', 'BL', 0, '#content #forum #sortable_areas TABLE CAPTION .category_name :eq(0)', 'plugins.php/coreforum', '', 1405416611),
+('89786eac42f52ac316790825b4f5c0b2', 4, 'Area', 'This is an area within a category. Areas contain threads. The order of areas can be altered using drag&drop', 'BL', 0, '#content #forum TABLE THEAD TR TH :eq(0)', 'plugins.php/coreforum', '', 1405416664),
 ('89786eac42f52ac316790825b4f5c0b2', 5, 'Info-Icon', 'This icon turns red as soon as there is something new in this sector.', 'B', 0, 'IMG#tutorNotificationIcon', 'plugins.php/coreforum', '', 1405416705),
 ('89786eac42f52ac316790825b4f5c0b2', 6, 'Search', 'All contents of this forum can be browsed here. Multiple word searches are also supported. In addition, the search can be limited to any combination of title, content and author.', 'BL', 0, '#layout-sidebar SECTION #tutorSearchInfobox DIV #tutorSearchInfobox UL LI INPUT :eq(1)', 'plugins.php/coreforum', '', 1405417134),
 ('89786eac42f52ac316790825b4f5c0b2', 7, 'Subscribe to forum', 'You can subscribe to the whole forum or individual topics . In this case a notification will be generated and you receive a meassage for each new post in this forum.', 'B', 0, '#layout-sidebar SECTION DIV DIV UL LI A :eq(5)', 'plugins.php/coreforum', '', 1405416795),
 ('e41611616675b218845fe9f55bc11cf6', 1, 'Profile', 'This tour gives you an overview of the most important functions of the \"profile\".\n\nIn order to get to the next step please click \"next\" on the bottom right.', 'B', 0, '', 'dispatch.php/profile', '', 1406722657),
 ('e41611616675b218845fe9f55bc11cf6', 2, 'Upload a picture', 'A profile picture can be uploaded on this site.', 'BL', 0, '#nav_profile_avatar A SPAN', 'dispatch.php/settings/avatar', '', 1406722657),
 ('e41611616675b218845fe9f55bc11cf6', 3, 'Select picture', 'A image file can be uploaded for this purpose.', 'L', 0, 'input[name=imgfile]', 'dispatch.php/settings/avatar', '', 1406722657),
-('e41611616675b218845fe9f55bc11cf6', 4, 'Requirements', 'The image file must be available in **.jpg**, **.png** or **.gif** format.\n\nThe document size must not exceed 700 KB.', 'L', 0, '#layout_content #edit_avatar TBODY TR TD FORM B :eq(2)', 'dispatch.php/settings/avatar', '', 1406722657),
+('e41611616675b218845fe9f55bc11cf6', 4, 'Requirements', 'The image file must be available in **.jpg**, **.png** or **.gif** format.\n\nThe document size must not exceed 700 KB.', 'L', 0, '#content #edit_avatar TBODY TR TD FORM B :eq(2)', 'dispatch.php/settings/avatar', '', 1406722657),
 ('83dc1d25e924f2748ee3293aaf0ede8e', 1, 'What is Blubber?', 'This tour provides an overview of the most important functions of \"Blubber\".\n\nIn order to reach the next step please click \"next\" on the bottom right.', 'TL', 0, '', 'plugins.php/blubber/streams/forum', '', 1405507364),
 ('83dc1d25e924f2748ee3293aaf0ede8e', 2, 'Create contribution', 'A discussion can be started here by writing a text. Paragraphs can be created by pressing shift+enter. The text will be sent by pressing enter.', 'BL', 0, 'TEXTAREA#new_posting.autoresize', 'plugins.php/blubber/streams/forum', '', 1405507478),
 ('83dc1d25e924f2748ee3293aaf0ede8e', 3, 'Design text', 'The text can be formatted and smileys can be used.\n\nThe customary formatting such as e.g. **bold** or %%italics%%  can be used.', 'BL', 0, 'TEXTAREA#new_posting.autoresize', 'plugins.php/blubber/streams/forum', '', 1405508371),
@@ -147,12 +147,12 @@ class HelpToursEn extends Migration
 ('05434e40601a9a2a7f5fa8208ae148c1', 1, 'My documents', 'My documents is the personal document area. Documents can be stored on Stud.IP here in order to be able to download them from there onto other computers.\n\nOther students or lecturers do not receive any access to documents, which are uploaded into the personal document area.\n\nIn order to reach the next step please click on the right at the bottom on \"next\".', 'TL', 0, '', 'dispatch.php/document/files', '', 1405592884),
 ('05434e40601a9a2a7f5fa8208ae148c1', 2, 'Available storage space', 'The storage space of the personal document area is limited. It is displayed how much storage space is still available.', 'BR', 0, 'DIV.caption-actions', 'dispatch.php/document/files', '', 1405594184),
 ('05434e40601a9a2a7f5fa8208ae148c1', 3, 'New documents and indices', 'New documents can be uploaded from the computer into the personal document area and new indices can be created here.', 'TL', 0, '#layout-sidebar SECTION DIV DIV UL LI A :eq(0)', 'dispatch.php/document/files', '', 1405593409),
-('05434e40601a9a2a7f5fa8208ae148c1', 4, 'Document overview', 'All documents and indices are listed in a tabular form. In addition to the name even more information is displayed such as the document type or the document size.', 'TL', 0, '#layout_content FORM TABLE THEAD TR TH :eq(3)', 'dispatch.php/document/files', '', 1405593089),
-('05434e40601a9a2a7f5fa8208ae148c1', 5, 'Actions', 'Already uploaded documents and folders can be edited, downloaded, shifted, copied and deleted here.', 'TR', 0, '#layout_content FORM TABLE THEAD TR TH :eq(7)', 'dispatch.php/document/files', '', 1405594079),
+('05434e40601a9a2a7f5fa8208ae148c1', 4, 'Document overview', 'All documents and indices are listed in a tabular form. In addition to the name even more information is displayed such as the document type or the document size.', 'TL', 0, '#content FORM TABLE THEAD TR TH :eq(3)', 'dispatch.php/document/files', '', 1405593089),
+('05434e40601a9a2a7f5fa8208ae148c1', 5, 'Actions', 'Already uploaded documents and folders can be edited, downloaded, shifted, copied and deleted here.', 'TR', 0, '#content FORM TABLE THEAD TR TH :eq(7)', 'dispatch.php/document/files', '', 1405594079),
 ('05434e40601a9a2a7f5fa8208ae148c1', 6, 'Export', 'Here you have the possibility to download individual folders or the full document area as a ZIP document. All documents and indices are contained therein.', 'TL', 0, '#layout-sidebar SECTION DIV DIV.sidebar-widget-header :eq(1)', 'dispatch.php/document/files', '', 1405593708);
 ";
         DBManager::get()->exec($query);
-        
+
         // add settings
         $query = "INSERT IGNORE INTO `help_tour_settings` (`tour_id`, `active`, `access`) VALUES
 ('7af1e1fb7f53c910ba9f42f43a71c723', 1, 'standard'),
diff --git a/db/migrations/5.1.12_biest_402.php b/db/migrations/5.1.12_biest_402.php
index 096bb59cfe3..0486d982d7a 100644
--- a/db/migrations/5.1.12_biest_402.php
+++ b/db/migrations/5.1.12_biest_402.php
@@ -126,17 +126,17 @@ class Biest402 extends Migration
         DBManager::get()->exec("
             INSERT IGNORE INTO `help_tour_steps` (`tour_id`, `step`, `title`, `tip`, `orientation`, `interactive`, `css_selector`, `route`, `action_prev`, `action_next`, `author_email`, `mkdate`, `chdate`) VALUES
             ('55f3a548348dcbfdca67678588887ffd', 1, '', 'Dies ist Ihr persönlicher Arbeitsplatz in Stud.IP. Hier sind Funktionen, die früher unter \"Tools\" zu finden waren, sowie neue Werkzeuge gesammelt.', 'B', 0, '', 'dispatch.php/contents/overview', '', '', 'root@localhost', 1630577268, 1630577268),
-            ('55f3a548348dcbfdca67678588887ffd', 2, '', 'Courseware dient zum Erstellen von Lerninhalten. Texte, Dateien, Videos, Test und vieles mehr lassen sich einfach zu komplexen Lerninhalten kombinieren.', 'RT', 0, '#layout_content UL:eq(0)  LI:eq(0)  A:eq(0)  DIV:eq(0)  IMG:eq(0)', 'dispatch.php/contents/overview', '', '', 'dozent@studip.de', 1630577268, 1630577268),
-            ('55f3a548348dcbfdca67678588887ffd', 3, '', 'Dateien zeigt Ihren persönlichen, geschützten Dateibereich sowie eine Übersichtsseite über alle Dateien, auf die Sie in Stud.IP Zugriff haben.', 'RT', 0, '#layout_content UL:eq(0)  LI:eq(1)  A:eq(0)  DIV:eq(0)', 'dispatch.php/contents/overview', '', '', 'dozent@studip.de', 1630577268, 1630577268),
-            ('55f3a548348dcbfdca67678588887ffd', 4, '', 'Ankündigungen ermöglicht das Einstellen von News auf Ihrer Profilseite, in Veranstaltungen in denen Sie lehren oder Einrichtungen, die Sie administrieren.', 'LT', 0, '#layout_content UL:eq(0)  LI:eq(2)  A:eq(0)  DIV:eq(0)  IMG:eq(0)', 'dispatch.php/contents/overview', '', '', 'dozent@studip.de', 1630577268, 1630577268),
-            ('55f3a548348dcbfdca67678588887ffd', 5, '', 'Fragebögen zeigt alle Fragebögen die Sie erstellt haben und die sich im persönlichen, Veranstaltungs- oder Einrichungskontext nutzen lassen.', 'LT', 0, '#layout_content UL:eq(0)  LI:eq(3)  A:eq(0)  DIV:eq(0)  IMG:eq(0)', 'dispatch.php/contents/overview', '', '', 'dozent@studip.de', 1630577268, 1630577268),
-            ('55f3a548348dcbfdca67678588887ffd', 6, '', 'Evaluationen bietet einen Baukasten zum Erstellen komplexer Umfragen sowie deren Nutzung im persönlichen, Veranstaltungs- oder Einrichungskontext.', 'T', 0, '#layout_content UL:eq(0)  LI:eq(4)  A:eq(0)  DIV:eq(0)  IMG:eq(0)', 'dispatch.php/contents/overview', '', '', 'dozent@studip.de', 1630577268, 1630577268),
-            ('55f3a548348dcbfdca67678588887ffd', 7, '', 'Lernmodule/ILIAS bietet je nach Standort Zugriff auf die Accountverwaltung von Plattformen und Werkzeugen, die an Stud.IP angedockt sind.', 'T', 0, '#layout_content UL:eq(0)  LI:eq(5)  A:eq(0)  DIV:eq(0)  IMG:eq(0)', 'dispatch.php/contents/overview', '', '', 'dozent@studip.de', 1630577268, 1630577268),
+            ('55f3a548348dcbfdca67678588887ffd', 2, '', 'Courseware dient zum Erstellen von Lerninhalten. Texte, Dateien, Videos, Tests und vieles mehr lassen sich einfach zu komplexen Lerninhalten kombinieren.', 'RT', 0, '#content UL:eq(0)  LI:eq(0)  A:eq(0)  DIV:eq(0)  IMG:eq(0)', 'dispatch.php/contents/overview', '', '', 'dozent@studip.de', 1630577268, 1630577268),
+            ('55f3a548348dcbfdca67678588887ffd', 3, '', 'Dateien zeigt Ihren persönlichen, geschützten Dateibereich sowie eine Übersichtsseite über alle Dateien, auf die Sie in Stud.IP Zugriff haben.', 'RT', 0, '#content UL:eq(0)  LI:eq(1)  A:eq(0)  DIV:eq(0)', 'dispatch.php/contents/overview', '', '', 'dozent@studip.de', 1630577268, 1630577268),
+            ('55f3a548348dcbfdca67678588887ffd', 4, '', 'Ankündigungen ermöglicht das Einstellen von News auf Ihrer Profilseite, in Veranstaltungen in denen Sie lehren oder Einrichtungen, die Sie administrieren.', 'LT', 0, '#content UL:eq(0)  LI:eq(2)  A:eq(0)  DIV:eq(0)  IMG:eq(0)', 'dispatch.php/contents/overview', '', '', 'dozent@studip.de', 1630577268, 1630577268),
+            ('55f3a548348dcbfdca67678588887ffd', 5, '', 'Fragebögen zeigt alle Fragebögen die Sie erstellt haben und die sich im persönlichen, Veranstaltungs- oder Einrichungskontext nutzen lassen.', 'LT', 0, '#content UL:eq(0)  LI:eq(3)  A:eq(0)  DIV:eq(0)  IMG:eq(0)', 'dispatch.php/contents/overview', '', '', 'dozent@studip.de', 1630577268, 1630577268),
+            ('55f3a548348dcbfdca67678588887ffd', 6, '', 'Evaluationen bietet einen Baukasten zum Erstellen komplexer Umfragen sowie deren Nutzung im persönlichen, Veranstaltungs- oder Einrichungskontext.', 'T', 0, '#content UL:eq(0)  LI:eq(4)  A:eq(0)  DIV:eq(0)  IMG:eq(0)', 'dispatch.php/contents/overview', '', '', 'dozent@studip.de', 1630577268, 1630577268),
+            ('55f3a548348dcbfdca67678588887ffd', 7, '', 'Lernmodule/ILIAS bietet je nach Standort Zugriff auf die Accountverwaltung von Plattformen und Werkzeugen, die an Stud.IP angedockt sind.', 'T', 0, '#content UL:eq(0)  LI:eq(5)  A:eq(0)  DIV:eq(0)  IMG:eq(0)', 'dispatch.php/contents/overview', '', '', 'dozent@studip.de', 1630577268, 1630577268),
             ('d9a066071e2be43b2b51c37a9d692026', 1, 'OER Campus', 'Der OER Campus ist neu in Stud.IP 5. Hier können Lernmaterialien gesucht, verwaltet und mit anderen geteilt werden.', 'B', 0, '', 'dispatch.php/oer/market', '', '', 'root@localhost', 1630577268, 1630577268),
             ('d9a066071e2be43b2b51c37a9d692026', 2, '', 'Lernmaterialien aus dem OER Campus können von hier aus direkt im Dateibereich einer Veranstaltung bereitgestellt werden.', 'B', 0, '', 'dispatch.php/oer/market', '', '', 'root@localhost', 1630577268, 1630577268),
             ('d9a066071e2be43b2b51c37a9d692026', 3, '', 'Um gezielt Lernmaterialien zu suchen, können Sie hier einen Suchbegriff eingeben.', 'B', 0, 'INPUT[name=search]', 'dispatch.php/oer/market', '', '', 'root@localhost', 1630577268, 1630577268),
-            ('d9a066071e2be43b2b51c37a9d692026', 4, '', 'Über die Filterfunktion können Sie die angezeigten Lernmaterialien weiter eingrenzen.', 'B', 0, '#layout_content FORM:eq(0)  DIV:eq(0)  DIV:eq(0)  DIV:eq(0)  BUTTON:eq(0)', 'dispatch.php/oer/market', '', '', 'root@localhost', 1630577268, 1630577268),
-            ('d9a066071e2be43b2b51c37a9d692026', 5, '', 'Im Entdeckermodus finden Sie Lernmaterial nach Schlagwörtern und Themen geordnet.', 'L', 0, '#layout_content FORM:eq(0)  DIV:eq(3)  DIV:eq(0)  DIV:eq(0)  DIV:eq(1)', 'dispatch.php/oer/market', '', '', 'root@localhost', 1630577268, 1630577268),
+            ('d9a066071e2be43b2b51c37a9d692026', 4, '', 'Über die Filterfunktion können Sie die angezeigten Lernmaterialien weiter eingrenzen.', 'B', 0, '#content FORM:eq(0)  DIV:eq(0)  DIV:eq(0)  DIV:eq(0)  BUTTON:eq(0)', 'dispatch.php/oer/market', '', '', 'root@localhost', 1630577268, 1630577268),
+            ('d9a066071e2be43b2b51c37a9d692026', 5, '', 'Im Entdeckermodus finden Sie Lernmaterial nach Schlagwörtern und Themen geordnet.', 'L', 0, '#content FORM:eq(0)  DIV:eq(3)  DIV:eq(0)  DIV:eq(0)  DIV:eq(1)', 'dispatch.php/oer/market', '', '', 'root@localhost', 1630577268, 1630577268),
             ('d9a066071e2be43b2b51c37a9d692026', 6, '', 'Wenn Sie selbst Lernmaterial erstellt haben, das Sie anderen zur Verfügung stellen möchten, können Sie es hier hochladen.', 'R', 0, 'div.sidebar-widget A:eq(0)', 'dispatch.php/oer/market', '', '', 'root@localhost', 1630577268, 1630577268),
             ('d9a066071e2be43b2b51c37a9d692026', 7, '', 'Ihr hochgeladenes Lernmaterial können Sie im Bereich \"Meine Materialien\" verwalten. Nutzen Sie den Entwurfsmodus, wenn Sie Ihr Material noch nicht veröffentlichen wollen.', 'B', 0, '#nav_oer_mymaterial A:eq(0)', 'dispatch.php/oer/market', '', '', 'root@localhost', 1630577268, 1630577268),
             ('dac47ec2e8a848744bde4b3881d31553', 1, 'Möchten Sie sehen was in Stud.IP 5 neu ist?', '', 'B', 0, '', 'dispatch.php/start', '', '', 'root@localhost', 1630577268, 1630577268),
@@ -333,9 +333,9 @@ class Biest402 extends Migration
         $settings = "(:tour_id, 1, 'standard', NULL, NULL)";
         $steps = "(:tour_id, 1, 'Profil-Tour', 'Diese Tour gibt Ihnen einen Überblick über die wichtigsten Funktionen des \"Profils\".\r\n\r\nUm auf den nächsten Schritt zu kommen, klicken Sie bitte rechts unten auf \"Weiter\".', 'T', 0, '', 'dispatch.php/profile', '', '', '', 1406722657, 0),
         (:tour_id, 2, 'Persönliches Bild', 'Wenn ein Bild hochgeladen wurde, wird es hier angezeigt. Dieses kann jederzeit geändert werden.', 'RT', 0, '.avatar-normal', 'dispatch.php/profile', '', '', '', 1406722657, 0),
-        (:tour_id, 3, 'Stud.IP-Score', 'Der Stud.IP-Score wächst mit den Aktivitäten in Stud.IP und repräsentiert so die Erfahrung mit Stud.IP.', 'BL', 0, '#layout_content TABLE:eq(0) TBODY:eq(0) TR:eq(0) TD:eq(0) A:eq(0)', 'dispatch.php/profile', '', '', '', 1406722657, 0),
-        (:tour_id, 4, 'Ankündigungen', 'Sie können auf dieser Seite persönliche Ankündigungen veröffentlichen.', 'B', 0, '#layout_content ARTICLE:eq(0)  HEADER:eq(0)  H1:eq(0)', 'dispatch.php/profile', '', '', '', 1406722657, 0),
-        (:tour_id, 5, 'Neue Ankündigung', 'Klicken Sie auf das Plus-Zeichen, wenn Sie eine Ankündigung erstellen möchten.', 'BR', 0, '#layout_content ARTICLE:eq(0)  HEADER:eq(0)  NAV:eq(0)  A:eq(0)', 'dispatch.php/profile', '', '', '', 1406722657, 0),
+        (:tour_id, 3, 'Stud.IP-Score', 'Der Stud.IP-Score wächst mit den Aktivitäten in Stud.IP und repräsentiert so die Erfahrung mit Stud.IP.', 'BL', 0, '#content TABLE:eq(0) TBODY:eq(0) TR:eq(0) TD:eq(0) A:eq(0)', 'dispatch.php/profile', '', '', '', 1406722657, 0),
+        (:tour_id, 4, 'Ankündigungen', 'Sie können auf dieser Seite persönliche Ankündigungen veröffentlichen.', 'B', 0, '#content ARTICLE:eq(0)  HEADER:eq(0)  H1:eq(0)', 'dispatch.php/profile', '', '', '', 1406722657, 0),
+        (:tour_id, 5, 'Neue Ankündigung', 'Klicken Sie auf das Plus-Zeichen, wenn Sie eine Ankündigung erstellen möchten.', 'BR', 0, '#content ARTICLE:eq(0)  HEADER:eq(0)  NAV:eq(0)  A:eq(0)', 'dispatch.php/profile', '', '', '', 1406722657, 0),
         (:tour_id, 6, 'Persönliche Angaben', 'Weitere persönliche Angaben und Einstellungen können über diese Seiten geändert werden.', 'B', 0, '#tabs li:eq(2)', 'dispatch.php/profile', '', '', 'dozent@studip.de', 1406722657, 0)";
         $this->updateTour($tour_id, $tour, $settings, $steps);
 
@@ -344,9 +344,9 @@ class Biest402 extends Migration
         $settings = "(:tour_id, 1, 'standard', NULL, NULL)";
         $steps = "(:tour_id, 1, 'Profile tour', 'This tour provides a general overview of the profile page\'s structure.\r\n\rTo proceed, please click \"Continue\" in the lower-right corner.', 'T', 0, '', 'dispatch.php/profile', '', '', '', 1406722657, 0),
         (:tour_id, 2, 'Personal picture', 'If you uploaded a picture, it will be displayed here. You can change it at all times.', 'RT', 0, '.avatar-normal', 'dispatch.php/profile', '', '', '', 1406722657, 0),
-        (:tour_id, 3, 'Stud.IP-Score', 'The Stud.IP-Score increases with the activities in Stud.IP and thus represents the experience with  Stud.IP.', 'BL', 0, '#layout_content TABLE:eq(0) TBODY:eq(0) TR:eq(0) TD:eq(0) A:eq(0)', 'dispatch.php/profile', '', '', '', 1406722657, 0),
-        (:tour_id, 4, 'Announcements', 'You can publish personal announcements on this site.', 'B', 0, '#layout_content ARTICLE:eq(0)  HEADER:eq(0)  H1:eq(0)', 'dispatch.php/profile', '', '', '', 1406722657, 0),
-        (:tour_id, 5, 'New announcement', 'Click on the plus sign, if you would like to create an announcement.', 'BR', 0, '#layout_content ARTICLE:eq(0)  HEADER:eq(0)  NAV:eq(0)  A:eq(0)', 'dispatch.php/profile', '', '', '', 1406722657, 0),
+        (:tour_id, 3, 'Stud.IP-Score', 'The Stud.IP-Score increases with the activities in Stud.IP and thus represents the experience with  Stud.IP.', 'BL', 0, '#content TABLE:eq(0) TBODY:eq(0) TR:eq(0) TD:eq(0) A:eq(0)', 'dispatch.php/profile', '', '', '', 1406722657, 0),
+        (:tour_id, 4, 'Announcements', 'You can publish personal announcements on this site.', 'B', 0, '#content ARTICLE:eq(0)  HEADER:eq(0)  H1:eq(0)', 'dispatch.php/profile', '', '', '', 1406722657, 0),
+        (:tour_id, 5, 'New announcement', 'Click on the plus sign, if you would like to create an announcement.', 'BR', 0, '#content ARTICLE:eq(0)  HEADER:eq(0)  NAV:eq(0)  A:eq(0)', 'dispatch.php/profile', '', '', '', 1406722657, 0),
         (:tour_id, 6, 'Personal details', 'Your picture and additional user data can be changed on these sites.', 'B', 0, '#tabs li:eq(2)', 'dispatch.php/profile', '', '', 'dozent@studip.de', 1406722657, 0)";
         $this->updateTour($tour_id, $tour, $settings, $steps);
 
@@ -386,7 +386,7 @@ class Biest402 extends Migration
         (:tour_id, 5, 'Inhaltselemente zuordnen', 'Hier können Inhaltselemente aktiviert werden, welche  innerhalb der Studiengruppe zur Verfügung stehen sollen. Das Fragezeichen gibt nähere Informationen zur Bedeutung der einzelnen Inhaltselemente.', 'R', 0, '#wizard-access', 'dispatch.php/my_studygroups', '', '', 'dozent@studip.de', 1405685093, 0),
         (:tour_id, 6, 'Zugang festlegen', 'Mit diesem Drop-down-Menü kann der Zugang zur Studiengruppe eingeschränkt werden.\r\n\r\nBeim Zugang \"offen für alle\" können sich alle Studierenden frei eintragen und an der Gruppe beteiligen.\r\n\r\nBeim Zugang \"Auf Anfrage\" müssen Teilnehmer durch den Gruppengründer hinzugefügt werden.', 'R', 0, '#wizard-access', 'dispatch.php/my_studygroups', '', '', 'root@localhost', 1405685334, 0),
         (:tour_id, 7, 'Nutzungsbedingungen akzeptieren', 'Bei der Erstellung einer Studiengruppe müssen die Nutzungsbedingungen akzeptiert werden.', 'R', 0, '#ui-id-1 FORM:eq(0)  FIELDSET:eq(0)  LABEL:eq(4)', 'dispatch.php/my_studygroups', '', '', 'root@localhost', 1405685652, 0),
-        (:tour_id, 8, 'Studiengruppe speichern', 'Nach dem Speichern einer Studiengruppe erscheint diese unter \"Veranstaltungen > Meine Studiengruppen\".', 'L', 0, '#layout_content FORM TABLE TBODY TR TD :eq(14)', 'dispatch.php/my_studygroups', '', 'BUTTON.cancel:eq(0)', 'root@localhost', 1405686068, 0)";
+        (:tour_id, 8, 'Studiengruppe speichern', 'Nach dem Speichern einer Studiengruppe erscheint diese unter \"Veranstaltungen > Meine Studiengruppen\".', 'L', 0, '#content FORM TABLE TBODY TR TD :eq(14)', 'dispatch.php/my_studygroups', '', 'BUTTON.cancel:eq(0)', 'root@localhost', 1405686068, 0)";
         $this->updateTour($tour_id, $tour, $settings, $steps);
 
         $tour_id = '9e9dca9b1214294b9605824bfe90fba1';
@@ -399,7 +399,7 @@ class Biest402 extends Migration
         (:tour_id, 5, 'Allocate content elements', 'Content elements can be activated here, which are to be available within the study group. The question mark provides more detailed information on the meaning of the individual content elements', 'R', 0, '#wizard-access', 'dispatch.php/my_studygroups', '', '', 'dozent@studip.de', 1405685093, 0),
         (:tour_id, 6, 'Stipulate access', 'The access to the study group can be restricted with this drop down menu.\n\nAll students can register freely and participate in the group with the access \"open for everyone\".\n\nWith the access \"upon request\" participants must be added by the group founder.', 'R', 0, '#wizard-access', 'dispatch.php/my_studygroups', '', '', 'root@localhost', 1405685334, 0),
         (:tour_id, 7, 'Accept terms of use', 'The terms of use have to be accepted before you can create a study group.', 'R', 0, '#ui-id-1 FORM:eq(0)  FIELDSET:eq(0)  LABEL:eq(4)', 'dispatch.php/my_studygroups', '', '', 'root@localhost', 1405685652, 0),
-        (:tour_id, 8, 'Save study group', 'After you saved a study group it will appear under \"My courses\" > \"My study groups\".', 'L', 0, '#layout_content FORM TABLE TBODY TR TD :eq(14)', 'dispatch.php/my_studygroups', '', 'BUTTON.cancel:eq(0)', 'root@localhost', 1405686068, 0)";
+        (:tour_id, 8, 'Save study group', 'After you saved a study group it will appear under \"My courses\" > \"My study groups\".', 'L', 0, '#content FORM TABLE TBODY TR TD :eq(14)', 'dispatch.php/my_studygroups', '', 'BUTTON.cancel:eq(0)', 'root@localhost', 1405686068, 0)";
         $this->updateTour($tour_id, $tour, $settings, $steps);
 
         $tour_id = '6849293baa05be5bef8ff438dc7c438b';
diff --git a/lib/classes/Context.php b/lib/classes/Context.php
index 33e109734de..2d6c7cd775e 100644
--- a/lib/classes/Context.php
+++ b/lib/classes/Context.php
@@ -181,7 +181,7 @@ class Context
     }
 
     /**
-     * Get Fullname of current context, to use it in the page-title
+     * Get Fullname of current context, to use it in the context-title
      *
      * @return string or null if no context is available
      */
diff --git a/lib/include/html_end.inc.php b/lib/include/html_end.inc.php
index 3f41584d7e8..4f64d48c682 100644
--- a/lib/include/html_end.inc.php
+++ b/lib/include/html_end.inc.php
@@ -1,9 +1,6 @@
-            </div>
-        </div>
-    </div>
+    <!-- Footer template -->
     <?= $GLOBALS['template_factory']->render('footer', ['header_template' => $header_template ?? null]) ?>
 <!-- Ende Page -->
-</div>
 
     <?= SkipLinks::getHTML() ?>
 
diff --git a/lib/include/html_head.inc.php b/lib/include/html_head.inc.php
index 3d06aa151b4..4ab1c0ecd1e 100644
--- a/lib/include/html_head.inc.php
+++ b/lib/include/html_head.inc.php
@@ -68,6 +68,3 @@ $lang_attr = str_replace('_', '-', $_SESSION['_language']);
 </head>
 
 <body id="<?= PageLayout::getBodyElementId() ?>">
-<div id="layout_wrapper">
-    <? SkipLinks::insertContainer() ?>
-    <?= PageLayout::getBodyElements() ?>
diff --git a/lib/wiki.inc.php b/lib/wiki.inc.php
index 0b6be7b54ff..29e50e448be 100644
--- a/lib/wiki.inc.php
+++ b/lib/wiki.inc.php
@@ -1264,7 +1264,7 @@ function getAllWikiPages($range_id, $header, $fullhtml = true) {
 *
 **/
 function showPageFrameStart() {
-    echo '<div id="main_content" role="main">';
+    echo '<div id="main_content">';
 }
 
 /**
diff --git a/package-lock.json b/package-lock.json
index 814f67900fb..bcca55a6197 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -98,7 +98,6 @@
                 "sass-loader": "^10.1.0",
                 "select2": "4.0.13",
                 "sprintf-js": "^1.0.3",
-                "sticky-kit": "1.1.3",
                 "stream-browserify": "^3.0.0",
                 "style-loader": "^2.0.0",
                 "stylelint": "^14.9.1",
diff --git a/package.json b/package.json
index cbd08e5e6c4..8eb785fec7f 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,6 @@
         "sass-loader": "^10.1.0",
         "select2": "4.0.13",
         "sprintf-js": "^1.0.3",
-        "sticky-kit": "1.1.3",
         "stream-browserify": "^3.0.0",
         "style-loader": "^2.0.0",
         "stylelint": "^14.9.1",
diff --git a/public/assets/javascripts/ckeditor/plugins/studip-floatbar/plugin.js b/public/assets/javascripts/ckeditor/plugins/studip-floatbar/plugin.js
index b1d53422700..8306c378c85 100644
--- a/public/assets/javascripts/ckeditor/plugins/studip-floatbar/plugin.js
+++ b/public/assets/javascripts/ckeditor/plugins/studip-floatbar/plugin.js
@@ -57,8 +57,7 @@
     }
 
     function updateStickyTools(editor) {
-        var MARGIN = $('#barBottomContainer').length ?
-                $('#barBottomContainer').height() : 25;
+        var MARGIN = $('#top-bar').height() ?? 25;
 
         var toolbarId = editor.config.sharedSpaces.top;
 
diff --git a/public/index.php b/public/index.php
index 4206821ecca..c36681d413b 100644
--- a/public/index.php
+++ b/public/index.php
@@ -95,7 +95,6 @@ if (Request::get('logout'))
     $index_nobody_template->set_attribute('logout', true);
 }
 
-echo '<div><div class="index_container">';
 echo $index_nobody_template->render();
 
 $layout = $GLOBALS['template_factory']->open('shared/index_box');
diff --git a/resources/assets/javascripts/bootstrap/application.js b/resources/assets/javascripts/bootstrap/application.js
index 05b2c26666b..cafd07e8197 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 e41d0641136..d3675ed7a82 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 91fc3dbf4b5..611915e5570 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 c33fd7f2bf8..4d0738ed62d 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 f1251794a38..f839ec20af0 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 c1542926640..281f6f0aa08 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 53a70159b8f..1238cec7e0c 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 af0861e1981..01e9d963e94 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 4315dd93529..d584b1c4041 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 02c0ce1be9f..24f31190384 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 e3724de180d..82053f67431 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 730cbae7ecf..dee1e3da125 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 a034910e116..0ada9ad20f4 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 777f221b52b..d1691637f9a 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 c013107ec23..d02486d4253 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 76dfadf4a01..ced430d0747 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 c511847b6b4..b3eb9d1a7d7 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 d39036bdda0..5d91eb9aabc 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 f960d92f3f9..410b7543753 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 dde86186d3d..fe6cc269cdc 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 b4c6d4dc604..52d1c949d5b 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 882d9820483..90f10536536 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 cfafc8dfc0b..d9048693fef 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 ac182a9f9e1..53ab00f6921 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 87e742c8205..16e63541f49 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 6768a86e56a..8f01d793602 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 7a4d9c9bc28..c237a54bd51 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 962844eb868..a1df9dcb4cd 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 2d65b043d25..27a4d01cd43 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 93bbfa80846..b9a51522a58 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 c362bf5c269..33efcc5bbc5 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 2073450a538..eb156bb66b0 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 c6afb4f5a37..46839712b4b 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 53b4279162e..a5bc943df81 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 5ccab9da70c..ba8abc5c7f9 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 5e8b8aa28e2..a0a3e3f0564 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 8a0cf626503..2c6649f23ca 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 3c4e0c20bd3..ae1e5421da7 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 61aa9d9722e..2ff6b1a45ff 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 975bd0de6ab..0c36b8989a3 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 ffa3221234d..47d21cb09b5 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 1a1d076e9a6..2f0a94f1943 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 2f19efcad9d..d339d1980cf 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 e3b3838c544..85621e301ce 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 5884b04f13f..50e47a21604 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 a633f1b607b..552cfda903a 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 e8e93395d1c..c397c1b1fa0 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 5fa6df5ee6e..628d37d7df3 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 51bb9c2be4d..e44196c68d1 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 811ca9aca39..4298e3dbc8f 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 bd322971b0f..517949b62e2 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 36ca32373e7..ed40030871c 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;
 }
 
diff --git a/resources/vue/components/StudipSelect.vue b/resources/vue/components/StudipSelect.vue
index 6347b2964ff..196a91bd5fd 100644
--- a/resources/vue/components/StudipSelect.vue
+++ b/resources/vue/components/StudipSelect.vue
@@ -84,7 +84,7 @@ export default {
                 document.documentElement.scrollHeight,
                 document.documentElement.offsetHeight
             );
-            let footerHeight = document.getElementById('layout_footer').offsetHeight;
+            let footerHeight = document.getElementById('main-footer').offsetHeight;
             let functionalAreaHeight = totalDocHeight - footerHeight;
             return totalExpandedList >= functionalAreaHeight ? 'top' : 'bottom';
         },
diff --git a/templates/footer.php b/templates/footer.php
index 86e0df3b24b..5f4f0504bab 100644
--- a/templates/footer.php
+++ b/templates/footer.php
@@ -1,8 +1,8 @@
 <!-- Beginn Footer -->
-<?= SkipLinks::addIndex(_('Fußzeile'), 'layout_footer',900) ?>
-<footer id="layout_footer" aria-label="<?= _('Fußzeile') ?>">
+<?= SkipLinks::addIndex(_('Fußzeile'), 'main-footer',900) ?>
+<footer id="main-footer" aria-label="<?= _('Fußzeile') ?>">
 <? if (is_object($GLOBALS['user']) && $GLOBALS['user']->id != 'nobody') : ?>
-    <div id="footer">
+    <div id="main-footer-info">
         <? printf(_('Sie sind angemeldet als %s (%s)'),
                   htmlReady($GLOBALS['user']->username),
                   htmlReady($GLOBALS['user']->perms)) ?>
diff --git a/templates/header.php b/templates/header.php
index f07f765c925..ec2e0831670 100644
--- a/templates/header.php
+++ b/templates/header.php
@@ -13,187 +13,300 @@ if (isset($_COOKIE['navigation-length'])) {
         $_COOKIE['navigation-length']
     );
 }
+
+$navigation = PageLayout::getTabNavigation();
+$tab_root_path = PageLayout::getTabNavigationPath();
+if ($navigation) {
+    $subnavigation = $navigation->activeSubNavigation();
+    if ($subnavigation !== null) {
+        $nav_links = new NavigationWidget();
+        $nav_links->setId('sidebar-navigation');
+        $nav_links->addCSSClass('navigation-level-3');
+        $nav_links->setTitle(_('Dritte Navigationsebene'));
+        if (!$navigation->getImage()) {
+            $nav_links->addLayoutCSSClass('show');
+        }
+        foreach ($subnavigation as $path => $nav) {
+            if (!$nav->isVisible()) {
+                continue;
+            }
+            $nav_id = "nav_".implode("_", preg_split("/\//", $tab_root_path, -1, PREG_SPLIT_NO_EMPTY))."_".$path;
+            $link = $nav_links->addLink(
+                $nav->getTitle(),
+                URLHelper::getURL($nav->getURL()),
+                null,
+                array_merge($nav->getLinkAttributes(), ['id' => $nav_id])
+            );
+            $link->setActive($nav->isActive());
+            if (!$nav->isEnabled()) {
+                $link['disabled'] = true;
+                $link->addClass('quiet');
+            }
+        }
+        if ($nav_links->hasElements()) {
+            Sidebar::get()->insertWidget($nav_links, ':first');
+        }
+    }
+}
+
 ?>
+<? SkipLinks::insertContainer() ?>
+<?= PageLayout::getBodyElements() ?>
 
-<!-- Leiste unten -->
-<div id="barBottomContainer">
-    <div id="barBottomLeft">
-        <input type="checkbox" id="barTopMenu-toggle">
-        <label for="barTopMenu-toggle">
-            <?= _('Menü') ?>
-        </label>
-        <? // The main menu will be placed here when scrolled, see navigation.less ?>
-    </div>
-    <div id="barTopFont">
-        <?= htmlReady(Config::get()->UNI_NAME_CLEAN) ?>
-    </div>
+<!-- Begin main site header -->
+<header id="main-header">
+
+    <!-- Top bar with site title, quick search and avatar menu -->
+    <div id="top-bar" role="banner">
+        <div id="responsive-menu">
+            <input type="checkbox" id="barTopMenu-toggle">
+            <label for="barTopMenu-toggle">
+                <?= _('Menü') ?>
+            </label>
+            <? // The main menu will be placed here when scrolled, see navigation.less ?>
+        </div>
+        <div id="site-title">
+            <?= htmlReady(Config::get()->UNI_NAME_CLEAN) ?>
+        </div>
 
-    <!-- Dynamische Links ohne Icons -->
-    <div id="barBottomright">
-        <ul>
-
-        <? if (Navigation::hasItem('/links')): ?>
-            <? foreach (Navigation::getItem('/links') as $nav): ?>
-                <? if ($nav->isVisible()) : ?>
-                    <li class="<? if ($nav->isActive()) echo 'active'; ?> <?= htmlReady($nav->getLinkAttributes()['class'] ?? '') ?>">
-                        <a
-                            <? if (is_internal_url($url = $nav->getURL())) : ?>
-                                href="<?= URLHelper::getLink($url) ?>"
-                            <? else: ?>
-                                href="<?= htmlReady($url) ?>" target="_blank" rel="noopener noreferrer"
-                            <? endif; ?>
-                            <? if ($nav->getDescription()): ?>
-                                title="<?= htmlReady($nav->getDescription()) ?>"
-                            <? endif; ?>
-                                <?= arrayToHtmlAttributes(array_diff_key($nav->getLinkAttributes(), array_flip(['class', 'title']))) ?>
-                            ><?= htmlReady($nav->getTitle()) ?></a>
+        <!-- Dynamische Links ohne Icons -->
+        <div id="header-links">
+            <ul>
+
+            <? if (Navigation::hasItem('/links')): ?>
+                <? foreach (Navigation::getItem('/links') as $nav): ?>
+                    <? if ($nav->isVisible()) : ?>
+                        <li class="<? if ($nav->isActive()) echo 'active'; ?> <?= htmlReady($nav->getLinkAttributes()['class'] ?? '') ?>">
+                            <a
+                                <? if (is_internal_url($url = $nav->getURL())) : ?>
+                                    href="<?= URLHelper::getLink($url) ?>"
+                                <? else: ?>
+                                    href="<?= htmlReady($url) ?>" target="_blank" rel="noopener noreferrer"
+                                <? endif; ?>
+                                <? if ($nav->getDescription()): ?>
+                                    title="<?= htmlReady($nav->getDescription()) ?>"
+                                <? endif; ?>
+                                    <?= arrayToHtmlAttributes(array_diff_key($nav->getLinkAttributes(), array_flip(['class', 'title']))) ?>
+                                ><?= htmlReady($nav->getTitle()) ?></a>
+                        </li>
+                    <? endif; ?>
+                <? endforeach; ?>
+            <? endif; ?>
+
+            <? if (isset($show_quicksearch)) : ?>
+                <? if (PageLayout::hasCustomQuicksearch()): ?>
+                    <?= PageLayout::getCustomQuicksearch() ?>
+                <? else: ?>
+                    <? SkipLinks::addIndex(_('Suche'), 'globalsearch-input', 910) ?>
+                    <li id="quicksearch_item">
+                        <script>
+                            var selectSem = function (seminar_id, name) {
+                                document.location = "<?= URLHelper::getURL("dispatch.php/course/details/", ["send_from_search" => 1, "send_from_search_page" => URLHelper::getURL("dispatch.php/search/courses?keep_result_set=1")])  ?>&sem_id=" + seminar_id;
+                            };
+                        </script>
+                        <?= $GLOBALS['template_factory']->render('globalsearch/searchbar') ?>
                     </li>
                 <? endif; ?>
-            <? endforeach; ?>
-        <? endif; ?>
-
-        <? if (isset($show_quicksearch)) : ?>
-            <? if (PageLayout::hasCustomQuicksearch()): ?>
-                <?= PageLayout::getCustomQuicksearch() ?>
-            <? else: ?>
-                <? SkipLinks::addIndex(_('Suche'), 'globalsearch-input', 910) ?>
-                <li id="quicksearch_item">
-                    <script>
-                        var selectSem = function (seminar_id, name) {
-                            document.location = "<?= URLHelper::getURL("dispatch.php/course/details/", ["send_from_search" => 1, "send_from_search_page" => URLHelper::getURL("dispatch.php/search/courses?keep_result_set=1")])  ?>&sem_id=" + seminar_id;
-                        };
-                    </script>
-                    <?= $GLOBALS['template_factory']->render('globalsearch/searchbar') ?>
-                </li>
             <? endif; ?>
-        <? endif; ?>
 
-        <? if (is_object($GLOBALS['perm']) && $GLOBALS['perm']->have_perm('user')): ?>
-            <? $active = Navigation::hasItem('/profile')
-                      && Navigation::getItem('/profile')->isActive();
-            ?>
-
-            <!-- User-Avatar -->
-            <li class="header_avatar_container <? if ($active) echo 'active'; ?>" id="barTopAvatar">
-
-            <? if (is_object($GLOBALS['perm']) && PersonalNotifications::isActivated() && $GLOBALS['perm']->have_perm('autor')) : ?>
-                <? $notifications = PersonalNotifications::getMyNotifications() ?>
-                <? $lastvisit = (int)UserConfig::get($GLOBALS['user']->id)->getValue('NOTIFICATIONS_SEEN_LAST_DATE') ?>
-                <div id="notification_container"<?= count($notifications) > 0 ? ' class="hoverable"' : '' ?>>
-                    <? foreach ($notifications as $notification) {
-                        if ($notification['mkdate'] > $lastvisit) {
-                            $alert = true;
-                        }
-                    } ?>
-                    <button id="notification_marker" data-toggles="#notification_checkbox" <?= !empty($alert) ? ' class="alert"' : "" ?>
-                            title="<?= sprintf(
-                                ngettext('%u Benachrichtigung', '%u Benachrichtigungen', count($notifications)),
-                                count($notifications)
-                            ) ?>" data-lastvisit="<?= $lastvisit ?>"
-                            <?= count($notifications) == 0 ? 'disabled' : '' ?>>
-                        <span class="count" aria-hidden="true"><?= count($notifications) ?></span>
-                    </button>
-                    <input type="checkbox" id="notification_checkbox">
-                    <div class="list below" id="notification_list">
-                        <a class="mark-all-as-read <? if (count($notifications) < 2) echo 'invisible'; ?>" href="<?= URLHelper::getLink('dispatch.php/jsupdater/mark_notification_read/all', ['return_to' => $_SERVER['REQUEST_URI']]) ?>">
-                            <?= _('Alle Benachrichtigungen als gelesen markieren') ?>
-                        </a>
-                        <a class="enable-desktop-notifications" href="#" style="display: none;">
-                            <?= _('Desktop-Benachrichtigungen aktivieren') ?>
-                        </a>
-                        <ul>
-                        <? foreach ($notifications as $notification) : ?>
-                            <?= $notification->getLiElement() ?>
-                        <? endforeach ?>
-                        </ul>
+            <? if (is_object($GLOBALS['perm']) && $GLOBALS['perm']->have_perm('user')): ?>
+                <? $active = Navigation::hasItem('/profile')
+                          && Navigation::getItem('/profile')->isActive();
+                ?>
+
+                <!-- User-Avatar -->
+                <li class="header_avatar_container <? if ($active) echo 'active'; ?>" id="avatar-menu-container">
+
+                <? if (is_object($GLOBALS['perm']) && PersonalNotifications::isActivated() && $GLOBALS['perm']->have_perm('autor')) : ?>
+                    <? $notifications = PersonalNotifications::getMyNotifications() ?>
+                    <? $lastvisit = (int)UserConfig::get($GLOBALS['user']->id)->getValue('NOTIFICATIONS_SEEN_LAST_DATE') ?>
+                    <div id="notification-container"<?= count($notifications) > 0 ? ' class="hoverable"' : '' ?>>
+                        <? foreach ($notifications as $notification) {
+                            if ($notification['mkdate'] > $lastvisit) {
+                                $alert = true;
+                            }
+                        } ?>
+                        <button id="notification_marker" data-toggles="#notification_checkbox" <?= !empty($alert) ? ' class="alert"' : "" ?>
+                                title="<?= sprintf(
+                                    ngettext('%u Benachrichtigung', '%u Benachrichtigungen', count($notifications)),
+                                    count($notifications)
+                                ) ?>" data-lastvisit="<?= $lastvisit ?>"
+                                <?= count($notifications) == 0 ? 'disabled' : '' ?>>
+                            <span class="count" aria-hidden="true"><?= count($notifications) ?></span>
+                        </button>
+                        <input type="checkbox" id="notification_checkbox">
+                        <div class="list below" id="notification_list">
+                            <a class="mark-all-as-read <? if (count($notifications) < 2) echo 'invisible'; ?>" href="<?= URLHelper::getLink('dispatch.php/jsupdater/mark_notification_read/all', ['return_to' => $_SERVER['REQUEST_URI']]) ?>">
+                                <?= _('Alle Benachrichtigungen als gelesen markieren') ?>
+                            </a>
+                            <a class="enable-desktop-notifications" href="#" style="display: none;">
+                                <?= _('Desktop-Benachrichtigungen aktivieren') ?>
+                            </a>
+                            <ul>
+                            <? foreach ($notifications as $notification) : ?>
+                                <?= $notification->getLiElement() ?>
+                            <? endforeach ?>
+                            </ul>
+                        </div>
+                    <? if (PersonalNotifications::isAudioActivated()): ?>
+                        <audio id="audio_notification" preload="none">
+                            <source src="<?= Assets::url('sounds/blubb.ogg') ?>" type="audio/ogg">
+                            <source src="<?= Assets::url('sounds/blubb.mp3') ?>" type="audio/mpeg">
+                        </audio>
+                    <? endif; ?>
                     </div>
-                <? if (PersonalNotifications::isAudioActivated()): ?>
-                    <audio id="audio_notification" preload="none">
-                        <source src="<?= Assets::url('sounds/blubb.ogg') ?>" type="audio/ogg">
-                        <source src="<?= Assets::url('sounds/blubb.mp3') ?>" type="audio/mpeg">
-                    </audio>
+                <? else: ?>
+                    <div id="notification-container"></div>
                 <? endif; ?>
-                </div>
-            <? else: ?>
-                <div id="notification_container"></div>
-            <? endif; ?>
 
-            <? if (Navigation::hasItem('/avatar')): ?>
-                <div id="header_avatar_menu">
-                <?php
-                $action_menu = ContentGroupMenu::get();
-                $action_menu->addCSSClass('avatar-menu');
-                $action_menu->addAttribute('data-action-menu-reposition', 'false');
-                $action_menu->setLabel(User::findCurrent()->getFullName());
-                $action_menu->setAriaLabel(_("Profilmenü"));
-                $action_menu->setIcon(
-                    Avatar::getAvatar(User::findCurrent()->id)->getImageTag(Avatar::MEDIUM),
-                    ['id' => 'header_avatar_image_link']
-                );
-
-                foreach (Navigation::getItem('/avatar') as $subnav) {
-                    $action_menu->addLink(
-                        URLHelper::getURL($subnav->getURL(), [], true),
-                        $subnav->getTitle(),
-                        $subnav->getImage()
+                <? if (Navigation::hasItem('/avatar')): ?>
+                    <div id="avatar-menu">
+                    <?php
+                    $action_menu = ContentGroupMenu::get();
+                    $action_menu->addCSSClass('avatar-menu');
+                    $action_menu->addAttribute('data-action-menu-reposition', 'false');
+                    $action_menu->setLabel(User::findCurrent()->getFullName());
+                    $action_menu->setAriaLabel(_('Profilmenü'));
+                    $action_menu->setIcon(
+                        Avatar::getAvatar(User::findCurrent()->id)->getImageTag(Avatar::MEDIUM),
+                        ['id' => 'header_avatar_image_link']
                     );
-                }
-                SkipLinks::addIndex(_("Profilmenü"), "header_avatar_image_link", 1);
-                ?>
-                <?= $action_menu->render(); ?>
-                </div>
+
+                    foreach (Navigation::getItem('/avatar') as $subnav) {
+                        $action_menu->addLink(
+                            URLHelper::getURL($subnav->getURL(), [], true),
+                            $subnav->getTitle(),
+                            $subnav->getImage()
+                        );
+                    }
+                    SkipLinks::addIndex(_('Profilmenü'), "header_avatar_image_link", 1);
+                    ?>
+                    <?= $action_menu->render(); ?>
+                    </div>
+                <? endif; ?>
+                </li>
             <? endif; ?>
-            </li>
-        <? endif; ?>
 
-        </ul>
+            </ul>
+        </div>
     </div>
-</div>
-<!-- Ende Header -->
+    <!-- End top bar -->
+
+    <!-- Main navigation and right-hand logo -->
+    <nav id="navigation-level-1" aria-current="page" aria-label="<?= _('Hauptnavigation') ?>">
+        <? SkipLinks::addIndex(_('Hauptnavigation'), 'navigation-level-1', 2); ?>
+        <ul id="navigation-level-1-items" <? if (count($header_nav['hidden']) > 0) echo 'class="overflown"'; ?>>
+        <? foreach ($header_nav['visible'] as $path => $nav): ?>
+            <?= $this->render_partial(
+                'header-navigation-item.php',
+                compact('path', 'nav')
+            ) ?>
+        <? endforeach; ?>
+            <li class="overflow">
+                <input type="checkbox" id="header-sink">
+                <label for="header-sink">
+                    <a class="canvasready" href="#">
+                        <?= Icon::create('action', 'navigation')->asImg(28, [
+                            'class'  => 'headericon original',
+                            'title'  => '',
+                            'alt'    => '',
+                        ]) ?>
+                        <div class="navtitle">
+                            <?= _('Mehr') ?>&hellip;
+                        </div>
+                    </a>
+                </label>
+
+                <ul>
+                <? foreach ($header_nav['hidden'] as $path => $nav) : ?>
+                    <?= $this->render_partial(
+                        'header-navigation-item.php',
+                        compact('path', 'nav')
+                    ) ?>
+                <? endforeach; ?>
+                </ul>
+            </li>
+        </ul>
+
+        <!-- Stud.IP Logo -->
+        <a class="studip-logo" id="top-logo" href="http://www.studip.de/" title="Stud.IP Homepage" target="_blank" rel="noopener noreferrer">
+            Stud.IP Homepage
+        </a>
+    </nav>
+    <!-- End main navigation -->
+
+    <? $contextable = Context::get() && (
+            (Navigation::hasItem('/course') && Navigation::getItem('/course')->isActive()) ||
+            (Navigation::hasItem('/admin/institute') && Navigation::getItem('/admin/institute')->isActive())); ?>
+
+    <div id="current-page-structure" <? if (!($contextable)) echo 'class="contextless"'; ?>>
 
-<!-- Start Header -->
-<div id="flex-header">
-    <!--<div id='barTopLogo'>
-        <?= Assets::img('logos/logoneu.jpg', ['alt' => 'Logo Uni Göttingen']) ?>
+        <? if (PageLayout::isHeaderEnabled() && Navigation::hasItem('/course') && Navigation::getItem('/course')->isActive() && $_SESSION['seminar_change_view_'.Context::getId()]) : ?>
+            <?= $this->render_partial('change_view', ['changed_status' => $_SESSION['seminar_change_view_'.Context::getId()]]) ?>
+        <? endif ?>
+
+        <? if (Context::get() || PageLayout::isHeaderEnabled()): ?>
+            <? if (is_object($GLOBALS['perm']) && !$GLOBALS['perm']->have_perm('admin') && $contextable) : ?>
+                <? $membership = CourseMember::find([Context::get()->id, $GLOBALS['user']->id]) ?>
+                <? if ($membership) : ?>
+                    <a href="<?= URLHelper::getLink('dispatch.php/my_courses/groups') ?>"
+                       data-dialog
+                       class="colorblock gruppe<?= $membership ? $membership['gruppe'] : 1 ?>"></a>
+                <? endif ?>
+            <? endif ?>
+            <? if ($contextable) : ?>
+                <div id="context-title">
+                    <? if (Context::isCourse()) : ?>
+                        <?= Icon::create('seminar', Icon::ROLE_INFO)->asImg(20, ['class' => 'context_icon']) ?>
+                        <?= htmlReady(Context::get()->getFullname()) ?>
+                    <? elseif (Context::isInstitute()) : ?>
+                        <?= Icon::create('institute', Icon::ROLE_INFO)->asImg(20, ['class' => 'context_icon']) ?>
+                        <?= htmlReady(Context::get()->name) ?>
+                    <? endif ?>
+                </div>
+            <? endif ?>
+
+            <? SkipLinks::addIndex(_('Zweite Navigationsebene'), 'navigation-level-2', 910) ?>
+            <nav id="navigation-level-2" aria-current="page" aria-label="<?= _('Zweite Navigationsebene') ?>">
+
+                <? if (PageLayout::isHeaderEnabled() /*&& isset($navigation)*/) : ?>
+                    <?= $this->render_partial('tabs', compact('navigation', 'membership')) ?>
+                <? endif; ?>
+            </nav>
+        <? endif; ?>
+
+        <?
+        if (is_object($GLOBALS['user']) && $GLOBALS['user']->id != 'nobody') {
+            // only mark course if user is logged in and free access enabled
+            $is_public_course = Context::isCourse() && Config::get()->ENABLE_FREE_ACCESS;
+            $is_public_institute = Context::isInstitute()
+                && Config::get()->ENABLE_FREE_ACCESS
+                && Config::get()->ENABLE_FREE_ACCESS != 'courses_only';
+            if (($is_public_course || $is_public_institute)
+                && Navigation::hasItem('/course')
+                && Navigation::getItem('/course')->isActive())
+            {
+                // indicate to the template that this course is publicly visible
+                // need to handle institutes separately (always visible)
+                if (isset($GLOBALS['SessSemName']['class']) && $GLOBALS['SessSemName']['class'] === 'inst') {
+                    $header_template->public_hint = _('öffentliche Einrichtung');
+                } else if (Course::findCurrent()->lesezugriff == 0) {
+                    $header_template->public_hint = _('öffentliche Veranstaltung');
+                }
+            }
+        }
+        ?>
+        <div id="page-title-container" class="hidden-medium-up">
+            <div id="page-title">
+                <? if (Context::get() && strpos(PageLayout::getTitle(), Context::getHeaderLine() . ' - ') !== FALSE) : ?>
+                    <?= htmlReady(str_replace(Context::getHeaderLine() . ' - ' , '', PageLayout::getTitle())) ?>
+                <? else: ?>
+                    <?= htmlReady( PageLayout::getTitle()) ?>
+                <? endif ?>
+                <?= !empty($public_hint) ? '(' . htmlReady($public_hint) . ')' : '' ?>
+            </div>
+        </div>
     </div>
-     -->
-
-    <? SkipLinks::addIndex(_('Hauptnavigation'), 'barTopMenu', 2); ?>
-    <ul id="barTopMenu" role="navigation" <? if (count($header_nav['hidden']) > 0) echo 'class="overflown"'; ?>>
-    <? foreach ($header_nav['visible'] as $path => $nav): ?>
-        <?= $this->render_partial(
-            'header-navigation-item.php',
-            compact('path', 'nav')
-        ) ?>
-    <? endforeach; ?>
-        <li class="overflow">
-            <input type="checkbox" id="header-sink">
-            <label for="header-sink">
-                <a class="canvasready" href="#">
-                    <?= Icon::create('action', 'navigation')->asImg(28, [
-                        'class'  => 'headericon original',
-                        'title'  => '',
-                        'alt'    => '',
-                    ]) ?>
-                    <div class="navtitle">
-                        <?= _('Mehr') ?>&hellip;
-                    </div>
-                </a>
-            </label>
 
-            <ul>
-            <? foreach ($header_nav['hidden'] as $path => $nav) : ?>
-                <?= $this->render_partial(
-                    'header-navigation-item.php',
-                    compact('path', 'nav')
-                ) ?>
-            <? endforeach; ?>
-            </ul>
-        </li>
-    </ul>
-
-    <!-- Stud.IP Logo -->
-    <a class="studip-logo" id="barTopStudip" href="http://www.studip.de/" title="Stud.IP Homepage" target="_blank" rel="noopener noreferrer">
-        Stud.IP Homepage
-    </a>
-</div>
+<!-- End main site header -->
+</header>
diff --git a/templates/index_nobody.php b/templates/index_nobody.php
index 9c691d3240a..6b9e4f0fd52 100644
--- a/templates/index_nobody.php
+++ b/templates/index_nobody.php
@@ -17,85 +17,90 @@ if ($bg_mobile) {
 }
 ?>
 <!-- Startseite (nicht eingeloggt) -->
-<ul id="tabs" role="navigation"></ul>
-<? if (!empty($logout)) : ?>
-    <?= MessageBox::success(_("Sie sind nun aus dem System abgemeldet."), array_filter([$GLOBALS['UNI_LOGOUT_ADD']])) ?>
-<? endif; ?>
+<main id="content">
+    <? if (!empty($logout)) : ?>
+        <?= MessageBox::success(_('Sie sind nun aus dem System abgemeldet.'), array_filter([$GLOBALS['UNI_LOGOUT_ADD']])) ?>
+    <? endif; ?>
 
-<div id="background-desktop" style="background: url(<?= $bg_desktop ?>) no-repeat top left/cover;"></div>
-<div id="background-mobile" style="background: url(<?= $bg_mobile ?>) no-repeat top left/cover;"></div>
-<div class="index_main">
-    <nav>
-        <h1><?= htmlReady(Config::get()->UNI_NAME_CLEAN) ?></h1>
-        <? foreach (Navigation::getItem('/login') as $key => $nav) : ?>
-            <? if ($nav->isVisible()) : ?>
-                <? $name_and_title = explode(' - ', $nav->getTitle()) ?>
-                <div class="login_link">
-                    <? if (is_internal_url($url = $nav->getURL())) : ?>
-                        <? SkipLinks::addLink($name_and_title[0], $url) ?>
-                        <a href="<?= URLHelper::getLink($url) ?>">
-                    <? else : ?>
-                        <a href="<?= htmlReady($url) ?>" target="_blank" rel="noopener noreferrer">
+    <div id="background-desktop" style="background: url(<?= $bg_desktop ?>) no-repeat top left/cover;"></div>
+    <div id="background-mobile" style="background: url(<?= $bg_mobile ?>) no-repeat top left/cover;"></div>
+    <article id="loginbox" aria-current="page">
+        <header>
+            <h1><?= htmlReady(Config::get()->UNI_NAME_CLEAN) ?></h1>
+        </header>
+        <nav>
+            <ul>
+                <? foreach (Navigation::getItem('/login') as $key => $nav) : ?>
+                    <? if ($nav->isVisible()) : ?>
+                        <? $name_and_title = explode(' - ', $nav->getTitle()) ?>
+                        <li class="login_link">
+                            <? if (is_internal_url($url = $nav->getURL())) : ?>
+                            <? SkipLinks::addLink($name_and_title[0], $url) ?>
+                            <a href="<?= URLHelper::getLink($url) ?>">
+                                <? else : ?>
+                                <a href="<?= htmlReady($url) ?>" target="_blank" rel="noopener noreferrer">
+                                    <? endif ?>
+                                    <?= htmlReady($name_and_title[0]) ?>
+                                    <p>
+                                        <?= htmlReady(!empty($name_and_title[1]) ? $name_and_title[1] : $nav->getDescription()) ?>
+                                    </p>
+                                </a>
+                        </li>
                     <? endif ?>
-                            <?= htmlReady($name_and_title[0]) ?>
-                            <p>
-                                <?= htmlReady(!empty($name_and_title[1]) ? $name_and_title[1] : $nav->getDescription()) ?>
-                            </p>
-                        </a>
+                <? endforeach ?>
+            </ul>
+        </nav>
+        <footer>
+            <? if ($GLOBALS['UNI_LOGIN_ADD']) : ?>
+                <div class="uni_login_add">
+                    <?= $GLOBALS['UNI_LOGIN_ADD'] ?>
                 </div>
-            <? endif ?>
-        <? endforeach ?>
-    </nav>
-    <footer>
-    <? if ($GLOBALS['UNI_LOGIN_ADD']) : ?>
-        <div class="uni_login_add">
-            <?= $GLOBALS['UNI_LOGIN_ADD'] ?>
-        </div>
-    <? endif; ?>
-
-        <div id="languages">
-        <? foreach ($GLOBALS['INSTALLED_LANGUAGES'] as $temp_language_key => $temp_language): ?>
-            <a href="index.php?set_language=<?= $temp_language_key ?>">
-                <?= Assets::img('languages/' . $temp_language['picture'], tooltip2($temp_language['name'])) ?>
-                <?= htmlReady($temp_language['name']) ?>
-            </a>
-        <? endforeach; ?>
-        </div>
+            <? endif; ?>
 
-        <div id="contrast">
-            <? if (isset($_SESSION['contrast'])) : ?>
-                <?= Icon::create('accessibility')->asImg(24) ?>
-                <a href="index.php?unset_contrast=1"><?= _('Normalen Kontrast aktivieren') ?></a>
-                <?= tooltipIcon(_('Aktiviert standardmäßige, nicht barrierefreie Kontraste.')); ?>
-            <? else : ?>
-                <?= Icon::create('accessibility')->asImg(24) ?>
-                <a href="index.php?set_contrast=1" id="highcontrastlink"><?= _('Hohen Kontrast aktivieren')?></a>
-                <?= tooltipIcon(_('Aktiviert einen hohen Kontrast gemäß WCAG 2.1. Diese Einstellung wird nach dem Login übernommen.
-                Sie können sie in Ihren persönlichen Einstellungen ändern.')); ?>
-            <? endif ?>
-        </div>
-
-        <div class="login_info">
-            <div>
-                <?= _('Aktive Veranstaltungen') ?>:
-                <?= number_format($num_active_courses, 0, ',', '.') ?>
+            <div id="languages">
+                <? foreach ($GLOBALS['INSTALLED_LANGUAGES'] as $temp_language_key => $temp_language): ?>
+                    <a href="index.php?set_language=<?= $temp_language_key ?>">
+                        <?= Assets::img('languages/' . $temp_language['picture'], tooltip2($temp_language['name'])) ?>
+                        <?= htmlReady($temp_language['name']) ?>
+                    </a>
+                <? endforeach; ?>
             </div>
 
-            <div>
-                <?= _('Registrierte NutzerInnen') ?>:
-                <?= number_format($num_registered_users, 0, ',', '.') ?>
+            <div id="contrast">
+                <? if (isset($_SESSION['contrast'])) : ?>
+                    <?= Icon::create('accessibility')->asImg(24) ?>
+                    <a href="index.php?unset_contrast=1"><?= _('Normalen Kontrast aktivieren') ?></a>
+                    <?= tooltipIcon(_('Aktiviert standardmäßige, nicht barrierefreie Kontraste.')); ?>
+                <? else : ?>
+                    <?= Icon::create('accessibility')->asImg(24) ?>
+                    <a href="index.php?set_contrast=1" id="highcontrastlink"><?= _('Hohen Kontrast aktivieren')?></a>
+                    <?= tooltipIcon(_('Aktiviert einen hohen Kontrast gemäß WCAG 2.1. Diese Einstellung wird nach dem Login übernommen.
+                    Sie können sie in Ihren persönlichen Einstellungen ändern.')); ?>
+                <? endif ?>
             </div>
 
-            <div>
-                <?= _('Davon online') ?>:
-                <?= number_format($num_online_users, 0, ',', '.') ?>
-            </div>
+            <div class="login_info">
+                <div>
+                    <?= _('Aktive Veranstaltungen') ?>:
+                    <?= number_format($num_active_courses, 0, ',', '.') ?>
+                </div>
 
-            <div>
-                <a href="dispatch.php/siteinfo/show">
-                    <?= _('mehr') ?> &hellip;
-                </a>
+                <div>
+                    <?= _('Registrierte NutzerInnen') ?>:
+                    <?= number_format($num_registered_users, 0, ',', '.') ?>
+                </div>
+
+                <div>
+                    <?= _('Davon online') ?>:
+                    <?= number_format($num_online_users, 0, ',', '.') ?>
+                </div>
+
+                <div>
+                    <a href="dispatch.php/siteinfo/show">
+                        <?= _('mehr') ?> &hellip;
+                    </a>
+                </div>
             </div>
-        </div>
-    </footer>
-</div>
+        </footer>
+    </article>
+</main>
diff --git a/templates/layouts/base.php b/templates/layouts/base.php
index 527049c8a79..1345dcdf854 100644
--- a/templates/layouts/base.php
+++ b/templates/layouts/base.php
@@ -1,38 +1,5 @@
 <?php
 NotificationCenter::postNotification('PageWillRender', PageLayout::getBodyElementId());
-$navigation = PageLayout::getTabNavigation();
-$tab_root_path = PageLayout::getTabNavigationPath();
-if ($navigation) {
-    $subnavigation = $navigation->activeSubNavigation();
-    if ($subnavigation !== null) {
-        $nav_links = new NavigationWidget();
-        $nav_links->setId('sidebar-navigation');
-        if (!$navigation->getImage()) {
-            $nav_links->addLayoutCSSClass('show');
-        }
-        foreach ($subnavigation as $path => $nav) {
-            if (!$nav->isVisible()) {
-                continue;
-            }
-            $nav_id = "nav_".implode("_", preg_split("/\//", $tab_root_path, -1, PREG_SPLIT_NO_EMPTY))."_".$path;
-            $link = $nav_links->addLink(
-                $nav->getTitle(),
-                URLHelper::getURL($nav->getURL()),
-                null,
-                array_merge($nav->getLinkAttributes(), ['id' => $nav_id])
-            );
-            $link->setActive($nav->isActive());
-            if (!$nav->isEnabled()) {
-                $link['disabled'] = true;
-                $link->addClass('quiet');
-            }
-        }
-        if ($nav_links->hasElements()) {
-            Sidebar::get()->insertWidget($nav_links, ':first');
-        }
-    }
-}
-
 $getInstalledLanguages = function () {
     $languages = [];
     foreach ($GLOBALS['INSTALLED_LANGUAGES'] as $key => $value) {
@@ -103,109 +70,32 @@ $lang_attr = str_replace('_', '-', $_SESSION['_language']);
 </head>
 
 <body id="<?= PageLayout::getBodyElementId() ?>" <? if (SkipLinks::isEnabled()) echo 'class="enable-skiplinks"'; ?>>
-<div id="layout_wrapper">
-    <? SkipLinks::insertContainer() ?>
-    <? SkipLinks::addIndex(_('Hauptinhalt'), 'layout_content', 100) ?>
-    <?= PageLayout::getBodyElements() ?>
+    <? SkipLinks::addIndex(_('Hauptinhalt'), 'content', 100) ?>
 
     <? include 'lib/include/header.php' ?>
 
-    <? $contextable = Context::get() && (
-        (Navigation::hasItem('/course') && Navigation::getItem('/course')->isActive()) ||
-        (Navigation::hasItem('/admin/institute') && Navigation::getItem('/admin/institute')->isActive())); ?>
-    <div id="layout_page" <? if (!($contextable)) echo 'class="contextless"'; ?>>
-
-    <? if (PageLayout::isHeaderEnabled() && Navigation::hasItem('/course') && Navigation::getItem('/course')->isActive() && !empty($_SESSION['seminar_change_view_'.Context::getId()])) : ?>
-        <?= $this->render_partial('change_view', ['changed_status' => $_SESSION['seminar_change_view_'.Context::getId()]]) ?>
-    <? endif ?>
-
-    <? if (Context::get() || PageLayout::isHeaderEnabled()): ?>
-        <nav class="secondary-navigation">
-        <? if (is_object($GLOBALS['perm']) && !$GLOBALS['perm']->have_perm('admin') && $contextable) : ?>
-            <? $membership = CourseMember::find([Context::get()->id, $GLOBALS['user']->id]) ?>
-            <? if ($membership) : ?>
-                <a href="<?= URLHelper::getLink('dispatch.php/my_courses/groups') ?>"
-                   data-dialog
-                   class="colorblock gruppe<?= $membership ? $membership['gruppe'] : 1 ?>"></a>
-            <? endif ?>
-        <? endif ?>
-        <? if ($contextable) : ?>
-            <div id="layout_context_title">
-            <? if (Context::isCourse()) : ?>
-                <?= Icon::create('seminar', Icon::ROLE_INFO)->asImg(20, ['class' => 'context_icon']) ?>
-                <?= htmlReady(Context::get()->getFullname()) ?>
-                <? if ($GLOBALS['user']->config->SHOWSEM_ENABLE && !Context::get()->isStudygroup()): ?>
-                    (<?= htmlReady(Context::get()->getTextualSemester()) ?>)
-                <? endif ?>
-            <? elseif (Context::isInstitute()) : ?>
-                <?= Icon::create('institute', Icon::ROLE_INFO)->asImg(20, ['class' => 'context_icon']) ?>
-                <?= htmlReady(Context::get()->name) ?>
-            <? endif ?>
-            </div>
-        <? endif ?>
-
-        <? if (PageLayout::isHeaderEnabled() /*&& isset($navigation)*/) : ?>
-            <?= $this->render_partial('tabs', compact('navigation')) ?>
-        <? endif; ?>
-        </nav>
-    <? endif; ?>
-
-        <?
-        if (is_object($GLOBALS['user']) && $GLOBALS['user']->id != 'nobody') {
-            // only mark course if user is logged in and free access enabled
-            $is_public_course = Context::isCourse() && Config::get()->ENABLE_FREE_ACCESS;
-            $is_public_institute = Context::isInstitute()
-                                && Config::get()->ENABLE_FREE_ACCESS
-                                && Config::get()->ENABLE_FREE_ACCESS != 'courses_only';
-            if (($is_public_course || $is_public_institute)
-                && Navigation::hasItem('/course')
-                && Navigation::getItem('/course')->isActive())
-            {
-                // indicate to the template that this course is publicly visible
-                // need to handle institutes separately (always visible)
-                if (isset($GLOBALS['SessSemName']['class']) && $GLOBALS['SessSemName']['class'] === 'inst') {
-                    $header_template->public_hint = _('öffentliche Einrichtung');
-                } else if (Course::findCurrent()->lesezugriff == 0) {
-                    $header_template->public_hint = _('öffentliche Veranstaltung');
-                }
-            }
-        }
-        ?>
-        <div id="page_title_container" class="hidden-medium-up">
-            <div id="current_page_title">
-                <? if (Context::get() && strpos(PageLayout::getTitle(), Context::getHeaderLine() . ' - ') !== FALSE) : ?>
-                    <?= htmlReady(str_replace(Context::getHeaderLine() . ' - ' , '', PageLayout::getTitle())) ?>
-                <? else: ?>
-                    <?= htmlReady( PageLayout::getTitle()) ?>
-                <? endif ?>
-                <?= !empty($public_hint) ? '(' . htmlReady($public_hint) . ')' : '' ?>
-            </div>
-        </div>
-
-        <div id="layout_container">
-            <?= Sidebar::get()->render() ?>
-            <div id="layout_content">
-                <? if (PageLayout::isFullscreenModeAllowed()): ?>
-                    <button hidden class="fullscreen-toggle unfullscreen" aria-label="<?= _('Vollbildmodus verlassen') ?>" title="<?= _('Vollbildmodus verlassen') ?>">
-                        <?= Icon::create('zoom-out2')->asImg(24) ?>
-                    </button>
-                <? endif; ?>
-                <?= implode(PageLayout::getMessages()) ?>
-                <?= $content_for_layout ?>
-            </div>
+    <?= Sidebar::get()->render() ?>
+
+    <!-- Start main page content -->
+    <main id="content-wrapper">
+        <div id="content">
+            <? if (PageLayout::isFullscreenModeAllowed()): ?>
+                <button hidden class="fullscreen-toggle unfullscreen" aria-label="<?= _('Vollbildmodus verlassen') ?>" title="<?= _('Vollbildmodus verlassen') ?>">
+                    <?= Icon::create('zoom-out2')->asImg(24) ?>
+                </button>
+            <? endif; ?>
+            <?= implode(PageLayout::getMessages()) ?>
+            <?= $content_for_layout ?>
         </div>
-    </div> <? // Closes #layout_page opened in included templates/header.php ?>
-
-    <?= $this->render_partial('footer', ['link_params' => $header_template->link_params]); ?>
-    <!-- Ende Page -->
-    <? /* <div id="layout_push"></div> */ ?>
-</div>
+    </main>
+    <!-- End main content -->
 
-
-    <?= SkipLinks::getHTML() ?>
     <a id="scroll-to-top" class="hide">
         <?= Icon::create('arr_1up', 'info_alt')->asImg(24, ['class' => '']) ?>
     </a>
+
+    <?= $this->render_partial('footer', ['link_params' => $header_template->link_params]); ?>
+    <?= SkipLinks::getHTML() ?>
 </body>
 </html>
 <?php NotificationCenter::postNotification('PageDidRender', PageLayout::getBodyElementId());
diff --git a/templates/loginform.php b/templates/loginform.php
index 9dcaefec6e6..edbd565f823 100644
--- a/templates/loginform.php
+++ b/templates/loginform.php
@@ -22,74 +22,71 @@ if (!match_route('web_migrate.php')) {
     $bg_mobile = URLHelper::getURL('pictures/loginbackgrounds/2.jpg');
 }
 ?>
-<div>
-    <div class="index_container">
-        <ul id="tabs" role="navigation"></ul>
-        <div id="background-desktop" style="background: url(<?= $bg_desktop ?>) no-repeat top left/cover;"></div>
-        <div id="background-mobile" style="background: url(<?= $bg_mobile ?>) no-repeat top left/cover;"></div>
-        <? if ($loginerror): ?>
-            <!-- failed login code -->
-            <?= MessageBox::error(_('Bei der Anmeldung trat ein Fehler auf!'), [
-                $error_msg,
-                sprintf(
-                    _('Bitte wenden Sie sich bei Problemen an: <a href="mailto:%1$s">%1$s</a>'),
-                    $GLOBALS['UNI_CONTACT']
-                )
-            ]) ?>
-        <? endif; ?>
+<main id="content">
+    <div id="background-desktop" style="background: url(<?= $bg_desktop ?>) no-repeat top left/cover;"></div>
+    <div id="background-mobile" style="background: url(<?= $bg_mobile ?>) no-repeat top left/cover;"></div>
+    <? if ($loginerror): ?>
+        <!-- failed login code -->
+        <?= MessageBox::error(_('Bei der Anmeldung trat ein Fehler auf!'), [
+            $error_msg,
+            sprintf(
+                _('Bitte wenden Sie sich bei Problemen an: <a href="mailto:%1$s">%1$s</a>'),
+                $GLOBALS['UNI_CONTACT']
+            )
+        ]) ?>
+    <? endif; ?>
 
-        <?= implode('', PageLayout::getMessages()); ?>
+    <?= implode('', PageLayout::getMessages()); ?>
 
-        <div class="index_main">
-            <form class="default" name="login" method="post" action="<?= URLHelper::getLink(Request::url(), ['cancel_login' => NULL]) ?>">
-                <header>
-                    <h1 style="margin: 0; padding-bottom:10px;">
-                        <?=_('Herzlich willkommen!')?>
-                    </h1>
-                </header>
-                <section>
-                    <label>
-                        <?= _('Benutzername:') ?>
-                        <input type="text" <?= mb_strlen($uname) ? '' : 'autofocus' ?>
-                               id="loginname" name="loginname"
-                               value="<?= htmlReady($uname) ?>"
-                               size="20"
-                               autocorrect="off" autocapitalize="off">
-                    </label>
-                </section>
-                <section>
-                    <label for="password">
-                        <?= _('Passwort:') ?>
-                        <input type="password" <?= mb_strlen($uname) ? 'autofocus' : '' ?>
-                               id="password" name="password" size="20">
-                    </label>
-                </section>
-                    <?= CSRFProtection::tokenTag() ?>
-                    <input type="hidden" name="login_ticket" value="<?=Seminar_Session::get_ticket();?>">
-                    <input type="hidden" name="resolution"  value="">
-                    <input type="hidden" name="device_pixel_ratio" value="1">
-                    <?= Button::createAccept(_('Anmelden'), _('Login')); ?>
-                    <?= LinkButton::create(_('Abbrechen'), URLHelper::getURL('index.php', ['cancel_login' => 1], true)) ?>
-            </form>
+    <div id="loginbox">
+        <form class="default" name="login" method="post" action="<?= URLHelper::getLink(Request::url(), ['cancel_login' => NULL]) ?>">
+            <header>
+                <h1 style="margin: 0; padding-bottom:10px;">
+                    <?=_('Herzlich willkommen!')?>
+                </h1>
+            </header>
+            <section>
+                <label>
+                    <?= _('Benutzername:') ?>
+                    <input type="text" <?= mb_strlen($uname) ? '' : 'autofocus' ?>
+                           id="loginname" name="loginname"
+                           value="<?= htmlReady($uname) ?>"
+                           size="20"
+                           autocorrect="off" autocapitalize="off">
+                </label>
+            </section>
+            <section>
+                <label for="password">
+                    <?= _('Passwort:') ?>
+                    <input type="password" <?= mb_strlen($uname) ? 'autofocus' : '' ?>
+                           id="password" name="password" size="20">
+                </label>
+            </section>
+                <?= CSRFProtection::tokenTag() ?>
+                <input type="hidden" name="login_ticket" value="<?=Seminar_Session::get_ticket();?>">
+                <input type="hidden" name="resolution"  value="">
+                <input type="hidden" name="device_pixel_ratio" value="1">
+                <?= Button::createAccept(_('Anmelden'), _('Login')); ?>
+                <?= LinkButton::create(_('Abbrechen'), URLHelper::getURL('index.php', ['cancel_login' => 1], true)) ?>
+        </form>
 
-            <div>
-                <? if (Config::get()->ENABLE_REQUEST_NEW_PASSWORD_BY_USER && in_array('Standard', $GLOBALS['STUDIP_AUTH_PLUGIN'])): ?>
-                    <a href="<?= URLHelper::getLink('dispatch.php/new_password?cancel_login=1') ?>">
-                <? else: ?>
-                    <a href="mailto:<?= $GLOBALS['UNI_CONTACT'] ?>?subject=<?= rawurlencode('Stud.IP Passwort vergessen - '.Config::get()->UNI_NAME_CLEAN) ?>&amp;body=<?= rawurlencode("Ich habe mein Passwort vergessen. Bitte senden Sie mir ein Neues.\nMein Nutzername: " . htmlReady($uname) . "\n") ?>">
-                <? endif; ?>
-                        <?= _('Passwort vergessen') ?>
-                    </a>
-                <? if ($self_registration_activated): ?>
-                    /
-                    <a href="<?= URLHelper::getLink('register1.php?cancel_login=1') ?>">
-                        <?= _('Registrieren') ?>
-                    </a>
-                <? endif; ?>
-            </div>
+        <div>
+            <? if (Config::get()->ENABLE_REQUEST_NEW_PASSWORD_BY_USER && in_array('Standard', $GLOBALS['STUDIP_AUTH_PLUGIN'])): ?>
+                <a href="<?= URLHelper::getLink('dispatch.php/new_password?cancel_login=1') ?>">
+            <? else: ?>
+                <a href="mailto:<?= $GLOBALS['UNI_CONTACT'] ?>?subject=<?= rawurlencode('Stud.IP Passwort vergessen - '.Config::get()->UNI_NAME_CLEAN) ?>&amp;body=<?= rawurlencode('Ich habe mein Passwort vergessen. Bitte senden Sie mir ein Neues.\nMein Nutzername: ' . htmlReady($uname) . "\n") ?>">
+            <? endif; ?>
+                    <?= _('Passwort vergessen') ?>
+                </a>
+            <? if ($self_registration_activated): ?>
+                /
+                <a href="<?= URLHelper::getLink('register1.php?cancel_login=1') ?>">
+                    <?= _('Registrieren') ?>
+                </a>
+            <? endif; ?>
         </div>
     </div>
-</div>
+</main>
 
 <script type="text/javascript" language="javascript">
 //<![CDATA[
diff --git a/templates/noheader.php b/templates/noheader.php
index 5db93887495..77bc1eab772 100644
--- a/templates/noheader.php
+++ b/templates/noheader.php
@@ -1,2 +1,2 @@
 <!-- Beginn Page -->
-<div id="layout_page">
+<div id="current-page-structure">
diff --git a/templates/sidebar/sidebar.php b/templates/sidebar/sidebar.php
index 3c28062e8a5..fa8ee577022 100644
--- a/templates/sidebar/sidebar.php
+++ b/templates/sidebar/sidebar.php
@@ -1,26 +1,26 @@
-<div id="layout-sidebar">
-    <section class="sidebar" role="complementary" aria-label="<?= _('Seitenleiste') ?>">
-        <div class="sidebar-image <? if ($avatar) echo 'sidebar-image-with-context'; ?>">
-        <? if ($avatar) : ?>
-            <div class="sidebar-context">
-            <? if ($avatar->is_customized()) : ?>
-                <a href="<?= htmlReady($avatar->getURL(file_exists($avatar->getFilename(Avatar::ORIGINAL)) ? Avatar::ORIGINAL : Avatar::NORMAL)) ?>"
-                   data-lightbox="sidebar-avatar"
-                   data-title="<?= htmlReady(PageLayout::getTitle()) ?>">
-            <? endif ?>
-                    <?= $avatar->getImageTag(Avatar::MEDIUM) ?>
-            <? if ($avatar->is_customized()) : ?>
-                </a>
-            <? endif ?>
-            </div>
+<!-- Start sidebar -->
+<aside id="sidebar" aria-label="<?= _('Seitenleiste') ?>">
+    <div class="sidebar-image <? if ($avatar) echo 'sidebar-image-with-context'; ?>">
+    <? if ($avatar) : ?>
+        <div class="sidebar-context">
+        <? if ($avatar->is_customized()) : ?>
+            <a href="<?= htmlReady($avatar->getURL(file_exists($avatar->getFilename(Avatar::ORIGINAL)) ? Avatar::ORIGINAL : Avatar::NORMAL)) ?>"
+               data-lightbox="sidebar-avatar"
+               data-title="<?= htmlReady(PageLayout::getTitle()) ?>">
         <? endif ?>
-            <div class="sidebar-title">
-                <?= htmlReady($title) ?>
-            </div>
+                <?= $avatar->getImageTag(Avatar::MEDIUM) ?>
+        <? if ($avatar->is_customized()) : ?>
+            </a>
+        <? endif ?>
+        </div>
+    <? endif ?>
+        <div class="sidebar-title">
+            <?= htmlReady($title) ?>
         </div>
+    </div>
 
     <? foreach ($widgets as $index => $widget): ?>
         <?= $widget->render(['base_class' => 'sidebar']) ?>
     <? endforeach; ?>
-    </section>
-</div>
+</aside>
+<!-- End sidebar -->
diff --git a/templates/tabs.php b/templates/tabs.php
index 2a5cf0bc173..1b505e7c33d 100644
--- a/templates/tabs.php
+++ b/templates/tabs.php
@@ -8,7 +8,7 @@ foreach (Navigation::getItem("/")->getSubNavigation() as $path => $nav) {
 $ebene3 = [];
 ?>
 <div class="tabs_wrapper">
-    <? SkipLinks::addIndex(_('Zweite Navigationsebene'), 'tabs', 10); ?>
+    <? SkipLinks::addIndex(_('Zweite Navigationsebene'), 'navigation-level-2', 10); ?>
     <ul id="tabs" role="navigation">
         <? if (!empty($navigation)): ?>
         <? foreach ($navigation as $path => $nav) : ?>
diff --git a/templates/wiki/list.php b/templates/wiki/list.php
index 403a2b54760..9db04f4f0a5 100644
--- a/templates/wiki/list.php
+++ b/templates/wiki/list.php
@@ -1,4 +1,4 @@
-<div id="main_content" role="main">
+<div id="main_content">
 <table class="default">
     <colgroup>
         <col>
diff --git a/templates/wiki/show.php b/templates/wiki/show.php
index 37134482038..004e9de5ad1 100644
--- a/templates/wiki/show.php
+++ b/templates/wiki/show.php
@@ -1,5 +1,5 @@
 <?= $contentbar ?? '' ?>
-<article class="studip wiki" id="main_content" role="main">
+<article class="studip wiki" id="main_content">
     <section>
         <? if ($wikipage->keyword == 'WikiWikiWeb' && $wikipage->isNew()): ?>
             <div class="wiki-empty-background"></div>
-- 
GitLab