diff --git a/assets/scss/_common.scss b/assets/scss/_common.scss
index 80f005f0..497ff4c5 100644
--- a/assets/scss/_common.scss
+++ b/assets/scss/_common.scss
@@ -432,7 +432,7 @@ details[open] summary {
 
 #wc-canvas {
   width: 100%;
-  height: 600px;
+  height: 400px;
 }
 
 .top-banner {
diff --git a/content/german/schulchronik/2018.md b/content/german/schulchronik/2018.md
index d6849a72..4af73795 100644
--- a/content/german/schulchronik/2018.md
+++ b/content/german/schulchronik/2018.md
@@ -16,6 +16,8 @@ pretext: >+
 
 topics:
   - title: 30-jähriges Jubiläum
+    superhaufen: true
+    superlink: 30-jahre-gcg
     content: |
       Inhalt
   - title: 'Projekt: "4 smarte Rallyes in Halle"'
diff --git a/content/german/superhaufen/30-jahre-gcg.md b/content/german/superhaufen/30-jahre-gcg.md
new file mode 100644
index 00000000..1bc66f06
--- /dev/null
+++ b/content/german/superhaufen/30-jahre-gcg.md
@@ -0,0 +1,32 @@
+---
+title: 30-jähriges Jubiläum
+draft: "false"
+bg_image: /media/backgrounds/page-title.webp
+description: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+image: /media/image.webp
+type: superhaufen
+gallery: false
+tiles:
+    - title: Lorem-1
+      image: /media/image.webp
+      bg_color: \#990000
+      icon: mdi mdi-pillar
+      font_color: white
+      content: |
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+    - title: Lorem-2
+      image: /media/image.webp
+      bg_color: \#99ffff
+      icon: mdi mdi-head-cog-outline
+      font_color: black
+      content: |
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+    - title: Lorem-3
+      image: /media/image.webp
+      bg_color: \#cc9966
+      icon: mdi mdi-fireplace
+      font_color: black
+      content: |
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+---
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
\ No newline at end of file
diff --git a/content/german/superhaufen/_index.md b/content/german/superhaufen/_index.md
new file mode 100644
index 00000000..c5291ce9
--- /dev/null
+++ b/content/german/superhaufen/_index.md
@@ -0,0 +1,7 @@
+---
+title: Superhaufen
+draft: false
+bg_image: media/backgrounds/page-title.webp
+description: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+type: "superhaufen"
+---
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index af6ba4a8..32221bec 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -16,6 +16,8 @@
 
   <link rel="shortcut icon" href="{{ `media/favicon.png` | absURL }}" type="image/x-icon">
   <link rel="icon" href="{{ `media/favicon.png` | absURL }}" type="image/x-icon">
+
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tilt+Warp">
   
   <script src="{{ `plugins/wordcloud/wordcloud2.min.js` | absURL }}"></script>
 
diff --git a/layouts/schulchronik/single.html b/layouts/schulchronik/single.html
index 84dcba57..ebf98d50 100644
--- a/layouts/schulchronik/single.html
+++ b/layouts/schulchronik/single.html
@@ -28,9 +28,18 @@
           {{ partial "chronik-modal" (dict "id" "pretext" "title" .Title "content" .Params.pretext) }}
         {{ end }}
         <div id="wc-canvas"></div>
-        {{ $topics := slice (slice .Params.Title 100 "pretext") }}
+        {{ $topics := slice }}
+        {{ if .Params.pretext }}
+        {{ $topics = $topics | append (slice (slice .Params.Title 200 "pretext")) }}
+        {{ else }}
+        {{ $topics = $topics | append (slice (slice .Params.Title 200)) }}
+        {{ end }}
         {{ range .Params.topics }}
-          {{ $topics  = $topics | append (slice (slice .title 40 (md5 .title) )) }}
+          {{ if .superhaufen }}
+          {{ $topics  = $topics | append (slice (slice .title 30 .superlink  "superhaufen" )) }}
+          {{ else }}
+          {{ $topics  = $topics | append (slice (slice .title 30 (md5 .title) )) }}
+          {{ end }}
         {{ end }}
         {{ $topics = $topics | jsonify }}
         <script>
@@ -38,19 +47,33 @@
             document.getElementById('wc-canvas'),
             {
               click: function (item) {
-                if (item[1] != 100 || (item[1] == 100 && item[2] == "pretext")) {
-                  $('#' + item[2]).modal('show');
+                if (item[1] != 200 || (item[1] == 200 && item[2] == "pretext")) {
+                  if( item[3] == "superhaufen" ) {
+                    window.location.href = "/superhaufen/" + item[2];
+                  } else {
+                   $('#' + item[2]).modal('show');
+                  }
                 }
               },
               color: function (word, weight) {
-                return (weight === 100) ? '#ffbc3b' : '#1a1a37';
+                return (weight === 200) ? '#ffbc3b' : '#1a1a37';
               },
-              fontFamily: 'Fira Sans, serif',
+              hover: function(item, dimension, event) {
+                console.log("item:", item);
+                console.log("dimension:", dimension);
+                console.log("event:", event);
+                item && item[2] ? event.target.style.textDecorationLine = "underline" : null
+              },
+              fontFamily: 'Tilt Warp, serif',
               fontWeight: 700,
               list: JSON.parse("{{ $topics }}"),
               shrinkToFit: true,
-              gridSize: 25,
+              gridSize: 50,
               rotateRatio: 0,
+              shuffle: false,
+              shape: "square",
+              ellipticity: 1,
+              clearCanvas: true
             } 
           );
         </script>
diff --git a/layouts/superhaufen/list.html b/layouts/superhaufen/list.html
new file mode 100644
index 00000000..65793de8
--- /dev/null
+++ b/layouts/superhaufen/list.html
@@ -0,0 +1,15 @@
+{{ define "main" }}
+
+<section class="section-sm pb-0">
+	<div class="container">
+		<div class="row">
+			{{ range .Data.Pages }}
+				<div class="col-lg-4 col-sm-6">
+				{{ .Render "fach" }}
+				</div>
+			{{ end }}
+		</div>
+	</div>
+</section>
+
+{{ end }}
diff --git a/layouts/superhaufen/single.html b/layouts/superhaufen/single.html
new file mode 100644
index 00000000..2a10a30c
--- /dev/null
+++ b/layouts/superhaufen/single.html
@@ -0,0 +1,48 @@
+{{ define "main" }}
+
+<section class="section-sm pb-0">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 mb-4 content">
+        {{ .Content }}
+      </div>
+    </div>
+  </div>
+  <div class="container">
+    <div class="row">
+      {{ range .Params.tiles }}
+      <div id="{{ md5 .title }}" class="modal">
+        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">{{ .title }}</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div class="modal-body">
+              <div class="content">
+                {{ .content | markdownify }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-4 col-sm-6">
+        <div class="card border-primary rounded-0 hover-shadow mb-5">
+          <div class="container fb-tile-color" style="background-color:{{ .bg_color }};">
+            <i class="{{ .icon }} fb-tile-icon" style="color: {{ .font_color }};"></i>
+          </div>
+          <div class="card-body">
+            <h4 class="card-title">{{ .title | truncate 55 }}</h4>
+            <button type="button" class="btn btn-primary btn-sm" onclick="$('#{{ md5 .title }}').modal('show');">{{
+              i18n "show_more"}}</button>
+          </div>
+        </div>
+      </div>
+      {{ end }}
+    </div>
+  </div>
+</section>
+
+{{ end }}
\ No newline at end of file