Initial commit

2023-02-10 00:47:59 +01:00 · 2023-02-10 00:47:59 +01:00 · f0bb538b97
commit f0bb538b97
72 changed files with 1580 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+.~lock*
+/*.html
+*.odt
+*.odg
--- a/README.md
+++ b/README.md
@ -0,0 +1,6 @@
+## Build
+
+```
+sudo pip3 install staticjinja
+staticjinja build
+```
--- a/datenschutz.md
+++ b/datenschutz.md
@ -0,0 +1,50 @@
+# Datenschutz
+
+## 1 Ihre Daten auf dieser Webseite
+
+Auf der Webseite ComputerSchaf.at werden weder durch ComputerSchaf, Lukas Zehentner e.U. (im Nachfolgenden: das Unternehmen) noch durch Dritte persönliche Daten erhoben. Für seitenexterne Inhalte z.B. Social Media-Präsenzen des Unternehmens ist die Datenschutzbestimmung des jeweiligen Mediums heranzuziehen.
+
+## 2 Datenerhebung und Speicherung
+
+### 2.1 Erhebung ihrer Daten und Aufnahme in die Kundendatenbank
+
+Im Interesse der guten Abwicklung von Geschäftsbeziehungen werden folgende Daten nach Erstkontakt (bzw. Neukontakt nach Löschung) bei Ihnen erfragt und in die Kundendatenbank aufgenommen:
+
+* Vor- und Nachname
+* Adresse
+* E-Mail-Adresse
+* Telefonnummer
+
+Zudem wird Ihnen eine für Abrechnungszwecke verwendete Kundennummer zugewiesen. Diese bleibt zwischen Geschäftskontakten gleich.
+
+Zusätzlich zu den oben genannten Daten können bedarfsweise zusätzliche Daten erhoben werden, dies kann gegebenenfalls auch nach dem Erstkontakt stattfinden (Siehe Punkt 2.1.1).
+
+### 2.1.1 Zusätzliche personenbezogene Daten
+
+Sollte dies erforderlich sein, kann das Unternehmen Sie bezüglich weiterer benötigter personenbezogene Daten kontaktieren. Bitte beachten Sie, dass solche Prozesse ausschließlich über die in den Kontaktdaten des Unternehmens vermerkten Kommunikationskanälen passiert. Sollten Sie sich unsicher sein, ob eine solche Anfrage legitim ist, antworten Sie nicht auf diese und kontaktieren das Unternehmen stattdessen direkt.
+
+## 2.2 Löschsperre während bestehenden Auftrag
+
+Im Falle der Beauftragung des Unternehmens zur Erfüllung einer Dienstleistung, stimmen Sie zu, dass Ihre Daten aus der Datenbank erst dann gelöscht werden können, nachdem die Dienstleistung vollbracht und in vollen Umfang vergütet wurde. Das selbiges gilt für rechtliche Streitigkeit. Ihr Recht bezüglich Berichtigung und Auskunft bleibt davon unberührt. Die Verwendung dieser Daten wird in Punkt 2.3 erläutert.
+
+## 2.3 Nutzung ihrer Daten durch das Unternehmen
+
+Für Kontakt, Anfahrt, Lieferung Rechnungsstellung werden die Daten aus der Kundendatenbank verwendet. Auch im Falle der Notwendigkeit eines Rechtsverfahrens wird Ihre angegebene Adresse als Zustelladresse verwendet. Ihre Daten werden generell nicht zu Werbezwecken verwendet, es sei denn es wird explizit zugestimmt.
+
+## 2.4 Weitergabe der Daten an Dritte
+
+Das Unternehmen gibt Ihre Daten nicht an Dritte weiter. Sollte dies erforderlich seinen, werden Sie vorhin kontaktiert und um Erlaubnis dieser Weitergabe gebeten. Das Unternehmen gibt nie persönliche Daten ohne Ihre Zustimmung weiter.
+Eine Ausnahme hier von stellt die Weitergabe von Daten an Behörden da, gegenüber denen das Unternehmen Auskunftspflichtig ist. Insofern dies nicht behördlich untersagt wird, werden Sie darüber informiert.
+
+# DSGVO-Bestimmungen
+
+## Ihre Rechte
+
+Entsprechend Datenschutzgrundsatzverordnung (im Nachfolgenden: DSGVO) haben Sie das Recht auf Auskunft, Berichtigung und Löschung der persönlichen Daten. Im Falle einer stattgefundenen Datenweitergabe können Sie zudem über das Unternehmen die Löschung (Ausnahme hierzu siehe Punkt 2.2) ihrer personenbezogenen Daten bei den Empfängern dieser beantragen.
+Ausgenommen von dem Recht auf Löschung sind adressierte Rechnungen, insofern diese noch nicht mehr als sieben Jahre zurückliegen, da eine gesetzliche Aufbewahrungsverpflichtung besteht (Siehe Bundesabgabenordnung § 132).
+
+## Datensicherheit
+
+Gemäß DSGVO werden Ihre personenbezogenen sowie sonstige Daten, die Speicherung im Unternehmenssytem bedürfen, auf gesicherten, Firmeneigenen Servern gespeichert und gegebenenfalls über geschützte Remoteverbindungen aufgerufen.
+Datenträger, mit welchen das Unternehmen zur Datenrettung (oder ähnliche Dienstleistungen) beauftragt wurde werden nur im Falle der aktiven Bearbeitung an Computersysteme angeschlossen und andernfalls sicher verwahrt.
+Sollte es im Unternehmen zu einem Datendiebstahl kommen, von denen Ihre Daten betroffenen sein könnten, werden Sie unverzüglich darüber informiert.
--- a/static/fonts/Lato/LICENSE.txt
+++ b/static/fonts/Lato/LICENSE.txt
@ -0,0 +1,94 @@
+Copyright (c) 2010-2015, Łukasz Dziedzic (dziedzic@typoland.com),
+with Reserved Font Name Lato.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
--- a/static/fonts/Lato/Lato.css
+++ b/static/fonts/Lato/Lato.css
@ -0,0 +1,185 @@
+/*
+ * Lato by Łukasz Dziedzic - http://www.latofonts.com/lato-free-fonts/
+ * License: OFL-1.1
+ */
+
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato Hairline.woff2') format('woff2'),
+         url('woff/Lato Hairline.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato Hairline Italic.woff2') format('woff2'),
+         url('woff/Lato Hairline Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 200;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato Thin.woff2') format('woff2'),
+         url('woff/Lato Thin.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 200;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato Thin Italic.woff2') format('woff2'),
+         url('woff/Lato Thin Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato Light.woff2') format('woff2'),
+         url('woff/Lato Light.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato Light Italic.woff2') format('woff2'),
+         url('woff/Lato Light Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato.woff2') format('woff2'),
+         url('woff/Lato.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato Italic.woff2') format('woff2'),
+         url('woff/Lato Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato Medium.woff2') format('woff2'),
+         url('woff/Lato Medium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato Medium Italic.woff2') format('woff2'),
+         url('woff/Lato Medium Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato Semibold.woff2') format('woff2'),
+         url('woff/Lato Semibold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato Semibold Italic.woff2') format('woff2'),
+         url('woff/Lato Semibold Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato Bold.woff2') format('woff2'),
+         url('woff/Lato Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato Bold Italic.woff2') format('woff2'),
+         url('woff/Lato Bold Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato Heavy.woff2') format('woff2'),
+         url('woff/Lato Heavy.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 800;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato Heavy Italic.woff2') format('woff2'),
+         url('woff/Lato Heavy Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato Black.woff2') format('woff2'),
+         url('woff/Lato Black.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src: local('Lato'),
+         url('woff2/Lato Black Italic.woff2') format('woff2'),
+         url('woff/Lato Black Italic.woff') format('woff');
+}
+
--- a/static/fonts/Lato/ttf/Lato
+++ b/static/fonts/Lato/ttf/Lato
--- a/static/fonts/Lato/ttf/Lato
+++ b/static/fonts/Lato/ttf/Lato
--- a/static/fonts/Lato/ttf/Lato
+++ b/static/fonts/Lato/ttf/Lato
--- a/static/fonts/Lato/ttf/Lato
+++ b/static/fonts/Lato/ttf/Lato
--- a/static/fonts/Lato/ttf/Lato
+++ b/static/fonts/Lato/ttf/Lato
--- a/static/fonts/Lato/ttf/Lato
+++ b/static/fonts/Lato/ttf/Lato
--- a/static/fonts/Lato/ttf/Lato
+++ b/static/fonts/Lato/ttf/Lato
--- a/static/fonts/Lato/ttf/Lato
+++ b/static/fonts/Lato/ttf/Lato
--- a/static/fonts/Lato/ttf/Lato
+++ b/static/fonts/Lato/ttf/Lato
--- a/static/fonts/Lato/ttf/Lato
+++ b/static/fonts/Lato/ttf/Lato
--- a/static/fonts/Lato/ttf/Lato
+++ b/static/fonts/Lato/ttf/Lato
--- a/static/fonts/Lato/ttf/Lato
+++ b/static/fonts/Lato/ttf/Lato
--- a/static/fonts/Lato/ttf/Lato
+++ b/static/fonts/Lato/ttf/Lato
--- a/static/fonts/Lato/ttf/Lato
+++ b/static/fonts/Lato/ttf/Lato
--- a/static/fonts/Lato/ttf/Lato
+++ b/static/fonts/Lato/ttf/Lato
--- a/static/fonts/Lato/ttf/Lato
+++ b/static/fonts/Lato/ttf/Lato
--- a/static/fonts/Lato/ttf/Lato
+++ b/static/fonts/Lato/ttf/Lato
--- a/static/fonts/Lato/ttf/Lato.ttf
+++ b/static/fonts/Lato/ttf/Lato.ttf
--- a/static/fonts/Lato/woff/Lato
+++ b/static/fonts/Lato/woff/Lato
--- a/static/fonts/Lato/woff/Lato
+++ b/static/fonts/Lato/woff/Lato
--- a/static/fonts/Lato/woff/Lato
+++ b/static/fonts/Lato/woff/Lato
--- a/static/fonts/Lato/woff/Lato
+++ b/static/fonts/Lato/woff/Lato
--- a/static/fonts/Lato/woff/Lato
+++ b/static/fonts/Lato/woff/Lato
--- a/static/fonts/Lato/woff/Lato
+++ b/static/fonts/Lato/woff/Lato
--- a/static/fonts/Lato/woff/Lato
+++ b/static/fonts/Lato/woff/Lato
--- a/static/fonts/Lato/woff/Lato
+++ b/static/fonts/Lato/woff/Lato
--- a/static/fonts/Lato/woff/Lato
+++ b/static/fonts/Lato/woff/Lato
--- a/static/fonts/Lato/woff/Lato
+++ b/static/fonts/Lato/woff/Lato
--- a/static/fonts/Lato/woff/Lato
+++ b/static/fonts/Lato/woff/Lato
--- a/static/fonts/Lato/woff/Lato
+++ b/static/fonts/Lato/woff/Lato
--- a/static/fonts/Lato/woff/Lato
+++ b/static/fonts/Lato/woff/Lato
--- a/static/fonts/Lato/woff/Lato
+++ b/static/fonts/Lato/woff/Lato
--- a/static/fonts/Lato/woff/Lato
+++ b/static/fonts/Lato/woff/Lato
--- a/static/fonts/Lato/woff/Lato
+++ b/static/fonts/Lato/woff/Lato
--- a/static/fonts/Lato/woff/Lato
+++ b/static/fonts/Lato/woff/Lato
--- a/static/fonts/Lato/woff/Lato.woff
+++ b/static/fonts/Lato/woff/Lato.woff
--- a/static/fonts/Lato/woff2/Lato
+++ b/static/fonts/Lato/woff2/Lato
--- a/static/fonts/Lato/woff2/Lato
+++ b/static/fonts/Lato/woff2/Lato
--- a/static/fonts/Lato/woff2/Lato
+++ b/static/fonts/Lato/woff2/Lato
--- a/static/fonts/Lato/woff2/Lato
+++ b/static/fonts/Lato/woff2/Lato
--- a/static/fonts/Lato/woff2/Lato
+++ b/static/fonts/Lato/woff2/Lato
--- a/static/fonts/Lato/woff2/Lato
+++ b/static/fonts/Lato/woff2/Lato
--- a/static/fonts/Lato/woff2/Lato
+++ b/static/fonts/Lato/woff2/Lato
--- a/static/fonts/Lato/woff2/Lato
+++ b/static/fonts/Lato/woff2/Lato
--- a/static/fonts/Lato/woff2/Lato
+++ b/static/fonts/Lato/woff2/Lato
--- a/static/fonts/Lato/woff2/Lato
+++ b/static/fonts/Lato/woff2/Lato
--- a/static/fonts/Lato/woff2/Lato
+++ b/static/fonts/Lato/woff2/Lato
--- a/static/fonts/Lato/woff2/Lato
+++ b/static/fonts/Lato/woff2/Lato
--- a/static/fonts/Lato/woff2/Lato
+++ b/static/fonts/Lato/woff2/Lato
--- a/static/fonts/Lato/woff2/Lato
+++ b/static/fonts/Lato/woff2/Lato
--- a/static/fonts/Lato/woff2/Lato
+++ b/static/fonts/Lato/woff2/Lato
--- a/static/fonts/Lato/woff2/Lato
+++ b/static/fonts/Lato/woff2/Lato
--- a/static/fonts/Lato/woff2/Lato
+++ b/static/fonts/Lato/woff2/Lato
--- a/static/fonts/Lato/woff2/Lato.woff2
+++ b/static/fonts/Lato/woff2/Lato.woff2
--- a/static/img/icons/daten.svg
+++ b/static/img/icons/daten.svg
@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="daten.svg"
+   inkscape:export-filename="hilfe.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="76.428571"
+     inkscape:cy="437.85714"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1444"
+     inkscape:window-height="1236"
+     inkscape:window-x="420"
+     inkscape:window-y="94"
+     inkscape:window-maximized="0"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-26.066785)">
+    <circle
+       style="fill:#77bc65;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"
+       id="path232"
+       cx="256"
+       cy="282.06677"
+       r="212.73335" />
+    <rect
+       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:12.6657;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       id="rect20270"
+       width="178.58345"
+       height="241.77255"
+       x="166.70828"
+       y="168.36203"
+       ry="33.402489" />
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:11.5911;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       id="path21778"
+       cx="255.30829"
+       cy="268.96756"
+       r="67.738556" />
+  </g>
+</svg>
--- a/static/img/icons/fb.png
+++ b/static/img/icons/fb.png
--- a/static/img/icons/hilfe.svg
+++ b/static/img/icons/hilfe.svg
@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="hilfe.svg"
+   inkscape:export-filename="hilfe.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="197.85714"
+     inkscape:cy="415"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1444"
+     inkscape:window-height="1236"
+     inkscape:window-x="503"
+     inkscape:window-y="85"
+     inkscape:window-maximized="0"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-26.066785)">
+    <circle
+       style="fill:#77bc65;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"
+       id="path232"
+       cx="256"
+       cy="282.06677"
+       r="212.73335" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:430.296px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.24113"
+       x="165.63785"
+       y="434.82187"
+       id="text3128"
+       inkscape:export-filename="hilfe.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96"><tspan
+         sodipodi:role="line"
+         id="tspan3126"
+         x="165.63785"
+         y="434.82187"
+         style="font-size:430.296px;fill:#ffffff;fill-opacity:1;stroke-width:2.24113">?</tspan></text>
+  </g>
+</svg>
--- a/static/img/icons/laptop.svg
+++ b/static/img/icons/laptop.svg
@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="laptop.svg"
+   inkscape:export-filename="hilfe.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="0.71428571"
+     inkscape:cy="116.42857"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1444"
+     inkscape:window-height="1236"
+     inkscape:window-x="420"
+     inkscape:window-y="94"
+     inkscape:window-maximized="0"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-26.066785)">
+    <circle
+       style="fill:#77bc65;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"
+       id="path232"
+       cx="256"
+       cy="282.06677"
+       r="212.73335" />
+    <rect
+       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:10.6183;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       id="rect24042"
+       width="243.80064"
+       height="172.04965"
+       x="134.09967"
+       y="168.2036"
+       ry="48.534157" />
+    <rect
+       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:10.6183;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       id="rect24770"
+       width="243.71727"
+       height="38.998165"
+       x="134.09967"
+       y="340.2533"
+       ry="18.706367" />
+    <rect
+       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:10.6183;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       id="rect25498"
+       width="40.006557"
+       height="18.331129"
+       x="235.95505"
+       y="340.2533"
+       ry="9.1655645" />
+    <rect
+       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       id="rect25500"
+       width="212.1414"
+       height="138.19952"
+       x="149.98248"
+       y="183.89127"
+       ry="35.894993" />
+  </g>
+</svg>
--- a/static/img/icons/wrench.svg
+++ b/static/img/icons/wrench.svg
@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="wrench.svg"
+   inkscape:export-filename="hilfe.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="76.428571"
+     inkscape:cy="437.85714"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1444"
+     inkscape:window-height="1236"
+     inkscape:window-x="851"
+     inkscape:window-y="57"
+     inkscape:window-maximized="0"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-26.066785)">
+    <circle
+       style="fill:#77bc65;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"
+       id="path232"
+       cx="256"
+       cy="282.06677"
+       r="212.73335" />
+    <path
+       id="path15347"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.84989;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1"
+       d="m 144.79693,157.54549 a 56.38273,56.38273 0 0 0 3.78645,43.69182 56.38273,56.38273 0 0 0 53.82342,29.5155 l 11.43881,21.29634 -0.003,0.001 55.34247,103.03452 a 56.38273,56.38273 0 0 0 -5.11055,61.17041 56.38273,56.38273 0 0 0 34.24029,27.3343 l 9.6552,-5.18606 -22.52338,-41.93316 17.5502,-26.90627 32.12084,0.22668 22.52338,41.93317 9.56202,-5.13601 a 56.38273,56.38273 0 0 0 -3.7863,-43.69148 56.38273,56.38273 0 0 0 -53.82341,-29.51548 l -11.43882,-21.29635 0.003,-0.001 -55.34246,-103.03451 a 56.38273,56.38273 0 0 0 5.11054,-61.17043 56.38273,56.38273 0 0 0 -34.24029,-27.33429 l -9.65519,5.18605 22.52338,41.93317 -17.55021,26.90627 -32.12084,-0.22668 -22.52338,-41.93318 z" />
+  </g>
+</svg>
--- a/static/img/logo.svg
+++ b/static/img/logo.svg
@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 48 48"
+   version="1.1"
+   id="svg8"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     transform="translate(0,-26.066785)">
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1.14991px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 23.395051,32.970873 c 0,0 3.769274,-3.342626 5.86716,-2.799773 1.916226,0.495847 3.446058,4.835778 3.446058,4.835778 0,0 5.460116,-1.33082 7.043495,0.408067 1.270484,1.395261 -0.201924,5.657489 -0.201924,5.657489 0,0 3.738782,0.0635 4.489625,1.444724 0.700425,1.288477 -1.146474,4.247643 -1.146474,4.247643 0,0 2.314787,2.206101 2.198758,3.610393 -0.137747,1.667153 -3.27842,3.799648 -3.27842,3.799648 0,0 2.948705,2.799937 2.476929,3.95152 -0.787597,1.922482 -4.960403,2.844383 -4.960403,2.844383 0,0 2.507056,2.518758 1.854169,3.751394 -1.000638,1.889183 -6.35289,0.879412 -6.35289,0.879412 0,0 -0.116894,3.915203 -1.575947,4.671288 -2.025726,1.049736 -6.560406,-1.952079 -6.560406,-1.952079 0,0 -3.463549,3.035248 -5.486783,2.741247 -1.809491,-0.262939 -4.006414,-3.746892 -4.006414,-3.746892 0,0 -4.92971,1.040348 -6.587694,-0.405804 -1.252711,-1.092659 -0.9799564,-4.88962 -0.9799564,-4.88962 0,0 -3.5758539,-0.746352 -4.3557573,-2.168416 -0.8298306,-1.513101 0.5457601,-5.148298 0.5457601,-5.148298 0,0 -3.5414599,-3.235241 -3.3216199,-5.31197 0.1828168,-1.72699 3.6258828,-3.741151 3.6258828,-3.741151 0,0 -1.554707,-4.001705 -0.5734429,-5.60182 0.8924231,-1.455244 4.7773266,-1.845144 4.7773266,-1.845144 0,0 -0.19387,-3.185495 0.891691,-4.03158 1.530815,-1.193113 5.820109,0.168944 5.820109,0.168944 0,0 0.588526,-3.34309 1.935027,-3.759168 1.599157,-0.494151 4.416141,2.389785 4.416141,2.389785 z"
+       id="path1106" />
+    <ellipse
+       style="fill:none;stroke:#000000;stroke-width:1.31981;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       id="path4112"
+       cx="24.486584"
+       cy="50.948475"
+       rx="11.415845"
+       ry="10.720737" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1.59251;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 24.49092,61.167175 -0.07919,-4.559719 2.780364,-2.277664 -2.772664,2.251859 -2.564413,-2.193003"
+       id="path4116" />
+    <ellipse
+       style="fill:none;stroke:#000000;stroke-width:1.31981;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       id="path4118"
+       cx="27.758003"
+       cy="48.34346"
+       rx="0.2662451"
+       ry="0.89422238" />
+    <ellipse
+       style="fill:none;stroke:#000000;stroke-width:1.31981;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       id="path4120"
+       cx="20.913252"
+       cy="48.282394"
+       rx="0.25293055"
+       ry="1.0710502" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1.24628px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+       d="m 32.864804,43.792931 c 0,0 4.69229,1.112367 5.684798,1.803184 2.211392,1.539202 2.978523,4.47048 2.978523,4.47048 0,0 -2.166112,-0.166962 -3.191255,-0.495483 -0.970283,-0.31094 -2.730449,-1.373989 -2.730449,-1.373989"
+       id="path4122" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1.24628px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+       d="m 16.243466,43.912402 c 0,0 -4.692291,1.112366 -5.684798,1.803184 -2.2113927,1.539202 -2.9785233,4.470479 -2.9785233,4.470479 0,0 2.1661116,-0.166961 3.1912553,-0.495482 0.970282,-0.31094 2.730449,-1.373989 2.730449,-1.373989"
+       id="path6304" />
+  </g>
+</svg>
--- a/static/styles.css
+++ b/static/styles.css
@ -0,0 +1,229 @@
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 7em;
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  min-height: 100%;
+  font-size: 20px;
+  font-family: Lato, Roboto, sans-serif;
+}
+
+header, main, footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+main {
+  flex-grow: 1;
+}
+
+.header-content, .main-content, .footer-content {
+  max-width: 1000px;
+  width: 100%;
+}
+
+.header-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 0 auto;
+  padding: 5px 8px;
+}
+
+.header-nav .header-content {
+  gap: 0.8em;
+  font-size: 1.2em;
+}
+
+.header-contact .header-content {
+  gap: 1.2em;
+  line-height: 1.6em;
+  justify-content: center;
+}
+
+.header-right {
+  flex-grow: 1;
+  text-align: right;
+  margin-right: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
+}
+
+.header-spacer {
+  flex-grow: 1;
+  min-width: 1em;
+}
+
+.header-title {
+  font-size: 1.3em;
+  display: inline-flex;
+  align-items: center;
+}
+
+.header-nav {
+  width: 100%;
+  background-color: #77bc65;
+  position: sticky;
+  z-index: 100;
+  top: 0;
+  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);
+}
+
+.header-contact {
+  width: 100%;
+  background-color: #D6701C;
+}
+
+a {
+  text-decoration: none;
+}
+
+a, a:visited, a:hover, a:focus {
+  color: inherit;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.service-link:hover {
+  text-decoration: none;
+}
+
+.service-icon:hover {
+  filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, .7));
+}
+
+.nav-img {
+  width: 100px;
+  height: 60px;
+}
+
+.lang-item {
+  margin: 0 0.2em;
+}
+
+h1, h2, h3, h4 {
+  text-align: center;
+}
+
+
+.overview {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+  text-align: center;
+}
+
+.overview > * {
+  width: 24%;
+}
+
+.service-link {
+  display: flex;
+  flex-direction: column;
+}
+
+.service-icon {
+  width: 100%;
+}
+
+.service-name {
+  font-weight: bold;
+  font-size: 1.2em;
+  margin-bottom: 0.4em;
+}
+
+.service:hover > .service-inner {
+  height: 2.5em;
+}
+
+section {
+  background-color: #FFFFFF;
+  width: 100%;
+}
+
+section:nth-child(even) {
+  background-color: #F5F5F5;
+}
+
+section > * {
+  max-width: 1000px;
+  width: 100%;
+  margin: auto;
+  padding: 2.5em 0.5em;
+}
+
+footer {
+  background: #77bc65;
+  padding: 2em 0.5em;
+  box-shadow: 0px -3px 3px rgba(0, 0, 0, 0.15);
+}
+
+.footer-content {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.footer-content > * {
+  width: 30%;
+  flex-grow: 1;
+  text-align: center;
+}
+
+footer h2 {
+  margin-top: 0;
+}
+
+.footer-sep {
+  width: 0;
+  flex-grow: 0;
+  border-left: 0.2em solid #F5F5F5;
+}
+
+.credits {
+  font-size: 0.85em;
+}
+
+.privacy h2, .privacy h3, .privacy h3 {
+  text-align: initial;
+}
+
+@media only screen and (max-width:768px) {
+  .header-content {
+    flex-direction: column;
+    align-items: start;
+  }
+  .header-nav .header-content {
+    gap: initial;
+  }
+  .header-contact .header-content {
+    gap: initial;
+  }
+  .overview {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+  .footer-content {
+    flex-direction: column;
+  }
+  .footer-content > * {
+    width: initial;
+  }
+  .overview > * {
+    width: initial;
+  }
+}
--- a/static/styles_mobile.css
+++ b/static/styles_mobile.css
@ -0,0 +1,234 @@
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 7em;
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  min-height: 100%;
+  font-size: 20px;
+  font-family: Lato, Roboto, sans-serif;
+}
+
+header, main, footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+main {
+  flex-grow: 1;
+}
+
+.header-content, .main-content, .footer-content {
+  max-width: 1000px;
+  width: 100%;
+}
+
+.header-content {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  margin: 0 auto;
+  padding: 5px 8px;
+}
+
+.header-nav .header-content {
+  font-size: 1.2em;
+}
+
+.header-contact .header-content {
+  line-height: 1.6em;
+}
+
+.header-right {
+  flex-grow: 1;
+  text-align: right;
+  margin-right: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
+}
+
+.header-spacer {
+  flex-grow: 1;
+  min-width: 1em;
+}
+
+.header-title {
+  font-size: 1.3em;
+  display: inline-flex;
+  align-items: center;
+}
+
+.header-nav {
+  width: 100%;
+  background-color: #77bc65;
+  position: sticky;
+  z-index: 100;
+  top: 0;
+  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);
+}
+
+.header-contact {
+  width: 100%;
+  background-color: #D6701C;
+}
+
+a {
+  text-decoration: none;
+}
+
+a, a:visited, a:hover, a:focus {
+  color: inherit;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.service-link:hover {
+  text-decoration: none;
+}
+
+.service-icon:hover {
+  filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, .7));
+}
+
+.nav-img {
+  width: 100px;
+  height: 60px;
+}
+
+/*
+.link-button {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 10px;
+  padding: 10px 15px;
+}
+*/
+
+.lang-item {
+  margin: 0 0.2em;
+}
+
+h1, h2, h3, h4 {
+  text-align: center;
+}
+
+
+.overview {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: 100%;
+  justify-content: space-between;
+  text-align: center;
+}
+
+.overview > * {
+
+}
+
+.service-link {
+  display: flex;
+  flex-direction: column;
+}
+
+.service-icon {
+  width: 100%;
+}
+
+.service-name {
+  font-weight: bold;
+  font-size: 1.2em;
+  margin-bottom: 0.4em;
+}
+
+/*
+.service {
+  display: flex;
+  aspect-ratio: 1;
+  width: 32%;
+  border-radius: 10px;
+  background-size: cover;
+  background-position: center;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5em;
+  text-decoration: none;
+  color: inherit;
+}
+
+.service-inner {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background: #e5f1ffcf;
+  justify-content: center;
+  align-items: center;
+  font-weight: 500;
+  transition: 1s;
+}
+*/
+
+.service:hover > .service-inner {
+  height: 2.5em;
+}
+
+section {
+  background-color: #FFFFFF;
+  width: 100%;
+}
+
+section:nth-child(even) {
+  background-color: #F5F5F5;
+}
+
+section > * {
+  max-width: 1000px;
+  width: 100%;
+  margin: auto;
+  padding: 2.5em 0.5em;
+}
+
+footer {
+  background: #77bc65;
+  padding: 2em 0.5em;
+  box-shadow: 0px -3px 3px rgba(0, 0, 0, 0.15);
+}
+
+.footer-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.footer-content > * {
+  flex-grow: 1;
+  text-align: center;
+}
+
+footer h2 {
+  margin-top: 0;
+}
+
+.footer-sep {
+  width: 0;
+  flex-grow: 0;
+  border-left: 0.2em solid #F5F5F5;
+}
+
+.credits {
+  font-size: 0.85em;
+}
+
+.privacy h2, .privacy h3, .privacy h3 {
+  text-align: initial;
+}
--- a/templates/_base.html
+++ b/templates/_base.html
@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Computerschaf{% endblock %}</title>
+    <link rel="stylesheet" href="static/styles.css">
+    <link rel="stylesheet" href="static/fonts/Lato/Lato.css">
+    <link rel="icon" href="" type="image/icon type">
+  </head>
+
+  <body>
+    <div class="header-contact">
+      <div class="header-content">
+        <span>📞 <a href="tel:+436641240214">+43 664 1240214</a></span>
+        <span>📧 <a href="mailto:office@computerschaf.at">office@computerschaf.at</a></span>
+      </div>
+    </div>
+    <header class="header-nav">
+      <nav class="header-content">
+        <span class="header-title">
+          <img src="static/img/logo.svg" alt="" class="nav-img" height="48" width="48">
+          Computerschaf
+        </span>
+        <span class="header-spacer"></span>
+        <span>
+          <a href="index.html" class="nav-item link-button">Leistungen</a>
+        </span>
+        <span>
+          <a href="bedingungen.html" class="nav-item link-button">Bedingungen</a>
+        </span>
+        <span>
+          <a href="#kontakt" class="nav-item link-button">Kontakt</a>
+        </span>
+      </nav>
+    </header>
+    {% block main %}
+    <main>
+    </main>
+    {% endblock %}
+    <footer>
+      <div class="footer-content">
+        <div class="footer-address">
+          <h2 id="kontakt">Kontakt</h2>
+          📞 <a href="tel:+436641240214">+43 664 1240214</a><br>
+          📧 <a href="mailto:office@computerschaf.at">office@computerschaf.at</a><br>
+          Adresse (nur nach Rücksprache):<br>
+          Ulmenstraße 65
+        </div>
+        <div class="footer-sep"></div>
+        <div class="footer-social">
+          <h2>Soziale Medien</h2>
+          <a href="#social">
+            <img src="static/img/icons/fb.png">
+          </a>
+          <a href="#social">
+            <img src="static/img/icons/fb.png">
+          </a>
+          <a href="#social">
+            <img src="static/img/icons/fb.png">
+          </a>
+        </div>
+        <div class="footer-sep"></div>
+        <div class="footer-info">
+          <h2>Informationen</h2>
+          <div>
+            <a href="impressum.html">Impressum</a><br>
+            <a href="datenschutz.html">Datenschutz</a>
+          </div>
+          <br>
+          <div class="credits">
+            Webdesign von <a href="https://gabrielhuber.at">Gabriel Huber</a><br>
+            Logo von Theresa Grossalber
+          </div>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
--- a/templates/bedingungen.html
+++ b/templates/bedingungen.html
@ -0,0 +1,81 @@
+{% extends "_base.html" %}
+{% block main %}
+<main>
+  <h1>Bedingungen</h1>
+  <section>
+    <div>
+      <h2 id="services">Dienstleistungen</h2>
+      <p>
+        Vorortreparatur, Datenrettung, Beratung/Hilfe, Leihe von Laptops
+      </p>
+      <p>
+        Stundensatz Reparatur/Datenrettung € 60,- (Halbstündige Verrechnung), Stundensatz Beratung/Hilfe € 50,-<br>
+        Eventueller Materialaufwand seperat zu zahlen - Informationen diesbezüglich werden vor Reparaturen bekannt gegeben
+      </p>
+    </div>
+  </section>
+  <section>
+    <div>
+      <h2 id="rental">Leihe</h2>
+      <p>
+       Benötigen Sie sofort einen funktionstüchigen Laptop mit allen geläufigen Office-Programmen? Wir bieten Ihnen sowohl Windows-Laptops als auch MacBooks zur Leihe an. Alle Laptops werden mit passendem Ladegerät verliehen.
+      </p>
+      <p>
+        Lenovo Thinkpad:<br>
+        Over-Night: € 50,-<br>
+        Woche: € 90,-<br>
+        Monat: € 200,-
+      </p>
+      <p>
+        Zubehör:<br>
+        DVD-Brenner<br>
+        Maus (Wireless)<br>
+        Diverse Videokabel
+      </p>
+    </div>
+  </section>
+  <section>
+    <div>
+      <h3>Rückgabebedingungen</h3>
+      <p>
+        Rückgabe hat spätestens bis zum vertraglich festgehaltenen Datum um 18 Uhr zu erfolgen.
+        Die Rückgabe gilt nur dann als vollbracht, wenn der Laptop inklusive allem verleihten Zubehör (z.B. Ladegeräte, DVD-Brenner, etc.) retouriert worden ist. Für verspätete Rückgaben wird eine Verspätungsgebühr verrechnet.
+      </p>
+      <p>
+        Für die Rückgabe per Rückversand, der Versand spätestens am Rückgabetag mittels per Mail übermittelten Versandetikett in einem geeigneten Paket zu erfolgen. Es ist darauf zu achten, dass der Laptop entsprechend für den Versand gepolstert wird, dafür benötigtes Verpackungsmaterial ist vom Kunden zu stellen. Für die Versandrückgabe inklusive Versandetikett wird ein Umkostenpreis von € 10,- verrechnet.
+        Vorort-Abholung nach zu vereinbarenden Bedingungen möglich.
+        Persönliche Rückgabe ist ohne Mehrkosten nach Telefonischer Anmeldung mindestens zwei Tage vor vereinbarter Rückgabe möglich.
+      </p>
+    </div>
+  </section>
+  <section>
+    <div>
+      <h2>Anfahrtskosten</h2>
+      <p>
+        Zone A: € 10,-<br>
+        Zone B: € 25,-<br>
+        Zone C: € 40,-<br>
+        <br>
+        <b>Zone A</b><br>
+        Innsbruck: Arzl, Olympisches Dorf, Mühlau<sup>1</sup> / Rum, Neu-Rum, Thaur<br>
+        Erstmalige Anfahrt innerhalb Zone A kostenlos!<br>
+        <b>Zone B</b><br>
+        Innsbruck: Saggen, Mariahilf-St. Nikolaus, Dreiheiligen, Innenstadt, Reichenau / Hall in Tirol, Absam<br>
+        <b>Zone C</b><br>
+        Innsbruck: Hötting-Mitte<sup>1</sup>, Pradl, Wilten<sup>2</sup><br>
+        <br>
+        <sup>1</sup> Ausgenommen Hungerburg<br>
+        <sup>2</sup> Ausgenommen Mentlberg und Sieglanger<br>
+      </p>
+    </div>
+  </section>
+  <section>
+    <div>
+      <h2>Zahlung</h2>
+      <p>
+        Die Zahlung erfolgt auf Rechnung oder in Bar. Für die Zahlung per Rechnung gibt es eine generelle Zahlungsfrist von 21 Tagen ab Rechnungsdatum, bitte geben Sie im Feld "Zahlungsreferenz" die auf der Rechnung angeführte Referenznummer an. Ich behalte mir das Recht vor, im Falle des Nichtbegleichens der Rechnung, nach einmaligen Senden einer Mahnung Mahngebühren einzuheben.
+      </p>
+    </div>
+  </section>
+</main>
+{% endblock %}
--- a/templates/datenschutz.html
+++ b/templates/datenschutz.html
@ -0,0 +1,41 @@
+{% extends "_base.html" %}
+{% block main %}
+<main class="privacy">
+<h1>Datenschutz</h1>
+<section>
+<h2>1 Ihre Daten auf dieser Webseite</h2>
+<p>Auf der Webseite ComputerSchaf.at werden weder durch ComputerSchaf, Lukas Zehentner e.U. (im Nachfolgenden: das Unternehmen) noch durch Dritte persönliche Daten erhoben. Für seitenexterne Inhalte z.B. Social Media-Präsenzen des Unternehmens ist die Datenschutzbestimmung des jeweiligen Mediums heranzuziehen.</p>
+<h2>2 Datenerhebung und Speicherung</h2>
+<h3>2.1 Erhebung ihrer Daten und Aufnahme in die Kundendatenbank</h3>
+<p>Im Interesse der guten Abwicklung von Geschäftsbeziehungen werden folgende Daten nach Erstkontakt (bzw. Neukontakt nach Löschung) bei Ihnen erfragt und in die Kundendatenbank aufgenommen:</p>
+<ul>
+<li>Vor- und Nachname</li>
+<li>Adresse</li>
+<li>E-Mail-Adresse</li>
+<li>Telefonnummer</li>
+</ul>
+<p>Zudem wird Ihnen eine für Abrechnungszwecke verwendete Kundennummer zugewiesen. Diese bleibt zwischen Geschäftskontakten gleich.</p>
+<p>Zusätzlich zu den oben genannten Daten können bedarfsweise zusätzliche Daten erhoben werden, dies kann gegebenenfalls auch nach dem Erstkontakt stattfinden (Siehe Punkt 2.1.1).</p>
+<h3>2.1.1 Zusätzliche personenbezogene Daten</h3>
+<p>Sollte dies erforderlich sein, kann das Unternehmen Sie bezüglich weiterer benötigter personenbezogene Daten kontaktieren. Bitte beachten Sie, dass solche Prozesse ausschließlich über die in den Kontaktdaten des Unternehmens vermerkten Kommunikationskanälen passiert. Sollten Sie sich unsicher sein, ob eine solche Anfrage legitim ist, antworten Sie nicht auf diese und kontaktieren das Unternehmen stattdessen direkt.</p>
+<h2>2.2 Löschsperre während bestehenden Auftrag</h2>
+<p>Im Falle der Beauftragung des Unternehmens zur Erfüllung einer Dienstleistung, stimmen Sie zu, dass Ihre Daten aus der Datenbank erst dann gelöscht werden können, nachdem die Dienstleistung vollbracht und in vollen Umfang vergütet wurde. Das selbiges gilt für rechtliche Streitigkeit. Ihr Recht bezüglich Berichtigung und Auskunft bleibt davon unberührt. Die Verwendung dieser Daten wird in Punkt 2.3 erläutert.</p>
+<h2>2.3 Nutzung ihrer Daten durch das Unternehmen</h2>
+<p>Für Kontakt, Anfahrt, Lieferung Rechnungsstellung werden die Daten aus der Kundendatenbank verwendet. Auch im Falle der Notwendigkeit eines Rechtsverfahrens wird Ihre angegebene Adresse als Zustelladresse verwendet. Ihre Daten werden generell nicht zu Werbezwecken verwendet, es sei denn es wird explizit zugestimmt.</p>
+<h2>2.4 Weitergabe der Daten an Dritte</h2>
+<p>Das Unternehmen gibt Ihre Daten nicht an Dritte weiter. Sollte dies erforderlich seinen, werden Sie vorhin kontaktiert und um Erlaubnis dieser Weitergabe gebeten. Das Unternehmen gibt nie persönliche Daten ohne Ihre Zustimmung weiter.
+Eine Ausnahme hier von stellt die Weitergabe von Daten an Behörden da, gegenüber denen das Unternehmen Auskunftspflichtig ist. Insofern dies nicht behördlich untersagt wird, werden Sie darüber informiert.</p>
+</section>
+<h1>DSGVO-Bestimmungen</h1>
+<section>
+<h2>Ihre Rechte</h2>
+<p>Entsprechend Datenschutzgrundsatzverordnung (im Nachfolgenden: DSGVO) haben Sie das Recht auf Auskunft, Berichtigung und Löschung der persönlichen Daten. Im Falle einer stattgefundenen Datenweitergabe können Sie zudem über das Unternehmen die Löschung (Ausnahme hierzu siehe Punkt 2.2) ihrer personenbezogenen Daten bei den Empfängern dieser beantragen.
+Ausgenommen von dem Recht auf Löschung sind adressierte Rechnungen, insofern diese noch nicht mehr als sieben Jahre zurückliegen, da eine gesetzliche Aufbewahrungsverpflichtung besteht (Siehe Bundesabgabenordnung § 132).</p>
+<h2>Datensicherheit</h2>
+<p>Gemäß DSGVO werden Ihre personenbezogenen sowie sonstige Daten, die Speicherung im Unternehmenssytem bedürfen, auf gesicherten, Firmeneigenen Servern gespeichert und gegebenenfalls über geschützte Remoteverbindungen aufgerufen.
+Datenträger, mit welchen das Unternehmen zur Datenrettung (oder ähnliche Dienstleistungen) beauftragt wurde werden nur im Falle der aktiven Bearbeitung an Computersysteme angeschlossen und andernfalls sicher verwahrt.
+Sollte es im Unternehmen zu einem Datendiebstahl kommen, von denen Ihre Daten betroffenen sein könnten, werden Sie unverzüglich darüber informiert.
+</p>
+</section>
+</main>
+{%endblock%}
--- a/templates/impressum.html
+++ b/templates/impressum.html
@ -0,0 +1,42 @@
+{% extends "_base.html" %}
+{% block main %}
+<main>
+  <h1>Impressum</h1>
+  <section>
+    <p>
+      ComputerSchaf, Lukas Zehentner e.U.<br>
+      Inhaber Lukas Zehentner BA<br>
+      <br>
+      Eingetragenes Einzelunternehmen<br>
+      <br>
+      IT-Dienstleistungen<br>
+      <br>
+      UID-Nr: - <br>
+      (Unecht umsatzsteuerbefreit gemäß Kleinunternehmerregelung)<br>
+      FN: 594429k<br>
+      FB-Gericht: Innsbruck<br>
+      Sitz: 6063 Rum, Ulmenstraße 65/Top 1<br>
+      Tel: +43 664 1240214<br>
+      E-Mail: office@ComputerSchaf.at<br>
+      <br>
+      Mitglied der WKÖ und der WK Tirol<br>
+      <br>
+      Gewerbeordnung: www.ris.bka.gv.at<br>
+      <br>
+      Zuständige Behörde: BH Innsbruck-Land
+    </p>
+    <p>
+      Verbraucher haben die Möglichkeit,
+      Beschwerden an die Online-
+      Streitbeilegungsplattform der EU zu
+      richten: http://ec.europa.eu/odr.
+      Sie können allfällige Beschwerde auch an
+      die oben angegebene E-Mail-Adresse
+      richten.
+    </p>
+    <p>
+      Blattlinie: Information über die Tätigkeiten und Dienstleistungen der ComputerSchaf, Lukas Zehentner e.U.
+    </p>
+  </section>
+</main>
+{% endblock %}
--- a/templates/index.html
+++ b/templates/index.html
@ -0,0 +1,126 @@
+{% extends "_base.html" %}
+{% block main %}
+<main>
+<!--
+  <h1>Computerschaf</h1>
+-->
+  <section>
+    <div class="section-inner">
+      <h2 id="services">Dienstleistungen</h2>
+      <div class="overview">
+        <div>
+          <a href="#beratung" class="service-link">
+            <img class="service-icon" src="static/img/icons/hilfe.svg" height="256" width="256">
+            <span class="service-name">Hilfe &amp; Beratung</span>
+          </a>
+          <span class="service-desc">
+            Ich helfe Ihnen bei PC Problemen und berate Sie bei Neuanschafungen.
+          </span>
+        </div>
+        <div>
+          <a href="#reparatur" class="service-link">
+            <img class="service-icon" src="static/img/icons/wrench.svg" height="256" width="256">
+            <span class="service-name">Reparatur</span>
+          </a>
+          <span class="service-desc">
+            Ich repariere elektronische Geräte.
+          </span>
+        </div>
+        <div>
+          <a href="#datenrettung" class="service-link">
+            <img class="service-icon" src="static/img/icons/daten.svg" height="256" width="256">
+            <span class="service-name">Datenrettung</span>
+          </a>
+          <span class="service-desc">
+            Ich rette Ihre Daten von defekten Geräten.
+          </span>
+        </div>
+        <div>
+          <a href="#leihe" class="service-link">
+            <img class="service-icon" src="static/img/icons/laptop.svg" height="256" width="256">
+            <span class="service-name">Leihe</span>
+          </a>
+          <span class="service-desc">
+            Während der Reparatur bekommen Sie ein Leihgerät zur Verfügung gestellt.
+          </span>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section>
+    <div class="section-inner">
+      <h2 id="beratung">Hilfe &amp; Beratung</h1>
+      Wieso ist mein Computer so langsam? Wie aktualisiere ich mein Betriebssystem?
+      Welcher Laptop entspricht meinen Bedürfnissen?
+      Für diese und viele andere Fragen stehe ich Ihnen mit Rat und Tat zur Seite.
+    </div>
+  </section>
+  <section>
+    <div class="section-inner">
+      <h2 id="reparatur">Reparatur</h2>
+      <p>
+        Egal ob ein DVD-Laufwerk sich nicht mehr öffnet, ein Lüfter laute Geräusche macht oder
+        der Computer gar nicht mehr hochfährt – ich übernehme für Sie die Diagnose des Problems
+        und erarbeite eine Lösung. Die Erstdiagnose erfolgt direkt bei Ihnen vor Ort – oftmals
+        kann ich Ihren Rechner direkt reparieren und Sie können diesen dann innerhalb kurzer
+        Zeit wieder verwenden.
+      </p>
+      <p>
+        Sollte das Problem spezifische Ersatzteile, ein nicht-mobiles Werkzeug oder eine
+        detailliertere Diagnose benötigen, nehme ich Ihr Gerät mit und repariere es
+        baldmöglichst – beachten Sie hierbei auch die Möglichkeit ein Leihgerät in Anspruch zu
+        nehmen. Je nach Vereinbarung sende ich Ihnen das Gerät nach erfolgter Reparatur
+        postalisch zu oder bringe es Ihnen persönlich vorbei.
+      </p>
+      <p>
+        Selbstverständlich gilt: Wenn sich eine vereinbarte Reparatur als nicht umsetzbar
+        herausstellt, ist diese auch nicht zu zahlen.
+      </p>
+    </div>
+  </section>
+  <section>
+    <div class="section-inner">
+      <h2 id="datenrettung">Datenrettung</h2>
+      <p>
+        Ist ihnen ein wichtiges Dokument verloren gegangen oder möchten Sie Daten von einen
+        kaputten Computer auf ein Neugerät mitnehmen?
+      </p>
+      <p>
+        Hier kann ich helfen! Mittels Softwarelösungen stelle ich Dokumente wieder her, durch
+        Ausbau der Festplatte können selbst von Computern mit Totalschaden oftmals Daten
+        gerettet werden.
+      </p>
+      <p>
+        Bitte beachten Sie, dass der Erfolg einer Datenrettung auch von Ihnen abhängt:
+        Speichern Sie sobald Sie den Verlust einer Datei bemerken möglichst keine Daten mehr
+        auf das betroffene Laufwerk und schließen Sie alle Programme. Wenn Sie gerade an etwas
+        arbeiten, speichern Sie dies auf einen USB-Stick oder eine externe Festplatte.
+      </p>
+      <p>
+        Gerne führe ich auch Backups für Sie durch und konfiguriere Ihren Computer so, dass
+        zukünftige Datenverluste unwahrscheinlicher sind.
+      </p>
+    </div>
+  </section>
+  <section>
+    <div class="section-inner">
+      <h2 id="leihe">Leihe</h2>
+      <p>
+        Gerne können Sie sich einen Laptop oder ein MacBook leihen. Bei diesen Computern
+        handelt es sich um zeitgemäße Office-Geräte mit aktuellen Betriebsystem, frisch für
+        Sie aufgesetzt. Das heißt sie können Software die Sie für Arbeit, Uni oder Privat
+        verwenden auf den Leihcomputer installieren – selbstverständlich helfe ich Ihnen auch
+        hierbei.
+      </p>
+      <p>
+        Wenn ihr eigener Laptop zur Diagnose und Reparatur von mir mitgenommen werden muss,
+        erhalten Sie das Leihgerät für bis zu sieben Tage <b>kostenlos</b>. Sie können die Geräte
+        selbstverständlich auch ohne Reparaturdienste in Anspruch zu nehmen leihen.
+      </p>
+      <p>
+        Für Bedingungen und Konditionen referenzieren Sie bitte folgendes Dokument:
+      </p>
+    </div>
+  </section>
+</main>
+{% endblock %}