Es wurde an die Darstellung auf einen iPhone bzw. ähnlichen Geräten angepasst.

ui/public/less/lesslib/media_queries.less

@@ -137,6 +137,7 @@
         width: @breiteNavBereich;
     }
 }
+
 @media screen and (max-width: 830px) {
     html body {
         @boxHeight: 5rem;
@@ -145,16 +146,18 @@
             font-size: @boxHeight;
             text-align: center;
             padding: 1rem;
-
+        }
+        & > footer {
+            padding: 1rem;
         }
         & > nav {
-            background: none;
-            left:auto;
             ul {
                 li {
                     display: inline-block;
                     border: none;
                     width: auto;
+                    height: 1.5em;
+                    padding-top: 0.25em;
                     a {
                         padding: 0.75rem;
                     }
@@ -184,6 +187,7 @@
                 @formLabelWidth: 10rem;
                 @formItemWidth: 40rem;
                 @sectionMargin: 1rem;
+                margin: @sectionMargin;
                 fieldset {
                     width: auto;
                     margin: 1rem auto;
@@ -262,6 +266,41 @@
         }
     }
 }
-
 @media screen and (max-width: 720px) {
+    html body {
+        @boxHeight: 2.5rem;
+        & > header {
+            height: @boxHeight;
+            font-size: @boxHeight;
+            text-align: center;
+            padding: 1rem;
+        }
+
+        & > nav {
+            .hamburgerMenu();
+        }
+        main section header {
+            h1, h2 {
+                text-align: center;
+                margin: 0.5rem auto;
+            }
+        }
+        table {
+            width: 100%;
+            margin: 1rem 0;
+            td, th {
+                padding: 0.25rem;
+            }
+            colgroup:not(:first-child) col:first-child{
+                border-left: solid thin;
+            }
+            thead {
+                th {
+                    font-size: 100%;
+                    font-weight: bold;
+                    .hyphens();
+                }
+            }
+        }
+    }
 }

ui/public/less/lesslib/mixins.framework.less

@@ -67,19 +67,18 @@
 	color: white;
 	width: 3rem;
 	height: 2rem;
-	top: 0.5rem;
+	top: 0.25rem;
-	right: 0.5rem;
+	left: 0.25rem;
-	left: auto;
 	.border-radius(4px);
 	border: none;
-	.vertical-gradient(#555; #000);
+	.vertical-gradient(@mainColorDark; @mainColor);
 	> ul {
 		height: auto;
 		width: auto;
 		position: absolute;
-		right: 0;
+		left: 0;
 		top: 100%;
-		background: fade(black,80%);
+		background: fade(@mainColorDark,80%);
 		.border-radius(5px);
 		display: none;
 		> li {
@@ -100,7 +99,7 @@
 				&:hover,
 					&:focus {
 					color: white;
-					.vertical-gradient(#59b4fd; #0560e8);
+					.vertical-gradient(@mainColorLight; @mainColor);
 				}
 			}
 			&:first-child {
@@ -115,7 +114,7 @@
 			}
 		}
 	}
-	&:hover, &:focus, &:active {
+	&:hover, &:focus, &:active, &:checked {
 		ul {
 			display: block;
 		}