--- marp: true theme: gaia paginate: true backgroundColor: #fff header: "Grundlagen IT- und Internettechnik (223015c)" footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26" title: "Termin 2: Netzwerke, Protokolle & CSS" --- ![bg fit opacity:0.2](./assets/background-termin-2.png) # Grundlagen IT- und Internettechnik **223015c** · Modul "Technik 1" · 1. Semester Digital- und Medienwirtschaft Hochschule der Medien Stuttgart **Wintersemester 2025/26** [https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/) --- ![bg fit](./assets/qr/slides-223015c.png) --- # Termin 2 – 10.01.2026 ## Netzwerke, Protokolle & CSS --- # Agenda **Teil 1:** - Netzwerke (OSI, TCP/IP) - DNS: Wie funktionieren Domain-Namen? - HTTP(S) im Detail **Teil 2:** - CSS-Grundlagen - "Barrierefreiheit" (a11y, WCAG) - Selektoren & Spezifität - Hands-On: Styling --- # Ressourcen zum Selbstlernen * Online Code-Editor: https://codepen.io/pen/ * MDN (Mozilla Developer Network): https://developer.mozilla.org/de/ * HTML-Referenz: https://nextlevelshit.github.io/html-over-js/ * CSS lernen: https://codescripsi.es/ * Flexbox-Spiel: https://flexboxfroggy.com/ * Grid-Spiel: https://cssgridgarden.com/ --- # Teil 1: Rechner verbinden ## Netzwerk-Grundlagen --- # Warum Rechner verbinden? - Daten und Informationen teilen - Zusammenarbeiten & Kollaboration - Kommunizieren - Ressourcen teilen (Drucker, Speicher, andere Geräte) --- # Kommunikationsarten | Kategorie | Beispiel | |-----------|----------| | **Synchron** | Telefonat, Video-Call | | **Asynchron** | E-Mail, Brief, SMS | | **Verbindungsorientiert** | Telefon (Leitung aufbauen) | | **Verbindungslos** | Brief, Postkarte | --- # Das OSI-Modell **7 Schichten der Netzwerkkommunikation:** | Schicht | Name | Beispiel | |---------|------|----------| | 7 | Anwendung | HTTP, FTP, SMTP | | 6 | Darstellung | Verschlüsselung, Kompression | | 5 | Sitzung | Sessions | | 4 | Transport | TCP, UDP | | 3 | Vermittlung | IP, Routing | | 2 | Sicherung | Ethernet, MAC | | 1 | Bitübertragung | Kabel, WLAN | --- # TCP/IP: Die Praxis **Das Internet nutzt TCP/IP (4 Schichten):** | TCP/IP | Entspricht OSI | Protokolle | |--------|----------------|------------| | Anwendung | 5-7 | HTTP, DNS, SMTP | | Transport | 4 | TCP, UDP | | Internet | 3 | IP | | Netzzugang | 1-2 | Ethernet, WLAN | **TCP/IP = Transmission Control Protocol / Internet Protocol** --- # IP-Adressen **Jeder Rechner im Netzwerk braucht eine Adresse** **IPv4:** 4 Zahlen (0-255), Punkt-getrennt `192.168.1.1` **Problem:** 2⁸·2⁸·2⁸·2⁸ = 2³² = nur 4,3 Milliarden Adressen → Reicht nicht für alle Geräte! **IPv6:** 128 Bit = 3,4 × 10³⁸ Adressen `2001:0db8:85a3:0000:0000:8a2e:0370:7334` --- # Spezielle IP-Adressen | Adresse | Bedeutung | |---------|-----------| | `127.0.0.1` | **Localhost** – Ihr eigener Rechner | | `192.168.x.x` | Private Adressen (Heimnetz) | | `10.x.x.x` | Private Adressen (Firmen) | **Localhost = "Ich selbst"** → Perfekt für Web-Entwicklung! --- # Ports: Die Türnummern **IP-Adresse = Hausnummer** **Port = Wohnungstür** | Port | Dienst | |------|--------| | 80 | HTTP (Web) | | 443 | HTTPS (Web, verschlüsselt) | | 22 | SSH (Terminal) | | 25 | SMTP (E-Mail senden) | **Beispiel:** `192.168.1.1:8080` (IP-Adresse : Port) --- # Routing: Der Weg durchs Netz **Router = Postamt** - Entscheidet, wohin Pakete gehen - Findet besten Weg - Pakete können verschiedene Wege nehmen! **Traceroute:** Zeigt den Weg ```bash traceroute google.de # Mac/Linux tracert google.de # Windows ``` --- # Teil 1: Netzwerke ## Wie Daten reisen --- # Wiederholung: OSI-Modell **Merksatz:** "**A**lle **d**eutschen **S**tudierenden **t**rinken **v**erschiedene **S**orten **B**ier/Brause" | Schicht | Name | Merksatz | |---------|------|----------| | 7 | **A**nwendung | **A**lle | | 6 | **D**arstellung | **d**eutschen | | 5 | **S**itzung | **S**tudierenden | | 4 | **T**ransport | **t**rinken | | 3 | **V**ermittlung | **v**erschiedene | | 2 | **S**icherung | **S**orten | | 1 | **B**itübertragung | **B**ier/Brause | --- # OSI vs. TCP/IP ``` OSI-Modell TCP/IP-Modell ┌─────────────────┐ ┌─────────────────┐ │ 7. Anwendung │ │ │ ├─────────────────┤ │ Anwendung │ │ 6. Darstellung │ │ (HTTP, DNS, │ ├─────────────────┤ │ SMTP, FTP) │ │ 5. Sitzung │ │ │ ├─────────────────┤ ├─────────────────┤ │ 4. Transport │ │ Transport │ │ │ │ (TCP, UDP) │ ├─────────────────┤ ├─────────────────┤ │ 3. Vermittlung │ │ Internet │ │ │ │ (IP) │ ├─────────────────┤ ├─────────────────┤ │ 2. Sicherung │ │ │ ├─────────────────┤ │ Netzzugang │ │ 1. Bitübertrag │ │ │ └─────────────────┘ └─────────────────┘ ``` --- # Schicht 1: Bitübertragung **Physikalische Übertragung von Bits** | Medium | Beschreibung | |--------|--------------| | **Kupferkabel** | Elektrische Signale (Ethernet) | | **Glasfaser** | Lichtimpulse (schnell, weit) | | **Funk** | Elektromagnetische Wellen (WLAN, 5G) | **Einheiten:** - Bit/s, kbit/s, Mbit/s, Gbit/s - **Achtung:** 100 Mbit/s ≠ 100 MB/s! --- # Schicht 2: Sicherung **MAC-Adressen: Hardware-Identifikation** ``` 00:1A:2B:3C:4D:5E ``` - 48 Bit = 6 Bytes - **Weltweit eindeutig** (in Theorie) - In Netzwerkkarte "eingebrannt" **Ethernet-Frame:** ``` ┌────────┬────────┬────────┬────────┬─────┐ │Präambel│Ziel-MAC│Src-MAC │ Daten │ FCS │ └────────┴────────┴────────┴────────┴─────┘ ``` --- # Schicht 3: Vermittlung (IP) **IP-Adressen: Logische Adressierung** ``` IPv4: 192.168.1.100 (32 Bit) IPv6: 2001:db8::1 (128 Bit) ``` **Subnetzmaske:** Trennt Netzwerk von Host ``` IP: 192.168. 1.100 Maske: 255.255.255. 0 └─Netzwerk─┘└Host┘ ``` **Router** arbeiten auf Layer 3 (IP-Routing) --- # Schicht 4: Transport **TCP vs. UDP** | Eigenschaft | TCP | UDP | |-------------|-----|-----| | Verbindung | Ja (3-Way-Handshake) | Nein | | Zuverlässig | Ja (Bestätigung) | Nein | | Reihenfolge | Garantiert | Nicht garantiert | | Geschwindigkeit | Langsamer | Schneller | | Anwendung | Web, E-Mail | Streaming, Gaming | --- # TCP: 3-Way-Handshake ``` Client Server │ │ │──── SYN (Seq=100) ──────────>│ │ │ │<─── SYN-ACK (Seq=300, Ack=101)│ │ │ │──── ACK (Seq=101, Ack=301) ──>│ │ │ │ Verbindung hergestellt │ ``` **SYN** = Synchronize **ACK** = Acknowledge --- # Schicht 5: Sitzung (Session) **Verwaltet Verbindungen zwischen Anwendungen:** - **Sessions** → Login-Sitzungen, "eingeloggt bleiben" - **Dialogsteuerung** → Wer darf wann senden? - **Synchronisation** → Wiederaufnahme nach Abbruch **Beispiele:** - Web-Sessions (Cookies, Tokens) - RPC (Remote Procedure Call) - NetBIOS --- # Schicht 6: Darstellung (Presentation) **Übersetzt Datenformate:** | Funktion | Beispiel | |----------|----------| | **Encoding** | UTF-8, ASCII, Unicode | | **Verschlüsselung** | TLS/SSL (HTTPS) | | **Kompression** | gzip, deflate | | **Serialisierung** | JSON, XML, Protobuf | **TLS/SSL:** Transport Layer Security → Verschlüsselt HTTP zu HTTPS --- # Schicht 7: Anwendung **Protokolle, die wir täglich nutzen:** | Protokoll | Port | Funktion | |-----------|------|----------| | **HTTP** | 80 | Webseiten (unverschlüsselt) | | **HTTPS** | 443 | Webseiten (TLS-verschlüsselt) | | **DNS** | 53 | Namensauflösung | | **SMTP** | 25/587 | E-Mail senden | | **IMAP** | 993 | E-Mail abrufen | | **SSH** | 22 | Sichere Fernsteuerung | --- # DNS: Das Telefonbuch des Internets --- # Das Problem **Menschen:** `www.hdm-stuttgart.de` **Computer:** `212.132.79.37` **DNS** = Domain Name System → Übersetzt Namen in IP-Adressen --- # DNS-Hierarchie ``` (Root) . / | \ / | \ .de .org .com / \ hdm-stuttgart google | | www mail ``` **FQDN:** `www.hdm-stuttgart.de.` (mit Punkt am Ende!) --- # DNS-Auflösung ``` 1. Browser fragt lokalen DNS-Resolver 2. Resolver fragt Root-Server → ".de ist bei..." 3. Resolver fragt .de-Server → "hdm-stuttgart bei..." 4. Resolver fragt hdm-Server → "www = 212.132.79.37" 5. Resolver cached Antwort 6. Browser verbindet zu 212.132.79.37 ``` **Caching:** Antworten werden gespeichert → Schneller bei wiederholten Anfragen --- # DNS-Records | Typ | Bedeutung | Beispiel | |-----|-----------|----------| | **A** | IPv4-Adresse | `www → 212.132.79.37` | | **AAAA** | IPv6-Adresse | `www → 2001:db8::1` | | **CNAME** | Alias | `blog → www.example.com` | | **MX** | Mail-Server | `@ → mail.example.com` | | **TXT** | Text (Verifikation) | `"v=spf1..."` | --- # URLs & Domains **URL** = Uniform Resource Locator ``` https://www.example.com:443/pfad/seite.html?suche=test#kapitel2 └─┬──┘ └──────┬──────┘└┬┘ └──────┬──────┘ └───┬────┘ └──┬───┘ Protokoll Hostname Port Pfad Query Fragment ``` | Begriff | Erklärung | |---------|-----------| | **Domain** | `example.com` (registrierter Name) | | **Subdomain** | `www`, `mail`, `api` (Prefix) | | **Hostname** | `www.example.com` (vollständig) | | **Port** | Standard: 80 (HTTP), 443 (HTTPS) | --- # HTTP/S im Detail --- # HTTP-Request ```http GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Accept: text/html,application/xhtml+xml Accept-Language: de-DE,de;q=0.9,en;q=0.8 Connection: keep-alive ``` | Teil | Bedeutung | |------|-----------| | `GET` | Methode (was will ich?) | | `/index.html` | Pfad (welche Ressource?) | | `HTTP/1.1` | Protokoll-Version | | `Host:` | Ziel-Server | --- # HTTP-Response ```http HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Content-Length: 1234 ... ``` **Status-Codes:** - **2xx** Erfolg - **3xx** Umleitung - **4xx** Client-Fehler (Browser, App, WhatsApp) - **5xx** Server-Fehler (Instagram, Google, HdM) --- # HTTP-Methoden | Methode | CRUD | Zweck | Beispiel | |---------|------|-------|----------| | **GET** | Read | Daten abrufen | Seite laden | | **POST** | Create | Daten senden | Formular absenden | | **PUT** | Update | Daten ersetzen | Profil aktualisieren | | **PATCH** | Update | Daten teilweise ändern | Einzelnes Feld | | **DELETE** | Delete | Daten löschen | Account löschen | --- # Teil 2: CSS ## Webseiten gestalten --- # Was ist CSS? **C**ascading **S**tyle **S**heets - Trennt **Inhalt** (HTML) von **Darstellung** (CSS) - "Cascading" = Regeln können überschrieben werden - Eine CSS-Datei für viele HTML-Seiten ```css p { color: blue; font-size: 16px; } ``` --- # CSS einbinden **Option 1: Externe Datei** (empfohlen!) ```html ``` **Option 2: Style-Tag** ```html ``` **Option 3: Inline als HTML-Attribute** (vermeiden!) ```html

...

``` --- # CSS-Anatomie ```css selector { property: value; property: value; } ``` **Beispiel:** ```css h1 { color: #333333; font-size: 2rem; margin-bottom: 1rem; } ``` --- # Selektoren: Element ```css /* Alle

-Elemente */ p { color: gray; } /* Alle

-Elemente */ h1 { font-size: 2rem; } /* Mehrere Elemente */ h1, h2, h3 { font-family: sans-serif; } ``` --- # Selektoren: Klasse ```html

Dieser Text ist wichtig.

Dieser nicht.

``` ```css /* Alle Elemente mit class="wichtig" */ .wichtig { color: red; font-weight: bold; } ``` **Punkt** vor dem Namen = Klasse --- # Selektoren: ID ```html ``` ```css /* Element mit id="hauptnavigation" */ #hauptnavigation { background: #333; padding: 1rem; } ``` **Raute** vor dem Namen = ID ⚠️ IDs sollten **einmalig** pro Seite sein! --- # Selektoren: Kombinationen ```css /* Nachfahre (egal wie tief verschachtelt) */ article p { line-height: 1.6; } /* Direktes Kind */ nav > a { text-decoration: none; } /* Nächstes Geschwister */ h2 + p { font-size: 1.2rem; } /* Element mit Klasse */ p.wichtig { color: red; } ``` --- # Spezifität: Wer gewinnt? **Wenn mehrere Regeln auf ein Element zutreffen:** | Selektor | Spezifität | |----------|------------| | Element (`p`) | 0,0,0,1 | | Klasse (`.wichtig`) | 0,0,1,0 | | ID (`#header`) | 0,1,0,0 | | Inline (`style="..."`) | 1,0,0,0 | **Höhere Spezifität gewinnt!** ```css p { color: blue; } /* 0,0,0,1 */ .text { color: green; } /* 0,0,1,0 → gewinnt! */ ``` --- # Box-Modell ``` ┌─────────────────────────────────────┐ │ margin │ │ ┌─────────────────────────────┐ │ │ │ border │ │ │ │ ┌─────────────────────┐ │ │ │ │ │ padding │ │ │ │ │ │ ┌─────────────┐ │ │ │ │ │ │ │ content │ │ │ │ │ │ │ └─────────────┘ │ │ │ │ │ └─────────────────────┘ │ │ │ └─────────────────────────────┘ │ └─────────────────────────────────────┘ ``` --- # Box-Modell: CSS ```css .box { /* Inhalt */ width: 200px; height: 100px; /* Innenabstand */ padding: 20px; /* Rahmen */ border: 2px solid black; /* Außenabstand */ margin: 10px; /* Berechnung vereinfachen */ box-sizing: border-box; } ``` --- # Farben in CSS ```css /* Keyword */ color: red; color: rebeccapurple; /* Hex (RGB) */ color: #FF0000; color: #F00; /* Kurzform */ /* RGB/RGBA */ color: rgb(255, 0, 0); color: rgba(255, 0, 0, 0.5); /* 50% transparent */ /* HSL */ color: hsl(0, 100%, 50%); /* Hue, Saturation, Lightness */ ``` --- # Einheiten | Einheit | Bedeutung | Beispiel | |---------|-----------|----------| | `px` | Pixel (absolut) | `font-size: 16px` | | `%` | Prozent vom Parent | `width: 50%` | | `em` | Relativ zur Schriftgröße | `padding: 1em` | | `rem` | Relativ zur Root-Schriftgröße | `font-size: 1.5rem` | | `vw/vh` | Viewport-Breite/-Höhe | `height: 100vh` | **Empfehlung:** `rem` für Schrift, `%` oder `vw/vh` für Layout --- # "Barrierefreiheit" ## a11y – Accessibility --- # Wie nutzen Menschen das Web? | Eingabe | Nutzungsweise | |---------|---------------| | **Maus** | Klicken, Scrollen | | **Tastatur** | Tab-Navigation, Enter, Pfeiltasten | | **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, JAWS) | | **Sprachsteuerung** | "Klicke auf Anmelden" | | **Augensteuerung** | Eye-Tracking | | **Switch-Geräte** | Ein-/Aus-Schalter | → **Nicht alle nutzen Maus + Bildschirm!** --- # Warum "Barrierefreiheit"? **Rechtlich:** - EU: European Accessibility Act (seit Juni 2025 in Kraft!) - DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen **Ethisch:** - Teilhabe für alle Menschen - Digitale Inklusion **Praktisch:** - Bessere UX für **alle** (SEO, Mobile, ältere Menschen) - Größerer Markt (~15% der Bevölkerung) --- # WCAG: Der Standard **W**eb **C**ontent **A**ccessibility **G**uidelines **4 Prinzipien (POUR):** | Prinzip | Bedeutung | |---------|-----------| | **Perceivable** | Wahrnehmbar – Inhalte müssen erkennbar sein | | **Operable** | Bedienbar – Funktionen müssen nutzbar sein | | **Understandable** | Verständlich – Inhalte müssen klar sein | | **Robust** | Robust – Funktioniert mit verschiedenen Technologien | --- # Perceivable: Wahrnehmbar **Textalternativen für Nicht-Text:** ```html Unser Team bei der Weihnachtsfeier 2024 ``` **Kontrast:** Mindestens 4.5:1 für Text **Untertitel:** Videos brauchen Captions **Responsive:** Inhalte bei 200% Zoom nutzbar --- # Operable: Bedienbar **Tastaturzugänglich:** ```css /* Fokus-Indikator NIE entfernen! */ :focus { outline: 2px solid blue; outline-offset: 2px; } /* Wenn custom styling: */ button:focus-visible { box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5); } ``` **Genug Zeit:** Keine automatischen Timeouts ohne Warnung **Keine Blitze:** Nichts blinkt mehr als 3x pro Sekunde --- # Understandable: Verständlich **Sprache angeben:** ```html ``` **Konsistente Navigation:** Gleiche Elemente an gleicher Stelle **Fehler erklären:** ```html ``` --- # Robust: Technisch solide **Semantisches HTML:** ```html
Klick mich
``` **ARIA nur wenn nötig:** ```html
``` --- # Barrieren im Netz vermeiden (a11y) **Tastatur-Test:** - Alle Funktionen nur mit Tab + Enter nutzbar? - Fokus immer sichtbar? - Logische Tab-Reihenfolge? **Screenreader-Test:** - VoiceOver (Mac): `Cmd + F5` - NVDA (Windows): Gratis-Download **Tools:** - axe DevTools, WAVE (Browser-Extensions) - Lighthouse (in Chrome DevTools) --- # Teil 3: Layouts (optional) ## Flexbox & mehr --- # Das Layout-Problem **Früher:** - `float: left` (Hack!) - Tabellen für Layout (Horror!) - Absolute Positionierung **Heute:** - **Flexbox** – Eindimensional (Zeile ODER Spalte) - **Grid** – Zweidimensional (Zeilen UND Spalten) --- # Flexbox: Grundlagen ```css .container { display: flex; } ``` ```html
Item 1
Item 2
Item 3
``` **Ergebnis:** Items nebeneinander (Zeile) --- # Flexbox: Richtung ```css .container { display: flex; flex-direction: row; /* Standard: Zeile */ flex-direction: column; /* Spalte */ flex-direction: row-reverse; flex-direction: column-reverse; } ``` --- # Flexbox: Ausrichtung ```css .container { display: flex; /* Hauptachse (horizontal bei row) */ justify-content: flex-start; /* Links */ justify-content: center; /* Mitte */ justify-content: flex-end; /* Rechts */ justify-content: space-between; /* Verteilt */ justify-content: space-around; /* Querachse (vertikal bei row) */ align-items: flex-start; /* Oben */ align-items: center; /* Mitte */ align-items: flex-end; /* Unten */ align-items: stretch; /* Strecken */ } ``` --- # Flexbox: Zentrieren **Das berühmte "Vertikal zentrieren":** ```css .container { display: flex; justify-content: center; /* Horizontal */ align-items: center; /* Vertikal */ height: 100vh; /* Volle Höhe */ } ``` **Früher:** Dutzende Hacks nötig **Heute:** 3 Zeilen CSS --- # Flexbox: Items ```css .item { /* Wachsen */ flex-grow: 1; /* Nimmt verfügbaren Platz */ /* Schrumpfen */ flex-shrink: 1; /* Schrumpft bei Platzmangel */ /* Basisgröße */ flex-basis: 200px; /* Kurzform */ flex: 1; /* grow: 1, shrink: 1, basis: 0 */ flex: 0 0 200px; /* grow: 0, shrink: 0, basis: 200px */ } ``` --- # Flexbox: Beispiel Navigation ```css nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: #333; } nav a { color: white; text-decoration: none; padding: 0.5rem 1rem; } nav a:hover { background: #555; } ``` --- # Pseudo-Klassen ```css /* Zustände */ a:hover { color: red; } a:visited { color: purple; } input:focus { border-color: blue; } /* Struktur */ li:first-child { font-weight: bold; } li:nth-child(odd) { background: #eee; } ``` --- # Pseudo-Elemente ```css .required::before { content: "* "; color: red; } p::first-letter { font-size: 2em; } p::first-line { font-weight: bold; } ``` **Unterschied:** `:` = Pseudo-Klasse · `::` = Pseudo-Element --- # Responsive Design **Media Queries:** CSS je nach Bildschirmgröße ```css /* Mobile First: Standard */ .container { padding: 1rem; } /* Ab 768px (Tablet) */ @media (min-width: 768px) { .container { padding: 2rem; max-width: 720px; } } ``` **Breakpoints:** 768px (Tablet) · 1024px (Desktop) · 1280px (Large) --- # Teil 4: CSS vertiefen ## Transitions & moderne Features --- # Transitions: Sanfte Übergänge ```css .button { background: #3498db; color: white; padding: 1rem 2rem; border: none; cursor: pointer; /* Transition */ transition: background 0.3s ease; } .button:hover { background: #2980b9; } ``` **Kein JavaScript nötig!** --- # Transitions: Mehrere Properties ```css .card { background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transform: translateY(0); transition: box-shadow 0.3s ease, transform 0.3s ease; } .card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.2); transform: translateY(-4px); } ``` --- # CSS Custom Properties (Variablen) ```css :root { --primary-color: #3498db; --secondary-color: #2ecc71; --text-color: #333; --spacing: 1rem; } .button { background: var(--primary-color); padding: var(--spacing); color: white; } .button.secondary { background: var(--secondary-color); } ``` --- # Dark Mode ```css :root { --bg-color: white; --text-color: #333; } @media (prefers-color-scheme: dark) { :root { --bg-color: #1a1a1a; --text-color: #eee; } } body { background: var(--bg-color); color: var(--text-color); } ``` --- # Fragen & Diskussion **Nächster Termin:** 24.01.2026 – JavaScript **Kontakt:** mail@librete.ch --- # Lizenz Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)** Basiert auf Material von: - Markus Thamm / Wolfgang Gruel (HdM Stuttgart) - Michael Czechowski Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/