diff --git a/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md b/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
index 861f815..1dd4432 100644
--- a/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
+++ b/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
@@ -21,13 +21,13 @@ section {
font-size: 1.7rem;
}
h1 {
- color: #a02060; /* darker raspberry */
+ color: #a02060;
}
section.invert h1 {
color: #fff;
}
h2 {
- color: #1f2937; /* dark gray, almost black */
+ color: #1f2937;
}
pre {
background: #0f0f23;
@@ -55,7 +55,7 @@ section.klausur {
#fce4ec 40px,
#fff 40px,
#fff 80px
- );
+ ) !important;
}
section.aufgabe {
background: #fce4ec !important;
@@ -100,15 +100,14 @@ Hochschule der Medien Stuttgart
# Agenda
-**Teil 1:**
-- Netzwerke (OSI, TCP/IP)
-- DNS: Wie funktionieren Domain-Namen?
-- HTTP(S) im Detail
+**Teil 1: Die Reise eines Klicks**
+- Warum ist Netzwerk-Kommunikation kompliziert?
+- Was passiert, wenn du eine URL aufrufst?
+- DNS → TCP → HTTP → Response
-**Teil 2:**
-- CSS-Grundlagen
-- Selektoren & Spezifität
-- Hands-On: Styling
+**Teil 2: CSS**
+- Grundlagen, Selektoren, Spezifität
+- Box-Modell, Farben, Einheiten
---
@@ -117,7 +116,6 @@ Hochschule der Medien Stuttgart
* **CODE CRISPIES: https://codecrispi.es/**
* 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/
* Flexbox-Spiel: https://flexboxfroggy.com/
* Grid-Spiel: https://cssgridgarden.com/
@@ -125,665 +123,1023 @@ Hochschule der Medien Stuttgart
-# Teil 1: Grundbegriffe
-## Netzwerk und Internet
+# Teil 1: Die Reise eines Klicks
+## Was passiert, wenn du `www.hdm-stuttgart.de` aufrufst?
---
-# Warum Rechner verbinden?
+# Das Szenario
-* Daten und Informationen teilen
-* Zusammenarbeiten & Kollaboration
-* Ressourcen teilen (Drucker, Speicher, andere Geräte)
-* **(Tele)kommunikation** *(gr. telos – Ziel, Ende)*
+Du sitzt im WLAN der HdM und tippst in den Browser:
----
-
-# Kommunikationsarten
-
-| Kategorie | Beispiel |
-|-----------|----------|
-| **Synchron** | Telefonat, Video-Call |
-| **Asynchron** | E-Mail, Brief, SMS |
-| **Verbindungsorientiert** | Telefon (Leitung aufbauen) |
-| **Verbindungslos** | Brief, Postkarte |
-
-
-
----
-
-# 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) |
-
-
-
----
-
-# 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
+```
+www.hdm-stuttgart.de
```
-
+**Zwischen Enter und der fertigen Seite:** ~200 Millisekunden.
+In dieser Zeit passieren hunderte Operationen.
+
+Bevor wir sie durchgehen: **Warum ist das überhaupt so kompliziert?**
---
-# DNS: Domain Name System
-## Das Telefonbuch des Internets
+# Das Grundproblem
+## Warum brauchen wir Schichten, Adressen, Ports?
+
+---
+
+# Was zwischen dir und dem Server liegt
+
+Du willst eine Webseite. Klingt einfach.
+
+Aber dazwischen liegen:
+- Deine WLAN-Karte
+- Der Router im Flur
+- Das Netzwerk der HdM
+- Das Internet (dutzende Router)
+- Der Webserver in Vaihingen
+
+**Jede Station spricht eine andere "Sprache":**
+- Dein Browser spricht HTTP ("Gib mir /index.html")
+- Das Kabel versteht nur Strom an/aus
+
+---
+
+# Die Lösung: Aufgabenteilung
+
+Statt dass jedes Programm alles können muss, teilen wir die Arbeit auf:
+
+| Wer | Kümmert sich um |
+|-----|-----------------|
+| **HTTP** | "Was will ich?" (Webseite, Bild, Video) |
+| **TCP** | "Kommt alles an? In der richtigen Reihenfolge?" |
+| **IP** | "Wo muss es hin?" (welcher Rechner im Internet) |
+| **Ethernet** | "Wie kommt es zum nächsten Gerät?" |
+| **Physik** | "Strom oder Licht durch das Kabel" |
+
+Jeder macht seinen Job. Keiner muss wissen, wie die anderen arbeiten.
+
+---
+
+# Warum ist das clever?
+
+**Ohne Schichten:**
+Dein Browser müsste wissen, wie man Ethernet-Frames baut, wie WLAN-Frequenzen funktionieren, wie Router Pakete weiterleiten...
+
+**Mit Schichten:**
+Dein Browser sagt nur: "Ich will diese Seite."
+Alles andere übernehmen die Schichten darunter.
+
+**Das Prinzip heißt Abstraktion:**
+Jede Schicht versteckt ihre Komplexität vor den anderen.
+
+---
+
+# Schichten reden nur mit Nachbarn
+
+```
+HTTP ──────────→ TCP ──────────→ IP ──────────→ Ethernet
+ "Schick das" "Schick das" "Schick das"
+```
+
+**HTTP sagt zu TCP:** "Schick das an den Server."
+**TCP sagt zu IP:** "Schick das an 212.132.79.37."
+**IP sagt zu Ethernet:** "Schick das an den Router."
+
+**HTTP weiß nicht, dass es Ethernet gibt.**
+**Ethernet weiß nicht, dass es HTTP gibt.**
+
+Das ist der Punkt.
+
+---
+
+# Und horizontal?
+
+Auf der anderen Seite (Server) passiert das Gleiche – nur rückwärts:
+
+```
+Dein Laptop Server
+
+┌─────────┐ ┌─────────┐
+│ HTTP │ ←── logische Verbindung ──→│ HTTP │
+└────┬────┘ └────┬────┘
+ ↓ ↑
+┌─────────┐ ┌─────────┐
+│ TCP │ │ TCP │
+└────┬────┘ └────┬────┘
+ ↓ ↑
+┌─────────┐ ┌─────────┐
+│ IP │ │ IP │
+└────┬────┘ └────┬────┘
+ ↓ ↑
+ ⚡ ─────── physische Übertragung ────── ⚡
+```
+
+HTTP "redet" mit HTTP. TCP "redet" mit TCP. Aber physisch läuft alles unten durch.
+
+---
+
+
+
+# Warum brauchen wir IP-Adressen?
+
+---
+
+# Das Internet ist kein einzelnes Netzwerk
+
+Das Internet besteht aus **tausenden** separaten Netzwerken:
+
+- Netzwerk der HdM
+- Netzwerk der Telekom
+- Netzwerk von Google
+- Netzwerk deines Heimrouters
+- ...
+
+Ein Paket muss von Netzwerk zu Netzwerk weitergereicht werden.
+
+**Router** entscheiden bei jedem Hop: "In welches Netzwerk als nächstes?"
+
+---
+
+# IP-Adressen = Globale Adressen
+
+```
+141.62.xxx.xxx ← HdM-Netzwerk
+212.132.79.37 ← Ziel-Server
+```
+
+Die IP-Adresse sagt dem Router:
+1. **In welchem Netzwerk** ist der Rechner?
+2. **Welcher Rechner** in diesem Netzwerk?
+
+"141.62... ist nicht bei mir. Ich schicke das Paket Richtung BelWü."
+
+**Die IP-Adresse bleibt auf dem gesamten Weg gleich.**
+Sie ist die Empfängeradresse auf dem Brief.
+
+---
+
+# Warum reicht die MAC-Adresse nicht?
+
+Jede Netzwerkkarte hat eine **MAC-Adresse** (z.B. `aa:bb:cc:dd:ee:ff`).
+
+**Problem:** MAC funktioniert nur **lokal**.
+- Dein Laptop kennt die MAC deines Routers
+- Dein Router kennt die MAC des nächsten Routers
+- Aber niemand kennt die MAC des Webservers in Vaihingen
+
+**MAC = "Wer ist mein direkter Nachbar?"**
+**IP = "Wo ist das Ziel im gesamten Internet?"**
+
+Deshalb brauchen wir beides.
+
+---
+
+
+
+# Warum brauchen wir Ports?
+
+---
+
+# Ein Rechner, viele Programme
+
+Dein Laptop hat **eine** IP-Adresse.
+
+Aber gleichzeitig laufen:
+- Browser (will Webseiten)
+- Mail-Programm (will E-Mails)
+- Spotify (will Musik)
+- Discord (will Chat)
+- System-Updates
+
+Ein Paket kommt an. **Für welches Programm ist es?**
+
+---
+
+# Ports = Türnummern
+
+```
+IP-Adresse = Hausnummer → "Friedrichstraße 10"
+Port = Wohnungstür → "3. Stock links"
+```
+
+Jedes Programm "lauscht" auf einem Port:
+
+| Port | Dienst |
+|------|--------|
+| 80 | HTTP (Webseiten) |
+| 443 | HTTPS (Webseiten, verschlüsselt) |
+| 25 | SMTP (E-Mail senden) |
+| 22 | SSH (Terminal) |
+
+Wenn ein Paket an `212.132.79.37:443` geht, weiß der Server: "Das ist für den Webserver-Prozess."
+
+---
+
+# Beide Seiten haben Ports
+
+```
+Dein Laptop: 141.62.xxx.xxx:52431
+ └─────── Dein Browser lauscht hier
+
+Server: 212.132.79.37:443
+ └─────── Webserver lauscht hier
+```
+
+**52431** ist ein zufälliger Port, den dein System für diese Verbindung vergeben hat.
+
+Die Antwort des Servers geht an `141.62.xxx.xxx:52431` – und landet bei deinem Browser, nicht bei Spotify.
+
+---
+
+
+
+# Zusammenfassung: Die Bausteine
+
+---
+
+# Was wir jetzt wissen
+
+| Konzept | Löst welches Problem? |
+|---------|----------------------|
+| **Schichten** | Komplexität aufteilen, Abstraktion |
+| **IP-Adresse** | Ziel im globalen Internet finden |
+| **MAC-Adresse** | Nächsten Nachbarn im lokalen Netz finden |
+| **Port** | Richtiges Programm auf dem Rechner finden |
+
+Mit diesen Bausteinen können wir jetzt die Reise eines Klicks verfolgen.
+
+---
+
+
+
+# Die Reise beginnt
+## Schritt für Schritt
+
+---
+
+# Die Zeitlinie
+
+```
+[0 ms] DNS-Anfrage: "Welche IP hat www.hdm-stuttgart.de?"
+ ↓
+[~20 ms] DNS-Antwort: "212.132.79.37"
+ ↓
+[~25 ms] TCP-Handshake: Verbindung aufbauen
+ ↓
+[~50 ms] HTTP-Request: "GET /index.html"
+ ↓
+[~150 ms] HTTP-Response: Der HTML-Code kommt zurück
+ ↓
+[~200 ms] Browser rendert die Seite
+```
+
+Jeder dieser Schritte durchläuft alle Schichten – runter und wieder rauf.
+
+---
+
+
+
+# Schritt 1: DNS
+## "Wo wohnt hdm-stuttgart.de?"
---
# Das Problem
-**Menschen:** `www.hdm-stuttgart.de`
-**Computer:** `https://212.132.79.37:443`
+Dein Browser kennt nur den Namen: `www.hdm-stuttgart.de`
-**DNS** = Domain Name System
-→ Übersetzt Namen in IP-Adressen
+Das Internet kennt nur Zahlen: `212.132.79.37`
-
+**Jemand muss übersetzen.**
---
-# DNS-Hierarchie
+# DNS: Das Telefonbuch des Internets
-```
- (Root)
- .
- / | \
- / | \
- .de .org .com
- / \
- hdm-stuttgart google
- | |
- www mail
-```
+**D**omain **N**ame **S**ystem
-**FQDN:** `www.hdm-stuttgart.de.` (mit Punkt am Ende!)
+Dein Laptop fragt sich durch eine Hierarchie:
-
+1. **Browser-Cache:** "War ich da kürzlich?" → Nein
+2. **Betriebssystem-Cache:** "Kennt Windows/Mac die IP?" → Nein
+3. **Router / ISP:** "Frag den DNS-Server deines Providers"
+
+Wenn auch der Provider es nicht weiß, beginnt die **rekursive Suche**.
---
-# DNS-Auflösung
+# Die DNS-Hierarchie
```
-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
+ . (Root)
+ /|\
+ / | \
+ .de .com .org
+ /
+ hdm-stuttgart
+ |
+ www
```
-**Caching:** Antworten werden gespeichert
-→ Schneller bei wiederholten Anfragen
-
-
+**Jede Ebene kennt nur die nächste Ebene darunter.**
---
-# DNS-Records
+# Der DNS-Lookup
-| 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..."` |
+```
+Dein Laptop → Resolver: "Wo ist www.hdm-stuttgart.de?"
-
+Resolver → Root (.): "Wer verwaltet .de?"
+ ← "Frag 194.0.0.53"
+
+Resolver → .de-Server: "Wer verwaltet hdm-stuttgart.de?"
+ ← "Frag den Nameserver der HdM"
+
+Resolver → HdM-NS: "Welche IP hat www?"
+ ← "212.132.79.37"
+
+Resolver → Dein Laptop: "Die IP ist 212.132.79.37"
+```
---
-# URLs & Domains
+# DNS ist selbst ein Netzwerk-Request
-**URL** = Uniform Resource Locator
+Die DNS-Anfrage ist nicht magisch. Sie ist selbst ein Paket, das durch alle Schichten muss:
+
+| Eigenschaft | Wert |
+|-------------|------|
+| Protokoll | UDP |
+| Port | 53 |
+| Inhalt | "A-Record für www.hdm-stuttgart.de?" |
+
+Das DNS-Paket macht die gleiche Reise wie später der HTTP-Request – nur zu einem anderen Ziel.
+
+---
+
+# Nach dem DNS-Lookup
+
+**Ergebnis:** Dein Browser weiß jetzt:
```
-https://www.example.com:443/pfad/seite.html?suche=test#kapitel2
-└─┬──┘ └──────┬──────┘└┬┘ └──────┬──────┘ └───┬────┘ └──┬───┘
-Protokoll Hostname Port Pfad Query Fragment
+www.hdm-stuttgart.de = 212.132.79.37
```
-| 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) |
+Diese Information wird gecached.
-
+**Nächster Schritt:** Verbindung zum Server aufbauen.
---
-# Netzwerke
-## Theorie und Praxis
+# Schritt 2: TCP-Handshake
+## "Hallo Server, bist du da?"
-
+---
+# Warum ein Handshake?
+
+HTTP läuft über **TCP** (Transmission Control Protocol).
+
+TCP ist **verbindungsorientiert**: Bevor Daten fließen, müssen sich beide Seiten einig sein, dass sie miteinander reden wollen.
+
+**Analogie:** Du rufst jemanden an. Das Telefon klingelt. Die Person nimmt ab. Erst dann redest du.
---
-
-# Das OSI-Modell: Die Theorie
+# Der 3-Way-Handshake
-**7 Schichten der Netzwerkkommunikation:**
+```
+Dein Laptop HdM-Server
+ | |
+ |-------- SYN (Seq=1000) --------------->|
+ | "Ich will reden" |
+ | |
+ |<--- SYN-ACK (Seq=5000, Ack=1001) ------|
+ | "OK, ich auch" |
+ | |
+ |-------- ACK (Ack=5001) --------------->|
+ | "Gut, dann los" |
+ | |
+ | [ Verbindung steht ] |
+```
-| Schicht | Name | Beispiel |
-|---------|------|----------|
-| **7** | **Anwendung** | **HTTP/S, 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 |
+**SYN** = Synchronize · **ACK** = Acknowledge
-
+---
+
+# Warum die Sequenznummern?
+
+**Problem:** Pakete können im Internet:
+- Verloren gehen
+- Doppelt ankommen
+- In falscher Reihenfolge ankommen
+
+**Lösung:** Jedes Byte wird nummeriert.
+
+Der Empfänger weiß genau, welches Byte als nächstes kommen muss – und kann fehlende Pakete erneut anfordern.
+
+---
+
+# Nach dem Handshake
+
+**Status:** Die TCP-Verbindung steht.
+
+```
+Dein Laptop ←————————————————→ 212.132.79.37:443
+ (Port 52431) (Port 443)
+```
+
+**Jetzt erst** kann der eigentliche HTTP-Request gesendet werden.
+
+---
+
+
+
+# Schritt 3: Der HTTP-Request
+## "Gib mir die Startseite"
+
+---
+
+# Was dein Browser sendet
+
+```http
+GET / HTTP/1.1
+Host: www.hdm-stuttgart.de
+User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
+Accept: text/html
+Accept-Language: de-DE
+Connection: keep-alive
+```
+
+Das sind **~200 Bytes** Text.
+
+Aber diese 200 Bytes müssen durch das halbe Internet.
+
+**Wie?**
+
+---
+
+
+
+# Die Verpackungsstraße
+## Encapsulation: Schicht für Schicht
+
+---
+
+# Jede Schicht verpackt
+
+```
+HTTP-Request: "GET / HTTP/1.1..."
+ ↓
+TCP packt ein: [ Ports + Seq-Nr ] + HTTP-Request
+ = Segment
+ ↓
+IP packt ein: [ IP-Adressen ] + Segment
+ = Paket
+ ↓
+Ethernet packt: [ MAC-Adressen ] + Paket + [ Prüfsumme ]
+ = Frame
+ ↓
+Physik: 01001000 01010100 01010100 01010000 ...
+ = Bits auf dem Kabel
+```
+
+---
+
+# Layer 4: Transport (TCP)
+
+Der HTTP-Request wird zum **Segment**.
+
+```
+┌─────────────────────────────────────────────────┐
+│ TCP-Header │
+│ ┌─────────────┬─────────────┬─────────────────┐ │
+│ │ Source Port │ Dest Port │ Sequence Number │ │
+│ │ 52431 │ 443 │ 1001 │ │
+│ └─────────────┴─────────────┴─────────────────┘ │
+├─────────────────────────────────────────────────┤
+│ Payload: "GET / HTTP/1.1..." │
+└─────────────────────────────────────────────────┘
+```
+
+**Neu hinzugekommen:** Ports (wer sendet? wer empfängt?) und Sequenznummer
+
+---
+
+# Layer 3: Network (IP)
+
+Das Segment wird zum **Paket**.
+
+```
+┌─────────────────────────────────────────────────┐
+│ IP-Header │
+│ ┌─────────────────┬─────────────────┐ │
+│ │ Source IP │ Destination IP │ │
+│ │ 141.62.xxx.xxx │ 212.132.79.37 │ │
+│ └─────────────────┴─────────────────┘ │
+├─────────────────────────────────────────────────┤
+│ TCP-Segment (von oben) │
+└─────────────────────────────────────────────────┘
+```
+
+**Neu:** IP-Adressen – woher kommt das Paket, wohin soll es?
+
+---
+
+# Layer 2: Data Link (Ethernet)
+
+Das Paket wird zum **Frame**.
+
+```
+┌─────────────────────────────────────────────────┐
+│ Ethernet-Header │
+│ ┌─────────────────┬─────────────────┐ │
+│ │ Source MAC │ Destination MAC │ │
+│ │ aa:bb:cc:dd:ee │ 11:22:33:44:55 │ │
+│ └─────────────────┴─────────────────┘ │
+├─────────────────────────────────────────────────┤
+│ IP-Paket (von oben) │
+├─────────────────────────────────────────────────┤
+│ FCS (Prüfsumme) │
+└─────────────────────────────────────────────────┘
+```
+
+**Neu:** MAC-Adressen – aber Achtung: Das ist die MAC des **Routers**, nicht des Servers!
+
+---
+
+# Layer 1: Physical
+
+Der Frame wird zu **Bits** – und die Bits zu physikalischen Signalen.
+
+| Medium | Signal |
+|--------|--------|
+| Kupferkabel | Spannung: High/Low |
+| Glasfaser | Licht: An/Aus |
+| WLAN | Funkwellen |
+
+```
+01001000 01010100 01010100 01010000 ...
+```
+
+Ab hier übernimmt die Physik.
---
-
-# TCP/IP: Die Praxis
+# MAC vs. IP – nochmal genau
-**Das Internet nutzt TCP/IP (4 Schichten):**
+| | IP-Adresse | MAC-Adresse |
+|---|-----------|-------------|
+| **Frage** | Wer ist das Endziel? | Wer ist der nächste Hop? |
+| **Reichweite** | Global (ganzes Internet) | Lokal (bis zum nächsten Router) |
+| **Ändert sich?** | Nein, bleibt gleich | Ja, bei jedem Hop |
+| **Analogie** | Empfänger auf dem Brief | "Nächstes Postamt: XY" |
-| TCP/IP | Entspricht OSI | Protokolle |
-|--------|----------------|------------|
-| **Anwendung** | **5-7** | **HTTP, DNS, SMTP** |
-| Transport | 4 | TCP, UDP |
-| Internet | 3 | IP |
-| Netzzugang | 1-2 | Ethernet, WLAN |
+**Die MAC-Adresse im ersten Frame ist die MAC des Routers – nicht des Servers!**
-**TCP/IP = Transmission Control Protocol / Internet Protocol**
+---
-https://www.ietf.org/rfc/rfc793.txt
+# Woher kennt dein Laptop die MAC des Routers?
-
+**ARP** – Address Resolution Protocol
+
+```
+Dein Laptop (Broadcast an alle):
+ "Wer hat die IP 192.168.1.1? Sag mir deine MAC!"
+
+Router:
+ "Das bin ich! Meine MAC ist 11:22:33:44:55:66"
+```
+
+Diese Information wird gecached.
+
+---
+
+
+
+# Die Reise durch das Netz
+## Hop für Hop
+
+---
+
+# Der erste Hop: Dein Router
+
+```
+Dein Laptop → [Frame] → Router
+```
+
+Der Router empfängt den Frame:
+
+1. **Layer 1:** Signale → Bits
+2. **Layer 2:** Prüft Frame. "MAC stimmt, FCS okay" → Auspacken
+3. **Layer 3:** Liest IP-Header. "212.132.79.37 – nicht mein Netz"
+
+**Routing-Entscheidung:** "Ich schicke es Richtung BelWü."
+
+---
+
+# Der Router verpackt NEU
+
+Der Router erstellt einen **neuen Frame** für den nächsten Hop:
+
+```
+┌─────────────────────────────────────────────────┐
+│ Ethernet-Header (NEU!) │
+│ ┌─────────────────┬─────────────────┐ │
+│ │ Source MAC │ Destination MAC │ │
+│ │ Router-MAC │ Nächster-Router │ │
+│ └─────────────────┴─────────────────┘ │
+├─────────────────────────────────────────────────┤
+│ IP-Paket (UNVERÄNDERT) │
+│ Source: 141.62.xxx.xxx │
+│ Dest: 212.132.79.37 │
+└─────────────────────────────────────────────────┘
+```
+
+**Die IP bleibt gleich. Die MAC ändert sich.**
+
+---
+
+# Mehrere Hops
+
+```
+Dein Laptop
+ ↓ [Frame mit MAC des HdM-Routers]
+Router (HdM-Netz)
+ ↓ [Frame mit MAC des BelWü-Routers]
+Router (BelWü)
+ ↓ [Frame mit MAC des nächsten Routers]
+...weitere Router...
+ ↓ [Frame mit MAC des Ziel-Servers]
+Webserver der HdM
+```
+
+Bei jedem Hop: Auspacken bis Layer 3, Routing-Entscheidung, neu verpacken.
+
+---
+
+# Das kannst du selbst sehen
+
+```bash
+traceroute www.hdm-stuttgart.de # Mac/Linux
+tracert www.hdm-stuttgart.de # Windows
+```
+
+Zeigt jeden Router auf dem Weg mit IP und Antwortzeit.
+
+---
+
+
+
+# Die Ankunft
+## Decapsulation am Server
+
+---
+
+# Der Server empfängt
+
+Am Webserver passiert alles **rückwärts** (Decapsulation):
+
+```
+Bits empfangen (Layer 1)
+ ↓
+Frame prüfen: MAC korrekt? FCS okay? → Auspacken (Layer 2)
+ ↓
+IP-Paket lesen: Ziel-IP = meine IP? Ja! → Auspacken (Layer 3)
+ ↓
+TCP-Segment lesen: Port 443, Seq-Nr passt → Auspacken (Layer 4)
+ ↓
+HTTP-Request lesen: "GET / HTTP/1.1" (Layer 7)
+```
+
+Der Webserver versteht: "Jemand will die Startseite."
+
+---
+
+
+
+# Die Antwort
+## Der gleiche Weg zurück
+
+---
+
+# Der Server antwortet
+
+```http
+HTTP/1.1 200 OK
+Content-Type: text/html; charset=UTF-8
+Content-Length: 45231
+
+
+
+
+ HdM Stuttgart
+...
+```
+
+Diese ~45 KB HTML müssen jetzt zu dir.
+
+---
+
+# Encapsulation beim Server
+
+Der Server macht **dasselbe wie du vorher** – nur in die andere Richtung:
+
+```
+HTTP-Response: "HTTP/1.1 200 OK..."
+ ↓
+TCP packt ein: [ Ports + Seq-Nr ] + Response
+ Dest-Port: 52431 (dein Browser!)
+ ↓
+IP packt ein: [ IP-Adressen ]
+ Dest-IP: 141.62.xxx.xxx (dein Laptop!)
+ ↓
+Ethernet packt: [ MAC-Adressen ]
+ Dest-MAC: Router des Server-Netzes
+ ↓
+Bits auf dem Kabel
+```
+
+---
+
+# Die Antwort reist zurück
+
+```
+Server
+ ↓
+Router (Ziel-Netz)
+ ↓
+...weitere Router...
+ ↓
+Router (HdM-Netz)
+ ↓
+Dein Laptop
+```
+
+Bei jedem Hop: Auspacken bis Layer 3, Routing-Entscheidung, neu verpacken.
+
+Bis die Antwort bei dir ankommt – und dein Browser sie auspackt.
+
+---
+
+# Decapsulation bei dir
+
+```
+Bits empfangen
+ ↓
+Frame: MAC = meine MAC? → Auspacken
+ ↓
+IP-Paket: Ziel-IP = meine IP? → Auspacken
+ ↓
+TCP-Segment: Port 52431 = mein Browser → Auspacken
+ ↓
+HTTP-Response: "HTTP/1.1 200 OK..."
+ ↓
+Browser rendert die Seite
+```
+
+---
+
+
+
+# Zusammenfassung
+## Das TCP/IP-Modell
+
+---
+
+
+
+
+
+# Die Schichten (TCP/IP)
+
+| Schicht | Name | Dateneinheit | Adressierung |
+|---------|------|--------------|--------------|
+| 4 | **Anwendung** | Daten | – |
+| 3 | **Transport** | Segment | Ports |
+| 2 | **Internet** | Paket | IP-Adressen |
+| 1 | **Netzzugang** | Frame | MAC-Adressen |
+
+**4 Schichten.** Das reicht, um das Internet zu verstehen.
---
# 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 │ │ │
-└─────────────────┘ └─────────────────┘
+ OSI (Theorie) TCP/IP (Praxis)
+┌─────────────────┐ ┌─────────────────┐
+│ 7. Anwendung │ │ │
+├─────────────────┤ │ Anwendung │
+│ 6. Darstellung │ │ │
+├─────────────────┤ │ │
+│ 5. Sitzung │ │ │
+├─────────────────┤ ├─────────────────┤
+│ 4. Transport │ │ Transport │
+├─────────────────┤ ├─────────────────┤
+│ 3. Vermittlung │ │ Internet │
+├─────────────────┤ ├─────────────────┤
+│ 2. Sicherung │ │ │
+├─────────────────┤ │ Netzzugang │
+│ 1. Bitübertrag │ │ │
+└─────────────────┘ └─────────────────┘
```
-
+OSI ist ein **Referenzmodell**. TCP/IP ist die Realität.
---
+
+
+
-# Schicht 1: Bitübertragung
+# Was ihr wissen solltet
-**Physikalische Übertragung von Bits**
+**Den Ablauf:**
+1. DNS-Lookup (UDP:53) → IP-Adresse
+2. TCP-Handshake (SYN → SYN-ACK → ACK)
+3. HTTP-Request
+4. HTTP-Response
-| 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!
-
-
+**Die Konzepte:**
+- IP bleibt gleich, MAC ändert sich pro Hop
+- Ports identifizieren Programme
+- Encapsulation: runter verpacken, rüber schicken, rauf auspacken
---
-# Schicht 2: Sicherung
+
+
+
-**MAC-Adressen: Hardware-Identifikation**
+# Die Dateneinheiten (PDUs)
-```
-00:1A:2B:3C:4D:5E
-```
+| Schicht | Dateneinheit | Was kommt hinzu? |
+|---------|--------------|------------------|
+| Anwendung | **Daten** | HTTP-Header |
+| Transport | **Segment** | Ports, Seq-Nr |
+| Internet | **Paket** | IP-Adressen |
+| Netzzugang | **Frame** | MAC, Prüfsumme |
-- 48 Bit = 6 Bytes
-- **Weltweit eindeutig** (in Theorie)
-- In Netzwerkkarte "eingebrannt"
-
-**Ethernet-Frame:**
-
-```
-┌────────┬────────┬────────┬────────┬─────┐
-│Präambel│Ziel-MAC│Src-MAC │ Daten │ FCS │
-└────────┴────────┴────────┴────────┴─────┘
-```
-
-
+**Encapsulation:** Jede Schicht verpackt die Daten der Schicht darüber.
+**Decapsulation:** Beim Empfang wird Schicht für Schicht ausgepackt.
---
-# 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)
-
-
+# Exkurs: MTU & Fragmentierung
---
-# Schicht 4: Transport
+# Die MTU (Maximum Transmission Unit)
-**TCP vs. UDP**
+Ein Ethernet-Frame kann maximal **1500 Bytes Nutzdaten** transportieren.
-| Eigenschaft | TCP | UDP |
-|-------------|-----|-----|
-| Verbindung | Ja (3-Way-Handshake) | Nein |
-| Zuverlässig | Ja (Bestätigung) | Nein |
-| Reihenfolge | Garantiert | Nicht garantiert |
+```
+┌───────────┬──────────────────────────────────────────┬──────────┐
+│ Header │ Payload (max. 1500 Bytes) │ Trailer │
+│ 14 Bytes │ │ 4 Bytes │
+└───────────┴──────────────────────────────────────────┴──────────┘
+```
+
+**Problem:** Ein Foto hat 3.000.000 Bytes.
+**Lösung:** TCP zerschneidet die Daten in ~2000 Segmente.
+
+---
+
+# TCP sorgt für Ordnung
+
+Jedes Segment hat eine **Sequenznummer**.
+
+```
+Segment 1: Bytes 0-1459 Seq=0
+Segment 2: Bytes 1460-2919 Seq=1460
+Segment 3: Bytes 2920-4379 Seq=2920
+...
+```
+
+Der Empfänger setzt die Segmente zusammen – auch wenn sie in falscher Reihenfolge ankommen.
+
+---
+
+
+
+# Exkurs: TCP vs. UDP
+
+---
+
+
+
+
+
+# Zwei Transport-Protokolle
+
+| | TCP | UDP |
+|---|-----|-----|
+| Verbindung | Ja (Handshake) | Nein |
+| Reihenfolge garantiert | Ja | Nein |
+| Fehlende Pakete | Werden nachgefordert | Gehen verloren |
| Geschwindigkeit | Langsamer | Schneller |
-| Anwendung | Web, E-Mail | Streaming, Gaming |
-
-
---
-# TCP: 3-Way-Handshake
+# Wann was?
-### Verbindungsorientiert
+**TCP:**
+- Web (HTTP/HTTPS)
+- E-Mail
+- Dateitransfer
+- SSH
-```
-Client Server
- │ │
- │──── SYN (Seq=100) ───────────>│
- │ │
- │<─── SYN-ACK (Seq=300, Ack=101)│
- │ │
- │──── ACK (Seq=101, Ack=301) ──>│
- │ │
- │ Verbindung hergestellt │
-```
+→ Wenn **jedes Byte ankommen muss**
-**SYN** = Synchronize
-**ACK** = Acknowledge
+**UDP:**
+- DNS
+- Video-Streaming
+- Online-Gaming
+- Video-Calls
-
+→ Wenn **Geschwindigkeit wichtiger ist als Vollständigkeit**
---
-# Schicht 5: Sitzung (Session)
+# Warum UDP bei Video-Calls?
-**Verwaltet Verbindungen zwischen Anwendungen:**
+**Szenario:** Ein Paket geht verloren.
-- **Sessions** → Login-Sitzungen, "eingeloggt bleiben"
-- **Dialogsteuerung** → Wer darf wann senden?
-- **Synchronisation** → Wiederaufnahme nach Abbruch
+**TCP:** Wartet, fordert neu an, wartet... → Video friert ein
-**Beispiele:**
-- Web-Sessions (Cookies, Tokens, OAuth)
-- RPC (Remote Procedure Call)
-- NetBIOS
+**UDP:** Ignoriert es, zeigt nächstes Frame → Kurzes Artefakt
-
-
----
-
-# 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
-
-
+Bei Echtzeit ist ein verlorenes Frame weniger schlimm als Verzögerung.
---
-
-# 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 |
-
-
-
-
----
-
-# Merksatz: OSI-Modell
-
-"**A**lle **d**ualen **S**tudierenden **t**rinken **v**erschiedene **S**orten **B**ier/Brause"
-
-| Schicht | Name | Merksatz |
-|---------|------|----------|
-| 7 | **A**nwendung | **A**lle |
-| 6 | **D**arstellung | **d**ualen |
-| 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 |
-
-
-
----
-
-
-
-
-
-
-# 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-Response & Status-Codes
```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)
-
-
+- **2xx** Erfolg (200 OK)
+- **3xx** Umleitung (301 Moved)
+- **4xx** Client-Fehler (404 Not Found)
+- **5xx** Server-Fehler (500 Internal Error)
---
-
# 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 |
+| Methode | Zweck | Beispiel |
+|---------|-------|----------|
+| **GET** | Daten abrufen | Seite laden |
+| **POST** | Daten senden | Formular absenden |
+| **PUT** | Daten ersetzen | Profil aktualisieren |
+| **DELETE** | Daten löschen | Account löschen |
-
+---
+
+# Werkzeuge zum Selbst-Erkunden
+
+**Im Browser (F12 → Network-Tab):**
+- Jeder Request sichtbar
+- Timing, Headers, Response
+
+**Im Terminal:**
+```bash
+ping hdm-stuttgart.de
+traceroute hdm-stuttgart.de
+nslookup hdm-stuttgart.de
+curl -I hdm-stuttgart.de
+```
---
@@ -809,17 +1165,11 @@ p {
}
```
-
-
---
# CSS einbinden
-**Option 1: Externe Datei** (empfohlen!)
+**Option 1: Externe Datei** (empfohlen)
```html
```
@@ -829,16 +1179,11 @@ Separation of Concerns
```
-**Option 3: Inline als HTML-Attribute** (vermeiden!)
+**Option 3: Inline** (vermeiden)
```html
...
```
-
-
---
# CSS-Anatomie
@@ -846,7 +1191,6 @@ Option 3 vermeiden aufgrund der hohen Spezifiät (sog. Code Smell)
```css
selector {
property: value;
- property: value;
}
```
@@ -859,13 +1203,6 @@ h1 {
}
```
-
-
---
# Selektoren: Element
@@ -876,22 +1213,12 @@ p {
color: gray;
}
-/* Alle -Elemente */
-h1 {
- font-size: 2rem;
-}
-
/* Mehrere Elemente */
h1, h2, h3 {
font-family: sans-serif;
}
```
-
-
---
# Selektoren: Klasse
@@ -902,7 +1229,6 @@ Betrifft ALLE Elemente dieses Typs
```
```css
-/* Alle Elemente mit class="wichtig" */
.wichtig {
color: red;
font-weight: bold;
@@ -911,12 +1237,6 @@ Betrifft ALLE Elemente dieses Typs
**Punkt** vor dem Namen = Klasse
-
-
---
# Selektoren: ID
@@ -926,7 +1246,6 @@ class="wichtig gross rot"
```
```css
-/* Element mit id="hauptnavigation" */
#hauptnavigation {
background: #333;
padding: 1rem;
@@ -935,51 +1254,33 @@ class="wichtig gross rot"
**Raute** vor dem Namen = ID
-⚠️ IDs sollten **einmalig** pro Seite sein!
-
-
+⚠️ IDs sollten **einmalig** pro Seite sein.
---
# Selektoren: Kombinationen
```css
-/* Nachfahre (egal wie tief verschachtelt) */
-article p {
- line-height: 1.6;
-}
+/* Nachfahre (beliebig tief) */
+article p { line-height: 1.6; }
/* Direktes Kind */
-nav > a {
- text-decoration: none;
-}
+nav > a { text-decoration: none; }
/* Nächstes Geschwister */
-h2 + p {
- font-size: 1.2rem;
-}
+h2 + p { font-size: 1.2rem; }
/* Element mit Klasse */
-p.wichtig {
- color: red;
-}
+p.wichtig { color: red; }
```
-
-
---
-# Spezifität: Wer gewinnt?
+
+
+
-**Wenn mehrere Regeln auf ein Element zutreffen:**
+# Spezifität: Wer gewinnt?
| Selektor | Spezifität |
|----------|------------|
@@ -988,20 +1289,11 @@ Leerzeichen = Nachfahre (beliebig tief)
| 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! */
+.text { color: green; } /* 0,0,1,0 → gewinnt */
```
-
-
---
# Box-Modell
@@ -1021,121 +1313,81 @@ Bei Gleichstand: Letzte Regel gewinnt
└─────────────────────────────────────┘
```
-
-
---
# Box-Modell: CSS
```css
.box {
- /* Inhalt */
width: 200px;
height: 100px;
-
- /* Innenabstand */
padding: 20px;
-
- /* Rahmen */
border: 2px solid black;
-
- /* Außenabstand */
margin: 10px;
- /* Berechnung vereinfachen */
+ /* Wichtig: */
box-sizing: border-box;
}
```
-
+`box-sizing: border-box` → width inkl. padding + border
---
-# Farben in CSS
+# Farben
```css
/* Keyword */
color: red;
-color: rebeccapurple;
-/* Hex (RGB) */
+/* Hex */
color: #FF0000;
-color: #F00; /* Kurzform */
+color: #F00;
/* RGB/RGBA */
color: rgb(255, 0, 0);
-color: rgba(255, 0, 0, 0.5); /* 50% transparent */
+color: rgba(255, 0, 0, 0.5);
/* HSL */
-color: hsl(0, 100%, 50%); /* Hue, Saturation, Lightness */
+color: hsl(0, 100%, 50%);
```
-
-
---
# 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` |
+| Einheit | Bedeutung |
+|---------|-----------|
+| `px` | Pixel (absolut) |
+| `%` | Prozent vom Parent |
+| `em` | Relativ zur Schriftgröße |
+| `rem` | Relativ zur Root-Schriftgröße |
+| `vw/vh` | Viewport-Breite/-Höhe |
**Empfehlung:** `rem` für Schrift, `%` oder `vw/vh` für Layout
-
-
---
-
# 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
@@ -1146,345 +1398,31 @@ Pseudo-Klassen = Zustände, kein JavaScript nötig!
}
p::first-letter { font-size: 2em; }
-p::first-line { font-weight: bold; }
```
-**Unterschied:** `:` = Pseudo-Klasse · `::` = Pseudo-Element
-
-
+`:` = Pseudo-Klasse · `::` = Pseudo-Element
---
-
# Responsive Design
-**Media Queries:** CSS je nach Bildschirmgröße
-
```css
-/* Mobile First: Standard */
+/* Mobile First */
.container { padding: 1rem; }
/* Ab 768px (Tablet) */
@media (min-width: 768px) {
- .container { padding: 2rem; max-width: 720px; }
-}
-```
-
-**Breakpoints:** 768px (Tablet) · 1024px (Desktop) · 1280px (Large)
-
-
-
----
-
-
-
-# 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
-