added header+colors, added translation redirect

content/about.de.md

 ---
 title: StuStaNet e.V.
 type: page
+color: green
 ---
 
 ## Der Verein

content/impressum.md

@@ -2,6 +2,7 @@
 title: Impressum
 type: page
 noindex: true
+color: yellow
 ---
 
 Anbieter und Betreiber dieser Webseite ist der Verein StuStaNet e. V.
@@ -27,18 +28,12 @@ Der Verein ist telefonisch nicht zu erreichen.
 
 {{% we-are-not-stuwerk %}}
 
-{{% dl title="Internet" %}}
-https://www.stustanet.de/
-{{% /dl %}}
+**Internet:** https://www.stustanet.de/
 
 {{% vorstand %}}
 
-{{% dl title="Registergericht" %}}
-Amtsgericht München
-{{% /dl %}}
-{{% dl title="Vereinsregisternummer" %}}
-16245
-{{% /dl %}}
+**Registergericht:** Amtsgericht München  
+**Vereinsregisternummer**: 16245  
 
 ## Über diese Webseite
 

layouts/_default/baseof.html

@@ -37,7 +37,7 @@
     </nav>
 
     <main aria-role="main">
-      <header>
+      <header class="{{ .Params.Color | default "blue" }}">
         <h1>{{.Title}}</h1>
         {{ with .Params.subtitle }}
         <span class="subtitle">{{.}}</span>
@@ -63,7 +63,15 @@
             {{ $lang := .Site.Language }}
             {{ range .Site.Languages }}
               <li>
-                <a href="{{ delimit (slice "/" .) "" }}" class="lang">
+                {{ $translated := where $.Translations "Lang" .Lang }}
+                {{ if $translated }}
+                  {{ $.Scratch.Set "url" (index $translated 0).Permalink }}
+                {{ else if eq .Lang $.Page.Lang }}
+                  {{ $.Scratch.Set "url" $.Permalink }}
+                {{ else }}
+                  {{ $.Scratch.Set "url" (delimit (slice "/" .) "") }}
+                {{ end }}
+                <a href="{{ $.Scratch.Get "url" }}" class="lang">
                   <span class="shorthand">{{ .Lang }}</span>{{ .LanguageName }}
                 </a>
               </li>

static/styles.css

+:root {
+    --yellow: rgb(255, 232, 89);
+    --red: rgb(226, 107, 68);
+    --green: rgb(137, 187, 79);
+    --blue: rgb(94, 146, 189);
+}
+
 html {
     font-family: sans-serif;
     font-size: 100%;
@@ -168,7 +175,7 @@ ul.menu li a {
 
 article > *,
 .container,
-header {
+header h1 {
     position: relative;
     max-width: 800px;
     margin-left: auto;
@@ -176,6 +183,38 @@ header {
     padding: 0 50px;
 }
 
+header {
+    position: relative;
+    display: block;
+}
+
+header h1 {
+    margin: 0 auto 15px auto;
+    padding: 50px 0;
+    text-shadow: 0px 0px 1px rgba(0,0,0,0.12);
+}
+
+.yellow { 
+    background: rgb(255, 232, 89);
+    box-shadow: 0 0 8px 0 rgba(255, 232, 89, 0.12);
+}
+.yellow h1 { color: black; }
+.red { 
+    background: rgb(226, 107, 68);
+    box-shadow: 0 0 8px 0 rgba(226, 107, 68, 0.12);
+}
+.red h1 { color: white; }
+.green { 
+    background: rgb(137, 187, 79);
+    box-shadow: 0 0 8px 0 rgba(137, 187, 79, 0.12);
+}
+.green h1 { color: white; }
+.blue { 
+    background: rgb(94, 146, 189);
+    box-shadow: 0 0 8px 0 rgba(94, 146, 189, 0.12);
+}
+.blue h1 { color: white; }
+
 h1,
 h2,
 h3,
@@ -313,19 +352,21 @@ footer .center {
 
 footer .lang-dropdown-container {
     flex: 1 1 0;
+    padding: 15px;
+    text-align: right;
 }
 
 footer .lang-dropdown {
-    text-align: right;
-    padding: 15px;
+    display: inline;
 }
 
 .we-are-not-stuwerk {
     border: 1px solid #fa7171;
     border-radius: 2px;
     margin: 5px 0;
-    padding: 10px;
+    padding: 10px 10px 7px 10px;
     background: #ffdbdb;
+    line-height: 1.25;
     color: red;
 }