Clean repository

.gitignore

@@ -0,0 +1,5 @@
+.~lock*
+/*.html
+*.odt
+*.odg
+zutun.txt

README.md

@@ -0,0 +1,6 @@
+## Build
+
+```
+sudo pip3 install staticjinja
+staticjinja build
+```

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.

robots.txt

@@ -0,0 +1 @@
+Sitemap: https://computerschaf.at/sitemap.txt

sitemap.txt

@@ -0,0 +1,4 @@
+https://computerschaf.at/index.html
+https://computerschaf.at/bedingungen.html
+https://computerschaf.at/impressum.html
+https://computerschaf.at/datenschutz.html

static/fonts/LatoLatin/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.

static/fonts/LatoLatin/LatoLatin.css

@@ -0,0 +1,185 @@
+/*
+ * LatoLatin by Łukasz Dziedzic - http://www.latofonts.com/lato-free-fonts/
+ * License: OFL-1.1
+ */
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Hairline.woff2') format('woff2'),
+         url('woff/LatoLatin Hairline.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Hairline Italic.woff2') format('woff2'),
+         url('woff/LatoLatin Hairline Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: normal;
+    font-weight: 200;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Thin.woff2') format('woff2'),
+         url('woff/LatoLatin Thin.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: italic;
+    font-weight: 200;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Thin Italic.woff2') format('woff2'),
+         url('woff/LatoLatin Thin Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Light.woff2') format('woff2'),
+         url('woff/LatoLatin Light.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Light Italic.woff2') format('woff2'),
+         url('woff/LatoLatin Light Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Regular.woff2') format('woff2'),
+         url('woff/LatoLatin Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Italic.woff2') format('woff2'),
+         url('woff/LatoLatin Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Medium.woff2') format('woff2'),
+         url('woff/LatoLatin Medium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Medium Italic.woff2') format('woff2'),
+         url('woff/LatoLatin Medium Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Semibold.woff2') format('woff2'),
+         url('woff/LatoLatin Semibold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Semibold Italic.woff2') format('woff2'),
+         url('woff/LatoLatin Semibold Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Bold.woff2') format('woff2'),
+         url('woff/LatoLatin Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Bold Italic.woff2') format('woff2'),
+         url('woff/LatoLatin Bold Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Heavy.woff2') format('woff2'),
+         url('woff/LatoLatin Heavy.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: italic;
+    font-weight: 800;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Heavy Italic.woff2') format('woff2'),
+         url('woff/LatoLatin Heavy Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Black.woff2') format('woff2'),
+         url('woff/LatoLatin Black.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'LatoLatin';
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src: local('LatoLatin'),
+         url('woff2/LatoLatin Black Italic.woff2') format('woff2'),
+         url('woff/LatoLatin Black Italic.woff') format('woff');
+}
+

static/img/fotos/thumbnail.py

@@ -0,0 +1,12 @@
+#!/usr/bin/python3
+import sys
+import pathlib
+import subprocess
+
+SIZES = [(320, 240), (480, 360), (640, 480)]
+
+image_path = pathlib.Path(sys.argv[1])
+for width, height in SIZES:
+    thumb_name = image_path.with_name(f"{image_path.stem}_{height}.webp")
+    print(f"Generating {width}x{height} at {thumb_name}")
+    subprocess.run(["convert", str(image_path), "-resize", f"{width}x{height}", thumb_name])

static/img/icons/computer.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 52.7 52.7" style="enable-background:new 0 0 52.7 52.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#65bb50;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
+</style>
+<circle class="st0" cx="172" cy="144" r="26.4"/>
+<rect x="161" y="125.1" style="fill:none;" width="22.3" height="45.3"/>
+<text transform="matrix(1 0 0 1 160.9521 160.4482)" class="st1" style="font-family:'Roboto-Regular'; font-size:47.1027px;">?</text>
+<circle class="st0" cx="26.4" cy="26.4" r="26.4"/>
+<path class="st1" d="M40.8,38.6h-29c-2.7,0-4.8-2.2-4.8-4.8v0h38.7v0C45.6,36.5,43.4,38.6,40.8,38.6z"/>
+<path class="st2" d="M42.2,34.4H10.3V14.9c0-1.2,1-2.2,2.2-2.2H40c1.2,0,2.2,1,2.2,2.2V34.4z"/>
+<circle class="st1" cx="26.7" cy="15.7" r="1"/>
+<path class="st0" d="M31.5,36.7h-9.8c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h9.8c0.4,0,0.7,0.3,0.7,0.7l0,0
+	C32.1,36.4,31.8,36.7,31.5,36.7z"/>
+</svg>

static/img/icons/facebook.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+</style>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-277.375" y1="406.6018" x2="-277.375" y2="407.5726" gradientTransform="matrix(40 0 0 -39.7778 11115.001 16212.334)">
+	<stop  offset="0" style="stop-color:#0062E0"/>
+	<stop  offset="1" style="stop-color:#19AFFF"/>
+</linearGradient>
+<path class="st0" d="M16.7,39.8C7.2,38.1,0,29.9,0,20C0,9,9,0,20,0s20,9,20,20c0,9.9-7.2,18.1-16.7,19.8l-1.1-0.9h-4.4L16.7,39.8z"
+	/>
+<path class="st1" d="M27.8,25.6l0.9-5.6h-5.3v-3.9c0-1.6,0.6-2.8,3-2.8h2.6V8.2c-1.4-0.2-3-0.4-4.4-0.4c-4.6,0-7.8,2.8-7.8,7.8V20
+	h-5v5.6h5v14.1c1.1,0.2,2.2,0.3,3.3,0.3c1.1,0,2.2-0.1,3.3-0.3V25.6H27.8z"/>
+</svg>

static/img/icons/harddrive.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 52.7 52.7" style="enable-background:new 0 0 52.7 52.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#65bb50;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st3{fill:none;stroke:#FFFFFF;stroke-width:0.9886;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st4{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
+</style>
+<circle class="st0" cx="26.4" cy="26.4" r="26.4"/>
+<g>
+	<path class="st1" d="M35.8,10.6c1.3,0,2.4,1.1,2.4,2.4v26.7c0,1.3-1.1,2.4-2.4,2.4H15.5c-1.3,0-2.4-1.1-2.4-2.4V13
+		c0-1.3,1.1-2.4,2.4-2.4H35.8 M35.8,9.6H15.5c-1.9,0-3.4,1.5-3.4,3.4v26.7c0,1.9,1.5,3.4,3.4,3.4h20.3c1.9,0,3.4-1.5,3.4-3.4V13
+		C39.3,11.1,37.7,9.6,35.8,9.6L35.8,9.6z"/>
+</g>
+<g>
+	<circle class="st1" cx="35.2" cy="39.1" r="1.3"/>
+</g>
+<g>
+	<circle class="st1" cx="16.2" cy="13.6" r="1.3"/>
+</g>
+<g>
+	<circle class="st1" cx="35.2" cy="13.6" r="1.3"/>
+</g>
+<path class="st2" d="M23.3,36.9L23.3,36.9l5.1-9.3L18.8,32l0,0c-0.3,0.2-0.7,0.4-0.9,0.6c-1.4,1.3-1.5,3.6-0.2,5
+	c1.3,1.4,3.6,1.5,5,0.2C22.9,37.5,23.2,37.2,23.3,36.9z"/>
+<g>
+	<circle class="st1" cx="20.3" cy="35.1" r="1.8"/>
+</g>
+<path class="st3" d="M17.5,32.6L15,30.2v6.8c0,1.8,1.5,3.3,3.3,3.3h7.4L23,37.8"/>
+<path class="st4" d="M20.3,31.1c-2.4-1.6-4-4.2-4.3-7.2c-0.5-5.4,3.5-10.1,8.8-10.6s10.1,3.5,10.6,8.8c0.5,5.4-3.5,10.1-8.8,10.6
+	c-0.3,0-0.7,0-1,0"/>
+<circle class="st1" cx="25.7" cy="23" r="3.7"/>
+<polygon class="st1" points="15.1,30.9 17.3,32.5 16.9,34.4 17.6,37.4 19.6,38.6 22.9,37.7 25.7,40.4 16.9,40.4 15,37.1 "/>
+</svg>

static/img/icons/mail.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 7.4 7.4" style="enable-background:new 0 0 7.4 7.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#85BE32;}
+	.st1{fill:none;stroke:#000000;stroke-width:0.3;stroke-miterlimit:10;}
+</style>
+<circle class="st0" cx="170.5" cy="142.5" r="26.4"/>
+<rect x="159.4" y="123.6" style="fill:none;" width="22.3" height="45.3"/>
+<text transform="matrix(1 0 0 1 159.4305 158.9266)" style="fill:#FFFFFF; font-family:'Roboto-Regular'; font-size:47.1027px;">?</text>
+<path class="st1" d="M6.7,6H0.8C0.5,6,0.2,5.8,0.2,5.5V2c0-0.3,0.3-0.6,0.6-0.6h5.9C7,1.4,7.2,1.6,7.2,2v3.5C7.2,5.8,7,6,6.7,6z"/>
+<path class="st1" d="M0.3,1.6l2.9,2.7c0.3,0.3,0.8,0.3,1.1,0l2.9-2.7"/>
+<line class="st1" x1="0.3" y1="5.8" x2="2.7" y2="3.9"/>
+<line class="st1" x1="4.7" y1="3.9" x2="7.2" y2="5.7"/>
+</svg>

static/img/icons/questionmark.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 52.7 52.7" style="enable-background:new 0 0 52.7 52.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#65bb50;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle class="st0" cx="172" cy="144" r="26.4"/>
+<rect x="161" y="125.1" style="fill:none;" width="22.3" height="45.3"/>
+<text transform="matrix(1 0 0 1 160.9521 160.4482)" class="st1" style="font-family:'Roboto-Regular'; font-size:47.1027px;">?</text>
+<circle class="st0" cx="26.4" cy="26.4" r="26.4"/>
+<g>
+	<path class="st1" d="M23.5,33.3c0-1.8,0.2-3.3,0.6-4.3c0.4-1.1,1.2-2.2,2.3-3.5l3-3.1c1.3-1.5,1.9-3,1.9-4.7c0-1.6-0.4-2.9-1.3-3.8
+		c-0.8-0.9-2.1-1.4-3.7-1.4c-1.6,0-2.8,0.4-3.8,1.2c-1,0.8-1.4,1.9-1.4,3.3h-4.3c0-2.5,0.9-4.5,2.7-6c1.7-1.5,4-2.3,6.8-2.3
+		c2.9,0,5.2,0.8,6.8,2.3c1.6,1.6,2.4,3.7,2.4,6.4c0,2.7-1.2,5.3-3.7,7.9L29.5,28c-1.1,1.2-1.7,3-1.7,5.4H23.5z M23.4,40.6
+		c0-0.7,0.2-1.3,0.6-1.8c0.4-0.5,1-0.7,1.9-0.7c0.8,0,1.5,0.2,1.9,0.7c0.4,0.5,0.6,1.1,0.6,1.8c0,0.7-0.2,1.3-0.6,1.7
+		c-0.4,0.5-1.1,0.7-1.9,0.7c-0.8,0-1.5-0.2-1.9-0.7C23.6,41.9,23.4,41.3,23.4,40.6z"/>
+</g>
+</svg>

static/img/icons/screwdriver.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 52.7 52.7" style="enable-background:new 0 0 52.7 52.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#65bb50;}
+	.st1{fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
+	.st3{fill:#FFFFFF;}
+</style>
+<circle class="st0" cx="26.4" cy="26.4" r="26.4"/>
+<path class="st1" d="M28.6,30.1l-6.8-4.6l1.3-1.9h0c1.3-0.4,2.2-1.6,2.3-2.9l0.1-0.6l6.2-9.4c1.3-1.9,3.8-2.4,5.7-1.1l0,0
+	c1.9,1.3,2.4,3.8,1.1,5.7l-6.3,9.4L31.6,25c-1.1,0.6-1.8,1.8-1.8,3.1l0,0.1L28.6,30.1z"/>
+<polygon class="st2" points="16,43.8 13.6,42.2 15.1,37.9 16.8,37.5 23.8,26.9 26.2,28.5 19.2,39 19.5,40.8 "/>
+<path class="st3" d="M29,22.2L29,22.2c-0.5-0.4-0.7-1.1-0.3-1.6l5.1-7.6c0.4-0.5,1.1-0.7,1.6-0.3v0c0.5,0.4,0.7,1.1,0.3,1.6
+	l-5.1,7.6C30.3,22.4,29.5,22.6,29,22.2z"/>
+<path class="st3" d="M31.9,10.3L31.9,10.3c0.5,0.4,0.7,1.1,0.3,1.6l-5.1,7.6c-0.4,0.5-1.1,0.7-1.6,0.3h0"/>
+<path class="st3" d="M32.3,24.4c-0.5-0.4-0.7-1.1-0.3-1.6l5.1-7.6c0.4-0.5,1.1-0.7,1.6-0.3"/>
+</svg>

static/img/icons/telephone.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 7.4 7.4" style="enable-background:new 0 0 7.4 7.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#85BE32;}
+	.st1{fill:none;stroke:#000000;stroke-width:0.3;stroke-miterlimit:10;}
+</style>
+<circle class="st0" cx="170.5" cy="142.5" r="26.4"/>
+<rect x="159.4" y="123.6" style="fill:none;" width="22.3" height="45.3"/>
+<text transform="matrix(1 0 0 1 159.4305 158.9266)" style="fill:#FFFFFF; font-family:'Roboto-Regular'; font-size:47.1027px;">?</text>
+<path class="st1" d="M6.9,5.3c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2-0.1-0.3l-0.1,0C6.3,4.4,5.8,4.3,5.3,4.3c-0.1,0-0.2,0.1-0.3,0.2l0,0.2
+	C5,4.8,4.8,4.9,4.6,4.8L4.5,4.8C4.3,4.7,4.1,4.6,4,4.5C3.8,4.3,3.4,3.9,3.2,3.6C3.1,3.5,3,3.4,2.9,3.2L2.8,3.1
+	C2.7,2.9,2.8,2.7,3,2.6l0.2,0c0.1,0,0.2-0.1,0.2-0.3c0-0.5-0.2-1-0.5-1.4l0-0.1C2.8,0.7,2.7,0.7,2.6,0.7c-0.1,0-0.2,0-0.3,0
+	C2.1,0.8,1.2,1,1.2,2.2c0,1.1,1.1,2.3,1.5,2.7c0.4,0.4,1.6,1.5,2.7,1.5C6.7,6.4,6.9,5.5,6.9,5.3z"/>
+</svg>

static/img/icons/youtube.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="300" height="300">
+  <rect width="300" height="300" fill="red" ry="150"/>
+  <path fill="#fff" d="M149.93750587 79.22267364s-63.21885.000059-79.08593926 4.12304707c-8.49578714 2.37380204-15.49140825 9.36950015-17.86523429 17.99023729-4.12295306 15.86710025-4.12304706 48.72656078-4.12304706 48.72656078s.000094 32.98420052 4.12304706 48.60156077c2.37382604 8.62062014 9.24450615 15.49138025 17.86523429 17.86524029 15.99203025 4.24788007 79.08593926 4.24804007 79.08593926 4.24804007s63.34418101-.00005 79.21094127-4.12304007c8.62079014-2.37381004 15.49133025-9.11966015 17.74023028-17.86524029 4.24793007-15.74232025 4.24805007-48.60156077 4.24805007-48.60156077s.12484-32.98446053-4.24805007-48.85156078c-2.24890003-8.62073714-9.11944014-15.49133425-17.74023028-17.74023729-15.86676026-4.37284707-79.21094127-4.37304707-79.21094127-4.37304707zm-20.11523032 40.48046465 52.59961084 30.35938049-52.59961084 30.23438048v-60.59376097z"/>
+</svg>

static/img/logo.svg

@@ -0,0 +1,120 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Ebene_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 110 110"
+   style="enable-background:new 0 0 110 110;"
+   xml:space="preserve"
+   sodipodi:docname="schaf7.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   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"><defs
+   id="defs62">
+	
+
+		
+		
+	
+	
+	
+	
+	
+	
+	
+	
+	
+</defs><sodipodi:namedview
+   id="namedview60"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:showpageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#d1d1d1"
+   showgrid="false"
+   inkscape:zoom="5.6568543"
+   inkscape:cx="65.495765"
+   inkscape:cy="40.923805"
+   inkscape:window-width="1444"
+   inkscape:window-height="1236"
+   inkscape:window-x="899"
+   inkscape:window-y="47"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Ebene_1" />
+<style
+   type="text/css"
+   id="style2">
+	.st0{fill:#828487;}
+	.st1{fill:none;}
+	.st2{display:none;}
+	
+		.st3{display:inline;fill:#FFFFFF;stroke:#E67200;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st4{display:inline;fill:#E67200;}
+	.st5{display:inline;fill:none;stroke:#E67200;stroke-width:1.6783;stroke-miterlimit:10;}
+</style>
+
+<path
+   d="m 103.5,80.1 c 3.4,0 6.1,-2.7 6.1,-6.1 V 6.6 c 0,-3.4 -2.7,-6.1 -6.1,-6.1 H 6.6 C 3.2,0.5 0.5,3.2 0.5,6.6 V 74 c 0,3.4 2.7,6.1 6.1,6.1 h 6.9 V 85 H 6.6 c -3.4,0 -6.1,2.7 -6.1,6.1 v 12.4 c 0,3.4 2.7,6.1 6.1,6.1 h 96.9 c 3.4,0 6.1,-2.7 6.1,-6.1 V 91.1 c 0,-3.4 -2.7,-6.1 -6.1,-6.1 H 95.9 V 80.1 Z M 4.4,74 V 6.6 c 0,-1.2 1,-2.1 2.1,-2.1 h 96.9 c 1.2,0 2.1,1 2.1,2.1 V 74 c 0,1.2 -1,2.1 -2.1,2.1 H 6.6 c -1.2,0 -2.2,-1 -2.2,-2.1 z m 101.2,17.1 v 12.4 c 0,1.2 -1,2.1 -2.1,2.1 H 6.6 c -1.2,0 -2.1,-1 -2.1,-2.1 V 91.1 c 0,-1.2 1,-2.1 2.1,-2.1 h 96.9 c 1.2,-0.1 2.1,0.9 2.1,2.1 z M 91.9,84.9 H 17.5 V 80 h 74.4 z"
+   id="path25" /><path
+   d="M 33.9,99.4 H 15.6 c -1.2,0 -2.2,-1 -2.2,-2.2 0,-1.2 1,-2.2 2.2,-2.2 h 18.3 c 1.2,0 2.2,1 2.2,2.2 0,1.2 -1,2.2 -2.2,2.2"
+   id="path27" /><path
+   d="m 82,97.2 c 0,2.1 -1.7,3.8 -3.8,3.8 -2.1,0 -3.8,-1.7 -3.8,-3.8 0,-2.1 1.7,-3.8 3.8,-3.8 2.1,0 3.8,1.7 3.8,3.8"
+   id="path29" /><path
+   d="m 97.7,97.2 c 0,2.1 -1.7,3.8 -3.8,3.8 -2.1,0 -3.8,-1.7 -3.8,-3.8 0,-2.1 1.7,-3.8 3.8,-3.8 2.1,0 3.8,1.7 3.8,3.8"
+   id="path31" />
+
+
+
+
+
+<path
+   style="fill:none;stroke:#000000;stroke-width:3.154;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+   d="m 54.375376,12.761786 c 0,0 5.905197,-5.2367814 9.191887,-4.3863116 3.002087,0.7768274 5.398824,7.5760546 5.398824,7.5760546 0,0 8.554185,-2.084954 11.034813,0.639303 1.990427,2.185909 -0.316348,8.863403 -0.316348,8.863403 0,0 5.857429,0.09949 7.03375,2.263402 1.097333,2.018616 -1.796145,6.654644 -1.796145,6.654644 0,0 3.626503,3.456227 3.444725,5.656282 -0.215796,2.611878 -5.136194,5.952786 -5.136194,5.952786 0,0 4.619639,4.38657 3.880522,6.190718 -1.233903,3.011888 -7.7713,4.4562 -7.7713,4.4562 0,0 3.927723,3.946056 2.904865,5.877185 -1.567666,2.95972 -9.952863,1.377747 -9.952863,1.377747 0,0 -0.183131,6.13382 -2.468984,7.318355 -3.173638,1.644584 -10.277975,-3.058261 -10.277975,-3.058261 0,0 -5.426228,4.755225 -8.595962,4.294623 -2.834869,-0.411938 -6.276717,-5.870132 -6.276717,-5.870132 0,0 -7.723215,1.629879 -10.320727,-0.635761 -1.962579,-1.711832 -1.535265,-7.660406 -1.535265,-7.660406 0,0 -5.60217,-1.169284 -6.824021,-3.397187 -1.30007,-2.370527 0.855025,-8.065671 0.855025,-8.065671 0,0 -5.548291,-5.068544 -5.203875,-8.322086 0.286415,-2.70562 5.680554,-5.861139 5.680554,-5.861139 0,0 -2.435709,-6.269343 -0.898395,-8.776189 1.398129,-2.279883 7.484481,-2.890727 7.484481,-2.890727 0,0 -0.303729,-4.990609 1.396983,-6.316143 2.398276,-1.869213 9.118176,0.26468 9.118176,0.26468 0,0 0.922024,-5.2375105 3.031544,-5.8893665 2.505345,-0.7741695 6.918622,3.7439975 6.918622,3.7439975 z"
+   id="path1106" /><ellipse
+   style="fill:none;stroke:#000000;stroke-width:3.154;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+   id="path4112"
+   cx="55.060249"
+   cy="40.926701"
+   rx="17.884829"
+   ry="16.795828" /><path
+   style="fill:none;stroke:#000000;stroke-width:3.154;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+   d="m 54.973441,57.040335 0.08325,-7.247891 4.100529,-3.557329 -4.107607,3.568346 -4.196703,-3.60199"
+   id="path4116"
+   sodipodi:nodetypes="ccccc" /><path
+   style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:3.154;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+   id="path4120"
+   sodipodi:type="arc"
+   sodipodi:cx="48.661461"
+   sodipodi:cy="36.788879"
+   sodipodi:rx="0.5609104"
+   sodipodi:ry="1.2656273"
+   sodipodi:start="0"
+   sodipodi:end="6.2830302"
+   sodipodi:open="true"
+   sodipodi:arc-type="arc"
+   d="m 49.222371,36.788879 a 0.5609104,1.2656273 0 0 1 -0.560888,1.265628 0.5609104,1.2656273 0 0 1 -0.560933,-1.265529 0.5609104,1.2656273 0 0 1 0.560846,-1.265726 0.5609104,1.2656273 0 0 1 0.560975,1.265431" /><path
+   style="fill:none;stroke:#000000;stroke-width:3.154;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+   d="m 68.186133,29.71635 c 0,0 7.351256,1.742707 8.906187,2.824988 3.464515,2.411416 4.666354,7.003755 4.666354,7.003755 0,0 -3.393577,-0.261574 -4.999636,-0.776256 -1.520109,-0.487141 -4.277703,-2.152584 -4.277703,-2.152584"
+   id="path4122" /><path
+   style="fill:none;stroke:#000000;stroke-width:3.154;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+   d="m 41.814289,29.71635 c 0,0 -7.351258,1.742707 -8.906189,2.824988 -3.464515,2.411416 -4.666352,7.003755 -4.666352,7.003755 0,0 3.393575,-0.261574 4.999634,-0.776256 1.520108,-0.487141 4.277703,-2.152584 4.277703,-2.152584"
+   id="path6304" /><path
+   style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:3.154;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+   id="ellipse305"
+   sodipodi:type="arc"
+   sodipodi:cx="61.338943"
+   sodipodi:cy="36.689148"
+   sodipodi:rx="0.5609104"
+   sodipodi:ry="1.2656273"
+   sodipodi:start="0"
+   sodipodi:end="6.2823413"
+   sodipodi:arc-type="arc"
+   d="m 61.899854,36.689148 a 0.5609104,1.2656273 0 0 1 -0.560792,1.265627 0.5609104,1.2656273 0 0 1 -0.561029,-1.265093 0.5609104,1.2656273 0 0 1 0.560555,-1.266161 0.5609104,1.2656273 0 0 1 0.561266,1.264559"
+   sodipodi:open="true" /></svg>

static/leaflet/leaflet.css

@@ -0,0 +1,656 @@
+/* required styles */
+
+.leaflet-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-container,
+.leaflet-pane > svg,
+.leaflet-pane > canvas,
+.leaflet-zoom-box,
+.leaflet-image-layer,
+.leaflet-layer {
+	position: absolute;
+	left: 0;
+	top: 0;
+	}
+.leaflet-container {
+	overflow: hidden;
+	}
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	        user-select: none;
+	  -webkit-user-drag: none;
+	}
+/* Prevents IE11 from highlighting tiles in blue */
+.leaflet-tile::selection {
+	background: transparent;
+}
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
+.leaflet-safari .leaflet-tile {
+	image-rendering: -webkit-optimize-contrast;
+	}
+/* hack that prevents hw layers "stretching" when loading new tiles */
+.leaflet-safari .leaflet-tile-container {
+	width: 1600px;
+	height: 1600px;
+	-webkit-transform-origin: 0 0;
+	}
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	display: block;
+	}
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
+.leaflet-container .leaflet-overlay-pane svg {
+	max-width: none !important;
+	max-height: none !important;
+	}
+.leaflet-container .leaflet-marker-pane img,
+.leaflet-container .leaflet-shadow-pane img,
+.leaflet-container .leaflet-tile-pane img,
+.leaflet-container img.leaflet-image-layer,
+.leaflet-container .leaflet-tile {
+	max-width: none !important;
+	max-height: none !important;
+	width: auto;
+	padding: 0;
+	}
+
+.leaflet-container.leaflet-touch-zoom {
+	-ms-touch-action: pan-x pan-y;
+	touch-action: pan-x pan-y;
+	}
+.leaflet-container.leaflet-touch-drag {
+	-ms-touch-action: pinch-zoom;
+	/* Fallback for FF which doesn't support pinch-zoom */
+	touch-action: none;
+	touch-action: pinch-zoom;
+}
+.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.leaflet-container {
+	-webkit-tap-highlight-color: transparent;
+}
+.leaflet-container a {
+	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
+}
+.leaflet-tile {
+	filter: inherit;
+	visibility: hidden;
+	}
+.leaflet-tile-loaded {
+	visibility: inherit;
+	}
+.leaflet-zoom-box {
+	width: 0;
+	height: 0;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	z-index: 800;
+	}
+/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+.leaflet-overlay-pane svg {
+	-moz-user-select: none;
+	}
+
+.leaflet-pane         { z-index: 400; }
+
+.leaflet-tile-pane    { z-index: 200; }
+.leaflet-overlay-pane { z-index: 400; }
+.leaflet-shadow-pane  { z-index: 500; }
+.leaflet-marker-pane  { z-index: 600; }
+.leaflet-tooltip-pane   { z-index: 650; }
+.leaflet-popup-pane   { z-index: 700; }
+
+.leaflet-map-pane canvas { z-index: 100; }
+.leaflet-map-pane svg    { z-index: 200; }
+
+.leaflet-vml-shape {
+	width: 1px;
+	height: 1px;
+	}
+.lvml {
+	behavior: url(#default#VML);
+	display: inline-block;
+	position: absolute;
+	}
+
+
+/* control positioning */
+
+.leaflet-control {
+	position: relative;
+	z-index: 800;
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+.leaflet-top,
+.leaflet-bottom {
+	position: absolute;
+	z-index: 1000;
+	pointer-events: none;
+	}
+.leaflet-top {
+	top: 0;
+	}
+.leaflet-right {
+	right: 0;
+	}
+.leaflet-bottom {
+	bottom: 0;
+	}
+.leaflet-left {
+	left: 0;
+	}
+.leaflet-control {
+	float: left;
+	clear: both;
+	}
+.leaflet-right .leaflet-control {
+	float: right;
+	}
+.leaflet-top .leaflet-control {
+	margin-top: 10px;
+	}
+.leaflet-bottom .leaflet-control {
+	margin-bottom: 10px;
+	}
+.leaflet-left .leaflet-control {
+	margin-left: 10px;
+	}
+.leaflet-right .leaflet-control {
+	margin-right: 10px;
+	}
+
+
+/* zoom and fade animations */
+
+.leaflet-fade-anim .leaflet-popup {
+	opacity: 0;
+	-webkit-transition: opacity 0.2s linear;
+	   -moz-transition: opacity 0.2s linear;
+	        transition: opacity 0.2s linear;
+	}
+.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+	opacity: 1;
+	}
+.leaflet-zoom-animated {
+	-webkit-transform-origin: 0 0;
+	    -ms-transform-origin: 0 0;
+	        transform-origin: 0 0;
+	}
+svg.leaflet-zoom-animated {
+	will-change: transform;
+}
+
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
+	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
+	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
+	}
+.leaflet-zoom-anim .leaflet-tile,
+.leaflet-pan-anim .leaflet-tile {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	        transition: none;
+	}
+
+.leaflet-zoom-anim .leaflet-zoom-hide {
+	visibility: hidden;
+	}
+
+
+/* cursors */
+
+.leaflet-interactive {
+	cursor: pointer;
+	}
+.leaflet-grab {
+	cursor: -webkit-grab;
+	cursor:    -moz-grab;
+	cursor:         grab;
+	}
+.leaflet-crosshair,
+.leaflet-crosshair .leaflet-interactive {
+	cursor: crosshair;
+	}
+.leaflet-popup-pane,
+.leaflet-control {
+	cursor: auto;
+	}
+.leaflet-dragging .leaflet-grab,
+.leaflet-dragging .leaflet-grab .leaflet-interactive,
+.leaflet-dragging .leaflet-marker-draggable {
+	cursor: move;
+	cursor: -webkit-grabbing;
+	cursor:    -moz-grabbing;
+	cursor:         grabbing;
+	}
+
+/* marker & overlays interactivity */
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-image-layer,
+.leaflet-pane > svg path,
+.leaflet-tile-container {
+	pointer-events: none;
+	}
+
+.leaflet-marker-icon.leaflet-interactive,
+.leaflet-image-layer.leaflet-interactive,
+.leaflet-pane > svg path.leaflet-interactive,
+svg.leaflet-image-layer.leaflet-interactive path {
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+
+/* visual tweaks */
+
+.leaflet-container {
+	background: #ddd;
+	outline-offset: 1px;
+	}
+.leaflet-container a {
+	color: #0078A8;
+	}
+.leaflet-zoom-box {
+	border: 2px dotted #38f;
+	background: rgba(255,255,255,0.5);
+	}
+
+
+/* general typography */
+.leaflet-container {
+	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	font-size: 0.75rem;
+	line-height: 1.5;
+	}
+
+
+/* general toolbar styles */
+
+.leaflet-bar {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 4px;
+	}
+.leaflet-bar a {
+	background-color: #fff;
+	border-bottom: 1px solid #ccc;
+	width: 26px;
+	height: 26px;
+	line-height: 26px;
+	display: block;
+	text-align: center;
+	text-decoration: none;
+	color: black;
+	}
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	}
+.leaflet-bar a:hover,
+.leaflet-bar a:focus {
+	background-color: #f4f4f4;
+	}
+.leaflet-bar a:first-child {
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	}
+.leaflet-bar a:last-child {
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border-bottom: none;
+	}
+.leaflet-bar a.leaflet-disabled {
+	cursor: default;
+	background-color: #f4f4f4;
+	color: #bbb;
+	}
+
+.leaflet-touch .leaflet-bar a {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	}
+.leaflet-touch .leaflet-bar a:first-child {
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	}
+.leaflet-touch .leaflet-bar a:last-child {
+	border-bottom-left-radius: 2px;
+	border-bottom-right-radius: 2px;
+	}
+
+/* zoom control */
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+	font: bold 18px 'Lucida Console', Monaco, monospace;
+	text-indent: 1px;
+	}
+
+.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
+	font-size: 22px;
+	}
+
+
+/* layers control */
+
+.leaflet-control-layers {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+	background: #fff;
+	border-radius: 5px;
+	}
+.leaflet-control-layers-toggle {
+	background-image: url(images/layers.png);
+	width: 36px;
+	height: 36px;
+	}
+.leaflet-retina .leaflet-control-layers-toggle {
+	background-image: url(images/layers-2x.png);
+	background-size: 26px 26px;
+	}
+.leaflet-touch .leaflet-control-layers-toggle {
+	width: 44px;
+	height: 44px;
+	}
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+	display: none;
+	}
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+	display: block;
+	position: relative;
+	}
+.leaflet-control-layers-expanded {
+	padding: 6px 10px 6px 6px;
+	color: #333;
+	background: #fff;
+	}
+.leaflet-control-layers-scrollbar {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	padding-right: 5px;
+	}
+.leaflet-control-layers-selector {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
+	}
+.leaflet-control-layers label {
+	display: block;
+	font-size: 13px;
+	font-size: 1.08333em;
+	}
+.leaflet-control-layers-separator {
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+	}
+
+/* Default icon URLs */
+.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
+	background-image: url(images/marker-icon.png);
+	}
+
+
+/* attribution and scale controls */
+
+.leaflet-container .leaflet-control-attribution {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.8);
+	margin: 0;
+	}
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+	padding: 0 5px;
+	color: #333;
+	line-height: 1.4;
+	}
+.leaflet-control-attribution a {
+	text-decoration: none;
+	}
+.leaflet-control-attribution a:hover,
+.leaflet-control-attribution a:focus {
+	text-decoration: underline;
+	}
+.leaflet-attribution-flag {
+	display: inline !important;
+	vertical-align: baseline !important;
+	width: 1em;
+	height: 0.6669em;
+	}
+.leaflet-left .leaflet-control-scale {
+	margin-left: 5px;
+	}
+.leaflet-bottom .leaflet-control-scale {
+	margin-bottom: 5px;
+	}
+.leaflet-control-scale-line {
+	border: 2px solid #777;
+	border-top: none;
+	line-height: 1.1;
+	padding: 2px 5px 1px;
+	white-space: nowrap;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	background: rgba(255, 255, 255, 0.8);
+	text-shadow: 1px 1px #fff;
+	}
+.leaflet-control-scale-line:not(:first-child) {
+	border-top: 2px solid #777;
+	border-bottom: none;
+	margin-top: -2px;
+	}
+.leaflet-control-scale-line:not(:first-child):not(:last-child) {
+	border-bottom: 2px solid #777;
+	}
+
+.leaflet-touch .leaflet-control-attribution,
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	box-shadow: none;
+	}
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	border: 2px solid rgba(0,0,0,0.2);
+	background-clip: padding-box;
+	}
+
+
+/* popup */
+
+.leaflet-popup {
+	position: absolute;
+	text-align: center;
+	margin-bottom: 20px;
+	}
+.leaflet-popup-content-wrapper {
+	padding: 1px;
+	text-align: left;
+	border-radius: 12px;
+	}
+.leaflet-popup-content {
+	margin: 13px 24px 13px 20px;
+	line-height: 1.3;
+	font-size: 13px;
+	font-size: 1.08333em;
+	min-height: 1px;
+	}
+.leaflet-popup-content p {
+	margin: 17px 0;
+	margin: 1.3em 0;
+	}
+.leaflet-popup-tip-container {
+	width: 40px;
+	height: 20px;
+	position: absolute;
+	left: 50%;
+	margin-top: -1px;
+	margin-left: -20px;
+	overflow: hidden;
+	pointer-events: none;
+	}
+.leaflet-popup-tip {
+	width: 17px;
+	height: 17px;
+	padding: 1px;
+
+	margin: -10px auto 0;
+	pointer-events: auto;
+
+	-webkit-transform: rotate(45deg);
+	   -moz-transform: rotate(45deg);
+	    -ms-transform: rotate(45deg);
+	        transform: rotate(45deg);
+	}
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+	background: white;
+	color: #333;
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+	}
+.leaflet-container a.leaflet-popup-close-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	border: none;
+	text-align: center;
+	width: 24px;
+	height: 24px;
+	font: 16px/24px Tahoma, Verdana, sans-serif;
+	color: #757575;
+	text-decoration: none;
+	background: transparent;
+	}
+.leaflet-container a.leaflet-popup-close-button:hover,
+.leaflet-container a.leaflet-popup-close-button:focus {
+	color: #585858;
+	}
+.leaflet-popup-scrolled {
+	overflow: auto;
+	}
+
+.leaflet-oldie .leaflet-popup-content-wrapper {
+	-ms-zoom: 1;
+	}
+.leaflet-oldie .leaflet-popup-tip {
+	width: 24px;
+	margin: 0 auto;
+
+	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+	}
+
+.leaflet-oldie .leaflet-control-zoom,
+.leaflet-oldie .leaflet-control-layers,
+.leaflet-oldie .leaflet-popup-content-wrapper,
+.leaflet-oldie .leaflet-popup-tip {
+	border: 1px solid #999;
+	}
+
+
+/* div icon */
+
+.leaflet-div-icon {
+	background: #fff;
+	border: 1px solid #666;
+	}
+
+
+/* Tooltip */
+/* Base styles for the element that has a tooltip */
+.leaflet-tooltip {
+	position: absolute;
+	padding: 6px;
+	background-color: #fff;
+	border: 1px solid #fff;
+	border-radius: 3px;
+	color: #222;
+	white-space: nowrap;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+	}
+.leaflet-tooltip.leaflet-interactive {
+	cursor: pointer;
+	pointer-events: auto;
+	}
+.leaflet-tooltip-top:before,
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	position: absolute;
+	pointer-events: none;
+	border: 6px solid transparent;
+	background: transparent;
+	content: "";
+	}
+
+/* Directions */
+
+.leaflet-tooltip-bottom {
+	margin-top: 6px;
+}
+.leaflet-tooltip-top {
+	margin-top: -6px;
+}
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-top:before {
+	left: 50%;
+	margin-left: -6px;
+	}
+.leaflet-tooltip-top:before {
+	bottom: 0;
+	margin-bottom: -12px;
+	border-top-color: #fff;
+	}
+.leaflet-tooltip-bottom:before {
+	top: 0;
+	margin-top: -12px;
+	margin-left: -6px;
+	border-bottom-color: #fff;
+	}
+.leaflet-tooltip-left {
+	margin-left: -6px;
+}
+.leaflet-tooltip-right {
+	margin-left: 6px;
+}
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	top: 50%;
+	margin-top: -6px;
+	}
+.leaflet-tooltip-left:before {
+	right: 0;
+	margin-right: -12px;
+	border-left-color: #fff;
+	}
+.leaflet-tooltip-right:before {
+	left: 0;
+	margin-left: -12px;
+	border-right-color: #fff;
+	}
+
+/* Printing */
+	
+@media print {
+	/* Prevent printers from removing background-images of controls. */
+	.leaflet-control {
+		-webkit-print-color-adjust: exact;
+		print-color-adjust: exact;
+		}
+	}

static/map.js

@@ -0,0 +1,274 @@
+var zone_a = L.polygon([
+  [47.2999, 11.4829],
+  [47.2943, 11.4872],
+  [47.2799, 11.4779],
+  [47.2801, 11.4726],
+  [47.2710, 11.4726],
+  [47.2671, 11.4513],
+  [47.2680, 11.4472],
+  [47.2696, 11.4419],
+  [47.2773, 11.4222],
+  [47.2803, 11.4086],
+  [47.2802, 11.4049],
+  [47.2794, 11.4015],
+  [47.2816, 11.4004],
+  [47.2851, 11.4048],
+  [47.2859, 11.4104],
+  [47.2888, 11.4115],
+  [47.2902, 11.4136],
+  [47.2905, 11.4169],
+  [47.2883, 11.4218],
+  [47.2887, 11.4253],
+  [47.2954, 11.4251],
+  [47.2959, 11.4310],
+  [47.2963, 11.4363],
+  [47.2949, 11.4398],
+  [47.2908, 11.4445],
+  [47.2915, 11.4513],
+  [47.2940, 11.4549],
+  [47.2951, 11.4605],
+  [47.2967, 11.4668],
+  [47.3000, 11.4692],
+  [47.3010, 11.4716],
+  [47.3021, 11.4782]
+], {
+  color: "green",
+  fillColor: "#3ef06e",
+  fillOpacity: 0.3
+});
+
+var zone_b_1 = L.polygon([
+  [47.3021, 11.4782],
+  [47.2999, 11.4829],
+  [47.2943, 11.4872],
+  [47.2799, 11.4779],
+  [47.2801, 11.4726],
+  [47.2710, 11.4726],
+  [47.2731, 11.4837],
+  [47.2725, 11.4955],
+  [47.2731, 11.4986],
+  [47.2763, 11.5063],
+  [47.2769, 11.5103],
+  [47.2770, 11.5219],
+  [47.2781, 11.5288],
+  [47.2823, 11.5261],
+  [47.2861, 11.5257],
+  [47.2926, 11.5234],
+  [47.2962, 11.5246],
+  [47.2999, 11.5246],
+  [47.3039, 11.5227],
+  [47.3072, 11.5213],
+  [47.3095, 11.5196],
+  [47.3067, 11.5167],
+  [47.3064, 11.5078]
+]);
+
+var zone_b_2 = L.polygon([
+  [47.2794, 11.4015],
+  [47.2774, 11.3984],
+  [47.2782, 11.3970],
+  [47.2781, 11.3962],
+  [47.2778, 11.3960],
+  [47.2774, 11.3953],
+  [47.2769, 11.3947],
+  [47.2764, 11.3940],
+  [47.2755, 11.3930],
+  [47.2760, 11.3935],
+  [47.2758, 11.3934],
+  [47.2755, 11.3930],
+  [47.2753, 11.3927],
+  [47.2751, 11.3919],
+  [47.2749, 11.3918],
+  [47.2746, 11.3919],
+  [47.2740, 11.3918],
+  [47.2739, 11.3916],
+  [47.2734, 11.3906],
+  [47.2729, 11.3900],
+  [47.2727, 11.3908],
+  [47.2715, 11.3898],
+  [47.2700, 11.3883],
+  [47.2699, 11.3885],
+  [47.2698, 11.3882],
+  [47.2697, 11.3879],
+  [47.2700, 11.3876],
+  [47.2696, 11.3866],
+  [47.2694, 11.3866],
+  [47.2688, 11.3871],
+  [47.2684, 11.3860],
+  [47.2677, 11.3848],
+  [47.2673, 11.3855],
+  [47.2672, 11.3855],
+  [47.2662, 11.3861],
+  [47.2640, 11.3830],
+  [47.2617, 11.3811],
+  [47.2608, 11.3829],
+  [47.2617, 11.3840],
+  [47.2616, 11.3844],
+  [47.2622, 11.3893],
+  [47.2627, 11.3949],
+  [47.2629, 11.3964],
+  [47.2631, 11.3998],
+  [47.2618, 11.3993],
+  [47.2573, 11.4007],
+  [47.2576, 11.4037],
+  [47.2666, 11.4052],
+  [47.2683, 11.4061],
+  [47.2695, 11.4077],
+  [47.2703, 11.4084],
+  [47.2707, 11.4085],
+  [47.2717, 11.4086],
+  [47.2720, 11.4089],
+  [47.2734, 11.4123],
+  [47.2719, 11.4154],
+  [47.2714, 11.4149],
+  [47.2713, 11.4143],
+  [47.2700, 11.4151],
+  [47.2690, 11.4155],
+  [47.2650, 11.4239],
+  [47.2660, 11.4247],
+  [47.2650, 11.4262],
+  [47.2632, 11.4277],
+  [47.2638, 11.4320],
+  [47.2638, 11.4370],
+  [47.2642, 11.4372],
+  [47.2647, 11.4420],
+  [47.2662, 11.4452],
+  [47.2680, 11.4472],
+  [47.2696, 11.4419],
+  [47.2773, 11.4222],
+  [47.2803, 11.4086],
+  [47.2802, 11.4049],
+  [47.2794, 11.4015]
+]);
+
+var zone_c = L.polygon([
+  [47.2617, 11.3811],
+  [47.2608, 11.3829],
+  [47.2617, 11.3840],
+  [47.2616, 11.3844],
+  [47.2622, 11.3893],
+  [47.2627, 11.3949],
+  [47.2629, 11.3964],
+  [47.2631, 11.3998],
+  [47.2618, 11.3993],
+  [47.2573, 11.4007],
+  [47.2576, 11.4037],
+  [47.2666, 11.4052],
+  [47.2683, 11.4061],
+  [47.2695, 11.4077],
+  [47.2703, 11.4084],
+  [47.2707, 11.4085],
+  [47.2717, 11.4086],
+  [47.2720, 11.4089],
+  [47.2734, 11.4123],
+  [47.2719, 11.4154],
+  [47.2714, 11.4149],
+  [47.2713, 11.4143],
+  [47.2700, 11.4151],
+  [47.2690, 11.4155],
+  [47.2650, 11.4239],
+  [47.2660, 11.4247],
+  [47.2650, 11.4262],
+  [47.2632, 11.4277],
+  [47.2638, 11.4320],
+  [47.2638, 11.4370],
+  [47.2642, 11.4372],
+  [47.2647, 11.4420],
+  [47.2662, 11.4452],
+  [47.2680, 11.4472],
+  [47.2671, 11.4513],
+  [47.2624, 11.4510],
+  [47.2612, 11.4386],
+  [47.2574, 11.4307],
+  [47.2555, 11.4246],
+  [47.2541, 11.4172],
+  [47.2516, 11.4021],
+  [47.2491, 11.4025],
+  [47.2473, 11.3949],
+  [47.2522, 11.3917],
+  [47.2533, 11.3888],
+  [47.2528, 11.3842],
+  [47.2537, 11.3730],
+  [47.2570, 11.3767],
+  [47.2581, 11.3752],
+  [47.2644, 11.3725],
+  [47.2662, 11.3726],
+  [47.2669, 11.3733],
+  [47.2678, 11.3730],
+  [47.2682, 11.3721],
+  [47.2691, 11.3714],
+  [47.2702, 11.3700],
+  [47.2721, 11.3697],
+  [47.2735, 11.3702],
+  [47.2813, 11.3858],
+  [47.2805, 11.3926],
+  [47.2805, 11.3975],
+  [47.2816, 11.4004],
+  [47.2794, 11.4015],
+  [47.2774, 11.3984],
+  [47.2782, 11.3970],
+  [47.2781, 11.3962],
+  [47.2778, 11.3960],
+  [47.2774, 11.3953],
+  [47.2769, 11.3947],
+  [47.2764, 11.3940],
+  [47.2755, 11.3930],
+  [47.2760, 11.3935],
+  [47.2758, 11.3934],
+  [47.2755, 11.3930],
+  [47.2753, 11.3927],
+  [47.2751, 11.3919],
+  [47.2749, 11.3918],
+  [47.2746, 11.3919],
+  [47.2740, 11.3918],
+  [47.2739, 11.3916],
+  [47.2734, 11.3906],
+  [47.2729, 11.3900],
+  [47.2727, 11.3908],
+  [47.2715, 11.3898],
+  [47.2700, 11.3883],
+  [47.2699, 11.3885],
+  [47.2698, 11.3882],
+  [47.2697, 11.3879],
+  [47.2700, 11.3876],
+  [47.2696, 11.3866],
+  [47.2694, 11.3866],
+  [47.2688, 11.3871],
+  [47.2684, 11.3860],
+  [47.2677, 11.3848],
+  [47.2673, 11.3855],
+  [47.2672, 11.3855],
+  [47.2662, 11.3861],
+  [47.2640, 11.3830],
+  [47.2617, 11.3811]
+], {
+  color: "orange",
+  fillColor: "#ffeb0a",
+  fillOpacity: 0.3
+});
+
+function initMap(event) {
+  var map = L.map('map', {
+    maxZoom: 18,
+    minZoom: 10,
+    maxBounds: L.latLngBounds(L.latLng(47.3770, 11.2025), L.latLng(47.1770, 11.7025)),
+    maxBoundsViscosity: 1,
+    scrollWheelZoom: false
+  }).setView([47.2770, 11.4525], 12);
+
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+  }).addTo(map);
+
+  //Adding Zones in prefered order, to ensure correct coloring of borders
+  zone_c.addTo(map);
+  zone_a.addTo(map);
+  zone_b_1.addTo(map);
+  zone_b_2.addTo(map);
+}
+
+if (document.getElementById("map") != null) {
+  initMap(null);
+} else {
+  window.addEventListener("DOMContentLoaded", initMap);
+}

static/styles.css

@@ -0,0 +1,391 @@
+*, *: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: 1.25em;
+  font-family: LatoLatin, Lato, Roboto, Noto, sans-serif;
+  text-align: justify;
+}
+
+header, main, footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+main {
+  flex-grow: 1;
+}
+
+.header-contact {
+  background: #DD8033;
+}
+
+.header-nav, footer {
+  background: #65bb50;
+}
+
+.header-contact {
+  width: 100%;
+}
+
+.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: 0.2em 0.3em;
+}
+
+.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;
+  font-weight: 600;
+  margin: 0.2em 0;
+}
+
+.header-nav {
+  width: 100%;
+  position: sticky;
+  z-index: 100;
+  top: 0;
+  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);
+}
+
+.header-contact {
+  width: 100%;
+}
+
+.text-icon {
+  height: 1em;
+  width: auto;
+  vertical-align: middle;
+}
+
+a {
+  text-decoration: none;
+}
+
+a, a:visited, a:hover, a:focus {
+  color: inherit;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.header-title:hover, .service-link:hover, .social-media:hover {
+  text-decoration: none;
+}
+
+.service-icon:hover {
+  filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, .7));
+}
+
+.logo-img {
+  height: 2em;
+  width: auto;
+  margin-right: 0.3em;
+}
+
+.lang-item {
+  margin: 0 0.2em;
+}
+
+h1, h2, h3, h4 {
+  text-align: center;
+}
+
+.intro-text {
+  margin-bottom: 2em;
+  text-align: center;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+.overview {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+  text-align: center;
+}
+
+.overview > * {
+  width: 22%;
+}
+
+.service-link {
+  display: flex;
+  flex-direction: column;
+}
+
+.service-icon {
+  width: 100%;
+  height: auto;
+}
+
+.service-name {
+  font-weight: bold;
+  font-size: 1.2em;
+  margin-bottom: 0.4em;
+  margin-top: 0.9em;
+}
+
+.service:hover > .service-inner {
+  height: 2.5em;
+}
+
+section {
+  background-color: #FFFFFF;
+  width: 100%;
+}
+
+section:nth-child(even) {
+  background-color: #F5F5F5;
+}
+
+.section-inner {
+  max-width: 1000px;
+  width: 100%;
+  margin: auto;
+  padding: 2.5em 0.5em;
+}
+
+.section-inner > *:first-child {
+  margin-top: 0;
+}
+
+.split-section {
+  display: flex;
+  flex-direction: row;
+  gap: 1.5em;
+}
+
+.split-section-reverse {
+  flex-direction: row-reverse;
+}
+
+.split-section-text {
+  width: 70%;
+}
+
+.split-section-text > *:first-child {
+  margin-top: 0;
+}
+
+.split-section-text > *:last-child {
+  margin-bottom: 0;
+}
+
+.split-section-img {
+  width: 30%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.split-section-img a {
+  max-height: 100%;
+}
+
+.split-section-img img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+footer {
+  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;
+}
+
+.social-media {
+  display: inline-flex;
+  margin: 0 0.2em;
+}
+
+.social-icon {
+  height: 3em;
+  width: auto;
+}
+
+.credits {
+  font-size: 0.85em;
+}
+
+.privacy h2, .privacy h3, .privacy h3 {
+  text-align: initial;
+}
+
+#map {
+  height: 400px;
+  z-index: 1;
+}
+
+.zone-heading {
+  text-align: left;
+  margin-top: 1em;
+  margin-bottom: 0.3em;
+}
+
+.legend {
+  width: fit-content;
+  margin: 0.3em auto;
+}
+
+.legend-item {
+  display: inline-flex;
+  margin: 0 0.3em;
+  align-items: center;
+}
+
+.legend-square {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  margin-right: 0.2em;
+  border-radius: 0.2em;
+  border: 1px solid #868686;
+}
+
+.green {
+  background-color: #3ef06e;
+}
+
+.blue {
+  background-color: #3388ff;
+}
+
+.orange {
+  background-color: #ffeb0a;
+}
+
+@media only screen and (max-width:768px) {
+  .header-content {
+    flex-direction: column;
+    align-items: start;
+  }
+
+  .header-nav .header-content {
+    gap: 0.15em;
+  }
+
+  .header-contact .header-content {
+    gap: initial;
+  }
+
+  .nav-img {
+    height: 1.5em;
+  }
+
+  .overview {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1em;
+  }
+
+  .split-section {
+    flex-direction: column;
+    gap: 2em;
+  }
+
+  .split-section-text {
+    width: auto;
+  }
+
+  .split-section-reverse {
+    flex-direction: column;
+  }
+
+  .split-section-img {
+    height: 11em;
+    width: auto;
+    flex-direction: row;
+  }
+
+  .split-section-img a {
+    height: 100%;
+  }
+
+  .split-section-img img {
+    height: 100%;
+    width: auto;
+  }
+
+  .footer-content {
+    flex-direction: column;
+  }
+
+  .footer-content > * {
+    width: initial;
+  }
+
+  .overview > * {
+    width: initial;
+  }
+}

templates/_base.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}ComputerSchaf{% endblock %}</title>
+    <meta name="description" content="ComputerSchaf - Ihr Rundum-Computerservice in Innsbruck & Rum. Ob persönliche Beratung, Datenrettung oder Reparatur, ich helfe Ihnen gerne!">
+    <link rel="stylesheet" href="static/styles.css">
+    <link rel="stylesheet" href="static/fonts/LatoLatin/LatoLatin.css">
+    <link rel="icon" href="static/img/favicon.ico" type="image/icon type">
+    {% block assets %}{% endblock %}
+  </head>
+
+  <body>
+    <div class="header-contact">
+      <div class="header-content">
+        <span>
+          <img width="16" height="16" class="text-icon" src="static/img/icons/telephone.svg" alt="Telefon">
+          <a href="tel:+436641240214">+43 664 1240214</a>
+        </span>
+        <span>
+          <img width="16" height="16" class="text-icon" src="static/img/icons/mail.svg" alt="Email">
+          <a href="mailto:office@computerschaf.at">office@computerschaf.at</a>
+        </span>
+      </div>
+    </div>
+    <header class="header-nav">
+      <nav class="header-content">
+        <a href="index.html" class="header-title">
+            <img src="static/img/logo.svg" alt="" class="logo-img" height="48" width="48" alt="">
+            ComputerSchaf
+        </a>
+        <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>
+          <img width="16" height="16" class="text-icon" src="static/img/icons/telephone.svg" alt="Telefon">
+          <a href="tel:+436641240214">+43 664 1240214</a><br>
+          <img width="16" height="16" class="text-icon" src="static/img/icons/mail.svg" alt="Email">
+          <a href="mailto:office@computerschaf.at">office@computerschaf.at</a><br>
+          Adresse (nur nach Terminvereinbarung):<br>
+          Ulmenstraße 65, 6063 Rum
+        </div>
+        <div class="footer-sep"></div>
+        <div class="footer-social">
+          <h2>Soziale Medien</h2>
+          <a href="https://www.facebook.com/people/ComputerSchaf/100090257378708/" aria-label="Computerschaf auf Facebook" class="social-media" target=" _blank">
+            <img width="48" height="48" class="social-icon" src="static/img/icons/facebook.svg" alt="Facebook">
+          </a>
+          <a href="https://www.instagram.com/ComputerSchaf/" class="social-media" aria-label="Computerschaf auf Instagram" target=" _blank">
+            <img width="48" height="48" class="social-icon" src="static/img/icons/instagram.svg" alt="Instagram">
+          </a>
+          <a href="https://www.youtube.com/channel/UCocc5i1jn2y8plvUp5SM8vQ" aria-label="Computerschaf auf Youtube" class="social-media" target=" _blank">
+            <img width="48" height="48" class="social-icon" src="static/img/icons/youtube.svg" alt="Youtube">
+          </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>
+            Icons von <a href="https://theresagrossalber.at/">Theresa Grossalber</a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>

templates/bedingungen.html

@@ -0,0 +1,106 @@
+{% extends "_base.html" %}
+{% block title %}Bedingungen - ComputerSchaf{% endblock %}
+
+{% block assets %}
+<link rel="stylesheet" href="static/leaflet/leaflet.css">
+<script defer src="static/leaflet/leaflet.js"></script>
+<script defer src="static/map.js"></script>
+{% endblock %}
+
+{% block main %}
+<main>
+  <h1>Bedingungen</h1>
+  <section>
+    <div class="section-inner">
+      <h2 id="services">Dienstleistungen</h2>
+      <p>
+        Reparatur, Datenrettung, Beratung/Hilfe, Verleih von Laptops
+      </p>
+      <p>
+        Stundensatz Reparatur/Datenrettung: € 60,-<br>
+        Stundensatz Beratung/Hilfe: € 50,-<br>
+        Die Verrechnung erfolgt generell Viertelstündlich, jedoch wird mindestens eine halbe Stunde in Rechnung gestellt.<br> 
+        Eventueller Materialaufwand separat zu zahlen - Informationen diesbezüglich werden vor Reparaturen bekannt gegeben
+      </p>
+    </div>
+  </section>
+  <section>
+    <div class="section-inner">
+      <h2 id="rental">Verleih</h2>
+      <p>
+       Benötigen Sie sofort einen funktionstüchtigen Laptop mit allen geläufigen Office-Programmen? Ich biete Ihnen sowohl Windows-Laptops als auch MacBooks zu Verleih 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 class="section-inner">
+      <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 verliehenen Zubehör (z.B. Ladegeräte, DVD-Brenner, etc.) retourniert worden ist. Für verspätete Rückgaben wird eine Verspätungsgebühr verrechnet.
+      </p>
+      <p>
+        Für die Rückgabe per Rückversand, hat der Versand spätestens am Rückgabetag in einem geeigneten Paket zu erfolgen. Hierfür wird Ihnen ein Rücksendeetikett per Mail zur Verfügung gestellt. 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 Unkostenpreis von € 10,- verrechnet.<br>
+        Abholung von Leihgeräten bei Ihnen Vorort ist nach zu vereinbarenden Bedingungen möglich.<br>
+        Persönliche Rückgabe am Firmenstandort ist ohne Mehrkosten nach telefonischer Anmeldung möglich.
+      </p>
+    </div>
+  </section>
+  <section>
+    <div class="section-inner">
+      <h2>Anfahrtskosten</h2>
+      <div id="map"></div>
+      <div class="legend">
+        <span class="legend-item">
+          <span class="legend-square green"></span><span>Zone A</span>
+        </span>
+        <span class="legend-item">
+          <span class="legend-square blue"></span><span>Zone B</span>
+        </span>
+        <span class="legend-item">
+          <span class="legend-square orange"></span><span>Zone C</span>
+        </span>
+      </div>
+      <p>
+        <h3 class="zone-heading">Zone A</h3>
+        <p>
+          Innsbruck: Arzl, Olympisches Dorf, Mühlau<sup>1</sup> / Rum, Neu-Rum, Thaur<br>
+          Anfahrtskosten: € 10,- – Erstmalige Anfahrt kostenlos!
+        </p>
+        <h3 class="zone-heading">Zone B</h3>
+        <p>
+          Innsbruck: Saggen, Mariahilf-St. Nikolaus, Dreiheiligen, Innenstadt, Reichenau / Hall in Tirol, Absam<br>
+          Anfahrtkosten: € 25,-
+        </p>
+        <h3 class="zone-heading">Zone C</h3>
+        <p>
+          Innsbruck: Hötting-Mitte<sup>1</sup>, Pradl, Wilten<sup>2</sup><br>
+          Anfahrtkosten: € 40,-
+        </p>
+        <sup>1</sup> Ausgenommen Hungerburg<br>
+        <sup>2</sup> Ausgenommen Mentlberg und Sieglanger<br>
+      </p>
+    </div>
+  </section>
+  <section>
+    <div class="section-inner">
+      <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 %}

templates/datenschutz.html

@@ -0,0 +1,47 @@
+{% extends "_base.html" %}
+{% block title %}Datenschutz - ComputerSchaf{% endblock %}
+
+{% block main %}
+<main class="privacy">
+  <h1>Datenschutz</h1>
+  <section>
+    <div class="section-inner">
+      <h2>1 Ihre Daten auf dieser Webseite</h2>
+      <p>Auf der Webseite ComputerSchaf.at werden weder durch ComputerSchaf 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>
+    </div>
+  </section>
+  <h1>DSGVO-Bestimmungen</h1>
+  <section>
+    <div class="section-inner">
+      <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>
+    </div>
+  </section>
+</main>
+{%endblock%}

templates/impressum.html

@@ -0,0 +1,46 @@
+{% extends "_base.html" %}
+{% block title %}Impressum - ComputerSchaf{% endblock %}
+
+{% block main %}
+<main>
+  <h1>Impressum</h1>
+  <section>
+    <div class="section-inner">
+      <p>
+        ComputerSchaf<br>
+        Inhaberin Lucia 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 e.U.
+      </p>
+    </div>
+  </section>
+</main>
+{% endblock %}

templates/index.html

@@ -0,0 +1,154 @@
+{% extends "_base.html" %}
+{% block main %}
+<main>
+  <section>
+    <div class="section-inner">
+      <div class="intro-text">
+        ComputerSchaf ist Ihr Rundum-Computerservice aus Rum. Gerne komme ich in Innsbruck, Rum,
+        Thaur oder Hall persönlich bei Ihnen vorbei und erarbeite maßgeschneiderte Lösungen für Sie.
+        Ich biete Ihnen folgende Dienstleistungen:
+      </div>
+      <div class="overview">
+        <div>
+          <a href="#beratung" class="service-link">
+            <img class="service-icon" src="static/img/icons/questionmark.svg" height="256" width="256" alt="">
+            <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/screwdriver.svg" height="256" width="256" alt="">
+            <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/harddrive.svg" height="256" width="256" alt="">
+            <span class="service-name">Datenrettung</span>
+          </a>
+          <span class="service-desc">
+            Ich rette Ihre Daten von defekten Geräten.
+          </span>
+        </div>
+        <div>
+          <a href="#verleih" class="service-link">
+            <img class="service-icon" src="static/img/icons/computer.svg" height="256" width="256" alt="">
+            <span class="service-name">Verleih</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>
+      <div class="split-section">
+        <div class="split-section-text">
+          <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>
+        <div class="split-section-img">
+          <a href="static/img/fotos/laptop_matte.jpeg">
+            <img
+              width="320" height="240" src="static/img/fotos/laptop_matte_240.webp"
+              srcset="static/img/fotos/laptop_matte_240.webp 1x,
+                      static/img/fotos/laptop_matte_360.webp 1.5x,
+                      static/img/fotos/laptop_matte_480.webp 2x"
+              alt="Laptop zur Reparatur geöffnet auf einer Arbeitsunterlage"
+            >
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section>
+    <div class="section-inner">
+      <h2 id="datenrettung">Datenrettung</h2>
+      <div class="split-section split-section-reverse">
+        <div class="split-section-text">
+          <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>
+        <div class="split-section-img">
+          <a href="static/img/fotos/datentraeger.jpeg">
+            <img
+              width="320" height="240" src="static/img/fotos/datentraeger_240.webp"
+              srcset="static/img/fotos/datentraeger_240.webp 1x,
+                      static/img/fotos/datentraeger_360.webp 1.5x,
+                      static/img/fotos/datentraeger_480.webp 2x"
+              alt="Geöffnetes Gehäuse eines SSD Datenträgers"
+            >
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section>
+    <div class="section-inner">
+      <h2 id="verleih">Verleih</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>
+    </div>
+  </section>
+</main>
+{% endblock %}