assets/css/style.css

@@ -35,14 +35,13 @@
       --dark-red: #dc0000;
       --dark-green: #007000;
 
-     --column-count: 2;
+     --column-count: 3;
 }
 
 body {
     font-family: 'Lato', sans-serif;
     font-weight: normal;
-    font-size: 1.25rem;
+    line-height: 1.5rem;
-    line-height: 1.5em;
     color: var(--wtf-nearly-black);
     background-color: var(--wtf-light-grey)
 }
@@ -294,11 +293,8 @@ header {
     grid-row: 2 / span 1;
     grid-column: 1 / span 3;
     background-color: var(--wtf-light-blue);
-    z-index: 5;
-}
-
-.slim_box__top_bar_left {
     margin-bottom: 6rem;
+    z-index: 5;
 }
 
 .bg_box__top_bar_middle, .slim_box__top_bar_middle {
@@ -425,12 +421,10 @@ header {
 
 .header__claim h2 {
     margin-left: 7rem;
-    color: var(--wtf-nearly-black);
 }
 
 .header__claim h2 em {
     color: var(--wtf-orange);
-    font-style: normal;
 }
 
 .header__claim h2 span {
@@ -445,13 +439,6 @@ header {
     font-size: 2rem;
 }
 
-/*
- * TODO: Bullets positionieren
- *
- * list-style: none; dann Bullets als Grafiken vom text in <li> einfügen.
- * Für das Icon dann position: relative; und ausrichten.
- * Quelle: https://codepen.io/team/css-tricks/pen/MyxBrQ
- */
 .header__claim ul li {
     margin: 0;
     list-style: none;
@@ -511,7 +498,6 @@ header {
 .header__sub_claim h2 {
     font-family: 'Noto Serif', serif;
     font-weight: 700;
-    color: var(--wtf-nearly-black);
     font-weight: normal;
     font-size: 1.75rem;
     line-height: 1.3em;
@@ -577,7 +563,6 @@ h1.big_heading {
 
 h2 {
     font-family: 'Noto Serif';
-    color: var(--wtf-orange);
     font-size: 2rem;
     line-height: 1.1em;
     margin: 1em 0 0.25em 0;
@@ -661,10 +646,6 @@ strong{
     font-weight: bold;
 }
 
-em {
-    font-style: italic;
-}
-
 hr {
     color: var(--wtf-nearly-black);
     margin: 0.25rem 0;
@@ -741,10 +722,6 @@ hr.-even {
     min-width: 300px;
 }
 
-.indented_box {
-    padding-left: 1rem;
-}
-
 .flex_heading {
     margin-top: 0.5rem;
     z-index: 5;
@@ -1081,27 +1058,6 @@ hr.-even {
     margin: -0.5rem 1.5rem 0 1.5rem;
 }
 
-.content__box.-membership {
-    background-image: url("../images/numbers_one.svg");
-    background-repeat: no-repeat;
-    background-position: top 20% left;
-    background-size: 20% auto;
-}
-
-.content__inner_box.-membership {
-    background-image: url("../images/numbers_two.svg");
-    background-repeat: no-repeat;
-    background-position: center right;
-    background-size: 28% auto;
-}
-
-.content__body.-membership {
-    background-image: url("../images/numbers_three.svg");
-    background-repeat: no-repeat;
-    background-position: bottom 12% left;
-    background-size: 22% auto;
-}
-
 .content__rss_logo {
     display: inline;
     height: 1rem;
@@ -1190,6 +1146,8 @@ hr.-even {
 }
 
 .content__box.-columns {
+    -webkit-column-count: var(--column-count);
+    -moz-column-count: var(--column-count);
     column-count: var(--column-count);
 }
 
@@ -1248,7 +1206,8 @@ hr.-even {
     padding: 0 0.25rem;
 }
 
-/* Hide captcha field as part of spam protection. We got no real captcha. */
+/* Hide captcha field as part of spam protection.
+   We got no real captcha. */
 .contact_form__captcha {
     display: none;
 }
@@ -1533,7 +1492,7 @@ footer {
 
 @media screen and (max-width: 850px) and (min-width: 790px) {
     :root {
-        --column-count: 1
+        --column-count: 2
     }
 
     .header__bg_box {
@@ -1584,7 +1543,7 @@ footer {
 
 @media screen and (max-width: 789px) and (min-width: 596px) {
     :root {
-        --column-count: 1
+        --column-count: 2
     }
 
     header {

assets/images/numbers_one.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 392 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g id="_1" serif:id="1" transform="matrix(2.15901,0,0,2.15901,-2755.45,-695.404)">
-        <path d="M1297.62,600L1297.62,579.393L1329.38,579.393C1332.66,579.393 1335.5,578.984 1337.89,578.165C1340.28,577.345 1342.3,575.99 1343.94,574.1C1345.58,572.209 1346.78,569.657 1347.53,566.443C1348.29,563.229 1348.66,559.165 1348.66,554.25L1348.66,360.283C1343.75,366.332 1339.12,371.815 1334.77,376.73C1330.42,381.646 1326.23,385.868 1322.2,389.397C1318.16,392.926 1314.23,395.667 1310.38,397.62C1306.54,399.574 1302.66,400.551 1298.76,400.551C1295.61,400.551 1292.67,399.889 1289.96,398.566C1287.26,397.242 1284.89,395.32 1282.88,392.8C1280.86,390.279 1279.25,387.254 1278.05,383.725C1276.86,380.196 1276.26,376.289 1276.26,372.004C1280.16,370.996 1284.26,369.767 1288.55,368.317C1292.83,366.868 1297.4,364.978 1302.25,362.646C1307.11,360.314 1312.3,357.479 1317.85,354.139C1323.39,350.799 1329.38,346.797 1335.81,342.134L1363.03,322.094L1406.33,322.094L1406.33,554.25C1406.33,558.283 1406.61,561.875 1407.18,565.025C1407.74,568.176 1408.75,570.823 1410.2,572.966C1411.65,575.108 1413.67,576.715 1416.25,577.786C1418.84,578.858 1422.14,579.393 1426.18,579.393L1457.37,579.393L1457.37,600L1297.62,600Z" style="fill:white;fill-opacity:0.5;fill-rule:nonzero;"/>
-    </g>
-</svg>

assets/images/numbers_three.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 422 638" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g id="_3" serif:id="3" transform="matrix(4.25048,0,0,4.25048,-5379.79,-1920.85)">
-        <path d="M1309.73,601.997C1302.01,601.997 1295.37,601.331 1289.81,600C1284.25,598.669 1279.69,596.871 1276.13,594.608C1272.57,592.344 1269.94,589.732 1268.24,586.769C1266.54,583.807 1265.69,580.728 1265.69,577.533C1265.69,574.936 1266.16,572.64 1267.09,570.642C1268.02,568.645 1269.29,566.964 1270.88,565.6C1272.48,564.235 1274.33,563.22 1276.43,562.554C1278.52,561.888 1280.74,561.556 1283.07,561.556C1283.07,565.883 1283.68,569.677 1284.91,572.939C1286.14,576.201 1287.86,578.93 1290.06,581.127C1292.25,583.324 1294.9,584.972 1298,586.07C1301.09,587.169 1304.5,587.718 1308.23,587.718C1311.56,587.718 1314.74,587.252 1317.77,586.32C1320.8,585.388 1323.48,583.79 1325.81,581.527C1328.13,579.263 1329.98,576.184 1331.35,572.29C1332.71,568.396 1333.39,563.519 1333.39,557.661C1333.39,553.734 1332.71,550.139 1331.35,546.877C1329.98,543.615 1327.95,540.802 1325.26,538.439C1322.56,536.076 1319.25,534.229 1315.32,532.897C1311.39,531.566 1306.87,530.9 1301.74,530.9L1289.06,530.9L1289.06,518.218L1302.54,518.218C1306.93,518.218 1310.76,517.503 1314.02,516.071C1317.28,514.64 1319.98,512.593 1322.11,509.93C1324.24,507.268 1325.84,504.089 1326.9,500.394C1327.97,496.7 1328.5,492.622 1328.5,488.162C1328.5,480.706 1327.07,474.881 1324.21,470.687C1321.35,466.493 1317.12,464.396 1311.53,464.396C1307.86,464.396 1304.88,465.295 1302.59,467.092C1300.29,468.89 1298.51,471.286 1297.25,474.282C1295.98,477.278 1295.12,480.673 1294.65,484.467C1294.18,488.262 1293.95,492.156 1293.95,496.15C1285.43,496.15 1278.87,494.669 1274.28,491.707C1269.69,488.744 1267.39,484.134 1267.39,477.877C1267.39,474.282 1268.34,470.904 1270.24,467.741C1272.13,464.579 1274.98,461.817 1278.77,459.453C1282.57,457.09 1287.28,455.243 1292.9,453.911C1298.53,452.58 1305.07,451.914 1312.52,451.914C1319.78,451.914 1326.32,452.647 1332.15,454.111C1337.97,455.576 1342.93,457.739 1347.02,460.602C1351.12,463.464 1354.26,466.959 1356.46,471.087C1358.66,475.214 1359.76,479.94 1359.76,485.266C1359.76,489.859 1358.96,494.087 1357.36,497.948C1355.76,501.809 1353.57,505.27 1350.77,508.333C1347.97,511.395 1344.68,514.074 1340.88,516.371C1337.09,518.668 1332.96,520.582 1328.5,522.113C1332.63,522.845 1336.84,524.027 1341.13,525.658C1345.43,527.289 1349.34,529.502 1352.87,532.298C1356.39,535.094 1359.29,538.589 1361.55,542.783C1363.82,546.977 1364.95,552.003 1364.95,557.861C1364.95,566.182 1363.4,573.172 1360.31,578.831C1357.21,584.489 1353.08,589.033 1347.92,592.461C1342.76,595.889 1336.87,598.336 1330.25,599.8C1323.62,601.265 1316.78,601.997 1309.73,601.997Z" style="fill:white;fill-opacity:0.5;fill-rule:nonzero;"/>
-    </g>
-</svg>

assets/images/numbers_two.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 423 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g id="_2" serif:id="2" transform="matrix(3.15485,0,0,3.15485,-4006.18,-1252.91)">
-        <path d="M1396.65,443.647C1396.65,448.024 1396.18,452.265 1395.22,456.369C1394.26,460.472 1392.66,464.713 1390.43,469.09C1388.2,473.468 1385.26,478.096 1381.61,482.975C1377.96,487.854 1373.45,493.234 1368.07,499.116C1362.68,504.998 1356.41,511.496 1349.26,518.609C1342.1,525.722 1333.82,533.702 1324.43,542.547L1296.39,569.222L1361.64,569.222C1367.38,569.222 1372.28,567.558 1376.34,564.229C1380.4,560.9 1383.25,556.09 1384.89,549.797L1387.22,541.18L1403.77,541.18L1402.26,600L1269.85,600L1269.85,571.137L1311.3,528.868C1319.96,520.022 1327.07,512.043 1332.64,504.93C1338.2,497.817 1342.58,491.023 1345.77,484.548C1348.96,478.073 1351.19,471.667 1352.47,465.329C1353.75,458.99 1354.39,452.219 1354.39,445.015C1354.39,434.345 1352.45,426.548 1348.57,421.624C1344.7,416.699 1339.34,414.237 1332.5,414.237C1323.02,414.237 1316.36,418.318 1312.53,426.48C1308.7,434.642 1306.78,446.702 1306.78,462.661C1301.49,462.661 1296.64,462.159 1292.21,461.156C1287.79,460.153 1284.01,458.557 1280.86,456.369C1277.71,454.18 1275.28,451.33 1273.54,447.819C1271.81,444.308 1270.94,440.045 1270.94,435.029C1270.94,429.922 1272.24,425.089 1274.84,420.529C1277.44,415.969 1281.29,411.957 1286.4,408.492C1291.51,405.026 1297.91,402.267 1305.62,400.216C1313.33,398.164 1322.29,397.138 1332.5,397.138C1342.99,397.138 1352.22,398.209 1360.2,400.352C1368.18,402.495 1374.88,405.573 1380.31,409.586C1385.73,413.598 1389.82,418.477 1392.55,424.223C1395.29,429.968 1396.65,436.443 1396.65,443.647Z" style="fill:white;fill-opacity:0.5;fill-rule:nonzero;"/>
-    </g>
-</svg>

content/mitglieder/contents.lr

@@ -1,97 +1,44 @@
 _model: flow_block_page
 ---
-title: Mitglied werden
+title: Hacken in bester Genossenschaft
 ---
-body:
+body: Eine Genossenschaft, die uns dabei unterstützt, in der Wirtschaft, in der Geldwelt zurecht zu kommen. Eine Gemeinschaft, die es ermöglicht, unsere Projekte zu realisieren – auch solche, die uns alleine überfordern. Ein Unternehmen, das uns allen gehört, in dem alle von uns eine Stimme und das Recht auf Mitsprache haben. Das alles ist nun machbar – in unserer WTF Kooperative eG (Werkkooperative der TechnikfreundInnen).
-
-Eine genaue Schritt-für-Schritt-Anleitung über den Aufnahmeprozess findest Du hier. Wenn Du diese genau befolgst, vermeidest Du unnötige Verzögerungen.
-
-Durch unsere geografische Streuung und die rechtlichen Rahmenbedingungen (der Vorstand muss die Aufnahmen persönlich unterschreiben), kann sich dieser Prozess über ein paar Tage bzw. Wochen hinziehen. Bitte hab' etwas Geduld mit uns.
-
-## Formular ausfüllen und per Post schicken
-
-Unter [onboarding.wtf-eg.de](https://onboarding.wtf-eg.de) das Formular herunterladen, ausfüllen, **ausdrucken und unterschrieben per Post an uns senden:**
-
-<p class="indented_box">**WTF Kooperative eG**<br>
-Formsmannstr. 14 b<br>
-Hinterhaus, 3. OG<br>
-22303 Hamburg</p>
-
-(Drucke das zweiseitige Formular am besten auf Vorder- und Rückseite eines Blattes aus)
-
-## Eine Mail mit Deinem PGP-Key im Anhang senden
-
-Schick von Deiner auf dem Fragebogen für uns angegebenen E-Mail-Adresse eine Mail an:
-*member@wtf-eg.de*
-mit Deinem auf dem Fragebogen angegebenen Key signiert; hänge diesen Public-Key an deine E-Mail an.
-Der Betreff soll lauten: *Aufnahmeantrag [nickname]*
-Falls zutreffend, kannst du kurz erwähnen, ob Du zeitnah Geschäfte über die WTF eG abwickeln möchtest und ob es dringend ist.
-
-## Mindestens 300 € an die Genossenschaft überweisen
-
-Überweise auf das im Fragebogen angegebenen Konto:
-
-- 100 € Aufnahmegebühr
-- 100 € Jahresbeitrag
-- 100 € je gezeichnetem Anteil (1 bis 100 Anteile)
-
-**Für die Weiterbearbeitung Deiner Aufnahme müssen mindestens 300 € bei der Genossenschaft eingegangen sein.**
-Schreibe im Verwendungszweck der Überweisung: *Aufnahmeantrag – Klarname – Nickname*
-(Klarnamen hier und im Fragebogen genau so wie sie im Amtlichen Ausweis stehen)
-
-## Dokumente
-
-| | | |
-| --: | -- | -- |
-| **Satzung:** | &nbsp; | [wtf-satzung.pdf](/dokumente/wtf-satzung.pdf) |
-| **Beitragsordnung:** | &nbsp; | [wtf-beitragsordnung.pdf](/dokumente/wtf-beitragsordnung.pdf) |
-| **Beitrittserklärung:**| &nbsp; | [onboarding.wtf-eg.de](https://onboarding.wtf-eg.de) |
-
 ---
 teaser: WTF Kooperative eG, gegründet im Jahr 2020.
 ---
 section:
 
-#### flow_claim_boxes ####
+#### flow_text_section ####
-card_title: Genossenschaftlich solidarisch
+title: Genossenschaftlich solidarisch
 ----
-card_image: images/circle_icon_building.svg
+body: Eine Genossenschaft, die uns dabei unterstützt, in der Wirtschaft, in der Geldwelt zurecht zu kommen. Eine Gemeinschaft, die es ermöglicht, unsere Projekte zu realisieren – auch solche, die jede Einzelne und jeden Einzelnen von uns überfordert. Ein Unternehmen, das uns allen gehört, in dem jeder und jede von uns eine Stimme hat. Das alles ist nun machbar – in unserer WTF Kooperative eG.
+#### flow_text_section ####
+title: Genossenschaftlich stark
 ----
-card_text: Eine Hackergemeinschaft ist eine Aufstellung, die im Markt allerhand bewegen kann.
+body: Was eine/r allein nicht kann, das schaffen viele zusammen. Sowohl intellektuell als auch finanziell. In rechtssicherer, wirtschaftlich stabiler Umgebung. Die gemeinsame Sicherheit kostet Geld. Aber wenn wir viele sind, wird das wirtschaftlich machbar. Und wir können zusammen Dinge tun, Dinge finanzieren, Dinge kaufen. Crowdfunding, Crowdbuying, Startup, Ausschreibung, Förderanträge, Zollnummer usw.
-#### flow_claim_boxes ####
+#### flow_text_section ####
-card_title: Genossenschaftlich stark
+title: Auf eigene Rechnung oder angestellt
 ----
-card_image: images/circle_icon_institution.svg
+body: Mach Deine Genossenschaft zu Deinem Arbeitgeber, indem Du Dich bei der Genossenschaft anstellen lässt. In Voll- oder Teilzeit, mit Mini- oder Midijob für Deine Arbeit, die Du von der Genossenschaft abrechnen lässt. Natürlich kannst Du auch freiberuflich für die Genossenschaft arbeiten und die Genossenschaft das managen lassen, wenn die Voraussetzungen dafür geschaffen sind.
+#### flow_text_section ####
+title: Helfen und Lernen
 ----
-card_text: Was jemand allein nicht kann, das schaffen viele zusammen. Sowohl intellektuell, finanziell und in rechtsicherer, wirtschaftlich stabiler Umgebung.
+body:
-#### flow_claim_boxes ####
+
-card_title: Auf eigene Rechnung oder angestellt
+Profitiere von dem Know-How, das in der Genossenschaft vorhanden ist, vom Erfahrungsaustausch und von der Beratung unter Mitgliedern und ExpertInnen.
+Und hilf selbst anderen GenossInnen weiter. Tausche Leistungen und Produkte unter GenossInnen.
+#### flow_text_section ####
+title: Die eigene Arbeit managen und abrechnen lassen
 ----
-card_image: images/circle_icon_briefcase.svg
+body: Viele von uns erledigen neben ihrem Alltagsjob ganz nebenbei geldwerte Arbeiten, für die die Nutznießer uns zum Dank gern etwas Geld geben würden: Man betreut eine Webseite, einen Server, macht einen Podcast, administriert oder skriptet vor sich hin – aber dafür Geld nehmen, Rechnungen schreiben? Dafür gar ein Gewerbe anmelden? Mehraufwand für Buchführung und Steuererklärung? Spare dir den Aufwand, lass das Deine Genossenschaft machen!
+#### flow_text_section ####
+title: In virtuellen Teams großartige Jobs und Projekte realisieren
 ----
-card_text: Mach Deine Genossenschaft zu deinem Arbeitgeber, indem Du Dich bei der Genossenschaft anstellen lässt.
+body:
+
+Viele von uns arbeiten freiberuflich. Von überall her, überall hin, flexibel und freundlich. Klein und häufig allein. An manche interessanten Aufgaben und Kunden kommt man als Einzelkämpfer nicht ran. An öffentliche Aufträge schon gar nicht.
+Mit der Genossenschaft kann man sich zu virtuellen Teams zusammentun und im genossenschaftlichen Rahmen konkurrenzfähig anbieten.
+#### flow_text_section ####
+title: Langfristige Träume verwirklichen
 ----
-#### flow_claim_boxes ####
+body: So ganz langfristig müsste man mal … ein Wohnprojekt starten, einen Altersruhesitz für Haecksen und Hacker einrichten, Geld zurücklegen, …, Förderung beantragen, … Realisiere gemeinsam Dein langfristiges Projekt. In bester Genossenschaft.
-card_title: Helfen und lernen
-----
-card_image: images/circle_icon_fist.svg
-----
-card_text: Profitiere von Know-How und Erfahrungsaustausch in der Genossenschaft.
-#### flow_claim_boxes ####
-card_title: Die eigene Arbeit managen und abrechnen lassen
-----
-card_image: images/circle_icon_clippy.svg
-----
-card_text: Rechnungen schreiben? Gewerbeanmeldung? Mehraufwand für Buchführung und Steuererklärung? Spare Dir den Aufwand, lass' das Deine Genossenschaft machen!
-#### flow_claim_boxes ####
-card_title: Virtuelle Teams, großartige Jobs
-----
-card_image: images/circle_icon_group.svg
-----
-card_text: Viele von uns arbeiten freiberuflich. Von überall her, überall hin, flexibel und freundlich, klein und häufig allein. An manche interessanten Aufgaben und Kunden kommt man als Einzelkämpfer nicht ran. An öffentliche Aufträge schon gar nicht.
-#### flow_claim_boxes ####
-card_title: Langfristige Träume verwirklichen
-----
-card_image: images/circle_icon_dragon.svg
-----
-card_text: Ein Wohnungsprojekt, einen Altersruhesitz für Haecksen und Hacker einrichten, Geld zurücklegen, Förderung beantragen …

content/mitglieder/wtf_camp_2020.jpg.lr

@@ -0,0 +1,7 @@
+_model: image
+---
+description: WTF Camp 2020, C3WOC
+---
+photographer: L3D
+---
+copyright: 2020, by L3D

models/flow_block_page.ini

@@ -13,6 +13,11 @@ label = Meta Beschreibung
 description = Hier kommt die Beschreibung rein, die von Suchmachinen, Seitencrawlern und Previews auf diese Seite generiert werden
 type = string
 
+[fields.teaser]
+label = Teaser
+description = Erster, hervorgehobener Absatz des Texts (Vorspann).
+type = markdown
+
 [fields.body]
 label = Body
 type = markdown
@@ -20,4 +25,4 @@ type = markdown
 [fields.section]
 label = Sections
 type = flow
-flow_blocks = flow_claim_boxes
+flow_blocks = flow_text_section

templates/blocks/flow_boxes_section.html

@@ -18,7 +18,7 @@
         </div>
 
         <div class="content__box -card_box -homepage">
-            <div class="content__inner_box -card_box">FUCXK
+            <div class="content__inner_box -card_box">
                 {% for card in this.claim_boxes.blocks %}
                     {{ card }}
                 {% endfor %}
@@ -26,4 +26,4 @@
         </div>
 
     </section>
-    <!-- Icon boxes - end -->
+    <!-- Icon boxes - start -->

templates/flow_block_page.html

@@ -12,12 +12,15 @@
     <section class="content">
         <div class="content__box -heading">
             <div class="content__inner_box">
-                <h1>{{ this.title }}</h1>
+                <h2>{{ this.title }}</h2>
             </div>
         </div>
-        <div class="content__box -membership">
+        <div class="content__half_box">
-            <div class="content__inner_box -membership">
+            <div class="content__inner_half_box">
-                <div class="content__body -membership">
+                <div class="content__teaser">
+                    {{ this.teaser }}
+                </div>
+                <div class="content__body">
                     {{ this.body }}
                 </div>
             </div>
@@ -40,12 +43,14 @@
     <section class="content">
         <div class="content__box -card_box">
             <div class="content__inner_box -card_box">
-                {% for card in this.section.blocks %}
+                {% for block in this.section.blocks %}
-                    {{ card }}
+                    <div class="card">
+                        <h3 class="card__heading">{{ block.title }}</h3>
+                        {{ block.body }}
+                    </div>
                 {% endfor %}
             </div>
         </div>
     </section>
-    <!-- Icon boxes - end -->
 
 {% endblock %}

templates/homepage.html

@@ -22,7 +22,6 @@
       <p>
         <strong>WTF Kooperative eG</strong><br>
         Forsmannstr. 14 b<br>
-        Hinterhaus, 3. OG<br>
         22303 Hamburg
       </p>
       <p>
@@ -31,7 +30,7 @@
       </p>
       <p>
         <strong>GnuPG Key:</strong><br>
-        <a href="/gnupg/1129A9F509FE1B36287202A2FE8772F9FB5D572F.asc" title="1129A9F509FE1B36287202A2FE8772F9FB5D572F">wtf_eg.asc</a>
+        <a href="/gnupg/1129A9F509FE1B36287202A2FE8772F9FB5D572F.asc">1129A9F509FE1B36287202A2FE8772F9FB5D572F</a>
       </p>
     </div>
       <section class="contact_form_box">