remove hands-on slides and empty slide after flexbox navigation

slides/2026-01-10-termin-2-netzwerke-protokolle-css.md

@@ -566,34 +566,6 @@ 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
@@ -665,19 +637,6 @@ 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 -->
 
 # Teil 2: CSS
@@ -1198,21 +1157,6 @@ Echte NutzerInnen einbeziehen = Gold-Standard
 
 ---
 
-# 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 -->
 
 # Teil 3: Layouts (optional)
@@ -1391,10 +1335,6 @@ Logo links, Links rechts
 Oder gleichmäßig verteilt
 -->
 
----
-
-
-
 ---
 
 # Pseudo-Klassen
@@ -1458,82 +1398,6 @@ 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 -->
 
 # Teil 4: CSS vertiefen
@@ -1657,21 +1521,6 @@ 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
-
----
-
 <!-- _class: lead -->
 
 # Fragen & Diskussion