223015c 02: osi/tcp-ip-grafik korrekt gemappt + headline-umbruch fix

slides/223015c/02-netzwerke-protokolle-css.md

@@ -345,16 +345,16 @@ SPEAKER NOTES:
 
 ![bg right:40% fit](./assets/demos/network-chain.png)
 
-Zwischen Ihnen und einer Webseite liegen viele Stationen.
+Zwischen Klick und fertiger Webseite liegen viele Stationen.
 
-Jede Komponente "spricht" anders:
+Jede Schicht spricht eine andere Sprache:
 
 - Browser → **HTTP**
-- Netzwerkkarte → **Bits / Signale**
+- Netzwerkkarte → **Bits und Signale**
 - Router → **IP-Pakete**
 - Provider → **Routing**
 
-Wie zusammenbringen?
+Diese Sprachen müssen zusammenspielen.
 
 <!--
 SPEAKER NOTES:
@@ -370,7 +370,7 @@ SPEAKER NOTES:
 
 # Die Lösung: Arbeitsteilung
 
-Statt dass jedes Programm alles können muss: **Aufgaben aufteilen.**
+Statt dass jedes Programm alles können muss, teilen sich mehrere Schichten die Aufgaben.
 
 | Wer? | Aufgabe | Typische Geräte |
 |------|---------|-----------------|
@@ -447,9 +447,9 @@ Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum
 
 ![bg right:52% fit](./assets/demos/encap-layers.png)
 
-**Encapsulation:** Jede Schicht packt ein.
+**Encapsulation:** Jede Schicht verpackt die Daten der darüberliegenden Schicht.
 
-**Decapsulation:** Beim Empfang wird ausgepackt.
+**Decapsulation:** Beim Empfang packt jede Schicht ihren Teil wieder aus.
 
 <!--
 SPEAKER NOTES:
@@ -515,18 +515,17 @@ SPEAKER NOTES:
 
 ---
 
-# Warum ist das clever?
+# Vorteile der Schichtung
 
 **Ohne Schichten:**
-Jede App müsste wissen, wie Ethernet-Frames gebaut werden, wie WLAN funktioniert, wie Router Pakete weiterleiten...
+Jede Anwendung müsste wissen, wie Ethernet-Frames gebaut werden, wie WLAN funktioniert und wie Router Pakete weiterleiten.
 
 **Mit Schichten:**
-Der Browser sagt: "Ich will diese Seite."
-Alles andere übernehmen die Schichten darunter.
+Der Browser fordert nur die Seite an. Alles Weitere übernehmen die Schichten darunter.
 
 **Austauschbarkeit:**
-WLAN statt Ethernet? Nur Schicht 1 ändert sich.
-HTTP/2 statt HTTP/1? Nur Schicht 4 ändert sich.
+Wechselt WLAN zu Ethernet, ändert sich nur Schicht 1.
+Löst HTTP/2 die Version HTTP/1 ab, ändert sich nur Schicht 4.
 
 <!--
 SPEAKER NOTES:
@@ -539,9 +538,9 @@ SPEAKER NOTES:
 
 ---
 
-# Exkurs: OSI vs. TCP/IP
+# OSI vs. TCP/IP
 
-![bg right:50% fit](./assets/demos/osi-tcpip-diagram.png)
+![bg right:48% fit](./assets/demos/osi-tcpip-diagram.png)
 
 OSI (7 Schichten) ist ein theoretisches Referenzmodell — TCP/IP (4 Schichten) beschreibt das reale Internet.
 
@@ -559,7 +558,7 @@ SPEAKER NOTES:
 <!-- _class: lead -->
 
 # Die drei Adressen
-## IP, MAC und Port – wer braucht was?
+## IP, MAC und Port im Zusammenspiel
 
 <!--
 SPEAKER NOTES:
@@ -580,8 +579,7 @@ SPEAKER NOTES:
 - **Bleibt gleich** auf dem gesamten Weg
 - Analogie: **Empfänger auf einem Brief**
 
-Router lesen die IP und entscheiden:
-"Ist das für mich? Nein → in welche Richtung weiterleiten?"
+Router lesen die Ziel-IP und leiten das Paket in die passende Richtung weiter.
 
 <!--
 SPEAKER NOTES:
@@ -604,7 +602,7 @@ aa:bb:cc:dd:ee:ff
 - **Ändert sich bei jedem Hop**
 - Analogie: **"Nächstes Postamt: XY"**
 
-Funktioniert nur innerhalb eines Netzwerksegments.
+Sie funktioniert nur innerhalb eines Netzwerksegments.
 
 <!--
 SPEAKER NOTES:
@@ -699,7 +697,7 @@ Drei Adressebenen lösen drei verschiedene Probleme:
 <!-- _class: lead -->
 
 # Die Reise eines Klicks
-## Was passiert, wenn Sie `www.hdm-stuttgart.de` aufrufen?
+## Was passiert, wenn ihr `www.hdm-stuttgart.de` aufruft?
 
 <!--
 SPEAKER NOTES:
@@ -713,13 +711,13 @@ SPEAKER NOTES:
 
 # Das Szenario
 
-Sie sind im WLAN der HdM und rufen auf:
+Ihr seid im WLAN der HdM und ruft auf:
 
 ```
 https://www.hdm-stuttgart.de
 ```
 
-**Zwischen Enter und fertiger Seite:** ~200 Millisekunden.
+Zwischen Enter und fertiger Seite vergehen rund 200 Millisekunden.
 
 In dieser Zeit passieren hunderte Operationen.
 
@@ -775,11 +773,11 @@ SPEAKER NOTES:
 www.hdm-stuttgart.de  →  212.132.79.37
 ```
 
-Ihr Laptop fragt sich durch:
+Euer Laptop arbeitet die Quellen der Reihe nach ab:
 
-1. **Browser-Cache:** "War ich da kürzlich?" → Nein
-2. **OS-Cache:** "Kennt das Betriebssystem die IP?" → Nein
-3. **Router/Provider:** DNS-Server wird gefragt
+1. **Browser-Cache** prüfen → kein Eintrag
+2. **OS-Cache** prüfen → kein Eintrag
+3. **Router/Provider:** DNS-Server anfragen
 
 <!--
 SPEAKER NOTES:
@@ -836,7 +834,7 @@ SPEAKER NOTES:
 
 # DNS ist selbst Netzwerk
 
-Die DNS-Anfrage ist ein ganz normales Paket:
+Die DNS-Anfrage ist ein gewöhnliches Paket:
 
 | Eigenschaft | Wert |
 |-------------|------|
@@ -867,7 +865,7 @@ www.hdm-stuttgart.de = 212.132.79.37
 
 Diese Information wird gecached (für Minuten bis Stunden).
 
-**Nächster Schritt:** Verbindung aufbauen.
+Der nächste Schritt ist der Verbindungsaufbau.
 
 <!--
 SPEAKER NOTES:
@@ -894,7 +892,7 @@ SPEAKER NOTES:
 
 ---
 
-# Warum ein Handshake?
+# Zweck des Handshakes
 
 TCP ist **verbindungsorientiert**:
 
@@ -905,8 +903,6 @@ TCP ist **verbindungsorientiert**:
 **Analogie:**
 Telefonat: Klingeln → Abheben → "Hallo?" → Gespräch beginnt
 
-Nicht: Einfach losreden und hoffen, dass jemand zuhört.
-
 <!--
 SPEAKER NOTES:
 - Warum Aufwand?
@@ -975,7 +971,7 @@ Der Handshake synchronisiert **Sequenznummern** – essenziell für TCPs Zuverl
 
 ![bg right:42% fit](./assets/demos/client-server-ports.png)
 
-**Jetzt erst** kann HTTP gesprochen werden.
+Erst jetzt kann HTTP übertragen werden.
 
 <!--
 SPEAKER NOTES:
@@ -1000,7 +996,7 @@ SPEAKER NOTES:
 
 ---
 
-# Was Ihr Browser sendet
+# Was euer Browser sendet
 
 ```http
 GET / HTTP/2.0
@@ -1011,17 +1007,17 @@ Accept-Language: de-DE
 Connection: keep-alive
 ```
 
-~200 Bytes Text.
+Der Request umfasst rund 200 Bytes Text.
 
-**GET** = "Gib mir" (im Gegensatz zu POST = "Nimm das")
-**/** = "Die Startseite"
+**GET** ruft Daten ab (im Gegensatz zu **POST**, das Daten sendet).
+**/** bezeichnet die Startseite.
 
 <!--
 SPEAKER NOTES:
 - HTTP-Request: lesbar, menschlich verständlich
-- GET = "hol mir was" (POST = "hier Daten für Sie")
+- GET = "hol mir was" (POST = "hier Daten für euch")
 - "/" = Wurzel = Startseite
-- HTTP/1.1 = Protokollversion
+- HTTP/2.0 = Protokollversion
 - Header: Kontext (Host, Browser, Sprache)
 - ~200 Bytes Text → müssen durchs Internet
 -->
@@ -1106,13 +1102,13 @@ SPEAKER NOTES:
 
 <!-- _class: dimmed -->
 
-# Woher kennt Ihr Laptop die Router-MAC?
+# Router-MAC per ARP ermitteln
 
 **ARP** – Address Resolution Protocol
 
 ![w:900 center](./assets/demos/arp-lookup.png)
 
-Das passiert automatisch. Die Info wird gecached.
+Das geschieht automatisch. Die Information wird gecached.
 
 <!--
 SPEAKER NOTES:
@@ -1139,7 +1135,7 @@ Frame wird zu **Bits** – Bits werden zu Signalen:
 01001000 01010100 01010100 01010000 ...
 ```
 
-Ab hier übernimmt die Physik.
+Ab Schicht 1 erfolgt die Übertragung physikalisch.
 
 <!--
 SPEAKER NOTES:
@@ -1167,17 +1163,17 @@ SPEAKER NOTES:
 
 ---
 
-# Der erste Hop: Ihr Router
+# Der erste Hop: Euer Router
 
 **Laptop** → [Frame] → **Router**
 
-Der Router empfängt:
+Der Router verarbeitet das Frame in drei Schritten:
 
-1. **Layer 1:** Signale → Bits
-2. **Layer 2:** Frame prüfen. MAC okay? → Auspacken
-3. **Layer 3:** IP lesen. "212.132.79.37 – nicht mein Netz"
+1. **Layer 1:** Signale werden zu Bits.
+2. **Layer 2:** Frame und MAC-Adresse werden geprüft, dann ausgepackt.
+3. **Layer 3:** Die Ziel-IP liegt außerhalb des lokalen Netzes.
 
-**Routing-Entscheidung:** "Ich schicke es Richtung Internet."
+**Routing-Entscheidung:** Das Paket geht Richtung Internet weiter.
 
 <!--
 SPEAKER NOTES:
@@ -1190,7 +1186,7 @@ SPEAKER NOTES:
 
 ---
 
-# Der Router verpackt NEU
+# Der Router verpackt neu
 
 ![w:900 center](./assets/demos/ethernet-rehop.png)
 
@@ -1213,7 +1209,7 @@ SPEAKER NOTES:
 
 ![bg right:35% fit](./assets/demos/hop-chain.png)
 
-Bei jedem Hop:
+Bei jedem Hop laufen drei Schritte ab:
 
 1. Auspacken bis Layer 3 (IP)
 2. Routing-Entscheidung
@@ -1249,9 +1245,9 @@ SPEAKER NOTES:
 
 ![bg right:42% fit](./assets/demos/server-decap.png)
 
-Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
+Jede Schicht prüft, ob das Paket für sie bestimmt ist, und packt dann die nächste aus.
 
-Am Ende versteht der Webserver: "Jemand will die Startseite."
+Am Ende erkennt der Webserver die Anfrage nach der Startseite.
 
 <!--
 SPEAKER NOTES:
@@ -1269,7 +1265,7 @@ SPEAKER NOTES:
 # Der Server antwortet
 
 ```http
-HTTP/1.1 200 OK
+HTTP/2.0 200 OK
 Content-Type: text/html; charset=UTF-8
 Content-Length: 45231
 
@@ -1280,7 +1276,7 @@ Content-Length: 45231
 ...
 ```
 
-~45 KB HTML müssen jetzt zu Ihnen.
+Rund 45 KB HTML müssen nun zu euch übertragen werden.
 
 <!--
 SPEAKER NOTES:
@@ -1294,7 +1290,7 @@ SPEAKER NOTES:
 
 # Encapsulation beim Server
 
-Der Server macht **dasselbe** – nur in die andere Richtung:
+Der Server durchläuft dieselben Schritte – nur in umgekehrter Richtung:
 
 ![bg right:40% fit](./assets/demos/encap-stack.png)
 
@@ -1313,7 +1309,7 @@ SPEAKER NOTES:
 
 ![bg right:38% fit](./assets/demos/response-hops.png)
 
-Gleiches Spiel wie der Hinweg:
+Der Rückweg funktioniert wie der Hinweg:
 
 - Hop für Hop durchs Internet
 - **IP bleibt gleich** (Start/Ziel)
@@ -1328,13 +1324,13 @@ SPEAKER NOTES:
 
 ---
 
-# Decapsulation bei Ihnen
+# Decapsulation bei euch
 
 ![bg right:42% fit](./assets/demos/decap-stack.png)
 
-Rückweg = Encapsulation umgekehrt.
+Der Rückweg ist die umgekehrte Encapsulation.
 
-Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
+Jede Schicht prüft, ob das Paket für sie bestimmt ist, und packt dann die nächste aus.
 
 <!--
 SPEAKER NOTES:
@@ -1417,7 +1413,7 @@ Beide sind Transport-Protokolle (Schicht 3), aber mit fundamental unterschiedlic
 
 ---
 
-# Warum UDP bei Video-Calls?
+# UDP bei Video-Calls
 
 **Szenario:** Ein Paket geht verloren.
 
@@ -1444,7 +1440,7 @@ SPEAKER NOTES:
 
 **MTU** = Maximum Transmission Unit
 
-Ethernet-Frame kann maximal **1500 Bytes** Nutzdaten transportieren.
+Ein Ethernet-Frame kann maximal **1500 Bytes** Nutzdaten transportieren.
 
 **Problem:** Ein Foto hat 3.000.000 Bytes.
 
@@ -1705,7 +1701,7 @@ HTML definiert die Struktur – was ist auf der Seite. CSS definiert das Aussehe
 
 ---
 
-# Was ist CSS?
+# CSS im Überblick
 
 ![bg right:35%](./assets/demos/css-anatomie.png)
 
@@ -1738,7 +1734,7 @@ Vorteil: Ihr könnt das Design der ganzen Website ändern, indem ihr eine Datei
 
 # CSS einbinden
 
-**Option 1: Externe Datei** ✓
+**Option 1: Externe Datei** (empfohlen)
 ```html
 <link rel="stylesheet" href="style.css">
 ```
@@ -1748,7 +1744,7 @@ Vorteil: Ihr könnt das Design der ganzen Website ändern, indem ihr eine Datei
 <style>p { color: blue; }</style>
 ```
 
-**Option 3: Inline** ✗
+**Option 3: Inline** (vermeiden)
 ```html
 <p style="color: blue;">...</p>
 ```
@@ -1884,7 +1880,7 @@ Eine Klasse kann auf beliebig viele Elemente angewendet werden. Ein Element kann
 
 **Raute** vor dem Namen = ID
 
-⚠️ IDs sollten **einmalig** pro Seite sein.
+**Achtung:** IDs sollten **einmalig** pro Seite sein.
 
 <!--
 SPEAKER NOTES:
@@ -1932,7 +1928,7 @@ Element.Klasse: Das Element muss beides sein. "p.wichtig" heißt: nur p-Elemente
 
 ---
 
-# Spezifität: Welche Regel gewinnt?
+# Spezifität von Selektoren
 
 ![bg right:35%](./assets/demos/css-specificity.png)
 
@@ -2316,7 +2312,7 @@ Einheiten: rem für Schrift, relative Einheiten für Layout.
 
 # Fragen & Diskussion
 
-**Nächster Termin:** 24.01.2026 – JavaScript
+**Nächstes Thema:** JavaScript
 
 **Kontakt:** lb-czechowski@hdm-stuttgart.de
 

slides/223015c/03-interaktivitaet-javascript.md

@@ -98,7 +98,7 @@ Hochschule der Medien Stuttgart
 
 <!-- _class: lead -->
 
-# Kapitel 3 – 24.01.2026
+# Kapitel 3
 ## Interaktivität & JavaScript
 
 ---
@@ -119,16 +119,15 @@ Hochschule der Medien Stuttgart
 
 ---
 
-# Was ist JavaScript?
+# JavaScript im Überblick
 
-**Die einzige Programmiersprache, die im Browser läuft!**
+JavaScript ist die einzige Programmiersprache, die nativ im Browser läuft.
 
 - **1995:** In 10 Tagen entwickelt (Brendan Eich, Netscape)
 - **Heute:** Überall – Browser, Server, Apps, IoT
 
 **Nicht verwechseln:**
-- Java ≠ JavaScript (komplett unterschiedlich!)
-- "JavaScript ist zu Java wie Carpet zu Car"
+- Java und JavaScript sind zwei völlig verschiedene Sprachen.
 
 <!--
 Ursprünglich "Mocha", dann "LiveScript", dann "JavaScript" (Marketing!)
@@ -159,7 +158,7 @@ ES6 = großes Update mit vielen Features
 
 # JavaScript einbinden
 
-**Option 1: Externe Datei (empfohlen!)**
+**Option 1: Externe Datei (empfohlen)**
 ```html
 <body>
     <!-- Inhalt -->
@@ -174,7 +173,7 @@ ES6 = großes Update mit vielen Features
 </script>
 ```
 
-⚠️ Script am **Ende** des `<body>` – damit HTML zuerst lädt!
+**Wichtig:** Das Script gehört ans **Ende** des `<body>`, damit das HTML zuerst lädt.
 
 <!--
 Externe Datei = wiederverwendbar, cachebar
@@ -184,7 +183,7 @@ Oder: defer-Attribut
 
 ---
 
-# Die Konsole: Euer bester Freund
+# Die JavaScript-Konsole
 
 **Browser DevTools → Console**
 - Windows/Linux: `F12` oder `Strg+Shift+I`
@@ -196,7 +195,7 @@ console.log(42);
 console.log("Die Antwort ist:", 42);
 ```
 
-**Direkt in der Konsole tippen und Enter!**
+Befehle lassen sich direkt in der Konsole eingeben und mit Enter ausführen.
 
 <!--
 Console = REPL (Read-Eval-Print-Loop)
@@ -348,7 +347,7 @@ true || false  // true (ODER)
 
 **In der Browser-Konsole:**
 
-1. Erstellen Sie Variablen für sich:
+1. Erstellt Variablen für euch:
    ```javascript
    const name = "Your Name";
    let age = 20;
@@ -491,7 +490,7 @@ Funktionale Programmierung, Original-Array bleibt unverändert
 
 ---
 
-# Was ist das DOM?
+# Das DOM im Überblick
 
 **D**ocument **O**bject **M**odel
 
@@ -646,7 +645,7 @@ remove = aus DOM entfernen
 
 ---
 
-# Was sind Events?
+# Events im Überblick
 
 **NutzerInnen interagieren mit der Seite:**
 - Klicken
@@ -654,7 +653,7 @@ remove = aus DOM entfernen
 - Scrollen
 - Formulare absenden
 
-**JavaScript kann darauf reagieren!**
+JavaScript kann auf diese Ereignisse reagieren.
 
 <!--
 Event = Ereignis
@@ -784,9 +783,9 @@ toggleButton.addEventListener("click", () => {
     
     // Button-Text ändern
     if (body.classList.contains("dark-mode")) {
-        toggleButton.textContent = "☀️ Light Mode";
+        toggleButton.textContent = "Light Mode";
     } else {
-        toggleButton.textContent = "🌙 Dark Mode";
+        toggleButton.textContent = "Dark Mode";
     }
 });
 ```
@@ -1002,21 +1001,21 @@ Frameworks für größere Apps, Komponenten-basiert
 
 ---
 
-# Ihr könnt jetzt...
+# Das könnt ihr jetzt
 
 - Den historischen Kontext von IT verstehen
 - Erklären wie das Internet funktioniert
 - HTML-Seiten strukturieren
 - CSS für Layout und Design nutzen
 - JavaScript für Interaktivität einsetzen
-- **Mit EntwicklerInnen auf Augenhöhe sprechen!**
+- **Mit EntwicklerInnen auf Augenhöhe sprechen**
 
 ---
 
-# Feedback – Eure Meinung zählt!
+# Feedback
 
 Euer ehrliches Feedback hilft mir, den Kurs zu verbessern.
-**Es gibt keine falschen Antworten!**
+Es gibt keine falschen Antworten.
 
 - Was hat gut funktioniert?
 - Was könnte besser sein?

slides/223015c/assets/demos/osi-tcpip-diagram.html

@@ -6,47 +6,70 @@
   <style>
     html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
     body { padding: 30px 40px; display: inline-block; }
-    .wrap { display: flex; gap: 36px; align-items: flex-start; }
-    .col { display: flex; flex-direction: column; gap: 4px; }
-    h3 { margin: 0 0 10px; font-size: 1.1rem; color: #1a1a2e; text-align: center; }
+    .headers {
+      display: grid;
+      grid-template-columns: 240px 240px;
+      column-gap: 36px;
+      margin-bottom: 10px;
+    }
+    .headers h3 { margin: 0; font-size: 1.1rem; color: #1a1a2e; text-align: center; }
+    .grid {
+      display: grid;
+      grid-template-columns: 240px 240px;
+      grid-template-rows: repeat(7, 48px);
+      column-gap: 36px;
+      row-gap: 6px;
+    }
     .box {
       border: 2px solid #4a4a6a;
-      padding: 10px 20px;
-      min-width: 230px;
-      font-size: 0.95rem;
-      background: #f3f4f6;
+      border-radius: 4px;
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 4px;
+      font-size: 0.95rem;
+      text-align: center;
+      padding: 0 12px;
     }
-    .osi .box { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
-    .tcpip .box { background: #fce7d6; border-color: #c2410c; color: #7c2d12; font-weight: 600; }
-    .tcpip .app { min-height: 126px; }
-    .tcpip .trans { min-height: 40px; }
-    .tcpip .net { min-height: 40px; }
-    .tcpip .link { min-height: 82px; }
+    .osi {
+      background: #dbeafe;
+      border-color: #1e40af;
+      color: #1e3a8a;
+    }
+    .tcpip {
+      background: #fce7d6;
+      border-color: #c2410c;
+      color: #7c2d12;
+      font-weight: 600;
+    }
+    /* OSI: column 1, one box per row */
+    .o7 { grid-area: 1 / 1; } .o6 { grid-area: 2 / 1; } .o5 { grid-area: 3 / 1; }
+    .o4 { grid-area: 4 / 1; } .o3 { grid-area: 5 / 1; } .o2 { grid-area: 6 / 1; }
+    .o1 { grid-area: 7 / 1; }
+    /* TCP/IP: column 2, each block spans its OSI equivalents */
+    .t-app  { grid-area: 1 / 2 / 4 / 2; }  /* OSI 5-7 */
+    .t-tra  { grid-area: 4 / 2 / 5 / 2; }  /* OSI 4   */
+    .t-net  { grid-area: 5 / 2 / 6 / 2; }  /* OSI 3   */
+    .t-link { grid-area: 6 / 2 / 8 / 2; }  /* OSI 1-2 */
   </style>
 </head>
 <body>
-  <div class="wrap">
-    <div class="col osi">
+  <div class="headers">
     <h3>OSI (7 Schichten)</h3>
-      <div class="box">7. Anwendung</div>
-      <div class="box">6. Darstellung</div>
-      <div class="box">5. Sitzung</div>
-      <div class="box">4. Transport</div>
-      <div class="box">3. Vermittlung</div>
-      <div class="box">2. Sicherung</div>
-      <div class="box">1. Bitübertragung</div>
-    </div>
-    <div class="col tcpip">
     <h3>TCP/IP (4 Schichten)</h3>
-      <div class="box app">Anwendung</div>
-      <div class="box trans">Transport</div>
-      <div class="box net">Internet</div>
-      <div class="box link">Netzzugang</div>
   </div>
+  <div class="grid">
+    <div class="box osi o7">7. Anwendung</div>
+    <div class="box osi o6">6. Darstellung</div>
+    <div class="box osi o5">5. Sitzung</div>
+    <div class="box osi o4">4. Transport</div>
+    <div class="box osi o3">3. Vermittlung</div>
+    <div class="box osi o2">2. Sicherung</div>
+    <div class="box osi o1">1. Bitübertragung</div>
+
+    <div class="box tcpip t-app">Anwendung</div>
+    <div class="box tcpip t-tra">Transport</div>
+    <div class="box tcpip t-net">Internet</div>
+    <div class="box tcpip t-link">Netzzugang</div>
   </div>
 </body>
 </html>