diff --git a/README.md b/README.md
index a1c2723..7c3230c 100644
--- a/README.md
+++ b/README.md
@@ -57,6 +57,7 @@ $ ( cd draft && python -m http.server 8080 )
 * Über uns
   * Anfahrt
   * Kontakt (= E-Mail + Chat)
+  * Chaos macht Schule
   * Mitgliedschaft
   * Unterstützen
 * Veranstaltungen (+ Seiten pro Veranstaltung)
diff --git a/draft/index.html b/draft/index.html
index dd5404b..8ab9d39 100644
--- a/draft/index.html
+++ b/draft/index.html
@@ -8,11 +8,48 @@
     <link rel="stylesheet" type="text/css" href="/res/c3d2.css" />
 </head>
 <body>
-    <nav>
-        <p>Navigation</p>
+    <nav id="nav">
+        <a class="opener" href="#nav" title="Navigation öffnen">
+            <!--
+                TODO: Was beschriften wir hier? Dasselbe wie in <title>? Könnte
+                ein nerviges Duplikat mit dem <h1> vom <main> sein.
+            -->
+            <span class="menu-icon">&#9776;</span>Chaos Computer Club Dresden
+        </a>
+        <a class="closer" href="#" title="Navigation schließen">&#10799;</a>
+
+        <a href="/" class="sitelogo" title="Zur Startseite">
+            <img src="/res/navbar-logo.svg" alt="C3D2-Logo">
+        </a>
+
+        <ul>
+            <li><a href="#">Über uns</a><ul>
+                <li><a href="#">Anfahrt</a></li>
+                <li><a href="#">Kontakt</a></li>
+                <li><a href="#">Chaos macht Schule</a></li>
+                <li><a href="#">Mitgliedschaft</a></li>
+                <li><a href="#">Unterstützen</a></li>
+            </ul></li>
+            <li><a href="#">Veranstaltungen</a><ul>
+                <li><a href="#">Kalender</a></li>
+                <li><a href="#">Themenabende</a></li>
+                <li><a href="#">Events</a></li>
+            </ul></li>
+            <li><a href="#">Podcasts</a><ul>
+                <li><a href="#">Pentaradio</a></li>
+                <li><a href="#">Pentacast</a></li>
+                <li><a href="#">Pentamusic</a></li>
+                <li><a href="#">Abonnieren</a></li>
+            </ul></li>
+            <li><a href="#">Mehr Inhalte</a><ul>
+                <li><a href="#">Wiki</a></li>
+                <li><a href="#">Artwork</a></li>
+            </ul></li>
+        </ul>
     </nav>
     <main>
-        <p>Main matter</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     </main>
     <footer>
         <p>Footer</p>
diff --git a/draft/res/highlevel-desktop.scss b/draft/res/highlevel-desktop.scss
new file mode 100644
index 0000000..a3dcd55
--- /dev/null
+++ b/draft/res/highlevel-desktop.scss
@@ -0,0 +1,34 @@
+body {
+  /* if you don't have any idea what's going on here, read
+   * <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout>
+   */
+  display: grid;
+  min-height: 100vh;
+  grid-template:
+    "nav main" 1fr
+    "nav footer" min-content
+      / 23ch 1fr;
+  grid-gap: 0;
+  grid-auto-rows: auto;
+
+  & > nav {
+    grid-area: nav;
+
+    .opener, .closer {
+      /* on desktop, the <nav> is always there, so we don't need an opener */
+      display: none;
+    }
+
+    /* everything else about <nav> is in navbar.scss */
+  }
+
+  & > main {
+    grid-area: main;
+    /* everything else about <nav> is in content.scss */
+  }
+
+  & > footer {
+    grid-area: footer;
+    /* everything else about <nav> is in footer.scss */
+  }
+}
diff --git a/draft/res/highlevel-phone.scss b/draft/res/highlevel-phone.scss
new file mode 100644
index 0000000..6553a86
--- /dev/null
+++ b/draft/res/highlevel-phone.scss
@@ -0,0 +1,40 @@
+body {
+
+  & > nav {
+    position: relative; /* there are children with position:absolute */
+
+    &:not(:target) > :not(.opener) {
+      display: none;
+    }
+    &:target > .opener {
+      display: none;
+    }
+
+    & > a.opener {
+      padding: 0 1rem;
+      line-height: 3rem;
+      color: inherit;
+      text-decoration: none;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      & > .menu-icon {
+        padding-right: 1rem;
+      }
+    }
+
+    & > a.closer {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 3rem;
+      font-size: 2.5rem;
+      text-align: center;
+      line-height: 3rem;
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+
+}
diff --git a/draft/res/main.scss b/draft/res/main.scss
index 00ed81f..ec87865 100644
--- a/draft/res/main.scss
+++ b/draft/res/main.scss
@@ -1,33 +1,10 @@
 @import 'reset.scss';
 
-body {
-  /* if you don't have any idea what's going on here, read
-   * <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout>
-   */
-  display: grid;
-  min-height: 100vh;
-  grid-template:
-    "nav main" 1fr
-    "nav footer" min-content
-      / minmax(min-content, 20vw) 1fr;
-  grid-gap: 0;
-  grid-auto-rows: auto;
-
-  & > nav {
-    grid-area: nav;
-    max-width: 40ch;
-    /* everything else about <nav> is in navbar.scss */
-  }
-
-  & > main {
-    grid-area: main;
-    /* everything else about <nav> is in content.scss */
-  }
-
-  & > footer {
-    grid-area: footer;
-    /* everything else about <nav> is in footer.scss */
-  }
+@media (min-width: 60ch) {
+  @import 'highlevel-desktop.scss';
+}
+@media (max-width: 59.99999ch) {
+  @import 'highlevel-phone.scss';
 }
 
 @import 'navbar.scss';
diff --git a/draft/res/navbar-logo.svg b/draft/res/navbar-logo.svg
new file mode 100644
index 0000000..5d3e3de
--- /dev/null
+++ b/draft/res/navbar-logo.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg1"
+   height="243.6125"
+   width="742.85004"
+   y="0.0000000"
+   x="0.0000000"
+   version="1.0">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs3" />
+  <path
+     style="stroke-width:0.5;fill:#ffffff;fill-opacity:1"
+     id="path1103"
+     d="m 188.61252,122.43125 37.5,-59.375 c 0,0 34.375,0 34.375,0 0,0 -34.375,59.375 -34.375,59.375 0,0 34.375,58.125 34.375,58.125 h -37.5 z m 43.75,0 34.375,-59.375 c 0,0 37.5,0 37.5,0 0,0 -34.375,59.375 -34.375,59.375 l 34.375,58.125 h -37.5 z m 43.75,0 34.375,-59.375 c 0,0 37.5,0 37.5,0 0,0 -33.75,59.375 -33.75,59.375 l 33.75,58.125 h -37.5 z m 121.875,-59.375 c 0,0 34.375,0 34.375,0 l -43.75,117.5 h -34.375 z m 75,59.375 c 0,0 -34.375,-59.375 -34.375,-59.375 0,0 37.5,0 37.5,0 0,0 34.375,59.375 34.375,59.375 l -34.375,58.125 h -37.5 c 0,0 34.375,-58.125 34.375,-58.125 z m 9.375,58.125 c 0,0 34.375,-58.125 34.375,-58.125 0,0 -34.375,-59.375 -34.375,-59.375 h 37.5 l 34.375,59.375 -34.375,58.125 c 0,0 -37.5,0 -37.5,0 z" />
+</svg>
diff --git a/draft/res/navbar.scss b/draft/res/navbar.scss
index 6baa265..f8f1fec 100644
--- a/draft/res/navbar.scss
+++ b/draft/res/navbar.scss
@@ -1,4 +1,50 @@
 body > nav {
   background: black;
   color: white;
+
+  a.sitelogo {
+    display: block;
+    width: 100%;
+
+    & img {
+      width: 100%;
+    }
+  }
+
+  & > ul {
+    list-style: none;
+    padding: 0 0.75rem;
+
+    & > li {
+      padding: 0.5rem 0;
+      &:not(:first-child) {
+        border-top: 1px solid #444;
+      }
+      line-height: 1.5rem;
+
+      & > ul {
+        list-style: none;
+
+        & > li {
+          color: #CCC;
+          padding-left: 1rem;
+          line-height: 1.5rem;
+        }
+      }
+    }
+
+    li.current {
+      & > a {
+        font-weight: bold;
+      }
+    }
+
+    a {
+      text-decoration: none;
+      color: inherit;
+      &:active, &:hover, &:focus {
+        color: #DAB737;
+      }
+    }
+  }
 }
