diff --git a/slides/223015c/02-netzwerke-protokolle-css.md b/slides/223015c/02-netzwerke-protokolle-css.md
index fb58d07..e5622d3 100644
--- a/slides/223015c/02-netzwerke-protokolle-css.md
+++ b/slides/223015c/02-netzwerke-protokolle-css.md
@@ -810,19 +810,15 @@ SPEAKER NOTES:
 
 # Die DNS-Hierarchie
 
-```
-                    . (Root)
-                   /|\
-                  / | \
-               .de .com .org ...
-               /
-        hdm-stuttgart
-             |
-            www
-```
+![bg right:45% fit](./assets/demos/dns-tree.png)
 
 **Dezentral:** Niemand kennt alles.
-Jede Ebene kennt nur die nächste.
+
+Jede Ebene kennt nur die nächste:
+
+- Root → .de, .com, .org
+- .de → alle .de-Domains
+- hdm-stuttgart.de → www, mail, …
 
 <!--
 SPEAKER NOTES:
diff --git a/slides/223015c/03-interaktivitaet-javascript.md b/slides/223015c/03-interaktivitaet-javascript.md
index 30156c6..61f79da 100644
--- a/slides/223015c/03-interaktivitaet-javascript.md
+++ b/slides/223015c/03-interaktivitaet-javascript.md
@@ -491,15 +491,7 @@ Funktionale Programmierung, Original-Array bleibt unverändert
 - JavaScript kann diesen Baum **lesen und ändern**
 - Jedes HTML-Element = ein "Node"
 
-```
-document
-└── html
-    ├── head
-    │   └── title
-    └── body
-        ├── h1
-        └── p
-```
+![bg right:45% fit](./assets/demos/dom-tree.png)
 
 <!--
 DOM = Programmierschnittstelle für HTML
diff --git a/slides/223015c/assets/demos/dns-tree.html b/slides/223015c/assets/demos/dns-tree.html
new file mode 100644
index 0000000..f62ae54
--- /dev/null
+++ b/slides/223015c/assets/demos/dns-tree.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>DNS-Hierarchie</title>
+  <style>
+    html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
+    body { padding: 30px; display: inline-block; }
+    .tree { display: flex; flex-direction: column; align-items: center; }
+    .node {
+      background: #fef3c7;
+      border: 2px solid #ca8a04;
+      color: #713f12;
+      padding: 8px 18px;
+      border-radius: 6px;
+      font-family: ui-monospace, monospace;
+      font-weight: 700;
+      font-size: 0.95rem;
+    }
+    .root { background: #fde68a; border-color: #b45309; }
+    .leaf { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
+    .level { display: flex; gap: 36px; margin-top: 12px; }
+    .edges {
+      width: 100%;
+      height: 20px;
+      position: relative;
+    }
+    svg { display: block; }
+  </style>
+</head>
+<body>
+  <div class="tree">
+    <div class="node root">. (Root)</div>
+    <svg width="360" height="26">
+      <line x1="180" y1="0" x2="60" y2="26" stroke="#d63384" stroke-width="2"/>
+      <line x1="180" y1="0" x2="180" y2="26" stroke="#d63384" stroke-width="2"/>
+      <line x1="180" y1="0" x2="300" y2="26" stroke="#d63384" stroke-width="2"/>
+    </svg>
+    <div class="level">
+      <div class="node">.de</div>
+      <div class="node">.com</div>
+      <div class="node">.org</div>
+    </div>
+    <svg width="360" height="26">
+      <line x1="60" y1="0" x2="60" y2="26" stroke="#d63384" stroke-width="2"/>
+    </svg>
+    <div class="level">
+      <div class="node">hdm-stuttgart</div>
+    </div>
+    <svg width="240" height="26">
+      <line x1="120" y1="0" x2="120" y2="26" stroke="#d63384" stroke-width="2"/>
+    </svg>
+    <div class="level">
+      <div class="node leaf">www</div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/dns-tree.png b/slides/223015c/assets/demos/dns-tree.png
new file mode 100644
index 0000000..63b084a
Binary files /dev/null and b/slides/223015c/assets/demos/dns-tree.png differ
diff --git a/slides/223015c/assets/demos/dom-tree.html b/slides/223015c/assets/demos/dom-tree.html
new file mode 100644
index 0000000..07cf990
--- /dev/null
+++ b/slides/223015c/assets/demos/dom-tree.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>DOM-Baum</title>
+  <style>
+    html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
+    body { padding: 30px; display: inline-block; }
+    .tree { display: flex; flex-direction: column; align-items: center; }
+    .node {
+      background: #dbeafe;
+      border: 2px solid #1e40af;
+      color: #1e3a8a;
+      padding: 7px 16px;
+      border-radius: 6px;
+      font-family: ui-monospace, monospace;
+      font-weight: 700;
+      font-size: 0.9rem;
+    }
+    .root { background: #e0e7ff; border-color: #4f46e5; color: #3730a3; }
+    .content { background: #dcfce7; border-color: #15803d; color: #14532d; font-weight: 400; font-style: italic; }
+    .level { display: flex; gap: 28px; margin-top: 10px; align-items: flex-start; }
+    .col { display: flex; flex-direction: column; align-items: center; }
+  </style>
+</head>
+<body>
+  <div class="tree">
+    <div class="node root">document</div>
+    <svg width="200" height="24"><line x1="100" y1="0" x2="100" y2="24" stroke="#d63384" stroke-width="2"/></svg>
+    <div class="node root">&lt;html&gt;</div>
+    <svg width="380" height="26">
+      <line x1="190" y1="0" x2="90" y2="26" stroke="#d63384" stroke-width="2"/>
+      <line x1="190" y1="0" x2="290" y2="26" stroke="#d63384" stroke-width="2"/>
+    </svg>
+    <div class="level">
+      <div class="col">
+        <div class="node">&lt;head&gt;</div>
+        <svg width="120" height="22"><line x1="60" y1="0" x2="60" y2="22" stroke="#d63384" stroke-width="2"/></svg>
+        <div class="node">&lt;title&gt;</div>
+      </div>
+      <div class="col">
+        <div class="node">&lt;body&gt;</div>
+        <svg width="220" height="26">
+          <line x1="110" y1="0" x2="55" y2="26" stroke="#d63384" stroke-width="2"/>
+          <line x1="110" y1="0" x2="165" y2="26" stroke="#d63384" stroke-width="2"/>
+        </svg>
+        <div class="level">
+          <div class="node">&lt;h1&gt;</div>
+          <div class="node">&lt;p&gt;</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/dom-tree.png b/slides/223015c/assets/demos/dom-tree.png
new file mode 100644
index 0000000..a3c17c7
Binary files /dev/null and b/slides/223015c/assets/demos/dom-tree.png differ
