diff --git a/content/german/about/cantor.md b/content/german/about/cantor.md
index 1b71db01..c23addd3 100644
--- a/content/german/about/cantor.md
+++ b/content/german/about/cantor.md
@@ -28,4 +28,4 @@ Georg Cantor gilt als der Begründer der Mengenlehre. Er kämpfte ein Leben lang
 
 # Auf den Spuren von Georg Cantor
 
-{{< element-item link="http://www.geocaching.com/seek/cache_details.aspx?wp=GC2VXTW" title="Geo(rg)Caching" >}}
+{{< card link="http://www.geocaching.com/seek/cache_details.aspx?wp=GC2VXTW" title="Geo(rg)Caching" >}}
diff --git a/content/german/alumni-netzwerk/index.md b/content/german/alumni-netzwerk/index.md
index 7cfdf328..f4e2cb9c 100644
--- a/content/german/alumni-netzwerk/index.md
+++ b/content/german/alumni-netzwerk/index.md
@@ -32,6 +32,6 @@ Bei wir handelt es sich momentan hauptsächlich um:
 
 ---
 
-{{< element-item link="/de/cantorfora" title="Cantorfora" >}}
+{{< card link="/de/cantorfora" title="Cantorfora" >}}
 
 ---
diff --git a/content/german/cantorfora/cantorforum-5.md b/content/german/cantorfora/cantorforum-5.md
index 016f0fcb..1e86747b 100644
--- a/content/german/cantorfora/cantorforum-5.md
+++ b/content/german/cantorfora/cantorforum-5.md
@@ -13,4 +13,4 @@ Wir schreiben den 15. März 2010, es ist 14.30 Uhr, das V. Cantorforum beginnt.
 
 Maria Tannert, 2010
 
-{{< element-item link="/misc/cantorforum_5/flyer.pdf" title="Spendenflyer" >}}
+{{< card link="/misc/cantorforum_5/flyer.pdf" title="Spendenflyer" >}}
diff --git a/content/german/schuelerrat/_index.md b/content/german/schuelerrat/_index.md
index ea9bba70..c3d23076 100644
--- a/content/german/schuelerrat/_index.md
+++ b/content/german/schuelerrat/_index.md
@@ -29,4 +29,4 @@ Wir haben für alle Schülerinnen und Schüler ein offenes Ohr und sind jederzei
 
 Außerdem sind wir per <a href="mailto:schuelerrat@cantor-gymnasium.de"><i class="ti-email"></i>Mail</a> und auf <a href="https://www.facebook.com/srgcghalle/"><i class="ti-facebook"></i>Facebook</a> erreichbar.
 
-{{< element-item link="/de/schuelerrat/geschaeftsordnung" title="Geschäftsordnung" >}}
+{{< card link="/de/schuelerrat/geschaeftsordnung" title="Geschäftsordnung" >}}
diff --git a/content/german/schulchronik/1991.md b/content/german/schulchronik/1991.md
index 8a8f67b6..f1d99cf2 100644
--- a/content/german/schulchronik/1991.md
+++ b/content/german/schulchronik/1991.md
@@ -20,7 +20,7 @@ type: "schulchronik"
 
 {{% /open-element %}}
 
-{{< element-item title="Die Spezialklassen für Mathematik und Physik an der Martin-Luther-Universität Halle-Wittenberg" link="/de/sk-mlu-gcg" >}}
+{{< card title="Die Spezialklassen für Mathematik und Physik an der Martin-Luther-Universität Halle-Wittenberg" link="/de/sk-mlu-gcg" >}}
 
 {{% open-element title="Von Hausmann zu Cantor" %}}
 
diff --git a/content/german/schulchronik/1992.md b/content/german/schulchronik/1992.md
index 2398b4e4..7fb1cb68 100644
--- a/content/german/schulchronik/1992.md
+++ b/content/german/schulchronik/1992.md
@@ -20,7 +20,7 @@ Das Jahr 1992 war ein ereignisreiches Jahr. Für das Schuljahr 1991/92 wurde der
 
 {{% /open-element %}}
 
-{{< element-item title="Erster Abiturjahrgang" link="/de/abiturienten/1992" >}}
+{{< card title="Erster Abiturjahrgang" link="/de/abiturienten/1992" >}}
 
 {{% open-element title="Wettbewerbserfolge 1992" %}}
 
diff --git a/content/german/schulchronik/2014.md b/content/german/schulchronik/2014.md
index d7a24734..a114a51d 100644
--- a/content/german/schulchronik/2014.md
+++ b/content/german/schulchronik/2014.md
@@ -10,7 +10,7 @@ cantorpreisträger: "Paula Hähndel"
 type: "schulchronik"
 ---
 
-{{< element-item title="Verabschiedung Herr OStD Dr. Müller" link="/de/verabschiedung-herr-dr-müller" >}}
+{{< card title="Verabschiedung Herr OStD Dr. Müller" link="/de/verabschiedung-herr-dr-müller" >}}
 
 {{% open-element title="Junior-Ingenieur-Akademie" %}}
 
diff --git a/content/german/schulchronik/_index.md b/content/german/schulchronik/_index.md
index 4d048e19..7bce755f 100644
--- a/content/german/schulchronik/_index.md
+++ b/content/german/schulchronik/_index.md
@@ -15,15 +15,15 @@ aus 'David Hilbert, Über das Unendliche', Math. Ann. 95</p><br>
 ## Statistische Daten
 
 <div class="row mb-5">
-    {{< element-item link="/de/abiturienten" title="Abiturienten">}}
-    {{< element-item link="/de/statistiken/abiturdurchschnitte" title="Abiturdurchschnitte">}}
-    {{< element-item link="/de/statistiken/schülerzahlen" title="Schülerzahlen">}}
-    {{< element-item link="/de/statistiken/mitarbeiterliste" title="Mitarbeiterliste">}}
-    {{< element-item link="/de/about/cantor/" title="Über Georg Cantor" >}}
-    {{< element-item link="/de/alumni-netzwerk" title="Alumninetzwerk" >}}
-    {{< element-item link="/de/about/chronologie" title="Chronologie" >}}
-    {{< element-item link="/de/about/traditionen" title="Traditionen" >}}
-    {{< element-item link="/de/chronisten" title="Chronistenteam" >}}
+    {{< card-small link="/de/abiturienten" title="Abiturienten">}}
+    {{< card-small link="/de/statistiken/abiturdurchschnitte" title="Abiturdurchschnitte">}}
+    {{< card-small link="/de/statistiken/schülerzahlen" title="Schülerzahlen">}}
+    {{< card-small link="/de/statistiken/mitarbeiterliste" title="Mitarbeiterliste">}}
+    {{< card-small link="/de/about/cantor/" title="Über Georg Cantor" >}}
+    {{< card-small link="/de/alumni-netzwerk" title="Alumninetzwerk" >}}
+    {{< card-small link="/de/about/chronologie" title="Chronologie" >}}
+    {{< card-small link="/de/about/traditionen" title="Traditionen" >}}
+    {{< card-small link="/de/chronisten" title="Chronistenteam" >}}
 </div>
 
 ---
diff --git a/layouts/shortcodes/element-item.html b/layouts/shortcodes/card-small.html
similarity index 100%
rename from layouts/shortcodes/element-item.html
rename to layouts/shortcodes/card-small.html
diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
new file mode 100644
index 00000000..46891347
--- /dev/null
+++ b/layouts/shortcodes/card.html
@@ -0,0 +1,8 @@
+<div class="container">
+  <div class="card border-primary rounded-0 hover-shadow mb-5">
+    <div class="card-body">
+      <h4 class="card-title"><a href='{{ .Get "link" }}'>{{ .Get "title" }}</a></h4>
+      <a href='{{ .Get "link" }}' class="btn btn-primary btn-sm">{{ i18n "show_more"}}</a>
+    </div>
+  </div>
+</div>
diff --git a/resources/_gen/assets/scss/scss/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/scss/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index b83d107c..25a14018 100644
--- a/resources/_gen/assets/scss/scss/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/resources/_gen/assets/scss/scss/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -9,11 +9,6 @@ VERSION:	Versoin Number
 -------------------------------------------------------------------*/
 /*  typography */
 @import url("https://code.cdn.mozilla.net/fonts/fira.css");
-@font-face {
-  font-family: 'Fira Sans';
-  font-weight: normal;
-  font-style: normal; }
-
 body {
   line-height: 1.2;
   font-family: "Fira Sans", sans-serif;
@@ -456,10 +451,13 @@ textarea.form-control {
   object-fit: cover; }
 
 summary {
-  font-weight: bold;
+  font-weight: 900;
   margin: -.5em -.5em 0;
   padding: .5em;
-  font-size: 20px; }
+  font-size: 20px;
+  color: #1a1a37; }
+  summary.hover {
+    color: #ffbc3b; }
 
 details[open] {
   padding: .5em; }