replace ascii box-model with diagram, expand explanation

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

@@ -2175,22 +2175,18 @@ Spezifität bestimmt, welche CSS-Regel gewinnt, wenn mehrere auf dasselbe Elemen
 Jedes HTML-Element ist eine rechteckige **Box**.
 
 **Schichten innen → außen:**
-│   │   ┌─────────────────────┐   │   │
-│   │   │       padding       │   │   │
-│   │   │   ┌─────────────┐   │   │   │
-│   │   │   │   content   │   │   │   │
-│   │   │   └─────────────┘   │   │   │
-│   │   └─────────────────────┘   │   │
-│   └─────────────────────────────┘   │
-└─────────────────────────────────────┘
-```
-
-Jedes Element ist eine Box.
-
-<!--
-SPEAKER NOTES:
+
 - **content** – Inhalt (Text, Bild)
-Das Box-Modell ist fundamental.
+- **padding** – Innenabstand
+- **border** – Rahmen
+- **margin** – Außenabstand
+
+<small>Gesamt-Breite = `width + padding + border + margin`. Tipp: `box-sizing: border-box` rechnet padding + border mit ein.</small>
+
+<!--
+SPEAKER NOTES:
+
+Das Box-Modell ist fundamental.
 
 Jedes Element ist eine Box. Von innen nach außen: