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

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

@@ -538,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.
 

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; }
+    .headers {
-    .col { display: flex; flex-direction: column; gap: 4px; }
+      display: grid;
-    h3 { margin: 0 0 10px; font-size: 1.1rem; color: #1a1a2e; text-align: center; }
+      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;
+      border-radius: 4px;
-      min-width: 230px;
-      font-size: 0.95rem;
-      background: #f3f4f6;
       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; }
+    .osi {
-    .tcpip .box { background: #fce7d6; border-color: #c2410c; color: #7c2d12; font-weight: 600; }
+      background: #dbeafe;
-    .tcpip .app { min-height: 126px; }
+      border-color: #1e40af;
-    .tcpip .trans { min-height: 40px; }
+      color: #1e3a8a;
-    .tcpip .net { min-height: 40px; }
+    }
-    .tcpip .link { min-height: 82px; }
+    .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="headers">
-    <div class="col osi">
     <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>