diff --git a/.gitignore b/.gitignore
index a8801eb..a8d908a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 build/
 *.pdf
 *.html
+!slides/*/assets/demos/**/*.html
 .dev-index/
 
 # Dependencies
diff --git a/slides/223015c/01-geschichte-grundlagen-html.md b/slides/223015c/01-geschichte-grundlagen-html.md
index 7a08840..8274822 100644
--- a/slides/223015c/01-geschichte-grundlagen-html.md
+++ b/slides/223015c/01-geschichte-grundlagen-html.md
@@ -877,7 +877,7 @@ Kostenlos freigegeben → darum existiert es
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-![bg fit](./assets/img_633d7b91366e0-1025x538-768x403.jpg)
+![bg cover](./assets/img_633d7b91366e0-1025x538-768x403.jpg)
 
 <!--
 Unterseekabel-Karte: Über 400 Kabel verbinden die Kontinente.
@@ -1267,6 +1267,8 @@ Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack
 
 # HTML-Tags und Attribute
 
+![bg right:35%](./assets/demos/tag-attribut.png)
+
 ```html
 <body>
   <p class="wichtig">Das ist ein Absatz.</p>
@@ -1298,6 +1300,8 @@ Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack
 
 # Vollständiges Grundgerüst
 
+![bg right:35%](./assets/demos/grundgeruest.png)
+
 ```html
 <!DOCTYPE html>
 <html lang="de">
@@ -1373,10 +1377,10 @@ Accessibility ist eingebaut
 
 ---
 
-[]
-
 # Beispiel: Details/Summary
 
+![bg right:35%](./assets/demos/details-closed.png)
+
 ```html
 <details>
   <summary>Klick mich!</summary>
@@ -1390,6 +1394,8 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details
 
 # Beispiel: Details/Summary (geöffnet)
 
+![bg right:35%](./assets/demos/details-open.png)
+
 ```html
 <details open>
   <summary>Klick mich!</summary>
@@ -1404,6 +1410,8 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstel
 
 # Beispiel: Button
 
+![bg right:35%](./assets/demos/button.png)
+
 ```html
 <button>Add to favorites</button>
 ```
@@ -1414,6 +1422,8 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button
 
 # Beispiel: Input/Eingabefeld
 
+![bg right:35%](./assets/demos/input.png)
+
 ```html
 <input
   type="text"
@@ -1427,6 +1437,8 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input
 
 # Beispiel: Dialog
 
+![bg right:35%](./assets/demos/dialog.png)
+
 ```html
 <dialog open>
   <p>Greetings, one and all!</p>
@@ -1629,6 +1641,8 @@ Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
 
 # Operable: Bedienbar
 
+![bg right:35%](./assets/demos/a11y-focus.png)
+
 **Tastaturzugänglich:**
 ```css
 /* Fokus-Indikator NIE entfernen! */
@@ -1657,6 +1671,8 @@ Skip-Links: "Zum Hauptinhalt springen"
 
 # Understandable: Verständlich
 
+![bg right:35%](./assets/demos/a11y-error.png)
+
 **Sprache angeben:**
 ```html
 <html lang="de">
@@ -1682,6 +1698,8 @@ Fehlermeldungen: konkret, hilfreich, am Feld
 
 # Robust: Technisch solide
 
+![bg right:35%](./assets/demos/a11y-semantic.png)
+
 **Semantisches HTML:**
 ```html
 <!-- Schlecht -->
diff --git a/slides/223015c/assets/demos/_frame-template.html b/slides/223015c/assets/demos/_frame-template.html
new file mode 100644
index 0000000..0d61709
--- /dev/null
+++ b/slides/223015c/assets/demos/_frame-template.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: __TITLE__</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">__URL__</span>
+    </div>
+    <iframe src="__SRC__"></iframe>
+  </div>
+</div>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/a11y-error-frame.html b/slides/223015c/assets/demos/a11y-error-frame.html
new file mode 100644
index 0000000..fcee2c2
--- /dev/null
+++ b/slides/223015c/assets/demos/a11y-error-frame.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: a11y-error</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/email-form.html</span>
+    </div>
+    <iframe src="./a11y-error.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/a11y-error.html b/slides/223015c/assets/demos/a11y-error.html
new file mode 100644
index 0000000..d6dad6d
--- /dev/null
+++ b/slides/223015c/assets/demos/a11y-error.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Fehlermeldung</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.2rem; }
+    label { display: block; margin-bottom: 4px; font-weight: 600; }
+    input {
+      font: inherit;
+      padding: 6px 10px;
+      width: 100%;
+      box-sizing: border-box;
+      border: 2px solid #d63384;
+      border-radius: 4px;
+    }
+    #email-error {
+      color: #d63384;
+      font-size: 0.9em;
+      margin-top: 6px;
+    }
+  </style>
+</head>
+<body>
+  <label for="email">E-Mail-Adresse</label>
+  <input id="email" type="email" aria-describedby="email-error" value="michael@">
+  <p id="email-error" role="alert">
+    Bitte geben Sie eine gültige E-Mail-Adresse ein.
+  </p>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/a11y-error.png b/slides/223015c/assets/demos/a11y-error.png
new file mode 100644
index 0000000..d25ee48
Binary files /dev/null and b/slides/223015c/assets/demos/a11y-error.png differ
diff --git a/slides/223015c/assets/demos/a11y-focus-frame.html b/slides/223015c/assets/demos/a11y-focus-frame.html
new file mode 100644
index 0000000..c51f019
--- /dev/null
+++ b/slides/223015c/assets/demos/a11y-focus-frame.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: a11y-focus</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/focus.html</span>
+    </div>
+    <iframe src="./a11y-focus.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/a11y-focus.html b/slides/223015c/assets/demos/a11y-focus.html
new file mode 100644
index 0000000..59b5cb5
--- /dev/null
+++ b/slides/223015c/assets/demos/a11y-focus.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Fokus-Indikator</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.2rem; }
+    :focus, .is-focused {
+      outline: 2px solid blue;
+      outline-offset: 2px;
+    }
+    button:focus-visible, button.is-focused {
+      box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
+    }
+    button { font: inherit; padding: 6px 14px; margin: 6px 0; display: block; }
+  </style>
+</head>
+<body>
+  <p>Tab-Taste drücken:</p>
+  <button class="is-focused">Erster Button</button>
+  <button>Zweiter Button</button>
+  <button>Dritter Button</button>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/a11y-focus.png b/slides/223015c/assets/demos/a11y-focus.png
new file mode 100644
index 0000000..e95465c
Binary files /dev/null and b/slides/223015c/assets/demos/a11y-focus.png differ
diff --git a/slides/223015c/assets/demos/a11y-semantic-frame.html b/slides/223015c/assets/demos/a11y-semantic-frame.html
new file mode 100644
index 0000000..0791f7a
--- /dev/null
+++ b/slides/223015c/assets/demos/a11y-semantic-frame.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: a11y-semantic</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/klick.html</span>
+    </div>
+    <iframe src="./a11y-semantic.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/a11y-semantic.html b/slides/223015c/assets/demos/a11y-semantic.html
new file mode 100644
index 0000000..5093866
--- /dev/null
+++ b/slides/223015c/assets/demos/a11y-semantic.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>div vs button</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.2rem; }
+    h3 { margin: 0.8rem 0 0.4rem; font-size: 1rem; }
+    .bad { color: #b91c1c; }
+    .good { color: #15803d; }
+    .button {
+      display: inline-block;
+      background: #e5e7eb;
+      border: 1px solid #9ca3af;
+      padding: 6px 14px;
+      cursor: pointer;
+      border-radius: 4px;
+    }
+    button { font: inherit; padding: 6px 14px; }
+  </style>
+</head>
+<body>
+  <h3 class="bad">Schlecht (div)</h3>
+  <div class="button" onclick="alert('!')">Klick mich</div>
+  <p><small>❌ Tab überspringt, kein Enter, kein Screenreader</small></p>
+
+  <h3 class="good">Gut (button)</h3>
+  <button type="button">Klick mich</button>
+  <p><small>✅ Tastatur + Screenreader eingebaut</small></p>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/a11y-semantic.png b/slides/223015c/assets/demos/a11y-semantic.png
new file mode 100644
index 0000000..4e61bbb
Binary files /dev/null and b/slides/223015c/assets/demos/a11y-semantic.png differ
diff --git a/slides/223015c/assets/demos/button-frame.html b/slides/223015c/assets/demos/button-frame.html
new file mode 100644
index 0000000..becb6a0
--- /dev/null
+++ b/slides/223015c/assets/demos/button-frame.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: button</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/button.html</span>
+    </div>
+    <iframe src="./button.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/button.html b/slides/223015c/assets/demos/button.html
new file mode 100644
index 0000000..30d026a
--- /dev/null
+++ b/slides/223015c/assets/demos/button.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Button</title>
+</head>
+<body>
+  <button>Add to favorites</button>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/button.png b/slides/223015c/assets/demos/button.png
new file mode 100644
index 0000000..6f31adc
Binary files /dev/null and b/slides/223015c/assets/demos/button.png differ
diff --git a/slides/223015c/assets/demos/details-closed-frame.html b/slides/223015c/assets/demos/details-closed-frame.html
new file mode 100644
index 0000000..0498f65
--- /dev/null
+++ b/slides/223015c/assets/demos/details-closed-frame.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: details-closed</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/details.html</span>
+    </div>
+    <iframe src="./details-closed.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/details-closed.html b/slides/223015c/assets/demos/details-closed.html
new file mode 100644
index 0000000..9595261
--- /dev/null
+++ b/slides/223015c/assets/demos/details-closed.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Details/Summary</title>
+</head>
+<body>
+  <details>
+    <summary>Klick mich!</summary>
+    <p>Dieser Text war versteckt.</p>
+  </details>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/details-closed.png b/slides/223015c/assets/demos/details-closed.png
new file mode 100644
index 0000000..6e36c8f
Binary files /dev/null and b/slides/223015c/assets/demos/details-closed.png differ
diff --git a/slides/223015c/assets/demos/details-open-frame.html b/slides/223015c/assets/demos/details-open-frame.html
new file mode 100644
index 0000000..e36bbcd
--- /dev/null
+++ b/slides/223015c/assets/demos/details-open-frame.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: details-open</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/details.html</span>
+    </div>
+    <iframe src="./details-open.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/details-open.html b/slides/223015c/assets/demos/details-open.html
new file mode 100644
index 0000000..3b9c3c4
--- /dev/null
+++ b/slides/223015c/assets/demos/details-open.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Details/Summary (offen)</title>
+</head>
+<body>
+  <details open>
+    <summary>Klick mich!</summary>
+    <p>Dieser Text war versteckt.</p>
+  </details>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/details-open.png b/slides/223015c/assets/demos/details-open.png
new file mode 100644
index 0000000..729f961
Binary files /dev/null and b/slides/223015c/assets/demos/details-open.png differ
diff --git a/slides/223015c/assets/demos/dialog-frame.html b/slides/223015c/assets/demos/dialog-frame.html
new file mode 100644
index 0000000..1aaca49
--- /dev/null
+++ b/slides/223015c/assets/demos/dialog-frame.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: dialog</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/dialog.html</span>
+    </div>
+    <iframe src="./dialog.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/dialog.html b/slides/223015c/assets/demos/dialog.html
new file mode 100644
index 0000000..e203467
--- /dev/null
+++ b/slides/223015c/assets/demos/dialog.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Dialog</title>
+</head>
+<body>
+  <dialog open>
+    <p>Greetings, one and all!</p>
+    <form method="dialog">
+      <button>OK</button>
+    </form>
+  </dialog>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/dialog.png b/slides/223015c/assets/demos/dialog.png
new file mode 100644
index 0000000..17cd97c
Binary files /dev/null and b/slides/223015c/assets/demos/dialog.png differ
diff --git a/slides/223015c/assets/demos/grundgeruest-frame.html b/slides/223015c/assets/demos/grundgeruest-frame.html
new file mode 100644
index 0000000..5c9b4ac
--- /dev/null
+++ b/slides/223015c/assets/demos/grundgeruest-frame.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: Grundgerüst</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///portfolio/index.html</span>
+    </div>
+    <iframe src="./grundgeruest.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/grundgeruest.html b/slides/223015c/assets/demos/grundgeruest.html
new file mode 100644
index 0000000..9213b2b
--- /dev/null
+++ b/slides/223015c/assets/demos/grundgeruest.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <title>Portfolio von ...</title>
+  <meta name="description" content="Hier gibt es die besten ..." />
+  <meta name="og:image" content="https://...." />
+</head>
+<body>
+  <h1>Hallo Welt!</h1>
+  <p>Das ist mein erster Absatz.</p>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/grundgeruest.png b/slides/223015c/assets/demos/grundgeruest.png
new file mode 100644
index 0000000..0bfc310
Binary files /dev/null and b/slides/223015c/assets/demos/grundgeruest.png differ
diff --git a/slides/223015c/assets/demos/input-frame.html b/slides/223015c/assets/demos/input-frame.html
new file mode 100644
index 0000000..4b3b9b5
--- /dev/null
+++ b/slides/223015c/assets/demos/input-frame.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: input</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/input.html</span>
+    </div>
+    <iframe src="./input.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/input.html b/slides/223015c/assets/demos/input.html
new file mode 100644
index 0000000..df07605
--- /dev/null
+++ b/slides/223015c/assets/demos/input.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Input/Eingabefeld</title>
+</head>
+<body>
+  <input
+    type="text"
+    maxlength="8"
+    size="10" />
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/input.png b/slides/223015c/assets/demos/input.png
new file mode 100644
index 0000000..3e357e7
Binary files /dev/null and b/slides/223015c/assets/demos/input.png differ
diff --git a/slides/223015c/assets/demos/tag-attribut-frame.html b/slides/223015c/assets/demos/tag-attribut-frame.html
new file mode 100644
index 0000000..5cefc71
--- /dev/null
+++ b/slides/223015c/assets/demos/tag-attribut-frame.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: Tag mit Attribut</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/absatz.html</span>
+    </div>
+    <iframe src="./tag-attribut.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/tag-attribut.html b/slides/223015c/assets/demos/tag-attribut.html
new file mode 100644
index 0000000..312d459
--- /dev/null
+++ b/slides/223015c/assets/demos/tag-attribut.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Tag mit Attribut</title>
+</head>
+<body>
+  <p class="wichtig">Das ist ein Absatz.</p>
+</body>
+</html>
diff --git a/slides/223015c/assets/demos/tag-attribut.png b/slides/223015c/assets/demos/tag-attribut.png
new file mode 100644
index 0000000..d83208b
Binary files /dev/null and b/slides/223015c/assets/demos/tag-attribut.png differ
