From f6d9992a2c86944525003a6b5c76fa15741c3dba Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Fri, 17 Apr 2026 12:37:09 +0200
Subject: [PATCH] add grayscale gradient svg and zoom slide

- replace grayscale-gradient.png with svg (256 discrete rects)
- add grayscale-zoom.svg: 16 brightest shades with decimal + hex labels
- add zoom slide after '256 shades of gray'
- minor tweaks: Mbps capitalization, remove redundant '256' prefix in states list
---
 slides/223015b/01-grundlagen-text-audio.md   |  23 +-
 slides/223015b/assets/grayscale-gradient.svg | 258 +++++++++++++++++++
 slides/223015b/assets/grayscale-zoom.svg     |  53 ++++
 3 files changed, 329 insertions(+), 5 deletions(-)
 create mode 100644 slides/223015b/assets/grayscale-gradient.svg
 create mode 100644 slides/223015b/assets/grayscale-zoom.svg

diff --git a/slides/223015b/01-grundlagen-text-audio.md b/slides/223015b/01-grundlagen-text-audio.md
index 202730b..830991f 100644
--- a/slides/223015b/01-grundlagen-text-audio.md
+++ b/slides/223015b/01-grundlagen-text-audio.md
@@ -296,7 +296,7 @@ AWS Glacier, Google Coldline und Film-Archive nutzen LTO — langsamer Zugriff,
 <!-- _footer: '' -->
 <!-- _class: 'klausur' -->
 
-# Bandbreite: Was bedeuten 150 mbps?
+# Bandbreite: Was bedeuten 150 Mbps?
 
 **150Mbps** = **150 Mbit/s** ≠ ~~**150 MB/s**~~
 
@@ -1036,7 +1036,7 @@ Rätsel: "Wenn sich das Wachstum einer Seerose auf einem Teich jeden Tag verdopp
 
 »256 Shades of Gray«
 
-![bg fit](./assets/grayscale-gradient.png)
+![bg fit](./assets/grayscale-gradient.svg)
 
 <!--
 256 Graustufen: 0 = Schwarz, 255 = Weiß
@@ -1044,11 +1044,24 @@ Rätsel: "Wenn sich das Wachstum einer Seerose auf einem Teich jeden Tag verdopp
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/grayscale-zoom.svg)
+
+<!--
+Zoom auf die 16 hellsten Abstufungen (240–255)
+Jede Stufe = 1/255 ≈ 0,4% Helligkeitsunterschied
+Decimal + Hex labels zeigen: jede Stufe ist ein eigener Byte-Wert
+-->
+
+---
+
 # Was kann man mit 256 Zuständen machen?
 
-* **256 Zeichen** (Buchstaben, Zahlen, Symbole)
-* **256 Helligkeit bzw. Luminanz** (0 = Schwarz/Dunkel, 255 = Weiß/Hell)
-* **256 Lautstärkestufen**
+* **Zeichen** (Buchstaben, Zahlen, Symbole)
+* **Helligkeit bzw. Luminanz** (0 = Schwarz/Dunkel, 255 = Weiß/Hell)
+* **Lautstärkestufen** (dB)
 * **Zahlen 0–255** (oder –128 bis +127)
 
 <!--
diff --git a/slides/223015b/assets/grayscale-gradient.svg b/slides/223015b/assets/grayscale-gradient.svg
new file mode 100644
index 0000000..22a15b8
--- /dev/null
+++ b/slides/223015b/assets/grayscale-gradient.svg
@@ -0,0 +1,258 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 1440" preserveAspectRatio="none" shape-rendering="crispEdges">
+<rect x="0" y="0" width="10" height="1440" fill="rgb(255,255,255)"/>
+<rect x="10" y="0" width="10" height="1440" fill="rgb(254,254,254)"/>
+<rect x="20" y="0" width="10" height="1440" fill="rgb(253,253,253)"/>
+<rect x="30" y="0" width="10" height="1440" fill="rgb(252,252,252)"/>
+<rect x="40" y="0" width="10" height="1440" fill="rgb(251,251,251)"/>
+<rect x="50" y="0" width="10" height="1440" fill="rgb(250,250,250)"/>
+<rect x="60" y="0" width="10" height="1440" fill="rgb(249,249,249)"/>
+<rect x="70" y="0" width="10" height="1440" fill="rgb(248,248,248)"/>
+<rect x="80" y="0" width="10" height="1440" fill="rgb(247,247,247)"/>
+<rect x="90" y="0" width="10" height="1440" fill="rgb(246,246,246)"/>
+<rect x="100" y="0" width="10" height="1440" fill="rgb(245,245,245)"/>
+<rect x="110" y="0" width="10" height="1440" fill="rgb(244,244,244)"/>
+<rect x="120" y="0" width="10" height="1440" fill="rgb(243,243,243)"/>
+<rect x="130" y="0" width="10" height="1440" fill="rgb(242,242,242)"/>
+<rect x="140" y="0" width="10" height="1440" fill="rgb(241,241,241)"/>
+<rect x="150" y="0" width="10" height="1440" fill="rgb(240,240,240)"/>
+<rect x="160" y="0" width="10" height="1440" fill="rgb(239,239,239)"/>
+<rect x="170" y="0" width="10" height="1440" fill="rgb(238,238,238)"/>
+<rect x="180" y="0" width="10" height="1440" fill="rgb(237,237,237)"/>
+<rect x="190" y="0" width="10" height="1440" fill="rgb(236,236,236)"/>
+<rect x="200" y="0" width="10" height="1440" fill="rgb(235,235,235)"/>
+<rect x="210" y="0" width="10" height="1440" fill="rgb(234,234,234)"/>
+<rect x="220" y="0" width="10" height="1440" fill="rgb(233,233,233)"/>
+<rect x="230" y="0" width="10" height="1440" fill="rgb(232,232,232)"/>
+<rect x="240" y="0" width="10" height="1440" fill="rgb(231,231,231)"/>
+<rect x="250" y="0" width="10" height="1440" fill="rgb(230,230,230)"/>
+<rect x="260" y="0" width="10" height="1440" fill="rgb(229,229,229)"/>
+<rect x="270" y="0" width="10" height="1440" fill="rgb(228,228,228)"/>
+<rect x="280" y="0" width="10" height="1440" fill="rgb(227,227,227)"/>
+<rect x="290" y="0" width="10" height="1440" fill="rgb(226,226,226)"/>
+<rect x="300" y="0" width="10" height="1440" fill="rgb(225,225,225)"/>
+<rect x="310" y="0" width="10" height="1440" fill="rgb(224,224,224)"/>
+<rect x="320" y="0" width="10" height="1440" fill="rgb(223,223,223)"/>
+<rect x="330" y="0" width="10" height="1440" fill="rgb(222,222,222)"/>
+<rect x="340" y="0" width="10" height="1440" fill="rgb(221,221,221)"/>
+<rect x="350" y="0" width="10" height="1440" fill="rgb(220,220,220)"/>
+<rect x="360" y="0" width="10" height="1440" fill="rgb(219,219,219)"/>
+<rect x="370" y="0" width="10" height="1440" fill="rgb(218,218,218)"/>
+<rect x="380" y="0" width="10" height="1440" fill="rgb(217,217,217)"/>
+<rect x="390" y="0" width="10" height="1440" fill="rgb(216,216,216)"/>
+<rect x="400" y="0" width="10" height="1440" fill="rgb(215,215,215)"/>
+<rect x="410" y="0" width="10" height="1440" fill="rgb(214,214,214)"/>
+<rect x="420" y="0" width="10" height="1440" fill="rgb(213,213,213)"/>
+<rect x="430" y="0" width="10" height="1440" fill="rgb(212,212,212)"/>
+<rect x="440" y="0" width="10" height="1440" fill="rgb(211,211,211)"/>
+<rect x="450" y="0" width="10" height="1440" fill="rgb(210,210,210)"/>
+<rect x="460" y="0" width="10" height="1440" fill="rgb(209,209,209)"/>
+<rect x="470" y="0" width="10" height="1440" fill="rgb(208,208,208)"/>
+<rect x="480" y="0" width="10" height="1440" fill="rgb(207,207,207)"/>
+<rect x="490" y="0" width="10" height="1440" fill="rgb(206,206,206)"/>
+<rect x="500" y="0" width="10" height="1440" fill="rgb(205,205,205)"/>
+<rect x="510" y="0" width="10" height="1440" fill="rgb(204,204,204)"/>
+<rect x="520" y="0" width="10" height="1440" fill="rgb(203,203,203)"/>
+<rect x="530" y="0" width="10" height="1440" fill="rgb(202,202,202)"/>
+<rect x="540" y="0" width="10" height="1440" fill="rgb(201,201,201)"/>
+<rect x="550" y="0" width="10" height="1440" fill="rgb(200,200,200)"/>
+<rect x="560" y="0" width="10" height="1440" fill="rgb(199,199,199)"/>
+<rect x="570" y="0" width="10" height="1440" fill="rgb(198,198,198)"/>
+<rect x="580" y="0" width="10" height="1440" fill="rgb(197,197,197)"/>
+<rect x="590" y="0" width="10" height="1440" fill="rgb(196,196,196)"/>
+<rect x="600" y="0" width="10" height="1440" fill="rgb(195,195,195)"/>
+<rect x="610" y="0" width="10" height="1440" fill="rgb(194,194,194)"/>
+<rect x="620" y="0" width="10" height="1440" fill="rgb(193,193,193)"/>
+<rect x="630" y="0" width="10" height="1440" fill="rgb(192,192,192)"/>
+<rect x="640" y="0" width="10" height="1440" fill="rgb(191,191,191)"/>
+<rect x="650" y="0" width="10" height="1440" fill="rgb(190,190,190)"/>
+<rect x="660" y="0" width="10" height="1440" fill="rgb(189,189,189)"/>
+<rect x="670" y="0" width="10" height="1440" fill="rgb(188,188,188)"/>
+<rect x="680" y="0" width="10" height="1440" fill="rgb(187,187,187)"/>
+<rect x="690" y="0" width="10" height="1440" fill="rgb(186,186,186)"/>
+<rect x="700" y="0" width="10" height="1440" fill="rgb(185,185,185)"/>
+<rect x="710" y="0" width="10" height="1440" fill="rgb(184,184,184)"/>
+<rect x="720" y="0" width="10" height="1440" fill="rgb(183,183,183)"/>
+<rect x="730" y="0" width="10" height="1440" fill="rgb(182,182,182)"/>
+<rect x="740" y="0" width="10" height="1440" fill="rgb(181,181,181)"/>
+<rect x="750" y="0" width="10" height="1440" fill="rgb(180,180,180)"/>
+<rect x="760" y="0" width="10" height="1440" fill="rgb(179,179,179)"/>
+<rect x="770" y="0" width="10" height="1440" fill="rgb(178,178,178)"/>
+<rect x="780" y="0" width="10" height="1440" fill="rgb(177,177,177)"/>
+<rect x="790" y="0" width="10" height="1440" fill="rgb(176,176,176)"/>
+<rect x="800" y="0" width="10" height="1440" fill="rgb(175,175,175)"/>
+<rect x="810" y="0" width="10" height="1440" fill="rgb(174,174,174)"/>
+<rect x="820" y="0" width="10" height="1440" fill="rgb(173,173,173)"/>
+<rect x="830" y="0" width="10" height="1440" fill="rgb(172,172,172)"/>
+<rect x="840" y="0" width="10" height="1440" fill="rgb(171,171,171)"/>
+<rect x="850" y="0" width="10" height="1440" fill="rgb(170,170,170)"/>
+<rect x="860" y="0" width="10" height="1440" fill="rgb(169,169,169)"/>
+<rect x="870" y="0" width="10" height="1440" fill="rgb(168,168,168)"/>
+<rect x="880" y="0" width="10" height="1440" fill="rgb(167,167,167)"/>
+<rect x="890" y="0" width="10" height="1440" fill="rgb(166,166,166)"/>
+<rect x="900" y="0" width="10" height="1440" fill="rgb(165,165,165)"/>
+<rect x="910" y="0" width="10" height="1440" fill="rgb(164,164,164)"/>
+<rect x="920" y="0" width="10" height="1440" fill="rgb(163,163,163)"/>
+<rect x="930" y="0" width="10" height="1440" fill="rgb(162,162,162)"/>
+<rect x="940" y="0" width="10" height="1440" fill="rgb(161,161,161)"/>
+<rect x="950" y="0" width="10" height="1440" fill="rgb(160,160,160)"/>
+<rect x="960" y="0" width="10" height="1440" fill="rgb(159,159,159)"/>
+<rect x="970" y="0" width="10" height="1440" fill="rgb(158,158,158)"/>
+<rect x="980" y="0" width="10" height="1440" fill="rgb(157,157,157)"/>
+<rect x="990" y="0" width="10" height="1440" fill="rgb(156,156,156)"/>
+<rect x="1000" y="0" width="10" height="1440" fill="rgb(155,155,155)"/>
+<rect x="1010" y="0" width="10" height="1440" fill="rgb(154,154,154)"/>
+<rect x="1020" y="0" width="10" height="1440" fill="rgb(153,153,153)"/>
+<rect x="1030" y="0" width="10" height="1440" fill="rgb(152,152,152)"/>
+<rect x="1040" y="0" width="10" height="1440" fill="rgb(151,151,151)"/>
+<rect x="1050" y="0" width="10" height="1440" fill="rgb(150,150,150)"/>
+<rect x="1060" y="0" width="10" height="1440" fill="rgb(149,149,149)"/>
+<rect x="1070" y="0" width="10" height="1440" fill="rgb(148,148,148)"/>
+<rect x="1080" y="0" width="10" height="1440" fill="rgb(147,147,147)"/>
+<rect x="1090" y="0" width="10" height="1440" fill="rgb(146,146,146)"/>
+<rect x="1100" y="0" width="10" height="1440" fill="rgb(145,145,145)"/>
+<rect x="1110" y="0" width="10" height="1440" fill="rgb(144,144,144)"/>
+<rect x="1120" y="0" width="10" height="1440" fill="rgb(143,143,143)"/>
+<rect x="1130" y="0" width="10" height="1440" fill="rgb(142,142,142)"/>
+<rect x="1140" y="0" width="10" height="1440" fill="rgb(141,141,141)"/>
+<rect x="1150" y="0" width="10" height="1440" fill="rgb(140,140,140)"/>
+<rect x="1160" y="0" width="10" height="1440" fill="rgb(139,139,139)"/>
+<rect x="1170" y="0" width="10" height="1440" fill="rgb(138,138,138)"/>
+<rect x="1180" y="0" width="10" height="1440" fill="rgb(137,137,137)"/>
+<rect x="1190" y="0" width="10" height="1440" fill="rgb(136,136,136)"/>
+<rect x="1200" y="0" width="10" height="1440" fill="rgb(135,135,135)"/>
+<rect x="1210" y="0" width="10" height="1440" fill="rgb(134,134,134)"/>
+<rect x="1220" y="0" width="10" height="1440" fill="rgb(133,133,133)"/>
+<rect x="1230" y="0" width="10" height="1440" fill="rgb(132,132,132)"/>
+<rect x="1240" y="0" width="10" height="1440" fill="rgb(131,131,131)"/>
+<rect x="1250" y="0" width="10" height="1440" fill="rgb(130,130,130)"/>
+<rect x="1260" y="0" width="10" height="1440" fill="rgb(129,129,129)"/>
+<rect x="1270" y="0" width="10" height="1440" fill="rgb(128,128,128)"/>
+<rect x="1280" y="0" width="10" height="1440" fill="rgb(127,127,127)"/>
+<rect x="1290" y="0" width="10" height="1440" fill="rgb(126,126,126)"/>
+<rect x="1300" y="0" width="10" height="1440" fill="rgb(125,125,125)"/>
+<rect x="1310" y="0" width="10" height="1440" fill="rgb(124,124,124)"/>
+<rect x="1320" y="0" width="10" height="1440" fill="rgb(123,123,123)"/>
+<rect x="1330" y="0" width="10" height="1440" fill="rgb(122,122,122)"/>
+<rect x="1340" y="0" width="10" height="1440" fill="rgb(121,121,121)"/>
+<rect x="1350" y="0" width="10" height="1440" fill="rgb(120,120,120)"/>
+<rect x="1360" y="0" width="10" height="1440" fill="rgb(119,119,119)"/>
+<rect x="1370" y="0" width="10" height="1440" fill="rgb(118,118,118)"/>
+<rect x="1380" y="0" width="10" height="1440" fill="rgb(117,117,117)"/>
+<rect x="1390" y="0" width="10" height="1440" fill="rgb(116,116,116)"/>
+<rect x="1400" y="0" width="10" height="1440" fill="rgb(115,115,115)"/>
+<rect x="1410" y="0" width="10" height="1440" fill="rgb(114,114,114)"/>
+<rect x="1420" y="0" width="10" height="1440" fill="rgb(113,113,113)"/>
+<rect x="1430" y="0" width="10" height="1440" fill="rgb(112,112,112)"/>
+<rect x="1440" y="0" width="10" height="1440" fill="rgb(111,111,111)"/>
+<rect x="1450" y="0" width="10" height="1440" fill="rgb(110,110,110)"/>
+<rect x="1460" y="0" width="10" height="1440" fill="rgb(109,109,109)"/>
+<rect x="1470" y="0" width="10" height="1440" fill="rgb(108,108,108)"/>
+<rect x="1480" y="0" width="10" height="1440" fill="rgb(107,107,107)"/>
+<rect x="1490" y="0" width="10" height="1440" fill="rgb(106,106,106)"/>
+<rect x="1500" y="0" width="10" height="1440" fill="rgb(105,105,105)"/>
+<rect x="1510" y="0" width="10" height="1440" fill="rgb(104,104,104)"/>
+<rect x="1520" y="0" width="10" height="1440" fill="rgb(103,103,103)"/>
+<rect x="1530" y="0" width="10" height="1440" fill="rgb(102,102,102)"/>
+<rect x="1540" y="0" width="10" height="1440" fill="rgb(101,101,101)"/>
+<rect x="1550" y="0" width="10" height="1440" fill="rgb(100,100,100)"/>
+<rect x="1560" y="0" width="10" height="1440" fill="rgb(99,99,99)"/>
+<rect x="1570" y="0" width="10" height="1440" fill="rgb(98,98,98)"/>
+<rect x="1580" y="0" width="10" height="1440" fill="rgb(97,97,97)"/>
+<rect x="1590" y="0" width="10" height="1440" fill="rgb(96,96,96)"/>
+<rect x="1600" y="0" width="10" height="1440" fill="rgb(95,95,95)"/>
+<rect x="1610" y="0" width="10" height="1440" fill="rgb(94,94,94)"/>
+<rect x="1620" y="0" width="10" height="1440" fill="rgb(93,93,93)"/>
+<rect x="1630" y="0" width="10" height="1440" fill="rgb(92,92,92)"/>
+<rect x="1640" y="0" width="10" height="1440" fill="rgb(91,91,91)"/>
+<rect x="1650" y="0" width="10" height="1440" fill="rgb(90,90,90)"/>
+<rect x="1660" y="0" width="10" height="1440" fill="rgb(89,89,89)"/>
+<rect x="1670" y="0" width="10" height="1440" fill="rgb(88,88,88)"/>
+<rect x="1680" y="0" width="10" height="1440" fill="rgb(87,87,87)"/>
+<rect x="1690" y="0" width="10" height="1440" fill="rgb(86,86,86)"/>
+<rect x="1700" y="0" width="10" height="1440" fill="rgb(85,85,85)"/>
+<rect x="1710" y="0" width="10" height="1440" fill="rgb(84,84,84)"/>
+<rect x="1720" y="0" width="10" height="1440" fill="rgb(83,83,83)"/>
+<rect x="1730" y="0" width="10" height="1440" fill="rgb(82,82,82)"/>
+<rect x="1740" y="0" width="10" height="1440" fill="rgb(81,81,81)"/>
+<rect x="1750" y="0" width="10" height="1440" fill="rgb(80,80,80)"/>
+<rect x="1760" y="0" width="10" height="1440" fill="rgb(79,79,79)"/>
+<rect x="1770" y="0" width="10" height="1440" fill="rgb(78,78,78)"/>
+<rect x="1780" y="0" width="10" height="1440" fill="rgb(77,77,77)"/>
+<rect x="1790" y="0" width="10" height="1440" fill="rgb(76,76,76)"/>
+<rect x="1800" y="0" width="10" height="1440" fill="rgb(75,75,75)"/>
+<rect x="1810" y="0" width="10" height="1440" fill="rgb(74,74,74)"/>
+<rect x="1820" y="0" width="10" height="1440" fill="rgb(73,73,73)"/>
+<rect x="1830" y="0" width="10" height="1440" fill="rgb(72,72,72)"/>
+<rect x="1840" y="0" width="10" height="1440" fill="rgb(71,71,71)"/>
+<rect x="1850" y="0" width="10" height="1440" fill="rgb(70,70,70)"/>
+<rect x="1860" y="0" width="10" height="1440" fill="rgb(69,69,69)"/>
+<rect x="1870" y="0" width="10" height="1440" fill="rgb(68,68,68)"/>
+<rect x="1880" y="0" width="10" height="1440" fill="rgb(67,67,67)"/>
+<rect x="1890" y="0" width="10" height="1440" fill="rgb(66,66,66)"/>
+<rect x="1900" y="0" width="10" height="1440" fill="rgb(65,65,65)"/>
+<rect x="1910" y="0" width="10" height="1440" fill="rgb(64,64,64)"/>
+<rect x="1920" y="0" width="10" height="1440" fill="rgb(63,63,63)"/>
+<rect x="1930" y="0" width="10" height="1440" fill="rgb(62,62,62)"/>
+<rect x="1940" y="0" width="10" height="1440" fill="rgb(61,61,61)"/>
+<rect x="1950" y="0" width="10" height="1440" fill="rgb(60,60,60)"/>
+<rect x="1960" y="0" width="10" height="1440" fill="rgb(59,59,59)"/>
+<rect x="1970" y="0" width="10" height="1440" fill="rgb(58,58,58)"/>
+<rect x="1980" y="0" width="10" height="1440" fill="rgb(57,57,57)"/>
+<rect x="1990" y="0" width="10" height="1440" fill="rgb(56,56,56)"/>
+<rect x="2000" y="0" width="10" height="1440" fill="rgb(55,55,55)"/>
+<rect x="2010" y="0" width="10" height="1440" fill="rgb(54,54,54)"/>
+<rect x="2020" y="0" width="10" height="1440" fill="rgb(53,53,53)"/>
+<rect x="2030" y="0" width="10" height="1440" fill="rgb(52,52,52)"/>
+<rect x="2040" y="0" width="10" height="1440" fill="rgb(51,51,51)"/>
+<rect x="2050" y="0" width="10" height="1440" fill="rgb(50,50,50)"/>
+<rect x="2060" y="0" width="10" height="1440" fill="rgb(49,49,49)"/>
+<rect x="2070" y="0" width="10" height="1440" fill="rgb(48,48,48)"/>
+<rect x="2080" y="0" width="10" height="1440" fill="rgb(47,47,47)"/>
+<rect x="2090" y="0" width="10" height="1440" fill="rgb(46,46,46)"/>
+<rect x="2100" y="0" width="10" height="1440" fill="rgb(45,45,45)"/>
+<rect x="2110" y="0" width="10" height="1440" fill="rgb(44,44,44)"/>
+<rect x="2120" y="0" width="10" height="1440" fill="rgb(43,43,43)"/>
+<rect x="2130" y="0" width="10" height="1440" fill="rgb(42,42,42)"/>
+<rect x="2140" y="0" width="10" height="1440" fill="rgb(41,41,41)"/>
+<rect x="2150" y="0" width="10" height="1440" fill="rgb(40,40,40)"/>
+<rect x="2160" y="0" width="10" height="1440" fill="rgb(39,39,39)"/>
+<rect x="2170" y="0" width="10" height="1440" fill="rgb(38,38,38)"/>
+<rect x="2180" y="0" width="10" height="1440" fill="rgb(37,37,37)"/>
+<rect x="2190" y="0" width="10" height="1440" fill="rgb(36,36,36)"/>
+<rect x="2200" y="0" width="10" height="1440" fill="rgb(35,35,35)"/>
+<rect x="2210" y="0" width="10" height="1440" fill="rgb(34,34,34)"/>
+<rect x="2220" y="0" width="10" height="1440" fill="rgb(33,33,33)"/>
+<rect x="2230" y="0" width="10" height="1440" fill="rgb(32,32,32)"/>
+<rect x="2240" y="0" width="10" height="1440" fill="rgb(31,31,31)"/>
+<rect x="2250" y="0" width="10" height="1440" fill="rgb(30,30,30)"/>
+<rect x="2260" y="0" width="10" height="1440" fill="rgb(29,29,29)"/>
+<rect x="2270" y="0" width="10" height="1440" fill="rgb(28,28,28)"/>
+<rect x="2280" y="0" width="10" height="1440" fill="rgb(27,27,27)"/>
+<rect x="2290" y="0" width="10" height="1440" fill="rgb(26,26,26)"/>
+<rect x="2300" y="0" width="10" height="1440" fill="rgb(25,25,25)"/>
+<rect x="2310" y="0" width="10" height="1440" fill="rgb(24,24,24)"/>
+<rect x="2320" y="0" width="10" height="1440" fill="rgb(23,23,23)"/>
+<rect x="2330" y="0" width="10" height="1440" fill="rgb(22,22,22)"/>
+<rect x="2340" y="0" width="10" height="1440" fill="rgb(21,21,21)"/>
+<rect x="2350" y="0" width="10" height="1440" fill="rgb(20,20,20)"/>
+<rect x="2360" y="0" width="10" height="1440" fill="rgb(19,19,19)"/>
+<rect x="2370" y="0" width="10" height="1440" fill="rgb(18,18,18)"/>
+<rect x="2380" y="0" width="10" height="1440" fill="rgb(17,17,17)"/>
+<rect x="2390" y="0" width="10" height="1440" fill="rgb(16,16,16)"/>
+<rect x="2400" y="0" width="10" height="1440" fill="rgb(15,15,15)"/>
+<rect x="2410" y="0" width="10" height="1440" fill="rgb(14,14,14)"/>
+<rect x="2420" y="0" width="10" height="1440" fill="rgb(13,13,13)"/>
+<rect x="2430" y="0" width="10" height="1440" fill="rgb(12,12,12)"/>
+<rect x="2440" y="0" width="10" height="1440" fill="rgb(11,11,11)"/>
+<rect x="2450" y="0" width="10" height="1440" fill="rgb(10,10,10)"/>
+<rect x="2460" y="0" width="10" height="1440" fill="rgb(9,9,9)"/>
+<rect x="2470" y="0" width="10" height="1440" fill="rgb(8,8,8)"/>
+<rect x="2480" y="0" width="10" height="1440" fill="rgb(7,7,7)"/>
+<rect x="2490" y="0" width="10" height="1440" fill="rgb(6,6,6)"/>
+<rect x="2500" y="0" width="10" height="1440" fill="rgb(5,5,5)"/>
+<rect x="2510" y="0" width="10" height="1440" fill="rgb(4,4,4)"/>
+<rect x="2520" y="0" width="10" height="1440" fill="rgb(3,3,3)"/>
+<rect x="2530" y="0" width="10" height="1440" fill="rgb(2,2,2)"/>
+<rect x="2540" y="0" width="10" height="1440" fill="rgb(1,1,1)"/>
+<rect x="2550" y="0" width="10" height="1440" fill="rgb(0,0,0)"/>
+</svg>
diff --git a/slides/223015b/assets/grayscale-zoom.svg b/slides/223015b/assets/grayscale-zoom.svg
new file mode 100644
index 0000000..83bdc61
--- /dev/null
+++ b/slides/223015b/assets/grayscale-zoom.svg
@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
+<rect width="1920" height="1080" fill="#ffffff"/>
+<text x="960.0" y="100" text-anchor="middle" font-family="sans-serif" font-size="54" fill="#1a1a2e" font-weight="bold">Zoom: die 16 hellsten Abstufungen</text>
+<rect x="60.00" y="220" width="101.25" height="500" fill="rgb(255,255,255)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="110.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">255</text>
+<text x="110.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFF</text>
+<rect x="173.25" y="220" width="101.25" height="500" fill="rgb(254,254,254)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="223.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">254</text>
+<text x="223.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFE</text>
+<rect x="286.50" y="220" width="101.25" height="500" fill="rgb(253,253,253)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="337.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">253</text>
+<text x="337.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFD</text>
+<rect x="399.75" y="220" width="101.25" height="500" fill="rgb(252,252,252)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="450.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">252</text>
+<text x="450.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFC</text>
+<rect x="513.00" y="220" width="101.25" height="500" fill="rgb(251,251,251)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="563.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">251</text>
+<text x="563.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFB</text>
+<rect x="626.25" y="220" width="101.25" height="500" fill="rgb(250,250,250)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="676.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">250</text>
+<text x="676.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFA</text>
+<rect x="739.50" y="220" width="101.25" height="500" fill="rgb(249,249,249)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="790.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">249</text>
+<text x="790.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF9</text>
+<rect x="852.75" y="220" width="101.25" height="500" fill="rgb(248,248,248)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="903.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">248</text>
+<text x="903.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF8</text>
+<rect x="966.00" y="220" width="101.25" height="500" fill="rgb(247,247,247)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1016.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">247</text>
+<text x="1016.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF7</text>
+<rect x="1079.25" y="220" width="101.25" height="500" fill="rgb(246,246,246)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1129.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">246</text>
+<text x="1129.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF6</text>
+<rect x="1192.50" y="220" width="101.25" height="500" fill="rgb(245,245,245)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1243.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">245</text>
+<text x="1243.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF5</text>
+<rect x="1305.75" y="220" width="101.25" height="500" fill="rgb(244,244,244)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1356.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">244</text>
+<text x="1356.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF4</text>
+<rect x="1419.00" y="220" width="101.25" height="500" fill="rgb(243,243,243)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1469.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">243</text>
+<text x="1469.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF3</text>
+<rect x="1532.25" y="220" width="101.25" height="500" fill="rgb(242,242,242)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1582.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">242</text>
+<text x="1582.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF2</text>
+<rect x="1645.50" y="220" width="101.25" height="500" fill="rgb(241,241,241)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1696.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">241</text>
+<text x="1696.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF1</text>
+<rect x="1758.75" y="220" width="101.25" height="500" fill="rgb(240,240,240)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1809.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">240</text>
+<text x="1809.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF0</text>
+<text x="960.0" y="1020" text-anchor="middle" font-family="sans-serif" font-size="28" fill="#4a4a6a" font-style="italic">jede Stufe = Unterschied von 1/255 ≈ 0,4% Helligkeit</text>
+</svg>