diff --git a/_includes/event-day.njk b/_includes/event-day.njk
index 3cfdc24..fdddec1 100644
--- a/_includes/event-day.njk
+++ b/_includes/event-day.njk
@@ -1,4 +1,4 @@
-<details open class="event-day">
+<details class="event-day">
   <summary class="event-day-heading">
     {{ eventDay.heading }}
   </summary>
diff --git a/_includes/layouts/default.njk b/_includes/layouts/default.njk
index 36939d9..1f23162 100644
--- a/_includes/layouts/default.njk
+++ b/_includes/layouts/default.njk
@@ -11,11 +11,16 @@ article: null
   <head>
     <meta charset="utf-8" />
     <title>{{ title | title | safe }}</title>
-    <meta name="theme-color" content="{{ themeColor }}" id="theme-color" />
 
-    <meta name="description" content="">
-    <meta name="Keywords" content="">
+    <link rel="shortcut icon" href="/favicon.png" />
+
+    <meta name="theme-color" content="{{ themeColor }}" id="theme-color" />
+    <meta name="description" content="60 Jahre deutsche-türkisches Anwerbeabkommen, eine Seite der Stadt Köln">
+
+    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
+
     <link rel="stylesheet" type="text/css" href="/styles.css" media="all" />
+    <link rel="stylesheet" type="text/css" href="/navigation.css" media="all" />
     {% if extraStylesheets %}
       {% for extraStylesheet in extraStylesheets %}
         <link rel="stylesheet" type="text/css" href="{{ extraStylesheet }}" media="all" />
diff --git a/_includes/navigation.njk b/_includes/navigation.njk
index 587f980..fbe3307 100644
--- a/_includes/navigation.njk
+++ b/_includes/navigation.njk
@@ -1,4 +1,7 @@
-<nav class="navigation">
+<nav
+  id="navigation"
+  class="navigation"
+>
   <a href="/" class="logo navigation-link">
     <img
       class="logo-image"
@@ -6,6 +9,26 @@
       alt="Unser Logo"
     />
   </a>
+
+  <button
+    type="button"
+    id="navigation-toggle"
+    class="navigation-toggle"
+    aria-label="Navigation Öffnen und Schliessen"
+  >
+    <div class="navigation-toggle-line"></div>
+    <div class="navigation-toggle-line"></div>
+    <div class="navigation-toggle-line"></div>
+  </button>
+
+  <script>
+    const navToggle = document.getElementById("navigation-toggle");
+    const nav = document.getElementById("navigation");
+    navToggle.addEventListener("click", function () {
+      nav.classList.toggle("navigation_open");
+    });
+  </script>
+
   <ul class="menu">
   {#
     <li class="menu-item">
diff --git a/downloads.css b/downloads.css
index 88fcae1..84abdef 100644
--- a/downloads.css
+++ b/downloads.css
@@ -53,8 +53,8 @@
   color: var(--primary-font);
   height: 100%;
   width: 100%;
-  font-size: 16px;
-  line-height: 22px;
+  font-size: 0.8rem;
+  line-height: 1.3em;
 
   display: flex;
   align-items: center;
diff --git a/events.css b/events.css
index 7cda417..1125eb7 100644
--- a/events.css
+++ b/events.css
@@ -1,6 +1,9 @@
 .event-day {
   border-top: 7px solid var(--border);
-  margin-top: 4rem;
+}
+
+.event-day[open] {
+  padding-bottom: 4rem;
 }
 
 .event-day-heading {
diff --git a/favicon.png b/favicon.png
new file mode 100644
index 0000000..f276941
Binary files /dev/null and b/favicon.png differ
diff --git a/navigation.css b/navigation.css
new file mode 100644
index 0000000..744c6b0
--- /dev/null
+++ b/navigation.css
@@ -0,0 +1,130 @@
+.navigation {
+  --mobile-side-margin: 2vw;
+
+  position: fixed;
+  top: 0;
+  left: var(--mobile-side-margin);
+  right: var(--mobile-side-margin);
+  display: flex;
+  flex-direction: column;
+  padding: 0 calc(var(--side-padding) - var(--mobile-side-margin));
+  z-index: 1000;
+  background-color: var(--primary);
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+@media screen and (min-width: 1024px) {
+  .navigation {
+    background-color: transparent;
+    flex-direction: row;
+  }
+}
+
+.navigation-toggle {
+  background: transparent;
+  cursor: pointer;
+  border: 0;
+  position: absolute;
+  right: 6px;
+  top: 6px;
+  bottom: 0;
+  height: 45px;
+  width: 45px;
+  padding: 0px;
+}
+
+@media screen and (min-width: 1024px) {
+  .navigation-toggle {
+    display: none;
+  }
+}
+
+.navigation-toggle-line {
+  width: 32px;
+  height: 3px;
+  border-radius: 1.5px;
+  background-color: var(--primary-font);
+  margin: 7px;
+  position: relative;
+  transition-property: transform, opacity;
+  transition-duration: 0.1s;
+  transition-timing-function: ease;
+}
+
+.navigation_open .navigation-toggle-line:nth-child(1) {
+  transform: translateY(10px) rotate(45deg);
+}
+
+.navigation_open .navigation-toggle-line:nth-child(2) {
+  opacity: 0;
+}
+
+.navigation_open .navigation-toggle-line:nth-child(3) {
+  transform: translateY(-10px) rotate(-45deg);
+}
+
+.navigation-link {
+  color: var(--primary-font);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  padding: 12px 0px;
+}
+
+@media screen and (min-width: 1024px) {
+  .navigation-link {
+    padding: 12px 24px;
+  }
+}
+
+.logo {
+  margin-right: auto;
+  background-color: var(--primary);
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.logo-image {
+  height: 35px;
+}
+
+.menu {
+  list-style: none;
+  display: none;
+  margin: 0;
+  padding: 0;
+  flex-direction: column;
+}
+
+.navigation_open .menu {
+  display: flex;
+}
+
+@media screen and (min-width: 1024px) {
+  .menu {
+    flex-direction: row;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .menu {
+    display: flex;
+  }
+}
+
+.menu-item {
+  background-color: var(--primary);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+@media screen and (min-width: 1024px) {
+  .menu-item {
+    margin-left: 12px;
+    justify-content: center;
+  }
+}
diff --git a/styles.css b/styles.css
index 8cf6770..51bc5d4 100644
--- a/styles.css
+++ b/styles.css
@@ -4,7 +4,7 @@
 
 .page {
   font-family: sans-serif;
-  font-size: 24px;
+  font-size: 18px;
   line-height: 2em;
   display: flex;
   flex-direction: column;
@@ -12,7 +12,7 @@
   margin: 0;
   --primary: #D02424;
   --primary-font: #ffffff;
-  --side-padding: 3vw;
+  --side-padding: 8vw;
   --max-content-width: 925px;
   --border: #707070;
   background-image: url(/img/bg-pattern.svg);
@@ -23,6 +23,7 @@
 
 @media screen and (min-width: 768px) {
   .page {
+    font-size: 24px;
     display: grid;
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto auto auto;
@@ -30,52 +31,6 @@
   }
 }
 
-.navigation {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  padding: 0 var(--side-padding);
-  z-index: 1000;
-}
-
-.navigation-link {
-  color: var(--primary-font);
-  text-decoration: none;
-  padding: 12px 24px;
-  display: flex;
-  align-items: center;
-}
-
-.logo {
-  margin-right: auto;
-  background-color: var(--primary);
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.logo-image {
-  height: 35px;
-}
-
-.menu {
-  list-style: none;
-  display: flex;
-  margin: 0;
-  padding: 0;
-}
-
-.menu-item {
-  background-color: var(--primary);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: 12px;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
 .page-header {
   height: 100vh;
   justify-content: center;
@@ -129,13 +84,41 @@
 }
 
 .page-header-headline {
-  font-size: 4rem;
-  line-height: 5rem;
+  font-size: 2rem;
+  line-height: 3rem;
+}
+
+@media screen and (min-width: 768px) {
+  .page-header-headline {
+    font-size: 3.5rem;
+    line-height: 4.5rem;
+  }
+}
+
+@media screen and (min-width: 1024) {
+  .page-header-headline {
+    font-size: 5rem;
+    line-height: 6rem;
+  }
 }
 
 .page-header-subheadline {
-  font-size: 3rem;
-  line-height: 4rem;
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+@media screen and (min-width: 768px) {
+  .page-header-subheadline {
+    font-size: 2.5rem;
+    line-height: 3.5rem;
+  }
+}
+
+@media screen and (min-width: 1024) {
+  .page-header-subheadline {
+    font-size: 3rem;
+    line-height: 4rem;
+  }
 }
 
 .page-header-cta {
@@ -175,13 +158,27 @@
 }
 
 .page-title {
-  font-size: 5rem;
-  line-height: 6rem;
-  padding-top: 10vh;
+  font-size: 2rem;
+  line-height: 3rem;
   padding-left: var(--side-padding);
   padding-right: var(--side-padding);
 }
 
+@media screen and (min-width: 768px) {
+  .page-title {
+    padding-top: 10vh;
+    font-size: 3.5rem;
+    line-height: 4.5rem;
+  }
+}
+
+@media screen and (min-width: 1024) {
+  .page-title {
+    font-size: 5rem;
+    line-height: 6rem;
+  }
+}
+
 .navigation + .page-title,
 .page-header + .page-main {
   margin-top: 20vh;
