diff --git a/Vorlage/Bilder für Website/Bild 3.jpg b/Vorlage/Bilder für Website/Bild 3.jpg
new file mode 100644
index 0000000..562385f
Binary files /dev/null and b/Vorlage/Bilder für Website/Bild 3.jpg differ
diff --git a/Vorlage/Bilder für Website/Start 2.jpg b/Vorlage/Bilder für Website/Start 2.jpg
new file mode 100644
index 0000000..bbb23e4
Binary files /dev/null and b/Vorlage/Bilder für Website/Start 2.jpg differ
diff --git a/Vorlage/Bilder für Website/WinterSunrise-mLlV9.ttf b/Vorlage/Bilder für Website/WinterSunrise-mLlV9.ttf
new file mode 100644
index 0000000..f8c10eb
Binary files /dev/null and b/Vorlage/Bilder für Website/WinterSunrise-mLlV9.ttf differ
diff --git a/Vorlage/Bilder für Website/einkreisen Pikto.png b/Vorlage/Bilder für Website/einkreisen Pikto.png
new file mode 100644
index 0000000..c40c45c
Binary files /dev/null and b/Vorlage/Bilder für Website/einkreisen Pikto.png differ
diff --git a/dist/bundle.js b/dist/bundle.js
index 31b8874..cbb705d 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -128,7 +128,7 @@ eval("var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!\n * jQ
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("// Imports\nvar ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ = __webpack_require__(/*! ../../../node_modules/html-loader/dist/runtime/getUrl.js */ \"./node_modules/html-loader/dist/runtime/getUrl.js\");\nvar ___HTML_LOADER_IMPORT_0___ = __webpack_require__(/*! ../img/geschenke.jpg */ \"./src/client/img/geschenke.jpg\");\n// Module\nvar ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);\nvar code = \"<div class=\\\"flex-container height-100\\\">\\n    <div class=\\\"grow height-100 overflow-auto\\\">\\n        <h1>Gechenkliste</h1>\\n        <p>\\n            Ihr macht uns die größte Freude, wenn ihr mit uns feiert und den Tag verbringt. Wenn ihr uns gerne etwas\\n            schenken möchtet, haben wir eine Liste zusammengestellt, worüber wir uns für den Start ins gemeinsame Leben\\n            sehr freuen. Außerdem lieben wir es zu reisen und freuen uns immer über Geld für unsere Reisekasse.\\n        </p>\\n\\n        <div id=\\\"present-container\\\">\\n            <a id=\\\"present-template\\\" class=\\\"flex-container present\\\" target=\\\"_blank\\\">\\n                <div class=\\\"present-checkbox\\\">\\n                    <div></div>\\n                </div>\\n                <img class=\\\"present-image\\\">\\n                <div class=\\\"grow\\\">\\n                    <div class=\\\"present-name\\\"></div>\\n                    <div class=\\\"present-description\\\"></div>\\n                </div>\\n            </a>\\n        </div>\\n\\n    </div>\\n    <div class=\\\"height-100\\\">\\n        <img src=\\\"\" + ___HTML_LOADER_REPLACEMENT_0___ + \"\\\" class=\\\"height-100\\\">\\n    </div>\\n</div>\";\n// Exports\nmodule.exports = code;\n\n//# sourceURL=webpack:///./src/client/html/geschenke.html?");
+eval("// Imports\nvar ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ = __webpack_require__(/*! ../../../node_modules/html-loader/dist/runtime/getUrl.js */ \"./node_modules/html-loader/dist/runtime/getUrl.js\");\nvar ___HTML_LOADER_IMPORT_0___ = __webpack_require__(/*! ../img/geschenke.jpg */ \"./src/client/img/geschenke.jpg\");\n// Module\nvar ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);\nvar code = \"<div class=\\\"flex-container height-100\\\">\\n    <div class=\\\"grow height-100 overflow-auto site-content\\\">\\n        <h1>Gechenkliste</h1>\\n        <p>\\n            Ihr macht uns die größte Freude, wenn ihr mit uns feiert und den Tag verbringt. Wenn ihr uns gerne etwas\\n            schenken möchtet, haben wir eine Liste zusammengestellt, worüber wir uns für den Start ins gemeinsame Leben\\n            sehr freuen. Außerdem lieben wir es zu reisen und freuen uns immer über Geld für unsere Reisekasse.\\n        </p>\\n\\n        <div id=\\\"present-container\\\">\\n            <a id=\\\"present-template\\\" class=\\\"flex-container present\\\" target=\\\"_blank\\\">\\n                <div class=\\\"present-checkbox\\\">\\n                    <div></div>\\n                </div>\\n                <img class=\\\"present-image\\\">\\n                <div class=\\\"grow\\\">\\n                    <div class=\\\"present-name\\\"></div>\\n                    <div class=\\\"present-description\\\"></div>\\n                </div>\\n            </a>\\n        </div>\\n\\n    </div>\\n    <div class=\\\"height-100\\\">\\n        <img src=\\\"\" + ___HTML_LOADER_REPLACEMENT_0___ + \"\\\" class=\\\"height-100\\\">\\n    </div>\\n</div>\";\n// Exports\nmodule.exports = code;\n\n//# sourceURL=webpack:///./src/client/html/geschenke.html?");
 
 /***/ }),
 
@@ -139,7 +139,7 @@ eval("// Imports\nvar ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ = __webpack_requi
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("// Module\nvar code = \"<div>\\n    <h1>Herzlich Willkommen</h1>\\n    <p>Wir heiraten! Und das möchten wir mit euch gemeinsam am 8.Mai 2021 in Aachen feiern.\\n        Bitte sagt uns doch bis zum 15.März, ob ihr dabei sein könnt! Schreibt uns dazu bitte eine Mail an (…..).</p>\\n\\n    <p>Natürlich können wir unsere Einladung für nächstes Jahr nicht aussprechen, ohne ein paar Worte zu der aktuellen\\n        Corona Pandemie zu verlieren. Wir hoffen sehr, dass sich die Lage bis Mai soweit beruhigt hat, dass wir unsere\\n        Hochzeit mit euch allen feiern können. Leider ist das aber momentan sehr ungewiss. Soweit es geht, planen wir\\n        damit, dass wir am 8. Mai gemeinsam feiern, falls sich daran etwas ändert, melden wir uns bei euch. Sagt uns\\n        gerne trotzdem bis zum 15.März zu, damit wir besser planen können!</p>\\n</div>\";\n// Exports\nmodule.exports = code;\n\n//# sourceURL=webpack:///./src/client/html/home.html?");
+eval("// Module\nvar code = \"<div class=\\\"site-content grid-container\\\">\\n    <h1>Herzlich Willkommen</h1>\\n    <p>Wir heiraten! Und das möchten wir mit euch gemeinsam am 8.Mai 2021 in Aachen feiern.\\n        Bitte sagt uns doch bis zum 15.März, ob ihr dabei sein könnt! Schreibt uns dazu bitte eine Mail an (…..).</p>\\n\\n    <p>Natürlich können wir unsere Einladung für nächstes Jahr nicht aussprechen, ohne ein paar Worte zu der aktuellen\\n        Corona Pandemie zu verlieren. Wir hoffen sehr, dass sich die Lage bis Mai soweit beruhigt hat, dass wir unsere\\n        Hochzeit mit euch allen feiern können. Leider ist das aber momentan sehr ungewiss. Soweit es geht, planen wir\\n        damit, dass wir am 8. Mai gemeinsam feiern, falls sich daran etwas ändert, melden wir uns bei euch. Sagt uns\\n        gerne trotzdem bis zum 15.März zu, damit wir besser planen können!</p>\\n</div>\";\n// Exports\nmodule.exports = code;\n\n//# sourceURL=webpack:///./src/client/html/home.html?");
 
 /***/ }),
 
@@ -150,7 +150,7 @@ eval("// Module\nvar code = \"<div>\\n    <h1>Herzlich Willkommen</h1>\\n    <p>
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("// Imports\nvar ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ = __webpack_require__(/*! ../../../node_modules/html-loader/dist/runtime/getUrl.js */ \"./node_modules/html-loader/dist/runtime/getUrl.js\");\nvar ___HTML_LOADER_IMPORT_0___ = __webpack_require__(/*! ../img/tagesablauf_godi.jpg */ \"./src/client/img/tagesablauf_godi.jpg\");\n// Module\nvar ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);\nvar code = \"<div class=\\\"flex-container height-100\\\">\\n    <div class=\\\"height-100\\\">\\n        <img src=\\\"\" + ___HTML_LOADER_REPLACEMENT_0___ + \"\\\" class=\\\"height-100\\\">\\n    </div>\\n    <div class=\\\"grow height-100 overflow-auto\\\">\\n        <h1>Traugottesdienst</h1>\\n        <p>\\n            Um 14:00 Uhr möchten wir gemeinsam mit euch unseren Traugottesdienst in der Annakirche feiern (Annastraße\\n            35, 52062 Aachen). Wenn ihr mit dem Auto anreist könnt ihr im Parkhaus am Dom (Jesuitenstraße 12, 52062\\n            Aachen) parken, das ist direkt neben der Kirche.\\n        </p>\\n        <h1>Fingerfood</h1>\\n        <p>\\n            Nach dem Gottesdienst gehen wir zusammen zu Fuß ins Aachener Fenster (Buchkremerstraße 2). Dort gibt es dann\\n            süßes und salziges Fingerfood und ganz viel Zeit zum Gratulieren. Wenn ihr etwas zum Buffet beisteuern\\n            möchtet, dann meldet euch gerne bei <a href='mailto:sinah.stinner@googlemail.com'>Sinah Stinner\\n            (sinah.stinner@googlemail.com)</a>.\\n        </p>\\n        <h1>Gruppenfotos</h1>\\n        <p>\\n            Um ganz viele wundervolle Erinnerungen an unsere Hochzeit, die wir mit euch feiern, zu haben, gehen wir um\\n            17:00 Uhr auf den Katschhof und machen dort Gruppenfotos.\\n        </p>\\n        <h1>Sektempfang</h1>\\n        <p>\\n            Wir feiern unsere Hochzeit im Forum M über der Aachener Mayerschen mit einem wundervollen Blick über die\\n            Aachener Innenstadt. Nach den Fotos werden wir dort gemeinsam anstoßen.\\n        </p>\\n        <h1>Festessen</h1>\\n        <p>\\n            Nach vielen wundervollen Bildern, freuen wir uns alle auf unser leckeres Hochzeitsbuffet, das es um halb\\n            acht gibt.\\n        </p>\\n        <h1>Spiel & Spaß</h1>\\n        <p>\\n            Wir freuen uns auf richtige viele einzigartige, lustige und spaßige Programmbeiträge von euch. Wenn ihr es\\n            schon gar nicht erwarten könnt uns eine Freude zu machen und einen Beiträg beizusteuern, dann meldet euch\\n            gerne bei Miriam Seitz (Miriams Mailadresse). Und keine Sorge, Miriam behält alle Beiträge und\\n            Überraschungen für sich, aber sagt ihr bitte bei allem Bescheid, was ihr planen wollt.\\n        </p>\\n        <h1>Let's Dance</h1>\\n        <p>\\n            Ihr könnt zuhause schonmal üben, um die Tanzfläche unsicher zu machen!\\n        </p>\\n    </div>\\n</div>\";\n// Exports\nmodule.exports = code;\n\n//# sourceURL=webpack:///./src/client/html/tagesablauf.html?");
+eval("// Imports\nvar ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ = __webpack_require__(/*! ../../../node_modules/html-loader/dist/runtime/getUrl.js */ \"./node_modules/html-loader/dist/runtime/getUrl.js\");\nvar ___HTML_LOADER_IMPORT_0___ = __webpack_require__(/*! ../img/tagesablauf.jpg */ \"./src/client/img/tagesablauf.jpg\");\nvar ___HTML_LOADER_IMPORT_1___ = __webpack_require__(/*! ../img/einkreiser.png */ \"./src/client/img/einkreiser.png\");\n// Module\nvar ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);\nvar ___HTML_LOADER_REPLACEMENT_1___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_1___);\nvar code = \"<div class=\\\"flex-container height-100\\\">\\n    <div class=\\\"height-100\\\" id=\\\"info-image-container\\\" data-state=\\\"godi\\\">\\n        <img src=\\\"\" + ___HTML_LOADER_REPLACEMENT_0___ + \"\\\" class=\\\"height-100\\\">\\n        <img src=\\\"\" + ___HTML_LOADER_REPLACEMENT_1___ + \"\\\" class=\\\"circler godi\\\" data-state=\\\"godi\\\">\\n        <img src=\\\"\" + ___HTML_LOADER_REPLACEMENT_1___ + \"\\\" class=\\\"circler fingerfood\\\" data-state=\\\"fingerfood\\\">\\n        <img src=\\\"\" + ___HTML_LOADER_REPLACEMENT_1___ + \"\\\" class=\\\"circler foto\\\" data-state=\\\"foto\\\">\\n        <img src=\\\"\" + ___HTML_LOADER_REPLACEMENT_1___ + \"\\\" class=\\\"circler sekt\\\" data-state=\\\"sekt\\\">\\n        <img src=\\\"\" + ___HTML_LOADER_REPLACEMENT_1___ + \"\\\" class=\\\"circler essen\\\" data-state=\\\"essen\\\">\\n        <img src=\\\"\" + ___HTML_LOADER_REPLACEMENT_1___ + \"\\\" class=\\\"circler spiel\\\" data-state=\\\"spiel\\\">\\n        <img src=\\\"\" + ___HTML_LOADER_REPLACEMENT_1___ + \"\\\" class=\\\"circler dance\\\" data-state=\\\"dance\\\">\\n    </div>\\n    <div class=\\\"grow height-100 overflow-auto site-content\\\">\\n        <div class=\\\"anchor\\\" data-state=\\\"godi\\\">\\n            <h1>Traugottesdienst</h1>\\n            <p>\\n                Um 14:00 Uhr möchten wir gemeinsam mit euch unseren Traugottesdienst in der Annakirche feiern\\n                (Annastraße\\n                35, 52062 Aachen). Wenn ihr mit dem Auto anreist könnt ihr im Parkhaus am Dom (Jesuitenstraße 12, 52062\\n                Aachen) parken, das ist direkt neben der Kirche.\\n            </p>\\n        </div>\\n        <div class=\\\"anchor\\\" data-state=\\\"fingerfood\\\">\\n            <h1>Fingerfood</h1>\\n            <p>\\n                Nach dem Gottesdienst gehen wir zusammen zu Fuß ins Aachener Fenster (Buchkremerstraße 2). Dort gibt es\\n                dann\\n                süßes und salziges Fingerfood und ganz viel Zeit zum Gratulieren. Wenn ihr etwas zum Buffet beisteuern\\n                möchtet, dann meldet euch gerne bei <a href='mailto:sinah.stinner@googlemail.com'>Sinah Stinner\\n                (sinah.stinner@googlemail.com)</a>.\\n            </p></div>\\n        <div class=\\\"anchor\\\" data-state=\\\"foto\\\">\\n            <h1>Gruppenfotos</h1>\\n            <p>\\n                Um ganz viele wundervolle Erinnerungen an unsere Hochzeit, die wir mit euch feiern, zu haben, gehen wir\\n                um\\n                17:00 Uhr auf den Katschhof und machen dort Gruppenfotos.\\n            </p></div>\\n        <div class=\\\"anchor\\\" data-state=\\\"sekt\\\">\\n            <h1>Sektempfang</h1>\\n            <p>\\n                Wir feiern unsere Hochzeit im Forum M über der Aachener Mayerschen mit einem wundervollen Blick über die\\n                Aachener Innenstadt. Nach den Fotos werden wir dort gemeinsam anstoßen.\\n            </p></div>\\n        <div class=\\\"anchor\\\" data-state=\\\"essen\\\">\\n            <h1>Festessen</h1>\\n            <p>\\n                Nach vielen wundervollen Bildern, freuen wir uns alle auf unser leckeres Hochzeitsbuffet, das es um halb\\n                acht gibt.\\n            </p></div>\\n        <div class=\\\"anchor\\\" data-state=\\\"spiel\\\">\\n            <h1>Spiel & Spaß</h1>\\n            <p>\\n                Wir freuen uns auf richtige viele einzigartige, lustige und spaßige Programmbeiträge von euch. Wenn ihr\\n                es\\n                schon gar nicht erwarten könnt uns eine Freude zu machen und einen Beiträg beizusteuern, dann meldet\\n                euch\\n                gerne bei Miriam Seitz (Miriams Mailadresse). Und keine Sorge, Miriam behält alle Beiträge und\\n                Überraschungen für sich, aber sagt ihr bitte bei allem Bescheid, was ihr planen wollt.\\n            </p></div>\\n        <div class=\\\"anchor\\\" data-state=\\\"dance\\\">\\n            <h1>Let's Dance</h1>\\n            <p>\\n                Ihr könnt zuhause schonmal üben, um die Tanzfläche unsicher zu machen!\\n            </p>\\n        </div>\\n    </div>\\n</div>\";\n// Exports\nmodule.exports = code;\n\n//# sourceURL=webpack:///./src/client/html/tagesablauf.html?");
 
 /***/ }),
 
@@ -161,7 +161,19 @@ eval("// Imports\nvar ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ = __webpack_requi
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("// Imports\nvar ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ = __webpack_require__(/*! ../../../node_modules/html-loader/dist/runtime/getUrl.js */ \"./node_modules/html-loader/dist/runtime/getUrl.js\");\nvar ___HTML_LOADER_IMPORT_0___ = __webpack_require__(/*! ../img/hotel.jpg */ \"./src/client/img/hotel.jpg\");\nvar ___HTML_LOADER_IMPORT_1___ = __webpack_require__(/*! ../img/unterkunft.jpg */ \"./src/client/img/unterkunft.jpg\");\n// Module\nvar ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);\nvar ___HTML_LOADER_REPLACEMENT_1___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_1___);\nvar code = \"<div class=\\\"flex-container height-100\\\">\\n    <div class=\\\"grow height-100 overflow-auto\\\">\\n        <h1>Unterkunft</h1>\\n        <p>\\n            Wir freuen uns riesig, dass ihr aus nah und fern anreist, um mit uns gemeinsam unseren Hochzeitstag zu\\n            verbringen!\\n        </p>\\n        <p>\\n            Für alle die, die eine lange Anreise haben, empfehlen wir euch, im Hotel … zu übernachten. Das ist fußläufig\\n            vom\\n            Forum M aus zu erreichen. Ihr könnt das Auto auch im Parkhaus am Dom über Nacht stehen lassen.\\n        </p>\\n        <p>\\n            Alle, die eher eine studentische Übernachtungsmöglichkeit suchen, können sich gerne bei uns melden. Ihr\\n            werdet\\n            dann bei Freunden aus Aachen in WGs mituntergebracht. Sagt uns da bitte bis spätestens zum 15.April\\n            Bescheid.\\n        </p>\\n\\n        <div class=\\\"grid-x padding-default\\\">\\n            <div class=\\\"small-4\\\">\\n                <a href=\\\"https://all.accor.com/hotel/8027/index.de.shtml\\\" target=\\\"_blank\\\" class=\\\"hidden-link\\\">\\n                    <h3>IBIS Hotel</h3>\\n                    <img src=\\\"\" + ___HTML_LOADER_REPLACEMENT_0___ + \"\\\">\\n                </a>\\n            </div>\\n            <div class=\\\"small-8\\\">\\n                <iframe id=\\\"map_unterkunft\\\"\\n                        src=\\\"https://maps.google.com/maps?width=520&amp;height=395&amp;hl=de&amp;q=IBIS%20budget%20Hotel+Schumacherstr%2012%20Aachen&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed\\\"></iframe>\\n            </div>\\n        </div>\\n\\n    </div>\\n    <div class=\\\"height-100\\\">\\n        <img src=\\\"\" + ___HTML_LOADER_REPLACEMENT_1___ + \"\\\" class=\\\"height-100\\\">\\n    </div>\\n</div>\";\n// Exports\nmodule.exports = code;\n\n//# sourceURL=webpack:///./src/client/html/unterkunft.html?");
+eval("// Imports\nvar ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ = __webpack_require__(/*! ../../../node_modules/html-loader/dist/runtime/getUrl.js */ \"./node_modules/html-loader/dist/runtime/getUrl.js\");\nvar ___HTML_LOADER_IMPORT_0___ = __webpack_require__(/*! ../img/hotel.jpg */ \"./src/client/img/hotel.jpg\");\nvar ___HTML_LOADER_IMPORT_1___ = __webpack_require__(/*! ../img/unterkunft.jpg */ \"./src/client/img/unterkunft.jpg\");\n// Module\nvar ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);\nvar ___HTML_LOADER_REPLACEMENT_1___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_1___);\nvar code = \"<div class=\\\"flex-container height-100\\\">\\n    <div class=\\\"grow height-100 overflow-auto site-content\\\">\\n        <h1>Unterkunft</h1>\\n        <p>\\n            Wir freuen uns riesig, dass ihr aus nah und fern anreist, um mit uns gemeinsam unseren Hochzeitstag zu\\n            verbringen!\\n        </p>\\n        <p>\\n            Für alle die, die eine lange Anreise haben, empfehlen wir euch, im Hotel … zu übernachten. Das ist fußläufig\\n            vom\\n            Forum M aus zu erreichen. Ihr könnt das Auto auch im Parkhaus am Dom über Nacht stehen lassen.\\n        </p>\\n        <p>\\n            Alle, die eher eine studentische Übernachtungsmöglichkeit suchen, können sich gerne bei uns melden. Ihr\\n            werdet\\n            dann bei Freunden aus Aachen in WGs mituntergebracht. Sagt uns da bitte bis spätestens zum 15.April\\n            Bescheid.\\n        </p>\\n\\n        <div class=\\\"grid-x padding-default\\\">\\n            <div class=\\\"small-4\\\">\\n                <a href=\\\"https://all.accor.com/hotel/8027/index.de.shtml\\\" target=\\\"_blank\\\" class=\\\"hidden-link\\\">\\n                    <h3>IBIS Hotel</h3>\\n                    <img src=\\\"\" + ___HTML_LOADER_REPLACEMENT_0___ + \"\\\">\\n                </a>\\n            </div>\\n            <div class=\\\"small-8\\\">\\n                <iframe id=\\\"map_unterkunft\\\"\\n                        src=\\\"https://maps.google.com/maps?width=520&amp;height=395&amp;hl=de&amp;q=IBIS%20budget%20Hotel+Schumacherstr%2012%20Aachen&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed\\\"></iframe>\\n            </div>\\n        </div>\\n\\n    </div>\\n    <div class=\\\"height-100\\\">\\n        <img src=\\\"\" + ___HTML_LOADER_REPLACEMENT_1___ + \"\\\" class=\\\"height-100\\\">\\n    </div>\\n</div>\";\n// Exports\nmodule.exports = code;\n\n//# sourceURL=webpack:///./src/client/html/unterkunft.html?");
+
+/***/ }),
+
+/***/ "./src/client/img/einkreiser.png":
+/*!***************************************!*\
+  !*** ./src/client/img/einkreiser.png ***!
+  \***************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__[\"default\"] = (\"/img/einkreiser.png\");\n\n//# sourceURL=webpack:///./src/client/img/einkreiser.png?");
 
 /***/ }),
 
@@ -201,15 +213,15 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */
 
 /***/ }),
 
-/***/ "./src/client/img/tagesablauf_godi.jpg":
-/*!*********************************************!*\
-  !*** ./src/client/img/tagesablauf_godi.jpg ***!
-  \*********************************************/
+/***/ "./src/client/img/tagesablauf.jpg":
+/*!****************************************!*\
+  !*** ./src/client/img/tagesablauf.jpg ***!
+  \****************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__[\"default\"] = (\"/img/tagesablauf_godi.jpg\");\n\n//# sourceURL=webpack:///./src/client/img/tagesablauf_godi.jpg?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__[\"default\"] = (\"/img/tagesablauf.jpg\");\n\n//# sourceURL=webpack:///./src/client/img/tagesablauf.jpg?");
 
 /***/ }),
 
@@ -245,7 +257,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var foundation_sites_dist_js_foundation_es6__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! foundation-sites/dist/js/foundation.es6 */ \"./node_modules/foundation-sites/dist/js/foundation.es6.js\");\n/* harmony import */ var _PresentsHandler__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./PresentsHandler */ \"./src/client/js/PresentsHandler.ts\");\nvar __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\n\n\n\nconst templates = {\n    home: __webpack_require__(/*! ../html/home.html */ \"./src/client/html/home.html\"),\n    unterkunft: __webpack_require__(/*! ../html/unterkunft.html */ \"./src/client/html/unterkunft.html\"),\n    tagesablauf: __webpack_require__(/*! ../html/tagesablauf.html */ \"./src/client/html/tagesablauf.html\"),\n    geschenke: __webpack_require__(/*! ../html/geschenke.html */ \"./src/client/html/geschenke.html\"),\n};\nfunction startPresents() {\n    return __awaiter(this, void 0, void 0, function* () {\n        yield new _PresentsHandler__WEBPACK_IMPORTED_MODULE_2__[\"PresentsHandler\"]().showPresents();\n    });\n}\nconst callbacks = {\n    home: () => { },\n    unterkunft: () => { },\n    tagesablauf: () => { },\n    geschenke: startPresents,\n};\njquery__WEBPACK_IMPORTED_MODULE_0__(document).foundation();\njquery__WEBPACK_IMPORTED_MODULE_0__(function () {\n    const mainDiv = document.getElementById(\"main-content-container\");\n    const container = document.getElementById(\"main-content\");\n    const img = document.getElementById(\"home-img-container\");\n    let currentSite = \"home\";\n    //Scroll-Element\n    mainDiv.addEventListener(\"scroll\", e => {\n        console.log(\"scrolling!\", e);\n    });\n    //Navigation\n    container.innerHTML = templates.home;\n    document.querySelectorAll(\".menu li[data-site]\").forEach((elem) => {\n        elem.addEventListener(\"click\", () => {\n            const oldActive = document.querySelector(\".menu .active\");\n            if (oldActive) {\n                oldActive.classList.remove(\"active\");\n            }\n            elem.classList.add(\"active\");\n            container.innerHTML = templates[elem.dataset[\"site\"]];\n            if (elem.dataset[\"img\"] === \"1\") {\n                img.classList.remove(\"hidden\");\n            }\n            else {\n                img.classList.add(\"hidden\");\n            }\n            currentSite = elem.dataset[\"site\"];\n            if (typeof callbacks[currentSite] === \"function\") {\n                callbacks[currentSite]();\n            }\n        });\n    });\n});\n\n\n//# sourceURL=webpack:///./src/client/js/index.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var foundation_sites_dist_js_foundation_es6__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! foundation-sites/dist/js/foundation.es6 */ \"./node_modules/foundation-sites/dist/js/foundation.es6.js\");\n/* harmony import */ var _PresentsHandler__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./PresentsHandler */ \"./src/client/js/PresentsHandler.ts\");\nvar __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\n\n\n\nconst templates = {\n    home: __webpack_require__(/*! ../html/home.html */ \"./src/client/html/home.html\"),\n    unterkunft: __webpack_require__(/*! ../html/unterkunft.html */ \"./src/client/html/unterkunft.html\"),\n    tagesablauf: __webpack_require__(/*! ../html/tagesablauf.html */ \"./src/client/html/tagesablauf.html\"),\n    geschenke: __webpack_require__(/*! ../html/geschenke.html */ \"./src/client/html/geschenke.html\"),\n};\nconst callbacks = {\n    home: () => {\n    },\n    unterkunft: () => {\n    },\n    tagesablauf: () => {\n        let state = \"godi\";\n        let scrollTimeout = null;\n        let scrollToView = false;\n        const infoImageContainer = document.getElementById(\"info-image-container\");\n        infoImageContainer.querySelectorAll(\".circler\").forEach(circle => {\n            circle.addEventListener(\"click\", () => {\n                state = circle.dataset[\"state\"];\n                infoImageContainer.dataset[\"state\"] = state;\n                scrollToView = true;\n                document.querySelector(\".anchor[data-state='\" + state + \"']\").scrollIntoView({\n                    \"behavior\": \"smooth\",\n                    \"block\": \"start\"\n                });\n            });\n        });\n        const navBar = document.querySelector(\".top-bar\");\n        const anchors = document.querySelectorAll(\".anchor\");\n        const margin = navBar.clientHeight + 50;\n        const observerDown = new IntersectionObserver(entries => {\n            entries.some(entry => {\n                if (!entry.isIntersecting && entry.intersectionRect.top === margin && !scrollToView) {\n                    state = entry.target.dataset[\"state\"];\n                }\n            });\n        }, { threshold: 1, rootMargin: \"-\" + margin + \"px 0px 0px 0px\" });\n        // }, {threshold: 1, rootMargin: \"-100px 0px 0px 0px\"});\n        const observerUp = new IntersectionObserver(entries => {\n            entries.some(entry => {\n                if (entry.isIntersecting && entry.intersectionRect.top === navBar.clientHeight && !scrollToView) {\n                    state = entry.target.dataset[\"state\"];\n                }\n            });\n        }, { threshold: 0.1 });\n        anchors.forEach(anchor => {\n            observerDown.observe(anchor);\n            observerUp.observe(anchor);\n        });\n        document.querySelector(\"#info-image-container + .site-content\").addEventListener(\"scroll\", e => {\n            clearTimeout(scrollTimeout);\n            scrollTimeout = setTimeout(() => {\n                scrollTimeout = null;\n                infoImageContainer.dataset[\"state\"] = state;\n                scrollToView = false;\n                console.log(\"stopped scrolling\");\n            }, 50);\n        });\n    },\n    geschenke: () => __awaiter(void 0, void 0, void 0, function* () { return yield new _PresentsHandler__WEBPACK_IMPORTED_MODULE_2__[\"PresentsHandler\"]().showPresents(); }),\n};\njquery__WEBPACK_IMPORTED_MODULE_0__(document).foundation();\njquery__WEBPACK_IMPORTED_MODULE_0__(function () {\n    const container = document.getElementById(\"main-content\");\n    const img = document.getElementById(\"home-img-container\");\n    let currentSite = \"home\";\n    //Navigation\n    container.innerHTML = templates.home;\n    document.querySelectorAll(\".menu li[data-site]\").forEach((elem) => {\n        elem.addEventListener(\"click\", () => {\n            const oldActive = document.querySelector(\".menu .active\");\n            if (oldActive) {\n                oldActive.classList.remove(\"active\");\n            }\n            elem.classList.add(\"active\");\n            container.innerHTML = templates[elem.dataset[\"site\"]];\n            if (elem.dataset[\"img\"] === \"1\") {\n                img.classList.remove(\"hidden\");\n            }\n            else {\n                img.classList.add(\"hidden\");\n            }\n            currentSite = elem.dataset[\"site\"];\n            if (typeof callbacks[currentSite] === \"function\") {\n                callbacks[currentSite]();\n            }\n        });\n    });\n});\n\n\n//# sourceURL=webpack:///./src/client/js/index.ts?");
 
 /***/ }),
 
diff --git a/dist/img/tagesablauf_godi.jpg b/dist/img/tagesablauf_godi.jpg
deleted file mode 100644
index 8f41843..0000000
Binary files a/dist/img/tagesablauf_godi.jpg and /dev/null differ
diff --git a/dist/index.html b/dist/index.html
index 7596e16..823300d 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -63,12 +63,12 @@
         <span class="width-100" id="home-img">
             <img src="/img/home.jpg" id="" alt="Julia und Sam sehen sich verliebt an und halten dabei händchen &lt;3"
                  class="">
-            <span id="start-text-img-overlay">Hochzeit von <br>Julia und Samuel</span>
+            <h1 id="start-text-img-overlay">Hochzeit von <br/>Julia und Samuel</h1>
         </span>
         <span id="img-spacer"></span>
     </span>
     <div id="scroll-container">
-        <div class="grid-container">
+        <div class="">
             <div class="grid-x grid-padding-x grid-padding-y grow max-height-100">
                 <div class="cell small-12" id="main-content">
                 </div>
diff --git a/dist/main.css b/dist/main.css
index 30ded0c..eb3e3c2 100644
--- a/dist/main.css
+++ b/dist/main.css
@@ -4822,6 +4822,68 @@ html.is-reveal-open {
   .present .present-name {
     font-weight: bold; }
 
+#info-image-container {
+  position: relative; }
+  #info-image-container img.circler {
+    position: absolute;
+    height: 12%;
+    opacity: 0;
+    cursor: pointer; }
+    #info-image-container img.circler.godi {
+      top: 1.5%;
+      left: 46%; }
+    #info-image-container img.circler.fingerfood {
+      left: 9%;
+      top: 12.5%;
+      width: 32%;
+      height: 20%; }
+    #info-image-container img.circler.foto {
+      left: 48%;
+      top: 32%;
+      width: 32%; }
+    #info-image-container img.circler.sekt {
+      left: 9%;
+      top: 46.5%;
+      width: 32%; }
+    #info-image-container img.circler.essen {
+      left: 48%;
+      top: 60%;
+      width: 32%; }
+    #info-image-container img.circler.spiel {
+      left: 11%;
+      top: 72.5%;
+      width: 30%; }
+    #info-image-container img.circler.dance {
+      left: 48%;
+      top: 86%;
+      width: 29%; }
+  #info-image-container[data-state='godi'] .godi {
+    opacity: 0.7; }
+  #info-image-container[data-state='fingerfood'] .fingerfood {
+    opacity: 0.7; }
+  #info-image-container[data-state='foto'] .foto {
+    opacity: 0.7; }
+  #info-image-container[data-state='sekt'] .sekt {
+    opacity: 0.7; }
+  #info-image-container[data-state='essen'] .essen {
+    opacity: 0.7; }
+  #info-image-container[data-state='spiel'] .spiel {
+    opacity: 0.7; }
+  #info-image-container[data-state='dance'] .dance {
+    opacity: 0.7; }
+
+.anchor {
+  display: block;
+  padding-top: 1rem; }
+  .anchor:first-child {
+    padding-top: 0; }
+  .anchor p:last-child {
+    margin-bottom: 0; }
+
+@font-face {
+  font-family: "WinterSunrise";
+  src: url(/img/WinterSunrise.ttf); }
+
 .width-100 {
   width: 100%; }
 
@@ -4847,9 +4909,9 @@ body {
     body #main-content-container #scroll-container {
       height: 100%;
       background: #d7c9ac; }
-      body #main-content-container #scroll-container > .grid-container {
+      body #main-content-container #scroll-container > div {
         height: 100%; }
-        body #main-content-container #scroll-container > .grid-container > .grid-x {
+        body #main-content-container #scroll-container > div > .grid-x {
           height: 100%; }
       body #main-content-container #scroll-container #main-content {
         height: 100%;
@@ -4866,6 +4928,10 @@ a.hidden-link, a.hidden-link:hover {
   text-decoration: none;
   color: inherit; }
 
+h1 {
+  font-family: WinterSunrise, serif;
+  font-size: 4.5rem; }
+
 #home-img-container #home-img {
   width: 100%;
   height: 100%;
@@ -4878,11 +4944,10 @@ a.hidden-link, a.hidden-link:hover {
   #home-img-container #home-img #start-text-img-overlay {
     position: absolute;
     left: 2rem;
-    top: 50%;
+    bottom: 3rem;
     color: white;
-    font-family: "Winter Sunrise", Arial, serif;
-    font-size: 4rem;
-    line-height: 2.5; }
+    font-size: 8rem;
+    line-height: 1.2; }
 
 #home-img-container #img-spacer {
   display: block;
@@ -4895,3 +4960,6 @@ img.full-screen-width {
 .hidden {
   display: none; }
 
+.site-content {
+  padding: 3rem 2rem; }
+
diff --git a/package.json b/package.json
index a342701..0b0674f 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,6 @@
     "@babel/plugin-transform-runtime": "^7.11.5",
     "@babel/polyfill": "^7.11.5",
     "@types/express": "^4.17.8",
-    "@types/socket.io": "^2.1.11",
     "autoprefixer": "^10.0.1",
     "babel-loader": "^8.1.0",
     "babel-preset-env": "^1.7.0",
@@ -35,13 +34,14 @@
     "sass-loader": "^10.1.0",
     "terser-webpack-plugin": "^4.2.2",
     "ts-loader": "^8.0.4",
-    "ts-node": "^9.0.0",
-    "typescript": "^4.0.2",
     "webpack": "^4.44.2",
     "webpack-cli": "^3.3.12"
   },
   "dependencies": {
     "express": "^4.17.1",
-    "dotenv": "^8.2.0"
+    "dotenv": "^8.2.0",
+    "ts-node": "^9.0.0",
+    "typescript": "^4.0.2",
+    "@types/express": "^4.17.8"
   }
 }
diff --git a/src/client/html/geschenke.html b/src/client/html/geschenke.html
index b77f150..f1c885a 100644
--- a/src/client/html/geschenke.html
+++ b/src/client/html/geschenke.html
@@ -1,5 +1,5 @@
 <div class="flex-container height-100">
-    <div class="grow height-100 overflow-auto">
+    <div class="grow height-100 overflow-auto site-content">
         <h1>Gechenkliste</h1>
         <p>
             Ihr macht uns die größte Freude, wenn ihr mit uns feiert und den Tag verbringt. Wenn ihr uns gerne etwas
diff --git a/src/client/html/home.html b/src/client/html/home.html
index d9a9aae..cef280c 100644
--- a/src/client/html/home.html
+++ b/src/client/html/home.html
@@ -1,4 +1,4 @@
-<div>
+<div class="site-content grid-container">
     <h1>Herzlich Willkommen</h1>
     <p>Wir heiraten! Und das möchten wir mit euch gemeinsam am 8.Mai 2021 in Aachen feiern.
         Bitte sagt uns doch bis zum 15.März, ob ihr dabei sein könnt! Schreibt uns dazu bitte eine Mail an (…..).</p>
diff --git a/src/client/html/tagesablauf.html b/src/client/html/tagesablauf.html
index e18991c..e83b920 100644
--- a/src/client/html/tagesablauf.html
+++ b/src/client/html/tagesablauf.html
@@ -1,46 +1,67 @@
 <div class="flex-container height-100">
-    <div class="height-100">
-        <img src="../img/tagesablauf_godi.jpg" class="height-100">
+    <div class="height-100" id="info-image-container" data-state="godi">
+        <img src="../img/tagesablauf.jpg" class="height-100">
+        <img src="../img/einkreiser.png" class="circler godi" data-state="godi">
+        <img src="../img/einkreiser.png" class="circler fingerfood" data-state="fingerfood">
+        <img src="../img/einkreiser.png" class="circler foto" data-state="foto">
+        <img src="../img/einkreiser.png" class="circler sekt" data-state="sekt">
+        <img src="../img/einkreiser.png" class="circler essen" data-state="essen">
+        <img src="../img/einkreiser.png" class="circler spiel" data-state="spiel">
+        <img src="../img/einkreiser.png" class="circler dance" data-state="dance">
     </div>
-    <div class="grow height-100 overflow-auto">
-        <h1>Traugottesdienst</h1>
-        <p>
-            Um 14:00 Uhr möchten wir gemeinsam mit euch unseren Traugottesdienst in der Annakirche feiern (Annastraße
-            35, 52062 Aachen). Wenn ihr mit dem Auto anreist könnt ihr im Parkhaus am Dom (Jesuitenstraße 12, 52062
-            Aachen) parken, das ist direkt neben der Kirche.
-        </p>
-        <h1>Fingerfood</h1>
-        <p>
-            Nach dem Gottesdienst gehen wir zusammen zu Fuß ins Aachener Fenster (Buchkremerstraße 2). Dort gibt es dann
-            süßes und salziges Fingerfood und ganz viel Zeit zum Gratulieren. Wenn ihr etwas zum Buffet beisteuern
-            möchtet, dann meldet euch gerne bei <a href='mailto:sinah.stinner@googlemail.com'>Sinah Stinner
-            (sinah.stinner@googlemail.com)</a>.
-        </p>
-        <h1>Gruppenfotos</h1>
-        <p>
-            Um ganz viele wundervolle Erinnerungen an unsere Hochzeit, die wir mit euch feiern, zu haben, gehen wir um
-            17:00 Uhr auf den Katschhof und machen dort Gruppenfotos.
-        </p>
-        <h1>Sektempfang</h1>
-        <p>
-            Wir feiern unsere Hochzeit im Forum M über der Aachener Mayerschen mit einem wundervollen Blick über die
-            Aachener Innenstadt. Nach den Fotos werden wir dort gemeinsam anstoßen.
-        </p>
-        <h1>Festessen</h1>
-        <p>
-            Nach vielen wundervollen Bildern, freuen wir uns alle auf unser leckeres Hochzeitsbuffet, das es um halb
-            acht gibt.
-        </p>
-        <h1>Spiel & Spaß</h1>
-        <p>
-            Wir freuen uns auf richtige viele einzigartige, lustige und spaßige Programmbeiträge von euch. Wenn ihr es
-            schon gar nicht erwarten könnt uns eine Freude zu machen und einen Beiträg beizusteuern, dann meldet euch
-            gerne bei Miriam Seitz (Miriams Mailadresse). Und keine Sorge, Miriam behält alle Beiträge und
-            Überraschungen für sich, aber sagt ihr bitte bei allem Bescheid, was ihr planen wollt.
-        </p>
-        <h1>Let's Dance</h1>
-        <p>
-            Ihr könnt zuhause schonmal üben, um die Tanzfläche unsicher zu machen!
-        </p>
+    <div class="grow height-100 overflow-auto site-content">
+        <div class="anchor" data-state="godi">
+            <h1>Traugottesdienst</h1>
+            <p>
+                Um 14:00 Uhr möchten wir gemeinsam mit euch unseren Traugottesdienst in der Annakirche feiern
+                (Annastraße
+                35, 52062 Aachen). Wenn ihr mit dem Auto anreist könnt ihr im Parkhaus am Dom (Jesuitenstraße 12, 52062
+                Aachen) parken, das ist direkt neben der Kirche.
+            </p>
+        </div>
+        <div class="anchor" data-state="fingerfood">
+            <h1>Fingerfood</h1>
+            <p>
+                Nach dem Gottesdienst gehen wir zusammen zu Fuß ins Aachener Fenster (Buchkremerstraße 2). Dort gibt es
+                dann
+                süßes und salziges Fingerfood und ganz viel Zeit zum Gratulieren. Wenn ihr etwas zum Buffet beisteuern
+                möchtet, dann meldet euch gerne bei <a href='mailto:sinah.stinner@googlemail.com'>Sinah Stinner
+                (sinah.stinner@googlemail.com)</a>.
+            </p></div>
+        <div class="anchor" data-state="foto">
+            <h1>Gruppenfotos</h1>
+            <p>
+                Um ganz viele wundervolle Erinnerungen an unsere Hochzeit, die wir mit euch feiern, zu haben, gehen wir
+                um
+                17:00 Uhr auf den Katschhof und machen dort Gruppenfotos.
+            </p></div>
+        <div class="anchor" data-state="sekt">
+            <h1>Sektempfang</h1>
+            <p>
+                Wir feiern unsere Hochzeit im Forum M über der Aachener Mayerschen mit einem wundervollen Blick über die
+                Aachener Innenstadt. Nach den Fotos werden wir dort gemeinsam anstoßen.
+            </p></div>
+        <div class="anchor" data-state="essen">
+            <h1>Festessen</h1>
+            <p>
+                Nach vielen wundervollen Bildern, freuen wir uns alle auf unser leckeres Hochzeitsbuffet, das es um halb
+                acht gibt.
+            </p></div>
+        <div class="anchor" data-state="spiel">
+            <h1>Spiel & Spaß</h1>
+            <p>
+                Wir freuen uns auf richtige viele einzigartige, lustige und spaßige Programmbeiträge von euch. Wenn ihr
+                es
+                schon gar nicht erwarten könnt uns eine Freude zu machen und einen Beiträg beizusteuern, dann meldet
+                euch
+                gerne bei Miriam Seitz (Miriams Mailadresse). Und keine Sorge, Miriam behält alle Beiträge und
+                Überraschungen für sich, aber sagt ihr bitte bei allem Bescheid, was ihr planen wollt.
+            </p></div>
+        <div class="anchor" data-state="dance">
+            <h1>Let's Dance</h1>
+            <p>
+                Ihr könnt zuhause schonmal üben, um die Tanzfläche unsicher zu machen!
+            </p>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/client/html/unterkunft.html b/src/client/html/unterkunft.html
index fba6ca1..d7d3428 100644
--- a/src/client/html/unterkunft.html
+++ b/src/client/html/unterkunft.html
@@ -1,5 +1,5 @@
 <div class="flex-container height-100">
-    <div class="grow height-100 overflow-auto">
+    <div class="grow height-100 overflow-auto site-content">
         <h1>Unterkunft</h1>
         <p>
             Wir freuen uns riesig, dass ihr aus nah und fern anreist, um mit uns gemeinsam unseren Hochzeitstag zu
diff --git a/src/client/img/WinterSunrise.ttf b/src/client/img/WinterSunrise.ttf
new file mode 100644
index 0000000..f8c10eb
Binary files /dev/null and b/src/client/img/WinterSunrise.ttf differ
diff --git a/src/client/img/einkreiser.png b/src/client/img/einkreiser.png
new file mode 100644
index 0000000..396af1b
Binary files /dev/null and b/src/client/img/einkreiser.png differ
diff --git a/src/client/img/tagesablauf.jpg b/src/client/img/tagesablauf.jpg
new file mode 100644
index 0000000..562385f
Binary files /dev/null and b/src/client/img/tagesablauf.jpg differ
diff --git a/src/client/img/tagesablauf_godi.jpg b/src/client/img/tagesablauf_godi.jpg
deleted file mode 100644
index 8f41843..0000000
Binary files a/src/client/img/tagesablauf_godi.jpg and /dev/null differ
diff --git a/src/client/index.html b/src/client/index.html
index 2bb328c..cbf497b 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -63,12 +63,12 @@
         <span class="width-100" id="home-img">
             <img src="img/home.jpg" id="" alt="Julia und Sam sehen sich verliebt an und halten dabei händchen &lt;3"
                  class="">
-            <span id="start-text-img-overlay">Hochzeit von <br>Julia und Samuel</span>
+            <h1 id="start-text-img-overlay">Hochzeit von <br/>Julia und Samuel</h1>
         </span>
         <span id="img-spacer"></span>
     </span>
     <div id="scroll-container">
-        <div class="grid-container">
+        <div class="">
             <div class="grid-x grid-padding-x grid-padding-y grow max-height-100">
                 <div class="cell small-12" id="main-content">
                 </div>
diff --git a/src/client/js/index.ts b/src/client/js/index.ts
index 4a2e5b3..f3fc5e4 100644
--- a/src/client/js/index.ts
+++ b/src/client/js/index.ts
@@ -9,53 +9,96 @@ const templates = {
     geschenke: require("../html/geschenke.html"),
 }
 
-async function startPresents(){
-    await new PresentsHandler().showPresents();
-}
 
 const callbacks = {
-    home: () => {},
-    unterkunft: () => {},
-    tagesablauf: () => {},
-    geschenke: startPresents,
+    home: () => {
+    },
+    unterkunft: () => {
+    },
+    tagesablauf: () => {
+        let state = "godi";
+        let scrollTimeout = null;
+        let scrollToView = false;
+
+        const infoImageContainer = document.getElementById("info-image-container");
+        infoImageContainer.querySelectorAll(".circler").forEach(circle => {
+            circle.addEventListener("click", () => {
+                state = (<HTMLElement>circle).dataset["state"];
+                infoImageContainer.dataset["state"] = state;
+                scrollToView = true;
+                document.querySelector(".anchor[data-state='" + state + "']").scrollIntoView({
+                    "behavior": "smooth",
+                    "block": "start"
+                });
+            });
+        });
+
+        const navBar = document.querySelector(".top-bar");
+        const anchors = document.querySelectorAll(".anchor");
+        const margin = navBar.clientHeight+50;
+
+        const observerDown = new IntersectionObserver(entries => {
+            entries.some(entry => {
+                if (!entry.isIntersecting && entry.intersectionRect.top === margin && !scrollToView) {
+                    state = (<HTMLElement>entry.target).dataset["state"];
+                }
+            });
+        }, {threshold: 1, rootMargin: "-" + margin + "px 0px 0px 0px"});
+        // }, {threshold: 1, rootMargin: "-100px 0px 0px 0px"});
+        const observerUp = new IntersectionObserver(entries => {
+            entries.some(entry => {
+                if (entry.isIntersecting && entry.intersectionRect.top === navBar.clientHeight && !scrollToView) {
+                    state = (<HTMLElement>entry.target).dataset["state"];
+                }
+            });
+        }, {threshold: 0.1});
+
+        anchors.forEach(anchor => {
+            observerDown.observe(anchor);
+            observerUp.observe(anchor);
+        })
+
+        document.querySelector("#info-image-container + .site-content").addEventListener("scroll", e => {
+            clearTimeout(scrollTimeout);
+            scrollTimeout = setTimeout(() =>{
+                scrollTimeout = null;
+                infoImageContainer.dataset["state"] = state;
+                scrollToView = false;
+                console.log("stopped scrolling")
+            }, 50);
+        });
+    },
+    geschenke: async () => await new PresentsHandler().showPresents(),
 }
 
 $(document).foundation();
 
 $(function () {
-    const mainDiv = document.getElementById("main-content-container");
     const container = document.getElementById("main-content");
     const img = document.getElementById("home-img-container");
 
     let currentSite = "home";
 
-    //Scroll-Element
-    mainDiv.addEventListener("scroll", e => {
-        console.log("scrolling!", e);
-    });
-
-
     //Navigation
     container.innerHTML = templates.home;
     document.querySelectorAll(".menu li[data-site]").forEach((elem: HTMLElement) => {
         elem.addEventListener("click", () => {
             const oldActive = document.querySelector(".menu .active");
-            if (oldActive){
+            if (oldActive) {
                 oldActive.classList.remove("active");
             }
             elem.classList.add("active");
 
             container.innerHTML = templates[elem.dataset["site"]];
-            if (elem.dataset["img"] === "1"){
+            if (elem.dataset["img"] === "1") {
                 img.classList.remove("hidden");
-            }
-            else {
+            } else {
                 img.classList.add("hidden");
             }
 
             currentSite = elem.dataset["site"];
 
-            if (typeof callbacks[currentSite] === "function"){
+            if (typeof callbacks[currentSite] === "function") {
                 callbacks[currentSite]();
             }
         });
diff --git a/src/client/sass/_tagesablauf.scss b/src/client/sass/_tagesablauf.scss
new file mode 100644
index 0000000..5bec40d
--- /dev/null
+++ b/src/client/sass/_tagesablauf.scss
@@ -0,0 +1,75 @@
+$opacityVisible: 0.7;
+$states: godi fingerfood foto sekt essen spiel dance;
+
+#info-image-container {
+  position: relative;
+
+  img.circler {
+    position: absolute;
+    height: 12%;
+    opacity: 0;
+
+    cursor: pointer;
+
+    //left: 0;
+    &.godi {
+      top: 1.5%;
+      left: 46%;
+    }
+
+    &.fingerfood {
+      left: 9%;
+      top: 12.5%;
+      width: 32%;
+      height: 20%;
+    }
+
+    &.foto {
+      left: 48%;
+      top: 32%;
+      width: 32%;
+    }
+
+    &.sekt {
+      left: 9%;
+      top: 46.5%;
+      width: 32%;
+    }
+
+    &.essen {
+      left: 48%;
+      top: 60%;
+      width: 32%;
+    }
+
+    &.spiel {
+      left: 11%;
+      top: 72.5%;
+      width: 30%;
+    }
+
+    &.dance {
+      left: 48%;
+      top: 86%;
+      width: 29%;
+    }
+  }
+
+  @each $state in $states {
+    &[data-state='#{$state}'] .#{$state} {
+      opacity: $opacityVisible;
+    }
+  }
+}
+
+.anchor{
+  display: block;
+  //margin-bottom: 2rem;
+  padding-top: 1rem;
+  &:first-child{
+    padding-top: 0;
+  };
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
\ No newline at end of file
diff --git a/src/client/sass/index.scss b/src/client/sass/index.scss
index cc748f6..b3a44f4 100644
--- a/src/client/sass/index.scss
+++ b/src/client/sass/index.scss
@@ -8,6 +8,13 @@
 @import "navbar";
 @import "unterkunft";
 @import "geschenke";
+@import "tagesablauf";
+
+@font-face {
+  font-family: "WinterSunrise";
+  src: url("../img/WinterSunrise.ttf");
+}
+
 
 .width-100 {
   width: 100%;
@@ -44,7 +51,7 @@ body {
       height: 100%;
       background: $background-color;
 
-      > .grid-container {
+      > div {
         height: 100%;
 
         > .grid-x {
@@ -74,6 +81,11 @@ a.hidden-link, a.hidden-link:hover{
   color: inherit;
 }
 
+h1 {
+  font-family: WinterSunrise, serif;
+  font-size: 4.5rem;
+}
+
 #home-img-container {
   #home-img {
     width: 100%;
@@ -91,11 +103,12 @@ a.hidden-link, a.hidden-link:hover{
     #start-text-img-overlay {
       position: absolute;
       left: 2rem;
-      top: 50%;
+      bottom: 3rem;
+      //top: 50%;
       color: white;
-      font-family: "Winter Sunrise", Arial, serif;
-      font-size: 4rem;
-      line-height: 2.5;
+      //font-family: "WinterSunrise", Arial, serif;
+      font-size: 8rem;
+      line-height: 1.2;
     }
   }
 
@@ -112,4 +125,7 @@ img.full-screen-width {
 
 .hidden {
   display: none;
+}
+.site-content{
+  padding: 3rem 2rem;
 }
\ No newline at end of file
diff --git a/todo.txt b/todo.txt
index 8a49daf..0c1b5a8 100644
--- a/todo.txt
+++ b/todo.txt
@@ -1,10 +1,10 @@
 - Schriftarten herunterladen & einbinden
     - Bahnschrift für navbar
     - Allgemeine Schriftart
-    - Überschriften, Winter Sunrise, Regular
 - Hotelname bei Unterkunft anpassen
 - E-Mail bei Herzlich Willkommen hinzufügen
 - E-Mailadresse von Melanie - Tagesablauf
 - Tagesablauf Bild-Scroll-Click
 - Geschenkliste synchronisieren
-- Mobilansicht
\ No newline at end of file
+- Mobilansicht
+- WinterSunrise ß bei Spiel und Spaß unter Tagesablauf
\ No newline at end of file