---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Grundlagen IT- und Internettechnik"
footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
title: "Termin 2: Netzwerke, Protokolle & CSS"
---

<style>
:root {
  --color-foreground: #1a1a2e;
  --color-highlight: #d63384;
  --color-dimmed: #4a4a6a;
}
section.invert {
  --color-foreground: #fff;
}
section {
  font-size: 1.7rem;
}
h2 {
  color: var(--color-highlight);
}
pre {
  background: #0f0f23;
  color: #d63384;
  border-radius: 8px;
  border-left: 3px solid #d63384;
}
pre code {
  background: transparent;
  color: inherit;
}
code {
  background: #1a1a2e;
  color: #d63384;
  padding: 0.15em 0.4em;
  border-radius: 4px;
}
a {
  color: var(--color-highlight);
}
</style>

<!-- _class: invert -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: black -->

![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**

---

<!-- _class: lead -->

# Termin 2 – 10.01.2026
## Netzwerke, Protokolle & CSS

---

# Rückblick Termin 1

**Was wir gelernt haben:**

- Geschichte: Hollerith → IBM → Von Neumann → ARPANET
- Von-Neumann-Architektur (5 Komponenten)
- Bits, Bytes, Hexadezimal
- HTML-Grundlagen & semantische Tags

**Fragen? Probleme bei der Fleißaufgabe?**

<!--
Kurze Wiederholung
Fragen klären
Wer hat die Fleißaufgabe gemacht?
-->

---

# Heute

**Vormittag:**
- Netzwerke vertieft (OSI, TCP/IP)
- DNS: Wie funktionieren Domain-Namen?
- HTTP im Detail

**Nachmittag:**
- CSS-Grundlagen
- Selektoren & Spezifität
- Layouts mit Flexbox
- Hands-On: Eure Seite stylen

---

<!-- _class: lead -->

# Teil 1: Netzwerke
## Wie Daten reisen

---

# Wiederholung: OSI-Modell

**Merksatz:** "**A**lle **d**eutschen **S**tudenten **t**rinken **v**erschiedene **S**orten **B**ier"

| Schicht | Name | Merksatz |
|---------|------|----------|
| 7 | **A**nwendung | **A**lle |
| 6 | **D**arstellung | **d**eutschen |
| 5 | **S**itzung | **S**tudenten |
| 4 | **T**ransport | **t**rinken |
| 3 | **V**ermittlung | **v**erschiedene |
| 2 | **S**icherung | **S**orten |
| 1 | **B**itübertragung | **B**ier |

<!--
Von oben nach unten: 7 bis 1
Merksatz hilft beim Behalten
-->

---

# 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 = theoretisches Modell
TCP/IP = praktische Implementierung
Internet nutzt TCP/IP
-->

---

# 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!

<!--
8 Bit = 1 Byte
100 Mbit/s = 12,5 MB/s (theoretisch)
Overhead reduziert reale Geschwindigkeit
-->

---

# 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 │
└────────┴────────┴──────┴─────────┴─────┘
```

<!--
MAC = Media Access Control
FCS = Frame Check Sequence (Prüfsumme)
Switch arbeitet auf Layer 2
-->

---

# 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)

<!--
Subnetzmaske bestimmt Netzwerkgröße
/24 = 255.255.255.0 = 254 Hosts
Private IPs: 192.168.x.x, 10.x.x.x, 172.16-31.x.x
-->

---

# 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 = Transmission Control Protocol
UDP = User Datagram Protocol
TCP für alles Wichtige
UDP für Echtzeit (Video-Call, 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

<!--
Bevor Daten fließen: Handshake
Sequenznummern für Reihenfolge
ACK bestätigt Empfang
-->

---

# 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 |

<!--
Anwendungsschicht = was NutzerInnen "sehen"
Ports = "Türnummern" auf Server
-->

---

<!-- _class: lead -->

# 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

<!--
Niemand merkt sich IP-Adressen
DNS macht Internet benutzbar
-->

---

# DNS-Hierarchie

```
                    . (Root)
                   /|\
                  / | \
               .de .com .org
              /       \
           hdm-stuttgart  google
              |            |
            www          mail
```

**FQDN:** `www.hdm-stuttgart.de.` (mit Punkt am Ende!)

<!--
Hierarchisch wie Dateisystem
Root-Server weltweit verteilt (13 Cluster)
TLD = Top Level Domain (.de, .com, .org)
FQDN = Fully Qualified Domain Name
-->

---

# 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

<!--
Rekursive Auflösung
DNS-Cache auf vielen Ebenen (Browser, OS, Router, ISP)
TTL = Time To Live (wie lange cachen)
-->

---

# 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..."` |

<!--
dig oder nslookup zum Nachschauen
A = Address
CNAME = Canonical Name (Weiterleitung)
MX = Mail Exchange
-->

---

# Hands-On: DNS erkunden (15 Min)

**Terminal öffnen:**

```bash
# DNS-Auflösung
nslookup hdm-stuttgart.de
nslookup google.com

# Detaillierter (Linux/Mac)
dig hdm-stuttgart.de
dig google.com MX

# Weg verfolgen
traceroute hdm-stuttgart.de   # Mac/Linux
tracert hdm-stuttgart.de      # Windows
```

**Online-Tool:** https://toolbox.googleapps.com/apps/dig/

<!--
nslookup auf allen Systemen verfügbar
dig zeigt mehr Details
Verschiedene Record-Typen ausprobieren
-->

---

<!-- _class: lead -->

# HTTP 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 |

<!--
Header = Metadaten
Body kommt nach leerem Zeile (bei POST)
-->

---

# HTTP-Response

```http
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234

<!DOCTYPE html>
<html>...</html>
```

**Status-Codes:** 2xx Erfolg · 3xx Umleitung · 4xx Client-Fehler · 5xx Server-Fehler

<!--
200 OK, 404 Not Found, 500 Internal Error
-->

---

# HTTP-Methoden

| Methode | Zweck | Beispiel |
|---------|-------|----------|
| **GET** | Daten abrufen | Seite laden |
| **POST** | Daten senden | Formular absenden |
| **PUT** | Daten ersetzen | Profil aktualisieren |
| **PATCH** | Daten teilweise ändern | Einzelnes Feld |
| **DELETE** | Daten löschen | Account löschen |

**CRUD:** Create, Read, Update, Delete
→ POST, GET, PUT/PATCH, DELETE

<!--
REST-APIs nutzen diese Methoden
GET = idempotent (mehrfach = gleiches Ergebnis)
POST = nicht idempotent
-->

---

# Hands-On: HTTP beobachten (20 Min)

**DevTools öffnen:** `F12` (Win/Linux) · `Cmd+Option+I` (Mac)

**Tab "Netzwerk" (Network):**
1. Beliebige Webseite öffnen
2. Requests beobachten
3. Auf Request klicken → Headers & Response analysieren

**Beobachtet:** Anzahl Requests, Dateitypen (JS, CSS, Bilder...)

---

<!-- _class: lead -->

# Pause
## 15 Minuten

---

<!-- _class: lead -->

# 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;
}
```

<!--
Erfunden 1996
Vor CSS: Inline-Styles, <font>-Tags (Horror!)
Separation of Concerns
-->

---

# CSS einbinden

**Option 1: Externe Datei** (empfohlen!)
```html
<link rel="stylesheet" href="style.css">
```

**Option 2: Style-Tag**
```html
<style>p { color: blue; }</style>
```

**Option 3: Inline** (vermeiden!)
```html
<p style="color: blue;">...</p>
```

<!--
Externe Datei = wiederverwendbar, cachebar
-->

---

# CSS-Anatomie

```css
selector {
    property: value;
    property: value;
}
```

**Beispiel:**
```css
h1 {
    color: #333333;
    font-size: 2rem;
    margin-bottom: 1rem;
}
```

<!--
Selector = Was wird gestylt?
Property = Welche Eigenschaft?
Value = Welcher Wert?
Semikolon am Ende jeder Zeile!
-->

---

# Selektoren: Element

```css
/* Alle <p>-Elemente */
p {
    color: gray;
}

/* Alle <h1>-Elemente */
h1 {
    font-size: 2rem;
}

/* Mehrere Elemente */
h1, h2, h3 {
    font-family: sans-serif;
}
```

<!--
Einfachster Selektor
Betrifft ALLE Elemente dieses Typs
-->

---

# Selektoren: Klasse

```html
<p class="wichtig">Dieser Text ist wichtig.</p>
<p>Dieser nicht.</p>
```

```css
/* Alle Elemente mit class="wichtig" */
.wichtig {
    color: red;
    font-weight: bold;
}
```

**Punkt** vor dem Namen = Klasse

<!--
Klassen sind wiederverwendbar
Ein Element kann mehrere Klassen haben
class="wichtig gross rot"
-->

---

# Selektoren: ID

```html
<nav id="hauptnavigation">...</nav>
```

```css
/* Element mit id="hauptnavigation" */
#hauptnavigation {
    background: #333;
    padding: 1rem;
}
```

**Raute** vor dem Namen = ID

⚠️ IDs sollten **einmalig** pro Seite sein!

<!--
ID = unique identifier
Für CSS: Klassen bevorzugen
IDs für JavaScript/Anker-Links
-->

---

# Selektoren: Kombinationen

```css
/* Nachfahre (irgendwo drin) */
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;
}
```

<!--
Leerzeichen = Nachfahre (beliebig tief)
> = direktes Kind
+ = unmittelbar folgendes Geschwister
-->

---

# 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! */
```

<!--
Specificity Calculator online
Höhere Zahl links gewinnt
Bei Gleichstand: Letzte Regel gewinnt
!important überschreibt alles (vermeiden!)
-->

---

# Box-Modell

```
┌─────────────────────────────────────┐
│              margin                 │
│   ┌─────────────────────────────┐   │
│   │          border             │   │
│   │   ┌─────────────────────┐   │   │
│   │   │       padding       │   │   │
│   │   │   ┌─────────────┐   │   │   │
│   │   │   │   content   │   │   │   │
│   │   │   └─────────────┘   │   │   │
│   │   └─────────────────────┘   │   │
│   └─────────────────────────────┘   │
└─────────────────────────────────────┘
```

<!--
Jedes Element ist eine Box
Content = Inhalt
Padding = Innenabstand
Border = Rahmen
Margin = Außenabstand
-->

---

# 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;
}
```

<!--
box-sizing: border-box = width inkl. padding+border
Standard: content-box = width nur content
border-box fast immer besser!
-->

---

# 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 */
```

<!--
Hex = kompakt, weit verbreitet
RGBA = mit Transparenz
HSL = intuitiver für Farbänderungen
-->

---

# 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

<!--
px = pixelgenau, aber nicht responsive
rem = konsistent, skaliert mit Browser-Zoom
vw/vh = Viewport (sichtbarer Bereich)
-->

---

# Hands-On: Erste Styles (30 Min)

**Erstellt `style.css` für eure HTML-Seite:**

1. CSS-Datei im `<head>` verlinken
2. Grundschrift setzen (`font-family`, `line-height`, `color`)
3. Überschriften, Links, Listen stylen
4. Mit Farben und Abständen experimentieren

**Ressource:** https://codescripsi.es/
- **Basics:** Alle machen
- **Advanced:** Wer möchte

---

<!-- _class: lead -->

# Mittagspause
## 60 Minuten

---

<!-- _class: lead -->

# Teil 3: Layouts
## 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)

<!--
CSS war lange schlecht für Layouts
Flexbox seit ~2012 stabil
Grid seit ~2017 stabil
-->

---

# Flexbox: Grundlagen

```css
.container {
    display: flex;
}
```

```html
<div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>
```

**Ergebnis:** Items nebeneinander (Zeile)

<!--
Parent = Flex Container
Children = Flex Items
Standardrichtung: row (Zeile)
-->

---

# Flexbox: Richtung

```css
.container {
    display: flex;
    flex-direction: row;        /* Standard: Zeile */
    flex-direction: column;     /* Spalte */
    flex-direction: row-reverse;
    flex-direction: column-reverse;
}
```

<!--
row = horizontal (links nach rechts)
column = vertikal (oben nach unten)
reverse = umgekehrte Reihenfolge
-->

---

# 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 */
}
```

<!--
justify-content = Hauptachse
align-items = Querachse
Achsen tauschen bei column!
-->

---

# 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

<!--
Historisch schwieriges Problem
Flexbox löst es elegant
-->

---

# 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 */
}
```

<!--
flex: 1 = gleichmäßig verteilen
flex: 0 0 200px = fixe Größe
-->

---

# 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;
}
```

<!--
Klassisches Navigations-Layout
Logo links, Links rechts
Oder gleichmäßig verteilt
-->

---

# 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-Klassen = Zustände, kein JavaScript nötig!
-->

---

# 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

<!--
content nur bei ::before/::after
-->

---

# 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)

<!--
Mobile First = Standard für klein, dann größere überschreiben
-->

---

# Hands-On: Layout bauen (60 Min)

**Erstellt ein komplettes Layout:**

1. **Header** mit Logo (links) und Navigation (rechts)
2. **Main** mit zwei Spalten (Sidebar + Content)
3. **Footer** mit zentriertem Copyright

**Anforderungen:**
- Nutzt Flexbox
- Responsive: Auf Handy untereinander
- Hover-Effekte für Links
- Mindestens 2 Farben

**Hilfe:** https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

# Beispiel-Struktur

```html
<body>
    <header>
        <div class="logo">Meine Seite</div>
        <nav>
            <a href="#">Home</a>
            <a href="#">Über</a>
            <a href="#">Kontakt</a>
        </nav>
    </header>
    
    <main>
        <aside>Sidebar</aside>
        <article>Hauptinhalt</article>
    </main>
    
    <footer>© 2026</footer>
</body>
```

---

# Beispiel-CSS

```css
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #2c3e50;
    color: white;
}

main {
    display: flex;
    gap: 2rem;
    padding: 2rem;
}

aside {
    flex: 0 0 250px;
}

article {
    flex: 1;
}

@media (max-width: 768px) {
    main { flex-direction: column; }
    aside { flex: none; }
}
```

---

<!-- _class: lead -->

# Pause
## 15 Minuten

---

<!-- _class: lead -->

# 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!**

<!--
transition: property duration timing-function
ease = sanfter Anfang/Ende
linear = gleichmäßig
ease-in-out = sanft beides
-->

---

# 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);
}
```

<!--
Schwebendes Karten-Design
Moderne UI-Technik
Subtil aber wirkungsvoll
-->

---

# 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);
}
```

<!--
:root = html-Element
Variablen beginnen mit --
var() zum Abrufen
Änderung an einer Stelle → überall aktualisiert
-->

---

# 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);
}
```

<!--
Automatisch je nach System-Einstellung
prefers-color-scheme Media Query
Variablen machen's einfach
-->

---

# Hands-On: Styling finalisieren (45 Min)

**Erweitert eure Seite:**

1. **Transitions** für alle Links und Buttons
2. **CSS-Variablen** für Farben
3. **Hover-Effekte** für Karten/Boxen
4. **Media Query** für Mobile

**Bonus:**
- Dark Mode Support
- Animierte Navigation

---

# Fleißaufgabe bis 24.01.

**Baut eine vollständige Portfolio-Seite:**

1. Mehrere Unterseiten (HTML-Dateien)
2. Konsistentes Layout (Header, Footer, Navigation)
3. Responsive Design (Mobile-freundlich)
4. Mindestens ein Kontaktformular

**Ressourcen:**
- CSS lernen: https://codescripsi.es/
- Flexbox: https://flexboxfroggy.com/
- Grid: https://cssgridgarden.com/

---

<!-- _class: lead -->

# Fragen & Diskussion

**Nächster Termin:** 24.01.2026 – JavaScript

**Kontakt:** mail@librete.ch

---

# Zusammenfassung Termin 2

**Netzwerke:**
- OSI-Modell (7 Schichten) vs. TCP/IP (4 Schichten)
- DNS: Namen → IP-Adressen
- HTTP: Request/Response, Status-Codes

**CSS:**
- Selektoren (Element, Klasse, ID)
- Box-Modell (Content, Padding, Border, Margin)
- Flexbox für Layouts
- Responsive Design mit Media Queries
- Transitions für Animationen

---

# 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/