From 800a7d6ff96faa1fdc4504d1225d513eab717e8e Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@librete.ch>
Date: Wed, 17 Jun 2026 13:34:55 +0200
Subject: [PATCH] =?UTF-8?q?223015c:=20farben-overflow=20gefixt=20(intro=20?=
 =?UTF-8?q?gek=C3=BCrzt,=20code=20kompakt),=20klausurfolien=20regeneriert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 slides/223015c/02-netzwerke-protokolle-css.md |   9 +-
 slides/223015c/klausurfolien.md               | 505 ++++--------------
 2 files changed, 97 insertions(+), 417 deletions(-)

diff --git a/slides/223015c/02-netzwerke-protokolle-css.md b/slides/223015c/02-netzwerke-protokolle-css.md
index be8a58d..97a7106 100644
--- a/slides/223015c/02-netzwerke-protokolle-css.md
+++ b/slides/223015c/02-netzwerke-protokolle-css.md
@@ -2068,22 +2068,19 @@ Best Practice: Setzt das global für alle Elemente.
 
 ![bg right:35%](./assets/demos/css-colors.png)
 
-CSS kennt fünf Notationen für Farben: **Keyword**, **Hex**, **RGB** (Red Green Blue), **RGBA** (RGB + Alpha) und **HSL** (Hue, Saturation, Lightness).
+CSS kennt fünf Farb-Notationen: **Keyword**, **Hex**, **RGB**, **RGBA** und **HSL**.
 
 ```css
 /* Keyword */
 color: red;
 color: rebeccapurple;
-
 /* Hex */
 color: #FF0000;
 color: #F00;
-
-/* RGB / RGBA */
+/* RGB = Red Green Blue, RGBA mit Alpha */
 color: rgb(255, 0, 0);
 color: rgba(255, 0, 0, 0.5);
-
-/* HSL */
+/* HSL = Hue, Saturation, Lightness */
 color: hsl(0, 100%, 50%);
 ```
 
diff --git a/slides/223015c/klausurfolien.md b/slides/223015c/klausurfolien.md
index 687945c..6dc6b85 100644
--- a/slides/223015c/klausurfolien.md
+++ b/slides/223015c/klausurfolien.md
@@ -5,7 +5,7 @@ paginate: true
 backgroundColor: #fff
 header: "Grundlagen IT- und Internettechnik (223015c)"
 footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
-title: "Kapitel 1: Geschichte, Grundlagen & HTML"
+title: Grundlagen IT- und Internettechnik
 ---
 <style>
 :root {
@@ -20,13 +20,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;
@@ -82,10 +82,9 @@ section.aufgabe footer {
 
 <!-- _class: invert -->
 <!-- _header: '' -->
-<!-- _footer: '' -->
-<!-- _backgroundColor: black -->
+<!-- _backgroundColor: #000 -->
 
-![bg fit opacity:0.2](./assets/background-termin-2.png)
+![bg cover opacity:0.2](./assets/background-termin-1.png)
 
 # Grundlagen IT- und Internettechnik
 
@@ -103,39 +102,6 @@ Hochschule der Medien Stuttgart
 <!-- _footer: "" -->
 
 
-# Die 5 Komponenten
-
-| Komponente | Funktion |
-|------------|----------|
-| **Rechenwerk (ALU)** | Führt Berechnungen durch |
-| **Steuerwerk** | Interpretiert Befehle, steuert Ablauf |
-| **Speicherwerk** | Speichert Programme UND Daten |
-| **Ein-/Ausgabe** | Tastatur, Bildschirm, Netzwerk |
-| **Bus-System** | Verbindet alle Komponenten |
-
-**Wichtig:** Programme und Daten **gemeinsam** im Speicher!
-
-<!--
-VON-NEUMANN-ARCHITEKTUR (1945): Grundlage aller modernen Computer
-5 KOMPONENTEN:
-- ALU (Arithmetic Logic Unit): Rechnet (+, -, ×, ÷) und vergleicht (>, <, =)
-- Steuerwerk: Holt Befehle, dekodiert sie, steuert Ausführung (Fetch-Decode-Execute)
-- Speicherwerk: RAM (flüchtig) + ROM (permanent), enthält Code UND Daten
-- Ein-/Ausgabe (I/O): Tastatur, Maus, Bildschirm, Netzwerk, USB, Sensoren
-- Bus-System: Adressbus (wo), Datenbus (was), Steuerbus (wie)
-KERNPRINZIP: Stored Program Concept - Programme im selben Speicher wie Daten
-VORHER (z.B. ENIAC): Programme durch Umstecken von Kabeln, tagelange Arbeit
-NACHHER: Programme als austauschbare Daten → Flexibilität, Software-Industrie möglich
-PRÜFUNGSRELEVANT: 5 Komponenten benennen und erklären können, Stored Program Concept
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
 # Von-Neumann-Architektur: Bedeutung
 
 **Ohne Von-Neumann-Architektur:**
@@ -173,117 +139,18 @@ PRÜFUNGSRELEVANT: Warum Von-Neumann revolutionär, Unterschied zu Harvard, Beis
 <!-- _footer: "" -->
 
 
-# HTML Metadaten
-
-```html
-<html>
-  <head>
-    <title>Im Browsertab als Überschrift sichtbar</title>
-
-    <meta name="description" content="" />
-
-    <meta name="og:image" content="https://...." />
-  </head>
-
-  ...
-
-</html>
-```
-
-- <small>*Webseiten werden nicht nur von Menschen besucht, sondern auch von Suchmaschinen, Programmen, Bots etc.*</small>
-- <small>*Metadaten helfen bspw. auch Screen-Readern beim "Verstehen" der Inhalte*</small>
-
-<!--
-HEAD-BEREICH: Metadaten, nicht sichtbar im Browser-Fenster
-WICHTIGE META-TAGS:
-- <title>: Browser-Tab, Lesezeichen, Suchergebnis-Titel
-- <meta name="description">: Suchergebnis-Snippet (max. 160 Zeichen)
-- <meta name="viewport">: Mobile Darstellung (width=device-width)
-- <meta charset="UTF-8">: Zeichenkodierung (Umlaute!)
-OPEN GRAPH (og:*): Social Media Vorschau (Facebook, LinkedIn, WhatsApp)
-- og:title, og:description, og:image, og:url
-TWITTER CARDS: twitter:card, twitter:title, twitter:image
-SEO-RELEVANZ: Google nutzt title + description für Ranking und Snippet
-ACCESSIBILITY: <html lang="de"> für Screenreader-Aussprache
-PRÜFUNGSRELEVANT: Was gehört in <head>, Unterschied zu <body>, wichtigste Meta-Tags
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
-# 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!**
-
-<!--
-ACCESSIBILITY (a11y): a + 11 Buchstaben + y
-STATISTIK: ~15% der Weltbevölkerung haben eine Behinderung (WHO)
-ARTEN VON EINSCHRÄNKUNGEN:
-- Permanent: Blindheit, Taubheit, motorische Einschränkungen
-- Temporär: Gebrochener Arm, Augen-OP, Ohrenentzündung
-- Situativ: Helle Sonne (Kontrast), laute Umgebung (kein Audio), Baby auf Arm (eine Hand)
-ASSISTIVE TECHNOLOGIEN:
-- Screenreader: NVDA (Windows, kostenlos), VoiceOver (Apple), JAWS (kommerziell)
-- Braillezeilen: Taktile Ausgabe für Blinde
-- Switch-Geräte: Für motorische Einschränkungen
-- Spracheingabe: Dragon NaturallySpeaking, Siri, Google Assistant
-WCAG: Web Content Accessibility Guidelines (A, AA, AAA)
-EUROPEAN ACCESSIBILITY ACT: Seit Juni 2025 verpflichtend!
-PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
-# 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)
-
-<!--
-RECHTLICHER RAHMEN:
-- European Accessibility Act (EAA): EU-Richtlinie, seit 28. Juni 2025 in Kraft
-- Betrifft: E-Commerce, Banking, Telekommunikation, Transport, E-Books
-- BITV 2.0: Barrierefreie Informationstechnik-Verordnung (DE, öffentliche Stellen)
-- BFSG: Barrierefreiheitsstärkungsgesetz (DE-Umsetzung des EAA)
-- Strafen: Bis zu 100.000€ Bußgeld möglich
-CURB-CUT-EFFEKT:
-- Bordsteinabsenkung für Rollstuhlfahrer → hilft auch Kinderwagen, Rollkoffern, Fahrrädern
-- Untertitel für Gehörlose → helfen in lauter Umgebung, beim Sprachlernen
-- Kontrastreiche Farben → besser bei Sonnenlicht, für ältere Menschen
-BUSINESS CASE:
-- 15% Zielgruppe (Menschen mit Behinderung)
-- +20% ältere Menschen (Sehschwäche, motorische Einschränkungen)
-- SEO-Vorteile: Alt-Texte, semantisches HTML = besser für Google
-PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case
--->
+# HTML-Anatomie (2/2)
 
+- Wir unterscheiden zwischen **umschließende** und **selbst-schließende** HTML-Tags
+  - **Umschließend**
+    - `<b> ... </b>` fett-gedruckter Text (inline)
+    - `<a> ... </a>` Hyperlink (Verlinkung zu anderen Webseiten, Bildern)
+    - `<body> ... </body>` Sichtbarer Teil eines HTML-Dokuments
+    - `<details> ... </details>` Aufklapp-Text (Akkordion)
+  - **Selbst-schließend**
+    - `<img />` Bild, Vektorgrafik etc.
+    - `<input />` Eingabefeld
+    - `<meta />` Metadaten
 
 ---
 
@@ -294,17 +161,16 @@ PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case
 # Barrieren im Netz vermeiden (a11y)
 
 **Tastatur-Test:**
-- Alle Funktionen nur mit Tab + Enter nutzbar?
-- Fokus immer sichtbar?
-- Logische Tab-Reihenfolge?
+- Alle Funktionen sind nur mit Tab + Enter nutzbar
+- Fokus immer sichtbar: Textlinks, Buttons, Texteingabe etc.
+- Logische Tab-Reihenfolge: "Skip to main", Navigation, Hauptinhalt
 
 **Screenreader-Test:**
 - VoiceOver (Mac): `Cmd + F5`
 - NVDA (Windows): Gratis-Download
 
-**Tools:**
-- axe DevTools, WAVE (Browser-Extensions)
-- Lighthouse (in Chrome DevTools)
+**Tools/Browser-Extensions:**
+- [WAVE](https://wave.webaim.org/), [axe DevTools](https://www.deque.com/axe/devtools/), [Web Disability Simulator](https://chromewebstore.google.com/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla)
 
 <!--
 Automatische Tests finden ~30% der Probleme
@@ -319,168 +185,19 @@ Echte NutzerInnen einbeziehen = Gold-Standard
 <!-- _footer: "" -->
 
 
-# Das TCP/IP-Modell
-
-| Schicht | Name | Aufgabe | Protokolle |
-|---------|------|---------|------------|
-| **4** | Anwendung | Was? Welcher Dienst? | HTTP, DNS, SMTP |
-| **3** | Transport | Zuverlässigkeit, Ports | TCP, UDP |
-| **2** | Internet | Routing, globale Adressen | IP |
-| **1** | Netzzugang | Lokale Übertragung | Ethernet, WLAN |
-
-**4 Schichten. Das reicht, um das Internet zu verstehen.**
-
-<!--
-SPEAKER NOTES:
-- TCP/IP = das echte Internet
-- 4 Schichten:
-  - Anwendung: Was will ich? (HTTP, DNS, Mail)
-  - Transport: Kommt an? Welches Programm? (TCP, UDP)
-  - Internet: Wie zum Zielrechner? (IP)
-  - Netzzugang: Wie zum nächsten Gerät? (Ethernet, WLAN)
-- KLAUSUR: Welches Protokoll → welche Schicht
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
-# Dateneinheiten pro Schicht
-
-| Schicht | Name | Dateneinheit | Was kommt hinzu? |
-|---------|------|--------------|------------------|
-| Anwendung | HTTP, DNS | **Daten** | – |
-| Transport | TCP, UDP | **Segment** | Ports, Sequenznummern |
-| Internet | IP | **Paket** | IP-Adressen |
-| Netzzugang | Ethernet | **Frame** | MAC-Adressen, Prüfsumme |
-
-Merkhilfe: **D**aten → **S**egment → **P**aket → **F**rame
-(„**D**er **S**ache **P**raktischer **F**olgen")
-
-<!--
-SPEAKER NOTES:
-- Glossar-Begriffe jetzt eingeordnet:
-  - Anwendung: Daten/Message
-  - Transport: Segment
-  - Internet: Paket
-  - Netzzugang: Frame
-- Merkhilfe: D-S-P-F (eigene erfinden!)
-- KLAUSUR: Begriff → Schicht
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
-# IP vs. MAC vs. Port
-
-| | IP-Adresse | MAC-Adresse | Port |
-|---|-----------|-------------|------|
-| **Frage** | Welcher Rechner? | Welches Gerät nebenan? | Welches Programm? |
-| **Reichweite** | Global | Lokal (1 Hop) | Auf einem Rechner |
-| **Ändert sich?** | Nein | Ja, bei jedem Hop | Nein |
-| **Schicht** | Internet (IP) | Netzzugang (Ethernet) | Transport (TCP/UDP) |
-| **Beispiel** | 212.132.79.37 | aa:bb:cc:dd:ee | 443 |
-
-<!--
-SPEAKER NOTES:
-- KLAUSUR: Diese Tabelle
-- IP: Welcher Rechner? Global. Bleibt gleich.
-- MAC: Welcher Nachbar? Lokal. Ändert sich.
-- Port: Welches Programm? Bleibt gleich.
-- Merken: NUR MAC ändert sich unterwegs
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
-# Der 3-Way-Handshake
-
-```
-Client (dein Laptop)                      Server
-    |                                        |
-    |-------- SYN (Seq=1000) --------------->|
-    |         "Ich will reden"               |
-    |                                        |
-    |<--- SYN-ACK (Seq=5000, Ack=1001) ------|
-    |     "OK, ich auch. Ich starte bei 5000"|
-    |                                        |
-    |-------- ACK (Ack=5001) --------------->|
-    |         "Verstanden, los geht's"       |
-    |                                        |
-    |        [ Verbindung steht ]            |
-```
-
-**SYN** = Synchronize · **ACK** = Acknowledge
-
-<!--
-SPEAKER NOTES:
-- 3 Pakete → Verbindung steht
-- 1. Client SYN: "Will Verbindung, starte bei 1000"
-- 2. Server SYN-ACK: "OK, ich starte bei 5000, erwarte 1001"
-- 3. Client ACK: "Verstanden, erwarte 5001"
-- Seq-Nr wichtig: Beide wissen nächstes erwartetes Byte
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
-# TCP vs. UDP
-
-| | TCP | UDP |
-|---|-----|-----|
-| **Verbindung** | Ja (Handshake) | Nein |
-| **Reihenfolge** | Garantiert | Nicht garantiert |
-| **Verlorene Pakete** | Werden nachgefordert | Gehen verloren |
-| **Overhead** | Höher | Niedriger |
-| **Use Cases** | Web, Email, Downloads | Video-Calls, Gaming, DNS |
-
-<!--
-SPEAKER NOTES:
-- Zwei Transport-Protokolle
-- TCP: zuverlässig
-  - Handshake, Seq-Nr, Bestätigungen, Neuübertragung
-  - Perfekt für Web, Downloads (nichts darf fehlen)
-- UDP: schneller
-  - Kein Handshake, keine Bestätigungen
-  - Verloren = weg
-  - Perfekt für Video-Calls (Verzögerung schlimmer als Verlust)
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
 # HTTP-Methoden
 
-| Methode | Bedeutung | Beispiel |
-|---------|-----------|----------|
-| **GET** | Daten abrufen | Seite laden |
-| **POST** | Daten senden | Formular absenden |
-| **PUT** | Daten ersetzen | Profil aktualisieren |
-| **DELETE** | Daten löschen | Account löschen |
+HTTP-Methoden beschreiben, **was** der Client mit einer Ressource tun will.
+
+| Methode | Bedeutung | Beispiel                                      |
+|---------|-----------|-----------------------------------------------|
+| **GET** | Daten abrufen | Seite laden `GET /index.html HTTP/2.0`        |
+| **POST** | Daten senden | Formular absenden `POST /login HTTP/2.0`      |
+| **PUT** | Daten ersetzen | Profil aktualisieren `PUT /users/42 HTTP/2.0` |
+| **DELETE** | Daten löschen | Account löschen `DELETE /users/42 HTTP/2.0`                               |
+
+<small>CRUD = Create, Read, Update, Delete</small>
 
-```http
-GET /index.html HTTP/1.1
-POST /login HTTP/1.1
-```
 
 <!--
 SPEAKER NOTES:
@@ -505,10 +222,12 @@ Das wird wichtiger, wenn ihr mit REST-APIs arbeitet.
 
 # HTTP Status-Codes
 
+Jede HTTP-Response enthält einen dreistelligen Status-Code — die erste Ziffer verrät die Kategorie.
+
 ```http
-HTTP/1.1 200 OK
-HTTP/1.1 404 Not Found
-HTTP/1.1 500 Internal Server Error
+HTTP/2.0 200 OK
+HTTP/2.0 404 Not Found
+HTTP/2.0 500 Internal Server Error
 ```
 
 | Code-Bereich | Bedeutung |
@@ -539,112 +258,76 @@ Status-Codes sagen euch, was passiert ist.
 <!-- _footer: "" -->
 
 
-# Zusammenfassung Teil 1
+# Selektoren: ID
 
-**Der Ablauf:**
-1. DNS (UDP:53) → Name zu IP
-2. TCP-Handshake (SYN → SYN-ACK → ACK)
-3. HTTP-Request (GET /...)
-4. HTTP-Response (200 OK + HTML)
+![bg right:35%](./assets/demos/css-selector-id.png)
 
-**Die Konzepte:**
-- 4 Schichten: Anwendung → Transport → Internet → Netzzugang
-- IP bleibt gleich, MAC ändert sich pro Hop
-- Ports identifizieren Programme
-- Encapsulation: Jede Schicht verpackt die darüberliegende
-
-<!--
-SPEAKER NOTES:
-
-Das ist die Zusammenfassung für Teil 1. Das solltet ihr können:
-
-Den Ablauf: DNS, TCP-Handshake, HTTP-Request, HTTP-Response.
-
-Die Schichten und ihre Protokolle.
-
-Den Unterschied zwischen IP und MAC – was bleibt gleich, was ändert sich.
-
-Was Ports tun.
-
-Wie Encapsulation funktioniert.
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
-# Spezifität: Welche Regel gewinnt?
-
-| 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 |
-
-```css
-p { color: blue; }           /* 0,0,0,1 */
-.text { color: green; }      /* 0,0,1,0 → gewinnt */
-#intro { color: red; }       /* 0,1,0,0 → gewinnt über beide */
+```html
+<nav id="hauptnavigation">...</nav>
 ```
 
-<!--
-SPEAKER NOTES:
-
-Wenn mehrere Regeln auf ein Element zutreffen, gewinnt die spezifischere.
-
-Spezifität wird in vier Zahlen gemessen. Von links nach rechts: Inline, IDs, Klassen, Elemente.
-
-Ein Element-Selektor hat 0,0,0,1. Eine Klasse hat 0,0,1,0. Eine ID hat 0,1,0,0.
-
-0,0,1,0 schlägt 0,0,0,99 – auch hundert Element-Selektoren schlagen keine Klasse.
-
-Inline-Styles schlagen alles – außer !important, was ihr vermeiden solltet.
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
-# Responsive Design
-
 ```css
-/* Mobile First: Basis-Styles */
-.container {
+#hauptnavigation {
+    background: #333;
     padding: 1rem;
-    background: white;
-}
-
-/* Ab 768px (Tablet): Anpassungen */
-@media (min-width: 768px) {
-    .container {
-        padding: 2rem;
-        background: red;
-    }
-}
-
-/* Ab 1024px (Desktop): Weitere Anpassungen */
-@media (min-width: 1024px) {
-    .container {
-        background: green;
-    }
 }
 ```
 
+**Raute** vor dem Namen = ID
+
+**Achtung:** IDs sollten **einmalig** pro Seite sein.
+
 <!--
 SPEAKER NOTES:
 
-Responsive Design: Die Seite passt sich der Bildschirmgröße an.
+ID-Selektoren sind noch spezifischer. Raute vor dem Namen.
 
-Mobile First: Ihr schreibt zuerst die Styles für kleine Screens. Dann fügt ihr mit @media-Queries Anpassungen für größere Screens hinzu.
+IDs sollten auf einer Seite nur einmal vorkommen. Für Navigation, Header, Footer, Main – einmalige Elemente.
 
-min-width heißt: "ab dieser Breite". Also: Basis gilt für alle. Ab 768px gelten zusätzliche Regeln. Ab 1024px noch mehr.
-
-Das Gegenteil wäre Desktop First mit max-width – aber Mobile First ist heute Standard.
+In der Praxis: Klassen sind meist besser. IDs haben hohe Spezifität und sind unflexibel.
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Farben
+
+![bg right:35%](./assets/demos/css-colors.png)
+
+CSS kennt fünf Farb-Notationen: **Keyword**, **Hex**, **RGB**, **RGBA** und **HSL**.
+
+```css
+/* Keyword */
+color: red;
+color: rebeccapurple;
+/* Hex */
+color: #FF0000;
+color: #F00;
+/* RGB = Red Green Blue, RGBA mit Alpha */
+color: rgb(255, 0, 0);
+color: rgba(255, 0, 0, 0.5);
+/* HSL = Hue, Saturation, Lightness */
+color: hsl(0, 100%, 50%);
+```
+
+MDN-Referenz: [CSS `<color>`](https://developer.mozilla.org/de/docs/Web/CSS/Reference/Values/color_value)
+
+<!--
+SPEAKER NOTES:
+
+Farben können auf verschiedene Arten angegeben werden.
+
+Keywords: red, blue, rebeccapurple. Begrenzte Auswahl, aber lesbar.
+
+Hex: Sechs Zeichen, je zwei für Rot, Grün, Blau. #FF0000 ist reines Rot.
+
+RGB: Gleiche Idee, aber dezimal. rgb(255, 0, 0).
+
+RGBA: Mit Alpha-Kanal für Transparenz. 0 ist unsichtbar, 1 ist voll sichtbar.
+
+HSL: Hue, Saturation, Lightness. Manchmal intuitiver für Farbanpassungen.
 -->