diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 3c62192..728d218 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -56,6 +56,19 @@ ul.card-text li {
 	flex: 1.8 0 0%;
 }
 
+.navsidebar {
+	position: fixed;
+	z-index: 5;
+	height: 100%;
+	width: 75%;
+	top: 0px;
+	right: 0px;
+	bottom: 0px;
+	background-color: white;
+	padding: 15px;
+	border-left: 1px solid #0e4f88;
+	overflow: scroll;
+}
 
 @media(min-width: 768px) {
 	.card.slide > .card-body > .card-text, .card.slide > .card-body > h6.card-subtitle, q.bibeltext {
@@ -100,6 +113,10 @@ ul.card-text li {
 	p.bibeltextkonzentr {
 		font-size: 1.0rem;
 	}
+
+	.navsidebar {
+		width: 50%;
+	}
 }
 
 @media(min-width: 992px) {
@@ -214,6 +231,10 @@ ul.card-text li {
 	.card-deck .card.flexleftright_big {
 		flex: 3 0 0%;
 	}
+
+	.navsidebar {
+		width: 30%;
+	}
 }
 
 @media(min-width: 1400px)  {
diff --git a/views/mixins_headline_nav.pug b/views/mixins_headline_nav.pug
index 7e7d6ab..05916fa 100644
--- a/views/mixins_headline_nav.pug
+++ b/views/mixins_headline_nav.pug
@@ -29,7 +29,7 @@ mixin headline_presentation_hamburger
 					//- , onclick="event.stopPropagation();"
 
 mixin navsidebar(gliederung, current)
-	div#navsidebar(style="position: fixed; z-index: 5; height: 100%; min-width: 25%; max-width: 35%; top: 0px; right: 0px; bottom: 0px; background-color: white; padding: 15px; border-left: 1px solid #0e4f88; overflow: scroll;")
+	div#navsidebar.navsidebar
 		table(style="width: 100%;")
 			tr
 				td