From bfb7b866652bd3fe6d012b5263f404ea34ddabb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alec=20H=C3=B6fler?= <ha@a-hoefler.eu>
Date: Thu, 29 Jul 2021 02:49:31 +0200
Subject: [PATCH] fixes

---
 .gitignore                     |   3 +-
 public/index.html              | 224 ++++++++++++++++++---------------
 public/s/index.html            | 106 ++++++++--------
 public/static/bildquellen.html |  87 ++++++-------
 public/static/datenschutz.html | 186 +++++++++++++++++++++------
 public/static/impressum.html   |  83 ++++++------
 public/templates/footer.html   |  50 ++++----
 public/templates/loader.js     |  22 ++--
 public/templates/nav.html      | 140 ++++++++++-----------
 scss/_page.scss                |  14 +++
 10 files changed, 534 insertions(+), 381 deletions(-)
diff --git a/.gitignore b/.gitignore
index 34d087c..7fd0571 100755
--- a/.gitignore
+++ b/.gitignore
@@ -162,4 +162,5 @@ temp/
 # Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)
 
 .idea/
-public/dist
\ No newline at end of file
+public/dist
+.vscode
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 8a753b8..32e4ed0 100755
--- a/public/index.html
+++ b/public/index.html
@@ -1,140 +1,158 @@
 <html lang="de">
-  <head>
+<head>
     <link
-      rel="stylesheet"
-      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
-      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
-      crossorigin="anonymous"
+            rel="stylesheet"
+            href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
+            integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
+            crossorigin="anonymous"
     />
-    <link rel="stylesheet" href="dist/style.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="dist/style.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>ITbyHF | Profilpage</title>
-    <meta charset="UTF-8" />
+    <meta charset="UTF-8"/>
     <link rel="icon" type="image/png" href="https://cdn.a-hoefler.eu/resources/img/logo-min.png" sizes="1000x1000">
-  </head>
+</head>
 
-  <body onload="loaded()" >
-    <div id="loader-wr">
-      <div id="loader">
-          <p id="loading">Lade</p>
-          <div class="loader-spinner spinner-border text-info" id="loading-circle">
-              <span class="sr-only"></span>
-          </div>
-      </div>
-  </div>
-    <div class="header" id="header">
-      <div class="start-bg-logo">
+<body onload="loaded()">
+<div id="loader-wr">
+    <div id="loader">
+        <p id="loading">Lade</p>
+        <div class="loader-spinner spinner-border text-info" id="loading-circle">
+            <span class="sr-only"></span>
+        </div>
+    </div>
+</div>
+<div class="header" id="header">
+    <div class="start-bg-logo">
         <navbarwr id="navbar_wr"></navbarwr>
         <div class="start-bg-text">
-          <p>ITbyHF</p>
+            <p>ITbyHF</p>
         </div>
-      </div>
-      <div class="stage">
-        <a id="mouse" href="#intro"></a>
-      </div>
     </div>
+    <div class="stage">
+        <a id="mouse" href="#intro"></a>
+    </div>
+</div>
 
-    <div class="content" id="content">
-      <div id="intro">
+<div class="content" id="content">
+    <div id="intro">
         <h1>Über mich</h1>
         <div class="row">
-          <img
-            src="//cdn.a-hoefler.eu/apps/zj3hnjz38r/Logo.png"
-            class="col-xs-10"
-          />
-          <span id="pp-text-intro" class="col-xs-10"></span>
+            <img
+                    src="//cdn.a-hoefler.eu/apps/zj3hnjz38r/Logo.png"
+                    class="col-xs-10"
+                    alt="Logo"/>
+            <span id="pp-text-intro" class="col-xs-10"></span>
         </div>
-      </div>
-      <!--END #intro box-->
+    </div>
+    <!--END #intro box-->
 
-      <br clear="all" />
+    <br/>
 
-      <div id="skills">
+    <div id="skills">
         <h1>Skills</h1>
         <div id="skill-box" class="row"></div>
-      </div>
-      <!--END #skills-->
+    </div>
+    <!--END #skills-->
 
-      <br clear="all" />
+    <br/>
 
-      <div class="recentPosts">
+    <div class="recentPosts">
         <h1>Blog</h1>
         <div id="recentposts-wr" class="row recommended_posts"></div>
-      </div>
+    </div>
 
-      <br clear="all" />
+    <br/>
 
-      <div id="contact">
+    <div id="contact">
 
         <h1>Kontakt</h1>
-<br><br>
+        <br><br>
         <div class="form-group">
-          <label for="contactEmail" class="col-sm-2 control-label">Email</label>
-          <div class="col-sm-10">
-            <input
-              type="email"
-              class="form-control"
-              id="contactEmail"
-              placeholder="max@mustermann.net"
-              required
-            />
-          </div>
-        </div>
-        <div class="form-group">
-          <label for="contactTitle" class="col-sm-2 control-label">Titel</label>
-          <div class="col-sm-10">
-            <input
-              type="text"
-              class="form-control"
-              id="contactTitle"
-              placeholder="Sehr wichtig!"
-              required
-            />
-          </div>
-        </div>
-        <div class="form-group">
-          <label for="contactText" class="col-sm-2 control-label">Text</label>
-          <div class="col-sm-10">
-            <textarea
-              class="form-control"
-              rows="5"
-              id="contactText"
-              placeholder="Lorem 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."
-            ></textarea>
-          </div>
-        </div>
-<!--      //TODO
-          <div class="form-group">
-            <label for="contactSendResponse" class="col-sm-2 control-label">Bestätigung senden</label>
+            <label for="contactEmail" class="col-sm-2 control-label">Email</label>
             <div class="col-sm-10">
-                <label><input type="checkbox" id="contactSendResponse" /></label>
+                <input
+                        type="email"
+                        class="form-control"
+                        id="contactEmail"
+                        placeholder="max@mustermann.net"
+                        required
+                />
             </div>
-          </div>
         </div>
--->
         <div class="form-group">
-          <div class="col-sm-offset-2 col-sm-10">
-            <button type="submit" class="btn btn-default" id="contactSubmit">Absenden</button>
-          </div>
+            <label for="contactTitle" class="col-sm-2 control-label">Titel</label>
+            <div class="col-sm-10">
+                <input
+                        type="text"
+                        class="form-control"
+                        id="contactTitle"
+                        placeholder="Sehr wichtig!"
+                        required
+                />
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="contactText" class="col-sm-2 control-label">Text</label>
+            <div class="col-sm-10">
+            <textarea
+                    class="form-control"
+                    rows="5"
+                    id="contactText"
+                    placeholder="Lorem 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."
+            ></textarea>
+            </div>
+        </div>
+        <!--      //TODO
+                  <div class="form-group">
+                    <label for="contactSendResponse" class="col-sm-2 control-label">Bestätigung senden</label>
+                    <div class="col-sm-10">
+                        <label><input type="checkbox" id="contactSendResponse" /></label>
+                    </div>
+                  </div>
+                </div>
+        -->
+        <div class="form-group">
+            <div class="col-sm-offset-2 col-sm-10">
+                <button type="submit" class="btn btn-default" id="contactSubmit">Absenden</button>
+            </div>
         </div>
         <span id="contactStatus"></span>
-      </div>
-      <!--END #contact-->
-
-      <br clear="all" />
+    </div>
+    <!--END #contact-->
+</div>
+<br/>
 
 <div id="bottom"></div>
 
-    <script>
-      var page = "start";
-    </script>
-    <script src="dist/jquery.js"></script>
-    <script src="dist/index.js"></script>
-    <script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/cookie.js"></script>
-    <script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/bootstrap.min.js"></script>
-    <style>
-      .header,.content{display:none;}
-    </style>
-    <script src="/templates/loader.js"></script>
-  </body>
+<!-- START Cookie-Alert -->
+<div class="alert text-center cookiealert" role="alert">
+      <span>
+        &#x1F36A; Um die Experience zu verbessern, werden Cookies verwendet.
+      </span>
+    <a href="https://de.wikipedia.org/wiki/HTTP-Cookie" target="_blank"
+    >Mehr</a
+    >
+
+    <button type="button" class="btn btn-primary btn-sm acceptcookies">
+        &times;
+    </button>
+</div>
+<!-- END Cookie-Alert -->
+
+
+<script>
+    const page = "start";
+</script>
+<script src="dist/jquery.js"></script>
+<script src="dist/index.js"></script>
+<script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/cookie.js"></script>
+<script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/bootstrap.min.js"></script>
+<style>
+    .header, #content,#bottom {
+        display: none;
+    }
+</style>
+<script src="./templates/loader.js"></script>
+</body>
 </html>
diff --git a/public/s/index.html b/public/s/index.html
index 71868d2..196d747 100644
--- a/public/s/index.html
+++ b/public/s/index.html
@@ -1,78 +1,80 @@
 <html lang="de">
-  <head>
+<head>
     <link
-      rel="stylesheet"
-      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
-      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
-      crossorigin="anonymous"
+            rel="stylesheet"
+            href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
+            integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
+            crossorigin="anonymous"
     />
-    <link rel="stylesheet" href="../dist/style.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datenschutz - ITbyHF | Profilpage</title>
-    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="../dist/style.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Blog - ITbyHF | Profilpage</title>
+    <meta charset="UTF-8"/>
     <link rel="icon" type="image/png" href="https://cdn.a-hoefler.eu/resources/img/logo-min.png" sizes="1000x1000">
-  </head>
+</head>
 
 
-  <body onload="loaded()" >
-    <div id="loader-wr">
-      <div id="loader">
-          <p id="loading">Lade</p>
-          <div class="loader-spinner spinner-border text-info" id="loading-circle">
-              <span class="sr-only"></span>
-          </div>
-      </div>
-  </div>
-  
-  <div class="header" id="header">
-      <div class="start-bg-logo">
+<body onload="loaded()">
+<div id="loader-wr">
+    <div id="loader">
+        <p id="loading">Lade</p>
+        <div class="loader-spinner spinner-border text-info" id="loading-circle">
+            <span class="sr-only"></span>
+        </div>
+    </div>
+</div>
+
+<div class="header" id="header">
+    <div class="start-bg-logo">
         <navbarwr id="navbar_wr"></navbarwr>
 
         <div class="start-bg-text">
-          <p id="postTitle"></p>
+            <p id="postTitle"></p>
         </div>
-      </div>
-      <div class="stage">
-        <a id="mouse" href="#content"></a>
-      </div>
     </div>
+    <div class="stage">
+        <a id="mouse" href="#content"></a>
+    </div>
+</div>
 
-    <div class="content" id="content">
+<div class="content" id="content">
     <h2 id="postTitle2"></h2>
     <p id="postSummary"></p><br>
     <p id="postText"></p>
 
-    </div>
-    <!--END .content-->
+</div>
+<!--END .content-->
 
-    <!-- START Cookie-Alert -->
-    <div class="alert text-center cookiealert" role="alert">
+<!-- START Cookie-Alert -->
+<div class="alert text-center cookiealert" role="alert">
       <span>
         &#x1F36A; Um die Experience zu verbessern, werden Cookies verwendet.
       </span>
-      <a href="https://de.wikipedia.org/wiki/HTTP-Cookie" target="_blank"
-        >Mehr</a
-      >
+    <a href="https://de.wikipedia.org/wiki/HTTP-Cookie" target="_blank"
+    >Mehr</a
+    >
 
-      <button type="button" class="btn btn-primary btn-sm acceptcookies">
+    <button type="button" class="btn btn-primary btn-sm acceptcookies">
         &times;
-      </button>
-    </div>
-    <!-- END Cookie-Alert -->
+    </button>
+</div>
+<!-- END Cookie-Alert -->
 
 
-    <div id="bottom"></div>
+<div id="bottom"></div>
 
-    <script>
-      var page = "blogPost";
-    </script>
-    <script src="/dist/jquery.js"></script>
-    <script src="/dist/index.js"></script>
-    <script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/cookie.js"></script>
-    <script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/bootstrap.min.js"></script>
-    <style>
-      .header,.content{display:none;}
-    </style>
-    <script src="/templates/loader.js"></script>
-  </body>
+<script>
+    const page = "blogPost";
+</script>
+<script src="../dist/jquery.js"></script>
+<script src="../dist/index.js"></script>
+<script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/cookie.js"></script>
+<script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/bootstrap.min.js"></script>
+<style>
+    .header, .content {
+        display: none;
+    }
+</style>
+<script src="../templates/loader.js"></script>
+</body>
 </html>
diff --git a/public/static/bildquellen.html b/public/static/bildquellen.html
index f3a1162..02c5f95 100644
--- a/public/static/bildquellen.html
+++ b/public/static/bildquellen.html
@@ -1,62 +1,65 @@
 <html lang="de">
-  <head>
+<head>
     <link
-      rel="stylesheet"
-      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
-      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
-      crossorigin="anonymous"
+            rel="stylesheet"
+            href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
+            integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
+            crossorigin="anonymous"
     />
-    <link rel="stylesheet" href="../dist/style.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../dist/style.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Bildquellen - ITbyHF | Profilpage</title>
-    <meta charset="UTF-8" />
+    <meta charset="UTF-8"/>
     <link rel="icon" type="image/png" href="https://cdn.a-hoefler.eu/resources/img/logo-min.png" sizes="1000x1000">
-  </head>
+</head>
 
-    
-    <body onload="loaded()" >
-      <div id="loader-wr">
-        <div id="loader">
-            <p id="loading">Lade</p>
-            <div class="loader-spinner spinner-border text-info" id="loading-circle">
-                <span class="sr-only"></span>
-            </div>
+
+<body onload="loaded()">
+<div id="loader-wr">
+    <div id="loader">
+        <p id="loading">Lade</p>
+        <div class="loader-spinner spinner-border text-info" id="loading-circle">
+            <span class="sr-only"></span>
         </div>
     </div>
+</div>
 
-    <div class="header" id="header">
-      <div class="start-bg-logo">
+<div class="header" id="header">
+    <div class="start-bg-logo">
         <navbarwr id="navbar_wr"></navbarwr>
 
         <div class="start-bg-text">
-          <p>Bildquellen</p>
+            <p>Bildquellen</p>
         </div>
-      </div>
-      <div class="stage">
+    </div>
+    <div class="stage">
         <a id="mouse" href="#content"></a>
-      </div>
     </div>
+</div>
 
-    <div class="bildquellen" id="content">
-        <ul>
-            <li><p><b>Hintergrundbild (oben): </b>Markus Spiske / <a href="https://unsplash.com/photos/jG8nlwLRZTM">https://unsplash.com/photos/jG8nlwLRZTM</a></p></li>
-        </ul>
-    </div>
-    </div>
-    <!--END .content-->
+<div class="bildquellen" id="content">
+    <ul>
+        <li><p><b>Hintergrundbild (oben): </b>Markus Spiske / <a href="https://unsplash.com/photos/jG8nlwLRZTM">https://unsplash.com/photos/jG8nlwLRZTM</a>
+        </p></li>
+    </ul>
+</div>
+<!--END .content-->
 
-    <div id="bottom"></div>
+<div id="bottom"></div>
 
 
-    <script>
-      var page = "bildquellen";
-    </script>
-    <script src="/dist/jquery.js"></script>
-    <script src="/dist/index.js"></script>
-    <script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/cookie.js"></script>
-    <script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/bootstrap.min.js"></script>
-    <style>
-      .header,.content{display:none;}
-    </style>
-    <script src="/templates/loader.js"></script>  </body>
+<script>
+    const page = "bildquellen";
+</script>
+<script src="../dist/jquery.js"></script>
+<script src="../dist/index.js"></script>
+<script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/cookie.js"></script>
+<script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/bootstrap.min.js"></script>
+<style>
+    #content, .header {
+        display: none;
+    }
+</style>
+<script src="../templates/loader.js"></script>
+</body>
 </html>
diff --git a/public/static/datenschutz.html b/public/static/datenschutz.html
index b987d98..a125511 100644
--- a/public/static/datenschutz.html
+++ b/public/static/datenschutz.html
@@ -1,56 +1,164 @@
 <html lang="de">
-  <head>
+<head>
     <link
-      rel="stylesheet"
-      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
-      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
-      crossorigin="anonymous"
+            rel="stylesheet"
+            href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
+            integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
+            crossorigin="anonymous"
     />
-    <link rel="stylesheet" href="../dist/style.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../dist/style.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Datenschutz - ITbyHF | Profilpage</title>
-    <meta charset="UTF-8" />
+    <meta charset="UTF-8"/>
     <link rel="icon" type="image/png" href="https://cdn.a-hoefler.eu/resources/img/logo-min.png" sizes="1000x1000">
-  </head>
-    <body onload="loaded()" >
-      <div id="loader-wr">
-        <div id="loader">
-            <p id="loading">Lade</p>
-            <div class="loader-spinner spinner-border text-info" id="loading-circle">
-                <span class="sr-only"></span>
-            </div>
+</head>
+<body onload="loaded()">
+<div id="loader-wr">
+    <div id="loader">
+        <p id="loading">Lade</p>
+        <div class="loader-spinner spinner-border text-info" id="loading-circle">
+            <span class="sr-only"></span>
         </div>
     </div>
+</div>
 
-    <div class="header" id="header">
-      <div class="start-bg-logo">
+<div class="header" id="header">
+    <div class="start-bg-logo">
         <navbarwr id="navbar_wr"></navbarwr>
         <div class="start-bg-text">
-          <p>Datenschutz</p>
+            <p>Datenschutz</p>
         </div>
-      </div>
-      <div class="stage">
+    </div>
+    <div class="stage">
         <a id="mouse" href="#content"></a>
-      </div>
     </div>
+</div>
 
-    <div class="datenschutz" id="content">
-            <h3 id="dsg-general-intro"> </h3><p>Diese Datenschutzerklärung klärt Sie über die Art, den Umfang und Zweck der Verarbeitung von personenbezogenen Daten (nachfolgend kurz „Daten“) innerhalb unseres Onlineangebotes und der mit ihm verbundenen Webseiten, Funktionen und Inhalte sowie externen Onlinepräsenzen, wie z.B. unser Social Media Profile auf (nachfolgend gemeinsam bezeichnet als „Onlineangebot“). Im Hinblick auf die verwendeten Begrifflichkeiten, wie z.B. „Verarbeitung“ oder „Verantwortlicher“ verweisen wir auf die Definitionen im Art. 4 der Datenschutzgrundverordnung (DSGVO).</p><h3 id="dsg-general-datatype">Arten der verarbeiteten Daten:</h3><p>- Bestandsdaten (z.B., Namen, Adressen).<br />- Kontaktdaten (z.B., E-Mail, Telefonnummern).<br />- Inhaltsdaten (z.B., Texteingaben, Fotografien, Videos).<br />- Nutzungsdaten (z.B., besuchte Webseiten, Interesse an Inhalten, Zugriffszeiten).<br />- Meta-/Kommunikationsdaten (z.B., Geräte-Informationen, IP-Adressen).</p><h3 id="dsg-general-datasubjects">Kategorien betroffener Personen</h3><p>Besucher und Nutzer des Onlineangebotes (Nachfolgend bezeichnen wir die betroffenen Personen zusammenfassend auch als „Nutzer“).</p><h3 id="dsg-general-purpose">Zweck der Verarbeitung</h3><p>- Zurverfügungstellung des Onlineangebotes, seiner Funktionen und Inhalte.<br />- Beantwortung von Kontaktanfragen und Kommunikation mit Nutzern.<br />- Sicherheitsmaßnahmen.<br />- Reichweitenmessung/Marketing</p><h3 id="dsg-general-terms">Verwendete Begrifflichkeiten</h3><p>„Personenbezogene Daten“ sind alle Informationen, die sich auf eine identifizierte oder identifizierbare natürliche Person (im Folgenden „betroffene Person“) beziehen; als identifizierbar wird eine natürliche Person angesehen, die direkt oder indirekt, insbesondere mittels Zuordnung zu einer Kennung wie einem Namen, zu einer Kennnummer, zu Standortdaten, zu einer Online-Kennung (z.B. Cookie) oder zu einem oder mehreren besonderen Merkmalen identifiziert werden kann, die Ausdruck der physischen, physiologischen, genetischen, psychischen, wirtschaftlichen, kulturellen oder sozialen Identität dieser natürlichen Person sind.</p><p>„Verarbeitung“ ist jeder mit oder ohne Hilfe automatisierter Verfahren ausgeführte Vorgang oder jede solche Vorgangsreihe im Zusammenhang mit personenbezogenen Daten. Der Begriff reicht weit und umfasst praktisch jeden Umgang mit Daten.</p><p>„Pseudonymisierung“ die Verarbeitung personenbezogener Daten in einer Weise, dass die personenbezogenen Daten ohne Hinzuziehung zusätzlicher Informationen nicht mehr einer spezifischen betroffenen Person zugeordnet werden können, sofern diese zusätzlichen Informationen gesondert aufbewahrt werden und technischen und organisatorischen Maßnahmen unterliegen, die gewährleisten, dass die personenbezogenen Daten nicht einer identifizierten oder identifizierbaren natürlichen Person zugewiesen werden.</p><p>„Profiling“ jede Art der automatisierten Verarbeitung personenbezogener Daten, die darin besteht, dass diese personenbezogenen Daten verwendet werden, um bestimmte persönliche Aspekte, die sich auf eine natürliche Person beziehen, zu bewerten, insbesondere um Aspekte bezüglich Arbeitsleistung, wirtschaftliche Lage, Gesundheit, persönliche Vorlieben, Interessen, Zuverlässigkeit, Verhalten, Aufenthaltsort oder Ortswechsel dieser natürlichen Person zu analysieren oder vorherzusagen.</p><p>Als „Verantwortlicher“ wird die natürliche oder juristische Person, Behörde, Einrichtung oder andere Stelle, die allein oder gemeinsam mit anderen über die Zwecke und Mittel der Verarbeitung von personenbezogenen Daten entscheidet, bezeichnet.</p><p>„Auftragsverarbeiter“ eine natürliche oder juristische Person, Behörde, Einrichtung oder andere Stelle, die personenbezogene Daten im Auftrag des Verantwortlichen verarbeitet.</p><h3 id="dsg-general-legalbasis">Maßgebliche Rechtsgrundlagen</h3><p>Nach Maßgabe des Art. 13 DSGVO teilen wir Ihnen die Rechtsgrundlagen unserer Datenverarbeitungen mit. Sofern die Rechtsgrundlage in der Datenschutzerklärung nicht genannt wird, gilt Folgendes: Die Rechtsgrundlage für die Einholung von Einwilligungen ist Art. 6 Abs. 1 lit. a und Art. 7 DSGVO, die Rechtsgrundlage für die Verarbeitung zur Erfüllung unserer Leistungen und Durchführung vertraglicher Maßnahmen sowie Beantwortung von Anfragen ist Art. 6 Abs. 1 lit. b DSGVO, die Rechtsgrundlage für die Verarbeitung zur Erfüllung unserer rechtlichen Verpflichtungen ist Art. 6 Abs. 1 lit. c DSGVO, und die Rechtsgrundlage für die Verarbeitung zur Wahrung unserer berechtigten Interessen ist Art. 6 Abs. 1 lit. f DSGVO. Für den Fall, dass lebenswichtige Interessen der betroffenen Person oder einer anderen natürlichen Person eine Verarbeitung personenbezogener Daten erforderlich machen, dient Art. 6 Abs. 1 lit. d DSGVO als Rechtsgrundlage.</p><h3 id="dsg-general-securitymeasures">Sicherheitsmaßnahmen</h3><p>Wir treffen nach Maßgabe des Art. 32 DSGVO unter Berücksichtigung des Stands der Technik, der Implementierungskosten und der Art, des Umfangs, der Umstände und der Zwecke der Verarbeitung sowie der unterschiedlichen Eintrittswahrscheinlichkeit und Schwere des Risikos für die Rechte und Freiheiten natürlicher Personen, geeignete technische und organisatorische Maßnahmen, um ein dem Risiko angemessenes Schutzniveau zu gewährleisten.</p><p>Zu den Maßnahmen gehören insbesondere die Sicherung der Vertraulichkeit, Integrität und Verfügbarkeit von Daten durch Kontrolle des physischen Zugangs zu den Daten, als auch des sie betreffenden Zugriffs, der Eingabe, Weitergabe, der Sicherung der Verfügbarkeit und ihrer Trennung. Des Weiteren haben wir Verfahren eingerichtet, die eine Wahrnehmung von Betroffenenrechten, Löschung von Daten und Reaktion auf Gefährdung der Daten gewährleisten. Ferner berücksichtigen wir den Schutz personenbezogener Daten bereits bei der Entwicklung, bzw. Auswahl von Hardware, Software sowie Verfahren, entsprechend dem Prinzip des Datenschutzes durch Technikgestaltung und durch datenschutzfreundliche Voreinstellungen (Art. 25 DSGVO).</p><h3 id="dsg-general-coprocessing">Zusammenarbeit mit Auftragsverarbeitern und Dritten</h3><p>Sofern wir im Rahmen unserer Verarbeitung Daten gegenüber anderen Personen und Unternehmen (Auftragsverarbeitern oder Dritten) offenbaren, sie an diese übermitteln oder ihnen sonst Zugriff auf die Daten gewähren, erfolgt dies nur auf Grundlage einer gesetzlichen Erlaubnis (z.B. wenn eine Übermittlung der Daten an Dritte, wie an Zahlungsdienstleister, gem. Art. 6 Abs. 1 lit. b DSGVO zur Vertragserfüllung erforderlich ist), Sie eingewilligt haben, eine rechtliche Verpflichtung dies vorsieht oder auf Grundlage unserer berechtigten Interessen (z.B. beim Einsatz von Beauftragten, Webhostern, etc.).</p><p>Sofern wir Dritte mit der Verarbeitung von Daten auf Grundlage eines sog. „Auftragsverarbeitungsvertrages“ beauftragen, geschieht dies auf Grundlage des Art. 28 DSGVO.</p><h3 id="dsg-general-thirdparty">Übermittlungen in Drittländer</h3><p>Sofern wir Daten in einem Drittland (d.h. außerhalb der Europäischen Union (EU) oder des Europäischen Wirtschaftsraums (EWR)) verarbeiten oder dies im Rahmen der Inanspruchnahme von Diensten Dritter oder Offenlegung, bzw. Übermittlung von Daten an Dritte geschieht, erfolgt dies nur, wenn es zur Erfüllung unserer (vor)vertraglichen Pflichten, auf Grundlage Ihrer Einwilligung, aufgrund einer rechtlichen Verpflichtung oder auf Grundlage unserer berechtigten Interessen geschieht. Vorbehaltlich gesetzlicher oder vertraglicher Erlaubnisse, verarbeiten oder lassen wir die Daten in einem Drittland nur beim Vorliegen der besonderen Voraussetzungen der Art. 44 ff. DSGVO verarbeiten. D.h. die Verarbeitung erfolgt z.B. auf Grundlage besonderer Garantien, wie der offiziell anerkannten Feststellung eines der EU entsprechenden Datenschutzniveaus (z.B. für die USA durch das „Privacy Shield“) oder Beachtung offiziell anerkannter spezieller vertraglicher Verpflichtungen (so genannte „Standardvertragsklauseln“).</p><h3 id="dsg-general-rightssubject">Rechte der betroffenen Personen</h3><p>Sie haben das Recht, eine Bestätigung darüber zu verlangen, ob betreffende Daten verarbeitet werden und auf Auskunft über diese Daten sowie auf weitere Informationen und Kopie der Daten entsprechend Art. 15 DSGVO.</p><p>Sie haben entsprechend. Art. 16 DSGVO das Recht, die Vervollständigung der Sie betreffenden Daten oder die Berichtigung der Sie betreffenden unrichtigen Daten zu verlangen.</p><p>Sie haben nach Maßgabe des Art. 17 DSGVO das Recht zu verlangen, dass betreffende Daten unverzüglich gelöscht werden, bzw. alternativ nach Maßgabe des Art. 18 DSGVO eine Einschränkung der Verarbeitung der Daten zu verlangen.</p><p>Sie haben das Recht zu verlangen, dass die Sie betreffenden Daten, die Sie uns bereitgestellt haben nach Maßgabe des Art. 20 DSGVO zu erhalten und deren Übermittlung an andere Verantwortliche zu fordern.</p><p>Sie haben ferner gem. Art. 77 DSGVO das Recht, eine Beschwerde bei der zuständigen Aufsichtsbehörde einzureichen.</p><h3 id="dsg-general-revokeconsent">Widerrufsrecht</h3><p>Sie haben das Recht, erteilte Einwilligungen gem. Art. 7 Abs. 3 DSGVO mit Wirkung für die Zukunft zu widerrufen</p><h3 id="dsg-general-object">Widerspruchsrecht</h3><p>Sie können der künftigen Verarbeitung der Sie betreffenden Daten nach Maßgabe des Art. 21 DSGVO jederzeit widersprechen. Der Widerspruch kann insbesondere gegen die Verarbeitung für Zwecke der Direktwerbung erfolgen.</p><h3 id="dsg-general-cookies">Cookies und Widerspruchsrecht bei Direktwerbung</h3><p>Als „Cookies“ werden kleine Dateien bezeichnet, die auf Rechnern der Nutzer gespeichert werden. Innerhalb der Cookies können unterschiedliche Angaben gespeichert werden. Ein Cookie dient primär
-    </div>
-    </div>
-    <!--END .content-->
+<div class="datenschutz" id="content">
+    <h3 id="dsg-general-intro"></h3>
+    <p>Diese Datenschutzerklärung klärt Sie über die Art, den Umfang und Zweck der Verarbeitung von personenbezogenen
+        Daten (nachfolgend kurz „Daten“) innerhalb unseres Onlineangebotes und der mit ihm verbundenen Webseiten,
+        Funktionen und Inhalte sowie externen Onlinepräsenzen, wie z.B. unser Social Media Profile auf (nachfolgend
+        gemeinsam bezeichnet als „Onlineangebot“). Im Hinblick auf die verwendeten Begrifflichkeiten, wie z.B.
+        „Verarbeitung“ oder „Verantwortlicher“ verweisen wir auf die Definitionen im Art. 4 der
+        Datenschutzgrundverordnung (DSGVO).</p>
+    <h3 id="dsg-general-datatype">Arten der verarbeiteten Daten:</h3>
+    <p>- Bestandsdaten (z.B., Namen, Adressen).<br/>- Kontaktdaten (z.B., E-Mail, Telefonnummern).<br/>- Inhaltsdaten
+        (z.B., Texteingaben, Fotografien, Videos).<br/>- Nutzungsdaten (z.B., besuchte Webseiten, Interesse an Inhalten,
+        Zugriffszeiten).<br/>- Meta-/Kommunikationsdaten (z.B., Geräte-Informationen, IP-Adressen).</p>
+    <h3 id="dsg-general-datasubjects">Kategorien betroffener Personen</h3>
+    <p>Besucher und Nutzer des Onlineangebotes (Nachfolgend bezeichnen wir die betroffenen Personen zusammenfassend auch
+        als „Nutzer“).</p>
+    <h3 id="dsg-general-purpose">Zweck der Verarbeitung</h3>
+    <p>- Zurverfügungstellung des Onlineangebotes, seiner Funktionen und Inhalte.<br/>- Beantwortung von Kontaktanfragen
+        und Kommunikation mit Nutzern.<br/>- Sicherheitsmaßnahmen.<br/>- Reichweitenmessung/Marketing</p>
+    <h3 id="dsg-general-terms">Verwendete Begrifflichkeiten</h3>
+    <p>„Personenbezogene Daten“ sind alle Informationen, die sich auf eine identifizierte oder identifizierbare
+        natürliche Person (im Folgenden „betroffene Person“) beziehen; als identifizierbar wird eine natürliche Person
+        angesehen, die direkt oder indirekt, insbesondere mittels Zuordnung zu einer Kennung wie einem Namen, zu einer
+        Kennnummer, zu Standortdaten, zu einer Online-Kennung (z.B. Cookie) oder zu einem oder mehreren besonderen
+        Merkmalen identifiziert werden kann, die Ausdruck der physischen, physiologischen, genetischen, psychischen,
+        wirtschaftlichen, kulturellen oder sozialen Identität dieser natürlichen Person sind.</p>
+    <p>„Verarbeitung“ ist jeder mit oder ohne Hilfe automatisierter Verfahren ausgeführte Vorgang oder jede solche
+        Vorgangsreihe im Zusammenhang mit personenbezogenen Daten. Der Begriff reicht weit und umfasst praktisch jeden
+        Umgang mit Daten.</p>
+    <p>„Pseudonymisierung“ die Verarbeitung personenbezogener Daten in einer Weise, dass die personenbezogenen Daten
+        ohne Hinzuziehung zusätzlicher Informationen nicht mehr einer spezifischen betroffenen Person zugeordnet werden
+        können, sofern diese zusätzlichen Informationen gesondert aufbewahrt werden und technischen und
+        organisatorischen Maßnahmen unterliegen, die gewährleisten, dass die personenbezogenen Daten nicht einer
+        identifizierten oder identifizierbaren natürlichen Person zugewiesen werden.</p>
+    <p>„Profiling“ jede Art der automatisierten Verarbeitung personenbezogener Daten, die darin besteht, dass diese
+        personenbezogenen Daten verwendet werden, um bestimmte persönliche Aspekte, die sich auf eine natürliche Person
+        beziehen, zu bewerten, insbesondere um Aspekte bezüglich Arbeitsleistung, wirtschaftliche Lage, Gesundheit,
+        persönliche Vorlieben, Interessen, Zuverlässigkeit, Verhalten, Aufenthaltsort oder Ortswechsel dieser
+        natürlichen Person zu analysieren oder vorherzusagen.</p>
+    <p>Als „Verantwortlicher“ wird die natürliche oder juristische Person, Behörde, Einrichtung oder andere Stelle, die
+        allein oder gemeinsam mit anderen über die Zwecke und Mittel der Verarbeitung von personenbezogenen Daten
+        entscheidet, bezeichnet.</p>
+    <p>„Auftragsverarbeiter“ eine natürliche oder juristische Person, Behörde, Einrichtung oder andere Stelle, die
+        personenbezogene Daten im Auftrag des Verantwortlichen verarbeitet.</p>
+    <h3 id="dsg-general-legalbasis">Maßgebliche Rechtsgrundlagen</h3>
+    <p>Nach Maßgabe des Art. 13 DSGVO teilen wir Ihnen die Rechtsgrundlagen unserer Datenverarbeitungen mit. Sofern die
+        Rechtsgrundlage in der Datenschutzerklärung nicht genannt wird, gilt Folgendes: Die Rechtsgrundlage für die
+        Einholung von Einwilligungen ist Art. 6 Abs. 1 lit. a und Art. 7 DSGVO, die Rechtsgrundlage für die Verarbeitung
+        zur Erfüllung unserer Leistungen und Durchführung vertraglicher Maßnahmen sowie Beantwortung von Anfragen ist
+        Art. 6 Abs. 1 lit. b DSGVO, die Rechtsgrundlage für die Verarbeitung zur Erfüllung unserer rechtlichen
+        Verpflichtungen ist Art. 6 Abs. 1 lit. c DSGVO, und die Rechtsgrundlage für die Verarbeitung zur Wahrung unserer
+        berechtigten Interessen ist Art. 6 Abs. 1 lit. f DSGVO. Für den Fall, dass lebenswichtige Interessen der
+        betroffenen Person oder einer anderen natürlichen Person eine Verarbeitung personenbezogener Daten erforderlich
+        machen, dient Art. 6 Abs. 1 lit. d DSGVO als Rechtsgrundlage.</p>
+    <h3 id="dsg-general-securitymeasures">Sicherheitsmaßnahmen</h3>
+    <p>Wir treffen nach Maßgabe des Art. 32 DSGVO unter Berücksichtigung des Stands der Technik, der
+        Implementierungskosten und der Art, des Umfangs, der Umstände und der Zwecke der Verarbeitung sowie der
+        unterschiedlichen Eintrittswahrscheinlichkeit und Schwere des Risikos für die Rechte und Freiheiten natürlicher
+        Personen, geeignete technische und organisatorische Maßnahmen, um ein dem Risiko angemessenes Schutzniveau zu
+        gewährleisten.</p>
+    <p>Zu den Maßnahmen gehören insbesondere die Sicherung der Vertraulichkeit, Integrität und Verfügbarkeit von Daten
+        durch Kontrolle des physischen Zugangs zu den Daten, als auch des sie betreffenden Zugriffs, der Eingabe,
+        Weitergabe, der Sicherung der Verfügbarkeit und ihrer Trennung. Des Weiteren haben wir Verfahren eingerichtet,
+        die eine Wahrnehmung von Betroffenenrechten, Löschung von Daten und Reaktion auf Gefährdung der Daten
+        gewährleisten. Ferner berücksichtigen wir den Schutz personenbezogener Daten bereits bei der Entwicklung, bzw.
+        Auswahl von Hardware, Software sowie Verfahren, entsprechend dem Prinzip des Datenschutzes durch
+        Technikgestaltung und durch datenschutzfreundliche Voreinstellungen (Art. 25 DSGVO).</p>
+    <h3 id="dsg-general-coprocessing">Zusammenarbeit mit Auftragsverarbeitern und Dritten</h3>
+    <p>Sofern wir im Rahmen unserer Verarbeitung Daten gegenüber anderen Personen und Unternehmen (Auftragsverarbeitern
+        oder Dritten) offenbaren, sie an diese übermitteln oder ihnen sonst Zugriff auf die Daten gewähren, erfolgt dies
+        nur auf Grundlage einer gesetzlichen Erlaubnis (z.B. wenn eine Übermittlung der Daten an Dritte, wie an
+        Zahlungsdienstleister, gem. Art. 6 Abs. 1 lit. b DSGVO zur Vertragserfüllung erforderlich ist), Sie eingewilligt
+        haben, eine rechtliche Verpflichtung dies vorsieht oder auf Grundlage unserer berechtigten Interessen (z.B. beim
+        Einsatz von Beauftragten, Webhostern, etc.).</p>
+    <p>Sofern wir Dritte mit der Verarbeitung von Daten auf Grundlage eines sog. „Auftragsverarbeitungsvertrages“
+        beauftragen, geschieht dies auf Grundlage des Art. 28 DSGVO.</p>
+    <h3 id="dsg-general-thirdparty">Übermittlungen in Drittländer</h3>
+    <p>Sofern wir Daten in einem Drittland (d.h. außerhalb der Europäischen Union (EU) oder des Europäischen
+        Wirtschaftsraums (EWR)) verarbeiten oder dies im Rahmen der Inanspruchnahme von Diensten Dritter oder
+        Offenlegung, bzw. Übermittlung von Daten an Dritte geschieht, erfolgt dies nur, wenn es zur Erfüllung unserer
+        (vor)vertraglichen Pflichten, auf Grundlage Ihrer Einwilligung, aufgrund einer rechtlichen Verpflichtung oder
+        auf Grundlage unserer berechtigten Interessen geschieht. Vorbehaltlich gesetzlicher oder vertraglicher
+        Erlaubnisse, verarbeiten oder lassen wir die Daten in einem Drittland nur beim Vorliegen der besonderen
+        Voraussetzungen der Art. 44 ff. DSGVO verarbeiten. D.h. die Verarbeitung erfolgt z.B. auf Grundlage besonderer
+        Garantien, wie der offiziell anerkannten Feststellung eines der EU entsprechenden Datenschutzniveaus (z.B. für
+        die USA durch das „Privacy Shield“) oder Beachtung offiziell anerkannter spezieller vertraglicher
+        Verpflichtungen (so genannte „Standardvertragsklauseln“).</p>
+    <h3 id="dsg-general-rightssubject">Rechte der betroffenen Personen</h3>
+    <p>Sie haben das Recht, eine Bestätigung darüber zu verlangen, ob betreffende Daten verarbeitet werden und auf
+        Auskunft über diese Daten sowie auf weitere Informationen und Kopie der Daten entsprechend Art. 15 DSGVO.</p>
+    <p>Sie haben entsprechend. Art. 16 DSGVO das Recht, die Vervollständigung der Sie betreffenden Daten oder die
+        Berichtigung der Sie betreffenden unrichtigen Daten zu verlangen.</p>
+    <p>Sie haben nach Maßgabe des Art. 17 DSGVO das Recht zu verlangen, dass betreffende Daten unverzüglich gelöscht
+        werden, bzw. alternativ nach Maßgabe des Art. 18 DSGVO eine Einschränkung der Verarbeitung der Daten zu
+        verlangen.</p>
+    <p>Sie haben das Recht zu verlangen, dass die Sie betreffenden Daten, die Sie uns bereitgestellt haben nach Maßgabe
+        des Art. 20 DSGVO zu erhalten und deren Übermittlung an andere Verantwortliche zu fordern.</p>
+    <p>Sie haben ferner gem. Art. 77 DSGVO das Recht, eine Beschwerde bei der zuständigen Aufsichtsbehörde
+        einzureichen.</p>
+    <h3 id="dsg-general-revokeconsent">Widerrufsrecht</h3>
+    <p>Sie haben das Recht, erteilte Einwilligungen gem. Art. 7 Abs. 3 DSGVO mit Wirkung für die Zukunft zu
+        widerrufen</p>
+    <h3 id="dsg-general-object">Widerspruchsrecht</h3>
+    <p>Sie können der künftigen Verarbeitung der Sie betreffenden Daten nach Maßgabe des Art. 21 DSGVO jederzeit
+        widersprechen. Der Widerspruch kann insbesondere gegen die Verarbeitung für Zwecke der Direktwerbung
+        erfolgen.</p>
+    <h3 id="dsg-general-cookies">Cookies und Widerspruchsrecht bei Direktwerbung</h3>
+    <p>Als „Cookies“ werden kleine Dateien bezeichnet, die auf Rechnern der Nutzer gespeichert werden. Innerhalb der
+        Cookies können unterschiedliche Angaben gespeichert werden. Ein Cookie dient primär
+</div>
+<!--END .content-->
 
-    <div id="bottom"></div>
+<div id="bottom"></div>
 
-    <script>
-      var page = "datenschutz";
-    </script>
-    <script src="/dist/jquery.js"></script>
-    <script src="/dist/index.js"></script>
-    <script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/cookie.js"></script>
-    <script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/bootstrap.min.js"></script>
-    <style>
-      .header,.content{display:none;}
-    </style>
-    <script src="/templates/loader.js"></script>  </body>
+<script>
+    const page = "datenschutz";
+</script>
+<script src="../dist/jquery.js"></script>
+<script src="../dist/index.js"></script>
+<script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/cookie.js"></script>
+<script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/bootstrap.min.js"></script>
+<style>
+    .header, #content {
+        display: none;
+    }
+</style>
+<script src="../templates/loader.js"></script>
+</body>
 </html>
diff --git a/public/static/impressum.html b/public/static/impressum.html
index ecd95b5..29fe962 100644
--- a/public/static/impressum.html
+++ b/public/static/impressum.html
@@ -1,63 +1,66 @@
 <html lang="de">
-  <head>
+<head>
     <link
-      rel="stylesheet"
-      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
-      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
-      crossorigin="anonymous"
+            rel="stylesheet"
+            href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
+            integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
+            crossorigin="anonymous"
     />
-    <link rel="stylesheet" href="../dist/style.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../dist/style.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Impressum - ITbyHF | Profilpage</title>
-    <meta charset="UTF-8" />
+    <meta charset="UTF-8"/>
     <link rel="icon" type="image/png" href="https://cdn.a-hoefler.eu/resources/img/logo-min.png" sizes="1000x1000">
 
-  </head>
-    <body onload="loaded()" >
-      <div id="loader-wr">
-        <div id="loader">
-            <p id="loading">Lade</p>
-            <div class="loader-spinner spinner-border text-info" id="loading-circle">
-                <span class="sr-only"></span>
-            </div>
+</head>
+<body onload="loaded()">
+<div id="loader-wr">
+    <div id="loader">
+        <p id="loading">Lade</p>
+        <div class="loader-spinner spinner-border text-info" id="loading-circle">
+            <span class="sr-only"></span>
         </div>
     </div>
+</div>
 
-    <div class="header" id="header">
-      <div class="start-bg-logo">
+<div class="header" id="header">
+    <div class="start-bg-logo">
         <navbarwr id="navbar_wr"></navbarwr>
 
         <div class="start-bg-text">
-          <p>Impressum</p>
+            <p>Impressum</p>
         </div>
-      </div>
-      <div class="stage">
-        <a id="mouse" href="#content"></a>
-      </div>
     </div>
+    <div class="stage">
+        <a id="mouse" href="#content"></a>
+    </div>
+</div>
 
-    <div class="content" id="content">
+<div class="content" id="content">
     <div class="impressum">
 
-            <p>Alec Höfler <br>Roseggerstraße 6<br>8642 Sankt Lorenzen<br>Österreich<br><br>
+        <p>Alec Höfler <br>Roseggerstraße 6<br>8642 Sankt Lorenzen<br>Österreich<br><br>
             <b>EMail:</b> <a href="mailto:master@-hoefler.eu"><i>master@a-hoefler.eu</i></a><br>
             <b>Discord:</b> <i>ITbyHF#0152</i><br>
             <b>Matrix: </b> <i>@ha:itbyhf.xyz</i></p>
     </div>
-    </div>
-    <!--END .content-->
-    
-    <div id="bottom"></div>
+</div>
+<!--END .content-->
 
-    <script>
-      var page = "impressum";
-    </script>
-    <script src="/dist/jquery.js"></script>
-    <script src="/dist/index.js"></script>
-    <script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/cookie.js"></script>
-    <script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/bootstrap.min.js"></script>
-    <style>
-      .header,.content{display:none;}
-    </style>
-    <script src="/templates/loader.js"></script>  </body>
+<div id="bottom"></div>
+
+<script>
+    const page = "impressum";
+</script>
+<script src="../dist/jquery.js"></script>
+<script src="../dist/index.js"></script>
+<script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/cookie.js"></script>
+<script src="https://s3.itbyhf.xyz/cdn/apps/gfdgp3t123d/bootstrap.min.js"></script>
+<style>
+    .header, .content {
+        display: none;
+    }
+</style>
+<script src="../templates/loader.js"></script>
+</body>
 </html>
diff --git a/public/templates/footer.html b/public/templates/footer.html
index 308be33..aa7d001 100644
--- a/public/templates/footer.html
+++ b/public/templates/footer.html
@@ -1,32 +1,32 @@
-      <div id="footer">
-        <div class="row">
-          <a class="col-xs-6 col-sm-3" href="/static/datenschutz.html"
-            >Datenschutz</a
-          >
-          <a class="col-xs-6 col-sm-3" href="/static/impressum.html"
-            >Impressum</a
-          >
-          <a class="col-xs-6 col-sm-3" href="/static/bildquellen.html"
-          >Bildquellen</a
+<div id="footer">
+    <div class="row">
+        <a class="col-xs-6 col-sm-3" href="../static/datenschutz.html"
+        >Datenschutz</a
+        >
+        <a class="col-xs-6 col-sm-3" href="../static/impressum.html"
+        >Impressum</a
+        >
+        <a class="col-xs-6 col-sm-3" href="../static/bildquellen.html"
+        >Bildquellen</a
         >
-        </div>
-      </div>
     </div>
-    <!--END .content-->
+</div>
 
-    <!-- START Cookie-Alert -->
-    <div class="alert text-center cookiealert" role="alert">
+<!-- START Cookie-Alert -->
+<div class="alert text-center cookiealert" role="alert">
       <span>
         &#x1F36A; Um die Experience zu verbessern, werden Cookies verwendet.
       </span>
-      <a href="https://de.wikipedia.org/wiki/HTTP-Cookie" target="_blank"
-        >Mehr</a
-      >
-      <button type="button" class="btn btn-primary btn-sm acceptcookies">
+    <a href="https://de.wikipedia.org/wiki/HTTP-Cookie" target="_blank"
+    >Mehr</a
+    >
+    <button type="button" class="btn btn-primary btn-sm acceptcookies">
         &times;
-      </button>
-    </div>
-    <!-- END Cookie-Alert -->
-    <!-- Matomo Image Tracker-->
-      <img referrerpolicy="no-referrer-when-downgrade" src="https://matomo.itbyhf.xyz/matomo.php?idsite=1&amp;rec=1" style="border:0" alt="" />
-    <!-- End Matomo -->
\ No newline at end of file
+    </button>
+</div>
+<!-- END Cookie-Alert -->
+
+<!-- Matomo Image Tracker-->
+<img referrerpolicy="no-referrer-when-downgrade" src="https://matomo.itbyhf.xyz/matomo.php?idsite=1&amp;rec=1"
+     style="border:0" alt=""/>
+<!-- End Matomo -->
\ No newline at end of file
diff --git a/public/templates/loader.js b/public/templates/loader.js
index 5f83812..4366368 100644
--- a/public/templates/loader.js
+++ b/public/templates/loader.js
@@ -1,16 +1,17 @@
 let pageTimeout;
 
-var disable_timeout = true;
+let disable_timeout = true;
 
-var is_loaded = false;
+let is_loaded = false;
 
+let dots = 0;
 
 function loaded() {
     is_loaded = true;
     if (disable_timeout) {
         pageTimeout = setTimeout(showPage, 0);
     } else {
-        pageTimeout = setTimeout(showPage, 9,50);
+        pageTimeout = setTimeout(showPage, 9, 50);
     }
 }
 
@@ -24,13 +25,12 @@ function showPage() {
     content_box.style.display = "block";
 
 }
+
 load();
-var addDot;
+let addDot;
 
 function load() {
-    if (is_loaded) {
-        return;
-    } else {
+    if (!is_loaded) {
         addDot = setInterval(addPointHTMl, 300);
     }
 }
@@ -39,6 +39,10 @@ function addPointHTMl() {
     if (is_loaded) {
         return;
     }
-    document.getElementById('loading').innerHTML += ".";
-    tmp_bool = false;
+    if (dots === 4) {
+        document.getElementById('loading').innerHTML = "Lade.";
+    } else {
+        document.getElementById('loading').innerHTML += ".";
+    }
+    dots++;
 }
\ No newline at end of file
diff --git a/public/templates/nav.html b/public/templates/nav.html
index 2f72289..7517fe4 100644
--- a/public/templates/nav.html
+++ b/public/templates/nav.html
@@ -1,74 +1,74 @@
 <div class="container-fluid">
-  <!-- Brand and toggle get grouped for better mobile display -->
-  <div class="navbar-header">
-    <button
-      type="button"
-      class="navbar-toggle collapsed"
-      data-toggle="collapse"
-      data-target="#bs-example-navbar-collapse-1"
-      aria-expanded="false"
-    >
-      <div>
-        Menü
-      </div>
-    </button>
-    <a class="navbar-brand fsstd" href="#">Home</a>
-  </div>
-
-  <!-- Collect the nav links, forms, and other content for toggling -->
-  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-    <ul class="nav navbar-nav"></ul>
-    <ul class="nav navbar-nav navbar-left">
-      <li>
-        <a href="https://twitter.com/itbyhf"
-          ><img
-            src="https://s3.itbyhf.xyz/cdn/resources/img/socials/twitter.png"
-            class="navbar_image"
-        /></a>
-      </li>
-      <li>
-        <a href="https://gitlab.a-hoefler.eu/ha"
-          ><img
-            src="https://s3.itbyhf.xyz/cdn/resources/img/socials/gitlab.png"
-            class="navbar_image"
-        /></a>
-      </li>
-
-      <li>
-        <a href="https://matrix.to/#/@ha:itbyhf.xyz"
-          ><img
-            src="https://s3.itbyhf.xyz/cdn/resources/img/socials/matrix.png"
-            class="navbar_image"
-        /></a>
-      </li>
-    </ul>
-    <ul class="nav navbar-nav navbar-right">
-      <li class="dropdown">
-        <a
-          href="#"
-          class="dropdown-toggle"
-          data-toggle="dropdown"
-          role="button"
-          aria-haspopup="true"
-          aria-expanded="false"
-          >Blog</a
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="navbar-header">
+        <button
+                type="button"
+                class="navbar-toggle collapsed"
+                data-toggle="collapse"
+                data-target="#bs-example-navbar-collapse-1"
+                aria-expanded="false"
         >
-        <ul class="dropdown-menu" id="nav-dr-pages"></ul>
-      </li>
-      <li class="dropdown">
-        <a
-          href="#"
-          class="dropdown-toggle"
-          data-toggle="dropdown"
-          role="button"
-          aria-haspopup="true"
-          aria-expanded="false"
-          >Services</a
-        >
-        <ul class="dropdown-menu" id="nav-dr-services"></ul>
-      </li>
-    </ul>
-  </div>
-  <!-- /.navbar-collapse -->
+            <div>
+                Menü
+            </div>
+        </button>
+        <a class="navbar-brand fsstd" href="#">Home</a>
+    </div>
+
+    <!-- Collect the nav links, forms, and other content for toggling -->
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+        <ul class="nav navbar-nav"></ul>
+        <ul class="nav navbar-nav navbar-left">
+            <li>
+                <a href="https://twitter.com/itbyhf"
+                ><img
+                        src="https://s3.itbyhf.xyz/cdn/resources/img/socials/twitter.png"
+                        class="navbar_image"
+                        alt="Twitter"/></a>
+            </li>
+            <li>
+                <a href="https://gitlab.a-hoefler.eu/ha"
+                ><img
+                        src="https://s3.itbyhf.xyz/cdn/resources/img/socials/gitlab.png"
+                        class="navbar_image"
+                        alt="Gitlab"/></a>
+            </li>
+
+            <li>
+                <a href="https://matrix.to/#/@ha:itbyhf.xyz"
+                ><img
+                        src="https://s3.itbyhf.xyz/cdn/resources/img/socials/matrix.png"
+                        class="navbar_image"
+                        alt="Matrix"/></a>
+            </li>
+        </ul>
+        <ul class="nav navbar-nav navbar-right">
+            <li class="dropdown">
+                <a
+                        href="#"
+                        class="dropdown-toggle"
+                        data-toggle="dropdown"
+                        role="button"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                >Blog</a
+                >
+                <ul class="dropdown-menu" id="nav-dr-pages"></ul>
+            </li>
+            <li class="dropdown">
+                <a
+                        href="#"
+                        class="dropdown-toggle"
+                        data-toggle="dropdown"
+                        role="button"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                >Services</a
+                >
+                <ul class="dropdown-menu" id="nav-dr-services"></ul>
+            </li>
+        </ul>
+    </div>
+    <!-- /.navbar-collapse -->
 </div>
 <!-- /.container-fluid -->
diff --git a/scss/_page.scss b/scss/_page.scss
index 62ed928..7dc97f7 100644
--- a/scss/_page.scss
+++ b/scss/_page.scss
@@ -1,3 +1,4 @@
+@import "vars";
 #postTitle2{
     font-size: 5vh;
 
@@ -6,4 +7,17 @@
 #postSummary{
     font-weight: bold;
     font-size: 2vh;
+}
+
+.codeblock-table tbody tr{
+    .codeblock-row-number{
+        color: $SecundaryColor;
+        font-size: 1.2vh;
+    }
+    td code{
+        background-color: $BackgroundColor;
+        color: white;
+        font-family: 'Source Code Pro Light', serif;
+        font-size: 1.5vh;
+    }
 }
\ No newline at end of file
