add css demos for 223015c chapter 2: selectors, specificity, box-model, colors, pseudo, responsive

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

@@ -1889,6 +1889,8 @@ HTML definiert die Struktur – was ist auf der Seite. CSS definiert das Aussehe
 
 # Was ist CSS?
 
+![bg right:35%](./assets/demos/css-anatomie.png)
+
 **C**ascading **S**tyle **S**heets
 
 ```css
@@ -1984,6 +1986,8 @@ Semikolon nach jedem Paar. Doppelpunkt zwischen Property und Value.
 
 # Selektoren: Element
 
+![bg right:35%](./assets/demos/css-selector-element.png)
+
 ```css
 /* Alle <p>-Elemente */
 p {
@@ -2012,6 +2016,8 @@ Komma bedeutet "oder" – h1 oder h2 oder h3.
 
 # Selektoren: Klasse
 
+![bg right:35%](./assets/demos/css-selector-class.png)
+
 ```html
 <p class="wichtig">Dieser Text ist wichtig.</p>
 <p>Dieser nicht.</p>
@@ -2040,6 +2046,8 @@ Eine Klasse kann auf beliebig viele Elemente angewendet werden. Ein Element kann
 
 # Selektoren: ID
 
+![bg right:35%](./assets/demos/css-selector-id.png)
+
 ```html
 <nav id="hauptnavigation">...</nav>
 ```
@@ -2069,6 +2077,8 @@ In der Praxis: Klassen sind meist besser. IDs haben hohe Spezifität und sind un
 
 # Selektoren: Kombinationen
 
+![bg right:35%](./assets/demos/css-combinators.png)
+
 ```css
 /* Nachfahre (beliebig tief verschachtelt) */
 article p { line-height: 1.6; }
@@ -2105,6 +2115,8 @@ Element.Klasse: Das Element muss beides sein. "p.wichtig" heißt: nur p-Elemente
 
 # Spezifität: Welche Regel gewinnt?
 
+![bg right:35%](./assets/demos/css-specificity.png)
+
 | Selektor | Spezifität |
 |----------|------------|
 | Element (`p`) | 0,0,0,1 |
@@ -2200,6 +2212,8 @@ Margin: Außenabstand. Zwischen diesem Element und anderen.
 
 # Box-Modell: CSS
 
+![bg right:35%](./assets/demos/css-box-model.png)
+
 ```css
 .box {
     width: 200px;
@@ -2232,6 +2246,8 @@ Best Practice: Setzt das global für alle Elemente.
 
 # Farben
 
+![bg right:35%](./assets/demos/css-colors.png)
+
 ```css
 /* Keyword */
 color: red;
@@ -2300,6 +2316,8 @@ vw und vh sind Prozent des Viewports. 100vw ist die volle Bildschirmbreite.
 
 # Pseudo-Klassen
 
+![bg right:35%](./assets/demos/css-pseudo-classes.png)
+
 ```css
 /* Hover – Maus drüber */
 a:hover { color: red; }
@@ -2335,6 +2353,8 @@ Wichtig für interaktive Elemente und Zebra-Streifen in Tabellen.
 
 # Pseudo-Elemente
 
+![bg right:35%](./assets/demos/css-pseudo-elements.png)
+
 ```css
 /* Vor dem Inhalt einfügen */
 .required::before {
@@ -2371,6 +2391,8 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt
 
 # Responsive Design
 
+![bg right:35%](./assets/demos/css-responsive.png)
+
 ```css
 /* Mobile First: Basis-Styles */
 .container {